feat: connection count usage (#9294)

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,

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,
 ) => {

frontend/src/interfaces/uiConfig.ts

@@ -94,6 +94,7 @@ export type UiFlags = {
     frontendHeaderRedesign?: boolean;
     dataUsageMultiMonthView?: boolean;
     uiGlobalFontSize?: boolean;
+    connectionCount?: boolean;
 };
 
 export interface IVersionInfo {

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 = {