From 1b2f983974f82c0f424f2c884216e5eea82dbcc1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ivar=20Conradi=20=C3=98sthus?= <ivar@getunleash.io>
Date: Wed, 24 Apr 2024 15:59:18 +0200
Subject: [PATCH] fix: improve traffic messaging summary (#6922)

Minor tweaks to traffic messaging summary.
---
 .../NetworkTrafficUsage/NetworkTrafficUsage.tsx  |  6 ++++--
 .../NetworkTrafficUsagePlanSummary.tsx           | 16 +++++++++++++++-
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/frontend/src/component/admin/network/NetworkTrafficUsage/NetworkTrafficUsage.tsx b/frontend/src/component/admin/network/NetworkTrafficUsage/NetworkTrafficUsage.tsx
index 8a6b6afc2557..8771f6cca5ac 100644
--- 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
index 504a6bab35ba..b1061851c41d 100644
--- 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>
     );