@kestra-io/ui-libs 0.0.6 → 0.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kestra-io/ui-libs",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "type": "module",
   "files": [
     "src",
@@ -27,9 +27,10 @@
     "moment": "^2.29.4",
     "vue": "^3.3.4",
     "vue-material-design-icons": "^5.2.0",
+    "vue3-popper": "^1.5.0",
     "vuex": "^4.1.0",
     "yaml": "^2.3.1",
-    "vue3-popper": "^1.5.0"
+    "dagre": "^0.8.5"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.2.3",

package/src/components/misc/Duration.vue

@@ -4,7 +4,7 @@
             <template #content>
                 <span v-for="(history, index) in histories" :key="'tt-' + index">
                     <span class="square" :class="squareClass(history.state)" />
-                    <strong>{{ history.state }}:</strong> {{ $filters.date(history.date, 'iso') }} <br>
+                    <strong>{{ history.state }}:</strong>{{ $filters.date(history.date, 'iso') }} <br>
                 </span>
             </template>
 

package/src/components/misc/ExecutionInformations.vue

@@ -1,6 +1,7 @@
 <template>
     <div class="btn-group content rounded-1 content-children">
-        <span v-if="taskRuns.length > 0">{{ taskRuns.length }} task runs</span>
+        <span v-if="taskRuns.length > 0" class="taskRunCount">{{ taskRuns.length }} task runs</span>
+        <span v-if="taskRuns.length > 0">|</span>
         <span><duration :histories="histories" /></span>
     </div>
 </template>
@@ -115,6 +116,6 @@
         align-self: stretch;
         pointer-events: none;
         cursor: default;
-        font-size: 0.75rem;
+        font-size: 0.70rem;
     }
 </style>

package/src/components/misc/TaskIcon.vue

@@ -1,6 +1,6 @@
 <template>
     <div
-        :class="[color ? `bg-${color}`: '']"
+        :class="[color ? `bg-${color}`: 'bg-white']"
         class="div-icon rounded d-flex justify-content-center"
         data-bs-toggle="tooltip"
         data-bs-placement="top"
@@ -18,7 +18,7 @@
         name: "TaskIcon",
         props: {
             customIcon: {
-                type: String,
+                type: Object,
                 default: undefined
             },
             cls: {
@@ -73,7 +73,9 @@
         margin: 0.2rem;
         width: 25px;
         height: 25px;
-        background-color: var(--bs-white);
         border: 0.4px solid var(--bs-border-color);
     }
+    .bg-white {
+        background-color: var(--bs-white);
+    }
 </style>

package/src/components/nodes/BasicNode.vue

@@ -1,6 +1,6 @@
 <template>
     <div
-        :class="[`border-${!expandable ? data.color : 'blue'}`]"
+        :class="[`border-${borderColor}`]"
         class="node-wrapper rounded-3 border"
         @mouseover="mouseover"
         @mouseleave="mouseleave"
@@ -151,6 +151,10 @@
         },
         computed: {
             ...mapState("execution", ["execution"]),
+            borderColor() {
+                const color = this.data.color ? this.data.color === "default" ? null : this.data.color : null
+                return color ? color : this.expandable ? "blue" : null
+            },
             EVENTS() {
                 return EVENTS
             },
@@ -223,7 +227,7 @@
     }
 
     .description-button {
-        color: var(--bs-gray-600);
+        color: var(--bs-gray-700);
         cursor: pointer;
         width: 25px;
     }

package/src/components/nodes/CollapsedClusterNode.vue

@@ -1,32 +1,40 @@
 <template>
-    <Handle type="source" :position="sourcePosition" />
+    <Handle type="source" :position="sourcePosition"/>
     <div class="collapsed-cluster-node">
-        <span>{{ id }}</span>
-        <div class="position-absolute top-0 start-100 translate-middle text-white d-flex top-button-div">
-            <slot name="badge-button-before" />
+        <span class="node-text">
+            <component v-if="data.iconComponent" :is="data.iconComponent" :class="`text-${data.color} me-2`" />
+            {{ id }}
+        </span>
+        <div class="position-absolute top-0 text-white d-flex top-button-div">
+            <slot name="badge-button-before"/>
             <span
                 v-if="expandable"
                 class="rounded-button"
                 :class="[`bg-${data.color}`]"
                 @click="$emit(EVENTS.EXPAND, id)"
             >
-                <ArrowExpand class="button-icon" alt="Expand task" />
+                <ArrowExpand class="button-icon" alt="Expand task"/>
             </span>
-            <slot name="badge-button-after" />
+            <slot name="badge-button-after"/>
         </div>
     </div>
