@kestra-io/ui-libs 0.0.1 → 0.0.2

package/src/components/nodes/ClusterNode.vue

@@ -0,0 +1,53 @@
+<template>
+    <span class="badge rounded-pill text-color" :class="[`bg-${data.color}`]">{{ id }}</span>
+    <div class="position-absolute top-0 start-100 translate-middle text-white d-flex">
+        <span
+            v-if="data.collapsable"
+            class="rounded-button"
+            :class="[`bg-${data.color}`]"
+            @click="collapse()"
+        >
+            <ArrowCollapse class="button-icon" alt="Collapse task" />
+        </span>
+    </div>
+</template>
+<script setup>
+    import ArrowCollapse from "vue-material-design-icons/ArrowCollapse.vue"
+    import {EVENTS} from "../../utils/constants.js";
+
+    const props = defineProps(["data", "sourcePosition", "targetPosition", "label", "id"]);
+    const emit = defineEmits([EVENTS.COLLAPSE])
+
+    const collapse = () => {
+        emit(EVENTS.COLLAPSE, props.id)
+    };
+
+</script>
+<script>
+    export default {
+        inheritAttrs: false,
+    }
+</script>
+<style scoped lang="scss">
+    .rounded-button {
+        border-radius: 1rem;
+        width: 1rem;
+        height: 1rem;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        pointer-events: auto !important;
+    }
+
+    .button-icon {
+        font-size: 0.75rem;
+    }
+
+    .text-color {
+        color: var(--bs-white);
+        font-size: 0.625rem;
+        font-weight: 700;
+        padding: 0.25rem 0.5rem;
+    }
+
+</style>

package/src/components/nodes/CollapsedClusterNode.vue

