build: introduce vite

.eslintignore

@@ -0,0 +1,15 @@
+
+*.sh
+node_modules
+*.md
+*.woff
+*.ttf
+.vscode
+.idea
+dist
+/public
+/docs
+.husky
+.local
+/bin
+Dockerfile

.eslintrc.js

@@ -0,0 +1,53 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+const { defineConfig } = require('eslint-define-config');
+module.exports = defineConfig({
+  root: true,
+  env: {
+    browser: true,
+    node: true,
+    es6: true,
+  },
+  parser: 'vue-eslint-parser',
+  parserOptions: {
+    parser: '@typescript-eslint/parser',
+    ecmaVersion: 2020,
+    sourceType: 'module',
+    jsxPragma: 'React',
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  extends: [
+    'plugin:vue/vue3-recommended',
+    'plugin:@typescript-eslint/recommended',
+    'prettier',
+    'plugin:prettier/recommended',
+    'plugin:jest/recommended',
+  ],
+  rules: {
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "vue/script-setup-uses-vars": "error",
+    "@typescript-eslint/ban-ts-ignore'": "off",
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "no-use-before-define": "off",
+    "@typescript-eslint/no-use-before-define": "off",
+    "@typescript-eslint/no-non-null-assertion": "off",
+    "@typescript-eslint/no-this-alias": "off"
+  }
+});

.gitignore

@@ -16,24 +16,37 @@
 # specific language governing permissions and limitations
 # under the License.
 #
-.DS_Store
-node_modules
-/dist
-/node
-
-/tests/e2e/videos/
-/tests/e2e/screenshots/
-
 
 # local env files
 .env.local
 .env.*.local
 
-# Log files
+# Logs
+logs
+*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+node
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
 
 # Editor directories and files
 .idea
@@ -43,3 +56,6 @@ pnpm-debug.log*
 *.njsproj
 *.sln
 *.sw?
+
+/tests/e2e/videos/
+/tests/e2e/screenshots/

.stylelintignore

@@ -0,0 +1,3 @@
+/dist/*
+/public/*
+public/*

auto-imports.d.ts

@@ -0,0 +1,52 @@
+// Generated by 'unplugin-auto-import'
+// We suggest you to commit this file into source control
+declare global {
+  const computed: typeof import('vue')['computed']
+  const createApp: typeof import('vue')['createApp']
+  const customRef: typeof import('vue')['customRef']
+  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
+  const defineComponent: typeof import('vue')['defineComponent']
+  const effectScope: typeof import('vue')['effectScope']
+  const EffectScope: typeof import('vue')['EffectScope']
+  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
+  const getCurrentScope: typeof import('vue')['getCurrentScope']
+  const h: typeof import('vue')['h']
+  const inject: typeof import('vue')['inject']
+  const isReadonly: typeof import('vue')['isReadonly']
+  const isRef: typeof import('vue')['isRef']
+  const markRaw: typeof import('vue')['markRaw']
+  const nextTick: typeof import('vue')['nextTick']
+  const onActivated: typeof import('vue')['onActivated']
+  const onBeforeMount: typeof import('vue')['onBeforeMount']
+  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
+  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
+  const onDeactivated: typeof import('vue')['onDeactivated']
+  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
+  const onMounted: typeof import('vue')['onMounted']
+  const onRenderTracked: typeof import('vue')['onRenderTracked']
+  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
+  const onScopeDispose: typeof import('vue')['onScopeDispose']
+  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
+  const onUnmounted: typeof import('vue')['onUnmounted']
+  const onUpdated: typeof import('vue')['onUpdated']
+  const provide: typeof import('vue')['provide']
+  const reactive: typeof import('vue')['reactive']
+  const readonly: typeof import('vue')['readonly']
+  const ref: typeof import('vue')['ref']
+  const resolveComponent: typeof import('vue')['resolveComponent']
+  const shallowReactive: typeof import('vue')['shallowReactive']
+  const shallowReadonly: typeof import('vue')['shallowReadonly']
+  const shallowRef: typeof import('vue')['shallowRef']
+  const toRaw: typeof import('vue')['toRaw']
+  const toRef: typeof import('vue')['toRef']
+  const toRefs: typeof import('vue')['toRefs']
+  const triggerRef: typeof import('vue')['triggerRef']
+  const unref: typeof import('vue')['unref']
+  const useAttrs: typeof import('vue')['useAttrs']
+  const useCssModule: typeof import('vue')['useCssModule']
+  const useCssVars: typeof import('vue')['useCssVars']
+  const useSlots: typeof import('vue')['useSlots']
+  const watch: typeof import('vue')['watch']
+  const watchEffect: typeof import('vue')['watchEffect']
+}
+export {}

babel.config.js

@@ -1,19 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-module.exports = {
-  presets: ["@vue/cli-plugin-babel/preset"],
-};

commitlint.config.js

@@ -0,0 +1,33 @@
+module.exports = {
+  ignores: [(commit) => commit.includes('init')],
+  extends: ['@commitlint/config-conventional'],
+  rules: {
+    'body-leading-blank': [2, 'always'],
+    'footer-leading-blank': [1, 'always'],
+    'header-max-length': [2, 'always', 108],
+    'subject-empty': [2, 'never'],
+    'type-empty': [2, 'never'],
+    'subject-case': [0],
+    'type-enum': [
+      2,
+      'always',
+      [
+        'feat',
+        'fix',
+        'perf',
+        'style',
+        'docs',
+        'test',
+        'refactor',
+        'build',
+        'ci',
+        'chore',
+        'revert',
+        'wip',
+        'workflow',
+        'types',
+        'release',
+      ],
+    ],
+  },
+};

components.d.ts

@@ -0,0 +1,48 @@
+// generated by unplugin-vue-components
+// We suggest you to commit this file into source control
+// Read more: https://github.com/vuejs/vue-next/pull/3399
+
+declare module '@vue/runtime-core' {
+  export interface GlobalComponents {
+    DateCalendar: typeof import('./src/components/DateCalendar.vue')['default']
+    ElButton: typeof import('element-plus/es')['ElButton']
+    ElCollapse: typeof import('element-plus/es')['ElCollapse']
+    ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
+    ElDialog: typeof import('element-plus/es')['ElDialog']
+    ElDrawer: typeof import('element-plus/es')['ElDrawer']
+    ElDropdown: typeof import('element-plus/es')['ElDropdown']
+    ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
+    ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
+    ElIcon: typeof import('element-plus/es')['ElIcon']
+    ElInput: typeof import('element-plus/es')['ElInput']
+    ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
+    ElMenu: typeof import('element-plus/es')['ElMenu']
+    ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
+    ElMenuItemGroup: typeof import('element-plus/es')['ElMenuItemGroup']
+    ElOption: typeof import('element-plus/es')['ElOption']
+    ElPagination: typeof import('element-plus/es')['ElPagination']
+    ElPopover: typeof import('element-plus/es')['ElPopover']
+    ElProgress: typeof import('element-plus/es')['ElProgress']
+    ElRadio: typeof import('element-plus/es')['ElRadio']
+    ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
+    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
+    ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElSlider: typeof import('element-plus/es')['ElSlider']
+    ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
+    ElSwitch: typeof import('element-plus/es')['ElSwitch']
+    ElTable: typeof import('element-plus/es')['ElTable']
+    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
+    ElTooltip: typeof import('element-plus/es')['ElTooltip']
+    Graph: typeof import('./src/components/Graph.vue')['default']
+    Icon: typeof import('./src/components/Icon.vue')['default']
+    Loading: typeof import('element-plus/es')['ElLoadingDirective']
+    Radio: typeof import('./src/components/Radio.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    Selector: typeof import('./src/components/Selector.vue')['default']
+    SelectSingle: typeof import('./src/components/SelectSingle.vue')['default']
+    TimePicker: typeof import('./src/components/TimePicker.vue')['default']
+  }
+}
+
+export { }

env.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly SW_PROXY_TARGET: string;
+  readonly drop_console: boolean;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Apache SkyWalking</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package.json

@@ -3,11 +3,10 @@
   "version": "9.3.0",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "test:unit": "vue-cli-service test:unit",
-    "test:e2e": "vue-cli-service test:e2e",
-    "lint": "vue-cli-service lint"
+    "dev": "vite",
+    "build": "vue-tsc && vite build",
+    "preview": "vite preview",
+    "prepare": "husky install"
   },
   "dependencies": {
     "axios": "^0.24.0",
@@ -17,7 +16,7 @@
     "echarts": "^5.2.2",
     "element-plus": "^2.0.2",
     "lodash": "^4.17.21",
-    "monaco-editor": "^0.27.0",
+    "monaco-editor": "^0.34.1",
     "pinia": "^2.0.5",
     "vis-timeline": "^7.5.1",
     "vue": "^3.0.0",
@@ -35,93 +34,41 @@
     "@types/three": "^0.131.0",
     "@typescript-eslint/eslint-plugin": "^4.18.0",
     "@typescript-eslint/parser": "^4.18.0",
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-e2e-cypress": "~5.0.8",
-    "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-plugin-router": "~4.5.0",
-    "@vue/cli-plugin-typescript": "~4.5.0",
-    "@vue/cli-plugin-unit-jest": "~4.5.0",
-    "@vue/cli-plugin-vuex": "~4.5.0",
-    "@vue/cli-service": "~4.5.0",
+    "@vitejs/plugin-vue": "^3.2.0",
     "@vue/compiler-sfc": "^3.0.0",
     "@vue/eslint-config-prettier": "^6.0.0",
     "@vue/eslint-config-typescript": "^7.0.0",
     "@vue/test-utils": "^2.0.0-0",
     "babel-jest": "^24.9.0",
-    "eslint": "^6.7.2",
+    "eslint": "^6.8.0",
+    "eslint-define-config": "^1.12.0",
     "eslint-plugin-prettier": "^3.3.1",
-    "eslint-plugin-vue": "^7.0.0",
+    "eslint-plugin-vue": "^7.20.0",
     "husky": "^7.0.4",
     "lint-staged": "^12.1.3",
-    "monaco-editor-webpack-plugin": "^4.1.2",
     "node-sass": "^6.0.1",
     "postcss-html": "^1.3.0",
     "postcss-scss": "^4.0.2",
     "prettier": "^2.2.1",
-    "sass-loader": "^10.2.0",
+    "sass": "^1.56.1",
     "stylelint": "^14.1.0",
     "stylelint-config-html": "^1.0.0",
     "stylelint-config-prettier": "^9.0.3",
     "stylelint-config-standard": "^24.0.0",
     "stylelint-order": "^5.0.0",
-    "svg-sprite-loader": "^6.0.11",
     "typescript": "~4.4.4",
     "unplugin-auto-import": "^0.7.0",
     "unplugin-vue-components": "^0.19.2",
-    "vue-jest": "^5.0.0-0"
+    "vite": "^3.2.3",
+    "vite-plugin-monaco-editor": "^1.1.0",
+    "vue-jest": "^5.0.0-0",
+    "vue-tsc": "^1.0.9"
   },
-  "eslintConfig": {
-    "root": true,
-    "env": {
-      "node": true
-    },
-    "extends": [
-      "plugin:vue/vue3-essential",
-      "eslint:recommended",
-      "@vue/typescript/recommended",
-      "@vue/prettier",
-      "@vue/prettier/@typescript-eslint"
-    ],
-    "parserOptions": {
-      "ecmaVersion": 2020
-    },
-    "rules": {
-      "@typescript-eslint/no-explicit-any": "off",
-      "@typescript-eslint/explicit-module-boundary-types": "off",
-      "vue/script-setup-uses-vars": "error",
-      "@typescript-eslint/ban-ts-ignore'": "off",
-      "@typescript-eslint/explicit-function-return-type": "off",
-      "no-use-before-define": "off",
-      "@typescript-eslint/no-use-before-define": "off",
-      "@typescript-eslint/no-non-null-assertion": "off",
-      "@typescript-eslint/no-this-alias": "off"
-    },
-    "overrides": [
-      {
-        "files": [
-          "**/__tests__/*.{j,t}s?(x)",
-          "**/tests/unit/**/*.spec.{j,t}s?(x)"
-        ],
-        "env": {
-          "jest": true
-        }
-      }
-    ]
-  },
-  "eslintIgnore": [
-    "vue.config.js"
-  ],
   "browserslist": [
     "> 1%",
     "last 2 versions",
     "not dead"
   ],
