From a89c0591d3169d02f5a9fe953943cf858e777eee Mon Sep 17 00:00:00 2001
From: devinxl <devin@nodereal.io>
Date: Tue, 4 Jun 2024 11:05:51 +0800
Subject: [PATCH] fix(dcellar-web-ui): total quota usage cal error

---
 .../dashboard/components/BucketQuotaUsage.tsx | 34 +++++++++----------
 .../src/store/slices/dashboard.ts             |  3 ++
 2 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/apps/dcellar-web-ui/src/modules/dashboard/components/BucketQuotaUsage.tsx b/apps/dcellar-web-ui/src/modules/dashboard/components/BucketQuotaUsage.tsx
index f66972e2..90da7571 100644
--- a/apps/dcellar-web-ui/src/modules/dashboard/components/BucketQuotaUsage.tsx
+++ b/apps/dcellar-web-ui/src/modules/dashboard/components/BucketQuotaUsage.tsx
@@ -31,40 +31,38 @@ export const BucketQuotaUsage = () => {
     dispatch(setBucketDailyQuotaFilter({ loginAccount, bucketNames }));
   };
 
-  const groupDataByTime = useMemo(() => {
+  const quotaUsageByTime = useMemo(() => {
     const data = bucketDailyQuotaUsage || {};
     const filterData = isEmpty(filteredBuckets)
       ? data
       : filteredBuckets.map((item) => data[item]).filter((item) => item !== undefined);
-    const groupDataByTime: Record<
+    const quotaUsageByTime: Record<
       string,
       { MonthlyQuotaSize: string; MonthlyQuotaConsumedSize: string }
     > = {};
     Object.values(filterData).forEach((quotaUsages) => {
       quotaUsages.forEach((item) => {
-        if (!groupDataByTime[item.Date]) {
-          groupDataByTime[item.Date] = {
+        if (!quotaUsageByTime[item.Date]) {
+          return (quotaUsageByTime[item.Date] = {
             MonthlyQuotaSize: String(item.MonthlyQuotaSize),
             MonthlyQuotaConsumedSize: String(item.MonthlyQuotaConsumedSize),
-          };
-        }
-        if (groupDataByTime[item.Date]) {
-          groupDataByTime[item.Date] = {
-            MonthlyQuotaSize: BN(groupDataByTime[item.Date].MonthlyQuotaSize)
-              .plus(item.MonthlyQuotaSize)
-              .toString(),
-            MonthlyQuotaConsumedSize: BN(groupDataByTime[item.Date].MonthlyQuotaConsumedSize)
-              .plus(BN(item.MonthlyQuotaConsumedSize))
-              .toString(),
-          };
+          });
         }
+        quotaUsageByTime[item.Date] = {
+          MonthlyQuotaSize: BN(quotaUsageByTime[item.Date].MonthlyQuotaSize)
+            .plus(item.MonthlyQuotaSize)
+            .toString(),
+          MonthlyQuotaConsumedSize: BN(quotaUsageByTime[item.Date].MonthlyQuotaConsumedSize)
+            .plus(BN(item.MonthlyQuotaConsumedSize))
+            .toString(),
+        };
       });
     });
-    return groupDataByTime;
+    return quotaUsageByTime;
   }, [bucketDailyQuotaUsage, filteredBuckets]);
 
   const lineOptions = useMemo(() => {
-    const lineData = Object.entries(groupDataByTime).map(([time, quotaData]) => ({
+    const lineData = Object.entries(quotaUsageByTime).map(([time, quotaData]) => ({
       time: getMillisecond(+time),
       totalQuota: quotaData.MonthlyQuotaSize,
       quotaUsage: quotaData.MonthlyQuotaConsumedSize,
@@ -151,7 +149,7 @@ export const BucketQuotaUsage = () => {
         },
       ],
     };
-  }, [groupDataByTime, dayjs]);
+  }, [quotaUsageByTime, dayjs]);
 
   return (
     <Flex gap={12} flexDirection={'column'}>
diff --git a/apps/dcellar-web-ui/src/store/slices/dashboard.ts b/apps/dcellar-web-ui/src/store/slices/dashboard.ts
index dcebe0c8..401fab4a 100644
--- a/apps/dcellar-web-ui/src/store/slices/dashboard.ts
+++ b/apps/dcellar-web-ui/src/store/slices/dashboard.ts
@@ -121,6 +121,9 @@ export const setupBucketDailyQuotaUsage =
     }
     const formatData = Object.entries(data).reduce(
       (acc, [key, value]) => {
+        if (!data[key]) {
+          return acc;
+        }
         const bucketName = data[key][0].BucketName;
         if (!acc[bucketName]) {
           acc[bucketName] = [];