@kestra-io/ui-libs 0.0.228 → 0.0.230

package/src/components/nodes/TaskNode.vue

@@ -7,26 +7,52 @@
         :class="classes"
         :icons="icons"
         :icon-component="iconComponent"
-        @show-description="forwardEvent(EVENTS.SHOW_DESCRIPTION, $event)"
-        @expand="forwardEvent(EVENTS.EXPAND, expandData)"
-        @open-link="forwardEvent(EVENTS.OPEN_LINK, $event)"
-        @mouseover="forwardEvent(EVENTS.MOUSE_OVER, $event)"
-        @mouseleave="forwardEvent(EVENTS.MOUSE_LEAVE)"
+        @show-description="emit(EVENTS.SHOW_DESCRIPTION, $event)"
+        @expand="emit(EVENTS.EXPAND, expandData)"
+        @open-link="emit(EVENTS.OPEN_LINK, $event)"
+        @mouseover="emit(EVENTS.MOUSE_OVER, $event)"
+        @mouseleave="emit(EVENTS.MOUSE_LEAVE)"
     >
         <template #content>
-            <execution-informations v-if="taskExecution" :execution="taskExecution" :task="data.node.task" :color="color" :uid="data.node.uid" />
-            <button v-if="playgroundEnabled && data.node.task" type="button" class="playground-button" @click="$emit(EVENTS.RUN_TASK, {task: data.node.task})">
-                <tooltip style="display: flex;" :title="$t('run task in playground')">
-                    <PlayIcon class="button-play-icon" alt="Play task" />
-                </tooltip>
-            </button>
+            <execution-informations 
+                v-if="taskExecution"
+                :execution="taskExecution"
+                :task="data.node.task"
+                :color="color"
+                :uid="data.node.uid"
+                :state="state"
+            />
+
+            <template v-if="data.node.task">
+                <button v-if="playgroundEnabled && playgroundReadyToStart" type="button" class="playground-button" @click="emit(EVENTS.RUN_TASK, {task: data.node.task})">
+                    <tooltip style="display: flex;" :title="$t('run task in playground')">
+                        <PlayIcon class="button-play-icon" :alt="$t('run task in playground')" />
+                    </tooltip>
+                </button>
+                <div
+                    v-else
+                    class="playground-button" 
+                    :style="{
+                        color: `var(--ks-content-${state?.toLowerCase()})`, 
+                        backgroundColor: `var(--ks-background-${state?.toLowerCase()})`
+                    }"
+                >
+                    <tooltip style="display: flex;" :title="$t(iconAlt)">
+                        <RotatingDots v-if="state === State.RUNNING" :alt="$t(iconAlt)" />
+                        <CheckIcon v-else-if="state === State.SUCCESS" :alt="$t(iconAlt)" />
+                        <AlertIcon v-else-if="state === State.WARNING" :alt="$t(iconAlt)" />
+                        <SkipForwardIcon v-else-if="state === State.SKIPPED" :alt="$t(iconAlt)" />
+                        <AlertCircleIcon v-else-if="state === State.FAILED" :alt="$t(iconAlt)" />
+                    </tooltip>
+                </div>
+            </template>
         </template>
         <template #badge-button-before>
             <span
                 v-if="data.node.task && data.node.task.runIf"
                 class="circle-button"
                 :class="[`bg-warning`]"
-                @click="$emit(EVENTS.SHOW_CONDITION, {id: taskId, task: data.node.task, section: SECTIONS.TASKS})"
+                @click="emit(EVENTS.SHOW_CONDITION, {id: taskId, task: data.node.task, section: SECTIONS.TASKS})"
             >
                 <tooltip :title="$t('show task condition')">
                     <SendLock class="button-icon" alt="Show condition" />
@@ -36,7 +62,7 @@
                 v-if="taskExecution"
                 class="circle-button"
                 :class="[`bg-${color}`]"
-                @click="$emit(EVENTS.SHOW_LOGS, {id: taskId, execution: taskExecution, taskRuns})"
+                @click="emit(EVENTS.SHOW_LOGS, {id: taskId, execution: taskExecution, taskRuns})"
             >
                 <tooltip :title="$t('show task logs')">
                     <TextBoxSearch class="button-icon" alt="Show logs" />
@@ -46,7 +72,7 @@
                 v-if="!taskExecution && !data.isReadOnly && data.isFlowable"
                 class="circle-button"
                 :class="[`bg-${color}`]"
