Feat network overview (#2708)

https://linear.app/unleash/issue/2-512/exploration-network-overview-represented-as-a-flow-chart

<img width="1307" alt="image"
src="https://user-images.githubusercontent.com/14320932/208110067-294a0b91-d52e-49d1-9024-fa5e8530e2d8.png">

frontend/package.json

@@ -71,6 +71,7 @@
     "jsdom": "20.0.3",
     "lodash.clonedeep": "4.5.0",
     "lodash.omit": "4.5.0",
+    "mermaid": "^9.3.0",
     "millify": "^5.0.1",
     "msw": "0.49.1",
     "pkginfo": "0.4.1",

frontend/src/component/admin/menu/AdminMenu.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useLocation } from 'react-router-dom';
 import { Paper, Tab, Tabs } from '@mui/material';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
@@ -11,6 +10,8 @@ function AdminMenu() {
     const { isBilling } = useInstanceStatus();
     const { flags } = uiConfig;
 
+    const activeTab = pathname.split('/')[2];
+
     return (
         <Paper
             style={{
@@ -20,13 +21,13 @@ function AdminMenu() {
             }}
         >
             <Tabs
-                value={pathname}
+                value={activeTab}
                 variant="scrollable"
                 scrollButtons="auto"
                 allowScrollButtonsMobile
             >
                 <Tab
-                    value="/admin/users"
+                    value="users"
                     label={
                         <CenteredNavLink to="/admin/users">
                             <span>Users</span>
@@ -35,7 +36,7 @@ function AdminMenu() {
                 />
                 {flags.UG && (
                     <Tab
-                        value="/admin/groups"
+                        value="groups"
                         label={
                             <CenteredNavLink to="/admin/groups">
                                 <span>Groups</span>
@@ -45,7 +46,7 @@ function AdminMenu() {
                 )}
                 {flags.RE && (
                     <Tab
-                        value="/admin/roles"
+                        value="roles"
                         label={
                             <CenteredNavLink to="/admin/roles">
                                 <span>Project roles</span>
@@ -54,7 +55,7 @@ function AdminMenu() {
                     />
                 )}
                 <Tab
-                    value="/admin/api"
+                    value="api"
                     label={
                         <CenteredNavLink to="/admin/api">
                             API access
@@ -63,7 +64,7 @@ function AdminMenu() {
                 />
                 {uiConfig.flags.embedProxyFrontend && (
                     <Tab
-                        value="/admin/cors"
+                        value="cors"
                         label={
                             <CenteredNavLink to="/admin/cors">
                                 CORS origins
@@ -72,7 +73,7 @@ function AdminMenu() {
                     />
                 )}
                 <Tab
-                    value="/admin/auth"
+                    value="auth"
                     label={
                         <CenteredNavLink to="/admin/auth">
                             Single sign-on
@@ -80,7 +81,7 @@ function AdminMenu() {
                     }
                 />
                 <Tab
-                    value="/admin/instance"
+                    value="instance"
                     label={
                         <CenteredNavLink to="/admin/instance">
                             Instance stats
@@ -89,17 +90,17 @@ function AdminMenu() {
                 />
                 {flags.networkView && (
                     <Tab
-                        value="/admin/traffic"
+                        value="network"
                         label={
-                            <CenteredNavLink to="/admin/traffic">
+                            <CenteredNavLink to="/admin/network">
-                                Traffic
+                                Network
                             </CenteredNavLink>
                         }
                     />
                 )}
                 {isBilling && (
                     <Tab
-                        value="/admin/billing"
+                        value="billing"
                         label={
                             <CenteredNavLink to="/admin/billing">
                                 Billing

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

@@ -0,0 +1,63 @@
+import { NetworkOverview } from './NetworkOverview/NetworkOverview';
+import { NetworkTraffic } from './NetworkTraffic/NetworkTraffic';
+import AdminMenu from '../menu/AdminMenu';
+import { styled, Tab, Tabs } from '@mui/material';
+import { Route, Routes, useLocation } from 'react-router-dom';
+import { CenteredNavLink } from '../menu/CenteredNavLink';
+import { PageContent } from 'component/common/PageContent/PageContent';
+
+const StyledPageContent = styled(PageContent)(() => ({
+    '.page-header': {
+        padding: 0,
+    },
+}));
+
+const tabs = [
+    {
+        label: 'Overview',
+        path: '/admin/network',
+    },
+    {
+        label: 'Traffic',
+        path: '/admin/network/traffic',
+    },
+];
+
+export const Network = () => {
+    const { pathname } = useLocation();
+
+    return (
+        <div>
+            <AdminMenu />
+            <StyledPageContent
+                headerClass="page-header"
+                header={
+                    <Tabs
+                        value={pathname}
+                        indicatorColor="primary"
+                        textColor="primary"
+                        variant="scrollable"
+                        allowScrollButtonsMobile
+                    >
+                        {tabs.map(({ label, path }) => (
+                            <Tab
+                                key={label}
+                                value={path}
+                                label={
+                                    <CenteredNavLink to={path}>
+                                        <span>{label}</span>
+                                    </CenteredNavLink>
+                                }
+                            />
+                        ))}
+                    </Tabs>
+                }
+            >
+                <Routes>
+                    <Route path="traffic" element={<NetworkTraffic />} />
+                    <Route path="*" element={<NetworkOverview />} />
+                </Routes>
+            </StyledPageContent>
+        </div>
+    );
+};

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

@@ -0,0 +1,68 @@
+import { usePageTitle } from 'hooks/usePageTitle';
+import { Mermaid } from 'component/common/Mermaid/Mermaid';
+import { useInstanceMetrics } from 'hooks/api/getters/useInstanceMetrics/useInstanceMetrics';
+import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
+import { Alert, styled } from '@mui/material';
+
+const StyledMermaid = styled(Mermaid)(({ theme }) => ({
+    '#mermaid .node rect': {
+        fill: theme.palette.secondary.light,
+        stroke: theme.palette.secondary.border,
+    },
+}));
+
+interface INetworkApp {
+    label?: string;
+    reqs: string;
+    type: string;
+}
+
+export const NetworkOverview = () => {
+    usePageTitle('Network - Overview');
+    const { metrics } = useInstanceMetrics();
+
+    const apps: INetworkApp[] = [];
+    if (Boolean(metrics)) {
+        Object.keys(metrics).forEach(metric => {
+            apps.push(
+                ...(
+                    metrics[metric].data?.result
+                        ?.map(result => ({
+                            label: result.metric?.appName,
+                            reqs: parseFloat(
+                                result.values?.[
+                                    result.values?.length - 1
+                                ][1].toString() || '0'
+                            ).toFixed(2),
+                            type: metric.split('Metrics')[0],
+                        }))
+                        .filter(app => app.label !== 'undefined') || []
+                ).filter(app => app.reqs !== '0.00')
+            );
+        });
+    }
+
+    const graph = `
+    graph TD
+        subgraph _[ ]
+        direction BT
+            Unleash(<img src='https://www.getunleash.io/logos/unleash_glyph_pos.svg' width='60' height='60' /><br/>Unleash)
+            ${apps
+                .map(
+                    ({ label, reqs, type }, i) =>
+                        `app-${i}(${label}) -- ${reqs} req/s<br>${type} --> Unleash`
+                )
+                .join('\n')}
+        end
+    `;
+
+    return (
+        <ConditionallyRender
+            condition={apps.length === 0}
+            show={<Alert severity="warning">No data available.</Alert>}
+            elseShow={<StyledMermaid>{graph}</StyledMermaid>}
+        />
+    );
+};
+
+export default NetworkOverview;

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

@@ -1,7 +1,7 @@
 import {
     InstanceMetrics,
     useInstanceMetrics,
-} from '../../../hooks/api/getters/useInstanceMetrics/useInstanceMetrics';
+} from 'hooks/api/getters/useInstanceMetrics/useInstanceMetrics';
 import { useMemo, VFC } from 'react';
 import { Line } from 'react-chartjs-2';
 import {
@@ -21,18 +21,17 @@ import {
 import {
     ILocationSettings,
     useLocationSettings,
-} from '../../../hooks/useLocationSettings';
+} from 'hooks/useLocationSettings';
-import theme from '../../../themes/theme';
+import theme from 'themes/theme';
-import { formatDateHM } from '../../../utils/formatDate';
+import { formatDateHM } from 'utils/formatDate';
 import { RequestsPerSecondSchema } from 'openapi';
 import 'chartjs-adapter-date-fns';
 import { Alert, PaletteColor } from '@mui/material';
-import { PageContent } from '../../common/PageContent/PageContent';
-import { PageHeader } from '../../common/PageHeader/PageHeader';
 import { Box } from '@mui/system';
-import { current } from 'immer';
 import { CyclicIterator } from 'utils/cyclicIterator';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
+import { usePageTitle } from 'hooks/usePageTitle';
+
 interface IPoint {
     x: number;
     y: number;
@@ -172,37 +171,38 @@ const createInstanceChartData = (metrics?: InstanceMetrics): ChartDataType => {
     return { datasets: [] };
 };
 
-export const InstanceMetricsChart: VFC = () => {
+export const NetworkTraffic: VFC = () => {
     const { locationSettings } = useLocationSettings();
     const { metrics } = useInstanceMetrics();
     const options = useMemo(() => {
         return createInstanceChartOptions(metrics, locationSettings);
     }, [metrics, locationSettings]);
 
+    usePageTitle('Network - Traffic');
+
     const data = useMemo(() => {
         return createInstanceChartData(metrics);
     }, [metrics, locationSettings]);
 
     return (
-        <PageContent header={<PageHeader title="Requests per second" />}>
+        <ConditionallyRender
-            <ConditionallyRender
+            condition={data.datasets.length === 0}
-                condition={data.datasets.length === 0}
+            show={<Alert severity="warning">No data available.</Alert>}
-                show={<Alert severity="warning">No data available.</Alert>}
+            elseShow={
-                elseShow={
+                <Box sx={{ display: 'grid', gap: 4 }}>
-                    <Box sx={{ display: 'grid', gap: 4 }}>
+                    <div style={{ height: 400 }}>
-                        <div style={{ height: 400 }}>
+                        <Line
-                            <Line
+                            data={data}
-                                data={data}
+                            options={options}
-                                options={options}
+                            aria-label="An instance metrics line chart with two lines: requests per second for admin API and requests per second for client API"
-                                aria-label="An instance metrics line chart with two lines: requests per second for admin API and requests per second for client API"
+                        />
-                            />
+                    </div>
-                        </div>
+                </Box>
-                    </Box>
+            }
-                }
+        />
-            />
-        </PageContent>
     );
 };
+
 // Register dependencies that we need to draw the chart.
 ChartJS.register(
     CategoryScale,
@@ -216,4 +216,4 @@ ChartJS.register(
 );
 
 // Use a default export to lazy-load the charting library.
-export default InstanceMetricsChart;
+export default NetworkTraffic;

frontend/src/component/admin/traffic/Traffic.tsx

@@ -1,11 +0,0 @@
-import InstanceMetricsChart from './TrafficMetricsChart';
-import AdminMenu from '../menu/AdminMenu';
-
-export const Traffic = () => {
-    return (
-        <div>
-            <AdminMenu />
-            <InstanceMetricsChart />
-        </div>
-    );
-};

frontend/src/component/common/Mermaid/Mermaid.tsx

@@ -0,0 +1,43 @@
+import { styled } from '@mui/material';
+import mermaid from 'mermaid';
+import { useEffect } from 'react';
+
+const StyledMermaid = styled('div')(({ theme }) => ({
+    display: 'flex',
+    justifyContent: 'center',
+    '#mermaid .edgeLabel': {
+        backgroundColor: theme.palette.background.paper,
+    },
+}));
+
+mermaid.initialize({
+    theme: 'default',
+    themeCSS: `
+    .clusters #_ rect {
+        fill: transparent;
+        stroke: transparent;
+    }
+    `,
+});
+
+interface IMermaidProps {
+    className?: string;
+    children: string;
+}
+
+export const Mermaid = ({ className = '', children }: IMermaidProps) => {
+    useEffect(() => {
+        mermaid.render('mermaid', children, (svgCode: string) => {
+            const mermaidDiv = document.querySelector('.mermaid');
+            if (mermaidDiv) {
+                mermaidDiv.innerHTML = svgCode;
+            }
+        });
+    }, [children]);
+
+    return (
+        <StyledMermaid className={`mermaid ${className}`}>
+            {children}
+        </StyledMermaid>
+    );
+};

frontend/src/component/menu/Header/Header.tsx

@@ -76,7 +76,11 @@ const Header: VFC = () => {
         mobileRoutes: routes.mobileRoutes.filter(filterByConfig(uiConfig)),
         adminRoutes: routes.adminRoutes
             .filter(filterByConfig(uiConfig))
-            .filter(filterByEnterprise),
+            .filter(filterByEnterprise)
+            .map(route => ({
+                ...route,
+                path: route.path.replace('/*', ''),
+            })),
     };
 
     if (smallScreen) {

frontend/src/component/menu/__tests__/__snapshots__/routes.test.tsx.snap

@@ -472,8 +472,8 @@ exports[`returns all baseRoutes 1`] = `
       "adminSettings": true,
     },
     "parent": "/admin",
-    "path": "/admin/traffic",
+    "path": "/admin/network/*",
-    "title": "Traffic",
+    "title": "Network",
     "type": "protected",
   },
   {

frontend/src/component/menu/routes.ts

@@ -60,7 +60,7 @@ import { CorsAdmin } from 'component/admin/cors';
 import { InviteLink } from 'component/admin/users/InviteLink/InviteLink';
 import { Profile } from 'component/user/Profile/Profile';
 import { InstanceAdmin } from '../admin/instance-admin/InstanceAdmin';
-import { Traffic } from 'component/admin/traffic/Traffic';
+import { Network } from 'component/admin/network/Network';
 
 export const routes: IRoute[] = [
     // Splash
@@ -511,10 +511,10 @@ export const routes: IRoute[] = [
         menu: { adminSettings: true },
     },
     {
-        path: '/admin/traffic',
+        path: '/admin/network/*',
         parent: '/admin',
-        title: 'Traffic',
+        title: 'Network',
-        component: Traffic,
+        component: Network,
         type: 'protected',
         menu: { adminSettings: true },
         flag: 'networkView',

frontend/src/hooks/api/getters/useInstanceMetrics/useInstanceMetrics.ts

@@ -1,4 +1,4 @@
-import useSWR from 'swr';
+import useSWR, { SWRConfiguration } from 'swr';
 import { useMemo } from 'react';
 import { formatApiPath } from 'utils/formatPath';
 import handleErrorResponses from '../httpErrorResponseHandler';
@@ -18,10 +18,13 @@ export interface IInstanceMetricsResponse {
     error?: Error;
 }
 
-export const useInstanceMetrics = (): IInstanceMetricsResponse => {
+export const useInstanceMetrics = (
+    options: SWRConfiguration = {}
+): IInstanceMetricsResponse => {
     const { data, error, mutate } = useSWR(
         formatApiPath(`api/admin/metrics/rps`),
-        fetcher
+        fetcher,
+        options
     );
 
     return useMemo(

frontend/yarn.lock

@@ -1372,6 +1372,11 @@
     "@babel/helper-validator-identifier" "^7.19.1"
     to-fast-properties "^2.0.0"
 
+"@braintree/sanitize-url@^6.0.0":
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/@braintree/sanitize-url/-/sanitize-url-6.0.2.tgz#6110f918d273fe2af8ea1c4398a88774bb9fc12f"
+  integrity sha512-Tbsj02wXCbqGmzdnXNk0SOF19ChhRU70BsroIi4Pm6Ehp56in6vch94mfbdQ17DozxkL3BAVjbZ4Qc1a0HFRAg==
+
 "@codemirror/autocomplete@^6.0.0":
   version "6.0.4"
   resolved "https://registry.yarnpkg.com/@codemirror/autocomplete/-/autocomplete-6.0.4.tgz#90a9c81cfddac528b9e9dc07415a7c6554dbe85c"
@@ -3449,6 +3454,11 @@ combined-stream@^1.0.6, combined-stream@^1.0.8, combined-stream@~1.0.6:
   dependencies:
     delayed-stream "~1.0.0"
 
+commander@7:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-7.2.0.tgz#a36cb57d0b501ce108e4d20559a150a391d97ab7"
+  integrity sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==
+
 commander@8.3.0:
   version "8.3.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-8.3.0.tgz#4837ea1b2da67b9c616a67afbb0fafee567bca66"
@@ -3647,6 +3657,258 @@ cypress@9.7.0:
     untildify "^4.0.0"
     yauzl "^2.10.0"
 
+"d3-array@2 - 3", "d3-array@2.10.0 - 3", "d3-array@2.5.0 - 3", d3-array@3, d3-array@^3.2.0:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-3.2.1.tgz#39331ea706f5709417d31bbb6ec152e0328b39b3"
+  integrity sha512-gUY/qeHq/yNqqoCKNq4vtpFLdoCdvyNpWoC/KNjhGbhDuQpAM9sIQQKkXSNpXa9h5KySs/gzm7R88WkUutgwWQ==
+  dependencies:
+    internmap "1 - 2"
+
+d3-axis@3:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/d3-axis/-/d3-axis-3.0.0.tgz#c42a4a13e8131d637b745fc2973824cfeaf93322"
+  integrity sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw==
+
+d3-brush@3:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/d3-brush/-/d3-brush-3.0.0.tgz#6f767c4ed8dcb79de7ede3e1c0f89e63ef64d31c"
+  integrity sha512-ALnjWlVYkXsVIGlOsuWH1+3udkYFI48Ljihfnh8FZPF2QS9o+PzGLBslO0PjzVoHLZ2KCVgAM8NVkXPJB2aNnQ==
+  dependencies:
+    d3-dispatch "1 - 3"
+    d3-drag "2 - 3"
+    d3-interpolate "1 - 3"
+    d3-selection "3"
+    d3-transition "3"
+
+d3-chord@3:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-chord/-/d3-chord-3.0.1.tgz#d156d61f485fce8327e6abf339cb41d8cbba6966"
+  integrity sha512-VE5S6TNa+j8msksl7HwjxMHDM2yNK3XCkusIlpX5kwauBfXuyLAtNg9jCp/iHH61tgI4sb6R/EIMWCqEIdjT/g==
+  dependencies:
+    d3-path "1 - 3"
+
+"d3-color@1 - 3", d3-color@3:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-3.1.0.tgz#395b2833dfac71507f12ac2f7af23bf819de24e2"
+  integrity sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==
+
+d3-contour@4:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/d3-contour/-/d3-contour-4.0.0.tgz#5a1337c6da0d528479acdb5db54bc81a0ff2ec6b"
+  integrity sha512-7aQo0QHUTu/Ko3cP9YK9yUTxtoDEiDGwnBHyLxG5M4vqlBkO/uixMRele3nfsfj6UXOcuReVpVXzAboGraYIJw==
+  dependencies:
+    d3-array "^3.2.0"
+
+d3-delaunay@6:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/d3-delaunay/-/d3-delaunay-6.0.2.tgz#7fd3717ad0eade2fc9939f4260acfb503f984e92"
+  integrity sha512-IMLNldruDQScrcfT+MWnazhHbDJhcRJyOEBAJfwQnHle1RPh6WDuLvxNArUju2VSMSUuKlY5BGHRJ2cYyoFLQQ==
+  dependencies:
+    delaunator "5"
+
+"d3-dispatch@1 - 3", d3-dispatch@3:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-dispatch/-/d3-dispatch-3.0.1.tgz#5fc75284e9c2375c36c839411a0cf550cbfc4d5e"
+  integrity sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==
+
+"d3-drag@2 - 3", d3-drag@3:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/d3-drag/-/d3-drag-3.0.0.tgz#994aae9cd23c719f53b5e10e3a0a6108c69607ba"
+  integrity sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==
+  dependencies:
+    d3-dispatch "1 - 3"
+    d3-selection "3"
+
+"d3-dsv@1 - 3", d3-dsv@3:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-dsv/-/d3-dsv-3.0.1.tgz#c63af978f4d6a0d084a52a673922be2160789b73"
+  integrity sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q==
+  dependencies:
+    commander "7"
+    iconv-lite "0.6"
+    rw "1"
+
+"d3-ease@1 - 3", d3-ease@3:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-ease/-/d3-ease-3.0.1.tgz#9658ac38a2140d59d346160f1f6c30fda0bd12f4"
+  integrity sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==
+
+d3-fetch@3:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-fetch/-/d3-fetch-3.0.1.tgz#83141bff9856a0edb5e38de89cdcfe63d0a60a22"
+  integrity sha512-kpkQIM20n3oLVBKGg6oHrUchHM3xODkTzjMoj7aWQFq5QEM+R6E4WkzT5+tojDY7yjez8KgCBRoj4aEr99Fdqw==
+  dependencies:
+    d3-dsv "1 - 3"
+
+d3-force@3:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/d3-force/-/d3-force-3.0.0.tgz#3e2ba1a61e70888fe3d9194e30d6d14eece155c4"
+  integrity sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==
+  dependencies:
+    d3-dispatch "1 - 3"
+    d3-quadtree "1 - 3"
+    d3-timer "1 - 3"
+
+"d3-format@1 - 3", d3-format@3:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-3.1.0.tgz#9260e23a28ea5cb109e93b21a06e24e2ebd55641"
+  integrity sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==
+
+d3-geo@3:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-geo/-/d3-geo-3.0.1.tgz#4f92362fd8685d93e3b1fae0fd97dc8980b1ed7e"
+  integrity sha512-Wt23xBych5tSy9IYAM1FR2rWIBFWa52B/oF/GYe5zbdHrg08FU8+BuI6X4PvTwPDdqdAdq04fuWJpELtsaEjeA==
+  dependencies:
+    d3-array "2.5.0 - 3"
+
+d3-hierarchy@3:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/d3-hierarchy/-/d3-hierarchy-3.1.2.tgz#b01cd42c1eed3d46db77a5966cf726f8c09160c6"
+  integrity sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA==
+
+"d3-interpolate@1 - 3", "d3-interpolate@1.2.0 - 3", d3-interpolate@3:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-interpolate/-/d3-interpolate-3.0.1.tgz#3c47aa5b32c5b3dfb56ef3fd4342078a632b400d"
+  integrity sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==
+  dependencies:
+    d3-color "1 - 3"
+
+"d3-path@1 - 3", d3-path@3:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-path/-/d3-path-3.0.1.tgz#f09dec0aaffd770b7995f1a399152bf93052321e"
+  integrity sha512-gq6gZom9AFZby0YLduxT1qmrp4xpBA1YZr19OI717WIdKE2OM5ETq5qrHLb301IgxhLwcuxvGZVLeeWc/k1I6w==
+
+d3-polygon@3:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-polygon/-/d3-polygon-3.0.1.tgz#0b45d3dd1c48a29c8e057e6135693ec80bf16398"
+  integrity sha512-3vbA7vXYwfe1SYhED++fPUQlWSYTTGmFmQiany/gdbiWgU/iEyQzyymwL9SkJjFFuCS4902BSzewVGsHHmHtXg==
+
+"d3-quadtree@1 - 3", d3-quadtree@3:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-quadtree/-/d3-quadtree-3.0.1.tgz#6dca3e8be2b393c9a9d514dabbd80a92deef1a4f"
+  integrity sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==
+
+d3-random@3:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-random/-/d3-random-3.0.1.tgz#d4926378d333d9c0bfd1e6fa0194d30aebaa20f4"
+  integrity sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ==
+
+d3-scale-chromatic@3:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/d3-scale-chromatic/-/d3-scale-chromatic-3.0.0.tgz#15b4ceb8ca2bb0dcb6d1a641ee03d59c3b62376a"
+  integrity sha512-Lx9thtxAKrO2Pq6OO2Ua474opeziKr279P/TKZsMAhYyNDD3EnCffdbgeSYN5O7m2ByQsxtuP2CSDczNUIZ22g==
+  dependencies:
+    d3-color "1 - 3"
+    d3-interpolate "1 - 3"
+
+d3-scale@4:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/d3-scale/-/d3-scale-4.0.2.tgz#82b38e8e8ff7080764f8dcec77bd4be393689396"
+  integrity sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==
+  dependencies:
+    d3-array "2.10.0 - 3"
+    d3-format "1 - 3"
+    d3-interpolate "1.2.0 - 3"
+    d3-time "2.1.1 - 3"
+    d3-time-format "2 - 4"
+
+"d3-selection@2 - 3", d3-selection@3:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/d3-selection/-/d3-selection-3.0.0.tgz#c25338207efa72cc5b9bd1458a1a41901f1e1b31"
+  integrity sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==
+
+d3-shape@3:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/d3-shape/-/d3-shape-3.1.0.tgz#c8a495652d83ea6f524e482fca57aa3f8bc32556"
+  integrity sha512-tGDh1Muf8kWjEDT/LswZJ8WF85yDZLvVJpYU9Nq+8+yW1Z5enxrmXOhTArlkaElU+CTn0OTVNli+/i+HP45QEQ==
+  dependencies:
+    d3-path "1 - 3"
+
+"d3-time-format@2 - 4", d3-time-format@4:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/d3-time-format/-/d3-time-format-4.1.0.tgz#7ab5257a5041d11ecb4fe70a5c7d16a195bb408a"
+  integrity sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==
+  dependencies:
+    d3-time "1 - 3"
+
+"d3-time@1 - 3", "d3-time@2.1.1 - 3", d3-time@3:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/d3-time/-/d3-time-3.1.0.tgz#9310db56e992e3c0175e1ef385e545e48a9bb5c7"
+  integrity sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==
+  dependencies:
+    d3-array "2 - 3"
+
+"d3-timer@1 - 3", d3-timer@3:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-timer/-/d3-timer-3.0.1.tgz#6284d2a2708285b1abb7e201eda4380af35e63b0"
+  integrity sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==
+
+"d3-transition@2 - 3", d3-transition@3:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-transition/-/d3-transition-3.0.1.tgz#6869fdde1448868077fdd5989200cb61b2a1645f"
+  integrity sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==
+  dependencies:
+    d3-color "1 - 3"
+    d3-dispatch "1 - 3"
+    d3-ease "1 - 3"
+    d3-interpolate "1 - 3"
+    d3-timer "1 - 3"
+
+d3-zoom@3:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/d3-zoom/-/d3-zoom-3.0.0.tgz#d13f4165c73217ffeaa54295cd6969b3e7aee8f3"
+  integrity sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==
+  dependencies:
+    d3-dispatch "1 - 3"
+    d3-drag "2 - 3"
+    d3-interpolate "1 - 3"
+    d3-selection "2 - 3"
+    d3-transition "2 - 3"
+
+d3@^7.0.0, d3@^7.7.0:
+  version "7.7.0"
+  resolved "https://registry.yarnpkg.com/d3/-/d3-7.7.0.tgz#e7779a74ea7c807b432fdfd8128de062b19c62eb"
+  integrity sha512-VEwHCMgMjD2WBsxeRGUE18RmzxT9Bn7ghDpzvTEvkLSBAKgTMydJjouZTjspgQfRHpPt/PB3EHWBa6SSyFQq4g==
+  dependencies:
+    d3-array "3"
+    d3-axis "3"
+    d3-brush "3"
+    d3-chord "3"
+    d3-color "3"
+    d3-contour "4"
+    d3-delaunay "6"
+    d3-dispatch "3"
+    d3-drag "3"
+    d3-dsv "3"
+    d3-ease "3"
+    d3-fetch "3"
+    d3-force "3"
+    d3-format "3"
+    d3-geo "3"
+    d3-hierarchy "3"
+    d3-interpolate "3"
+    d3-path "3"
+    d3-polygon "3"
+    d3-quadtree "3"
+    d3-random "3"
+    d3-scale "4"
+    d3-scale-chromatic "3"
+    d3-selection "3"
+    d3-shape "3"
+    d3-time "3"
+    d3-time-format "4"
+    d3-timer "3"
+    d3-transition "3"
+    d3-zoom "3"
+
+dagre-d3-es@7.0.6:
+  version "7.0.6"
+  resolved "https://registry.yarnpkg.com/dagre-d3-es/-/dagre-d3-es-7.0.6.tgz#8cab465ff95aca8a1ca2292d07e1fb31b5db83f2"
+  integrity sha512-CaaE/nZh205ix+Up4xsnlGmpog5GGm81Upi2+/SBHxwNwrccBb3K51LzjZ1U6hgvOlAEUsVWf1xSTzCyKpJ6+Q==
+  dependencies:
+    d3 "^7.7.0"
+    lodash-es "^4.17.21"
+
 damerau-levenshtein@^1.0.7:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7"
@@ -3746,6 +4008,13 @@ define-properties@^1.1.3, define-properties@^1.1.4:
     has-property-descriptors "^1.0.0"
     object-keys "^1.1.1"
 
+delaunator@5:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/delaunator/-/delaunator-5.0.0.tgz#60f052b28bd91c9b4566850ebf7756efe821d81b"
+  integrity sha512-AyLvtyJdbv/U1GkiS6gUUzclRoAY4Gs75qkMygJJhU75LW4DNuSF2RMzpxs9jw9Oz1BobHjTdkG3zdP55VxAqw==
+  dependencies:
+    robust-predicates "^3.0.0"
+
 delayed-stream@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
@@ -3807,6 +4076,11 @@ domexception@^4.0.0:
   dependencies:
     webidl-conversions "^7.0.0"
 
+dompurify@2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-2.4.1.tgz#f9cb1a275fde9af6f2d0a2644ef648dd6847b631"
+  integrity sha512-ewwFzHzrrneRjxzmK6oVz/rZn9VWspGFRDb4/rRtIsM1n36t9AKma/ye8syCpcw+XJ25kOK/hOG7t1j2I2yBqA==
+
 easy-table@1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/easy-table/-/easy-table-1.1.0.tgz#86f9ab4c102f0371b7297b92a651d5824bc8cb73"
@@ -4903,7 +5177,7 @@ human-signals@^1.1.1:
   resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-1.1.1.tgz#c5b1cd14f50aeae09ab6c59fe63ba3395fe4dfa3"
   integrity sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==
 
-iconv-lite@0.6.3:
+iconv-lite@0.6, iconv-lite@0.6.3:
   version "0.6.3"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.6.3.tgz#a52f80bf38da1952eb5c681790719871a1a72501"
   integrity sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==
@@ -5002,6 +5276,11 @@ internal-slot@^1.0.3:
     has "^1.0.3"
     side-channel "^1.0.4"
 
+"internmap@1 - 2":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/internmap/-/internmap-2.0.3.tgz#6685f23755e43c524e251d29cbc97248e3061009"
+  integrity sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==
+
 is-arguments@^1.0.4:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.1.1.tgz#15b3f88fda01f2a97fec84ca761a560f123efa9b"
@@ -5431,6 +5710,11 @@ jsprim@^2.0.2:
     array-includes "^3.1.4"
     object.assign "^4.1.2"
 
+khroma@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/khroma/-/khroma-2.0.0.tgz#7577de98aed9f36c7a474c4d453d94c0d6c6588b"
+  integrity sha512-2J8rDNlQWbtiNYThZRvmMv5yt44ZakX+Tz5ZIp/mN1pt4snn+m030Va5Z4v8xA0cQFDXBwO/8i42xL4QPsVk3g==
+
 language-subtag-registry@~0.3.2:
   version "0.3.21"
   resolved "https://registry.yarnpkg.com/language-subtag-registry/-/language-subtag-registry-0.3.21.tgz#04ac218bea46f04cb039084602c6da9e788dd45a"
@@ -5503,6 +5787,11 @@ locate-path@^6.0.0:
   dependencies:
     p-locate "^5.0.0"
 
+lodash-es@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
+  integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
+
 lodash.clonedeep@4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
@@ -5599,6 +5888,22 @@ merge2@^1.3.0, merge2@^1.4.1:
   resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
   integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
 
+mermaid@^9.3.0:
+  version "9.3.0"
+  resolved "https://registry.yarnpkg.com/mermaid/-/mermaid-9.3.0.tgz#8bd7c4a44b53e4e85c53a0a474442e9c273494ae"
+  integrity sha512-mGl0BM19TD/HbU/LmlaZbjBi//tojelg8P/mxD6pPZTAYaI+VawcyBdqRsoUHSc7j71PrMdJ3HBadoQNdvP5cg==
+  dependencies:
+    "@braintree/sanitize-url" "^6.0.0"
+    d3 "^7.0.0"
+    dagre-d3-es "7.0.6"
+    dompurify "2.4.1"
+    khroma "^2.0.0"
+    lodash-es "^4.17.21"
+    moment-mini "^2.24.0"
+    non-layered-tidy-tree-layout "^2.0.2"
+    stylis "^4.1.2"
+    uuid "^9.0.0"
+
 micromatch@^4.0.2, micromatch@^4.0.4:
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.5.tgz#bc8999a7cbbf77cdc89f132f6e467051b49090c6"
@@ -5648,6 +5953,11 @@ minimist@^1.2.0, minimist@^1.2.6:
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.6.tgz#8637a5b759ea0d6e98702cfb3a9283323c93af44"
   integrity sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==
 
+moment-mini@^2.24.0:
+  version "2.29.4"
+  resolved "https://registry.yarnpkg.com/moment-mini/-/moment-mini-2.29.4.tgz#cbbcdc58ce1b267506f28ea6668dbe060a32758f"
+  integrity sha512-uhXpYwHFeiTbY9KSgPPRoo1nt8OxNVdMVoTBYHfSEKeRkIkwGpO+gERmhuhBtzfaeOyTkykSrm2+noJBgqt3Hg==
+
 ms@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
@@ -5725,6 +6035,11 @@ node-releases@^2.0.6:
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.6.tgz#8a7088c63a55e493845683ebf3c828d8c51c5503"
   integrity sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg==
 
+non-layered-tidy-tree-layout@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/non-layered-tidy-tree-layout/-/non-layered-tidy-tree-layout-2.0.2.tgz#57d35d13c356643fc296a55fb11ac15e74da7804"
+  integrity sha512-gkXMxRzUH+PB0ax9dUN0yYF0S25BqeAYqhgMaLUFmpXLEk7Fcu8f4emJuOAY0V8kjDICxROIKsTAKsV/v355xw==
+
 normalize-path@^3.0.0, normalize-path@~3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
@@ -6415,6 +6730,11 @@ rimraf@^3.0.0, rimraf@^3.0.2:
   dependencies:
     glob "^7.1.3"
 
+robust-predicates@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/robust-predicates/-/robust-predicates-3.0.1.tgz#ecde075044f7f30118682bd9fb3f123109577f9a"
+  integrity sha512-ndEIpszUHiG4HtDsQLeIuMvRsDnn8c8rYStabochtUeCvfuvNptb5TUbVD68LRAILPX7p9nqQGh4xJgn3EHS/g==
+
 rollup@^2.79.1:
   version "2.79.1"
   resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.79.1.tgz#bedee8faef7c9f93a2647ac0108748f497f081c7"
@@ -6441,6 +6761,11 @@ run-parallel@^1.1.9:
   dependencies:
     queue-microtask "^1.2.2"
 
+rw@1:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/rw/-/rw-1.3.3.tgz#3f862dfa91ab766b14885ef4d01124bfda074fb4"
+  integrity sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==
+
 rxjs@7.5.5, rxjs@^7.5.1, rxjs@^7.5.5:
   version "7.5.5"
   resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-7.5.5.tgz#2ebad89af0f560f460ad5cc4213219e1f7dd4e9f"
@@ -6739,7 +7064,7 @@ stylis@4.0.13:
   resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.13.tgz#f5db332e376d13cc84ecfe5dace9a2a51d954c91"
   integrity sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag==
 
-stylis@4.1.3:
+stylis@4.1.3, stylis@^4.1.2:
   version "4.1.3"
   resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.1.3.tgz#fd2fbe79f5fed17c55269e16ed8da14c84d069f7"
   integrity sha512-GP6WDNWf+o403jrEp9c5jibKavrtLW+/qYGhFxFrG8maXhwTBI7gLLhiBb0o7uFccWN+EOS9aMO6cGHWAO07OA==
@@ -7080,6 +7405,11 @@ uuid@8.3.2, uuid@^8.3.2:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
   integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
 
+uuid@^9.0.0:
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-9.0.0.tgz#592f550650024a38ceb0c562f2f6aa435761efb5"
+  integrity sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==
+
 verror@1.10.0:
   version "1.10.0"
   resolved "https://registry.yarnpkg.com/verror/-/verror-1.10.0.tgz#3a105ca17053af55d6e270c1f8288682e18da400"

src/lib/middleware/response-time-metrics.ts

@@ -17,7 +17,7 @@ export function responseTimeMetrics(
 
         let appName;
         if (flagResolver.isEnabled('responseTimeWithAppName')) {
-            appName = req.headers['unleash-appname'];
+            appName = req.headers['unleash-appname'] ?? req.query.appName;
         }
 
         const timingInfo = {

src/lib/routes/admin-api/metrics.ts

@@ -187,18 +187,24 @@ class MetricsController extends Controller {
         }
         try {
             const hoursToQuery = 6;
-            const [clientMetrics, adminMetrics] = await Promise.all([
+            const [clientMetrics, frontendMetrics, adminMetrics] =
-                this.clientInstanceService.getRPSForPath(
+                await Promise.all([
-                    '/api/client/.*',
+                    this.clientInstanceService.getRPSForPath(
-                    hoursToQuery,
+                        '/api/client/.*',
-                ),
+                        hoursToQuery,
-                this.clientInstanceService.getRPSForPath(
+                    ),
-                    '/api/admin/.*',
+                    this.clientInstanceService.getRPSForPath(
-                    hoursToQuery,
+                        '/api/frontend.*',
-                ),
+                        hoursToQuery,
-            ]);
+                    ),
+                    this.clientInstanceService.getRPSForPath(
+                        '/api/admin/.*',
+                        hoursToQuery,
+                    ),
+                ]);
             res.json({
                 clientMetrics,
+                frontendMetrics,
                 adminMetrics,
             });
         } catch (err) {