Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-07-12 13:48:35 +02: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

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