@kestra-io/ui-libs 0.0.3 → 0.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kestra-io/ui-libs",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "type": "module",
   "files": [
     "src",
@@ -22,10 +22,14 @@
     "bootstrap": "^5.3.0",
     "buffer": "^6.0.3",
     "humanize-duration": "^3.29.0",
+    "js-yaml": "^4.1.0",
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
     "vue": "^3.3.4",
-    "vue-material-design-icons": "^5.2.0"
+    "vue-material-design-icons": "^5.2.0",
+    "vuex": "^4.1.0",
+    "yaml": "^2.3.1",
+    "vue3-popper": "^1.5.0"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.2.3",

package/src/assets/icons/SplitCellsHorizontal.vue

@@ -0,0 +1,24 @@
+<template>
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <g clip-path="url(#clip0_796_3996)">
+            <path d="M13.367 1.979C13.7368 1.979 14.0366 2.27881 14.0366 2.64863V13.3626C14.0366 13.7324 13.7368 14.0322 13.367 14.0322H2.65302C2.2832 14.0322 1.9834 13.7324 1.9834 13.3626V2.64863C1.9834 2.27881 2.2832 1.979 2.65302 1.979H13.367ZM7.34039 3.31825H3.32265V12.693H7.34039V10.0145H8.67963V12.693H12.6974V3.31825H8.67963V5.99675H7.34039V3.31825ZM10.0189 5.99675L12.0278 8.00562L10.0189 10.0145V8.67524H6.00114V10.0145L3.99227 8.00562L6.00114 5.99675V7.33599H10.0189V5.99675Z" fill="#CAC5DA" />
+        </g>
+        <defs>
+            <clipPath id="clip0_796_3996">
+                <rect width="16" height="16" fill="white" />
+            </clipPath>
+        </defs>
+    </svg>
+</template>
+
+<script>
+    export default {
+        name: "SplitCellsHorizontalIcon",
+        emits: ["click"]
+    }
+</script>
+<style scoped>
+    svg {
+        transform: scale(1.5);
+    }
+</style>

package/src/assets/icons/SplitCellsVertical.vue

@@ -0,0 +1,24 @@
+<template>
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <g clip-path="url(#clip0_1111_7266)">
+            <path d="M1.97852 2.63349C1.97852 2.26366 2.27832 1.96387 2.64814 1.96387L13.3621 1.96387C13.7319 1.96387 14.0317 2.26366 14.0317 2.63349L14.0317 13.3475C14.0317 13.7173 13.7319 14.0171 13.3621 14.0171L2.64814 14.0171C2.27832 14.0171 1.97852 13.7173 1.97852 13.3475L1.97852 2.63349ZM3.31776 8.6601L3.31776 12.6778L12.6925 12.6778L12.6925 8.6601L10.014 8.6601L10.014 7.32085L12.6925 7.32085L12.6925 3.30311L3.31776 3.30311L3.31776 7.32086L5.99626 7.32085L5.99626 8.6601L3.31776 8.6601ZM5.99626 5.98161L8.00513 3.97274L10.014 5.98161L8.67475 5.98161L8.67475 9.99935L10.014 9.99935L8.00513 12.0082L5.99626 9.99935L7.3355 9.99935L7.3355 5.98161L5.99626 5.98161Z" fill="#CAC5DA" />
+        </g>
+        <defs>
+            <clipPath id="clip0_1111_7266">
+                <rect width="16" height="16" fill="white" transform="translate(0 16) rotate(-90)" />
+            </clipPath>
+        </defs>
+    </svg>
+</template>
+
+<script>
+    export default {
+        name: "SplitCellsVerticalIcon",
+        emits: ["click"]
+    }
+</script>
+<style scoped>
+    svg {
+        transform: scale(1.5);
+    }
+</style>

package/src/components/index.js

@@ -8,6 +8,9 @@ import BasicNode from "./nodes/BasicNode.vue";
 import CollapsedClusterNode from "./nodes/CollapsedClusterNode.vue";
 import DependenciesNode from "./nodes/DependenciesNode.vue"
 
+// Topology Component
+import Topology from "./topology/Topology.vue";
+
 // misc
 import ExecutionInformations from "./misc/ExecutionInformations.vue";
 import State from "./misc/State.vue";
@@ -17,5 +20,6 @@ import TaskIcon from "./misc/TaskIcon.vue";
 import AddTaskButton from "./buttons/AddTaskButton.vue";
 
 export {ClusterNode, DotNode, EdgeNode, TaskNode, TriggerNode, BasicNode, CollapsedClusterNode, DependenciesNode};
+export {Topology}
 export {ExecutionInformations, State, TaskIcon};
 export {AddTaskButton};

package/src/components/misc/ExecutionInformations.vue

@@ -5,8 +5,6 @@
     </div>
 </template>
 <script>
-    import Delete from "vue-material-design-icons/Delete.vue";
-    import Pencil from "vue-material-design-icons/Pencil.vue";
     import {EVENTS} from "../../utils/constants"
     import moment from "moment";
     import Duration from "./Duration.vue";
@@ -85,6 +83,10 @@
             execution: {
                 type: Object,
                 default: null
+            },
+            task: {
+                type: Object,
+                default: null
             }
         }
 
