Export tables to CSV

frontend/package.json

@@ -27,6 +27,7 @@
     "react-error-boundary": "4.0.13",
     "react-hook-form": "7.54.2",
     "react-hot-toast": "2.4.1",
+    "react-innertext": "1.1.5",
     "react-is": "18.2.0",
     "react-multi-select-component": "4.3.4",
     "react-router-dom": "6.23.0",

frontend/src/components/Brokers/BrokersList/BrokersList.tsx

@@ -2,14 +2,18 @@ import React, { useMemo } from 'react';
 import { ClusterName } from 'lib/interfaces/cluster';
 import { useNavigate } from 'react-router-dom';
 import useAppParams from 'lib/hooks/useAppParams';
-import Table from 'components/common/NewTable';
+import Table, {
+  exportTableCSV,
+  TableProvider,
+} from 'components/common/NewTable';
 import { clusterBrokerPath } from 'lib/paths';
 import { useBrokers } from 'lib/hooks/api/brokers';
 import { useClusterStats } from 'lib/hooks/api/clusters';
 import ResourcePageHeading from 'components/common/ResourcePageHeading/ResourcePageHeading';
+import { Button } from 'components/common/Button/Button';
 
-import { BrokersMetrics } from './BrokersMetrics/BrokersMetrics';
 import { getBrokersTableColumns, getBrokersTableRows } from './lib';
+import { BrokersMetrics } from './BrokersMetrics/BrokersMetrics';
 
 const BrokersList: React.FC = () => {
   const navigate = useNavigate();
@@ -44,30 +48,48 @@ const BrokersList: React.FC = () => {
   const columns = useMemo(() => getBrokersTableColumns(), []);
 
   return (
-    <>
-      <ResourcePageHeading text="Brokers" />
+    <TableProvider>
+      {({ table }) => {
+        const handleExportClick = () => {
+          exportTableCSV(table, { prefix: 'brokers' });
+        };
+
+        return (
+          <>
+            <ResourcePageHeading text="Brokers">
+              <Button
+                buttonType="primary"
+                buttonSize="M"
+                onClick={handleExportClick}
+              >
+                Export CSV
+              </Button>
+            </ResourcePageHeading>
 
-      <BrokersMetrics
-        brokerCount={brokerCount}
-        inSyncReplicasCount={inSyncReplicasCount}
-        outOfSyncReplicasCount={outOfSyncReplicasCount}
-        version={version}
-        activeControllers={activeControllers}
-        offlinePartitionCount={offlinePartitionCount}
-        onlinePartitionCount={onlinePartitionCount}
-        underReplicatedPartitionCount={underReplicatedPartitionCount}
-      />
+            <BrokersMetrics
+              brokerCount={brokerCount}
+              inSyncReplicasCount={inSyncReplicasCount}
+              outOfSyncReplicasCount={outOfSyncReplicasCount}
+              version={version}
+              activeControllers={activeControllers}
+              offlinePartitionCount={offlinePartitionCount}
+              onlinePartitionCount={onlinePartitionCount}
+              underReplicatedPartitionCount={underReplicatedPartitionCount}
+            />
 
-      <Table
-        columns={columns}
-        data={rows}
-        enableSorting
-        onRowClick={({ original: { brokerId } }) =>
-          navigate(clusterBrokerPath(clusterName, brokerId))
-        }
-        emptyMessage="No clusters are online"
-      />
-    </>
+            <Table
+              columns={columns}
+              data={rows}
+              enableSorting
+              onRowClick={({ original: { brokerId } }) =>
+                navigate(clusterBrokerPath(clusterName, brokerId))
+              }
+              emptyMessage="No clusters are online"
+            />
+          </>
+        );
+      }}
+    </TableProvider>
   );
 };
 

frontend/src/components/Brokers/BrokersList/lib/utils.ts

@@ -68,6 +68,7 @@ export const getBrokersTableColumns = () => {
     }),
     columnHelper.accessor('replicasSkew', {
       header: SkewHeader,
+      meta: { csv: 'Replicas skew' },
       cell: Cell.Skew,
     }),
     columnHelper.accessor('partitionsLeader', { header: 'Leaders' }),

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