-                @click="$emit(EVENTS.ADD_ERROR, {task: data.node.task})"
+                @click="emit(EVENTS.ADD_ERROR, {task: data.node.task})"
             >
                 <tooltip :title="$t('add error handler')">
                     <AlertOutline class="button-icon" alt="Add error handler" />
@@ -56,7 +82,7 @@
                 v-if="!taskExecution && !data.isReadOnly"
                 class="circle-button"
                 :class="[`bg-${color}`]"
-                @click="$emit(EVENTS.EDIT, {task: data.node.task, section: SECTIONS.TASKS})"
+                @click="emit(EVENTS.EDIT, {task: data.node.task, section: SECTIONS.TASKS})"
             >
                 <tooltip :title="$t('edit')">
                     <Pencil class="button-icon" alt="Edit task" />
@@ -66,7 +92,7 @@
                 v-if="!taskExecution && !data.isReadOnly"
                 class="circle-button"
                 :class="[`bg-${color}`]"
-                @click="$emit(EVENTS.DELETE, {id: taskId, section: SECTIONS.TASKS})"
+                @click="emit(EVENTS.DELETE, {id: taskId, section: SECTIONS.TASKS})"
             >
                 <tooltip :title="$t('delete')">
                     <Delete class="button-icon" alt="Delete task" />
@@ -76,190 +102,235 @@
     </basic-node>
     <Handle type="target" :position="targetPosition" />
 </template>
-<script setup>
-    import BasicNode from "./BasicNode.vue";
-</script>
-<script>
-    import {Handle} from "@vue-flow/core";
+
+<script setup lang="ts">
+    import {computed, inject} from "vue";
+    import {Handle, Position} from "@vue-flow/core";
     import State from "../../utils/state";
     import {EVENTS, SECTIONS} from "../../utils/constants";
     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 AlertOutline from "vue-material-design-icons/AlertOutline.vue"
-    import PlayIcon from "vue-material-design-icons/Play.vue";
-    import SendLock from "vue-material-design-icons/SendLock.vue"
-    import Tooltip from "../misc/Tooltip.vue"
+    import Tooltip from "../misc/Tooltip.vue";
     import Utils from "../../utils/Utils";
+    import BasicNode from "./BasicNode.vue";
     import {
-        EXECUTION_INJECTION_KEY, 
+        EXECUTION_INJECTION_KEY,
         SUBFLOWS_EXECUTIONS_INJECTION_KEY,
-        PLAYGROUND_ENABLED_INJECTION_KEY
     } from "../topology/injectionKeys";
 
