feat: frontend traffic tab (#9385)

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

@@ -17,6 +17,9 @@ const NetworkTrafficUsage = lazy(
 const BackendConnections = lazy(
     () => import('./NetworkTrafficUsage/BackendConnections'),
 );
+const FrontendNetworkTrafficUsage = lazy(
+    () => import('./NetworkTrafficUsage/FrontendNetworkTrafficUsage'),
+);
 
 const tabs = [
     {
@@ -45,6 +48,10 @@ const consumptionModelTabs = [
         label: 'Backend Connections',
         path: '/admin/network/backend-connections',
     },
+    {
+        label: 'Frontend Traffic',
+        path: '/admin/network/frontend-data-usage',
+    },
 ];
 
 export const Network = () => {
@@ -103,6 +110,10 @@ export const Network = () => {
                         path='backend-connections'
                         element={<BackendConnections />}
                     />
+                    <Route
+                        path='frontend-data-usage'
+                        element={<FrontendNetworkTrafficUsage />}
+                    />
                 </Routes>
             </PageContent>
         </div>

frontend/src/component/admin/network/NetworkTrafficUsage/FrontendNetworkTrafficUsage.tsx

@@ -0,0 +1,82 @@
+import type { FC } from 'react';
+import { usePageTitle } from 'hooks/usePageTitle';
+import { Alert, Box } from '@mui/material';
+import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
+import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
+import {
+    BarElement,
+    CategoryScale,
+    Chart as ChartJS,
+    Legend,
+    LinearScale,
+    Title,
+    Tooltip,
+} from 'chart.js';
+
+import { Bar } from 'react-chartjs-2';
+import annotationPlugin from 'chartjs-plugin-annotation';
+import { customHighlightPlugin } from 'component/common/Chart/customHighlightPlugin';
+import { PeriodSelector } from './PeriodSelector';
+import { getChartLabel } from './chart-functions';
+import { useTrafficStats } from './hooks/useStats';
+import { StyledBox, TopRow } from './SharedComponents';
+import { useChartDataSelection } from './hooks/useChartDataSelection';
+
+const FrontendNetworkTrafficUsage: FC = () => {
+    usePageTitle('Network - Frontend Traffic Usage');
+
+    const { isOss } = useUiConfig();
+
+    const { chartDataSelection, setChartDataSelection, options } =
+        useChartDataSelection();
+
+    const includedTraffic = 0;
+    const { chartData } = useTrafficStats(
+        includedTraffic,
+        chartDataSelection,
+        '/api/frontend',
+    );
+
+    return (
+        <ConditionallyRender
+            condition={isOss()}
+            show={<Alert severity='warning'>Not enabled.</Alert>}
+            elseShow={
+                <>
+                    <StyledBox>
+                        <TopRow>
+                            <Box>
+                                Frontend traffic is determined by the total SDK
+                                requests to the Frontend API
+                            </Box>
+                            <PeriodSelector
+                                selectedPeriod={chartDataSelection}
+                                setPeriod={setChartDataSelection}
+                            />
+                        </TopRow>
+                        <Bar
+                            data={chartData}
+                            plugins={[customHighlightPlugin()]}
+                            options={options}
+                            aria-label={getChartLabel(chartDataSelection)}
+                        />
+                    </StyledBox>
+                </>
+            }
+        />
+    );
+};
+
+// Register dependencies that we need to draw the chart.
+ChartJS.register(
+    annotationPlugin,
+    CategoryScale,
+    LinearScale,
+    BarElement,
+    Title,
+    Tooltip,
+    Legend,
+);
+
+// Use a default export to lazy-load the charting library.
+export default FrontendNetworkTrafficUsage;

frontend/src/component/admin/network/NetworkTrafficUsage/chart-functions.test.ts

@@ -51,10 +51,6 @@ describe('toTrafficUsageChartData', () => {
 
         const expectedOutput = {
             datasets: [
-                {
-                    data: [0, 6, 0, 2, 4, 5],
-                    ...fromEndpointInfo('/api/admin'),
-                },
                 {
                     data: [7, 0, 11, 13, 0, 10],
                     ...fromEndpointInfo('/api/client'),
@@ -70,7 +66,9 @@ describe('toTrafficUsageChartData', () => {
             ],
         };
 
-        expect(toTrafficUsageChartData(input)).toMatchObject(expectedOutput);
+        expect(toTrafficUsageChartData(input, '/api/client')).toMatchObject(
+            expectedOutput,
+        );
     });
 
     test('daily data conversion', () => {

frontend/src/component/admin/network/NetworkTrafficUsage/chart-functions.ts

@@ -15,9 +15,11 @@ export type ChartDatasetType = ChartDataset<'bar'>;
 
 export const toTrafficUsageChartData = (
     traffic: TrafficUsageDataSegmentedCombinedSchema,
+    filter?: string,
 ): { datasets: ChartDatasetType[]; labels: string[] } => {
     const { newRecord, labels } = getLabelsAndRecords(traffic);
     const datasets = traffic.apiData
+        .filter((apiData) => (filter ? apiData.apiPath === filter : true))
         .sort(
             (item1, item2) =>
                 endpointsInfo[item1.apiPath].order -

frontend/src/component/admin/network/NetworkTrafficUsage/hooks/useStats.ts

@@ -17,6 +17,7 @@ import { averageTrafficPreviousMonths } from '../average-traffic-previous-months
 export const useTrafficStats = (
     includedTraffic: number,
     chartDataSelection: ChartDataSelection,
+    filter?: string,
 ) => {
     const { result } = useTrafficSearch(
         chartDataSelection.grouping,
@@ -34,7 +35,7 @@ export const useTrafficStats = (
         }
         const traffic = result.data;
 
-        const chartData = newToChartData(traffic);
+        const chartData = newToChartData(traffic, filter);
         const usageTotal = calculateTotalUsage(traffic);
         const overageCost = calculateOverageCost(
             usageTotal,