fix(ui): last issues with vue3

ui/package.json

@@ -10,22 +10,22 @@
   },
   "dependencies": {
     "ansi-to-html": "^0.7.2",
-    "axios": "1.2.0",
+    "axios": "1.2.1",
     "bootstrap": "^5.2.3",
-    "chart.js": "^4.0.1",
+    "chart.js": "^4.1.1",
     "core-js": "^3.26.1",
     "cron-parser": "^4.7.0",
     "cron-validator": "^1.3.1",
-    "cronstrue": "^2.20.0",
+    "cronstrue": "^2.21.0",
     "cytoscape": "3.23.0",
     "cytoscape-dagre": "^2.4.0",
-    "cytoscape-dom-node": "^1.1.0",
-    "element-plus": "^2.2.25",
+    "cytoscape-dom-node": "^1.1.1",
+    "element-plus": "^2.2.27",
     "humanize-duration": "^3.27.3",
     "js-yaml": "^4.1.0",
     "lodash": "4.17.21",
     "markdown-it": "^13.0.1",
-    "markdown-it-anchor": "^8.6.5",
+    "markdown-it-anchor": "^8.6.6",
     "markdown-it-mark": "^3.0.1",
     "markdown-it-meta": "0.0.1",
     "md5": "^2.3.0",
@@ -52,20 +52,20 @@
     "@vue/cli-plugin-babel": "^5.0.8",
     "@vue/cli-plugin-unit-jest": "^5.0.8",
     "@vue/cli-service": "^5.0.8",
-    "@vue/test-utils": "^2.2.4",
-    "@vue/vue3-jest": "^29.2.1",
+    "@vue/test-utils": "^2.2.6",
+    "@vue/vue3-jest": "^29.2.2",
     "babel-jest": "^29.3.1",
     "buffer": "^6.0.3",
-    "eslint": "^8.28.0",
-    "eslint-plugin-jest": "^27.1.6",
+    "eslint": "^8.30.0",
+    "eslint-plugin-jest": "^27.1.7",
     "eslint-plugin-vue": "^9.8.0",
     "jest": "^29.3.1",
     "jest-transform-stub": "^2.0.0",
-    "monaco-editor": "0.34.0",
+    "monaco-editor": "0.34.1",
     "monaco-editor-webpack-plugin": "7.0.1",
     "monaco-yaml": "4.0.0-alpha.0",
     "process": "^0.11.10",
-    "sass": "^1.56.1",
+    "sass": "^1.57.1",
     "sass-loader": "^13.2.0"
   },
   "babel": {

ui/src/components/Status.vue

@@ -38,7 +38,7 @@
                 return State.icon()[this.status];
             },
             type () {
-                return State.type()[this.status];
+                return State.colorClass()[this.status];
             }
         }
     };
@@ -50,9 +50,6 @@
         &.no-label {
             padding: 8px;
             line-height: 1;
-            :deep([class*=el-icon] + span) {
-                margin-left: 0;
-            }
         }
     }
 </style>

ui/src/components/executions/Logs.vue

@@ -3,7 +3,7 @@
         <collapse>
             <el-form-item>
                 <el-input
-                    :model-value="filter"
+                    v-model="filter"
                     @update:model-value="onChange"
                     :placeholder="$t('search')"
                 >
@@ -14,7 +14,7 @@
             </el-form-item>
             <el-form-item>
                 <log-level-selector
-                    :value="level"
+                    v-model="level"
                     @update:model-value="onChange"
                 />
             </el-form-item>

ui/src/components/flows/FlowRun.vue

@@ -6,7 +6,7 @@
         </el-alert>
         <el-form class="ks-horizontal" :model="inputs" ref="form">
             <el-form-item
-                v-for="input in flow.inputs"
+                v-for="input in flow.inputs || []"
                 :key="input.id"
                 :label="input.name"
                 :required="input.required !== false"