-    export default {
-        name: "Task",
-        components: {
-            Pencil,
-            Delete,
-            ExecutionInformations,
-            Handle,
-            TextBoxSearch,
-            AlertOutline,
-            Tooltip,
-            SendLock
-        },
-        inheritAttrs: false,
-        inject: {
-            execution: { 
-                from: EXECUTION_INJECTION_KEY,
-            },
-            subflowsExecutions: {
-                from: SUBFLOWS_EXECUTIONS_INJECTION_KEY,
-            },
-            playgroundEnabled: {
-                from: PLAYGROUND_ENABLED_INJECTION_KEY,
-            }
-        },
-        computed: {
-            SECTIONS() {
-                return SECTIONS
-            },
-            EVENTS() {
-                return EVENTS
-            },
-            color() {
-                return this.data.color ?? "primary"
-            },
-            taskId() {
-                return Utils.afterLastDot(this.id);
-            },
-            taskRunList() {
-                return this.taskExecution && this.taskExecution.taskRunList ? this.taskExecution.taskRunList : []
-            },
-            taskExecution() {
-                const executionId = this.data.executionId;
-                if(executionId) {
-                    return executionId === this.execution?.id ? this.execution
-                        : Object.values(this.subflowsExecutions).filter(execution => execution.id === this.data.executionId)?.[0];
-                }
+    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 AlertOutline from "vue-material-design-icons/AlertOutline.vue";
+    import SendLock from "vue-material-design-icons/SendLock.vue";
+    import PlayIcon from "vue-material-design-icons/Play.vue";
+    import CheckIcon from "vue-material-design-icons/Check.vue";
+    import AlertCircleIcon from "vue-material-design-icons/AlertCircle.vue";
+    import AlertIcon from "vue-material-design-icons/Alert.vue";
+    import SkipForwardIcon from "vue-material-design-icons/SkipForward.vue";
+    import RotatingDots from "../../assets/icons/RotatingDots.vue";
 
-                return undefined;
-            },
-            taskRuns() {
-                return this.taskRunList.filter(t => t.taskId === Utils.afterLastDot(this.data.node.uid))
-            },
-            state() {
-                if (!this.taskRuns) {
-                    return null;
-                }
+    // Define types
+    interface TaskType {
+        id: string;
+        type: object;
+        default: null;
+        runIf?: unknown;
+        subflowId?: {
+            namespace: string;
+            flowId: string;
+        };
+        namespace?: string;
+        flowId?: string;
+    }
 
-                if (this.taskRuns.length === 1) {
-                    return this.taskRuns[0].state.current
-                }
+    interface NodeData {
+        node: {
+            uid: string;
+            type?: string;
+            task: TaskType;
+        };
+        executionId?: string;
+        color?: string;
+        isReadOnly?: boolean;
+        isFlowable?: boolean;
+        link?: {
+            namespace: string;
+            id: string;
+            executionId?: string;
+        };
+    }
 
-                const allStates = this.taskRuns.map(t => t.state.current);
+    interface TaskRun {
+        taskId: string;
+        state: {
+            current: [string, string]; // [state, stateText]
+        };
+        outputs?: {
+            executionId?: string;
+        };
+    }
 
-                const SORT_STATUS = [
-                    State.FAILED,
-                    State.KILLED,
-                    State.WARNING,
-                    State.KILLING,
-                    State.RUNNING,
-                    State.SUCCESS,
-                    State.RESTARTED,
-                    State.CREATED,
-                ];
+    interface ExpandData {
+        id: string;
+        type: string;
+    }
 
-                // 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];
-            },
-            classes() {
-                return {
-                    "execution-no-taskrun": this.taskExecution && this.taskRuns && this.taskRuns.length === 0,
-                }
-            },
-            expandData() {
-                return {
-                    id: this.id,
-                    type: this.data.node.task.type
-                }
-            },
-            dataWithLink() {
-                if(this.data.node.type?.endsWith("SubflowGraphTask") && this.enableSubflowInteraction){
-                    const subflowIdContainer = this.data.node.task.subflowId ?? this.data.node.task;
-                    return {
-                        ...this.data,
-                        link: {
-                            namespace: subflowIdContainer.namespace,
-                            id: subflowIdContainer.flowId,
-                            executionId: this.taskExecution?.taskRunList
-                                .filter(taskRun => taskRun.taskId === this.data.node.task.id && taskRun.outputs?.executionId)
-                                ?.[0]?.outputs?.executionId
-                        }
-                    }
+    const props = withDefaults(defineProps<{
+        data: NodeData;
+        sourcePosition?: Position;
+        targetPosition?: Position;
+        id: string;
+        icons?: Record<string, unknown>;
+        iconComponent?: object;
+        enableSubflowInteraction?: boolean;
+        playgroundEnabled: boolean;
+        playgroundReadyToStart: boolean;
+    }>(), {
+        sourcePosition: Position.Right,
+        targetPosition: Position.Left,
+        enableSubflowInteraction: true,
+        icons: undefined,
+        iconComponent: undefined,
+    });
+
+    defineOptions({
+        name: "TaskNode",
+        inheritAttrs: false
+    });
+
+    // Define emits
+    const emit = defineEmits<{
+        (event: typeof EVENTS.EXPAND, data: any): void;
+        (event: typeof EVENTS.OPEN_LINK, data: any): void;
+        (event: typeof EVENTS.SHOW_LOGS, data: any): void;
+        (event: typeof EVENTS.MOUSE_OVER, data: any): void;
+        (event: typeof EVENTS.MOUSE_LEAVE): void;
+        (event: typeof EVENTS.ADD_ERROR, data: { task: any }): void;
+        (event: typeof EVENTS.EDIT, data: any) :void;
+        (event: typeof EVENTS.DELETE, data: any) :void;
+        (event: typeof EVENTS.ADD_TASK, data: any) :void;
+        (event: typeof EVENTS.SHOW_CONDITION, data: any) :void;
+        (event: typeof EVENTS.SHOW_DESCRIPTION, data: any) :void;
+        (event: typeof EVENTS.RUN_TASK, data: { task: any }) :void;
+    }>();
+
+    // Inject dependencies
+    const execution = inject(EXECUTION_INJECTION_KEY);
+    const subflowsExecutions = inject(SUBFLOWS_EXECUTIONS_INJECTION_KEY);
+
+    // Computed properties
+    const color = computed(() => props.data.color ?? "primary");
+
+    const taskId = computed(() => Utils.afterLastDot(props.id));
+
+    const taskExecution = computed(() => {
+        const executionId = props.data.executionId;
+        if (executionId) {
+            return executionId === execution?.value?.id
+                ? execution?.value
+                : Object.values(subflowsExecutions?.value || {})
+                    .find((exec: any) => exec.id === executionId);
+        }
+        return undefined;
+    });
+
+    const taskRunList = computed(() => {
+        return taskExecution.value && taskExecution.value.taskRunList 
+            ? taskExecution.value.taskRunList
+            : [];
+    });
+
+    const taskRuns = computed(() => {
+        return taskRunList.value.filter(
+            (t: TaskRun) => t.taskId === Utils.afterLastDot(props.data.node.uid)
+        );
+    });
+
+    const state = computed(() => {
+        if (!taskRuns.value?.length) {
+            return null;
+        }
+
+        if (taskRuns.value.length === 1) {
+            return taskRuns.value[0].state.current;
+        }
+
+        const allStates = taskRuns.value.map((t: TaskRun) => t.state.current);
+        
+        // Create a copy of SORT_STATUS array to avoid modifying the original
+        const SORT_STATUS = [
+            State.FAILED,
+            State.KILLED,
+            State.WARNING,
+            State.SKIPPED,
+            State.KILLING,
+            State.RUNNING,
+            State.SUCCESS,
+            State.RESTARTED,
+            State.CREATED,
+        ];
+
+        // Sort states based on priority
+        const result = allStates
+            .map((item: [string, string]) => {
+                const n = SORT_STATUS.indexOf(item[1]);
+                // Handle sorting without modifying the original array
+                return [n, item] as [number, [string, string]];
+            })
+            .sort()
+            .map((j: [number, [string, string]]) => j[1]);
+        
+        return result[0];
+    });
+
+    const classes = computed(() => ({
+        "execution-no-taskrun": 
+            Boolean(taskExecution.value && taskRuns.value && taskRuns.value.length === 0)
+    }));
+
+    const expandData = computed<ExpandData>(() => ({
+        id: props.id,
+        type: String(props.data.node.task.type)
+    }));
+
+    const dataWithLink = computed(() => {
+        if (props.data.node.type?.endsWith("SubflowGraphTask") && props.enableSubflowInteraction) {
+            const subflowIdContainer = props.data.node.task.subflowId ?? props.data.node.task;
+            return {
+                ...props.data,
+                link: {
+                    namespace: subflowIdContainer.namespace,
+                    id: subflowIdContainer.flowId,
+                    executionId: taskExecution.value?.taskRunList
+                        .filter((taskRun: TaskRun) => 
+                            taskRun.taskId === props.data.node.task.id && 
+                            taskRun.outputs?.executionId
+                        )
+                        ?.[0]?.outputs?.executionId
                 }
+            };
+        }
+        return props.data;
+    });
 
-                return this.data;
-            }
-        },
-        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,
-            EVENTS.SHOW_CONDITION
-        ],
-        props: {
-            data: {
-                type: Object,
-                required: true,
-            },
-            sourcePosition: {
-                type: String,
-                required: true
-            },
-            targetPosition: {
-                type: String,
-                required: true
-            },
-            id: {
-                type: String,
-                required: true
-            },
-            icons: {
-                type: Object,
-                default: undefined
-            },
-            iconComponent: {
-                type: Object,
-                default: undefined
-            },
-            enableSubflowInteraction: {
-                type: Boolean,
-                default: true
-            }
-        },
-        methods: {
-            forwardEvent(event, payload) {
-                this.$emit(event, payload)
-            },
+    const iconAlt = computed(() => {
+        if(state.value === State.RUNNING){
+            return "task is running";
         }
-    }
+        if(state.value === State.SUCCESS){
+            return "task was successful";
+        }
+        if(state.value === State.WARNING){
+            return "task sent a warning";
+        }
+        if(state.value === State.SKIPPED){
+            return "task was skipped";
+        }
+        if(state.value === State.FAILED){
+            return "task failed";
+        }
+        return "";
+    });
 </script>
 
 <style lang="scss" scoped>
@@ -271,13 +342,18 @@
     right: 0;
     z-index: 1;
     border: none;
-    background: transparent;
-    background-color: _color-palette.$base-blue-500;
-    color: _color-palette.$base-white; 
+    background-color: var(--ks-background-card);
     border-radius: 3px;
     height: 1rem;
     width: 1rem;
-    padding: 0;
-    margin: 6px
+    padding: .1rem;
+    margin: 6px;
+    font-size: .8rem;
+}
+
+button.playground-button,
+.dark button.playground-button {
+    color: _color-palette.$base-white; 
+    background-color: _color-palette.$base-blue-400;
 }
 </style>