@@ -100,7 +102,6 @@
             left: 0;
             top: 50%;
             height: 50%;
-            border-left: 1px solid var(--bs-gray-100);
             transform: translateY(-50%);
             z-index: 500;
         }

package/src/components/misc/TaskIcon.vue

@@ -2,18 +2,27 @@
     <div
         :class="[color ? `bg-${color}`: '']"
         class="div-icon rounded d-flex justify-content-center"
+        data-bs-toggle="tooltip"
+        data-bs-placement="top"
+        :title="cls"
     >
         <img :src="backgroundImage" alt="task icon">
     </div>
 </template>
 <script>
+    import {mapState} from "vuex";
     import {Buffer} from "buffer";
+    import {Tooltip} from "bootstrap";
 
     export default {
         name: "TaskIcon",
         props: {
-            icon: {
-                type: Object,
+            customIcon: {
+                type: String,
+                default: undefined
+            },
+            cls: {
+                type: String,
                 default: undefined
             },
             color: {
@@ -21,7 +30,24 @@
                 default: undefined
             }
         },
+        mounted(){
+            const tooltipTriggerList = [].slice.call(document.querySelectorAll("[data-bs-toggle=\"tooltip\"]"));
+            this.tooltips = tooltipTriggerList.map(function (tooltipTriggerEl) {
+                return new Tooltip(tooltipTriggerEl, {
+                    trigger : "hover"
+                })
+            })
+        },
+        beforeUnmount() {
+            document.querySelectorAll("[data-bs-toggle=\"tooltip\"]").forEach((el) => {
+                const tooltip = Tooltip.getInstance(el);
+                if (tooltip) {
+                    tooltip.dispose();
+                }
+            });
+        },
         computed: {
+            ...mapState("plugin", ["icons"]),
             backgroundImage() {
                 return `data:image/svg+xml;base64,${this.imageBase64}`
             },
@@ -35,6 +61,9 @@
                     "<path d=\"M288 32H0v448h384V128l-96-96zm64 416H32V64h224l96 96v288z\" fill=\"#0D1523FF\"/>" +
                     "</svg>", "utf8").toString("base64");
             },
+            icon() {
+                return this.cls ? (this.icons || {})[this.cls] : this.customIcon;
+            }
         }
     }
 </script>
@@ -47,4 +76,4 @@
         background-color: var(--bs-white);
         border: 0.4px solid var(--bs-border-color);
     }
-</style>
+</style>

package/src/components/nodes/BasicNode.vue

@@ -5,42 +5,60 @@
         @mouseover="mouseover"
         @mouseleave="mouseleave"
     >
