@kestra-io/ui-libs 0.0.3 → 0.0.5

package/src/components/nodes/TriggerNode.vue

@@ -9,18 +9,24 @@
     >
         <template #badge-button-before>
             <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.trigger, section: SECTIONS.TRIGGERS})"
+                data-bs-toggle="tooltip"
+                data-bs-placement="top"
+                :title="$t('edit')"
             >
                 <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.TRIGGERS})"
+                data-bs-toggle="tooltip"
+                data-bs-placement="top"
+                :title="$t('delete')"
             >
                 <Delete class="button-icon" alt="Delete task" />
             </span>
@@ -28,18 +34,39 @@
     </basic-node>
     <Handle type="target" :position="targetPosition" />
 </template>
-
+<script setup>
+    import BasicNode from "./BasicNode.vue";
+</script>
 <script>
     import BasicNode from "./BasicNode.vue";
     import {Handle} from "@vue-flow/core";
+    import {mapState} from "vuex";
     import {EVENTS, SECTIONS} from "../../utils/constants.js";
     import Pencil from "vue-material-design-icons/Pencil.vue";
     import Delete from "vue-material-design-icons/Delete.vue";
+    import {Tooltip} from "bootstrap";
 
     export default {
         name: "Task",
         inheritAttrs: false,
+        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("execution", ["execution"]),
             SECTIONS() {
                 return SECTIONS
             },
@@ -57,7 +84,6 @@
         components: {
             Delete, Pencil,
             Handle,
-            BasicNode,
         },
         props: {
             data: {

package/src/components/topology/Topology.vue

@@ -0,0 +1,355 @@
+<script setup>
+    import {
+        ref,
+        defineProps,
+        defineEmits, watch, nextTick,
+        onMounted
+    } from "vue";
+    import {
+        ClusterNode,
+        DotNode,
+        TaskNode,
+        TriggerNode,
+        CollapsedClusterNode,
+        EdgeNode,
+    } from "../index.js";
+    import {useVueFlow, VueFlow} from "@vue-flow/core";
+    import {ControlButton, Controls} from "@vue-flow/controls";
+    import SplitCellsVertical from "../../assets/icons/SplitCellsVertical.vue";
+    import SplitCellsHorizontal from "../../assets/icons/SplitCellsHorizontal.vue";
+    import {cssVariable} from "../../utils/global.js";
+    import {VueFlowUtils, YamlUtils} from "../../index.js";
+    import Utils from "../../utils/Utils.js";
+    import VueflowUtils from "../../utils/VueFlowUtils.js";
+    import {CLUSTER_UID_SEPARATOR} from "../../utils/constants.js";
+
+    const props = defineProps({
+        id: {
+            type: String,
+            required: true
+        },
+        isHorizontal: {
+            type: Boolean,
+            default: true,
+        },
+        isReadOnly: {
+            type: Boolean,
+            default: true,
+        },
+        isAllowedEdit: {
+            type: Boolean,
+            default: false,
+        },
+        flowables: {
+            type: Array,
+            default: () => [],
+        },
+        source: {
+            type: String,
+            default: undefined,
+            required: true,
+        },
+        toggleOrientationButton: {
+            type: Boolean,
+            default: false,
+        },
+        flowGraph: {
+            type: Object,
+            required: true
+        },
+        flowId: {
+            type: String,
+            required: false,
+            default: undefined
+        },
+        namespace: {
+            type: String,
+            required: false,
+            default: undefined
+        },
+    });
+
+    const dragging = ref(false);
+    const lastPosition = ref(null)
+    const {getNodes, onNodeDrag, onNodeDragStart, onNodeDragStop, fitView, setElements} = useVueFlow({id: props.id});
+    const edgeReplacer = ref({});
+    const hiddenNodes = ref([]);
+    const collapsed = ref([]);
+    const clusterToNode = ref([])
+
+    const emit = defineEmits(
+        [
+            "edit",
+            "delete",
+            "open-link",
+            "show-logs",
+            "show-description",
+            "on-add-flowable-error",
+            "add-task",
+            "toggle-orientation",
+            "loading",
+            "swapped-task",
+            "message"
+        ]
+    )
+
+    onMounted( () => {
+        generateGraph();
+    })
+
+    watch(() => props.flowGraph, () => {
+        generateGraph();
+    })
+
+    const generateGraph = () => {
+        VueFlowUtils.cleanGraph(props.id);
+
+        nextTick(() => {
+            forwardEvent("loading", true);
+            const elements = VueflowUtils.generateGraph(
+                props.id,
+                props.flowId,
+                props.namespace,
+                props.flowGraph,
+                props.source,
+                hiddenNodes.value,
+                props.isHorizontal,
+                edgeReplacer.value,
+                collapsed.value,
+                clusterToNode.value,
+                props.isReadOnly,
+                props.isAllowedEdit,
+                flowables()
+            );
+            setElements(elements);
+            fitView();
+            forwardEvent("loading", false);
+        })
+    }
+
+    const forwardEvent = (type, payload) => {
+        emit(type, payload);
+    };
+
+    // Graph interactions functions
+    const onMouseOver = (node) => {
+        if (!dragging.value) {
+            VueFlowUtils.linkedElements(props.id, node.uid).forEach((n) => {
+                if (n.type === "task") {
+                    n.style = {...n.style, outline: "0.5px solid " + cssVariable("--bs-gray-900")}
+                    n.class = "rounded-3"
+                }
+            });
+        }
+
+    }
+
+    const onMouseLeave = () => {
+        resetNodesStyle();
+    }
+
+    const resetNodesStyle = () => {
+        getNodes.value.filter(n => n.type === "task" || n.type === "trigger")
+            .forEach(n => {
+                n.style = {...n.style, opacity: "1", outline: "none"}
+                n.class = ""
+            })
+    }
+
+    onNodeDragStart((e) => {
+        dragging.value = true;
+        resetNodesStyle();
+        e.node.style = {...e.node.style, zIndex: 1976}
+        lastPosition.value = e.node.position;
+    })
+
+    onNodeDragStop((e) => {
+        dragging.value = false;
+        if (checkIntersections(e.intersections, e.node) === null) {
+            const taskNode1 = e.node;
+            // check multiple intersection with task
+            const taskNode2 = e.intersections.find(n => n.type === "task");
+            if (taskNode2) {
+                try {
+                    emit("swapped-task", YamlUtils.swapTasks(props.source, taskNode1.id, taskNode2.id))
+                } catch (e) {
+                    emit("message", {
+                        variant: "error",
+                        title: "cannot swap tasks",
+                        message: `${e.message}, ${e.messageOptions}`
+                    });
+                    taskNode1.position = lastPosition.value;
+                }
+            } else {
+                taskNode1.position = lastPosition.value;
+            }
+        } else {
+            e.node.position = lastPosition.value;
+        }
+        resetNodesStyle();
+        e.node.style = {...e.node.style, zIndex: 5}
+        lastPosition.value = null;
+    })
+
+    onNodeDrag((e) => {
+        resetNodesStyle();
+        getNodes.value.filter(n => n.id !== e.node.id).forEach(n => {
+            if (n.type === "trigger" || (n.type === "task" && YamlUtils.isParentChildrenRelation(props.source, n.id, e.node.id))) {
+                n.style = {...n.style, opacity: "0.5"}
+            } else {
+                n.style = {...n.style, opacity: "1"}
+            }
+        })
+        if (!checkIntersections(e.intersections, e.node) && e.intersections.filter(n => n.type === "task").length === 1) {
+            e.intersections.forEach(n => {
+                if (n.type === "task") {
+                    n.style = {...n.style, outline: "0.5px solid " + cssVariable("--bs-primary")}
+                    n.class = "rounded-3"
+                }
+            })
+            e.node.style = {...e.node.style, outline: "0.5px solid " + cssVariable("--bs-primary")}
+            e.node.class = "rounded-3"
+        }
+    })
+
+    const checkIntersections = (intersections, node) => {
+        const tasksMeet = intersections.filter(n => n.type === "task").map(n => n.id);
+        if (tasksMeet.length > 1) {
+            return "toomuchtaskerror";
+        }
+        if (tasksMeet.length === 1 && YamlUtils.isParentChildrenRelation(props.source, tasksMeet[0], node.id)) {
+            return "parentchildrenerror";
+        }
+        if (intersections.filter(n => n.type === "trigger").length > 0) {
+            return "triggererror";
+        }
+        return null;
+    }
+
+    const collapseCluster = (clusterUid, regenerate, recursive) => {
+
+        const cluster = props.flowGraph.clusters.find(cluster => cluster.cluster.uid === clusterUid)
+        const nodeId = clusterUid === "Triggers" ? "Triggers" : Utils.splitFirst(clusterUid, CLUSTER_UID_SEPARATOR);
+        collapsed.value = collapsed.value.concat([nodeId])
+
+        hiddenNodes.value = hiddenNodes.value.concat(cluster.nodes.filter(e => e !== nodeId || recursive));
+        if (clusterUid !== "Triggers") {
+            hiddenNodes.value = hiddenNodes.value.concat([cluster.cluster.uid])
+            edgeReplacer.value = {
+                ...edgeReplacer.value,
+                [cluster.cluster.uid]: nodeId,
+                [cluster.start]: nodeId,
+                [cluster.end]: nodeId
+            }
+
+            for (let child of cluster.nodes) {
+                if (props.flowGraph.clusters.map(cluster => cluster.cluster.uid).includes(child)) {
+                    collapseCluster(child, false, true);
+                }
+            }
+        } else {
+            edgeReplacer.value = {
+                ...edgeReplacer.value,
+                [cluster.start]: nodeId,
+                [cluster.end]: nodeId
+            }
+        }
+
+        if (regenerate) {
+            generateGraph();
+        }
+    }
+
+    const expand = (taskId) => {
+        edgeReplacer.value = {}
+        hiddenNodes.value = []
+        clusterToNode.value = []
+        collapsed.value = collapsed.value.filter(n => n != taskId)
+
+        collapsed.value.forEach(n => collapseCluster(CLUSTER_UID_SEPARATOR + n, false, false))
+
+        generateGraph();
+    }
+
+    const flowables = () => {
+        return props.flowGraph && props.flowGraph.flowables ? props.flowGraph.flowables : [];
+    }
+</script>
+<template>
+    <VueFlow
+        :id="id"
+        :default-marker-color="cssVariable('--bs-cyan')"
+        fit-view-on-init
+        :nodes-draggable="false"
+        :nodes-connectable="false"
+        :elevate-nodes-on-select="false"
+        :elevate-edges-on-select="false"
+    >
+        <template #node-cluster="clusterProps">
+            <ClusterNode
+                v-bind="clusterProps"
+                @collapse="collapseCluster($event, true)"
+            />
+        </template>
+
+        <template #node-dot="dotProps">
+            <DotNode
+                v-bind="dotProps"
+            />
+        </template>
+
+        <template #node-task="taskProps">
+            <TaskNode
+                v-bind="taskProps"
+                @edit="forwardEvent('edit', $event)"
+                @delete="forwardEvent('delete', $event)"
+                @expand="expand($event)"
+                @open-link="forwardEvent('open-link', $event)"
+                @show-logs="forwardEvent('show-logs', $event)"
+                @show-description="forwardEvent('show-description', $event)"
+                @mouseover="onMouseOver($event)"
+                @mouseleave="onMouseLeave()"
+                @add-error="forwardEvent('on-add-flowable-error', $event)"
+            />
+        </template>
+
+        <template #node-trigger="triggerProps">
+            <TriggerNode
+                v-bind="triggerProps"
+                :is-read-only="isReadOnly"
+                :is-allowed-edit="isAllowedEdit"
+                @delete="forwardEvent('delete', $event)"
+                @edit="forwardEvent('edit', $event)"
+            />
+        </template>
+
+        <template #node-collapsedcluster="CollapsedProps">
+            <CollapsedClusterNode
+                v-bind="CollapsedProps"
+                @expand="expand($event)"
+            />
+        </template>
+
+        <template #edge-edge="EdgeProps">
+            <EdgeNode
+                v-bind="EdgeProps"
+                :yaml-source="source"
+                :flowables-ids="flowables"
+                @add-task="forwardEvent('add-task', $event)"
+                :is-read-only="isReadOnly"
+                :is-allowed-edit="isAllowedEdit"
+            />
+        </template>
+
+        <Controls :show-interactive="false">
+            <ControlButton @click="forwardEvent('toggle-orientation', $event)" v-if="toggleOrientationButton">
+                <SplitCellsVertical :size="48" v-if="!isHorizontal" />
+                <SplitCellsHorizontal v-if="isHorizontal" />
+            </ControlButton>
+        </Controls>
+    </VueFlow>
+</template>
+
+<style scoped lang="scss">
+
+</style>

package/src/index.js

@@ -1 +1,7 @@
+import YamlUtils from "./utils/YamlUtils.js";
+import Utils from "./utils/Utils.js";
+import VueFlowUtils from "./utils/VueFlowUtils.js";
+
+export {YamlUtils, Utils, VueFlowUtils};
+
 export * from "./components/index.js";

package/src/scss/_variables.scss

@@ -1,3 +1,8 @@
+// primary color
+$primary: #8405FF !default;
+$secondary: #C182FF !default;
+$tertiary: #2F3342 !default;
+
 // color system
 $blue: #1761FD !default;
 $indigo: #8405FF !default;
@@ -11,22 +16,18 @@ $green: #03DABA !default;
 $teal: #03D87F !default;
 $cyan: #60C5FE !default;
 
-// primary color
-$primary: #8405FF !default;
-$secondary: #C182FF !default;
-$tertiary: #2F3342 !default;
 
 // gray
 $white: #FFF !default;
 $gray-100: #F5F5FF !default;
-$gray-200: #f1f5fa !default;
+$gray-200: #F0F0FF !default;
 $gray-300: #E5E4F7 !default;
-$gray-400: #b6c2e4 !default;
-$gray-500: #8997bd !default;
-$gray-600: #7081b9 !default;
-$gray-700: #303e67 !default;
-$gray-800: #2c3652 !default;
-$gray-900: #1d2c48 !default;
+$gray-400: #D1CFE9 !default;
+$gray-500: #B8B6D9 !default;
+$gray-600: #A6A4CA !default;
+$gray-700: #9A8EB4 !default;
+$gray-800: #7E719F !default;
+$gray-900: #564A75 !default;
 $black: #26282D !default;
 
 $light: $gray-200 !default;
@@ -34,10 +35,21 @@ $dark: $gray-900 !default;
 
 // fonts
 $font-size-base: 1rem !default;
+$font-size-xs: $font-size-base * .75;
+$font-size-sm: $font-size-base * .875;
+$font-size-lg: $font-size-base * 1.25;
+$font-size-xl: $font-size-base * 1.375;
 $font-family-sans-serif: "Public Sans", sans-serif;
 $font-family-monospace: "Source Code Pro", monospace;
 $font-size-xs: $font-size-base * 0.75 !default;
 
+$h1-font-size: $font-size-base * 3.375;
+$h2-font-size: $font-size-base * 2.5;
+$h3-font-size: $font-size-base * 2;
+$h4-font-size: $font-size-base * 1.375;
+$h5-font-size: $font-size-base * 1.25;
+$h6-font-size: $font-size-base * 1.125;
+
 // border radius
 $border-radius: 0.25rem !default;
 $border-radius-lg: 0.5rem !default;
@@ -49,12 +61,16 @@ $spacer: 1rem !default;
 
 // body
 $body-color: $gray-800 !default;
+$body-tertiary-color: #FFFFFF;
+$body-tertiary-bg: #785EEA;
 $border-color: $gray-300 !default;
 $body-bg: $gray-100 !default;
 $card-bg: $white !default;
 $input-bg: $white !default;
 
+// link
 $link-color: $primary !default;
+$link-decoration: none;
 
 // border radius
 $border-radius: .25rem !default;
@@ -65,6 +81,45 @@ $box-shadow-sm: 0 .125rem .25rem rgba($black, .075);
 $box-shadow: 0 .5rem 1rem rgba($black, .15);
 $box-shadow-lg: 0 1rem 3rem rgba($black, .175);
 
+// button
+$btn-font-size-lg: 18px;
+
+// grid
+$grid-gutter-width: 1.75rem;
+
+// nav
+$nav-pills-border-radius: 50rem;
+
+// accordion
+$accordion-icon-color: $white;
+$accordion-icon-active-color: $white;
+
+// purples
+$purple-1: #382369;
+$purple-2: #FBC7F4;
+$purple-3: #9580EE;
+$purple-4: linear-gradient(160.34deg, rgba(130, 0, 255, 0.12) 5.3%, rgba(130, 0, 255, 0) 75.43%), #201838;
+$purple-5: #362762;
+$purple-6: #6113BC;
+$purple-7: #1A1223;
+$purple-8: #EEEDFF;
+$purple-9: 0px 12.972px 39.7269px rgba(90, 0, 176, 0.1);
+$purple-10: #150E1C;
+$purple-11: #332C3B;
+$purple-12: #432A71;
+$purple-16: #281A35;
+$purple-19: conic-gradient(from 90deg at 50% 50%, #BE79FF 0deg, #7136F6 360deg);
+$purple-20: #291E39;
+$purple-21: #A42DCD;
+$purple-22: #FCF7FE;
+$purple-23: #EDE8F3;
+$purple-24: #15023F;
+$purple-26: #DCCDEB;
+$purple-27: #8200FF;
+$purple-28: #2D313E;
+$purple-29: #F1F5FF;
+$purple-30: rgba(255, 255, 255, 0.1);
+
 // boostrap flags
 $enable-reduced-motion: false;
 
@@ -93,6 +148,8 @@ $element-colors: (
         ),
 );
 
+$baseline-max-width: 730px;
+
 // bootstrap
 @import "bootstrap/scss/functions";
 @import "bootstrap/scss/mixins";

package/src/scss/app.scss

@@ -37,3 +37,5 @@ marker[id*='id=marker-custom&type=arrowclosed'] polyline {
 .button-icon {
   font-size: 0.75rem;
 }
+
+

package/src/scss/bootstrap-dark.scss

@@ -43,6 +43,18 @@ $theme-colors: map-merge($theme-colors, $custom-colors);
 }
 
 
+.tooltip {
+  html.dark & {
+    color: $white;
+    background-color: $card-bg;
+    border-radius: $border-radius;
+    padding: calc($spacer / 3);
+    font-size: $font-size-xs;
+    border: 1px solid $border-color;
+  }
+}
+
+
 // overload
 .font-monospace {
   font-size: $font-size-base * 0.7;

package/src/scss/bootstrap.scss

@@ -66,6 +66,16 @@ $theme-colors: map-merge($theme-colors, $custom-colors);
 }
 
 
+.tooltip {
+  color: $black;
+  background-color: $card-bg;
+  border-radius: $border-radius-lg;
+  padding: calc($spacer/3);
+  font-size: $font-size-xs;
+  border: 1px solid $border-color;
+}
+
+
 // overload
 .font-monospace {
   font-size: $font-size-base * 0.7;