package/src/components/topology/Topology.vue

@@ -28,6 +28,8 @@
                 v-bind="taskProps"
                 :icons="icons"
                 :icon-component="iconComponent"
+                :playground-enabled="playgroundEnabled"
+                :playground-ready-to-start="playgroundReadyToStart"
                 @edit="emit(EVENTS.EDIT, $event)"
                 @delete="emit(EVENTS.DELETE, $event)"
                 @run-task="emit(EVENTS.RUN_TASK, $event)"
@@ -91,6 +93,7 @@
         </Controls>
     </VueFlow>
 </template>
+
 <script lang="ts" setup>
     import {computed, nextTick, onMounted, PropType, provide, ref, watch} from "vue";
     import {useVueFlow, VueFlow, XYPosition} from "@vue-flow/core";
@@ -102,7 +105,6 @@
     import DotNode from "../nodes/DotNode.vue";
     // @ts-expect-error no types for internals necessary
     import EdgeNode from "../nodes/EdgeNode.vue";
-    // @ts-expect-error no types for internals necessary
     import TaskNode from "../nodes/TaskNode.vue";
     // @ts-expect-error no types for internals necessary
     import TriggerNode from "../nodes/TriggerNode.vue"
@@ -119,7 +121,7 @@
     import * as VueFlowUtils from "../../utils/VueFlowUtils";
     import {isParentChildrenRelation, swapBlocks} from "../../utils/FlowYamlUtils";
     import {useScreenshot} from "./export/useScreenshot";
