diff --git a/frontend/src/component/admin/network/NetworkTrafficUsage/NetworkTrafficUsage.tsx b/frontend/src/component/admin/network/NetworkTrafficUsage/NetworkTrafficUsage.tsx index 15704d3fe672..6d5e442b55cf 100644 --- a/frontend/src/component/admin/network/NetworkTrafficUsage/NetworkTrafficUsage.tsx +++ b/frontend/src/component/admin/network/NetworkTrafficUsage/NetworkTrafficUsage.tsx @@ -52,6 +52,7 @@ import { type ChartDatasetType, getChartLabel, toChartData as newToChartData, + toConnectionChartData, } from './chart-functions'; import { periodsRecord, selectablePeriods } from './selectable-periods'; @@ -182,6 +183,7 @@ const useTrafficStats = ( includedTraffic: number, chartDataSelection: ChartDataSelection, ) => { + const connectionCountEnabled = useUiFlag('connectionCount'); const { result } = useTrafficSearch( chartDataSelection.grouping, toDateRange(chartDataSelection, currentDate), @@ -198,7 +200,9 @@ const useTrafficStats = ( } const traffic = result.data; - const chartData = newToChartData(traffic); + const chartData = connectionCountEnabled + ? toConnectionChartData(traffic) + : newToChartData(traffic); const usageTotal = calculateTotalUsage(traffic); const overageCost = calculateOverageCost( usageTotal, diff --git a/frontend/src/component/admin/network/NetworkTrafficUsage/chart-functions.ts b/frontend/src/component/admin/network/NetworkTrafficUsage/chart-functions.ts index e287e78a4377..44c86a9eeb9a 100644 --- a/frontend/src/component/admin/network/NetworkTrafficUsage/chart-functions.ts +++ b/frontend/src/component/admin/network/NetworkTrafficUsage/chart-functions.ts @@ -6,6 +6,8 @@ import { addMonths, differenceInCalendarDays, differenceInCalendarMonths, + getDaysInMonth, + parseISO, } from 'date-fns'; import { formatDay, formatMonth } from './dates'; import type { ChartDataSelection } from './chart-data-selection'; @@ -40,6 +42,46 @@ export const toChartData = ( return { datasets, labels }; }; +export const toConnectionChartData = ( + traffic: TrafficUsageDataSegmentedCombinedSchema, +): { datasets: ChartDatasetType[]; labels: string[] } => { + const { newRecord, labels } = getLabelsAndRecords(traffic); + const datasets = traffic.apiData + .sort( + (item1, item2) => + endpointsInfo[item1.apiPath].order - + endpointsInfo[item2.apiPath].order, + ) + .map((item) => { + const record = newRecord(); + for (const dataPoint of Object.values(item.dataPoints)) { + const date = parseISO(dataPoint.period); + const requestCount = dataPoint.trafficTypes[0].count; + + if (traffic.grouping === 'monthly') { + // 1 connections = 7200 * days in month requests per day + const daysInMonth = getDaysInMonth(date); + record[dataPoint.period] = + requestCount / (daysInMonth * 7200); + } else { + // 1 connection = 7200 requests per day + record[dataPoint.period] = requestCount / 7200; + } + } + + const epInfo = endpointsInfo[item.apiPath]; + + return { + label: epInfo.label, + data: Object.values(record), + backgroundColor: epInfo.color, + hoverBackgroundColor: epInfo.color, + }; + }); + + return { datasets, labels }; +}; + const getLabelsAndRecords = ( traffic: TrafficUsageDataSegmentedCombinedSchema, ) => { diff --git a/frontend/src/interfaces/uiConfig.ts b/frontend/src/interfaces/uiConfig.ts index b44463b63776..7b20c095db26 100644 --- a/frontend/src/interfaces/uiConfig.ts +++ b/frontend/src/interfaces/uiConfig.ts @@ -94,6 +94,7 @@ export type UiFlags = { frontendHeaderRedesign?: boolean; dataUsageMultiMonthView?: boolean; uiGlobalFontSize?: boolean; + connectionCount?: boolean; }; export interface IVersionInfo { diff --git a/src/lib/types/experimental.ts b/src/lib/types/experimental.ts index d02632391c05..b72c48973e97 100644 --- a/src/lib/types/experimental.ts +++ b/src/lib/types/experimental.ts @@ -65,7 +65,8 @@ export type IFlagKey = | 'uniqueSdkTracking' | 'frontendHeaderRedesign' | 'dataUsageMultiMonthView' - | 'uiGlobalFontSize'; + | 'uiGlobalFontSize' + | 'connectionCount'; export type IFlags = Partial<{ [key in IFlagKey]: boolean | Variant }>; @@ -314,6 +315,10 @@ const flags: IFlags = { process.env.EXPERIMENTAL_UI_GLOBAL_FONT_SIZE_NAME, false, ), + connectionCount: parseEnvVarBoolean( + process.env.EXPERIMENTAL_CONNECTION_COUNT, + false, + ), }; export const defaultExperimentalOptions: IExperimentalOptions = {