build: migrate the build tool from vue-cli to vite4 (#208)

.eslintignore

@@ -0,0 +1,33 @@
+#
+# 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.
+#
+
+*.sh
+node_modules
+*.md
+*.woff
+*.ttf
+.vscode
+.idea
+dist
+/public
+/docs
+.husky
+.local
+/bin
+Dockerfile

.eslintrc.cjs

@@ -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.
+ */
+
+require("@rushstack/eslint-patch/modern-module-resolution");
+
+module.exports = {
+  root: true,
+  extends: [
+    "plugin:vue/vue3-essential",
+    "eslint:recommended",
+    "@vue/eslint-config-typescript",
+    "@vue/eslint-config-prettier",
+  ],
+  overrides: [
+    {
+      files: ["cypress/e2e/**/*.{cy,spec}.{js,ts,jsx,tsx}"],
+      extends: ["plugin:cypress/recommended"],
+    },
+  ],
+  parserOptions: {
+    ecmaVersion: "latest",
+  },
+  env: {
+    browser: true,
+    node: true,
+  },
+  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",
+    "vue/multi-word-component-names": "off",
+  },
+};

.github/workflows/nodejs.yml

@@ -37,7 +37,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [12.x, 14.x, 16.x]
+        node-version: [14.x, 16.x, 18.x]
     steps:
       - uses: actions/checkout@v1
       - name: Use Node.js ${{ matrix.node-version }}

.gitignore

@@ -16,24 +16,39 @@
 # 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
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
 
 # Editor directories and files
 .idea

.husky/commit-msg

@@ -0,0 +1,27 @@
+#
+# 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.
+#
+
+#!/bin/sh
+
+# shellcheck source=./_/husky.sh
+. "$(dirname "$0")/_/husky.sh"
+
+PATH="/usr/local/bin:$PATH"
+
+npx --no-install commitlint --edit "$1"

.husky/common.sh

@@ -0,0 +1,27 @@
+#
+# 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.
+#
+
+#!/bin/sh
+command_exists () {
+  command -v "$1" >/dev/null 2>&1
+}
+
+if command_exists winpty && test -t 1; then
+  exec < /dev/tty
+fi

.husky/pre-commit

@@ -0,0 +1,29 @@
+#
+# 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.
+#
+
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+. "$(dirname "$0")/common.sh"
+
+[ -n "$CI" ] && exit 0
+
+PATH="/usr/local/bin:$PATH"
+
+# Format and submit code according to lintstagedrc configuration
+npm run lint:lint-staged

.stylelintignore

@@ -0,0 +1,22 @@
+#
+# 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.
+#
+
+/dist/*
+/public/*
+public/*

commitlint.config.js

@@ -0,0 +1,50 @@
+/**
+ * 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 = {
+  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",
+      ],
+    ],
+  },
+};

cypress.config.ts

@@ -0,0 +1,25 @@
+/**
+ * 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 { defineConfig } from "cypress";
+
+export default defineConfig({
+  e2e: {
+    specPattern: "cypress/e2e/**/*.{cy,spec}.{js,jsx,ts,tsx}",
+    baseUrl: "http://localhost:4173",
+  },
+});

cypress/e2e/example.cy.ts

@@ -14,6 +14,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-module.exports = {
-  presets: ["@vue/cli-plugin-babel/preset"],
-};
+describe("My First Test", () => {
+  it("visits the app root url", () => {
+    cy.visit("/");
+    cy.contains("h1", "You did it!");
+  });
+});

cypress/e2e/tsconfig.json

@@ -0,0 +1,26 @@
+/**
+ * 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.
+ */
+{
+  "extends": "@vue/tsconfig/tsconfig.web.json",
+  "include": ["./**/*", "../support/**/*"],
+  "compilerOptions": {
+    "isolatedModules": false,
+    "target": "es5",
+    "lib": ["es5", "dom"],
+    "types": ["cypress"]
+  }
+}

cypress/fixtures/example.json

@@ -14,7 +14,8 @@
  * 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$/);
-requireAll(req);
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/support/commands.ts

@@ -0,0 +1,55 @@
+/**
+ * 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.
+ */
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }
+
+export {};

cypress/support/e2e.ts

@@ -0,0 +1,37 @@
+/**
+ * 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.
+ */
+
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import "./commands";
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

env.d.ts

@@ -0,0 +1,26 @@
+/**
+ * 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.
+ */
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_SW_PROXY_TARGET: string;
+  readonly VITE_DROP_CONSOLE: boolean;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

index.html

@@ -15,17 +15,13 @@ 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>
+    <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>
-    <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 -->
+    <script type="module" src="/src/main.ts"></script>
   </body>
 </html>

package.json

@@ -1,13 +1,20 @@
 {
   "name": "skywalking-booster-ui",
-  "version": "9.3.0",
+  "version": "9.4.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": "run-p type-check build-only",
+    "preview": "vite preview",
+    "test:unit": "vitest --environment jsdom --root src/",
+    "test:e2e:dev": "start-server-and-test 'vite dev --port 4173' :4173 'cypress open --e2e'",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
+    "lint:prettier": "prettier --write  \"src/**/*.{js,json,tsx,css,less,scss,vue,html,md}\"",
+    "lint:stylelint": "stylelint --cache --fix \"**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/",
+    "lint:lint-staged": "lint-staged",
+    "prepare": "husky install"
   },
   "dependencies": {
     "axios": "^0.24.0",
@@ -17,132 +24,76 @@
     "echarts": "^5.2.2",
     "element-plus": "^2.0.2",
     "lodash": "^4.17.21",
-    "monaco-editor": "^0.27.0",
-    "pinia": "^2.0.5",
+    "monaco-editor": "^0.34.1",
+    "pinia": "^2.0.28",
     "vis-timeline": "^7.5.1",
-    "vue": "^3.0.0",
+    "vue": "^3.2.45",
     "vue-grid-layout": "^3.0.0-beta1",
     "vue-i18n": "^9.1.9",
-    "vue-router": "^4.0.0-0",
+    "vue-router": "^4.1.6",
     "vue-types": "^4.1.1"
   },
   "devDependencies": {
+    "@commitlint/cli": "^17.3.0",
+    "@commitlint/config-conventional": "^17.3.0",
+    "@rushstack/eslint-patch": "^1.1.4",
     "@types/d3": "^7.1.0",
     "@types/d3-tip": "^3.5.5",
     "@types/echarts": "^4.9.12",
-    "@types/jest": "^24.0.19",
+    "@types/jsdom": "^20.0.1",
     "@types/lodash": "^4.14.179",
+    "@types/node": "^18.11.12",
     "@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",
-    "@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-plugin-prettier": "^3.3.1",
-    "eslint-plugin-vue": "^7.0.0",
-    "husky": "^7.0.4",
+    "@vitejs/plugin-vue": "^4.0.0",
+    "@vitejs/plugin-vue-jsx": "^3.0.0",
+    "@vue/eslint-config-prettier": "^7.0.0",
+    "@vue/eslint-config-typescript": "^11.0.0",
+    "@vue/test-utils": "^2.2.6",
+    "@vue/tsconfig": "^0.1.3",
+    "@vueuse/core": "^9.6.0",
+    "cypress": "^12.0.2",
+    "eslint": "^8.22.0",
+    "eslint-plugin-cypress": "^2.12.1",
+    "eslint-plugin-vue": "^9.3.0",
+    "husky": "^8.0.2",
+    "jsdom": "^20.0.3",
     "lint-staged": "^12.1.3",
-    "monaco-editor-webpack-plugin": "^4.1.2",
-    "node-sass": "^6.0.1",
+    "node-sass": "^8.0.0",
+    "npm-run-all": "^4.1.5",
     "postcss-html": "^1.3.0",
     "postcss-scss": "^4.0.2",
-    "prettier": "^2.2.1",
-    "sass-loader": "^10.2.0",
+    "prettier": "^2.7.1",
+    "sass": "^1.56.1",
+    "start-server-and-test": "^1.15.2",
     "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",
+    "typescript": "~4.7.4",
     "unplugin-auto-import": "^0.7.0",
     "unplugin-vue-components": "^0.19.2",
-    "vue-jest": "^5.0.0-0"
+    "vite": "^4.0.0",
+    "vite-plugin-monaco-editor": "^1.1.0",
+    "vite-plugin-svg-icons": "^2.0.1",
+    "vitest": "^0.25.6",
+    "vue-tsc": "^1.0.12"
   },
