@kestra-io/ui-libs 0.0.2 → 0.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kestra-io/ui-libs",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "type": "module",
   "files": [
     "src",
@@ -12,26 +12,32 @@
     "dev": "vite",
     "debug": "vite --debug",
     "preview": "vite preview",
+    "build": "vite build",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path ./.gitignore"
   },
   "peerDependencies": {
-    "@popperjs/core": "^2.11.8",
-    "@vitejs/plugin-vue": "^4.2.3",
-    "@vue-flow/core": "^1.22.2",
+    "@vue-flow/background": "^1.2.0",
+    "@vue-flow/controls": "1.0.6",
+    "@vue-flow/core": "1.14.3",
     "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",
-    "sass": "^1.64.0",
-    "vite": "^4.4.9",
     "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",
     "eslint": "^8.46.0",
     "eslint-plugin-vue": "^9.17.0",
     "npm": "^9.8.1",
+    "sass": "^1.64.0",
+    "vite": "^4.4.9",
     "vite-plugin-static-copy": "^0.17.0"
   }
 }

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,25 +172,32 @@
             },
             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
             }
         },
     }
 </script>
 
 <style lang="scss" scoped>
-    @import "../../scss/custom";
-
     .node-wrapper {
         background-color: var(--bs-white);
 
@@ -178,7 +223,7 @@
     }
 
     .description-button {
-        color: $gray-600;
+        color: var(--bs-gray-600);
         cursor: pointer;
         width: 25px;
     }
@@ -223,4 +268,4 @@
         left: -0.04438rem;
         border-radius: 0.5rem 0 0 0.5rem;
     }
-</style>
+</style>

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
@@ -87,7 +120,6 @@
 </script>
 
 <style scoped lang="scss">
-
     .dependency-node-wrapper {
         background-color: var(--bs-white);
         color: var(--bs-black);
@@ -113,16 +145,18 @@
     .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;
         }
     }
 
-</style>
+</style>

package/src/components/nodes/DotNode.vue

@@ -37,10 +37,11 @@
     .custom-handle {
         visibility: hidden
     }
+
     .dot {
         display: flex;
         flex-direction: column;
         align-items: center;
         font-size: 5px;
     }
-</style>
+</style>

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>