From bf78d74dc56534020077a71fcd8222906f8bbc00 Mon Sep 17 00:00:00 2001 From: Mateusz Kwasniewski Date: Thu, 27 Feb 2025 16:02:09 +0100 Subject: [PATCH] feat: frontend traffic tab (#9385) --- .../src/component/admin/network/Network.tsx | 11 +++ .../FrontendNetworkTrafficUsage.tsx | 82 +++++++++++++++++++ .../chart-functions.test.ts | 8 +- .../NetworkTrafficUsage/chart-functions.ts | 2 + .../NetworkTrafficUsage/hooks/useStats.ts | 3 +- 5 files changed, 100 insertions(+), 6 deletions(-) create mode 100644 frontend/src/component/admin/network/NetworkTrafficUsage/FrontendNetworkTrafficUsage.tsx diff --git a/frontend/src/component/admin/network/Network.tsx b/frontend/src/component/admin/network/Network.tsx index 0943df226e..72e71b827f 100644 --- a/frontend/src/component/admin/network/Network.tsx +++ b/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={} /> + } + /> diff --git a/frontend/src/component/admin/network/NetworkTrafficUsage/FrontendNetworkTrafficUsage.tsx b/frontend/src/component/admin/network/NetworkTrafficUsage/FrontendNetworkTrafficUsage.tsx new file mode 100644 index 0000000000..44926c6d8a --- /dev/null +++ b/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 ( + Not enabled.} + elseShow={ + <> + + + + Frontend traffic is determined by the total SDK + requests to the Frontend API + + + + + + + } + /> + ); +}; + +// 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; diff --git a/frontend/src/component/admin/network/NetworkTrafficUsage/chart-functions.test.ts b/frontend/src/component/admin/network/NetworkTrafficUsage/chart-functions.test.ts index c462a8b192..dbf00b29f7 100644 --- a/frontend/src/component/admin/network/NetworkTrafficUsage/chart-functions.test.ts +++ b/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', () => { diff --git a/frontend/src/component/admin/network/NetworkTrafficUsage/chart-functions.ts b/frontend/src/component/admin/network/NetworkTrafficUsage/chart-functions.ts index 1ba2a98fce..985b30c082 100644 --- a/frontend/src/component/admin/network/NetworkTrafficUsage/chart-functions.ts +++ b/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 - diff --git a/frontend/src/component/admin/network/NetworkTrafficUsage/hooks/useStats.ts b/frontend/src/component/admin/network/NetworkTrafficUsage/hooks/useStats.ts index 1fc29c5335..c83916e5af 100644 --- a/frontend/src/component/admin/network/NetworkTrafficUsage/hooks/useStats.ts +++ b/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,