-    import {EXECUTION_INJECTION_KEY, SUBFLOWS_EXECUTIONS_INJECTION_KEY, PLAYGROUND_ENABLED_INJECTION_KEY} from "./injectionKeys";
+    import {EXECUTION_INJECTION_KEY, SUBFLOWS_EXECUTIONS_INJECTION_KEY} from "./injectionKeys";
 
     const props = defineProps({
         id: {
@@ -186,6 +188,10 @@
         playgroundEnabled: {
             type: Boolean,
             default: false
+        },
+        playgroundReadyToStart: {
+            type: Boolean,
+            default: false
         }
     });
 
@@ -200,7 +206,6 @@
 
     provide(EXECUTION_INJECTION_KEY, computed(() => props.execution));
     provide(SUBFLOWS_EXECUTIONS_INJECTION_KEY, computed(() => props.subflowsExecutions));
-    provide(PLAYGROUND_ENABLED_INJECTION_KEY, computed(() => props.playgroundEnabled));
 
 
     const emit = defineEmits(

package/src/components/topology/injectionKeys.ts

@@ -1,5 +1,4 @@
 import type {ComputedRef, InjectionKey} from "vue"
 
 export const EXECUTION_INJECTION_KEY = Symbol("execution-injection-key") as InjectionKey<ComputedRef<any>>
-export const SUBFLOWS_EXECUTIONS_INJECTION_KEY = Symbol("subflows-executions-injection-key") as InjectionKey<ComputedRef<Record<string, any[]>>>
-export const PLAYGROUND_ENABLED_INJECTION_KEY = Symbol("playground-enabled-injection-key") as InjectionKey<ComputedRef<boolean>>
+export const SUBFLOWS_EXECUTIONS_INJECTION_KEY = Symbol("subflows-executions-injection-key") as InjectionKey<ComputedRef<Record<string, any[]>>>

package/src/index.ts

@@ -7,6 +7,7 @@ export {default as getMDCParser} from "./composables/getMDCParser";
 export * from "./utils/constants";
 export * from "./utils/url";
 export * from "./utils/plugins";
+export {default as RotatingDotsIcon} from "./assets/icons/RotatingDots.vue";
 
 export type {YamlElement} from "./utils/YamlUtilsLegacy";
 export type {Plugin} from "./utils/plugins";