From a0e4f54b9aa8b9f60bc763fed66fb8e6bebe40b1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gast=C3=B3n=20Fournier?= <gaston@getunleash.ai>
Date: Thu, 2 Feb 2023 16:40:35 +0100
Subject: [PATCH] fix: try to make the network overview stable (#3036)

## About the changes
Use `useMemo` as in NetworkTraffic:
https://github.com/Unleash/unleash/blob/6ad27c2e9c1c57cdbc376fedaca957b906dc67e4/frontend/src/component/admin/network/NetworkTraffic/NetworkTraffic.tsx#L173-L176

Hopefully this should help getting rid of the flakiness of the UI
---
 .../NetworkOverview/NetworkOverview.tsx       | 55 +++++++++----------
 1 file changed, 27 insertions(+), 28 deletions(-)

diff --git a/frontend/src/component/admin/network/NetworkOverview/NetworkOverview.tsx b/frontend/src/component/admin/network/NetworkOverview/NetworkOverview.tsx
index dde7c7dda4..df7f42b616 100644
--- a/frontend/src/component/admin/network/NetworkOverview/NetworkOverview.tsx
+++ b/frontend/src/component/admin/network/NetworkOverview/NetworkOverview.tsx
@@ -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