Feature/1334 please add a counters of all connectors tasks and failed connectors tasks (#2002)

* Added failed connections counter

* Getting failed connectors moved to Redux selector

* Failed connectors test has been rewritten in testing-library way

* Update kafka-ui-react-app/src/components/Connect/List/List.tsx

Co-authored-by: Oleg Shur <workshur@gmail.com>

* Suggestion exepted

* Added test case for failed connectors counter

* Unused import removed

* Added failed tasks counter

* Update kafka-ui-react-app/src/redux/reducers/connect/selectors.ts

Co-authored-by: Oleg Shur <workshur@gmail.com>

* Reduce args renamed

Co-authored-by: k.morozov <k.morozov@ffin.ru>
Co-authored-by: Oleg Shur <workshur@gmail.com>

kafka-ui-react-app/src/components/Connect/List/List.tsx

@@ -21,6 +21,7 @@ export interface ListProps {
   connectors: FullConnectorInfo[];
   connects: Connect[];
   failedConnectors: FullConnectorInfo[];
+  failedTasks: number | undefined;
   fetchConnects(clusterName: ClusterName): void;
   fetchConnectors({ clusterName }: { clusterName: ClusterName }): void;
   search: string;
@@ -32,6 +33,7 @@ const List: React.FC<ListProps> = ({
   areConnectsFetching,
   areConnectorsFetching,
   failedConnectors,
+  failedTasks,
   fetchConnects,
   fetchConnectors,
   search,
@@ -75,12 +77,19 @@ const List: React.FC<ListProps> = ({
             {connectors.length}
           </Metrics.Indicator>
           <Metrics.Indicator
-            label="Failed"
+            label="Failed Connectors"
             title="Failed Connectors"
             fetching={areConnectsFetching}
           >
             {failedConnectors?.length}
           </Metrics.Indicator>
+          <Metrics.Indicator
+            label="Failed Tasks"
+            title="Failed Tasks"
+            fetching={areConnectsFetching}
+          >
+            {failedTasks}
+          </Metrics.Indicator>
         </Metrics.Section>
       </Metrics.Wrapper>
       <ControlPanelWrapper hasInput>

kafka-ui-react-app/src/components/Connect/List/ListContainer.ts

@@ -12,6 +12,7 @@ import {
   getAreConnectorsFetching,
   getConnectorSearch,
   getFailedConnectors,
+  getFailedTasks,
 } from 'redux/reducers/connect/selectors';
 import List from 'components/Connect/List/List';
 
@@ -20,6 +21,7 @@ const mapStateToProps = (state: RootState) => ({
   areConnectorsFetching: getAreConnectorsFetching(state),
   connects: getConnects(state),
   failedConnectors: getFailedConnectors(state),
+  failedTasks: getFailedTasks(state),
   connectors: getConnectors(state),
   search: getConnectorSearch(state),
 });

kafka-ui-react-app/src/components/Connect/List/__tests__/List.spec.tsx

@@ -37,6 +37,7 @@ describe('Connectors List', () => {
             areConnectsFetching
             connectors={[]}
             failedConnectors={[]}
+            failedTasks={0}
             connects={[]}
             fetchConnects={fetchConnects}
             fetchConnectors={fetchConnectors}

kafka-ui-react-app/src/redux/reducers/connect/__test__/selectors.spec.ts

@@ -20,6 +20,7 @@ describe('Connect selectors', () => {
       );
       expect(selectors.getConnectors(store.getState())).toEqual([]);
       expect(selectors.getFailedConnectors(store.getState())).toEqual([]);
+      expect(selectors.getFailedTasks(store.getState())).toEqual(0);
       expect(selectors.getIsConnectorFetching(store.getState())).toEqual(false);
       expect(selectors.getConnector(store.getState())).toEqual(null);
       expect(selectors.getConnectorStatus(store.getState())).toEqual(undefined);
@@ -74,6 +75,14 @@ describe('Connect selectors', () => {
       expect(selectors.getFailedConnectors(store.getState()).length).toEqual(1);
     });
 
+    it('returns failed tasks', () => {
+      store.dispatch({
+        type: fetchConnectors.fulfilled.type,
+        payload: { connectors },
+      });
+      expect(selectors.getFailedTasks(store.getState())).toEqual(1);
+    });
+
     it('returns connector', () => {
       store.dispatch({
         type: fetchConnector.fulfilled.type,

kafka-ui-react-app/src/redux/reducers/connect/selectors.ts

@@ -1,7 +1,11 @@
 import { createSelector } from '@reduxjs/toolkit';
 import { ConnectState, RootState } from 'redux/interfaces';
 import { createFetchingSelector } from 'redux/reducers/loader/selectors';
-import { ConnectorTaskStatus, ConnectorState } from 'generated-sources';
+import {
+  ConnectorTaskStatus,
+  ConnectorState,
+  FullConnectorInfo,
+} from 'generated-sources';
 
 import {
   deleteConnector,
@@ -47,11 +51,18 @@ export const getFailedConnectors = createSelector(
   connectState,
   ({ connectors }) => {
     return connectors.filter(
-      (connector) => connector.status.state === ConnectorState.FAILED
+      (connector: FullConnectorInfo) =>
+        connector.status.state === ConnectorState.FAILED
     );
   }
 );
 
+export const getFailedTasks = createSelector(connectState, ({ connectors }) => {
+  return connectors
+    .map((connector: FullConnectorInfo) => connector.failedTasksCount || 0)
+    .reduce((acc: number, value: number) => acc + value, 0);
+});
+
 const getConnectorFetchingStatus = createFetchingSelector(
   fetchConnector.typePrefix
 );