FE: Move cluster and connetors under kafka connect

Author: Vixtir

frontend/src/components/ClusterPage/ClusterPage.tsx

@@ -4,8 +4,6 @@ import useAppParams from 'lib/hooks/useAppParams';
 import { ClusterFeaturesEnum } from 'generated-sources';
 import {
   clusterBrokerRelativePath,
-  clusterConnectorsRelativePath,
-  clusterConnectsRelativePath,
   clusterConsumerGroupsRelativePath,
   clusterKsqlDbRelativePath,
   ClusterNameRoute,
@@ -14,20 +12,23 @@ import {
   clusterConfigRelativePath,
   getNonExactPath,
   clusterAclRelativePath,
-  kafkaConnectsPaths,
+  kafkaConnectRelativePath,
+  clusterConnectorNewRelativePath,
+  clusterConnectConnectorRelativePath,
 } from 'lib/paths';
 import ClusterContext from 'components/contexts/ClusterContext';
 import PageLoader from 'components/common/PageLoader/PageLoader';
 import { useClusters } from 'lib/hooks/api/clusters';
 import { GlobalSettingsContext } from 'components/contexts/GlobalSettingsContext';
+import New from 'components/Connect/New/New';
+import SuspenseQueryComponent from 'components/common/SuspenseQueryComponent/SuspenseQueryComponent';
+import DetailsPage from 'components/Connect/Details/DetailsPage';
 
 const Brokers = React.lazy(() => import('components/Brokers/Brokers'));
 const Topics = React.lazy(() => import('components/Topics/Topics'));
 const Schemas = React.lazy(() => import('components/Schemas/Schemas'));
-const Connect = React.lazy(() => import('components/Connect/Connect'));
-const KafkaConnectClusters = React.lazy(
-  () => import('components/KafkaConnectClustersPage/KafkaConnectClustersPage')
-);
+const KafkaConnect = React.lazy(() => import('components/Connect/Connect'));
+
 const KsqlDb = React.lazy(() => import('components/KsqlDb/KsqlDb'));
 const ClusterConfigPage = React.lazy(
   () => import('components/ClusterPage/ClusterConfigPage')
@@ -86,22 +87,29 @@ const ClusterPage: React.FC = () => {
                 element={<Schemas />}
               />
             )}
+            {contextValue.hasKafkaConnectConfigured && (
+              <Route path={clusterConnectorNewRelativePath} element={<New />} />
+            )}
             {contextValue.hasKafkaConnectConfigured && (
               <Route
-                path={getNonExactPath(clusterConnectsRelativePath)}
-                element={<Connect />}
+                path={getNonExactPath(clusterConnectConnectorRelativePath)}
+                element={
+                  <SuspenseQueryComponent>
+                    <DetailsPage />
+                  </SuspenseQueryComponent>
+                }
               />
             )}
             {contextValue.hasKafkaConnectConfigured && (
               <Route
-                path={getNonExactPath(kafkaConnectsPaths)}
-                element={<KafkaConnectClusters />}
+                path={getNonExactPath(kafkaConnectRelativePath)}
+                element={<KafkaConnect />}
               />
             )}
             {contextValue.hasKafkaConnectConfigured && (
               <Route
-                path={getNonExactPath(clusterConnectorsRelativePath)}
-                element={<Connect />}
+                path={getNonExactPath(kafkaConnectRelativePath)}
+                element={<KafkaConnect />}
               />
             )}
             {contextValue.hasKsqlDbConfigured && (

frontend/src/components/KafkaConnectClustersPage/KafkaConnectClustersPage.tsx renamed to frontend/src/components/Connect/Clusters/Clusters.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
-import ResourcePageHeading from 'components/common/ResourcePageHeading/ResourcePageHeading';
 import { Connect } from 'generated-sources';
 
 import List from './ui/List/List';
-import Statistics from './ui/Statistics/Statistics';
+import ClustersStatistics from './ui/Statistics/Statistics';
 
 const connects: Connect[] = [
   {
@@ -24,11 +23,10 @@ const connects: Connect[] = [
 
 const KafkaConnectClustersPage = () => {
   return (
-    <div>
-      <ResourcePageHeading text="Kafka connect clusters" />
-      <Statistics connects={connects} />
+    <>
+      <ClustersStatistics connects={connects} />
       <List connects={connects} />
-    </div>
+    </>
   );
 };
 

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

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

frontend/src/components/KafkaConnectClustersPage/ui/List/Cells/NameCell.tsx renamed to frontend/src/components/Connect/Clusters/ui/List/Cells/NameCell.tsx

@@ -1,30 +1,35 @@
 import React, { useMemo } from 'react';
 import { Connect } from 'generated-sources';
+import * as Statistics from 'components/common/Statistics';
 
-import * as S from './Statistics.styled';
 import { computeStatistic } from './models/computeStatistics';
-import Statistic from './Statistic/Statistic';
 
-type Props = { connects: Connect[] };
-const Statistics = ({ connects }: Props) => {
+type Props = { connects: Connect[]; isLoading: boolean };
+const ClustersStatistics = ({ connects, isLoading }: Props) => {
   const statistic = useMemo(() => {
     return computeStatistic(connects);
   }, [connects]);
   return (
-    <S.Container>
-      <Statistic title="Clusters" count={statistic.clustersCount} />
-      <Statistic
+    <Statistics.Container>
+      <Statistics.Item
+        title="Clusters"
+        count={statistic.clustersCount}
+        isLoading={isLoading}
+      />
+      <Statistics.Item
         title="Connectors"
         count={statistic.connectorsCount}
         warningCount={statistic.failedConnectorsCount}
+        isLoading={isLoading}
       />
-      <Statistic
+      <Statistics.Item
         title="Tasks"
         count={statistic.tasksCount}
         warningCount={statistic.failedTasksCount}
+        isLoading={isLoading}
       />
-    </S.Container>
+    </Statistics.Container>
   );
 };
 
-export default Statistics;
+export default ClustersStatistics;

frontend/src/components/KafkaConnectClustersPage/ui/List/Cells/TasksCell.tsx renamed to frontend/src/components/Connect/Clusters/ui/List/Cells/TasksCell.tsx

@@ -1,26 +1,69 @@
 import React from 'react';
-import { Navigate, Routes, Route } from 'react-router-dom';
+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 ListPage from './List/ListPage';
-import New from './New/New';
 import DetailsPage from './Details/DetailsPage';
+import New from './New/New';
+import Connectors from './List/ListPage';
+import Header from './Header/Header';
 
 const Connect: React.FC = () => {
+  const { clusterName } = useAppParams<ClusterNameRoute>();
+
+  return (
+    <>
+      <Header />
+      <Navbar role="navigation">
+        <NavLink
+          to={kafkaConnectClustersPath(clusterName)}
+          className={({ isActive }) => (isActive ? 'is-active' : '')}
+          end
+        >
+          Clusters
+        </NavLink>
+        <NavLink
+          to={clusterConnectorsPath(clusterName)}
+          className={({ isActive }) => (isActive ? 'is-active' : '')}
+          end
+        >
+          Connectors
+        </NavLink>
+      </Navbar>
+      <Routes>
+        <Route
+          index
+          element={
+            <Navigate to={kafkaConnectClustersPath(clusterName)} replace />
+          }
+        />
+        <Route path={kafkaConnectClustersRelativePath} element={<Clusters />} />
+        <Route path={clusterConnectorsRelativePath} element={<Connectors />} />
+      </Routes>
+    </>
+  );
+};
+
+const ConnectOld: React.FC = () => {
   const { clusterName } = useAppParams();
 
   return (
     <Routes>
-      <Route index element={<ListPage />} />
+      <Route index element={<Connectors />} />
       <Route path={clusterConnectorNewRelativePath} element={<New />} />
       <Route
         path={getNonExactPath(clusterConnectConnectorRelativePath)}

frontend/src/components/KafkaConnectClustersPage/ui/List/List.tsx renamed to frontend/src/components/Connect/Clusters/ui/List/List.tsx

@@ -0,0 +1,42 @@
+import { ActionButton } from 'components/common/ActionComponent';
+import ResourcePageHeading from 'components/common/ResourcePageHeading/ResourcePageHeading';
+import Tooltip from 'components/common/Tooltip/Tooltip';
+import ClusterContext from 'components/contexts/ClusterContext';
+import { ResourceType, Action } from 'generated-sources';
+import { useConnects } from 'lib/hooks/api/kafkaConnect';
+import useAppParams from 'lib/hooks/useAppParams';
+import { clusterConnectorNewPath, ClusterNameRoute } from 'lib/paths';
+import React from 'react';
+
+const Header = () => {
+  const { isReadOnly } = React.useContext(ClusterContext);
+  const { clusterName } = useAppParams<ClusterNameRoute>();
+  const { data: connects = [] } = useConnects(clusterName);
+  return (
+    <ResourcePageHeading text="Kafka Connect">
+      {!isReadOnly && (
+        <Tooltip
+          value={
+            <ActionButton
+              buttonType="primary"
+              buttonSize="M"
+              disabled={!connects.length}
+              to={`${clusterConnectorNewPath(clusterName)}`}
+              permission={{
+                resource: ResourceType.CONNECT,
+                action: Action.CREATE,
+              }}
+            >
+              Create Connector
+            </ActionButton>
+          }
+          showTooltip={!connects.length}
+          content="No Connects available"
+          placement="left"
+        />
+      )}
+    </ResourcePageHeading>
+  );
+};
+
+export default Header;