-  "jest": {
-    "preset": "@vue/cli-plugin-unit-jest/presets/typescript-and-babel",
-    "transform": {
-      "^.+\\.vue$": "vue-jest"
-    }
-  },
   "gitHooks": {
     "pre-commit": "lint-staged"
   },

postcss.config.js

@@ -15,7 +15,5 @@
  * limitations under the License.
  */
 module.exports = {
-  plugins: {
   autoprefixer: {},
-  },
 };

prettier.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+  printWidth: 100,
+  semi: true,
+  vueIndentScriptAndStyle: true,
+  trailingComma: 'all',
+  proseWrap: 'never',
+  htmlWhitespaceSensitivity: 'strict',
+  endOfLine: 'auto',
+};

public/index.html

@@ -1,31 +0,0 @@
-<!-- Licensed to the Apache Software Foundation (ASF) under one or more
-contributor license agreements.  See the NOTICE file distributed with
-this work for additional information regarding copyright ownership.
-The ASF licenses this file to You under the Apache License, Version 2.0
-(the "License"); you may not use this file except in compliance with
-the License.  You may obtain a copy of the License at
-
-  http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License. -->
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title><%= htmlWebpackPlugin.options.title %></title>
-  </head>
-  <body>
-    <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
-    </noscript>
-    <div id="app"></div>
-    <!-- built files will be auto injected -->
-  </body>
-</html>

