From f90351f8254d1e8b970ce04b14c590954920b0b8 Mon Sep 17 00:00:00 2001
From: bartoval <vabarjs@gmail.com>
Date: Mon, 5 Aug 2024 14:16:02 +0200
Subject: [PATCH] refactor(Topology): :recycle: Add metrics to the edge
 topology details

---
 src/pages/Topology/components/EdgeDetails.tsx | 136 ++++++++++++------
 src/pages/Topology/components/NodeDetails.tsx |  10 +-
 2 files changed, 98 insertions(+), 48 deletions(-)

diff --git a/src/pages/Topology/components/EdgeDetails.tsx b/src/pages/Topology/components/EdgeDetails.tsx
index c87e55ef..03c07ff7 100644
--- a/src/pages/Topology/components/EdgeDetails.tsx
+++ b/src/pages/Topology/components/EdgeDetails.tsx
@@ -1,6 +1,10 @@
 import { FC } from 'react';
 
 import {
+  Card,
+  CardBody,
+  CardHeader,
+  CardTitle,
   DataList,
   DataListAction,
   DataListCell,
@@ -15,6 +19,7 @@ import {
   Stack,
   StackItem
 } from '@patternfly/react-core';
+import { Table, Tbody, Td, Tr } from '@patternfly/react-table';
 import { Link } from 'react-router-dom';
 
 import { ProcessPairsResponse } from '@API/REST.interfaces';
@@ -26,44 +31,89 @@ import { ProcessesLabels, ProcessesRoutesPaths } from '@pages/Processes/Processe
 import { TopologyLabels } from '../Topology.enum';
 import { TopologyMetrics } from '../Topology.interfaces';
 
-const EdgeDetails: FC<{ data: ProcessPairsResponse[]; metrics: TopologyMetrics | null }> = function ({
-  data,
-  metrics
-}) {
+const EdgeDetails: FC<{ data: ProcessPairsResponse[]; metrics: TopologyMetrics }> = function ({ data, metrics }) {
+  const sourceNames = data.map((itemSelected) => itemSelected.sourceName);
+  const destinationNames = data.map((itemSelected) => itemSelected.destinationName);
+
+  const bytes = metrics.bytesByProcessPairs.reduce(
+    (acc, { metric, value }) => {
+      const id = `${metric.sourceProcess}-to-${metric.destProcess}`;
+
+      if (sourceNames.includes(metric.sourceProcess) && destinationNames.includes(metric.destProcess)) {
+        acc[id] = (acc[id] || 0) + Number(value[1]);
+      }
+
+      return acc;
+    },
+    {} as Record<string, number>
+  );
+
+  const byteRate = metrics.byteRateByProcessPairs.reduce(
+    (acc, { metric, value }) => {
+      const id = `${metric.sourceProcess}-to-${metric.destProcess}`;
+
+      if (sourceNames.includes(metric.sourceProcess) && destinationNames.includes(metric.destProcess)) {
+        acc[id] = (acc[id] || 0) + Number(value[1]);
+      }
+
+      return acc;
+    },
+    {} as Record<string, number>
+  );
+
+  const latency = metrics.latencyByProcessPairs.reduce(
+    (acc, { metric, value }) => {
+      const id = `${metric.sourceProcess}-to-${metric.destProcess}`;
+
+      if (sourceNames.includes(metric.sourceProcess) && destinationNames.includes(metric.destProcess)) {
+        acc[id] = (acc[id] || 0) + Number(value[1]);
+      }
+
+      return acc;
+    },
+    {} as Record<string, number>
+  );
+
+  const totalByteRateSum = Object.values(byteRate).reduce((acc, val) => acc + val, 0);
+  const totalBytesSum = Object.values(bytes).reduce((acc, val) => acc + val, 0);
+  const totalLatencySum = Object.values(latency).reduce((acc, val) => acc + val, 0);
+
   return (
-    <DataList aria-label="">
-      {data.map((itemSelected) => {
-        const sourceName = itemSelected.sourceName;
-        const destinationName = itemSelected.destinationName;
-
-        let bytes = 0;
-        metrics?.bytesByProcessPairs.forEach(({ metric, value }) => {
-          if (metric.sourceProcess === sourceName && metric.destProcess === destinationName) {
-            bytes = Number(value[1]);
-          }
-
-          return metric;
-        });
-
-        let byteRate = 0;
-        metrics?.byteRateByProcessPairs.forEach(({ metric, value }) => {
-          if (metric.sourceProcess === sourceName && metric.destProcess === destinationName) {
-            byteRate = Number(value[1]);
-          }
-
-          return metric;
-        });
-
-        let latency = 0;
-        metrics?.latencyByProcessPairs.forEach(({ metric, value }) => {
-          if (metric.sourceProcess === sourceName && metric.destProcess === destinationName) {
-            latency = Number(value[1]);
-          }
-
-          return metric;
-        });
-
-        return (
+    <>
+      <Card isPlain>
+        <CardHeader>
+          <CardTitle>Summary</CardTitle>
+        </CardHeader>
+        <CardBody>
+          <Table borders={false} variant="compact">
+            <Tbody>
+              <Tr>
+                <Td>
+                  <b>{ProcessesLabels.ByteRate}</b>
+                </Td>
+                <Td>{formatByteRate(totalByteRateSum)}</Td>
+              </Tr>
+
+              <Tr>
+                <Td>
+                  <b>{ProcessesLabels.Latency}</b>
+                </Td>
+                <Td>{formatLatency(totalLatencySum)}</Td>
+              </Tr>
+
+              <Tr>
+                <Td>
+                  <b>{ProcessesLabels.Bytes}</b>
+                </Td>
+                <Td>{formatBytes(totalBytesSum)}</Td>
+              </Tr>
+            </Tbody>
+          </Table>
+        </CardBody>
+      </Card>
+
+      <DataList aria-label="">
+        {data.map((itemSelected) => (
           <DataListItem key={itemSelected.identity}>
             <DataListItemRow>
               <DataListItemCells
@@ -105,21 +155,21 @@ const EdgeDetails: FC<{ data: ProcessPairsResponse[]; metrics: TopologyMetrics |
                         {!!bytes && (
                           <DescriptionListGroup>
                             <DescriptionListTerm>{TopologyLabels.CheckboxShowTotalBytes}</DescriptionListTerm>
-                            <DescriptionListDescription>{`${formatBytes(bytes)}`}</DescriptionListDescription>
+                            <DescriptionListDescription>{`${formatBytes(bytes[`${itemSelected.sourceName}-to-${itemSelected.destinationName}`] || 0)}`}</DescriptionListDescription>
                           </DescriptionListGroup>
                         )}
 
                         {!!byteRate && (
                           <DescriptionListGroup>
                             <DescriptionListTerm>{TopologyLabels.CheckboxShowCurrentByteRate}</DescriptionListTerm>
-                            <DescriptionListDescription>{`${formatByteRate(byteRate)}`}</DescriptionListDescription>
+                            <DescriptionListDescription>{`${formatByteRate(byteRate[`${itemSelected.sourceName}-to-${itemSelected.destinationName}`] || 0)}`}</DescriptionListDescription>
                           </DescriptionListGroup>
                         )}
 
                         {!!latency && (
                           <DescriptionListGroup>
                             <DescriptionListTerm>{TopologyLabels.CheckboxShowLatency}</DescriptionListTerm>
-                            <DescriptionListDescription>{`${formatLatency(latency)}`}</DescriptionListDescription>
+                            <DescriptionListDescription>{`${formatLatency(latency[`${itemSelected.sourceName}-to-${itemSelected.destinationName}`] || 0)}`}</DescriptionListDescription>
                           </DescriptionListGroup>
                         )}
                       </Flex>
@@ -145,9 +195,9 @@ const EdgeDetails: FC<{ data: ProcessPairsResponse[]; metrics: TopologyMetrics |
               />
             </DataListItemRow>
           </DataListItem>
-        );
-      })}
-    </DataList>
+        ))}
+      </DataList>
+    </>
   );
 };
 
diff --git a/src/pages/Topology/components/NodeDetails.tsx b/src/pages/Topology/components/NodeDetails.tsx
index 91a1e547..dd70e890 100644
--- a/src/pages/Topology/components/NodeDetails.tsx
+++ b/src/pages/Topology/components/NodeDetails.tsx
@@ -63,7 +63,7 @@ const NodeDetails: FC<{ data: ProcessResponse[]; metrics: TopologyMetrics }> = f
     return acc;
   }, initialTotals);
 
-  const byteRates = metrics?.byteRateByProcessPairs.reduce((acc, { metric, value }) => {
+  const byteRate = metrics?.byteRateByProcessPairs.reduce((acc, { metric, value }) => {
     if (names.includes(metric.sourceProcess) && metric.direction === FlowDirection.Incoming) {
       acc.totalByteRateOut[metric.sourceProcess] = (acc.totalByteRateOut[metric.sourceProcess] || 0) + Number(value[1]);
     }
@@ -75,8 +75,8 @@ const NodeDetails: FC<{ data: ProcessResponse[]; metrics: TopologyMetrics }> = f
     return acc;
   }, initialTotals);
 
-  const byteRateInValues = Object.values(byteRates.totalByteRateIn);
-  const byteRateOutValues = Object.values(byteRates.totalByteRateOut);
+  const byteRateInValues = Object.values(byteRate.totalByteRateIn);
+  const byteRateOutValues = Object.values(byteRate.totalByteRateOut);
 
   const totalBytesInSum = Object.values(bytes.totalBytesIn).reduce((acc, val) => acc + val, 0);
   const totalBytesOutSum = Object.values(bytes.totalBytesOut).reduce((acc, val) => acc + val, 0);
@@ -185,8 +185,8 @@ const NodeDetails: FC<{ data: ProcessResponse[]; metrics: TopologyMetrics }> = f
                             <Th>
                               <b>{ProcessesLabels.ByteRate}</b>
                             </Th>
-                            <Td>{formatBytes(byteRates?.totalByteRateIn[itemSelected.name] || 0)}</Td>
-                            <Td>{formatBytes(byteRates?.totalByteRateOut[itemSelected.name] || 0)}</Td>
+                            <Td>{formatBytes(byteRate?.totalByteRateIn[itemSelected.name] || 0)}</Td>
+                            <Td>{formatBytes(byteRate?.totalByteRateOut[itemSelected.name] || 0)}</Td>
                           </Tr>
                           <Tr>
                             <Th>