@@ -0,0 +1,94 @@
+<template>
+    <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
+                v-if="expandable"
+                class="rounded-button"
+                :class="[`bg-${data.color}`]"
+                @click="$emit(EVENTS.EXPAND, id)"
+            >
+                <ArrowExpand class="button-icon" alt="Expand task" />
+            </span>
+            <slot name="badge-button-after" />
+        </div>
+    </div>
+    <Handle type="target" :position="targetPosition" />
+</template>
+
+<script>
+    import {EVENTS} from "../../utils/constants.js";
+    import ArrowExpand from "vue-material-design-icons/ArrowExpand.vue";
+    import {Handle} from "@vue-flow/core";
+
+    export default {
+        components: {
+            Handle,
+            ArrowExpand
+        },
+        inheritAttrs: false,
+        props: {
+            id: {
+                type: String,
+                default: undefined
+            },
+            sourcePosition: {
+                type: String,
+                required: true
+            },
+            targetPosition: {
+                type: String,
+                required: true
+            },
+            data: {
+                type: Object,
+                required: true
+            }
+        },
+        data() {
+            return {
+                filter: undefined,
+                isOpen: false,
+            };
+        },
+        computed: {
+            EVENTS() {
+                return EVENTS
+            },
+            expandable() {
+                return this.data?.expandable || false
+            },
+            description() {
+                const node = this.data.node.task ?? this.data.node.trigger ?? null
+                if (node) {
+                    return node.description ?? null
+                }
+                return null
+            }
+        },
+    }
+</script>
+
+<style lang="scss" scoped>
+    .collapsed-cluster-node {
+        width: 150px;
+        height: 44px;
+    }
+
+    .rounded-button {
+        border-radius: 1rem;
+        width: 1rem;
+        height: 1rem;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .button-icon {
+        font-size: 0.75rem;
+    }
+
+
+</style>

package/src/components/nodes/DependenciesNode.vue

@@ -0,0 +1,128 @@
+<template>
+    <Handle type="source" :position="sourcePosition" />
+    <div
+        :class="[`border-${data.color}`]"
+        class="dependency-node-wrapper rounded-3 border"
+    >
+        <TaskIcon color="pink" :icon="{icon: icon}" />
+        <div class="dependency-text d-flex flex-column">
+            <div class="dependency-flow-text">
+                {{ data.flowId }}
+            </div>
+            <div class="dependency-namespace-text">
+                {{ data.namespace }}
+            </div>
+        </div>
+
+        <div class="position-absolute top-0 text-white d-flex top-button-div">
+            <slot name="badge-button-before" />
+            <span
+                v-if="data.link"
+                class="rounded-button"
+                :class="[`bg-${data.color}`]"
+                @click="$emit(EVENTS.OPEN_LINK, data)"
+            >
+                <OpenInNew class="button-icon" alt="Open in new tab" />
+            </span>
+            <span
+                class="rounded-button"
+                :class="[`bg-${data.color}`]"
+                @click="$emit(EVENTS.EXPAND_DEPENDENCIES, data)"
+            >
+                <ArrowExpandAll class="button-icon" alt="Expand task" />
+            </span>
+            <slot name="badge-button-after" />
+        </div>
+    </div>
+    <Handle type="target" :position="targetPosition" />
+</template>
+
+<script>
+    import {Handle} from "@vue-flow/core";
+    import TaskIcon from "../misc/TaskIcon.vue";
+    import {Buffer} from "buffer";
+    import OpenInNew from "vue-material-design-icons/OpenInNew.vue";
+    import ArrowExpandAll from "vue-material-design-icons/ArrowExpandAll.vue";
+    import {EVENTS} from "../../utils/constants.js";
+
+    export default {
+        name: "Dependencies",
+        components: {ArrowExpandAll, OpenInNew, TaskIcon, Handle},
+        inheritAttrs: false,
+        emits: [
+            EVENTS.EXPAND_DEPENDENCIES,
+            EVENTS.OPEN_LINK,
+            EVENTS.MOUSE_OVER,
+            EVENTS.MOUSE_LEAVE,
+        ],
+        computed: {
+            EVENTS() {
+                return EVENTS
+            },
+            icon() {
+                return Buffer.from("<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"25\" viewBox=\"0 0 24 25\" fill=\"none\">\n" +
+                    "<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4.34546 9.63757C4.74074 10.5277 5.31782 11.3221 6.03835 11.9681L7.03434 10.8209C6.4739 10.3185 6.02504 9.70059 5.71758 9.00824C5.41012 8.3159 5.25111 7.56496 5.25111 6.80532C5.25111 6.04568 5.41012 5.29475 5.71758 4.6024C6.02504 3.91006 6.4739 3.29216 7.03434 2.78977L6.03835 1.64258C5.31782 2.28851 4.74074 3.08293 4.34546 3.97307C3.95019 4.86321 3.74575 5.82867 3.74575 6.80532C3.74575 7.78197 3.95019 8.74744 4.34546 9.63757ZM16.955 4.38931C17.4802 3.97411 18.1261 3.74777 18.7913 3.74576C19.5894 3.74576 20.3547 4.06807 20.919 4.64177C21.4833 5.21548 21.8004 5.9936 21.8004 6.80494C21.8004 7.61628 21.4833 8.3944 20.919 8.96811C20.3547 9.54181 19.5894 9.86412 18.7913 9.86412C18.2559 9.86126 17.7312 9.71144 17.2725 9.43048L12.3325 14.4529L11.2688 13.3715L16.2088 8.34906C16.0668 8.10583 15.9592 7.84348 15.8891 7.56973H11.2688V6.04014H15.8891C16.055 5.38511 16.4298 4.80451 16.955 4.38931ZM17.9555 8.07674C18.2029 8.24482 18.4938 8.33453 18.7913 8.33453C19.1902 8.33412 19.5727 8.17284 19.8548 7.88607C20.1368 7.59931 20.2955 7.21049 20.2959 6.80494C20.2959 6.50241 20.2076 6.20668 20.0423 5.95514C19.877 5.70361 19.642 5.50756 19.3671 5.39178C19.0922 5.27601 18.7897 5.24572 18.4978 5.30474C18.206 5.36376 17.9379 5.50944 17.7275 5.72336C17.5171 5.93727 17.3738 6.20982 17.3157 6.50653C17.2577 6.80324 17.2875 7.11079 17.4014 7.39029C17.5152 7.66978 17.7081 7.90867 17.9555 8.07674ZM3.74621 15.2177V16.7473H7.19606L2.2417 21.7842L3.30539 22.8656L8.25975 17.8287V21.336H9.76427V15.2177H3.74621ZM15.7823 18.2769H12.7733V19.8064H15.7823V22.1008H21.8004V15.9825H15.7823V18.2769ZM17.2868 20.5712V17.5121H20.2959V20.5712H17.2868ZM8.02885 9.67292C7.62863 9.31407 7.30809 8.87275 7.08853 8.37827C6.86897 7.88378 6.75542 7.34747 6.75542 6.80494C6.75542 6.26241 6.86897 5.72609 7.08853 5.23161C7.30809 4.73713 7.62863 4.29581 8.02885 3.93696L9.02484 5.08415C8.78458 5.29946 8.59215 5.5643 8.46034 5.86106C8.32853 6.15782 8.26035 6.47971 8.26035 6.80532C8.26035 7.13094 8.32853 7.45282 8.46034 7.74958C8.59215 8.04634 8.78458 8.31118 9.02484 8.52649L8.02885 9.67292Z\" fill=\"white\"/>\n" +
+                    "</svg>", "utf8").toString("base64");
+            }
+        },
+        props: {
+            data: {
+                type: Object,
+                required: true,
+            },
+            sourcePosition: {
+                type: String,
+                required: true
+            },
+            targetPosition: {
+                type: String,
+                required: true
+            },
+            id: {
+                type: String,
+                required: true
+            }
+        },
+    }
+</script>
+
+<style scoped lang="scss">
+
+    .dependency-node-wrapper {
+        background-color: var(--bs-white);
+        color: var(--bs-black);
+
+        html.dark & {
+            background-color: var(--card-bg);
+            color: var(--bs-white);
+        }
+
+        width: 184px;
+        height: 44px;
+        margin: 0;
+        padding: 8px 18px 8px 6px;
+        display: flex;
+        align-items: center;
+        box-shadow: 0 12px 12px 0 rgba(130, 103, 158, 0.10);
+    }
+
+    .dependency-text {
+        margin-left: 0.5rem;
+    }
+
+    .dependency-flow-text {
+        font-size: 0.85rem;
+        font-weight: 700;
+    }
+
+    .dependency-namespace-text {
+        font-size: 0.625rem;
+        font-weight: 400;
+        color: #564A75;
+
+        html.dark & {
+            color: #E3DBFF;
+        }
+    }
+
+</style>

package/src/components/nodes/DotNode.vue

@@ -0,0 +1,46 @@
+<template>
+    <Handle type="source" class="custom-handle" :position="sourcePosition" />
+    <div class="dot">
+        <Circle class="circle" alt="circle" />
+    </div>
+    <Handle type="target" class="custom-handle" :position="targetPosition" />
+</template>
+
+<script>
+    import {Handle} from "@vue-flow/core";
+    import Circle from "vue-material-design-icons/Circle.vue"
+
+    export default {
+        name: "Dot",
+        components: {Handle, Circle},
+        inheritAttrs: false,
+        props: {
+            data: {
+                type: Object,
+                required: true,
+            },
+            sourcePosition: {
+                type: String,
+                required: true
+            },
+            targetPosition: {
+                type: String,
+                required: true
+            },
+            label: {
+                type: String
+            }
+        },
+    }
+</script>
+<style scoped>
+    .custom-handle {
+        visibility: hidden
+    }
+    .dot {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        font-size: 5px;
+    }
+</style>

package/src/components/nodes/EdgeNode.vue

@@ -0,0 +1,67 @@
+<script>
+    import {computed} from "vue";
+    import {EdgeLabelRenderer, getSmoothStepPath} from "@vue-flow/core";
+    import AddTaskButton from "../buttons/AddTaskButton.vue";
+    import {EVENTS} from "../../utils/constants.js";
+
+    export default {
+        props: {
+            id: String,
+            data: Object,
+            sourceX: Number,
+            sourceY: Number,
+            targetX: Number,
+            targetY: Number,
+            markerEnd: String,
+            sourcePosition: String,
+            targetPosition: String,
+        },
+        components: {
+            AddTaskButton,
+            EdgeLabelRenderer
+        },
+        computed: {
+            EVENTS() {
+                return EVENTS
+            },
+        },
+        setup(props) {
+            const path = computed(() => getSmoothStepPath(props));
+
+            return {
+                path,
+            };
+        },
+        inheritAttrs: false,
+    };
+</script>
+
+<template>
+    <path
+        :id="id"
+        :class="'vue-flow__edge-path stroke-'+data.color"
+        :style="data.haveDashArray ?
+            {
+                strokeDasharray: '2',
+            }:
+            {}"
+        :d="path[0]"
+        :marker-end="markerEnd"
+    />
+
+    <EdgeLabelRenderer style="z-index: 10">
+        <div
+            :style="{
+                pointerEvents: 'all',
+                position: 'absolute',
+                transform: `translate(-50%, -50%) translate(${path[1]}px,${path[2]}px)`,
+            }"
+        >
+            <AddTaskButton
+                v-if="!data.disabled && data.haveAdd != undefined"
+                :add-task="true"
+                @click="$emit(EVENTS.ADD_TASK, data.haveAdd)"
+            />
+        </div>
+    </EdgeLabelRenderer>
+</template>