@@ -98,7 +98,7 @@
             };
         },
         mounted() {
-            for (const input of this.flow.inputs) {
+            for (const input of this.flow.inputs || []) {
                 this.inputs[input.name] = input.defaults;
 
                 if (input.type === "DATETIME" && input.defaults) {

ui/src/components/flows/TriggerFlow.vue

@@ -42,7 +42,7 @@
             };
         },
         mounted() {
-            if (!this.flow) {
+            if (!this.flow && this.flowId && this.namespace) {
                 this.$store
                     .dispatch("flow/loadFlow", {
                         id: this.flowId,

ui/src/components/stats/StateChart.vue

@@ -16,7 +16,8 @@
 </template>
 
 <script>
-    import {computed, defineComponent, ref} from "vue"
+    import {computed, defineComponent, ref, getCurrentInstance} from "vue";
+    import {useRoute, useRouter} from "vue-router"
     import {BarChart} from "vue-chart-3";
     import Utils from "../../utils/utils.js";
     import {defaultConfig, tooltip, chartClick} from "../../utils/charts.js";
@@ -54,7 +55,10 @@
             },
 
         },
-        setup(props, {root}) {
+        setup(props) {
+            const moment = getCurrentInstance().appContext.config.globalProperties.$moment;
+            const route = useRoute();
+            const router = useRouter();
             const {t} = useI18n({useScope: "global"});
 
             let duration = t("duration")
@@ -68,7 +72,9 @@
                 onClick: (e, elements) => {
                     if (elements.length > 0 && elements[0].index !== undefined && elements[0].datasetIndex !== undefined ) {
                         chartClick(
-                            root,
+                            moment,
+                            router,
+                            route,
                             {
                                 date: e.chart.data.labels[elements[0].index],
                                 status: e.chart.data.datasets[elements[0].datasetIndex].label,

ui/src/styles/layout/element-plus-overload.scss

@@ -6,6 +6,7 @@
 // button
 .el-button {
     --el-button-disabled-border-color: var(--bs-border-color);
+    --el-button-hover-text-color: var(--bs-body-color);
 
     a:hover & {
         color:  var(--el-button-text-color) !important;
@@ -15,6 +16,10 @@
         position: relative;
         top: -3px;
     }
+
+    [class*=el-icon] + span:empty {
+        margin-left: 0;
+    }
 }
 
 .el-input-group__append, .el-input-group__prepend {
@@ -424,6 +429,10 @@ form.ks-horizontal {
     --el-notification-border-color: var(--bs-border-color);
     --el-notification-title-color: var(--bs-body-color);
 
+    .el-notification__group {
+        flex-grow: 2;
+    }
+
     .el-notification__content {
         text-align: left;
     }

ui/src/utils/charts.js

@@ -69,36 +69,40 @@ export function defaultConfig(override) {
     }, override);
 }
 
-export function chartClick(self, event) {
+export function chartClick(moment, router, route, event) {
     const query = {};
 
     if (event.date) {
-        query.start = self.$moment(event.date).toISOString(true);
-        query.end = self.$moment(event.date).add(1, "d").toISOString(true);
+        query.start = moment(event.date).toISOString(true);
+        query.end = moment(event.date).add(1, "d").toISOString(true);
     }
 
     if (event.startDate) {
-        query.start = self.$moment(event.startDate).toISOString(true);
+        query.start = moment(event.startDate).toISOString(true);
     }
 
     if (event.endDate) {
-        query.end = self.$moment(event.endDate).toISOString(true);
+        query.end = moment(event.endDate).toISOString(true);
     }
 
     if (event.status) {
         query.status = event.status.toUpperCase();
     }
 
-    if (self.$route.query.namespace) {
-        query.namespace = self.$route.query.namespace;
+    if (event.state) {
+        query.state = event.state;
     }
 
-    if (self.$route.query.q) {
-        query.q = self.$route.query.q;
+    if (route.query.namespace) {
+        query.namespace = route.query.namespace;
+    }
+
+    if (route.query.q) {
+        query.q = route.query.q;
     }
 
     if (event.namespace && event.flowId) {
-        self.$router.push({
+        router.push({
             name: "flows/update",
             params: {
                 namespace: event.namespace,
@@ -113,7 +117,7 @@ export function chartClick(self, event) {
         query.namespace = event.namespace;
     }
 
-    self.$router.push({
+    router.push({
         name: "executions/list",
         params: {tab: "executions"},
         query: query

ui/src/utils/state.js

@@ -83,7 +83,7 @@ const STATE = Object.freeze({
     },
     PAUSED: {
         name: "PAUSED",
-        colorClass: "purple",
+        colorClass: "",
         color: "#6d81f5",
         icon: PauseCircle,
         isRunning: false,
@@ -155,10 +155,6 @@ export default class State {
         return _mapValues(STATE, state => state.colorClass);
     }
 
-    static type() {
-        return _mapValues(STATE, state => state.colorClass);
-    }
-
     static color() {
         return _mapValues(STATE, state => state.color);
     }