From 0939d6140f5540bd421f19d61d862d363cff7456 Mon Sep 17 00:00:00 2001
From: David <58771979+David-DB88@users.noreply.github.com>
Date: Mon, 10 Oct 2022 19:36:53 +0400
Subject: [PATCH] Migrate Dashboard table (#2694)

* Migrate Dashboard table to the new version on table components #2682

* Added universal component to the column section and added part of test  #2682

* Added universal component for the all new tables in project  #2682

* deleted color argument on LinkCell component

* deleted link on topic count

Co-authored-by: davitbejanyan <dbejanyan@provectus.com>
---
 .../Brokers/BrokersList/BrokersList.tsx       | 13 +++-
 .../components/ConsumerGroups/List/List.tsx   |  8 ++-
 .../Dashboard/ClustersWidget/ClusterName.tsx  | 15 ++++
 .../ClustersWidget/ClustersWidget.tsx         | 68 +++++++------------
 .../__test__/ClustersWidget.spec.tsx          |  3 +-
 .../src/components/Schemas/List/List.tsx      | 12 +++-
 .../components/common/NewTable/LinkCell.tsx   |  6 +-
 .../common/NewTable/__test__/Table.spec.tsx   |  7 +-
 8 files changed, 76 insertions(+), 56 deletions(-)
 create mode 100644 kafka-ui-react-app/src/components/Dashboard/ClustersWidget/ClusterName.tsx

diff --git a/kafka-ui-react-app/src/components/Brokers/BrokersList/BrokersList.tsx b/kafka-ui-react-app/src/components/Brokers/BrokersList/BrokersList.tsx
index 9f63be31c2..54bdcef5ff 100644
--- a/kafka-ui-react-app/src/components/Brokers/BrokersList/BrokersList.tsx
+++ b/kafka-ui-react-app/src/components/Brokers/BrokersList/BrokersList.tsx
@@ -42,10 +42,19 @@ const BrokersList: React.FC = () => {
       };
     });
   }, [diskUsage, brokers]);
