web/satellite/v2: add usage to projects table

This change adds storage and bandwidth usages to the projects table.

Issue: #6561

Change-Id: I85d234456948e0c09b877e5b7fca2ec780af7b29

web/satellite/src/api/projects.ts

@@ -83,6 +83,8 @@ export class ProjectsHttpApi implements ProjectsApi {
             false,
             p.memberCount,
             p.edgeURLOverrides,
+            p.storageUsed,
+            p.bandwidthUsed,
         ));
     }
 

web/satellite/src/types/projects.ts

@@ -126,6 +126,8 @@ export class Project {
         public isSelected: boolean = false,
         public memberCount: number = 0,
         public edgeURLOverrides?: EdgeURLOverrides,
+        public storageUsed: number = 0,
+        public bandwidthUsed: number = 0,
     ) {}
 
     /**

web/satellite/vuetify-poc/src/components/ProjectsTableComponent.vue

@@ -171,6 +171,8 @@ const headers = [
     { title: 'Project', key: 'name', align: 'start' },
     { title: 'Role', key: 'role' },
     { title: 'Members', key: 'memberCount' },
+    { title: 'Storage', key: 'storageUsed', sortable: false },
+    { title: 'Bandwidth', key: 'bandwidthUsed', sortable: false },
     { title: 'Date Added', key: 'createdAt' },
     { title: 'Actions', key: 'actions', sortable: false, width: '0' },
 ];

web/satellite/vuetify-poc/src/types/projects.ts

@@ -14,6 +14,8 @@ export class ProjectItemModel {
         public role: ProjectItemRole,
         public memberCount: number | null,
         public createdAt: Date,
+        public storageUsed: string = '',
+        public bandwidthUsed: string = '',
     ) {}
 }
 

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

@@ -118,6 +118,7 @@ import { useBillingStore } from '@/store/modules/billingStore';
 import { RouteName } from '@poc/router';
 import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
 import { useAnalyticsStore } from '@/store/modules/analyticsStore';
+import { Dimensions, Size } from '@/utils/bytesSize';
 
 import ProjectCard from '@poc/components/ProjectCard.vue';
 import PageTitleComponent from '@poc/components/PageTitleComponent.vue';
@@ -184,6 +185,8 @@ const items = computed((): ProjectItemModel[] => {
         project.ownerId === usersStore.state.user.id ? ProjectRole.Owner : ProjectRole.Member,
         project.memberCount,
         new Date(project.createdAt),
+        formattedValue(new Size(project.storageUsed, 2)),
+        formattedValue(new Size(project.bandwidthUsed, 2)),
     )).sort((projA, projB) => {
         if (projA.role === ProjectRole.Owner && projB.role === ProjectRole.Member) return -1;
         if (projA.role === ProjectRole.Member && projB.role === ProjectRole.Owner) return 1;
@@ -221,6 +224,18 @@ function onInviteClicked(item: ProjectItemModel): void {
     isAddMemberDialogShown.value = true;
 }
 
+/**
+ * Formats value to needed form and returns it.
+ */
+function formattedValue(value: Size): string {
+    switch (value.label) {
+    case Dimensions.Bytes:
+        return '0';
+    default:
+        return `${value.formattedBytes.replace(/\.0+$/, '')}${value.label}`;
+    }
+}
+
 onMounted(() => {
     if (configStore.state.config.nativeTokenPaymentsEnabled && configStore.state.config.billingFeaturesEnabled) {
         Promise.all([