From 74878094768f214963e67f65f4ad5e65b389cba2 Mon Sep 17 00:00:00 2001
From: Moby von Briesen <mobyvb@gmail.com>
Date: Mon, 24 Jul 2023 19:39:47 -0400
Subject: [PATCH] web/satellite: unmock list buckets in vuetify app

This change implements the table on the buckets view of the vuetify app.
Searching and pagination are implemented, but sorting functionality
needs to be added in a separate change - we need to extend the
bucketsStore/backend functionality in order to support sorting.

Resolves https://github.com/storj/storj/issues/6062

Change-Id: I4e92e6facbd7b21f4ec081e41f7e568ddb3cea29
---
 .../src/components/BucketsDataTable.vue       | 144 ++++++++++++++++--
 web/satellite/vuetify-poc/src/router/index.ts |   4 +-
 .../vuetify-poc/src/views/Buckets.vue         |  36 +----
 3 files changed, 133 insertions(+), 51 deletions(-)

diff --git a/web/satellite/vuetify-poc/src/components/BucketsDataTable.vue b/web/satellite/vuetify-poc/src/components/BucketsDataTable.vue
index 21e1074f1..6a9c229c1 100644
--- a/web/satellite/vuetify-poc/src/components/BucketsDataTable.vue
+++ b/web/satellite/vuetify-poc/src/components/BucketsDataTable.vue
@@ -11,45 +11,161 @@
             hide-details
         />
 
-        <v-data-table
+        <v-data-table-server
             v-model="selected"
-            :sort-by="sortBy"
             :headers="headers"
-            :items="buckets"
+            :items="page.buckets"
             :search="search"
+            :loading="areBucketsFetching"
+            :items-length="page.totalCount"
+            :items-per-page-options="tableSizeOptions(page.totalCount)"
+            item-value="name"
             class="elevation-1"
-            show-select
+            @update:itemsPerPage="onUpdateLimit"
+            @update:page="onUpdatePage"
         >
             <template #item.name="{ item }">
                 <div>
                     <v-btn
-                        class="rounded-lg w-100 pl-1 pr-4 justify-start font-weight-bold"
+                        class="rounded-lg w-100 pl-1 pr-4 justify-start font-weight-bold text-lowercase"
                         variant="text"
                         height="40"
                         color="default"
-                        to="/bucket"
+                        @click="openBucket(item.raw.name)"
                     >
                         <img src="../assets/icon-bucket-tonal.svg" alt="Bucket" class="mr-3">
                         {{ item.raw.name }}
                     </v-btn>
                 </div>
             </template>
-        </v-data-table>
+            <template #item.storage="{ item }">
+                <span>
+                    {{ item.raw.storage.toFixed(2) + 'GB' }}
+                </span>
+            </template>
+            <template #item.egress="{ item }">
+                <span>
+                    {{ item.raw.egress.toFixed(2) + 'GB' }}
+                </span>
+            </template>
+            <template #item.objectCount="{ item }">
+                <span>
+                    {{ item.raw.objectCount.toLocaleString() }}
+                </span>
+            </template>
+            <template #item.segmentCount="{ item }">
+                <span>
+                    {{ item.raw.segmentCount.toLocaleString() }}
+                </span>
+            </template>
+            <template #item.createdAt="{ item }">
+                <span>
+                    {{ item.raw.since.toLocaleString() }}
+                </span>
+            </template>
+        </v-data-table-server>
     </v-card>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, watch, onMounted, computed } from 'vue';
+import { useRouter } from 'vue-router';
 import { VCard, VTextField, VBtn } from 'vuetify/components';
-import { VDataTable } from 'vuetify/labs/components';
+import { VDataTableServer } from 'vuetify/labs/components';
 
-const props = defineProps<{
-    headers: unknown[],
-    buckets: unknown[],
-}>();
+import { BucketPage, BucketCursor } from '@/types/buckets';
+import { useBucketsStore } from '@/store/modules/bucketsStore';
+import { useNotify } from '@/utils/hooks';
+import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
+import { useProjectsStore } from '@/store/modules/projectsStore';
+import { DEFAULT_PAGE_LIMIT } from '@/types/pagination';
+import { tableSizeOptions } from '@/types/common';
 
+const bucketsStore = useBucketsStore();
+const projectsStore = useProjectsStore();
+const notify = useNotify();
+const router = useRouter();
+
+const FIRST_PAGE = 1;
+const areBucketsFetching = ref<boolean>(true);
 const search = ref<string>('');
+const searchTimer = ref<NodeJS.Timeout>();
 const selected = ref([]);
 
