fix: improve traffic messaging summary (#6922)

Minor tweaks to traffic messaging summary.
Unleash · Apr 24, 2024 · 1b2f983 · 1b2f983
1 parent f5061bc
commit 1b2f983
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 3 deletions.
diff --git a/frontend/src/component/admin/network/NetworkTrafficUsage/NetworkTrafficUsage.tsx b/frontend/src/component/admin/network/NetworkTrafficUsage/NetworkTrafficUsage.tsx
@@ -85,7 +85,9 @@ const getSelectablePeriods = (): SelectablePeriod[] => {
             current.getMonth() - subtractMonthCount,
             1,
         );
-        selectablePeriods.push(toSelectablePeriod(date));
+        if (date > new Date('2024-03-31')) {
+            selectablePeriods.push(toSelectablePeriod(date));
+        }
     }
     return selectablePeriods;
 };
@@ -357,7 +359,7 @@ export const NetworkTrafficUsage: VFC = () => {
     return (
         <ConditionallyRender
             condition={isOss() || !flagEnabled}
-            show={<Alert severity='warning'>No data available.</Alert>}
+            show={<Alert severity='warning'>Not enabled.</Alert>}
             elseShow={
                 <>
                     <StyledBox>

diff --git a/frontend/src/component/admin/network/NetworkTrafficUsage/NetworkTrafficUsagePlanSummary.tsx b/frontend/src/component/admin/network/NetworkTrafficUsage/NetworkTrafficUsagePlanSummary.tsx
@@ -53,6 +53,7 @@ export const NetworkTrafficUsagePlanSummary = ({
     planIncludedRequests,
 }: INetworkTrafficUsagePlanSummary) => {
     const { isPro } = useUiConfig();
+    const overages = usageTotal - planIncludedRequests;
     return (
         <StyledContainer>
             <Grid item>
@@ -61,7 +62,7 @@ export const NetworkTrafficUsagePlanSummary = ({
                 </StyledCardTitleRow>
                 <StyledCardDescription>
                     <RowContainer>
-                        Incoming requests for selection{' '}
+                        Incoming requests selected month{' '}
                         <StyledNumbersDiv>
                             <ConditionallyRender
                                 condition={isPro()}
@@ -107,6 +108,19 @@ export const NetworkTrafficUsagePlanSummary = ({
                         </StyledCardDescription>
                     }
                 />
+                <ConditionallyRender
+                    condition={isPro() && overages > 0}
+                    show={
+                        <StyledCardDescription>
+                            <RowContainer>
+                                Requests overages this month
+                                <StyledNumbersDiv>
+                                    {overages.toLocaleString()} requests
+                                </StyledNumbersDiv>
+                            </RowContainer>
+                        </StyledCardDescription>
+                    }
+                />
             </Grid>
         </StyledContainer>
     );