fix(ui): live-update runs list via websocket, page cleanup

ui/src/components/processing/processing-runs.vue

@@ -7,7 +7,7 @@
     <template v-if="runs">
       <v-list class="py-0">
         <template
-          v-for="run in runs.data.value?.results"
+          v-for="run in displayRuns"
           :key="run._id"
         >
           <v-divider />
@@ -44,19 +44,6 @@ const props = defineProps({
 const ws = useWS('/processings/api/')
 const wsChannel = computed(() => `processings/${props.processing._id}/run-patch`)
 
-function onRunPatch (runPatch: { _id: string, patch: Record<string, any> }) {
-  console.log('message from', wsChannel.value, runPatch)
-  if (!runs.data.value) return
-  const matchingRun = runs.data.value.results.find(run => run._id === runPatch._id)
-  if (!matchingRun) {
-    console.log('received info from WS about an unknown run, refresh list')
-    return runs.refresh()
-  }
-  for (const key of Object.keys(runPatch.patch)) {
-    matchingRun[key] = runPatch.patch[key]
-  }
-}
-
 const size = 10
 const page = ref(1)
 
@@ -74,6 +61,17 @@ const runs = useFetch<{
   watch: false
 })
 
+const displayRuns = ref<Run[]>([])
+watch(() => runs.data.value?.results, (results) => {
+  displayRuns.value = results ?? []
+}, { immediate: true })
+
+function onRunPatch (runPatch: { _id: string, patch: Record<string, any> }) {
+  const matchingRun = displayRuns.value.find(run => run._id === runPatch._id)
+  if (!matchingRun) return runs.refresh()
+  Object.assign(matchingRun, runPatch.patch)
+}
+
 onMounted(async () => {
   ws?.subscribe(wsChannel.value, onRunPatch)
   await runs.refresh()

ui/src/pages/processings/[id]/index.vue

@@ -54,10 +54,19 @@
             {{ timezoneLabel(node.data.timeZone) }}
           </template>
         </vjsf>
-        <v-skeleton-loader
-          v-else-if="pluginFetchPending && !pluginBroken"
-          type="heading, list-item-three-line, list-item-three-line, list-item-two-line, actions"
-        />
+
+        <!-- VJSF Skeleton Loader -->
+        <div v-else-if="pluginFetchPending && !pluginBroken">
+          <v-row class="mb-4">
+            <v-col md="8">
+              <v-skeleton-loader type="heading, text, text" />
+            </v-col>
+            <v-col md="4">
+              <v-skeleton-loader type="list-item-avatar, list-item-avatar-two-line" />
+            </v-col>
+          </v-row>
+          <v-skeleton-loader type="heading, text@2" />
+        </div>
       </v-form>
     </v-defaults-provider>
     <processing-runs
@@ -74,7 +83,6 @@
         :can-admin="canAdminProcessing"
         :can-exec="canExecProcessing"
         :edited="edited"
-        :is-small="false"
         :documentation="plugin?.documentation"
         :plugin-broken="pluginBroken"
         @triggered="runs && runs.refresh()"

ui/src/pages/processings/index.vue

@@ -65,7 +65,6 @@
         :admin-mode="!!session.state.user?.adminMode"
         :can-admin="canAdmin"
         :facets="processingsFetch.data.value.facets"
-        :is-small="true"
         :owner-filter="ownerFilter"
         :processings="displayProcessings"
       />