From cd88c818ec468d04103faa7d0bd910f032f53eeb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20G=C3=B6bel?= <dgoebel@techfak.uni-bielefeld.de>
Date: Wed, 19 Oct 2022 15:00:30 +0200
Subject: [PATCH] Display additional meta data in UI
* Content Type for objects
* number of objects in a bucket
* Size of a bucket
#16
---
src/client/models/BucketOut.ts | 8 ++++++++
src/client/models/S3ObjectMetaInformation.ts | 4 ++++
src/components/BucketListItem.vue | 4 ++--
src/components/BucketView.vue | 2 ++
src/components/Modals/CopyObjectModal.vue | 1 +
src/components/Modals/CreateFolderModal.vue | 1 +
src/components/Modals/ObjectDetailModal.vue | 2 +-
src/components/Modals/UploadObjectModal.vue | 1 +
src/views/object-storage/BucketsView.vue | 9 ++++++++-
9 files changed, 28 insertions(+), 4 deletions(-)
diff --git a/src/client/models/BucketOut.ts b/src/client/models/BucketOut.ts
index b1bb787..92b9426 100644
--- a/src/client/models/BucketOut.ts
+++ b/src/client/models/BucketOut.ts
@@ -22,5 +22,13 @@ export type BucketOut = {
* UID of the owner
*/
owner: string;
+ /**
+ * Number of Objects in this bucket
+ */
+ num_objects: number;
+ /**
+ * Total size of objects in this bucket in bytes
+ */
+ size: number;
};
diff --git a/src/client/models/S3ObjectMetaInformation.ts b/src/client/models/S3ObjectMetaInformation.ts
index 4292c7e..ed92a73 100644
--- a/src/client/models/S3ObjectMetaInformation.ts
+++ b/src/client/models/S3ObjectMetaInformation.ts
@@ -14,6 +14,10 @@ export type S3ObjectMetaInformation = {
* Name of the Bucket in which the object is
*/
bucket: string;
+ /**
+ * MIME type of the object
+ */
+ content_type: string;
/**
* Size of the object in Bytes
*/
diff --git a/src/components/BucketListItem.vue b/src/components/BucketListItem.vue
index 7141b83..0cd7cf6 100644
--- a/src/components/BucketListItem.vue
+++ b/src/components/BucketListItem.vue
@@ -110,11 +110,11 @@ onMounted(() => {
</tr>
<tr>
<th scope="row" class="fw-bold">Objects:</th>
- <td>0</td>
+ <td>{{ bucket.num_objects }}</td>
</tr>
<tr>
<th scope="row" class="fw-bold">Size:</th>
- <td>{{ filesize(0) }}</td>
+ <td>{{ filesize(bucket.size) }}</td>
</tr>
</tbody>
</table>
diff --git a/src/components/BucketView.vue b/src/components/BucketView.vue
index feab82d..69aeaa3 100644
--- a/src/components/BucketView.vue
+++ b/src/components/BucketView.vue
@@ -138,12 +138,14 @@ const objectState = reactive({
size: 0,
bucket: "",
last_modified: "2022-01-01",
+ content_type: "text/plain",
},
viewDetailObject: {
key: "",
size: 0,
bucket: "",
last_modified: "2022-01-01",
+ content_type: "text/plain",
},
} as {
objects: S3ObjectMetaInformation[];
diff --git a/src/components/Modals/CopyObjectModal.vue b/src/components/Modals/CopyObjectModal.vue
index 26e5d41..f239951 100644
--- a/src/components/Modals/CopyObjectModal.vue
+++ b/src/components/Modals/CopyObjectModal.vue
@@ -57,6 +57,7 @@ function copyObject() {
bucket: formState.destBucket,
size: props.sourceObject.size,
last_modified: dayjs().toISOString(),
+ content_type: props.sourceObject.content_type,
});
copyModal?.hide();
successToast?.show();
diff --git a/src/components/Modals/CreateFolderModal.vue b/src/components/Modals/CreateFolderModal.vue
index bbff4f9..bc9b2f8 100644
--- a/src/components/Modals/CreateFolderModal.vue
+++ b/src/components/Modals/CreateFolderModal.vue
@@ -59,6 +59,7 @@ function uploadFolder() {
bucket: props.bucketName,
size: 0,
last_modified: dayjs().toISOString(),
+ content_type: "text/plain",
});
formState.folderName = "";
})
diff --git a/src/components/Modals/ObjectDetailModal.vue b/src/components/Modals/ObjectDetailModal.vue
index 1e70b47..8669961 100644
--- a/src/components/Modals/ObjectDetailModal.vue
+++ b/src/components/Modals/ObjectDetailModal.vue
@@ -34,7 +34,7 @@ const props = defineProps<{
</tr>
<tr>
<th scope="row">Content Type</th>
- <td>text/plain</td>
+ <td>{{ props.s3Object.content_type }}</td>
</tr>
<tr>
<th scope="row">Timestamp</th>
diff --git a/src/components/Modals/UploadObjectModal.vue b/src/components/Modals/UploadObjectModal.vue
index a46e9d3..a1d5bea 100644
--- a/src/components/Modals/UploadObjectModal.vue
+++ b/src/components/Modals/UploadObjectModal.vue
@@ -95,6 +95,7 @@ async function uploadObject() {
bucket: props.bucketName,
size: formState.file?.size ?? 0,
last_modified: dayjs().toISOString(),
+ content_type: formState.file?.type ?? "text/plain",
});
formState.key = "";
(
diff --git a/src/views/object-storage/BucketsView.vue b/src/views/object-storage/BucketsView.vue
index ad7d4e5..9d8ce59 100644
--- a/src/views/object-storage/BucketsView.vue
+++ b/src/views/object-storage/BucketsView.vue
@@ -193,7 +193,14 @@ onMounted(() => {
:active="false"
:loading="true"
:permission="undefined"
- :bucket="{ name: '', description: '', created_at: '', owner: '' }"
+ :bucket="{
+ name: '',
+ description: '',
+ created_at: '',
+ owner: '',
+ size: 0,
+ num_objects: 0,
+ }"
></bucket-list-item>
</div>
</div>
--
GitLab