Add production/consumption to topic list and topic overview

kafka-ui-react-app/src/components/Topics/List/TopicTable.tsx

@@ -8,11 +8,57 @@ import { useSearchParams } from 'react-router-dom';
 import ClusterContext from 'components/contexts/ClusterContext';
 import { useTopics } from 'lib/hooks/api/topics';
 import { PER_PAGE } from 'lib/constants';
+import BytesFormatted from 'components/common/BytesFormatted/BytesFormatted';
 
 import { TopicTitleCell } from './TopicTitleCell';
 import ActionsCell from './ActionsCell';
 import BatchActionsbar from './BatchActionsBar';
 
+function formatThroughput(row: Topic) {
+  const production = row.bytesInPerSec;
+  const consumption = row.bytesOutPerSec;
+  if (production === undefined && consumption === undefined) {
+    return (
+      <tr>
+        <td>N/A</td>
+      </tr>
+    );
+  }
+  if (production === undefined) {
+    return (
+      <tr>
+        <td>
+          out: <BytesFormatted value={consumption} />
+        </td>
+      </tr>
+    );
+  }
+  if (consumption === undefined) {
+    return (
+      <tr>
+        <td>
+          in: <BytesFormatted value={production} />
+        </td>
+      </tr>
+    );
+  }
+
+  return (
+    <div>
+      <tr>
+        <td>
+          in: <BytesFormatted value={production} />
+        </td>
+      </tr>
+      <tr>
+        <td>
+          out: <BytesFormatted value={consumption} />
+        </td>
+      </tr>
+    </div>
+  );
+}
+
 const TopicTable: React.FC = () => {
   const { clusterName } = useAppParams<{ clusterName: ClusterName }>();
   const [searchParams] = useSearchParams();
@@ -85,6 +131,14 @@ const TopicTable: React.FC = () => {
         accessorKey: 'segmentSize',
         cell: SizeCell,
       },
+      {
+        header: 'Throughput',
+        accessorFn: (row) => formatThroughput(row),
+        enableSorting: false,
+        cell: ({ getValue }) => {
+          return getValue();
+        },
+      },
       {
         id: 'actions',
         header: '',

kafka-ui-react-app/src/components/Topics/List/__tests__/TopicTable.spec.tsx

@@ -92,21 +92,45 @@ describe('TopicTable Components', () => {
         screen.getByRole('link', { name: '__internal.topic' })
       ).toBeInTheDocument();
       expect(
-        screen.getByRole('row', { name: '__internal.topic 1 0 1 0 0Bytes' })
+        screen.getByRole('row', { name: '__internal.topic 1 0 1 0 0Bytes N/A' })
+      ).toBeInTheDocument();
+      expect(
+        screen.getByRole('link', { name: '__internal.topic2' })
+      ).toBeInTheDocument();
+      expect(
+        screen.getByRole('row', {
+          name: '__internal.topic2 1 0 1 0 0Bytes in: 0Bytes',
+        })
+      ).toBeInTheDocument();
+      expect(
+        screen.getByRole('link', { name: '__internal.topic3' })
+      ).toBeInTheDocument();
+      expect(
+        screen.getByRole('row', {
+          name: '__internal.topic3 1 0 1 0 0Bytes out: 0Bytes',
+        })
+      ).toBeInTheDocument();
+      expect(
+        screen.getByRole('link', { name: '__internal.topic4' })
+      ).toBeInTheDocument();
+      expect(
+        screen.getByRole('row', {
+          name: '__internal.topic4 1 0 1 0 0Bytes in: 0Bytes out: 0Bytes',
+        })
       ).toBeInTheDocument();
       expect(
         screen.getByRole('link', { name: 'external.topic' })
       ).toBeInTheDocument();
       expect(
-        screen.getByRole('row', { name: 'external.topic 1 0 1 0 1KB' })
+        screen.getByRole('row', { name: 'external.topic 1 0 1 0 1KB N/A' })
       ).toBeInTheDocument();
 
-      expect(screen.getAllByRole('checkbox').length).toEqual(3);
+      expect(screen.getAllByRole('checkbox').length).toEqual(6);
     });
     describe('Selectable rows', () => {
       it('renders selectable rows', () => {
         renderComponent({ topics: topicsPayload, pageCount: 1 });
-        expect(screen.getAllByRole('checkbox').length).toEqual(3);
+        expect(screen.getAllByRole('checkbox').length).toEqual(6);
         // Disable checkbox for internal topic
         expect(screen.getAllByRole('checkbox')[1]).toBeDisabled();
         // Disable checkbox for external topic
@@ -208,10 +232,10 @@ describe('TopicTable Components', () => {
         renderComponent({ topics: topicsPayload, pageCount: 1 });
         expect(
           screen.getAllByRole('button', { name: 'Dropdown Toggle' }).length
-        ).toEqual(2);
+        ).toEqual(5);
         // Internal topic action buttons are disabled
         const internalTopicRow = screen.getByRole('row', {
-          name: '__internal.topic 1 0 1 0 0Bytes',
+          name: '__internal.topic 1 0 1 0 0Bytes N/A',
         });
         expect(internalTopicRow).toBeInTheDocument();
         expect(
@@ -221,7 +245,7 @@ describe('TopicTable Components', () => {
         ).toBeDisabled();
         // External topic action buttons are enabled
         const externalTopicRow = screen.getByRole('row', {
-          name: 'external.topic 1 0 1 0 1KB',
+          name: 'external.topic 1 0 1 0 1KB N/A',
         });
         expect(externalTopicRow).toBeInTheDocument();
         const extBtn = within(externalTopicRow).getByRole('button', {

kafka-ui-react-app/src/components/Topics/Topic/Overview/Overview.tsx

@@ -141,6 +141,12 @@ const Overview: React.FC = () => {
           <Metrics.Indicator label="Message Count">
             {messageCount}
           </Metrics.Indicator>
+          <Metrics.Indicator label="Production">
+            <BytesFormatted value={data?.bytesInPerSec} />
+          </Metrics.Indicator>
+          <Metrics.Indicator label="Consumption">
+            <BytesFormatted value={data?.bytesOutPerSec} />
+          </Metrics.Indicator>
         </Metrics.Section>
       </Metrics.Wrapper>
       <Table

kafka-ui-react-app/src/lib/fixtures/topics.ts

@@ -49,9 +49,79 @@ export const externalTopicPayload = {
   ],
 };
 
+export const internalTopicBytesInPayload = {
+  name: '__internal.topic2',
+  internal: true,
+  partitionCount: 1,
+  replicationFactor: 1,
+  replicas: 1,
+  inSyncReplicas: 1,
+  segmentSize: 0,
+  segmentCount: 1,
+  underReplicatedPartitions: 0,
+  partitions: [
+    {
+      partition: 0,
+      leader: 1,
+      replicas: [{ broker: 1, leader: false, inSync: true }],
+      offsetMax: 0,
+      offsetMin: 0,
+    },
+  ],
+  bytesInPerSec: 0,
+};
+
+export const internalTopicBytesOutPayload = {
+  name: '__internal.topic3',
+  internal: true,
+  partitionCount: 1,
+  replicationFactor: 1,
+  replicas: 1,
+  inSyncReplicas: 1,
+  segmentSize: 0,
+  segmentCount: 1,
+  underReplicatedPartitions: 0,
+  partitions: [
+    {
+      partition: 0,
+      leader: 1,
+      replicas: [{ broker: 1, leader: false, inSync: true }],
+      offsetMax: 0,
+      offsetMin: 0,
+    },
+  ],
+  bytesOutPerSec: 0,
+};
+
+export const internalTopicThroughputPayload = {
+  name: '__internal.topic4',
+  internal: true,
+  partitionCount: 1,
+  replicationFactor: 1,
+  replicas: 1,
+  inSyncReplicas: 1,
+  segmentSize: 0,
+  segmentCount: 1,
+  underReplicatedPartitions: 0,
+  partitions: [
+    {
+      partition: 0,
+      leader: 1,
+      replicas: [{ broker: 1, leader: false, inSync: true }],
+      offsetMax: 0,
+      offsetMin: 0,
+    },
+  ],
+  bytesInPerSec: 0,
+  bytesOutPerSec: 0,
+};
+
 export const topicsPayload: Topic[] = [
   internalTopicPayload,
   externalTopicPayload,
+  internalTopicBytesInPayload,
+  internalTopicBytesOutPayload,
+  internalTopicThroughputPayload,
 ];
 
 export const topicConsumerGroups: ConsumerGroup[] = [