web/satellite: load usage and charges separately

This change separates the loading of usage and charges from other API
calls since that may take long. This will allow the other data to be
displayed while usage and charges are waited on.

Issue: https://github.com/storj/storj/issues/6259

Change-Id: I4a8d8f911baf432d6f1e9eee49176480197ae3ca

web/satellite/src/components/account/billing/billingTabs/Overview.vue

@@ -53,7 +53,10 @@
                 </div>
             </div>
         </div>
-        <div class="cost-by-project">
+        <div v-if="isDataFetching">
+            <v-loader />
+        </div>
+        <div v-else class="cost-by-project">
             <h3 class="cost-by-project__title">Cost by Project</h3>
             <div class="cost-by-project__buttons">
                 <v-button
@@ -105,6 +108,7 @@ import { useAnalyticsStore } from '@/store/modules/analyticsStore';
 import UsageAndChargesItem from '@/components/account/billing/billingTabs/UsageAndChargesItem.vue';
 import VButton from '@/components/common/VButton.vue';
 import VInfo from '@/components/common/VInfo.vue';
+import VLoader from '@/components/common/VLoader.vue';
 
 import EstimatedChargesIcon from '@/../static/images/account/billing/totalEstimatedChargesIcon.svg';
 import AvailableBalanceIcon from '@/../static/images/account/billing/availableBalanceIcon.svg';
