From cfa9bbb57b2b5a2083601899de37fbe24845f715 Mon Sep 17 00:00:00 2001
From: BatLeDev <baptiste.guerny@koumoul.com>
Date: Mon, 1 Jun 2026 09:49:59 +0200
Subject: [PATCH] fix(ui): live-update runs list via websocket, page cleanup

---
 .../components/processing/processing-runs.vue | 26 +++++++++----------
 ui/src/pages/processings/[id]/index.vue       | 18 +++++++++----
 ui/src/pages/processings/index.vue            |  1 -
 3 files changed, 25 insertions(+), 20 deletions(-)

diff --git a/ui/src/components/processing/processing-runs.vue b/ui/src/components/processing/processing-runs.vue
index 0500c55f..02901aac 100644
--- a/ui/src/components/processing/processing-runs.vue
+++ b/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()
diff --git a/ui/src/pages/processings/[id]/index.vue b/ui/src/pages/processings/[id]/index.vue
index 6fdb2996..092e1052 100644
--- a/ui/src/pages/processings/[id]/index.vue
+++ b/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()"
diff --git a/ui/src/pages/processings/index.vue b/ui/src/pages/processings/index.vue
index 90cf2b14..56a593ee 100644
--- a/ui/src/pages/processings/index.vue
+++ b/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"
       />