package/src/components/nodes/TaskNode.vue

@@ -0,0 +1,168 @@
+<template>
+    <Handle type="source" :position="sourcePosition" />
+    <basic-node
+        :id="id"
+        :data="data"
+        :state="state"
+        @show-description="forwardEvent(EVENTS.SHOW_DESCRIPTION, $event)"
+        @expand="forwardEvent(EVENTS.EXPAND, id)"
+        @open-link="forwardEvent(EVENTS.OPEN_LINK, $event)"
+        @mouseover="forwardEvent(EVENTS.MOUSE_OVER, $event)"
+        @mouseleave="forwardEvent(EVENTS.MOUSE_LEAVE)"
+    >
+        <template #content>
+            <execution-informations v-if="data.execution" :color="color" />
+        </template>
+        <template #badge-button-before>
+            <span
+                v-if="execution"
+                class="rounded-button"
+                :class="[`bg-${color}`]"
+                @click="$emit(EVENTS.SHOW_LOGS, {id, taskRuns})"
+            >
+                <TextBoxSearch class="button-icon" alt="Show logs" />
+            </span>
+            <span
+                v-if="!data.execution && !data.isReadOnly && data.isFlowable"
+                class="rounded-button"
+                :class="[`bg-${color}`]"
+                @click="$emit(EVENTS.ADD_ERROR, {task: data.node.task})"
+            >
+                <InformationOutline class="button-icon" alt="Edit task" />
+            </span>
+            <span
+                v-if="!data.execution && !data.isReadOnly"
+                class="rounded-button"
+                :class="[`bg-${color}`]"
+                @click="$emit(EVENTS.EDIT, {task: data.node.task, section: SECTIONS.TASKS})"
+            >
+                <Pencil class="button-icon" alt="Edit task" />
+            </span>
+            <span
+                v-if="!data.execution && !data.isReadOnly"
+                class="rounded-button"
+                :class="[`bg-${color}`]"
+                @click="$emit(EVENTS.DELETE, {id, section: SECTIONS.TASKS})"
+            >
+                <Delete class="button-icon" alt="Delete task" />
+            </span>
+        </template>
+    </basic-node>
+    <Handle type="target" :position="targetPosition" />
+</template>
+
+<script>
+    import BasicNode from "./BasicNode.vue";
+    import {Handle} from "@vue-flow/core";
+    import State from "../../utils/state.js";
+    import {EVENTS, SECTIONS} from "../../utils/constants.js";
+    import ExecutionInformations from "../misc/ExecutionInformations.vue";
+    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"
+
+    export default {
+        name: "Task",
+        inheritAttrs: false,
+        computed: {
+            SECTIONS() {
+                return SECTIONS
+            },
+            EVENTS() {
+                return EVENTS
+            },
+            color() {
+                return this.data.color ?? "primary"
+            },
+            execution() {
+                return this.data.execution
+            },
+            taskRunList() {
+                return this.execution && this.execution.taskRunList ? this.execution.taskRunList : []
+            },
+            taskRuns() {
+                return this.taskRunList.filter(t => t.taskId === this.data.node.task.id)
+            },
+            state() {
+                if (!this.taskRuns) {
+                    return null;
+                }
+
+                if (this.taskRuns.length === 1) {
+                    return this.taskRuns[0].state.current
+                }
+
+                const allStates = this.taskRuns.map(t => t.state.current);
+
+                const SORT_STATUS = [
+                    State.FAILED,
+                    State.KILLED,
+                    State.WARNING,
+                    State.KILLING,
+                    State.RUNNING,
+                    State.SUCCESS,
+                    State.RESTARTED,
+                    State.CREATED,
+                ];
+
+                // sorting based on SORT_STATUS array
+                const result = allStates
+                    .map((item) => {
+                        const n = SORT_STATUS.indexOf(item[1]);
+                        SORT_STATUS[n] = undefined;
+                        return [n, item]
+                    })
+                    .sort()
+                    .map((j) => j[1])
+                return result[0];
+            },
+        },
+        emits: [
+            EVENTS.EXPAND,
+            EVENTS.OPEN_LINK,
+            EVENTS.SHOW_LOGS,
+            EVENTS.MOUSE_OVER,
+            EVENTS.MOUSE_LEAVE,
+            EVENTS.ADD_ERROR,
+            EVENTS.EDIT,
+            EVENTS.DELETE,
+            EVENTS.ADD_TASK
+        ],
+        components: {
+            Pencil,
+            Delete,
+            ExecutionInformations,
+            Handle,
+            BasicNode,
+            TextBoxSearch,
+            InformationOutline
+        },
+        props: {
+            data: {
+                type: Object,
+                required: true,
+            },
+            sourcePosition: {
+                type: String,
+                required: true
+            },
+            targetPosition: {
+                type: String,
+                required: true
+            },
+            id: {
+                type: String,
+                required: true
+            }
+        },
+        methods: {
+            forwardEvent(event, payload) {
+                this.$emit(event, payload)
+            },
+        }
+    }
+</script>
+<style scoped lang="scss">
+    @import "../../scss/custom";
+</style>