-const sortBy = [{ key: 'date', order: 'asc' }];
+const headers = [
+    {
+        title: 'Name',
+        align: 'start',
+        key: 'name',
+        sortable: false,
+    },
+    { title: 'Storage', key: 'storage', sortable: false },
+    { title: 'Egress', key: 'egress', sortable: false },
+    { title: 'Objects', key: 'objectCount', sortable: false },
+    { title: 'Segments', key: 'segmentCount', sortable: false },
+    { title: 'Date Created', key: 'createdAt', sortable: false },
+];
+
+/**
+ * Returns buckets cursor from store.
+ */
+const cursor = computed((): BucketCursor => {
+    return bucketsStore.state.cursor;
+});
+
+/**
+ * Returns buckets page from store.
+ */
+const page = computed((): BucketPage => {
+    return bucketsStore.state.page;
+});
+
+/**
+ * Fetches bucket using api.
+ */
+async function fetchBuckets(page = FIRST_PAGE, limit = DEFAULT_PAGE_LIMIT): Promise<void> {
+    try {
+        await bucketsStore.getBuckets(page, projectsStore.state.selectedProject.id, limit);
+        if (areBucketsFetching.value) areBucketsFetching.value = false;
+    } catch (error) {
+        notify.error(`Unable to fetch buckets. ${error.message}`, AnalyticsErrorEventSource.BUCKET_TABLE);
+    }
+}
+
+/**
+ * Handles update table rows limit event.
+ */
+ function onUpdateLimit(limit: number): void {
+    fetchBuckets(page.value.currentPage, limit);
+}
+
+/**
+ * Handles update table page event.
+ */
+function onUpdatePage(page: number): void {
+    fetchBuckets(page, cursor.value.limit);
+}
+
+/**
+ * Handles update table search.
+ */
+ watch(() => search.value, () => {
+    clearTimeout(searchTimer.value);
+
+    searchTimer.value = setTimeout(() => {
+        bucketsStore.setBucketsSearch(search.value);
+        fetchBuckets();
+    }, 500); // 500ms delay for every new call.
+});
+
+/**
+ * Navigates to bucket page.
+ */
+function openBucket(bucketName: string): void {
+    router.push(`/projects/${projectsStore.state.selectedProject.id}/buckets/${bucketName}`);
+}
+
+onMounted(() => {
+    fetchBuckets();
+});
 </script>
diff --git a/web/satellite/vuetify-poc/src/router/index.ts b/web/satellite/vuetify-poc/src/router/index.ts
index dad215f88..e40988388 100644
--- a/web/satellite/vuetify-poc/src/router/index.ts
+++ b/web/satellite/vuetify-poc/src/router/index.ts
@@ -58,9 +58,9 @@ const routes: RouteRecordRaw[] = [
                 component: () => import(/* webpackChunkName: "Buckets" */ '@poc/views/Buckets.vue'),
             },
             {
-                path: 'bucket',
+                path: 'buckets/:bucketName',
                 name: 'Bucket',
-                component: () => import(/* webpackChunkName: "Buckets" */ '@poc/views/Bucket.vue'),
+                component: () => import(/* webpackChunkName: "Bucket" */ '@poc/views/Bucket.vue'),
             },
             {
                 path: 'access',
diff --git a/web/satellite/vuetify-poc/src/views/Buckets.vue b/web/satellite/vuetify-poc/src/views/Buckets.vue
index 9be9276c9..409839e05 100644
--- a/web/satellite/vuetify-poc/src/views/Buckets.vue
+++ b/web/satellite/vuetify-poc/src/views/Buckets.vue
@@ -87,7 +87,7 @@
             </v-col>
         </v-row>
 
-        <BucketsDataTable :headers="headers" :buckets="buckets" />
+        <BucketsDataTable />
     </v-container>
 </template>
 
@@ -126,38 +126,4 @@ const bucketNameRules = [
         return true;
     },
 ];
-const headers = [
-    {
-        title: 'Name',
-        align: 'start',
-        key: 'name',
-    },
-    { title: 'Files', key: 'files' },
-    { title: 'Storage', key: 'storage' },
-    { title: 'Bandwidth', key: 'bandwidth' },
-    { title: 'Date Created', key: 'date' },
-];
-const buckets = [
-    {
-        name: 'Demo',
-        date: '02 Mar 2023',
-        files: '4,210',
-        bandwidth: '481 MB',
-        storage: '32 GB',
-    },
-    {
-        name: 'Photos',
-        date: '03 Mar 2023',
-        files: '92,155',
-        bandwidth: '2.0 GB',
-        storage: '5.2 GB',
-    },
-    {
-        name: 'Videos',
-        date: '04 Mar 2023',
-        files: '24',
-        bandwidth: '102 MB',
-        storage: '1.7 TB',
-    },
-];
 </script>