feat(ui): reduced opacity on unused paths

closes #241
kestra-io · Sep 26, 2023 · 9b505aa · 9b505aa
1 parent 08cb9e4
commit 9b505aa
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 5 deletions.
diff --git a/ui/package-lock.json b/ui/package-lock.json
diff --git a/ui/package.json b/ui/package.json
@@ -11,7 +11,7 @@
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path ../.gitignore"
   },
   "dependencies": {
-    "@kestra-io/ui-libs": "^0.0.22",
+    "@kestra-io/ui-libs": "^0.0.23",
     "@popperjs/core": "npm:@sxzz/[email protected]",
     "@vue-flow/background": "^1.2.0",
     "@vue-flow/controls": "1.0.6",

diff --git a/ui/src/components/executions/Topology.vue b/ui/src/components/executions/Topology.vue
@@ -70,6 +70,35 @@
             },
             loadData(){
                 this.loadGraph();
+            },
+            isUnused: function (nodeByUid, nodeUid) {
+                let nodeToCheck = nodeByUid[nodeUid];
+
+                if(!nodeToCheck) {
+                    return false;
+                }
+
+                if(!nodeToCheck.task) {
+                    // check if parent is unused (current node is probably a cluster root or end)
+                    const splitUid = nodeToCheck.uid.split(".");
+                    splitUid.pop();
+                    return this.isUnused(nodeByUid, splitUid.join("."));
+                }
+
+                if (!nodeToCheck.executionId) {
+                    return true;
+                }
+
+                const nodeExecution = nodeToCheck.executionId === this.execution?.id ? this.execution
+                    : Object.values(this.subflowsExecutions).filter(execution => execution.id === this.data.executionId)?.[0];
+
+                if (!nodeExecution) {
+                    return true;
+                }
+
+                return !nodeExecution.taskRunList.some(taskRun => taskRun.taskId === nodeToCheck.task?.id);
+
+
             },
             loadGraph(force) {
                 if (this.execution && (force || (this.flowGraph === undefined || this.previousExecutionId !== this.execution.id))) {
@@ -89,8 +118,14 @@
                             ?.filter(cluster => cluster.type.endsWith("SubflowGraphCluster"))
                             ?.map(cluster => cluster.uid.replace(CLUSTER_PREFIX, ""))
                             ?? [];
+                        const nodeByUid = {};
+
                         this.flowGraph.nodes
+                            // lowest depth first to be available in nodeByUid map for child-to-parent unused check
+                            .sort((a, b) => a.uid.length - b.uid.length)
                             .forEach(node => {
+                                nodeByUid[node.uid] = node;
+
                                 const parentSubflow = subflowPaths.filter(subflowPath => node.uid.startsWith(subflowPath + "."))
                                     .sort((a, b) => b.length - a.length)?.[0]
 
@@ -103,8 +138,19 @@
                                 }
 
                                 node.executionId = this.execution.id;
+
+                                // reduce opacity for cluster root & end
+                                if(!node.task && this.isUnused(nodeByUid, node.uid)) {
+                                    node.unused = true;
+                                }
                             });
 
+                        this.flowGraph.edges
+                            // keep only unused (or skipped) paths
+                            .filter(edge => {
+                                return this.isUnused(nodeByUid, edge.target) || this.isUnused(nodeByUid, edge.source);
+                            }).forEach(edge => edge.unused = true);
+
                         // force refresh
                         this.$store.commit("flow/setFlowGraph", Object.assign({}, this.flowGraph));
                     })