Add production/consumption to topic list and topic overview

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

@@ -13,6 +13,27 @@ import { TopicTitleCell } from './TopicTitleCell';
 import ActionsCell from './ActionsCell';
 import BatchActionsbar from './BatchActionsBar';
 
+import BytesFormatted from 'components/common/BytesFormatted/BytesFormatted';
+
+function formatThroughput(row: Topic) {
+  const production = row.bytesInPerSec;
+  const consumption = row.bytesOutPerSec;
+  if (production === undefined && consumption === undefined) {
+    return (<tr>N/A</tr>);
+  } else if (production === undefined) {
+    return (<tr>out: <BytesFormatted value={consumption}/> </tr>);
+  } else if (consumption === undefined)  {
+    return (<tr>in: <BytesFormatted value={production}/></tr>);
+  } else {
+    return (
+      <div>
+        <tr>in: <BytesFormatted value={production}/></tr>
+        <tr>out: <BytesFormatted value={consumption}/></tr>
+      </div>
+    );
+  }
+}
+
 const TopicTable: React.FC = () => {
   const { clusterName } = useAppParams<{ clusterName: ClusterName }>();
   const [searchParams] = useSearchParams();
@@ -85,6 +106,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/Topic/Overview/Overview.tsx

@@ -88,6 +88,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 isFullwidth>