Skip to content

Commit 54766fd

Browse files
authored
feat: connection count usage (#9294)
1 parent 8045fbe commit 54766fd

File tree

4 files changed

+54
-2
lines changed

4 files changed

+54
-2
lines changed

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

+5-1
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@ import {
5252
type ChartDatasetType,
5353
getChartLabel,
5454
toChartData as newToChartData,
55+
toConnectionChartData,
5556
} from './chart-functions';
5657
import { periodsRecord, selectablePeriods } from './selectable-periods';
5758

@@ -182,6 +183,7 @@ const useTrafficStats = (
182183
includedTraffic: number,
183184
chartDataSelection: ChartDataSelection,
184185
) => {
186+
const connectionCountEnabled = useUiFlag('connectionCount');
185187
const { result } = useTrafficSearch(
186188
chartDataSelection.grouping,
187189
toDateRange(chartDataSelection, currentDate),
@@ -198,7 +200,9 @@ const useTrafficStats = (
198200
}
199201
const traffic = result.data;
200202

201-
const chartData = newToChartData(traffic);
203+
const chartData = connectionCountEnabled
204+
? toConnectionChartData(traffic)
205+
: newToChartData(traffic);
202206
const usageTotal = calculateTotalUsage(traffic);
203207
const overageCost = calculateOverageCost(
204208
usageTotal,

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

+42
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ import {
66
addMonths,
77
differenceInCalendarDays,
88
differenceInCalendarMonths,
9+
getDaysInMonth,
10+
parseISO,
911
} from 'date-fns';
1012
import { formatDay, formatMonth } from './dates';
1113
import type { ChartDataSelection } from './chart-data-selection';
@@ -40,6 +42,46 @@ export const toChartData = (
4042
return { datasets, labels };
4143
};
4244

45+
export const toConnectionChartData = (
46+
traffic: TrafficUsageDataSegmentedCombinedSchema,
47+
): { datasets: ChartDatasetType[]; labels: string[] } => {
48+
const { newRecord, labels } = getLabelsAndRecords(traffic);
49+
const datasets = traffic.apiData
50+
.sort(
51+
(item1, item2) =>
52+
endpointsInfo[item1.apiPath].order -
53+
endpointsInfo[item2.apiPath].order,
54+
)
55+
.map((item) => {
56+
const record = newRecord();
57+
for (const dataPoint of Object.values(item.dataPoints)) {
58+
const date = parseISO(dataPoint.period);
59+
const requestCount = dataPoint.trafficTypes[0].count;
60+
61+
if (traffic.grouping === 'monthly') {
62+
// 1 connections = 7200 * days in month requests per day
63+
const daysInMonth = getDaysInMonth(date);
64+
record[dataPoint.period] =
65+
requestCount / (daysInMonth * 7200);
66+
} else {
67+
// 1 connection = 7200 requests per day
68+
record[dataPoint.period] = requestCount / 7200;
69+
}
70+
}
71+
72+
const epInfo = endpointsInfo[item.apiPath];
73+
74+
return {
75+
label: epInfo.label,
76+
data: Object.values(record),
77+
backgroundColor: epInfo.color,
78+
hoverBackgroundColor: epInfo.color,
79+
};
80+
});
81+
82+
return { datasets, labels };
83+
};
84+
4385
const getLabelsAndRecords = (
4486
traffic: TrafficUsageDataSegmentedCombinedSchema,
4587
) => {

frontend/src/interfaces/uiConfig.ts

+1
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,7 @@ export type UiFlags = {
9494
frontendHeaderRedesign?: boolean;
9595
dataUsageMultiMonthView?: boolean;
9696
uiGlobalFontSize?: boolean;
97+
connectionCount?: boolean;
9798
};
9899

99100
export interface IVersionInfo {

src/lib/types/experimental.ts

+6-1
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,8 @@ export type IFlagKey =
6565
| 'uniqueSdkTracking'
6666
| 'frontendHeaderRedesign'
6767
| 'dataUsageMultiMonthView'
68-
| 'uiGlobalFontSize';
68+
| 'uiGlobalFontSize'
69+
| 'connectionCount';
6970

7071
export type IFlags = Partial<{ [key in IFlagKey]: boolean | Variant }>;
7172

@@ -314,6 +315,10 @@ const flags: IFlags = {
314315
process.env.EXPERIMENTAL_UI_GLOBAL_FONT_SIZE_NAME,
315316
false,
316317
),
318+
connectionCount: parseEnvVarBoolean(
319+
process.env.EXPERIMENTAL_CONNECTION_COUNT,
320+
false,
321+
),
317322
};
318323

319324
export const defaultExperimentalOptions: IExperimentalOptions = {

0 commit comments

Comments
 (0)