feat(ui): initial work on the concurrency & sla panels

ui/src/components/code/segments/Editor.vue

@@ -67,9 +67,10 @@
 
     import Editor from "../../inputs/Editor.vue";
     import MetadataInputs from "../../flows/MetadataInputs.vue";
-    import TaskBasic from "../../flows/tasks/TaskBasic.vue";
 
     import Task from "./Task.vue";
+    import Concurrency from "./panels/Concurrency.vue";
+    import SLA from "./panels/SLA.vue";
 
     import {useRoute} from "vue-router";
     const route = useRoute();
@@ -161,7 +162,7 @@
         inputs: {
             component: shallowRef(MetadataInputs),
             value: props.metadata.inputs,
-            label: t("no_code.fields.general.inputs"),
+            label: t("no_code.fields.main.inputs"),
             inputs: props.metadata.inputs ?? [],
         },
         outputs: {
@@ -181,24 +182,14 @@
             property: t("no_code.labels.variable"),
         },
         concurrency: {
-            component: shallowRef(TaskBasic),
-            value: props.metadata.concurrency,
+            component: shallowRef(Concurrency),
+            value: props.metadata.concurrency ?? {},
             label: t("no_code.fields.general.concurrency"),
-            // TODO: Pass schema for concurrency dynamically
-            schema: {
-                type: "object",
-                properties: {
-                    behavior: {
-                        type: "string",
-                        enum: ["QUEUE", "CANCEL", "FAIL"],
-                        default: "QUEUE",
-                        markdownDescription: "Default value is : `QUEUE`",
-                    },
-                    limit: {type: "integer", exclusiveMinimum: 0},
-                },
-                required: ["limit"],
-            },
-            root: "concurrency",
+        },
+        sla: {
+            component: shallowRef(SLA),
+            value: props.metadata.sla ?? {},
+            label: t("no_code.fields.general.sla"),
         },
         pluginDefaults: {
             component: shallowRef(Editor),

ui/src/components/code/segments/panels/Concurrency.vue

@@ -0,0 +1,51 @@
+<template>
+    <el-collapse v-model="isOpen" class="collapse">
+        <el-collapse-item
+            :title="props.label"
+            name="concurrency"
+            class="mt-1 mb-3 wrapper"
+        >
+            <TaskBasic
+                :model-value="props.modelValue"
+                @update:model-value="(v) => emits('update:modelValue', v)"
+                :schema
+            />
+        </el-collapse-item>
+    </el-collapse>
+</template>
+
+<script setup lang="ts">
+    import {ref, onMounted} from "vue";
+
+    import TaskBasic from "../../../flows/tasks/TaskBasic.vue";
+
+    const emits = defineEmits(["update:modelValue"]);
+
+    const props = defineProps({
+        modelValue: {type: Object, default: undefined},
+        label: {type: String, default: undefined},
+    });
+
+    const isOpen = ref<string[]>([]);
+    onMounted(() => {
+        if (props.modelValue?.limit) isOpen.value = ["concurrency"];
+    });
+
+    const schema = {
+        type: "object",
+        properties: {
+            behavior: {
+                type: "string",
+                enum: ["QUEUE", "CANCEL", "FAIL"],
+                default: "QUEUE",
+                markdownDescription: "Default value is : `QUEUE`",
+            },
+            limit: {type: "integer", exclusiveMinimum: 0},
+        },
+        required: ["limit"],
+    };
+</script>
+
+<style scoped lang="scss">
+@import "../../styles/code.scss";
+</style>

ui/src/components/code/segments/panels/SLA.vue

@@ -0,0 +1,139 @@
+<template>
+    <el-collapse v-model="isOpen" class="collapse">
+        <el-collapse-item
+            :title="props.label"
+            name="sla"
+            class="mt-1 mb-3 wrapper"
+        >
+            <el-button @click="ss" />
+            <!-- <OneOfContent
+                :model-value="props.modelValue"
+                @update:model-value="(v) => emits('update:modelValue', v)"
+                :schema
+                :definitions
+            /> -->
+        </el-collapse-item>
+    </el-collapse>
+</template>
+
+<script setup lang="ts">
+    import {h, ref, onMounted} from "vue";
+
+    import OneOfContent from "../../../flows/tasks/OneOfContent.vue";
+
+    const emits = defineEmits(["update:modelValue"]);
+
+    const props = defineProps({
+        modelValue: {type: Object, default: undefined},
+        label: {type: String, default: undefined},
+    });
+
+    const isOpen = ref<string[]>([]);
+    onMounted(() => {
+        if (props.modelValue?.limit) isOpen.value = ["sla"];
+    });
+
+    const schema = {
+        oneOf: [
+            {
+                $ref: "#/definitions/io.kestra.core.models.flows.sla.types.MaxDurationSLA-1",
+            },
+            {
+                $ref: "#/definitions/io.kestra.core.models.flows.sla.types.ExecutionAssertionSLA-1",
+            },
+        ],
+    };
+    const definitions = {
+        "io.kestra.core.models.flows.sla.types.ExecutionAssertionSLA-1": {
+            type: "object",
+            properties: {
+                assert: {
+                    type: "string",
+                    minLength: 1,
+                },
+                behavior: {
+                    type: "string",
+                    enum: ["FAIL", "CANCEL", "NONE"],
+                },
+                id: {
+                    type: "string",
+                    minLength: 1,
+                },
+                labels: {
+                    oneOf: [
+                        {
+                            type: "array",
+                            items: {},
+                        },
+                        {
+                            type: "object",
+                        },
+                    ],
+                },
+                type: {
+                    type: "string",
+                    enum: ["MAX_DURATION", "EXECUTION_ASSERTION"],
+                },
+            },
+            required: ["assert", "behavior", "id", "type"],
+        },
+        "io.kestra.core.models.flows.sla.types.MaxDurationSLA-1": {
+            type: "object",
+            properties: {
+                behavior: {
+                    type: "string",
+                    enum: ["FAIL", "CANCEL", "NONE"],
+                },
+                duration: {
+                    type: "string",
+                    format: "duration",
+                },
+                id: {
+                    type: "string",
+                    minLength: 1,
+                },
+                labels: {
+                    oneOf: [
+                        {
+                            type: "array",
+                            items: {},
+                        },
+                        {
+                            type: "object",
+                        },
+                    ],
+                },
+                type: {
+                    type: "string",
+                    enum: ["MAX_DURATION", "EXECUTION_ASSERTION"],
+                },
+            },
+            required: ["behavior", "duration", "id", "type"],
+        },
+    };
+
+    import {useStore} from "vuex";
+    const store = useStore();
+
+    const ss = () => {
+        store.commit("code/setPanel", {
+            breadcrumb: {
+                label: props.label,
+                to: {
+                    name: "flows/list",
+                },
+            },
+            panel: h(OneOfContent, {
+                modelValue: props.modelValue,
+                label: props.label,
+                schema,
+                definitions,
+                "onUpdate:modelValue": emits("update:modelValue"),
+            }),
+        });
+    };
+</script>
+
+<style scoped lang="scss">
+@import "../../styles/code.scss";
+</style>

ui/src/components/code/utils/types.ts

@@ -26,11 +26,6 @@ type InputField = Field & {
     inputs: any[];
 };
 
-type ConcurrencyField = Field & {
-    root: string;
-    schema: object;
-};
-
 type EditorField = Field & {
     navbar: boolean;
     input: boolean;
@@ -50,7 +45,8 @@ export type Fields = {
     inputs: InputField;
     outputs: EditorField;
     variables: PairField;
-    concurrency: ConcurrencyField;
+    concurrency: Field;
+    sla: Field;
     pluginDefaults: EditorField;
     disabled: Field;
 };

ui/src/components/flows/tasks/OneOfContent.vue

@@ -73,8 +73,8 @@
 
             currentSchema() {
                 return (
-                    this.definitions[this.selectedSchema] ??
-                    this.schemaByType[this.selectedSchema]
+                    this.definitions?.[this.selectedSchema] ??
+                    this.schemaByType?.[this.selectedSchema]
                 );
             },
             schemaByType() {

ui/src/components/inputs/EditorView.vue

@@ -941,12 +941,12 @@
 
     const onUpdateMetadata = (event, shouldSave) => {
         if(shouldSave) {
-            metadata.value = {...metadata.value, ...(event.concurrency.limit === 0 ? {concurrency: null} : event)};
+            metadata.value = {...metadata.value, ...(event.concurrency?.limit === 0 ? {concurrency: null} : event)};
             onSaveMetadata();
             validateFlow(flowYaml.value)
 
         } else {
-            metadata.value = event.concurrency.limit === 0 ?  {concurrency: null} : event;
+            metadata.value = event.concurrency?.limit === 0 ?  {concurrency: null} : event;
         }
     };
 

ui/src/translations/en.json

@@ -1135,15 +1135,16 @@
         "main": {
           "flow_id": "Flow ID",
           "namespace": "Namespace",
-          "description": "Description"
+          "description": "Description",
+          "inputs": "Inputs"
         },
         "general": {
           "retry": "Retry",
           "labels": "Labels",
-          "inputs": "Inputs",
           "outputs": "Outputs",
           "variables": "Variables",
           "concurrency": "Concurrency",
+          "sla": "SLA",
           "plugin_defaults": "Plugin Defaults",
           "disabled": "Disabled"
         }