From b95d56dc8aa8b4a5666af7a2efd8cd6a13c8abe5 Mon Sep 17 00:00:00 2001
From: Jacopo Gasparetto <jacopo.gasparetto@cnaf.infn.it>
Date: Wed, 5 Apr 2023 18:35:20 +0200
Subject: [PATCH] Add objects count and total size for buckets
---
frontend/src/routes/Buckets/index.tsx | 41 ++++++++++++++++++++-------
1 file changed, 31 insertions(+), 10 deletions(-)
diff --git a/frontend/src/routes/Buckets/index.tsx b/frontend/src/routes/Buckets/index.tsx
index df9cd87..4dad0ce 100644
--- a/frontend/src/routes/Buckets/index.tsx
+++ b/frontend/src/routes/Buckets/index.tsx
@@ -2,17 +2,37 @@ import { useState } from 'react';
import { Page } from '../../components/Page';
import APIService from "../../services/APIService";
+type RWAccess = {
+ read: boolean
+ write: boolean
+}
+
type BucketInfo = {
- Name: string,
- CreationDate: string;
+ name: string,
+ creation_date: string;
+ detail: Object
+ rw_access: RWAccess
+ objects: number,
+ size: number
+}
+
+const getHumanSize = (size: number) => {
+ if (size < 1000) return `${size} B`;
+ if (size < 1000000) return `${(size / 1000).toFixed(1)} kB`;
+ if (size < 1000000000) return `${(size / 1000000).toFixed(1)} MB`;
+ if (size < 1000000000000) return `${(size / 1000000000).toFixed(1)} GB`;
}
const BucketView = (bucketInfo: BucketInfo) => {
- const creationDate = new Date(bucketInfo.CreationDate);
+ const creationDate = new Date(bucketInfo.creation_date);
+ const size_byte = bucketInfo.size;
return (
<div className="bg-slate-100 w-2/3 mb-4 p-4 rounded-lg">
- <h1 className="text-2xl font-bold mb-2">{bucketInfo.Name}</h1>
+ <h1 className="text-2xl font-bold mb-2">{bucketInfo.name}</h1>
+ <hr className="mb-2"></hr>
<p>Created: {creationDate.toString()}</p>
+ <p><b>Usage</b>: {getHumanSize(bucketInfo.size)}</p>
+ <p><b>Object</b>: {bucketInfo.objects}</p>
</div>
)
}
@@ -26,18 +46,19 @@ export const Buckets = () => {
APIService.get("buckets")
.then(data => {
console.log(data);
- setBucketLists(data["Buckets"]);
+ setBucketLists(data["buckets"]);
});
}
+
return (
<Page title='Buckets'>
- {buckestList.map(bucketInfo =>
+ {buckestList ? buckestList.map(bucketInfo =>
<BucketView
- key={bucketInfo.Name + bucketInfo.CreationDate}
- Name={bucketInfo.Name}
- CreationDate={bucketInfo.CreationDate} />
- )}
+ key={bucketInfo.name + bucketInfo.creation_date}
+ {...bucketInfo}
+ />
+ ) : null}
</Page>
)
}
\ No newline at end of file
--
GitLab