feat: add selected month summary card for data usage (#6891)

## About the changes

Adds a summary card that sums up data usage for selected month, and for
Pro shows monthly quota and badge color according to monthly quota

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

@@ -29,6 +29,7 @@ import {
 import type { Theme } from '@mui/material/styles/createTheme';
 import Grid from '@mui/material/Grid';
 import { useUiFlag } from 'hooks/useUiFlag';
+import { NetworkTrafficUsagePlanSummary } from './NetworkTrafficUsagePlanSummary';
 
 type ChartDatasetType = ChartDataset<'bar'>;
 
@@ -46,14 +47,9 @@ type EndpointInfo = {
     order: number;
 };
 
-const StyledHeader = styled('h3')(({ theme }) => ({
-    display: 'flex',
-    gap: theme.spacing(1),
-    alignItems: 'center',
-    fontSize: theme.fontSizes.bodySize,
-    margin: 0,
-    marginTop: theme.spacing(1),
-    fontWeight: theme.fontWeight.bold,
+const StyledBox = styled(Box)(({ theme }) => ({
+    display: 'grid',
+    gap: theme.spacing(5),
 }));
 
 const padMonth = (month: number): string =>
@@ -156,7 +152,7 @@ const toChartData = (
 const customHighlightPlugin = {
     id: 'customLine',
     beforeDraw: (chart: Chart) => {
-        const width = 36;
+        const width = 46;
         if (chart.tooltip?.opacity && chart.tooltip.x) {
             const x = chart.tooltip.caretX;
             const yAxis = chart.scales.y;
@@ -268,28 +264,30 @@ const createBarChartOptions = (
     },
 });
 
+const endpointsInfo: Record<string, EndpointInfo> = {
+    '/api/admin': {
+        label: 'Admin',
+        color: '#6D66D9',
+        order: 1,
+    },
+    '/api/frontend': {
+        label: 'Frontend',
+        color: '#A39EFF',
+        order: 2,
+    },
+    '/api/client': {
+        label: 'Server',
+        color: '#D8D6FF',
+        order: 3,
+    },
+};
+
+const proPlanIncludedRequests = 53000000;
+
 export const NetworkTrafficUsage: VFC = () => {
     usePageTitle('Network - Data Usage');
     const theme = useTheme();
 
-    const endpointsInfo: Record<string, EndpointInfo> = {
-        '/api/admin': {
-            label: 'Admin',
-            color: '#6D66D9',
-            order: 1,
-        },
-        '/api/frontend': {
-            label: 'Frontend',
-            color: '#A39EFF',
-            order: 2,
-        },
-        '/api/client': {
-            label: 'Server',
-            color: '#D8D6FF',
-            order: 3,
-        },
-    };
-
     const selectablePeriods = getSelectablePeriods();
     const record = toPeriodsRecord(selectablePeriods);
     const [period, setPeriod] = useState<string>(selectablePeriods[0].key);
@@ -316,6 +314,8 @@ export const NetworkTrafficUsage: VFC = () => {
 
     const [datasets, setDatasets] = useState<ChartDatasetType[]>([]);
 
+    const [usageTotal, setUsageTotal] = useState<number>(0);
+
     const data = {
         labels,
         datasets,
@@ -335,43 +335,67 @@ export const NetworkTrafficUsage: VFC = () => {
         }
     }, [period]);
 
+    useEffect(() => {
+        if (data) {
+            const usage = data.datasets.reduce(
+                (acc: number, current: ChartDatasetType) => {
+                    return (
+                        acc +
+                        current.data.reduce(
+                            (acc_inner, current_inner) =>
+                                acc_inner + current_inner,
+                            0,
+                        )
+                    );
+                },
+                0,
+            );
+            setUsageTotal(usage);
+        }
+    }, [data]);
+
     return (
         <ConditionallyRender
             condition={isOss() || !flagEnabled}
             show={<Alert severity='warning'>No data available.</Alert>}
             elseShow={
                 <>
-                    <Grid container component='header' spacing={2}>
-                        <Grid item xs={12} md={10}>
-                            <StyledHeader>
-                                Number of requests to Unleash
-                            </StyledHeader>
+                    <StyledBox>
+                        <Grid container component='header' spacing={2}>
+                            <Grid item xs={12} md={10}>
+                                <Grid item xs={7} md={5.5}>
+                                    <NetworkTrafficUsagePlanSummary
+                                        usageTotal={usageTotal}
+                                        planIncludedRequests={
+                                            proPlanIncludedRequests
+                                        }
+                                    />
+                                </Grid>
+                            </Grid>
+                            <Grid item xs={12} md={2}>
+                                <Select
+                                    id='dataperiod-select'
+                                    name='dataperiod'
+                                    options={selectablePeriods}
+                                    value={period}
+                                    onChange={(e) => setPeriod(e.target.value)}
+                                    style={{
+                                        minWidth: '100%',
+                                        marginBottom: theme.spacing(2),
+                                    }}
+                                    formControlStyles={{ width: '100%' }}
+                                />
+                            </Grid>
                         </Grid>
                         <Grid item xs={12} md={2}>
-                            <Select
-                                id='dataperiod-select'
-                                name='dataperiod'
-                                options={selectablePeriods}
-                                value={period}
-                                onChange={(e) => setPeriod(e.target.value)}
-                                style={{
-                                    minWidth: '100%',
-                                    marginBottom: theme.spacing(2),
-                                }}
-                                formControlStyles={{ width: '100%' }}
-                            />
-                        </Grid>
-                    </Grid>
-                    <Box sx={{ display: 'grid', gap: 4 }}>
-                        <div>
                             <Bar
                                 data={data}
                                 plugins={[customHighlightPlugin]}
                                 options={options}
                                 aria-label='An instance metrics line chart with two lines: requests per second for admin API and requests per second for client API'
                             />
-                        </div>
-                    </Box>
+                        </Grid>
+                    </StyledBox>
                 </>
             }
         />

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

@@ -0,0 +1,113 @@
+import styled from '@mui/material/styles/styled';
+import Box from '@mui/system/Box';
+import Grid from '@mui/material/Grid';
+import { flexRow } from 'themes/themeStyles';
+import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
+import { Badge } from 'component/common/Badge/Badge';
+import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
+
+const StyledContainer = styled('div')(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    padding: theme.spacing(3),
+    border: `2px solid ${theme.palette.divider}`,
+    borderRadius: theme.shape.borderRadiusLarge,
+}));
+
+const StyledCardTitleRow = styled(Box)(() => ({
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+}));
+
+const StyledCardDescription = styled(Box)(({ theme }) => ({
+    flex: 1,
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing(2.5),
+    color: theme.palette.text.secondary,
+    fontSize: theme.fontSizes.smallBody,
+    marginTop: theme.spacing(2),
+}));
+
+const RowContainer = styled(Box)(({ theme }) => ({
+    ...flexRow,
+}));
+
+const StyledNumbersDiv = styled('div')(({ theme }) => ({
+    marginLeft: 'auto',
+    display: 'flex',
+    justifyContent: 'space-between',
+    textDecoration: 'none',
+    color: theme.palette.text.primary,
+}));
+
+interface INetworkTrafficUsagePlanSummary {
+    usageTotal: number;
+    planIncludedRequests: number;
+}
+
+export const NetworkTrafficUsagePlanSummary = ({
+    usageTotal,
+    planIncludedRequests,
+}: INetworkTrafficUsagePlanSummary) => {
+    const { isPro } = useUiConfig();
+    return (
+        <StyledContainer>
+            <Grid item>
+                <StyledCardTitleRow>
+                    <b>Number of requests to Unleash</b>
+                </StyledCardTitleRow>
+                <StyledCardDescription>
+                    <RowContainer>
+                        Incoming requests for selection{' '}
+                        <StyledNumbersDiv>
+                            <ConditionallyRender
+                                condition={isPro()}
+                                show={
+                                    <ConditionallyRender
+                                        condition={
+                                            usageTotal <= planIncludedRequests
+                                        }
+                                        show={
+                                            <Badge color='success'>
+                                                {usageTotal.toLocaleString()}{' '}
+                                                requests
+                                            </Badge>
+                                        }
+                                        elseShow={
+                                            <Badge color='error'>
+                                                {usageTotal.toLocaleString()}{' '}
+                                                requests
+                                            </Badge>
+                                        }
+                                    />
+                                }
+                                elseShow={
+                                    <Badge color='neutral'>
+                                        {usageTotal.toLocaleString()} requests
+                                    </Badge>
+                                }
+                            />
+                        </StyledNumbersDiv>
+                    </RowContainer>
+                </StyledCardDescription>
+                <ConditionallyRender
+                    condition={isPro()}
+                    show={
+                        <StyledCardDescription>
+                            <RowContainer>
+                                Included in your plan monthly
+                                <StyledNumbersDiv>
+                                    {planIncludedRequests.toLocaleString()}{' '}
+                                    requests
+                                </StyledNumbersDiv>
+                            </RowContainer>
+                        </StyledCardDescription>
+                    }
+                />
+            </Grid>
+        </StyledContainer>
+    );
+};