Skip to content

Commit 8629cda

Browse files
thomasheartmanthomasheartman
authored
chore: remove dataUsageMultiMonthView flag (#9429)
Remove data usage multi month view flag and deprecated components and functions.
1 parent 2e08616 commit 8629cda

File tree

11 files changed

+34
-581
lines changed

11 files changed

+34
-581
lines changed

‎frontend/src/component/admin/billing/BillingDashboard/BillingPlan/useOverageCost.ts

+1-45
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,13 @@
11
import { endOfMonth, format, startOfMonth } from 'date-fns';
2-
import {
3-
useInstanceTrafficMetrics,
4-
useTrafficSearch,
5-
} from 'hooks/api/getters/useInstanceTrafficMetrics/useInstanceTrafficMetrics';
2+
import { useTrafficSearch } from 'hooks/api/getters/useInstanceTrafficMetrics/useInstanceTrafficMetrics';
63
import { useMemo } from 'react';
74
import {
85
calculateOverageCost,
96
calculateTotalUsage,
107
} from 'utils/traffic-calculations';
118
import { BILLING_TRAFFIC_BUNDLE_PRICE } from './BillingPlan';
12-
import { useUiFlag } from 'hooks/useUiFlag';
13-
import { useTrafficDataEstimation } from 'hooks/useTrafficData';
149

1510
export const useOverageCost = (includedTraffic: number) => {
16-
if (useUiFlag('dataUsageMultiMonthView')) {
17-
return useNewOverageCostCalculation(includedTraffic);
18-
} else {
19-
return useOldOverageCostCalculation(includedTraffic);
20-
}
21-
};
22-
23-
const useNewOverageCostCalculation = (includedTraffic: number) => {
2411
if (!includedTraffic) {
2512
return 0;
2613
}
@@ -46,34 +33,3 @@ const useNewOverageCostCalculation = (includedTraffic: number) => {
4633

4734
return overageCost;
4835
};
49-
50-
const useOldOverageCostCalculation = (includedTraffic: number) => {
51-
const {
52-
currentPeriod,
53-
toChartData,
54-
toTrafficUsageSum,
55-
endpointsInfo,
56-
getDayLabels,
57-
} = useTrafficDataEstimation();
58-
59-
const traffic = useInstanceTrafficMetrics(currentPeriod.key);
60-
61-
const overageCost = useMemo(() => {
62-
if (!includedTraffic) {
63-
return 0;
64-
}
65-
const trafficData = toChartData(
66-
getDayLabels(currentPeriod.dayCount),
67-
traffic,
68-
endpointsInfo,
69-
);
70-
const totalTraffic = toTrafficUsageSum(trafficData);
71-
return calculateOverageCost(
72-
totalTraffic,
73-
includedTraffic,
74-
BILLING_TRAFFIC_BUNDLE_PRICE,
75-
);
76-
}, [includedTraffic, traffic, currentPeriod, endpointsInfo]);
77-
78-
return overageCost;
79-
};

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

+4-194
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
1-
import { type FC, useEffect, useMemo, useState } from 'react';
2-
import useTheme from '@mui/material/styles/useTheme';
1+
import type { FC } from 'react';
32
import styled from '@mui/material/styles/styled';
43
import { usePageTitle } from 'hooks/usePageTitle';
5-
import Select from 'component/common/select';
64
import { Link as RouterLink } from 'react-router-dom';
7-
import { Alert, Link } from '@mui/material';
5+
import { Alert } from '@mui/material';
86
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
97
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
108
import {
@@ -18,25 +16,14 @@ import {
1816
} from 'chart.js';
1917

2018
import { Bar } from 'react-chartjs-2';
21-
import { useInstanceTrafficMetrics } from 'hooks/api/getters/useInstanceTrafficMetrics/useInstanceTrafficMetrics';
22-
import Grid from '@mui/material/Grid';
23-
import { NetworkTrafficUsagePlanSummary } from './NetworkTrafficUsagePlanSummary';
2419
import annotationPlugin from 'chartjs-plugin-annotation';
25-
import {
26-
calculateEstimatedMonthlyCost as deprecatedCalculateEstimatedMonthlyCost,
27-
useTrafficDataEstimation,
28-
} from 'hooks/useTrafficData';
2920
import { customHighlightPlugin } from 'component/common/Chart/customHighlightPlugin';
3021
import { useTrafficLimit } from './hooks/useTrafficLimit';
31-
import { BILLING_TRAFFIC_BUNDLE_PRICE } from 'component/admin/billing/BillingDashboard/BillingPlan/BillingPlan';
32-
import { useLocationSettings } from 'hooks/useLocationSettings';
3322
import { PeriodSelector } from './PeriodSelector';
3423
import { useUiFlag } from 'hooks/useUiFlag';
3524
import { OverageInfo, RequestSummary } from './RequestSummary';
36-
import { calculateOverageCost } from 'utils/traffic-calculations';
3725
import { currentMonth } from './dates';
38-
import { type ChartDatasetType, getChartLabel } from './chart-functions';
39-
import { createBarChartOptions } from './bar-chart-options';
26+
import { getChartLabel } from './chart-functions';
4027
import { useTrafficStats } from './hooks/useStats';
4128
import { BoldText, StyledBox, TopRow } from './SharedComponents';
4229
import { useChartDataSelection } from './hooks/useChartDataSelection';
@@ -48,7 +35,7 @@ const TrafficInfoBoxes = styled('div')(({ theme }) => ({
4835
gap: theme.spacing(2, 4),
4936
}));
5037

51-
const NewNetworkTrafficUsage: FC = () => {
38+
const NetworkTrafficUsage: FC = () => {
5239
usePageTitle('Network - Data Usage');
5340

5441
const estimateTrafficDataCost = useUiFlag('estimateTrafficDataCost');
@@ -142,183 +129,6 @@ const NewNetworkTrafficUsage: FC = () => {
142129
);
143130
};
144131

145-
export const NetworkTrafficUsage: FC = () => {
146-
const useNewNetworkTraffic = useUiFlag('dataUsageMultiMonthView');
147-
return useNewNetworkTraffic ? (
148-
<NewNetworkTrafficUsage />
149-
) : (
150-
<OldNetworkTrafficUsage />
151-
);
152-
};
153-
154-
const OldNetworkTrafficUsage: FC = () => {
155-
usePageTitle('Network - Data Usage');
156-
const theme = useTheme();
157-
158-
const { isOss } = useUiConfig();
159-
160-
const { locationSettings } = useLocationSettings();
161-
const {
162-
record,
163-
period,
164-
setPeriod,
165-
selectablePeriods,
166-
getDayLabels,
167-
toChartData,
168-
toTrafficUsageSum,
169-
endpointsInfo,
170-
} = useTrafficDataEstimation();
171-
172-
const includedTraffic = useTrafficLimit();
173-
174-
const options = useMemo(() => {
175-
return createBarChartOptions(
176-
theme,
177-
(tooltipItems: any) => {
178-
const periodItem = record[period];
179-
const tooltipDate = new Date(
180-
periodItem.year,
181-
periodItem.month,
182-
Number.parseInt(tooltipItems[0].label),
183-
);
184-
return tooltipDate.toLocaleDateString(
185-
locationSettings?.locale ?? 'en-US',
186-
{
187-
month: 'long',
188-
day: 'numeric',
189-
year: 'numeric',
190-
},
191-
);
192-
},
193-
includedTraffic,
194-
);
195-
}, [theme, period]);
196-
197-
const traffic = useInstanceTrafficMetrics(period);
198-
199-
const [labels, setLabels] = useState<number[]>([]);
200-
201-
const [datasets, setDatasets] = useState<ChartDatasetType[]>([]);
202-
203-
const [usageTotal, setUsageTotal] = useState<number>(0);
204-
205-
const [overageCost, setOverageCost] = useState<number>(0);
206-
207-
const [estimatedMonthlyCost, setEstimatedMonthlyCost] = useState<number>(0);
208-
209-
const data = {
210-
labels,
211-
datasets,
212-
};
213-
214-
useEffect(() => {
215-
setDatasets(toChartData(labels, traffic, endpointsInfo));
216-
}, [labels, traffic]);
217-
218-
useEffect(() => {
219-
if (record && period) {
220-
const periodData = record[period];
221-
setLabels(getDayLabels(periodData.dayCount));
222-
}
223-
}, [period]);
224-
225-
useEffect(() => {
226-
if (data) {
227-
const usage = toTrafficUsageSum(data.datasets);
228-
setUsageTotal(usage);
229-
if (includedTraffic > 0) {
230-
const calculatedOverageCost = calculateOverageCost(
231-
usage,
232-
includedTraffic,
233-
BILLING_TRAFFIC_BUNDLE_PRICE,
234-
);
235-
setOverageCost(calculatedOverageCost);
236-
237-
setEstimatedMonthlyCost(
238-
deprecatedCalculateEstimatedMonthlyCost(
239-
period,
240-
data.datasets,
241-
includedTraffic,
242-
new Date(),
243-
BILLING_TRAFFIC_BUNDLE_PRICE,
244-
),
245-
);
246-
}
247-
}
248-
}, [data]);
249-
250-
return (
251-
<ConditionallyRender
252-
condition={isOss()}
253-
show={<Alert severity='warning'>Not enabled.</Alert>}
254-
elseShow={
255-
<>
256-
<ConditionallyRender
257-
condition={includedTraffic > 0 && overageCost > 0}
258-
show={
259-
<Alert severity='warning' sx={{ mb: 4 }}>
260-
<b>Heads up!</b> You are currently consuming
261-
more requests than your plan includes and will
262-
be billed according to our terms. Please see{' '}
263-
<Link
264-
component={RouterLink}
265-
to='https://www.getunleash.io/pricing'
266-
>
267-
this page
268-
</Link>{' '}
269-
for more information. In order to reduce your
270-
traffic consumption, you may configure an{' '}
271-
<Link
272-
component={RouterLink}
273-
to='https://docs.getunleash.io/reference/unleash-edge'
274-
>
275-
Unleash Edge instance
276-
</Link>{' '}
277-
in your own datacenter.
278-
</Alert>
279-
}
280-
/>
281-
<StyledBox>
282-
<Grid container component='header' spacing={2}>
283-
<Grid item xs={12} md={10}>
284-
<NetworkTrafficUsagePlanSummary
285-
usageTotal={usageTotal}
286-
includedTraffic={includedTraffic}
287-
overageCost={overageCost}
288-
estimatedMonthlyCost={estimatedMonthlyCost}
289-
/>
290-
</Grid>
291-
<Grid item xs={12} md={2}>
292-
<Select
293-
id='dataperiod-select'
294-
name='dataperiod'
295-
options={selectablePeriods}
296-
value={period}
297-
onChange={(e) => setPeriod(e.target.value)}
298-
style={{
299-
minWidth: '100%',
300-
marginBottom: theme.spacing(2),
301-
}}
302-
formControlStyles={{ width: '100%' }}
303-
/>
304-
</Grid>
305-
</Grid>
306-
307-
<Grid item xs={12} md={2}>
308-
<Bar
309-
data={data}
310-
plugins={[customHighlightPlugin()]}
311-
options={options}
312-
aria-label='An instance metrics line chart with two lines: requests per second for admin API and requests per second for client API'
313-
/>
314-
</Grid>
315-
</StyledBox>
316-
</>
317-
}
318-
/>
319-
);
320-
};
321-
322132
// Register dependencies that we need to draw the chart.
323133
ChartJS.register(
324134
annotationPlugin,

‎frontend/src/hooks/api/getters/useInstanceTrafficMetrics/useInstanceTrafficMetrics.ts

+3-35
Original file line numberDiff line numberDiff line change
@@ -2,42 +2,10 @@ import useSWR from 'swr';
22
import { useMemo } from 'react';
33
import { formatApiPath } from 'utils/formatPath';
44
import handleErrorResponses from '../httpErrorResponseHandler';
5-
import type {
6-
TrafficUsageDataSegmentedCombinedSchema,
7-
TrafficUsageDataSegmentedSchema,
8-
} from 'openapi';
5+
import type { TrafficUsageDataSegmentedCombinedSchema } from 'openapi';
96
import { cleanTrafficData } from 'utils/traffic-calculations';
107

11-
export interface IInstanceTrafficMetricsResponse {
12-
usage: TrafficUsageDataSegmentedSchema;
13-
14-
refetch: () => void;
15-
16-
loading: boolean;
17-
18-
error?: Error;
19-
}
20-
21-
export const useInstanceTrafficMetrics = (
22-
period: string,
23-
): IInstanceTrafficMetricsResponse => {
24-
const { data, error, mutate } = useSWR(
25-
formatApiPath(`api/admin/metrics/traffic/${period}`),
26-
fetcher,
27-
);
28-
29-
return useMemo(
30-
() => ({
31-
usage: data,
32-
loading: !error && !data,
33-
refetch: () => mutate(),
34-
error,
35-
}),
36-
[data, error, mutate],
37-
);
38-
};
39-
40-
export type InstanceTrafficMetricsResponse2 = {
8+
export type InstanceTrafficMetricsResponse = {
419
refetch: () => void;
4210
result:
4311
| { state: 'success'; data: TrafficUsageDataSegmentedCombinedSchema }
@@ -54,7 +22,7 @@ export const useTrafficSearch = (
5422
from: string;
5523
to: string;
5624
},
57-
): InstanceTrafficMetricsResponse2 => {
25+
): InstanceTrafficMetricsResponse => {
5826
const apiPath = `api/admin/metrics/traffic-search?grouping=${grouping}&from=${from}&to=${to}`;
5927

6028
const { data, error, mutate } = useSWR(formatApiPath(apiPath), fetcher);

0 commit comments

Comments
 (0)