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 + ); + + 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 + ); + + 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 + ); + + 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 ( - - {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 ( + <> + + + Summary + + + + + + + + + + + + + + + + + + + +
+ {ProcessesLabels.ByteRate} + {formatByteRate(totalByteRateSum)}
+ {ProcessesLabels.Latency} + {formatLatency(totalLatencySum)}
+ {ProcessesLabels.Bytes} + {formatBytes(totalBytesSum)}
+
+
+ + + {data.map((itemSelected) => ( {TopologyLabels.CheckboxShowTotalBytes} - {`${formatBytes(bytes)}`} + {`${formatBytes(bytes[`${itemSelected.sourceName}-to-${itemSelected.destinationName}`] || 0)}`} )} {!!byteRate && ( {TopologyLabels.CheckboxShowCurrentByteRate} - {`${formatByteRate(byteRate)}`} + {`${formatByteRate(byteRate[`${itemSelected.sourceName}-to-${itemSelected.destinationName}`] || 0)}`} )} {!!latency && ( {TopologyLabels.CheckboxShowLatency} - {`${formatLatency(latency)}`} + {`${formatLatency(latency[`${itemSelected.sourceName}-to-${itemSelected.destinationName}`] || 0)}`} )} @@ -145,9 +195,9 @@ const EdgeDetails: FC<{ data: ProcessPairsResponse[]; metrics: TopologyMetrics | /> - ); - })} - + ))} +
+ ); }; 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 {ProcessesLabels.ByteRate} - {formatBytes(byteRates?.totalByteRateIn[itemSelected.name] || 0)} - {formatBytes(byteRates?.totalByteRateOut[itemSelected.name] || 0)} + {formatBytes(byteRate?.totalByteRateIn[itemSelected.name] || 0)} + {formatBytes(byteRate?.totalByteRateOut[itemSelected.name] || 0)}