-
   const columns = React.useMemo<ColumnDef<typeof rows>[]>(
     () => [
-      { header: 'Broker ID', accessorKey: 'brokerId', cell: LinkCell },
+      {
+        header: 'Broker ID',
+        accessorKey: 'brokerId',
+        // eslint-disable-next-line react/no-unstable-nested-components
+        cell: ({ getValue }) => (
+          <LinkCell
+            value={`${getValue<string | number>()}`}
+            to={encodeURIComponent(`${getValue<string | number>()}`)}
+          />
+        ),
+      },
       { header: 'Segment Size', accessorKey: 'size', cell: SizeCell },
       { header: 'Segment Count', accessorKey: 'count' },
       { header: 'Port', accessorKey: 'port' },
diff --git a/kafka-ui-react-app/src/components/ConsumerGroups/List/List.tsx b/kafka-ui-react-app/src/components/ConsumerGroups/List/List.tsx
index 89be57d639..c7df01b5e9 100644
--- a/kafka-ui-react-app/src/components/ConsumerGroups/List/List.tsx
+++ b/kafka-ui-react-app/src/components/ConsumerGroups/List/List.tsx
@@ -49,7 +49,13 @@ const List: React.FC<Props> = ({ consumerGroups, totalPages }) => {
         id: ConsumerGroupOrdering.NAME,
         header: 'Group ID',
         accessorKey: 'groupId',
-        cell: LinkCell,
+        // eslint-disable-next-line react/no-unstable-nested-components
+        cell: ({ getValue }) => (
+          <LinkCell
+            value={`${getValue<string | number>()}`}
+            to={encodeURIComponent(`${getValue<string | number>()}`)}
+          />
+        ),
       },
       {
         id: ConsumerGroupOrdering.MEMBERS,
diff --git a/kafka-ui-react-app/src/components/Dashboard/ClustersWidget/ClusterName.tsx b/kafka-ui-react-app/src/components/Dashboard/ClustersWidget/ClusterName.tsx
new file mode 100644
index 0000000000..52702c348a
--- /dev/null
+++ b/kafka-ui-react-app/src/components/Dashboard/ClustersWidget/ClusterName.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { CellContext } from '@tanstack/react-table';
+import { Tag } from 'components/common/Tag/Tag.styled';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const ClusterName: React.FC<CellContext<any, unknown>> = ({ row }) => {
+  return (
+    <>
+      {row.original.readOnly && <Tag color="blue">readonly</Tag>}
+      {row.original.name}
+    </>
+  );
+};
+
+export default ClusterName;
diff --git a/kafka-ui-react-app/src/components/Dashboard/ClustersWidget/ClustersWidget.tsx b/kafka-ui-react-app/src/components/Dashboard/ClustersWidget/ClustersWidget.tsx
index 7e303c9876..0327a01001 100644
--- a/kafka-ui-react-app/src/components/Dashboard/ClustersWidget/ClustersWidget.tsx
+++ b/kafka-ui-react-app/src/components/Dashboard/ClustersWidget/ClustersWidget.tsx
@@ -1,16 +1,14 @@
 import React from 'react';
 import * as Metrics from 'components/common/Metrics';
 import { Tag } from 'components/common/Tag/Tag.styled';
-import { Table } from 'components/common/table/Table/Table.styled';
-import TableHeaderCell from 'components/common/table/TableHeaderCell/TableHeaderCell';
-import BytesFormatted from 'components/common/BytesFormatted/BytesFormatted';
-import { NavLink } from 'react-router-dom';
-import { clusterTopicsPath } from 'lib/paths';
 import Switch from 'components/common/Switch/Switch';
 import { useClusters } from 'lib/hooks/api/clusters';
-import { ServerStatus } from 'generated-sources';
+import { Cluster, ServerStatus } from 'generated-sources';
+import { ColumnDef } from '@tanstack/react-table';
+import Table, { SizeCell } from 'components/common/NewTable';
 
 import * as S from './ClustersWidget.styled';
+import ClusterName from './ClusterName';
 
 const ClustersWidget: React.FC = () => {
   const { data } = useClusters();
@@ -28,6 +26,19 @@ const ClustersWidget: React.FC = () => {
     };
   }, [data, showOfflineOnly]);
 
+  const columns = React.useMemo<ColumnDef<Cluster>[]>(
+    () => [
+      { header: 'Cluster name', accessorKey: 'name', cell: ClusterName },
+      { header: 'Version', accessorKey: 'version' },
+      { header: 'Brokers count', accessorKey: 'brokerCount' },
+      { header: 'Partitions', accessorKey: 'onlinePartitionCount' },
+      { header: 'Topics', accessorKey: 'topicCount' },
+      { header: 'Production', accessorKey: 'bytesInPerSec', cell: SizeCell },
+      { header: 'Consumption', accessorKey: 'bytesOutPerSec', cell: SizeCell },
+    ],
+    []
+  );
+
   const handleSwitch = () => setShowOfflineOnly(!showOfflineOnly);
   return (
     <>
@@ -51,45 +62,12 @@ const ClustersWidget: React.FC = () => {
         />
         <label>Only offline clusters</label>
       </S.SwitchWrapper>
-      <Table isFullwidth>
-        <thead>
-          <tr>
-            <TableHeaderCell title="Cluster name" />
-            <TableHeaderCell title="Version" />
-            <TableHeaderCell title="Brokers count" />
-            <TableHeaderCell title="Partitions" />
-            <TableHeaderCell title="Topics" />
-            <TableHeaderCell title="Production" />
-            <TableHeaderCell title="Consumption" />
-          </tr>
-        </thead>
-        <tbody>
-          {config.list.map((cluster) => (
-            <tr key={cluster.name}>
-              <S.TableCell maxWidth="99px" width="350">
-                {cluster.readOnly && <Tag color="blue">readonly</Tag>}{' '}
-                {cluster.name}
-              </S.TableCell>
-              <S.TableCell maxWidth="99px">{cluster.version}</S.TableCell>
-              <S.TableCell maxWidth="99px">{cluster.brokerCount}</S.TableCell>
-              <S.TableCell maxWidth="78px">
-                {cluster.onlinePartitionCount}
-              </S.TableCell>
-              <S.TableCell maxWidth="60px">
-                <NavLink to={clusterTopicsPath(cluster.name)}>
-                  {cluster.topicCount}
-                </NavLink>
-              </S.TableCell>
-              <S.TableCell maxWidth="85px">
-                <BytesFormatted value={cluster.bytesInPerSec} />
-              </S.TableCell>
-              <S.TableCell maxWidth="85px">
-                <BytesFormatted value={cluster.bytesOutPerSec} />
-              </S.TableCell>
-            </tr>
-          ))}
-        </tbody>
-      </Table>
+      <Table
+        columns={columns}
+        data={config?.list}
+        enableSorting
+        emptyMessage="Disk usage data not available"
+      />
     </>
   );
 };
diff --git a/kafka-ui-react-app/src/components/Dashboard/ClustersWidget/__test__/ClustersWidget.spec.tsx b/kafka-ui-react-app/src/components/Dashboard/ClustersWidget/__test__/ClustersWidget.spec.tsx
index c5fa81342c..dfdcb34179 100644
--- a/kafka-ui-react-app/src/components/Dashboard/ClustersWidget/__test__/ClustersWidget.spec.tsx
+++ b/kafka-ui-react-app/src/components/Dashboard/ClustersWidget/__test__/ClustersWidget.spec.tsx
@@ -36,8 +36,7 @@ describe('ClustersWidget', () => {
   });
 
   it('render clusterWidget cells', () => {
-    const cells = screen.getAllByRole('cells');
+    const cells = screen.getAllByRole('cell');
     expect(cells.length).toBe(14);
-    expect(cells[0]).toHaveStyle('max-width: 99px');
   });
 });
