feat(ui): update to vue-cli v5

ui/.eslintrc.json

@@ -45,6 +45,6 @@
     ]
   },
   "parserOptions": {
-    "parser": "babel-eslint"
+    "parser": "@babel/eslint-parser"
   }
 }

ui/jest.config.js

@@ -6,7 +6,7 @@ module.exports = {
         "vue"
     ],
     transform: {
-        ".*\\.(vue)$": "vue-jest",
+        ".*\\.(vue)$": "@vue/vue2-jest",
         ".*\\.(js)$": "babel-jest"
     },
     transformIgnorePatterns: [

ui/package.json

@@ -36,7 +36,7 @@
     "qs": "^6.10.3",
     "throttle-debounce": "^4.0.0",
     "v-hotkey": "^0.9.0",
-    "vue": "^2.6.14",
+    "vue": "2.6.14",
     "vue-analytics": "^5.22.1",
     "vue-axios": "^3.4.1",
     "vue-chart-3": "^2.1.3",
@@ -51,26 +51,30 @@
     "vuex": "^3.6.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.17.9",
-    "@babel/preset-env": "^7.16.11",
-    "@vue/cli-plugin-babel": "^4.5.15",
-    "@vue/cli-plugin-eslint": "^4.5.15",
-    "@vue/cli-plugin-unit-jest": "^4.5.15",
-    "@vue/cli-service": "^4.5.15",
+    "@babel/core": "^7.18.6",
+    "@babel/eslint-parser": "^7.18.2",
+    "@babel/preset-env": "^7.18.6",
+    "@vue/cli-plugin-babel": "^5.0.6",
+    "@vue/cli-plugin-eslint": "^5.0.6",
+    "@vue/cli-plugin-unit-jest": "^5.0.6",
+    "@vue/cli-service": "^5.0.6",
     "@vue/test-utils": "^1.3.0",
-    "babel-eslint": "^10.1.0",
-    "babel-jest": "^27.5.1",
-    "eslint": "^7.32.0",
-    "eslint-plugin-jest": "^26.1.4",
-    "eslint-plugin-vue": "^8.6.0",
+    "@vue/vue2-jest": "^28.0.1",
+    "babel-jest": "^28.1.2",
+    "buffer": "^6.0.3",
+    "eslint": "^8.19.0",
+    "eslint-plugin-jest": "^26.5.3",
+    "eslint-plugin-vue": "^9.1.1",
+    "jest": "^28.1.2",
     "jest-transform-stub": "^2.0.0",
-    "monaco-editor": "0.30.0",
-    "monaco-editor-webpack-plugin": "6.0.0",
+    "monaco-editor": "0.33.0",
+    "monaco-editor-webpack-plugin": "7.0.1",
     "monaco-yaml": "4.0.0-alpha.0",
-    "sass": "^1.50.0",
-    "sass-loader": "^10.1.1",
-    "vue-jest": "^3.0.7",
-    "vue-template-compiler": "^2.6.14"
+    "process": "^0.11.10",
+    "sass": "^1.53.0",
+    "sass-loader": "^13.0.2",
+    "vue-template-compiler": "2.6.14",
+    "webpack": "^5.73.0"
   },
   "babel": {
     "presets": [

ui/public/index.html

@@ -20,7 +20,7 @@
             split.pop();
             return split.join('/') + "/";
         }();
-        const KESTRA_ASSETS = '<% print(JSON.stringify(webpack.assetsByChunkName)); %>'
+        const KESTRA_ASSETS = '<% print(JSON.stringify(compilation.getStats().toJson().assetsByChunkName)); %>'
         if (localStorage.getItem("theme")) {
             document.getElementsByTagName("html")[0].classList.add(localStorage.getItem("theme"));
         }

ui/src/App.vue

@@ -2,7 +2,7 @@
     <div>
         <nprogress-container />
         <top-nav-bar :menu-collapsed="menuCollapsed" />
-        <Menu @onMenuCollapse="onMenuCollapse" />
+        <left-menu @onMenuCollapse="onMenuCollapse" />
         <custom-toast v-if="message" :no-auto-hide="true" :message="message" />
         <div id="app" class="container-fluid">
             <div class="content-wrapper" :class="menuCollapsed">
@@ -17,7 +17,7 @@
 </template>
 
 <script>
-    import Menu from "override/components/Menu.vue";
+    import LeftMenu from "override/components/LeftMenu.vue";
     import TopNavBar from "./components/layout/TopNavBar";
     import CustomToast from "./components/customToast";
     import NprogressContainer from "vue-nprogress/src/NprogressContainer";
@@ -27,7 +27,7 @@
     export default {
         name: "App",
         components: {
-            Menu,
+            LeftMenu,
             TopNavBar,
             CustomToast,
             NprogressContainer,

ui/src/components/layout/BottomLine.vue

@@ -6,7 +6,7 @@
 <script>
     export default {}
 </script>
-<style lang="scss" >
+<style lang="scss">
     @use "sass:math";
     @import "../../styles/variable";
 

ui/src/components/layout/Labels.vue

@@ -35,12 +35,11 @@
 
                 const qs = {
                     ...this.$route.query,
-                    ...{"labels": Object.entries(labels).map((label) => label[0] + ":" + label[1])
-                }};
+                    ...{"labels": Object.entries(labels).map((label) => label[0] + ":" + label[1])}
+                };
 
                 delete qs.page;
 
-                console.log(qs)
                 return {name: this.$route.name, query: qs}
             }
         }

ui/src/components/layout/Markdown.vue

@@ -45,7 +45,7 @@
     };
 </script>
 
-<style lang="scss" >
+<style lang="scss">
 @import "../../styles/_variable.scss";
 .markdown {
     a.header-anchor {

ui/src/components/plugins/Plugin.vue

@@ -89,7 +89,7 @@
     };
 </script>
 
-<style lang="scss" >
+<style lang="scss">
     @import "../../styles/_variable.scss";
     .markdown {
         h1 {

ui/src/components/stats/DurationChart.vue

@@ -14,7 +14,7 @@
 </template>
 
 <script>
-    import {computed, defineComponent, ref} from "@vue/composition-api";
+    import {computed, defineComponent, ref} from "vue";
     import {LineChart} from "vue-chart-3";
     import Utils from "../../utils/utils.js";
     import {defaultConfig, tooltip} from "../../utils/charts.js";

ui/src/styles/_variable.scss

@@ -2,8 +2,8 @@ $theme-name: "theme-light" !default;
 $menu-width: 268px;
 
 // Color system
-$white: #fff !default;
-$white-always: #fff !default;
+$white: #FFF !default;
+$white-always: #FFF !default;
 $gray-100: #f8f8fc !default;
 $gray-200: #f1f5fa !default;;
 $gray-300: #eaf0f9 !default;;

ui/vue.config.js

@@ -1,4 +1,5 @@
 const path = require("path");
+const webpack = require("webpack");
 const MonacoEditorPlugin = require("monaco-editor-webpack-plugin")
 // const WebpackBundleAnalyzer = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
 
@@ -67,6 +68,10 @@ module.exports = {
                     "!viewportSemanticTokens",
                 ]
             }),
+            new webpack.ProvidePlugin({
+                process: "process/browser",
+                Buffer: ["buffer", "Buffer"],
+            }),
             // new WebpackBundleAnalyzer()
         ],
     },