-    <Handle type="target" :position="targetPosition" />
+    <Handle type="target" :position="targetPosition"/>
 </template>
 
 <script>
     import {EVENTS} from "../../utils/constants.js";
     import ArrowExpand from "vue-material-design-icons/ArrowExpand.vue";
+    import Webhook from "vue-material-design-icons/Webhook.vue";
     import {Handle} from "@vue-flow/core";
 
     export default {
         components: {
             Handle,
-            ArrowExpand
+            ArrowExpand,
+            Webhook
+        },
+        created(){
+            console.log(this.data)
         },
         inheritAttrs: false,
         props: {
@@ -45,7 +53,7 @@
             data: {
                 type: Object,
                 required: true
-            }
+            },
         },
         data() {
             return {
@@ -75,6 +83,16 @@
     .collapsed-cluster-node {
         width: 150px;
         height: 44px;
+        padding: 8px;
+    }
+
+    .node-text {
+        color: black;
+        font-size: 0.90rem;
+        display: flex;
+        html.dark & {
+            color: white;
+        }
     }
 
     .rounded-button {

package/src/components/nodes/TriggerNode.vue

@@ -108,19 +108,4 @@
             }
         }
     }
-</script>
-<style scoped lang="scss">
-    .rounded-button {
-        border-radius: 1rem;
-        width: 1rem;
-        height: 1rem;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        margin-left: 0.25rem;
-    }
-
-    .button-icon {
-        font-size: 0.75rem;
-    }
-</style>
+</script>

package/src/components/topology/Topology.vue

@@ -22,6 +22,7 @@
     import Utils from "../../utils/Utils.js";
     import VueflowUtils from "../../utils/VueFlowUtils.js";
     import {CLUSTER_UID_SEPARATOR} from "../../utils/constants.js";
+    import {Background} from "@vue-flow/background";
 
     const props = defineProps({
         id: {
@@ -101,6 +102,10 @@
         generateGraph();
     })
 
+    watch(() => props.isHorizontal, () => {
+        generateGraph();
+    })
+
     const generateGraph = () => {
         VueFlowUtils.cleanGraph(props.id);
 
@@ -285,6 +290,7 @@
         :elevate-nodes-on-select="false"
         :elevate-edges-on-select="false"
     >
+        <Background />
         <template #node-cluster="clusterProps">
             <ClusterNode
                 v-bind="clusterProps"

package/src/scss/app.scss

@@ -13,10 +13,19 @@ marker[id*='id=marker-custom&type=arrowclosed'] polyline {
   fill: $gray-700;
 }
 
+marker[id*='id=marker-danger&type=arrowclosed'] polyline {
+  stroke: $danger;
+  fill: $danger;
+}
+
 .vue-flow__handle {
   opacity: 0 !important;
 }
 
+.vue-flow__edge-path {
+  stroke: $gray-700;
+}
+
 
 .top-button-div {
   width: 100%;
@@ -32,10 +41,11 @@ marker[id*='id=marker-custom&type=arrowclosed'] polyline {
   justify-content: center;
   align-items: center;
   margin-left: 0.25rem;
+  z-index: 2000;
 }
 
 .button-icon {
-  font-size: 0.75rem;
+  font-size: 0.66rem;
 }
 
 

package/src/utils/VueFlowUtils.js

@@ -212,12 +212,12 @@ export default class VueFlowUtils {
 
     static nodeColor(node, collapsed, flowSource) {
         if (this.isTaskNode(node)) {
-            if (collapsed.includes(node.uid)) {
-                return "blue";
-            }
             if (YamlUtils.isTaskError(flowSource, node.task.id)) {
                 return "danger"
             }
+            if (collapsed.includes(node.uid)) {
+                return "blue";
+            }
             if (node.task.type === "io.kestra.core.tasks.flows.Flow") {
                 return "primary"
             }
@@ -230,8 +230,10 @@ export default class VueFlowUtils {
     static getClusterTaskIdWithEndNodeUid (nodeUid, flowGraph) {
         const cluster = flowGraph.clusters.find(cluster => cluster.end === nodeUid);
         if (cluster) {
+
             return Utils.splitFirst(cluster.cluster.uid, CLUSTER_UID_SEPARATOR);
         }
+
         return undefined;
     }
 
@@ -274,6 +276,9 @@ export default class VueFlowUtils {
         if (YamlUtils.isTaskError(flowSource, edge.source) || YamlUtils.isTaskError(flowSource, edge.target)) {
             return "danger"
         }
+        if (this.isClusterError(flowSource, edge.source) || this.isClusterError(flowSource, edge.target)) {
+            return "danger"
+        }
         return null;
     }
 
@@ -339,6 +344,7 @@ export default class VueFlowUtils {
                 }
 
                 const clusterUid = cluster.cluster.uid;
+                const isClusterError = YamlUtils.isTaskError(flowSource, Utils.splitFirst(clusterUid, CLUSTER_UID_SEPARATOR))
                 const dagreNode = dagreGraph.node(clusterUid)
                 const parentNode = cluster.parents ? cluster.parents[cluster.parents.length - 1] : undefined;
 
@@ -353,9 +359,9 @@ export default class VueFlowUtils {
                     },
                     data: {
                         collapsable: true,
-                        color: clusterUid === "Triggers" ? "success" : "blue"
+                        color: clusterUid === "Triggers" ? "success" : isClusterError ? "danger" : "blue"
                     },
-                    class: `bg-light-${clusterUid === "Triggers" ? "success" : "blue"}-border rounded p-2`,
+                    class: `bg-light-${clusterUid === "Triggers" ? "success" : isClusterError ? "danger" : "blue"}-border rounded p-2`,
                 })
             }
         }
@@ -405,11 +411,12 @@ export default class VueFlowUtils {
                         flowId: flowId,
                         isFlowable: this.isTaskNode(node) ? flowables.includes(taskId) : false,
                         color: nodeType != "dot" ? this.nodeColor(node, collapsed, flowSource) : null,
-                        expandable: taskId ? flowables.includes(taskId) && edgeReplacer[CLUSTER_UID_SEPARATOR + taskId] !== undefined : this.isCollapsedCluster(node),
+                        expandable: taskId ? edgeReplacer[CLUSTER_UID_SEPARATOR + taskId] !== undefined : this.isCollapsedCluster(node),
                         isReadOnly: isReadOnly,
-                        link: node.task?.type === "io.kestra.core.tasks.flows.Flow" ? this.linkDatas(node.task) : false
+                        link: node.task?.type === "io.kestra.core.tasks.flows.Flow" ? this.linkDatas(node.task) : false,
+                        iconComponent: this.isCollapsedCluster(node) ? "webhook" : null
                     },
-                    class: node.type === "collapsedcluster" ? `bg-light-${node.uid === "Triggers" ? "success" : "blue"}-border rounded p-2` : "",
+                    class: node.type === "collapsedcluster" ? `bg-light-${node.uid === "Triggers" ? "success" : YamlUtils.isTaskError(flowSource, taskId) ? "danger" : "blue"}-border rounded` : "",
                 })
             }
         }
