Add production/consumption to topic list and topic overview

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

@@ -0,0 +1,41 @@
+import React from 'react';
+import { CellContext } from '@tanstack/react-table';
+import { Topic } from 'generated-sources';
+import BytesFormatted from 'components/common/BytesFormatted/BytesFormatted';
+import ArrowDownIcon from 'components/common/Icons/ArrowDownIcon';
+import ArrowUpIcon from 'components/common/Icons/ArrowUpIcon';
+
+export const ThroughputCell: React.FC<CellContext<Topic, unknown>> = ({
+  row: { original },
+}) => {
+  const production = original.bytesInPerSec;
+  const consumption = original.bytesOutPerSec;
+  if (production === undefined && consumption === undefined) {
+    return (
+      <>
+        <ArrowDownIcon /> N/A <ArrowUpIcon /> N/A
+      </>
+    );
+  }
+  if (production === undefined) {
+    return (
+      <>
+        <ArrowUpIcon /> <BytesFormatted value={consumption} />
+      </>
+    );
+  }
+  if (consumption === undefined) {
+    return (
+      <>
+        <ArrowDownIcon /> <BytesFormatted value={production} />
+      </>
+    );
+  }
+
+  return (
+    <>
+      <ArrowDownIcon /> <BytesFormatted value={production} /> <ArrowUpIcon />{' '}
+      <BytesFormatted value={consumption} />
+    </>
+  );
+};

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

@@ -12,6 +12,7 @@ import { PER_PAGE } from 'lib/constants';
 import { TopicTitleCell } from './TopicTitleCell';
 import ActionsCell from './ActionsCell';
 import BatchActionsbar from './BatchActionsBar';
+import { ThroughputCell } from './ThroughputCell';
 
 const TopicTable: React.FC = () => {
   const { clusterName } = useAppParams<{ clusterName: ClusterName }>();
@@ -85,6 +86,11 @@ const TopicTable: React.FC = () => {
         accessorKey: 'segmentSize',
         cell: SizeCell,
       },
+      {
+        header: 'Speed',
+        enableSorting: false,
+        cell: ThroughputCell,
+      },
       {
         id: 'actions',
         header: '',

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

@@ -92,21 +92,47 @@ describe('TopicTable Components', () => {
         screen.getByRole('link', { name: '__internal.topic' })
       ).toBeInTheDocument();
       expect(
-        screen.getByRole('row', { name: '__internal.topic 1 0 1 0 0 Bytes' })
+        screen.getByRole('row', {
+          name: /__internal.topic 1 0 1 0 0 Bytes* N\/A/,
+        })
+      ).toBeInTheDocument();
+      expect(
+        screen.getByRole('link', { name: '__internal.topic2' })
+      ).toBeInTheDocument();
+      expect(
+        screen.getByRole('row', {
+          name: /__internal.topic2 1 0 1 0* 0 Bytes* 0 Bytes/,
+        })
+      ).toBeInTheDocument();
+      expect(
+        screen.getByRole('link', { name: '__internal.topic3' })
+      ).toBeInTheDocument();
+      expect(
+        screen.getByRole('row', {
+          name: /__internal.topic3 1 0 1 0* 0 Bytes* 0 Bytes/,
+        })
+      ).toBeInTheDocument();
+      expect(
+        screen.getByRole('link', { name: '__internal.topic4' })
+      ).toBeInTheDocument();
+      expect(
+        screen.getByRole('row', {
+          name: /__internal.topic4 1 0 1 0 0 Bytes* 0 Bytes* 0 Bytes/,
+        })
       ).toBeInTheDocument();
       expect(
         screen.getByRole('link', { name: 'external.topic' })
       ).toBeInTheDocument();
       expect(
-        screen.getByRole('row', { name: 'external.topic 1 0 1 0 1 KB' })
+        screen.getByRole('row', { name: /external.topic 1 0 1 0 1 KB* 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 +234,10 @@ describe('TopicTable Components', () => {
         await 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 0 Bytes',
+          name: /__internal.topic 1 0 1 0 0 Bytes* N\/A/,
         });
         expect(internalTopicRow).toBeInTheDocument();
         expect(
@@ -221,7 +247,7 @@ describe('TopicTable Components', () => {
         ).toBeDisabled();
         // External topic action buttons are enabled
         const externalTopicRow = screen.getByRole('row', {
-          name: 'external.topic 1 0 1 0 1 KB',
+          name: /external.topic 1 0 1 0 1 KB* 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/components/common/Icons/ArrowDownIcon.tsx

@@ -8,7 +8,10 @@ const ArrowDownIcon: React.FC = () => (
     height="10"
   >
     {/* Font Awesome Pro 6.1.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. */}
-    <path d="M374.6 310.6l-160 160C208.4 476.9 200.2 480 192 480s-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 370.8V64c0-17.69 14.33-31.1 31.1-31.1S224 46.31 224 64v306.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0S387.1 298.1 374.6 310.6z" />
+    <path
+      d="M374.6 310.6l-160 160C208.4 476.9 200.2 480 192 480s-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 370.8V64c0-17.69 14.33-31.1 31.1-31.1S224 46.31 224 64v306.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0S387.1 298.1 374.6 310.6z"
+      fill="#73848C"
+    />
   </svg>
 );
 

kafka-ui-react-app/src/components/common/Icons/ArrowUpIcon.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+const ArrowUpIcon: React.FC = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="8"
+    height="10"
+    viewBox="0 0 8 10"
+  >
+    {/* Font Awesome Pro 6.1.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. */}
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M4 10C3.44772 10 3 9.55228 3 9L3 1C3 0.447714 3.44772 -3.97973e-07 4 -3.49691e-07C4.55229 -3.01409e-07 5 0.447715 5 1L5 9C5 9.55228 4.55228 10 4 10Z"
+      fill="#73848C"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M7.70711 4.70711C7.31658 5.09763 6.68342 5.09763 6.29289 4.70711L4 2.41421L1.70711 4.70711C1.31658 5.09763 0.683418 5.09763 0.292893 4.70711C-0.097631 4.31658 -0.0976309 3.68342 0.292893 3.29289L3.29289 0.292893C3.68342 -0.0976318 4.31658 -0.0976318 4.70711 0.292893L7.70711 3.29289C8.09763 3.68342 8.09763 4.31658 7.70711 4.70711Z"
+      fill="#73848C"
+    />
+  </svg>
+);
+
+export default ArrowUpIcon;

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[] = [