FE: Use api query

Author: Vixtir

frontend/src/components/Connect/Clusters/Clusters.tsx

@@ -1,10 +1,13 @@
 import React from 'react';
 import { Connect } from 'generated-sources';
+import { useConnects } from 'lib/hooks/api/kafkaConnect';
+import useAppParams from 'lib/hooks/useAppParams';
+import { ClusterNameRoute } from 'lib/paths';
 
-import List from './ui/List/List';
 import ClustersStatistics from './ui/Statistics/Statistics';
+import List from './ui/List/List';
 
-const connects: Connect[] = [
+const testConnects: Connect[] = [
   {
     name: 'local',
     connectorsCount: 5,
@@ -22,10 +25,12 @@ const connects: Connect[] = [
 ];
 
 const KafkaConnectClustersPage = () => {
+  const { clusterName } = useAppParams<ClusterNameRoute>();
+  const { data: connects, isLoading } = useConnects(clusterName, true);
   return (
     <>
-      <ClustersStatistics connects={connects} />
-      <List connects={connects} />
+      <ClustersStatistics connects={connects ?? []} isLoading={isLoading} />
+      <List connects={connects ?? []} />
     </>
   );
 };

frontend/src/components/Connect/Clusters/ui/List/Cells/ConnectorsCell.tsx

@@ -8,6 +8,10 @@ const ConnectorsCell = ({ connect }: Props) => {
   const failedCount = connect.failedConnectorsCount ?? 0;
   const text = `${count - failedCount}/${count}`;
 
+  if (count === 0) {
+    return null;
+  }
+
   if (failedCount > 0) {
     return (
       <AlertBadge>

frontend/src/components/Connect/Connect.tsx

@@ -1,24 +1,16 @@
 import React from 'react';
 import { Navigate, Routes, Route, NavLink } from 'react-router-dom';
 import {
-  RouteParams,
-  clusterConnectConnectorRelativePath,
-  clusterConnectConnectorsRelativePath,
-  clusterConnectorNewRelativePath,
-  getNonExactPath,
   clusterConnectorsPath,
   ClusterNameRoute,
   kafkaConnectClustersPath,
   kafkaConnectClustersRelativePath,
   clusterConnectorsRelativePath,
 } from 'lib/paths';
 import useAppParams from 'lib/hooks/useAppParams';
-import SuspenseQueryComponent from 'components/common/SuspenseQueryComponent/SuspenseQueryComponent';
 import Navbar from 'components/common/Navigation/Navbar.styled';
 import Clusters from 'components/Connect/Clusters/Clusters';
 
-import DetailsPage from './Details/DetailsPage';
-import New from './New/New';
 import Connectors from './List/ListPage';
 import Header from './Header/Header';
 
@@ -58,31 +50,4 @@ const Connect: React.FC = () => {
   );
 };
 
-const ConnectOld: React.FC = () => {
-  const { clusterName } = useAppParams();
-
-  return (
-    <Routes>
-      <Route index element={<Connectors />} />
-      <Route path={clusterConnectorNewRelativePath} element={<New />} />
-      <Route
-        path={getNonExactPath(clusterConnectConnectorRelativePath)}
-        element={
-          <SuspenseQueryComponent>
-            <DetailsPage />
-          </SuspenseQueryComponent>
-        }
-      />
-      <Route
-        path={clusterConnectConnectorsRelativePath}
-        element={<Navigate to={clusterConnectorsPath(clusterName)} replace />}
-      />
-      <Route
-        path={RouteParams.connectName}
-        element={<Navigate to="/" replace />}
-      />
-    </Routes>
-  );
-};
-
 export default Connect;

frontend/src/components/Connect/Header/Header.tsx

@@ -11,7 +11,7 @@ import React from 'react';
 const Header = () => {
   const { isReadOnly } = React.useContext(ClusterContext);
   const { clusterName } = useAppParams<ClusterNameRoute>();
-  const { data: connects = [] } = useConnects(clusterName);
+  const { data: connects = [] } = useConnects(clusterName, true);
   return (
     <ResourcePageHeading text="Kafka Connect">
       {!isReadOnly && (

frontend/src/lib/hooks/api/kafkaConnect.ts

@@ -19,10 +19,11 @@ interface CreateConnectorProps {
   newConnector: NewConnector;
 }
 
-const connectsKey = (clusterName: ClusterName) => [
+const connectsKey = (clusterName: ClusterName, withStats: boolean) => [
   'clusters',
   clusterName,
   'connects',
+  withStats,
 ];
 const connectorsKey = (clusterName: ClusterName, search?: string) => {
   const base = ['clusters', clusterName, 'connectors'];
@@ -44,9 +45,9 @@ const connectorTasksKey = (props: UseConnectorProps) => [
   'tasks',
 ];
 
-export function useConnects(clusterName: ClusterName) {
-  return useQuery(connectsKey(clusterName), () =>
-    api.getConnects({ clusterName })
+export function useConnects(clusterName: ClusterName, withStats = false) {
+  return useQuery(connectsKey(clusterName, withStats), () =>
+    api.getConnects({ clusterName, withStats })
   );
 }
 export function useConnectors(clusterName: ClusterName, search?: string) {