web/satellite: bucket name bug fixed (#3240)

web/satellite/src/api/buckets.ts

@@ -2,7 +2,7 @@
 // See LICENSE for copying information.
 
 import { BaseGql } from '@/api/baseGql';
-import { BucketCursor, BucketPage, BucketsApi } from '@/types/buckets';
+import { Bucket, BucketCursor, BucketPage, BucketsApi } from '@/types/buckets';
 
 /**
  * BucketsApiGql is a graphql implementation of Buckets API.
@@ -50,10 +50,16 @@ export class BucketsApiGql extends BaseGql implements BucketsApi {
 
         const response = await this.query(query, variables);
 
-        return this.fromJson(response.data.project.bucketUsages);
+        return this.getBucketPage(response.data.project.bucketUsages);
     }
 
-    private fromJson(bucketPage): BucketPage {
-        return new BucketPage(bucketPage.bucketUsages, bucketPage.search, bucketPage.limit, bucketPage.offset, bucketPage.pageCount, bucketPage.currentPage, bucketPage.totalCount);
+    private getBucketPage(page: any): BucketPage {
+        if (!page) {
+            return new BucketPage();
+        }
+
+        const buckets: Bucket[] = page.bucketUsages.map(key => new Bucket(key.bucketName, key.storage, key.egress, key.objectCount, key.since, key.before));
+
+        return new BucketPage(buckets, page.search, page.limit, page.offset, page.pageCount, page.currentPage, page.totalCount);
     }
 }

web/satellite/src/components/buckets/BucketItem.vue

@@ -3,7 +3,7 @@
 
 <template>
     <div class="container">
-        <div class="container__item">{{ itemData.bucketName }}</div>
+        <div class="container__item">{{ name }}</div>
         <div class="container__item">{{ storage }}</div>
         <div class="container__item">{{ egress }}</div>
         <div class="container__item">{{ objectCount }}</div>
@@ -21,6 +21,10 @@ export default class BucketItem extends Vue {
     @Prop({default: () => new Bucket('', 0, 0, 0, new Date(), new Date())})
     private readonly itemData: Bucket;
 
+    public get name(): string {
+        return this.itemData.formattedBucketName();
+    }
+
     public get storage(): string {
         return this.itemData.storage.toFixed(4);
     }

web/satellite/src/components/buckets/SortingHeader.vue

@@ -36,7 +36,6 @@
         &__item {
             width: 25%;
             margin: 0;
-            cursor: pointer;
             text-align: left;
             padding-left: 26px;
 

web/satellite/src/types/buckets.ts

@@ -33,6 +33,14 @@ export class Bucket {
         this.since = since;
         this.before = before;
     }
+
+    public formattedBucketName(): string {
+        if (this.bucketName.length < 12) {
+            return this.bucketName;
+        }
+
+        return this.bucketName.slice(0, 12) + '...';
+    }
 }
 
 /**