-        <div v-if="state" class="status-div" :class="[`bg-${stateColor}`]" />
+        <div v-if="state" class="status-div" :class="[`bg-${stateColor}`]"/>
         <div>
-            <TaskIcon :icon="data.icon" :class="taskIconBg" />
+            <TaskIcon :icon="data.icon" :cls="cls" :class="taskIconBg"/>
         </div>
         <div class="node-content">
             <div class="d-flex justify-content-around">
-                <div class="text-truncate task-title">
+                <div
+                    class="text-truncate task-title"
+                    data-bs-toggle="tooltip"
+                    data-bs-placement="top"
+                    :title="id"
+                >
                     <span> {{ id }} </span>
                 </div>
-                <InformationOutline
-                    v-if="description"
-                    @click="$emit(EVENTS.SHOW_DESCRIPTION, {id: id, description:description})"
-                    class="description-button mx-2"
-                />
+                <span
+                    class="d-flex"
+                    data-bs-toggle="tooltip"
+                    data-bs-placement="top"
+                    :title="$t('show description')"
+                >
+                    <InformationOutline
+                        v-if="description"
+                        @click="$emit(EVENTS.SHOW_DESCRIPTION, {id: id, description:description})"
+                        class="description-button mx-2"
+                    />
+                </span>
             </div>
-            <slot name="content" />
+            <slot name="content"/>
         </div>
         <div class="position-absolute top-0 text-white d-flex top-button-div">
-            <slot name="badge-button-before" />
+            <slot name="badge-button-before"/>
             <span
                 v-if="link"
                 class="rounded-button"
                 :class="[`bg-${data.color}`]"
-                @click="$emit(EVENTS.OPEN_LINK, data)"
+                @click="$emit(EVENTS.OPEN_LINK, linkData)"
+                data-bs-toggle="tooltip"
+                data-bs-placement="top"
+                :title="$t('open')"
             >
-                <OpenInNew class="button-icon" alt="Open in new tab" />
+                <OpenInNew class="button-icon" alt="Open in new tab"/>
             </span>
             <span
                 v-if="expandable"
                 class="rounded-button"
                 :class="[`bg-${data.color}`]"
                 @click="$emit(EVENTS.EXPAND)"
+                data-bs-toggle="tooltip"
+                data-bs-placement="top"
+                :title="$t('expand')"
             >
-                <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>
 </template>
@@ -51,6 +69,9 @@
     import {EVENTS} from "../../utils/constants.js";
     import ArrowExpand from "vue-material-design-icons/ArrowExpand.vue";
     import OpenInNew from "vue-material-design-icons/OpenInNew.vue";
+    import {Tooltip} from "bootstrap";
+    import {VueFlowUtils} from "../../index.js";
+    import {mapState} from "vuex";
 
     export default {
         components: {
@@ -59,6 +80,22 @@
             InformationOutline,
             OpenInNew
         },
+        mounted() {
+            const tooltipTriggerList = [].slice.call(document.querySelectorAll("[data-bs-toggle=\"tooltip\"]"));
+            this.tooltips = tooltipTriggerList.map(function (tooltipTriggerEl) {
+                return new Tooltip(tooltipTriggerEl, {
+                    trigger: "hover"
+                })
+            })
+        },
+        beforeUnmount() {
+            document.querySelectorAll("[data-bs-toggle=\"tooltip\"]").forEach((el) => {
+                const tooltip = Tooltip.getInstance(el);
+                if (tooltip) {
+                    tooltip.dispose();
+                }
+            });
+        },
         emits: [
             EVENTS.EXPAND,
             EVENTS.OPEN_LINK,
@@ -113,6 +150,7 @@
             };
         },
         computed: {
+            ...mapState("execution", ["execution"]),
             EVENTS() {
                 return EVENTS
             },
@@ -134,17 +172,26 @@
             },
             stateColor() {
                 switch (this.state) {
-                case "RUNNING":
-                    return "primary"
-                case "SUCCESS":
-                    return "success"
-                case "WARNING":
-                    return "warning"
-                case "FAILED":
-                    return "danger"
-                default:
-                    return null;
+                    case "RUNNING":
+                        return "primary"
+                    case "SUCCESS":
+                        return "success"
+                    case "WARNING":
+                        return "warning"
+                    case "FAILED":
+                        return "danger"
+                    default:
+                        return null;
                 }
+            },
+            linkData() {
+                if(this.data.node.task) {
+                    return {link: VueFlowUtils.linkDatas(this.data.node.task, this.execution)}
+                }
+                return null
+            },
+            cls() {
+                return this.data.node?.task ? this.data.node.task.type : this.data.node?.trigger ? this.data.node.trigger.type : null
             }
         },
     }

