FE: Recalculation connectors stat on client/backed filter change (#1486)

Co-authored-by: German Osin <german.osin@gmail.com>

Author: Vixtir

frontend/src/components/Connect/List/ConnectorsTable/ConnectorsTable.tsx

@@ -1,9 +1,10 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { FullConnectorInfo } from 'generated-sources';
 import Table from 'components/common/NewTable';
 import { useLocalStoragePersister } from 'components/common/NewTable/ColumnResizer/lib';
 import { useQueryPersister } from 'components/common/NewTable/ColumnFilter';
 import { VisibilityState } from '@tanstack/react-table';
+import { useFilteredConnectorsDispatch } from 'components/Connect/model/FilteredConnectorsProvider';
 
 import { connectorsColumns } from './connectorsColumns/columns';
 
@@ -21,11 +22,16 @@ export const ConnectorsTable = ({
   columnSizingPersistKey = 'KafkaConnect',
   columnVisibility,
 }: ConnectorsTableProps) => {
+  const dispath = useFilteredConnectorsDispatch();
   const filterPersister = useQueryPersister(connectorsColumns);
   const columnSizingPersister = useLocalStoragePersister(
     columnSizingPersistKey
   );
 
+  const onFilterRows = useCallback((rows: FullConnectorInfo[]) => {
+    dispath({ type: 'updated', connectors: rows });
+  }, []);
+
   return (
     <Table
       data={connectors}
@@ -37,6 +43,7 @@ export const ConnectorsTable = ({
       setRowId={setRowId}
       filterPersister={filterPersister}
       columnVisibility={columnVisibility}
+      onFilterRows={onFilterRows}
     />
   );
 };

frontend/src/components/Connect/List/ListPage.tsx

@@ -8,6 +8,7 @@ import { useSearchParams } from 'react-router-dom';
 import useFts from 'components/common/Fts/useFts';
 import Fts from 'components/common/Fts/Fts';
 import { FullConnectorInfo } from 'generated-sources';
+import { FilteredConnectorsProvider } from 'components/Connect/model/FilteredConnectorsProvider';
 
 import * as S from './ListPage.styled';
 import List from './List';
@@ -26,8 +27,8 @@ const ListPage: React.FC = () => {
   );
 
   return (
-    <>
-      <ConnectorsStatistics connectors={connectors} isLoading={isLoading} />
+    <FilteredConnectorsProvider>
+      <ConnectorsStatistics isLoading={isLoading} />
       <S.Search hasInput>
         <Search
           placeholder="Search by Connect Name, Status or Type"
@@ -37,7 +38,7 @@ const ListPage: React.FC = () => {
       <Suspense fallback={<PageLoader />}>
         <List connectors={connectors} />
       </Suspense>
-    </>
+    </FilteredConnectorsProvider>
   );
 };
 

frontend/src/components/Connect/List/Statistics/Statistics.tsx

@@ -1,18 +1,18 @@
 import React, { FC, useMemo } from 'react';
 import * as Statistics from 'components/common/Statistics';
-import { FullConnectorInfo } from 'generated-sources';
+import { useFilteredConnectors } from 'components/Connect/model/FilteredConnectorsProvider';
 
 import { computeStatistics } from './models/computeStatistics';
 
 interface ConnectorsStatisticsProps {
-  connectors: FullConnectorInfo[];
   isLoading: boolean;
 }
-const ConnectorsStatistics: FC<ConnectorsStatisticsProps> = ({
-  connectors,
-  isLoading,
-}) => {
-  const statistics = useMemo(() => computeStatistics(connectors), [connectors]);
+const ConnectorsStatistics: FC<ConnectorsStatisticsProps> = ({ isLoading }) => {
+  const connectors = useFilteredConnectors();
+
+  const statistics = useMemo(() => {
+    return computeStatistics(connectors);
+  }, [connectors]);
 
   return (
     <Statistics.Container role="group">

frontend/src/components/Connect/List/Statistics/__tests__/Statistics.spec.tsx

@@ -5,6 +5,7 @@ import ConnectorsStatistics from 'components/Connect/List/Statistics/Statistics'
 import { useConnectors } from 'lib/hooks/api/kafkaConnect';
 import { connectors } from 'lib/fixtures/kafkaConnect';
 import { FullConnectorInfo } from 'generated-sources';
+import { FilteredConnectorsProvider } from 'components/Connect/model/FilteredConnectorsProvider';
 
 jest.mock('lib/hooks/api/kafkaConnect');
 jest.mock('lib/hooks/useAppParams', () => ({
@@ -25,7 +26,11 @@ describe('Kafka Connect Connectors Statistics', () => {
   function renderComponent({ data = [], isLoading }: RenderComponentProps) {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     useConnectorsMock.mockReturnValue({ data, isLoading } as any);
-    render(<ConnectorsStatistics connectors={data} isLoading={isLoading} />);
+    render(
+      <FilteredConnectorsProvider initialData={data}>
+        <ConnectorsStatistics isLoading={isLoading} />
+      </FilteredConnectorsProvider>
+    );
   }
 
   describe('when data loading', () => {

frontend/src/components/Connect/List/Statistics/models/computeStatistics.ts

@@ -1,6 +1,6 @@
 import { ConnectorState, FullConnectorInfo } from 'generated-sources';
 
-interface Statistic {
+export interface Statistic {
   connectorsCount: number;
   failedConnectorsCount: number;
   tasksCount: number;

frontend/src/components/Connect/List/__tests__/List.spec.tsx

@@ -16,6 +16,7 @@ import {
   useUpdateConnectorState,
 } from 'lib/hooks/api/kafkaConnect';
 import { FullConnectorInfo } from 'generated-sources';
+import { FilteredConnectorsProvider } from 'components/Connect/model/FilteredConnectorsProvider';
 
 const mockedUsedNavigate = jest.fn();
 const mockDelete = jest.fn();
@@ -42,7 +43,9 @@ const renderComponent = (
   render(
     <ClusterContext.Provider value={contextValue}>
       <WithRoute path={clusterConnectorsPath()}>
-        <List connectors={data} />
+        <FilteredConnectorsProvider>
+          <List connectors={data} />
+        </FilteredConnectorsProvider>
       </WithRoute>
     </ClusterContext.Provider>,
     { initialEntries: [clusterConnectorsPath(clusterName)] }

frontend/src/components/Connect/model/FilteredConnectorsProvider.tsx

@@ -0,0 +1,58 @@
+import { FullConnectorInfo } from 'generated-sources';
+import React, {
+  createContext,
+  Dispatch,
+  FC,
+  PropsWithChildren,
+  useContext,
+  useReducer,
+} from 'react';
+
+const initialConnectors: FullConnectorInfo[] = [];
+type Action = { type: 'updated'; connectors: FullConnectorInfo[] };
+
+function reducer(connectors: FullConnectorInfo[], action: Action) {
+  switch (action.type) {
+    case 'updated': {
+      return action.connectors;
+    }
+    default: {
+      throw Error(`Unknown action: ${action.type}`);
+    }
+  }
+}
+
+const ConnectorsContext = createContext<FullConnectorInfo[] | null>(null);
+const ConnectorsDispatchContext = createContext<Dispatch<Action> | null>(null);
+
+export const FilteredConnectorsProvider: FC<
+  PropsWithChildren<{ initialData?: FullConnectorInfo[] }>
+> = ({ children, initialData }) => {
+  const [connectors, dispatch] = useReducer(
+    reducer,
+    initialData ?? initialConnectors
+  );
+  return (
+    <ConnectorsContext.Provider value={connectors}>
+      <ConnectorsDispatchContext.Provider value={dispatch}>
+        {children}
+      </ConnectorsDispatchContext.Provider>
+    </ConnectorsContext.Provider>
+  );
+};
+
+export const useFilteredConnectors = () => {
+  const context = useContext(ConnectorsContext);
+  if (!context) {
+    throw new Error('useCounter must be used within a CounterProvider');
+  }
+  return context;
+};
+
+export const useFilteredConnectorsDispatch = () => {
+  const context = useContext(ConnectorsDispatchContext);
+  if (!context) {
+    throw new Error('useCounter must be used within a CounterProvider');
+  }
+  return context;
+};

frontend/src/components/common/NewTable/Table.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import type {
   ColumnDef,
   ColumnFiltersState,
@@ -77,6 +77,8 @@ export interface TableProps<TData> {
   onMouseLeave?: () => void;
 
   setRowId?: (originalRow: TData) => string;
+
+  onFilterRows?: (rows: TData[]) => void;
 }
 
 type UpdaterFn<T> = (previousState: T) => T;
@@ -163,6 +165,7 @@ function Table<TData>({
   filterPersister,
   resetPaginationOnFilter = true,
   columnVisibility,
+  onFilterRows,
 }: TableProps<TData>) {
   const [searchParams, setSearchParams] = useSearchParams();
   const location = useLocation();
@@ -273,6 +276,14 @@ function Table<TData>({
     return colSizes;
   }, [table.getState().columnSizingInfo, table.getState().columnSizing]);
 
+  useEffect(() => {
+    if (onFilterRows) {
+      const filteredRows = table.getFilteredRowModel().rows;
+      const filteredData = filteredRows.map((row) => row.original);
+      onFilterRows(filteredData);
+    }
+  }, [table.getState().columnFilters]);
+
   const handleRowClick = (row: Row<TData>) => (e: React.MouseEvent) => {
     // If row selection is enabled do not handle row click.
     if (enableRowSelection) return undefined;