1
- import { type FC , useEffect , useMemo , useState } from 'react' ;
2
- import useTheme from '@mui/material/styles/useTheme' ;
1
+ import type { FC } from 'react' ;
3
2
import styled from '@mui/material/styles/styled' ;
4
3
import { usePageTitle } from 'hooks/usePageTitle' ;
5
- import Select from 'component/common/select' ;
6
4
import { Link as RouterLink } from 'react-router-dom' ;
7
- import { Alert , Link } from '@mui/material' ;
5
+ import { Alert } from '@mui/material' ;
8
6
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender' ;
9
7
import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig' ;
10
8
import {
@@ -18,25 +16,14 @@ import {
18
16
} from 'chart.js' ;
19
17
20
18
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' ;
24
19
import annotationPlugin from 'chartjs-plugin-annotation' ;
25
- import {
26
- calculateEstimatedMonthlyCost as deprecatedCalculateEstimatedMonthlyCost ,
27
- useTrafficDataEstimation ,
28
- } from 'hooks/useTrafficData' ;
29
20
import { customHighlightPlugin } from 'component/common/Chart/customHighlightPlugin' ;
30
21
import { useTrafficLimit } from './hooks/useTrafficLimit' ;
31
- import { BILLING_TRAFFIC_BUNDLE_PRICE } from 'component/admin/billing/BillingDashboard/BillingPlan/BillingPlan' ;
32
- import { useLocationSettings } from 'hooks/useLocationSettings' ;
33
22
import { PeriodSelector } from './PeriodSelector' ;
34
23
import { useUiFlag } from 'hooks/useUiFlag' ;
35
24
import { OverageInfo , RequestSummary } from './RequestSummary' ;
36
- import { calculateOverageCost } from 'utils/traffic-calculations' ;
37
25
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' ;
40
27
import { useTrafficStats } from './hooks/useStats' ;
41
28
import { BoldText , StyledBox , TopRow } from './SharedComponents' ;
42
29
import { useChartDataSelection } from './hooks/useChartDataSelection' ;
@@ -48,7 +35,7 @@ const TrafficInfoBoxes = styled('div')(({ theme }) => ({
48
35
gap : theme . spacing ( 2 , 4 ) ,
49
36
} ) ) ;
50
37
51
- const NewNetworkTrafficUsage : FC = ( ) => {
38
+ const NetworkTrafficUsage : FC = ( ) => {
52
39
usePageTitle ( 'Network - Data Usage' ) ;
53
40
54
41
const estimateTrafficDataCost = useUiFlag ( 'estimateTrafficDataCost' ) ;
@@ -142,183 +129,6 @@ const NewNetworkTrafficUsage: FC = () => {
142
129
) ;
143
130
} ;
144
131
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
-
322
132
// Register dependencies that we need to draw the chart.
323
133
ChartJS . register (
324
134
annotationPlugin ,
0 commit comments