Skip to content

Commit

Permalink
Merge pull request #435 from bartoval/add_summary_sidebar_edge
Browse files Browse the repository at this point in the history 
refactor(Topology): ♻️ Add metrics to the edge topology details
  • Loading branch information
@bartoval
bartoval authored Aug 5, 2024
2 parents eaa2660 + f90351f commit 886ee8f
Show file tree
Hide file tree
Showing 2 changed files with 98 additions and 48 deletions.
136 changes: 93 additions & 43 deletions src/pages/Topology/components/EdgeDetails.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
import { FC } from 'react';

import {
Card,
CardBody,
CardHeader,
CardTitle,
DataList,
DataListAction,
DataListCell,
Expand All @@ -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';
Expand All @@ -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
Expand Down Expand Up @@ -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>
Expand All @@ -145,9 +195,9 @@ const EdgeDetails: FC<{ data: ProcessPairsResponse[]; metrics: TopologyMetrics |
/>
</DataListItemRow>
</DataListItem>
);
})}
</DataList>
))}
</DataList>
</>
);
};

Expand Down
10 changes: 5 additions & 5 deletions src/pages/Topology/components/NodeDetails.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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]);
}
Expand All @@ -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);
Expand Down Expand Up @@ -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>
Expand Down

0 comments on commit 886ee8f

Please sign in to comment.