@kestra-io/ui-libs 0.0.1 → 0.0.3

package/README.md

@@ -10,7 +10,7 @@
 
 Kestra UI library implemented in both the website and the application UI.
 
-Install with npm: `npm install @kestra-io/ui-library`
+Install with npm: `npm install @kestra/ui-library`
 
 <p align="center">
     <a href="https://kestra.io/"><b>Website</b></a> •

package/package.json

@@ -1,53 +1,39 @@
 {
   "name": "@kestra-io/ui-libs",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "type": "module",
   "files": [
-    "dist",
+    "src",
     "package.json"
   ],
-  "main": "./dist/kestra-ui.umd.cjs",
-  "module": "./dist/kestra-ui.js",
-  "exports": {
-    ".": {
-      "import": "./dist/kestra-ui.js",
-      "require": "./dist/kestra-ui.umd.cjs"
-    },
-    "./dist/*.css": {
-      "import": "./dist/*.css",
-      "require": "./dist/*.css"
-    },
-    "./dist/*.scss": {
-      "import": "./dist/*.css",
-      "require": "./dist/*.css"
-    }
-  },
+  "main": "./src/index.js",
+  "module": "./src/index.js",
   "scripts": {
-    "prepublishOnly": "vite build",
     "dev": "vite",
-    "build": "vite build",
     "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",
     "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"
   },
   "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/components/buttons/AddTaskButton.vue

@@ -0,0 +1,33 @@
+<script>
+    import Plus from "vue-material-design-icons/Plus.vue";
+
+    export default {
+        name: "AddTaskButton",
+        components: {Plus},
+        props: {
+            addTask: {
+                type: Boolean,
+                default: false
+            },
+        }
+    }
+</script>
+
+<template>
+    <div class="add-task-div rounded d-flex justify-content-center align-items-center">
+        <Plus v-if="addTask" alt="add task icon" />
+    </div>
+</template>
+
+<style scoped lang="scss">
+    .add-task-div {
+        margin: 0.2rem;
+        width: 25px;
+        height: 25px;
+        border: 0.4px solid var(--bs-border-color);
+        background-color: var(--bs-white);
+        html.dark & {
+            background-color: var(--card-bg);
+        }
+    }
+</style>

package/src/components/index.js

@@ -0,0 +1,21 @@
+// nodes
+import ClusterNode from "./nodes/ClusterNode.vue";
+import DotNode from "./nodes/DotNode.vue";
+import EdgeNode from "./nodes/EdgeNode.vue";
+import TaskNode from "./nodes/TaskNode.vue";
+import TriggerNode from "./nodes/TriggerNode.vue"
+import BasicNode from "./nodes/BasicNode.vue";
+import CollapsedClusterNode from "./nodes/CollapsedClusterNode.vue";
+import DependenciesNode from "./nodes/DependenciesNode.vue"
+
+// misc
+import ExecutionInformations from "./misc/ExecutionInformations.vue";
+import State from "./misc/State.vue";
+import TaskIcon from "./misc/TaskIcon.vue";
+
+// buttons
+import AddTaskButton from "./buttons/AddTaskButton.vue";
+
+export {ClusterNode, DotNode, EdgeNode, TaskNode, TriggerNode, BasicNode, CollapsedClusterNode, DependenciesNode};
+export {ExecutionInformations, State, TaskIcon};
+export {AddTaskButton};

package/src/components/misc/Duration.vue

@@ -0,0 +1,110 @@
+<template>
+    <span>
+        <el-tooltip v-if="histories" popper-class="duration-tt" :persistent="false" transition="" :hide-after="0">
+            <template #content>
+                <span v-for="(history, index) in histories" :key="'tt-' + index">
+                    <span class="square" :class="squareClass(history.state)" />
+                    <strong>{{ history.state }}:</strong> {{ $filters.date(history.date, 'iso') }} <br>
+                </span>
+            </template>
+
+            <span>{{ duration }}</span>
+        </el-tooltip>
+    </span>
+</template>
+
+<script>
+    import State from "../../utils/state";
+    import Utils from "../../utils/Utils";
+
+    const ts = date => new Date(date).getTime();
+
+    export default {
+        props: {
+            histories: {
+                type: Array,
+                default: undefined
+            }
+        },
+        watch: {
+            histories(newValue, oldValue) {
+                if (oldValue[0].date !== newValue[0].date) {
+                    this.paint()
+                }
+            },
+        },
+        data () {
+            return {
+                duration: "",
+                refreshHandler: undefined
+            }
+        },
+        mounted() {
+            this.paint()
+        },
+        computed: {
+            start() {
+                return this.histories && this.histories.length && ts(this.histories[0].date);
+            },
+
+            lastStep() {
+                return this.histories[this.histories.length - 1]
+            }
+        },
+        methods: {
+            paint() {
+                if (!this.refreshHandler) {
+                    this.refreshHandler = setInterval(() => {
+                        this.computeDuration()
+                        if (this.histories && !State.isRunning(this.lastStep.state)) {
+                            this.cancel();
+                        }
+                    }, 100);
+                }
+            },
+            cancel() {
+                if (this.refreshHandler) {
+                    clearInterval(this.refreshHandler);
+                    this.refreshHandler = undefined
+                }
+            },
+            delta() {
+                return this.stop() - this.start;
+            },
+            stop() {
+                if (!this.histories || State.isRunning(this.lastStep.state)) {
+                    return +new Date();
+                }
+                return ts(this.lastStep.date)
+            },
+            computeDuration() {
+                this.duration = Utils.humanDuration(this.delta() / 1000)
+            },
+            squareClass(state) {
+                return [
+                    "bg-" + State.colorClass()[state]
+                ]
+            }
+        },
+        beforeUnmount() {
+            this.cancel();
+        }
+    }
+</script>
+
+<style lang="scss">
+.duration-tt {
+    .tooltip-inner {
+        text-align: left;
+        white-space: nowrap;
+        max-width: none;
+    }
+
+    .square {
+        display: inline-block;
+        width: 10px;
+        height: 10px;
+        margin-right: 5px;
+    }
+}
+</style>

package/src/components/misc/ExecutionInformations.vue

@@ -0,0 +1,119 @@
+<template>
+    <div class="btn-group content rounded-1 content-children">
+        <span v-if="taskRuns.length > 0">{{ taskRuns.length }} task runs</span>
+        <span><duration :histories="histories" /></span>
+    </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";
+    import State from "../../utils/state.js";
+
+    export default {
+        name: "ExecutionInformations",
+        computed: {
+            EVENTS() {
+                return EVENTS
+            },
+            taskRunList() {
+                return this.execution && this.execution.taskRunList ? this.execution.taskRunList : []
+            },
+            taskRuns() {
+                return this.taskRunList.filter(t => t.taskId === this.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];
+            },
+            histories() {
+                if (!this.taskRuns) {
+                    return undefined;
+                }
+
+                const max = Math.max(...this.taskRuns
+                    .filter(value => value.state.histories && value.state.histories.length > 0)
+                    .map(value => new Date(value.state.histories[value.state.histories.length - 1].date).getTime()));
+
+                const duration = Math.max(...this.taskRuns
+                    .map((taskRun) => moment.duration(taskRun.state.duration).asMilliseconds() / 1000, 0));
+
+                return [
+                    {date: moment(max).subtract(duration, "second"), state: "CREATED"},
+                    {date: moment(max), state: this.state}
+                ]
+            },
+        },
+        components: {Duration},
+        props: {
+            color: {
+                type: String,
+                default: "primary"
+            },
+            execution: {
+                type: Object,
+                default: null
+            }
+        }
+
+    }
+</script>
+<style scoped>
+    .content {
+        display: flex;
+
+        *:not(:first-child)::before {
+            content: "";
+            position: absolute;
+            left: 0;
+            top: 50%;
+            height: 50%;
+            border-left: 1px solid var(--bs-gray-100);
+            transform: translateY(-50%);
+            z-index: 500;
+        }
+    }
+
+    .content-children {
+        flex-grow: 1;
+        display: flex;
+        height: 1.25rem;
+        gap: 0.5rem;
+        align-self: stretch;
+        pointer-events: none;
+        cursor: default;
+        font-size: 0.75rem;
+    }
+</style>

package/src/components/misc/State.vue

@@ -0,0 +1,57 @@
+<script>
+    import AlertOctagonOutline from "vue-material-design-icons/AlertOctagonOutline.vue";
+    import Check from "vue-material-design-icons/Check.vue";
+
+    export default {
+        name: "State",
+        props: {
+            color: {
+                type: String,
+                default: "primary"
+            }
+        },
+        computed: {
+            stateIcon() {
+                switch (this.color) {
+                case "primary":
+                    return AlertOctagonOutline
+                case "danger":
+                    return AlertOctagonOutline
+                case "success":
+                    return Check
+                case "warning":
+                    return AlertOctagonOutline
+                default:
+                    return AlertOctagonOutline
+                }
+            },
+            stateText() {
+                switch (this.color) {
+                case "primary":
+                    return "Running"
+                case "danger":
+                    return "Failed"
+                case "success":
+                    return "Success"
+                case "warning":
+                    return "Warning"
+                default:
+                    return "Error"
+                }
+            },
+        },
+    }
+</script>
+
+<template>
+    <div :class="[`text-${color}`]">
+        <component class="icon" :is="stateIcon" fill-color="#ff0000" />
+        <span>{{ stateText }}</span>
+    </div>
+</template>
+
+<style scoped>
+    .icon {
+        margin-right: 0.3rem;
+    }
+</style>

package/src/components/misc/TaskIcon.vue

@@ -0,0 +1,50 @@
+<template>
+    <div
+        :class="[color ? `bg-${color}`: '']"
+        class="div-icon rounded d-flex justify-content-center"
+    >
+        <img :src="backgroundImage" alt="task icon">
+    </div>
+</template>
+<script>
+    import {Buffer} from "buffer";
+
+    export default {
+        name: "TaskIcon",
+        props: {
+            icon: {
+                type: Object,
+                default: undefined
+            },
+            color: {
+                type: String,
+                default: undefined
+            }
+        },
+        computed: {
+            backgroundImage() {
+                return `data:image/svg+xml;base64,${this.imageBase64}`
+            },
+            imageBase64() {
+                const icon = this.icon ? this.icon.icon : undefined;
+                return icon ? icon : Buffer.from("<svg xmlns=\"http://www.w3.org/2000/svg\" " +
+                    "xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-hidden=\"true\" " +
+                    "focusable=\"false\" width=\"0.75em\" height=\"1em\" style=\"-ms-transform: " +
+                    "rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);\" " +
+                    "preserveAspectRatio=\"xMidYMid meet\" viewBox=\"0 0 384 512\">" +
+                    "<path d=\"M288 32H0v448h384V128l-96-96zm64 416H32V64h224l96 96v288z\" fill=\"#0D1523FF\"/>" +
+                    "</svg>", "utf8").toString("base64");
+            },
+        }
+    }
+</script>
+<style scoped>
+    .div-icon {
+        padding: 0.3rem;
+        margin: 0.2rem;
+        width: 25px;
+        height: 25px;
+        background-color: var(--bs-white);
+        border: 0.4px solid var(--bs-border-color);
+    }
+</style>

package/src/components/nodes/BasicNode.vue

@@ -0,0 +1,224 @@
+<template>
+    <div
+        :class="[`border-${!expandable ? data.color : 'blue'}`]"
+        class="node-wrapper rounded-3 border"
+        @mouseover="mouseover"
+        @mouseleave="mouseleave"
+    >
+        <div v-if="state" class="status-div" :class="[`bg-${stateColor}`]" />
+        <div>
+            <TaskIcon :icon="data.icon" :class="taskIconBg" />
+        </div>
+        <div class="node-content">
+            <div class="d-flex justify-content-around">
+                <div class="text-truncate task-title">
+                    <span> {{ id }} </span>
+                </div>
+                <InformationOutline
+                    v-if="description"
+                    @click="$emit(EVENTS.SHOW_DESCRIPTION, {id: id, description:description})"
+                    class="description-button mx-2"
+                />
+            </div>
+            <slot name="content" />
+        </div>
+        <div class="position-absolute top-0 text-white d-flex top-button-div">
+            <slot name="badge-button-before" />
+            <span
+                v-if="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
+                v-if="expandable"
+                class="rounded-button"
+                :class="[`bg-${data.color}`]"
+                @click="$emit(EVENTS.EXPAND)"
+            >
+                <ArrowExpand class="button-icon" alt="Expand task" />
+            </span>
+            <slot name="badge-button-after" />
+        </div>
+    </div>
+</template>
+
+<script>
+    import TaskIcon from "../misc/TaskIcon.vue";
+    import InformationOutline from "vue-material-design-icons/InformationOutline.vue";
+    import {EVENTS} from "../../utils/constants.js";
+    import ArrowExpand from "vue-material-design-icons/ArrowExpand.vue";
+    import OpenInNew from "vue-material-design-icons/OpenInNew.vue";
+
+    export default {
+        components: {
+            ArrowExpand,
+            TaskIcon,
+            InformationOutline,
+            OpenInNew
+        },
+        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
+        ],
+        inheritAttrs: false,
+        props: {
+            id: {
+                type: String,
+                default: undefined
+            },
+            type: {
+                type: String,
+                default: undefined
+            },
+            disabled: {
+                type: Boolean,
+                default: undefined
+            },
+            state: {
+                type: String,
+                default: undefined
+            },
+            data: {
+                type: Object,
+                required: true
+            },
+            style: {
+                type: Object,
+                required: false,
+                default: undefined
+            }
+        },
+        methods: {
+            mouseover() {
+                this.$emit(EVENTS.MOUSE_OVER, this.data.node);
+            },
+            mouseleave() {
+                this.$emit(EVENTS.MOUSE_LEAVE);
+            },
+        },
+        data() {
+            return {
+                filter: undefined,
+                isOpen: false,
+            };
+        },
+        computed: {
+            EVENTS() {
+                return EVENTS
+            },
+            expandable() {
+                return this.data?.expandable || false
+            },
+            link() {
+                return this.data?.link || false
+            },
+            description() {
+                const node = this.data.node.task ?? this.data.node.trigger ?? null
+                if (node) {
+                    return node.description ?? null
+                }
+                return null
+            },
+            taskIconBg() {
+                return !["default", "danger"].includes(this.data.color) ? this.data.color : "";
+            },
+            stateColor() {
+                switch (this.state) {
+                case "RUNNING":
+                    return "primary"
+                case "SUCCESS":
+                    return "success"
+                case "WARNING":
+                    return "warning"
+                case "FAILED":
+                    return "danger"
+                default:
+                    return null;
+                }
+            }
+        },
+    }
+</script>
+
+<style lang="scss" scoped>
+    .node-wrapper {
+        background-color: var(--bs-white);
+
+        html.dark & {
+            background-color: var(--card-bg);
+        }
+
+        width: 184px;
+        height: 44px;
+        margin: 0;
+        padding: 8px;
+        display: flex;
+        z-index: 150000;
+        align-items: center;
+        box-shadow: 0 12px 12px 0 rgba(130, 103, 158, 0.10);
+    }
+
+    .node-content {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        margin-left: 0.7rem;
+    }
+
+    .description-button {
+        color: var(--bs-gray-600);
+        cursor: pointer;
+        width: 25px;
+    }
+
+    .material-design-icon.icon-rounded {
+        border-radius: 1rem;
+        padding: 1px;
+    }
+
+    .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;
+    }
+
+    .task-title {
+        font-size: 0.75rem;
+        font-weight: 700;
+        line-height: 1.5rem;
+        color: var(--bs-black);
+
+        html.dark & {
+            color: var(--bs-white);
+        }
+
+        width: 6rem;
+    }
+
+
+    .status-div {
+        width: 8px;
+        height: 100%;
+        position: absolute;
+        left: -0.04438rem;
+        border-radius: 0.5rem 0 0 0.5rem;
+    }
+</style>