@@ -182,14 +186,14 @@ onMounted(async () => {
     }
 
     try {
-        await billingStore.getProjectUsageAndChargesCurrentRollup();
         await billingStore.getProjectUsagePriceModel();
+        await billingStore.getProjectUsageAndChargesCurrentRollup();
     } catch (error) {
         notify.notifyError(error, AnalyticsErrorEventSource.BILLING_OVERVIEW_TAB);
+    } finally {
+        isDataFetching.value = false;
     }
 
-    isDataFetching.value = false;
-
     const rawDate = new Date();
     const currentYear = rawDate.getFullYear();
     currentDate.value = `${SHORT_MONTHS_NAMES[rawDate.getMonth()]} ${currentYear}`;

web/satellite/src/components/project/dashboard/ProjectDashboard.vue

@@ -479,7 +479,6 @@ onMounted(async (): Promise<void> => {
 
         await Promise.all([
             projectsStore.getDailyProjectData({ since: past, before: now }),
-            billingStore.getProjectUsageAndChargesCurrentRollup(),
             billingStore.getCoupon(),
             pmStore.getProjectMembers(FIRST_PAGE, projectID),
             agStore.getAccessGrants(FIRST_PAGE, projectID),
@@ -490,6 +489,10 @@ onMounted(async (): Promise<void> => {
         isDataFetching.value = false;
     }
 
+    billingStore.getProjectUsageAndChargesCurrentRollup().catch(error => {
+        notify.notifyError(error, AnalyticsErrorEventSource.PROJECT_DASHBOARD_PAGE);
+    });
+
     try {
         await bucketsStore.getBuckets(FIRST_PAGE, projectID);
 

web/satellite/src/components/projectsList/ProjectsList.vue

@@ -141,13 +141,15 @@ async function onProjectSelected(project: Project): Promise<void> {
 
     try {
         await Promise.all([
-            billingStore.getProjectUsageAndChargesCurrentRollup(),
             pmStore.getProjectMembers(FIRST_PAGE, projectID),
             agStore.getAccessGrants(FIRST_PAGE, projectID),
             bucketsStore.getBuckets(FIRST_PAGE, projectID),
             projectsStore.getProjectLimits(projectID),
         ]);
 
+        billingStore.getProjectUsageAndChargesCurrentRollup().catch((error) => {
+            notify.notifyError(error, AnalyticsErrorEventSource.PROJECTS_LIST);
+        });
         analyticsStore.pageVisit(RouteConfig.EditProjectDetails.path);
         await router.push(RouteConfig.EditProjectDetails.path);
     } catch (error) {

web/satellite/vuetify-poc/src/views/Billing.vue

@@ -119,7 +119,12 @@
                     </v-col>
                 </v-row>
 
-                <usage-and-charges-component :project-ids="projectIDs" />
+                <v-row v-if="isRollupLoading" justify="center" align="center">
+                    <v-col cols="auto">
+                        <v-progress-circular indeterminate />
+                    </v-col>
+                </v-row>
+                <usage-and-charges-component v-else :project-ids="projectIDs" />
             </v-window-item>
 
             <v-window-item>
@@ -179,11 +184,9 @@ import {
     VChip,
     VDivider,
     VBtn,
-    VTextField,
     VProgressCircular,
     VIcon,
 } from 'vuetify/components';
-import { VDataTable } from 'vuetify/labs/components';
 
 import { useLoading } from '@/composables/useLoading';
 import { useNotify } from '@/utils/hooks';
@@ -211,6 +214,8 @@ const projectsStore = useProjectsStore();
 const { isLoading, withLoading } = useLoading();
 const notify = useNotify();
 
+const isRollupLoading = ref(true);
+
 const creditCards = computed((): CreditCard[] => {
     return billingStore.state.creditCards;
 });
@@ -320,22 +325,28 @@ function getColor(status: string): string {
     return 'error';
 }
 
-onMounted(() => {
+onMounted(async () => {
     withLoading(async () => {
         try {
             await Promise.all([
-                billingStore.getProjectUsageAndChargesCurrentRollup(),
                 billingStore.getBalance(),
                 billingStore.getCoupon(),
                 billingStore.getCreditCards(),
                 projectsStore.getProjects(),
-                billingStore.getProjectUsageAndChargesCurrentRollup(),
                 billingStore.getProjectUsagePriceModel(),
             ]);
         } catch (error) {
             notify.notifyError(error, AnalyticsErrorEventSource.BILLING_AREA);
         }
     });
+
+    try {
+        await billingStore.getProjectUsageAndChargesCurrentRollup();
+    } catch (error) {
+        notify.notifyError(error, AnalyticsErrorEventSource.BILLING_AREA);
+    } finally {
+        isRollupLoading.value = false;
+    }
 });
 </script>
 

web/satellite/vuetify-poc/src/views/Dashboard.vue

@@ -9,30 +9,26 @@
         <v-row class="d-flex align-center justify-center mt-2">
             <v-col cols="12" md="6">
                 <v-card ref="chartContainer" title="Storage" variant="flat" :border="true" rounded="xlg">
-                    <template v-if="!isDataFetching">
-                        <h4 class="pl-4">{{ getDimension(storageUsage) }}</h4>
-                        <StorageChart
-                            :width="chartWidth"
-                            :height="170"
-                            :data="storageUsage"
-                            :since="chartsSinceDate"
-                            :before="chartsBeforeDate"
-                        />
-                    </template>
+                    <h4 class="pl-4">{{ getDimension(storageUsage) }}</h4>
+                    <StorageChart
+                        :width="chartWidth"
+                        :height="170"
+                        :data="storageUsage"
+                        :since="chartsSinceDate"
+                        :before="chartsBeforeDate"
+                    />
                 </v-card>
             </v-col>
             <v-col cols="12" md="6">
                 <v-card title="Bandwidth" variant="flat" :border="true" rounded="xlg">
-                    <template v-if="!isDataFetching">
-                        <h4 class="pl-4">{{ getDimension(allocatedBandwidthUsage) }}</h4>
-                        <BandwidthChart
-                            :width="chartWidth"
-                            :height="170"
-                            :data="allocatedBandwidthUsage"
-                            :since="chartsSinceDate"
-                            :before="chartsBeforeDate"
-                        />
-                    </template>
+                    <h4 class="pl-4">{{ getDimension(allocatedBandwidthUsage) }}</h4>
+                    <BandwidthChart
+                        :width="chartWidth"
+                        :height="170"
+                        :data="allocatedBandwidthUsage"
+                        :since="chartsSinceDate"
+                        :before="chartsBeforeDate"
+                    />
                 </v-card>
             </v-col>
         </v-row>
@@ -108,7 +104,6 @@ const bucketsStore = useBucketsStore();
 
 const notify = useNotify();
 
-const isDataFetching = ref<boolean>(true);
 const chartWidth = ref<number>(0);
 const chartContainer = ref<ComponentPublicInstance>();
 
@@ -318,8 +313,6 @@ onMounted(async (): Promise<void> => {
         ]);
     } catch (error) {
         notify.notifyError(error, AnalyticsErrorEventSource.PROJECT_DASHBOARD_PAGE);
-    } finally {
-        isDataFetching.value = false;
     }
 });