feat: aggregate by label and type (#3047)

## About the changes
We noticed in our instance that when we have the same label for different API types, it shows
duplicated in the overview:

![image](https://user-images.githubusercontent.com/455064/216580261-91b09446-9f96-430f-8373-6a9dc7a3e623.png)


We're changing to this way of displaying info:
![Screenshot from 2023-02-03
11-35-26](https://user-images.githubusercontent.com/455064/216580027-ada82e24-a3f3-4985-acef-4754e6177b13.png)
when the data in traffic looks like this:
![Screenshot from 2023-02-03
11-35-35](https://user-images.githubusercontent.com/455064/216580065-0125f792-24af-4a96-bce6-584b70c7efbb.png)

---------

Co-authored-by: Nuno Góis <github@nunogois.com>

frontend/src/component/admin/network/NetworkOverview/NetworkOverview.tsx

@@ -5,7 +5,10 @@ import { ConditionallyRender } from 'component/common/ConditionallyRender/Condit
 import { Alert, styled } from '@mui/material';
 import { unknownify } from 'utils/unknownify';
 import { useMemo } from 'react';
-import { RequestsPerSecondSchema } from 'openapi';
+import {
+    RequestsPerSecondSchema,
+    RequestsPerSecondSchemaDataResultItem,
+} from 'openapi';
 import logoIcon from 'assets/icons/logoBg.svg';
 import { formatAssetPath } from 'utils/formatPath';
 
@@ -24,29 +27,45 @@ const isRecent = (value: ResultValue) => {
 type ResultValue = [number, string];
 
 interface INetworkApp {
-    label?: string;
+    label: string;
-    reqs: string;
+    reqs: number;
     type: string;
 }
 
-const toGraphData = (metrics?: RequestsPerSecondSchema) => {
+const asNetworkAppData = (result: RequestsPerSecondSchemaDataResultItem) => {
-    const results = metrics?.data?.result;
-    return (
-        results
-            ?.map(result => {
     const values = (result.values || []) as ResultValue[];
-                const data = values.filter(value => isRecent(value)) || [];
+    const data = values.filter(value => isRecent(value));
-                let reqs = 0;
+    const reqs = data.length ? parseFloat(data[data.length - 1][1]) : 0;
-                if (data.length) {
-                    reqs = parseFloat(data[data.length - 1][1]);
-                }
     return {
         label: unknownify(result.metric?.appName),
-                    reqs: reqs.toFixed(2),
+        reqs,
         type: unknownify(result.metric?.endpoint?.split('/')[2]),
     };
-            })
+};
-            .filter(app => app.label !== 'unknown')
+
+const summingReqsByLabelAndType = (
+    acc: {
+        [group: string]: INetworkApp;
+    },
+    current: INetworkApp
+) => {
+    const groupBy = current.label + current.type;
+    acc[groupBy] = {
+        ...current,
+        reqs: current.reqs + (acc[groupBy]?.reqs ?? 0),
+    };
+    return acc;
+};
+
+const toGraphData = (metrics?: RequestsPerSecondSchema) => {
+    const results =
+        metrics?.data?.result?.filter(result => result.metric?.appName) || [];
+    const aggregated = results
+        .map(asNetworkAppData)
+        .reduce(summingReqsByLabelAndType, {});
+    return (
+        Object.values(aggregated)
+            .map(app => ({ ...app, reqs: app.reqs.toFixed(2) }))
             .filter(app => app.reqs !== '0.00') ?? []
     );
 };
@@ -54,7 +73,7 @@ const toGraphData = (metrics?: RequestsPerSecondSchema) => {
 export const NetworkOverview = () => {
     usePageTitle('Network - Overview');
     const { metrics } = useInstanceMetrics();
-    const apps: INetworkApp[] = useMemo(() => {
+    const apps = useMemo(() => {
         return toGraphData(metrics);
     }, [metrics]);