src/assets/icons/index.ts

@@ -14,7 +14,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-const requireAll = (requireContext: Recordable) =>
-  requireContext.keys().map(requireContext);
-const req = require.context("./", true, /\.svg$/);
+const requireAll = (requireContext: Recordable) => Object.keys(requireContext);
+const req = import.meta.glob("./*.svg");
 requireAll(req);

src/assets/img/icons.ts

@@ -14,8 +14,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-const requireComponent = require.context("./technologies", false, /\.png$/);
-const requireTool = require.context("./tools", false, /\.png$/);
+const requireComponent: any = import.meta.glob("./technologies/*.svg");
+const requireTool: any = import.meta.glob("./tools/*.png");
 const result: { [key: string]: string } = {};
 const t: { [key: string]: string } = {};
 
@@ -29,7 +29,7 @@ function validateFileName(str: string): string | undefined {
     );
   }
 }
-[...requireComponent.keys()].forEach((filePath: string) => {
+Object.keys(requireComponent).forEach((filePath: string) => {
   const componentConfig = requireComponent(filePath);
 
   const fileName = validateFileName(filePath);
@@ -37,8 +37,8 @@ function validateFileName(str: string): string | undefined {
     result[fileName] = componentConfig;
   }
 });
-[...requireTool.keys()].forEach((filePath: string) => {
-  const componentConfig = requireTool(filePath);
+Object.keys(requireTool).forEach((filePath: string) => {
+  const componentConfig = requireTool[filePath];
 
   const fileName = validateFileName(filePath);
   if (fileName) {

src/components/Icon.vue

@@ -28,8 +28,6 @@ limitations under the License. -->
   </svg>
 </template>
 <script lang="ts" setup>
-import "@/assets/icons/index";
-
 /*global defineProps */
 defineProps({
   iconName: { type: String, default: "" },

src/router/alarm.ts

@@ -31,8 +31,7 @@ export const routesAlarm: Array<RouteRecordRaw> = [
       {
         path: "/alerting",
         name: "Alarm",
-        component: () =>
-          import(/* webpackChunkName: "alerting" */ "@/views/Alarm.vue"),
+        component: () => import("@/views/Alarm.vue"),
       },
     ],
   },

src/router/dashboard.ts

@@ -30,10 +30,7 @@ export const routesDashboard: Array<RouteRecordRaw> = [
     children: [
       {
         path: "/dashboard/list",
-        component: () =>
-          import(
-            /* webpackChunkName: "dashboards" */ "@/views/dashboard/List.vue"
-          ),
+        component: () => import("@/views/dashboard/List.vue"),
         name: "List",
         meta: {
           title: "dashboardList",
@@ -41,10 +38,7 @@ export const routesDashboard: Array<RouteRecordRaw> = [
       },
       {
         path: "/dashboard/new",
-        component: () =>
-          import(
-            /* webpackChunkName: "dashboards" */ "@/views/dashboard/New.vue"
-          ),
+        component: () => import("@/views/dashboard/New.vue"),
         name: "New",
         meta: {
           title: "dashboardNew",
@@ -54,38 +48,26 @@ export const routesDashboard: Array<RouteRecordRaw> = [
         path: "",
         redirect: "/dashboard/:layerId/:entity/:name",
         name: "Create",
-        component: () =>
-          import(
-            /* webpackChunkName: "dashboards" */ "@/views/dashboard/Edit.vue"
-          ),
+        component: () => import("@/views/dashboard/Edit.vue"),
         meta: {
           notShow: true,
         },
         children: [
           {
             path: "/dashboard/:layerId/:entity/:name",
-            component: () =>
-              import(
-                /* webpackChunkName: "dashboards" */ "@/views/dashboard/Edit.vue"
-              ),
+            component: () => import("@/views/dashboard/Edit.vue"),
             name: "CreateChild",
           },
           {
             path: "/dashboard/:layerId/:entity/:name/tab/:activeTabIndex",
-            component: () =>
-              import(
-                /* webpackChunkName: "dashboards" */ "@/views/dashboard/Edit.vue"
-              ),
+            component: () => import("@/views/dashboard/Edit.vue"),
             name: "CreateActiveTabIndex",
           },
         ],
       },
       {
         path: "",
-        component: () =>
-          import(
-            /* webpackChunkName: "dashboards" */ "@/views/dashboard/Edit.vue"
-          ),
+        component: () => import("@/views/dashboard/Edit.vue"),
         name: "View",
         redirect: "/dashboard/:layerId/:entity/:serviceId/:name",
         meta: {
@@ -94,18 +76,12 @@ export const routesDashboard: Array<RouteRecordRaw> = [
         children: [
           {
             path: "/dashboard/:layerId/:entity/:serviceId/:name",
-            component: () =>
-              import(
-                /* webpackChunkName: "dashboards" */ "@/views/dashboard/Edit.vue"
-              ),
+            component: () => import("@/views/dashboard/Edit.vue"),
             name: "ViewChild",
           },
           {
             path: "/dashboard/:layerId/:entity/:serviceId/:name/tab/:activeTabIndex",
-            component: () =>
-              import(
-                /* webpackChunkName: "dashboards" */ "@/views/dashboard/Edit.vue"
-              ),
+            component: () => import("@/views/dashboard/Edit.vue"),
             name: "ViewActiveTabIndex",
           },
         ],
@@ -114,10 +90,7 @@ export const routesDashboard: Array<RouteRecordRaw> = [
         path: "",
         redirect:
           "/dashboard/related/:layerId/:entity/:serviceId/:destServiceId/:name",
-        component: () =>
-          import(
-            /* webpackChunkName: "dashboards" */ "@/views/dashboard/Edit.vue"
-          ),
+        component: () => import("@/views/dashboard/Edit.vue"),
         name: "ViewServiceRelation",
         meta: {
           notShow: true,
@@ -125,18 +98,12 @@ export const routesDashboard: Array<RouteRecordRaw> = [
         children: [
           {
             path: "/dashboard/related/:layerId/:entity/:serviceId/:destServiceId/:name",
-            component: () =>
-              import(
-                /* webpackChunkName: "dashboards" */ "@/views/dashboard/Edit.vue"
-              ),
+            component: () => import("@/views/dashboard/Edit.vue"),
             name: "ViewServiceRelation",
           },
           {
             path: "/dashboard/related/:layerId/:entity/:serviceId/:destServiceId/:name/tab/:activeTabIndex",
-            component: () =>
-              import(
-                /* webpackChunkName: "dashboards" */ "@/views/dashboard/Edit.vue"
-              ),
+            component: () => import("@/views/dashboard/Edit.vue"),
             name: "ViewServiceRelationActiveTabIndex",
           },
         ],
@@ -144,10 +111,7 @@ export const routesDashboard: Array<RouteRecordRaw> = [
       {
         path: "",
         redirect: "/dashboard/:layerId/:entity/:serviceId/:podId/:name",
-        component: () =>
-          import(
-            /* webpackChunkName: "dashboards" */ "@/views/dashboard/Edit.vue"
-          ),
+        component: () => import("@/views/dashboard/Edit.vue"),
         name: "ViewPod",
         meta: {
           notShow: true,
@@ -155,18 +119,12 @@ export const routesDashboard: Array<RouteRecordRaw> = [
         children: [
           {
             path: "/dashboard/:layerId/:entity/:serviceId/:podId/:name",
-            component: () =>
-              import(
-                /* webpackChunkName: "dashboards" */ "@/views/dashboard/Edit.vue"
-              ),
+            component: () => import("@/views/dashboard/Edit.vue"),
             name: "ViewPod",
           },
           {
             path: "/dashboard/:layerId/:entity/:serviceId/:podId/:name/tab/:activeTabIndex",
-            component: () =>
-              import(
-                /* webpackChunkName: "dashboards" */ "@/views/dashboard/Edit.vue"
-              ),
+            component: () => import("@/views/dashboard/Edit.vue"),
             name: "ViewPodActiveTabIndex",
           },
         ],
@@ -175,10 +133,7 @@ export const routesDashboard: Array<RouteRecordRaw> = [
         path: "",
         redirect:
           "/dashboard/:layerId/:entity/:serviceId/:podId/:destServiceId/:destPodId/:name",
-        component: () =>
-          import(
-            /* webpackChunkName: "dashboards" */ "@/views/dashboard/Edit.vue"
-          ),
+        component: () => import("@/views/dashboard/Edit.vue"),
         name: "PodRelation",
         meta: {
           notShow: true,
@@ -186,18 +141,12 @@ export const routesDashboard: Array<RouteRecordRaw> = [
         children: [
           {
             path: "/dashboard/:layerId/:entity/:serviceId/:podId/:destServiceId/:destPodId/:name",
-            component: () =>
-              import(
-                /* webpackChunkName: "dashboards" */ "@/views/dashboard/Edit.vue"
-              ),
+            component: () => import("@/views/dashboard/Edit.vue"),
             name: "ViewPodRelation",
           },
           {
             path: "/dashboard/:layerId/:entity/:serviceId/:podId/:destServiceId/:destPodId/:name/tab/:activeTabIndex",
-            component: () =>
-              import(
-                /* webpackChunkName: "dashboards" */ "@/views/dashboard/Edit.vue"
-              ),
+            component: () => import("@/views/dashboard/Edit.vue"),
             name: "ViewPodRelationActiveTabIndex",
           },
         ],
@@ -206,10 +155,7 @@ export const routesDashboard: Array<RouteRecordRaw> = [
         path: "",
         redirect:
           "/dashboard/:layerId/:entity/:serviceId/:podId/:processId/:destServiceId/:destPodId/:destProcessId/:name",
-        component: () =>
-          import(
-            /* webpackChunkName: "dashboards" */ "@/views/dashboard/Edit.vue"
-          ),
+        component: () => import("@/views/dashboard/Edit.vue"),
         name: "ProcessRelation",
         meta: {
           notShow: true,
@@ -217,26 +163,17 @@ export const routesDashboard: Array<RouteRecordRaw> = [
         children: [
           {
             path: "/dashboard/:layerId/:entity/:serviceId/:podId/:processId/:destServiceId/:destPodId/:destProcessId/:name",
-            component: () =>
-              import(
-                /* webpackChunkName: "dashboards" */ "@/views/dashboard/Edit.vue"
-              ),
+            component: () => import("@/views/dashboard/Edit.vue"),
             name: "ViewProcessRelation",
           },
           {
             path: "/dashboard/:layerId/:entity/:serviceId/:podId/:processId/:destServiceId/:destPodId/:destProcessId/:name/tab/:activeTabIndex",
-            component: () =>
-              import(
-                /* webpackChunkName: "dashboards" */ "@/views/dashboard/Edit.vue"
-              ),
+            component: () => import("@/views/dashboard/Edit.vue"),
             name: "ViewProcessRelationActiveTabIndex",
           },
           {
             path: "/dashboard/:layerId/:entity/:serviceId/:podId/:processId/:destServiceId/:destPodId/:destProcessId/:name/duration/:duration",
-            component: () =>
-              import(
-                /* webpackChunkName: "dashboards" */ "@/views/dashboard/Edit.vue"
-              ),
+            component: () => import("@/views/dashboard/Edit.vue"),
             name: "ViewProcessRelationDuration",
           },
         ],

src/router/index.ts

@@ -28,7 +28,7 @@ const routes: Array<RouteRecordRaw> = [
 ];
 
 const router = createRouter({
-  history: createWebHistory(process.env.BASE_URL),
+  history: createWebHistory(import.meta.env.BASE_URL),
   routes,
 });
 

src/router/layer.ts

@@ -22,8 +22,7 @@ function layerDashboards() {
     item.component = Layout;
     if (item.children) {
       item.children = item.children.map((d: any) => {
-        d.component = () =>
-          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue");
+        d.component = () => import("@/views/Layer.vue");
         return d;
       });
     }

src/router/setting.ts

@@ -36,8 +36,7 @@ export const routesSetting: Array<RouteRecordRaw> = [
           icon: "settings",
           hasGroup: false,
         },
-        component: () =>
-          import(/* webpackChunkName: "settings" */ "@/views/Settings.vue"),
+        component: () => import("@/views/Settings.vue"),
       },
     ],
   },

src/types/components.d.ts

@@ -21,7 +21,6 @@ declare module '@vue/runtime-core' {
     ElMenuItemGroup: typeof import('element-plus/es')['ElMenuItemGroup']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
-    ElPopconfirm: typeof import('element-plus/es')['ElPopconfirm']
     ElPopover: typeof import('element-plus/es')['ElPopover']
     ElProgress: typeof import('element-plus/es')['ElProgress']
     ElRadio: typeof import('element-plus/es')['ElRadio']

src/views/dashboard/related/network-profiling/components/NewConditions.vue

@@ -50,13 +50,13 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts" setup>
-import { defineProps, reactive } from "vue";
+import { reactive } from "vue";
 import { useI18n } from "vue-i18n";
 import type { PropType } from "vue";
 import { InitTaskField } from "./data";
 import { NetworkProfilingRequest } from "@/types/ebpf";
 
-/* global defineEmits */
+/* global defineEmits, defineProps */
 const emits = defineEmits(["change"]);
 const props = defineProps({
   condition: {

src/vite-env.d.ts

@@ -14,6 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+/// <reference types="vite/client" />
 declare module "*.vue" {
   import { defineComponent } from "vue";
   const Component: ReturnType<typeof defineComponent>;
@@ -27,3 +28,9 @@ declare global {
     axiosCancel: any;
   }
 }
+
+// declare module '*.vue' {
+//   import type { DefineComponent } from 'vue'
+//   const component: DefineComponent<{}, {}, any>
+//   export default component
+// }

tsconfig.json

@@ -16,46 +16,19 @@
  */
  {
   "compilerOptions": {
-    "target": "esnext",
-    "module": "esnext",
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
     "strict": true,
     "jsx": "preserve",
-    "importHelpers": true,
-    "moduleResolution": "node",
-    "experimentalDecorators": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "sourceMap": true,
-    "baseUrl": ".",
-    "allowJs": true,
     "resolveJsonModule": true,
-    "noImplicitThis": false,
-    "types": [
-      "webpack-env",
-      "jest"
-    ],
-    "typeRoots": ["./node_modules/@types/"],
-    "paths": {
-      "@/*": [
-        "src/*"
-      ]
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "lib": ["ESNext", "DOM"],
+    "skipLibCheck": true,
+    "noEmit": true
   },
-    "lib": [
-      "esnext",
-      "dom",
-      "dom.iterable",
-      "scripthost"
-    ]
-  },
-  "include": [
-    "src/**/*.ts",
-    "src/**/*.tsx",
-    "src/**/*.vue",
-    "tests/**/*.ts",
-    "tests/**/*.tsx"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "references": [{ "path": "./tsconfig.node.json" }]
 }

tsconfig.node.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

vite.config.ts

@@ -0,0 +1,77 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { UserConfig, ConfigEnv } from 'vite';
+import vue from "@vitejs/plugin-vue";
+import path from "path";
+import { loadEnv } from "vite";
+import AutoImport from 'unplugin-auto-import/vite';
+import Components from 'unplugin-vue-components/vite';
+import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
+// import monacoEditorPlugin from "vite-plugin-monaco-editor";
+
+
+const OUTPUT_DIR = 'dist';
+// https://vitejs.dev/config/
+export default ({ command, mode }: ConfigEnv): UserConfig => {
+  const root = process.cwd();
+
+  return {
+    plugins: [
+      vue(),
+      // monacoEditorPlugin(null),
+      AutoImport({
+        imports: ["vue"],
+        resolvers: [
+          ElementPlusResolver(),
+        ],
+        // dts: "./src/types/auto-imports.d.ts",
+      }),
+      Components({
+        resolvers: [ElementPlusResolver()],
+        // dts: "./src/types/components.d.ts",
+      }),
+    ],
+    resolve: {
+      extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json", ".vue"],
+      alias: {
+        "@": path.resolve(__dirname, "./src"),
+        "vue-i18n": "vue-i18n/dist/vue-i18n.cjs.js",
+      },
+    },
+    server: {
+      host: true,
+      proxy: {
+        "/graphql": {
+          target: `${loadEnv(mode, process.cwd()).VITE_SW_PROXY_TARGET || "http://127.0.0.1:12800"}`,
+          changeOrigin: true,
+        },
+      },
+    },
+    build: {
+      target: "es2015",
+      outDir: OUTPUT_DIR,
+      terserOptions: {
+        compress: {
+          keep_infinity: true,
+          drop_console: true,
+        },
+      },
+      chunkSizeWarningLimit: 2000,
+    },
+  }
+}

vue.config.js

@@ -1,114 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-const MonacoWebpackPlugin = require("monaco-editor-webpack-plugin");
-const AutoImport = require("unplugin-auto-import/webpack");
-const Components = require("unplugin-vue-components/webpack");
-const { ElementPlusResolver } = require("unplugin-vue-components/resolvers");
-
-module.exports = {
-  outputDir: "dist",
-  productionSourceMap: false,
-  devServer: {
-    proxy: {
-      "/graphql": {
-        target: `${process.env.SW_PROXY_TARGET || "http://127.0.0.1:12800"}`,
-        changeOrigin: true,
-      },
-    },
-  },
-  css: {
-    extract: { ignoreOrder: true },
-  },
-  chainWebpack: (config) => {
-    config.plugin("html").tap((args) => {
-      args[0].title = "Apache SkyWalking";
-      return args;
-    });
-    const svgRule = config.module.rule("svg");
-    svgRule.uses.clear();
-    svgRule
-      .use("svg-sprite-loader")
-      .loader("svg-sprite-loader")
-      .options({ symbolId: "[name]" });
-    config.resolve.alias.set("vue-i18n", "vue-i18n/dist/vue-i18n.cjs.js");
-    if (process.env.NODE_ENV === "development") {
-      config.plugins.delete("preload");
-    }
-  },
-  configureWebpack: (config) => {
-    config.performance = {
-      hints: false,
-    };
-    config.optimization = {
-      splitChunks: {
-        chunks: "all",
-        minSize: 20000,
-        minChunks: 1,
-        maxAsyncRequests: 30,
-        maxInitialRequests: 30,
-        enforceSizeThreshold: 50000,
-        cacheGroups: {
-          echarts: {
-            name: "echarts",
-            test: /[\\/]node_modules[\\/]echarts|zrender[\\/]/,
-            priority: 30,
-          },
-          monacoEditor: {
-            name: "monaco-editor",
-            test: /[\\/]node_modules[\\/]monaco-editor[\\/]/,
-            priority: 40,
-          },
-          elementPlus: {
-            name: "element-plus",
-            test: /[\\/]node_modules[\\/]element-plus|@element-plus[\\/]/,
-            priority: 10,
-          },
-          defaultVendors: {
-            name: "chunk-vendors",
-            test: /[\\/]node_modules[\\/]/,
-            priority: -10,
-            chunks: "async",
-          },
-          default: {
-            name: "chunk-commons",
-            minSize: 0,
-            minChunks: 2,
-            priority: -20,
-          },
-        },
-      },
-    };
-    config.plugins.push(
-      AutoImport({
-        imports: ["vue"],
-        resolvers: [
-          ElementPlusResolver({
-            importStyle: "css",
-            exclude: new RegExp(/^(?!.*loading-directive).*$/),
-          }),
-        ],
-        dts: "./src/types/auto-imports.d.ts",
-      }),
-      Components({
-        resolvers: [ElementPlusResolver({ importStyle: "css" })],
-        dts: "./src/types/components.d.ts",
-      }),
-      new MonacoWebpackPlugin()
-    );
-  },
-};