From 80ca8528e209489293592e4705f81c69bed565e5 Mon Sep 17 00:00:00 2001
From: Devin Cowan <dcowan@cuahsi.org>
Date: Tue, 24 Sep 2024 15:05:07 -0400
Subject: [PATCH] format metadata

---
 app/frontend/src/views/SubmissionsView.vue | 36 ++++++++++++++--------
 1 file changed, 23 insertions(+), 13 deletions(-)

diff --git a/app/frontend/src/views/SubmissionsView.vue b/app/frontend/src/views/SubmissionsView.vue
index 78621f60..2580bc3c 100644
--- a/app/frontend/src/views/SubmissionsView.vue
+++ b/app/frontend/src/views/SubmissionsView.vue
@@ -61,18 +61,28 @@
     </v-card>
   </v-bottom-sheet>
 
-  <v-bottom-sheet v-model="sheetText" inset>
-    <v-card class="text-center" height="100%">
+  <v-bottom-sheet v-model="metadataObject" inset>
+    <v-card height="100%">
+      <v-btn class="ml-auto" @click="metadataObject = null">
+        close
+      </v-btn>
+      <!-- show all of the key/value pairs of the metadataObject -->
       <v-card-text>
-        <v-btn @click="sheetText = null">
-          close
-        </v-btn>
-
-        <br>
-        <br>
-        <div>
-          {{ sheetText }}
-        </div>
+        <strong>Metadata</strong>
+        <v-data-table :headers="Object.keys(metadataObject.metadata)" :items="[metadataObject.metadata]">
+          <template v-slot:item="{ item }">
+            <tr v-for="(value, key) in item" v-bind:key="key">
+              <td>{{ key }}</td>
+              <td>{{ value }}</td>
+            </tr>
+          </template>
+        </v-data-table>
+      </v-card-text>
+      <v-divider></v-divider>
+      <v-card-text>
+        <strong>Status</strong>
+        <!-- pretty format the metadataObject.status json and show it  -->
+        <pre>{{ JSON.stringify(metadataObject.status, null, 2) }}</pre>
       </v-card-text>
     </v-card>
   </v-bottom-sheet>
@@ -97,7 +107,7 @@ let interval = null
 let logsArray = ref(null)
 let showingLogs = ref(false)
 let selectedSubmission = ref({})
-let sheetText = ref('')
+let metadataObject = ref(null)
 
 let refreshingItem = ref({})
 let refreshing = ref(true)
@@ -209,7 +219,7 @@ async function showArgo(submission) {
   const argoUrl = `${argoEndpoint}/${submission.workflow_id}`
   const response = await fetchWrapper.get(argoUrl)
   const metadata = await response.unpacked
-  sheetText.value = metadata
+  metadataObject.value = metadata
 }
 
 async function refreshSubmission(submission) {