From 23e94d8f6eef4842fee7a5f4ba49c143561e19ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=A9=AC=E7=99=BB=E5=B1=B1?= <cxymds@qq.com>
Date: Thu, 24 Jul 2025 18:06:03 +0800
Subject: [PATCH] feat :  object count and bucket size rustfs/rustfs#172

---
 components/object/list.vue |   5 +-
 pages/browser/index.vue    | 111 +++++++++++++++++++++++++++----------
 2 files changed, 85 insertions(+), 31 deletions(-)

diff --git a/components/object/list.vue b/components/object/list.vue
index 1b60016..3a7d492 100644
--- a/components/object/list.vue
+++ b/components/object/list.vue
@@ -362,7 +362,7 @@ const filteredObjects = computed(() => {
   });
 });
 
-/** ************************************批量删除 */
+/** ************************************批量删除********************************* */
 function rowKey(row: any): string {
   return row.Key || '';
 }
@@ -417,7 +417,9 @@ function handleBatchDelete() {
     },
   });
 }
+/** ************************************批量删除********************************* */
 
+/** ************************************下载********************************* */
 // 下载
 const handledownload = async (item: any) => {
   if (item.type === 'object') {
@@ -523,6 +525,7 @@ const downloadMultiple = async () => {
   saveAs(zipBlob, `download.zip`);
   message.success(t('Download ready'));
 };
+/** ************************************下载********************************* */
 
 // 为了实现 "Previous" 功能，需要记录访问过的 token 列表。
 // 因为我们是通过路由导航，每次下一页时会改变 URL，从而 SSR 获取新数据。
diff --git a/pages/browser/index.vue b/pages/browser/index.vue
index 22a0476..744ad3d 100644
--- a/pages/browser/index.vue
+++ b/pages/browser/index.vue
@@ -26,7 +26,13 @@
           </n-button>
         </div>
       </div>
-      <n-data-table class="border dark:border-neutral-700 rounded overflow-hidden" :columns="columns" :data="filteredData" :pagination="false" :bordered="false" />
+      <n-data-table
+        class="border dark:border-neutral-700 rounded overflow-hidden"
+        :columns="columns"
+        :data="filteredData"
+        :pagination="false"
+        :bordered="false"
+      />
     </page-content>
 
     <buckets-new-form :show="formVisible" @update:show="handleFormClosed"></buckets-new-form>
@@ -35,19 +41,43 @@
 </template>
 
 <script lang="ts" setup>
-import { Icon, NuxtLink } from '#components'
-import dayjs from 'dayjs'
-import { NButton, NSpace, type DataTableColumns ,NPopconfirm} from 'naive-ui'
-import { useI18n } from 'vue-i18n'
+import { Icon, NuxtLink } from '#components';
+import dayjs from 'dayjs';
+import { NButton, NSpace, type DataTableColumns, NPopconfirm } from 'naive-ui';
+import { useI18n } from 'vue-i18n';
 
-const { t } = useI18n()
-const { listBuckets ,deleteBucket} = useBucket({});
+const { t } = useI18n();
+const { listBuckets, deleteBucket } = useBucket({});
 const formVisible = ref(false);
 const searchTerm = ref('');
+const systemApi = useSystem();
+import { niceBytes } from '../../utils/functions';
 
 interface RowData {
   Name: string;
   CreationDate: string;
+  Count?: number | undefined;
+  Size?: number | undefined; // Optional size field for future use
+}
+
+interface BucketInfo {
+  size: number;
+  replication_pending_size_v1: number;
+  replication_failed_size_v1: number;
+  replicated_size_v1: number;
+  replication_pending_count_v1: number;
+  replication_failed_count_v1: number;
+  objects_count: number;
+  object_size_histogram: object;
+  object_versions_histogram: object;
+  versions_count: number;
+  delete_markers_count: number;
+  replica_size: number;
+  replica_count: number;
+  replication_info: object;
+}
+interface BucketInfoList {
+  [prop: string]: BucketInfo;
 }
 
 const columns: DataTableColumns<RowData> = [
@@ -62,7 +92,7 @@ const columns: DataTableColumns<RowData> = [
           class: 'flex items-center gap-2',
         },
         {
-          default: () => [icon('ri:archive-line'), row.Name]
+          default: () => [icon('ri:archive-line'), row.Name],
         }
       );
     },
@@ -74,6 +104,14 @@ const columns: DataTableColumns<RowData> = [
       return dayjs(row.CreationDate).format('YYYY-MM-DD HH:mm:ss');
     },
   },
