@kestra-io/ui-libs 0.0.22 → 0.0.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kestra-io/ui-libs",
-  "version": "v0.0.22",
+  "version": "v0.0.24",
   "type": "module",
   "files": [
     "src",

package/src/components/nodes/BasicNode.vue

@@ -111,11 +111,6 @@
             data: {
                 type: Object,
                 required: true
-            },
-            style: {
-                type: Object,
-                required: false,
-                default: undefined
             }
         },
         methods: {
@@ -173,6 +168,7 @@
             },
             classes() {
                 return {
+                    "unused-path": this.data.unused,
                     [`border-${this.borderColor}`]: this.borderColor,
                     "disabled": this.data.node.task?.disabled,
                     [this.$attrs.class]: true

package/src/components/nodes/ClusterNode.vue

@@ -1,16 +1,18 @@
 <template>
-    <span class="badge rounded-pill text-truncate text-color" :class="[`bg-${data.color}`]">{{ clusterName }}</span>
-    <div class="top-button-div text-white d-flex">
-        <span
-            v-if="data.collapsable"
-            class="rounded-button"
-            :class="[`bg-${data.color}`]"
-            @click="collapse()"
-        >
-            <tooltip :title="$t('collapse')">
-                <ArrowCollapse class="button-icon" alt="Collapse task" />
-            </tooltip>
-        </span>
+    <div :class="classes">
+        <span class="badge rounded-pill text-truncate text-color" :class="[`bg-${data.color}`]">{{ clusterName }}</span>
+        <div class="top-button-div text-white d-flex">
+            <span
+                v-if="data.collapsable"
+                class="rounded-button"
+                :class="[`bg-${data.color}`]"
+                @click="collapse()"
+            >
+                <tooltip :title="$t('collapse')">
+                    <ArrowCollapse class="button-icon" alt="Collapse task" />
+                </tooltip>
+            </span>
+        </div>
     </div>
 </template>
 <script setup>
@@ -55,6 +57,9 @@
             }
         },
         computed: {
+            classes() {
+                return {"unused-path": this.data.unused}
+            },
             clusterName() {
                 const taskNode = this.data.taskNode;
                 if (taskNode?.type?.endsWith("SubflowGraphTask")) {

package/src/components/nodes/DotNode.vue

@@ -1,9 +1,11 @@
 <template>
-    <Handle type="source" class="custom-handle" :position="sourcePosition" />
-    <div class="dot">
-        <CircleIcon :class="{'text-danger': data.node.error}" class="circle" alt="circle" />
+    <div :class="classes">
+        <Handle type="source" class="custom-handle" :position="sourcePosition" />
+        <div class="dot">
+            <CircleIcon :class="{'text-danger': data.node.error}" class="circle" alt="circle" />
+        </div>
+        <Handle type="target" class="custom-handle" :position="targetPosition" />
     </div>
-    <Handle type="target" class="custom-handle" :position="targetPosition" />
 </template>
 
 <script>
@@ -31,6 +33,11 @@
                 type: String
             }
         },
+        computed: {
+            classes() {
+                return {"unused-path": this.data.unused};
+            }
+        }
     }
 </script>
 <style scoped>

package/src/components/nodes/EdgeNode.vue

@@ -35,6 +35,7 @@
                 return {
                     "vue-flow__edge-path": true,
                     ["stroke-" + this.data.color]: this.data.color,
+                    "unused-path": this.data.unused
                 }
             },
         },
@@ -52,7 +53,7 @@
 <template>
     <path
         :id="id"
-        :class="'vue-flow__edge-path stroke-'+data.color"
+        :class="classes"
         :style="data.haveDashArray ?
             {
                 strokeDasharray: '2',

package/src/components/topology/Topology.vue

@@ -7,7 +7,6 @@
     import SplitCellsHorizontal from "../../assets/icons/SplitCellsHorizontal.vue";
     import {cssVariable} from "../../utils/global.js";
     import {VueFlowUtils, YamlUtils} from "../../index.js";
-    import VueflowUtils from "../../utils/VueFlowUtils.js";
     import {CLUSTER_PREFIX, EVENTS} from "../../utils/constants.js";
     import {Background} from "@vue-flow/background";
     import Utils from "../../utils/Utils.js";
@@ -108,7 +107,7 @@
             edgeReplacer.value = {};
             oldCollapsed.forEach(n => collapseCluster(CLUSTER_PREFIX + n, false, false))
 
-            const elements = VueflowUtils.generateGraph(
+            const elements = VueFlowUtils.generateGraph(
                 props.id,
                 props.flowId,
                 props.namespace,
@@ -364,5 +363,7 @@
 </template>
 
 <style scoped lang="scss">
-
+    :deep(.unused-path) {
+        opacity: 0.3;
+    }
 </style>

package/src/utils/VueFlowUtils.js

@@ -349,10 +349,11 @@ export default class VueFlowUtils {
         const dagreGraph = this.generateDagreGraph(flowGraph, hiddenNodes, isHorizontal, clustersWithoutRootNode, edgeReplacer, collapsed, clusterToNode);
 
         const clusterByNodeUid = {};
-
         const clusters = flowGraph.clusters || [];
         const rawClusters = clusters.map(c => c.cluster);
         const readOnlyUidPrefixes = rawClusters.filter(c => c.type.endsWith("SubflowGraphCluster")).map(c => c.taskNode.uid);
+
+        const nodeByUid = Object.fromEntries(flowGraph.nodes.concat(clusterToNode).map(node => [node.uid, node]));
         for (let cluster of clusters) {
             if (!edgeReplacer[cluster.cluster.uid] && !collapsed.has(cluster.cluster.uid)) {
                 if (cluster.cluster.taskNode?.task?.type === "io.kestra.core.tasks.flows.Dag") {
@@ -381,17 +382,15 @@ export default class VueFlowUtils {
                     data: {
                         collapsable: true,
                         color: clusterColor,
-                        taskNode: cluster.cluster.taskNode
+                        taskNode: cluster.cluster.taskNode,
+                        unused: nodeByUid[cluster.cluster.taskNode.uid].unused
                     },
                     class: `bg-light-${clusterColor}-border rounded p-2`,
                 })
             }
         }
 
-        const nodeByUid = {};
         for (const node of flowGraph.nodes.concat(clusterToNode)) {
-            nodeByUid[node.uid] = node;
-
             if (!hiddenNodes.includes(node.uid)) {
                 const dagreNode = dagreGraph.node(node.uid);
                 let nodeType = "task";
@@ -426,7 +425,8 @@ export default class VueFlowUtils {
                         expandable: this.isExpandableTask(node, clusterByNodeUid, edgeReplacer),
                         isReadOnly: isReadOnlyTask,
                         iconComponent: this.isCollapsedCluster(node) ? "webhook" : null,
-                        executionId: node.executionId
+                        executionId: node.executionId,
+                        unused: node.unused
                     },
                     class: node.type === "collapsedcluster" ? `bg-light-${color}-border rounded` : "",
                 })
@@ -454,7 +454,8 @@ export default class VueFlowUtils {
                         haveDashArray: nodeByUid[edge.source].type.endsWith("GraphTrigger")
                             || nodeByUid[edge.target].type.endsWith("GraphTrigger")
                             || edge.source.startsWith(TRIGGERS_NODE_UID),
-                        color: this.getEdgeColor(edge, nodeByUid)
+                        color: this.getEdgeColor(edge, nodeByUid),
+                        unused: edge.unused
                     },
                     style: {
                         zIndex: 10,