feat(ui): move to vite

kestra-io · Dec 13, 2022 · ea685b3 · ea685b3
1 parent bb420d3
commit ea685b3
Show file tree

Hide file tree

Showing 12 changed files with 1,673 additions and 10,093 deletions.
diff --git a/ui/.eslintrc.json b/ui/.eslintrc.json
@@ -43,8 +43,5 @@
  "vue/multi-word-component-names": [
  "off"
  ]
- },
- "parserOptions": {
- "parser": "@babel/eslint-parser"
  }
 }
diff --git a/ui/babel.config.js b/ui/babel.config.js
diff --git a/ui/public/index.html → ui/index.html b/ui/public/index.html → ui/index.html
@@ -5,15 +5,15 @@
  <title>Kestra</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
- <link rel="icon" href="<%= BASE_URL %>favicon.ico">
- <link rel="icon" type="image/png" sizes="192x192" href="<%= BASE_URL %>favicon-192x192.png">
+ <link rel="icon" href="/favicon.ico">
+ <link rel="icon" type="image/png" sizes="192x192" href="/favicon-192x192.png">
  <meta name="msapplication-TileColor" content="#192A4E">
  <meta name="theme-color" content="#192A4E">
- <link rel="stylesheet" href="<%= BASE_URL %>loader.css" />
+ <link rel="stylesheet" href="/loader.css" />
  <meta name="html-head" content="replace">
  <script>
  const KESTRA_GOOGLE_ANALYTICS = null;
