fix: display the menu description in the Marketplace when there is no the i18nKey (#511)

Bumps [vite](https://github.com/vitejs/vite/tree/HEAD/packages/vite) from 6.2.3 to 6.2.4.
- [Release notes](https://github.com/vitejs/vite/releases)
- [Changelog](https://github.com/vitejs/vite/blob/v6.2.4/packages/vite/CHANGELOG.md)
- [Commits](https://github.com/vitejs/vite/commits/v6.2.4/packages/vite)

---
updated-dependencies:
- dependency-name: vite
  dependency-type: direct:development
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

.github/workflows/nodejs.yml

@@ -37,7 +37,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [14.x, 16.x, 18.x]
+        node-version: [18.x, 20.x, 22.x]
     steps:
       - uses: actions/checkout@v1
       - name: Use Node.js ${{ matrix.node-version }}
@@ -49,6 +49,7 @@ jobs:
           npm ci
           npm run lint
           npm run build --if-present
+          npm run check-components-types
           npm run test:unit
         env:
           CI: true

.husky/commit-msg

@@ -1,3 +1,4 @@
+#!/bin/sh
 #
 # Licensed to the Apache Software Foundation (ASF) under one
 # or more contributor license agreements.  See the NOTICE file
@@ -17,7 +18,6 @@
 # under the License.
 #
 
-#!/bin/sh
 
 # shellcheck source=./_/husky.sh
 . "$(dirname "$0")/_/husky.sh"

.husky/pre-commit

@@ -1,3 +1,4 @@
+#!/bin/sh
 #
 # Licensed to the Apache Software Foundation (ASF) under one
 # or more contributor license agreements.  See the NOTICE file
@@ -17,7 +18,6 @@
 # under the License.
 #
 
-#!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 . "$(dirname "$0")/common.sh"
 

README.md

@@ -34,14 +34,15 @@ npm install
 npm run dev
 ```
 
-The default UI address is `http://localhost:8080`.
+The default UI address is `http://localhost:3000`.
 
 # Contact Us
 
-- Submit an [issue](https://github.com/apache/skywalking/issues) if you face some issues. Submit a [discussion](https://github.com/apache/skywalking/discussions) if you want to propose new feature or have any question.
-- Mailing list: **dev@skywalking.apache.org**. Mail to `dev-subscribe@skywalking.apache.org`, follow the reply to subscribe the mailing list.
-- Join Slack. Send `Request to join SkyWalking slack` mail to the mail list(`dev@skywalking.apache.org`), we will invite you in.
-- QQ Group: 392443393, 901167865
+- Mail list: **dev@skywalking.apache.org**. Mail to `dev-subscribe@skywalking.apache.org`, follow the reply to subscribe to the mail list.
+- Send `Request to join SkyWalking slack` mail to the mail list(`dev@skywalking.apache.org`), we will invite you in.
+- For Chinese speaker, send `[CN] Request to join SkyWalking slack` mail to the mail list(`dev@skywalking.apache.org`), we will invite you in.
+- Twitter, [ASFSkyWalking](https://twitter.com/AsfSkyWalking)
+- [bilibili B 站 视频](https://space.bilibili.com/390683219)
 
 # License
 

commitlint.config.js

@@ -17,34 +17,10 @@
 
 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",
-      ],
-    ],
   },
 };

package.json

@@ -1,83 +1,91 @@
 {
   "name": "skywalking-booster-ui",
-  "version": "9.4.0",
+  "version": "10.2.0",
   "private": true,
   "scripts": {
     "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"
+    "prepare": "husky install",
+    "check-components-types": "if (! git diff --quiet -U0 ./src/types); then echo 'type files are not updated correctly'; git diff -U0 ./src/types; exit 1; fi",
+    "test:unit": "vitest --environment jsdom --root src/",
+    "test:unit:watch": "vitest --environment jsdom --root src/ --watch",
+    "test:unit:coverage": "vitest --environment jsdom --root src/ --coverage",
+    "test:utils": "vitest --environment jsdom src/utils/**/*.spec.ts",
+    "test:components": "vitest --environment jsdom src/components/**/*.spec.ts",
+    "test:hooks": "vitest --environment jsdom src/hooks/**/*.spec.ts",
+    "test:stores": "vitest --environment jsdom src/store/**/*.spec.ts",
+    "test:views": "vitest --environment jsdom src/views/**/*.spec.ts",
+    "test:router": "vitest --environment jsdom src/router/**/*.spec.ts",
+    "test:all": "vitest --environment jsdom --root src/ --coverage --reporter=verbose",
+    "test:e2e:dev": "start-server-and-test 'vite dev --port 4173' :4173 'cypress open --e2e'"
   },
   "dependencies": {
-    "axios": "^0.24.0",
     "d3": "^7.3.0",
     "d3-flame-graph": "^4.1.3",
     "d3-tip": "^0.9.1",
     "echarts": "^5.2.2",
-    "element-plus": "^2.0.2",
-    "lodash": "^4.17.21",
+    "element-plus": "^2.11.0",
     "monaco-editor": "^0.34.1",
     "pinia": "^2.0.28",
     "vis-timeline": "^7.5.1",
     "vue": "^3.2.45",
     "vue-grid-layout": "^3.0.0-beta1",
-    "vue-i18n": "^9.1.9",
+    "vue-i18n": "^9.14.5",
     "vue-router": "^4.1.6",
     "vue-types": "^4.1.1"
   },
   "devDependencies": {
-    "@commitlint/cli": "^17.3.0",
-    "@commitlint/config-conventional": "^17.3.0",
+    "@commitlint/cli": "^17.6.6",
+    "@commitlint/config-conventional": "^17.6.6",
     "@rushstack/eslint-patch": "^1.1.4",
     "@types/d3": "^7.1.0",
     "@types/d3-tip": "^3.5.5",
     "@types/echarts": "^4.9.12",
     "@types/jsdom": "^20.0.1",
-    "@types/lodash": "^4.14.179",
     "@types/node": "^18.11.12",
     "@types/three": "^0.131.0",
-    "@vitejs/plugin-vue": "^4.0.0",
-    "@vitejs/plugin-vue-jsx": "^3.0.0",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vitejs/plugin-vue-jsx": "^4.1.1",
+    "@vitest/coverage-v8": "^3.0.6",
     "@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",
+    "cypress": "^13.3.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",
-    "node-sass": "^8.0.0",
+    "lint-staged": "^13.2.1",
+    "mockjs": "^1.1.0",
     "npm-run-all": "^4.1.5",
     "postcss-html": "^1.3.0",
     "postcss-scss": "^4.0.2",
     "prettier": "^2.7.1",
-    "sass": "^1.56.1",
-    "start-server-and-test": "^1.15.2",
-    "stylelint": "^14.1.0",
+    "sass": "^1.85.0",
+    "start-server-and-test": "^2.0.5",
+    "stylelint": "15.9.0",
     "stylelint-config-html": "^1.0.0",
-    "stylelint-config-prettier": "^9.0.3",
-    "stylelint-config-standard": "^24.0.0",
-    "stylelint-order": "^5.0.0",
-    "typescript": "~4.7.4",
-    "unplugin-auto-import": "^0.7.0",
-    "unplugin-vue-components": "^0.19.2",
-    "vite": "^4.0.0",
+    "stylelint-config-prettier": "9.0.4",
+    "stylelint-config-standard": "^33.0.0",
+    "stylelint-order": "^6.0.3",
+    "typescript": "^5.7.3",
+    "unplugin-auto-import": "^0.18.2",
+    "unplugin-vue-components": "^0.27.3",
+    "vite": "^6.4.1",
     "vite-plugin-monaco-editor": "^1.1.0",
     "vite-plugin-svg-icons": "^2.0.1",
-    "vitest": "^0.25.6",
-    "vue-tsc": "^1.0.12"
+    "vitest": "^3.0.5",
+    "vue-tsc": "^2.2.2"
   },
   "browserslist": [
     "> 1%",
@@ -97,10 +105,7 @@
     "{!(package)*.json,*.code-snippets,.!(browserslist)*rc}": [
       "prettier --write"
     ],
-    "package.json": [
-      "prettier --write"
-    ],
-    "*.md": [
+    "package.json, *.md": [
       "prettier --write"
     ]
   }

src/App.vue

@@ -20,17 +20,18 @@ limitations under the License. -->
   const route = useRoute();
 
   setTimeout(() => {
-    if (route.name === "ViewWidget") {
+    if (route.name === "DashboardViewWidget") {
       (document.querySelector("#app") as any).style.minWidth = "120px";
     } else {
       (document.querySelector("#app") as any).style.minWidth = "1024px";
     }
   }, 500);
 </script>
-<style>
+<style lang="scss">
   #app {
-    color: #2c3e50;
+    color: $font-color;
     height: 100%;
     overflow: hidden;
+    background-color: $layout-background;
   }
 </style>

src/__tests__/App.spec.ts

@@ -0,0 +1,177 @@
+/**
+ * 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, expect, vi, beforeEach, afterEach } from "vitest";
+import { mount } from "@vue/test-utils";
+import { useRoute } from "vue-router";
+import App from "../App.vue";
+
+// Mock Vue Router
+vi.mock("vue-router", () => ({
+  useRoute: vi.fn(),
+}));
+
+describe("App Component", () => {
+  let mockRoute: any;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.useFakeTimers();
+
+    mockRoute = {
+      name: "Home",
+    };
+
+    // Set up the mock useRoute
+    vi.mocked(useRoute).mockReturnValue(mockRoute);
+
+    // Create the #app element for testing
+    const appElement = document.createElement("div");
+    appElement.id = "app";
+    appElement.className = "app";
+    document.body.appendChild(appElement);
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+
+    // Clean up the #app element
+    const appElement = document.getElementById("app");
+    if (appElement) {
+      document.body.removeChild(appElement);
+    }
+  });
+
+  it("should render router-view", () => {
+    const wrapper = mount(App);
+
+    expect(wrapper.find("router-view").exists()).toBe(true);
+  });
+
+  it("should set minWidth to 120px for DashboardViewWidget route", async () => {
+    mockRoute.name = "DashboardViewWidget";
+
+    const wrapper = mount(App);
+
+    // Wait for setTimeout
+    vi.advanceTimersByTime(500);
+    await wrapper.vm.$nextTick();
+
+    const appElement = document.querySelector("#app");
+    if (appElement) {
+      expect((appElement as HTMLElement).style.minWidth).toBe("120px");
+    }
+  });
+
+  it("should set minWidth to 1024px for non-DashboardViewWidget routes", async () => {
+    mockRoute.name = "Dashboard";
+
+    const wrapper = mount(App);
+
+    // Wait for setTimeout
+    vi.advanceTimersByTime(500);
+    await wrapper.vm.$nextTick();
+
+    const appElement = document.querySelector("#app");
+    if (appElement) {
+      expect((appElement as HTMLElement).style.minWidth).toBe("1024px");
+    }
+  });
+
+  it("should apply correct CSS classes", () => {
+    // The App component itself doesn't have the 'app' class, it's on the #app element
+    const appElement = document.getElementById("app");
+    expect(appElement?.className).toContain("app");
+  });
+
+  it("should have correct template structure", () => {
+    const wrapper = mount(App);
+
+    expect(wrapper.html()).toContain("<router-view");
+  });
+
+  it("should handle route changes", async () => {
+    // Set up initial route
+    mockRoute.name = "Home";
+    vi.mocked(useRoute).mockReturnValue(mockRoute);
+
+    const wrapper = mount(App);
+    vi.advanceTimersByTime(500);
+    await wrapper.vm.$nextTick();
+
+    const appElement = document.querySelector("#app");
+    if (appElement) {
+      expect((appElement as HTMLElement).style.minWidth).toBe("1024px");
+    }
+
+    // Unmount and remount with different route
+    wrapper.unmount();
+
+    mockRoute.name = "DashboardViewWidget";
+    vi.mocked(useRoute).mockReturnValue(mockRoute);
+
+    const wrapper2 = mount(App);
+    vi.advanceTimersByTime(500);
+    await wrapper2.vm.$nextTick();
+
+    const appElement2 = document.querySelector("#app");
+    if (appElement2) {
+      expect((appElement2 as HTMLElement).style.minWidth).toBe("120px");
+    }
+  });
+
+  it("should handle multiple route changes", async () => {
+    // Test multiple route changes by remounting
+    const routes = ["Home", "DashboardViewWidget", "Dashboard", "DashboardViewWidget"];
+    let wrapper: any = null;
+
+    for (const routeName of routes) {
+      if (wrapper) {
+        wrapper.unmount();
+      }
+
+      mockRoute.name = routeName;
+      vi.mocked(useRoute).mockReturnValue(mockRoute);
+
+      wrapper = mount(App);
+      vi.advanceTimersByTime(500);
+      await wrapper.vm.$nextTick();
+
+      const appElement = document.querySelector("#app");
+      if (appElement) {
+        const expectedWidth = routeName === "DashboardViewWidget" ? "120px" : "1024px";
+        expect((appElement as HTMLElement).style.minWidth).toBe(expectedWidth);
+      }
+    }
+  });
+
+  it("should not throw errors for undefined route names", async () => {
+    mockRoute.name = undefined;
+    // Should not throw error
+    expect(() => {
+      vi.advanceTimersByTime(500);
+    }).not.toThrow();
+  });
+
+  it("should handle null route names", async () => {
+    mockRoute.name = null;
+    // Should not throw error
+    expect(() => {
+      vi.advanceTimersByTime(500);
+    }).not.toThrow();
+  });
+});

src/__tests__/main.spec.ts

@@ -0,0 +1,180 @@
+/**
+ * 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, expect, vi, beforeEach, afterEach } from "vitest";
+import { createApp } from "vue";
+import { ElLoading } from "element-plus";
+
+// Mock Vue createApp
+vi.mock("vue", () => ({
+  createApp: vi.fn(() => ({
+    use: vi.fn().mockReturnThis(),
+    mount: vi.fn(),
+  })),
+  defineComponent: vi.fn((component) => component),
+}));
+
+// Mock Element Plus
+vi.mock("element-plus", () => ({
+  ElLoading: {
+    service: vi.fn(() => ({
+      close: vi.fn(),
+    })),
+  },
+}));
+
+// Mock store
+vi.mock("@/store", () => ({
+  store: {
+    install: vi.fn(),
+  },
+}));
+
+// Mock components
+vi.mock("@/components", () => ({
+  default: {},
+}));
+vi.mock("@/locales", () => ({
+  default: {},
+}));
+
+// Mock app store
+vi.mock("@/store/modules/app", () => ({
+  useAppStoreWithOut: vi.fn(() => ({
+    getActivateMenus: vi.fn().mockResolvedValue(undefined),
+    queryOAPTimeInfo: vi.fn().mockResolvedValue(undefined),
+  })),
+}));
+
+// Mock router
+vi.mock("@/router", () => ({
+  default: {},
+}));
+
+// Mock App.vue
+vi.mock("./App.vue", () => ({
+  default: {},
+}));
+
+// Mock styles
+vi.mock("@/styles/index.ts", () => ({}));
+vi.mock("virtual:svg-icons-register", () => ({}));
+
+describe("Main Application", () => {
+  let mockLoadingService: any;
+  let mockApp: any;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+
+    mockLoadingService = {
+      close: vi.fn(),
+    };
+    mockApp = {
+      use: vi.fn().mockReturnThis(),
+      mount: vi.fn(),
+    };
+    vi.mocked(ElLoading.service).mockReturnValue(mockLoadingService);
+    vi.mocked(createApp).mockReturnValue(mockApp);
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("should create loading service with correct options", async () => {
+    // Import main to trigger the loading service creation
+    await import("../main");
+
+    expect(ElLoading.service).toHaveBeenCalledWith({
+      lock: true,
+      text: "Loading...",
+      background: "rgba(0, 0, 0, 0.8)",
+    });
+  });
+
+  it("should create Vue app", async () => {
+    // Test that createApp is available and can be called
+    const mockAppInstance = createApp({});
+    expect(createApp).toHaveBeenCalled();
+    expect(mockAppInstance).toBeDefined();
+  });
+
+  it("should use required plugins", async () => {
+    // Test that the app can use plugins
+    const mockAppInstance = createApp({});
+    const mockPlugin1 = { install: vi.fn() };
+    const mockPlugin2 = { install: vi.fn() };
+    const mockPlugin3 = { install: vi.fn() };
+
+    mockAppInstance.use(mockPlugin1);
+    mockAppInstance.use(mockPlugin2);
+    mockAppInstance.use(mockPlugin3);
+
+    expect(mockAppInstance.use).toHaveBeenCalledTimes(3);
+  });
+
+  it("should call app store methods", async () => {
+    const { useAppStoreWithOut } = await import("@/store/modules/app");
+    const mockStore = useAppStoreWithOut();
+
+    // Test that store methods can be called
+    await mockStore.getActivateMenus();
+    await mockStore.queryOAPTimeInfo();
+
+    expect(mockStore.getActivateMenus).toHaveBeenCalled();
+    expect(mockStore.queryOAPTimeInfo).toHaveBeenCalled();
+  });
+
+  it("should mount app after initialization", async () => {
+    // Test that the app can be mounted
+    const mockAppInstance = createApp({});
+    mockAppInstance.mount("#app");
+
+    expect(mockAppInstance.mount).toHaveBeenCalledWith("#app");
+  });
+
+  it("should close loading service after mounting", async () => {
+    // Test that loading service can be closed
+    const loadingService = ElLoading.service({
+      lock: true,
+      text: "Loading...",
+      background: "rgba(0, 0, 0, 0.8)",
+    });
+
+    loadingService.close();
+
+    expect(loadingService.close).toHaveBeenCalled();
+  });
+
+  it("should handle async initialization properly", async () => {
+    const { useAppStoreWithOut } = await import("@/store/modules/app");
+    const mockStore = useAppStoreWithOut();
+
+    // Mock async operations to take time
+    vi.mocked(mockStore.getActivateMenus).mockImplementation(() => new Promise((resolve) => setTimeout(resolve, 100)));
+    vi.mocked(mockStore.queryOAPTimeInfo).mockImplementation(() => new Promise((resolve) => setTimeout(resolve, 100)));
+
+    // Test async operations
+    const promises = [mockStore.getActivateMenus(), mockStore.queryOAPTimeInfo()];
+
+    await Promise.all(promises);
+
+    expect(mockStore.getActivateMenus).toHaveBeenCalled();
+    expect(mockStore.queryOAPTimeInfo).toHaveBeenCalled();
+  });
+});

src/assets/icons/add_fill.svg

@@ -12,4 +12,4 @@ 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. -->
-<svg t="1655799536378" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9286" width="48" height="48"><path d="M563.2 614.4v51.2c0 30.72-20.48 51.2-51.2 51.2s-51.2-20.48-51.2-51.2v-51.2H409.6c-30.72 0-51.2-20.48-51.2-51.2s20.48-51.2 51.2-51.2h51.2V460.8c0-30.72 20.48-51.2 51.2-51.2s51.2 20.48 51.2 51.2v51.2h51.2c30.72 0 51.2 20.48 51.2 51.2s-20.48 51.2-51.2 51.2h-51.2z m51.2-563.2c158.72 15.36 281.6 143.36 281.6 307.2v512c0 56.32-46.08 102.4-102.4 102.4h-563.2c-56.32 0-102.4-46.08-102.4-102.4V153.6c0-56.32 46.08-102.4 102.4-102.4H614.4z m163.84 230.4c-25.6-61.44-76.8-107.52-138.24-122.88v71.68c0 30.72 20.48 51.2 51.2 51.2h87.04zM537.6 153.6h-256c-30.72 0-51.2 20.48-51.2 51.2v614.4c0 30.72 20.48 51.2 51.2 51.2h460.8c30.72 0 51.2-20.48 51.2-51.2V384h-153.6c-56.32 0-102.4-46.08-102.4-102.4V153.6z" fill="#707070" p-id="9287"></path></svg>
+<svg t="1655799536378" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9286" width="48" height="48"><path d="M563.2 614.4v51.2c0 30.72-20.48 51.2-51.2 51.2s-51.2-20.48-51.2-51.2v-51.2H409.6c-30.72 0-51.2-20.48-51.2-51.2s20.48-51.2 51.2-51.2h51.2V460.8c0-30.72 20.48-51.2 51.2-51.2s51.2 20.48 51.2 51.2v51.2h51.2c30.72 0 51.2 20.48 51.2 51.2s-20.48 51.2-51.2 51.2h-51.2z m51.2-563.2c158.72 15.36 281.6 143.36 281.6 307.2v512c0 56.32-46.08 102.4-102.4 102.4h-563.2c-56.32 0-102.4-46.08-102.4-102.4V153.6c0-56.32 46.08-102.4 102.4-102.4H614.4z m163.84 230.4c-25.6-61.44-76.8-107.52-138.24-122.88v71.68c0 30.72 20.48 51.2 51.2 51.2h87.04zM537.6 153.6h-256c-30.72 0-51.2 20.48-51.2 51.2v614.4c0 30.72 20.48 51.2 51.2 51.2h460.8c30.72 0 51.2-20.48 51.2-51.2V384h-153.6c-56.32 0-102.4-46.08-102.4-102.4V153.6z" p-id="9287"></path></svg>

src/assets/icons/add_iframe.svg

@@ -12,4 +12,4 @@ 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. -->
-<svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32"><path d="M856.32 428.064a32 32 0 0 0-32 32v163.328H372.48c-0.896 0-1.664 0.448-2.56 0.512v-177.696h244.48a32 32 0 1 0 0-64H130.56c-0.896 0-1.664 0.448-2.56 0.512V231.68h488.16a32 32 0 1 0 0-64H96a32 32 0 0 0-32 32v701.824a32 32 0 0 0 32 32h760.32a32 32 0 0 0 32-32V460.064a32 32 0 0 0-32-32zM128 445.728c0.896 0.064 1.664 0.512 2.56 0.512h175.36v423.264H128V445.728z m241.92 423.776v-182.624c0.896 0.064 1.664 0.512 2.56 0.512h451.84v182.08h-454.4zM960 174.656h-61.376V113.28a32 32 0 1 0-64 0v61.344H752.64a32 32 0 1 0 0 64h81.984v81.984a32 32 0 1 0 64 0V238.656H960a32 32 0 1 0 0-64z" fill="#2c2c2c"></path></svg>
+<svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32"><path d="M856.32 428.064a32 32 0 0 0-32 32v163.328H372.48c-0.896 0-1.664 0.448-2.56 0.512v-177.696h244.48a32 32 0 1 0 0-64H130.56c-0.896 0-1.664 0.448-2.56 0.512V231.68h488.16a32 32 0 1 0 0-64H96a32 32 0 0 0-32 32v701.824a32 32 0 0 0 32 32h760.32a32 32 0 0 0 32-32V460.064a32 32 0 0 0-32-32zM128 445.728c0.896 0.064 1.664 0.512 2.56 0.512h175.36v423.264H128V445.728z m241.92 423.776v-182.624c0.896 0.064 1.664 0.512 2.56 0.512h451.84v182.08h-454.4zM960 174.656h-61.376V113.28a32 32 0 1 0-64 0v61.344H752.64a32 32 0 1 0 0 64h81.984v81.984a32 32 0 1 0 64 0V238.656H960a32 32 0 1 0 0-64z"></path></svg>

src/assets/icons/all_inbox.svg

@@ -12,6 +12,6 @@ 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. -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-<path d="M15 15.984h6v3q0 0.797-0.609 1.406t-1.406 0.609h-13.969q-0.797 0-1.406-0.609t-0.609-1.406v-3h6q0 1.219 0.891 2.109t2.109 0.891 2.109-0.891 0.891-2.109zM18.984 9v-3.984h-13.969v3.984h3.984q0 1.219 0.891 2.109t2.109 0.891 2.109-0.891 0.891-2.109h3.984zM18.984 3q0.797 0 1.406 0.609t0.609 1.406v6.984q0 0.797-0.609 1.406t-1.406 0.609h-13.969q-0.797 0-1.406-0.609t-0.609-1.406v-6.984q0-0.797 0.609-1.406t1.406-0.609h13.969z"></path>
+<svg t="1684376918107" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7954">
+  <path d="M243.921917 780.038686l357.445972 0L601.367889 422.592714 243.921917 422.592714 243.921917 780.038686zM288.679283 467.350081l268.036639 0 0 268.035616L288.679283 735.385696 288.679283 467.350081zM779.993149 65.25112 243.921917 65.25112c-98.640578 0-178.6314 79.990822-178.6314 178.716334L65.290517 780.038686c0 98.640578 79.990822 178.710194 178.6314 178.710194l536.071232 0c98.725512 0 178.716334-80.069617 178.716334-178.710194L958.709483 243.967454C958.709483 145.242965 878.717637 65.25112 779.993149 65.25112zM869.404528 735.385696c0 73.992201-60.07319 133.972271-134.084834 133.972271L288.679283 869.357967c-74.096579 0-134.063345-59.98007-134.063345-133.972271L154.615938 288.61328c0-73.984015 59.966767-134.057205 134.063345-134.057205l446.639386 0c74.011644 0 134.084834 60.07319 134.084834 134.057205L869.403504 735.385696zM511.957533 243.967454l268.035616 0 0 89.319282 0 268.035616-89.326445 0-44.645826 0 0-44.673455 89.298815 0L735.319693 288.61328l-268.014126 0 0 89.326445-44.652989 0 0-133.971247L511.957533 243.968477z" p-id="7955"></path>
 </svg>

src/assets/icons/async_profiling.svg

@@ -0,0 +1,18 @@
+<!-- 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. -->
+
+<svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <path d="M512 992c-83.2 0-166.4-19.2-243.2-64-89.6-51.2-160-134.4-204.8-230.4C25.6 601.6 19.2 486.4 51.2 390.4c25.6-102.4 89.6-192 172.8-256C307.2 70.4 409.6 38.4 518.4 38.4c19.2 0 32 12.8 32 32s-19.2 25.6-38.4 25.6c-89.6 0-179.2 32-256 83.2S128 313.6 108.8 403.2s-12.8 185.6 19.2 268.8c32 83.2 96 153.6 179.2 198.4 76.8 44.8 172.8 64 262.4 51.2 89.6-12.8 172.8-51.2 236.8-115.2s108.8-147.2 115.2-236.8c12.8-89.6-6.4-185.6-51.2-262.4-6.4-12.8-6.4-32 12.8-44.8 12.8-12.8 38.4-6.4 44.8 12.8 51.2 89.6 76.8 198.4 57.6 300.8-12.8 102.4-64 204.8-134.4 275.2-76.8 76.8-172.8 121.6-275.2 134.4-19.2 6.4-44.8 6.4-64 6.4z" p-id="8538"></path><path d="M512 480c-19.2 0-32-12.8-32-32V64c0-19.2 12.8-32 32-32s32 12.8 32 32v384c0 19.2-12.8 32-32 32z" p-id="8539"></path><path d="M512 608c-12.8 0-25.6 0-38.4-6.4-12.8-6.4-19.2-12.8-32-19.2-6.4-12.8-12.8-19.2-19.2-32-6.4-12.8-6.4-25.6-6.4-38.4 0-25.6 12.8-51.2 25.6-70.4 38.4-38.4 102.4-38.4 134.4 0 19.2 19.2 32 44.8 32 70.4 0 25.6-12.8 51.2-25.6 70.4-19.2 12.8-44.8 25.6-70.4 25.6z m0-128c-6.4 0-19.2 6.4-25.6 6.4 0 6.4-6.4 19.2-6.4 25.6v12.8c0 6.4 6.4 6.4 6.4 12.8 0 0 6.4 6.4 12.8 6.4 12.8 6.4 25.6 0 32-6.4 6.4-6.4 12.8-19.2 12.8-25.6 0-6.4-6.4-19.2-6.4-25.6-6.4 0-19.2-6.4-25.6-6.4z" p-id="8540"></path><path d="M512 800c-51.2 0-102.4-12.8-147.2-38.4-57.6-32-96-83.2-121.6-140.8-19.2-57.6-25.6-121.6-6.4-185.6 19.2-64 51.2-115.2 102.4-153.6C384 243.2 448 224 512 224c19.2 0 32 12.8 32 32s-12.8 32-32 32c-51.2 0-96 19.2-134.4 44.8-38.4 32-70.4 76.8-83.2 121.6s-6.4 96 12.8 140.8c19.2 44.8 51.2 83.2 96 108.8 44.8 25.6 89.6 32 140.8 25.6 51.2-6.4 96-32 128-64s57.6-83.2 64-128c6.4-51.2-6.4-96-25.6-140.8-12.8-12.8-6.4-32 6.4-38.4 12.8-6.4 32-6.4 44.8 12.8 32 57.6 44.8 121.6 38.4 179.2-6.4 64-38.4 121.6-83.2 166.4-44.8 44.8-102.4 76.8-166.4 83.2H512z"></path>
+</svg>

src/assets/icons/aws_cloud.svg

@@ -0,0 +1,17 @@
+<!-- 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. -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+<path d="M18.984 18q1.219 0 2.109-0.891t0.891-2.109-0.891-2.109-2.109-0.891h-1.5v-0.516q0-2.297-1.594-3.891t-3.891-1.594q-1.875 0-3.328 1.125t-1.969 2.859h-0.703q-1.641 0-2.813 1.195t-1.172 2.836 1.172 2.813 2.813 1.172h12.984zM19.359 10.031q1.922 0.141 3.281 1.57t1.359 3.398q0 2.063-1.477 3.539t-3.539 1.477h-12.984q-2.484 0-4.242-1.758t-1.758-4.242q0-2.203 1.57-3.961t3.773-1.992q0.984-1.828 2.766-2.953t3.891-1.125q2.531 0 4.711 1.781t2.648 4.266z"></path>
+</svg>

src/assets/icons/browser.svg

@@ -0,0 +1,17 @@
+<!-- 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. -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+<path d="M16.359 14.016h3.375q0.281-1.313 0.281-2.016t-0.281-2.016h-3.375q0.141 0.984 0.141 2.016t-0.141 2.016zM14.578 19.547q1.172-0.375 2.438-1.43t1.922-2.133h-2.953q-0.469 1.875-1.406 3.563zM14.344 14.016q0.141-0.984 0.141-2.016t-0.141-2.016h-4.688q-0.141 0.984-0.141 2.016t0.141 2.016h4.688zM12 19.969q1.313-1.922 1.922-3.984h-3.844q0.609 2.063 1.922 3.984zM8.016 8.016q0.563-2.016 1.406-3.563-1.172 0.375-2.461 1.43t-1.898 2.133h2.953zM5.063 15.984q0.609 1.078 1.898 2.133t2.461 1.43q-0.938-1.688-1.406-3.563h-2.953zM4.266 14.016h3.375q-0.141-0.984-0.141-2.016t0.141-2.016h-3.375q-0.281 1.313-0.281 2.016t0.281 2.016zM12 4.031q-1.313 1.922-1.922 3.984h3.844q-0.609-2.063-1.922-3.984zM18.938 8.016q-0.656-1.078-1.922-2.133t-2.438-1.43q0.844 1.547 1.406 3.563h2.953zM12 2.016q4.125 0 7.055 2.93t2.93 7.055-2.93 7.055-7.055 2.93-7.055-2.93-2.93-7.055 2.93-7.055 7.055-2.93z"></path>
+</svg>

src/assets/icons/cilium.svg

@@ -0,0 +1,16 @@
+<!-- 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. -->
+
+<svg width="16" height="16" viewBox="20 0 70 72" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m49.72 45.923-5.505-9.69 5.505-9.69h10.974l5.506 9.69-5.506 9.69H49.72ZM49.72 69.367l-5.505-9.69 5.505-9.689h10.974l5.506 9.69-5.506 9.69H49.72ZM49.72 22.477l-5.505-9.689 5.505-9.69h10.974l5.506 9.69-5.506 9.69H49.72ZM70.06 57.644l-5.506-9.69 5.506-9.69h10.974l5.506 9.69-5.506 9.69H70.06ZM70.06 34.2l-5.506-9.69 5.506-9.69h10.974l5.506 9.69-5.506 9.69H70.06ZM29.357 57.644l-5.506-9.69 5.506-9.69h10.974l5.506 9.69-5.506 9.69H29.357ZM29.357 34.2l-5.506-9.69 5.506-9.69h10.974l5.506 9.69-5.506 9.69H29.357Z" stroke="#141A1F" stroke-width="2.771"/><path d="M10.784 95.947c1.026.007 " fill="#141A1F"/></svg>

src/assets/icons/continuous_profiling.svg

@@ -0,0 +1,17 @@
+<!-- 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. -->
+<svg t="1684390612367" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12207">
+  <path d="M202.66008 885.33784A10.66632 10.66632 0 0 0 213.3264 874.67152v-85.33056a42.66528 42.66528 0 0 0-42.66528-42.66528H85.33056a42.66528 42.66528 0 0 0-42.66528 42.66528v85.33056a10.66632 10.66632 0 0 0 10.66632 10.66632zM458.65176 885.33784a10.66632 10.66632 0 0 0 10.66632-10.66632v-298.65696a42.66528 42.66528 0 0 0-42.66528-42.665281H341.32224a42.66528 42.66528 0 0 0-42.66528 42.665281v298.65696a10.66632 10.66632 0 0 0 10.66632 10.66632zM714.643441 885.33784a10.66632 10.66632 0 0 0 10.66632-10.66632v-213.3264a42.66528 42.66528 0 0 0-42.66528-42.66528h-85.33056a42.66528 42.66528 0 0 0-42.66528 42.66528v213.3264a10.66632 10.66632 0 0 0 10.66632 10.66632zM970.635121 885.33784a10.66632 10.66632 0 0 0 10.66632-10.66632v-511.983361a42.66528 42.66528 0 0 0-42.66528-42.66528h-85.33056a42.66528 42.66528 0 0 0-42.66528 42.66528v511.983361a10.66632 10.66632 0 0 0 10.66632 10.66632z" p-id="12208"></path><path d="M149.32848 576.01456a85.33056 85.33056 0 0 0 85.33056-85.330561 84.51992 84.51992 0 0 0-4.266528-25.599168l135.120942-112.636339a83.410622 83.410622 0 0 0 104.273945-19.626029l106.6632 35.582844A85.33056 85.33056 0 0 0 746.642401 362.688159a83.79461 83.79461 0 0 0-9.85568-38.910735l140.240776-163.621349A85.074568 85.074568 0 1 0 831.972961 85.363839a83.709279 83.709279 0 0 0 3.967871 24.361875L688.190967 282.136111a82.429321 82.429321 0 0 0-91.346364 25.300511l-106.663201-35.540179A85.117234 85.117234 0 1 0 324.256128 302.956767L189.263182 415.763768A84.263928 84.263928 0 0 0 149.32848 405.353439a85.33056 85.33056 0 0 0 0 170.661121zM981.301441 938.66944H42.66528a43.347925 43.347925 0 0 0-42.66528 42.66528 42.66528 42.66528 0 0 0 42.66528 42.66528h938.636161a42.66528 42.66528 0 0 0 42.66528-42.66528 43.305259 43.305259 0 0 0-42.66528-42.66528z" p-id="12209"></path>
+</svg>

src/assets/icons/cross.svg

@@ -0,0 +1,15 @@
+<!-- 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. -->
+<svg t="1680101648371" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15649" width="48" height="48"><path d="M832 272c0-62.4-51-112.9-113.6-112-60.7 0.9-110 50.6-110.4 111.3-0.3 52.6 35.6 96.8 84.2 109.2 14 3.6 23.8 16 24.1 30.4 0.5 27.3-4.4 57.4-22.3 82.5-28.7 40.3-80.7 54.9-126.6 67.8-29 8.1-50.1 10.2-68.7 12-26.4 2.6-51.4 5.1-82.6 23-6.6 3.8-13.1 8-19.2 12.6-5.3 4-12.8 0.2-12.8-6.4V241.3c0-12.2 6.8-23.5 17.7-28.9 37.1-18.4 62.6-56.8 62.3-101.1-0.5-62.8-53.2-113.4-116-111.2C288.1 2.1 240 51.4 240 112c0 44 25.4 82.1 62.3 100.4 10.9 5.4 17.7 16.5 17.7 28.6v541.7c0 12.2-6.8 23.5-17.7 28.9-37.1 18.4-62.6 56.8-62.3 101.1 0.4 62.8 53.1 113.3 115.9 111.2C416 1021.9 464 972.5 464 912c0-44-25.4-82.1-62.3-100.4-10.9-5.4-17.7-16.5-17.7-28.6v-19.2c0-42 19.9-81.8 54.3-105.9 3.1-2.2 6.4-4.3 9.7-6.2 19.3-11.1 33.5-12.5 57-14.8 20.2-2 45.3-4.5 79.7-14.1 50.5-14.2 119.6-33.5 161.4-92.3 24-33.7 35.4-75 34.1-123-0.2-6.9-0.7-13.8-1.4-20.9-1.1-10.7 3.5-21 11.8-27.8 25.3-20.4 41.4-51.7 41.4-86.8zM304 112c0-26.5 21.5-48 48-48s48 21.5 48 48-21.5 48-48 48-48-21.5-48-48z m96 800c0 26.5-21.5 48-48 48s-48-21.5-48-48 21.5-48 48-48 48 21.5 48 48z m320-592c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48z" p-id="15650"></path></svg>

src/assets/icons/data_processing_engine.svg

@@ -0,0 +1,38 @@
+<!-- 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. -->
+
+<svg width="2400" height="2400" viewBox="0 0 200 100"  version="1.1"  xmlns="http://www.w3.org/2000/svg">
+
+    <defs>
+        <marker id="arrowhead" markerWidth="8" markerHeight="8" refX="2" refY="2.5" orient="auto">
+            <polygon points="0 0, 3 2.5, 0 5" fill="white" />
+        </marker>
+    </defs>
+
+    <line x1="0" y1="20" x2="42" y2="20" stroke="white" stroke-width="7" marker-end="url(#arrowhead)" />
+    <line x1="0" y1="50" x2="42" y2="50" stroke="white" stroke-width="7" marker-end="url(#arrowhead)" />
+    <line x1="0" y1="80" x2="42" y2="80" stroke="white" stroke-width="7" marker-end="url(#arrowhead)" />
+
+
+    <line x1="49" y1="10" x2="139" y2="10" stroke="white" stroke-width="7" />
+    <line x1="49" y1="90" x2="139" y2="90" stroke="white" stroke-width="7" />
+    <line x1="49" y1="10" x2="50" y2="90" stroke="white" stroke-width="7" />
+
+    <ellipse cx="140" cy="50" rx="10" ry="40" fill="none" stroke="white" stroke-width="7" />
+
+    <line x1="147" y1="20" x2="190" y2="20" stroke="white" stroke-width="7" marker-end="url(#arrowhead)" />
+    <line x1="149" y1="50" x2="190" y2="50" stroke="white" stroke-width="7" marker-end="url(#arrowhead)" />
+    <line x1="147" y1="80" x2="190" y2="80" stroke="white" stroke-width="7" marker-end="url(#arrowhead)" />
+</svg>

src/assets/icons/database.svg

@@ -0,0 +1,17 @@
+<!-- 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. -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+<path d="M3.984 11.016v1.969h2.016v-1.969h-2.016zM2.016 14.016v-4.031h19.969v4.031h-19.969zM6 6.984v-1.969h-2.016v1.969h2.016zM2.016 3.984h19.969v4.031h-19.969v-4.031zM3.984 17.016v1.969h2.016v-1.969h-2.016zM2.016 20.016v-4.031h19.969v4.031h-19.969z"></path>
+</svg>

src/assets/icons/demand.svg

@@ -13,4 +13,4 @@ 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. -->
 
-<svg t="1654161407133" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1721" width="16" height="16"><path d="M804.224 86.144c0-19.264-15.616-34.944-34.944-34.944l-734.336 0c-19.264 0-34.944 15.68-34.944 34.944l0 82.048 804.224 0 0-82.048zM738.88 602.432c0 47.072-38.176 85.248-85.248 85.248s-85.248-38.176-85.248-85.248c0-47.072 38.176-85.248 85.248-85.248s85.248 38.176 85.248 85.248zM804.992 264.64l0-62.976-804.224 0 0 665.408c0 18.56 14.656 33.472 32.96 34.56l402.24 0c61.12 44.544 136.192 71.168 217.664 71.168 204.544 0 370.368-165.824 370.368-370.368 0-150.592-89.984-279.936-219.008-337.792zM412.096 298.24l30.528 0c-10.624 7.36-20.8 15.36-30.528 23.744l0-23.744zM63.04 298.24l153.024 0 0 153.024-153.024 0 0-153.024zM216.064 805.056l-153.024 0 0-153.024 153.024 0 0 153.024zM219.136 631.232l-153.024 0 0-153.024 153.024 0 0 153.024zM237.568 805.056l0-153.024 49.408 0c7.488 55.936 27.264 107.904 56.832 153.024l-106.24 0zM284.672 631.232l-44.032 0 0-153.024 64.384 0c-13.824 38.848-21.824 80.576-21.824 124.224 0 9.728 0.768 19.264 1.472 28.8zM390.592 341.76c-31.168 31.424-56.512 68.544-74.88 109.44l-78.144 0 0-152.96 153.024 0 0 43.52zM899.136 638.4l-63.36 12.864c-4.288 16.064-10.688 31.296-18.816 45.376l35.712 53.888-50.944 50.944-53.888-35.712c-14.08 8.128-29.312 14.528-45.376 18.816l-12.864 63.36-72 0-12.864-63.36c-16.064-4.288-31.296-10.688-45.376-18.816l-53.888 35.712-50.944-50.944 35.712-53.888c-8.128-14.08-14.528-29.312-18.816-45.376l-63.36-12.864 0-72 63.36-12.864c4.352-16.064 10.688-31.296 18.816-45.312l-35.712-53.952 50.944-50.944 53.888 35.776c14.08-8.128 29.312-14.464 45.376-18.816l12.864-63.36 72 0 12.864 63.36c16.064 4.288 31.296 10.688 45.376 18.816l53.888-35.712 50.944 50.944-35.712 53.824c8.128 14.08 14.528 29.312 18.816 45.376l63.36 12.864 0 72z" p-id="1722" fill="#707070"></path></svg>
+<svg t="1654161407133" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1721" width="16" height="16"><path d="M804.224 86.144c0-19.264-15.616-34.944-34.944-34.944l-734.336 0c-19.264 0-34.944 15.68-34.944 34.944l0 82.048 804.224 0 0-82.048zM738.88 602.432c0 47.072-38.176 85.248-85.248 85.248s-85.248-38.176-85.248-85.248c0-47.072 38.176-85.248 85.248-85.248s85.248 38.176 85.248 85.248zM804.992 264.64l0-62.976-804.224 0 0 665.408c0 18.56 14.656 33.472 32.96 34.56l402.24 0c61.12 44.544 136.192 71.168 217.664 71.168 204.544 0 370.368-165.824 370.368-370.368 0-150.592-89.984-279.936-219.008-337.792zM412.096 298.24l30.528 0c-10.624 7.36-20.8 15.36-30.528 23.744l0-23.744zM63.04 298.24l153.024 0 0 153.024-153.024 0 0-153.024zM216.064 805.056l-153.024 0 0-153.024 153.024 0 0 153.024zM219.136 631.232l-153.024 0 0-153.024 153.024 0 0 153.024zM237.568 805.056l0-153.024 49.408 0c7.488 55.936 27.264 107.904 56.832 153.024l-106.24 0zM284.672 631.232l-44.032 0 0-153.024 64.384 0c-13.824 38.848-21.824 80.576-21.824 124.224 0 9.728 0.768 19.264 1.472 28.8zM390.592 341.76c-31.168 31.424-56.512 68.544-74.88 109.44l-78.144 0 0-152.96 153.024 0 0 43.52zM899.136 638.4l-63.36 12.864c-4.288 16.064-10.688 31.296-18.816 45.376l35.712 53.888-50.944 50.944-53.888-35.712c-14.08 8.128-29.312 14.528-45.376 18.816l-12.864 63.36-72 0-12.864-63.36c-16.064-4.288-31.296-10.688-45.376-18.816l-53.888 35.712-50.944-50.944 35.712-53.888c-8.128-14.08-14.528-29.312-18.816-45.376l-63.36-12.864 0-72 63.36-12.864c4.352-16.064 10.688-31.296 18.816-45.312l-35.712-53.952 50.944-50.944 53.888 35.776c14.08-8.128 29.312-14.464 45.376-18.816l12.864-63.36 72 0 12.864 63.36c16.064 4.288 31.296 10.688 45.376 18.816l53.888-35.712 50.944 50.944-35.712 53.824c8.128 14.08 14.528 29.312 18.816 45.376l63.36 12.864 0 72z" p-id="1722"></path></svg>

src/assets/icons/download.svg

@@ -0,0 +1,17 @@
+<!-- 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. -->
+<svg t="1758874892311" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <path d="M731.428571 341.333333h73.142858a73.142857 73.142857 0 0 1 73.142857 73.142857v414.476191a73.142857 73.142857 0 0 1-73.142857 73.142857H219.428571a73.142857 73.142857 0 0 1-73.142857-73.142857V414.47619a73.142857 73.142857 0 0 1 73.142857-73.142857h73.142858v73.142857H219.428571v414.476191h585.142858V414.47619h-73.142858v-73.142857z m-176.90819-242.590476l0.048762 397.092572 84.577524-84.601905 51.687619 51.712-172.373334 172.397714-172.397714-172.373333 51.712-51.736381 83.626667 83.626666V98.742857h73.142857z" p-id="4697"></path>
+</svg>

src/assets/icons/edit.svg

@@ -0,0 +1,17 @@
+<!-- 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. -->
+<svg t="1684722897341" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2408">
+  <path d="M853.333333 501.333333c-17.066667 0-32 14.933333-32 32v320c0 6.4-4.266667 10.666667-10.666666 10.666667H170.666667c-6.4 0-10.666667-4.266667-10.666667-10.666667V213.333333c0-6.4 4.266667-10.666667 10.666667-10.666666h320c17.066667 0 32-14.933333 32-32s-14.933333-32-32-32H170.666667c-40.533333 0-74.666667 34.133333-74.666667 74.666666v640c0 40.533333 34.133333 74.666667 74.666667 74.666667h640c40.533333 0 74.666667-34.133333 74.666666-74.666667V533.333333c0-17.066667-14.933333-32-32-32z" fill="#666666" p-id="2409"></path><path d="M405.333333 484.266667l-32 125.866666c-2.133333 10.666667 0 23.466667 8.533334 29.866667 6.4 6.4 14.933333 8.533333 23.466666 8.533333h8.533334l125.866666-32c6.4-2.133333 10.666667-4.266667 14.933334-8.533333l300.8-300.8c38.4-38.4 38.4-102.4 0-140.8-38.4-38.4-102.4-38.4-140.8 0L413.866667 469.333333c-4.266667 4.266667-6.4 8.533333-8.533334 14.933334z m59.733334 23.466666L761.6 213.333333c12.8-12.8 36.266667-12.8 49.066667 0 12.8 12.8 12.8 36.266667 0 49.066667L516.266667 558.933333l-66.133334 17.066667 14.933334-68.266667z" p-id="2410"></path>
+</svg>

src/assets/icons/entry.svg

@@ -0,0 +1,15 @@
+<!-- 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. -->
+<svg t="1680083488716" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1096" width="48" height="48"><path d="M853.333333 512a42.666667 42.666667 0 0 0-42.666666-42.666667h-323.84l98.133333-97.706666a42.666667 42.666667 0 1 0-60.586667-60.586667l-170.666666 170.666667a42.666667 42.666667 0 0 0-8.96 14.08 42.666667 42.666667 0 0 0 0 32.426666 42.666667 42.666667 0 0 0 8.96 14.08l170.666666 170.666667a42.666667 42.666667 0 0 0 60.586667 0 42.666667 42.666667 0 0 0 0-60.586667L486.826667 554.666667H810.666667a42.666667 42.666667 0 0 0 42.666666-42.666667zM725.333333 85.333333H298.666667a128 128 0 0 0-128 128v597.333334a128 128 0 0 0 128 128h426.666666a128 128 0 0 0 128-128v-128a42.666667 42.666667 0 0 0-85.333333 0v128a42.666667 42.666667 0 0 1-42.666667 42.666666H298.666667a42.666667 42.666667 0 0 1-42.666667-42.666666V213.333333a42.666667 42.666667 0 0 1 42.666667-42.666666h426.666666a42.666667 42.666667 0 0 1 42.666667 42.666666v128a42.666667 42.666667 0 0 0 85.333333 0V213.333333a128 128 0 0 0-128-128z" p-id="1097"></path></svg>

src/assets/icons/event.svg

@@ -12,4 +12,4 @@ 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. -->
-<svg t="1655695739627" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2218" width="48" height="48"><path d="M173.292308 177.230769C86.646154 265.846154 39.384615 382.030769 39.384615 504.123077 39.384615 531.692308 61.046154 551.384615 86.646154 551.384615s47.261538-21.661538 47.261538-47.261538c-1.969231-96.492308 37.415385-189.046154 106.338462-257.969231s163.446154-106.338462 257.969231-106.338461c27.569231 0 47.261538-21.661538 47.261538-47.261539 0-27.569231-21.661538-47.261538-47.261538-47.261538C378.092308 43.323077 259.938462 90.584615 173.292308 177.230769z m57.107692 326.892308c0 27.569231 19.692308 47.261538 47.261538 47.261538s47.261538-21.661538 47.261539-47.261538c0-45.292308 17.723077-90.584615 51.2-122.092308 33.476923-33.476923 76.8-49.230769 122.092308-51.2 27.569231 0 47.261538-21.661538 47.261538-47.261538 0-27.569231-19.692308-47.261538-47.261538-47.261539-70.892308 0-139.815385 27.569231-191.015385 76.8-7.876923 9.846154-80.738462 82.707692-76.8 191.015385z m665.6-204.8c-17.723077-23.630769-41.353846-51.2-45.292308-55.138462-5.907692-3.938462-13.784615-7.876923-21.661538-7.876923-7.876923 0-15.753846 1.969231-19.692308 7.876923L610.461538 441.107692c-47.261538-39.384615-118.153846-37.415385-163.446153 7.876923-45.292308 45.292308-47.261538 116.184615-7.876923 163.446154l-191.015385 191.015385c-5.907692 5.907692-9.846154 13.784615-9.846154 21.661538 0 9.846154 3.938462 19.692308 11.815385 25.6l53.16923 39.384616c72.861538 57.107692 163.446154 88.615385 259.938462 88.615384 232.369231 0 421.415385-189.046154 421.415385-421.415384 0-94.523077-33.476923-185.107692-88.615385-257.969231z" p-id="2219" fill="#707070"></path></svg>
+<svg t="1655695739627" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2218" width="48" height="48"><path d="M173.292308 177.230769C86.646154 265.846154 39.384615 382.030769 39.384615 504.123077 39.384615 531.692308 61.046154 551.384615 86.646154 551.384615s47.261538-21.661538 47.261538-47.261538c-1.969231-96.492308 37.415385-189.046154 106.338462-257.969231s163.446154-106.338462 257.969231-106.338461c27.569231 0 47.261538-21.661538 47.261538-47.261539 0-27.569231-21.661538-47.261538-47.261538-47.261538C378.092308 43.323077 259.938462 90.584615 173.292308 177.230769z m57.107692 326.892308c0 27.569231 19.692308 47.261538 47.261538 47.261538s47.261538-21.661538 47.261539-47.261538c0-45.292308 17.723077-90.584615 51.2-122.092308 33.476923-33.476923 76.8-49.230769 122.092308-51.2 27.569231 0 47.261538-21.661538 47.261538-47.261538 0-27.569231-19.692308-47.261538-47.261538-47.261539-70.892308 0-139.815385 27.569231-191.015385 76.8-7.876923 9.846154-80.738462 82.707692-76.8 191.015385z m665.6-204.8c-17.723077-23.630769-41.353846-51.2-45.292308-55.138462-5.907692-3.938462-13.784615-7.876923-21.661538-7.876923-7.876923 0-15.753846 1.969231-19.692308 7.876923L610.461538 441.107692c-47.261538-39.384615-118.153846-37.415385-163.446153 7.876923-45.292308 45.292308-47.261538 116.184615-7.876923 163.446154l-191.015385 191.015385c-5.907692 5.907692-9.846154 13.784615-9.846154 21.661538 0 9.846154 3.938462 19.692308 11.815385 25.6l53.16923 39.384616c72.861538 57.107692 163.446154 88.615385 259.938462 88.615384 232.369231 0 421.415385-189.046154 421.415385-421.415384 0-94.523077-33.476923-185.107692-88.615385-257.969231z" p-id="2219"></path></svg>

src/assets/icons/exit.svg

@@ -0,0 +1,15 @@
+<!-- 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. -->
+<svg t="1680104481890" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7991" width="16" height="16"><path d="M918.4 489.6l-160-160c-12.8-12.8-32-12.8-44.8 0-12.8 12.8-12.8 32 0 44.8l105.6 105.6L512 480c-19.2 0-32 12.8-32 32s12.8 32 32 32l307.2 0-105.6 105.6c-12.8 12.8-12.8 32 0 44.8 6.4 6.4 12.8 9.6 22.4 9.6 9.6 0 16-3.2 22.4-9.6l160-163.2c0 0 0-3.2 3.2-3.2C931.2 518.4 931.2 499.2 918.4 489.6zM832 736c-19.2 0-32 12.8-32 32l0 64c0 19.2-12.8 32-32 32L224 864c-19.2 0-32-12.8-32-32L192 192c0-19.2 12.8-32 32-32l544 0c19.2 0 32 12.8 32 32l0 64c0 19.2 12.8 32 32 32s32-12.8 32-32L864 192c0-54.4-41.6-96-96-96L224 96C169.6 96 128 137.6 128 192l0 640c0 54.4 41.6 96 96 96l544 0c54.4 0 96-41.6 96-96l0-64C864 748.8 851.2 736 832 736z" p-id="7992"></path></svg>

src/assets/icons/general_service.svg

@@ -0,0 +1,16 @@
+<!-- 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. -->
+
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>icn/chart</title><path d="M5.55 3.824L6.853 5.78a.3.3 0 0 0 .384.102l1.526-.764a.3.3 0 0 1 .384.102l1.65 2.476a.3.3 0 0 0 .462.045l1.229-1.229a.3.3 0 0 1 .512.212v4.243H5V3.99a.3.3 0 0 1 .55-.167zM13 12a1 1 0 0 1 0 2H3.833A1.833 1.833 0 0 1 2 12.167V3a1 1 0 1 1 2 0v9h9z" id="a"/></svg>

src/assets/icons/hierarchy_topology.svg

@@ -0,0 +1,18 @@
+<!-- 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. -->
+
+<svg t="1704964118567" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5167">
+  <path d="M900.032 646.016h-56.064V502.976a16 16 0 0 0-16-16H544v-96h62.976c22.144 0 40-17.92 40-40V161.024a40 40 0 0 0-40-40H417.024a40 40 0 0 0-40 40v189.952c0 22.144 17.92 40 40 40H480v96H195.968a16 16 0 0 0-16 16v143.04h-55.936a38.016 38.016 0 0 0-38.016 38.016v176c0 20.928 17.024 37.952 37.952 37.952h176a38.016 38.016 0 0 0 38.016-38.016v-176a38.016 38.016 0 0 0-37.952-37.952h-56V550.976H480v95.04h-56a38.016 38.016 0 0 0-38.016 38.016v176c0 20.928 17.024 37.952 38.016 37.952h176a38.016 38.016 0 0 0 38.016-38.016v-176a38.016 38.016 0 0 0-38.016-37.952H544V550.976h236.032v95.04h-56.064a38.016 38.016 0 0 0-37.952 38.016v176c0 20.928 17.024 37.952 38.016 37.952h176a38.016 38.016 0 0 0 37.952-38.016v-176a38.016 38.016 0 0 0-38.016-37.952zM440.96 184.96h141.952v141.952H441.024V185.024zM278.016 838.016H145.92V705.92h132.032v132.032z m299.968 0H446.08V705.92H577.92v132.032z m300.032 0h-132.032V705.92h132.032v132.032z" p-id="5168"></path>
+</svg>

src/assets/icons/infrastructure.svg

@@ -0,0 +1,18 @@
+<!-- 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. -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+<title>scatter_plot</title>
+<path d="M13.594 17.578q0-1.219 0.891-2.109t2.109-0.891 2.109 0.891 0.891 2.109-0.891 2.109-2.109 0.891-2.109-0.891-0.891-2.109zM8.016 6q0-1.219 0.891-2.109t2.109-0.891 2.109 0.891 0.891 2.109-0.891 2.109-2.109 0.891-2.109-0.891-0.891-2.109zM3.984 14.016q0-1.219 0.891-2.109t2.109-0.891 2.109 0.891 0.891 2.109-0.891 2.109-2.109 0.891-2.109-0.891-0.891-2.109z"></path>
+</svg>

src/assets/icons/kubernetes.svg

@@ -0,0 +1,17 @@
+<!-- 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. -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+<path d="M12.984 14.859q1.266-0.375 1.875-1.875h7.125q-0.375 3.609-2.836 6.141t-6.164 2.859v-7.125zM14.859 11.016q-0.563-1.5-1.875-1.875v-7.125q3.703 0.328 6.164 2.859t2.836 6.141h-7.125zM11.016 9.141q-0.797 0.328-1.406 1.125t-0.609 1.734 0.609 1.734 1.406 1.125v7.125q-3.797-0.375-6.398-3.234t-2.602-6.75 2.602-6.75 6.398-3.234v7.125z"></path>
+</svg>

src/assets/icons/logo-light.svg

@@ -0,0 +1,138 @@
+<!-- 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. -->
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400.000000 400.000000"
+ preserveAspectRatio="xMidYMid meet">
+
+<g transform="translate(0.000000,400.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M1737 3725 c-379 -61 -696 -224 -968 -495 -249 -248 -403 -533 -481
+-890 -20 -93 -22 -133 -22 -340 0 -207 2 -247 22 -339 48 -217 123 -407 231
+-581 253 -406 658 -688 1141 -791 91 -20 135 -23 330 -24 172 0 246 4 315 17
+361 69 669 231 926 487 271 272 438 604 494 983 23 154 16 448 -15 593 -147
+694 -668 1214 -1366 1365 -130 29 -472 37 -607 15z m461 -131 c24 -3 52 -14
+63 -25 23 -23 25 -76 3 -100 -15 -17 -15 -19 0 -34 25 -26 20 -82 -10 -112
+-25 -25 -28 -25 -112 -19 -48 4 -88 8 -89 10 -1 1 4 60 12 131 8 72 15 137 15
+145 0 17 14 17 118 4z m-359 -30 c30 -22 61 -89 61 -137 0 -48 -22 -102 -48
+-116 -23 -12 -163 -43 -169 -38 -7 7 -53 280 -48 285 8 9 78 20 130 21 32 1
+59 -5 74 -15z m564 -8 c7 -8 22 -44 31 -80 l18 -66 62 48 c48 38 66 47 85 43
+23 -6 18 -12 -58 -71 -76 -61 -83 -69 -98 -122 -12 -43 -21 -58 -34 -58 -28 0
+-30 14 -10 73 l19 56 -29 93 c-16 51 -29 94 -29 96 0 8 31 0 43 -12z m-858
+-45 c0 -8 -30 -27 -69 -43 -38 -15 -71 -30 -74 -32 -4 -4 17 -76 22 -76 1 0
+31 11 66 25 76 30 90 31 90 7 0 -13 -19 -24 -70 -42 -61 -21 -69 -27 -64 -45
+15 -46 24 -65 32 -65 5 0 42 14 82 30 57 23 75 27 82 18 4 -7 8 -16 8 -19 0
+-7 -180 -79 -197 -79 -6 0 -28 44 -49 98 -20 53 -43 112 -51 131 -7 19 -11 36
+-9 38 10 11 173 71 186 70 8 -1 15 -9 15 -16z m-257 -157 c26 -29 28 -61 6
+-92 -12 -17 -12 -22 -2 -22 7 0 42 -13 77 -29 62 -28 63 -29 41 -44 -21 -15
+-26 -14 -59 2 -20 10 -53 24 -73 30 -37 12 -37 13 -96 -25 -2 -1 13 -27 32
+-58 34 -52 35 -56 17 -65 -17 -10 -27 2 -92 101 -39 62 -74 119 -76 128 -2 9
+14 26 44 44 119 73 138 76 181 30z m-292 -145 c3 -6 -19 -37 -52 -70 l-58 -59
+29 -30 29 -30 56 55 c48 47 59 54 69 42 10 -12 2 -24 -44 -68 l-56 -52 32 -33
+32 -33 64 59 c52 47 68 57 78 47 11 -10 -1 -27 -66 -92 l-80 -80 -99 105 c-55
+58 -100 108 -100 111 0 10 139 139 150 139 5 0 12 -5 16 -11z m1197 -44 c494
+-74 896 -467 982 -959 19 -113 19 -299 0 -410 -73 -416 -377 -773 -776 -910
+-142 -48 -213 -59 -384 -59 -175 -1 -241 10 -400 65 -383 131 -680 481 -761
+893 -22 115 -20 335 5 450 79 372 314 669 656 831 214 102 441 135 678 99z
+m-1319 -258 c81 -91 95 -110 86 -126 -9 -18 -14 -18 -122 16 -62 19 -117 38
+-123 41 -10 6 17 -27 109 -133 41 -46 48 -60 39 -73 -13 -20 0 -23 -160 28
+-89 28 -133 47 -133 56 0 28 27 25 134 -15 73 -26 103 -34 94 -23 -7 9 -43 50
+-80 91 -55 61 -65 78 -57 93 13 25 30 23 147 -15 l103 -33 -82 82 c-67 67 -80
+85 -74 103 4 12 10 21 14 19 4 -2 51 -51 105 -111z m2502 -151 c38 -38 44 -77
+19 -126 -19 -37 -43 -50 -95 -50 -61 0 -100 41 -100 105 0 40 5 52 31 76 46
+42 99 41 145 -5z m-2677 -171 c16 -8 41 -29 56 -47 24 -29 27 -38 23 -91 -4
+-54 -8 -63 -41 -93 -32 -30 -44 -34 -90 -34 -126 0 -200 102 -150 207 9 20 30
+44 47 54 38 23 115 25 155 4z m-145 -306 c35 -16 50 -59 42 -124 l-6 -54 32
+-5 c18 -3 44 -7 58 -8 19 -2 24 -8 22 -23 -2 -11 -5 -21 -6 -22 -5 -6 -272 30
+-280 37 -5 5 -4 42 3 87 9 63 16 82 37 101 28 24 60 28 98 11z m2717 -590 c14
+-7 18 -16 14 -27 -4 -9 -20 -52 -36 -95 l-29 -78 33 -13 c77 -32 72 -34 105
+51 29 75 55 102 67 70 3 -7 -7 -48 -24 -90 l-29 -76 55 -21 c30 -11 58 -18 62
+-15 5 2 23 45 41 95 31 87 41 99 68 82 10 -7 2 -36 -32 -126 -25 -65 -47 -120
+-49 -123 -3 -2 -82 26 -177 62 -95 36 -175 65 -177 65 -9 0 1 33 39 137 24 62
+44 113 46 113 2 0 12 -5 23 -11z m34 -411 c80 -57 145 -106 145 -109 0 -3 -6
+-14 -14 -24 -13 -18 -17 -16 -79 28 -36 26 -69 47 -74 47 -10 0 -113 -145
+-113 -158 0 -7 61 -53 122 -93 14 -9 -11 -52 -26 -46 -10 4 -288 198 -304 212
+-6 5 18 45 26 45 5 0 36 -21 71 -46 34 -25 64 -44 65 -42 1 2 25 35 52 73 28
+39 53 75 57 81 4 7 -18 29 -58 55 -35 24 -65 49 -65 55 0 16 23 35 38 29 7 -2
+78 -51 157 -107z m-2350 -142 c35 -15 65 -59 65 -96 0 -54 -57 -110 -112 -110
+-13 0 -37 9 -55 20 -69 41 -63 154 9 185 42 18 51 18 93 1z m2003 -75 c8 -5
+12 -17 10 -27 -3 -14 -11 -18 -33 -17 -82 7 -145 -48 -145 -126 0 -89 73 -161
+162 -161 43 0 54 4 84 34 27 27 34 42 34 74 0 32 4 41 22 45 29 8 38 1 38 -31
+-1 -38 -32 -102 -66 -133 -75 -69 -196 -57 -276 28 -27 28 -58 99 -58 132 0
+65 56 152 115 177 34 15 94 18 113 5z m-247 -340 c79 -74 145 -138 147 -142 2
+-4 -7 -13 -19 -19 -19 -11 -26 -7 -65 31 l-43 42 -68 -31 -68 -32 -3 -64 c-2
+-55 -6 -66 -23 -71 -11 -4 -23 -5 -25 -2 -3 2 -9 94 -14 203 -8 180 -7 200 8
+212 9 7 19 11 23 10 4 -2 71 -63 150 -137z m-321 34 c58 -30 78 -120 40 -182
+-19 -31 -48 -44 -151 -67 l-26 -6 14 -60 c15 -68 12 -80 -20 -80 -20 0 -24 12
+-56 173 -19 94 -36 179 -38 188 -4 12 11 19 64 31 90 20 138 21 173 3z m-334
+-207 c38 -105 71 -195 72 -200 2 -4 -10 -8 -26 -8 -28 0 -32 5 -49 58 l-20 57
+-79 3 -79 3 -27 -54 c-24 -49 -29 -54 -53 -50 -14 3 -25 9 -23 13 2 3 41 88
+87 188 112 243 106 244 197 -10z"/>
+<path d="M2120 3537 c0 -14 -2 -32 -6 -40 -4 -11 6 -16 43 -20 54 -6 83 5 83
+32 0 27 -24 43 -75 49 -43 4 -45 3 -45 -21z"/>
+<path d="M2105 3399 c-4 -22 -5 -42 -2 -45 9 -10 77 -16 101 -10 52 13 44 70
+-12 86 -68 19 -79 14 -87 -31z"/>
+<path d="M1697 3533 c-13 -3 -17 -11 -14 -26 3 -12 11 -58 18 -102 7 -44 14
+-81 15 -83 7 -10 96 13 113 29 39 36 21 165 -24 183 -18 7 -80 6 -108 -1z"/>
+<path d="M1156 3310 l-47 -30 22 -33 c12 -17 24 -34 25 -36 6 -7 94 50 103 67
+5 10 5 27 0 40 -12 31 -45 28 -103 -8z"/>
+<path d="M1060 2137 c-20 -10 -25 -20 -25 -52 0 -37 4 -42 53 -75 79 -52 68
+-97 -21 -88 -23 2 -32 -1 -32 -12 0 -11 14 -16 57 -18 48 -2 60 0 77 19 40 43
+27 78 -46 125 -71 45 -70 68 5 72 35 2 52 7 52 16 0 26 -78 34 -120 13z"/>
+<path d="M1230 2020 c0 -123 1 -130 20 -130 17 0 20 7 20 43 l1 42 20 -25 c12
+-14 27 -33 34 -43 8 -11 22 -17 35 -15 21 3 20 4 -9 43 -38 50 -38 61 0 105
+29 34 29 35 8 38 -12 2 -26 -4 -34 -15 -7 -10 -22 -29 -34 -43 l-20 -25 -1 78
+c0 70 -2 77 -20 77 -19 0 -20 -7 -20 -130z"/>
+<path d="M2030 1976 c0 -130 1 -136 20 -136 20 0 20 5 18 132 -3 117 -5 133
+-20 136 -16 3 -18 -8 -18 -132z"/>
+<path d="M2133 2103 c-10 -3 -13 -40 -13 -134 0 -121 1 -129 19 -129 16 0 20
+8 23 43 l3 42 30 -42 c20 -28 38 -42 53 -43 12 0 22 3 22 6 0 3 -16 26 -35 51
+l-35 46 35 43 c40 48 42 54 18 54 -10 0 -35 -19 -55 -42 l-37 -43 -1 78 c0 75
+-2 81 -27 70z"/>
+<path d="M2310 2090 c0 -13 7 -20 20 -20 13 0 20 7 20 20 0 13 -7 20 -20 20
+-13 0 -20 -7 -20 -20z"/>
+<path d="M1410 2073 c0 -5 7 -30 15 -58 9 -27 20 -67 26 -87 5 -22 16 -38 24
+-38 8 0 15 -4 15 -8 0 -17 -25 -32 -52 -32 -18 0 -28 -5 -28 -15 0 -22 72 -20
+92 3 9 9 28 60 42 112 15 52 29 103 32 113 5 15 1 18 -17 15 -17 -2 -25 -12
+-32 -38 -23 -94 -29 -110 -36 -106 -5 3 -11 20 -15 38 -17 85 -27 108 -46 108
+-11 0 -20 -3 -20 -7z"/>
+<path d="M1766 2031 c-3 -4 -8 -35 -12 -67 -8 -75 -19 -96 -28 -58 -25 105
+-26 105 -53 102 -23 -3 -29 -10 -41 -58 -15 -63 -32 -88 -32 -48 0 14 -3 40
+-7 59 -5 28 -7 30 -14 14 -13 -35 -10 -112 6 -125 29 -24 49 -7 67 55 9 33 17
+62 18 65 1 3 11 -24 23 -60 19 -57 25 -65 47 -65 22 0 27 7 37 50 7 28 16 71
+19 98 5 39 4 47 -9 47 -9 0 -18 -4 -21 -9z"/>
+<path d="M1853 2033 c-7 -2 -13 -12 -13 -20 0 -12 7 -14 31 -9 34 7 69 -8 69
+-28 0 -8 -17 -16 -42 -20 -53 -9 -68 -21 -68 -57 0 -43 21 -57 90 -56 l60 0 0
+68 c0 103 -19 130 -90 128 -14 0 -31 -3 -37 -6z m87 -128 c0 -18 -7 -26 -24
+-31 -30 -7 -46 1 -46 25 0 24 9 31 42 31 23 0 28 -4 28 -25z"/>
+<path d="M2317 2033 c-4 -3 -7 -48 -7 -100 0 -86 1 -93 20 -93 19 0 20 7 20
+100 0 77 -3 100 -13 100 -8 0 -17 -3 -20 -7z"/>
+<path d="M2400 1938 c0 -91 1 -98 20 -98 17 0 19 8 22 78 l3 77 35 0 35 0 3
+-77 c3 -70 5 -78 22 -78 18 0 20 7 20 78 0 106 -9 117 -94 118 l-66 1 0 -99z"/>
+<path d="M2642 2025 l-33 -14 4 -73 c2 -40 -1 -84 -7 -97 -9 -20 -6 -27 17
+-47 51 -43 147 -23 147 30 0 31 -16 43 -78 57 -64 15 -67 29 -7 29 58 0 90 28
+81 71 -3 15 -1 31 4 34 39 24 -74 32 -128 10z m74 -29 c27 -20 7 -51 -32 -51
+-23 0 -30 5 -32 24 -6 38 29 52 64 27z m-8 -151 c14 -4 22 -13 20 -23 -4 -22
+-60 -28 -77 -9 -15 19 -3 49 18 43 9 -2 26 -7 39 -11z"/>
+<path d="M549 2531 c-50 -50 -35 -120 33 -151 52 -24 80 -25 117 -5 72 37 56
+137 -26 171 -52 22 -91 18 -124 -15z"/>
+<path d="M471 2222 c-10 -19 -18 -99 -11 -105 3 -2 24 -7 47 -10 l42 -5 7 54
+c4 37 2 59 -6 69 -17 21 -67 19 -79 -3z"/>
+<path d="M2571 750 c0 -25 4 -66 7 -91 l7 -46 57 27 57 27 -65 64 -64 63 1
+-44z"/>
+<path d="M2247 708 c-25 -7 -36 -15 -33 -23 2 -7 10 -41 17 -74 l12 -62 31 6
+c84 17 103 26 114 50 17 37 15 59 -9 89 -23 29 -61 33 -132 14z"/>
+<path d="M1927 590 l-36 -75 60 -9 c33 -5 62 -7 64 -4 4 4 -4 28 -47 148 -4 9
+-19 -14 -41 -60z"/>
+</g>
+</svg>

src/assets/icons/marketplace.svg

@@ -0,0 +1,15 @@
+<!-- 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. -->
+<svg t="1688979849484" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2698"><path d="M384 469.333333H213.333333c-46.933333 0-85.333333-38.4-85.333333-85.333333V213.333333c0-46.933333 38.4-85.333333 85.333333-85.333333h170.666667c46.933333 0 85.333333 38.4 85.333333 85.333333v170.666667c0 46.933333-38.4 85.333333-85.333333 85.333333zM213.333333 213.333333v170.666667h170.666667V213.333333H213.333333z" p-id="2699"></path><path d="M170.666667 554.666667h256c25.6 0 42.666667 17.066667 42.666666 42.666666v256c0 25.6-17.066667 42.666667-42.666666 42.666667H170.666667c-25.6 0-42.666667-17.066667-42.666667-42.666667v-256c0-25.6 17.066667-42.666667 42.666667-42.666666z" p-id="2700"></path><path d="M384 896H213.333333c-46.933333 0-85.333333-38.4-85.333333-85.333333v-170.666667c0-46.933333 38.4-85.333333 85.333333-85.333333h170.666667c46.933333 0 85.333333 38.4 85.333333 85.333333v170.666667c0 46.933333-38.4 85.333333-85.333333 85.333333z m-170.666667-256v170.666667h170.666667v-170.666667H213.333333z" p-id="2701"></path><path d="M695.466667 115.2c17.066667-17.066667 42.666667-17.066667 59.733333 0l149.333333 149.333333c17.066667 17.066667 17.066667 42.666667 0 59.733334l-149.333333 149.333333c-17.066667 17.066667-42.666667 17.066667-59.733333 0l-149.333334-145.066667c-17.066667-17.066667-17.066667-42.666667 0-59.733333l149.333334-153.6z" p-id="2702"></path><path d="M810.666667 896h-170.666667c-46.933333 0-85.333333-38.4-85.333333-85.333333v-170.666667c0-46.933333 38.4-85.333333 85.333333-85.333333h170.666667c46.933333 0 85.333333 38.4 85.333333 85.333333v170.666667c0 46.933333-38.4 85.333333-85.333333 85.333333z m-170.666667-256v170.666667h170.666667v-170.666667h-170.666667z" p-id="2703"></path></svg>

src/assets/icons/mq.svg

@@ -0,0 +1,16 @@
+<!-- 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. -->
+
+<svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M750.08 657.92c-16.384 0-30.208 2.56-44.032 8.192l-44.032-52.224c33.28-38.4 55.296-90.624 55.296-145.92s-19.456-101.888-52.224-140.288l27.648-24.576c16.384 8.192 33.28 13.824 52.224 13.824 63.488 0 115.712-52.224 115.712-115.712s-52.224-115.712-115.712-115.712c-63.488 0-115.712 52.224-115.712 115.712 0 13.824 2.56 30.208 8.192 41.472l-35.84 30.208c-34.304-19.968-73.216-30.208-112.64-30.208-44.032 0-85.504 13.824-121.344 32.768l-41.472-52.224c0-5.632 2.56-13.824 2.56-19.456 0-40.96-32.768-74.24-73.728-74.24h-0.512c-40.96 0-74.24 32.768-74.24 73.728v0.512c0 40.96 32.768 74.24 73.728 74.24H262.656L306.688 332.8c-27.648 38.4-46.592 85.504-46.592 134.656 0 35.84 8.192 71.68 24.576 101.888l-35.84 30.208c-8.192-5.632-19.456-5.632-30.208-5.632-49.664 0-90.624 41.472-90.624 90.624 0 49.664 41.472 90.624 90.624 90.624s90.624-41.472 90.624-90.624c0-8.192 0-16.384-2.56-24.576l30.208-27.648c41.472 35.84 93.696 57.856 154.112 57.856 33.28 0 63.488-5.632 90.624-19.456l46.592 57.856c-11.264 19.456-19.456 44.032-19.456 68.608 0 77.312 63.488 140.288 143.36 140.288s143.36-63.488 143.36-140.288c0.512-75.776-65.536-139.264-145.408-139.264z m-261.632-11.264c-99.328 0-181.76-79.872-181.76-178.688C306.688 368.64 389.12 289.28 488.448 289.28s181.76 79.872 181.76 178.688c0 99.328-82.432 178.688-181.76 178.688zM430.592 465.408c0.512 18.432-13.824 33.28-32.256 33.792-18.432 0.512-33.28-13.824-33.792-32.256v-1.536c0-18.432 14.848-32.768 33.28-32.768 18.432-0.512 32.768 14.336 32.768 32.768z m88.064 0c0 18.432-14.848 33.28-32.768 33.28-18.432 0-33.28-14.848-33.28-32.768 0-18.432 14.848-32.768 33.28-32.768s32.768 13.824 32.768 32.256z m91.136 0c0 18.432-14.848 33.28-32.768 33.28s-33.28-14.848-33.28-32.768c0-18.432 14.848-32.768 33.28-32.768 17.92-1.024 32.768 13.824 32.768 32.256z"></path></svg>

src/assets/icons/self_observability.svg

@@ -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. -->
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="3450px" height="1823px" viewBox="0 0 3450 1823" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 51.3 (57544) - http://www.bohemiancoding.com/sketch -->
+    <title>Group</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Group" transform="translate(0.000000, -29.000000)">
+            <path d="M1050.01772,1394.31899 C1050.01772,1615.24051 912.21519,1851.47342 474.746835,1851.47342 C310.696203,1851.47342 192.579747,1836.16203 87.5873418,1812.10127 C65.7139241,1807.72658 46.0278481,1792.41519 46.0278481,1768.35443 L46.0278481,1610.86582 C46.0278481,1586.80506 65.7139241,1569.30633 87.5873418,1569.30633 L91.9620253,1569.30633 C179.455696,1580.24304 398.189873,1591.17975 479.121519,1591.17975 C673.794937,1591.17975 732.853165,1521.18481 732.853165,1394.31899 C732.853165,1309.01266 691.293671,1265.26582 546.929114,1179.95949 L258.2,1007.15949 C54.7772152,886.855696 0.0936708861,759.989873 0.0936708861,606.875949 C0.0936708861,366.268354 140.083544,191.281013 546.929114,191.281013 C691.293671,191.281013 892.529114,213.15443 966.898734,230.653165 C988.772152,235.027848 1006.27089,250.339241 1006.27089,272.212658 L1006.27089,434.075949 C1006.27089,455.949367 990.959494,473.448101 969.086076,473.448101 L964.711392,473.448101 C820.346835,460.324051 675.982278,451.574684 533.805063,451.574684 C371.941772,451.574684 304.134177,508.44557 304.134177,606.875949 C304.134177,679.058228 341.318987,722.805063 483.496203,801.549367 L745.977215,948.101266 C986.58481,1081.52911 1050.01772,1221.51899 1050.01772,1394.31899 Z M2852.63038,644.060759 C2852.63038,646.248101 2852.63038,648.435443 2852.63038,650.622785 L2653.58228,1656.8 C2627.33418,1788.04051 2592.33671,1840.53671 2458.90886,1840.53671 L2399.85063,1840.53671 C2281.73418,1840.53671 2220.48861,1783.66582 2192.05316,1669.92405 L2019.25316,1000.59747 C2017.06582,991.848101 2017.06582,989.660759 2012.69114,989.660759 C2008.31646,989.660759 2008.31646,991.848101 2006.12911,1000.59747 L1833.32911,1669.92405 C1804.89367,1783.66582 1743.6481,1840.53671 1625.53165,1840.53671 L1566.47342,1840.53671 C1433.04557,1840.53671 1398.0481,1788.04051 1371.8,1656.8 L1172.7519,650.622785 C1172.7519,648.435443 1172.7519,646.248101 1172.7519,644.060759 C1172.7519,620 1192.43797,600.313924 1216.49873,600.313924 L1428.67089,600.313924 C1450.5443,600.313924 1465.8557,620 1468.04304,639.686076 L1605.84557,1564.93165 C1608.03291,1584.61772 1612.40759,1595.55443 1616.78228,1595.55443 C1621.15696,1595.55443 1627.71899,1586.80506 1632.09367,1564.93165 L1813.64304,829.98481 C1835.51646,744.678481 1861.76456,735.929114 1936.13418,735.929114 L2089.2481,735.929114 C2163.61772,735.929114 2189.86582,744.678481 2211.73924,829.98481 L2393.28861,1564.93165 C2397.66329,1586.80506 2404.22532,1595.55443 2408.6,1595.55443 C2412.97468,1595.55443 2417.34937,1584.61772 2419.53671,1564.93165 L2557.33924,639.686076 C2559.52658,620 2574.83797,600.313924 2596.71139,600.313924 L2808.88354,600.313924 C2832.9443,600.313924 2852.63038,620 2852.63038,644.060759 Z" id="Sw" fill="#1368B3"></path>
+            <g id="moon-o" transform="translate(2932.164557, 596.000000) rotate(-183.000000) translate(-2932.164557, -596.000000) translate(2415.708861, 26.379747)" fill="#D8D8D8" fill-rule="nonzero">
+                <path d="M1025.31646,927.371333 C992.796119,932.841177 959.292071,935.576099 925.845888,935.576099 C590.40035,935.576099 318.259524,661.909325 318.259524,324.582876 C318.259524,209.134252 351.705707,96.3623597 412.290747,0 C171.802278,71.8062511 0,293.684076 0,557.342199 C0,878.317305 259.46831,1139.24051 578.65368,1139.24051 C753.17563,1139.24051 916.818891,1059.22949 1025.31646,927.371333 Z" id="Shape"></path>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/icons/service_mesh.svg

@@ -0,0 +1,16 @@
+<!-- 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. -->
+
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>icn/epic</title><path d="M5.156 4l-.811 2h7.31l-.811-2H5.156zM4.55 2h6.9c.368 0 .702.235.85.6l1.622 4c.205.505-.009 1.095-.478 1.316a.87.87 0 0 1-.371.084H2.927C2.415 8 2 7.552 2 7c0-.138.026-.274.078-.4l1.622-4c.148-.365.481-.6.85-.6zM3 9h10a1 1 0 0 1 0 2H3a1 1 0 0 1 0-2zm0 3h10a1 1 0 0 1 0 2H3a1 1 0 0 1 0-2z" id="a"/></svg>

src/assets/icons/settings.svg

@@ -12,6 +12,6 @@ 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. -->
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
 <path d="M12 15.516q1.453 0 2.484-1.031t1.031-2.484-1.031-2.484-2.484-1.031-2.484 1.031-1.031 2.484 1.031 2.484 2.484 1.031zM19.453 12.984l2.109 1.641q0.328 0.234 0.094 0.656l-2.016 3.469q-0.188 0.328-0.609 0.188l-2.484-0.984q-0.984 0.703-1.688 0.984l-0.375 2.625q-0.094 0.422-0.469 0.422h-4.031q-0.375 0-0.469-0.422l-0.375-2.625q-0.891-0.375-1.688-0.984l-2.484 0.984q-0.422 0.141-0.609-0.188l-2.016-3.469q-0.234-0.422 0.094-0.656l2.109-1.641q-0.047-0.328-0.047-0.984t0.047-0.984l-2.109-1.641q-0.328-0.234-0.094-0.656l2.016-3.469q0.188-0.328 0.609-0.188l2.484 0.984q0.984-0.703 1.688-0.984l0.375-2.625q0.094-0.422 0.469-0.422h4.031q0.375 0 0.469 0.422l0.375 2.625q0.891 0.375 1.688 0.984l2.484-0.984q0.422-0.141 0.609 0.188l2.016 3.469q0.234 0.422-0.094 0.656l-2.109 1.641q0.047 0.328 0.047 0.984t-0.047 0.984z"></path>
 </svg>

src/assets/icons/task_timeline.svg

@@ -0,0 +1,17 @@
+<!-- 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. -->
+<svg t="1685973573331" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2708">
+  <path d="M138 573.8V450.2c48.2-12.1 84-55.8 84-107.7 0-51.9-35.8-95.6-84-107.7V68.1c0-14.9-12.1-27-27-27s-27 12.1-27 27v166.7C35.8 246.9 0 290.6 0 342.5c0 51.9 35.8 95.6 84 107.7v123.7c-48.2 12-84 55.7-84 107.6s35.8 95.6 84 107.7v166.7c0 14.9 12.1 27 27 27s27-12.1 27-27V789.2c48.2-12.1 84-55.8 84-107.7s-35.8-95.6-84-107.7zM60 342.5c0-28.1 22.9-51 51-51s51 22.9 51 51-22.9 51-51 51-51-22.9-51-51z m51 390c-28.1 0-51-22.9-51-51s22.9-51 51-51 51 22.9 51 51-22.9 51-51 51zM942 283H352c-16.6 0-30-13.4-30-30s13.4-30 30-30h590c16.6 0 30 13.4 30 30s-13.4 30-30 30zM771.4 457H347.6c-14.2 0-25.6-11.5-25.6-25.6v-8.7c0-14.2 11.5-25.6 25.6-25.6h423.7c14.2 0 25.6 11.5 25.6 25.6v8.7c0.1 14.1-11.4 25.6-25.5 25.6z" p-id="2709"></path><path d="M942 625H352c-16.6 0-30-13.4-30-30s13.4-30 30-30h590c16.6 0 30 13.4 30 30s-13.4 30-30 30zM771.4 799H347.6c-14.2 0-25.6-11.5-25.6-25.6v-8.7c0-14.2 11.5-25.6 25.6-25.6h423.7c14.2 0 25.6 11.5 25.6 25.6v8.7c0.1 14.1-11.4 25.6-25.5 25.6z" p-id="2710"></path>
+</svg>

src/assets/icons/workflow_scheduler.svg

@@ -0,0 +1,17 @@
+<!-- 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. -->
+<svg t="1712402256302" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1578">
+  <path d="M640 885.589333a39.424 39.424 0 0 1-32.938667 46.634667A483.413333 483.413333 0 0 1 512 938.666667a295.68 295.68 0 0 1-92.117333-16.768 32.085333 32.085333 0 1 1 13.568-62.72 415.658667 415.658667 0 0 0 78.549333 15.36 295.722667 295.722667 0 0 0 75.434667-4.266667c20.181333-9.514667 47.317333-9.216 52.565333 15.36z m-397.824-307.968a160.597333 160.597333 0 0 1 156.842667 164.096 198.314667 198.314667 0 0 1-6.954667 48.426667 154.325333 154.325333 0 0 1-149.930667 115.712 164.266667 164.266667 0 0 1 0-328.192z m539.605333 0a164.266667 164.266667 0 1 1-156.842666 164.096 160.597333 160.597333 0 0 1 156.885333-164.096z m-30.122666-262.058666A344.917333 344.917333 0 0 1 853.333333 497.024c1.109333 16.768-1.749333 38.826667-30.08 41.258667a32.554667 32.554667 0 0 1-33.493333-26.325334 334.848 334.848 0 0 0-80.341333-146.304 34.517333 34.517333 0 0 1-4.992-54.613333 33.408 33.408 0 0 1 47.232 4.693333z m-417.706667-4.48c13.269333 16.64 4.821333 28.501333-8.789333 48.512A422.4 422.4 0 0 0 256 517.802667a33.152 33.152 0 0 1-36.821333 26.709333 31.573333 31.573333 0 0 1-27.52-32.512 89.6 89.6 0 0 1 3.797333-29.226667 402.773333 402.773333 0 0 1 93.312-177.536 30.592 30.592 0 0 1 45.184 5.845334zM512 85.333333a164.266667 164.266667 0 1 1-156.842667 164.096A160.597333 160.597333 0 0 1 512 85.333333z" p-id="1579"></path>
+</svg>

src/assets/img/icons.ts

@@ -30,13 +30,13 @@ function validateFileName(str: string): string | undefined {
 Object.keys(requireComponent).forEach((filePath: string) => {
   const fileName = validateFileName(filePath);
   if (fileName) {
-    result[fileName] = (requireComponent as { [key: string]: any })[filePath].default;
+    result[fileName] = (requireComponent as Indexable)[filePath].default;
   }
 });
 Object.keys(requireTool).forEach((filePath: string) => {
   const fileName = validateFileName(filePath);
   if (fileName) {
-    t[fileName] = (requireTool as { [key: string]: any })[filePath].default;
+    t[fileName] = (requireTool as Indexable)[filePath].default;
   }
 });
 

src/components/DateCalendar.vue

@@ -162,19 +162,19 @@ limitations under the License. -->
   import { computed, onMounted, watch, reactive } from "vue";
   import type { PropType } from "vue";
   import { useI18n } from "vue-i18n";
-  /*global defineProps, defineEmits */
+  /*global defineProps, defineEmits, Indexable, Recordable*/
   const emit = defineEmits(["input", "setDates", "ok"]);
   const { t } = useI18n();
   const props = defineProps({
-    value: { type: Date },
+    value: { type: Object as PropType<Date>, default: () => new Date() },
     left: { type: Boolean, default: false },
     right: { type: Boolean, default: false },
-    dates: { type: Array as PropType<number[] | string[]>, default: () => [] },
-    disabledDate: { type: Function, default: () => false },
+    dates: { type: Array as PropType<Date[]>, default: () => [] },
     format: {
       type: String,
       default: "YYYY-MM-DD",
     },
+    maxRange: { type: Array as PropType<Date[]>, default: () => [] },
   });
   const state = reactive({
     pre: "",
@@ -191,7 +191,7 @@ limitations under the License. -->
     minute: 0,
     second: 0,
   });
-  const get = (time: Date): { [key: string]: any } => {
+  const get = (time: Date): Indexable => {
     return {
       year: time.getFullYear(),
       month: time.getMonth(),
@@ -241,6 +241,12 @@ limitations under the License. -->
   const end = computed(() => {
     return parse(Number(props.dates[1]));
   });
+  const minStart = computed(() => {
+    return parse(Number(props.maxRange[0]));
+  });
+  const maxEnd = computed(() => {
+    return parse(Number(props.maxRange[1]) + 23 * 60 * 60 * 1000);
+  });
   const ys = computed(() => {
     return Math.floor(state.year / 10) * 10;
   });
@@ -369,7 +375,13 @@ limitations under the License. -->
       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);
+
+    // Only apply range constraints when maxRange is provided and has valid dates
+    const hasMaxRange = props.maxRange && props.maxRange.length === 2;
+    const rightDisabled = props.right && hasMaxRange && (t < start.value || t > maxEnd.value);
+    const leftDisabled = props.left && hasMaxRange && (t < minStart.value || t > end.value || t > maxEnd.value);
+
+    classObj[`${state.pre}-date-disabled`] = rightDisabled || leftDisabled;
     classObj[`${state.pre}-date-on`] = (props.left && t > start.value) || (props.right && t < end.value);
     classObj[`${state.pre}-date-selected`] = flag;
     return classObj;
@@ -390,7 +402,7 @@ limitations under the License. -->
       state.year--;
     }
   };
-  const is = (e: any) => {
+  const is = (e: Recordable) => {
     return e.target.className.indexOf(`${state.pre}-date-disabled`) === -1;
   };
   const ok = (info: any) => {
@@ -443,15 +455,15 @@ limitations under the License. -->
   });
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
   .calendar {
     float: left;
     user-select: none;
-    color: #3d444f;
+    color: $font-color;
   }
 
   .calendar + .calendar {
-    border-left: solid 1px #eaeaea;
+    border-left: solid 1px var(--sw-border-color-light);
     margin-left: 5px;
     padding-left: 5px;
   }
@@ -464,7 +476,7 @@ limitations under the License. -->
   }
 
   .calendar-head a {
-    color: #666;
+    color: var(--sw-topology-color);
     cursor: pointer;
     display: inline-block;
     text-align: center;
@@ -479,7 +491,7 @@ limitations under the License. -->
 
   .calendar-head .calendar-year-select,
   .calendar-head .calendar-month-select {
-    font-size: 12px;
+    font-size: $font-size-smaller;
     padding: 0 2px;
     position: relative;
   }
@@ -524,8 +536,8 @@ limitations under the License. -->
     float: left;
   }
 
-  .calendar-week:before,
-  .calendar-date:before {
+  .calendar-week::before,
+  .calendar-date::before {
     content: "";
     display: inline-block;
     height: 100%;
@@ -539,27 +551,27 @@ limitations under the License. -->
   }
 
   .calendar-date-out {
-    color: #ccc;
+    color: $disabled-color;
   }
 
   .calendar-date:hover,
   .calendar-date-on {
-    color: #3f97e3;
-    background-color: #f8f8f8;
+    color: $font-color;
+    background-color: $theme-background;
   }
 
   .calendar-date-selected,
   .calendar-date-selected:hover {
-    color: #fff;
+    color: $text-color;
     font-weight: bold;
     border-radius: 14px;
-    background: #3f97e3;
+    background: $active-background;
   }
 
   .calendar-date-disabled {
     cursor: not-allowed !important;
-    color: #ccc !important;
-    background: #fff !important;
+    color: $disabled-color !important;
+    background: $theme-background !important;
   }
 
   .calendar-foot {
@@ -568,7 +580,7 @@ limitations under the License. -->
 
   .calendar-hour {
     display: inline-block;
-    border: 1px solid #e6e5e5;
+    border: 1px solid var(--sw-border-color-light);
     color: #9e9e9e;
   }
 
@@ -591,7 +603,7 @@ limitations under the License. -->
     width: 100%;
     height: 100%;
     position: absolute;
-    background: #fff;
+    background: $theme-background;
     left: 0;
     top: 0;
   }
@@ -626,7 +638,7 @@ limitations under the License. -->
     margin-top: -30px;
     height: 30px;
     line-height: 30px;
-    background: #fff;
+    background: $theme-background;
     text-align: center;
     font-weight: bold;
   }

src/components/Graph/Graph.vue

@@ -13,6 +13,13 @@ 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. -->
 <template>
+  <SelectorLegend
+    :data="option.legend?.data"
+    :show="legendSelector.isSelector"
+    :isConfigPage="legendSelector.isConfigPage"
+    :colors="option.color"
+    @change="changeLegend"
+  />
   <div class="chart" ref="chartRef" :style="`height:${height};width:${width};`">
     <div v-if="!available" class="no-data">No Data</div>
     <div
@@ -48,13 +55,15 @@ limitations under the License. -->
   import type { PropType, Ref } from "vue";
   import { useI18n } from "vue-i18n";
   import type { EventParams } from "@/types/app";
-  import type { Filters, RelatedTrace } from "@/types/dashboard";
+  import type { Filters, RelatedTrace, AssociateProcessorProps } from "@/types/dashboard";
   import { useECharts } from "@/hooks/useEcharts";
   import { addResizeListener, removeResizeListener } from "@/utils/event";
   import Trace from "@/views/dashboard/related/trace/Index.vue";
-  import associateProcessor from "@/hooks/useAssociateProcessor";
+  import useAssociateProcessor from "@/hooks/useAssociateProcessor";
+  import { WidgetType } from "@/views/dashboard/data";
+  import SelectorLegend from "./Legend.vue";
 
-  /*global Nullable, defineProps, defineEmits*/
+  /*global Nullable, defineProps, defineEmits, Indexable*/
   const emits = defineEmits(["select"]);
   const { t } = useI18n();
   const chartRef = ref<Nullable<HTMLDivElement>>(null);
@@ -62,15 +71,15 @@ limitations under the License. -->
   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 }>({
-    type: "Trace",
+  const traceOptions = ref<{ type: string; filters?: unknown } | any>({
+    type: WidgetType.Trace,
   });
   const menuPos = reactive<{ x: number; y: number }>({ x: NaN, y: NaN });
   const props = defineProps({
     height: { type: String, default: "100%" },
     width: { type: String, default: "100%" },
     option: {
-      type: Object as PropType<{ [key: string]: any }>,
+      type: Object as PropType<Indexable>,
       default: () => ({}),
     },
     filters: {
@@ -83,6 +92,10 @@ limitations under the License. -->
       type: Array as PropType<{ widgetId: string }[]>,
       default: () => [],
     },
+    legendSelector: {
+      type: Object as PropType<Indexable>,
+      default: () => ({ isConfigPage: false, isSelector: false }),
+    },
   });
   const available = computed(
     () =>
@@ -102,6 +115,7 @@ limitations under the License. -->
       if (!instance) {
         return;
       }
+
       instance.on("click", (params: EventParams) => {
         currentParams.value = params;
         if (props.option.series.type === "sankey") {
@@ -173,7 +187,11 @@ limitations under the License. -->
       return;
     }
     if (props.filters.isRange) {
-      const { eventAssociate } = associateProcessor(props);
+      const { eventAssociate } = useAssociateProcessor({
+        filters: props.filters,
+        option: props.option,
+        relatedTrace: props.relatedTrace,
+      } as AssociateProcessorProps);
       const options = eventAssociate();
       setOptions(options || props.option);
     } else {
@@ -186,7 +204,12 @@ limitations under the License. -->
   }
 
   function viewTrace() {
-    const item = associateProcessor(props).traceFilters(currentParams.value);
+    const item = useAssociateProcessor({
+      filters: props.filters,
+      option: props.option,
+      relatedTrace: props.relatedTrace,
+    } as AssociateProcessorProps).traceFilters(currentParams.value);
+
     traceOptions.value = {
       ...traceOptions.value,
       filters: item,
@@ -202,6 +225,23 @@ limitations under the License. -->
     });
   }
 
+  function changeLegend(names: string[]) {
+    const instance = getInstance();
+    for (const item of props.option.legend.data) {
+      if (names.includes(item.name)) {
+        instance.dispatchAction({
+          type: "legendSelect",
+          name: item.name,
+        });
+      } else {
+        instance.dispatchAction({
+          type: "legendUnSelect",
+          name: item.name,
+        });
+      }
+    }
+  }
+
   watch(
     () => props.option,
     (newVal, oldVal) => {
@@ -212,8 +252,12 @@ limitations under the License. -->
         return;
       }
       let options;
-      if (props.filters && props.filters.isRange) {
-        const { eventAssociate } = associateProcessor(props);
+      if (props.filters?.isRange) {
+        const { eventAssociate } = useAssociateProcessor({
+          filters: props.filters,
+          option: props.option,
+          relatedTrace: props.relatedTrace,
+        } as AssociateProcessorProps);
         options = eventAssociate();
       }
       setOptions(options || props.option);
@@ -232,14 +276,12 @@ limitations under the License. -->
 </script>
 <style lang="scss" scoped>
   .no-data {
-    font-size: 12px;
+    font-size: $font-size-smaller;
     height: 100%;
-    box-sizing: border-box;
-    display: -webkit-box;
-    -webkit-box-orient: horizontal;
-    -webkit-box-pack: center;
-    -webkit-box-align: center;
-    color: #666;
+    align-items: center;
+    justify-content: center;
+    display: flex;
+    color: var(--text-color-placeholder);
   }
 
   .chart {
@@ -252,11 +294,11 @@ limitations under the License. -->
     display: block;
     white-space: nowrap;
     z-index: 9999999;
-    box-shadow: #ddd 1px 2px 10px;
+    box-shadow: var(--sw-topology-box-shadow);
     transition: all cubic-bezier(0.075, 0.82, 0.165, 1) linear;
-    background-color: rgb(255, 255, 255);
+    background-color: var(--sw-bg-color-overlay);
     border-radius: 4px;
-    color: rgb(51, 51, 51);
+    color: $font-color;
     padding: 5px;
   }
 
@@ -266,8 +308,8 @@ limitations under the License. -->
     cursor: pointer;
 
     &:hover {
-      color: #409eff;
-      background-color: #eee;
+      color: $active-color;
+      background-color: $popper-hover-bg-color;
     }
   }
 </style>

src/components/Graph/GraphSelector.vue

@@ -0,0 +1,107 @@
+<!-- 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. -->
+<template>
+  <el-select
+    :size="size"
+    v-model="selected"
+    :placeholder="placeholder"
+    @change="changeSelected"
+    :multiple="multiple"
+    :disabled="disabled"
+    :style="{ borderRadius }"
+    :clearable="clearable"
+    :remote="isRemote"
+    :reserve-keyword="isRemote"
+    :remote-method="remoteMethod"
+    :filterable="filterable"
+    :collapse-tags="collapseTags"
+    :collapse-tags-tooltip="collapseTagsTooltip"
+  >
+    <el-option
+      v-for="(item, index) in options"
+      :key="`${item.value}${index}`"
+      :label="item.label || ''"
+      :value="item.value || ''"
+      :disabled="item.disabled || false"
+    >
+      <div class="flex items-center">
+        <el-tag :color="item.color" class="mr-5" size="small" />
+        <span :style="{ color: item.color }">{{ item.label }}</span>
+      </div>
+    </el-option>
+  </el-select>
+</template>
+<script lang="ts" setup>
+  import { ref, watch } from "vue";
+  import type { PropType } from "vue";
+
+  /*global  defineProps, defineEmits, Indexable*/
+  const emit = defineEmits(["change", "query"]);
+  const props = defineProps({
+    options: {
+      type: Array as PropType<
+        ({
+          label: string | number;
+          value: string | number;
+          color: string;
+        } & { disabled?: boolean })[]
+      >,
+      default: () => [],
+    },
+    value: {
+      type: [Array, String, Number, undefined] as PropType<any>,
+      default: () => [],
+    },
+    size: { type: null, default: "default" },
+    placeholder: {
+      type: [String, undefined] as PropType<string>,
+      default: "Select a option",
+    },
+    borderRadius: { type: Number, default: 3 },
+    multiple: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    clearable: { type: Boolean, default: false },
+    isRemote: { type: Boolean, default: false },
+    filterable: { type: Boolean, default: true },
+    collapseTags: { type: Boolean, default: false },
+    collapseTagsTooltip: { type: Boolean, default: false },
+  });
+
+  const selected = ref<string[] | string>(props.value);
+  function changeSelected() {
+    const options = props.options.filter((d: Indexable) =>
+      props.multiple ? selected.value.includes(d.value) : selected.value === d.value,
+    );
+    emit("change", options);
+  }
+
+  function remoteMethod(query: string) {
+    if (props.isRemote) {
+      emit("query", query);
+    }
+  }
+
+  watch(
+    () => props.value,
+    (data) => {
+      selected.value = data;
+    },
+  );
+</script>
+<style lang="scss" scoped>
+  .el-input__inner {
+    border-radius: unset !important;
+  }
+</style>

src/components/Graph/Legend.vue

@@ -0,0 +1,74 @@
+<!-- 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. -->
+<template>
+  <GraphSelector
+    class="mb-10"
+    multiple
+    :value="legend"
+    size="small"
+    :options="Options"
+    @change="changeLegend"
+    filterable
+    collapseTags
+    collapseTagsTooltip
+    v-if="show"
+  />
+</template>
+<script lang="ts" setup>
+  import { computed, ref, watch } from "vue";
+  import type { PropType } from "vue";
+  import type { Option } from "@/types/app";
+  import GraphSelector from "./GraphSelector.vue";
+
+  const props = defineProps({
+    data: {
+      type: Array as PropType<{ name: string }[]>,
+      default: () => [],
+    },
+    colors: {
+      type: Array as PropType<string[]>,
+      default: () => [],
+    },
+    show: {
+      type: Boolean,
+      default: false,
+    },
+    isConfigPage: {
+      type: Boolean,
+      default: false,
+    },
+  });
+  const emits = defineEmits(["change"]);
+  const legend = ref<string[]>([]);
+  const Options = computed(() =>
+    props.data.map((d: { name: string }, index: number) => ({
+      label: d.name,
+      value: d.name,
+      color: props.colors[index % props.colors.length],
+    })),
+  );
+
+  function changeLegend(opt: Option[]) {
+    legend.value = opt.map((d: Option) => d.value);
+    emits("change", legend.value);
+  }
+
+  watch(
+    () => props.data,
+    () => {
+      legend.value = props.data.map((d) => d.name);
+    },
+  );
+</script>

src/components/Radio.vue

@@ -14,13 +14,13 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <el-radio-group v-model="selected" @change="checked">
-    <el-radio v-for="item in options" :key="item.value" :label="item.value">
+    <el-radio v-for="item in options" :key="item.value" :value="item.value">
       {{ item.label }}
     </el-radio>
   </el-radio-group>
 </template>
 <script lang="ts" setup>
-  import { ref } from "vue";
+  import { ref, watch } from "vue";
   import type { PropType } from "vue";
 
   /*global  defineProps, defineEmits */
@@ -47,4 +47,11 @@ limitations under the License. -->
   function checked(opt: unknown) {
     emit("change", opt);
   }
+
+  watch(
+    () => props.value,
+    (newValue) => {
+      selected.value = newValue;
+    },
+  );
 </script>

src/components/SelectSingle.vue

@@ -64,6 +64,18 @@ limitations under the License. -->
     selected.value = { label: "", value: "" };
     emit("change", "");
   }
+
+  document.body.addEventListener("click", handleClick, false);
+
+  function handleClick() {
+    visible.value = false;
+  }
+
+  function setPopper(event: MouseEvent) {
+    event.stopPropagation();
+    visible.value = !visible.value;
+  }
+
   watch(
     () => props.value,
     (data) => {
@@ -71,34 +83,25 @@ limitations under the License. -->
       selected.value = opt || { label: "", value: "" };
     },
   );
-  document.body.addEventListener("click", handleClick, false);
-
-  function handleClick() {
-    visible.value = false;
-  }
-  function setPopper(event: any) {
-    event.stopPropagation();
-    visible.value = !visible.value;
-  }
 </script>
 <style lang="scss" scoped>
   .bar-select {
     position: relative;
     justify-content: space-between;
-    border: 1px solid #ddd;
-    background: #fff;
+    border: 1px solid var(--el-border-color);
+    background: $theme-background;
     border-radius: 3px;
-    color: #000;
-    font-size: 12px;
+    color: $font-color;
+    font-size: $font-size-smaller;
     height: 24px;
 
     .selected {
       padding: 0 3px;
       border-radius: 3px;
       margin: 3px;
-      color: #409eff;
-      background-color: #fafafa;
-      border: 1px solid #e8e8e8;
+      color: $active-color;
+      background-color: var(--theme-background);
+      border: 1px solid var(--el-color-primary);
       text-align: center;
     }
   }
@@ -112,7 +115,7 @@ limitations under the License. -->
     width: 100%;
     padding: 2px 10px;
     overflow: auto;
-    color: #606266;
+    color: var(--sw-setting-color);
     position: relative;
 
     &:hover {
@@ -126,20 +129,20 @@ limitations under the License. -->
     position: absolute;
     right: 5px;
     top: 0;
-    font-size: 14px;
+    font-size: $font-size-normal;
     display: none;
     color: #aaa;
     cursor: pointer;
   }
 
   .opt-wrapper {
-    color: #606266;
+    color: var(--sw-setting-color);
     position: absolute;
     top: 26px;
     left: 0;
-    background: #fff;
-    box-shadow: 0 1px 6px rgba(99, 99, 99, 0.2);
-    border: 1px solid #ddd;
+    background-color: $theme-background;
+    box-shadow: 0 1px 6px rgb(99 99 99 / 20%);
+    border: 1px solid var(--el-border-color);
     width: 100%;
     border-radius: 0 0 3px 3px;
     border-right-width: 1px !important;
@@ -164,12 +167,12 @@ limitations under the License. -->
     padding: 7px 15px;
 
     &.select-disabled {
-      color: #409eff;
+      color: $active-color;
       cursor: not-allowed;
     }
 
     &:hover {
-      background-color: #f5f5f5;
+      background-color: var(--layout-background);
     }
   }
 </style>

src/components/Selector.vue

@@ -26,8 +26,16 @@ limitations under the License. -->
     :reserve-keyword="isRemote"
     :remote-method="remoteMethod"
     :filterable="filterable"
+    :collapse-tags="collapseTags"
+    :collapse-tags-tooltip="collapseTagsTooltip"
   >
-    <el-option v-for="item in options" :key="item.value || ''" :label="item.label || ''" :value="item.value || ''">
+    <el-option
+      v-for="(item, index) in options"
+      :key="`${item.value}${index}`"
+      :label="item.label || ''"
+      :value="item.value || ''"
+      :disabled="item.disabled || false"
+    >
     </el-option>
   </el-select>
 </template>
@@ -35,12 +43,7 @@ limitations under the License. -->
   import { ref, watch } from "vue";
   import type { PropType } from "vue";
 
-  // interface Option {
-  //   label: string | number;
-  //   value: string | number;
-  // }
-
-  /*global  defineProps, defineEmits*/
+  /*global defineProps, defineEmits, Indexable*/
   const emit = defineEmits(["change", "query"]);
   const props = defineProps({
     options: {
@@ -67,11 +70,13 @@ limitations under the License. -->
     clearable: { type: Boolean, default: false },
     isRemote: { type: Boolean, default: false },
     filterable: { type: Boolean, default: true },
+    collapseTags: { type: Boolean, default: false },
+    collapseTagsTooltip: { type: Boolean, default: false },
   });
 
   const selected = ref<string[] | string>(props.value);
   function changeSelected() {
-    const options = props.options.filter((d: any) =>
+    const options = props.options.filter((d: Indexable) =>
       props.multiple ? selected.value.includes(d.value) : selected.value === d.value,
     );
     emit("change", options);

src/components/Tags.vue

@@ -0,0 +1,94 @@
+<!-- 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. -->
+<template>
+  <span :class="vertical ? 'vertical' : 'horizontal'" v-for="tag in dynamicTags" :key="tag">
+    <el-tag closable :disable-transitions="false" @close="handleClose(tag)">
+      {{ tag }}
+    </el-tag>
+  </span>
+  <el-input
+    v-if="inputVisible"
+    ref="InputRef"
+    v-model="inputValue"
+    class="ml-5 input-name"
+    size="small"
+    @keyup.enter="handleInputConfirm"
+    @blur="handleInputConfirm"
+  />
+  <el-button v-else size="small" @click="showInput"> + {{ text }} </el-button>
+</template>
+
+<script lang="ts" setup>
+  import { nextTick, ref, watch } from "vue";
+  import type { PropType } from "vue";
+  import { ElInput } from "element-plus";
+
+  /*global defineProps, defineEmits*/
+  const emits = defineEmits(["change"]);
+  const props = defineProps({
+    tags: {
+      type: Array as PropType<string[]>,
+      default: () => [],
+    },
+    text: { type: String, default: "" },
+    vertical: { type: Boolean, default: false },
+  });
+  const inputValue = ref("");
+  const dynamicTags = ref<string[]>(props.tags || []);
+  const inputVisible = ref(false);
+  const InputRef = ref<InstanceType<typeof ElInput>>();
+
+  const handleClose = (tag: string) => {
+    dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1);
+  };
+
+  const showInput = () => {
+    inputVisible.value = true;
+    nextTick(() => {
+      InputRef.value!.input!.focus();
+    });
+  };
+
+  const handleInputConfirm = () => {
+    if (inputValue.value) {
+      dynamicTags.value.push(inputValue.value);
+    }
+    inputVisible.value = false;
+    inputValue.value = "";
+    emits("change", dynamicTags.value);
+  };
+
+  watch(
+    () => props.tags,
+    () => {
+      dynamicTags.value = props.tags || [];
+    },
+  );
+</script>
+<style lang="scss" scoped>
+  .input-name {
+    width: 250px;
+  }
+
+  .vertical {
+    display: block;
+    margin-bottom: 5px;
+  }
+
+  .horizontal {
+    display: inline-block;
+    margin-right: 5px;
+  }
+</style>

src/components/TimePicker.vue

@@ -41,22 +41,52 @@ limitations under the License. -->
       >
         <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"
+              :class="{ 'datepicker-popup__shortcut--selected': selectedShortcut === QUICK_PICK_TYPES.QUARTER }"
+              @click="quickPick(QUICK_PICK_TYPES.QUARTER)"
+            >
               {{ local.quarterHourCutTip }}
             </button>
-            <button type="button" class="datepicker-popup__shortcut" @click="quickPick('half')">
+            <button
+              type="button"
+              class="datepicker-popup__shortcut"
+              :class="{ 'datepicker-popup__shortcut--selected': selectedShortcut === QUICK_PICK_TYPES.HALF }"
+              @click="quickPick(QUICK_PICK_TYPES.HALF)"
+            >
               {{ local.halfHourCutTip }}
             </button>
-            <button type="button" class="datepicker-popup__shortcut" @click="quickPick('hour')">
+            <button
+              type="button"
+              class="datepicker-popup__shortcut"
+              :class="{ 'datepicker-popup__shortcut--selected': selectedShortcut === QUICK_PICK_TYPES.HOUR }"
+              @click="quickPick(QUICK_PICK_TYPES.HOUR)"
+            >
               {{ local.hourCutTip }}
             </button>
-            <button type="button" class="datepicker-popup__shortcut" @click="quickPick('day')">
+            <button
+              type="button"
+              class="datepicker-popup__shortcut"
+              :class="{ 'datepicker-popup__shortcut--selected': selectedShortcut === QUICK_PICK_TYPES.DAY }"
+              @click="quickPick(QUICK_PICK_TYPES.DAY)"
+            >
               {{ local.dayCutTip }}
             </button>
-            <button type="button" class="datepicker-popup__shortcut" @click="quickPick('week')">
+            <button
+              type="button"
+              class="datepicker-popup__shortcut"
+              :class="{ 'datepicker-popup__shortcut--selected': selectedShortcut === QUICK_PICK_TYPES.WEEK }"
+              @click="quickPick(QUICK_PICK_TYPES.WEEK)"
+            >
               {{ local.weekCutTip }}
             </button>
-            <button type="button" class="datepicker-popup__shortcut" @click="quickPick('month')">
+            <button
+              type="button"
+              class="datepicker-popup__shortcut"
+              :class="{ 'datepicker-popup__shortcut--selected': selectedShortcut === QUICK_PICK_TYPES.MONTH }"
+              @click="quickPick(QUICK_PICK_TYPES.MONTH)"
+            >
               {{ local.monthCutTip }}
             </button>
           </div>
@@ -66,8 +96,8 @@ limitations under the License. -->
               :value="dates[0]"
               :dates="dates"
               :left="true"
-              :disabledDate="disabledDate"
               :format="format"
+              :maxRange="maxRange"
               @ok="ok"
               @setDates="setDates"
             />
@@ -76,8 +106,8 @@ limitations under the License. -->
               :value="dates[1]"
               :dates="dates"
               :right="true"
-              :disabledDate="disabledDate"
               :format="format"
+              :maxRange="maxRange"
               @ok="ok"
               @setDates="setDates"
             />
@@ -87,7 +117,6 @@ limitations under the License. -->
           <DateCalendar
             v-model="dates[0]"
             :value="dates[0]"
-            :disabledDate="disabledDate"
             :dates="dates"
             :format="format"
             @ok="ok"
@@ -108,15 +137,29 @@ limitations under the License. -->
 </template>
 
 <script lang="ts" setup>
-  import { ref, computed, onMounted, onBeforeUnmount, watch } from "vue";
+  import { ref, computed, onMounted, onBeforeUnmount, watch, PropType } from "vue";
   import { useI18n } from "vue-i18n";
   import DateCalendar from "./DateCalendar.vue";
   import { useTimeoutFn } from "@/hooks/useTimeout";
-  /*global defineProps, defineEmits */
+  /* global defineProps, defineEmits */
+
+  const QUICK_PICK_TYPES = {
+    QUARTER: "quarter",
+    HALF: "half",
+    HOUR: "hour",
+    DAY: "day",
+    WEEK: "week",
+    MONTH: "month",
+  } as const;
+
+  type QuickPickType = typeof QUICK_PICK_TYPES[keyof typeof QUICK_PICK_TYPES];
+
   const datepicker = ref(null);
   const { t } = useI18n();
   const show = ref<boolean>(false);
-  const dates = ref<Date | string[] | any>([]);
+  const dates = ref<Date[]>([]);
+  const inputDates = ref<Date[]>([]);
+  const selectedShortcut = ref<string>(QUICK_PICK_TYPES.HALF);
   const props = defineProps({
     position: { type: String, default: "bottom" },
     name: [String],
@@ -137,10 +180,6 @@ limitations under the License. -->
       default: false,
     },
     placeholder: [String],
-    disabledDate: {
-      type: Function,
-      default: () => false,
-    },
     format: {
       type: String,
       default: "YYYY-MM-DD",
@@ -149,7 +188,7 @@ limitations under the License. -->
       type: Boolean,
       default: false,
     },
-    dateRangeSelect: [Function],
+    maxRange: { type: Array as PropType<Date[]>, default: () => [] },
   });
   const emit = defineEmits(["clear", "input", "confirm", "cancel"]);
   const local = computed(() => {
@@ -206,15 +245,15 @@ limitations under the License. -->
     return dates.value.length === 2;
   });
   const text = computed(() => {
-    const val = props.value;
-    const txt = dates.value.map((date: Date) => tf(date)).join(` ${props.rangeSeparator} `);
-    if (Array.isArray(val)) {
-      return val.length > 1 ? txt : "";
+    const txt = inputDates.value.map((date: Date) => tf(date)).join(` ${props.rangeSeparator} `);
+    if (Array.isArray(props.value)) {
+      return props.value.length > 1 ? txt : "";
     }
-    return val ? txt : "";
+    return props.value ? txt : "";
   });
   const get = () => {
-    return Array.isArray(props.value) ? dates.value : dates.value[0];
+    const currentDates = props.showButtons ? inputDates.value : dates.value;
+    return Array.isArray(props.value) ? currentDates : currentDates[0];
   };
   const cls = () => {
     emit("clear");
@@ -222,7 +261,7 @@ limitations under the License. -->
   };
   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()];
   };
@@ -241,47 +280,53 @@ limitations under the License. -->
     }
     dates.value[0] = d;
   };
-  const dc = (e: any) => {
+  const dc = (e: MouseEvent) => {
     show.value = (datepicker.value as any).contains(e.target) && !props.disabled;
   };
-  const quickPick = (type: string) => {
+  const quickPick = (type: QuickPickType) => {
     const end = new Date();
     const start = new Date();
+    selectedShortcut.value = type;
     switch (type) {
-      case "quarter":
+      case QUICK_PICK_TYPES.QUARTER:
         start.setTime(start.getTime() - 60 * 15 * 1000); //15 mins
         break;
-      case "half":
+      case QUICK_PICK_TYPES.HALF:
         start.setTime(start.getTime() - 60 * 30 * 1000); //30 mins
         break;
-      case "hour":
+      case QUICK_PICK_TYPES.HOUR:
         start.setTime(start.getTime() - 3600 * 1000); //1 hour
         break;
-      case "day":
+      case QUICK_PICK_TYPES.DAY:
         start.setTime(start.getTime() - 3600 * 1000 * 24); //1 day
         break;
-      case "week":
+      case QUICK_PICK_TYPES.WEEK:
         start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); //1 week
         break;
-      case "month":
+      case QUICK_PICK_TYPES.MONTH:
         start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); //1 month
         break;
       default:
         break;
     }
     dates.value = [start, end];
-    emit("input", get());
+    if (!props.showButtons) {
+      ok(true);
+    }
   };
   const submit = () => {
+    inputDates.value = dates.value;
     emit("confirm", get());
     show.value = false;
   };
   const cancel = () => {
     emit("cancel");
     show.value = false;
+    dates.value = vi(props.value);
   };
   onMounted(() => {
     dates.value = vi(props.value);
+    inputDates.value = dates.value;
     document.addEventListener("click", dc, true);
   });
   onBeforeUnmount(() => {
@@ -291,6 +336,7 @@ limitations under the License. -->
     () => props.value,
     (val: unknown) => {
       dates.value = vi(val);
+      inputDates.value = [...dates.value];
     },
   );
 </script>
@@ -302,7 +348,7 @@ limitations under the License. -->
       transform: scaleY(0.8);
     }
 
-    to {
+    100% {
       opacity: 1;
       transform: scaleY(1);
     }
@@ -314,7 +360,7 @@ limitations under the License. -->
       transform: scaleY(1);
     }
 
-    to {
+    100% {
       opacity: 0;
       transform: scaleY(0.8);
     }
@@ -343,7 +389,7 @@ limitations under the License. -->
     cursor: pointer;
   }
 
-  .datepicker-close:before {
+  .datepicker-close::before {
     display: block;
     content: "";
     position: absolute;
@@ -354,14 +400,14 @@ limitations under the License. -->
     margin-left: -8px;
     margin-top: -8px;
     text-align: center;
-    color: #fff;
+    color: $text-color;
     border-radius: 50%;
-    background: #ccc
+    background: $disabled-color
       url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3IDciIHdpZHRoPSI3IiBoZWlnaHQ9IjciPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik01LjU4LDVsMi44LTIuODFBLjQxLjQxLDAsMSwwLDcuOCwxLjZMNSw0LjQxLDIuMiwxLjZhLjQxLjQxLDAsMCwwLS41OC41OGgwTDQuNDIsNSwxLjYyLDcuOGEuNDEuNDEsMCwwLDAsLjU4LjU4TDUsNS41OCw3LjgsOC4zOWEuNDEuNDEsMCwwLDAsLjU4LS41OGgwWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTEuNSAtMS40OCkiIHN0eWxlPSJmaWxsOiNmZmYiLz48L3N2Zz4NCg==")
       no-repeat 50% 50%;
   }
 
-  .datepicker__clearable:hover:before {
+  .datepicker__clearable:hover::before {
     display: none;
   }
 
@@ -369,7 +415,7 @@ limitations under the License. -->
     display: block;
   }
 
-  .datepicker-close:hover:before {
+  .datepicker-close:hover::before {
     background-color: #afafaf;
   }
 
@@ -385,7 +431,7 @@ limitations under the License. -->
     padding: 0 5px;
     width: 100%;
     user-select: none;
-    font-family: "Monaco";
+    font-family: Monaco;
     letter-spacing: -0.7px;
   }
 
@@ -399,7 +445,6 @@ limitations under the License. -->
     cursor: not-allowed;
     background-color: #ebebe4;
     border-color: #e5e5e5;
-    -webkit-box-shadow: none;
     box-shadow: none;
   }
 
@@ -409,9 +454,9 @@ limitations under the License. -->
     transition: all 200ms ease;
     opacity: 1;
     transform: scaleY(1);
-    font-size: 12px;
-    background: #fff;
-    box-shadow: 0 1px 6px rgba(99, 99, 99, 0.2);
+    font-size: $font-size-smaller;
+    background: $theme-background;
+    box-shadow: 0 1px 6px rgb(99 99 99 / 20%);
     margin-top: 2px;
     outline: 0;
     padding: 5px;
@@ -448,7 +493,7 @@ limitations under the License. -->
       width: 100px;
       height: 100%;
       padding: 5px;
-      border-right: solid 1px #eaeaea;
+      border-right: solid 1px var(--sw-border-color-light);
     }
 
     &__shortcut {
@@ -457,15 +502,19 @@ limitations under the License. -->
       border: 0;
       background-color: transparent;
       line-height: 34px;
-      font-size: 12px;
-      color: #666;
+      font-size: $font-size-smaller;
+      color: var(--sw-topology-color);
       text-align: left;
       outline: none;
-      cursor: pointer;
       white-space: nowrap;
 
       &:hover {
-        color: #3f97e3;
+        color: var(--el-color-primary);
+        cursor: pointer;
+      }
+
+      &--selected {
+        color: var(--el-color-primary);
       }
     }
 
@@ -497,7 +546,7 @@ limitations under the License. -->
   .datepicker-btn {
     padding: 5px 10px;
     background: #3f97e3;
-    color: #fff;
+    color: $text-color;
     border-radius: 2px;
     display: inline-block;
     cursor: pointer;
@@ -519,20 +568,21 @@ limitations under the License. -->
   }
 
   .datepicker__buttons button {
-    display: inline-block;
-    font-size: 13px;
     border: none;
     cursor: pointer;
-    margin: 10px 0 0 5px;
-    padding: 5px 15px;
-    color: #ffffff;
+    color: $text-color;
+    margin-left: 5px;
+    padding: 2px 5px;
   }
 
   .datepicker__buttons .datepicker__button-select {
-    background: #3f97e3;
+    background: var(--el-color-primary);
+    border-radius: 2px;
+    color: #fff;
   }
 
   .datepicker__buttons .datepicker__button-cancel {
-    background: #666;
+    background: var(--sw-topology-color);
+    border-radius: 2px;
   }
 </style>

src/components/__tests__/DateCalendar.spec.ts

@@ -0,0 +1,892 @@
+/**
+ * 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 { mount } from "@vue/test-utils";
+import { describe, it, expect, vi } from "vitest";
+import { nextTick } from "vue";
+import DateCalendar from "../DateCalendar.vue";
+
+// Mock vue-i18n
+vi.mock("vue-i18n", () => ({
+  useI18n: () => ({
+    t: (key: string) => {
+      const translations: Record<string, string> = {
+        hourTip: "Hour",
+        minuteTip: "Minute",
+        secondTip: "Second",
+        yearSuffix: "Year",
+        monthsHead: "January_February_March_April_May_June_July_August_September_October_November_December",
+        months: "Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec",
+        weeks: "Mon_Tue_Wed_Thu_Fri_Sat_Sun",
+        cancel: "Cancel",
+        confirm: "Confirm",
+        quarterHourCutTip: "Quarter Hour",
+        halfHourCutTip: "Half Hour",
+        hourCutTip: "Hour",
+        dayCutTip: "Day",
+        weekCutTip: "Week",
+        monthCutTip: "Month",
+      };
+      return translations[key] || key;
+    },
+  }),
+}));
+
+describe("DateCalendar Component", () => {
+  let wrapper: any;
+  const mockDate = new Date(2024, 0, 15, 10, 30, 45);
+  const mockDateRange = [new Date(2024, 0, 10), new Date(2024, 0, 20)];
+
+  describe("Props", () => {
+    it("should render with default props", () => {
+      wrapper = mount(DateCalendar);
+      expect(wrapper.exists()).toBe(true);
+      expect(wrapper.classes()).toContain("calendar");
+    });
+
+    it("should render with value prop", () => {
+      wrapper = mount(DateCalendar, {
+        props: {
+          value: mockDate,
+        },
+      });
+      expect(wrapper.vm.value).toEqual(mockDate);
+    });
+
+    it("should render with left prop", () => {
+      wrapper = mount(DateCalendar, {
+        props: {
+          left: true,
+        },
+      });
+      expect(wrapper.vm.left).toBe(true);
+    });
+
+    it("should render with right prop", () => {
+      wrapper = mount(DateCalendar, {
+        props: {
+          right: true,
+        },
+      });
+      expect(wrapper.vm.right).toBe(true);
+    });
+
+    it("should render with dates array", () => {
+      wrapper = mount(DateCalendar, {
+        props: {
+          dates: mockDateRange,
+        },
+      });
+      expect(wrapper.vm.dates).toEqual(mockDateRange);
+    });
+
+    it("should render with custom format", () => {
+      wrapper = mount(DateCalendar, {
+        props: {
+          format: "YYYY-MM-DD HH:mm:ss",
+        },
+      });
+      expect(wrapper.vm.format).toBe("YYYY-MM-DD HH:mm:ss");
+    });
+
+    it("should render with maxRange array", () => {
+      wrapper = mount(DateCalendar, {
+        props: {
+          maxRange: [new Date(2024, 0, 1), new Date(2024, 0, 31)],
+        },
+      });
+      expect(wrapper.vm.maxRange).toHaveLength(2);
+    });
+  });
+
+  describe("Computed Properties", () => {
+    it("should calculate start date correctly", () => {
+      wrapper = mount(DateCalendar, {
+        props: {
+          dates: mockDateRange,
+        },
+      });
+      expect(wrapper.vm.start).toBeDefined();
+    });
+
+    it("should calculate end date correctly", () => {
+      wrapper = mount(DateCalendar, {
+        props: {
+          dates: mockDateRange,
+        },
+      });
+      expect(wrapper.vm.end).toBeDefined();
+    });
+
+    it("should calculate minStart correctly", () => {
+      wrapper = mount(DateCalendar, {
+        props: {
+          maxRange: [new Date(2024, 0, 1), new Date(2024, 0, 31)],
+        },
+      });
+      expect(wrapper.vm.minStart).toBeDefined();
+    });
+
+    it("should calculate maxEnd correctly", () => {
+      wrapper = mount(DateCalendar, {
+        props: {
+          maxRange: [new Date(2024, 0, 1), new Date(2024, 0, 31)],
+        },
+      });
+      expect(wrapper.vm.maxEnd).toBeDefined();
+    });
+
+    it("should calculate year start correctly", () => {
+      wrapper = mount(DateCalendar, {
+        props: {
+          value: mockDate,
+        },
+      });
+      expect(wrapper.vm.ys).toBe(2020);
+    });
+
+    it("should calculate year end correctly", () => {
+      wrapper = mount(DateCalendar, {
+        props: {
+          value: mockDate,
+        },
+      });
+      expect(wrapper.vm.ye).toBe(2030);
+    });
+
+    it("should calculate years array correctly", () => {
+      wrapper = mount(DateCalendar, {
+        props: {
+          value: mockDate,
+        },
+      });
+      expect(wrapper.vm.years).toHaveLength(12);
+    });
+
+    it("should calculate days array correctly", () => {
+      wrapper = mount(DateCalendar, {
+        props: {
+          value: mockDate,
+        },
+      });
+      expect(wrapper.vm.days).toHaveLength(42);
+    });
+
+    it("should calculate local translations correctly", () => {
+      wrapper = mount(DateCalendar, {
+        props: {
+          value: mockDate,
+        },
+      });
+      expect(wrapper.vm.local.monthsHead).toHaveLength(12);
+      expect(wrapper.vm.local.months).toHaveLength(12);
+      expect(wrapper.vm.local.weeks).toHaveLength(7);
+    });
+  });
+
+  describe("Methods", () => {
+    it("should parse numbers correctly", () => {
+      wrapper = mount(DateCalendar);
+      const result = wrapper.vm.parse(100000);
+      expect(result).toBe(1);
+    });
+
+    it("should handle next month navigation", () => {
+      wrapper = mount(DateCalendar, {
+        props: {
+          value: mockDate,
+        },
+      });
+      const originalMonth = wrapper.vm.state.month;
+      wrapper.vm.nm();
+      expect(wrapper.vm.state.month).toBe(originalMonth + 1);
+    });
+
+    it("should handle previous month navigation", () => {
+      wrapper = mount(DateCalendar, {
+        props: {
+          value: mockDate,
+        },
+      });
+      const originalMonth = wrapper.vm.state.month;
+      const originalYear = wrapper.vm.state.year;
+      wrapper.vm.pm();
+
+      // Handle month wrapping: if originalMonth was 0 (January), it should wrap to 11 (December)
+      if (originalMonth === 0) {
+        expect(wrapper.vm.state.month).toBe(11);
+        expect(wrapper.vm.state.year).toBe(originalYear - 1); // Year should be decremented
+      } else {
+        expect(wrapper.vm.state.month).toBe(originalMonth - 1);
+        expect(wrapper.vm.state.year).toBe(originalYear); // Year should remain the same
+      }
+    });
+
+    it("should handle month boundary navigation", () => {
+      wrapper = mount(DateCalendar, {
+        props: {
+          value: new Date(2024, 11, 15), // December
+        },
+      });
+      wrapper.vm.nm();
+      expect(wrapper.vm.state.month).toBe(0); // January
+      expect(wrapper.vm.state.year).toBe(2025);
+    });
+
+    it("should handle year boundary navigation", () => {
+      wrapper = mount(DateCalendar, {
+        props: {
+          value: new Date(2024, 0, 15), // January
+        },
+      });
+      wrapper.vm.pm();
+      expect(wrapper.vm.state.month).toBe(11); // December
+      expect(wrapper.vm.state.year).toBe(2023);
+    });
+
+    it("should check if event target is disabled", () => {
+      wrapper = mount(DateCalendar, {
+        props: {
+          value: mockDate,
+        },
+      });
+      const mockEvent = {
+        target: {
+          className: "calendar-date calendar-date-disabled",
+        },
+      };
+      const result = wrapper.vm.is(mockEvent);
+      expect(result).toBe(false);
+    });
+
+    it("should check if event target is not disabled", () => {
+      wrapper = mount(DateCalendar, {
+        props: {
+          value: mockDate,
+        },
+      });
+      const mockEvent = {
+        target: {
+          className: "calendar-date",
+        },
+      };
+      const result = wrapper.vm.is(mockEvent);
+      expect(result).toBe(true);
+    });
+
+    it("should handle ok event for hour selection", () => {
+      wrapper = mount(DateCalendar, {
+        props: {
+          value: mockDate,
+        },
+      });
+      wrapper.vm.ok("h");
+      expect(wrapper.emitted("ok")).toBeTruthy();
+    });
+
+    it("should handle ok event for month selection", () => {
+      wrapper = mount(DateCalendar, {
+        props: {
+          value: mockDate,
+        },
+      });
+      wrapper.vm.ok("m");
+      expect(wrapper.emitted("ok")).toBeTruthy();
+    });
+
+    it("should handle ok event for year selection", () => {
+      wrapper = mount(DateCalendar, {
+        props: {
+          value: mockDate,
+        },
+      });
+      wrapper.vm.ok("y");
+      expect(wrapper.emitted("ok")).toBeTruthy();
+    });
+
+    it("should handle ok event for date selection", () => {
+      wrapper = mount(DateCalendar, {
+        props: {
+          value: mockDate,
+        },
+      });
+      const mockInfo = { n: false, p: false };
+      wrapper.vm.ok(mockInfo);
+      expect(wrapper.emitted("ok")).toBeTruthy();
+    });
+
+    it("should handle setDates for left calendar", () => {
+      wrapper = mount(DateCalendar, {
+        props: {
+          left: true,
+          dates: mockDateRange,
+          value: mockDateRange[0],
+        },
+      });
+      wrapper.vm.ok({ n: false, p: false });
+      expect(wrapper.emitted("setDates")).toBeTruthy();
+    });
+
+    it("should handle setDates for right calendar", () => {
+      wrapper = mount(DateCalendar, {
+        props: {
+          right: true,
+          dates: mockDateRange,
+        },
+      });
+      wrapper.vm.ok({ n: false, p: false });
+      expect(wrapper.emitted("setDates")).toBeTruthy();
+    });
+
+    it("should handle setDates for single calendar", () => {
+      wrapper = mount(DateCalendar, {
+        props: {
+          value: mockDate,
+        },
+      });
+      wrapper.vm.ok({ n: false, p: false });
+      expect(wrapper.emitted("setDates")).toBeTruthy();
+    });
+  });
+
+  describe("Status Function", () => {
+    it("should return correct status for year format", () => {
+      wrapper = mount(DateCalendar, {
+        props: {
+          value: mockDate,
+        },
+      });
+      const status = wrapper.vm.status(2024, 0, 15, 10, 30, 45, "YYYY");
+      expect(status["calendar-date-selected"]).toBe(true);
+    });
+
+    it("should return correct status for month format", () => {
+      wrapper = mount(DateCalendar, {
+        props: {
+          value: mockDate,
+        },
+      });
+      const status = wrapper.vm.status(2024, 0, 15, 10, 30, 45, "YYYYMM");
+      expect(status["calendar-date-selected"]).toBe(true);
+    });
+
+    it("should return correct status for date format", () => {
+      wrapper = mount(DateCalendar, {
+        props: {
+          value: mockDate,
+        },
+      });
+      const status = wrapper.vm.status(2024, 0, 15, 10, 30, 45, "YYYYMMDD");
+      expect(status["calendar-date-selected"]).toBe(true);
+    });
+
+    it("should handle left calendar range", () => {
+      wrapper = mount(DateCalendar, {
+        props: {
+          left: true,
+          dates: [new Date(2024, 0, 10), new Date(2024, 0, 20)],
+          maxRange: [new Date(2024, 0, 1), new Date(2024, 0, 31)],
+        },
+      });
+
+      const status = wrapper.vm.status(2024, 0, 15, 10, 30, 45, "YYYYMMDD");
+
+      // Test that the status function returns the expected structure
+      expect(typeof status).toBe("object");
+      // The calendar-date-on property might not exist in all cases
+      expect("calendar-date-on" in status || status["calendar-date-on"] === undefined).toBe(true);
+    });
+
+    it("should handle right calendar range", () => {
+      wrapper = mount(DateCalendar, {
+        props: {
+          right: true,
+          dates: [new Date(2024, 0, 10), new Date(2024, 0, 20)],
+          maxRange: [new Date(2024, 0, 1), new Date(2024, 0, 31)],
+        },
+      });
+
+      const status = wrapper.vm.status(2024, 0, 15, 10, 30, 45, "YYYYMMDD");
+
+      // Test that the status function returns the expected structure
+      expect(typeof status).toBe("object");
+      // The calendar-date-on property might not exist in all cases
+      expect("calendar-date-on" in status || status["calendar-date-on"] === undefined).toBe(true);
+    });
+
+    it("should not disable dates when maxRange is not provided", () => {
+      wrapper = mount(DateCalendar, {
+        props: {
+          right: true,
+          dates: [new Date(2024, 0, 10), new Date(2024, 0, 20)],
+          // No maxRange prop
+        },
+      });
+
+      const status = wrapper.vm.status(2024, 0, 15, 10, 30, 45, "YYYYMMDD");
+
+      // When no maxRange is provided, dates should not be disabled due to range constraints
+      // The status function might not return calendar-date-disabled if no constraints apply
+      expect(status["calendar-date-disabled"]).toBeFalsy();
+    });
+
+    it("should not disable dates when maxRange is empty array", () => {
+      wrapper = mount(DateCalendar, {
+        props: {
+          right: true,
+          value: new Date(2024, 0, 20),
+          dates: [new Date(2024, 0, 10), new Date(2024, 0, 20)],
+          maxRange: [],
+        },
+      });
+
+      const status = wrapper.vm.status(2024, 0, 15, 10, 30, 45, "YYYYMMDD");
+
+      // When maxRange is empty, dates should not be disabled due to range constraints
+      // The status function might not return calendar-date-disabled if no constraints apply
+      expect(status["calendar-date-disabled"]).toBeFalsy();
+    });
+
+    it("should apply range constraints only when maxRange is provided", () => {
+      wrapper = mount(DateCalendar, {
+        props: {
+          left: true,
+          dates: [new Date(2024, 0, 10), new Date(2024, 0, 20)],
+          maxRange: [new Date(2024, 0, 1), new Date(2024, 0, 31)],
+        },
+      });
+
+      // Test a date that would be disabled with maxRange
+      // Date 2024-01-05 is within maxRange [2024-01-01, 2024-01-31] so it should NOT be disabled
+      const statusWithMaxRange = wrapper.vm.status(2024, 0, 5, 10, 30, 45, "YYYYMMDD");
+
+      // Test the same date without maxRange
+      wrapper = mount(DateCalendar, {
+        props: {
+          left: true,
+          value: new Date(2024, 0, 10),
+          dates: [new Date(2024, 0, 10), new Date(2024, 0, 20)],
+        },
+      });
+      const statusWithoutMaxRange = wrapper.vm.status(2024, 0, 5, 10, 30, 45, "YYYYMMDD");
+
+      // The date should NOT be disabled with maxRange because it's within the range
+      // Check if the property exists and has the expected value
+      expect(statusWithMaxRange["calendar-date-disabled"]).toBeFalsy();
+      expect(statusWithoutMaxRange["calendar-date-disabled"]).toBeFalsy();
+    });
+  });
+
+  describe("Template Rendering", () => {
+    it("should render calendar head", () => {
+      wrapper = mount(DateCalendar, {
+        props: {
+          value: mockDate,
+        },
+      });
+      expect(wrapper.find(".calendar-head").exists()).toBe(true);
+    });
+
+    it("should render calendar body", () => {
+      wrapper = mount(DateCalendar, {
+        props: {
+          value: mockDate,
+        },
+      });
+      expect(wrapper.find(".calendar-body").exists()).toBe(true);
+    });
+
+    it("should render calendar days", () => {
+      wrapper = mount(DateCalendar, {
+        props: {
+          value: mockDate,
+        },
+      });
+      expect(wrapper.find(".calendar-days").exists()).toBe(true);
+    });
+
+    it("should render week headers", () => {
+      wrapper = mount(DateCalendar, {
+        props: {
+          value: mockDate,
+        },
+      });
+      const weekHeaders = wrapper.findAll(".calendar-week");
+      expect(weekHeaders).toHaveLength(7);
+    });
+
+    it("should render date cells", () => {
+      wrapper = mount(DateCalendar, {
+        props: {
+          value: mockDate,
+        },
+      });
+      const dateCells = wrapper.findAll(".calendar-date");
+      expect(dateCells.length).toBeGreaterThan(0);
+    });
+
+    it("should render calendar foot", () => {
+      wrapper = mount(DateCalendar, {
+        props: {
+          value: mockDate,
+        },
+      });
+      expect(wrapper.find(".calendar-foot").exists()).toBe(true);
+    });
+
+    it("should render hour display", () => {
+      wrapper = mount(DateCalendar, {
+        props: {
+          value: mockDate,
+        },
+      });
+      expect(wrapper.find(".calendar-hour").exists()).toBe(true);
+    });
+
+    it("should render month selector when showMonths is true", async () => {
+      wrapper = mount(DateCalendar, {
+        props: {
+          value: mockDate,
+        },
+      });
+      wrapper.vm.state.showMonths = true;
+      await nextTick();
+      expect(wrapper.find(".calendar-months").exists()).toBe(true);
+    });
+
+    it("should render year selector when showYears is true", async () => {
+      wrapper = mount(DateCalendar, {
+        props: {
+          value: mockDate,
+        },
+      });
+      wrapper.vm.state.showYears = true;
+      await nextTick();
+      expect(wrapper.find(".calendar-years").exists()).toBe(true);
+    });
+
+    it("should render hour selector when showHours is true", async () => {
+      wrapper = mount(DateCalendar, {
+        props: {
+          value: mockDate,
+        },
+      });
+      wrapper.vm.state.showHours = true;
+      await nextTick();
+      expect(wrapper.find(".calendar-hours").exists()).toBe(true);
+    });
+
+    it("should render minute selector when showMinutes is true", async () => {
+      wrapper = mount(DateCalendar, {
+        props: {
+          value: mockDate,
+        },
+      });
+      wrapper.vm.state.showMinutes = true;
+      await nextTick();
+      expect(wrapper.find(".calendar-minutes").exists()).toBe(true);
+    });
+
+    it("should render second selector when showSeconds is true", async () => {
+      wrapper = mount(DateCalendar, {
+        props: {
+          value: mockDate,
+        },
+      });
+      wrapper.vm.state.showSeconds = true;
+      await nextTick();
+      expect(wrapper.find(".calendar-seconds").exists()).toBe(true);
+    });
+  });
+
+  describe("Event Handling", () => {
+    it("should handle year navigation clicks", async () => {
+      wrapper = mount(DateCalendar, {
+        props: {
+          value: mockDate,
+        },
+      });
+      const prevYearBtn = wrapper.find(".calendar-prev-year-btn");
+      const nextYearBtn = wrapper.find(".calendar-next-year-btn");
+
+      expect(prevYearBtn.exists()).toBe(true);
+      expect(nextYearBtn.exists()).toBe(true);
+    });
+
+    it("should handle month navigation clicks", async () => {
+      wrapper = mount(DateCalendar, {
+        props: {
+          value: mockDate,
+        },
+      });
+      const prevMonthBtn = wrapper.find(".calendar-prev-month-btn");
+      const nextMonthBtn = wrapper.find(".calendar-next-month-btn");
+
+      expect(prevMonthBtn.exists()).toBe(true);
+      expect(nextMonthBtn.exists()).toBe(true);
+    });
+
+    it("should handle decade navigation clicks", async () => {
+      wrapper = mount(DateCalendar, {
+        props: {
+          value: mockDate,
+        },
+      });
+      wrapper.vm.state.showYears = true;
+      await nextTick();
+
+      const prevDecadeBtn = wrapper.find(".calendar-prev-decade-btn");
+      const nextDecadeBtn = wrapper.find(".calendar-next-decade-btn");
+
+      expect(prevDecadeBtn.exists()).toBe(true);
+      expect(nextDecadeBtn.exists()).toBe(true);
+    });
+
+    it("should handle year selection click", async () => {
+      wrapper = mount(DateCalendar, {
+        props: {
+          value: mockDate,
+        },
+      });
+      const yearSelect = wrapper.find(".calendar-year-select");
+      expect(yearSelect.exists()).toBe(true);
+    });
+
+    it("should handle month selection click", async () => {
+      wrapper = mount(DateCalendar, {
+        props: {
+          value: mockDate,
+        },
+      });
+      const monthSelect = wrapper.find(".calendar-month-select");
+      expect(monthSelect.exists()).toBe(true);
+    });
+
+    it("should handle date clicks", async () => {
+      wrapper = mount(DateCalendar, {
+        props: {
+          value: mockDate,
+        },
+      });
+      const dateCell = wrapper.find(".calendar-date");
+      expect(dateCell.exists()).toBe(true);
+    });
+
+    it("should handle hour clicks", async () => {
+      wrapper = mount(DateCalendar, {
+        props: {
+          value: mockDate,
+        },
+      });
+      wrapper.vm.state.showHours = true;
+      await nextTick();
+
+      const hourCell = wrapper.find(".calendar-hours .calendar-date");
+      expect(hourCell.exists()).toBe(true);
+    });
+
+    it("should handle minute clicks", async () => {
+      wrapper = mount(DateCalendar, {
+        props: {
+          value: mockDate,
+        },
+      });
+      wrapper.vm.state.showMinutes = true;
+      await nextTick();
+
+      const minuteCell = wrapper.find(".calendar-minutes .calendar-date");
+      expect(minuteCell.exists()).toBe(true);
+    });
+
+    it("should handle second clicks", async () => {
+      wrapper = mount(DateCalendar, {
+        props: {
+          value: mockDate,
+        },
+      });
+      wrapper.vm.state.showSeconds = true;
+      await nextTick();
+
+      const secondCell = wrapper.find(".calendar-seconds .calendar-date");
+      expect(secondCell.exists()).toBe(true);
+    });
+
+    it("should handle hour display clicks", async () => {
+      wrapper = mount(DateCalendar, {
+        props: {
+          value: mockDate,
+        },
+      });
+      const hourDisplay = wrapper.find(".calendar-hour a");
+      expect(hourDisplay.exists()).toBe(true);
+    });
+  });
+
+  describe("Lifecycle", () => {
+    it("should initialize state on mount", () => {
+      wrapper = mount(DateCalendar, {
+        props: {
+          value: mockDate,
+        },
+      });
+      expect(wrapper.vm.state.year).toBe(2024);
+      expect(wrapper.vm.state.month).toBe(0);
+      expect(wrapper.vm.state.day).toBe(15);
+    });
+
+    it("should watch for value prop changes", async () => {
+      wrapper = mount(DateCalendar, {
+        props: {
+          value: mockDate,
+        },
+      });
+
+      const newDate = new Date(2025, 5, 20);
+      await wrapper.setProps({ value: newDate });
+      expect(wrapper.vm.state.year).toBe(2025);
+      expect(wrapper.vm.state.month).toBe(5);
+      expect(wrapper.vm.state.day).toBe(20);
+    });
+
+    it("should determine format type on mount", () => {
+      wrapper = mount(DateCalendar, {
+        props: {
+          format: "YYYY-MM-DD HH:mm:ss",
+        },
+      });
+      expect(wrapper.vm.state.m).toBe("H");
+    });
+
+    it("should determine date format type on mount", () => {
+      wrapper = mount(DateCalendar, {
+        props: {
+          format: "YYYY-MM-DD",
+        },
+      });
+      expect(wrapper.vm.state.m).toBe("D");
+    });
+
+    it("should determine month format type on mount", () => {
+      wrapper = mount(DateCalendar, {
+        props: {
+          format: "YYYY-MM",
+        },
+      });
+      expect(wrapper.vm.state.m).toBe("M");
+    });
+
+    it("should determine year format type on mount", () => {
+      wrapper = mount(DateCalendar, {
+        props: {
+          format: "YYYY",
+        },
+      });
+      expect(wrapper.vm.state.m).toBe("Y");
+    });
+  });
+
+  describe("Edge Cases", () => {
+    it("should handle null value", () => {
+      wrapper = mount(DateCalendar as any, {
+        props: {
+          value: null,
+        },
+      });
+      expect(wrapper.vm.state.year).toBe(0);
+    });
+
+    it("should handle undefined value", () => {
+      wrapper = mount(DateCalendar, {
+        props: {
+          value: undefined,
+        },
+      });
+      expect(wrapper.vm.state.year).toBe(new Date().getFullYear());
+    });
+
+    it("should handle empty dates array", () => {
+      wrapper = mount(DateCalendar, {
+        props: {
+          dates: [],
+        },
+      });
+      expect(wrapper.vm.dates).toEqual([]);
+    });
+
+    it("should handle empty maxRange array", () => {
+      wrapper = mount(DateCalendar, {
+        props: {
+          maxRange: [],
+        },
+      });
+      expect(wrapper.vm.maxRange).toEqual([]);
+    });
+  });
+
+  describe("Accessibility", () => {
+    it("should have proper click handlers", () => {
+      wrapper = mount(DateCalendar, {
+        props: {
+          value: mockDate,
+        },
+      });
+      const clickableElements = wrapper.findAll("a[onclick], .calendar-date");
+      expect(clickableElements.length).toBeGreaterThan(0);
+    });
+
+    it("should have proper navigation structure", () => {
+      wrapper = mount(DateCalendar, {
+        props: {
+          value: mockDate,
+        },
+      });
+      const navigationElements = wrapper.findAll(
+        ".calendar-prev-year-btn, .calendar-next-year-btn, .calendar-prev-month-btn, .calendar-next-month-btn",
+      );
+      expect(navigationElements.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe("Internationalization", () => {
+    it("should use i18n translations", () => {
+      wrapper = mount(DateCalendar, {
+        props: {
+          value: mockDate,
+        },
+      });
+
+      expect(wrapper.vm.local.hourTip).toBe("Hour");
+      expect(wrapper.vm.local.minuteTip).toBe("Minute");
+      expect(wrapper.vm.local.secondTip).toBe("Second");
+      expect(wrapper.vm.local.yearSuffix).toBe("Year");
+      expect(wrapper.vm.local.cancelTip).toBe("Cancel");
+      expect(wrapper.vm.local.submitTip).toBe("Confirm");
+    });
+
+    it("should handle month names correctly", () => {
+      wrapper = mount(DateCalendar, {
+        props: {
+          value: mockDate,
+        },
+      });
+
+      expect(wrapper.vm.local.monthsHead).toHaveLength(12);
+      expect(wrapper.vm.local.months).toHaveLength(12);
+      expect(wrapper.vm.local.weeks).toHaveLength(7);
+    });
+  });
+});

src/components/__tests__/Icon.spec.ts

@@ -0,0 +1,102 @@
+/**
+ * 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, expect } from "vitest";
+import { mount } from "@vue/test-utils";
+import Icon from "../Icon.vue";
+
+describe("Icon Component", () => {
+  it("should render with default props", () => {
+    const wrapper = mount(Icon);
+
+    expect(wrapper.find("svg").exists()).toBe(true);
+    expect(wrapper.find("use").exists()).toBe(true);
+    expect(wrapper.find("use").attributes("href")).toBe("#");
+    expect(wrapper.classes()).toContain("icon");
+    expect(wrapper.classes()).toContain("sm");
+  });
+
+  it("should render with custom icon name", () => {
+    const wrapper = mount(Icon, {
+      props: {
+        iconName: "test-icon",
+      },
+    });
+
+    expect(wrapper.find("use").attributes("href")).toBe("#test-icon");
+  });
+
+  it("should apply correct size classes", () => {
+    const sizes = ["sm", "middle", "lg", "xl", "logo"];
+
+    sizes.forEach((size) => {
+      const wrapper = mount(Icon, {
+        props: { size },
+      });
+
+      expect(wrapper.classes()).toContain(size);
+    });
+  });
+
+  it("should apply loading class when loading prop is true", () => {
+    const wrapper = mount(Icon, {
+      props: {
+        loading: true,
+      },
+    });
+
+    expect(wrapper.classes()).toContain("loading");
+  });
+
+  it("should not apply loading class when loading prop is false", () => {
+    const wrapper = mount(Icon, {
+      props: {
+        loading: false,
+      },
+    });
+
+    expect(wrapper.classes()).not.toContain("loading");
+  });
+
+  it("should combine multiple classes correctly", () => {
+    const wrapper = mount(Icon, {
+      props: {
+        size: "lg",
+        loading: true,
+      },
+    });
+
+    expect(wrapper.classes()).toContain("icon");
+    expect(wrapper.classes()).toContain("lg");
+    expect(wrapper.classes()).toContain("loading");
+  });
+
+  it("should have correct SVG structure", () => {
+    const wrapper = mount(Icon, {
+      props: {
+        iconName: "test-icon",
+      },
+    });
+
+    const svg = wrapper.find("svg");
+    const use = wrapper.find("use");
+
+    expect(svg.exists()).toBe(true);
+    expect(use.exists()).toBe(true);
+    expect(use.element.parentElement).toBe(svg.element);
+  });
+});

src/components/__tests__/Radio.spec.ts

@@ -0,0 +1,520 @@
+/**
+ * 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, expect, vi, beforeEach } from "vitest";
+import { mount, type VueWrapper } from "@vue/test-utils";
+import { nextTick } from "vue";
+import Radio from "../Radio.vue";
+
+describe("Radio Component", () => {
+  let wrapper: Recordable;
+
+  const mockOptions = [
+    { label: "Option 1", value: "option1" },
+    { label: "Option 2", value: "option2" },
+    { label: "Option 3", value: "option3" },
+  ];
+
+  const mockOptionsWithNumbers = [
+    { label: "Option 1", value: 1 },
+    { label: "Option 2", value: 2 },
+    { label: "Option 3", value: 3 },
+  ];
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe("Props", () => {
+    it("should render with default props", () => {
+      wrapper = mount(Radio);
+
+      expect(wrapper.exists()).toBe(true);
+      expect(wrapper.vm.selected).toBe("");
+      expect(wrapper.vm.options).toEqual([]);
+      expect(wrapper.vm.size).toBe("default");
+    });
+
+    it("should render with custom options", () => {
+      wrapper = mount(Radio, {
+        props: {
+          options: mockOptions,
+        },
+      });
+
+      expect(wrapper.vm.options).toEqual(mockOptions);
+      expect(wrapper.findAll(".el-radio")).toHaveLength(3);
+    });
+
+    it("should render with custom value", () => {
+      wrapper = mount(Radio, {
+        props: {
+          options: mockOptions,
+          value: "option2",
+        },
+      });
+
+      expect(wrapper.vm.selected).toBe("option2");
+    });
+
+    it("should render with custom size", () => {
+      wrapper = mount(Radio, {
+        props: {
+          size: "small",
+        },
+      });
+
+      expect(wrapper.vm.size).toBe("small");
+    });
+
+    it("should handle options with number values", () => {
+      wrapper = mount(Radio, {
+        props: {
+          options: mockOptionsWithNumbers,
+          value: "2",
+        },
+      });
+
+      expect(wrapper.vm.options).toEqual(mockOptionsWithNumbers);
+      expect(wrapper.findAll(".el-radio")).toHaveLength(3);
+    });
+
+    it("should handle empty options array", () => {
+      wrapper = mount(Radio, {
+        props: {
+          options: [],
+        },
+      });
+
+      expect(wrapper.vm.options).toEqual([]);
+      expect(wrapper.findAll(".el-radio")).toHaveLength(0);
+    });
+
+    it("should handle undefined options", () => {
+      wrapper = mount(Radio, {
+        props: {
+          options: undefined,
+        },
+      });
+
+      expect(wrapper.vm.options).toEqual([]);
+    });
+  });
+
+  describe("Rendering", () => {
+    it("should render el-radio-group", () => {
+      wrapper = mount(Radio);
+
+      expect(wrapper.find(".el-radio-group").exists()).toBe(true);
+    });
+
+    it("should render correct number of radio options", () => {
+      wrapper = mount(Radio, {
+        props: {
+          options: mockOptions,
+        },
+      });
+
+      const radioElements = wrapper.findAll(".el-radio");
+      expect(radioElements).toHaveLength(3);
+    });
+
+    it("should render radio labels correctly", () => {
+      wrapper = mount(Radio, {
+        props: {
+          options: mockOptions,
+        },
+      });
+
+      const radioElements = wrapper.findAll(".el-radio");
+      expect(radioElements[0].text()).toContain("Option 1");
+      expect(radioElements[1].text()).toContain("Option 2");
+      expect(radioElements[2].text()).toContain("Option 3");
+    });
+
+    it("should set correct key attributes", () => {
+      wrapper = mount(Radio, {
+        props: {
+          options: mockOptions,
+        },
+      });
+
+      // Vue doesn't expose key attributes directly, but we can verify the structure
+      const radioElements = wrapper.findAll(".el-radio");
+      expect(radioElements).toHaveLength(3);
+      // Verify that each radio has a unique structure based on the options
+      expect(radioElements[0].text()).toContain("Option 1");
+      expect(radioElements[1].text()).toContain("Option 2");
+      expect(radioElements[2].text()).toContain("Option 3");
+    });
+
+    it("should set correct label attributes", () => {
+      wrapper = mount(Radio, {
+        props: {
+          options: mockOptions,
+        },
+      });
+
+      // Vue doesn't expose label attributes directly, but we can verify the structure
+      const radioElements = wrapper.findAll(".el-radio");
+      expect(radioElements).toHaveLength(3);
+      // Verify that each radio has the correct text content
+      expect(radioElements[0].text()).toContain("Option 1");
+      expect(radioElements[1].text()).toContain("Option 2");
+      expect(radioElements[2].text()).toContain("Option 3");
+    });
+
+    it("should handle mixed string and number labels", () => {
+      const mixedOptions = [
+        { label: "String Label", value: "string" },
+        { label: 123, value: "number" },
+      ];
+
+      wrapper = mount(Radio, {
+        props: {
+          options: mixedOptions,
+        },
+      });
+
+      const radioElements = wrapper.findAll(".el-radio");
+      expect(radioElements[0].text()).toContain("String Label");
+      expect(radioElements[1].text()).toContain("123");
+    });
+  });
+
+  describe("Events", () => {
+    it("should emit change event when radio is selected", async () => {
+      wrapper = mount(Radio, {
+        props: {
+          options: mockOptions,
+        },
+      });
+
+      // Trigger the change event by calling the checked function directly
+      await wrapper.vm.checked("option2");
+      await nextTick();
+
+      expect(wrapper.emitted("change")).toBeTruthy();
+      expect(wrapper.emitted("change")[0]).toEqual(["option2"]);
+    });
+
+    it("should emit change event with correct value", async () => {
+      wrapper = mount(Radio, {
+        props: {
+          options: mockOptions,
+        },
+      });
+
+      await wrapper.vm.checked("option3");
+      await nextTick();
+
+      expect(wrapper.emitted("change")[0]).toEqual(["option3"]);
+    });
+
+    it("should emit change event multiple times", async () => {
+      wrapper = mount(Radio, {
+        props: {
+          options: mockOptions,
+        },
+      });
+
+      await wrapper.vm.checked("option1");
+      await nextTick();
+      await wrapper.vm.checked("option2");
+      await nextTick();
+
+      expect(wrapper.emitted("change")).toHaveLength(2);
+      expect(wrapper.emitted("change")[0]).toEqual(["option1"]);
+      expect(wrapper.emitted("change")[1]).toEqual(["option2"]);
+    });
+
+    it("should handle change event with number value", async () => {
+      wrapper = mount(Radio, {
+        props: {
+          options: mockOptionsWithNumbers,
+        },
+      });
+
+      await wrapper.vm.checked(2);
+      await nextTick();
+
+      expect(wrapper.emitted("change")[0]).toEqual([2]);
+    });
+  });
+
+  describe("Data Binding", () => {
+    it("should update selected value when props change", async () => {
+      wrapper = mount(Radio, {
+        props: {
+          options: mockOptions,
+          value: "option1",
+        },
+      });
+
+      expect(wrapper.vm.selected).toBe("option1");
+
+      await wrapper.setProps({ value: "option2" });
+      await nextTick();
+
+      expect(wrapper.vm.selected).toBe("option2");
+    });
+
+    it("should update options when props change", async () => {
+      wrapper = mount(Radio, {
+        props: {
+          options: mockOptions,
+        },
+      });
+
+      expect(wrapper.vm.options).toEqual(mockOptions);
+
+      const newOptions = [
+        { label: "New Option 1", value: "new1" },
+        { label: "New Option 2", value: "new2" },
+      ];
+
+      await wrapper.setProps({ options: newOptions });
+      await nextTick();
+
+      expect(wrapper.vm.options).toEqual(newOptions);
+      expect(wrapper.findAll(".el-radio")).toHaveLength(2);
+    });
+
+    it("should maintain selected value when options change", async () => {
+      wrapper = mount(Radio, {
+        props: {
+          options: mockOptions,
+          value: "option2",
+        },
+      });
+
+      expect(wrapper.vm.selected).toBe("option2");
+
+      const newOptions = [
+        { label: "New Option 1", value: "new1" },
+        { label: "New Option 2", value: "new2" },
+      ];
+
+      await wrapper.setProps({ options: newOptions });
+      await nextTick();
+
+      expect(wrapper.vm.selected).toBe("option2"); // Should maintain the selected value
+    });
+  });
+
+  describe("Edge Cases", () => {
+    it("should handle null options", () => {
+      wrapper = mount(Radio, {
+        props: {
+          options: null as any,
+        },
+      });
+
+      // When null is passed, Vue will pass it through as-is
+      // The component should handle this gracefully in the template
+      expect(wrapper.vm.options).toBeNull();
+      // But the component should still render without errors
+      expect(wrapper.find(".el-radio-group").exists()).toBe(true);
+    });
+
+    it("should handle undefined value", () => {
+      wrapper = mount(Radio, {
+        props: {
+          value: undefined,
+        },
+      });
+
+      expect(wrapper.vm.selected).toBe("");
+    });
+
+    it("should handle empty string value", () => {
+      wrapper = mount(Radio, {
+        props: {
+          value: "",
+        },
+      });
+
+      expect(wrapper.vm.selected).toBe("");
+    });
+
+    it("should handle options with empty labels", () => {
+      const optionsWithEmptyLabels = [
+        { label: "", value: "empty" },
+        { label: "Valid Label", value: "valid" },
+      ];
+
+      wrapper = mount(Radio, {
+        props: {
+          options: optionsWithEmptyLabels,
+        },
+      });
+
+      expect(wrapper.vm.options).toEqual(optionsWithEmptyLabels);
+      expect(wrapper.findAll(".el-radio")).toHaveLength(2);
+    });
+
+    it("should handle options with empty values", () => {
+      const optionsWithEmptyValues = [
+        { label: "Label 1", value: "" },
+        { label: "Label 2", value: "valid" },
+      ];
+
+      wrapper = mount(Radio, {
+        props: {
+          options: optionsWithEmptyValues,
+        },
+      });
+
+      expect(wrapper.vm.options).toEqual(optionsWithEmptyValues);
+      expect(wrapper.findAll(".el-radio")).toHaveLength(2);
+    });
+
+    it("should handle very long labels", () => {
+      const longLabel = "A".repeat(1000);
+      const optionsWithLongLabel = [{ label: longLabel, value: "long" }];
+
+      wrapper = mount(Radio, {
+        props: {
+          options: optionsWithLongLabel,
+        },
+      });
+
+      expect(wrapper.vm.options).toEqual(optionsWithLongLabel);
+      expect(wrapper.findAll(".el-radio")).toHaveLength(1);
+    });
+
+    it("should handle special characters in labels", () => {
+      const specialOptions = [
+        { label: "Option with & symbols", value: "special1" },
+        { label: "Option with <script> tags", value: "special2" },
+        { label: "Option with 'quotes'", value: "special3" },
+      ];
+
+      wrapper = mount(Radio, {
+        props: {
+          options: specialOptions,
+        },
+      });
+
+      expect(wrapper.vm.options).toEqual(specialOptions);
+      expect(wrapper.findAll(".el-radio")).toHaveLength(3);
+    });
+  });
+
+  describe("Component Integration", () => {
+    it("should work with Element Plus radio components", () => {
+      wrapper = mount(Radio, {
+        props: {
+          options: mockOptions,
+        },
+      });
+
+      const radioGroup = wrapper.find(".el-radio-group");
+      const radioElements = wrapper.findAll(".el-radio");
+
+      expect(radioGroup.exists()).toBe(true);
+      expect(radioElements.length).toBeGreaterThan(0);
+      // Verify the component structure is correct
+      expect(wrapper.vm.selected).toBe("");
+    });
+
+    it("should have correct v-model binding", () => {
+      wrapper = mount(Radio, {
+        props: {
+          options: mockOptions,
+          value: "option1",
+        },
+      });
+
+      // Verify the internal selected value matches the prop
+      expect(wrapper.vm.selected).toBe("option1");
+    });
+
+    it("should have correct change event binding", () => {
+      wrapper = mount(Radio, {
+        props: {
+          options: mockOptions,
+        },
+      });
+
+      // Verify the component has the checked function
+      expect(typeof wrapper.vm.checked).toBe("function");
+    });
+  });
+
+  describe("Accessibility", () => {
+    it("should have proper ARIA attributes", () => {
+      wrapper = mount(Radio, {
+        props: {
+          options: mockOptions,
+        },
+      });
+
+      const radioGroup = wrapper.find(".el-radio-group");
+      expect(radioGroup.exists()).toBe(true);
+    });
+
+    it("should render radio options with proper structure", () => {
+      wrapper = mount(Radio, {
+        props: {
+          options: mockOptions,
+        },
+      });
+
+      const radioElements = wrapper.findAll(".el-radio");
+      radioElements.forEach((radio: VueWrapper) => {
+        expect(radio.exists()).toBe(true);
+        expect(radio.text()).toBeTruthy();
+      });
+    });
+  });
+
+  describe("Performance", () => {
+    it("should handle large number of options", () => {
+      const largeOptions = Array.from({ length: 100 }, (_, i) => ({
+        label: `Option ${i + 1}`,
+        value: `option${i + 1}`,
+      }));
+
+      wrapper = mount(Radio, {
+        props: {
+          options: largeOptions,
+        },
+      });
+
+      expect(wrapper.vm.options).toEqual(largeOptions);
+      expect(wrapper.findAll(".el-radio")).toHaveLength(100);
+    });
+
+    it("should handle rapid prop changes", async () => {
+      wrapper = mount(Radio, {
+        props: {
+          options: mockOptions,
+          value: "option1",
+        },
+      });
+
+      // Rapidly change props
+      await wrapper.setProps({ value: "option2" });
+      await wrapper.setProps({ value: "option3" });
+      await wrapper.setProps({ value: "option1" });
+      await nextTick();
+
+      expect(wrapper.vm.selected).toBe("option1");
+    });
+  });
+});

src/components/__tests__/SelectSingle.spec.ts

@@ -0,0 +1,488 @@
+/**
+ * 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, expect, vi, beforeEach, afterEach } from "vitest";
+import { mount } from "@vue/test-utils";
+import { nextTick } from "vue";
+import SelectSingle from "../SelectSingle.vue";
+
+describe("SelectSingle Component", () => {
+  let wrapper: Recordable;
+
+  const mockOptions = [
+    { label: "Option 1", value: "option1" },
+    { label: "Option 2", value: "option2" },
+    { label: "Option 3", value: "option3" },
+  ];
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    // Mock document.body.addEventListener
+    vi.spyOn(document.body, "addEventListener").mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  describe("Props", () => {
+    it("should render with default props", () => {
+      wrapper = mount(SelectSingle);
+
+      expect(wrapper.exists()).toBe(true);
+      expect(wrapper.find(".bar-select").exists()).toBe(true);
+      expect(wrapper.find(".no-data").text()).toBe("Please select a option");
+    });
+
+    it("should render with custom options", () => {
+      wrapper = mount(SelectSingle, {
+        props: {
+          options: mockOptions,
+        },
+      });
+
+      expect(wrapper.props("options")).toEqual(mockOptions);
+    });
+
+    it("should render with selected value", () => {
+      wrapper = mount(SelectSingle, {
+        props: {
+          options: mockOptions,
+          value: "option1",
+        },
+      });
+
+      expect(wrapper.vm.selected.value).toBe("option1");
+      expect(wrapper.vm.selected.label).toBe("Option 1");
+    });
+
+    it("should render with clearable option", () => {
+      wrapper = mount(SelectSingle, {
+        props: {
+          options: mockOptions,
+          value: "option1",
+          clearable: true,
+        },
+      });
+
+      expect(wrapper.props("clearable")).toBe(true);
+      expect(wrapper.find(".remove-icon").exists()).toBe(true);
+    });
+
+    it("should not show remove icon when clearable is false", () => {
+      wrapper = mount(SelectSingle, {
+        props: {
+          options: mockOptions,
+          value: "option1",
+          clearable: false,
+        },
+      });
+
+      expect(wrapper.find(".remove-icon").exists()).toBe(false);
+    });
+  });
+
+  describe("Component Structure", () => {
+    it("should have correct template structure", () => {
+      wrapper = mount(SelectSingle, {
+        props: {
+          options: mockOptions,
+        },
+      });
+
+      expect(wrapper.find(".bar-select").exists()).toBe(true);
+      expect(wrapper.find(".bar-i").exists()).toBe(true);
+      expect(wrapper.find(".opt-wrapper").exists()).toBe(true);
+    });
+
+    it("should render options correctly", () => {
+      wrapper = mount(SelectSingle, {
+        props: {
+          options: mockOptions,
+        },
+      });
+
+      const options = wrapper.findAll(".opt");
+      expect(options.length).toBe(3);
+      expect(options[0].text()).toBe("Option 1");
+      expect(options[1].text()).toBe("Option 2");
+      expect(options[2].text()).toBe("Option 3");
+    });
+
+    it("should show selected option text", () => {
+      wrapper = mount(SelectSingle, {
+        props: {
+          options: mockOptions,
+          value: "option1",
+        },
+      });
+
+      expect(wrapper.find(".bar-i span").text()).toBe("Option 1");
+    });
+
+    it("should show placeholder when no option is selected", () => {
+      wrapper = mount(SelectSingle, {
+        props: {
+          options: mockOptions,
+          value: "",
+        },
+      });
+
+      expect(wrapper.find(".no-data").text()).toBe("Please select a option");
+    });
+  });
+
+  describe("Event Handling", () => {
+    it("should emit change event when option is selected", async () => {
+      wrapper = mount(SelectSingle, {
+        props: {
+          options: mockOptions,
+        },
+      });
+
+      // Open dropdown
+      await wrapper.find(".bar-i").trigger("click");
+      await nextTick();
+
+      // Select an option
+      await wrapper.find(".opt").trigger("click");
+
+      expect(wrapper.emitted("change")).toBeTruthy();
+      expect(wrapper.emitted("change")[0][0]).toBe("option1");
+    });
+
+    it("should emit change event with empty string when remove is clicked", async () => {
+      wrapper = mount(SelectSingle, {
+        props: {
+          options: mockOptions,
+          value: "option1",
+          clearable: true,
+        },
+      });
+
+      await wrapper.find(".remove-icon").trigger("click");
+
+      expect(wrapper.emitted("change")).toBeTruthy();
+      expect(wrapper.emitted("change")[0][0]).toBe("");
+    });
+
+    it("should toggle dropdown visibility when bar-i is clicked", async () => {
+      wrapper = mount(SelectSingle, {
+        props: {
+          options: mockOptions,
+        },
+      });
+
+      expect(wrapper.vm.visible).toBe(false);
+
+      await wrapper.find(".bar-i").trigger("click");
+      expect(wrapper.vm.visible).toBe(true);
+
+      await wrapper.find(".bar-i").trigger("click");
+      expect(wrapper.vm.visible).toBe(false);
+    });
+
+    it("should not select disabled option", async () => {
+      wrapper = mount(SelectSingle, {
+        props: {
+          options: mockOptions,
+          value: "option1",
+        },
+      });
+
+      // Open dropdown
+      await wrapper.find(".bar-i").trigger("click");
+      await nextTick();
+
+      // Try to select the already selected option (which should be disabled)
+      const disabledOption = wrapper.find(".select-disabled");
+      expect(disabledOption.exists()).toBe(true);
+      expect(disabledOption.text()).toBe("Option 1");
+    });
+  });
+
+  describe("Watchers", () => {
+    it("should update selected value when props.value changes", async () => {
+      wrapper = mount(SelectSingle, {
+        props: {
+          options: mockOptions,
+          value: "option1",
+        },
+      });
+
+      expect(wrapper.vm.selected.value).toBe("option1");
+
+      await wrapper.setProps({
+        value: "option2",
+      });
+      await nextTick();
+
+      expect(wrapper.vm.selected.value).toBe("option2");
+      expect(wrapper.vm.selected.label).toBe("Option 2");
+    });
+
+    it("should handle value change to empty string", async () => {
+      wrapper = mount(SelectSingle, {
+        props: {
+          options: mockOptions,
+          value: "option1",
+        },
+      });
+
+      expect(wrapper.vm.selected.value).toBe("option1");
+
+      await wrapper.setProps({
+        value: "",
+      });
+      await nextTick();
+
+      expect(wrapper.vm.selected.value).toBe("");
+      expect(wrapper.vm.selected.label).toBe("");
+    });
+
+    it("should handle value change to non-existent option", async () => {
+      wrapper = mount(SelectSingle, {
+        props: {
+          options: mockOptions,
+          value: "option1",
+        },
+      });
+
+      expect(wrapper.vm.selected.value).toBe("option1");
+
+      await wrapper.setProps({
+        value: "nonexistent",
+      });
+      await nextTick();
+
+      expect(wrapper.vm.selected.value).toBe("");
+      expect(wrapper.vm.selected.label).toBe("");
+    });
+  });
+
+  describe("Methods", () => {
+    it("should handle select option correctly", async () => {
+      wrapper = mount(SelectSingle, {
+        props: {
+          options: mockOptions,
+        },
+      });
+
+      await wrapper.vm.handleSelect(mockOptions[1]);
+
+      expect(wrapper.vm.selected.value).toBe("option2");
+      expect(wrapper.vm.selected.label).toBe("Option 2");
+      expect(wrapper.emitted("change")[0][0]).toBe("option2");
+    });
+
+    it("should handle remove selected correctly", async () => {
+      wrapper = mount(SelectSingle, {
+        props: {
+          options: mockOptions,
+          value: "option1",
+        },
+      });
+
+      await wrapper.vm.removeSelected();
+
+      expect(wrapper.vm.selected.value).toBe("");
+      expect(wrapper.vm.selected.label).toBe("");
+      expect(wrapper.emitted("change")[0][0]).toBe("");
+    });
+
+    it("should handle setPopper correctly", async () => {
+      wrapper = mount(SelectSingle, {
+        props: {
+          options: mockOptions,
+        },
+      });
+
+      const event = { stopPropagation: vi.fn() };
+      await wrapper.vm.setPopper(event);
+
+      expect(event.stopPropagation).toHaveBeenCalled();
+      expect(wrapper.vm.visible).toBe(true);
+    });
+
+    it("should handle click outside correctly", async () => {
+      wrapper = mount(SelectSingle, {
+        props: {
+          options: mockOptions,
+        },
+      });
+
+      // Open dropdown
+      await wrapper.find(".bar-i").trigger("click");
+      expect(wrapper.vm.visible).toBe(true);
+
+      // Simulate click outside
+      await wrapper.vm.handleClick();
+      expect(wrapper.vm.visible).toBe(false);
+    });
+  });
+
+  describe("Edge Cases", () => {
+    it("should handle empty options array", () => {
+      wrapper = mount(SelectSingle, {
+        props: {
+          options: [],
+        },
+      });
+
+      expect(wrapper.props("options")).toEqual([]);
+      expect(wrapper.findAll(".opt").length).toBe(0);
+    });
+
+    it("should handle undefined value", () => {
+      wrapper = mount(SelectSingle, {
+        props: {
+          options: mockOptions,
+          value: undefined,
+        },
+      });
+
+      expect(wrapper.vm.selected.value).toBe("");
+      expect(wrapper.vm.selected.label).toBe("");
+    });
+
+    it("should handle null value", () => {
+      wrapper = mount(SelectSingle, {
+        props: {
+          options: mockOptions,
+          value: null as any,
+        },
+      });
+
+      expect(wrapper.vm.selected.value).toBe("");
+      expect(wrapper.vm.selected.label).toBe("");
+    });
+
+    it("should handle options with empty values", () => {
+      const optionsWithEmptyValues = [
+        { label: "Option 1", value: "" },
+        { label: "Option 2", value: "option2" },
+      ];
+
+      wrapper = mount(SelectSingle, {
+        props: {
+          options: optionsWithEmptyValues,
+          value: "",
+        },
+      });
+
+      expect(wrapper.vm.selected.value).toBe("");
+      expect(wrapper.vm.selected.label).toBe("Option 1");
+    });
+  });
+
+  describe("Integration", () => {
+    it("should work with all props combined", () => {
+      wrapper = mount(SelectSingle, {
+        props: {
+          options: mockOptions,
+          value: "option1",
+          clearable: true,
+        },
+      });
+
+      expect(wrapper.exists()).toBe(true);
+      expect(wrapper.vm.selected.value).toBe("option1");
+      expect(wrapper.vm.selected.label).toBe("Option 1");
+      expect(wrapper.props("clearable")).toBe(true);
+      expect(wrapper.find(".remove-icon").exists()).toBe(true);
+    });
+
+    it("should handle complete selection workflow", async () => {
+      wrapper = mount(SelectSingle, {
+        props: {
+          options: mockOptions,
+          clearable: true,
+        },
+      });
+
+      // Initially no selection
+      expect(wrapper.vm.selected.value).toBe("");
+      expect(wrapper.find(".no-data").text()).toBe("Please select a option");
+
+      // Open dropdown
+      await wrapper.find(".bar-i").trigger("click");
+      expect(wrapper.vm.visible).toBe(true);
+
+      // Select an option
+      await wrapper.find(".opt").trigger("click");
+      expect(wrapper.vm.selected.value).toBe("option1");
+      expect(wrapper.emitted("change")[0][0]).toBe("option1");
+
+      // Clear selection
+      await wrapper.find(".remove-icon").trigger("click");
+      expect(wrapper.vm.selected.value).toBe("");
+      expect(wrapper.emitted("change")[1][0]).toBe("");
+    });
+
+    it("should handle dropdown toggle and option selection", async () => {
+      wrapper = mount(SelectSingle, {
+        props: {
+          options: mockOptions,
+        },
+      });
+
+      // Toggle dropdown
+      await wrapper.find(".bar-i").trigger("click");
+      expect(wrapper.vm.visible).toBe(true);
+
+      // Select option
+      const options = wrapper.findAll(".opt");
+      await options[1].trigger("click");
+
+      expect(wrapper.vm.selected.value).toBe("option2");
+      expect(wrapper.emitted("change")[0][0]).toBe("option2");
+      expect(wrapper.vm.visible).toBe(true); // Should stay open after selection
+    });
+  });
+
+  describe("CSS Classes", () => {
+    it("should apply active class when dropdown is visible", async () => {
+      wrapper = mount(SelectSingle, {
+        props: {
+          options: mockOptions,
+        },
+      });
+
+      expect(wrapper.find(".bar-select").classes()).not.toContain("active");
+
+      await wrapper.find(".bar-i").trigger("click");
+      expect(wrapper.find(".bar-select").classes()).toContain("active");
+    });
+
+    it("should apply select-disabled class to selected option", async () => {
+      wrapper = mount(SelectSingle, {
+        props: {
+          options: mockOptions,
+          value: "option1",
+        },
+      });
+
+      await wrapper.find(".bar-i").trigger("click");
+      await nextTick();
+
+      const options = wrapper.findAll(".opt");
+      expect(options[0].classes()).toContain("select-disabled");
+      expect(options[1].classes()).not.toContain("select-disabled");
+      expect(options[2].classes()).not.toContain("select-disabled");
+    });
+  });
+});

src/components/__tests__/Selector.spec.ts

@@ -0,0 +1,402 @@
+/**
+ * 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, expect, vi, beforeEach } from "vitest";
+import { mount } from "@vue/test-utils";
+import { nextTick } from "vue";
+import Selector from "../Selector.vue";
+
+describe("Selector Component", () => {
+  let wrapper: Recordable;
+
+  const mockOptions = [
+    { label: "Option 1", value: "option1" },
+    { label: "Option 2", value: "option2" },
+    { label: "Option 3", value: "option3", disabled: true },
+  ];
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe("Props", () => {
+    it("should render with default props", () => {
+      wrapper = mount(Selector);
+
+      expect(wrapper.exists()).toBe(true);
+      expect(wrapper.vm.selected).toEqual([]);
+    });
+
+    it("should render with custom value", () => {
+      wrapper = mount(Selector, {
+        props: {
+          options: mockOptions,
+          value: "option1",
+        },
+      });
+
+      expect(wrapper.vm.selected).toBe("option1");
+    });
+
+    it("should render in multiple mode", () => {
+      wrapper = mount(Selector, {
+        props: {
+          options: mockOptions,
+          multiple: true,
+          value: ["option1", "option2"],
+        },
+      });
+
+      expect(wrapper.vm.selected).toEqual(["option1", "option2"]);
+    });
+
+    it("should render with custom placeholder", () => {
+      wrapper = mount(Selector, {
+        props: {
+          placeholder: "Custom placeholder",
+        },
+      });
+
+      expect(wrapper.props("placeholder")).toBe("Custom placeholder");
+    });
+
+    it("should render with custom size", () => {
+      wrapper = mount(Selector, {
+        props: {
+          size: "small",
+        },
+      });
+
+      expect(wrapper.props("size")).toBe("small");
+    });
+
+    it("should render with custom border radius", () => {
+      wrapper = mount(Selector, {
+        props: {
+          borderRadius: 8,
+        },
+      });
+
+      expect(wrapper.props("borderRadius")).toBe(8);
+    });
+
+    it("should render in disabled mode", () => {
+      wrapper = mount(Selector, {
+        props: {
+          disabled: true,
+        },
+      });
+
+      expect(wrapper.props("disabled")).toBe(true);
+    });
+
+    it("should render with clearable option", () => {
+      wrapper = mount(Selector, {
+        props: {
+          clearable: true,
+        },
+      });
+
+      expect(wrapper.props("clearable")).toBe(true);
+    });
+
+    it("should render in remote mode", () => {
+      wrapper = mount(Selector, {
+        props: {
+          isRemote: true,
+        },
+      });
+
+      expect(wrapper.props("isRemote")).toBe(true);
+    });
+
+    it("should render with filterable option", () => {
+      wrapper = mount(Selector, {
+        props: {
+          filterable: true,
+        },
+      });
+
+      expect(wrapper.props("filterable")).toBe(true);
+    });
+
+    it("should render with collapse tags", () => {
+      wrapper = mount(Selector, {
+        props: {
+          multiple: true,
+          collapseTags: true,
+        },
+      });
+
+      expect(wrapper.props("collapseTags")).toBe(true);
+    });
+
+    it("should render with collapse tags tooltip", () => {
+      wrapper = mount(Selector, {
+        props: {
+          multiple: true,
+          collapseTagsTooltip: true,
+        },
+      });
+
+      expect(wrapper.props("collapseTagsTooltip")).toBe(true);
+    });
+  });
+
+  describe("Component Structure", () => {
+    it("should have correct template structure", () => {
+      wrapper = mount(Selector, {
+        props: {
+          options: mockOptions,
+        },
+      });
+
+      expect(wrapper.exists()).toBe(true);
+      expect(wrapper.props("options")).toEqual(mockOptions);
+    });
+
+    it("should render options correctly", () => {
+      wrapper = mount(Selector, {
+        props: {
+          options: mockOptions,
+        },
+      });
+
+      expect(wrapper.props("options")).toEqual(mockOptions);
+      expect(wrapper.props("options").length).toBe(3);
+    });
+  });
+
+  describe("Event Handling", () => {
+    it("should emit change event when selection changes", async () => {
+      wrapper = mount(Selector, {
+        props: {
+          options: mockOptions,
+        },
+      });
+
+      // Simulate selection change
+      await wrapper.vm.changeSelected();
+
+      expect(wrapper.emitted("change")).toBeTruthy();
+    });
+
+    it("should emit change event with correct data for single selection", async () => {
+      wrapper = mount(Selector, {
+        props: {
+          options: mockOptions,
+          value: "option1",
+        },
+      });
+
+      await wrapper.vm.changeSelected();
+
+      const emitted = wrapper.emitted("change");
+      expect(emitted).toBeTruthy();
+      expect(emitted[0][0]).toEqual([{ label: "Option 1", value: "option1" }]);
+    });
+
+    it("should emit change event with correct data for multiple selection", async () => {
+      wrapper = mount(Selector, {
+        props: {
+          options: mockOptions,
+          multiple: true,
+          value: ["option1", "option2"],
+        },
+      });
+
+      await wrapper.vm.changeSelected();
+
+      const emitted = wrapper.emitted("change");
+      expect(emitted).toBeTruthy();
+      expect(emitted[0][0]).toEqual([
+        { label: "Option 1", value: "option1" },
+        { label: "Option 2", value: "option2" },
+      ]);
+    });
+
+    it("should emit query event in remote mode", async () => {
+      wrapper = mount(Selector, {
+        props: {
+          isRemote: true,
+        },
+      });
+
+      await wrapper.vm.remoteMethod("test query");
+
+      const emitted = wrapper.emitted("query");
+      expect(emitted).toBeTruthy();
+      expect(emitted[0][0]).toBe("test query");
+    });
+
+    it("should not emit query event when not in remote mode", async () => {
+      wrapper = mount(Selector, {
+        props: {
+          isRemote: false,
+        },
+      });
+
+      await wrapper.vm.remoteMethod("test query");
+
+      expect(wrapper.emitted("query")).toBeFalsy();
+    });
+  });
+
+  describe("Watchers", () => {
+    it("should update selected value when props.value changes", async () => {
+      wrapper = mount(Selector, {
+        props: {
+          options: mockOptions,
+          value: "option1",
+        },
+      });
+
+      expect(wrapper.vm.selected).toBe("option1");
+
+      await wrapper.setProps({
+        value: "option2",
+      });
+      await nextTick();
+
+      expect(wrapper.vm.selected).toBe("option2");
+    });
+
+    it("should update selected value for multiple selection", async () => {
+      wrapper = mount(Selector, {
+        props: {
+          options: mockOptions,
+          multiple: true,
+          value: ["option1"],
+        },
+      });
+
+      expect(wrapper.vm.selected).toEqual(["option1"]);
+
+      await wrapper.setProps({
+        value: ["option1", "option2"],
+      });
+      await nextTick();
+
+      expect(wrapper.vm.selected).toEqual(["option1", "option2"]);
+    });
+  });
+
+  describe("Edge Cases", () => {
+    it("should handle empty options array", () => {
+      wrapper = mount(Selector, {
+        props: {
+          options: [],
+        },
+      });
+
+      expect(wrapper.props("options")).toEqual([]);
+    });
+
+    it("should handle undefined value", () => {
+      wrapper = mount(Selector, {
+        props: {
+          options: mockOptions,
+          value: undefined,
+        },
+      });
+
+      // The component uses default value [] when value is undefined
+      expect(wrapper.vm.selected).toEqual([]);
+    });
+
+    it("should handle null value", () => {
+      wrapper = mount(Selector, {
+        props: {
+          options: mockOptions,
+          value: null,
+        },
+      });
+
+      expect(wrapper.vm.selected).toBeNull();
+    });
+
+    it("should handle changeSelected with no matching options", async () => {
+      wrapper = mount(Selector, {
+        props: {
+          options: mockOptions,
+          value: "nonexistent",
+        },
+      });
+
+      await wrapper.vm.changeSelected();
+
+      const emitted = wrapper.emitted("change");
+      expect(emitted).toBeTruthy();
+      expect(emitted[0][0]).toEqual([]);
+    });
+  });
+
+  describe("Integration", () => {
+    it("should work with all props combined", () => {
+      wrapper = mount(Selector, {
+        props: {
+          options: mockOptions,
+          value: "option1",
+          size: "small",
+          placeholder: "Select option",
+          borderRadius: 5,
+          multiple: false,
+          disabled: false,
+          clearable: true,
+          isRemote: false,
+          filterable: true,
+          collapseTags: false,
+          collapseTagsTooltip: false,
+        },
+      });
+
+      expect(wrapper.exists()).toBe(true);
+      expect(wrapper.vm.selected).toBe("option1");
+      expect(wrapper.props("options")).toEqual(mockOptions);
+    });
+
+    it("should handle complex multiple selection scenario", async () => {
+      wrapper = mount(Selector, {
+        props: {
+          options: mockOptions,
+          multiple: true,
+          value: ["option1"],
+          clearable: true,
+          filterable: true,
+        },
+      });
+
+      expect(wrapper.vm.selected).toEqual(["option1"]);
+
+      await wrapper.setProps({
+        value: ["option1", "option2"],
+      });
+      await nextTick();
+
+      expect(wrapper.vm.selected).toEqual(["option1", "option2"]);
+
+      await wrapper.vm.changeSelected();
+
+      const emitted = wrapper.emitted("change");
+      expect(emitted).toBeTruthy();
+      expect(emitted[0][0]).toEqual([
+        { label: "Option 1", value: "option1" },
+        { label: "Option 2", value: "option2" },
+      ]);
+    });
+  });
+});

src/components/__tests__/Tags.spec.ts

@@ -0,0 +1,217 @@
+/**
+ * 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, expect, vi, beforeEach } from "vitest";
+import { mount } from "@vue/test-utils";
+import { nextTick } from "vue";
+import Tags from "../Tags.vue";
+
+describe("Tags Component", () => {
+  let wrapper: any;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe("Props", () => {
+    it("should render with default props", () => {
+      wrapper = mount(Tags);
+
+      // Check that the component renders without errors
+      expect(wrapper.exists()).toBe(true);
+      expect(wrapper.find("button").exists()).toBe(true);
+    });
+
+    it("should render with custom tags", () => {
+      const tags = ["tag1", "tag2", "tag3"];
+      wrapper = mount(Tags, {
+        props: {
+          tags,
+        },
+      });
+
+      // Check that tags are rendered
+      const tagElements = wrapper.findAll(".el-tag");
+      expect(tagElements.length).toBeGreaterThanOrEqual(0);
+    });
+
+    it("should render with custom text", () => {
+      wrapper = mount(Tags, {
+        props: {
+          text: "Add Tag",
+        },
+      });
+
+      // Check that the button contains the custom text
+      const button = wrapper.find("button");
+      expect(button.exists()).toBe(true);
+      expect(button.text()).toContain("Add Tag");
+    });
+
+    it("should render in vertical layout when vertical prop is true", () => {
+      wrapper = mount(Tags, {
+        props: {
+          tags: ["tag1", "tag2"],
+          vertical: true,
+        },
+      });
+
+      // Check that vertical class is applied
+      const verticalElements = wrapper.findAll(".vertical");
+      expect(verticalElements.length).toBeGreaterThanOrEqual(0);
+    });
+
+    it("should render in horizontal layout when vertical prop is false", () => {
+      wrapper = mount(Tags, {
+        props: {
+          tags: ["tag1", "tag2"],
+          vertical: false,
+        },
+      });
+
+      // Check that horizontal class is applied
+      const horizontalElements = wrapper.findAll(".horizontal");
+      expect(horizontalElements.length).toBeGreaterThanOrEqual(0);
+    });
+  });
+
+  describe("Component Structure", () => {
+    it("should have correct template structure", () => {
+      wrapper = mount(Tags);
+
+      // Check basic structure
+      expect(wrapper.find("button").exists()).toBe(true);
+    });
+
+    it("should show input when button is clicked", async () => {
+      wrapper = mount(Tags);
+
+      // Click the button to show input
+      const button = wrapper.find("button");
+      if (button.exists()) {
+        await button.trigger("click");
+        await nextTick();
+
+        // Check that input is shown
+        const input = wrapper.find("input");
+        expect(input.exists()).toBe(true);
+      }
+    });
+  });
+
+  describe("Event Handling", () => {
+    it("should render tags correctly", () => {
+      const tags = ["tag1", "tag2"];
+      wrapper = mount(Tags, {
+        props: {
+          tags,
+        },
+      });
+
+      // Check that tags are rendered
+      const tagElements = wrapper.findAll(".el-tag");
+      expect(tagElements.length).toBeGreaterThan(0);
+    });
+
+    it("should emit change event when new tag is added", async () => {
+      wrapper = mount(Tags);
+
+      // Show input
+      const button = wrapper.find("button");
+      if (button.exists()) {
+        await button.trigger("click");
+        await nextTick();
+
+        // Add new tag
+        const input = wrapper.find("input");
+        if (input.exists()) {
+          await input.setValue("new-tag");
+          await input.trigger("keyup.enter");
+          await nextTick();
+
+          expect(wrapper.emitted("change")).toBeTruthy();
+        }
+      }
+    });
+  });
+
+  describe("Watchers", () => {
+    it("should update dynamic tags when props.tags changes", async () => {
+      wrapper = mount(Tags, {
+        props: {
+          tags: ["tag1", "tag2"],
+        },
+      });
+
+      let tagElements = wrapper.findAll(".el-tag");
+      expect(tagElements.length).toBeGreaterThanOrEqual(0);
+
+      // Update props
+      await wrapper.setProps({
+        tags: ["tag3", "tag4", "tag5"],
+      });
+      await nextTick();
+
+      tagElements = wrapper.findAll(".el-tag");
+      expect(tagElements.length).toBeGreaterThanOrEqual(0);
+    });
+
+    it("should handle empty tags array", async () => {
+      wrapper = mount(Tags, {
+        props: {
+          tags: ["tag1", "tag2"],
+        },
+      });
+
+      let tagElements = wrapper.findAll(".el-tag");
+      expect(tagElements.length).toBeGreaterThanOrEqual(0);
+
+      // Update props to empty array
+      await wrapper.setProps({
+        tags: [],
+      });
+      await nextTick();
+
+      tagElements = wrapper.findAll(".el-tag");
+      expect(tagElements.length).toBe(0);
+    });
+  });
+
+  describe("Edge Cases", () => {
+    it("should handle undefined tags prop", () => {
+      wrapper = mount(Tags, {
+        props: {
+          tags: undefined,
+        },
+      });
+
+      const tagElements = wrapper.findAll(".el-tag");
+      expect(tagElements.length).toBe(0);
+    });
+
+    it("should handle null tags prop", () => {
+      wrapper = mount(Tags as any, {
+        props: {
+          tags: null,
+        },
+      });
+
+      const tagElements = wrapper.findAll(".el-tag");
+      expect(tagElements.length).toBe(0);
+    });
+  });
+});

src/components/__tests__/TimePicker.spec.ts

@@ -0,0 +1,893 @@
+/**
+ * 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 { mount } from "@vue/test-utils";
+import { describe, it, expect, beforeEach, vi } from "vitest";
+import { nextTick } from "vue";
+import TimePicker from "../TimePicker.vue";
+
+// Mock vue-i18n
+vi.mock("vue-i18n", () => ({
+  useI18n: () => ({
+    t: (key: string) => {
+      const translations: Record<string, string> = {
+        hourTip: "Hour",
+        minuteTip: "Minute",
+        secondTip: "Second",
+        yearSuffix: "Year",
+        monthsHead: "January_February_March_April_May_June_July_August_September_October_November_December",
+        months: "Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec",
+        weeks: "Mon_Tue_Wed_Thu_Fri_Sat_Sun",
+        cancel: "Cancel",
+        confirm: "Confirm",
+        quarterHourCutTip: "Quarter Hour",
+        halfHourCutTip: "Half Hour",
+        hourCutTip: "Hour",
+        dayCutTip: "Day",
+        weekCutTip: "Week",
+        monthCutTip: "Month",
+      };
+      return translations[key] || key;
+    },
+  }),
+}));
+
+// Mock the useTimeout hook
+vi.mock("@/hooks/useTimeout", () => ({
+  useTimeoutFn: vi.fn((callback: Function, delay: number) => {
+    setTimeout(callback, delay);
+  }),
+}));
+
+describe("TimePicker Component", () => {
+  let wrapper: any;
+  const mockDate = new Date(2024, 0, 15, 2, 30, 45);
+  const mockDateRange = [new Date(2024, 0, 10), new Date(2024, 0, 20)];
+
+  describe("Props", () => {
+    it("should render with default props", () => {
+      wrapper = mount(TimePicker);
+      expect(wrapper.exists()).toBe(true);
+      expect(wrapper.classes()).toContain("datepicker");
+    });
+
+    it("should render with custom position", () => {
+      wrapper = mount(TimePicker, {
+        props: {
+          position: "top",
+          type: "inline", // Make popup visible
+        },
+      });
+      expect(wrapper.find(".datepicker-popup").classes()).toContain("top");
+    });
+
+    it("should render with custom type", () => {
+      wrapper = mount(TimePicker, {
+        props: {
+          type: "inline",
+        },
+      });
+      expect(wrapper.find(".datepicker-popup").classes()).toContain("datepicker-inline");
+    });
+
+    it("should render with custom range separator", () => {
+      wrapper = mount(TimePicker, {
+        props: {
+          value: mockDateRange,
+          rangeSeparator: "to",
+        },
+      });
+      expect(wrapper.vm.rangeSeparator).toBe("to");
+    });
+
+    it("should render with clearable prop", async () => {
+      wrapper = mount(TimePicker, {
+        props: {
+          clearable: true,
+          value: mockDate,
+        },
+      });
+      // Wait for the component to fully mount and update
+      await nextTick();
+
+      // The class is only applied when there's text and not disabled
+      expect(wrapper.vm.text).toBeTruthy();
+      // The class should be applied since we have clearable=true, text exists, and not disabled
+      expect(wrapper.classes()).toContain("datepicker__clearable");
+    });
+
+    it("should render with disabled prop", () => {
+      wrapper = mount(TimePicker, {
+        props: {
+          disabled: true,
+        },
+      });
+      expect(wrapper.find("input").attributes("disabled")).toBeDefined();
+    });
+
+    it("should render with custom placeholder", () => {
+      wrapper = mount(TimePicker, {
+        props: {
+          placeholder: "Select date",
+        },
+      });
+      expect(wrapper.find("input").attributes("placeholder")).toBe("Select date");
+    });
+
+    it("should render with custom format", () => {
+      wrapper = mount(TimePicker, {
+        props: {
+          format: "YYYY-MM-DD HH:mm:ss",
+        },
+      });
+      expect(wrapper.vm.format).toBe("YYYY-MM-DD HH:mm:ss");
+    });
+
+    it("should render with showButtons prop", () => {
+      wrapper = mount(TimePicker, {
+        props: {
+          showButtons: true,
+          type: "inline", // Make popup visible
+        },
+      });
+      expect(wrapper.find(".datepicker__buttons").exists()).toBe(true);
+    });
+
+    it("should render with maxRange array", () => {
+      wrapper = mount(TimePicker, {
+        props: {
+          maxRange: [new Date(2024, 0, 1), new Date(2024, 0, 31)],
+        },
+      });
+      expect(wrapper.vm.maxRange).toHaveLength(2);
+    });
+  });
+
+  describe("Computed Properties", () => {
+    it("should calculate range correctly for single date", () => {
+      wrapper = mount(TimePicker, {
+        props: {
+          value: mockDate,
+        },
+      });
+      expect(wrapper.vm.range).toBe(false);
+    });
+
+    it("should calculate range correctly for date range", () => {
+      wrapper = mount(TimePicker, {
+        props: {
+          value: mockDateRange,
+        },
+      });
+      expect(wrapper.vm.range).toBe(true);
+    });
+
+    it("should format text correctly for single date", () => {
+      wrapper = mount(TimePicker, {
+        props: {
+          value: mockDate,
+        },
+      });
+      expect(wrapper.vm.text).toBe("2024-01-15");
+    });
+
+    it("should format text correctly for date range", () => {
+      wrapper = mount(TimePicker, {
+        props: {
+          value: mockDateRange,
+        },
+      });
+      expect(wrapper.vm.text).toBe("2024-01-10 ~ 2024-01-20");
+    });
+
+    it("should format text with custom range separator", () => {
+      wrapper = mount(TimePicker, {
+        props: {
+          value: mockDateRange,
+          rangeSeparator: "to",
+        },
+      });
+      expect(wrapper.vm.text).toBe("2024-01-10 to 2024-01-20");
+    });
+
+    it("should return empty text for empty value", () => {
+      wrapper = mount(TimePicker, {
+        props: {
+          value: [],
+        },
+      });
+      expect(wrapper.vm.text).toBe("");
+    });
+
+    it("should get correct value for single date", () => {
+      wrapper = mount(TimePicker, {
+        props: {
+          value: mockDate,
+        },
+      });
+      const result = wrapper.vm.get();
+      expect(result).toEqual(wrapper.vm.dates[0]);
+    });
+
+    it("should get correct value for date range", () => {
+      wrapper = mount(TimePicker, {
+        props: {
+          value: mockDateRange,
+        },
+      });
+      const result = wrapper.vm.get();
+      expect(result).toEqual(wrapper.vm.dates);
+    });
+  });
+
+  describe("Methods", () => {
+    it("should handle clear action", () => {
+      wrapper = mount(TimePicker, {
+        props: {
+          value: mockDate,
+        },
+      });
+      wrapper.vm.cls();
+      expect(wrapper.emitted("clear")).toBeTruthy();
+    });
+
+    it("should handle clear action for range", () => {
+      wrapper = mount(TimePicker, {
+        props: {
+          value: mockDateRange,
+        },
+      });
+      wrapper.vm.cls();
+      expect(wrapper.emitted("clear")).toBeTruthy();
+      expect(wrapper.emitted("input")?.[0]).toEqual([[]]);
+    });
+
+    it("should validate input correctly for array", () => {
+      wrapper = mount(TimePicker);
+      const result = wrapper.vm.vi([mockDate, mockDate]);
+      expect(result).toHaveLength(2);
+    });
+
+    it("should validate input correctly for single date", () => {
+      wrapper = mount(TimePicker);
+      const result = wrapper.vm.vi(mockDate);
+      expect(result).toHaveLength(1);
+    });
+
+    it("should validate input correctly for empty value", () => {
+      wrapper = mount(TimePicker);
+      const result = wrapper.vm.vi(null);
+      expect(result).toHaveLength(1);
+    });
+
+    it("should handle ok event", () => {
+      wrapper = mount(TimePicker);
+      wrapper.vm.ok(false);
+      expect(wrapper.emitted("input")).toBeTruthy();
+    });
+
+    it("should handle ok event with leaveOpened", () => {
+      wrapper = mount(TimePicker);
+      wrapper.vm.ok(true);
+      expect(wrapper.emitted("input")).toBeTruthy();
+    });
+
+    it("should handle setDates for right position", () => {
+      wrapper = mount(TimePicker, {
+        props: {
+          value: mockDateRange,
+        },
+      });
+      const newDate = new Date(2024, 0, 25);
+      wrapper.vm.setDates(newDate, "right");
+      expect(wrapper.vm.dates[1]).toEqual(newDate);
+    });
+
+    it("should handle setDates for left position", () => {
+      wrapper = mount(TimePicker, {
+        props: {
+          value: mockDateRange,
+        },
+      });
+      const newDate = new Date(2024, 0, 5);
+      wrapper.vm.setDates(newDate, "left");
+      expect(wrapper.vm.dates[0]).toEqual(newDate);
+    });
+
+    it("should handle document click", () => {
+      wrapper = mount(TimePicker);
+      const mockEvent = {
+        target: document.createElement("div"),
+      } as unknown as MouseEvent;
+      wrapper.vm.datepicker = {
+        contains: vi.fn(() => true),
+      };
+      wrapper.vm.dc(mockEvent);
+      expect(wrapper.vm.show).toBe(true);
+    });
+
+    it("should handle document click outside", () => {
+      wrapper = mount(TimePicker);
+      const mockEvent = {
+        target: document.createElement("div"),
+      } as unknown as MouseEvent;
+      wrapper.vm.datepicker = {
+        contains: vi.fn(() => false),
+      };
+      wrapper.vm.dc(mockEvent);
+      expect(wrapper.vm.show).toBe(false);
+    });
+
+    it("should handle document click when disabled", () => {
+      wrapper = mount(TimePicker, {
+        props: {
+          disabled: true,
+        },
+      });
+      const mockEvent = {
+        target: document.createElement("div"),
+      } as unknown as MouseEvent;
+      wrapper.vm.datepicker = {
+        contains: vi.fn(() => true),
+      };
+      wrapper.vm.dc(mockEvent);
+      expect(wrapper.vm.show).toBe(false);
+    });
+  });
+
+  describe("Quick Pick Functionality", () => {
+    beforeEach(() => {
+      wrapper = mount(TimePicker, {
+        props: {
+          maxRange: [new Date(2024, 0, 1), new Date(2024, 0, 31)],
+        },
+      });
+    });
+
+    it("should have QUICK_PICK_TYPES constant defined", () => {
+      expect(wrapper.vm.QUICK_PICK_TYPES).toBeDefined();
+      expect(wrapper.vm.QUICK_PICK_TYPES.QUARTER).toBe("quarter");
+      expect(wrapper.vm.QUICK_PICK_TYPES.HALF).toBe("half");
+      expect(wrapper.vm.QUICK_PICK_TYPES.HOUR).toBe("hour");
+      expect(wrapper.vm.QUICK_PICK_TYPES.DAY).toBe("day");
+      expect(wrapper.vm.QUICK_PICK_TYPES.WEEK).toBe("week");
+      expect(wrapper.vm.QUICK_PICK_TYPES.MONTH).toBe("month");
+    });
+
+    it("should initialize with default selectedShortcut", () => {
+      expect(wrapper.vm.selectedShortcut).toBe("half");
+    });
+
+    it("should update selectedShortcut when quickPick is called", () => {
+      wrapper.vm.quickPick("quarter");
+      expect(wrapper.vm.selectedShortcut).toBe("quarter");
+
+      wrapper.vm.quickPick("day");
+      expect(wrapper.vm.selectedShortcut).toBe("day");
+    });
+
+    it("should handle quarter hour quick pick", () => {
+      wrapper.vm.quickPick("quarter");
+
+      expect(wrapper.vm.selectedShortcut).toBe("quarter");
+      expect(wrapper.vm.dates).toHaveLength(2);
+      expect(wrapper.vm.dates[0].getTime()).toBeLessThan(wrapper.vm.dates[1].getTime());
+    });
+
+    it("should handle half hour quick pick", () => {
+      wrapper.vm.quickPick("half");
+
+      expect(wrapper.vm.selectedShortcut).toBe("half");
+      expect(wrapper.vm.dates).toHaveLength(2);
+      expect(wrapper.vm.dates[0].getTime()).toBeLessThan(wrapper.vm.dates[1].getTime());
+    });
+
+    it("should handle hour quick pick", () => {
+      wrapper.vm.quickPick("hour");
+
+      expect(wrapper.vm.selectedShortcut).toBe("hour");
+      expect(wrapper.vm.dates).toHaveLength(2);
+      expect(wrapper.vm.dates[0].getTime()).toBeLessThan(wrapper.vm.dates[1].getTime());
+    });
+
+    it("should handle day quick pick", () => {
+      wrapper.vm.quickPick("day");
+
+      expect(wrapper.vm.selectedShortcut).toBe("day");
+      expect(wrapper.vm.dates).toHaveLength(2);
+      expect(wrapper.vm.dates[0].getTime()).toBeLessThan(wrapper.vm.dates[1].getTime());
+    });
+
+    it("should handle week quick pick", () => {
+      wrapper.vm.quickPick("week");
+
+      expect(wrapper.vm.selectedShortcut).toBe("week");
+      expect(wrapper.vm.dates).toHaveLength(2);
+      expect(wrapper.vm.dates[0].getTime()).toBeLessThan(wrapper.vm.dates[1].getTime());
+    });
+
+    it("should handle month quick pick", () => {
+      wrapper.vm.quickPick("month");
+
+      expect(wrapper.vm.selectedShortcut).toBe("month");
+      expect(wrapper.vm.dates).toHaveLength(2);
+      expect(wrapper.vm.dates[0].getTime()).toBeLessThan(wrapper.vm.dates[1].getTime());
+    });
+
+    it("should handle unknown quick pick type", () => {
+      wrapper.vm.quickPick("unknown" as any);
+
+      expect(wrapper.vm.selectedShortcut).toBe("unknown");
+      expect(wrapper.vm.dates).toHaveLength(2);
+      expect(wrapper.vm.dates[0]).toBeInstanceOf(Date);
+      expect(wrapper.vm.dates[1]).toBeInstanceOf(Date);
+    });
+
+    it("should apply selected style to active shortcut button", async () => {
+      wrapper = mount(TimePicker, {
+        props: {
+          value: mockDateRange,
+          type: "inline",
+          maxRange: [new Date(2024, 0, 1), new Date(2024, 0, 31)],
+        },
+      });
+
+      // Force range mode by setting dates directly and wait for reactivity
+      wrapper.vm.dates = [new Date(), new Date()];
+      await nextTick();
+
+      // Find buttons by their text content
+      const buttons = wrapper.findAll(".datepicker-popup__shortcut");
+      const halfButton = buttons.find((btn: any) => btn.text().includes("Half Hour"));
+      const quarterButton = buttons.find((btn: any) => btn.text().includes("Quarter Hour"));
+
+      // Initially, half should be selected (default)
+      expect(halfButton?.classes()).toContain("datepicker-popup__shortcut--selected");
+
+      // Click quarter button
+      if (quarterButton) {
+        await quarterButton.trigger("click");
+        await nextTick();
+
+        // Quarter should now be selected
+        expect(quarterButton.classes()).toContain("datepicker-popup__shortcut--selected");
+        expect(halfButton?.classes()).not.toContain("datepicker-popup__shortcut--selected");
+      }
+    });
+  });
+
+  describe("Button Actions", () => {
+    beforeEach(() => {
+      wrapper = mount(TimePicker, {
+        props: {
+          showButtons: true,
+        },
+      });
+    });
+
+    it("should handle submit action", () => {
+      wrapper.vm.dates = [mockDate];
+      wrapper.vm.submit();
+
+      expect(wrapper.emitted("confirm")).toBeTruthy();
+      expect(wrapper.vm.show).toBe(false);
+    });
+
+    it("should handle cancel action", () => {
+      wrapper.vm.dates = [mockDate];
+      wrapper.vm.cancel();
+
+      expect(wrapper.emitted("cancel")).toBeTruthy();
+      expect(wrapper.vm.show).toBe(false);
+    });
+  });
+
+  describe("Template Rendering", () => {
+    it("should render input field", () => {
+      wrapper = mount(TimePicker);
+      expect(wrapper.find("input").exists()).toBe(true);
+    });
+
+    it("should render input with custom class", () => {
+      wrapper = mount(TimePicker, {
+        props: {
+          inputClass: "custom-input",
+        },
+      });
+      expect(wrapper.find("input").classes()).toContain("custom-input");
+    });
+
+    it("should render input with placeholder", () => {
+      wrapper = mount(TimePicker, {
+        props: {
+          placeholder: "Select date",
+        },
+      });
+      expect(wrapper.find("input").attributes("placeholder")).toBe("Select date");
+    });
+
+    it("should render disabled input", () => {
+      wrapper = mount(TimePicker, {
+        props: {
+          disabled: true,
+        },
+      });
+      expect(wrapper.find("input").attributes("disabled")).toBeDefined();
+    });
+
+    it("should render clear button when clearable and has value", () => {
+      wrapper = mount(TimePicker, {
+        props: {
+          clearable: true,
+          value: mockDate,
+        },
+      });
+      expect(wrapper.find(".datepicker-close").exists()).toBe(true);
+    });
+
+    it("should not render clear button when not clearable", () => {
+      wrapper = mount(TimePicker, {
+        props: {
+          clearable: false,
+        },
+      });
+      // The clear button is always rendered but only visible on hover when clearable
+      expect(wrapper.find(".datepicker-close").exists()).toBe(true);
+    });
+
+    it("should render popup with correct position class", () => {
+      wrapper = mount(TimePicker, {
+        props: {
+          position: "bottom",
+          type: "inline", // Make popup visible
+        },
+      });
+      expect(wrapper.find(".datepicker-popup").classes()).toContain("bottom");
+    });
+
+    it("should render inline popup", () => {
+      wrapper = mount(TimePicker, {
+        props: {
+          type: "inline",
+        },
+      });
+      expect(wrapper.find(".datepicker-popup").classes()).toContain("datepicker-inline");
+    });
+
+    it("should render sidebar for range mode", async () => {
+      wrapper = mount(TimePicker, {
+        props: {
+          value: mockDateRange,
+          type: "inline",
+        },
+      });
+      // Force range mode by setting dates directly and wait for reactivity
+      wrapper.vm.dates = [new Date(), new Date()];
+      await nextTick();
+      expect(wrapper.vm.range).toBe(true);
+      expect(wrapper.find(".datepicker-popup__sidebar").exists()).toBe(true);
+    });
+
+    it("should render quick pick buttons", async () => {
+      wrapper = mount(TimePicker, {
+        props: {
+          value: mockDateRange,
+          type: "inline",
+        },
+      });
+      // Force range mode by setting dates directly and wait for reactivity
+      wrapper.vm.dates = [new Date(), new Date()];
+      await nextTick();
+      const buttons = wrapper.findAll(".datepicker-popup__shortcut");
+      expect(buttons).toHaveLength(6); // quarter, half, hour, day, week, month
+    });
+
+    it("should render DateCalendar components", () => {
+      wrapper = mount(TimePicker, {
+        props: {
+          type: "inline",
+        },
+      });
+      expect(wrapper.findComponent({ name: "DateCalendar" }).exists()).toBe(true);
+    });
+
+    it("should render two DateCalendar components for range", () => {
+      wrapper = mount(TimePicker, {
+        props: {
+          value: mockDateRange,
+          type: "inline",
+        },
+      });
+      const calendars = wrapper.findAllComponents({ name: "DateCalendar" });
+      expect(calendars).toHaveLength(1);
+    });
+
+    it("should render buttons when showButtons is true", () => {
+      wrapper = mount(TimePicker, {
+        props: {
+          showButtons: true,
+          type: "inline",
+        },
+      });
+      expect(wrapper.find(".datepicker__buttons").exists()).toBe(true);
+    });
+
+    it("should not render buttons when showButtons is false", () => {
+      wrapper = mount(TimePicker, {
+        props: {
+          showButtons: false,
+          type: "inline",
+        },
+      });
+      expect(wrapper.find(".datepicker__buttons").exists()).toBe(false);
+    });
+  });
+
+  describe("Event Handling", () => {
+    it("should emit clear event when clear button is clicked", async () => {
+      wrapper = mount(TimePicker, {
+        props: {
+          clearable: true,
+          value: mockDate,
+        },
+      });
+      await wrapper.find(".datepicker-close").trigger("click");
+      expect(wrapper.emitted("clear")).toBeTruthy();
+    });
+
+    it("should handle DateCalendar ok event", () => {
+      wrapper = mount(TimePicker, {
+        props: {
+          type: "inline",
+        },
+      });
+      const calendar = wrapper.findComponent({ name: "DateCalendar" });
+      calendar.vm.$emit("ok", true);
+      expect(wrapper.emitted("input")).toBeTruthy();
+    });
+
+    it("should handle DateCalendar setDates event", () => {
+      wrapper = mount(TimePicker, {
+        props: {
+          type: "inline",
+        },
+      });
+      const calendar = wrapper.findComponent({ name: "DateCalendar" });
+      calendar.vm.$emit("setDates", mockDate, "left");
+      expect(wrapper.vm.dates[0]).toEqual(mockDate);
+    });
+
+    it("should handle submit button click", async () => {
+      wrapper = mount(TimePicker, {
+        props: {
+          showButtons: true,
+          type: "inline",
+        },
+      });
+      await wrapper.find(".datepicker__button-select").trigger("click");
+      expect(wrapper.emitted("confirm")).toBeTruthy();
+    });
+
+    it("should handle cancel button click", async () => {
+      wrapper = mount(TimePicker, {
+        props: {
+          showButtons: true,
+          type: "inline",
+        },
+      });
+      await wrapper.find(".datepicker__button-cancel").trigger("click");
+      expect(wrapper.emitted("cancel")).toBeTruthy();
+    });
+
+    it("should handle quick pick button clicks", async () => {
+      wrapper = mount(TimePicker, {
+        props: {
+          value: mockDateRange,
+          type: "inline",
+          maxRange: [new Date(2024, 0, 1), new Date(2024, 0, 31)],
+        },
+      });
+
+      // Force range mode by setting dates directly
+      wrapper.vm.dates = [new Date(), new Date()];
+      await nextTick();
+
+      // Find and click a quick pick button
+      const buttons = wrapper.findAll(".datepicker-popup__shortcut");
+      const quarterButton = buttons.find((btn: any) => btn.text().includes("Quarter Hour"));
+
+      if (quarterButton) {
+        await quarterButton.trigger("click");
+        await nextTick();
+        expect(wrapper.vm.selectedShortcut).toBe("quarter");
+      } else {
+        // If not in range mode, test the quickPick method directly
+        wrapper.vm.quickPick("quarter");
+        expect(wrapper.vm.selectedShortcut).toBe("quarter");
+      }
+    });
+  });
+
+  describe("Lifecycle", () => {
+    it("should add document event listener on mount", () => {
+      const addEventListenerSpy = vi.spyOn(document, "addEventListener");
+      wrapper = mount(TimePicker);
+      expect(addEventListenerSpy).toHaveBeenCalledWith("click", expect.any(Function), true);
+      addEventListenerSpy.mockRestore();
+    });
+
+    it("should remove document event listener on unmount", () => {
+      const removeEventListenerSpy = vi.spyOn(document, "removeEventListener");
+      wrapper = mount(TimePicker);
+      wrapper.unmount();
+      expect(removeEventListenerSpy).toHaveBeenCalledWith("click", expect.any(Function), true);
+      removeEventListenerSpy.mockRestore();
+    });
+
+    it("should initialize dates from props value", () => {
+      wrapper = mount(TimePicker, {
+        props: {
+          value: mockDate,
+        },
+      });
+      expect(wrapper.vm.dates).toHaveLength(1);
+      expect(wrapper.vm.inputDates).toHaveLength(1);
+    });
+
+    it("should initialize dates from array value", () => {
+      wrapper = mount(TimePicker, {
+        props: {
+          value: mockDateRange,
+        },
+      });
+      expect(wrapper.vm.dates).toHaveLength(2);
+      expect(wrapper.vm.inputDates).toHaveLength(2);
+    });
+
+    it("should watch for value prop changes", async () => {
+      wrapper = mount(TimePicker, {
+        props: {
+          value: mockDate,
+        },
+      });
+
+      await wrapper.setProps({ value: mockDateRange });
+      expect(wrapper.vm.dates).toHaveLength(2);
+    });
+  });
+
+  describe("Edge Cases", () => {
+    it("should handle null value", () => {
+      wrapper = mount(TimePicker as any, {
+        props: {
+          value: null,
+        },
+      });
+      expect(wrapper.vm.dates).toHaveLength(1);
+    });
+
+    it("should handle undefined value", () => {
+      wrapper = mount(TimePicker, {
+        props: {
+          value: undefined,
+        },
+      });
+      expect(wrapper.vm.dates).toHaveLength(1);
+    });
+
+    it("should handle empty array value", () => {
+      wrapper = mount(TimePicker, {
+        props: {
+          value: [],
+        },
+      });
+      expect(wrapper.vm.dates).toHaveLength(2);
+    });
+
+    it("should handle single item array", () => {
+      wrapper = mount(TimePicker, {
+        props: {
+          value: [mockDate],
+        },
+      });
+      expect(wrapper.vm.dates).toHaveLength(1);
+    });
+
+    it("should handle string value", () => {
+      wrapper = mount(TimePicker, {
+        props: {
+          value: "2024-01-15",
+        },
+      });
+      expect(wrapper.vm.dates).toHaveLength(1);
+    });
+
+    it("should handle invalid date string", () => {
+      wrapper = mount(TimePicker, {
+        props: {
+          value: "invalid-date",
+        },
+      });
+      expect(wrapper.vm.dates).toHaveLength(1);
+      expect(wrapper.vm.dates[0]).toBeInstanceOf(Date);
+    });
+  });
+
+  describe("Accessibility", () => {
+    it("should have proper tabindex on popup", () => {
+      wrapper = mount(TimePicker, {
+        props: {
+          type: "inline",
+        },
+      });
+
+      const popup = wrapper.find(".datepicker-popup");
+      expect(popup.attributes("tabindex")).toBe("-1");
+    });
+
+    it("should have proper button types", () => {
+      wrapper = mount(TimePicker, {
+        props: {
+          showButtons: true,
+          type: "inline",
+        },
+      });
+
+      const submitButton = wrapper.find(".datepicker__button-select");
+      const cancelButton = wrapper.find(".datepicker__button-cancel");
+
+      expect(submitButton.element.tagName).toBe("BUTTON");
+      expect(cancelButton.element.tagName).toBe("BUTTON");
+    });
+
+    it("should have proper button types for quick pick", () => {
+      wrapper = mount(TimePicker, {
+        props: {
+          value: mockDateRange,
+          type: "inline",
+        },
+      });
+
+      const quickPickButtons = wrapper.findAll(".datepicker-popup__shortcut");
+      quickPickButtons.forEach((button: any) => {
+        expect(button.attributes("type")).toBe("button");
+      });
+    });
+  });
+
+  describe("Internationalization", () => {
+    it("should use i18n translations", () => {
+      wrapper = mount(TimePicker);
+
+      expect(wrapper.vm.local.cancelTip).toBe("Cancel");
+      expect(wrapper.vm.local.submitTip).toBe("Confirm");
+      expect(wrapper.vm.local.quarterHourCutTip).toBe("Quarter Hour");
+      expect(wrapper.vm.local.halfHourCutTip).toBe("Half Hour");
+      expect(wrapper.vm.local.hourCutTip).toBe("Hour");
+      expect(wrapper.vm.local.dayCutTip).toBe("Day");
+      expect(wrapper.vm.local.weekCutTip).toBe("Week");
+      expect(wrapper.vm.local.monthCutTip).toBe("Month");
+    });
+
+    it("should handle month names correctly", () => {
+      wrapper = mount(TimePicker);
+
+      expect(wrapper.vm.local.monthsHead).toHaveLength(12);
+      expect(wrapper.vm.local.months).toHaveLength(12);
+      expect(wrapper.vm.local.weeks).toHaveLength(7);
+    });
+  });
+});

src/components/index.ts

@@ -18,12 +18,13 @@ import type { App } from "vue";
 import Icon from "./Icon.vue";
 import TimePicker from "./TimePicker.vue";
 import Selector from "./Selector.vue";
-import Graph from "./Graph.vue";
+import Graph from "./Graph/Graph.vue";
 import Radio from "./Radio.vue";
 import SelectSingle from "./SelectSingle.vue";
+import Tags from "./Tags.vue";
 import VueGridLayout from "vue-grid-layout";
 
-const components: { [key: string]: any } = {
+const components: Indexable = {
   Icon,
   TimePicker,
   VueGridLayout,
@@ -31,6 +32,7 @@ const components: { [key: string]: any } = {
   Graph,
   Radio,
   SelectSingle,
+  Tags,
 };
 const componentsName: string[] = Object.keys(components);
 

src/constants/data.ts

@@ -26,3 +26,8 @@ export const Languages = [
   { label: "Chinese", value: "zh" },
   { label: "Spanish", value: "es" },
 ];
+
+export enum Themes {
+  Dark = "dark",
+  Light = "light",
+}

src/graphql/base.ts

@@ -0,0 +1,78 @@
+/*
+ * Licensed to 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. Apache Software Foundation (ASF) licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+const Timeout = 2 * 60 * 1000;
+export let globalAbortController = new AbortController();
+export function abortRequestsAndUpdate() {
+  globalAbortController.abort(`Request timeout ${Timeout}ms`);
+  globalAbortController = new AbortController();
+}
+class HTTPError extends Error {
+  response;
+
+  constructor(response: Response, detailText = "") {
+    super(detailText || response.statusText);
+
+    this.name = "HTTPError";
+    this.response = response;
+  }
+}
+
+export const BasePath = `/graphql`;
+
+export async function httpQuery({
+  url = "",
+  method = "GET",
+  json,
+  headers = {},
+}: {
+  method: string;
+  json: unknown;
+  headers?: Recordable;
+  url: string;
+}) {
+  const timeoutId = setTimeout(() => {
+    abortRequestsAndUpdate();
+  }, Timeout);
+
+  const response: Response = await fetch(url, {
+    method,
+    headers: {
+      "Content-Type": "application/json",
+      accept: "application/json",
+      ...headers,
+    },
+    body: JSON.stringify(json),
+    signal: globalAbortController.signal,
+  })
+    .catch((error) => {
+      throw new HTTPError(error);
+    })
+    .finally(() => {
+      clearTimeout(timeoutId);
+    });
+  if (response.ok) {
+    return response.json();
+  } else {
+    console.error(new HTTPError(response));
+    return {
+      errors: [new HTTPError(response)],
+    };
+  }
+}

src/graphql/custom-query.ts

@@ -0,0 +1,31 @@
+/**
+ * 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 { httpQuery, BasePath } from "./base";
+
+async function customQuery(param: { queryStr: string; conditions: { [key: string]: unknown } }) {
+  const response = await httpQuery({
+    url: BasePath,
+    method: "post",
+    json: { query: param.queryStr, variables: { ...param.conditions } },
+  });
+  if (response.errors) {
+    response.errors = response.errors.map((e: { message: string }) => e.message).join(" ");
+  }
+  return response;
+}
+
+export default customQuery;

src/graphql/fragments/alarm.ts

@@ -24,6 +24,7 @@ export const Alarm = {
         message
         startTime
         scope
+        name
         tags {
           key
           value
@@ -43,6 +44,46 @@ export const Alarm = {
           startTime
           endTime
         }
+        snapshot {
+          expression
+          metrics {
+            name
+            results {
+              metric {
+                labels {
+                  key
+                  value
+                }
+              }
+              values {
+                id
+                owner {
+                  scope
+                  serviceID
+                  serviceName
+                  normal
+                  serviceInstanceID
+                  serviceInstanceName
+                  endpointID
+                  endpointName
+                }
+                value
+                traceID
+              }
+            }
+          }
+        }
       }
     }`,
 };
+export const AlarmTagKeys = {
+  variable: "$duration: Duration!",
+  query: `
+  tagKeys: queryAlarmTagAutocompleteKeys(duration: $duration)`,
+};
+
+export const AlarmTagValues = {
+  variable: "$tagKey: String!, $duration: Duration!",
+  query: `
+  tagValues: queryAlarmTagAutocompleteValues(tagKey: $tagKey, duration: $duration)`,
+};

src/graphql/fragments/app.ts

@@ -26,3 +26,51 @@ export const OAPTimeInfo = {
 export const OAPVersion = {
   query: `version { version }`,
 };
+
+export const MenuItems = {
+  query: `
+    getMenuItems {
+        title
+        icon
+        layer
+        activate
+        description
+        documentLink
+        i18nKey
+        subItems {
+          title
+          icon
+          layer
+          activate
+          description
+          documentLink
+          i18nKey
+        }
+      }
+    `,
+};
+
+export const RecordsTTL = {
+  query: `getRecordsTTL {
+    normal
+    trace
+    zipkinTrace
+    log
+    browserErrorLog
+    coldNormal
+    coldTrace
+    coldZipkinTrace
+    coldLog
+    coldBrowserErrorLog
+  }`,
+};
+export const MetricsTTL = {
+  query: `getMetricsTTL {
+    minute
+    hour
+    day
+    coldMinute
+    coldHour
+    coldDay
+  }`,
+};

src/graphql/fragments/async-profile.ts

@@ -0,0 +1,80 @@
+/**
+ * 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.
+ */
+
+export const GetAsyncTaskList = {
+  variable: "$request: AsyncProfilerTaskListRequest!",
+  query: `
+  asyncTaskList: queryAsyncProfilerTaskList(request: $request) {
+    errorReason
+    tasks {
+      id
+      serviceId
+      serviceInstanceIds
+      createTime
+      events
+      duration
+      execArgs
+    }
+  }
+  `,
+};
+
+export const GetAsyncProfileTaskProcess = {
+  variable: "$taskId: String!",
+  query: `
+  taskProgress: queryAsyncProfilerTaskProgress(taskId: $taskId) {
+    logs {
+      id
+      instanceId
+      instanceName
+      operationType
+      operationTime
+    }
+    errorInstanceIds
+    successInstanceIds
+  }
+  `,
+};
+
+export const CreateAsyncProfileTask = {
+  variable: "$asyncProfilerTaskCreationRequest: AsyncProfilerTaskCreationRequest!",
+  query: `
+  task: createAsyncProfilerTask(asyncProfilerTaskCreationRequest: $asyncProfilerTaskCreationRequest) {
+    id
+    errorReason
+    code
+  }
+  `,
+};
+
+export const GetAsyncProfileAnalyze = {
+  variable: "$request: AsyncProfilerAnalyzationRequest!",
+  query: `
+  analysisResult: queryAsyncProfilerAnalyze(request: $request) {
+    tree {
+      type
+      elements {
+        id
+        parentId
+        symbol: codeSignature
+        dumpCount: total
+        self
+      }
+    }
+  }
+  `,
+};

src/graphql/fragments/dashboard.ts

@@ -14,22 +14,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export const TypeOfMetrics = {
-  variable: "$name: String!",
-  query: `typeOfMetrics(name: $name)`,
-};
-
-export const listMetrics = {
-  variable: "$regex: String",
-  query: `
-  metrics: listMetrics(regex: $regex) {
-    value: name
-    label: name
-    type
-    catalog
-  }
-  `,
-};
 
 export const getAllTemplates = {
   query: `

src/graphql/fragments/ebpf.ts

@@ -33,20 +33,37 @@ export const createEBPFTask = {
   }`,
 };
 export const queryEBPFTasks = {
-  variable: "$serviceId: ID, $serviceInstanceId: ID, $targets: [EBPFProfilingTargetType!]",
+  variable:
+    "$serviceId: ID, $serviceInstanceId: ID, $targets: [EBPFProfilingTargetType!], $triggerType: EBPFProfilingTriggerType",
   query: `
-  queryEBPFTasks: queryEBPFProfilingTasks(serviceId: $serviceId, serviceInstanceId: $serviceInstanceId, targets: $targets) {
+  queryEBPFTasks: queryEBPFProfilingTasks(serviceId: $serviceId, serviceInstanceId: $serviceInstanceId, targets: $targets, triggerType: $triggerType) {
     taskId
     serviceName
     serviceId
     serviceInstanceId
     serviceInstanceName
     processLabels
+    processName
+    processId
     taskStartTime
     triggerType
     fixedTriggerDuration
     targetType
     createTime
+    continuousProfilingCauses {
+      type
+      singleValue {
+        threshold
+        current
+      }
+      uri {
+        uriRegex
+        uriPath
+        threshold
+        current
+      }
+      message
+    }
   }`,
 };
 export const queryEBPFSchedules = {
@@ -111,3 +128,26 @@ export const keepNetworkProfiling = {
     errorReason
   }`,
 };
+
+export const monitoringInstances = {
+  variable: "$serviceId: ID!, $target: ContinuousProfilingTargetType!",
+  query: `
+  instances: queryContinuousProfilingMonitoringInstances(serviceId: $serviceId, target: $target) {
+    id
+    name
+    attributes {
+      name
+      value
+    }
+    triggeredCount
+    lastTriggerTimestamp
+    processes {
+      id
+      name
+      detectType
+      labels
+      lastTriggerTimestamp
+      triggeredCount
+    }
+  }`,
+};

src/graphql/fragments/profile.ts

@@ -15,37 +15,6 @@
  * limitations under the License.
  */
 
-export const ProfileSegment = {
-  variable: "$segmentId: String",
-  query: `
-  segment: getProfiledSegment(segmentId: $segmentId) {
-    spans {
-      spanId
-      parentSpanId
-      serviceCode
-      startTime
-      endTime
-      endpointName
-      type
-      peer
-      component
-      isError
-      layer
-      tags {
-        key value
-      }
-      logs {
-        time
-        data {
-          key
-          value
-        }
-      }
-    }
-  }
-  `,
-};
-
 export const CreateProfileTask = {
   variable: "$creationRequest: ProfileTaskCreationRequest",
   query: `
@@ -79,23 +48,55 @@ export const GetProfileTaskList = {
   `,
 };
 export const GetProfileTaskSegmentList = {
-  variable: "$taskID: String",
+  variable: "$taskID: ID!",
   query: `
-  segmentList: getProfileTaskSegmentList(taskID: $taskID) {
-    segmentId
+  segmentList: getProfileTaskSegments(taskID: $taskID) {
+    traceId
+    instanceId
+    instanceName
     endpointNames
-    start
     duration
-    traceIds
-    isError
+    start
+    spans {
+      spanId
+      parentSpanId
+      segmentId
+      refs {
+        traceId
+        parentSegmentId
+        parentSpanId
+        type
+      }
+      serviceCode
+      serviceInstanceName
+      startTime
+      endTime
+      endpointName
+      type
+      peer
+      component
+      isError
+      layer
+      tags {
+        key value
+      }
+      logs {
+        time
+        data {
+          key
+          value
+        }
+      }
+      profiled
+    }
   }
   `,
 };
 
 export const GetProfileAnalyze = {
-  variable: "$segmentId: String!, $timeRanges: [ProfileAnalyzeTimeRange!]!",
+  variable: "$queries: [SegmentProfileAnalyzeQuery!]!",
   query: `
-  analyze: getProfileAnalyze(segmentId: $segmentId, timeRanges: $timeRanges) {
+  analyze: getSegmentsProfileAnalyze(queries: $queries) {
     tip
     trees {
       elements {
@@ -122,3 +123,29 @@ export const GetProfileTaskLogs = {
   }
   `,
 };
+export const GetStrategyList = {
+  variable: "$serviceId: ID!",
+  query: `
+  strategyList: queryContinuousProfilingServiceTargets(serviceId: $serviceId) {
+    type
+    checkItems {
+      type
+      threshold
+      period
+      count
+      uriList
+      uriRegex
+    }
+  }
+  `,
+};
+
+export const EditStrategy = {
+  variable: "$request: ContinuousProfilingPolicyCreation!",
+  query: `
+  strategy: setContinuousProfilingPolicy(request: $request) {
+    errorReason
+    status
+  }
+  `,
+};

src/graphql/fragments/selector.ts

@@ -24,6 +24,7 @@ export const Services = {
     group
     layers
     normal
+    shortName
   }
   `,
 };
@@ -72,9 +73,9 @@ export const Processes = {
 };
 
 export const Endpoints = {
-  variable: "$serviceId: ID!, $keyword: String!",
+  variable: "$serviceId: ID!, $keyword: String!, $duration: Duration, $limit: Int!",
   query: `
-  pods: findEndpoint(serviceId: $serviceId, keyword: $keyword, limit: 20) {
+  pods: findEndpoint(serviceId: $serviceId, keyword: $keyword, limit: $limit, duration: $duration) {
     id
     value: name
      label: name

src/graphql/fragments/topology.ts

@@ -23,6 +23,7 @@ export const ServicesTopology = {
       name
       type
       isReal
+      layers
     }
     calls {
       id
@@ -99,3 +100,56 @@ export const ProcessTopology = {
   }
 `,
 };
+export const HierarchyServiceTopology = {
+  variable: "$serviceId: ID!, $layer: String!",
+  query: `
+  hierarchyServiceTopology: getServiceHierarchy(serviceId: $serviceId, layer: $layer) {
+    relations {
+      upperService {
+        id
+        name
+        layer
+        normal
+      }
+      lowerService {
+        id
+        name
+        layer
+        normal
+      }
+    }
+  }`,
+};
+export const HierarchyInstanceTopology = {
+  variable: "$instanceId: ID!, $layer: String!",
+  query: `
+  hierarchyInstanceTopology: getInstanceHierarchy(instanceId: $instanceId, layer: $layer) {
+    relations {
+      upperInstance {
+        id
+        name
+        layer
+        normal
+        serviceName
+        serviceId
+      }
+      lowerInstance {
+        id
+        name
+        layer
+        normal
+        serviceName
+        serviceId
+      }
+    }
+  }`,
+};
+
+export const ListLayerLevels = {
+  query: `
+  levels: listLayerLevels {
+    layer
+    level
+  }
+  `,
+};

src/graphql/fragments/trace.ts

@@ -103,3 +103,133 @@ export const TraceTagValues = {
   query: `
   tagValues: queryTraceTagAutocompleteValues(tagKey: $tagKey, duration: $duration)`,
 };
+
+export const TraceSpansFromColdStage = {
+  variable: "$traceId: ID!, $duration: Duration!, $debug: Boolean",
+  query: `
+  trace: queryTrace(traceId: $traceId, duration: $duration, debug: $debug) {
+    spans {
+      traceId
+      segmentId
+      spanId
+      parentSpanId
+      refs {
+        traceId
+        parentSegmentId
+        parentSpanId
+        type
+      }
+      serviceCode
+      serviceInstanceName
+      startTime
+      endTime
+      endpointName
+      type
+      peer
+      component
+      isError
+      layer
+      tags {
+        key
+        value
+      }
+      logs {
+        time
+        data {
+          key
+          value
+        }
+      }
+      attachedEvents {
+        startTime {
+          seconds
+          nanos
+        }
+        event
+        endTime {
+          seconds
+          nanos
+        }
+        tags {
+          key
+          value
+        }
+        summary {
+          key
+          value
+        }
+      }
+    }
+  }
+  `,
+};
+export const HasQueryTracesV2Support = {
+  query: `
+    hasQueryTracesV2Support
+  `,
+};
+
+export const QueryV2Traces = {
+  variable: "$condition: TraceQueryCondition",
+  query: `
+    queryTraces(condition: $condition) {
+      traces {
+        spans {
+          traceId
+          segmentId
+          spanId
+          parentSpanId
+          refs {
+            traceId
+            parentSegmentId
+            parentSpanId
+            type
+          }
+          serviceCode
+          serviceInstanceName
+          startTime
+          endTime
+          endpointName
+          type
+          peer
+          component
+          isError
+          layer
+          tags {
+            key
+            value
+          }
+          logs {
+            time
+            data {
+              key
+              value
+            }
+          }
+          attachedEvents {
+            startTime {
+              seconds
+              nanos
+            }
+            event
+            endTime {
+              seconds
+              nanos
+            }
+            tags {
+              key
+              value
+            }
+            summary {
+              key
+              value
+            }
+          }
+        }
+      }
+      retrievedTimeRange {
+        startTime
+        endTime
+      }
+    }`,
+};

src/graphql/http/index.ts

@@ -0,0 +1,64 @@
+/**
+ * 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 { httpQuery } from "../base";
+import { HttpURL } from "./url";
+
+export default async function fetchQuery({
+  method,
+  json,
+  path,
+}: {
+  method: string;
+  json?: Record<string, unknown>;
+  path: string;
+}) {
+  const upperMethod = method.toUpperCase();
+  let url = (HttpURL as Record<string, string>)[path];
+  let body: unknown | undefined = json;
+
+  if (upperMethod === "GET" && json && typeof json === "object") {
+    const params = new URLSearchParams();
+    const stringifyValue = (val: unknown): string => {
+      if (val instanceof Date) return val.toISOString();
+      if (typeof val === "object") return JSON.stringify(val);
+      return String(val);
+    };
+    for (const [key, value] of Object.entries(json)) {
+      if (value === undefined || value === null) continue;
+      if (Array.isArray(value)) {
+        for (const v of value as unknown[]) params.append(key, stringifyValue(v));
+        continue;
+      }
+      params.append(key, stringifyValue(value));
+    }
+    const queryString = params.toString();
+    if (queryString) {
+      url += (url.includes("?") ? "&" : "?") + queryString;
+    }
+    body = undefined;
+  }
+
+  const response = await httpQuery({
+    method: upperMethod,
+    json: body,
+    url,
+  });
+  if (response.errors) {
+    response.errors = response.errors.map((e: { message: string }) => e.message).join(" ");
+  }
+  return response;
+}

src/graphql/http/url.ts

@@ -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.
+ */
+const PREFIX = process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test" ? "/api" : "";
+export const HttpURL = {
+  ClusterNodes: `${PREFIX}/status/cluster/nodes`,
+  ConfigTTL: `${PREFIX}/status/config/ttl`,
+  DebuggingConfigDump: `${PREFIX}/debugging/config/dump`,
+};

src/graphql/index.ts

@@ -14,9 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import type { AxiosPromise, AxiosResponse } from "axios";
-import axios from "axios";
-import { cancelToken } from "@/utils/cancelToken";
+import { httpQuery, BasePath } from "./base";
 import * as app from "./query/app";
 import * as selector from "./query/selector";
 import * as dashboard from "./query/dashboard";
@@ -28,6 +26,7 @@ import * as alarm from "./query/alarm";
 import * as event from "./query/event";
 import * as ebpf from "./query/ebpf";
 import * as demandLog from "./query/demand-log";
+import * as asyncProfile from "./query/async-profile";
 
 const query: { [key: string]: string } = {
   ...app,
@@ -41,32 +40,27 @@ const query: { [key: string]: string } = {
   ...event,
   ...ebpf,
   ...demandLog,
+  ...asyncProfile,
 };
 class Graphql {
-  private queryData = "";
-  public query(queryData: string) {
-    this.queryData = queryData;
+  queryData = "";
+  query(data: string) {
+    this.queryData = data;
     return this;
   }
-  public params(variablesData: unknown): AxiosPromise<void> {
-    return axios
-      .post(
-        "/graphql",
-        {
-          query: query[this.queryData],
-          variables: variablesData,
-        },
-        { cancelToken: cancelToken() },
-      )
-      .then((res: AxiosResponse) => {
-        if (res.data.errors) {
-          res.data.errors = res.data.errors.map((e: { message: string }) => e.message).join(" ");
-        }
-        return res;
-      })
-      .catch((err: Error) => {
-        throw err;
-      });
+  async params(variables: unknown) {
+    const response = await httpQuery({
+      url: BasePath,
+      method: "post",
+      json: {
+        query: query[this.queryData],
+        variables,
+      },
+    });
+    if (response.errors) {
+      response.errors = response.errors.map((e: { message: string }) => e.message).join(" ");
+    }
+    return response;
   }
 }