diff --git a/kafka-ui-react-app/src/components/Schemas/List/List.tsx b/kafka-ui-react-app/src/components/Schemas/List/List.tsx
index 31c280b92a..8999a81d7b 100644
--- a/kafka-ui-react-app/src/components/Schemas/List/List.tsx
+++ b/kafka-ui-react-app/src/components/Schemas/List/List.tsx
@@ -54,7 +54,17 @@ const List: React.FC = () => {
 
   const columns = React.useMemo<ColumnDef<SchemaSubject>[]>(
     () => [
-      { header: 'Subject', accessorKey: 'subject', cell: LinkCell },
+      {
+        header: 'Subject',
+        accessorKey: 'subject',
+        // eslint-disable-next-line react/no-unstable-nested-components
+        cell: ({ getValue }) => (
+          <LinkCell
+            value={`${getValue<string | number>()}`}
+            to={encodeURIComponent(`${getValue<string | number>()}`)}
+          />
+        ),
+      },
       { header: 'Id', accessorKey: 'id' },
       { header: 'Type', accessorKey: 'schemaType' },
       { header: 'Version', accessorKey: 'version' },
diff --git a/kafka-ui-react-app/src/components/common/NewTable/LinkCell.tsx b/kafka-ui-react-app/src/components/common/NewTable/LinkCell.tsx
index b6ca656d1d..e400fa0b9c 100644
--- a/kafka-ui-react-app/src/components/common/NewTable/LinkCell.tsx
+++ b/kafka-ui-react-app/src/components/common/NewTable/LinkCell.tsx
@@ -1,13 +1,11 @@
 import React from 'react';
-import { CellContext } from '@tanstack/react-table';
 import { NavLink } from 'react-router-dom';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const LinkCell: React.FC<CellContext<any, unknown>> = ({ getValue }) => {
-  const value = `${getValue<string | number>()}`;
+const LinkCell = ({ value, to = '' }: any) => {
   const handleClick: React.MouseEventHandler = (e) => e.stopPropagation();
   return (
-    <NavLink to={encodeURIComponent(value)} title={value} onClick={handleClick}>
+    <NavLink to={to} title={value} onClick={handleClick}>
       {value}
     </NavLink>
   );
diff --git a/kafka-ui-react-app/src/components/common/NewTable/__test__/Table.spec.tsx b/kafka-ui-react-app/src/components/common/NewTable/__test__/Table.spec.tsx
index 412fafd484..480f6e6db1 100644
--- a/kafka-ui-react-app/src/components/common/NewTable/__test__/Table.spec.tsx
+++ b/kafka-ui-react-app/src/components/common/NewTable/__test__/Table.spec.tsx
@@ -63,7 +63,12 @@ const columns: ColumnDef<Datum>[] = [
   {
     header: 'Text',
     accessorKey: 'text',
-    cell: LinkCell,
+    cell: ({ getValue }) => (
+      <LinkCell
+        value={`${getValue<string | number>()}`}
+        to={encodeURIComponent(`${getValue<string | number>()}`)}
+      />
+    ),
   },
   {
     header: 'Size',