Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-09-01 13:47:27 +02:00
Code Issues Projects Releases Wiki Activity

fix: latest changes in network overview

Browse Source
This commit is contained in:
Gastón Fournier 2023-02-02 19:02:42 +01:00
parent 72ed00b09c
commit 92ecf80918
No known key found for this signature in database
GPG Key ID: BC3E6CD5E81633B8
1 changed files with 29 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
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';
@ -15,7 +17,7 @@ const StyledMermaid = styled(Mermaid)(({ theme }) => ({
})); }));
const isRecent = (value: ResultValue) => { const isRecent = (value: ResultValue) => {
const threshold = 60000; // ten minutes const threshold = 600000; // ten minutes
return value[0] * 1000 > new Date().getTime() - threshold; return value[0] * 1000 > new Date().getTime() - threshold;
}; };
@ -27,21 +29,14 @@ 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)) || []; console.log('data', data);
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 +44,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