package/src/components/nodes/TriggerNode.vue

@@ -0,0 +1,101 @@
+<template>
+    <Handle type="source" :position="sourcePosition" />
+    <basic-node
+        :id="id"
+        :data="data"
+        :color="color"
+        @showDescription="forwardEvent(EVENTS.SHOW_DESCRIPTION, id)"
+        @expand="forwardEvent(EVENTS.EXPAND, id)"
+    >
+        <template #badge-button-before>
+            <span
+                v-if="!data.execution && !data.isReadOnly"
+                class="rounded-button"
+                :class="[`bg-${color}`]"
+                @click="$emit(EVENTS.EDIT, {task: data.node.trigger, section: SECTIONS.TRIGGERS})"
+            >
+                <Pencil class="button-icon" alt="Edit task" />
+            </span>
+            <span
+                v-if="!data.execution && !data.isReadOnly"
+                class="rounded-button"
+                :class="[`bg-${color}`]"
+                @click="$emit(EVENTS.DELETE, {id, section: SECTIONS.TRIGGERS})"
+            >
+                <Delete class="button-icon" alt="Delete task" />
+            </span>
+        </template>
+    </basic-node>
+    <Handle type="target" :position="targetPosition" />
+</template>
+
+<script>
+    import BasicNode from "./BasicNode.vue";
+    import {Handle} from "@vue-flow/core";
+    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";
+
+    export default {
+        name: "Task",
+        inheritAttrs: false,
+        computed: {
+            SECTIONS() {
+                return SECTIONS
+            },
+            EVENTS() {
+                return EVENTS
+            },
+            color() {
+                return this.data.color ?? "primary"
+            }
+        },
+        emits: [
+            EVENTS.DELETE,
+            EVENTS.EDIT
+        ],
+        components: {
+            Delete, Pencil,
+            Handle,
+            BasicNode,
+        },
+        props: {
+            data: {
+                type: Object,
+                required: true,
+            },
+            sourcePosition: {
+                type: String,
+                required: true
+            },
+            targetPosition: {
+                type: String,
+                required: true
+            },
+            id: {
+                type: String,
+                required: true
+            }
+        },
+        methods: {
+            forwardEvent(event, payload) {
+                this.$emit(event, payload)
+            }
+        }
+    }
+</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>

package/src/index.js

@@ -0,0 +1,8 @@
+import "./scss/index.scss"
+
+// import GraphUtils from "./utils/GraphUtils";
+// import YamlUtils from "./utils/YamlUtils";
+// import Utils from "./utils/Utils";
+
+export * from "./components/index.js";
+// export { GraphUtils, YamlUtils, Utils };