package/src/components/nodes/ClusterNode.vue

@@ -6,8 +6,11 @@
             class="rounded-button"
             :class="[`bg-${data.color}`]"
             @click="collapse()"
+            data-bs-toggle="tooltip"
+            data-bs-trigger="hover"
+            :title="$t('collapse')"
         >
-            <ArrowCollapse class="button-icon" alt="Collapse task" />
+            <ArrowCollapse class="button-icon" alt="Collapse task"/>
         </span>
     </div>
 </template>
@@ -24,8 +27,31 @@
 
 </script>
 <script>
+    import {Tooltip} from "bootstrap";
+
     export default {
         inheritAttrs: false,
+        data() {
+            return {
+                tooltips: [],
+            }
+        },
+        mounted() {
+            const tooltipTriggerList = [].slice.call(document.querySelectorAll("[data-bs-toggle=\"tooltip\"]"));
+            this.tooltips = tooltipTriggerList.map(function (tooltipTriggerEl) {
+                return new Tooltip(tooltipTriggerEl, {
+                    placement: "top"
+                })
+            })
+        },
+        beforeUnmount() {
+            document.querySelectorAll("[data-bs-toggle=\"tooltip\"]").forEach((el) => {
+                const tooltip = Tooltip.getInstance(el);
+                if (tooltip) {
+                    tooltip.dispose();
+                }
+            });
+        }
     }
 </script>
 <style scoped lang="scss">
@@ -50,4 +76,4 @@
         padding: 0.25rem 0.5rem;
     }
 
-</style>
+</style>

package/src/components/nodes/DependenciesNode.vue

@@ -4,12 +4,22 @@
         :class="[`border-${data.color}`]"
         class="dependency-node-wrapper rounded-3 border"
     >
-        <TaskIcon color="pink" :icon="{icon: icon}" />
+        <TaskIcon color="pink" :custom-icon="{icon: icon}" />
         <div class="dependency-text d-flex flex-column">
-            <div class="dependency-flow-text">
+            <div 
+                class="dependency-flow-text text-truncate"
+                data-bs-toggle="tooltip"
+                data-bs-placement="top"
+                :title="data.flowId"
+            >
                 {{ data.flowId }}
             </div>
-            <div class="dependency-namespace-text">
+            <div 
+                class="dependency-namespace-text text-truncate"
+                data-bs-toggle="tooltip"
+                data-bs-placement="top"
+                :title="data.namespace"
+            >
                 {{ data.namespace }}
             </div>
         </div>
@@ -21,6 +31,9 @@
                 class="rounded-button"
                 :class="[`bg-${data.color}`]"
                 @click="$emit(EVENTS.OPEN_LINK, data)"
+                data-bs-toggle="tooltip"
+                data-bs-placement="top"
+                :title="$t('open')"
             >
                 <OpenInNew class="button-icon" alt="Open in new tab" />
             </span>
@@ -28,6 +41,9 @@
                 class="rounded-button"
                 :class="[`bg-${data.color}`]"
                 @click="$emit(EVENTS.EXPAND_DEPENDENCIES, data)"
+                data-bs-toggle="tooltip"
+                data-bs-placement="top"
+                :title="$t('expand')"
             >
                 <ArrowExpandAll class="button-icon" alt="Expand task" />
             </span>
