chore(ui): improve outputs debugging expression logic (#4682)

kestra-io · Aug 22, 2024 · b9aafb3 · b9aafb3
1 parent 6c98339
commit b9aafb3
Showing 1 changed file with 32 additions and 10 deletions.
diff --git a/ui/src/components/executions/outputs/Wrapper.vue b/ui/src/components/executions/outputs/Wrapper.vue
@@ -17,12 +17,12 @@
                 @expand-change="() => scrollRight()"
             >
                 <template #default="{data}">
-                    <div v-if="data.heading" class="pe-none d-flex fs-5">
+                    <div v-if="data.heading" @click="expandedValue = data.path" class="pe-none d-flex fs-5">
                         <component :is="data.component" class="me-2" />
                         <span>{{ data.label }}</span>
                     </div>
 
-                    <div v-else class="w-100 d-flex justify-content-between">
+                    <div v-else @click="expandedValue = data.path" class="w-100 d-flex justify-content-between">
                         <div class="pe-5 d-flex task">
                             <TaskIcon v-if="data.icon" :icons="allIcons" :cls="icons[data.taskId]" only-icon />
                             <span :class="{'ms-3': data.icon}">{{ data.label }}</span>
@@ -125,12 +125,20 @@
     import Editor from "../../inputs/Editor.vue";
     const debugEditor = ref(null);
     const debugExpression = ref("");
-    const computedDebugValue = computed(() => `{{ outputs${selectedTask()?.taskId ? `.${selectedTask().taskId}` : ""} }}`);
+    const computedDebugValue = computed(() => {
+        const task = selectedTask()?.taskId;
+        if(!task) return "";
+
+        const path = expandedValue.value;
+        if(!path) return `{{ outputs.${task} }}`
+
+        return `{{ outputs.${path} }}`
+    });
     const debugError = ref("");
     const debugStackTrace = ref("");
     const isJSON = ref(false);
     const selectedTask = () => {
-        const filter = selected.value.length ? selected.value[0] : (cascader.value as any).menuList?.[0]?.panel?.expandingNode?.label;
+        const filter = selected.value?.length ? selected.value[0] : (cascader.value as any).menuList?.[0]?.panel?.expandingNode?.label;
         const taskRunList = [...execution.value.taskRunList];
         return taskRunList.find(e => e.taskId === filter);
     };
@@ -200,9 +208,10 @@
         return {label: trim(data.value), regular: true};
     };
 
+    const expandedValue = ref([])
     const selected = ref([]);
     const selectedValue = computed(() => {
-        if (selected.value.length) return selected.value[selected.value.length - 1];
+        if (selected.value?.length) return selected.value[selected.value.length - 1];
         return undefined;
     });
     const selectedNode = () => {
@@ -215,29 +224,42 @@
         return {label, value};
     };
 
-    const transform = (o, isFirstPass = true) => {
+    const transform = (o, isFirstPass, path = "") => {
         const result = Object.keys(o).map(key => {
             const value = o[key];
             const isObject = typeof value === "object" && value !== null;
 
+            const currentPath = `${path}["${key}"]`;
+
             // If the value is an array with exactly one element, use that element as the value
             if (Array.isArray(value) && value.length === 1) {
-                return {label: key, value: value[0], children: []};
+                return {label: key, value: value[0], children: [], path: currentPath};
             }
 
-            return {label: key, value: isObject && !Array.isArray(value) ? null : value, children: isObject ? transform(value, false) : []};
+            return {
+                label: key,
+                value: isObject && !Array.isArray(value) ? key : value,
+                children: isObject ? transform(value, false, currentPath) : [],
+                path: currentPath
+            };
         });
 
         if (isFirstPass) {
-            const OUTPUTS = {label: t("outputs"), heading: true, component: shallowRef(TextBoxSearchOutline), isFirstPass: true};
+            const OUTPUTS = {
+                label: t("outputs"),
+                heading: true,
+                component: shallowRef(TextBoxSearchOutline),
+                isFirstPass: true,
+                path: path
+            };
             result.unshift(OUTPUTS);
         }
 
         return result;
     };
     const outputs = computed(() => {
         const tasks = store.state.execution.execution.taskRunList.map((task) => {
-            return {label: task.taskId, value: task.taskId, ...task, icon: true, children: task?.outputs ? transform(task.outputs) : []};
+            return {label: task.taskId, value: task.taskId, ...task, icon: true, children: task?.outputs ? transform(task.outputs, true, task.taskId) : []};
         });
 
         const HEADING = {label: t("tasks"), heading: true, component: shallowRef(TimelineTextOutline)};