@@ -2,15 +2,23 @@ import AlertBadge from 'components/common/AlertBadge/AlertBadge';
 import { Connect } from 'generated-sources';
 import React from 'react';
 
-type Props = { connect: Connect };
-const ConnectorsCell = ({ connect }: Props) => {
+export const getConnectorsCountText = (connect: Connect) => {
   const count = connect.connectorsCount ?? 0;
   const failedCount = connect.failedConnectorsCount ?? 0;
-  const text = `${count - failedCount}/${count}`;
 
-  if (count === 0) {
-    return null;
-  }
+  return {
+    count,
+    failedCount,
+    text: `${count - failedCount}/${count}`,
+  };
+};
+
+type Props = { connect: Connect };
+
+const ConnectorsCell = ({ connect }: Props) => {
+  const { count, failedCount, text } = getConnectorsCountText(connect);
+
+  if (count === 0) return null;
 
   if (failedCount > 0) {
     return (

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

@@ -2,15 +2,20 @@ import AlertBadge from 'components/common/AlertBadge/AlertBadge';
 import { Connect } from 'generated-sources';
 import React from 'react';
 
-type Props = { connect: Connect };
-const TasksCell = ({ connect }: Props) => {
+export const getTasksCountText = (connect: Connect) => {
   const count = connect.tasksCount ?? 0;
   const failedCount = connect.failedTasksCount ?? 0;
   const text = `${count - failedCount}/${count}`;
 
-  if (!count) {
-    return null;
-  }
+  return { count, failedCount, text };
+};
+
+type Props = { connect: Connect };
+
+const TasksCell = ({ connect }: Props) => {
+  const { count, failedCount, text } = getTasksCountText(connect);
+
+  if (!count) return null;
 
   if (failedCount > 0) {
     return (

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

@@ -7,29 +7,31 @@ import { useNavigate } from 'react-router-dom';
 import { clusterConnectorsPath } from 'lib/paths';
 import { createColumnHelper } from '@tanstack/react-table';
 
-import ConnectorsCell from './Cells/ConnectorsCell';
+import ConnectorsCell, { getConnectorsCountText } from './Cells/ConnectorsCell';
 import NameCell from './Cells/NameCell';
-import TasksCell from './Cells/TasksCell';
+import TasksCell, { getTasksCountText } from './Cells/TasksCell';
 
 const helper = createColumnHelper<Connect>();
 export const columns = [
-  helper.accessor('name', { cell: NameCell, size: 600 }),
+  helper.accessor('name', { header: 'Name', cell: NameCell, size: 600 }),
   helper.accessor('version', {
     header: 'Version',
     cell: ({ getValue }) => getValue(),
     enableSorting: true,
   }),
-  helper.display({
+  helper.accessor('connectorsCount', {
     header: 'Connectors',
     id: 'connectors',
     cell: (props) => <ConnectorsCell connect={props.row.original} />,
     size: 100,
+    meta: { csvFn: (row) => getConnectorsCountText(row).text },
   }),
-  helper.display({
+  helper.accessor('tasksCount', {
     header: 'Running tasks',
     id: 'tasks',
     cell: (props) => <TasksCell connect={props.row.original} />,
     size: 100,
+    meta: { csvFn: (row) => getTasksCountText(row).text },
   }),
 ];
 

frontend/src/components/Connect/Connect.tsx

@@ -10,6 +10,7 @@ import {
 import useAppParams from 'lib/hooks/useAppParams';
 import Navbar from 'components/common/Navigation/Navbar.styled';
 import Clusters from 'components/Connect/Clusters/Clusters';
+import { TableProvider } from 'components/common/NewTable';
 
 import Connectors from './List/ListPage';
 import Header from './Header/Header';
@@ -18,7 +19,7 @@ const Connect: React.FC = () => {
   const { clusterName } = useAppParams<ClusterNameRoute>();
 
   return (
-    <>
+    <TableProvider>
       <Header />
       <Navbar role="navigation">
         <NavLink
@@ -46,7 +47,7 @@ const Connect: React.FC = () => {
         <Route path={kafkaConnectClustersRelativePath} element={<Clusters />} />
         <Route path={clusterConnectorsRelativePath} element={<Connectors />} />
       </Routes>
-    </>
+    </TableProvider>
   );
 };
 

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

@@ -5,13 +5,47 @@ 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 {
+  clusterConnectorNewPath,
+  clusterConnectorsRelativePath,
+  ClusterNameRoute,
+  kafkaConnectClustersRelativePath,
+} from 'lib/paths';
 import React from 'react';
+import { exportTableCSV, useTableInstance } from 'components/common/NewTable';
+import { Button } from 'components/common/Button/Button';
+
+type ConnectPage =
+  | typeof kafkaConnectClustersRelativePath
+  | typeof clusterConnectorsRelativePath;
+
+const getCsvPrefix = (page: ConnectPage) => {
+  let prefix = 'kafka-connect';
+
+  if (page === clusterConnectorsRelativePath) {
+    prefix += '-connectors';
+  }
+
+  if (page === kafkaConnectClustersRelativePath) {
+    prefix += '-clusters';
+  }
+
+  return prefix;
+};
 
 const Header = () => {
   const { isReadOnly } = React.useContext(ClusterContext);
-  const { clusterName } = useAppParams<ClusterNameRoute>();
+  const { '*': currentPath, clusterName } = useAppParams<
+    ClusterNameRoute & { ['*']: ConnectPage }
+  >();
   const { data: connects = [] } = useConnects(clusterName, true);
+
+  const instance = useTableInstance();
+
+  const handleExportClick = () => {
+    exportTableCSV(instance?.table, { prefix: getCsvPrefix(currentPath) });
+  };
+
   return (
     <ResourcePageHeading text="Kafka Connect">
       {!isReadOnly && (
@@ -35,6 +69,10 @@ const Header = () => {
           placement="left"
         />
       )}
+
+      <Button buttonType="primary" buttonSize="M" onClick={handleExportClick}>
+        Export CSV
+      </Button>
     </ResourcePageHeading>
   );
 };

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

@@ -12,6 +12,13 @@ jest.mock('lib/hooks/api/kafkaConnect', () => ({
   useConnects: jest.fn(),
 }));
 
+jest.mock('components/common/NewTable', () => ({
+  useTableInstance: () => ({
+    table: null,
+  }),
+  exportTableCSV: jest.fn(),
+}));
+
 describe('Kafka Connect header', () => {
   beforeEach(() => {
     (useConnects as jest.Mock).mockImplementation(() => ({

frontend/src/components/Connect/List/ConnectorsTable/connectorsColumns/cells/RunningTasksCell.tsx

@@ -3,19 +3,23 @@ import { FullConnectorInfo } from 'generated-sources';
 import { CellContext } from '@tanstack/react-table';
 import AlertBadge from 'components/common/AlertBadge/AlertBadge';
 
-const RunningTasksCell: React.FC<CellContext<FullConnectorInfo, unknown>> = ({
-  row,
-}) => {
-  const { tasksCount, failedTasksCount } = row.original;
+export const getRunningTasksCountText = (connector: FullConnectorInfo) => {
+  const { tasksCount, failedTasksCount } = connector;
 
   const failedCount = failedTasksCount ?? 0;
   const count = tasksCount ?? 0;
 
   const text = `${count - failedCount}/${count}`;
 
-  if (!tasksCount) {
-    return null;
-  }
+  return { count, failedCount, text };
+};
+
+const RunningTasksCell: React.FC<CellContext<FullConnectorInfo, unknown>> = ({
+  row,
+}) => {
+  const { count, failedCount, text } = getRunningTasksCountText(row.original);
+
+  if (!count) return null;
 
   if (failedCount > 0) {
     return (