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>

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' },

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,

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;

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"
+      />
     </>
   );
 };

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');
   });
 });

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' },

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>
   );

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',