@kestra-io/ui-libs 0.0.1 → 0.0.3

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,127 @@
+<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,47 @@
+<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,166 @@
+<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>
+

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 @@
+export * from "./components/index.js";

package/src/scss/app.scss

@@ -0,0 +1,39 @@
+@import "variables";
+
+.material-design-icon > .material-design-icon__svg {
+  bottom: 0;
+}
+
+.vue-flow__node-cluster {
+  pointer-events: none !important;
+}
+
+marker[id*='id=marker-custom&type=arrowclosed'] polyline {
+  stroke: $gray-700;
+  fill: $gray-700;
+}
+
+.vue-flow__handle {
+  opacity: 0 !important;
+}
+
+
+.top-button-div {
+  width: 100%;
+  justify-content: end;
+  transform: translate(-5%, -50%) !important;
+}
+
+.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;
+}