web/satellite: use get buckets http endpoint instead of graphql

This change causes the satellite frontend to use the HTTP endpoint for
retrieving bucket usage totals rather than its GraphQL counterpart.

Resolves #6141

Change-Id: I9a42080c8344aa617a910a8782dc61101a6734c8

web/satellite/src/api/buckets.ts

@@ -1,16 +1,15 @@
 // Copyright (C) 2019 Storj Labs, Inc.
 // See LICENSE for copying information.
 
-import { BaseGql } from '@/api/baseGql';
 import { Bucket, BucketCursor, BucketPage, BucketsApi } from '@/types/buckets';
 import { HttpClient } from '@/utils/httpClient';
 import { APIError } from '@/utils/error';
 
 /**
- * BucketsApiGql is a graphql implementation of Buckets API.
+ * BucketsHttpApi is an HTTP implementation of the Buckets API.
  * Exposes all bucket-related functionality.
  */
-export class BucketsApiGql extends BaseGql implements BucketsApi {
+export class BucketsHttpApi implements BucketsApi {
     private readonly client: HttpClient = new HttpClient();
     private readonly ROOT_PATH: string = '/api/v0/buckets';
 
@@ -20,43 +19,47 @@ export class BucketsApiGql extends BaseGql implements BucketsApi {
      * @returns BucketPage
      * @throws Error
      */
-    public async get(projectId: string, before: Date, cursor: BucketCursor): Promise<BucketPage> {
-        const query =
-            `query($projectId: String!, $before: DateTime!, $limit: Int!, $search: String!, $page: Int!) {
-                project(publicId: $projectId) {
-                    bucketUsages(before: $before, cursor: {
-                        limit: $limit, search: $search, page: $page
-                    }) {
-                        bucketUsages {
-                            bucketName,
-                            storage,
-                            egress,
-                            objectCount,
-                            segmentCount,
-                            since,
-                            before
-                        },
-                        search,
-                        limit,
-                        offset,
-                        pageCount,
-                        currentPage,
-                        totalCount
-                    }
-                }
-            }`;
-
-        const variables = {
-            projectId,
+    public async get(projectID: string, before: Date, cursor: BucketCursor): Promise<BucketPage> {
+        const paramsString = Object.entries({
+            projectID,
             before: before.toISOString(),
             limit: cursor.limit,
-            search: cursor.search,
+            search: encodeURIComponent(cursor.search),
             page: cursor.page,
-        };
+        }).map(entry => entry.join('=')).join('&');
 
-        const response = await this.query(query, variables);
+        const path = `${this.ROOT_PATH}/usage-totals?${paramsString}`;
+        const response = await this.client.get(path);
 
-        return this.getBucketPage(response.data.project.bucketUsages);
+        if (!response.ok) {
+            throw new APIError({
+                status: response.status,
+                message: 'Cannot get buckets',
+                requestID: response.headers.get('x-request-id'),
+            });
+        }
+
+        const result = await response.json();
+
+        return new BucketPage(
+            result.bucketUsages?.map(usage =>
+                new Bucket(
+                    usage.bucketName,
+                    usage.storage,
+                    usage.egress,
+                    usage.objectCount,
+                    usage.segmentCount,
+                    new Date(usage.since),
+                    new Date(usage.before),
+                ),
+            ) || [],
+            result.search,
+            result.limit,
+            result.offset,
+            result.pageCount,
+            result.currentPage,
+            result.totalCount,
+        );
     }
 
     /**
@@ -81,27 +84,4 @@ export class BucketsApiGql extends BaseGql implements BucketsApi {
 
         return result ? result : [];
     }
-
-    /**
-     * Method for mapping buckets page from json to BucketPage type.
-     *
-     * @param page anonymous object from json
-     */
-    private getBucketPage(page: any): BucketPage { // eslint-disable-line @typescript-eslint/no-explicit-any
-        if (!page) {
-            return new BucketPage();
-        }
-
-        const buckets: Bucket[] = page.bucketUsages.map(key =>
-            new Bucket(
-                key.bucketName,
-                key.storage,
-                key.egress,
-                key.objectCount,
-                key.segmentCount,
-                new Date(key.since),
-                new Date(key.before)));
-
-        return new BucketPage(buckets, page.search, page.limit, page.offset, page.pageCount, page.currentPage, page.totalCount);
-    }
 }

web/satellite/src/store/modules/bucketsStore.ts

@@ -13,7 +13,7 @@ import {
 import { SignatureV4 } from '@smithy/signature-v4';
 
 import { Bucket, BucketCursor, BucketPage, BucketsApi } from '@/types/buckets';
-import { BucketsApiGql } from '@/api/buckets';
+import { BucketsHttpApi } from '@/api/buckets';
 import { AccessGrant, EdgeCredentials } from '@/types/accessGrants';
 import { useAccessGrantsStore } from '@/store/modules/accessGrantsStore';
 import { useProjectsStore } from '@/store/modules/projectsStore';
@@ -53,7 +53,7 @@ export class BucketsState {
 export const useBucketsStore = defineStore('buckets', () => {
     const state = reactive<BucketsState>(new BucketsState());
 
-    const api: BucketsApi = new BucketsApiGql();
+    const api: BucketsApi = new BucketsHttpApi();
 
     function setBucketsSearch(search: string): void {
         state.cursor.search = search;

web/satellite/tests/unit/ignore/store/buckets.spec.ts

@@ -1,11 +1,11 @@
 // Copyright (C) 2019 Storj Labs, Inc.
 // See LICENSE for copying information.
 
-import { BucketsApiGql } from '@/api/buckets';
+import { BucketsHttpApi } from '@/api/buckets';
 import { Bucket, BucketPage } from '@/types/buckets';
 import { Project } from '@/types/projects';
 
-const bucketsApi = new BucketsApiGql();
+const bucketsApi = new BucketsHttpApi();
 
 const selectedProject = new Project();
 selectedProject.id = '1';