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

@@ -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;
 };
 

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
      */

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>

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[];

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();

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 = "";
     })

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>

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 = "";
     (

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>