fix(dcellar-web-ui): add loading for the dashboard charts

node-real · Jun 4, 2024 · 8091b66 · 8091b66
1 parent a89c059
commit 8091b66
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 26 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
@@ -3,29 +3,29 @@ import { Loading } from '@/components/common/Loading';
 import { FilterContainer } from '@/modules/accounts/components/Common';
 import { useAppDispatch, useAppSelector } from '@/store';
 import { setBucketDailyQuotaFilter } from '@/store/slices/dashboard';
-import { formatChartTime, mergeArr } from '@/utils/dashboard';
+import { formatChartTime } from '@/utils/dashboard';
 import { formatBytes } from '@/utils/formatter';
 import { getMillisecond, getUtcDayjs } from '@/utils/time';
 import { Box, Flex } from '@node-real/uikit';
 import { isEmpty } from 'lodash-es';
 import { useMemo } from 'react';
 import { LABEL_STYLES, VALUE_STYLES } from '../constants';
-import {
-  selectBucketDailyQuotaUsage,
-  selectFilterQuotaUsageBuckets,
-} from '@/store/slices/dashboard';
+import { selectFilterQuotaUsageBuckets } from '@/store/slices/dashboard';
 import { BN } from '@/utils/math';
 import { BucketsFilter } from './BucketsFilter';
 
 export const BucketQuotaUsage = () => {
   const dispatch = useAppDispatch();
   const loginAccount = useAppSelector((root) => root.persist.loginAccount);
-  const bucketDailyQuotaUsage = useAppSelector(selectBucketDailyQuotaUsage());
+  const bucketDailyQuotaUsageRecords = useAppSelector(
+    (root) => root.dashboard.bucketDailyQuotaUsageRecords,
+  );
+  const bucketDailyQuotaUsage = bucketDailyQuotaUsageRecords[loginAccount];
   const filteredBuckets = useAppSelector(selectFilterQuotaUsageBuckets());
   const isLoading = bucketDailyQuotaUsage === undefined;
   const dayjs = getUtcDayjs();
   const noData = !isLoading && isEmpty(bucketDailyQuotaUsage);
-  const bucketNames = Object.keys(bucketDailyQuotaUsage);
+  const bucketNames = (!isLoading && Object.keys(bucketDailyQuotaUsage)) || [''];
 
   const onBucketFiltered = (bucketNames: string[]) => {
     dispatch(setBucketDailyQuotaFilter({ loginAccount, bucketNames }));

diff --git a/apps/dcellar-web-ui/src/modules/dashboard/components/BucketStorageUsage.tsx b/apps/dcellar-web-ui/src/modules/dashboard/components/BucketStorageUsage.tsx
@@ -2,11 +2,7 @@ import { LineChart } from '@/components/charts/LineChart';
 import { Loading } from '@/components/common/Loading';
 import { FilterContainer } from '@/modules/accounts/components/Common';
 import { useAppDispatch, useAppSelector } from '@/store';
-import {
-  selectBucketDailyStorage,
-  selectFilterBuckets,
-  setBucketFilter,
-} from '@/store/slices/dashboard';
+import { selectFilterBuckets, setBucketFilter } from '@/store/slices/dashboard';
 import { formatChartTime, mergeArr } from '@/utils/dashboard';
 import { formatBytes } from '@/utils/formatter';
 import { getUtcDayjs } from '@/utils/time';
@@ -20,9 +16,12 @@ export const BucketStorageUsage = () => {
   const dispatch = useAppDispatch();
   const loginAccount = useAppSelector((root) => root.persist.loginAccount);
   const filterBuckets = useAppSelector(selectFilterBuckets());
-  const bucketDailyStorage = useAppSelector(selectBucketDailyStorage());
-  const bucketNames = bucketDailyStorage.map((item) => item.BucketName);
+  const bucketDailyStorageRecords = useAppSelector(
+    (root) => root.dashboard.bucketDailyStorageUsageRecords,
+  );
+  const bucketDailyStorage = bucketDailyStorageRecords[loginAccount];
   const isLoading = bucketDailyStorage === undefined;
+  const bucketNames = !isLoading ? bucketDailyStorage.map((item) => item.BucketName) : [''];
   const dayjs = getUtcDayjs();
   const noData = !isLoading && isEmpty(bucketDailyStorage);
   const onBucketFiltered = (bucketNames: string[]) => {

diff --git a/apps/dcellar-web-ui/src/store/slices/dashboard.ts b/apps/dcellar-web-ui/src/store/slices/dashboard.ts
@@ -85,18 +85,6 @@ export const selectFilterQuotaUsageBuckets = () => (root: AppState) => {
   );
 };
 
-const defaultBucketDailyStorage = [] as BucketDailyStorageUsage[];
-export const selectBucketDailyStorage = () => (root: AppState) => {
-  const loginAccount = root.persist.loginAccount;
-  return root.dashboard.bucketDailyStorageUsageRecords[loginAccount] || defaultBucketDailyStorage;
-};
-
-const defaultBucketDailyQuota = [] as BucketDailyQuotaUsage[];
-export const selectBucketDailyQuotaUsage = () => (root: AppState) => {
-  const loginAccount = root.persist.loginAccount;
-  return root.dashboard.bucketDailyQuotaUsageRecords[loginAccount] || defaultBucketDailyQuota;
-};
-
 export const setupBucketDailyStorageUsage =
   () => async (dispatch: AppDispatch, getState: GetState) => {
     const { loginAccount } = getState().persist;