@kestra-io/ui-libs 0.0.21 → 0.0.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kestra-io/ui-libs",
-  "version": "v0.0.21",
+  "version": "v0.0.23",
   "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/scss/app.scss

@@ -20,8 +20,27 @@
     font-size: 0.66rem;
 }
 
+.vue-flow__controls {
+    border: 1px solid var(--bs-border-color);
+    border-radius: var(--bs-border-radius);
+}
+
 .vue-flow__controls-button {
-    color: black;
+    color: var(--bs-black);
+    border-bottom-color: var(--bs-border-color);
+
+    svg {
+        fill: var(--bs-black);
+    }
+
+    html.dark & {
+        background: var(--bs-card-bg);
+        color: var(--bs-white);
+
+        svg {
+            fill: var(--bs-white);
+        }
+    }
 }
 
 .vue-flow__container {

package/src/utils/VueFlowUtils.js

@@ -349,44 +349,9 @@ 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);
-        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") {
-                    readOnlyUidPrefixes.push(cluster.cluster.taskNode.uid);
-                }
-
-                for (let nodeUid of cluster.nodes) {
-                    clusterByNodeUid[nodeUid] = cluster.cluster;
-                }
-
-                const clusterUid = cluster.cluster.uid;
-                const dagreNode = dagreGraph.node(clusterUid)
-                const parentNode = cluster.parents ? cluster.parents[cluster.parents.length - 1] : undefined;
-
-                const clusterColor = this.computeClusterColor(cluster.cluster);
-
-                elements.push({
-                    id: clusterUid,
-                    type: "cluster",
-                    parentNode: parentNode,
-                    position: this.getNodePosition(dagreNode, parentNode ? dagreGraph.node(parentNode) : undefined),
-                    style: {
-                        width: clusterUid === TRIGGERS_NODE_UID && isHorizontal ? NODE_SIZES.TRIGGER_CLUSTER_WIDTH + "px" : dagreNode.width + "px",
-                        height: clusterUid === TRIGGERS_NODE_UID && !isHorizontal ? NODE_SIZES.TRIGGER_CLUSTER_HEIGHT + "px" : dagreNode.height + "px"
-                    },
-                    data: {
-                        collapsable: true,
-                        color: clusterColor,
-                        taskNode: cluster.cluster.taskNode
-                    },
-                    class: `bg-light-${clusterColor}-border rounded p-2`,
-                })
-            }
-        }
 
         const nodeByUid = {};
         for (const node of flowGraph.nodes.concat(clusterToNode)) {
@@ -426,13 +391,50 @@ 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` : "",
                 })
             }
         }
 
+        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") {
+                    readOnlyUidPrefixes.push(cluster.cluster.taskNode.uid);
+                }
+
+                for (let nodeUid of cluster.nodes) {
+                    clusterByNodeUid[nodeUid] = cluster.cluster;
+                }
+
+                const clusterUid = cluster.cluster.uid;
+                const dagreNode = dagreGraph.node(clusterUid)
+                const parentNode = cluster.parents ? cluster.parents[cluster.parents.length - 1] : undefined;
+
+                const clusterColor = this.computeClusterColor(cluster.cluster);
+
+                elements.push({
+                    id: clusterUid,
+                    type: "cluster",
+                    parentNode: parentNode,
+                    position: this.getNodePosition(dagreNode, parentNode ? dagreGraph.node(parentNode) : undefined),
+                    style: {
+                        width: clusterUid === TRIGGERS_NODE_UID && isHorizontal ? NODE_SIZES.TRIGGER_CLUSTER_WIDTH + "px" : dagreNode.width + "px",
+                        height: clusterUid === TRIGGERS_NODE_UID && !isHorizontal ? NODE_SIZES.TRIGGER_CLUSTER_HEIGHT + "px" : dagreNode.height + "px"
+                    },
+                    data: {
+                        collapsable: true,
+                        color: clusterColor,
+                        taskNode: cluster.cluster.taskNode,
+                        unused: nodeByUid[cluster.cluster.taskNode.uid].unused
+                    },
+                    class: `bg-light-${clusterColor}-border rounded p-2`,
+                })
+            }
+        }
+
         const clusterRootTaskNodeUids = rawClusters.filter(c => c.taskNode).map(c => c.taskNode.uid);
         const edges = flowGraph.edges ?? [];
 
@@ -454,7 +456,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,