@@ -44,6 +60,7 @@
     import OpenInNew from "vue-material-design-icons/OpenInNew.vue";
     import ArrowExpandAll from "vue-material-design-icons/ArrowExpandAll.vue";
     import {EVENTS} from "../../utils/constants.js";
+    import {Tooltip} from "bootstrap";
 
     export default {
         name: "Dependencies",
@@ -55,6 +72,22 @@
             EVENTS.MOUSE_OVER,
             EVENTS.MOUSE_LEAVE,
         ],
+        mounted() {
+            const tooltipTriggerList = [].slice.call(document.querySelectorAll("[data-bs-toggle=\"tooltip\"]"));
+            this.tooltips = tooltipTriggerList.map(function (tooltipTriggerEl) {
+                return new Tooltip(tooltipTriggerEl, {
+                    trigger: "hover"
+                })
+            })
+        },
+        beforeUnmount() {
+            document.querySelectorAll("[data-bs-toggle=\"tooltip\"]").forEach((el) => {
+                const tooltip = Tooltip.getInstance(el);
+                if (tooltip) {
+                    tooltip.dispose();
+                }
+            });
+        },
         computed: {
             EVENTS() {
                 return EVENTS
@@ -112,12 +145,14 @@
     .dependency-flow-text {
         font-size: 0.85rem;
         font-weight: 700;
+        max-width: 121px;
     }
 
     .dependency-namespace-text {
         font-size: 0.625rem;
         font-weight: 400;
         color: #564A75;
+        max-width: 121px;
 
         html.dark & {
             color: #E3DBFF;

package/src/components/nodes/EdgeNode.vue

@@ -3,8 +3,14 @@
     import {EdgeLabelRenderer, getSmoothStepPath} from "@vue-flow/core";
     import AddTaskButton from "../buttons/AddTaskButton.vue";
     import {EVENTS} from "../../utils/constants.js";
+    import {Tooltip} from "bootstrap";
 
     export default {
+        data() {
+            return {
+                tooltips: [],
+            }
+        },
         props: {
             id: String,
             data: Object,
@@ -32,6 +38,22 @@
                 path,
             };
         },
+        mounted(){
+            const tooltipTriggerList = [].slice.call(document.querySelectorAll("[data-bs-toggle=\"tooltip\"]"));
+            this.tooltips = tooltipTriggerList.map(function (tooltipTriggerEl) {
+                return new Tooltip(tooltipTriggerEl, {
+                    trigger : "hover"
+                })
+            })
+        },
+        beforeUnmount() {
+            document.querySelectorAll("[data-bs-toggle=\"tooltip\"]").forEach((el) => {
+                const tooltip = Tooltip.getInstance(el);
+                if (tooltip) {
+                    tooltip.dispose();
+                }
+            });
+        },
         inheritAttrs: false,
     };
 </script>
@@ -61,6 +83,9 @@
                 v-if="!data.disabled && data.haveAdd != undefined"
                 :add-task="true"
                 @click="$emit(EVENTS.ADD_TASK, data.haveAdd)"
+                data-bs-toggle="tooltip"
+                data-bs-placement="top"
+                :title="$t('add task')"
             />
         </div>
     </EdgeLabelRenderer>

package/src/components/nodes/TaskNode.vue

@@ -1,5 +1,5 @@
 <template>
-    <Handle type="source" :position="sourcePosition" />
+    <Handle type="source" :position="sourcePosition"/>
     <basic-node
         :id="id"
         :data="data"
@@ -11,7 +11,7 @@
         @mouseleave="forwardEvent(EVENTS.MOUSE_LEAVE)"
     >
         <template #content>
-            <execution-informations v-if="data.execution" :color="color" />
+            <execution-informations v-if="execution" :execution="execution" :task="data.node.task" :color="color"/>
         </template>
         <template #badge-button-before>
             <span
@@ -19,36 +19,48 @@
                 class="rounded-button"
                 :class="[`bg-${color}`]"
                 @click="$emit(EVENTS.SHOW_LOGS, {id, taskRuns})"
+                data-bs-toggle="tooltip"
+                data-bs-placement="top"
+                :title="$t('show task logs')"
             >
-                <TextBoxSearch class="button-icon" alt="Show logs" />
+                <TextBoxSearch class="button-icon" alt="Show logs"/>
             </span>
             <span
-                v-if="!data.execution && !data.isReadOnly && data.isFlowable"
+                v-if="!execution && !data.isReadOnly && data.isFlowable"
                 class="rounded-button"
                 :class="[`bg-${color}`]"
                 @click="$emit(EVENTS.ADD_ERROR, {task: data.node.task})"
+                data-bs-toggle="tooltip"
+                data-bs-placement="top"
+                :title="$t('add error handler')"
             >
-                <InformationOutline class="button-icon" alt="Edit task" />
+                <AlertOutline class="button-icon" alt="Edit task"/>
             </span>
             <span
-                v-if="!data.execution && !data.isReadOnly"
+                v-if="!execution && !data.isReadOnly"
                 class="rounded-button"
                 :class="[`bg-${color}`]"
                 @click="$emit(EVENTS.EDIT, {task: data.node.task, section: SECTIONS.TASKS})"
+                data-bs-toggle="tooltip"
+                data-bs-placement="top"
+                :title="$t('edit')"
             >
-                <Pencil class="button-icon" alt="Edit task" />
+                <Pencil class="button-icon" alt="Edit task"/>
             </span>
             <span
-                v-if="!data.execution && !data.isReadOnly"
+                v-if="!execution && !data.isReadOnly"
                 class="rounded-button"
                 :class="[`bg-${color}`]"
                 @click="$emit(EVENTS.DELETE, {id, section: SECTIONS.TASKS})"
+                data-bs-toggle="tooltip"
+                data-bs-placement="top"
+                :title="$t('delete')"
             >
-                <Delete class="button-icon" alt="Delete task" />
+                <Delete class="button-icon" alt="Delete task"/>
             </span>
         </template>
     </basic-node>
-    <Handle type="target" :position="targetPosition" />
+    <Handle type="target" :position="targetPosition"/>
 </template>
 
 <script>
@@ -60,12 +72,29 @@
     import Pencil from "vue-material-design-icons/Pencil.vue";
     import Delete from "vue-material-design-icons/Delete.vue";
     import TextBoxSearch from "vue-material-design-icons/TextBoxSearch.vue";
-    import InformationOutline from "vue-material-design-icons/InformationOutline.vue"
+    import AlertOutline from "vue-material-design-icons/AlertOutline.vue"
+    import {mapState} from "vuex";
+    import {Tooltip} from "bootstrap"
 
     export default {
         name: "Task",
         inheritAttrs: false,
+        mounted(){
+            const tooltipTriggerList = [].slice.call(document.querySelectorAll("[data-bs-toggle=\"tooltip\"]"));
+            tooltipTriggerList.map(function (tooltipTriggerEl) {
+                return new Tooltip(tooltipTriggerEl)
+            })
+        },
+        beforeUnmount() {
+            document.querySelectorAll("[data-bs-toggle=\"tooltip\"]").forEach((el) => {
+                const tooltip = Tooltip.getInstance(el);
+                if (tooltip) {
+                    tooltip.dispose();
+                }
+            });
+        },
         computed: {
+            ...mapState("execution", ["execution"]),
             SECTIONS() {
                 return SECTIONS
             },
@@ -75,9 +104,6 @@
             color() {
                 return this.data.color ?? "primary"
             },
-            execution() {
-                return this.data.execution
-            },
             taskRunList() {
                 return this.execution && this.execution.taskRunList ? this.execution.taskRunList : []
             },
@@ -136,7 +162,7 @@
             Handle,
             BasicNode,
             TextBoxSearch,
-            InformationOutline
+            AlertOutline,
         },
         props: {
             data: {