@@ -422,7 +429,7 @@ export default class VueFlowUtils {
                     target: newEdge.target,
                     type: "edge",
                     markerEnd: YamlUtils.extractTask(flowSource, newEdge.target) ? {
-                        id: "marker-custom",
+                        id: YamlUtils.isTaskError(flowSource, newEdge.target) ? "marker-danger" : "marker-custom",
                         type: MarkerType.ArrowClosed,
                     } : "",
                     data: {
@@ -442,4 +449,19 @@ export default class VueFlowUtils {
         return elements;
     }
 
+    static isClusterError(flowSource, clusterUid) {
+        if(clusterUid.startsWith(CLUSTER_UID_SEPARATOR)) {
+            if(clusterUid.endsWith("_end")) {
+
+                return YamlUtils.isTaskError(flowSource, Utils.splitFirst(clusterUid.substring(0, clusterUid.length - 4), CLUSTER_UID_SEPARATOR));
+            }
+            if(clusterUid.endsWith("_start")) {
+
+                return YamlUtils.isTaskError(flowSource, Utils.splitFirst(clusterUid.substring(0, clusterUid.length - 6), CLUSTER_UID_SEPARATOR));
+            }
+        }
+
+        return false
+    }
+
 }

package/src/utils/YamlUtils.js

@@ -1,6 +1,6 @@
 import JsYaml from "js-yaml";
 import yaml, {Document, YAMLMap, isSeq, isMap, Pair, Scalar, YAMLSeq, LineCounter} from "yaml";
-import _cloneDeep from "lodash/cloneDeep"
+import {cloneDeep} from "lodash/cloneDeep"
 import {SECTIONS} from "./constants.js";
 
 const TOSTRING_OPTIONS = {lineWidth: 0};
@@ -15,7 +15,7 @@ export default class YamlUtils {
             delete value.deleted
         }
 
-        return JsYaml.dump(YamlUtils._transform(_cloneDeep(value)), {
+        return JsYaml.dump(YamlUtils._transform(cloneDeep(value)), {
             lineWidth: -1,
             noCompatMode: true,
             quotingType: "\"",