Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2024-12-22 19:07:54 +01:00
Code Issues Projects Releases Wiki Activity

fix: try to make the network overview stable (#3036)

Browse Source 
## About the changes
Use `useMemo` as in NetworkTraffic:
6ad27c2e9c/frontend/src/component/admin/network/NetworkTraffic/NetworkTraffic.tsx (L173-L176)

Hopefully this should help getting rid of the flakiness of the UI
This commit is contained in:
Gastón Fournier 2023-02-02 16:40:35 +01:00 committed by GitHub
parent ab9712812a
commit a0e4f54b9a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 27 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
frontend/src/component/admin/network/NetworkOverview/NetworkOverview.tsx
View File

@ -4,6 +4,8 @@ import { useInstanceMetrics } from 'hooks/api/getters/useInstanceMetrics/useInst
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { Alert, styled } from '@mui/material';
import { unknownify } from 'utils/unknownify';
import { useMemo } from 'react';
import { RequestsPerSecondSchema } from 'openapi';
import logoIcon from 'assets/icons/logoBg.svg';
import { formatAssetPath } from 'utils/formatPath';
@ -27,37 +29,34 @@ interface INetworkApp {
type: string;
}
const toGraphData = (metrics?: RequestsPerSecondSchema) => {
const results = metrics?.data?.result;
return (
results
?.map(result => {
const values = (result.values || []) as ResultValue[];
const data = values.filter(value => isRecent(value)) || [];
let reqs = 0;
if (data.length) {
reqs = parseFloat(data[data.length - 1][1]);
}
return {
label: unknownify(result.metric?.appName),
reqs: reqs.toFixed(2),
type: unknownify(result.metric?.endpoint?.split('/')[2]),
};
})
.filter(app => app.label !== 'unknown')
.filter(app => app.reqs !== '0.00') ?? []
);
};
export const NetworkOverview = () => {
usePageTitle('Network - Overview');
const { metrics } = useInstanceMetrics();
const results = metrics?.data?.result;
const apps: INetworkApp[] = [];
if (results) {
apps.push(
...(
results
?.map(result => {
const values = (result.values || []) as ResultValue[];
const data =
values.filter(value => isRecent(value)) || [];
let reqs = 0;
if (data.length) {
reqs = parseFloat(data[data.length - 1][1]);
}
return {
label: unknownify(result.metric?.appName),
reqs: reqs.toFixed(2),
type: unknownify(
result.metric?.endpoint?.split('/')[2]
),
};
})
.filter(app => app.label !== 'unknown') || []
).filter(app => app.reqs !== '0.00')
);
}
const apps: INetworkApp[] = useMemo(() => {
return toGraphData(metrics);
}, [metrics]);
const graph = `
graph TD