feat(ui): update all js depends and move to bootstrap 5 for reset

kestra-io · Dec 21, 2022 · 31b1786 · 31b1786
1 parent 14e82e5
commit 31b1786
Show file tree

Hide file tree

Showing 9 changed files with 1,439 additions and 18,094 deletions.
diff --git a/ui/package-lock.json b/ui/package-lock.json
diff --git a/ui/package.json b/ui/package.json
@@ -10,17 +10,17 @@
   },
   "dependencies": {
     "ansi-to-html": "^0.7.2",
-    "axios": "1.1.3",
-    "bootstrap": "^4.6.2",
-    "chart.js": "^3.9.1",
-    "core-js": "^3.25.5",
-    "cron-parser": "^4.6.0",
+    "axios": "1.2.0",
+    "bootstrap": "^5.2.3",
+    "chart.js": "^4.0.1",
+    "core-js": "^3.26.1",
+    "cron-parser": "^4.7.0",
     "cron-validator": "^1.3.1",
-    "cronstrue": "^2.12.0",
+    "cronstrue": "^2.20.0",
     "cytoscape": "3.23.0",
     "cytoscape-dagre": "^2.4.0",
     "cytoscape-dom-node": "^1.1.0",
-    "element-plus": "^2.2.21",
+    "element-plus": "^2.2.25",
     "humanize-duration": "^3.27.3",
     "js-yaml": "^4.1.0",
     "lodash": "4.17.21",
@@ -34,39 +34,38 @@
     "nprogress": "^0.2.0",
     "prismjs": "^1.29.0",
     "throttle-debounce": "^5.0.0",
-    "vue": "^3.2.41",
+    "vue": "^3.2.45",
     "vue-axios": "3.5.2",
     "vue-chart-3": "^3.1.8",
     "vue-gtag": "^2.0.1",
     "vue-i18n": "^9.2.2",
     "vue-material-design-icons": "^5.1.2",
     "vue-router": "^4.1.6",
-    "vue-sidebar-menu": "^5.2.4",
+    "vue-sidebar-menu": "^5.2.5",
     "vuex": "^4.1.0",
     "xss": "^1.0.14"
   },
   "devDependencies": {
-    "@babel/core": "^7.19.3",
+    "@babel/core": "^7.20.5",
     "@babel/eslint-parser": "^7.19.1",
     "@babel/preset-env": "^7.19.4",
     "@vue/cli-plugin-babel": "^5.0.8",
     "@vue/cli-service": "^5.0.8",
-    "@vue/compiler-sfc": "^3.2.41",
-    "@vue/test-utils": "^2.2.1",
-    "@vue/vue3-jest": "^29.2.0",
-    "babel-jest": "^29.1.2",
+    "@vue/test-utils": "^2.2.4",
+    "@vue/vue3-jest": "^29.2.1",
+    "babel-jest": "^29.3.1",
     "buffer": "^6.0.3",
-    "eslint": "^8.25.0",
-    "eslint-plugin-jest": "^27.1.1",
-    "eslint-plugin-vue": "^9.6.0",
-    "jest": "^29.1.2",
+    "eslint": "^8.28.0",
+    "eslint-plugin-jest": "^27.1.6",
+    "eslint-plugin-vue": "^9.8.0",
+    "jest": "^29.3.1",
     "jest-transform-stub": "^2.0.0",
     "monaco-editor": "0.34.0",
     "monaco-editor-webpack-plugin": "7.0.1",
     "monaco-yaml": "4.0.0-alpha.0",
     "process": "^0.11.10",
-    "sass": "^1.55.0",
-    "sass-loader": "^13.1.0"
+    "sass": "^1.56.1",
+    "sass-loader": "^13.2.0"
   },
   "babel": {
     "presets": [

diff --git a/ui/src/components/executions/ExecutionOutput.vue b/ui/src/components/executions/ExecutionOutput.vue
@@ -46,7 +46,7 @@
 
             <editor class="mb-2" ref="editorContainer" :full-height="false" @save="onDebugExpression(filter, $event)" :input="true" :navbar="false" model-value="" />
             <editor v-if="debugExpression" :read-only="true" :full-height="false" :navbar="false" :minimap="false" :model-value="debugExpression" :lang="isJson ? 'json' : ''" />
-            <el-alert class="debug-error" type="danger" show-icon v-if="debugError" :closable="false">
+            <el-alert type="error" v-if="debugError" :closable="false">
                 <p><strong>{{ debugError }}</strong></p>
                 <pre class="mb-0">{{ debugStackTrace }}</pre>
             </el-alert>

diff --git a/ui/src/components/flows/TriggerAvatar.vue b/ui/src/components/flows/TriggerAvatar.vue
@@ -79,7 +79,7 @@
 @import "../../styles/_variable.scss";
 
 .b-avatar {
-    margin-right: math.div($badge-pill-padding-x, 2);
+    margin-right: 5px;
 }
 
 </style>
diff --git a/ui/src/components/layout/StatusFilterButtons.vue b/ui/src/components/layout/StatusFilterButtons.vue
@@ -1,6 +1,6 @@
 <template>
     <el-select
-        v-model="value"
+        :model-value="value"
         @update:model-value="onInput"
         filterable
         clearable

diff --git a/ui/src/components/logs/LogLevelSelector.vue b/ui/src/components/logs/LogLevelSelector.vue
@@ -1,6 +1,6 @@
 <template>
     <el-select
-        v-model="value"
+        :model-value="value"
         @update:model-value="onInput"
         filterable
         :persistent="false"

diff --git a/ui/src/components/stats/StateChart.vue b/ui/src/components/stats/StateChart.vue
@@ -85,7 +85,7 @@
                         },
                         callbacks: {
                             label: function(context) {
-                                if (context.dataset.yAxisID === "yAxesB" && context.raw !== 0) {
+                                if (context.dataset.yAxisID === "yB" && context.raw !== 0) {
                                     return context.dataset.label + ": " + Utils.humanDuration(context.raw);
                                 } else if (context.formattedValue !== "0") {
                                     return context.dataset.label + ": " + context.formattedValue
@@ -95,18 +95,17 @@
                     },
                 },
                 scales: {
-                    xAxes: {
+                    x: {
                         stacked: true,
                     },
-                    yAxes: {
+                    y: {
                         display: false,
                         position: "left",
                         stacked: true,
                     },
-                    yAxesB: {
+                    yB: {
                         display: false,
                         position: "right",
-
                     }
                 },
             }))
@@ -126,7 +125,7 @@
                                     label: state,
                                     backgroundColor: backgroundFromState(state),
                                     borderRadius: 4,
-                                    yAxisID: "yAxes",
+                                    yAxisID: "y",
                                     data: []
                                 };
                             }
@@ -148,7 +147,7 @@
                             borderWidth: 0.2,
                             backgroundColor: Utils.hexToRgba(!darkTheme ? "#eaf0f9" : "#292e40", 0.5),
                             borderColor: !darkTheme ? "#7081b9" : "#7989b4",
-                            yAxisID: "yAxesB",
+                            yAxisID: "yB",
                             data: props.data
                                 .map((value) => {
                                     return value.duration.avg === 0 ? 0 : Utils.duration(value.duration.avg);

diff --git a/ui/src/styles/layout/reset.scss b/ui/src/styles/layout/reset.scss
@@ -1,12 +1,13 @@
 @import '~bootstrap/scss/bootstrap-reboot';
 @import '~bootstrap/scss/bootstrap-grid';
+@import '~bootstrap/scss/bootstrap-utilities';
+//
+//@import '~bootstrap/scss/utilities/align';
+//@import '~bootstrap/scss/utilities/background';
+//@import '~bootstrap/scss/utilities/float';
+//@import '~bootstrap/scss/utilities/text';
 
-@import '~bootstrap/scss/utilities/align';
-@import '~bootstrap/scss/utilities/background';
-@import '~bootstrap/scss/utilities/float';
-@import '~bootstrap/scss/utilities/text';
-
-@import '~bootstrap/scss/code';
+//@import '~bootstrap/scss/code';
 @import '~bootstrap/scss/type';
 @import '~bootstrap/scss/progress';
 

diff --git a/ui/src/utils/charts.js b/ui/src/utils/charts.js
@@ -38,10 +38,10 @@ export function defaultConfig(override) {
             }
         },
         scales: {
-            xAxes: {
+            x: {
                 display: false,
             },
-            yAxes: {
+            y: {
                 display: false,
             }
         },