- const KESTRA_UI_PATH = "<%= BASE_URL %>";
+ const KESTRA_UI_PATH = "/ui/";
  const KESTRA_BASE_PATH = function () {
  const split = KESTRA_UI_PATH.split('/');
  split.pop();
@@ -39,5 +39,6 @@
  <div id="app"></div>
  </div>
  <!-- built files will be auto injected -->
+ <script type="module" src="/src/main.js"></script>
 </body>
 </html>
diff --git a/ui/package-lock.json b/ui/package-lock.json
diff --git a/ui/package.json b/ui/package.json
@@ -3,24 +3,26 @@
  "version": "0.1.0",
  "private": true,
  "scripts": {
- "serve": "vue-cli-service serve --port 8090",
- "build": "vue-cli-service build",
- "test:unit": "vue-cli-service test:unit",
- "lint": "vue-cli-service lint"
+ "dev": "vite --host",
+ "build": "vite build",
+ "preview": "vite preview",
+ "test:unit": "vitest --environment jsdom --root src/",
+ "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path ../.gitignore"
  },
  "dependencies": {
  "ansi-to-html": "^0.7.2",
- "axios": "1.2.0",
+ "axios": "1.2.1",
  "bootstrap": "^5.2.3",
+ "buffer": "^6.0.3",
  "chart.js": "^4.0.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",
+ "element-plus": "^2.2.26",
  "humanize-duration": "^3.27.3",
  "js-yaml": "^4.1.0",
  "lodash": "4.17.21",
@@ -46,38 +48,30 @@
  "xss": "^1.0.14"
  },
  "devDependencies": {
- "@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-plugin-unit-jest": "^5.0.8",
- "@vue/cli-service": "^5.0.8",
- "@vue/test-utils": "^2.2.4",
- "@vue/vue3-jest": "^29.2.1",
- "babel-jest": "^29.3.1",
- "buffer": "^6.0.3",
- "eslint": "^8.28.0",
+ "@rushstack/eslint-patch": "^1.1.4",
+ "@vitejs/plugin-vue": "^4.0.0",
+ "@vue/eslint-config-prettier": "^7.0.0",
+ "@vue/test-utils": "^2.2.6",
+ "@vue/vue3-jest": "^29.2.2",
+ "eslint": "^8.29.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.56.1",
- "sass-loader": "^13.2.0"
+ "jsdom": "^20.0.3",
+ "monaco-editor": "0.34.1",
+ "monaco-yaml": "4.0.2",
+ "prettier": "^2.8.1",
+ "sass": "^1.56.2",
+ "sass-loader": "^13.2.0",
+ "vite": "^4.0.0",
+ "vitest": "^0.25.6"
  },
  "babel": {
  "presets": [
  "@babel/preset-env"
  ]
  },
- "postcss": {
- "plugins": {
- "autoprefixer": {}
- }
- },
  "browserslist": [
  "> 1%",
  "last 2 versions",

diff --git a/ui/src/components/inputs/MonacoEditor.vue b/ui/src/components/inputs/MonacoEditor.vue
@@ -1,14 +1,37 @@
 <template>
- <div class="monaco-editor"></div>
+ <div class="monaco-editor" />
 </template>
 
 <script>
- import { defineComponent } from 'vue'
- import * as monaco from 'monaco-editor'
+ import {defineComponent} from "vue"
+
+ import "monaco-editor/esm/vs/editor/editor.all.js";
+ import "monaco-editor/esm/vs/editor/standalone/browser/iPadShowKeyboard/iPadShowKeyboard.js";
+ import "monaco-editor/esm/vs/language/json/monaco.contribution";
+ import "monaco-editor/esm/vs/basic-languages/monaco.contribution";
+ import * as monaco from "monaco-editor/esm/vs/editor/editor.api";
+ import EditorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
+ import YamlWorker from "monaco-yaml/yaml.worker?worker";
+
+ window.MonacoEnvironment = {
+ getWorker(moduleId, label) {
+ switch (label) {
+ case "editorWorkerService":
+ return new EditorWorker();
+ case "yaml":
+ return new YamlWorker();
+ default:
+ throw new Error(`Unknown label ${label}`);
+ }
+ },
+ };
 
  export default defineComponent({
  props: {
- original: String,
+ original: {
+ type: String,
+ default: undefined
+ },
  value: {
  type: String,
  required: true
@@ -17,9 +40,18 @@
  type: String,
  "default": "vs"
  },
- language: String,
- options: Object,
- schemas: Array,
+ language: {
+ type: String,
+ required: true,
+ },
+ options: {
+ type:Object,
+ default: undefined
+ },
+ schemas: {
+ type: Array,
+ default: undefined
+ },
  diffEditor: {
  type: Boolean,
  "default": false

diff --git a/ui/src/styles/_variable.scss b/ui/src/styles/_variable.scss
@@ -64,7 +64,7 @@ $box-shadow: 0 .5rem 1rem rgba($black, .15);
 $box-shadow-lg: 0 1rem 3rem rgba($black, .175);
 
 // bootstrap
-@import "~bootstrap/scss/functions";
-@import "~bootstrap/scss/mixins";
-@import "~bootstrap/scss/vendor/rfs";
-@import '~bootstrap/scss/variables';
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/mixins";
+@import "bootstrap/scss/vendor/rfs";
+@import 'bootstrap/scss/variables';
diff --git a/ui/src/styles/layout/bootstrap.scss b/ui/src/styles/layout/bootstrap.scss
@@ -2,32 +2,32 @@
 
 $include-column-box-sizing: true !default;
 
-@import "~bootstrap/scss/functions";
-@import "~bootstrap/scss/variables";
-@import "~bootstrap/scss/maps";
-@import "~bootstrap/scss/mixins";
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/maps";
+@import "bootstrap/scss/mixins";
 
-@import "~bootstrap/scss/mixins/lists";
-@import "~bootstrap/scss/mixins/breakpoints";
-@import "~bootstrap/scss/mixins/container";
-@import "~bootstrap/scss/mixins/grid";
-@import "~bootstrap/scss/mixins/utilities";
+@import "bootstrap/scss/mixins/lists";
+@import "bootstrap/scss/mixins/breakpoints";
+@import "bootstrap/scss/mixins/container";
+@import "bootstrap/scss/mixins/grid";
+@import "bootstrap/scss/mixins/utilities";
 
-@import "~bootstrap/scss/vendor/rfs";
+@import "bootstrap/scss/vendor/rfs";
 
-@import "~bootstrap/scss/root";
-@import "~bootstrap/scss/reboot";
+@import "bootstrap/scss/root";
+@import "bootstrap/scss/reboot";
 
-@import "~bootstrap/scss/containers";
-@import "~bootstrap/scss/grid";
+@import "bootstrap/scss/containers";
+@import "bootstrap/scss/grid";
 
-@import "~bootstrap/scss/utilities";
-@import "~bootstrap/scss/utilities/api";
+@import "bootstrap/scss/utilities";
+@import "bootstrap/scss/utilities/api";
 
-@import "~bootstrap/scss/progress";
-@import "~bootstrap/scss/type";
+@import "bootstrap/scss/progress";
+@import "bootstrap/scss/type";
 
-@import "~bootstrap/scss/helpers/text-truncation";
+@import "bootstrap/scss/helpers/text-truncation";
 
 // overload
 .font-monospace {

diff --git a/ui/src/styles/layout/root-dark.scss b/ui/src/styles/layout/root-dark.scss
@@ -2,10 +2,10 @@
 @import "../theme-dark";
 
 // Bootstrap
-@import "~bootstrap/scss/functions";
-@import "~bootstrap/scss/mixins";
-@import "~bootstrap/scss/vendor/rfs";
-@import '~bootstrap/scss/variables';
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/mixins";
+@import "bootstrap/scss/vendor/rfs";
+@import "bootstrap/scss/variables";
 
 html.dark {
  #{--bs-gray}: #{map.get($grays, "600")};

diff --git a/ui/src/styles/vendor.scss b/ui/src/styles/vendor.scss
@@ -50,7 +50,7 @@
 @use "element-plus/theme-chalk/src/dark/css-vars.scss";
 
 // vue-sidebar
-@use "~vue-sidebar-menu/src/scss/vue-sidebar-menu.scss" with (
+@use "vue-sidebar-menu/src/scss/vue-sidebar-menu.scss" with (
  $primary-color: global-var.$secondary,
  $base-bg: global-var.$white,
  $item-color: global-var.$tertiary,
@@ -61,8 +61,8 @@
 );
 
 // third
-@import '~nprogress/nprogress.css';
-@import "~vue-material-design-icons/styles.css";
+@use "nprogress/nprogress.css";
+@use "vue-material-design-icons/styles.css";
 //noinspection CssUnknownTarget
 @import url("https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;700;900&display=swap");
 
diff --git a/ui/src/utils/axios.js b/ui/src/utils/axios.js
@@ -2,7 +2,7 @@ import axios from "axios";
 import NProgress from "nprogress"
 
 // eslint-disable-next-line no-undef
-let root = (process.env.VUE_APP_API_URL || "") + KESTRA_BASE_PATH;
+let root = (import.meta.env.VITE_APP_API_URL || "") + KESTRA_BASE_PATH;
 if (!root.endsWith("/")) {
  root = root + "/";
 }

diff --git a/ui/vite.config.js b/ui/vite.config.js
@@ -0,0 +1,18 @@
+import path from "path";
+import {defineConfig} from "vite";
+import vue from "@vitejs/plugin-vue";
+
+export default defineConfig({
+ base: "/ui",
+ build: {
+ outDir: "../webserver/src/main/resources/ui",
+ },
+ resolve: {
+ alias: {
+ "override": path.resolve(__dirname, "src/override/"),
+ },
+ },
+ plugins: [
+ vue(),
+ ],
+})