Skip to content

Commit

Permalink
Merge pull request #445 from bartoval/adjust_latency
Browse files Browse the repository at this point in the history 
fix(Metrics): 🐞 Adjust latency definition
  • Loading branch information
@bartoval
bartoval authored Aug 27, 2024
2 parents 1490451 + 19f6259 commit e26ff41
Show file tree
Hide file tree
Showing 16 changed files with 290 additions and 124 deletions.
3 changes: 2 additions & 1 deletion __tests__/pages/Metrics/Latency.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ describe('Latency component', () => {
<Wrapper>
<Suspense fallback={<LoadingPage />}>
<Latency
title={MetricsLabels.LatencyTitleOut}
selectedFilters={{
sourceProcess: processResult.name
}}
Expand All @@ -50,7 +51,7 @@ describe('Latency component', () => {
timeout: waitForElementToBeRemovedTimeout
});

expect(screen.getByText(MetricsLabels.LatencyTitle)).toBeInTheDocument();
expect(screen.getByText(MetricsLabels.LatencyTitleOut)).toBeInTheDocument();

fireEvent.click(document.querySelector('.pf-v5-c-card__header-toggle')?.querySelector('button')!);
expect(handleGetisSectionExpanded).toHaveBeenCalledTimes(1);
Expand Down
131 changes: 116 additions & 15 deletions __tests__/pages/Metrics/__snapshots__/Metrics.spec.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -548,7 +548,7 @@ exports[`Metrics Component renders correctly 1`] = `
<div
class="pf-v5-c-card__title-text"
>
Latencies
Incoming Latency
<div
style="display: contents;"
>
Expand All @@ -560,19 +560,27 @@ exports[`Metrics Component renders correctly 1`] = `
data-ouia-safe="true"
type="button"
>
<svg
aria-hidden="true"
class="pf-v5-svg"
fill="currentColor"
height="1em"
role="img"
viewBox="0 0 512 512"
width="1em"
<span
class="pf-v5-c-icon"
>
<path
d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z"
/>
</svg>
<span
class="pf-v5-c-icon__content pf-m-info"
>
<svg
aria-hidden="true"
class="pf-v5-svg"
fill="currentColor"
height="1em"
role="img"
viewBox="0 0 512 512"
width="1em"
>
<path
d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z"
/>
</svg>
</span>
</span>
</button>
</div>
</div>
Expand Down Expand Up @@ -633,7 +641,41 @@ exports[`Metrics Component renders correctly 1`] = `
<div
class="pf-v5-c-card__title-text"
>
Http requests
Outgoing Latency
<div
style="display: contents;"
>
<button
aria-disabled="false"
class="pf-v5-c-button pf-m-plain"
data-ouia-component-id="OUIA-Generated-Button-plain-6"
data-ouia-component-type="PF5/Button"
data-ouia-safe="true"
type="button"
>
<span
class="pf-v5-c-icon"
>
<span
class="pf-v5-c-icon__content pf-m-info"
>
<svg
aria-hidden="true"
class="pf-v5-svg"
fill="currentColor"
height="1em"
role="img"
viewBox="0 0 512 512"
width="1em"
>
<path
d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z"
/>
</svg>
</span>
</span>
</button>
</div>
</div>
</div>
</div>
Expand All @@ -659,7 +701,66 @@ exports[`Metrics Component renders correctly 1`] = `
<button
aria-disabled="false"
class="pf-v5-c-button pf-m-plain"
data-ouia-component-id="OUIA-Generated-Button-plain-6"
data-ouia-component-id="OUIA-Generated-Button-plain-7"
data-ouia-component-type="PF5/Button"
data-ouia-safe="true"
type="button"
>
<span
class="pf-v5-c-card__header-toggle-icon"
>
<svg
aria-hidden="true"
class="pf-v5-svg"
fill="currentColor"
height="1em"
role="img"
viewBox="0 0 256 512"
width="1em"
>
<path
d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
/>
</svg>
</span>
</button>
</div>
<div
class="pf-v5-c-card__header-main"
>
<div
class="pf-v5-c-card__title"
>
<div
class="pf-v5-c-card__title-text"
>
Http requests
</div>
</div>
</div>
</div>
</div>
</div>
<div
class="pf-v5-l-stack__item"
>
<div
class="pf-v5-c-card"
data-ouia-component-id="OUIA-Generated-Card-6"
data-ouia-component-type="PF5/Card"
data-ouia-safe="true"
id=""
>
<div
class="pf-v5-c-card__header"
>
<div
class="pf-v5-c-card__header-toggle"
>
<button
aria-disabled="false"
class="pf-v5-c-button pf-m-plain"
data-ouia-component-id="OUIA-Generated-Button-plain-8"
data-ouia-component-type="PF5/Button"
data-ouia-safe="true"
type="button"
Expand Down
8 changes: 4 additions & 4 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,14 +36,14 @@
"commit": "git-cz"
},
"dependencies": {
"@antv/g6": "^5.0.17",
"@antv/g6": "^5.0.15",
"@nivo/sankey": "^0.87.0",
"@patternfly/patternfly": "^5.3.1",
"@patternfly/react-charts": "^7.3.0",
"@patternfly/react-core": "^5.3.4",
"@patternfly/react-icons": "^5.3.2",
"@patternfly/react-table": "5.3.4",
"@tanstack/react-query": "^5.52.1",
"@tanstack/react-query": "^5.52.2",
"axios": "^1.7.5",
"date-fns": "^3.6.0",
"framer-motion": "^11.3.30",
Expand All @@ -62,8 +62,8 @@
"@types/jest": "^29.5.12",
"@types/react": "^18.3.4",
"@types/react-dom": "^18.3.0",
"@typescript-eslint/eslint-plugin": "^8.2.0",
"@typescript-eslint/parser": "^8.2.0",
"@typescript-eslint/eslint-plugin": "^8.3.0",
"@typescript-eslint/parser": "^8.3.0",
"commitizen": "^4.3.0",
"copy-webpack-plugin": "^12.0.2",
"css-loader": "^7.1.2",
Expand Down
22 changes: 14 additions & 8 deletions src/core/components/SkFlowPairsTable/FlowPair.constants.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,8 +37,6 @@ export const flowPairsComponentsTable = {
link: `${ProcessesRoutesPaths.Processes}/${props.data.counterFlow.processName}@${props.data.counterFlow.process}`
}),
TimestampCell: SkEndTimeCell,
TcpTTFB: (props: SkLinkCellProps<FlowPairsResponse>) =>
formatLatency(props.data.counterFlow.latency + props.data.forwardFlow.latency),
DurationCell: SkDurationCell,
ByteFormatCell: (props: SkHighlightValueCellProps<FlowPairsResponse>) =>
SkHighlightValueCell({ ...props, format: formatBytes }),
Expand Down Expand Up @@ -77,6 +75,13 @@ export const tcpFlowPairsColumns: SKTableColumn<FlowPairsResponse>[] = [
customCellName: 'ByteFormatCell',
modifier: 'nowrap'
},
{
name: FlowPairLabels.TxLatency,
columnDescription: 'The TCP latency primarily concerns the start of data transmission',
prop: 'forwardFlow.latency' as keyof FlowPairsResponse,
format: formatLatency,
modifier: 'nowrap'
},
{
name: FlowPairLabels.Server,
prop: 'counterFlow.processName' as keyof FlowPairsResponse,
Expand All @@ -96,15 +101,16 @@ export const tcpFlowPairsColumns: SKTableColumn<FlowPairsResponse>[] = [
modifier: 'nowrap'
},
{
name: FlowPairLabels.Duration,
prop: 'duration' as keyof FlowPairsResponse,
customCellName: 'DurationCell',
name: FlowPairLabels.RxLatency,
columnDescription: 'The TCP latency primarily concerns the start of data transmission',
prop: 'counterFlow.latency' as keyof FlowPairsResponse,
format: formatLatency,
modifier: 'nowrap'
},
{
name: FlowPairLabels.TTFB,
columnDescription: 'time elapsed between client and server',
customCellName: 'TcpTTFB',
name: FlowPairLabels.Duration,
prop: 'duration' as keyof FlowPairsResponse,
customCellName: 'DurationCell',
modifier: 'nowrap'
},
{
Expand Down
13 changes: 6 additions & 7 deletions src/core/components/SkFlowPairsTable/FlowPair.enum.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,15 +22,14 @@ export enum FlowPairLabels {
To = 'To server',
TxBytes = 'Data Out',
RxBytes = 'Data In',
TxByteRate = 'Rate In',
RxByteRate = 'Rate Out',
TxLatency = 'Latency In',
RxLatency = 'Latency Out',
TxUnacked = 'Unkacked In',
RxUnacked = 'Unacked Out',
TxByteRate = 'Rate Out',
RxByteRate = 'Rate In',
TxLatency = 'Latency Out',
RxLatency = 'Latency In',
TxUnacked = 'Unkacked Out',
RxUnacked = 'Unacked In',
TxWindow = 'Window size Out',
RxWindow = 'Window size In',
TTFB = 'TTFB',
Completed = 'Completed',
ClientPort = 'Client port',
ServerPort = 'Server port',
Expand Down
32 changes: 22 additions & 10 deletions src/core/components/SkTable/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { KeyboardEvent, MouseEvent as ReactMouseEvent, useCallback, useState, useMemo } from 'react';
import { KeyboardEvent, MouseEvent as ReactMouseEvent, useCallback, useState, useMemo, FC } from 'react';

import { Card, CardBody, CardHeader, Flex, Text, TextContent, Title } from '@patternfly/react-core';
import { SearchIcon } from '@patternfly/react-icons';
Expand Down Expand Up @@ -41,6 +41,15 @@ export interface SKTableProps<T> {
onGetFilters?: Function;
}

export interface CustomCellProps<T> {
value: string | T[keyof T] | undefined;
data: T;
callback?: Function;
isDisabled?: boolean;
format?: Function;
fitContent?: boolean;
}

const SkTable = function <T>({
title,
columns,
Expand Down Expand Up @@ -218,7 +227,8 @@ const SkTable = function <T>({
<Tr key={row.id}>
{row.columns.map(
({ data, value, customCellName, callback, format, width, modifier, isStickyColumn }, index) => {
const Component = !!customCells && !!customCellName && customCells[customCellName];
const Component =
!!customCells && !!customCellName && (customCells[customCellName] as FC<CustomCellProps<T>>);

return (
<Td
Expand All @@ -228,14 +238,16 @@ const SkTable = function <T>({
isStickyColumn={isStickyColumn}
style={{ verticalAlign: 'middle' }}
>
{Component &&
Component({
data,
value,
callback,
format: format && format(value),
fitContent: modifier === 'nowrap'
})}
{Component && (
<Component
value={value}
data={data}
callback={callback}
format={format && format(value)}
fitContent={modifier === 'nowrap'}
/>
)}

{!Component && (
<TableText wrapModifier={modifier === 'nowrap' ? 'fitContent' : 'truncate'}>
{(format && format(value)) || value}
Expand Down
2 changes: 1 addition & 1 deletion src/pages/Topology/hooks/useTopologyProcessData.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const processesQueryParams = {
const metricQueryParams = {
fetchBytes: { groupBy: 'destProcess, sourceProcess, direction' },
fetchByteRate: { groupBy: 'destProcess, sourceProcess, direction' },
fetchLatency: { groupBy: 'sourceProcess, destProcess' }
fetchLatency: { groupBy: 'sourceProcess, destProcess, direction' }
};

const useTopologyProcessData = () => {
Expand Down
6 changes: 3 additions & 3 deletions src/pages/Topology/hooks/useTopologySiteData.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,9 @@ interface UseTopologySiteDataProps {
}

const metricQueryParams = {
fetchBytes: { groupBy: 'destSite, sourceSite,direction' },
fetchByteRate: { groupBy: 'destSite, sourceSite,direction' },
fetchLatency: { groupBy: 'sourceSite, destSite' }
fetchBytes: { groupBy: 'destSite, sourceSite, direction' },
fetchByteRate: { groupBy: 'destSite, sourceSite, direction' },
fetchLatency: { groupBy: 'sourceSite, destSite, direction' }
};

const useTopologySiteData = ({ showDataLink, showBytes, showByteRate, showLatency }: UseTopologySiteDataProps) => {
Expand Down
19 changes: 15 additions & 4 deletions src/pages/Topology/services/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { PrometheusApi } from '@API/Prometheus.api';
import { Direction } from '@API/REST.enum';
import { IDS_GROUP_SEPARATOR, IDS_MULTIPLE_SELECTION_SEPARATOR, PAIR_SEPARATOR } from '@config/config';
import { formatByteRate, formatBytes } from '@core/utils/formatBytes';
import { formatLatency } from '@core/utils/formatLatency';
Expand Down Expand Up @@ -26,7 +27,9 @@ export const TopologyController = {
const [bytesByProcessPairs, byteRateByProcessPairs, latencyByProcessPairs] = await Promise.all([
showBytes ? PrometheusApi.fetchAllProcessPairsBytes(params.fetchBytes.groupBy, params.filterBy) : [],
showByteRate ? PrometheusApi.fetchAllProcessPairsByteRates(params.fetchByteRate.groupBy, params.filterBy) : [],
showLatency ? PrometheusApi.fetchAllProcessPairsLatencies(params.fetchLatency.groupBy, params.filterBy) : []
showLatency
? PrometheusApi.fetchAllProcessPairsLatencies(params.fetchLatency.groupBy, { ...params.filterBy })
: []
]);

return { bytesByProcessPairs, byteRateByProcessPairs, latencyByProcessPairs };
Expand Down Expand Up @@ -124,7 +127,15 @@ export const TopologyController = {

const bytesByPairsMap = getPairsMap(bytesByPairs);
const byteRateByPairsMap = getPairsMap(byteRateByPairs);
const latencyByPairsMap = getPairsMap(latencyByPairs);
// Incoming metrics indicate that the source is the client and the destination is the server. In our case, the edges have a direction from client to server
const latencyByPairsMapIn = getPairsMap(
latencyByPairs?.filter((pair) => pair.metric.direction === Direction.Incoming)
);

// Outgoing metrics indicate that the source is the server and the destination is the client. It is used to determine the reverse metric
const latencyByPairsMapOut = getPairsMap(
latencyByPairs?.filter((pair) => pair.metric.direction === Direction.Outgoing)
);

return edges.map((edge) => {
const pairKey = `${edge.sourceName}${edge.targetName}`;
Expand All @@ -136,10 +147,10 @@ export const TopologyController = {
protocol: protocolPairsMap ? protocolPairsMap[`${edge.source}${edge.target}`] : '',
bytes: bytesByPairsMap[pairKey],
byteRate: byteRateByPairsMap[pairKey],
latency: latencyByPairsMap[pairKey],
latency: latencyByPairsMapIn[pairKey],
bytesReverse: bytesByPairsMap[reversePairKey],
byteRateReverse: byteRateByPairsMap[reversePairKey],
latencyReverse: latencyByPairsMap[reversePairKey]
latencyReverse: latencyByPairsMapOut[reversePairKey]
}
};
});
Expand Down
Loading

0 comments on commit e26ff41

Please sign in to comment.