+  {
+    title: t('Object Count'),
+    key: 'Count',
+  },
+  {
+    title: t('Size'),
+    key: 'Size',
+  },
   {
     title: t('Actions'),
     key: 'actions',
@@ -87,7 +125,7 @@ const columns: DataTableColumns<RowData> = [
         },
         {
           default: () => [
-             h(
+            h(
               NPopconfirm,
               { onPositiveClick: () => deleteItem(row) },
               {
@@ -95,10 +133,10 @@ const columns: DataTableColumns<RowData> = [
                 trigger: () =>
                   h(
                     NButton,
-                    { size: "small", secondary: true },
+                    { size: 'small', secondary: true },
                     {
-                      default: () => "",
-                      icon: () => h(Icon, { name: "ri:delete-bin-5-line" }),
+                      default: () => '',
+                      icon: () => h(Icon, { name: 'ri:delete-bin-5-line' }),
                     }
                   ),
               }
@@ -108,14 +146,13 @@ const columns: DataTableColumns<RowData> = [
               {
                 size: 'small',
                 secondary: true,
-                onClick: (e) => handleRowClick(row,e),
+                onClick: e => handleRowClick(row, e),
               },
               {
                 default: () => '',
                 icon: () => h(Icon, { name: 'ri:settings-5-line' }),
               }
             ),
-
           ],
         }
       );
@@ -127,7 +164,21 @@ const { data, refresh } = await useAsyncData(
   'buckets',
   async () => {
     const response = await listBuckets();
-    return response.Buckets?.sort((a:any, b:any) => {return a.Name.localeCompare(b.Name)  }) || [];
+    const resp = await systemApi.getDataUsageInfo();
+    const bucketsInfo: BucketInfoList = resp?.buckets_usage || {};
+
+    return (
+      response.Buckets?.map(item => {
+        return {
+          Name: item.Name,
+          CreationDate: item.CreationDate,
+          Count: (item.Name && bucketsInfo[item.Name]?.objects_count) || 0,
+          Size: niceBytes(((item.Name && bucketsInfo[item.Name]?.size) || 0) + ''), // Optional size field for future use
+        };
+      })?.sort((a: any, b: any) => {
+        return a.Name.localeCompare(b.Name);
+      }) || []
+    );
   },
   { default: () => [] }
 );
@@ -138,34 +189,34 @@ const filteredData = computed(() => {
   }
 
   const term = searchTerm.value.toLowerCase();
-  return data.value.filter(bucket =>
-    bucket.Name?.toLowerCase().includes(term)
-  );
+  return data.value.filter(bucket => bucket.Name?.toLowerCase().includes(term));
 });
 
 const infoRef = ref();
-const handleRowClick = (row: RowData,e: Event) => {
+const handleRowClick = (row: RowData, e: Event) => {
   e.stopPropagation();
   infoRef.value.openDrawer(row.Name);
 };
 
 const message = useMessage();
 const deleteItem = async (row: RowData) => {
-const objectApi = useObject({ bucket: row.Name});
+  const objectApi = useObject({ bucket: row.Name });
 
   const files = await objectApi.listObject(row.Name);
-  console.log("🚀 ~ deleteItem ~ files:", files)
+  console.log('🚀 ~ deleteItem ~ files:', files);
 
-  if(files.KeyCount || files.CommonPrefixes?.length){
-    message.error(t('Bucket is not empty, please delete contents first'))
-    return
+  if (files.KeyCount || files.CommonPrefixes?.length) {
+    message.error(t('Bucket is not empty, please delete contents first'));
+    return;
   }
-   deleteBucket(row.Name).then(()=>{
-    message.success(t('Delete Success'))
-       refresh();
-  }).catch((error)=>{
-    message.error(t('Delete Failed'))
-  })
+  deleteBucket(row.Name)
+    .then(() => {
+      message.success(t('Delete Success'));
+      refresh();
+    })
+    .catch(error => {
+      message.error(t('Delete Failed'));
+    });
 };
 const handleFormClosed = (show: boolean) => {
   formVisible.value = show;