-  "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"
-  },
   "lint-staged": {
-    "*.{js,jsx,ts,tsx}": [
-      "eslint --fix",
-      "prettier --write"
-    ],
-    "*.vue": [
-      "eslint --fix",
-      "prettier --write",
-      "stylelint --fix --custom-syntax postcss-html"
+    "*.{js,jsx,ts,tsx,vue,scss,less}": [
+      "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
+      "prettier --write  \"src/**/*.{js,tsx,css,less,scss,vue,html,md}\"",
+      "stylelint --cache --fix \"**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/"
     ],
     "{!(package)*.json,*.code-snippets,.!(browserslist)*rc}": [
-      "prettier --write--parser json"
-    ],
-    "package.json": [
       "prettier --write"
     ],
-    "*.{scss,less,styl}": [
-      "stylelint --fix",
+    "package.json": [
       "prettier --write"
     ],
     "*.md": [

postcss.config.js

@@ -14,8 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 module.exports = {
-  plugins: {
   autoprefixer: {},
-  },
 };

prettier.config.js

@@ -0,0 +1,26 @@
+/**
+ * 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 = {
+  printWidth: 120,
+  semi: true,
+  vueIndentScriptAndStyle: true,
+  trailingComma: "all",
+  proseWrap: "never",
+  htmlWhitespaceSensitivity: "strict",
+  endOfLine: "auto",
+};

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 = import.meta.glob("./technologies/*.png", { eager: true });
+const requireTool = import.meta.glob("./tools/*.png", { eager: true });
 const result: { [key: string]: string } = {};
 const t: { [key: string]: string } = {};
 
@@ -24,25 +24,19 @@ function capitalizeFirstLetter(str: string) {
 }
 function validateFileName(str: string): string | undefined {
   if (/^\S+\.png$/.test(str)) {
-    return str.replace(/^\S+\/(\w+)\.png$/, (rs, $1) =>
-      capitalizeFirstLetter($1)
-    );
+    return str.replace(/^\S+\/(\w+)\.png$/, (rs, $1) => capitalizeFirstLetter($1));
   }
 }
-[...requireComponent.keys()].forEach((filePath: string) => {
-  const componentConfig = requireComponent(filePath);
-
+Object.keys(requireComponent).forEach((filePath: string) => {
   const fileName = validateFileName(filePath);
   if (fileName) {
-    result[fileName] = componentConfig;
+    result[fileName] = (requireComponent as { [key: string]: any })[filePath].default;
   }
 });
-[...requireTool.keys()].forEach((filePath: string) => {
-  const componentConfig = requireTool(filePath);
-
+Object.keys(requireTool).forEach((filePath: string) => {
   const fileName = validateFileName(filePath);
   if (fileName) {
-    t[fileName] = componentConfig;
+    t[fileName] = (requireTool as { [key: string]: any })[filePath].default;
   }
 });
 

src/components/DateCalendar.vue

@@ -15,35 +15,18 @@ limitations under the License. -->
 <template>
   <div :class="`${state.pre}`">
     <div :class="`${state.pre}-head`">
-      <a
-        :class="`${state.pre}-prev-decade-btn`"
-        v-show="state.showYears"
-        @click="state.year -= 10"
-      >
+      <a :class="`${state.pre}-prev-decade-btn`" v-show="state.showYears" @click="state.year -= 10">
         <Icon size="sm" iconName="angle-double-left" />
       </a>
-      <a
-        :class="`${state.pre}-prev-year-btn`"
-        v-show="!state.showYears"
-        @click="state.year--"
-      >
+      <a :class="`${state.pre}-prev-year-btn`" v-show="!state.showYears" @click="state.year--">
         <Icon size="sm" iconName="angle-double-left" />
       </a>
-      <a
-        :class="`${state.pre}-prev-month-btn`"
-        v-show="!state.showYears && !state.showMonths"
-        @click="pm"
-      >
+      <a :class="`${state.pre}-prev-month-btn`" v-show="!state.showYears && !state.showMonths" @click="pm">
         <Icon size="middle" iconName="chevron-left" />
       </a>
-      <a :class="`${state.pre}-year-select`" v-show="state.showYears">{{
-        ys + "-" + ye
-      }}</a>
+      <a :class="`${state.pre}-year-select`" v-show="state.showYears">{{ ys + "-" + ye }}</a>
       <template v-if="local.yearSuffix">
-        <a
-          :class="`${state.pre}-year-select`"
-          @click="state.showYears = !state.showYears"
-          v-show="!state.showYears"
+        <a :class="`${state.pre}-year-select`" @click="state.showYears = !state.showYears" v-show="!state.showYears"
           >{{ state.year }}{{ local.yearSuffix }}</a
         >
         <a
@@ -60,54 +43,29 @@ limitations under the License. -->
           v-show="!state.showYears && !state.showMonths"
           >{{ local.monthsHead[state.month] }}</a
         >
-        <a
-          :class="`${state.pre}-year-select`"
-          @click="state.showYears = !state.showYears"
-          v-show="!state.showYears"
-          >{{ state.year }}</a
-        >
+        <a :class="`${state.pre}-year-select`" @click="state.showYears = !state.showYears" v-show="!state.showYears">{{
+          state.year
+        }}</a>
       </template>
-      <a
-        :class="`${state.pre}-next-month-btn`"
-        v-show="!state.showYears && !state.showMonths"
-        @click="nm"
-      >
+      <a :class="`${state.pre}-next-month-btn`" v-show="!state.showYears && !state.showMonths" @click="nm">
         <Icon size="middle" iconName="chevron-right" />
       </a>
-      <a
-        :class="`${state.pre}-next-year-btn`"
-        v-show="!state.showYears"
-        @click="state.year++"
-      >
+      <a :class="`${state.pre}-next-year-btn`" v-show="!state.showYears" @click="state.year++">
         <Icon size="sm" iconName="angle-double-right" />
       </a>
-      <a
-        :class="`${state.pre}-next-decade-btn`"
-        v-show="state.showYears"
-        @click="state.year += 10"
-      >
+      <a :class="`${state.pre}-next-decade-btn`" v-show="state.showYears" @click="state.year += 10">
         <Icon size="sm" iconName="angle-double-right" />
       </a>
     </div>
     <div :class="`${state.pre}-body`">
       <div :class="`${state.pre}-days`">
-        <a :class="`${state.pre}-week`" v-for="i in local.weeks" :key="i">{{
-          i
-        }}</a>
+        <a :class="`${state.pre}-week`" v-for="i in local.weeks" :key="i">{{ i }}</a>
         <a
           v-for="(j, i) in days"
           @click="is($event) && ((state.day = j.i), ok(j))"
           :class="[
             j.p || j.n ? `${state.pre}-date-out` : '',
-            status(
-              j.y,
-              j.m,
-              j.i,
-              state.hour,
-              state.minute,
-              state.second,
-              'YYYYMMDD'
-            ),
+            status(j.y, j.m, j.i, state.hour, state.minute, state.second, 'YYYYMMDD'),
           ]"
           :key="i"
           >{{ j.i }}</a
@@ -116,23 +74,8 @@ limitations under the License. -->
       <div :class="`${state.pre}-months`" v-show="state.showMonths">
         <a
           v-for="(i, j) in local.months"
-          @click="
-            is($event) &&
-              ((state.showMonths = state.m === 'M'),
-              (state.month = j),
-              state.m === 'M' && ok('m'))
-          "
-          :class="[
-            status(
-              state.year,
-              j,
-              state.day,
-              state.hour,
-              state.minute,
-              state.second,
-              'YYYYMM'
-            ),
-          ]"
+          @click="is($event) && ((state.showMonths = state.m === 'M'), (state.month = j), state.m === 'M' && ok('m'))"
+          :class="[status(state.year, j, state.day, state.hour, state.minute, state.second, 'YYYYMM')]"
           :key="j"
           >{{ i }}</a
         >
@@ -140,23 +83,10 @@ limitations under the License. -->
       <div :class="`${state.pre}-years`" v-show="state.showYears">
         <a
           v-for="(i, j) in years"
-          @click="
-            is($event) &&
-              ((state.showYears = state.m === 'Y'),
-              (state.year = i),
-              state.m === 'Y' && ok('y'))
-          "
+          @click="is($event) && ((state.showYears = state.m === 'Y'), (state.year = i), state.m === 'Y' && ok('y'))"
           :class="[
             j === 0 || j === 11 ? `${state.pre}-date-out` : '',
-            status(
-              i,
-              state.month,
-              state.day,
-              state.hour,
-              state.minute,
-              state.second,
-              'YYYY'
-            ),
+            status(i, state.month, state.day, state.hour, state.minute, state.second, 'YYYY'),
           ]"
           :key="j"
           >{{ i }}</a
@@ -167,21 +97,8 @@ limitations under the License. -->
         <div class="scroll_hide calendar-overflow">
           <a
             v-for="(j, i) in 24"
-            @click="
-              is($event) &&
-                ((state.showHours = false), (state.hour = i), ok('h'))
-            "
-            :class="[
-              status(
-                state.year,
-                state.month,
-                state.day,
-                i,
-                state.minute,
-                state.second,
-                'YYYYMMDDHH'
-              ),
-            ]"
+            @click="is($event) && ((state.showHours = false), (state.hour = i), ok('h'))"
+            :class="[status(state.year, state.month, state.day, i, state.minute, state.second, 'YYYYMMDDHH')]"
             :key="i"
             >{{ i }}</a
           >
@@ -192,21 +109,8 @@ limitations under the License. -->
         <div class="scroll_hide calendar-overflow">
           <a
             v-for="(j, i) in 60"
-            @click="
-              is($event) &&
-                ((state.showMinutes = false), (state.minute = i), ok('h'))
-            "
-            :class="[
-              status(
-                state.year,
-                state.month,
-                state.day,
-                state.hour,
-                i,
-                state.second,
-                'YYYYMMDDHHmm'
-              ),
-            ]"
+            @click="is($event) && ((state.showMinutes = false), (state.minute = i), ok('h'))"
+            :class="[status(state.year, state.month, state.day, state.hour, i, state.second, 'YYYYMMDDHHmm')]"
             :key="i"
             >{{ i }}</a
           >
@@ -217,21 +121,8 @@ limitations under the License. -->
         <div class="scroll_hide calendar-overflow">
           <a
             v-for="(j, i) in 60"
-            @click="
-              is($event) &&
-                ((state.showSeconds = false), (state.second = i), ok('h'))
-            "
-            :class="[
-              status(
-                state.year,
-                state.month,
-                state.day,
-                state.hour,
-                state.minute,
-                i,
-                'YYYYMMDDHHmmss'
-              ),
-            ]"
+            @click="is($event) && ((state.showSeconds = false), (state.second = i), ok('h'))"
+            :class="[status(state.year, state.month, state.day, state.hour, state.minute, i, 'YYYYMMDDHHmmss')]"
             :key="i"
             >{{ i }}</a
           >
@@ -242,20 +133,14 @@ limitations under the License. -->
       <div :class="`${state.pre}-hour`">
         <a
           :title="local.hourTip"
-          @click="
-            (state.showHours = !state.showHours),
-              (state.showMinutes = state.showSeconds = false)
-          "
+          @click="(state.showHours = !state.showHours), (state.showMinutes = state.showSeconds = false)"
           :class="{ on: state.showHours }"
           >{{ dd(state.hour) }}</a
         >
         <span>:</span>
         <a
           :title="local.minuteTip"
-          @click="
-            (state.showMinutes = !state.showMinutes),
-              (state.showHours = state.showSeconds = false)
-          "
+          @click="(state.showMinutes = !state.showMinutes), (state.showHours = state.showSeconds = false)"
           :class="{ on: state.showMinutes }"
           >{{ dd(state.minute) }}</a
         >
@@ -263,10 +148,7 @@ limitations under the License. -->
           <span>:</span>
           <a
             :title="local.secondTip"
-            @click="
-              (state.showSeconds = !state.showSeconds),
-                (state.showHours = state.showMinutes = false)
-            "
+            @click="(state.showSeconds = !state.showSeconds), (state.showHours = state.showMinutes = false)"
             :class="{ on: state.showSeconds }"
             >{{ dd(state.second) }}</a
           >
@@ -348,7 +230,7 @@ watch(
       state.hour = time.hour;
       state.minute = time.minute;
       state.second = time.second;
-  }
+    },
   );
   const parse = (num: number): number => {
     return num / 100000;
@@ -440,17 +322,10 @@ const status = (
     hour: number,
     minute: number,
     second: number,
-  format: string
+    format: string,
   ) => {
     const maxDay = new Date(year, month + 1, 0).getDate();
-  const time: any = new Date(
-    year,
-    month,
-    day > maxDay ? maxDay : day,
-    hour,
-    minute,
-    second
-  );
+    const time: any = new Date(year, month, day > maxDay ? maxDay : day, hour, minute, second);
     const t = parse(time);
     const tf = (time?: Date, format?: any): string => {
       if (!time) {
@@ -482,10 +357,7 @@ const status = (
         s: seconds,
         S: milliseconds,
       };
-    return (format || props.format).replace(
-      /Y+|M+|D+|H+|h+|m+|s+|S+/g,
-      (str: string) => map[str]
-    );
+      return (format || props.format).replace(/Y+|M+|D+|H+|h+|m+|s+|S+/g, (str: string) => map[str]);
     };
     const classObj: any = {};
     let flag = false;
@@ -497,10 +369,8 @@ const status = (
       flag = tf(props.value, format) === tf(time, format);
     }
     classObj[`${state.pre}-date`] = true;
-  classObj[`${state.pre}-date-disabled`] =
-    (props.right && t < start.value) || props.disabledDate(time, format);
-  classObj[`${state.pre}-date-on`] =
-    (props.left && t > start.value) || (props.right && t < end.value);
+    classObj[`${state.pre}-date-disabled`] = (props.right && t < start.value) || props.disabledDate(time, format);
+    classObj[`${state.pre}-date-on`] = (props.left && t > start.value) || (props.right && t < end.value);
     classObj[`${state.pre}-date-selected`] = flag;
     return classObj;
   };
@@ -544,7 +414,7 @@ const ok = (info: any) => {
       day ? Number(day) : state.day,
       state.hour,
       state.minute,
-    state.second
+      state.second,
     );
     if (props.left && _time.getTime() / 100000 < end.value) {
       emit("setDates", _time, "left");

src/components/Graph.vue

@@ -19,11 +19,7 @@ limitations under the License. -->
       <div class="tools" @click="associateMetrics" v-if="associate.length">
         {{ t("associateMetrics") }}
       </div>
-      <div
-        class="tools"
-        @click="viewTrace"
-        v-if="relatedTrace && relatedTrace.enableRelate"
-      >
+      <div class="tools" @click="viewTrace" v-if="relatedTrace && relatedTrace.enableRelate">
         {{ t("viewTrace") }}
       </div>
     </div>
@@ -40,19 +36,11 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts" setup>
-import {
-  watch,
-  ref,
-  Ref,
-  onMounted,
-  onBeforeUnmount,
-  unref,
-  computed,
-} from "vue";
-import type { PropType } from "vue";
+  import { watch, ref, onMounted, onBeforeUnmount, unref, computed } from "vue";
+  import type { PropType, Ref } from "vue";
   import { useI18n } from "vue-i18n";
-import { EventParams } from "@/types/app";
-import { Filters, RelatedTrace } from "@/types/dashboard";
+  import type { EventParams } from "@/types/app";
+  import type { Filters, RelatedTrace } from "@/types/dashboard";
   import { useECharts } from "@/hooks/useEcharts";
   import { addResizeListener, removeResizeListener } from "@/utils/event";
   import Trace from "@/views/dashboard/related/trace/Index.vue";
@@ -64,9 +52,7 @@ const { t } = useI18n();
   const chartRef = ref<Nullable<HTMLDivElement>>(null);
   const menus = ref<Nullable<HTMLDivElement>>(null);
   const visMenus = ref<boolean>(false);
-const { setOptions, resize, getInstance } = useECharts(
-  chartRef as Ref<HTMLDivElement>
-);
+  const { setOptions, resize, getInstance } = useECharts(chartRef as Ref<HTMLDivElement>);
   const currentParams = ref<Nullable<EventParams>>(null);
   const showTrace = ref<boolean>(false);
   const traceOptions = ref<{ type: string; filters?: unknown }>({
@@ -92,10 +78,8 @@ const props = defineProps({
   });
   const available = computed(
     () =>
-    (Array.isArray(props.option.series) &&
-      props.option.series[0] &&
-      props.option.series[0].data) ||
-    (Array.isArray(props.option.series.data) && props.option.series.data[0])
+      (Array.isArray(props.option.series) && props.option.series[0] && props.option.series[0].data) ||
+      (Array.isArray(props.option.series.data) && props.option.series.data[0]),
   );
   onMounted(async () => {
     await setOptions(props.option);
@@ -141,7 +125,7 @@ function instanceEvent() {
             currTrigger: "leave",
           });
         },
-      true
+        true,
       );
     }, 1000);
   }
@@ -207,13 +191,13 @@ watch(
         options = eventAssociate();
       }
       setOptions(options || props.option);
-  }
+    },
   );
   watch(
     () => props.filters,
     () => {
       updateOptions();
-  }
+    },
   );
 
   onBeforeUnmount(() => {

src/components/Icon.vue

@@ -24,12 +24,10 @@ limitations under the License. -->
       loading,
     }"
   >
-    <use :xlink:href="`#${iconName}`"></use>
+    <use :href="`#${iconName}`"></use>
   </svg>
 </template>
 <script lang="ts" setup>
-import "@/assets/icons/index";
-
   /*global defineProps */
   defineProps({
     iconName: { type: String, default: "" },

src/components/Radio.vue

@@ -23,16 +23,16 @@ limitations under the License. -->
   import { ref } from "vue";
   import type { PropType } from "vue";
 
-interface Option {
-  label: string | number;
-  value: string | number;
-}
-
   /*global  defineProps, defineEmits */
   const emit = defineEmits(["change"]);
   const props = defineProps({
     options: {
-    type: Array as PropType<Option[]>,
+      type: Array as PropType<
+        {
+          label: string | number;
+          value: string | number;
+        }[]
+      >,
       default: () => [],
     },
     value: {

src/components/SelectSingle.vue

@@ -19,9 +19,7 @@ limitations under the License. -->
         {{ selected.label }}
       </span>
       <span class="no-data" v-else>Please select a option</span>
-      <span class="remove-icon" @click="removeSelected" v-if="clearable">
-        ×
-      </span>
+      <span class="remove-icon" @click="removeSelected" v-if="clearable"> × </span>
     </div>
     <div class="opt-wrapper" v-show="visible">
       <div
@@ -39,7 +37,7 @@ limitations under the License. -->
 <script lang="ts" setup>
   import { ref, watch } from "vue";
   import type { PropType } from "vue";
-import { Option } from "@/types/app";
+  import type { Option } from "@/types/app";
 
   /*global  defineProps, defineEmits*/
   const emit = defineEmits(["change"]);
@@ -71,7 +69,7 @@ watch(
     (data) => {
       const opt = props.options.find((d: Option) => data === d.value);
       selected.value = opt || { label: "", value: "" };
-  }
+    },
   );
   document.body.addEventListener("click", handleClick, false);
 

src/components/Selector.vue

@@ -27,12 +27,7 @@ limitations under the License. -->
     :remote-method="remoteMethod"
     :filterable="filterable"
   >
-    <el-option
-      v-for="item in options"
-      :key="item.value || ''"
-      :label="item.label || ''"
-      :value="item.value || ''"
-    >
+    <el-option v-for="item in options" :key="item.value || ''" :label="item.label || ''" :value="item.value || ''">
     </el-option>
   </el-select>
 </template>
@@ -40,16 +35,21 @@ limitations under the License. -->
   import { ref, watch } from "vue";
   import type { PropType } from "vue";
 
-interface Option {
-  label: string | number;
-  value: string | number;
-}
+  // interface Option {
+  //   label: string | number;
+  //   value: string | number;
+  // }
 
   /*global  defineProps, defineEmits*/
   const emit = defineEmits(["change", "query"]);
   const props = defineProps({
     options: {
-    type: Array as PropType<(Option & { disabled?: boolean })[]>,
+      type: Array as PropType<
+        ({
+          label: string | number;
+          value: string | number;
+        } & { disabled?: boolean })[]
+      >,
       default: () => [],
     },
     value: {
@@ -72,9 +72,7 @@ const props = defineProps({
   const selected = ref<string[] | string>(props.value);
   function changeSelected() {
     const options = props.options.filter((d: any) =>
-    props.multiple
-      ? selected.value.includes(d.value)
-      : selected.value === d.value
+      props.multiple ? selected.value.includes(d.value) : selected.value === d.value,
     );
     emit("change", options);
   }
@@ -89,7 +87,7 @@ watch(
     () => props.value,
     (data) => {
       selected.value = data;
-  }
+    },
   );
 </script>
 <style lang="scss" scoped>

src/components/TimePicker.vue

@@ -35,56 +35,28 @@ limitations under the License. -->
     <transition name="datepicker-anim">
       <div
         class="datepicker-popup"
-        :class="[
-          popupClass,
-          { 'datepicker-inline': type === 'inline' },
-          position,
-        ]"
+        :class="[popupClass, { 'datepicker-inline': type === 'inline' }, position]"
         tabindex="-1"
         v-if="show || type === 'inline'"
       >
         <template v-if="range">
           <div class="datepicker-popup__sidebar">
-            <button
-              type="button"
-              class="datepicker-popup__shortcut"
-              @click="quickPick('quarter')"
-            >
+            <button type="button" class="datepicker-popup__shortcut" @click="quickPick('quarter')">
               {{ local.quarterHourCutTip }}
             </button>
-            <button
-              type="button"
-              class="datepicker-popup__shortcut"
-              @click="quickPick('half')"
-            >
+            <button type="button" class="datepicker-popup__shortcut" @click="quickPick('half')">
               {{ local.halfHourCutTip }}
             </button>
-            <button
-              type="button"
-              class="datepicker-popup__shortcut"
-              @click="quickPick('hour')"
-            >
+            <button type="button" class="datepicker-popup__shortcut" @click="quickPick('hour')">
               {{ local.hourCutTip }}
             </button>
-            <button
-              type="button"
-              class="datepicker-popup__shortcut"
-              @click="quickPick('day')"
-            >
+            <button type="button" class="datepicker-popup__shortcut" @click="quickPick('day')">
               {{ local.dayCutTip }}
             </button>
-            <button
-              type="button"
-              class="datepicker-popup__shortcut"
-              @click="quickPick('week')"
-            >
+            <button type="button" class="datepicker-popup__shortcut" @click="quickPick('week')">
               {{ local.weekCutTip }}
             </button>
-            <button
-              type="button"
-              class="datepicker-popup__shortcut"
-              @click="quickPick('month')"
-            >
+            <button type="button" class="datepicker-popup__shortcut" @click="quickPick('month')">
               {{ local.monthCutTip }}
             </button>
           </div>
@@ -123,16 +95,10 @@ limitations under the License. -->
           />
         </template>
         <div v-if="showButtons" class="datepicker__buttons">
-          <button
-            @click.prevent.stop="cancel"
-            class="datepicker__button-cancel"
-          >
+          <button @click.prevent.stop="cancel" class="datepicker__button-cancel">
             {{ local.cancelTip }}
           </button>
-          <button
-            @click.prevent.stop="submit"
-            class="datepicker__button-select"
-          >
+          <button @click.prevent.stop="submit" class="datepicker__button-select">
             {{ local.submitTip }}
           </button>
         </div>
@@ -234,19 +200,14 @@ const tf = (time: Date, format?: any): string => {
       s: seconds,
       S: milliseconds,
     };
-  return (format || props.format).replace(
-    /Y+|M+|D+|H+|h+|m+|s+|S+/g,
-    (str: string) => map[str]
-  );
+    return (format || props.format).replace(/Y+|M+|D+|H+|h+|m+|s+|S+/g, (str: string) => map[str]);
   };
   const range = computed(() => {
     return dates.value.length === 2;
   });
   const text = computed(() => {
     const val = props.value;
-  const txt = dates.value
-    .map((date: Date) => tf(date))
-    .join(` ${props.rangeSeparator} `);
+    const txt = dates.value.map((date: Date) => tf(date)).join(` ${props.rangeSeparator} `);
     if (Array.isArray(val)) {
       return val.length > 1 ? txt : "";
     }
@@ -261,9 +222,7 @@ const cls = () => {
   };
   const vi = (val: any) => {
     if (Array.isArray(val)) {
-    return val.length > 1
-      ? val.map((item) => new Date(item))
-      : [new Date(), new Date()];
+      return val.length > 1 ? val.map((item) => new Date(item)) : [new Date(), new Date()];
     }
     return val ? [new Date(val)] : [new Date()];
   };
@@ -332,7 +291,7 @@ watch(
     () => props.value,
     (val: unknown) => {
       dates.value = vi(val);
-  }
+    },
   );
 </script>
 

src/components/__tests__/HelloWorld.spec.ts

@@ -0,0 +1,33 @@
+/**
+ * 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 { describe, it } from "vitest";
+
+// import { mount } from '@vue/test-utils'
+// import HelloWorld from '../HelloWorld.vue'
+
+// describe('HelloWorld', () => {
+//   it('renders properly', () => {
+//     const wrapper = mount(HelloWorld, { props: { msg: 'Hello Vitest' } })
+//     expect(wrapper.text()).toContain('Hello Vitest')
+//   })
+// })
+describe("My First Test", () => {
+  it("renders props.msg when passed", () => {
+    const msg = "new message";
+    console.log(msg);
+  });
+});

src/graphql/fetch.ts

@@ -14,22 +14,18 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import axios, { AxiosResponse } from "axios";
+import type { AxiosResponse } from "axios";
+import axios from "axios";
 import { cancelToken } from "@/utils/cancelToken";
 
-async function query(param: {
-  queryStr: string;
-  conditions: { [key: string]: unknown };
-}) {
+async function query(param: { queryStr: string; conditions: { [key: string]: unknown } }) {
   const res: AxiosResponse = await axios.post(
     "/graphql",
     { query: param.queryStr, variables: { ...param.conditions } },
-    { cancelToken: cancelToken() }
+    { cancelToken: cancelToken() },
   );
   if (res.data.errors) {
-    res.data.errors = res.data.errors
-      .map((e: { message: string }) => e.message)
-      .join(" ");
+    res.data.errors = res.data.errors.map((e: { message: string }) => e.message).join(" ");
   }
   return res;
 }

src/graphql/fragments/alarm.ts

@@ -16,8 +16,7 @@
  */
 
 export const Alarm = {
-  variable:
-    "$keyword: String, $scope: Scope, $duration:Duration!, $tags:[AlarmTag], $paging: Pagination!",
+  variable: "$keyword: String, $scope: Scope, $duration:Duration!, $tags:[AlarmTag], $paging: Pagination!",
   query: `
     getAlarm(keyword: $keyword, scope: $scope, duration: $duration, paging: $paging, tags: $tags) {
       items: msgs {

src/graphql/fragments/ebpf.ts

@@ -33,8 +33,7 @@ export const createEBPFTask = {
   }`,
 };
 export const queryEBPFTasks = {
-  variable:
-    "$serviceId: ID, $serviceInstanceId: ID, $targets: [EBPFProfilingTargetType!]",
+  variable: "$serviceId: ID, $serviceInstanceId: ID, $targets: [EBPFProfilingTargetType!]",
   query: `
   queryEBPFTasks: queryEBPFProfilingTasks(serviceId: $serviceId, serviceInstanceId: $serviceInstanceId, targets: $targets) {
     taskId

src/graphql/fragments/topology.ts

@@ -53,8 +53,7 @@ export const EndpointTopology = {
   }`,
 };
 export const InstanceTopology = {
-  variable:
-    "$clientServiceId: ID!, $serverServiceId: ID!, $duration: Duration!",
+  variable: "$clientServiceId: ID!, $serverServiceId: ID!, $duration: Duration!",
   query: `
   topology: getServiceInstanceTopology(clientServiceId: $clientServiceId,
     serverServiceId: $serverServiceId, duration: $duration) {

src/graphql/index.ts

@@ -14,7 +14,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import axios, { AxiosPromise, AxiosResponse } from "axios";
+import type { AxiosPromise, AxiosResponse } from "axios";
+import axios from "axios";
 import { cancelToken } from "@/utils/cancelToken";
 import * as app from "./query/app";
 import * as selector from "./query/selector";
@@ -55,13 +56,11 @@ class Graphql {
           query: query[this.queryData],
           variables: variablesData,
         },
-        { cancelToken: cancelToken() }
+        { cancelToken: cancelToken() },
       )
       .then((res: AxiosResponse) => {
         if (res.data.errors) {
-          res.data.errors = res.data.errors
-            .map((e: { message: string }) => e.message)
-            .join(" ");
+          res.data.errors = res.data.errors.map((e: { message: string }) => e.message).join(" ");
         }
         return res;
       })

src/graphql/query/topology.ts

@@ -14,12 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import {
-  InstanceTopology,
-  EndpointTopology,
-  ServicesTopology,
-  ProcessTopology,
-} from "../fragments/topology";
+import { InstanceTopology, EndpointTopology, ServicesTopology, ProcessTopology } from "../fragments/topology";
 
 export const getInstanceTopology = `query queryData(${InstanceTopology.variable}) {${InstanceTopology.query}}`;
 export const getEndpointTopology = `query queryData(${EndpointTopology.variable}) {${EndpointTopology.query}}`;

src/graphql/query/trace.ts

@@ -15,12 +15,7 @@
  * limitations under the License.
  */
 
-import {
-  Traces,
-  TraceSpans,
-  TraceTagKeys,
-  TraceTagValues,
-} from "../fragments/trace";
+import { Traces, TraceSpans, TraceTagKeys, TraceTagValues } from "../fragments/trace";
 
 export const queryTraces = `query queryTraces(${Traces.variable}) {${Traces.query}}`;
 

src/hooks/useAssociateProcessor.ts

@@ -17,7 +17,7 @@
 import { useAppStoreWithOut } from "@/store/modules/app";
 import dateFormatStep from "@/utils/dateFormat";
 import getLocalTime from "@/utils/localtime";
-import { EventParams } from "@/types/app";
+import type { EventParams } from "@/types/app";
 
 export default function associateProcessor(props: any) {
   function eventAssociate() {
@@ -30,9 +30,7 @@ export default function associateProcessor(props: any) {
     if (!props.option.series[0]) {
       return;
     }
-    const list = props.option.series[0].data.map(
-      (d: (number | string)[]) => d[0]
-    );
+    const list = props.option.series[0].data.map((d: (number | string)[]) => d[0]);
     if (!list.includes(props.filters.duration.endTime)) {
       return;
     }
@@ -77,16 +75,8 @@ export default function associateProcessor(props: any) {
     if (start) {
       const end = start;
       duration = {
-        start: dateFormatStep(
-          getLocalTime(appStore.utc, new Date(start)),
-          step,
-          true
-        ),
-        end: dateFormatStep(
-          getLocalTime(appStore.utc, new Date(end)),
-          step,
-          true
-        ),
+        start: dateFormatStep(getLocalTime(appStore.utc, new Date(start)), step, true),
+        end: dateFormatStep(getLocalTime(appStore.utc, new Date(end)), step, true),
         step,
       };
     }
@@ -101,36 +91,27 @@ export default function associateProcessor(props: any) {
       status,
     };
     if (latency) {
-      const latencyList = series.map(
-        (d: { name: string; data: number[][] }, index: number) => {
+      const latencyList = series.map((d: { name: string; data: number[][] }, index: number) => {
         const data = [
           d.data[currentParams.dataIndex][1],
-            series[index + 1]
-              ? series[index + 1].data[currentParams.dataIndex][1]
-              : Infinity,
+          series[index + 1] ? series[index + 1].data[currentParams.dataIndex][1] : Infinity,
         ];
         return {
-            label:
-              d.name +
-              "--" +
-              (series[index + 1] ? series[index + 1].name : "Infinity"),
+          label: d.name + "--" + (series[index + 1] ? series[index + 1].name : "Infinity"),
           value: String(index),
           data,
         };
-        }
-      );
+      });
       item.latency = latencyList;
     }
-    const value = series.map(
-      (d: { name: string; data: number[][] }, index: number) => {
+    const value = series.map((d: { name: string; data: number[][] }, index: number) => {
       return {
         label: d.name,
         value: String(index),
         data: d.data[currentParams.dataIndex][1],
         date: d.data[currentParams.dataIndex][0],
       };
-      }
-    );
+    });
     item.metricValue = value;
     return item;
   }

src/hooks/useBreakpoint.ts

@@ -14,7 +14,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { ref, computed, ComputedRef, unref } from "vue";
+import type { ComputedRef } from "vue";
+import { ref, computed, unref } from "vue";
 import { useEventListener } from "./useEventListener";
 import { screenMap, sizeEnum, screenEnum } from "./data";
 
@@ -40,9 +41,7 @@ export function useBreakpoint(): any {
   };
 }
 
-export function createBreakpointListen(
-  fn?: (opt: CreateCallbackParams) => void
-): any {
+export function createBreakpointListen(fn?: (opt: CreateCallbackParams) => void): any {
   const screenRef = ref<sizeEnum>(sizeEnum.XL || "");
   const realWidthRef = ref(window.innerWidth);
 

src/hooks/useDashboardsSession.ts

@@ -16,19 +16,15 @@
  */
 import { ElMessage } from "element-plus";
 import { useDashboardStore } from "@/store/modules/dashboard";
-import { LayoutConfig } from "@/types/dashboard";
+import type { LayoutConfig } from "@/types/dashboard";
 
-export default function getDashboard(param?: {
-  name: string;
-  layer: string;
-  entity: string;
-}) {
+export default function getDashboard(param?: { name: string; layer: string; entity: string }) {
   const dashboardStore = useDashboardStore();
   const opt = param || dashboardStore.currentDashboard;
   const list = JSON.parse(sessionStorage.getItem("dashboards") || "[]");
   const dashboard = list.find(
     (d: { name: string; layer: string; entity: string }) =>
-      d.name === opt.name && d.entity === opt.entity && d.layer === opt.layer
+      d.name === opt.name && d.entity === opt.entity && d.layer === opt.layer,
   );
   const all = dashboardStore.layout;
   const widgets: LayoutConfig[] = [];

src/hooks/useEcharts.ts

@@ -14,13 +14,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import {
-  BarSeriesOption,
-  LineSeriesOption,
-  HeatmapSeriesOption,
-  SankeySeriesOption,
-} from "echarts/charts";
-import {
+import type { BarSeriesOption, LineSeriesOption, HeatmapSeriesOption, SankeySeriesOption } from "echarts/charts";
+import type {
   TitleComponentOption,
   TooltipComponentOption,
   GridComponentOption,
@@ -48,10 +43,7 @@ export type ECOption = echarts.ComposeOption<
   | SankeySeriesOption
 >;
 
-export function useECharts(
-  elRef: Ref<HTMLDivElement>,
-  theme: "light" | "dark" | "default" = "default"
-): any {
+export function useECharts(elRef: Ref<HTMLDivElement>, theme: "light" | "dark" | "default" = "default"): any {
   const getDarkMode = computed(() => {
     return theme === "default" ? "light" : theme;
   });
@@ -131,7 +123,7 @@ export function useECharts(
         initCharts(theme as "default");
         setOptions(cacheOptions.value);
       }
-    }
+    },
   );
 
   tryOnUnmounted(() => {

src/hooks/useEventListener.ts

@@ -43,16 +43,13 @@ export function useEventListener({
   if (el) {
     const element = ref(el as Element) as Ref<Element>;
 
-    const handler = isDebounce
-      ? useDebounceFn(listener, wait)
-      : useThrottleFn(listener, wait);
+    const handler = isDebounce ? useDebounceFn(listener, wait) : useThrottleFn(listener, wait);
     const realHandler = wait ? handler : listener;
     const removeEventListener = (e: Element) => {
       isAddRef.value = true;
       e.removeEventListener(name, realHandler, options);
     };
-    const addEventListener = (e: Element) =>
-      e.addEventListener(name, realHandler, options);
+    const addEventListener = (e: Element) => e.addEventListener(name, realHandler, options);
 
     const removeWatch = watch(
       element,
@@ -64,7 +61,7 @@ export function useEventListener({
           });
         }
       },
-      { immediate: true }
+      { immediate: true },
     );
 
     remove = () => {

src/hooks/useLegendProcessor.ts

@@ -14,7 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { LegendOptions } from "@/types/dashboard";
+import type { LegendOptions } from "@/types/dashboard";
 import { isDef } from "@/utils/is";
 
 export default function useLegendProcess(legend?: LegendOptions) {
@@ -37,14 +37,9 @@ export default function useLegendProcess(legend?: LegendOptions) {
     }
     return true;
   }
-  function aggregations(
-    data: { [key: string]: number[] },
-    intervalTime: string[]
-  ) {
+  function aggregations(data: { [key: string]: number[] }, intervalTime: string[]) {
     const source: { [key: string]: unknown }[] = [];
-    const keys = Object.keys(data || {}).filter(
-      (i: any) => Array.isArray(data[i]) && data[i].length
-    );
+    const keys = Object.keys(data || {}).filter((i: any) => Array.isArray(data[i]) && data[i].length);
     const headers = [];
 
     for (const [key, value] of keys.entries()) {
@@ -58,12 +53,7 @@ export default function useLegendProcess(legend?: LegendOptions) {
               value: d,
             };
           })
-          .sort(
-            (
-              a: { key: string; value: number },
-              b: { key: string; value: number }
-            ) => b.value - a.value
-          )
+          .sort((a: { key: string; value: number }, b: { key: string; value: number }) => b.value - a.value)
           .filter((_: unknown, index: number) => index < 10),
       };
       if (legend) {

src/hooks/useListConfig.ts

@@ -17,25 +17,14 @@
 import { MetricQueryTypes, Calculations } from "./data";
 export function useListConfig(config: any, index: string) {
   const i = Number(index);
-  const types = [
-    Calculations.Average,
-    Calculations.ApdexAvg,
-    Calculations.PercentageAvg,
-  ];
-  const calculation =
-    config.metricConfig &&
-    config.metricConfig[i] &&
-    config.metricConfig[i].calculation;
+  const types = [Calculations.Average, Calculations.ApdexAvg, Calculations.PercentageAvg];
+  const calculation = config.metricConfig && config.metricConfig[i] && config.metricConfig[i].calculation;
   const isLinear =
-    [
-      MetricQueryTypes.ReadMetricsValues,
-      MetricQueryTypes.ReadLabeledMetricsValues,
-    ].includes(config.metricTypes[i]) && !types.includes(calculation);
+    [MetricQueryTypes.ReadMetricsValues, MetricQueryTypes.ReadLabeledMetricsValues].includes(config.metricTypes[i]) &&
+    !types.includes(calculation);
   const isAvg =
-    [
-      MetricQueryTypes.ReadMetricsValues,
-      MetricQueryTypes.ReadLabeledMetricsValues,
-    ].includes(config.metricTypes[i]) && types.includes(calculation);
+    [MetricQueryTypes.ReadMetricsValues, MetricQueryTypes.ReadLabeledMetricsValues].includes(config.metricTypes[i]) &&
+    types.includes(calculation);
   return {
     isLinear,
     isAvg,

src/hooks/useMetricsProcessor.ts

@@ -20,8 +20,8 @@ import { ElMessage } from "element-plus";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { useSelectorStore } from "@/store/modules/selectors";
 import { useAppStoreWithOut } from "@/store/modules/app";
-import { Instance, Endpoint, Service } from "@/types/selector";
-import { MetricConfigOpt } from "@/types/dashboard";
+import type { Instance, Endpoint, Service } from "@/types/selector";
+import type { MetricConfigOpt } from "@/types/dashboard";
 import { MetricCatalog } from "@/views/dashboard/data";
 
 export function useQueryProcessor(config: any) {
@@ -42,33 +42,21 @@ export function useQueryProcessor(config: any) {
     duration: appStore.durationTime,
   };
   const variables: string[] = [`$duration: Duration!`];
-  const isRelation = [
-    "ServiceRelation",
-    "ServiceInstanceRelation",
-    "EndpointRelation",
-    "ProcessRelation",
-  ].includes(dashboardStore.entity);
+  const isRelation = ["ServiceRelation", "ServiceInstanceRelation", "EndpointRelation", "ProcessRelation"].includes(
+    dashboardStore.entity,
+  );
   if (isRelation && !selectorStore.currentDestService) {
     return;
   }
   const fragment = config.metrics.map((name: string, index: number) => {
     const metricType = config.metricTypes[index] || "";
     const c = (config.metricConfig && config.metricConfig[index]) || {};
-    if (
-      [
-        MetricQueryTypes.ReadSampledRecords,
-        MetricQueryTypes.SortMetrics,
-      ].includes(metricType)
-    ) {
+    if ([MetricQueryTypes.ReadSampledRecords, MetricQueryTypes.SortMetrics].includes(metricType)) {
       variables.push(`$condition${index}: TopNCondition!`);
       conditions[`condition${index}`] = {
         name,
-        parentService: ["All"].includes(dashboardStore.entity)
-          ? null
-          : selectorStore.currentService.value,
-        normal: selectorStore.currentService
-          ? selectorStore.currentService.normal
-          : true,
+        parentService: ["All"].includes(dashboardStore.entity) ? null : selectorStore.currentService.value,
+        normal: selectorStore.currentService ? selectorStore.currentService.normal : true,
         scope: config.catalog,
         topN: c.topN || 10,
         order: c.sortOrder || "DES",
@@ -76,19 +64,11 @@ export function useQueryProcessor(config: any) {
     } else {
       const entity = {
         scope: config.catalog,
-        serviceName:
-          dashboardStore.entity === "All"
-            ? undefined
-            : selectorStore.currentService.value,
-        normal:
-          dashboardStore.entity === "All"
-            ? undefined
-            : selectorStore.currentService.normal,
-        serviceInstanceName: [
-          "ServiceInstance",
-          "ServiceInstanceRelation",
-          "ProcessRelation",
-        ].includes(dashboardStore.entity)
+        serviceName: dashboardStore.entity === "All" ? undefined : selectorStore.currentService.value,
+        normal: dashboardStore.entity === "All" ? undefined : selectorStore.currentService.normal,
+        serviceInstanceName: ["ServiceInstance", "ServiceInstanceRelation", "ProcessRelation"].includes(
+          dashboardStore.entity,
+        )
           ? selectorStore.currentPod && selectorStore.currentPod.value
           : undefined,
         endpointName: dashboardStore.entity.includes("Endpoint")
@@ -97,16 +77,9 @@ export function useQueryProcessor(config: any) {
         processName: dashboardStore.entity.includes("Process")
           ? selectorStore.currentProcess && selectorStore.currentProcess.value
           : undefined,
-        destNormal: isRelation
-          ? selectorStore.currentDestService.normal
-          : undefined,
-        destServiceName: isRelation
-          ? selectorStore.currentDestService.value
-          : undefined,
-        destServiceInstanceName: [
-          "ServiceInstanceRelation",
-          "ProcessRelation",
-        ].includes(dashboardStore.entity)
+        destNormal: isRelation ? selectorStore.currentDestService.normal : undefined,
+        destServiceName: isRelation ? selectorStore.currentDestService.value : undefined,
+        destServiceInstanceName: ["ServiceInstanceRelation", "ProcessRelation"].includes(dashboardStore.entity)
           ? selectorStore.currentDestPod && selectorStore.currentDestPod.value
           : undefined,
         destEndpointName:
@@ -114,8 +87,7 @@ export function useQueryProcessor(config: any) {
             ? selectorStore.currentDestPod && selectorStore.currentDestPod.value
             : undefined,
         destProcessName: dashboardStore.entity.includes("ProcessRelation")
-          ? selectorStore.currentDestProcess &&
-            selectorStore.currentDestProcess.value
+          ? selectorStore.currentDestProcess && selectorStore.currentDestProcess.value
           : undefined,
       };
       if ([MetricQueryTypes.ReadRecords].includes(metricType)) {
@@ -129,9 +101,7 @@ export function useQueryProcessor(config: any) {
       } else {
         entity.scope = dashboardStore.entity;
         if (metricType === MetricQueryTypes.ReadLabeledMetricsValues) {
-          const labels = (c.labelsIndex || "")
-            .split(",")
-            .map((item: string) => item.replace(/^\s*|\s*$/g, ""));
+          const labels = (c.labelsIndex || "").split(",").map((item: string) => item.replace(/^\s*|\s*$/g, ""));
           variables.push(`$labels${index}: [String!]!`);
           conditions[`labels${index}`] = labels;
         }
@@ -161,7 +131,7 @@ export function useSourceProcessor(
     metrics: string[];
     metricTypes: string[];
     metricConfig: MetricConfigOpt[];
-  }
+  },
 ) {
   if (resp.errors) {
     ElMessage.error(resp.errors);
@@ -179,23 +149,14 @@ export function useSourceProcessor(
     const c = (config.metricConfig && config.metricConfig[index]) || {};
 
     if (type === MetricQueryTypes.ReadMetricsValues) {
-      source[c.label || m] =
-        (resp.data[keys[index]] &&
-          calculateExp(resp.data[keys[index]].values.values, c)) ||
-        [];
+      source[c.label || m] = (resp.data[keys[index]] && calculateExp(resp.data[keys[index]].values.values, c)) || [];
     }
     if (type === MetricQueryTypes.ReadLabeledMetricsValues) {
       const resVal = Object.values(resp.data)[0] || [];
-      const labels = (c.label || "")
-        .split(",")
-        .map((item: string) => item.replace(/^\s*|\s*$/g, ""));
-      const labelsIdx = (c.labelsIndex || "")
-        .split(",")
-        .map((item: string) => item.replace(/^\s*|\s*$/g, ""));
+      const labels = (c.label || "").split(",").map((item: string) => item.replace(/^\s*|\s*$/g, ""));
+      const labelsIdx = (c.labelsIndex || "").split(",").map((item: string) => item.replace(/^\s*|\s*$/g, ""));
       for (const item of resVal) {
-        const values = item.values.values.map((d: { value: number }) =>
-          aggregation(Number(d.value), c)
-        );
+        const values = item.values.values.map((d: { value: number }) => aggregation(Number(d.value), c));
         const indexNum = labelsIdx.findIndex((d: string) => d === item.label);
         if (labels[indexNum] && indexNum > -1) {
           source[labels[indexNum]] = values;
@@ -209,20 +170,14 @@ export function useSourceProcessor(
     }
     if (
       (
-        [
-          MetricQueryTypes.ReadRecords,
-          MetricQueryTypes.ReadSampledRecords,
-          MetricQueryTypes.SortMetrics,
-        ] as string[]
+        [MetricQueryTypes.ReadRecords, MetricQueryTypes.ReadSampledRecords, MetricQueryTypes.SortMetrics] as string[]
       ).includes(type)
     ) {
-      source[m] = (Object.values(resp.data)[0] || []).map(
-        (d: { value: unknown; name: string }) => {
+      source[m] = (Object.values(resp.data)[0] || []).map((d: { value: unknown; name: string }) => {
         d.value = aggregation(Number(d.value), c);
 
         return d;
-        }
-      );
+      });
     }
     if (type === MetricQueryTypes.READHEATMAP) {
       const resVal = Object.values(resp.data)[0] || {};
@@ -238,12 +193,7 @@ export function useSourceProcessor(
       });
       let buckets = [] as any;
       if (resVal.buckets.length) {
-        buckets = [
-          resVal.buckets[0].min,
-          ...resVal.buckets.map(
-            (item: { min: string; max: string }) => item.max
-          ),
-        ];
+        buckets = [resVal.buckets[0].min, ...resVal.buckets.map((item: { min: string; max: string }) => item.max)];
       }
 
       source[m] = { nodes, buckets }; // nodes: number[][]
@@ -260,7 +210,7 @@ export function useQueryPodsMetrics(
     metricTypes: string[];
     metricConfig: MetricConfigOpt[];
   },
-  scope: string
+  scope: string,
 ) {
   const metricTypes = (config.metricTypes || []).filter((m: string) => m);
   if (!metricTypes.length) {
@@ -277,11 +227,7 @@ export function useQueryPodsMetrics(
   };
   const variables: string[] = [`$duration: Duration!`];
   const currentService = selectorStore.currentService || {};
-  const fragmentList = pods.map(
-    (
-      d: (Instance | Endpoint | Service) & { normal: boolean },
-      index: number
-    ) => {
+  const fragmentList = pods.map((d: (Instance | Endpoint | Service) & { normal: boolean }, index: number) => {
     const param = {
       scope,
       serviceName: scope === "Service" ? d.label : currentService.label,
@@ -301,16 +247,13 @@ export function useQueryPodsMetrics(
         const c = config.metricConfig[idx] || {};
         variables.push(`$labels${index}${idx}: [String!]!`);
         labelStr = `labels: $labels${index}${idx}, `;
-          const labels = (c.labelsIndex || "")
-            .split(",")
-            .map((item: string) => item.replace(/^\s*|\s*$/g, ""));
+        const labels = (c.labelsIndex || "").split(",").map((item: string) => item.replace(/^\s*|\s*$/g, ""));
         conditions[`labels${index}${idx}`] = labels;
       }
       return `${name}${index}${idx}: ${metricType}(condition: $condition${index}${idx}, ${labelStr}duration: $duration)${RespFields[metricType]}`;
     });
     return f;
-    }
-  );
+  });
   const fragment = fragmentList.flat(1).join(" ");
   const queryStr = `query queryData(${variables}) {${fragment}}`;
 
@@ -324,7 +267,7 @@ export function usePodsSource(
     metrics: string[];
     metricTypes: string[];
     metricConfig: MetricConfigOpt[];
-  }
+  },
 ): any {
   if (resp.errors) {
     ElMessage.error(resp.errors);
@@ -347,39 +290,23 @@ export function usePodsSource(
       }
       if (config.metricTypes[index] === MetricQueryTypes.ReadMetricsValues) {
         d[name] = {};
-        if (
-          [
-            Calculations.Average,
-            Calculations.ApdexAvg,
-            Calculations.PercentageAvg,
-          ].includes(c.calculation)
-        ) {
+        if ([Calculations.Average, Calculations.ApdexAvg, Calculations.PercentageAvg].includes(c.calculation)) {
           d[name]["avg"] = calculateExp(resp.data[key].values.values, c);
         }
-        d[name]["values"] = resp.data[key].values.values.map(
-          (val: { value: number }) => aggregation(val.value, c)
-        );
+        d[name]["values"] = resp.data[key].values.values.map((val: { value: number }) => aggregation(val.value, c));
         if (idx === 0) {
           names.push(name);
           metricConfigArr.push(c);
           metricTypesArr.push(config.metricTypes[index]);
         }
       }
-      if (
-        config.metricTypes[index] === MetricQueryTypes.ReadLabeledMetricsValues
-      ) {
+      if (config.metricTypes[index] === MetricQueryTypes.ReadLabeledMetricsValues) {
         const resVal = resp.data[key] || [];
-        const labels = (c.label || "")
-          .split(",")
-          .map((item: string) => item.replace(/^\s*|\s*$/g, ""));
-        const labelsIdx = (c.labelsIndex || "")
-          .split(",")
-          .map((item: string) => item.replace(/^\s*|\s*$/g, ""));
+        const labels = (c.label || "").split(",").map((item: string) => item.replace(/^\s*|\s*$/g, ""));
+        const labelsIdx = (c.labelsIndex || "").split(",").map((item: string) => item.replace(/^\s*|\s*$/g, ""));
         for (let i = 0; i < resVal.length; i++) {
           const item = resVal[i];
-          const values = item.values.values.map((d: { value: number }) =>
-            aggregation(Number(d.value), c)
-          );
+          const values = item.values.values.map((d: { value: number }) => aggregation(Number(d.value), c));
           const indexNum = labelsIdx.findIndex((d: string) => d === item.label);
           let key = item.label;
           if (labels[indexNum] && indexNum > -1) {
@@ -388,13 +315,7 @@ export function usePodsSource(
           if (!d[key]) {
             d[key] = {};
           }
-          if (
-            [
-              Calculations.Average,
-              Calculations.ApdexAvg,
-              Calculations.PercentageAvg,
-            ].includes(c.calculation)
-          ) {
+          if ([Calculations.Average, Calculations.ApdexAvg, Calculations.PercentageAvg].includes(c.calculation)) {
             d[key]["avg"] = calculateExp(item.values.values, c);
           }
           d[key]["values"] = values;
@@ -435,13 +356,8 @@ export function useQueryTopologyMetrics(metrics: string[], ids: string[]) {
 
   return { queryStr, conditions };
 }
-function calculateExp(
-  arr: { value: number }[],
-  config: { calculation?: string }
-): (number | string)[] {
-  const sum = arr
-    .map((d: { value: number }) => d.value)
-    .reduce((a, b) => a + b);
+function calculateExp(arr: { value: number }[], config: { calculation?: string }): (number | string)[] {
+  const sum = arr.map((d: { value: number }) => d.value).reduce((a, b) => a + b);
   let data: (number | string)[] = [];
   switch (config.calculation) {
     case Calculations.Average:
@@ -460,10 +376,7 @@ function calculateExp(
   return data;
 }
 
-export function aggregation(
-  val: number,
-  config: { calculation?: string }
-): number | string {
+export function aggregation(val: number, config: { calculation?: string }): number | string {
   let data: number | string = Number(val);
 
   switch (config.calculation) {
@@ -518,11 +431,9 @@ export async function useGetMetricEntity(metric: string, metricType: any) {
   let catalog = "";
   const dashboardStore = useDashboardStore();
   if (
-    [
-      MetricQueryTypes.ReadSampledRecords,
-      MetricQueryTypes.SortMetrics,
-      MetricQueryTypes.ReadRecords,
-    ].includes(metricType)
+    [MetricQueryTypes.ReadSampledRecords, MetricQueryTypes.SortMetrics, MetricQueryTypes.ReadRecords].includes(
+      metricType,
+    )
   ) {
     const res = await dashboardStore.fetchMetricList(metric);
     if (res.errors) {

src/hooks/useTimeout.ts

@@ -18,11 +18,7 @@ import { ref, watch } from "vue";
 import { tryOnUnmounted } from "@vueuse/core";
 import { isFunction } from "@/utils/is";
 
-export function useTimeoutFn(
-  handle: Fn<any>,
-  wait: number,
-  native = false
-): any {
+export function useTimeoutFn(handle: Fn<any>, wait: number, native = false): any {
   if (!isFunction(handle)) {
     throw new Error("handle is not Function!");
   }
@@ -36,7 +32,7 @@ export function useTimeoutFn(
       (maturity) => {
         maturity && handle();
       },
-      { immediate: false }
+      { immediate: false },
     );
   }
   return { readyRef, stop, start };

src/layout/components/NavBar.vue

@@ -23,21 +23,12 @@ limitations under the License. -->
         format="YYYY-MM-DD HH:mm"
         @input="changeTimeRange"
       />
-      <span>
-        UTC{{ appStore.utcHour >= 0 ? "+" : ""
-        }}{{ `${appStore.utcHour}:${appStore.utcMin}` }}
-      </span>
+      <span> UTC{{ appStore.utcHour >= 0 ? "+" : "" }}{{ `${appStore.utcHour}:${appStore.utcMin}` }} </span>
       <span title="refresh" class="ghost ml-5 cp" @click="handleReload">
         <Icon iconName="retry" :loading="appStore.autoRefresh" class="middle" />
       </span>
       <span class="version ml-5 cp">
-        <el-popover
-          trigger="hover"
-          width="250"
-          placement="bottom"
-          effect="light"
-          :content="appStore.version"
-        >
+        <el-popover trigger="hover" width="250" placement="bottom" effect="light" :content="appStore.version">
           <template #reference>
             <span>
               <Icon iconName="info_outline" size="middle" />
@@ -69,15 +60,13 @@ const setConfig = (value: string) => {
   };
 
   function handleReload() {
-  const gap =
-    appStore.duration.end.getTime() - appStore.duration.start.getTime();
+    const gap = appStore.duration.end.getTime() - appStore.duration.start.getTime();
     const dates: Date[] = [new Date(new Date().getTime() - gap), new Date()];
     appStore.setDuration(timeFormat(dates));
   }
 
   function changeTimeRange(val: Date[] | any) {
-  timeRange.value =
-    val[1].getTime() - val[0].getTime() > 60 * 24 * 60 * 60 * 1000 ? 1 : 0;
+    timeRange.value = val[1].getTime() - val[0].getTime() > 60 * 24 * 60 * 60 * 1000 ? 1 : 0;
     if (timeRange.value) {
       return;
     }
@@ -88,7 +77,7 @@ watch(
     () => route.meta.title,
     (title: unknown) => {
       setConfig(String(title));
-  }
+    },
   );
   async function getVersion() {
     const res = await appStore.fetchVersion();

src/layout/components/SideBar.vue

@@ -15,10 +15,7 @@ limitations under the License. -->
 <template>
   <div class="side-bar">
     <div :class="isCollapse ? 'logo-icon-collapse' : 'logo-icon'">
-      <Icon
-        :size="isCollapse ? 'xl' : 'logo'"
-        :iconName="isCollapse ? 'logo' : 'logo-sw'"
-      />
+      <Icon :size="isCollapse ? 'xl' : 'logo'" :iconName="isCollapse ? 'logo' : 'logo-sw'" />
     </div>
     <el-menu
       active-text-color="#448dfe"
@@ -43,22 +40,14 @@ limitations under the License. -->
             </router-link>
           </template>
           <el-menu-item-group>
-            <el-menu-item
-              v-for="(m, idx) in filterMenus(menu.children)"
-              :index="m.name"
-              :key="idx"
-            >
+            <el-menu-item v-for="(m, idx) in filterMenus(menu.children)" :index="m.name" :key="idx">
               <router-link class="items" :to="m.path">
                 <span class="title">{{ m.meta && t(m.meta.title) }}</span>
               </router-link>
             </el-menu-item>
           </el-menu-item-group>
         </el-sub-menu>
-        <el-menu-item
-          :index="String(menu.name)"
-          @click="changePage(menu)"
-          v-else
-        >
+        <el-menu-item :index="String(menu.name)" @click="changePage(menu)" v-else>
           <el-icon class="menu-icons" :style="{ marginRight: '12px' }">
             <router-link class="items" :to="menu.children[0].path">
               <Icon size="lg" :iconName="menu.meta.icon" />
@@ -79,18 +68,15 @@ limitations under the License. -->
         color: theme === 'light' ? '#eee' : '#252a2f',
       }"
     >
-      <Icon
-        size="middle"
-        iconName="format_indent_decrease"
-        @click="controlMenu"
-      />
+      <Icon size="middle" iconName="format_indent_decrease" @click="controlMenu" />
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
   import { ref } from "vue";
-import { useRouter, RouteRecordRaw } from "vue-router";
+  import type { RouteRecordRaw } from "vue-router";
+  import { useRouter } from "vue-router";
   import { useI18n } from "vue-i18n";
   import Icon from "@/components/Icon.vue";
   import { useAppStoreWithOut } from "@/store/modules/app";
@@ -98,9 +84,7 @@ import { useAppStoreWithOut } from "@/store/modules/app";
   const appStore = useAppStoreWithOut();
   const { t } = useI18n();
   const name = ref<string>(String(useRouter().currentRoute.value.name));
-const theme = ["VirtualMachine", "Kubernetes"].includes(name.value || "")
-  ? ref("light")
-  : ref("black");
+  const theme = ["VirtualMachine", "Kubernetes"].includes(name.value || "") ? ref("light") : ref("black");
   const routes = ref<RouteRecordRaw[] | any>(useRouter().options.routes);
   if (/Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent)) {
     appStore.setIsMobile(true);
@@ -112,9 +96,7 @@ const controlMenu = () => {
     isCollapse.value = !isCollapse.value;
   };
   const changePage = (menu: RouteRecordRaw) => {
-  theme.value = ["VirtualMachine", "Kubernetes"].includes(String(menu.name))
-    ? "light"
-    : "black";
+    theme.value = ["VirtualMachine", "Kubernetes"].includes(String(menu.name)) ? "light" : "black";
   };
   const filterMenus = (menus: any[]) => {
     return menus.filter((d) => d.meta && !d.meta.notShow);

src/locales/index.ts

@@ -32,6 +32,7 @@ if (!savedLanguage) {
 }
 language = savedLanguage ? savedLanguage : language;
 const i18n = createI18n({
+  legacy: false,
   locale: language,
   messages,
 });

src/locales/lang/en.ts

@@ -176,10 +176,8 @@ const msg = {
   toTheRight: "To The Right",
   legendValues: "Legend Values",
   minDuration: "Minimal Request Duration",
-  when4xx:
-    "Sample HTTP requests and responses with tracing when response code between 400 and 499",
-  when5xx:
-    "Sample HTTP requests and responses with tracing when response code between 500 and 599",
+  when4xx: "Sample HTTP requests and responses with tracing when response code between 400 and 499",
+  when5xx: "Sample HTTP requests and responses with tracing when response code between 500 and 599",
   taskTitle: "HTTP request and response collecting rules",
   seconds: "Seconds",
   hourTip: "Select Hour",
@@ -315,8 +313,7 @@ const msg = {
   viewLogs: "View Logs",
   logsTagsTip: `Only tags defined in the core/default/searchableLogsTags are searchable.
   Check more details on the Configuration Vocabulary page`,
-  keywordsOfContentLogTips:
-    "Current storage of SkyWalking OAP server does not support this.",
+  keywordsOfContentLogTips: "Current storage of SkyWalking OAP server does not support this.",
   setEvent: "Set Event",
   viewAttributes: "View",
   serviceEvents: "Service Events",
@@ -370,8 +367,7 @@ const msg = {
   addKeywordsOfContent: "Please input a keyword of content",
   addExcludingKeywordsOfContent: "Please input a keyword of excluding content",
   noticeTag: "Please press Enter after inputting a tag(key=value).",
-  conditionNotice:
-    "Notice: Please press Enter after inputting a key of content, exclude key of content(key=value).",
+  conditionNotice: "Notice: Please press Enter after inputting a key of content, exclude key of content(key=value).",
   language: "Language",
   gateway: "Gateway",
   virtualMQ: "Virtual MQ",

src/locales/lang/es.ts

@@ -77,10 +77,8 @@ const msg = {
   editGraph: "Editar Opciones",
   dashboardName: "Selecciona Nombre del Panel",
   linkDashboard: "Nombre del panel relacionado con llamadas de la topología",
-  linkServerMetrics:
-    "Métricas de servidor relacionadas con llamadas de la topología",
-  linkClientMetrics:
-    "Métricas de cliente relacionadas con llamadas de la topología",
+  linkServerMetrics: "Métricas de servidor relacionadas con llamadas de la topología",
+  linkClientMetrics: "Métricas de cliente relacionadas con llamadas de la topología",
   nodeDashboard: "Nombre del panel relacionado con nodos de la topología",
   nodeMetrics: "Mêtricas relacionas con nodos de la topología",
   instanceDashboard: "Nombre del panel relacionado con instancias de servicio",
@@ -180,10 +178,8 @@ const msg = {
   asTable: "Como tabla",
   toTheRight: "Derecha",
   minDuration: "Duración mínima de la solicitud",
-  when4xx:
-    "Ejemplo de solicitud y respuesta http con seguimiento cuando el Código de respuesta está entre 400 y 499",
-  when5xx:
-    "Ejemplo de solicitud y respuesta http con seguimiento cuando el Código de respuesta está entre 500 y 599",
+  when4xx: "Ejemplo de solicitud y respuesta http con seguimiento cuando el Código de respuesta está entre 400 y 499",
+  when5xx: "Ejemplo de solicitud y respuesta http con seguimiento cuando el Código de respuesta está entre 500 y 599",
   taskTitle: "Reglas de recolección de peticiones y respuestas HTTP",
   second: "s",
   yearSuffix: "Año",
@@ -315,8 +311,7 @@ const msg = {
   viewLogs: "Ver Registro de Datos",
   logsTagsTip: `Solamente etiquetas definidas en core/default/searchableLogsTags pueden ser buscadas.
   Más información en la página de Vocabulario de Configuración`,
-  keywordsOfContentLogTips:
-    "El almacenamiento actual del servidor SkyWalking OAP no lo soporta.",
+  keywordsOfContentLogTips: "El almacenamiento actual del servidor SkyWalking OAP no lo soporta.",
   setEvent: "Establecer Evento",
   viewAttributes: "Ver",
   serviceEvents: "Eventos Servico",
@@ -347,8 +342,7 @@ const msg = {
   destEndpoint: "Endpoint Destinación",
   eventSource: "Fuente Envento",
   modalTitle: "Inspección",
-  selectRedirectPage:
-    "Quiere inspeccionar las Trazas or Registros de datos del servicio %s?",
+  selectRedirectPage: "Quiere inspeccionar las Trazas or Registros de datos del servicio %s?",
   logAnalysis: "Lenguaje de Análisis de Registro de Datos",
   logDataBody: "Contenido del Registro de Datos",
   addType: "Por favor introduzca un tipo",
@@ -369,10 +363,8 @@ const msg = {
   addTraceID: "Por favor introduzca el ID de la traza",
   addTags: "Por favor introduzaca una etiqueta",
   addKeywordsOfContent: "Por favor introduzca una clave de contenido",
-  addExcludingKeywordsOfContent:
-    "Por favor introduzca una clave excluyente de contenido",
-  noticeTag:
-    "Por favor presione Intro después de introducir una etiqueta(clave=valor).",
+  addExcludingKeywordsOfContent: "Por favor introduzca una clave excluyente de contenido",
+  noticeTag: "Por favor presione Intro después de introducir una etiqueta(clave=valor).",
   conditionNotice:
     "Aviso: Por favor presione Intro después de introducir una clave de contenido, excluir clave de contenido(clave=valor).",
   language: "Lenguaje",

src/locales/lang/zh.ts

@@ -282,12 +282,9 @@ const msg = {
   chartType: "图表类型",
   currentDepth: "当前深度",
   defaultDepth: "默认深度",
-  traceTagsTip:
-    "只有core/default/searchableTracesTags中定义的标记才可搜索。查看配置词汇表页面上的更多详细信息。",
-  logTagsTip:
-    "只有core/default/searchableTracesTags中定义的标记才可搜索。查看配置词汇表页面上的更多详细信息。",
-  alarmTagsTip:
-    "只有core/default/searchableTracesTags中定义的标记才可搜索。查看配置词汇表页面上的更多详细信息。",
+  traceTagsTip: "只有core/default/searchableTracesTags中定义的标记才可搜索。查看配置词汇表页面上的更多详细信息。",
+  logTagsTip: "只有core/default/searchableTracesTags中定义的标记才可搜索。查看配置词汇表页面上的更多详细信息。",
+  alarmTagsTip: "只有core/default/searchableTracesTags中定义的标记才可搜索。查看配置词汇表页面上的更多详细信息。",
   tagsLink: "配置词汇页",
   addTag: "请添加标签",
   logCategory: "日志类别",
@@ -310,8 +307,7 @@ const msg = {
   contentType: "内容类型",
   content: "内容",
   viewLogs: "查看日志",
-  logsTagsTip:
-    "只有core/default/searchableLogsTags中定义的标记才可搜索。查看配置词汇表页面上的更多详细信息。",
+  logsTagsTip: "只有core/default/searchableLogsTags中定义的标记才可搜索。查看配置词汇表页面上的更多详细信息。",
   keywordsOfContentLogTips: "SkyWalking OAP服务器的当前存储不支持此操作",
   setEvent: "设置事件",
   viewAttributes: "查看",
@@ -368,8 +364,7 @@ const msg = {
   addKeywordsOfContent: "请输入一个内容关键词",
   addExcludingKeywordsOfContent: "请输入一个内容不包含的关键词",
   noticeTag: "请输入一个标签(key=value)之后回车",
-  conditionNotice:
-    "请输入一个内容关键词或者内容不包含的关键词(key=value)之后回车",
+  conditionNotice: "请输入一个内容关键词或者内容不包含的关键词(key=value)之后回车",
   language: "语言",
   gateway: "网关",
   virtualMQ: "虚拟消息队列",

src/main.ts

@@ -22,6 +22,7 @@ import components from "@/components";
 import i18n from "./locales";
 import { useAppStoreWithOut } from "@/store/modules/app";
 import "./styles/index.ts";
+import "virtual:svg-icons-register";
 
 const app = createApp(App);
 const appStore = useAppStoreWithOut();

src/router/alarm.ts

@@ -14,7 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { RouteRecordRaw } from "vue-router";
+import type { RouteRecordRaw } from "vue-router";
 import Layout from "@/layout/Index.vue";
 
 export const routesAlarm: Array<RouteRecordRaw> = [
@@ -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

@@ -14,7 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { RouteRecordRaw } from "vue-router";
+import type { RouteRecordRaw } from "vue-router";
 import Layout from "@/layout/Index.vue";
 
 export const routesDashboard: Array<RouteRecordRaw> = [
@@ -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,30 +76,20 @@ 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",
           },
         ],
       },
       {
         path: "",
-        redirect:
-          "/dashboard/related/:layerId/:entity/:serviceId/:destServiceId/:name",
-        component: () =>
-          import(
-            /* webpackChunkName: "dashboards" */ "@/views/dashboard/Edit.vue"
-          ),
+        redirect: "/dashboard/related/:layerId/:entity/:serviceId/:destServiceId/:name",
+        component: () => import("@/views/dashboard/Edit.vue"),
         name: "ViewServiceRelation",
         meta: {
           notShow: true,
@@ -125,18 +97,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 +110,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,30 +118,20 @@ 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",
           },
         ],
       },
       {
         path: "",
-        redirect:
-          "/dashboard/:layerId/:entity/:serviceId/:podId/:destServiceId/:destPodId/:name",
-        component: () =>
-          import(
-            /* webpackChunkName: "dashboards" */ "@/views/dashboard/Edit.vue"
-          ),
+        redirect: "/dashboard/:layerId/:entity/:serviceId/:podId/:destServiceId/:destPodId/:name",
+        component: () => import("@/views/dashboard/Edit.vue"),
         name: "PodRelation",
         meta: {
           notShow: true,
@@ -186,18 +139,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 +153,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 +161,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

@@ -14,21 +14,17 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
+import type { RouteRecordRaw } from "vue-router";
+import { createRouter, createWebHistory } from "vue-router";
 import { routesDashboard } from "./dashboard";
 import { routesSetting } from "./setting";
 import { routesAlarm } from "./alarm";
 import routesLayers from "./layer";
 
-const routes: Array<RouteRecordRaw> = [
-  ...routesLayers,
-  ...routesDashboard,
-  ...routesAlarm,
-  ...routesSetting,
-];
+const routes: Array<RouteRecordRaw> = [...routesLayers, ...routesDashboard, ...routesAlarm, ...routesSetting];
 
 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

@@ -14,7 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { RouteRecordRaw } from "vue-router";
+import type { RouteRecordRaw } from "vue-router";
 import Layout from "@/layout/Index.vue";
 
 export const routesSetting: Array<RouteRecordRaw> = [
@@ -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/store/modules/alarm.ts

@@ -17,8 +17,8 @@
 import { defineStore } from "pinia";
 import { store } from "@/store";
 import graphql from "@/graphql";
-import { AxiosResponse } from "axios";
-import { Alarm } from "@/types/alarm";
+import type { AxiosResponse } from "axios";
+import type { Alarm } from "@/types/alarm";
 
 interface AlarmState {
   loading: boolean;
@@ -35,9 +35,7 @@ export const alarmStore = defineStore({
   }),
   actions: {
     async getAlarms(params: any) {
-      const res: AxiosResponse = await graphql
-        .query("queryAlarms")
-        .params(params);
+      const res: AxiosResponse = await graphql.query("queryAlarms").params(params);
       if (res.data.errors) {
         return res.data;
       }

src/store/modules/app.ts

@@ -17,9 +17,9 @@
 import { defineStore } from "pinia";
 import { store } from "@/store";
 import graphql from "@/graphql";
-import { Duration, DurationTime } from "@/types/app";
+import type { Duration, DurationTime } from "@/types/app";
 import getLocalTime from "@/utils/localtime";
-import { AxiosResponse } from "axios";
+import type { AxiosResponse } from "axios";
 import dateFormatStep, { dateFormatTime } from "@/utils/dateFormat";
 import { TimeType } from "@/constants/data";
 /*global Nullable*/
@@ -92,9 +92,7 @@ export const appStore = defineStore({
               this.duration.start.getMonth());
           break;
       }
-      const utcSpace =
-        (this.utcHour + new Date().getTimezoneOffset() / 60) * 3600000 +
-        this.utcMin * 60000;
+      const utcSpace = (this.utcHour + new Date().getTimezoneOffset() / 60) * 3600000 + this.utcMin * 60000;
       const startUnix: number = this.duration.start.getTime();
       const endUnix: number = this.duration.end.getTime();
       const timeIntervals: number[] = [];
@@ -157,13 +155,11 @@ export const appStore = defineStore({
           this.eventStack.forEach((event: any) => {
             setTimeout(event(), 0);
           }),
-        500
+        500,
       );
     },
     async queryOAPTimeInfo() {
-      const res: AxiosResponse = await graphql
-        .query("queryOAPTimeInfo")
-        .params({});
+      const res: AxiosResponse = await graphql.query("queryOAPTimeInfo").params({});
       if (res.data.errors) {
         this.utc = -(new Date().getTimezoneOffset() / 60) + ":0";
       } else {
@@ -176,9 +172,7 @@ export const appStore = defineStore({
       return res.data;
     },
     async fetchVersion(): Promise<void> {
-      const res: AxiosResponse = await graphql
-        .query("queryOAPVersion")
-        .params({});
+      const res: AxiosResponse = await graphql.query("queryOAPVersion").params({});
       if (res.data.errors) {
         return res.data;
       }

src/store/modules/dashboard.ts

@@ -16,13 +16,13 @@
  */
 import { defineStore } from "pinia";
 import { store } from "@/store";
-import { LayoutConfig } from "@/types/dashboard";
+import type { LayoutConfig } from "@/types/dashboard";
 import graphql from "@/graphql";
 import query from "@/graphql/fetch";
-import { DashboardItem } from "@/types/dashboard";
+import type { DashboardItem } from "@/types/dashboard";
 import { useSelectorStore } from "@/store/modules/selectors";
 import { NewControl, TextConfig, TimeRangeConfig } from "../data";
-import { AxiosResponse } from "axios";
+import type { AxiosResponse } from "axios";
 import { ElMessage } from "element-plus";
 import { useI18n } from "vue-i18n";
 import { EntityType } from "@/views/dashboard/data";
@@ -105,24 +105,10 @@ export const dashboardStore = defineStore({
         newItem.h = 36;
         newItem.graph = {
           showDepth: true,
-          depth:
-            this.entity === EntityType[1].value
-              ? 1
-              : this.entity === EntityType[0].value
-              ? 2
-              : 3,
+          depth: this.entity === EntityType[1].value ? 1 : this.entity === EntityType[0].value ? 2 : 3,
         };
       }
-      if (
-        [
-          "Trace",
-          "Profile",
-          "Log",
-          "DemandLog",
-          "Ebpf",
-          "NetworkProfiling",
-        ].includes(type)
-      ) {
+      if (["Trace", "Profile", "Log", "DemandLog", "Ebpf", "NetworkProfiling"].includes(type)) {
         newItem.h = 36;
       }
       if (type === "Text") {
@@ -156,14 +142,12 @@ export const dashboardStore = defineStore({
     },
     addTabControls(type: string) {
       const activedGridItem = this.activedGridItem.split("-")[0];
-      const idx = this.layout.findIndex(
-        (d: LayoutConfig) => d.i === activedGridItem
-      );
+      const idx = this.layout.findIndex((d: LayoutConfig) => d.i === activedGridItem);
       if (idx < 0) {
         return;
       }
       const tabIndex = this.layout[idx].activedTabIndex || 0;
-      const { children } = this.layout[idx].children[tabIndex];
+      const { children } = (this.layout[idx].children || [])[tabIndex];
       const arr = children.map((d: any) => Number(d.i));
       let index = String(Math.max(...arr) + 1);
       if (!children.length) {
@@ -184,16 +168,7 @@ export const dashboardStore = defineStore({
           showDepth: true,
         };
       }
-      if (
-        [
-          "Trace",
-          "Profile",
-          "Log",
-          "DemandLog",
-          "Ebpf",
-          "NetworkProfiling",
-        ].includes(type)
-      ) {
+      if (["Trace", "Profile", "Log", "DemandLog", "Ebpf", "NetworkProfiling"].includes(type)) {
         newItem.h = 32;
       }
       if (type === "Text") {
@@ -211,7 +186,7 @@ export const dashboardStore = defineStore({
           return d;
         });
         items.push(newItem);
-        this.layout[idx].children[tabIndex].children = items;
+        (this.layout[idx].children || [])[tabIndex].children = items;
         this.currentTabItems = items;
       }
     },
@@ -238,19 +213,15 @@ export const dashboardStore = defineStore({
     },
     removeControls(item: LayoutConfig) {
       const actived = this.activedGridItem.split("-");
-      const index = this.layout.findIndex(
-        (d: LayoutConfig) => actived[0] === d.i
-      );
+      const index = this.layout.findIndex((d: LayoutConfig) => actived[0] === d.i);
 
       if (this.selectedGrid && this.selectedGrid.i === item.i) {
         this.selectedGrid = null;
       }
       if (actived.length === 3) {
         const tabIndex = Number(actived[1]);
-        this.currentTabItems = this.currentTabItems.filter(
-          (d: LayoutConfig) => actived[2] !== d.i
-        );
-        this.layout[index].children[tabIndex].children = this.currentTabItems;
+        this.currentTabItems = this.currentTabItems.filter((d: LayoutConfig) => actived[2] !== d.i);
+        (this.layout[index].children || [])[tabIndex].children = this.currentTabItems;
         return;
       }
       this.layout = this.layout.filter((d: LayoutConfig) => d.i !== item.i);
@@ -258,8 +229,8 @@ export const dashboardStore = defineStore({
     removeTabItem(item: LayoutConfig, index: number) {
       const idx = this.layout.findIndex((d: LayoutConfig) => d.i === item.i);
       if (this.selectedGrid) {
-        for (const item of this.layout[idx].children[index].children) {
-          if (this.selectedGrid.i === item.i) {
+        for (const item of (this.layout[idx].children || [])[index].children) {
+          if (this.selectedGrid?.i === item.i) {
             this.selectedGrid = null;
           }
         }
@@ -285,22 +256,19 @@ export const dashboardStore = defineStore({
     },
     setConfigs(param: { [key: string]: unknown }) {
       const actived = this.activedGridItem.split("-");
-      const index = this.layout.findIndex(
-        (d: LayoutConfig) => actived[0] === d.i
-      );
+      const index = this.layout.findIndex((d: LayoutConfig) => actived[0] === d.i);
       if (actived.length === 3) {
         const tabIndex = Number(actived[1]);
-        const itemIndex = this.layout[index].children[
-          tabIndex
-        ].children.findIndex((d: LayoutConfig) => actived[2] === d.i);
+        const itemIndex = (this.layout[index].children || [])[tabIndex].children.findIndex(
+          (d: LayoutConfig) => actived[2] === d.i,
+        );
 
-        this.layout[index].children[tabIndex].children[itemIndex] = {
-          ...this.layout[index].children[tabIndex].children[itemIndex],
+        (this.layout[index].children || [])[tabIndex].children[itemIndex] = {
+          ...(this.layout[index].children || [])[tabIndex].children[itemIndex],
           ...param,
         };
-        this.selectedGrid =
-          this.layout[index].children[tabIndex].children[itemIndex];
-        this.setCurrentTabItems(this.layout[index].children[tabIndex].children);
+        this.selectedGrid = (this.layout[index].children || [])[tabIndex].children[itemIndex];
+        this.setCurrentTabItems((this.layout[index].children || [])[tabIndex].children);
         return;
       }
       this.layout[index] = {
@@ -312,8 +280,8 @@ export const dashboardStore = defineStore({
     setWidget(param: LayoutConfig) {
       for (let i = 0; i < this.layout.length; i++) {
         if (this.layout[i].type === "Tab") {
-          if (this.layout[i].children && this.layout[i].children.length) {
-            for (const child of this.layout[i].children) {
+          if ((this.layout[i].children || []).length) {
+            for (const child of this.layout[i].children || []) {
               if (child.children && child.children.length) {
                 for (let c = 0; c < child.children.length; c++) {
                   if (child.children[c].id === param.id) {
@@ -332,23 +300,16 @@ export const dashboardStore = defineStore({
       }
     },
     async fetchMetricType(item: string) {
-      const res: AxiosResponse = await graphql
-        .query("queryTypeOfMetrics")
-        .params({ name: item });
+      const res: AxiosResponse = await graphql.query("queryTypeOfMetrics").params({ name: item });
 
       return res.data;
     },
     async fetchMetricList(regex: string) {
-      const res: AxiosResponse = await graphql
-        .query("queryMetrics")
-        .params({ regex });
+      const res: AxiosResponse = await graphql.query("queryMetrics").params({ regex });
 
       return res.data;
     },
-    async fetchMetricValue(param: {
-      queryStr: string;
-      conditions: { [key: string]: unknown };
-    }) {
+    async fetchMetricValue(param: { queryStr: string; conditions: { [key: string]: unknown } }) {
       const res: AxiosResponse = await query(param);
       return res.data;
     },
@@ -371,10 +332,7 @@ export const dashboardStore = defineStore({
           name: c.name,
           isRoot: c.isRoot,
         });
-        sessionStorage.setItem(
-          key,
-          JSON.stringify({ id: t.id, configuration: c })
-        );
+        sessionStorage.setItem(key, JSON.stringify({ id: t.id, configuration: c }));
       }
       list = list.sort((a, b) => {
         const nameA = a.name.toUpperCase();
@@ -399,9 +357,7 @@ export const dashboardStore = defineStore({
           return;
         }
       }
-      this.dashboards = JSON.parse(
-        sessionStorage.getItem("dashboards") || "[]"
-      );
+      this.dashboards = JSON.parse(sessionStorage.getItem("dashboards") || "[]");
     },
     async resetTemplates() {
       const res = await this.fetchTemplates();
@@ -410,9 +366,7 @@ export const dashboardStore = defineStore({
         ElMessage.error(res.errors);
         return;
       }
-      this.dashboards = JSON.parse(
-        sessionStorage.getItem("dashboards") || "[]"
-      );
+      this.dashboards = JSON.parse(sessionStorage.getItem("dashboards") || "[]");
     },
     async updateDashboard(setting: { id: string; configuration: string }) {
       const res: AxiosResponse = await graphql.query("updateTemplate").params({
@@ -431,7 +385,7 @@ export const dashboardStore = defineStore({
       return res.data;
     },
     async saveDashboard() {
-      if (!this.currentDashboard.name) {
+      if (!this.currentDashboard?.name) {
         ElMessage.error("The dashboard name is needed.");
         return;
       }
@@ -452,18 +406,16 @@ export const dashboardStore = defineStore({
         c.isRoot = false;
         const index = this.dashboards.findIndex(
           (d: DashboardItem) =>
-            d.name === this.currentDashboard.name &&
+            d.name === this.currentDashboard?.name &&
             d.entity === this.currentDashboard.entity &&
-            d.layer === this.currentDashboard.layerId
+            d.layer === this.currentDashboard?.layer,
         );
         if (index > -1) {
           const { t } = useI18n();
           ElMessage.error(t("nameError"));
           return;
         }
-        res = await graphql
-          .query("addNewTemplate")
-          .params({ setting: { configuration: JSON.stringify(c) } });
+        res = await graphql.query("addNewTemplate").params({ setting: { configuration: JSON.stringify(c) } });
 
         json = res.data.data.addTemplate;
       }
@@ -478,17 +430,11 @@ export const dashboardStore = defineStore({
       if (!this.currentDashboard.id) {
         ElMessage.success("Saved successfully");
       }
-      const key = [
-        this.currentDashboard.layer,
-        this.currentDashboard.entity,
-        this.currentDashboard.name,
-      ].join("_");
+      const key = [this.currentDashboard.layer, this.currentDashboard.entity, this.currentDashboard.name].join("_");
       this.currentDashboard.id = json.id;
       if (this.currentDashboard.id) {
         sessionStorage.removeItem(key);
-        this.dashboards = this.dashboards.filter(
-          (d: DashboardItem) => d.id !== this.currentDashboard.id
-        );
+        this.dashboards = this.dashboards.filter((d: DashboardItem) => d.id !== this.currentDashboard?.id);
       }
       this.dashboards.push(this.currentDashboard);
       const l = { id: json.id, configuration: c };
@@ -498,9 +444,7 @@ export const dashboardStore = defineStore({
       return json;
     },
     async deleteDashboard() {
-      const res: AxiosResponse = await graphql
-        .query("removeTemplate")
-        .params({ id: this.currentDashboard.id });
+      const res: AxiosResponse = await graphql.query("removeTemplate").params({ id: this.currentDashboard?.id });
 
       if (res.data.errors) {
         ElMessage.error(res.data.errors);
@@ -511,14 +455,8 @@ export const dashboardStore = defineStore({
         ElMessage.error(json.message);
         return res.data;
       }
-      this.dashboards = this.dashboards.filter(
-        (d: any) => d.id !== this.currentDashboard.id
-      );
-      const key = [
-        this.currentDashboard.layer,
-        this.currentDashboard.entity,
-        this.currentDashboard.name,
-      ].join("_");
+      this.dashboards = this.dashboards.filter((d: any) => d.id !== this.currentDashboard?.id);
+      const key = [this.currentDashboard?.layer, this.currentDashboard?.entity, this.currentDashboard?.name].join("_");
       sessionStorage.removeItem(key);
     },
   },

src/store/modules/demand-log.ts

@@ -15,13 +15,13 @@
  * limitations under the License.
  */
 import { defineStore } from "pinia";
-import { Instance } from "@/types/selector";
+import type { Instance } from "@/types/selector";
 import { store } from "@/store";
 import graphql from "@/graphql";
-import { AxiosResponse } from "axios";
+import type { AxiosResponse } from "axios";
 import { useAppStoreWithOut } from "@/store/modules/app";
 import { useSelectorStore } from "@/store/modules/selectors";
-import { Conditions, Log } from "@/types/demand-log";
+import type { Conditions, Log } from "@/types/demand-log";
 
 interface DemandLogState {
   containers: Instance[];
@@ -59,9 +59,7 @@ export const demandLogStore = defineStore({
       this.message = message || "";
     },
     async getInstances(id: string) {
-      const serviceId = this.selectorStore.currentService
-        ? this.selectorStore.currentService.id
-        : id;
+      const serviceId = this.selectorStore.currentService ? this.selectorStore.currentService.id : id;
       const res: AxiosResponse = await graphql.query("queryInstances").params({
         serviceId,
         duration: useAppStoreWithOut().durationTime,
@@ -75,16 +73,12 @@ export const demandLogStore = defineStore({
     },
     async getContainers(serviceInstanceId: string) {
       if (!serviceInstanceId) {
-        return new Promise((resolve) =>
-          resolve({ errors: "No service instance" })
-        );
+        return new Promise((resolve) => resolve({ errors: "No service instance" }));
       }
       const condition = {
         serviceInstanceId,
       };
-      const res: AxiosResponse = await graphql
-        .query("fetchContainers")
-        .params({ condition });
+      const res: AxiosResponse = await graphql.query("fetchContainers").params({ condition });
 
       if (res.data.errors) {
         return res.data;
@@ -100,21 +94,17 @@ export const demandLogStore = defineStore({
     },
     async getDemandLogs() {
       this.loadLogs = true;
-      const res: AxiosResponse = await graphql
-        .query("fetchDemandPodLogs")
-        .params({ condition: this.conditions });
+      const res: AxiosResponse = await graphql.query("fetchDemandPodLogs").params({ condition: this.conditions });
       this.loadLogs = false;
       if (res.data.errors) {
         return res.data;
       }
       if (res.data.data.logs.errorReason) {
-        this.setLogs("", res.data.data.logs.errorReason);
+        this.setLogs([], res.data.data.logs.errorReason);
         return res.data;
       }
       this.total = res.data.data.logs.logs.length;
-      const logs = res.data.data.logs.logs
-        .map((d: Log) => d.content)
-        .join("\n");
+      const logs = res.data.data.logs.logs.map((d: Log) => d.content).join("\n");
       this.setLogs(logs);
       return res.data;
     },

src/store/modules/ebpf.ts

@@ -15,18 +15,13 @@
  * limitations under the License.
  */
 import { defineStore } from "pinia";
-import { Option } from "@/types/app";
-import {
-  EBPFTaskCreationRequest,
-  EBPFProfilingSchedule,
-  EBPFTaskList,
-  AnalyzationTrees,
-} from "@/types/ebpf";
+import type { Option } from "@/types/app";
+import type { EBPFTaskCreationRequest, EBPFProfilingSchedule, EBPFTaskList, AnalyzationTrees } from "@/types/ebpf";
 import { store } from "@/store";
 import graphql from "@/graphql";
-import { AxiosResponse } from "axios";
+import type { AxiosResponse } from "axios";
 interface EbpfState {
-  taskList: EBPFTaskList[];
+  taskList: Array<Recordable<EBPFTaskList>>;
   eBPFSchedules: EBPFProfilingSchedule[];
   currentSchedule: EBPFProfilingSchedule | Record<string, never>;
   analyzeTrees: AnalyzationTrees[];
@@ -51,7 +46,7 @@ export const ebpfStore = defineStore({
     aggregateType: "COUNT",
   }),
   actions: {
-    setSelectedTask(task: EBPFTaskList) {
+    setSelectedTask(task: Recordable<EBPFTaskList>) {
       this.selectedTask = task || {};
     },
     setCurrentSchedule(s: EBPFProfilingSchedule) {
@@ -61,9 +56,7 @@ export const ebpfStore = defineStore({
       this.analyzeTrees = tree;
     },
     async getCreateTaskData(serviceId: string) {
-      const res: AxiosResponse = await graphql
-        .query("getCreateTaskData")
-        .params({ serviceId });
+      const res: AxiosResponse = await graphql.query("getCreateTaskData").params({ serviceId });
 
       if (res.data.errors) {
         return res.data;
@@ -76,9 +69,7 @@ export const ebpfStore = defineStore({
       return res.data;
     },
     async createTask(param: EBPFTaskCreationRequest) {
-      const res: AxiosResponse = await graphql
-        .query("saveEBPFTask")
-        .params({ request: param });
+      const res: AxiosResponse = await graphql.query("saveEBPFTask").params({ request: param });
 
       if (res.data.errors) {
         return res.data;
@@ -89,17 +80,11 @@ export const ebpfStore = defineStore({
       });
       return res.data;
     },
-    async getTaskList(params: {
-      serviceId: string;
-      serviceInstanceId: string;
-      targets: string[];
-    }) {
+    async getTaskList(params: { serviceId: string; targets: string[] }) {
       if (!params.serviceId) {
         return new Promise((resolve) => resolve({}));
       }
-      const res: AxiosResponse = await graphql
-        .query("getEBPFTasks")
-        .params(params);
+      const res: AxiosResponse = await graphql.query("getEBPFTasks").params(params);
 
       this.tip = "";
       if (res.data.errors) {
@@ -111,16 +96,14 @@ export const ebpfStore = defineStore({
       if (!this.taskList.length) {
         return res.data;
       }
-      this.getEBPFSchedules({ taskId: this.taskList[0].taskId });
+      this.getEBPFSchedules({ taskId: String(this.taskList[0].taskId) });
       return res.data;
     },
     async getEBPFSchedules(params: { taskId: string }) {
       if (!params.taskId) {
         return new Promise((resolve) => resolve({}));
       }
-      const res: AxiosResponse = await graphql
-        .query("getEBPFSchedules")
-        .params({ ...params });
+      const res: AxiosResponse = await graphql.query("getEBPFSchedules").params({ ...params });
 
       if (res.data.errors) {
         this.eBPFSchedules = [];
@@ -148,9 +131,7 @@ export const ebpfStore = defineStore({
       if (!params.timeRanges.length) {
         return new Promise((resolve) => resolve({}));
       }
-      const res: AxiosResponse = await graphql
-        .query("getEBPFResult")
-        .params(params);
+      const res: AxiosResponse = await graphql.query("getEBPFResult").params(params);
 
       if (res.data.errors) {
         this.analyzeTrees = [];

src/store/modules/event.ts

@@ -17,9 +17,9 @@
 import { defineStore } from "pinia";
 import { store } from "@/store";
 import graphql from "@/graphql";
-import { AxiosResponse } from "axios";
-import { Event, QueryEventCondition } from "@/types/events";
-import { Instance, Endpoint } from "@/types/selector";
+import type { AxiosResponse } from "axios";
+import type { Event, QueryEventCondition } from "@/types/events";
+import type { Instance, Endpoint } from "@/types/selector";
 import { useAppStoreWithOut } from "@/store/modules/app";
 import { useSelectorStore } from "@/store/modules/selectors";
 
@@ -45,9 +45,7 @@ export const eventStore = defineStore({
       this.condition = data;
     },
     async getInstances() {
-      const serviceId = useSelectorStore().currentService
-        ? useSelectorStore().currentService.id
-        : "";
+      const serviceId = useSelectorStore().currentService ? useSelectorStore().currentService.id : "";
       const res: AxiosResponse = await graphql.query("queryInstances").params({
         serviceId,
         duration: useAppStoreWithOut().durationTime,
@@ -56,15 +54,11 @@ export const eventStore = defineStore({
       if (res.data.errors) {
         return res.data;
       }
-      this.instances = [{ value: "", label: "All" }, ...res.data.data.pods] || [
-        { value: "", label: "All" },
-      ];
+      this.instances = [{ value: "", label: "All" }, ...res.data.data.pods] || [{ value: "", label: "All" }];
       return res.data;
     },
     async getEndpoints() {
-      const serviceId = useSelectorStore().currentService
-        ? useSelectorStore().currentService.id
-        : "";
+      const serviceId = useSelectorStore().currentService ? useSelectorStore().currentService.id : "";
       if (!serviceId) {
         return;
       }
@@ -76,9 +70,7 @@ export const eventStore = defineStore({
       if (res.data.errors) {
         return res.data;
       }
-      this.endpoints = [{ value: "", label: "All" }, ...res.data.data.pods] || [
-        { value: "", label: "All" },
-      ];
+      this.endpoints = [{ value: "", label: "All" }, ...res.data.data.pods] || [{ value: "", label: "All" }];
       return res.data;
     },
     async getEvents() {
@@ -94,8 +86,7 @@ export const eventStore = defineStore({
         return res.data;
       }
       if (res.data.data.fetchEvents) {
-        this.events = (res.data.data.fetchEvents.events || []).map(
-          (item: Event) => {
+        this.events = (res.data.data.fetchEvents.events || []).map((item: Event) => {
           let scope = "Service";
           if (item.source.serviceInstance) {
             scope = "ServiceInstance";
@@ -108,8 +99,7 @@ export const eventStore = defineStore({
             item.endTime = Number(item.startTime) + 60000;
           }
           return item;
-          }
-        );
+        });
       }
       return res.data;
     },

src/store/modules/log.ts

@@ -15,10 +15,10 @@
  * limitations under the License.
  */
 import { defineStore } from "pinia";
-import { Instance, Endpoint, Service } from "@/types/selector";
+import type { Instance, Endpoint, Service } from "@/types/selector";
 import { store } from "@/store";
 import graphql from "@/graphql";
-import { AxiosResponse } from "axios";
+import type { AxiosResponse } from "axios";
 import { useAppStoreWithOut } from "@/store/modules/app";
 import { useSelectorStore } from "@/store/modules/selectors";
 import { useDashboardStore } from "@/store/modules/dashboard";
@@ -71,9 +71,7 @@ export const logStore = defineStore({
       return res.data;
     },
     async getInstances(id: string) {
-      const serviceId = this.selectorStore.currentService
-        ? this.selectorStore.currentService.id
-        : id;
+      const serviceId = this.selectorStore.currentService ? this.selectorStore.currentService.id : id;
       const res: AxiosResponse = await graphql.query("queryInstances").params({
         serviceId,
         duration: useAppStoreWithOut().durationTime,
@@ -82,16 +80,11 @@ export const logStore = defineStore({
       if (res.data.errors) {
         return res.data;
       }
-      this.instances = [
-        { value: "0", label: "All" },
-        ...res.data.data.pods,
-      ] || [{ value: " 0", label: "All" }];
+      this.instances = [{ value: "0", label: "All" }, ...res.data.data.pods] || [{ value: " 0", label: "All" }];
       return res.data;
     },
     async getEndpoints(id: string, keyword?: string) {
-      const serviceId = this.selectorStore.currentService
-        ? this.selectorStore.currentService.id
-        : id;
+      const serviceId = this.selectorStore.currentService ? this.selectorStore.currentService.id : id;
       const res: AxiosResponse = await graphql.query("queryEndpoints").params({
         serviceId,
         duration: useAppStoreWithOut().durationTime,
@@ -100,16 +93,11 @@ export const logStore = defineStore({
       if (res.data.errors) {
         return res.data;
       }
-      this.endpoints = [
-        { value: "0", label: "All" },
-        ...res.data.data.pods,
-      ] || [{ value: "0", label: "All" }];
+      this.endpoints = [{ value: "0", label: "All" }, ...res.data.data.pods] || [{ value: "0", label: "All" }];
       return res.data;
     },
     async getLogsByKeywords() {
-      const res: AxiosResponse = await graphql
-        .query("queryLogsByKeywords")
-        .params({});
+      const res: AxiosResponse = await graphql.query("queryLogsByKeywords").params({});
 
       if (res.data.errors) {
         return res.data;
@@ -127,9 +115,7 @@ export const logStore = defineStore({
     },
     async getServiceLogs() {
       this.loadLogs = true;
-      const res: AxiosResponse = await graphql
-        .query("queryServiceLogs")
-        .params({ condition: this.conditions });
+      const res: AxiosResponse = await graphql.query("queryServiceLogs").params({ condition: this.conditions });
       this.loadLogs = false;
       if (res.data.errors) {
         return res.data;
@@ -140,9 +126,7 @@ export const logStore = defineStore({
     },
     async getBrowserLogs() {
       this.loadLogs = true;
-      const res: AxiosResponse = await graphql
-        .query("queryBrowserErrorLogs")
-        .params({ condition: this.conditions });
+      const res: AxiosResponse = await graphql.query("queryBrowserErrorLogs").params({ condition: this.conditions });
 
       this.loadLogs = false;
       if (res.data.errors) {

src/store/modules/network-profiling.ts

@@ -15,16 +15,16 @@
  * limitations under the License.
  */
 import { defineStore } from "pinia";
-import { EBPFTaskList, ProcessNode } from "@/types/ebpf";
+import type { EBPFTaskList, ProcessNode } from "@/types/ebpf";
 import { store } from "@/store";
 import graphql from "@/graphql";
-import { AxiosResponse } from "axios";
-import { Call } from "@/types/topology";
-import { LayoutConfig } from "@/types/dashboard";
+import type { AxiosResponse } from "axios";
+import type { Call } from "@/types/topology";
+import type { LayoutConfig } from "@/types/dashboard";
 import { ElMessage } from "element-plus";
 
 interface NetworkProfilingState {
-  networkTasks: EBPFTaskList[];
+  networkTasks: Array<Recordable<EBPFTaskList>>;
   networkTip: string;
   selectedNetworkTask: Recordable<EBPFTaskList>;
   nodes: ProcessNode[];
@@ -55,10 +55,10 @@ export const networkProfilingStore = defineStore({
     loadNodes: false,
   }),
   actions: {
-    setSelectedNetworkTask(task: EBPFTaskList) {
+    setSelectedNetworkTask(task: Recordable<EBPFTaskList>) {
       this.selectedNetworkTask = task || {};
     },
-    setNode(node: Node) {
+    setNode(node: Nullable<ProcessNode>) {
       this.node = node;
     },
     setLink(link: Call) {
@@ -117,11 +117,9 @@ export const networkProfilingStore = defineStore({
         when4xx: string;
         when5xx: string;
         minDuration: number;
-      }[]
+      }[],
     ) {
-      const res: AxiosResponse = await graphql
-        .query("newNetworkProfiling")
-        .params({
+      const res: AxiosResponse = await graphql.query("newNetworkProfiling").params({
         request: {
           instanceId,
           samplings: params,
@@ -133,17 +131,11 @@ export const networkProfilingStore = defineStore({
       }
       return res.data;
     },
-    async getTaskList(params: {
-      serviceId: string;
-      serviceInstanceId: string;
-      targets: string[];
-    }) {
+    async getTaskList(params: { serviceId: string; serviceInstanceId: string; targets: string[] }) {
       if (!params.serviceId) {
         return new Promise((resolve) => resolve({}));
       }
-      const res: AxiosResponse = await graphql
-        .query("getEBPFTasks")
-        .params(params);
+      const res: AxiosResponse = await graphql.query("getEBPFTasks").params(params);
 
       this.networkTip = "";
       if (res.data.errors) {
@@ -162,11 +154,8 @@ export const networkProfilingStore = defineStore({
       if (!taskId) {
         return new Promise((resolve) => resolve({}));
       }
-      const res: AxiosResponse = await graphql
-        .query("aliveNetworkProfiling")
-        .params({ taskId });
+      const res: AxiosResponse = await graphql.query("aliveNetworkProfiling").params({ taskId });
 
-      this.aliveMessage = "";
       if (res.data.errors) {
         return res.data;
       }
@@ -176,14 +165,9 @@ export const networkProfilingStore = defineStore({
       }
       return res.data;
     },
-    async getProcessTopology(params: {
-      duration: any;
-      serviceInstanceId: string;
-    }) {
+    async getProcessTopology(params: { duration: any; serviceInstanceId: string }) {
       this.loadNodes = true;
-      const res: AxiosResponse = await graphql
-        .query("getProcessTopology")
-        .params(params);
+      const res: AxiosResponse = await graphql.query("getProcessTopology").params(params);
       this.loadNodes = false;
       if (res.data.errors) {
         this.nodes = [];

src/store/modules/profile.ts

@@ -15,18 +15,18 @@
  * limitations under the License.
  */
 import { defineStore } from "pinia";
-import { Endpoint } from "@/types/selector";
-import {
+import type { Endpoint } from "@/types/selector";
+import type {
   TaskListItem,
   SegmentSpan,
   ProfileAnalyzationTrees,
   TaskLog,
   ProfileTaskCreationRequest,
 } from "@/types/profile";
-import { Trace, Span } from "@/types/trace";
+import type { Trace } from "@/types/trace";
 import { store } from "@/store";
 import graphql from "@/graphql";
-import { AxiosResponse } from "axios";
+import type { AxiosResponse } from "axios";
 import { useAppStoreWithOut } from "@/store/modules/app";
 
 interface ProfileState {
@@ -35,9 +35,9 @@ interface ProfileState {
   condition: { serviceId: string; endpointName: string };
   taskList: TaskListItem[];
   segmentList: Trace[];
-  currentSegment: Trace | Record<string, never>;
-  segmentSpans: SegmentSpan[];
-  currentSpan: SegmentSpan | Record<string, never>;
+  currentSegment: Recordable<Trace>;
+  segmentSpans: Array<Recordable<SegmentSpan>>;
+  currentSpan: Recordable<SegmentSpan>;
   analyzeTrees: ProfileAnalyzationTrees;
   taskLogs: TaskLog[];
   highlightTop: boolean;
@@ -65,10 +65,10 @@ export const profileStore = defineStore({
         ...data,
       };
     },
-    setCurrentSpan(span: Span) {
+    setCurrentSpan(span: Recordable<SegmentSpan>) {
       this.currentSpan = span;
     },
-    setCurrentSegment(s: Trace) {
+    setCurrentSegment(s: Recordable<Trace>) {
       this.currentSegment = s;
     },
     setHighlightTop() {
@@ -99,9 +99,7 @@ export const profileStore = defineStore({
       return res.data;
     },
     async getTaskList() {
-      const res: AxiosResponse = await graphql
-        .query("getProfileTaskList")
-        .params(this.condition);
+      const res: AxiosResponse = await graphql.query("getProfileTaskList").params(this.condition);
 
       if (res.data.errors) {
         return res.data;
@@ -122,9 +120,7 @@ export const profileStore = defineStore({
       if (!params.taskID) {
         return new Promise((resolve) => resolve({}));
       }
-      const res: AxiosResponse = await graphql
-        .query("getProfileTaskSegmentList")
-        .params(params);
+      const res: AxiosResponse = await graphql.query("getProfileTaskSegmentList").params(params);
 
       if (res.data.errors) {
         this.segmentList = [];
@@ -143,7 +139,7 @@ export const profileStore = defineStore({
         this.currentSegment = segmentList[0];
         this.getSegmentSpans({ segmentId: segmentList[0].segmentId });
       } else {
-        this.currentSegment = null;
+        this.currentSegment = {};
       }
       return res.data;
     },
@@ -151,9 +147,7 @@ export const profileStore = defineStore({
       if (!params.segmentId) {
         return new Promise((resolve) => resolve({}));
       }
-      const res: AxiosResponse = await graphql
-        .query("queryProfileSegment")
-        .params(params);
+      const res: AxiosResponse = await graphql.query("queryProfileSegment").params(params);
       if (res.data.errors) {
         this.segmentSpans = [];
         return res.data;
@@ -167,8 +161,8 @@ export const profileStore = defineStore({
       this.segmentSpans = segment.spans.map((d: SegmentSpan) => {
         return {
           ...d,
-          segmentId: this.currentSegment.segmentId,
-          traceId: this.currentSegment.traceIds[0],
+          segmentId: this.currentSegment?.segmentId,
+          traceId: (this.currentSegment.traceIds as any)[0],
         };
       });
       if (!(segment.spans && segment.spans.length)) {
@@ -179,19 +173,14 @@ export const profileStore = defineStore({
       this.currentSpan = segment.spans[index];
       return res.data;
     },
-    async getProfileAnalyze(params: {
-      segmentId: string;
-      timeRanges: Array<{ start: number; end: number }>;
-    }) {
+    async getProfileAnalyze(params: { segmentId: string; timeRanges: Array<{ start: number; end: number }> }) {
       if (!params.segmentId) {
         return new Promise((resolve) => resolve({}));
       }
       if (!params.timeRanges.length) {
         return new Promise((resolve) => resolve({}));
       }
-      const res: AxiosResponse = await graphql
-        .query("getProfileAnalyze")
-        .params(params);
+      const res: AxiosResponse = await graphql.query("getProfileAnalyze").params(params);
 
       if (res.data.errors) {
         this.analyzeTrees = [];
@@ -211,9 +200,7 @@ export const profileStore = defineStore({
       return res.data;
     },
     async createTask(param: ProfileTaskCreationRequest) {
-      const res: AxiosResponse = await graphql
-        .query("saveProfileTask")
-        .params({ creationRequest: param });
+      const res: AxiosResponse = await graphql.query("saveProfileTask").params({ creationRequest: param });
 
       if (res.data.errors) {
         return res.data;
@@ -222,9 +209,7 @@ export const profileStore = defineStore({
       return res.data;
     },
     async getTaskLogs(param: { taskID: string }) {
-      const res: AxiosResponse = await graphql
-        .query("getProfileTaskLogs")
-        .params(param);
+      const res: AxiosResponse = await graphql.query("getProfileTaskLogs").params(param);
 
       if (res.data.errors) {
         return res.data;

src/store/modules/selectors.ts

@@ -15,10 +15,10 @@
  * limitations under the License.
  */
 import { defineStore } from "pinia";
-import { Service, Instance, Endpoint, Process } from "@/types/selector";
+import type { Service, Instance, Endpoint, Process } from "@/types/selector";
 import { store } from "@/store";
 import graphql from "@/graphql";
-import { AxiosResponse } from "axios";
+import type { AxiosResponse } from "axios";
 import { useAppStoreWithOut } from "@/store/modules/app";
 interface SelectorState {
   services: Service[];
@@ -82,9 +82,7 @@ export const selectorStore = defineStore({
       return res.data || {};
     },
     async fetchServices(layer: string): Promise<AxiosResponse> {
-      const res: AxiosResponse = await graphql
-        .query("queryServices")
-        .params({ layer });
+      const res: AxiosResponse = await graphql.query("queryServices").params({ layer });
 
       if (!res.data.errors) {
         this.services = res.data.data.services || [];
@@ -92,10 +90,7 @@ export const selectorStore = defineStore({
       }
       return res.data;
     },
-    async getServiceInstances(param?: {
-      serviceId: string;
-      isRelation: boolean;
-    }): Promise<Nullable<AxiosResponse>> {
+    async getServiceInstances(param?: { serviceId: string; isRelation: boolean }): Promise<Nullable<AxiosResponse>> {
       const serviceId = param ? param.serviceId : this.currentService?.id;
       if (!serviceId) {
         return null;
@@ -113,10 +108,7 @@ export const selectorStore = defineStore({
       }
       return res.data;
     },
-    async getProcesses(param?: {
-      instanceId: string;
-      isRelation: boolean;
-    }): Promise<Nullable<AxiosResponse>> {
+    async getProcesses(param?: { instanceId: string; isRelation: boolean }): Promise<Nullable<AxiosResponse>> {
       const instanceId = param ? param.instanceId : this.currentPod?.id;
       if (!instanceId) {
         return null;

src/store/modules/topology.ts

@@ -16,12 +16,12 @@
  */
 import { defineStore } from "pinia";
 import { store } from "@/store";
-import { Service } from "@/types/selector";
-import { Node, Call } from "@/types/topology";
+import type { Service } from "@/types/selector";
+import type { Node, Call } from "@/types/topology";
 import graphql from "@/graphql";
 import { useSelectorStore } from "@/store/modules/selectors";
 import { useAppStoreWithOut } from "@/store/modules/app";
-import { AxiosResponse } from "axios";
+import type { AxiosResponse } from "axios";
 import query from "@/graphql/fetch";
 import { useQueryTopologyMetrics } from "@/hooks/useMetricsProcessor";
 import { ElMessage } from "element-plus";
@@ -105,21 +105,19 @@ export const topologyStore = defineStore({
       this.calls = calls;
       this.nodes = nodes;
     },
-    setNodeMetricValue(m: { id: string; value: unknown }[]) {
+    setNodeMetricValue(m: MetricVal) {
       this.nodeMetricValue = m;
     },
-    setLinkServerMetrics(m: { id: string; value: unknown }[]) {
+    setLinkServerMetrics(m: MetricVal) {
       this.linkServerMetrics = m;
     },
-    setLinkClientMetrics(m: { id: string; value: unknown }[]) {
+    setLinkClientMetrics(m: MetricVal) {
       this.linkClientMetrics = m;
     },
     async getDepthServiceTopology(serviceIds: string[], depth: number) {
       const res = await this.getServicesTopology(serviceIds);
       if (depth > 1) {
-        const ids = (res.nodes || [])
-          .map((item: Node) => item.id)
-          .filter((d: string) => !serviceIds.includes(d));
+        const ids = (res.nodes || []).map((item: Node) => item.id).filter((d: string) => !serviceIds.includes(d));
         if (!ids.length) {
           this.setTopology(res);
           return;
@@ -139,9 +137,7 @@ export const topologyStore = defineStore({
           if (depth > 3) {
             const services = topo.nodes
               .map((item: Node) => item.id)
-              .filter(
-                (d: string) => ![...ids, ...pods, ...serviceIds].includes(d)
-              );
+              .filter((d: string) => ![...ids, ...pods, ...serviceIds].includes(d));
             if (!services.length) {
               const nodes = [...res.nodes, ...json.nodes, ...topo.nodes];
               const calls = [...res.calls, ...json.calls, ...topo.calls];
@@ -152,55 +148,20 @@ export const topologyStore = defineStore({
             if (depth > 4) {
               const nodeIds = data.nodes
                 .map((item: Node) => item.id)
-                .filter(
-                  (d: string) =>
-                    ![...services, ...ids, ...pods, ...serviceIds].includes(d)
-                );
+                .filter((d: string) => ![...services, ...ids, ...pods, ...serviceIds].includes(d));
               if (!nodeIds.length) {
-                const nodes = [
-                  ...res.nodes,
-                  ...json.nodes,
-                  ...topo.nodes,
-                  ...data.nodes,
-                ];
-                const calls = [
-                  ...res.calls,
-                  ...json.calls,
-                  ...topo.calls,
-                  ...data.calls,
-                ];
+                const nodes = [...res.nodes, ...json.nodes, ...topo.nodes, ...data.nodes];
+                const calls = [...res.calls, ...json.calls, ...topo.calls, ...data.calls];
                 this.setTopology({ nodes, calls });
                 return;
               }
               const toposObj = await this.getServicesTopology(nodeIds);
-              const nodes = [
-                ...res.nodes,
-                ...json.nodes,
-                ...topo.nodes,
-                ...data.nodes,
-                ...toposObj.nodes,
-              ];
-              const calls = [
-                ...res.calls,
-                ...json.calls,
-                ...topo.calls,
-                ...data.calls,
-                ...toposObj.calls,
-              ];
+              const nodes = [...res.nodes, ...json.nodes, ...topo.nodes, ...data.nodes, ...toposObj.nodes];
+              const calls = [...res.calls, ...json.calls, ...topo.calls, ...data.calls, ...toposObj.calls];
               this.setTopology({ nodes, calls });
             } else {
-              const nodes = [
-                ...res.nodes,
-                ...json.nodes,
-                ...topo.nodes,
-                ...data.nodes,
-              ];
-              const calls = [
-                ...res.calls,
-                ...json.calls,
-                ...topo.calls,
-                ...data.calls,
-              ];
+              const nodes = [...res.nodes, ...json.nodes, ...topo.nodes, ...data.nodes];
+              const calls = [...res.calls, ...json.calls, ...topo.calls, ...data.calls];
               this.setTopology({ nodes, calls });
             }
           } else {
@@ -220,9 +181,7 @@ export const topologyStore = defineStore({
     },
     async getServicesTopology(serviceIds: string[]) {
       const duration = useAppStoreWithOut().durationTime;
-      const res: AxiosResponse = await graphql
-        .query("getServicesTopology")
-        .params({
+      const res: AxiosResponse = await graphql.query("getServicesTopology").params({
         serviceIds,
         duration,
       });
@@ -235,9 +194,7 @@ export const topologyStore = defineStore({
       const serverServiceId = useSelectorStore().currentService.id;
       const clientServiceId = useSelectorStore().currentDestService.id;
       const duration = useAppStoreWithOut().durationTime;
-      const res: AxiosResponse = await graphql
-        .query("getInstanceTopology")
-        .params({
+      const res: AxiosResponse = await graphql.query("getInstanceTopology").params({
         clientServiceId,
         serverServiceId,
         duration,
@@ -250,9 +207,7 @@ export const topologyStore = defineStore({
     async updateEndpointTopology(endpointIds: string[], depth: number) {
       const res = await this.getEndpointTopology(endpointIds);
       if (depth > 1) {
-        const ids = res.nodes
-          .map((item: Node) => item.id)
-          .filter((d: string) => !endpointIds.includes(d));
+        const ids = res.nodes.map((item: Node) => item.id).filter((d: string) => !endpointIds.includes(d));
         if (!ids.length) {
           this.setTopology(res);
           return;
@@ -272,9 +227,7 @@ export const topologyStore = defineStore({
           if (depth > 3) {
             const endpoints = topo.nodes
               .map((item: Node) => item.id)
-              .filter(
-                (d: string) => ![...ids, ...pods, ...endpointIds].includes(d)
-              );
+              .filter((d: string) => ![...ids, ...pods, ...endpointIds].includes(d));
             if (!endpoints.length) {
               const nodes = [...res.nodes, ...json.nodes, ...topo.nodes];
               const calls = [...res.calls, ...json.calls, ...topo.calls];
@@ -285,55 +238,20 @@ export const topologyStore = defineStore({
             if (depth > 4) {
               const nodeIds = data.nodes
                 .map((item: Node) => item.id)
-                .filter(
-                  (d: string) =>
-                    ![...endpoints, ...ids, ...pods, ...endpointIds].includes(d)
-                );
+                .filter((d: string) => ![...endpoints, ...ids, ...pods, ...endpointIds].includes(d));
               if (!nodeIds.length) {
-                const nodes = [
-                  ...res.nodes,
-                  ...json.nodes,
-                  ...topo.nodes,
-                  ...data.nodes,
-                ];
-                const calls = [
-                  ...res.calls,
-                  ...json.calls,
-                  ...topo.calls,
-                  ...data.calls,
-                ];
+                const nodes = [...res.nodes, ...json.nodes, ...topo.nodes, ...data.nodes];
+                const calls = [...res.calls, ...json.calls, ...topo.calls, ...data.calls];
                 this.setTopology({ nodes, calls });
                 return;
               }
               const toposObj = await this.getEndpointTopology(nodeIds);
-              const nodes = [
-                ...res.nodes,
-                ...json.nodes,
-                ...topo.nodes,
-                ...data.nodes,
-                ...toposObj.nodes,
-              ];
-              const calls = [
-                ...res.calls,
-                ...json.calls,
-                ...topo.calls,
-                ...data.calls,
-                ...toposObj.calls,
-              ];
+              const nodes = [...res.nodes, ...json.nodes, ...topo.nodes, ...data.nodes, ...toposObj.nodes];
+              const calls = [...res.calls, ...json.calls, ...topo.calls, ...data.calls, ...toposObj.calls];
               this.setTopology({ nodes, calls });
             } else {
-              const nodes = [
-                ...res.nodes,
-                ...json.nodes,
-                ...topo.nodes,
-                ...data.nodes,
-              ];
-              const calls = [
-                ...res.calls,
-                ...json.calls,
-                ...topo.calls,
-                ...data.calls,
-              ];
+              const nodes = [...res.nodes, ...json.nodes, ...topo.nodes, ...data.nodes];
+              const calls = [...res.calls, ...json.calls, ...topo.calls, ...data.calls];
               this.setTopology({ nodes, calls });
             }
           } else {
@@ -390,10 +308,7 @@ export const topologyStore = defineStore({
 
       return { calls, nodes };
     },
-    async getNodeMetricValue(param: {
-      queryStr: string;
-      conditions: { [key: string]: unknown };
-    }) {
+    async getNodeMetricValue(param: { queryStr: string; conditions: { [key: string]: unknown } }) {
       const res: AxiosResponse = await query(param);
 
       if (res.data.errors) {
@@ -407,9 +322,7 @@ export const topologyStore = defineStore({
         this.setLinkClientMetrics({});
         return;
       }
-      const idsC = this.calls
-        .filter((i: Call) => i.detectPoints.includes("CLIENT"))
-        .map((b: Call) => b.id);
+      const idsC = this.calls.filter((i: Call) => i.detectPoints.includes("CLIENT")).map((b: Call) => b.id);
       if (!idsC.length) {
         return;
       }
@@ -425,9 +338,7 @@ export const topologyStore = defineStore({
         this.setLinkServerMetrics({});
         return;
       }
-      const idsS = this.calls
-        .filter((i: Call) => i.detectPoints.includes("SERVER"))
-        .map((b: Call) => b.id);
+      const idsS = this.calls.filter((i: Call) => i.detectPoints.includes("SERVER")).map((b: Call) => b.id);
       if (!idsS.length) {
         return;
       }
@@ -454,10 +365,7 @@ export const topologyStore = defineStore({
         ElMessage.error(res.errors);
       }
     },
-    async getLegendMetrics(param: {
-      queryStr: string;
-      conditions: { [key: string]: unknown };
-    }) {
+    async getLegendMetrics(param: { queryStr: string; conditions: { [key: string]: unknown } }) {
       const res: AxiosResponse = await query(param);
 
       if (res.data.errors) {
@@ -477,10 +385,7 @@ export const topologyStore = defineStore({
       });
       return res.data;
     },
-    async getCallServerMetrics(param: {
-      queryStr: string;
-      conditions: { [key: string]: unknown };
-    }) {
+    async getCallServerMetrics(param: { queryStr: string; conditions: { [key: string]: unknown } }) {
       const res: AxiosResponse = await query(param);
 
       if (res.data.errors) {
@@ -489,10 +394,7 @@ export const topologyStore = defineStore({
       this.setLinkServerMetrics(res.data.data);
       return res.data;
     },
-    async getCallClientMetrics(param: {
-      queryStr: string;
-      conditions: { [key: string]: unknown };
-    }) {
+    async getCallClientMetrics(param: { queryStr: string; conditions: { [key: string]: unknown } }) {
       const res: AxiosResponse = await query(param);
 
       if (res.data.errors) {

src/store/modules/trace.ts

@@ -15,11 +15,11 @@
  * limitations under the License.
  */
 import { defineStore } from "pinia";
-import { Instance, Endpoint, Service } from "@/types/selector";
-import { Trace, Span } from "@/types/trace";
+import type { Instance, Endpoint, Service } from "@/types/selector";
+import type { Trace, Span } from "@/types/trace";
 import { store } from "@/store";
 import graphql from "@/graphql";
-import { AxiosResponse } from "axios";
+import type { AxiosResponse } from "axios";
 import { useAppStoreWithOut } from "@/store/modules/app";
 import { useSelectorStore } from "@/store/modules/selectors";
 import { QueryOrders } from "@/views/dashboard/data";
@@ -30,7 +30,7 @@ interface TraceState {
   endpoints: Endpoint[];
   traceList: Trace[];
   traceSpans: Span[];
-  currentTrace: Trace | any;
+  currentTrace: Recordable<Trace>;
   conditions: any;
   traceSpanLogs: any[];
   selectorStore: any;
@@ -58,10 +58,10 @@ export const traceStore = defineStore({
     setTraceCondition(data: any) {
       this.conditions = { ...this.conditions, ...data };
     },
-    setCurrentTrace(trace: Trace) {
+    setCurrentTrace(trace: Recordable<Trace>) {
       this.currentTrace = trace;
     },
-    setTraceSpans(spans: Span) {
+    setTraceSpans(spans: Span[]) {
       this.traceSpans = spans;
     },
     resetState() {
@@ -116,9 +116,7 @@ export const traceStore = defineStore({
       return res.data;
     },
     async getInstances(id: string) {
-      const serviceId = this.selectorStore.currentService
-        ? this.selectorStore.currentService.id
-        : id;
+      const serviceId = this.selectorStore.currentService ? this.selectorStore.currentService.id : id;
       const res: AxiosResponse = await graphql.query("queryInstances").params({
         serviceId: serviceId,
         duration: useAppStoreWithOut().durationTime,
@@ -131,9 +129,7 @@ export const traceStore = defineStore({
       return res.data;
     },
     async getEndpoints(id: string, keyword?: string) {
-      const serviceId = this.selectorStore.currentService
-        ? this.selectorStore.currentService.id
-        : id;
+      const serviceId = this.selectorStore.currentService ? this.selectorStore.currentService.id : id;
       const res: AxiosResponse = await graphql.query("queryEndpoints").params({
         serviceId,
         duration: useAppStoreWithOut().durationTime,
@@ -146,9 +142,7 @@ export const traceStore = defineStore({
       return res.data;
     },
     async getTraces() {
-      const res: AxiosResponse = await graphql
-        .query("queryTraces")
-        .params({ condition: this.conditions });
+      const res: AxiosResponse = await graphql.query("queryTraces").params({ condition: this.conditions });
       if (res.data.errors) {
         return res.data;
       }
@@ -169,9 +163,7 @@ export const traceStore = defineStore({
       return res.data;
     },
     async getTraceSpans(params: { traceId: string }) {
-      const res: AxiosResponse = await graphql
-        .query("queryTrace")
-        .params(params);
+      const res: AxiosResponse = await graphql.query("queryTrace").params(params);
       if (res.data.errors) {
         return res.data;
       }
@@ -180,9 +172,7 @@ export const traceStore = defineStore({
       return res.data;
     },
     async getSpanLogs(params: any) {
-      const res: AxiosResponse = await graphql
-        .query("queryServiceLogs")
-        .params(params);
+      const res: AxiosResponse = await graphql.query("queryServiceLogs").params(params);
       if (res.data.errors) {
         this.traceSpanLogs = [];
         return res.data;

src/styles/reset.scss

@@ -20,9 +20,8 @@ body {
   line-height: 1.5;
   font-size: 14px;
   color: #3d444f;
-  font-family: Helvetica, Arial, "Source Han Sans CN", "Microsoft YaHei",
-    sans-serif;
-  text-rendering: optimizeLegibility;
+  font-family: Helvetica, Arial, "Source Han Sans CN", "Microsoft YaHei", sans-serif;
+  text-rendering: optimizelegibility;
   text-size-adjust: 100%;
 }
 

src/types/components.d.ts

@@ -1,6 +1,7 @@
 // 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
+// Read more: https://github.com/vuejs/core/pull/3399
+import '@vue/runtime-core'
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {

src/types/dashboard.d.ts

@@ -1,4 +1,3 @@
-import { DurationTime } from "@/types/app";
 /**
  * Licensed to the Apache Software Foundation (ASF) under one or more
  * contributor license agreements.  See the NOTICE file distributed with

src/types/demand-log.ts

@@ -14,7 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { DurationTime } from "./app";
+import type { DurationTime } from "./app";
 
 export interface Conditions {
   container: string;

src/types/ebpf.d.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Process } from "./selector";
+import type { Process } from "./selector";
 export interface EBPFTaskCreationRequest {
   serviceId: string;
   processLabels: string[];

src/types/global.d.ts

@@ -110,7 +110,5 @@ declare global {
 }
 
 declare module "vue" {
-  export type JSXComponent<Props = any> =
-    | { new (): ComponentPublicInstance<Props> }
-    | FunctionalComponent<Props>;
+  export type JSXComponent<Props = any> = { new (): ComponentPublicInstance<Props> } | FunctionalComponent<Props>;
 }

src/types/index.d.ts

@@ -38,7 +38,6 @@ declare interface ComponentElRef<T extends HTMLElement = HTMLDivElement> {
   $el: T;
 }
 
-declare type ComponentRef<T extends HTMLElement = HTMLDivElement> =
-  ComponentElRef<T> | null;
+declare type ComponentRef<T extends HTMLElement = HTMLDivElement> = ComponentElRef<T> | null;
 
 declare type ElRef<T extends HTMLElement = HTMLDivElement> = Nullable<T>;

src/types/monaco-editor.ts

@@ -15,3 +15,4 @@
  * limitations under the License.
  */
 declare module "monaco-editor";
+export {};

src/types/selector.d.ts

@@ -29,6 +29,7 @@ export type Instance = {
   language?: string;
   instanceUUID?: string;
   attributes?: { name: string; value: string }[];
+  id?: string;
 };
 
 export type Endpoint = {

src/utils/dateFormat.ts

@@ -15,11 +15,7 @@
  * limitations under the License.
  */
 import dayjs from "dayjs";
-export default function dateFormatStep(
-  date: Date,
-  step: string,
-  monthDayDiff?: boolean
-): string {
+export default function dateFormatStep(date: Date, step: string, monthDayDiff?: boolean): string {
   const year = date.getFullYear();
   const monthTemp = date.getMonth() + 1;
   let month = `${monthTemp}`;
@@ -101,5 +97,4 @@ export const dateFormatTime = (date: Date, step: string): string => {
   return "";
 };
 
-export const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
-  dayjs(new Date(date)).format(pattern);
+export const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") => dayjs(new Date(date)).format(pattern);

src/utils/event.ts

@@ -39,10 +39,7 @@ export function addResizeListener(element: any, fn: () => unknown): void {
 
 export function removeResizeListener(element: any, fn: () => unknown): void {
   if (!element || !element.__resizeListeners__) return;
-  element.__resizeListeners__.splice(
-    element.__resizeListeners__.indexOf(fn),
-    1
-  );
+  element.__resizeListeners__.splice(element.__resizeListeners__.indexOf(fn), 1);
   if (!element.__resizeListeners__.length) {
     element.__ro__.disconnect();
   }

src/utils/is.ts

@@ -53,12 +53,7 @@ export function isNumber(val: unknown): val is number {
 }
 
 export function isPromise<T = any>(val: unknown): val is Promise<T> {
-  return (
-    is(val, "Promise") &&
-    isObject(val) &&
-    isFunction(val.then) &&
-    isFunction(val.catch)
-  );
+  return is(val, "Promise") && isObject(val) && isFunction(val.then) && isFunction(val.catch);
 }
 
 export function isString(val: unknown): val is string {

src/utils/timeFormat.ts

@@ -14,7 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Duration } from "@/types/app";
+import type { Duration } from "@/types/app";
 import { TimeType } from "@/constants/data";
 
 const timeFormat = (time: Date[]): Duration => {

src/utils/vec2.ts

@@ -17,11 +17,7 @@
 class Vec2 extends Float32Array {
   constructor(v?: unknown, y?: unknown) {
     super(2);
-    if (
-      v instanceof Vec2 ||
-      v instanceof Float32Array ||
-      (v instanceof Array && v.length == 2)
-    ) {
+    if (v instanceof Vec2 || v instanceof Float32Array || (v instanceof Array && v.length == 2)) {
       this[0] = v[0];
       this[1] = v[1];
     } else if (typeof v === "number" && typeof y === "number") {

src/utils/vec3.ts

@@ -17,19 +17,11 @@
 class Vec3 extends Float32Array {
   constructor(v?: unknown, y?: unknown, z?: unknown) {
     super(3);
-    if (
-      v instanceof Vec3 ||
-      v instanceof Float32Array ||
-      (v instanceof Array && v.length == 3)
-    ) {
+    if (v instanceof Vec3 || v instanceof Float32Array || (v instanceof Array && v.length == 3)) {
       this[0] = v[0];
       this[1] = v[1];
       this[2] = v[2];
-    } else if (
-      typeof v === "number" &&
-      typeof y === "number" &&
-      typeof z === "number"
-    ) {
+    } else if (typeof v === "number" && typeof y === "number" && typeof z === "number") {
       this[0] = v;
       this[1] = y;
       this[2] = z;
@@ -158,17 +150,9 @@ class Vec3 extends Float32Array {
   }
   static norm(x: unknown, y: unknown, z: unknown): Vec3 {
     const rtn = new Vec3();
-    if (
-      x instanceof Vec3 ||
-      x instanceof Float32Array ||
-      (x instanceof Array && x.length == 3)
-    ) {
+    if (x instanceof Vec3 || x instanceof Float32Array || (x instanceof Array && x.length == 3)) {
       rtn.copy(x);
-    } else if (
-      typeof x === "number" &&
-      typeof y === "number" &&
-      typeof z === "number"
-    ) {
+    } else if (typeof x === "number" && typeof y === "number" && typeof z === "number") {
       rtn.xyz(x, y, z);
     }
     return rtn.norm();

src/views/Layer.vue

@@ -14,9 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <Dashboard v-if="dashboardStore.currentDashboard" />
-  <div v-else class="no-root">
-    {{ t("noRoot") }} {{ dashboardStore.layerId }}
-  </div>
+  <div v-else class="no-root"> {{ t("noRoot") }} {{ dashboardStore.layerId }} </div>
 </template>
 
 <script lang="ts" setup>
@@ -43,9 +41,7 @@ async function getDashboard() {
     await dashboardStore.setDashboards();
     const item = dashboardStore.dashboards.find(
       (d: { name: string; isRoot: boolean; layer: string; entity: string }) =>
-      d.layer === dashboardStore.layerId &&
-      [EntityType[0].value, EntityType[1].value].includes(d.entity) &&
-      d.isRoot
+        d.layer === dashboardStore.layerId && [EntityType[0].value, EntityType[1].value].includes(d.entity) && d.isRoot,
     );
     if (!item) {
       appStore.setPageTitle(dashboardStore.layer);

src/views/Settings.vue

@@ -30,24 +30,10 @@ limitations under the License. -->
       <div>
         <span>UTC</span>
         <span class="ml-5 mr-5">{{ utcHour >= 0 ? "+" : "" }}</span>
-        <input
-          type="number"
-          v-model="utcHour"
-          min="-12"
-          max="14"
-          class="utc-input"
-          @change="setUTCHour"
-        />
+        <input type="number" v-model="utcHour" min="-12" max="14" class="utc-input" @change="setUTCHour" />
         <span class="ml-5 mr-5">:</span>
         <span class="utc-min">{{ utcMin > 9 || utcMin === 0 ? null : 0 }}</span>
-        <input
-          type="number"
-          v-model="utcMin"
-          min="0"
-          max="59"
-          class="utc-input"
-          @change="setUTCMin"
-        />
+        <input type="number" v-model="utcMin" min="0" max="59" class="utc-input" @change="setUTCMin" />
       </div>
     </div>
     <div class="flex-h item">
@@ -55,12 +41,7 @@ limitations under the License. -->
       <el-switch v-model="auto" @change="handleAuto" style="height: 25px" />
       <div class="auto-time ml-5">
         <span class="auto-select">
-          <input
-            type="number"
-            v-model="autoTime"
-            @change="changeAutoTime"
-            min="1"
-          />
+          <input type="number" v-model="autoTime" @change="changeAutoTime" min="1" />
         </span>
         {{ t("second") }}
         <i class="ml-10">{{ t("timeReload") }}</i>
@@ -87,8 +68,7 @@ const utcMin = ref<number>(appStore.utcMin);
 
   appStore.setPageTitle("Setting");
   const handleReload = () => {
-  const gap =
-    appStore.duration.end.getTime() - appStore.duration.start.getTime();
+    const gap = appStore.duration.end.getTime() - appStore.duration.start.getTime();
     const dates: Date[] = [
       getLocalTime(appStore.utc, new Date(new Date().getTime() - gap)),
       getLocalTime(appStore.utc, new Date()),

src/views/alarm/Content.vue

@@ -14,11 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div class="timeline-table clear">
-    <div
-      v-for="(i, index) in alarmStore.alarms"
-      :key="index"
-      class="clear timeline-item"
-    >
+    <div v-for="(i, index) in alarmStore.alarms" :key="index" class="clear timeline-item">
       <div class="g-sm-3 grey sm hide-xs time-line tr">
         {{ dateFormat(parseInt(i.startTime)) }}
       </div>
@@ -50,11 +46,7 @@ limitations under the License. -->
     :destroy-on-close="true"
     @closed="isShowDetails = false"
   >
-    <div
-      class="mb-10 clear alarm-detail"
-      v-for="(item, index) in AlarmDetailCol"
-      :key="index"
-    >
+    <div class="mb-10 clear alarm-detail" v-for="(item, index) in AlarmDetailCol" :key="index">
       <span class="g-sm-2 grey">{{ t(item.value) }}:</span>
       <span v-if="item.label === 'startTime'">
         {{ dateFormat(currentDetail[item.label]) }}
@@ -66,24 +58,12 @@ limitations under the License. -->
         <div>
           <ul>
             <li>
-              <span
-                v-for="(i, index) of EventsDetailHeaders"
-                :class="i.class"
-                :key="i.class + index"
-              >
+              <span v-for="(i, index) of EventsDetailHeaders" :class="i.class" :key="i.class + index">
                 {{ t(i.text) }}
               </span>
             </li>
-            <li
-              v-for="event in currentEvents"
-              :key="event.uuid"
-              @click="viewEventDetail(event)"
-            >
-              <span
-                v-for="(d, index) of EventsDetailHeaders"
-                :class="d.class"
-                :key="event.uuid + index"
-              >
+            <li v-for="event in currentEvents" :key="event.uuid" @click="viewEventDetail(event)">
+              <span v-for="(d, index) of EventsDetailHeaders" :class="d.class" :key="event.uuid + index">
                 <span v-if="d.class === 'startTime' || d.class === 'endTime'">
                   {{ dateFormat(event[d.class]) }}
                 </span>
@@ -106,29 +86,16 @@ limitations under the License. -->
     @closed="showEventDetails = false"
   >
     <div class="event-detail">
-      <div
-        class="mb-10"
-        v-for="(eventKey, index) in EventsDetailKeys"
-        :key="index"
-      >
+      <div class="mb-10" v-for="(eventKey, index) in EventsDetailKeys" :key="index">
         <span class="keys">{{ t(eventKey.text) }}</span>
         <span v-if="eventKey.class === 'parameters'">
-          <span v-for="(d, index) of currentEvent[eventKey.class]" :key="index">
-            {{ d.key }}={{ d.value }};
+          <span v-for="(d, index) of currentEvent[eventKey.class]" :key="index"> {{ d.key }}={{ d.value }}; </span>
         </span>
-        </span>
-        <span
-          v-else-if="
-            eventKey.class === 'startTime' || eventKey.class === 'endTime'
-          "
-        >
+        <span v-else-if="eventKey.class === 'startTime' || eventKey.class === 'endTime'">
           {{ dateFormat(currentEvent[eventKey.class]) }}
         </span>
         <span v-else-if="eventKey.class === 'source'" class="source">
-          <span
-            >{{ t("service") }}:
-            {{ currentEvent[eventKey.class].service }}</span
-          >
+          <span>{{ t("service") }}: {{ currentEvent[eventKey.class].service }}</span>
           <div v-show="currentEvent[eventKey.class].endpoint">
             {{ t("endpoint") }}:
             {{ currentEvent[eventKey.class].endpoint }}
@@ -146,7 +113,7 @@ limitations under the License. -->
 <script lang="ts" setup>
   import { ref } from "vue";
   import { useI18n } from "vue-i18n";
-import { Alarm, Event } from "@/types/alarm";
+  import type { Alarm, Event } from "@/types/alarm";
   import { useAlarmStore } from "@/store/modules/alarm";
   import { EventsDetailHeaders, AlarmDetailCol, EventsDetailKeys } from "./data";
   import { dateFormat } from "@/utils/dateFormat";
@@ -164,11 +131,9 @@ function showDetails(item: Alarm) {
     isShowDetails.value = true;
     currentDetail.value = item;
     currentEvents.value = item.events;
-  alarmTags.value = currentDetail.value.tags.map(
-    (d: { key: string; value: string }) => {
+    alarmTags.value = currentDetail.value.tags.map((d: { key: string; value: string }) => {
       return `${d.key} = ${d.value}`;
-    }
-  );
+    });
   }
 
   function viewEventDetail(event: Event) {

src/views/alarm/Header.vue

@@ -28,12 +28,7 @@ limitations under the License. -->
       </div>
       <div class="mr-10 ml-10">
         <span class="grey">{{ t("searchKeyword") }}: </span>
-        <el-input
-          size="small"
-          v-model="keyword"
-          class="alarm-tool-input"
-          @change="refreshAlarms({ pageNum: 1 })"
-        />
+        <el-input size="small" v-model="keyword" class="alarm-tool-input" @change="refreshAlarms({ pageNum: 1 })" />
       </div>
       <div class="pagination">
         <el-pagination
@@ -48,10 +43,7 @@ limitations under the License. -->
         />
       </div>
     </div>
-    <ConditionTags
-      :type="'ALARM'"
-      @update="(data) => refreshAlarms({ pageNum: 1, tagsMap: data.tagsMap })"
-    />
+    <ConditionTags :type="'ALARM'" @update="(data) => refreshAlarms({ pageNum: 1, tagsMap: data.tagsMap })" />
   </nav>
 </template>
 <script lang="ts" setup>
@@ -71,9 +63,7 @@ const entity = ref<string>("");
   const keyword = ref<string>("");
   const pageNum = ref<number>(1);
   const total = computed(() =>
-  alarmStore.alarms.length === pageSize
-    ? pageSize * pageNum.value + 1
-    : pageSize * pageNum.value
+    alarmStore.alarms.length === pageSize ? pageSize * pageNum.value + 1 : pageSize * pageNum.value,
   );
 
   refreshAlarms({ pageNum: 1 });

src/views/components/ConditionTags.vue

@@ -42,20 +42,12 @@ limitations under the License. -->
         />
       </template>
       <div class="content">
-        <span
-          v-for="(item, index) in tagList"
-          :key="index"
-          @click="selectTag(item)"
-          class="tag-item"
-        >
+        <span v-for="(item, index) in tagList" :key="index" @click="selectTag(item)" class="tag-item">
           {{ item }}
         </span>
       </div>
     </el-popover>
-    <span
-      class="tags-tip"
-      :class="type !== 'ALARM' && tagArr.length ? 'link-tips' : ''"
-    >
+    <span class="tags-tip" :class="type !== 'ALARM' && tagArr.length ? 'link-tips' : ''">
       <a
         target="blank"
         href="https://github.com/apache/skywalking/blob/master/docs/en/setup/backend/configuration-vocabulary.md"
@@ -211,7 +203,7 @@ watch(
     () => appStore.durationTime,
     () => {
       fetchTagKeys();
-  }
+    },
   );
 </script>
 <style lang="scss" scoped>

src/views/dashboard/Edit.vue

@@ -41,7 +41,7 @@ import Tool from "./panel/Tool.vue";
   import { useDashboardStore } from "@/store/modules/dashboard";
   import { useAppStoreWithOut } from "@/store/modules/app";
   import Configuration from "./configuration";
-import { LayoutConfig } from "@/types/dashboard";
+  import type { LayoutConfig } from "@/types/dashboard";
 
   export default defineComponent({
     name: "Dashboard",
@@ -63,9 +63,7 @@ export default defineComponent({
           const { layer, entity, name } = dashboardStore.currentDashboard;
           layoutKey.value = `${layer}_${entity}_${name}`;
         }
-      const c: { configuration: string; id: string } = JSON.parse(
-        sessionStorage.getItem(layoutKey.value) || "{}"
-      );
+        const c: { configuration: string; id: string } = JSON.parse(sessionStorage.getItem(layoutKey.value) || "{}");
         const layout: any = c.configuration || {};
 
         dashboardStore.setLayout(setWidgetsID(layout.children || []));

src/views/dashboard/List.vue

@@ -33,9 +33,7 @@ limitations under the License. -->
         {{ t("reloadDashboards") }}
       </el-button>
       <router-link to="/dashboard/new">
-        <el-button size="small" type="primary">
-          + {{ t("newDashboard") }}
-        </el-button>
+        <el-button size="small" type="primary"> + {{ t("newDashboard") }} </el-button>
       </router-link>
     </div>
     <div class="table">
@@ -74,10 +72,7 @@ limitations under the License. -->
             <el-button size="small" @click="handleRename(scope.row)">
               {{ t("rename") }}
             </el-button>
-            <el-popconfirm
-              :title="t('deleteTitle')"
-              @confirm="handleDelete(scope.row)"
-            >
+            <el-popconfirm :title="t('deleteTitle')" @confirm="handleDelete(scope.row)">
               <template #reference>
                 <el-button size="small" type="danger">
                   {{ t("delete") }}
@@ -87,11 +82,7 @@ limitations under the License. -->
             <el-popconfirm
               :title="t('rootTitle')"
               @confirm="setRoot(scope.row)"
-              v-if="
-                [EntityType[0].value, EntityType[1].value].includes(
-                  scope.row.entity
-                )
-              "
+              v-if="[EntityType[0].value, EntityType[1].value].includes(scope.row.entity)"
             >
               <template #reference>
                 <el-button size="small" style="width: 110px" type="danger">
@@ -143,11 +134,11 @@ limitations under the License. -->
   import { ref } from "vue";
   import { useI18n } from "vue-i18n";
   import { ElMessageBox, ElMessage } from "element-plus";
-import type { ElTable } from "element-plus";
+  import { ElTable } from "element-plus";
   import { useAppStoreWithOut } from "@/store/modules/app";
   import { useDashboardStore } from "@/store/modules/dashboard";
   import router from "@/router";
-import { DashboardItem, LayoutConfig } from "@/types/dashboard";
+  import type { DashboardItem, LayoutConfig } from "@/types/dashboard";
   import { saveFile, readFile } from "@/utils/file";
   import { EntityType } from "./data";
   import { isEmptyObject } from "@/utils/is";
@@ -180,8 +171,7 @@ async function importTemplates(event: any) {
     for (const item of arr) {
       const { layer, name, entity } = item.configuration;
       const index = dashboardStore.dashboards.findIndex(
-      (d: DashboardItem) =>
-        d.name === name && d.entity === entity && d.layer === layer && !item.id
+        (d: DashboardItem) => d.name === name && d.entity === entity && d.layer === layer && !item.id,
       );
       if (index > -1) {
         return ElMessage.error(t("nameError"));
@@ -190,9 +180,7 @@ async function importTemplates(event: any) {
     loading.value = true;
     for (const item of arr) {
       const { layer, name, entity, isRoot, children } = item.configuration;
-    const index = dashboardStore.dashboards.findIndex(
-      (d: DashboardItem) => d.id === item.id
-    );
+      const index = dashboardStore.dashboards.findIndex((d: DashboardItem) => d.id === item.id);
       const p: DashboardItem = {
         name: name.split(" ").join("-"),
         layer: layer,
@@ -215,11 +203,9 @@ function exportTemplates() {
     if (!multipleSelection.value.length) {
       return;
     }
-  const arr = multipleSelection.value.sort(
-    (a: DashboardItem, b: DashboardItem) => {
+    const arr = multipleSelection.value.sort((a: DashboardItem, b: DashboardItem) => {
       return a.name.localeCompare(b.name);
-    }
-  );
+    });
     const templates = arr.map((d: DashboardItem) => {
       const key = [d.layer, d.entity, d.name].join("_");
       const layout = JSON.parse(sessionStorage.getItem(key) || "{}");
@@ -240,7 +226,7 @@ function optimizeTemplate(
       standard?: unknown;
       label?: string;
       value?: string;
-  })[]
+    })[],
   ) {
     for (const child of children || []) {
       delete child.moved;
@@ -266,9 +252,7 @@ function optimizeTemplate(
       if (!(child.metrics && child.metrics.length && child.metrics[0])) {
         delete child.metrics;
       }
-    if (
-      !(child.metricTypes && child.metricTypes.length && child.metricTypes[0])
-    ) {
+      if (!(child.metricTypes && child.metricTypes.length && child.metricTypes[0])) {
         delete child.metricTypes;
       }
       if (child.metricConfig && child.metricConfig.length) {
@@ -295,11 +279,7 @@ function optimizeTemplate(
           optimizeTemplate(item.children);
         }
       }
-    if (
-      ["Trace", "Topology", "Tab", "Profile", "Ebpf", "Log"].includes(
-        child.type
-      )
-    ) {
+      if (["Trace", "Topology", "Tab", "Profile", "Ebpf", "Log"].includes(child.type)) {
         delete child.widget;
       }
     }
@@ -345,7 +325,7 @@ async function setRoot(row: DashboardItem) {
             JSON.stringify({
               id: d.id,
               configuration: c,
-          })
+            }),
           );
         }
       } else {
@@ -373,7 +353,7 @@ async function setRoot(row: DashboardItem) {
               JSON.stringify({
                 id: d.id,
                 configuration: c,
-            })
+              }),
             );
           }
         }
@@ -447,7 +427,7 @@ async function updateName(d: DashboardItem, value: string) {
       JSON.stringify({
         id: d.id,
         configuration: c,
-    })
+      }),
     );
     searchText.value = "";
   }
@@ -462,14 +442,11 @@ async function handleDelete(row: DashboardItem) {
   }
   function searchDashboards(pageIndex?: any) {
     const list = JSON.parse(sessionStorage.getItem("dashboards") || "[]");
-  const arr = list.filter((d: { name: string }) =>
-    d.name.includes(searchText.value)
-  );
+    const arr = list.filter((d: { name: string }) => d.name.includes(searchText.value));
 
     total.value = arr.length;
     dashboards.value = arr.filter(
-    (d: { name: string }, index: number) =>
-      index < pageIndex * pageSize && index >= (pageIndex - 1) * pageSize
+      (d: { name: string }, index: number) => index < pageIndex * pageSize && index >= (pageIndex - 1) * pageSize,
     );
     currentPage.value = pageIndex;
   }

src/views/dashboard/New.vue

@@ -17,11 +17,7 @@ limitations under the License. -->
     <div class="title">{{ t("newDashboard") }}</div>
     <div class="item">
       <div class="label">{{ t("name") }}</div>
-      <el-input
-        size="default"
-        v-model="states.name"
-        placeholder="Please input name"
-      />
+      <el-input size="default" v-model="states.name" placeholder="Please input name" />
     </div>
     <div class="item">
       <div class="label">{{ t("layer") }}</div>
@@ -77,9 +73,7 @@ dashboardStore.setDashboards();
   const onCreate = () => {
     const index = dashboardStore.dashboards.findIndex(
       (d: { name: string; entity: string; layer: string }) =>
-      d.name === states.name &&
-      states.entity === d.entity &&
-      states.selectedLayer === d.layer
+        d.name === states.name && states.entity === d.entity && states.selectedLayer === d.layer,
     );
     if (!states.name) {
       ElMessage.error(t("nameEmptyError"));

src/views/dashboard/configuration/Event.vue

@@ -13,12 +13,7 @@ limitations under the License. -->
 <template>
   <div>
     <span class="label">{{ t("enableAssociate") }}</span>
-    <el-switch
-      v-model="eventAssociate"
-      active-text="Yes"
-      inactive-text="No"
-      @change="updateConfig"
-    />
+    <el-switch v-model="eventAssociate" active-text="Yes" inactive-text="No" @change="updateConfig" />
   </div>
   <div class="footer">
     <el-button size="small" @click="cancelConfig">

src/views/dashboard/configuration/Text.vue

@@ -13,21 +13,11 @@ limitations under the License. -->
 <template>
   <div class="item">
     <span class="label">{{ t("textUrl") }}</span>
-    <el-input
-      class="input"
-      v-model="url"
-      size="small"
-      @change="changeConfig({ url })"
-    />
+    <el-input class="input" v-model="url" size="small" @change="changeConfig({ url })" />
   </div>
   <div class="item">
     <span class="label">{{ t("content") }}</span>
-    <el-input
-      class="input"
-      v-model="content"
-      size="small"
-      @change="changeConfig({ content })"
-    />
+    <el-input class="input" v-model="content" size="small" @change="changeConfig({ content })" />
   </div>
   <div class="item">
     <span class="label">{{ t("textAlign") }}</span>

src/views/dashboard/configuration/TimeRange.vue

@@ -13,12 +13,7 @@ limitations under the License. -->
 <template>
   <div class="item">
     <span class="label">{{ t("text") }}</span>
-    <el-input
-      class="input"
-      v-model="text"
-      size="small"
-      @change="changeConfig({ text })"
-    />
+    <el-input class="input" v-model="text" size="small" @change="changeConfig({ text })" />
   </div>
   <div class="item">
     <span class="label">{{ t("textAlign") }}</span>

src/views/dashboard/configuration/Topology.vue

@@ -13,22 +13,11 @@ limitations under the License. -->
 <template>
   <div class="item">
     <span class="label">{{ t("showDepth") }}</span>
-    <el-switch
-      v-model="showDepth"
-      active-text="Yes"
-      inactive-text="No"
-      @change="changeConfig({ showDepth })"
-    />
+    <el-switch v-model="showDepth" active-text="Yes" inactive-text="No" @change="changeConfig({ showDepth })" />
   </div>
   <div class="item" v-show="showDepth">
     <span class="label">{{ t("defaultDepth") }}</span>
-    <Selector
-      class="input"
-      size="small"
-      :value="depth"
-      :options="DepthList"
-      @change="changeDepth($event)"
-    />
+    <Selector class="input" size="small" :value="depth" :options="DepthList" @change="changeDepth($event)" />
   </div>
   <div class="footer">
     <el-button size="small">
@@ -44,7 +33,7 @@ import { ref } from "vue";
   import { useI18n } from "vue-i18n";
   import { useDashboardStore } from "@/store/modules/dashboard";
   import { DepthList } from "../data";
-import { Option } from "@/types/app";
+  import type { Option } from "@/types/app";
 
   const { t } = useI18n();
   const dashboardStore = useDashboardStore();

src/views/dashboard/configuration/Widget.vue

@@ -47,10 +47,7 @@ limitations under the License. -->
       </div>
     </div>
     <div class="collapse" :style="{ height: configHeight + 'px' }">
-      <el-collapse
-        v-model="states.activeNames"
-        :style="{ '--el-collapse-header-font-size': '15px' }"
-      >
+      <el-collapse v-model="states.activeNames" :style="{ '--el-collapse-header-font-size': '15px' }">
         <el-collapse-item :title="t('selectVisualization')" name="1">
           <MetricOptions @update="getSource" @loading="setLoading" />
         </el-collapse-item>
@@ -60,18 +57,10 @@ limitations under the License. -->
         <el-collapse-item :title="t('widgetOptions')" name="3">
           <WidgetOptions />
         </el-collapse-item>
-        <el-collapse-item
-          :title="t('associateOptions')"
-          name="4"
-          v-if="hasAssociate"
-        >
+        <el-collapse-item :title="t('associateOptions')" name="4" v-if="hasAssociate">
           <AssociateOptions />
         </el-collapse-item>
-        <el-collapse-item
-          :title="t('relatedTraceOptions')"
-          name="5"
-          v-if="hasAssociate"
-        >
+        <el-collapse-item :title="t('relatedTraceOptions')" name="5" v-if="hasAssociate">
           <RelatedTraceOptions />
         </el-collapse-item>
       </el-collapse>
@@ -91,7 +80,7 @@ import { reactive, defineComponent, ref, computed } from "vue";
   import { useI18n } from "vue-i18n";
   import { useDashboardStore } from "@/store/modules/dashboard";
   import { useAppStoreWithOut } from "@/store/modules/app";
-import { Option } from "@/types/app";
+  import type { Option } from "@/types/app";
   import graphs from "../graphs";
   import CustomOptions from "./widget/index";
 
@@ -125,9 +114,8 @@ export default defineComponent({
       const tips = computed(() => encodeURIComponent(widget.value.tips || ""));
       const hasAssociate = computed(() =>
         ["Bar", "Line", "Area", "TopList"].includes(
-        dashboardStore.selectedGrid.graph &&
-          dashboardStore.selectedGrid.graph.type
-      )
+          dashboardStore.selectedGrid.graph && dashboardStore.selectedGrid.graph.type,
+        ),
       );
 
       function getSource(source: unknown) {

src/views/dashboard/configuration/widget/AssociateOptions.vue

@@ -32,21 +32,17 @@ import { ref, computed } from "vue";
   import { useI18n } from "vue-i18n";
   import { useDashboardStore } from "@/store/modules/dashboard";
   import getDashboard from "@/hooks/useDashboardsSession";
-import { Option } from "@/types/app";
+  import type { Option } from "@/types/app";
 
   const { t } = useI18n();
   const dashboardStore = useDashboardStore();
   const associate = dashboardStore.selectedGrid.associate || [];
-const widgetIds = ref<string[]>(
-  associate.map((d: { widgetId: string }) => d.widgetId)
-);
+  const widgetIds = ref<string[]>(associate.map((d: { widgetId: string }) => d.widgetId));
   const widgets: any = computed(() => {
     const widgetList = getDashboard(dashboardStore.currentDashboard).widgets;
     const items = [];
     for (const d of widgetList) {
-    const isLinear = ["Bar", "Line", "Area"].includes(
-      (d.graph && d.graph.type) || ""
-    );
+      const isLinear = ["Bar", "Line", "Area"].includes((d.graph && d.graph.type) || "");
       if (isLinear && d.id && dashboardStore.selectedGrid.id !== d.id) {
         items.push({ value: d.id, label: (d.widget && d.widget.name) || d.id });
       }

src/views/dashboard/configuration/widget/RelatedTraceOptions.vue

@@ -26,12 +26,7 @@ limitations under the License. -->
   </div>
   <div v-else class="item">
     <span class="label">{{ t("enableRelatedTrace") }}</span>
-    <el-switch
-      v-model="enableRelate"
-      active-text="Yes"
-      inactive-text="No"
-      @change="updateConfig({ enableRelate })"
-    />
+    <el-switch v-model="enableRelate" active-text="Yes" inactive-text="No" @change="updateConfig({ enableRelate })" />
   </div>
   <div v-if="enableRelate">
     <div class="item">
@@ -58,12 +53,7 @@ limitations under the License. -->
     </div>
     <div class="item">
       <span class="label">{{ t("setLatencyDuration") }}</span>
-      <el-switch
-        v-model="latency"
-        active-text="Yes"
-        inactive-text="No"
-        @change="updateConfig({ latency })"
-      />
+      <el-switch v-model="latency" active-text="Yes" inactive-text="No" @change="updateConfig({ latency })" />
     </div>
   </div>
 </template>