refactor: change router components (#349)

New columns of the Log View
1. Timestamp + Raw log(content) as column one, 70% of the initial table width. No separate timestamp column. The first column should be timestamp - content
2. Level tag(key=level)'s value. This could be missed from tags, if so, keep the column empty.
3. Trace link. If trace ID exists, generate a link to trace. Don't need to put the relative trace ID in the text.
4. Still keep details pop-up style.

.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: [16.x, 18.x, 20.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

@@ -37,11 +37,11 @@ npm run dev
 The default UI address is `http://localhost:8080`.
 
 # 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

@@ -44,6 +44,7 @@ module.exports = {
         "workflow",
         "types",
         "release",
+        "merge",
       ],
     ],
   },

package.json

@@ -14,15 +14,16 @@
     "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"
   },
   "dependencies": {
-    "axios": "^0.24.0",
+    "axios": "^1.6.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",
+    "element-plus": "^2.2.5",
     "lodash": "^4.17.21",
     "monaco-editor": "^0.34.1",
     "pinia": "^2.0.28",
@@ -34,8 +35,8 @@
     "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",
@@ -51,29 +52,29 @@
     "@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",
+    "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",
+    "stylelint-config-prettier": "9.0.4",
+    "stylelint-config-standard": "^33.0.0",
+    "stylelint-order": "^6.0.3",
     "typescript": "~4.7.4",
     "unplugin-auto-import": "^0.7.0",
     "unplugin-vue-components": "^0.19.2",
-    "vite": "^4.0.0",
+    "vite": "^4.0.5",
     "vite-plugin-monaco-editor": "^1.1.0",
     "vite-plugin-svg-icons": "^2.0.1",
     "vitest": "^0.25.6",

src/App.vue

@@ -27,10 +27,11 @@ limitations under the License. -->
     }
   }, 500);
 </script>
-<style>
+<style lang="scss">
   #app {
-    color: #2c3e50;
+    color: $font-color;
     height: 100%;
     overflow: hidden;
+    background-color: $layout-background;
   }
 </style>

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/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/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/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/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/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/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/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/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/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,7 +162,7 @@ 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({
@@ -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(),
@@ -390,7 +390,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,11 +443,11 @@ limitations under the License. -->
   });
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
   .calendar {
     float: left;
     user-select: none;
-    color: #3d444f;
+    color: $font-color;
   }
 
   .calendar + .calendar {
@@ -479,7 +479,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 +524,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 +539,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 {
@@ -591,7 +591,7 @@ limitations under the License. -->
     width: 100%;
     height: 100%;
     position: absolute;
-    background: #fff;
+    background: $theme-background;
     left: 0;
     top: 0;
   }
@@ -626,7 +626,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.vue

@@ -54,7 +54,7 @@ limitations under the License. -->
   import Trace from "@/views/dashboard/related/trace/Index.vue";
   import associateProcessor from "@/hooks/useAssociateProcessor";
 
-  /*global Nullable, defineProps, defineEmits*/
+  /*global Nullable, defineProps, defineEmits, Indexable*/
   const emits = defineEmits(["select"]);
   const { t } = useI18n();
   const chartRef = ref<Nullable<HTMLDivElement>>(null);
@@ -70,7 +70,7 @@ limitations under the License. -->
     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: {
@@ -232,7 +232,7 @@ 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;
@@ -252,11 +252,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 +266,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/SelectSingle.vue

@@ -76,7 +76,7 @@ limitations under the License. -->
   function handleClick() {
     visible.value = false;
   }
-  function setPopper(event: any) {
+  function setPopper(event: MouseEvent) {
     event.stopPropagation();
     visible.value = !visible.value;
   }
@@ -86,17 +86,17 @@ limitations under the License. -->
     position: relative;
     justify-content: space-between;
     border: 1px solid #ddd;
-    background: #fff;
+    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;
+      color: $active-color;
       background-color: #fafafa;
       border: 1px solid #e8e8e8;
       text-align: center;
@@ -112,7 +112,7 @@ limitations under the License. -->
     width: 100%;
     padding: 2px 10px;
     overflow: auto;
-    color: #606266;
+    color: var(--sw-setting-color);
     position: relative;
 
     &:hover {
@@ -126,19 +126,19 @@ 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);
+    background-color: $theme-background;
+    box-shadow: 0 1px 6px rgb(99 99 99 / 20%);
     border: 1px solid #ddd;
     width: 100%;
     border-radius: 0 0 3px 3px;
@@ -164,7 +164,7 @@ limitations under the License. -->
     padding: 7px 15px;
 
     &.select-disabled {
-      color: #409eff;
+      color: $active-color;
       cursor: not-allowed;
     }
 

src/components/Selector.vue

@@ -27,7 +27,13 @@ limitations under the License. -->
     :remote-method="remoteMethod"
     :filterable="filterable"
   >
-    <el-option v-for="item in options" :key="item.value || ''" :label="item.label || ''" :value="item.value || ''">
+    <el-option
+      v-for="item in options"
+      :key="item.value || ''"
+      :label="item.label || ''"
+      :value="item.value || ''"
+      :disabled="item.disabled || false"
+    >
     </el-option>
   </el-select>
 </template>
@@ -40,7 +46,7 @@ limitations under the License. -->
   //   value: string | number;
   // }
 
-  /*global  defineProps, defineEmits*/
+  /*global  defineProps, defineEmits, Indexable*/
   const emit = defineEmits(["change", "query"]);
   const props = defineProps({
     options: {
@@ -71,7 +77,7 @@ limitations under the License. -->
 
   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,87 @@
+<!-- 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 } 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);
+  };
+</script>
+<style lang="scss" scoped>
+  .input-name {
+    width: 300px;
+  }
+
+  .vertical {
+    display: block;
+    margin-bottom: 5px;
+  }
+
+  .horizontal {
+    display: inline-block;
+    margin-right: 5px;
+  }
+</style>

src/components/TimePicker.vue

@@ -112,7 +112,7 @@ limitations under the License. -->
   import { useI18n } from "vue-i18n";
   import DateCalendar from "./DateCalendar.vue";
   import { useTimeoutFn } from "@/hooks/useTimeout";
-  /*global defineProps, defineEmits */
+  /*global defineProps, defineEmits*/
   const datepicker = ref(null);
   const { t } = useI18n();
   const show = ref<boolean>(false);
@@ -241,7 +241,7 @@ 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) => {
@@ -302,7 +302,7 @@ limitations under the License. -->
       transform: scaleY(0.8);
     }
 
-    to {
+    100% {
       opacity: 1;
       transform: scaleY(1);
     }
@@ -314,7 +314,7 @@ limitations under the License. -->
       transform: scaleY(1);
     }
 
-    to {
+    100% {
       opacity: 0;
       transform: scaleY(0.8);
     }
@@ -343,7 +343,7 @@ limitations under the License. -->
     cursor: pointer;
   }
 
-  .datepicker-close:before {
+  .datepicker-close::before {
     display: block;
     content: "";
     position: absolute;
@@ -354,14 +354,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 +369,7 @@ limitations under the License. -->
     display: block;
   }
 
-  .datepicker-close:hover:before {
+  .datepicker-close:hover::before {
     background-color: #afafaf;
   }
 
@@ -385,7 +385,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 +399,6 @@ limitations under the License. -->
     cursor: not-allowed;
     background-color: #ebebe4;
     border-color: #e5e5e5;
-    -webkit-box-shadow: none;
     box-shadow: none;
   }
 
@@ -409,9 +408,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;
@@ -457,7 +456,7 @@ limitations under the License. -->
       border: 0;
       background-color: transparent;
       line-height: 34px;
-      font-size: 12px;
+      font-size: $font-size-smaller;
       color: #666;
       text-align: left;
       outline: none;
@@ -497,7 +496,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;
@@ -525,7 +524,7 @@ limitations under the License. -->
     cursor: pointer;
     margin: 10px 0 0 5px;
     padding: 5px 15px;
-    color: #ffffff;
+    color: $text-color;
   }
 
   .datepicker__buttons .datepicker__button-select {

src/components/index.ts

@@ -21,9 +21,10 @@ import Selector from "./Selector.vue";
 import Graph from "./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/fragments/app.ts

@@ -26,3 +26,26 @@ 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
+        }
+      }
+    `,
+};

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
   }
   `,
 };

src/graphql/query/app.ts

@@ -14,8 +14,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { OAPTimeInfo, OAPVersion } from "../fragments/app";
+import { OAPTimeInfo, OAPVersion, MenuItems } from "../fragments/app";
 
 export const queryOAPTimeInfo = `query queryOAPTimeInfo {${OAPTimeInfo.query}}`;
 
 export const queryOAPVersion = `query ${OAPVersion.query}`;
+
+export const queryMenuItems = `query menuItems {${MenuItems.query}}`;

src/graphql/query/ebpf.ts

@@ -23,6 +23,7 @@ import {
   analysisEBPFResult,
   createNetworkProfiling,
   keepNetworkProfiling,
+  monitoringInstances,
 } from "../fragments/ebpf";
 
 export const getCreateTaskData = `query queryCreateTaskData(${queryCreateTaskData.variable}) {${queryCreateTaskData.query}}`;
@@ -38,3 +39,5 @@ export const getEBPFResult = `query analysisEBPFResult(${analysisEBPFResult.vari
 export const newNetworkProfiling = `mutation createNetworkProfiling(${createNetworkProfiling.variable}) {${createNetworkProfiling.query}}`;
 
 export const aliveNetworkProfiling = `mutation keepNetworkProfiling(${keepNetworkProfiling.variable}) {${keepNetworkProfiling.query}}`;
+
+export const getMonitoringInstances = `query continuousProfilingMonitoringInstances(${monitoringInstances.variable}) {${monitoringInstances.query}}`;

src/graphql/query/profile.ts

@@ -16,16 +16,15 @@
  */
 
 import {
-  ProfileSegment,
   CreateProfileTask,
   GetProfileTaskList,
   GetProfileTaskSegmentList,
   GetProfileAnalyze,
   GetProfileTaskLogs,
+  GetStrategyList,
+  EditStrategy,
 } from "../fragments/profile";
 
-export const queryProfileSegment = `query queryProfileSegment(${ProfileSegment.variable}) {${ProfileSegment.query}}`;
-
 export const saveProfileTask = `mutation createProfileTask(${CreateProfileTask.variable}) {${CreateProfileTask.query}}`;
 
 export const getProfileTaskList = `query getProfileTaskList(${GetProfileTaskList.variable}) {
@@ -37,3 +36,7 @@ export const getProfileTaskSegmentList = `query getProfileTaskSegmentList(${GetP
 export const getProfileAnalyze = `query getProfileAnalyze(${GetProfileAnalyze.variable}) {${GetProfileAnalyze.query}}`;
 
 export const getProfileTaskLogs = `query profileTaskLogs(${GetProfileTaskLogs.variable}) {${GetProfileTaskLogs.query}}`;
+
+export const getStrategyList = `query getStrategyList(${GetStrategyList.variable}) {${GetStrategyList.query}}`;
+
+export const editStrategy = `mutation editStrategy(${EditStrategy.variable}) {${EditStrategy.query}}`;

src/hooks/data.ts

@@ -22,6 +22,7 @@ export enum MetricQueryTypes {
   READHEATMAP = "readHeatMap",
   ReadSampledRecords = "readSampledRecords",
   ReadRecords = "readRecords",
+  ReadNullableMetricsValue = "readNullableMetricsValue",
 }
 
 export enum Calculations {
@@ -38,8 +39,6 @@ export enum Calculations {
   ApdexAvg = "apdexAvg",
   SecondToDay = "secondToDay",
   NanosecondToMillisecond = "nanosecondToMillisecond",
-  CPM5D = "cpm5d",
-  CPM5DAvg = "cpm5dAvg",
 }
 export enum sizeEnum {
   XS = "XS",
@@ -68,14 +67,18 @@ screenMap.set(sizeEnum.LG, screenEnum.LG);
 screenMap.set(sizeEnum.XL, screenEnum.XL);
 screenMap.set(sizeEnum.XXL, screenEnum.XXL);
 
-export const RespFields: { [key: string]: string } = {
+export const RespFields: Indexable = {
   readMetricsValues: `{
     label
     values {
-      values {value}
+      values {value isEmptyValue}
     }
   }`,
-  readMetricsValue: "",
+  readMetricsValue: ``,
+  readNullableMetricsValue: `{
+    value
+    isEmptyValue
+  }`,
   sortMetrics: `{
     name
     id
@@ -85,7 +88,7 @@ export const RespFields: { [key: string]: string } = {
   readLabeledMetricsValues: `{
     label
     values {
-      values {value}
+      values {value isEmptyValue}
     }
   }`,
   readHeatMap: `{
@@ -109,4 +112,61 @@ export const RespFields: { [key: string]: string } = {
     value
     refId
   }`,
+  execExpression: `{
+    type
+    results {
+      metric {
+        labels {
+          key
+          value
+        }
+      }
+      values {
+        name: id
+        value
+        refId: traceID
+      }
+    }
+    error
+  }`,
 };
+
+export const DarkChartColors = [
+  "#79bbff",
+  "#a0a7e6",
+  "#30A4EB",
+  "#45BFC0",
+  "#ebbf93",
+  "#884dde",
+  "#1bbf93",
+  "#7289ab",
+  "#f56c6c",
+  "#81feb7",
+  "#4094fa",
+  "#ff894d",
+  "#884dde",
+  "#ebbf93",
+  "#fedc6d",
+  "#da7cfa",
+  "#b88230",
+  "#a0cfff",
+];
+
+export const LightChartColors = [
+  "#3f96e3",
+  "#a0a7e6",
+  "#45BFC0",
+  "#FFCC55",
+  "#FF6A84",
+  "#c23531",
+  "#2f4554",
+  "#61a0a8",
+  "#d48265",
+  "#91c7ae",
+  "#749f83",
+  "#ca8622",
+  "#bda29a",
+  "#6e7074",
+  "#546570",
+  "#c4ccd3",
+];

src/hooks/useAssociateProcessor.ts

@@ -19,7 +19,7 @@ import dateFormatStep from "@/utils/dateFormat";
 import getLocalTime from "@/utils/localtime";
 import type { EventParams } from "@/types/app";
 
-export default function associateProcessor(props: any) {
+export default function associateProcessor(props: Indexable) {
   function eventAssociate() {
     if (!props.filters) {
       return;
@@ -85,7 +85,7 @@ export default function associateProcessor(props: any) {
     const queryOrder = relatedTrace.queryOrder;
     const latency = relatedTrace.latency;
     const series = props.option.series || [];
-    const item: any = {
+    const item: Indexable = {
       duration,
       queryOrder,
       status,

src/hooks/useBreakpoint.ts

@@ -32,7 +32,7 @@ export interface CreateCallbackParams {
   sizeEnum: typeof sizeEnum;
 }
 
-export function useBreakpoint(): any {
+export function useBreakpoint(): Indexable {
   return {
     screenRef: computed(() => unref(globalScreenRef)),
     widthRef: globalWidthRef,
@@ -41,7 +41,7 @@ export function useBreakpoint(): any {
   };
 }
 
-export function createBreakpointListen(fn?: (opt: CreateCallbackParams) => void): any {
+export function createBreakpointListen(fn?: (opt: CreateCallbackParams) => void): Indexable {
   const screenRef = ref<sizeEnum>(sizeEnum.XL || "");
   const realWidthRef = ref(window.innerWidth);
 

src/hooks/useDashboardsSession.ts

@@ -59,7 +59,7 @@ export default function getDashboard(param?: { name: string; layer: string; enti
     if (targetTabIndex[1] === undefined) {
       container = document.querySelector(".ds-main");
     } else {
-      const w = widgets.find((d: any) => d.id === targetTabIndex[0]);
+      const w = widgets.find((d: Indexable) => d.id === targetTabIndex[0]);
       container = document.querySelector(".tab-layout");
       const layout: Nullable<Element> = document.querySelector(".ds-main");
       if (w && layout) {

src/hooks/useEcharts.ts

@@ -30,6 +30,8 @@ import { useDebounceFn } from "@vueuse/core";
 import { useEventListener } from "./useEventListener";
 import { useBreakpoint } from "./useBreakpoint";
 import echarts from "@/utils/echarts";
+import { useAppStoreWithOut } from "@/store/modules/app";
+import { Themes } from "@/constants/data";
 
 export type ECOption = echarts.ComposeOption<
   | BarSeriesOption
@@ -43,9 +45,10 @@ export type ECOption = echarts.ComposeOption<
   | SankeySeriesOption
 >;
 
-export function useECharts(elRef: Ref<HTMLDivElement>, theme: "light" | "dark" | "default" = "default"): any {
+export function useECharts(elRef: Ref<HTMLDivElement>, theme: "light" | "dark" | "default" = "default"): Indexable {
+  const appStore = useAppStoreWithOut();
   const getDarkMode = computed(() => {
-    return theme === "default" ? "light" : theme;
+    return appStore.theme === "default" ? Themes.Light : theme;
   });
   let chartInstance: Nullable<echarts.ECharts> = null;
   let resizeFn: Fn = resize;
@@ -55,7 +58,7 @@ export function useECharts(elRef: Ref<HTMLDivElement>, theme: "light" | "dark" |
   resizeFn = useDebounceFn(resize, 200);
 
   const getOptions = computed(() => {
-    if (getDarkMode.value !== "dark") {
+    if (getDarkMode.value !== Themes.Dark) {
       return cacheOptions.value as ECOption;
     }
     return {

src/hooks/useEventListener.ts

@@ -20,7 +20,7 @@ import { useThrottleFn, useDebounceFn } from "@vueuse/core";
 
 export type RemoveEventFn = () => void;
 export interface UseEventParams {
-  el?: Element | Ref<Element | undefined> | Window | any;
+  el?: Element | Ref<Element | undefined> | Window | Recordable;
   name: string;
   listener: EventListener;
   options?: boolean | AddEventListenerOptions;

src/hooks/useExpressionsProcessor.ts

@@ -0,0 +1,403 @@
+/**
+ * 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 { RespFields } from "./data";
+import { EntityType, ExpressionResultType } from "@/views/dashboard/data";
+import { ElMessage } from "element-plus";
+import { useDashboardStore } from "@/store/modules/dashboard";
+import { useSelectorStore } from "@/store/modules/selectors";
+import { useAppStoreWithOut } from "@/store/modules/app";
+import type { MetricConfigOpt } from "@/types/dashboard";
+import type { Instance, Endpoint, Service } from "@/types/selector";
+import type { Node, Call } from "@/types/topology";
+
+export async function useExpressionsQueryProcessor(config: Indexable) {
+  function expressionsGraphqlPods() {
+    if (!(config.metrics && config.metrics[0])) {
+      return;
+    }
+    const appStore = useAppStoreWithOut();
+    const dashboardStore = useDashboardStore();
+    const selectorStore = useSelectorStore();
+
+    if (!selectorStore.currentService && dashboardStore.entity !== "All") {
+      return;
+    }
+    const conditions: Recordable = {
+      duration: appStore.durationTime,
+    };
+    const variables: string[] = [`$duration: Duration!`];
+    const isRelation = ["ServiceRelation", "ServiceInstanceRelation", "EndpointRelation", "ProcessRelation"].includes(
+      dashboardStore.entity,
+    );
+    if (isRelation && !selectorStore.currentDestService) {
+      return;
+    }
+    const fragment = config.metrics.map((name: string, index: number) => {
+      variables.push(`$expression${index}: String!`, `$entity${index}: Entity!`);
+      conditions[`expression${index}`] = name;
+      const entity = {
+        serviceName: dashboardStore.entity === "All" ? undefined : selectorStore.currentService.value,
+        normal: dashboardStore.entity === "All" ? undefined : selectorStore.currentService.normal,
+        serviceInstanceName: ["ServiceInstance", "ServiceInstanceRelation", "ProcessRelation", "Process"].includes(
+          dashboardStore.entity,
+        )
+          ? selectorStore.currentPod && selectorStore.currentPod.value
+          : undefined,
+        endpointName: dashboardStore.entity.includes("Endpoint")
+          ? selectorStore.currentPod && selectorStore.currentPod.value
+          : undefined,
+        processName: dashboardStore.entity.includes("Process")
+          ? selectorStore.currentProcess && selectorStore.currentProcess.value
+          : undefined,
+        destNormal: isRelation ? selectorStore.currentDestService.normal : undefined,
+        destServiceName: isRelation ? selectorStore.currentDestService.value : undefined,
+        destServiceInstanceName: ["ServiceInstanceRelation", "ProcessRelation"].includes(dashboardStore.entity)
+          ? selectorStore.currentDestPod && selectorStore.currentDestPod.value
+          : undefined,
+        destEndpointName:
+          dashboardStore.entity === "EndpointRelation"
+            ? selectorStore.currentDestPod && selectorStore.currentDestPod.value
+            : undefined,
+        destProcessName: dashboardStore.entity.includes("ProcessRelation")
+          ? selectorStore.currentDestProcess && selectorStore.currentDestProcess.value
+          : undefined,
+      };
+      conditions[`entity${index}`] = entity;
+
+      return `expression${index}: execExpression(expression: $expression${index}, entity: $entity${index}, duration: $duration)${RespFields.execExpression}`;
+    });
+    const queryStr = `query queryData(${variables}) {${fragment}}`;
+
+    return {
+      queryStr,
+      conditions,
+    };
+  }
+
+  function expressionsSource(resp: { errors: string; data: Indexable }) {
+    if (resp.errors) {
+      ElMessage.error(resp.errors);
+      return { source: {}, tips: [], typesOfMQE: [] };
+    }
+    if (!resp.data) {
+      ElMessage.error("The query is wrong");
+      return { source: {}, tips: [], typesOfMQE: [] };
+    }
+    const tips: string[] = [];
+    const source: { [key: string]: unknown } = {};
+    const keys = Object.keys(resp.data);
+    const typesOfMQE: string[] = [];
+
+    for (let i = 0; i < config.metrics.length; i++) {
+      const c: MetricConfigOpt = (config.metricConfig && config.metricConfig[i]) || {};
+      const obj = resp.data[keys[i]] || {};
+      const results = obj.results || [];
+      const name = config.metrics[i];
+      const type = obj.type;
+
+      tips.push(obj.error);
+      typesOfMQE.push(type);
+      if (!obj.error) {
+        if (type === ExpressionResultType.TIME_SERIES_VALUES) {
+          if (results.length === 1) {
+            const label = results[0].metric && results[0].metric.labels[0] && results[0].metric.labels[0].value;
+            source[c.label || label || name] = results[0].values.map((d: { value: unknown }) => d.value) || [];
+          } else {
+            const labels = (c.label || "").split(",").map((item: string) => item.replace(/^\s*|\s*$/g, ""));
+            for (const item of results) {
+              const values = item.values.map((d: { value: unknown }) => d.value) || [];
+              const index = item.metric.labels[0].value;
+              const indexNum = labels.findIndex((_, i: number) => i === Number(index));
+              if (labels[indexNum] && indexNum > -1) {
+                source[labels[indexNum]] = values;
+              } else {
+                source[index] = values;
+              }
+            }
+          }
+        }
+        if (type === ExpressionResultType.SINGLE_VALUE) {
+          source[c.label || name] = (results[0].values[0] || {}).value;
+        }
+        if (([ExpressionResultType.RECORD_LIST, ExpressionResultType.SORTED_LIST] as string[]).includes(type)) {
+          source[name] = results[0].values;
+        }
+      }
+    }
+
+    return { source, tips, typesOfMQE };
+  }
+  const params = await expressionsGraphqlPods();
+  if (!params) {
+    return { source: {}, tips: [], typesOfMQE: [] };
+  }
+
+  const dashboardStore = useDashboardStore();
+  const json = await dashboardStore.fetchMetricValue(params);
+  if (json.errors) {
+    ElMessage.error(json.errors);
+    return { source: {}, tips: [], typesOfMQE: [] };
+  }
+  const data = expressionsSource(json);
+
+  return data;
+}
+
+export async function useExpressionsQueryPodsMetrics(
+  pods: Array<(Instance | Endpoint | Service) & Indexable>,
+  config: {
+    expressions: string[];
+    subExpressions: string[];
+    metricConfig: MetricConfigOpt[];
+  },
+  scope: string,
+) {
+  function expressionsGraphqlPods() {
+    const metrics: string[] = [];
+    const subMetrics: string[] = [];
+    config.expressions = config.expressions || [];
+    config.subExpressions = config.subExpressions || [];
+
+    for (let i = 0; i < config.expressions.length; i++) {
+      if (config.expressions[i]) {
+        metrics.push(config.expressions[i]);
+        subMetrics.push(config.subExpressions[i]);
+      }
+    }
+    if (!metrics.length) {
+      return;
+    }
+    const appStore = useAppStoreWithOut();
+    const selectorStore = useSelectorStore();
+    const conditions: { [key: string]: unknown } = {
+      duration: appStore.durationTime,
+    };
+    const variables: string[] = [`$duration: Duration!`];
+    const currentService = selectorStore.currentService || {};
+    const fragmentList = pods.map((d: (Instance | Endpoint | Service) & Indexable, index: number) => {
+      const entity = {
+        serviceName: scope === "Service" ? d.label : currentService.label,
+        serviceInstanceName: scope === "ServiceInstance" ? d.label : undefined,
+        endpointName: scope === "Endpoint" ? d.label : undefined,
+        normal: scope === "Service" ? d.normal : currentService.normal,
+      };
+      variables.push(`$entity${index}: Entity!`);
+      conditions[`entity${index}`] = entity;
+      const f = metrics.map((name: string, idx: number) => {
+        variables.push(`$expression${index}${idx}: String!`);
+        conditions[`expression${index}${idx}`] = name;
+        let str = "";
+        if (config.subExpressions[idx]) {
+          variables.push(`$subExpression${index}${idx}: String!`);
+          conditions[`subExpression${index}${idx}`] = config.subExpressions[idx];
+          str = `subexpression${index}${idx}: execExpression(expression: $subExpression${index}${idx}, entity: $entity${index}, duration: $duration)${RespFields.execExpression}`;
+        }
+
+        return (
+          str +
+          `expression${index}${idx}: execExpression(expression: $expression${index}${idx}, entity: $entity${index}, duration: $duration)${RespFields.execExpression}`
+        );
+      });
+      return f;
+    });
+    const fragment = fragmentList.flat(1).join(" ");
+    const queryStr = `query queryData(${variables}) {${fragment}}`;
+
+    return { queryStr, conditions };
+  }
+
+  function expressionsPodsSource(resp: { errors: string; data: Indexable }): Indexable {
+    if (resp.errors) {
+      ElMessage.error(resp.errors);
+      return {};
+    }
+    const names: string[] = [];
+    const subNames: string[] = [];
+    const metricConfigArr: MetricConfigOpt[] = [];
+    const metricTypesArr: string[] = [];
+    const expressionsTips: string[] = [];
+    const subExpressionsTips: string[] = [];
+    const data = pods.map((d: any, idx: number) => {
+      for (let index = 0; index < config.expressions.length; index++) {
+        const c: MetricConfigOpt = (config.metricConfig && config.metricConfig[index]) || {};
+        const k = "expression" + idx + index;
+        const sub = "subexpression" + idx + index;
+        const obj = resp.data[k] || {};
+        const results = obj.results || [];
+        const typesOfMQE = obj.type || "";
+        const subObj = resp.data[sub] || {};
+        const subResults = subObj.results || [];
+
+        expressionsTips.push(obj.error);
+        subExpressionsTips.push(subObj.error);
+        if (results.length > 1) {
+          const labels = (c.label || "").split(",").map((item: string) => item.replace(/^\s*|\s*$/g, ""));
+          const labelsIdx = (c.labelsIndex || "").split(",").map((item: string) => item.replace(/^\s*|\s*$/g, ""));
+          for (let i = 0; i < results.length; i++) {
+            let name = results[i].metric.labels[0].value || "";
+            const subValues = subResults[i] && subResults[i].values.map((d: { value: unknown }) => d.value);
+            const num = labelsIdx.findIndex((d: string) => d === results[i].metric.labels[0].value);
+
+            if (labels[num]) {
+              name = labels[num];
+            }
+            if (!d[name]) {
+              d[name] = {};
+            }
+            if (subValues) {
+              d[name]["values"] = subValues;
+            }
+            d[name]["avg"] = (results[i].values[0] || {}).value;
+
+            const j = names.find((d: string) => d === name);
+
+            if (!j) {
+              names.push(name);
+              metricConfigArr.push({ ...c, index: i });
+              metricTypesArr.push(typesOfMQE);
+            }
+          }
+        } else {
+          if (!results[0]) {
+            return d;
+          }
+          const name = config.expressions[index] || "";
+          const subName = config.subExpressions[index] || "";
+          if (!d[name]) {
+            d[name] = {};
+          }
+          d[name]["avg"] = [(results[0].values[0] || {}).value];
+          if (subResults[0]) {
+            if (!d[subName]) {
+              d[subName] = {};
+            }
+            d[subName]["values"] = subResults[0].values.map((d: { value: number }) => d.value);
+          }
+          const j = names.find((d: string) => d === name);
+          if (!j) {
+            names.push(name);
+            subNames.push(subName);
+            metricConfigArr.push(c);
+            metricTypesArr.push(typesOfMQE);
+          }
+        }
+      }
+      return d;
+    });
+
+    return { data, names, subNames, metricConfigArr, metricTypesArr, expressionsTips, subExpressionsTips };
+  }
+  const dashboardStore = useDashboardStore();
+  const params = await expressionsGraphqlPods();
+  const json = await dashboardStore.fetchMetricValue(params);
+
+  if (json.errors) {
+    ElMessage.error(json.errors);
+    return {};
+  }
+  const expressionParams = expressionsPodsSource(json);
+
+  return expressionParams;
+}
+
+export function useQueryTopologyExpressionsProcessor(metrics: string[], instances: (Call | Node)[]) {
+  const appStore = useAppStoreWithOut();
+  const dashboardStore = useDashboardStore();
+
+  function getExpressionQuery() {
+    const conditions: { [key: string]: unknown } = {
+      duration: appStore.durationTime,
+    };
+    const variables: string[] = [`$duration: Duration!`];
+    const fragmentList = instances.map((d: any, index: number) => {
+      let serviceName;
+      let destServiceName;
+      let endpointName;
+      let serviceInstanceName;
+      let destServiceInstanceName;
+      let destEndpointName;
+      if (d.sourceObj && d.targetObj) {
+        // instances = Calls
+        serviceName = d.sourceObj.serviceName || d.sourceObj.name;
+        destServiceName = d.targetObj.serviceName || d.targetObj.name;
+        if (EntityType[4].value === dashboardStore.entity) {
+          serviceInstanceName = d.sourceObj.name;
+          destServiceInstanceName = d.targetObj.name;
+        }
+        if (EntityType[2].value === dashboardStore.entity) {
+          endpointName = d.sourceObj.name;
+          destEndpointName = d.targetObj.name;
+        }
+      } else {
+        // instances = Nodes
+        serviceName = d.serviceName || d.name;
+        if (EntityType[4].value === dashboardStore.entity) {
+          serviceInstanceName = d.name;
+        }
+        if (EntityType[2].value === dashboardStore.entity) {
+          endpointName = d.name;
+        }
+      }
+      const entity = {
+        serviceName,
+        normal: true,
+        serviceInstanceName,
+        endpointName,
+        destServiceName,
+        destNormal: destServiceName ? true : undefined,
+        destServiceInstanceName,
+        destEndpointName,
+      };
+      variables.push(`$entity${index}: Entity!`);
+      conditions[`entity${index}`] = entity;
+      const f = metrics.map((name: string, idx: number) => {
+        if (index === 0) {
+          variables.push(`$expression${idx}: String!`);
+          conditions[`expression${idx}`] = name;
+        }
+        return `expression${index}${idx}: execExpression(expression: $expression${idx}, entity: $entity${index}, duration: $duration)${RespFields.execExpression}`;
+      });
+      return f;
+    });
+    const fragment = fragmentList.flat(1).join(" ");
+    const queryStr = `query queryData(${variables}) {${fragment}}`;
+
+    return { queryStr, conditions };
+  }
+  function handleExpressionValues(resp: { [key: string]: any }) {
+    const obj: any = {};
+    for (let idx = 0; idx < instances.length; idx++) {
+      for (let index = 0; index < metrics.length; index++) {
+        const k = "expression" + idx + index;
+        if (metrics[index]) {
+          if (!obj[metrics[index]]) {
+            obj[metrics[index]] = {
+              values: [],
+            };
+          }
+          obj[metrics[index]].values.push({
+            value: resp[k].results[0] && resp[k].results[0].values[0].value,
+            id: instances[idx].id,
+          });
+        }
+      }
+    }
+    return obj;
+  }
+
+  return { getExpressionQuery, handleExpressionValues };
+}

src/hooks/useLegendProcessor.ts

@@ -16,6 +16,9 @@
  */
 import type { LegendOptions } from "@/types/dashboard";
 import { isDef } from "@/utils/is";
+import { DarkChartColors, LightChartColors } from "./data";
+import { useAppStoreWithOut } from "@/store/modules/app";
+import { Themes } from "@/constants/data";
 
 export default function useLegendProcess(legend?: LegendOptions) {
   let isRight = false;
@@ -39,7 +42,7 @@ export default function useLegendProcess(legend?: LegendOptions) {
   }
   function aggregations(data: { [key: string]: number[] }, intervalTime: string[]) {
     const source: { [key: string]: unknown }[] = [];
-    const keys = Object.keys(data || {}).filter((i: any) => Array.isArray(data[i]) && data[i].length);
+    const keys = Object.keys(data || {}).filter((i: string) => Array.isArray(data[i]) && data[i].length);
     const headers = [];
 
     for (const [key, value] of keys.entries()) {
@@ -96,37 +99,11 @@ export default function useLegendProcess(legend?: LegendOptions) {
 
     return { source, headers };
   }
-  function chartColors(keys: string[]) {
-    let color: string[] = [];
-    switch (keys.length) {
-      case 2:
-        color = ["#FF6A84", "#a0b1e6"];
-        break;
-      case 1:
-        color = ["#3f96e3"];
-        break;
-      default:
-        color = [
-          "#30A4EB",
-          "#45BFC0",
-          "#FFCC55",
-          "#FF6A84",
-          "#a0a7e6",
-          "#c23531",
-          "#2f4554",
-          "#61a0a8",
-          "#d48265",
-          "#91c7ae",
-          "#749f83",
-          "#ca8622",
-          "#bda29a",
-          "#6e7074",
-          "#546570",
-          "#c4ccd3",
-        ];
-        break;
-    }
-    return color;
+  function chartColors() {
+    const appStore = useAppStoreWithOut();
+    const list = appStore.theme === Themes.Dark ? DarkChartColors : LightChartColors;
+
+    return list;
   }
   return { showEchartsLegend, isRight, aggregations, chartColors };
 }

src/hooks/useListConfig.ts

@@ -15,9 +15,17 @@
  * limitations under the License.
  */
 import { MetricQueryTypes, Calculations } from "./data";
-export function useListConfig(config: any, index: string) {
+import { MetricModes } from "@/views/dashboard/data";
+
+export function useListConfig(config: Indexable, index: number) {
+  if (config.metricModes === MetricModes.Expression) {
+    return {
+      isLinear: false,
+      isAvg: true,
+    };
+  }
   const i = Number(index);
-  const types = [Calculations.Average, Calculations.ApdexAvg, Calculations.PercentageAvg, Calculations.CPM5DAvg];
+  const types = [Calculations.Average, Calculations.ApdexAvg, Calculations.PercentageAvg];
   const calculation = config.metricConfig && config.metricConfig[i] && config.metricConfig[i].calculation;
   const isLinear =
     [MetricQueryTypes.ReadMetricsValues, MetricQueryTypes.ReadLabeledMetricsValues].includes(config.metricTypes[i]) &&
@@ -25,6 +33,7 @@ export function useListConfig(config: any, index: string) {
   const isAvg =
     [MetricQueryTypes.ReadMetricsValues, MetricQueryTypes.ReadLabeledMetricsValues].includes(config.metricTypes[i]) &&
     types.includes(calculation);
+
   return {
     isLinear,
     isAvg,

src/hooks/useMetricsProcessor.ts

@@ -22,9 +22,8 @@ import { useSelectorStore } from "@/store/modules/selectors";
 import { useAppStoreWithOut } from "@/store/modules/app";
 import type { Instance, Endpoint, Service } from "@/types/selector";
 import type { MetricConfigOpt } from "@/types/dashboard";
-import { MetricCatalog } from "@/views/dashboard/data";
 
-export function useQueryProcessor(config: any) {
+export function useQueryProcessor(config: Indexable) {
   if (!(config.metrics && config.metrics[0])) {
     return;
   }
@@ -38,7 +37,7 @@ export function useQueryProcessor(config: any) {
   if (!selectorStore.currentService && dashboardStore.entity !== "All") {
     return;
   }
-  const conditions: { [key: string]: unknown } = {
+  const conditions: Recordable = {
     duration: appStore.durationTime,
   };
   const variables: string[] = [`$duration: Duration!`];
@@ -57,13 +56,11 @@ export function useQueryProcessor(config: any) {
         name,
         parentService: ["All"].includes(dashboardStore.entity) ? null : selectorStore.currentService.value,
         normal: selectorStore.currentService ? selectorStore.currentService.normal : true,
-        scope: config.catalog,
-        topN: c.topN || 10,
+        topN: Number(c.topN) || 10,
         order: c.sortOrder || "DES",
       };
     } else {
       const entity = {
-        scope: config.catalog,
         serviceName: dashboardStore.entity === "All" ? undefined : selectorStore.currentService.value,
         normal: dashboardStore.entity === "All" ? undefined : selectorStore.currentService.normal,
         serviceInstanceName: ["ServiceInstance", "ServiceInstanceRelation", "ProcessRelation"].includes(
@@ -95,11 +92,10 @@ export function useQueryProcessor(config: any) {
         conditions[`condition${index}`] = {
           name,
           parentEntity: entity,
-          topN: c.topN || 10,
+          topN: Number(c.topN) || 10,
           order: c.sortOrder || "DES",
         };
       } else {
-        entity.scope = dashboardStore.entity;
         if (metricType === MetricQueryTypes.ReadLabeledMetricsValues) {
           const labels = (c.labelsIndex || "").split(",").map((item: string) => item.replace(/^\s*|\s*$/g, ""));
           variables.push(`$labels${index}: [String!]!`);
@@ -114,9 +110,10 @@ export function useQueryProcessor(config: any) {
     }
     if (metricType === MetricQueryTypes.ReadLabeledMetricsValues) {
       return `${name}${index}: ${metricType}(condition: $condition${index}, labels: $labels${index}, duration: $duration)${RespFields[metricType]}`;
-    } else {
-      return `${name}${index}: ${metricType}(condition: $condition${index}, duration: $duration)${RespFields[metricType]}`;
     }
+    const t = metricType === MetricQueryTypes.ReadMetricsValue ? MetricQueryTypes.ReadNullableMetricsValue : metricType;
+
+    return `${name}${index}: ${t}(condition: $condition${index}, duration: $duration)${RespFields[t]}`;
   });
   const queryStr = `query queryData(${variables}) {${fragment}}`;
 
@@ -126,7 +123,7 @@ export function useQueryProcessor(config: any) {
   };
 }
 export function useSourceProcessor(
-  resp: { errors: string; data: { [key: string]: any } },
+  resp: { errors: string; data: Indexable },
   config: {
     metrics: string[];
     metricTypes: string[];
@@ -156,7 +153,9 @@ export function useSourceProcessor(
       const labels = (c.label || "").split(",").map((item: string) => item.replace(/^\s*|\s*$/g, ""));
       const labelsIdx = (c.labelsIndex || "").split(",").map((item: string) => item.replace(/^\s*|\s*$/g, ""));
       for (const item of resVal) {
-        const values = item.values.values.map((d: { value: number }) => aggregation(Number(d.value), c));
+        const values = item.values.values.map((d: { value: number; isEmptyValue: boolean }) =>
+          d.isEmptyValue ? NaN : aggregation(Number(d.value), c),
+        );
         const indexNum = labelsIdx.findIndex((d: string) => d === item.label);
         if (labels[indexNum] && indexNum > -1) {
           source[labels[indexNum]] = values;
@@ -166,7 +165,8 @@ export function useSourceProcessor(
       }
     }
     if (type === MetricQueryTypes.ReadMetricsValue) {
-      source[m] = aggregation(Number(Object.values(resp.data)[0]), c);
+      const v = Object.values(resp.data)[0] || {};
+      source[m] = v.isEmptyValue ? NaN : aggregation(Number(v.value), c);
     }
     if (
       (
@@ -181,7 +181,7 @@ export function useSourceProcessor(
     }
     if (type === MetricQueryTypes.READHEATMAP) {
       const resVal = Object.values(resp.data)[0] || {};
-      const nodes = [] as any;
+      const nodes = [] as Indexable[];
       if (!(resVal && resVal.values)) {
         source[m] = { nodes: [] };
         return;
@@ -191,7 +191,7 @@ export function useSourceProcessor(
 
         nodes.push(...grids);
       });
-      let buckets = [] as any;
+      let buckets = [] as Indexable[];
       if (resVal.buckets.length) {
         buckets = [resVal.buckets[0].min, ...resVal.buckets.map((item: { min: string; max: string }) => item.max)];
       }
@@ -204,7 +204,7 @@ export function useSourceProcessor(
 }
 
 export function useQueryPodsMetrics(
-  pods: Array<Instance | Endpoint | Service | any>,
+  pods: Array<(Instance | Endpoint | Service) & Indexable>,
   config: {
     metrics: string[];
     metricTypes: string[];
@@ -227,9 +227,8 @@ export function useQueryPodsMetrics(
   };
   const variables: string[] = [`$duration: Duration!`];
   const currentService = selectorStore.currentService || {};
-  const fragmentList = pods.map((d: (Instance | Endpoint | Service) & { normal: boolean }, index: number) => {
+  const fragmentList = pods.map((d: (Instance | Endpoint | Service) & Indexable, index: number) => {
     const param = {
-      scope,
       serviceName: scope === "Service" ? d.label : currentService.label,
       serviceInstanceName: scope === "ServiceInstance" ? d.label : undefined,
       endpointName: scope === "Endpoint" ? d.label : undefined,
@@ -250,7 +249,9 @@ export function useQueryPodsMetrics(
         const labels = (c.labelsIndex || "").split(",").map((item: string) => item.replace(/^\s*|\s*$/g, ""));
         conditions[`labels${index}${idx}`] = labels;
       }
-      return `${name}${index}${idx}: ${metricType}(condition: $condition${index}${idx}, ${labelStr}duration: $duration)${RespFields[metricType]}`;
+      const t =
+        metricType === MetricQueryTypes.ReadMetricsValue ? MetricQueryTypes.ReadNullableMetricsValue : metricType;
+      return `${name}${index}${idx}: ${t}(condition: $condition${index}${idx}, ${labelStr}duration: $duration)${RespFields[t]}`;
     });
     return f;
   });
@@ -262,13 +263,13 @@ export function useQueryPodsMetrics(
 
 export function usePodsSource(
   pods: Array<Instance | Endpoint>,
-  resp: { errors: string; data: { [key: string]: any } },
+  resp: { errors: string; data: Indexable },
   config: {
     metrics: string[];
     metricTypes: string[];
     metricConfig: MetricConfigOpt[];
   },
-): any {
+): Indexable {
   if (resp.errors) {
     ElMessage.error(resp.errors);
     return {};
@@ -276,12 +277,13 @@ export function usePodsSource(
   const names: string[] = [];
   const metricConfigArr: MetricConfigOpt[] = [];
   const metricTypesArr: string[] = [];
-  const data = pods.map((d: Instance | any, idx: number) => {
+  const data = pods.map((d: any, idx: number) => {
     config.metrics.map((name: string, index: number) => {
       const c: any = (config.metricConfig && config.metricConfig[index]) || {};
       const key = name + idx + index;
       if (config.metricTypes[index] === MetricQueryTypes.ReadMetricsValue) {
-        d[name] = aggregation(resp.data[key], c);
+        const v = resp.data[key];
+        d[name] = v.isEmptyValue ? NaN : aggregation(v.value, c);
         if (idx === 0) {
           names.push(name);
           metricConfigArr.push(c);
@@ -290,14 +292,12 @@ export function usePodsSource(
       }
       if (config.metricTypes[index] === MetricQueryTypes.ReadMetricsValues) {
         d[name] = {};
-        if (
-          [Calculations.Average, Calculations.ApdexAvg, Calculations.PercentageAvg, Calculations.CPM5DAvg].includes(
-            c.calculation,
-          )
-        ) {
+        if ([Calculations.Average, Calculations.ApdexAvg, Calculations.PercentageAvg].includes(c.calculation)) {
           d[name]["avg"] = calculateExp(resp.data[key].values.values, c);
         }
-        d[name]["values"] = resp.data[key].values.values.map((val: { value: number }) => aggregation(val.value, c));
+        d[name]["values"] = resp.data[key].values.values.map((val: { value: number; isEmptyValue: boolean }) =>
+          val.isEmptyValue ? NaN : aggregation(val.value, c),
+        );
         if (idx === 0) {
           names.push(name);
           metricConfigArr.push(c);
@@ -310,7 +310,9 @@ export function usePodsSource(
         const labelsIdx = (c.labelsIndex || "").split(",").map((item: string) => item.replace(/^\s*|\s*$/g, ""));
         for (let i = 0; i < resVal.length; i++) {
           const item = resVal[i];
-          const values = item.values.values.map((d: { value: number }) => aggregation(Number(d.value), c));
+          const values = item.values.values.map((d: { value: number; isEmptyValue: boolean }) =>
+            d.isEmptyValue ? NaN : aggregation(Number(d.value), c),
+          );
           const indexNum = labelsIdx.findIndex((d: string) => d === item.label);
           let key = item.label;
           if (labels[indexNum] && indexNum > -1) {
@@ -319,11 +321,7 @@ export function usePodsSource(
           if (!d[key]) {
             d[key] = {};
           }
-          if (
-            [Calculations.Average, Calculations.ApdexAvg, Calculations.PercentageAvg, Calculations.CPM5DAvg].includes(
-              c.calculation,
-            )
-          ) {
+          if ([Calculations.Average, Calculations.ApdexAvg, Calculations.PercentageAvg].includes(c.calculation)) {
             d[key]["avg"] = calculateExp(item.values.values, c);
           }
           d[key]["values"] = values;
@@ -364,8 +362,12 @@ export function useQueryTopologyMetrics(metrics: string[], ids: string[]) {
 
   return { queryStr, conditions };
 }
-function calculateExp(arr: { value: number }[], config: { calculation?: string }): (number | string)[] {
-  const sum = arr.map((d: { value: number }) => d.value).reduce((a, b) => a + b);
+export function calculateExp(
+  list: { value: number; isEmptyValue: boolean }[],
+  config: { calculation?: string },
+): (number | string)[] {
+  const arr = list.filter((d: { value: number; isEmptyValue: boolean }) => !d.isEmptyValue);
+  const sum = arr.length ? arr.map((d: { value: number }) => Number(d.value)).reduce((a, b) => a + b) : 0;
   let data: (number | string)[] = [];
   switch (config.calculation) {
     case Calculations.Average:
@@ -377,15 +379,10 @@ function calculateExp(arr: { value: number }[], config: { calculation?: string }
     case Calculations.ApdexAvg:
       data = [(sum / arr.length / 10000).toFixed(2)];
       break;
-    case Calculations.CPM5DAvg:
-      data = [
-        sum / arr.length / 100000 < 1 && sum / arr.length / 100000 !== 0
-          ? (sum / arr.length / 100000).toFixed(5)
-          : (sum / arr.length / 100000).toFixed(2),
-      ];
-      break;
     default:
-      data = arr.map((d) => aggregation(d.value, config));
+      data = list.map((d: { value: number; isEmptyValue: boolean }) =>
+        d.isEmptyValue ? NaN : aggregation(d.value, config),
+      );
       break;
   }
   return data;
@@ -413,9 +410,6 @@ export function aggregation(val: number, config: { calculation?: string }): numb
     case Calculations.Apdex:
       data = (val / 10000).toFixed(2);
       break;
-    case Calculations.CPM5D:
-      data = val / 100000 < 1 && val / 100000 !== 0 ? (val / 100000).toFixed(5) : (val / 100000).toFixed(2);
-      break;
     case Calculations.ConvertSeconds:
       data = dayjs(val * 1000).format("YYYY-MM-DD HH:mm:ss");
       break;
@@ -434,9 +428,6 @@ export function aggregation(val: number, config: { calculation?: string }): numb
     case Calculations.ApdexAvg:
       data = (val / 10000).toFixed(2);
       break;
-    case Calculations.CPM5DAvg:
-      data = val / 100000 < 1 && val / 100000 !== 0 ? (val / 100000).toFixed(5) : (val / 100000).toFixed(2);
-      break;
     default:
       data;
       break;
@@ -444,26 +435,3 @@ export function aggregation(val: number, config: { calculation?: string }): numb
 
   return data;
 }
-
-export async function useGetMetricEntity(metric: string, metricType: any) {
-  if (!metric || !metricType) {
-    return;
-  }
-  let catalog = "";
-  const dashboardStore = useDashboardStore();
-  if (
-    [MetricQueryTypes.ReadSampledRecords, MetricQueryTypes.SortMetrics, MetricQueryTypes.ReadRecords].includes(
-      metricType,
-    )
-  ) {
-    const res = await dashboardStore.fetchMetricList(metric);
-    if (res.errors) {
-      ElMessage.error(res.errors);
-      return;
-    }
-    const c: string = res.data.metrics[0].catalog;
-    catalog = (MetricCatalog as any)[c];
-  }
-
-  return catalog;
-}

src/hooks/useTimeout.ts

@@ -38,7 +38,7 @@ export function useTimeoutFn(handle: Fn<any>, wait: number, native = false): any
   return { readyRef, stop, start };
 }
 
-export function useTimeoutRef(wait: number): any {
+export function useTimeoutRef(wait: number) {
   const readyRef = ref(false);
 
   let timer: TimeoutHandle;

src/layout/components/AppMain.vue

@@ -24,7 +24,7 @@ limitations under the License. -->
 <style lang="scss" scoped>
   .app-main {
     height: calc(100% - 40px);
-    background: #f7f9fa;
+    background: $layout-background;
     overflow: auto;
   }
 </style>

src/layout/components/NavBar.vue

@@ -14,7 +14,31 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <div class="nav-bar flex-h">
-    <div class="title">{{ route.name === "ViewWidget" ? "" : appStore.pageTitle || t(pageName) }}</div>
+    <el-breadcrumb
+      :separator-icon="ArrowRight"
+      class="title flex-h"
+      v-if="pathNames.length"
+      :style="{ '--el-text-color-placeholder': '#666' }"
+    >
+      <el-breadcrumb-item
+        v-for="(path, index) in pathNames"
+        :key="index"
+        :replace="true"
+        :to="{ path: getName(path).path || '' }"
+      >
+        <el-dropdown size="small" placement="bottom" :persistent="false">
+          <span class="cp name">{{ getName(path).name }}</span>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item @click="setName(p)" v-for="(p, index) in path" :key="index">
+                <span>{{ p.name }}</span>
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+      </el-breadcrumb-item>
+    </el-breadcrumb>
+    <div class="title" v-else>{{ pageTitle }}</div>
     <div class="app-config">
       <span class="red" v-show="timeRange">{{ t("timeTips") }}</span>
       <TimePicker
@@ -24,11 +48,14 @@ limitations under the License. -->
         @input="changeTimeRange"
       />
       <span> UTC{{ appStore.utcHour >= 0 ? "+" : "" }}{{ `${appStore.utcHour}:${appStore.utcMin}` }} </span>
+      <span class="ml-5">
+        <el-switch v-model="theme" :active-icon="Moon" :inactive-icon="Sunny" inline-prompt @change="changeTheme" />
+      </span>
       <span title="refresh" class="ghost ml-5 cp" @click="handleReload">
         <Icon iconName="retry" :loading="appStore.autoRefresh" class="middle" />
       </span>
       <span class="version ml-5 cp">
-        <el-popover trigger="hover" width="250" placement="bottom" effect="light" :content="appStore.version">
+        <el-popover trigger="hover" width="250" placement="bottom" :content="appStore.version">
           <template #reference>
             <span>
               <Icon iconName="info_outline" size="middle" />
@@ -45,19 +72,73 @@ limitations under the License. -->
   import { useI18n } from "vue-i18n";
   import timeFormat from "@/utils/timeFormat";
   import { useAppStoreWithOut } from "@/store/modules/app";
+  import { useDashboardStore } from "@/store/modules/dashboard";
   import { ElMessage } from "element-plus";
+  import { MetricCatalog } from "@/views/dashboard/data";
+  import type { DashboardItem } from "@/types/dashboard";
+  import router from "@/router";
+  import { ArrowRight, Moon, Sunny } from "@element-plus/icons-vue";
+  import { Themes } from "@/constants/data";
 
-  const { t } = useI18n();
+  /*global Indexable */
+  const { t, te } = useI18n();
   const appStore = useAppStoreWithOut();
+  const dashboardStore = useDashboardStore();
   const route = useRoute();
-  const pageName = ref<string>("");
+  const pathNames = ref<{ path?: string; name: string; selected: boolean }[][]>([]);
   const timeRange = ref<number>(0);
+  const pageTitle = ref<string>("");
+  const theme = ref<boolean>(true);
 
+  const savedTheme = window.localStorage.getItem("theme-is-dark");
+  if (savedTheme === "false") {
+    theme.value = false;
+  } else if (savedTheme === "") {
+    // read the theme preference from system setting if there is no user setting
+    theme.value = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
+  }
+
+  changeTheme();
   resetDuration();
   getVersion();
-  const setConfig = (value: string) => {
-    pageName.value = value || "";
-  };
+  getNavPaths();
+
+  function changeTheme() {
+    const root = document.documentElement;
+
+    if (theme.value) {
+      root.classList.add(Themes.Dark);
+      root.classList.remove(Themes.Light);
+      appStore.setTheme(Themes.Dark);
+    } else {
+      root.classList.add(Themes.Light);
+      root.classList.remove(Themes.Dark);
+      appStore.setTheme(Themes.Light);
+    }
+    window.localStorage.setItem("theme-is-dark", String(theme.value));
+  }
+
+  function getName(list: any[]) {
+    return list.find((d: any) => d.selected) || {};
+  }
+
+  function setName(item: any) {
+    pathNames.value = pathNames.value.map((list: { path?: string; name: string; selected: boolean }[]) => {
+      const p = list.find((i: any) => i.entity === item.entity && item.layer === i.layer && i.name === item.name);
+      if (p) {
+        list = list.map((d: any) => {
+          d.selected = false;
+          if (d.entity === item.entity && item.layer === d.layer && d.name === item.name) {
+            d.selected = true;
+          }
+          return d;
+        });
+      }
+
+      return list;
+    });
+    item.path && router.push(item.path);
+  }
 
   function handleReload() {
     const gap = appStore.duration.end.getTime() - appStore.duration.start.getTime();
@@ -65,28 +146,147 @@ limitations under the License. -->
     appStore.setDuration(timeFormat(dates));
   }
 
-  function changeTimeRange(val: Date[] | any) {
+  function changeTimeRange(val: Date[]) {
     timeRange.value = val[1].getTime() - val[0].getTime() > 60 * 24 * 60 * 60 * 1000 ? 1 : 0;
     if (timeRange.value) {
       return;
     }
     appStore.setDuration(timeFormat(val));
   }
-  setConfig(String(route.meta.title));
-  watch(
-    () => route.meta.title,
-    (title: unknown) => {
-      setConfig(String(title));
-    },
-  );
+
+  function getNavPaths() {
+    pathNames.value = [];
+    pageTitle.value = "";
+    const dashboard = dashboardStore.currentDashboard;
+
+    if (!(dashboard && dashboard.name)) {
+      updateNavTitle();
+      return;
+    }
+    const root =
+      dashboardStore.dashboards.filter((d: DashboardItem) => d.isRoot && dashboard.layer === d.layer)[0] || {};
+    for (const item of appStore.allMenus) {
+      if (item.subItems && item.subItems.length) {
+        for (const subItem of item.subItems) {
+          if (subItem.layer === root.layer) {
+            root.path = subItem.path;
+          }
+        }
+      } else {
+        if (item.layer === root.layer) {
+          root.path = item.path;
+        }
+      }
+    }
+    pathNames.value.push([{ ...root, selected: true }]);
+    if (dashboard.entity === MetricCatalog.ALL) {
+      return;
+    }
+    if (dashboard.entity === MetricCatalog.SERVICE) {
+      pathNames.value.push([
+        {
+          name: dashboard.name,
+          selected: true,
+        },
+      ]);
+      return;
+    }
+    const serviceDashboards = dashboardStore.dashboards.filter(
+      (d: DashboardItem) => MetricCatalog.SERVICE === d.entity && dashboard.layer === d.layer,
+    );
+    if (!serviceDashboards.length) {
+      return;
+    }
+
+    const serviceId = route.params.serviceId;
+    const list = serviceDashboards.map((d: { path: string } & DashboardItem, index: number) => {
+      let path = `/dashboard/${d.layer}/${d.entity}/${d.name}`;
+      if (serviceId) {
+        path = `/dashboard/${d.layer}/${d.entity}/${serviceId}/${d.name}`;
+      }
+      const selected = index === 0;
+      return {
+        ...d,
+        path,
+        selected,
+      };
+    });
+    pathNames.value.push(list);
+    const podId = route.params.podId;
+    if (dashboard.entity === MetricCatalog.ENDPOINT_RELATION) {
+      const endpointDashboards = dashboardStore.dashboards.filter(
+        (d: DashboardItem) => MetricCatalog.ENDPOINT === d.entity && dashboard.layer === d.layer,
+      );
+      const list = endpointDashboards.map((d: { path: string } & DashboardItem, index: number) => {
+        let path = `/dashboard/${d.layer}/${d.entity}/${d.name}`;
+        if (podId) {
+          path = `/dashboard/${d.layer}/${d.entity}/${serviceId}/${podId}/${d.name}`;
+        }
+        const selected = index === 0;
+        return {
+          ...d,
+          path,
+          selected,
+        };
+      });
+
+      pathNames.value.push(list);
+    }
+    const destServiceId = route.params.destServiceId;
+    if (dashboard.entity === MetricCatalog.SERVICE_INSTANCE_RELATION) {
+      const serviceRelationDashboards = dashboardStore.dashboards.filter(
+        (d: DashboardItem) => MetricCatalog.SERVICE_RELATION === d.entity && dashboard.layer === d.layer,
+      );
+      const list = serviceRelationDashboards.map((d: { path: string } & DashboardItem, index: number) => {
+        let path = `/dashboard/${d.layer}/${d.entity}/${d.name}`;
+        if (destServiceId) {
+          path = `/dashboard/related/${d.layer}/${d.entity}/${serviceId}/${destServiceId}/${d.name}`;
+        }
+        const selected = index === 0;
+        return {
+          ...d,
+          path,
+          selected,
+        };
+      });
+      pathNames.value.push(list);
+    }
+    if ([MetricCatalog.Process, MetricCatalog.PROCESS_RELATION].includes(dashboard.entity)) {
+      const InstanceDashboards = dashboardStore.dashboards.filter(
+        (d: DashboardItem) => MetricCatalog.SERVICE_INSTANCE === d.entity && dashboard.layer === d.layer,
+      );
+      const list = InstanceDashboards.map((d: { path: string } & DashboardItem, index: number) => {
+        let path = `/dashboard/${d.layer}/${d.entity}/${d.name}`;
+        if (podId) {
+          path = `/dashboard/${d.layer}/${d.entity}/${serviceId}/${podId}/${d.name}`;
+        }
+        const selected = index === 0;
+        return {
+          ...d,
+          path,
+          selected,
+        };
+      });
+
+      pathNames.value.push(list);
+    }
+    pathNames.value.push([
+      {
+        name: dashboard.name,
+        selected: true,
+      },
+    ]);
+  }
+
   async function getVersion() {
     const res = await appStore.fetchVersion();
     if (res.errors) {
       ElMessage.error(res.errors);
     }
   }
+
   function resetDuration() {
-    const { duration }: any = route.params;
+    const { duration }: Indexable = route.params;
     if (duration) {
       const d = JSON.parse(duration);
 
@@ -98,32 +298,45 @@ limitations under the License. -->
       appStore.updateUTC(d.utc);
     }
   }
+
+  function updateNavTitle() {
+    const key = String(route.meta.i18nKey);
+    pageTitle.value = te(key) ? t(key) : String(route.meta.title);
+  }
+
+  watch(
+    () => [dashboardStore.currentDashboard, route.name],
+    () => {
+      getNavPaths();
+    },
+  );
 </script>
 <style lang="scss" scoped>
   .nav-bar {
-    padding: 5px 10px;
+    padding: 5px;
     text-align: left;
     justify-content: space-between;
-    background-color: #fafbfc;
-    border-bottom: 1px solid #dfe4e8;
-    color: #222;
-    font-size: 12px;
-  }
-
-  .nav-bar.dark {
-    background-color: #333840;
-    border-bottom: 1px solid #252a2f;
-    color: #fafbfc;
+    background-color: $theme-background;
+    border-bottom: 1px solid $border-color;
+    color: $font-color;
+    font-size: $font-size-smaller;
   }
 
   .title {
-    font-size: 14px;
+    font-size: $font-size-normal;
     font-weight: 500;
-    height: 28px;
-    line-height: 28px;
+    padding-top: 5px;
   }
 
   .nav-tabs {
     padding: 10px;
   }
+
+  .name {
+    display: inline-block;
+    max-width: 250px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
 </style>

src/layout/components/SideBar.vue

@@ -36,14 +36,16 @@ limitations under the License. -->
                   <Icon size="lg" :iconName="menu.meta.icon" />
                 </el-icon>
                 <span class="title" :class="isCollapse ? 'collapse' : ''">
-                  {{ t(menu.meta.title) }}
+                  {{ te(menu.meta.i18nKey) ? t(menu.meta.i18nKey) : menu.meta.title }}
                 </span>
               </router-link>
             </template>
             <el-menu-item-group>
               <el-menu-item v-for="(m, idx) in filterMenus(menu.children)" :index="m.name" :key="idx">
                 <router-link class="items" :to="m.path">
-                  <span class="title">{{ m.meta && t(m.meta.title) }}</span>
+                  <span class="title">
+                    {{ m.meta && (te(m.meta.i18nKey) ? t(m.meta.i18nKey) : m.meta.title) }}
+                  </span>
                 </router-link>
               </el-menu-item>
             </el-menu-item-group>
@@ -56,7 +58,9 @@ limitations under the License. -->
             </el-icon>
             <template #title>
               <router-link class="items menu-title" :to="menu.children[0].path">
-                <span class="title">{{ t(menu.meta.title) }}</span>
+                <span class="title">
+                  {{ te(menu.meta.i18nKey) ? t(menu.meta.i18nKey) : menu.meta.title }}
+                </span>
               </router-link>
             </template>
           </el-menu-item>
@@ -67,18 +71,22 @@ limitations under the License. -->
 </template>
 
 <script lang="ts" setup>
-  import { ref } from "vue";
+  import { ref, watch } from "vue";
   import type { RouteRecordRaw } from "vue-router";
   import { useRouter, useRoute } from "vue-router";
   import { useI18n } from "vue-i18n";
   import Icon from "@/components/Icon.vue";
   import { useAppStoreWithOut } from "@/store/modules/app";
 
+  /*global Recordable*/
+  const { t, te } = useI18n();
   const appStore = useAppStoreWithOut();
-  const { t } = useI18n();
-  const name = ref<string>(String(useRouter().currentRoute.value.name));
+  const router = useRouter();
+  const name = ref<string>(String(router.currentRoute.value.name));
   const theme = ["VirtualMachine", "Kubernetes"].includes(name.value || "") ? ref("light") : ref("black");
-  const routes = ref<RouteRecordRaw[] | any>(useRouter().options.routes);
+  const routes = ref<RouteRecordRaw[] | any>(
+    (router.options.routes || []).filter((d: any) => d.meta && d.meta.activate),
+  );
   const route = useRoute();
   const isCollapse = ref(true);
   const showMenu = ref(true);
@@ -95,8 +103,8 @@ limitations under the License. -->
   const changePage = (menu: RouteRecordRaw) => {
     theme.value = ["VirtualMachine", "Kubernetes"].includes(String(menu.name)) ? "light" : "black";
   };
-  const filterMenus = (menus: any[]) => {
-    return menus.filter((d) => d.meta && !d.meta.notShow);
+  const filterMenus = (menus: Recordable[]) => {
+    return menus.filter((d) => d.meta && !d.meta.notShow && d.meta.activate);
   };
   function setCollapse() {
     open.value = true;
@@ -111,6 +119,13 @@ limitations under the License. -->
     isCollapse.value = true;
     open.value = false;
   }
+
+  watch(
+    () => route.name,
+    () => {
+      name.value = String(route.name);
+    },
+  );
 </script>
 
 <style lang="scss" scoped>
@@ -131,12 +146,12 @@ limitations under the License. -->
 
   .el-menu-vertical:not(.el-menu--collapse) {
     width: 220px;
-    font-size: 14px;
+    font-size: $font-size-normal;
   }
 
   .logo-icon-collapse {
     width: 65px;
-    margin: 5px 0 10px 0;
+    margin: 5px 0 10px;
     text-align: center;
   }
 
@@ -168,7 +183,7 @@ limitations under the License. -->
 
   .version {
     color: #eee;
-    font-size: 12px;
+    font-size: $font-size-smaller;
     cursor: pointer;
     padding-left: 23px;
     margin-bottom: 10px;
@@ -184,7 +199,7 @@ limitations under the License. -->
 
   .title {
     display: inline-block;
-    max-width: 110px;
+    max-width: 200px;
     text-overflow: ellipsis;
     overflow: hidden;
   }

src/locales/lang/en.ts

@@ -14,15 +14,13 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import enTitles from "./menus/en";
 const msg = {
-  general: "General Service",
+  ...enTitles,
   services: "Services",
   service: "Service",
   traces: "Traces",
   metrics: "Metrics",
-  serviceMesh: "Service Mesh",
-  infrastructure: "Infrastructure",
-  virtualMachine: "Virtual Machine",
   dashboardNew: "New Dashboard",
   dashboardList: "Dashboard List",
   logs: "Logs",
@@ -35,12 +33,9 @@ const msg = {
   mySQL: "MySQL/MariaDB",
   serviceName: "Service Name",
   technologies: "Technologies",
-  generalServicePanel: "General Service Panel",
   health: "Health",
   groupName: "Group Name",
   topologies: "Topologies",
-  dataPanel: "Data Plane",
-  controlPanel: "Control Plane",
   eventList: "Event List",
   newDashboard: "Create a new dashboard",
   dashboardEdit: "Edit the dashboard",
@@ -117,20 +112,9 @@ const msg = {
   rename: "Rename",
   deleteTitle: "Are you sure you want to delete this?",
   rootTitle: "Are you sure you want to set this?",
-  selfObservability: "Self Observability",
-  satellite: "Satellite",
-  skyWalkingServer: "SkyWalking Server",
-  functions: "Functions",
-  browser: "Browser",
-  linux: "Linux",
   editWarning: "You are entering edit mode",
   viewWarning: "You are entering view mode",
-  virtualDatabase: "Virtual Database",
-  virtualCache: "Virtual Cache",
   reloadDashboards: "Reload dashboards",
-  kubernetesService: "Service",
-  kubernetesCluster: "Cluster",
-  kubernetes: "Kubernetes",
   textUrl: "Text Hyperlink",
   textAlign: "Text Align",
   metricLabel: "Metric Label",
@@ -156,9 +140,7 @@ const msg = {
   enableAssociate: "Enable association",
   text: "Text",
   query: "Query",
-  postgreSQL: "PostgreSQL",
   endpointTips: "The table shows up to 20 pieces of endpoints.",
-  apisix: "APISIX",
   viewTrace: "View Related Traces",
   relatedTraceOptions: "Related Trace Options",
   setLatencyDuration: "Latency Related Metrics",
@@ -183,7 +165,6 @@ const msg = {
   iframeSrc: "Iframe Link",
   generateLink: "Generate Link",
   setDuration: "Lock Query Duration",
-  openFunction: "OpenFunction",
   period: "Period",
   windows: "Windows",
   seconds: "Seconds",
@@ -282,7 +263,6 @@ const msg = {
   aggregation: "Calculation",
   unit: "Unit",
   labelsIndex: "Label Subscript",
-  group: "Service Group",
   browserView: "Browser",
   sortOrder: "Sort Order",
   chartType: "Chart Type",
@@ -316,13 +296,15 @@ const msg = {
   return: "Return",
   isError: "Error",
   contentType: "Content Type",
-  content: "Content",
+  content: "Timestamp - Content",
+  level: "Level",
   viewLogs: "View Logs",
   logsTagsTip: `Only tags defined in the core/default/searchableLogsTags are searchable.
   Check more details on the Configuration Vocabulary page`,
   keywordsOfContentLogTips: "Current storage of SkyWalking OAP server does not support this.",
   setEvent: "Set Event",
   viewAttributes: "View",
+  attributes: "Attributes",
   serviceEvents: "Service Events",
   select: "Select",
   eventID: "Event ID",
@@ -376,11 +358,31 @@ const msg = {
   noticeTag: "Please press Enter after inputting a tag(key=value).",
   conditionNotice: "Notice: Please press Enter after inputting a key of content, exclude key of content(key=value).",
   language: "Language",
-  gateway: "Gateway",
-  virtualMQ: "Virtual MQ",
-  AWSCloud: "AWS Cloud",
-  AWSCloudEKS: "EKS",
-  AWSCloudS3: "S3",
-  AWSCloudDynamoDB: "DynamoDB",
+  save: "Save",
+  editStrategy: "Edit Policies",
+  policyList: "Policy List",
+  targetTypes: "Target Type",
+  monitorType: "Monitor Type",
+  count: "Count",
+  threshold: "Threshold",
+  uriRegex: "URI Regex",
+  uriList: "URI List",
+  processes: "Processes",
+  monitorInstances: "Monitoring Instances",
+  processDashboards: "Process Dashboards",
+  instanceDashboards: "Instance Dashboards",
+  detailLabel: "Detail Label",
+  summary: "Summary",
+  detail: "Detail",
+  marketplace: "Marketplace",
+  menus: "Menus",
+  saveReload: "Save and reload the page",
+  document: "Documentation",
+  metricMode: "Metric Mode",
+  addExpressions: "Add Expressions",
+  expressions: "Expression",
+  unhealthyExpression: "Unhealthy Expression",
+  traceDesc:
+    "The trace segment serves as a representation of a trace portion executed within one single OS process, such as a JVM. It comprises a collection of spans, typically associated with and collected from a single request or execution context.",
 };
 export default msg;

src/locales/lang/es.ts

@@ -14,15 +14,14 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import esTitles from "./menus/es";
 const msg = {
+  ...esTitles,
   general: "Servicio General",
   services: "Servicios",
   service: "Servicio",
   traces: "Trazas",
   metrics: "Métricas",
-  serviceMesh: "Malla de Servicios",
-  infrastructure: "Infraestructura",
-  virtualMachine: "Máquina Virtual",
   dashboardNew: "Nuevo Panel",
   dashboardList: "Listado Paneles",
   logs: "Logs",
@@ -35,12 +34,9 @@ const msg = {
   mySQL: "MySQL/MariaDB",
   serviceName: "Nombre Servicio",
   technologies: "Tecnologías",
-  generalServicePanel: "Panel Servicio General",
   health: "Salud",
   groupName: "Nombre Grupo",
   topologies: "Topologías",
-  dataPanel: "Plano de Datos",
-  controlPanel: "Plano de Control",
   eventList: "Listado Eventos",
   newDashboard: "Crear panel nuevo",
   dashboardEdit: "Editar el panel",
@@ -117,20 +113,9 @@ const msg = {
   rename: "Renombrar",
   deleteTitle: "¿Está seguro que quiere eliminarlo?",
   rootTitle: "¿Está seguro que quiere establecerlo?",
-  selfObservability: "Autoobservabilidad",
-  satellite: "Satéllite",
-  skyWalkingServer: "Servidor SkyWalking",
-  functions: "Funciones",
-  browser: "Navegador",
-  linux: "Linux",
   editWarning: "Estás entrando en modo edición",
   viewWarning: "Estás entrando en modo visualización",
-  virtualDatabase: "Base de Datos Virtual",
-  virtualCache: "Caché virtual",
   reloadDashboards: "Recargar Panel",
-  kubernetesService: "Servicio",
-  kubernetesCluster: "Cluster",
-  kubernetes: "Kubernetes",
   textUrl: "Hipervínculo de Texto",
   textAlign: "Alineación de Texto",
   metricLabel: "Etiqueta de Métrica",
@@ -154,9 +139,7 @@ const msg = {
     "El nombre sólo admite chino e inglés, líneas horizontales y subrayado, y la longitud del nombre no excederá de 300 caracteres",
   enableAssociate: "Activar asociación",
   query: "Consulta",
-  postgreSQL: "PostgreSQL",
   endpointTips: "Aquí, la tabla muestra hasta 20 punto final.",
-  apisix: "APISIX",
   queryOrder: "Consulta por duración",
   setOrder: "Orden de consulta",
   latency: "Retraso",
@@ -166,7 +149,6 @@ const msg = {
   iframeSrc: "Enlace Iframe",
   generateLink: "Generar enlaces",
   setDuration: "Duración de la consulta de bloqueo",
-  openFunction: "OpenFunction",
   seconds: "Segundos",
   hourTip: "Seleccione Hora",
   minuteTip: "Seleccione Minuto",
@@ -280,7 +262,6 @@ const msg = {
   aggregation: "Cálculo",
   unit: "Unidad",
   labelsIndex: "Subíndice Etiqueta",
-  group: "Grupo Servicio",
   browserView: "Navegador",
   sortOrder: "Orden de clasificación",
   chartType: "Tipo Gráfico",
@@ -315,6 +296,7 @@ const msg = {
   isError: "Error",
   contentType: "Tipo de Contenido",
   content: "Contenido",
+  level: "Level",
   viewLogs: "Ver Registro de Datos",
   logsTagsTip: `Solamente etiquetas definidas en core/default/searchableLogsTags pueden ser buscadas.
   Más información en la página de Vocabulario de Configuración`,
@@ -375,11 +357,32 @@ const msg = {
   conditionNotice:
     "Aviso: Por favor presione Intro después de introducir una clave de contenido, excluir clave de contenido(clave=valor).",
   language: "Lenguaje",
-  gateway: "Puerta",
-  virtualMQ: "MQ virtual",
-  AWSCloud: "AWS Cloud",
-  AWSCloudEKS: "EKS",
-  AWSCloudS3: "S3",
-  AWSCloudDynamoDB: "DynamoDB",
+  save: "Salvar",
+  editStrategy: "Estrategia editorial",
+  policyList: "Lista de políticas",
+  targetTypes: "Tipo de objetivo",
+  monitorType: "Tipo de Monitor",
+  count: "Contar",
+  threshold: "Umbral",
+  uriRegex: "Lista URI",
+  uriList: "Lista URI",
+  processes: "Proceso",
+  attributes: "Atributos",
+  monitorInstances: "Ejemplo de Monitor",
+  processDashboards: "Tablero de proceso",
+  instanceDashboards: "Tablero de ejemplo",
+  detailLabel: "Detail Label",
+  summary: "Summary",
+  detail: "Detail",
+  marketplace: "Marketplace",
+  menus: "Menus",
+  saveReload: "Save and reload the page",
+  document: "Documentation",
+  metricMode: "Metric Mode",
+  addExpressions: "Add Expressions",
+  expressions: "Expression",
+  unhealthyExpression: "Unhealthy Expression",
+  traceDesc:
+    "The trace segment serves as a representation of a trace portion executed within one single OS process, such as a JVM. It comprises a collection of spans, typically associated with and collected from a single request or execution context.",
 };
 export default msg;

src/locales/lang/menus/en.ts

@@ -0,0 +1,123 @@
+/**
+ * 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 titles = {
+  // General Service
+  general_service: "General Service",
+  general_service_desc:
+    "Observe services and relative direct dependencies through telemetry data collected from SkyWalking Agents.",
+  general_service_services: "Services",
+  general_service_services_desc: "Observe services through telemetry data collected from SkyWalking Agent.",
+  general_service_virtual_database: "Visual Database",
+  general_service_virtual_database_desc:
+    "Observe the virtual databases which are conjectured by language agents through various plugins.",
+  general_service_virtual_cache: "Visual Cache",
+  general_service_virtual_cache_desc:
+    "Observe the virtual cache servers which are conjectured by language agents through various plugins.",
+  general_service_virtual_mq: "Virtual MQ",
+  general_service_virtual_mq_desc:
+    "Observe the virtual message queue servers which are conjectured by language agents through various plugins.",
+  // Service Mesh
+  service_mesh: "Service Mesh",
+  service_mesh_desc:
+    "Service Mesh(Istio) addresses the challenges developers and operators face with a distributed or microservices architecture.",
+  service_mesh_service: "Services",
+  service_mesh_service_desc:
+    "Observe Service Mesh through telemetry data collected from Envoy Access Log Service (ALS).",
+  service_mesh_control_plane: "Control Plane",
+  service_mesh_control_plane_desc: "Provide monitoring of the behavior of Istio through its self-monitoring metrics.",
+  service_mesh_data_plane: "Data Plane",
+  service_mesh_data_plane_desc: "Observe Envoy Proxy through Envoy Metrics Service.",
+  // Kubernetes
+  kubernetes: "Kubernetes",
+  kubernetes_desc:
+    "Kubernetes is an open-source container orchestration system for automating software deployment, scaling, and management.",
+  kubernetes_cluster: "Cluster",
+  kubernetes_cluster_desc: "Provide monitoring of the status and resources of the K8S Cluster.",
+  kubernetes_service: "Service",
+  kubernetes_service_desc: "Observe Service status and resources from Kubernetes.",
+  // Infrastructure
+  infrastructure: "Infrastructure",
+  infrastructure_desc:
+    "Operation Systems act as the infrastructure of the whole IT system. Its observabilities provide the fundamentals for all distributed and modern complex systems running.",
+  infrastructure_linux: "Linux",
+  infrastructure_linux_desc: "Provide Linux Operation System(OS) monitoring.",
+  infrastructure_windows: "Windows",
+  infrastructure_windows_desc: "Provide Windows Operation System(OS) monitoring.",
+  // AWS Cloud
+  aws_cloud: "AWS Cloud",
+  aws_cloud_desc: "Amazon Web Services(AWS) offers reliable, scalable, and inexpensive cloud computing services.",
+  aws_cloud_eks: "EKS",
+  aws_cloud_eks_desc: "Provide AWS Cloud EKS monitoring through AWS Container Insights Receiver.",
+  aws_cloud_s3: "S3",
+  aws_cloud_s3_desc: "Provide AWS Cloud S3 monitoring through AWS FireHose Receiver.",
+  aws_cloud_dynamodb: "DynamoDB",
+  aws_cloud_dynamodb_desc: "Provide DynamoDB monitoring through AWS FireHose Receiver.",
+  aws_cloud_api_gateway: "API Gateway",
+  aws_cloud_api_gateway_desc: "Provide AWS Cloud API Gateway monitoring through AWS FireHose Receiver.",
+  // Browser
+  browser: "Browser",
+  browser_desc: "Provide Browser-Side monitoring of Web-App, Versions and Pages, through Apache SkyWalking Client JS.",
+  // Gateway
+  gateway: "Gateway",
+  gateway_desc:
+    "API gateway is an API management tool that sits between a client and a collection of backend services.",
+  gateway_nginx: "Nginx",
+  gateway_nginx_desc: "Provide Nginx monitoring through OpenTelemetry's Prometheus Receiver.",
+  gateway_apisix: "APISIX",
+  gateway_apisix_desc: "Provide APISIX monitoring through OpenTelemetry's Prometheus Receiver.",
+  gateway_aws_api_gateway: "AWS API Gateway",
+  gateway_aws_api_gateway_desc: "Provide AWS Cloud API Gateway monitoring through AWS FireHose Receiver.",
+  // Database
+  database: "Database",
+  database_desc:
+    "The database is the organized collection of structured information, or data, typically stored electronically in a computer system.",
+  database_mysql_mariadb: "MySQL/MariaDB",
+  database_mysql_mariadb_desc:
+    "Provide MySQL and MariaDB Server monitoring through OpenTelemetry's Prometheus Receiver.",
+  database_postgresql: "PostgreSQL",
+  database_postgresql_desc: "Provide PostgreSQL monitoring through OpenTelemetry's Prometheus Receiver.",
+  database_dynamodb: "DynamoDB",
+  database_dynamodb_desc: "Provide DynamoDB monitoring through Amazon CloudWatch.",
+  database_redis: "Redis",
+  database_redis_desc: "Provide Redis monitoring through OpenTelemetry's Prometheus Receiver.",
+  database_elasticsearch: "Elasticsearch",
+  database_elasticsearch_desc: "Provide Elasticsearch Server monitoring through OpenTelemetry's Prometheus Receiver.",
+  database_mongodb: "MongoDB",
+  database_mongodb_desc: "Provide MongoDB monitoring through OpenTelemetry's Prometheus Receiver.",
+  // Message Queue
+  mq: "Message Queue",
+  mq_desc:
+    "A message queue is a form of asynchronous service-to-service communication used in serverless and microservices architectures.",
+  mq_rabbitmq: "RabbitMQ",
+  mq_rabbitmq_desc: "Provide RabbitMQ monitoring through OpenTelemetry's Prometheus Receiver.",
+  mq_kafka: "Kafka",
+  mq_kafka_desc: "Provide Kafka monitoring through OpenTelemetry's Prometheus Receiver.",
+  mq_pulsar: "Pulsar",
+  mq_pulsar_desc: "Provide Pulsar monitoring through OpenTelemetry's Prometheus Receiver.",
+  // self observability
+  self_observability: "Self Observability",
+  self_observability_desc:
+    "Self Observability provides the observabilities for running components and servers from the SkyWalking ecosystem.",
+  self_observability_oap: "SkyWalking Server",
+  self_observability_oap_desc:
+    "The OAP backend cluster itself is a distributed streaming process system, this is the monitoring for the OAP backend itself.",
+  self_observability_satellite: "Satellite",
+  self_observability_satellite_desc:
+    "Satellite: an open-source agent designed for the cloud-native infrastructures, which provides a low-cost, high-efficient, and more secure way to collect telemetry data. It is the recommended load balancer for telemetry collecting.",
+};
+
+export default titles;

src/locales/lang/menus/es.ts

@@ -0,0 +1,123 @@
+/**
+ * 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 titles = {
+  // General Service
+  general_service: "Servicio General",
+  general_service_desc:
+    "Observar el servicio y las dependencias relativamente directas a través de los datos de telemetría recopilados del agente skywalking.",
+  general_service_services: "Servicios",
+  general_service_services_desc: "Observe services through telemetry data collected from SkyWalking Agent.",
+  general_service_virtual_database: "Base de Datos Virtual",
+  general_service_virtual_database_desc:
+    "Observe the virtual databases which are conjectured by language agents through various plugins.",
+  general_service_virtual_cache: "Caché virtual",
+  general_service_virtual_cache_desc:
+    "Observe the virtual cache servers which are conjectured by language agents through various plugins.",
+  general_service_virtual_mq: "MQ virtual",
+  general_service_virtual_mq_desc:
+    "Observe the virtual message queue servers which are conjectured by language agents through various plugins.",
+  // Service Mesh
+  service_mesh: "Malla de Servicios",
+  service_mesh_desc:
+    "La red de servicios (istio) resuelve los desafíos que enfrentan los desarrolladores y operadores a través de una arquitectura distribuida o de microservicio.",
+  service_mesh_service: "Servicios",
+  service_mesh_service_desc:
+    "Observe Service Mesh through telemetry data collected from Envoy Access Log Service (ALS).",
+  service_mesh_control_plane: "Plano de Control",
+  service_mesh_control_plane_desc: "Provide monitoring of the behavior of Istio through its self-monitoring metrics.",
+  service_mesh_data_plane: "Plano de Datos",
+  service_mesh_data_plane_desc: "Observe Envoy Proxy through Envoy Metrics Service.",
+  // Kubernetes
+  kubernetes: "Kubernetes",
+  kubernetes_desc:
+    "Kubernetes is an open-source container orchestration system for automating software deployment, scaling, and management.",
+  kubernetes_cluster: "Cluster",
+  kubernetes_cluster_desc: "Provide monitoring of the status and resources of the K8S Cluster.",
+  kubernetes_service: "Servicio",
+  kubernetes_service_desc: "Observe Service status and resources from Kubernetes.",
+  // Infrastructure
+  infrastructure: "Infraestructura",
+  infrastructure_desc:
+    "Operation Systems act as the infrastructure of the whole IT system. Its observabilities provide the fundamentals for all distributed and modern complex systems running.",
+  infrastructure_linux: "Linux",
+  infrastructure_linux_desc: "Provide Linux Operation System(OS) monitoring.",
+  infrastructure_windows: "Windows",
+  infrastructure_windows_desc: "Provide Windows Operation System(OS) monitoring.",
+  // AWS Cloud
+  aws_cloud: "AWS Cloud",
+  aws_cloud_desc: "Amazon Web Services(AWS) offers reliable, scalable, and inexpensive cloud computing services.",
+  aws_cloud_eks: "EKS",
+  aws_cloud_eks_desc: "Provide AWS Cloud EKS monitoring through AWS Container Insights Receiver.",
+  aws_cloud_s3: "S3",
+  aws_cloud_s3_desc: "Provide AWS Cloud S3 monitoring through AWS FireHose Receiver.",
+  aws_cloud_dynamodb: "DynamoDB",
+  aws_cloud_dynamodb_desc: "Provide DynamoDB monitoring through Amazon CloudWatch.",
+  aws_cloud_api_gateway: "API Gateway",
+  aws_cloud_api_gateway_desc: "Provide AWS Cloud API Gateway monitoring through AWS FireHose Receiver.",
+  // Browser
+  browser: "Navegador",
+  browser_desc: "Provide Browser-Side monitoring of Web-App, Versions and Pages, through Apache SkyWalking Client JS.",
+  // Gateway
+  gateway: "Puerta",
+  gateway_desc:
+    "API gateway is an API management tool that sits between a client and a collection of backend services.",
+  gateway_nginx: "Nginx",
+  gateway_nginx_desc: "Provide Nginx monitoring through OpenTelemetry's Prometheus Receiver.",
+  gateway_apisix: "APISIX",
+  gateway_apisix_desc: "Provide APISIX monitoring through OpenTelemetry's Prometheus Receiver.",
+  gateway_aws_api_gateway: "AWS API Gateway",
+  gateway_aws_api_gateway_desc: "Provide AWS Cloud API Gateway monitoring through AWS FireHose Receiver.",
+  // Database
+  database: "Base de Datos",
+  database_desc:
+    "The database is the organized collection of structured information, or data, typically stored electronically in a computer system.",
+  database_mysql_mariadb: "MySQL/MariaDB",
+  database_mysql_mariadb_desc:
+    "Provide MySQL and MariaDB Server monitoring through OpenTelemetry's Prometheus Receiver.",
+  database_postgresql: "PostgreSQL",
+  database_postgresql_desc: "Provide PostgreSQL monitoring through OpenTelemetry's Prometheus Receiver.",
+  database_dynamodb: "DynamoDB",
+  database_dynamodb_desc: "Provide DynamoDB monitoring through Amazon CloudWatch.",
+  database_redis: "Redis",
+  database_redis_desc: "Provide Redis monitoring through OpenTelemetry's Prometheus Receiver.",
+  database_elasticsearch: "Elasticsearch",
+  database_elasticsearch_desc: "Provide Elasticsearch Server monitoring through OpenTelemetry's Prometheus Receiver.",
+  database_mongodb: "MongoDB",
+  database_mongodb_desc: "Provide MongoDB monitoring through OpenTelemetry's Prometheus Receiver.",
+  // Message Queue
+  mq: "Message Queue",
+  mq_desc:
+    "A message queue is a form of asynchronous service-to-service communication used in serverless and microservices architectures.",
+  mq_rabbitmq: "RabbitMQ",
+  mq_rabbitmq_desc: "Provide RabbitMQ monitoring through OpenTelemetry's Prometheus Receiver.",
+  mq_kafka: "Kafka",
+  mq_kafka_desc: "Provide Kafka monitoring through OpenTelemetry's Prometheus Receiver.",
+  mq_pulsar: "Pulsar",
+  mq_pulsar_desc: "Provide Pulsar monitoring through OpenTelemetry's Prometheus Receiver.",
+  // self observability
+  self_observability: "Self Observability",
+  self_observability_desc:
+    "Self Observability provides the observabilities for running components and servers from the SkyWalking ecosystem.",
+  self_observability_oap: "SkyWalking Server",
+  self_observability_oap_desc:
+    "The OAP backend cluster itself is a distributed streaming process system, this is the monitoring for the OAP backend itself.",
+  self_observability_satellite: "Satellite",
+  self_observability_satellite_desc:
+    "Satellite: an open-source agent designed for the cloud-native infrastructures, which provides a low-cost, high-efficient, and more secure way to collect telemetry data. It is the recommended load balancer for telemetry collecting.",
+};
+
+export default titles;

src/locales/lang/menus/zh.ts

@@ -0,0 +1,109 @@
+/**
+ * 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 titles = {
+  // General Service
+  general_service: "常规服务",
+  general_service_desc: "通过从SkyWalking代理收集的遥测数据来观察服务和相对直接的依赖关系。",
+  general_service_services: "服务",
+  general_service_services_desc: "通过SkyWalking Agent收集的遥测数据观察服务。",
+  general_service_virtual_database: "虚拟数据库",
+  general_service_virtual_database_desc: "观察语言代理通过各种插件推测的虚拟数据库。",
+  general_service_virtual_cache: "虚拟缓存",
+  general_service_virtual_cache_desc: "观察语言代理通过各种插件推测的虚拟缓存服务器。",
+  general_service_virtual_mq: "虚拟消息队列",
+  general_service_virtual_mq_desc: "观察语言代理通过各种插件推测的虚拟消息队列服务器。",
+  // Service Mesh
+  service_mesh: "服务网格",
+  service_mesh_desc: "服务网格（Istio）通过分布式或微服务架构解决了开发人员和运营商面临的挑战。",
+  service_mesh_service: "服务",
+  service_mesh_service_desc: "通过从Envoy访问日志服务（ALS）收集的遥测数据观察服务网格。",
+  service_mesh_control_plane: "控制平面",
+  service_mesh_control_plane_desc: "通过Istio的自我监控指标提供对其行为的监控。",
+  service_mesh_data_plane: "数据平面",
+  service_mesh_data_plane_desc: "通过Envoy Metrics Service观察Envoy Proxy。",
+  // Kubernetes
+  kubernetes: "Kubernetes",
+  kubernetes_desc: "Kubernetes是一个开源的容器编排系统，用于自动化软件部署、扩展和管理。",
+  kubernetes_cluster: "集群",
+  kubernetes_cluster_desc: "提供对K8S集群的状态和资源的监控。",
+  kubernetes_service: "服务",
+  kubernetes_service_desc: "从Kubernetes中观察服务状态和资源。",
+  // Infrastructure
+  infrastructure: "基础设施",
+  infrastructure_desc: "操作系统是整个IT系统的基础设施。它的可观察性为所有分布式和现代复杂系统的运行提供了基础。",
+  infrastructure_linux: "Linux",
+  infrastructure_linux_desc: "提供Linux操作系统（OS）监控。",
+  infrastructure_windows: "Windows",
+  infrastructure_windows_desc: "提供Windows操作系统（OS）监控。",
+  // AWS Cloud
+  aws_cloud: "AWS云服务",
+  aws_cloud_desc: "亚马逊网络服务（AWS）提供可靠、可扩展且价格低廉的云计算服务。",
+  aws_cloud_eks: "EKS",
+  aws_cloud_eks_desc: "通过AWS Container Insights Receiver提供AWS Cloud EKS监控。",
+  aws_cloud_s3: "S3",
+  aws_cloud_s3_desc: "通过AWS FireHose Receiver提供AWS Cloud S3监控",
+  aws_cloud_dynamodb: "DynamoDB",
+  aws_cloud_dynamodb_desc: "通过AWS FireHose Receiver提供DynamoDB监控。",
+  aws_cloud_api_gateway: "API Gateway",
+  aws_cloud_api_gateway_desc: "通过AWS FireHose Receiver提供AWS Cloud API网关监控。",
+  // Browser
+  browser: "Browser",
+  browser_desc: "通过Apache SkyWalking Client JS提供Web应用程序、版本和页面的浏览器端监控。",
+  // Gateway
+  gateway: "网关",
+  gateway_desc: "API网关是位于客户端和后端服务集合之间的API管理工具。",
+  gateway_nginx: "Nginx",
+  gateway_nginx_desc: "通过OpenTelemetry的Prometheus接收器提供Nginx监控。",
+  gateway_apisix: "APISIX",
+  gateway_apisix_desc: "通过OpenTelemetry的Prometheus接收器提供APISIX监控。",
+  gateway_aws_api_gateway: "AWS API Gateway",
+  gateway_aws_api_gateway_desc: "通过AWS FireHose Receiver提供AWS Cloud API网关监控。",
+  // Database
+  database: "数据库",
+  database_desc: "数据库是结构化信息或数据的有组织的集合，通常以电子方式存储在计算机系统中。",
+  database_mysql_mariadb: "MySQL/MariaDB",
+  database_mysql_mariadb_desc: "通过OpenTelemetry的Prometheus接收器提供MySQL和MariaDB服务器监控。",
+  database_postgresql: "PostgreSQL",
+  database_postgresql_desc: "通过OpenTelemetry的Prometheus接收器提供PostgreSQL监控。",
+  database_dynamodb: "DynamoDB",
+  database_dynamodb_desc: "通过AWS FireHose Receiver提供DynamoDB监控。",
+  database_redis: "Redis",
+  database_redis_desc: "通过OpenTelemetry的Prometheus接收器提供Redis监控。",
+  database_elasticsearch: "Elasticsearch",
+  database_elasticsearch_desc: "通过OpenTelemetry的Prometheus接收器提供Elasticsearch服务器监控。",
+  database_mongodb: "MongoDB",
+  database_mongodb_desc: "通过OpenTelemetry的Prometheus接收器提供MongoDB监控。",
+  // Message Queue
+  mq: "消息队列",
+  mq_desc: "消息队列是无服务器和微服务架构中使用的异步服务对服务通信的一种形式。",
+  mq_rabbitmq: "RabbitMQ",
+  mq_rabbitmq_desc: "通过OpenTelemetry的Prometheus接收器提供RabbitMQ监控。",
+  mq_kafka: "Kafka",
+  mq_Kafka_desc: "通过OpenTelemetry的Prometheus接收器提供Kafka监控。",
+  mq_pulsar: "Pulsar",
+  mq_Pulsar_desc: "通过OpenTelemetry的Prometheus接收器提供Pulsar监控。",
+  // self observability
+  self_observability: "自监控",
+  self_observability_desc: "自观察性为运行SkyWalking生态系统中的组件和服务器提供了可观察性。",
+  self_observability_oap: "SkyWalking服务",
+  self_observability_oap_desc: "OAP后端集群本身是一个分布式流处理系统，这是对OAP后端本身的监控。",
+  self_observability_satellite: "Satellite",
+  self_observability_satellite_desc:
+    "Satellite：为云原生基础设施设计的开源代理，提供了一种低成本、高效、更安全的遥测数据收集方式。它是遥测采集的推荐负载均衡器。",
+};
+
+export default titles;

src/locales/lang/zh.ts

@@ -14,14 +14,12 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import zhTitles from "./menus/zh";
 const msg = {
-  general: "普通服务",
+  ...zhTitles,
   services: "服务",
   traces: "跟踪",
   metrics: "指标",
-  serviceMesh: "服务网格",
-  infrastructure: "基础设施",
-  virtualMachine: "虚拟机",
   dashboardNew: "新建仪表板",
   dashboardHome: "仪表盘首页",
   dashboardList: "仪表盘列表",
@@ -38,8 +36,6 @@ const msg = {
   health: "健康",
   groupName: "群名称",
   topologies: "拓扑图",
-  dataPanel: "数据平面",
-  controlPanel: "控制平面",
   eventList: "事件列表",
   newDashboard: "新增仪表盘",
   dashboardEdit: "编辑仪表盘",
@@ -115,20 +111,9 @@ const msg = {
   rename: "重命名",
   deleteTitle: "确定删除吗？",
   rootTitle: "确定设置为Root吗？",
-  selfObservability: "自监控",
-  satellite: "Satellite",
-  skyWalkingServer: "SkyWalking服务",
-  functions: "Functions",
-  linux: "Linux",
-  browser: "浏览器",
   editWarning: "你正在进入编辑模式",
   viewWarning: "你正在进入预览模式",
-  virtualDatabase: "虚拟数据库",
-  virtualCache: "虚拟缓存",
   reloadDashboards: "重新加载仪表盘",
-  kubernetesService: "服务",
-  kubernetesCluster: "集群",
-  kubernetes: "Kubernetes",
   textUrl: "文本超链接",
   textAlign: "文本对齐",
   metricLabel: "指标标签",
@@ -153,9 +138,7 @@ const msg = {
   duplicateName: "重复的名称",
   text: "文本",
   query: "查询",
-  postgreSQL: "PostgreSQL",
   endpointTips: "这里最多展示20条endpoints。",
-  apisix: "APISIX",
   viewTrace: "查看相关Trace",
   relatedTraceOptions: "相关的Trace选项",
   setLatencyDuration: "延迟相关指标",
@@ -180,7 +163,6 @@ const msg = {
   iframeSrc: "Iframe链接",
   generateLink: "生成链接",
   setDuration: "锁定查询持续时间",
-  openFunction: "OpenFunction",
   period: "周期",
   windows: "Windows",
   seconds: "秒",
@@ -283,7 +265,6 @@ const msg = {
   aggregation: "计算",
   unit: "单位",
   labelsIndex: "标签下标",
-  group: "服务组",
   browserView: "浏览器视图",
   sortOrder: "排序方式",
   chartType: "图表类型",
@@ -312,7 +293,8 @@ const msg = {
   return: "返回",
   isError: "错误",
   contentType: "内容类型",
-  content: "内容",
+  content: "时间戳 - 内容",
+  level: "Level",
   viewLogs: "查看日志",
   logsTagsTip: "只有core/default/searchableLogsTags中定义的标记才可搜索。查看配置词汇表页面上的更多详细信息。",
   keywordsOfContentLogTips: "SkyWalking OAP服务器的当前存储不支持此操作",
@@ -373,11 +355,32 @@ const msg = {
   noticeTag: "请输入一个标签(key=value)之后回车",
   conditionNotice: "请输入一个内容关键词或者内容不包含的关键词(key=value)之后回车",
   language: "语言",
-  gateway: "网关",
-  virtualMQ: "虚拟消息队列",
-  AWSCloud: "AWS云服务",
-  AWSCloudEKS: "EKS",
-  AWSCloudS3: "S3",
-  AWSCloudDynamoDB: "DynamoDB",
+  save: "保存",
+  editStrategy: "编辑策略",
+  policyList: "策略列表",
+  targetTypes: "目标类型",
+  monitorType: "监视器类型",
+  count: "总数",
+  threshold: "阈值",
+  uriRegex: "URI规则",
+  uriList: "URI列表",
+  processes: "进程",
+  attributes: "属性",
+  monitorInstances: "监视实例",
+  processDashboards: "进程仪表板",
+  instanceDashboards: "实例仪表板",
+  detailLabel: "详细标签",
+  summary: "概括",
+  detail: "详细",
+  marketplace: "市场",
+  menusManagement: "菜单",
+  saveReload: "保存并重新加载页面",
+  document: "文档",
+  metricMode: "指标模式",
+  addExpressions: "添加表达式",
+  expressions: "表达式",
+  unhealthyExpression: "非健康表达式",
+  traceDesc:
+    "Trace Segment代表在单一操作系统进程（例如JVM）中执行的追踪部分。它包含了一组跨度（spans），这些跨度通常与单一请求或执行上下文关联。",
 };
 export default msg;

src/main.ts

@@ -16,7 +16,6 @@
  */
 import { createApp } from "vue";
 import App from "./App.vue";
-import router from "./router";
 import { store } from "./store";
 import components from "@/components";
 import i18n from "./locales";
@@ -33,6 +32,9 @@ app.use(store);
 mountApp();
 
 async function mountApp() {
+  await appStore.getActivateMenus();
   await appStore.queryOAPTimeInfo();
-  app.use(router).mount("#app");
+
+  const router = await import("./router");
+  app.use(router.default).mount("#app");
 }

src/mock/index.ts

@@ -0,0 +1,50 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import Mock from "mockjs";
+
+const Random = Mock.Random;
+const nodes = Mock.mock({
+  "nodes|500": [
+    {
+      //id
+      id: "@guid",
+      name: "@name",
+      "type|1": ["ActiveMQ", "activemq-consumer", "H2", "APISIX", "Express", "USER", "Flash"],
+      "isReal|1": [true, false],
+    },
+  ],
+});
+const calls = Mock.mock({
+  "links|500": [
+    {
+      //id
+      id: "@guid",
+      detectPoints: ["SERVER", "CLIENT"],
+      source: function () {
+        const d = Random.integer(0, 250);
+        return nodes.nodes[d].id;
+      },
+      target: function () {
+        const d = Random.integer(250, 499);
+        return nodes.nodes[d].id;
+      },
+    },
+  ],
+});
+const callsMock = calls.links;
+const nodesMock = nodes.nodes;
+export { callsMock, nodesMock };

src/router/alarm.ts

@@ -16,22 +16,25 @@
  */
 import type { RouteRecordRaw } from "vue-router";
 import Layout from "@/layout/Index.vue";
+import Alarm from "@/views/Alarm.vue";
 
 export const routesAlarm: Array<RouteRecordRaw> = [
   {
     path: "",
     name: "Alarm",
     meta: {
-      title: "alarm",
+      i18nKey: "alarm",
       icon: "spam",
       hasGroup: false,
+      activate: true,
+      title: "Alerting",
     },
     component: Layout,
     children: [
       {
         path: "/alerting",
         name: "Alarm",
-        component: () => import("@/views/Alarm.vue"),
+        component: Alarm,
       },
     ],
   },

src/router/dashboard.ts

@@ -16,6 +16,10 @@
  */
 import type { RouteRecordRaw } from "vue-router";
 import Layout from "@/layout/Index.vue";
+import List from "@/views/dashboard/List.vue";
+import New from "@/views/dashboard/New.vue";
+import Edit from "@/views/dashboard/Edit.vue";
+import Widget from "@/views/dashboard/Widget.vue";
 
 export const routesDashboard: Array<RouteRecordRaw> = [
   {
@@ -23,51 +27,57 @@ export const routesDashboard: Array<RouteRecordRaw> = [
     component: Layout,
     name: "Dashboard",
     meta: {
-      title: "dashboards",
+      i18nKey: "dashboards",
       icon: "dashboard_customize",
       hasGroup: true,
+      activate: true,
+      title: "Dashboards",
     },
     children: [
       {
         path: "/dashboard/list",
-        component: () => import("@/views/dashboard/List.vue"),
+        component: List,
         name: "List",
         meta: {
-          title: "dashboardList",
+          i18nKey: "dashboardList",
+          activate: true,
+          title: "Dashboard List",
         },
       },
       {
         path: "/dashboard/new",
-        component: () => import("@/views/dashboard/New.vue"),
+        component: New,
         name: "New",
         meta: {
-          title: "dashboardNew",
+          i18nKey: "dashboardNew",
+          activate: true,
+          title: "New Dashboard",
         },
       },
       {
         path: "",
         redirect: "/dashboard/:layerId/:entity/:name",
         name: "Create",
-        component: () => import("@/views/dashboard/Edit.vue"),
+        component: Edit,
         meta: {
           notShow: true,
         },
         children: [
           {
             path: "/dashboard/:layerId/:entity/:name",
-            component: () => import("@/views/dashboard/Edit.vue"),
+            component: Edit,
             name: "CreateChild",
           },
           {
             path: "/dashboard/:layerId/:entity/:name/tab/:activeTabIndex",
-            component: () => import("@/views/dashboard/Edit.vue"),
+            component: Edit,
             name: "CreateActiveTabIndex",
           },
         ],
       },
       {
         path: "",
-        component: () => import("@/views/dashboard/Edit.vue"),
+        component: Edit,
         name: "View",
         redirect: "/dashboard/:layerId/:entity/:serviceId/:name",
         meta: {
@@ -76,12 +86,12 @@ export const routesDashboard: Array<RouteRecordRaw> = [
         children: [
           {
             path: "/dashboard/:layerId/:entity/:serviceId/:name",
-            component: () => import("@/views/dashboard/Edit.vue"),
+            component: Edit,
             name: "ViewChild",
           },
           {
             path: "/dashboard/:layerId/:entity/:serviceId/:name/tab/:activeTabIndex",
-            component: () => import("@/views/dashboard/Edit.vue"),
+            component: Edit,
             name: "ViewActiveTabIndex",
           },
         ],
@@ -89,7 +99,7 @@ export const routesDashboard: Array<RouteRecordRaw> = [
       {
         path: "",
         redirect: "/dashboard/related/:layerId/:entity/:serviceId/:destServiceId/:name",
-        component: () => import("@/views/dashboard/Edit.vue"),
+        component: Edit,
         name: "ViewServiceRelation",
         meta: {
           notShow: true,
@@ -97,12 +107,12 @@ export const routesDashboard: Array<RouteRecordRaw> = [
         children: [
           {
             path: "/dashboard/related/:layerId/:entity/:serviceId/:destServiceId/:name",
-            component: () => import("@/views/dashboard/Edit.vue"),
+            component: Edit,
             name: "ViewServiceRelation",
           },
           {
             path: "/dashboard/related/:layerId/:entity/:serviceId/:destServiceId/:name/tab/:activeTabIndex",
-            component: () => import("@/views/dashboard/Edit.vue"),
+            component: Edit,
             name: "ViewServiceRelationActiveTabIndex",
           },
         ],
@@ -110,7 +120,7 @@ export const routesDashboard: Array<RouteRecordRaw> = [
       {
         path: "",
         redirect: "/dashboard/:layerId/:entity/:serviceId/:podId/:name",
-        component: () => import("@/views/dashboard/Edit.vue"),
+        component: Edit,
         name: "ViewPod",
         meta: {
           notShow: true,
@@ -118,20 +128,41 @@ export const routesDashboard: Array<RouteRecordRaw> = [
         children: [
           {
             path: "/dashboard/:layerId/:entity/:serviceId/:podId/:name",
-            component: () => import("@/views/dashboard/Edit.vue"),
+            component: Edit,
             name: "ViewPod",
           },
           {
             path: "/dashboard/:layerId/:entity/:serviceId/:podId/:name/tab/:activeTabIndex",
-            component: () => import("@/views/dashboard/Edit.vue"),
+            component: Edit,
             name: "ViewPodActiveTabIndex",
           },
         ],
       },
+      {
+        path: "",
+        redirect: "/dashboard/:layerId/:entity/:serviceId/:podId/:processId/:name",
+        component: Edit,
+        name: "ViewProcess",
+        meta: {
+          notShow: true,
+        },
+        children: [
+          {
+            path: "/dashboard/:layerId/:entity/:serviceId/:podId/:processId/:name",
+            component: Edit,
+            name: "ViewProcess",
+          },
+          {
+            path: "/dashboard/:layerId/:entity/:serviceId/:podId/:processId/:name/tab/:activeTabIndex",
+            component: Edit,
+            name: "ViewProcessActiveTabIndex",
+          },
+        ],
+      },
       {
         path: "",
         redirect: "/dashboard/:layerId/:entity/:serviceId/:podId/:destServiceId/:destPodId/:name",
-        component: () => import("@/views/dashboard/Edit.vue"),
+        component: Edit,
         name: "PodRelation",
         meta: {
           notShow: true,
@@ -139,12 +170,12 @@ export const routesDashboard: Array<RouteRecordRaw> = [
         children: [
           {
             path: "/dashboard/:layerId/:entity/:serviceId/:podId/:destServiceId/:destPodId/:name",
-            component: () => import("@/views/dashboard/Edit.vue"),
+            component: Edit,
             name: "ViewPodRelation",
           },
           {
             path: "/dashboard/:layerId/:entity/:serviceId/:podId/:destServiceId/:destPodId/:name/tab/:activeTabIndex",
-            component: () => import("@/views/dashboard/Edit.vue"),
+            component: Edit,
             name: "ViewPodRelationActiveTabIndex",
           },
         ],
@@ -153,7 +184,7 @@ export const routesDashboard: Array<RouteRecordRaw> = [
         path: "",
         redirect:
           "/dashboard/:layerId/:entity/:serviceId/:podId/:processId/:destServiceId/:destPodId/:destProcessId/:name",
-        component: () => import("@/views/dashboard/Edit.vue"),
+        component: Edit,
         name: "ProcessRelation",
         meta: {
           notShow: true,
@@ -161,17 +192,17 @@ export const routesDashboard: Array<RouteRecordRaw> = [
         children: [
           {
             path: "/dashboard/:layerId/:entity/:serviceId/:podId/:processId/:destServiceId/:destPodId/:destProcessId/:name",
-            component: () => import("@/views/dashboard/Edit.vue"),
+            component: Edit,
             name: "ViewProcessRelation",
           },
           {
             path: "/dashboard/:layerId/:entity/:serviceId/:podId/:processId/:destServiceId/:destPodId/:destProcessId/:name/tab/:activeTabIndex",
-            component: () => import("@/views/dashboard/Edit.vue"),
+            component: Edit,
             name: "ViewProcessRelationActiveTabIndex",
           },
           {
             path: "/dashboard/:layerId/:entity/:serviceId/:podId/:processId/:destServiceId/:destPodId/:destProcessId/:name/duration/:duration",
-            component: () => import("@/views/dashboard/Edit.vue"),
+            component: Edit,
             name: "ViewProcessRelationDuration",
           },
         ],
@@ -179,14 +210,14 @@ export const routesDashboard: Array<RouteRecordRaw> = [
       {
         path: "",
         name: "Widget",
-        component: () => import("@/views/dashboard/Widget.vue"),
+        component: Widget,
         meta: {
           notShow: true,
         },
         children: [
           {
             path: "/page/:layer/:entity/:serviceId/:podId/:processId/:destServiceId/:destPodId/:destProcessId/:config/:duration?",
-            component: () => import("@/views/dashboard/Widget.vue"),
+            component: Widget,
             name: "ViewWidget",
           },
         ],

src/router/data/aws.ts

@@ -1,79 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-export default [
-  {
-    path: "",
-    name: "AWSCloud",
-    meta: {
-      title: "AWSCloud",
-      icon: "cloud_queue",
-      hasGroup: true,
-    },
-    redirect: "/aws-eks",
-    children: [
-      {
-        path: "/aws-eks",
-        name: "AWSCloudEKS",
-        meta: {
-          title: "AWSCloudEKS",
-          layer: "AWS_EKS",
-        },
-      },
-      {
-        path: "/aws-eks/tab/:activeTabIndex",
-        name: "EKSActiveTabIndex",
-        meta: {
-          notShow: true,
-          layer: "AWS_EKS",
-        },
-      },
-      {
-        path: "/aws-s3",
-        name: "AWSCloudS3",
-        meta: {
-          title: "AWSCloudS3",
-          layer: "AWS_S3",
-        },
-      },
-      {
-        path: "/aws-s3/tab/:activeTabIndex",
-        name: "S3ActiveTabIndex",
-        meta: {
-          notShow: true,
-          layer: "AWS_S3",
-        },
-      },
-      {
-        path: "/aws-dynamodb",
-        name: "AWSCloudDynamoDB",
-        meta: {
-          title: "AWSCloudDynamoDB",
-          layer: "AWS_DYNAMODB",
-        },
-      },
-      {
-        path: "/aws-dynamodb/tab/:activeTabIndex",
-        name: "DynamoDBActiveTabIndex",
-        meta: {
-          notShow: true,
-          layer: "AWS_DYNAMODB",
-        },
-      },
-    ],
-  },
-];

src/router/data/database.ts

@@ -1,79 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-export default [
-  {
-    path: "",
-    name: "Database",
-    meta: {
-      title: "database",
-      icon: "storage",
-      hasGroup: true,
-    },
-    redirect: "/mySQL",
-    children: [
-      {
-        path: "/mySQL",
-        name: "MySQL",
-        meta: {
-          title: "mySQL",
-          layer: "MYSQL",
-        },
-      },
-      {
-        path: "/mySQL/tab/:activeTabIndex",
-        name: "MySQLActiveTabIndex",
-        meta: {
-          notShow: true,
-          layer: "MYSQL",
-        },
-      },
-      {
-        path: "/postgreSQL",
-        name: "PostgreSQL",
-        meta: {
-          title: "postgreSQL",
-          layer: "POSTGRESQL",
-        },
-      },
-      {
-        path: "/postgreSQL/tab/:activeTabIndex",
-        name: "PostgreSQLActiveTabIndex",
-        meta: {
-          notShow: true,
-          layer: "POSTGRESQL",
-        },
-      },
-      {
-        path: "/aws-dynamodb",
-        name: "AWSCloudDynamoDB",
-        meta: {
-          title: "AWSCloudDynamoDB",
-          layer: "AWS_DYNAMODB",
-        },
-      },
-      {
-        path: "/aws-dynamodb/tab/:activeTabIndex",
-        name: "DynamoDBActiveTabIndex",
-        meta: {
-          notShow: true,
-          layer: "AWS_DYNAMODB",
-        },
-      },
-    ],
-  },
-];

src/router/data/general.ts

@@ -1,94 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-export default [
-  {
-    path: "",
-    name: "General",
-    meta: {
-      title: "general",
-      icon: "chart",
-      hasGroup: true,
-    },
-    children: [
-      {
-        path: "/general",
-        name: "GeneralServices",
-        meta: {
-          title: "services",
-          layer: "GENERAL",
-        },
-      },
-      {
-        path: "/general/tab/:activeTabIndex",
-        name: "GeneralServicesActiveTabIndex",
-        meta: {
-          notShow: true,
-          layer: "GENERAL",
-        },
-      },
-      {
-        path: "/database",
-        name: "VirtualDatabase",
-        meta: {
-          title: "virtualDatabase",
-          layer: "VIRTUAL_DATABASE",
-        },
-      },
-      {
-        path: "/database/tab/:activeTabIndex",
-        name: "VirtualDatabaseActiveTabIndex",
-        meta: {
-          notShow: true,
-          layer: "VIRTUAL_DATABASE",
-        },
-      },
-      {
-        path: "/cache",
-        name: "VirtualCache",
-        meta: {
-          title: "virtualCache",
-          layer: "VIRTUAL_CACHE",
-        },
-      },
-      {
-        path: "/cache/tab/:activeTabIndex",
-        name: "VirtualCacheActiveTabIndex",
-        meta: {
-          notShow: true,
-          layer: "VIRTUAL_CACHE",
-        },
-      },
-      {
-        path: "/mq",
-        name: "VirtualMQ",
-        meta: {
-          title: "virtualMQ",
-          layer: "VIRTUAL_MQ",
-        },
-      },
-      {
-        path: "/mq/tab/:activeTabIndex",
-        name: "VirtualMQActiveTabIndex",
-        meta: {
-          notShow: true,
-          layer: "VIRTUAL_MQ",
-        },
-      },
-    ],
-  },
-];

src/router/data/infrastructure.ts

@@ -1,65 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-export default [
-  {
-    path: "",
-    name: "Infrastructure",
-    meta: {
-      title: "infrastructure",
-      icon: "scatter_plot",
-      hasGroup: true,
-    },
-    redirect: "/linux",
-    children: [
-      {
-        path: "/linux",
-        name: "Linux",
-        meta: {
-          title: "linux",
-          layer: "OS_LINUX",
-        },
-      },
-      {
-        path: "/linux/tab/:activeTabIndex",
-        name: "LinuxActiveTabIndex",
-        meta: {
-          title: "linux",
-          notShow: true,
-          layer: "OS_LINUX",
-        },
-      },
-      {
-        path: "/windows",
-        name: "Windows",
-        meta: {
-          title: "windows",
-          layer: "OS_WINDOWS",
-        },
-      },
-      {
-        path: "/windows/tab/:activeTabIndex",
-        name: "WindowsActiveTabIndex",
-        meta: {
-          title: "windows",
-          notShow: true,
-          layer: "OS_WINDOWS",
-        },
-      },
-    ],
-  },
-];

src/router/data/k8s.ts

@@ -1,67 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-export default [
-  {
-    path: "",
-    name: "Kubernetes",
-    meta: {
-      title: "kubernetes",
-      icon: "donut_small",
-      hasGroup: true,
-    },
-    redirect: "/kubernetes/cluster",
-    children: [
-      {
-        path: "/kubernetes/cluster",
-        name: "KubernetesCluster",
-        meta: {
-          notShow: false,
-          title: "kubernetesCluster",
-          layer: "K8S",
-        },
-      },
-      {
-        path: "/kubernetes/cluster/tab/:activeTabIndex",
-        name: "KubernetesClusterActiveTabIndex",
-        meta: {
-          notShow: true,
-          title: "kubernetesClusterActiveTabIndex",
-          layer: "K8S",
-        },
-      },
-      {
-        path: "/kubernetes/service",
-        name: "KubernetesService",
-        meta: {
-          notShow: false,
-          title: "kubernetesService",
-          layer: "K8S_SERVICE",
-        },
-      },
-      {
-        path: "/kubernetes/service/tab/:activeTabIndex",
-        name: "KubernetesServiceActiveTabIndex",
-        meta: {
-          notShow: true,
-          title: "kubernetesServiceActiveTabIndex",
-          layer: "K8S_SERVICE",
-        },
-      },
-    ],
-  },
-];

src/router/data/selfObservability.ts

@@ -1,63 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-export default [
-  {
-    path: "",
-    name: "SelfObservability",
-    redirect: "/self/skyWalkingServer",
-    meta: {
-      title: "selfObservability",
-      icon: "logo",
-      hasGroup: true,
-    },
-    children: [
-      {
-        path: "/self/skyWalkingServer",
-        name: "SkyWalkingServer",
-        meta: {
-          title: "skyWalkingServer",
-          layer: "SO11Y_OAP",
-        },
-      },
-      {
-        path: "/self/skyWalkingServer/tab/:activeTabIndex",
-        name: "SkyWalkingServerActiveTabIndex",
-        meta: {
-          notShow: true,
-          layer: "SO11Y_OAP",
-        },
-      },
-      {
-        path: "/self/satellite",
-        name: "Satellite",
-        meta: {
-          title: "satellite",
-          layer: "SO11Y_SATELLITE",
-        },
-      },
-      {
-        path: "/self/satellite/tab/:activeTabIndex",
-        name: "SatelliteActiveTabIndex",
-        meta: {
-          notShow: true,
-          layer: "SO11Y_SATELLITE",
-        },
-      },
-    ],
-  },
-];

src/router/data/serviceMesh.ts

@@ -1,83 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements.  See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License.  You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-export default [
-  {
-    path: "",
-    name: "ServiceMesh",
-    redirect: "/mesh/services",
-    meta: {
-      title: "serviceMesh",
-      icon: "epic",
-      hasGroup: true,
-    },
-    children: [
-      {
-        path: "/mesh/services",
-        name: "MeshServices",
-        meta: {
-          notShow: false,
-          title: "services",
-          layer: "MESH",
-        },
-      },
-      {
-        path: "/mesh/services/tab/:activeTabIndex",
-        name: "MeshServicesActiveTabIndex",
-        meta: {
-          notShow: true,
-          layer: "MESH",
-        },
-      },
-      {
-        path: "/mesh/controlPanel",
-        name: "ControlPanel",
-        meta: {
-          notShow: false,
-          title: "controlPanel",
-          layer: "MESH_CP",
-        },
-      },
-      {
-        path: "/mesh/controlPanel/tab/:activeTabIndex",
-        name: "ControlPanelActiveTabIndex",
-        meta: {
-          notShow: true,
-          layer: "MESH_CP",
-        },
-      },
-      {
-        path: "/mesh/dataPanel",
-        name: "DataPanel",
-        meta: {
-          notShow: false,
-          title: "dataPanel",
-          layer: "MESH_DP",
-        },
-      },
-      {
-        path: "/mesh/dataPanel/tab/:activeTabIndex",
-        name: "DataPanelActiveTabIndex",
-        meta: {
-          notShow: true,
-          title: "dataPanelActiveTabIndex",
-          layer: "MESH_DP",
-        },
-      },
-    ],
-  },
-];

src/router/index.ts

@@ -17,11 +17,18 @@
 import type { RouteRecordRaw } from "vue-router";
 import { createRouter, createWebHistory } from "vue-router";
 import { routesDashboard } from "./dashboard";
-import { routesSetting } from "./setting";
+import { routesMarketplace } from "./marketplace";
 import { routesAlarm } from "./alarm";
 import routesLayers from "./layer";
+import { routesSettings } from "./settings";
 
-const routes: Array<RouteRecordRaw> = [...routesLayers, ...routesDashboard, ...routesAlarm, ...routesSetting];
+const routes: RouteRecordRaw[] = [
+  ...routesMarketplace,
+  ...routesLayers,
+  ...routesAlarm,
+  ...routesDashboard,
+  ...routesSettings,
+];
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -38,8 +45,10 @@ router.beforeEach((to, from, next) => {
     }
     (window as any).axiosCancel = [];
   }
+
   if (to.path === "/") {
-    next({ path: "/general" });
+    const defaultPath = (routesLayers[0] && routesLayers[0].children[0].path) || "";
+    next({ path: defaultPath });
   } else {
     next();
   }

src/router/layer.ts

@@ -14,19 +14,72 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import LayerJson from "./data";
 import Layout from "@/layout/Index.vue";
+import { useAppStoreWithOut } from "@/store/modules/app";
+import type { MenuOptions } from "@/types/app";
+import Layer from "@/views/Layer.vue";
 
 function layerDashboards() {
-  const routes = LayerJson.map((item: any) => {
-    item.component = Layout;
-    if (item.children) {
-      item.children = item.children.map((d: any) => {
-        d.component = () => import("@/views/Layer.vue");
-        return d;
-      });
+  const appStore = useAppStoreWithOut();
+  const routes = appStore.allMenus.map((item: MenuOptions) => {
+    const route: any = {
+      path: "",
+      name: item.name,
+      component: Layout,
+      meta: {
+        icon: item.icon || "cloud_queue",
+        title: item.title,
+        hasGroup: item.hasGroup,
+        activate: item.activate,
+        descKey: item.descKey,
+        i18nKey: item.i18nKey,
+      },
+      children: item.subItems && item.subItems.length ? [] : undefined,
+    };
+    for (const child of item.subItems || []) {
+      const d = {
+        name: child.name,
+        path: child.path,
+        meta: {
+          title: child.title,
+          layer: child.layer,
+          icon: child.icon || "cloud_queue",
+          activate: child.activate,
+          descKey: child.descKey,
+          i18nKey: child.i18nKey,
+        },
+        component: Layer,
+      };
+      route.children.push(d);
+      const tab = {
+        name: `${child.name}ActiveTabIndex`,
+        path: `/${child.path}/tab/:activeTabIndex`,
+        component: Layer,
+        meta: {
+          notShow: true,
+          layer: child.layer,
+        },
+      };
+      route.children.push(tab);
     }
-    return item;
+    if (!item.hasGroup) {
+      route.children = [
+        {
+          name: item.name,
+          path: item.path,
+          meta: {
+            title: item.title,
+            layer: item.layer,
+            icon: item.icon,
+            activate: item.activate,
+            descKey: item.descKey,
+            i18nKey: item.i18nKey,
+          },
+          component: Layer,
+        },
+      ];
+    }
+    return route;
   });
   return routes;
 }

src/router/marketplace.ts

@@ -14,33 +14,27 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import type { RouteRecordRaw } from "vue-router";
+import Layout from "@/layout/Index.vue";
+import Marketplace from "@/views/Marketplace.vue";
 
-export default [
+export const routesMarketplace: Array<RouteRecordRaw> = [
   {
     path: "",
-    name: "Gateway",
+    name: "Marketplace",
     meta: {
-      title: "gateway",
-      icon: "gateway",
-      hasGroup: true,
+      i18nKey: "marketplace",
+      icon: "marketplace",
+      hasGroup: false,
+      activate: true,
+      title: "Marketplace",
     },
-    redirect: "/apisix",
+    component: Layout,
     children: [
       {
-        path: "/apisix",
-        name: "APISIX",
-        meta: {
-          title: "apisix",
-          layer: "APISIX",
-        },
-      },
-      {
-        path: "/apisix/tab/:activeTabIndex",
-        name: "APISIXActiveTabIndex",
-        meta: {
-          notShow: true,
-          layer: "APISIX",
-        },
+        path: "/marketplace",
+        name: "MenusManagement",
+        component: Marketplace,
       },
     ],
   },

src/router/settings.ts

@@ -16,27 +16,25 @@
  */
 import type { RouteRecordRaw } from "vue-router";
 import Layout from "@/layout/Index.vue";
+import Settings from "@/views/Settings.vue";
 
-export const routesSetting: Array<RouteRecordRaw> = [
+export const routesSettings: Array<RouteRecordRaw> = [
   {
     path: "",
     name: "Settings",
     meta: {
-      title: "settings",
+      i18nKey: "settings",
       icon: "settings",
       hasGroup: false,
+      activate: true,
+      title: "Settings",
     },
     component: Layout,
     children: [
       {
         path: "/settings",
         name: "Settings",
-        meta: {
-          title: "settings",
-          icon: "settings",
-          hasGroup: false,
-        },
-        component: () => import("@/views/Settings.vue"),
+        component: Settings,
       },
     ],
   },

src/store/data.ts

@@ -38,4 +38,18 @@ export const TimeRangeConfig = {
   text: "text",
 };
 
-export const ControlsTypes = ["Trace", "Profile", "Log", "DemandLog", "Ebpf", "NetworkProfiling", "ThirdPartyApp"];
+export const ControlsTypes = [
+  "Trace",
+  "Profile",
+  "Log",
+  "DemandLog",
+  "Ebpf",
+  "NetworkProfiling",
+  "ThirdPartyApp",
+  "ContinuousProfiling",
+  "TaskTimeline",
+];
+export enum EBPFProfilingTriggerType {
+  FIXED_TIME = "FIXED_TIME",
+  CONTINUOUS_PROFILING = "CONTINUOUS_PROFILING",
+}

src/store/modules/alarm.ts

@@ -34,7 +34,7 @@ export const alarmStore = defineStore({
     total: 0,
   }),
   actions: {
-    async getAlarms(params: any) {
+    async getAlarms(params: Recordable) {
       const res: AxiosResponse = await graphql.query("queryAlarms").params(params);
       if (res.data.errors) {
         return res.data;
@@ -48,6 +48,6 @@ export const alarmStore = defineStore({
   },
 });
 
-export function useAlarmStore(): any {
+export function useAlarmStore(): Recordable {
   return alarmStore(store);
 }

src/store/modules/app.ts

@@ -22,19 +22,22 @@ import getLocalTime from "@/utils/localtime";
 import type { AxiosResponse } from "axios";
 import dateFormatStep, { dateFormatTime } from "@/utils/dateFormat";
 import { TimeType } from "@/constants/data";
+import type { MenuOptions, SubItem } from "@/types/app";
+import { Themes } from "@/constants/data";
 /*global Nullable*/
 interface AppState {
-  durationRow: any;
+  durationRow: Recordable;
   utc: string;
   utcHour: number;
   utcMin: number;
   eventStack: (() => unknown)[];
-  timer: Nullable<any>;
+  timer: Nullable<TimeoutHandle>;
   autoRefresh: boolean;
-  pageTitle: string;
   version: string;
   isMobile: boolean;
-  reloadTimer: Nullable<any>;
+  reloadTimer: Nullable<IntervalHandle>;
+  allMenus: MenuOptions[];
+  theme: string;
 }
 
 export const appStore = defineStore({
@@ -51,10 +54,11 @@ export const appStore = defineStore({
     eventStack: [],
     timer: null,
     autoRefresh: false,
-    pageTitle: "",
     version: "",
     isMobile: false,
     reloadTimer: null,
+    allMenus: [],
+    theme: Themes.Dark,
   }),
   getters: {
     duration(): Duration {
@@ -125,6 +129,9 @@ export const appStore = defineStore({
     updateDurationRow(data: Duration) {
       this.durationRow = data;
     },
+    setTheme(data: string) {
+      this.theme = data;
+    },
     setUTC(utcHour: number, utcMin: number): void {
       this.runEventStack();
       this.utcMin = utcMin;
@@ -143,21 +150,40 @@ export const appStore = defineStore({
     setAutoRefresh(auto: boolean) {
       this.autoRefresh = auto;
     },
-    setPageTitle(title: string) {
-      this.pageTitle = title;
-    },
     runEventStack() {
       if (this.timer) {
         clearTimeout(this.timer);
       }
       this.timer = setTimeout(
         () =>
-          this.eventStack.forEach((event: any) => {
+          this.eventStack.forEach((event: Function) => {
             setTimeout(event(), 0);
           }),
         500,
       );
     },
+    async getActivateMenus() {
+      const resp = (await this.queryMenuItems()) || {};
+
+      this.allMenus = (resp.getMenuItems || []).map((d: MenuOptions, index: number) => {
+        const t = `${d.title.replace(/\s+/g, "-")}`;
+        d.name = `${t}-${index}`;
+        d.path = `/${t}`;
+        d.descKey = `${d.i18nKey}_desc`;
+        if (d.subItems && d.subItems.length) {
+          d.hasGroup = true;
+          d.subItems = d.subItems.map((item: SubItem, sub: number) => {
+            const id = `${item.title.replace(/\s+/g, "-")}`;
+            item.name = `${id}-${index}${sub}`;
+            item.path = `/${t}/${id}`;
+            item.descKey = `${item.i18nKey}_desc`;
+            return item;
+          });
+        }
+
+        return d;
+      });
+    },
     async queryOAPTimeInfo() {
       const res: AxiosResponse = await graphql.query("queryOAPTimeInfo").params({});
       if (res.data.errors) {
@@ -179,11 +205,19 @@ export const appStore = defineStore({
       this.version = res.data.data.version;
       return res.data;
     },
-    setReloadTimer(timer: any): void {
+    async queryMenuItems() {
+      const res: AxiosResponse = await graphql.query("queryMenuItems").params({});
+      if (res.data.errors) {
+        return res.data;
+      }
+
+      return res.data.data;
+    },
+    setReloadTimer(timer: IntervalHandle) {
       this.reloadTimer = timer;
     },
   },
 });
-export function useAppStoreWithOut(): any {
+export function useAppStoreWithOut(): Recordable {
   return appStore(store);
 }

src/store/modules/continous-profiling.ts

@@ -0,0 +1,171 @@
+/**
+ * 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 { defineStore } from "pinia";
+import type { StrategyItem, CheckItems } from "@/types/continous-profiling";
+import type { EBPFTaskList, EBPFProfilingSchedule, AnalyzationTrees } from "@/types/ebpf";
+import type { Instance } from "@/types/selector";
+import { store } from "@/store";
+import graphql from "@/graphql";
+import type { MonitorInstance, MonitorProcess } from "@/types/continous-profiling";
+import type { AxiosResponse } from "axios";
+import { dateFormat } from "@/utils/dateFormat";
+
+interface ContinousProfilingState {
+  strategyList: Array<Recordable<StrategyItem>>;
+  selectedStrategy: Recordable<StrategyItem>;
+  taskList: Array<Recordable<EBPFTaskList>>;
+  selectedTask: Recordable<EBPFTaskList>;
+  errorTip: string;
+  errorReason: string;
+  instances: Instance[];
+  instance: Nullable<Instance>;
+  eBPFSchedules: EBPFProfilingSchedule[];
+  currentSchedule: EBPFProfilingSchedule | Record<string, never>;
+  analyzeTrees: AnalyzationTrees[];
+  ebpfTips: string;
+  aggregateType: string;
+  instancesLoading: boolean;
+  policyLoading: boolean;
+}
+
+export const continousProfilingStore = defineStore({
+  id: "continousProfiling",
+  state: (): ContinousProfilingState => ({
+    strategyList: [],
+    selectedStrategy: {},
+    taskList: [],
+    selectedTask: {},
+    errorReason: "",
+    errorTip: "",
+    ebpfTips: "",
+    instances: [],
+    eBPFSchedules: [],
+    currentSchedule: {},
+    analyzeTrees: [],
+    aggregateType: "COUNT",
+    instance: null,
+    instancesLoading: false,
+    policyLoading: false,
+  }),
+  actions: {
+    setSelectedStrategy(task: Recordable<StrategyItem>) {
+      this.selectedStrategy = task || {};
+    },
+    setselectedTask(task: Recordable<EBPFTaskList>) {
+      this.selectedTask = task || {};
+    },
+    setCurrentSchedule(s: EBPFProfilingSchedule) {
+      this.currentSchedule = s;
+    },
+    setAnalyzeTrees(tree: AnalyzationTrees[]) {
+      this.analyzeTrees = tree;
+    },
+    setCurrentInstance(instance: Nullable<Instance>) {
+      this.instance = instance;
+    },
+    async setContinuousProfilingPolicy(
+      serviceId: string,
+      targets: {
+        targetType: string;
+        checkItems: CheckItems[];
+      }[],
+    ) {
+      const res: AxiosResponse = await graphql.query("editStrategy").params({
+        request: {
+          serviceId,
+          targets,
+        },
+      });
+
+      if (res.data.errors) {
+        return res.data;
+      }
+
+      return res.data;
+    },
+    async getStrategyList(params: { serviceId: string }) {
+      if (!params.serviceId) {
+        return new Promise((resolve) => resolve({}));
+      }
+      this.policyLoading = true;
+      const res: AxiosResponse = await graphql.query("getStrategyList").params(params);
+
+      this.policyLoading = false;
+      if (res.data.errors) {
+        return res.data;
+      }
+      const list = res.data.data.strategyList || [];
+      if (!list.length) {
+        this.taskList = [];
+        this.instances = [];
+        this.instance = null;
+      }
+      const arr = list.length ? res.data.data.strategyList : [{ type: "", checkItems: [{ type: "" }] }];
+      this.strategyList = arr.map((d: StrategyItem, index: number) => {
+        return {
+          ...d,
+          id: index,
+        };
+      });
+      this.setSelectedStrategy(this.strategyList[0]);
+      if (!this.selectedStrategy.type) {
+        return res.data;
+      }
+      this.getMonitoringInstances(params.serviceId);
+      return res.data;
+    },
+    async getMonitoringInstances(serviceId: string): Promise<Nullable<AxiosResponse>> {
+      this.instancesLoading = true;
+      if (!serviceId) {
+        return null;
+      }
+      const res: AxiosResponse = await graphql.query("getMonitoringInstances").params({
+        serviceId,
+        target: this.selectedStrategy.type,
+      });
+      this.instancesLoading = false;
+      if (res.data.errors) {
+        return res.data;
+      }
+      this.instances = (res.data.data.instances || [])
+        .map((d: MonitorInstance) => {
+          const processes = (d.processes || [])
+            .sort((c: MonitorProcess, d: MonitorProcess) => d.lastTriggerTimestamp - c.lastTriggerTimestamp)
+            .map((p: MonitorProcess) => {
+              return {
+                ...p,
+                lastTriggerTime: d.lastTriggerTimestamp ? dateFormat(d.lastTriggerTimestamp) : "",
+                labels: p.labels.join("; "),
+              };
+            });
+
+          return {
+            ...d,
+            processes,
+            lastTriggerTime: d.lastTriggerTimestamp ? dateFormat(d.lastTriggerTimestamp) : "",
+          };
+        })
+        .sort((a: MonitorInstance, b: MonitorInstance) => b.lastTriggerTimestamp - a.lastTriggerTimestamp);
+      this.instance = this.instances[0] || null;
+      return res.data;
+    },
+  },
+});
+
+export function useContinousProfilingStore(): Recordable {
+  return continousProfilingStore(store);
+}

src/store/modules/dashboard.ts

@@ -25,7 +25,7 @@ import { NewControl, TextConfig, TimeRangeConfig, ControlsTypes } from "../data"
 import type { AxiosResponse } from "axios";
 import { ElMessage } from "element-plus";
 import { useI18n } from "vue-i18n";
-import { EntityType } from "@/views/dashboard/data";
+import { EntityType, MetricModes } from "@/views/dashboard/data";
 interface DashboardState {
   showConfig: boolean;
   layout: LayoutConfig[];
@@ -33,7 +33,7 @@ interface DashboardState {
   entity: string;
   layerId: string;
   activedGridItem: string;
-  selectorStore: any;
+  selectorStore: Recordable;
   showTopology: boolean;
   currentTabItems: LayoutConfig[];
   dashboards: DashboardItem[];
@@ -79,7 +79,7 @@ export const dashboardStore = defineStore({
       this.currentDashboard = item;
     },
     addControl(type: string) {
-      const arr = this.layout.map((d: any) => Number(d.i));
+      const arr = this.layout.map((d: Recordable) => Number(d.i));
       let index = String(Math.max(...arr) + 1);
       if (!this.layout.length) {
         index = "0";
@@ -92,6 +92,10 @@ export const dashboardStore = defineStore({
         metricTypes: [""],
         metrics: [""],
       };
+
+      if (type === "Widget") {
+        newItem.metricMode = MetricModes.Expression;
+      }
       if (type === "Tab") {
         newItem.h = 36;
         newItem.activedTabIndex = 0;
@@ -153,7 +157,7 @@ export const dashboardStore = defineStore({
       }
       const tabIndex = this.layout[idx].activedTabIndex || 0;
       const { children } = (this.layout[idx].children || [])[tabIndex];
-      const arr = children.map((d: any) => Number(d.i));
+      const arr = children.map((d: Recordable) => Number(d.i));
       let index = String(Math.max(...arr) + 1);
       if (!children.length) {
         index = "0";
@@ -167,11 +171,15 @@ export const dashboardStore = defineStore({
         metricTypes: [""],
         metrics: [""],
       };
+      if (type === "Widget") {
+        newItem.metricMode = MetricModes.Expression;
+      }
       if (type === "Topology") {
         newItem.h = 32;
         newItem.graph = {
           showDepth: true,
         };
+        newItem.metricMode = MetricModes.Expression;
       }
       if (ControlsTypes.includes(type)) {
         newItem.h = 32;
@@ -309,6 +317,11 @@ export const dashboardStore = defineStore({
 
       return res.data;
     },
+    async getTypeOfMQE(expression: string) {
+      const res: AxiosResponse = await graphql.query("getTypeOfMQE").params({ expression });
+
+      return res.data;
+    },
     async fetchMetricList(regex: string) {
       const res: AxiosResponse = await graphql.query("queryMetrics").params({ regex });
 
@@ -398,7 +411,7 @@ export const dashboardStore = defineStore({
         children: this.layout,
         ...this.currentDashboard,
       };
-      let res: any;
+      let res: Recordable;
       let json;
 
       if (this.currentDashboard.id) {
@@ -462,13 +475,13 @@ export const dashboardStore = defineStore({
         ElMessage.error(json.message);
         return res.data;
       }
-      this.dashboards = this.dashboards.filter((d: any) => d.id !== this.currentDashboard?.id);
+      this.dashboards = this.dashboards.filter((d: Recordable) => d.id !== this.currentDashboard?.id);
       const key = [this.currentDashboard?.layer, this.currentDashboard?.entity, this.currentDashboard?.name].join("_");
       sessionStorage.removeItem(key);
     },
   },
 });
 
-export function useDashboardStore(): any {
+export function useDashboardStore(): Recordable {
   return dashboardStore(store);
 }

src/store/modules/demand-log.ts

@@ -27,7 +27,7 @@ interface DemandLogState {
   containers: Instance[];
   instances: Instance[];
   conditions: Conditions;
-  selectorStore: any;
+  selectorStore: Recordable;
   logs: Log[];
   loadLogs: boolean;
   message: string;
@@ -111,6 +111,6 @@ export const demandLogStore = defineStore({
   },
 });
 
-export function useDemandLogStore(): any {
+export function useDemandLogStore(): Recordable {
   return demandLogStore(store);
 }

src/store/modules/ebpf.ts

@@ -20,6 +20,7 @@ import type { EBPFTaskCreationRequest, EBPFProfilingSchedule, EBPFTaskList, Anal
 import { store } from "@/store";
 import graphql from "@/graphql";
 import type { AxiosResponse } from "axios";
+import { EBPFProfilingTriggerType } from "../data";
 interface EbpfState {
   taskList: Array<Recordable<EBPFTaskList>>;
   eBPFSchedules: EBPFProfilingSchedule[];
@@ -27,7 +28,7 @@ interface EbpfState {
   analyzeTrees: AnalyzationTrees[];
   labels: Option[];
   couldProfiling: boolean;
-  tip: string;
+  ebpfTips: string;
   selectedTask: Recordable<EBPFTaskList>;
   aggregateType: string;
 }
@@ -41,7 +42,7 @@ export const ebpfStore = defineStore({
     analyzeTrees: [],
     labels: [{ value: "", label: "" }],
     couldProfiling: false,
-    tip: "",
+    ebpfTips: "",
     selectedTask: {},
     aggregateType: "COUNT",
   }),
@@ -77,6 +78,7 @@ export const ebpfStore = defineStore({
       this.getTaskList({
         serviceId: param.serviceId,
         targets: ["ON_CPU", "OFF_CPU"],
+        triggerType: EBPFProfilingTriggerType.FIXED_TIME,
       });
       return res.data;
     },
@@ -86,7 +88,7 @@ export const ebpfStore = defineStore({
       }
       const res: AxiosResponse = await graphql.query("getEBPFTasks").params(params);
 
-      this.tip = "";
+      this.ebpfTips = "";
       if (res.data.errors) {
         return res.data;
       }
@@ -103,13 +105,14 @@ export const ebpfStore = defineStore({
       if (!params.taskId) {
         return new Promise((resolve) => resolve({}));
       }
+
       const res: AxiosResponse = await graphql.query("getEBPFSchedules").params({ ...params });
 
       if (res.data.errors) {
         this.eBPFSchedules = [];
         return res.data;
       }
-      this.tip = "";
+      this.ebpfTips = "";
       const { eBPFSchedules } = res.data.data;
 
       this.eBPFSchedules = eBPFSchedules;
@@ -138,7 +141,7 @@ export const ebpfStore = defineStore({
         return res.data;
       }
       const { analysisEBPFResult } = res.data.data;
-      this.tip = analysisEBPFResult.tip;
+      this.ebpfTips = analysisEBPFResult.tip;
       if (!analysisEBPFResult) {
         this.analyzeTrees = [];
         return res.data;
@@ -153,6 +156,6 @@ export const ebpfStore = defineStore({
   },
 });
 
-export function useEbpfStore(): any {
+export function useEbpfStore(): Recordable {
   return ebpfStore(store);
 }

src/store/modules/event.ts

@@ -57,7 +57,7 @@ export const eventStore = defineStore({
       this.instances = [{ value: "", label: "All" }, ...res.data.data.pods] || [{ value: "", label: "All" }];
       return res.data;
     },
-    async getEndpoints() {
+    async getEndpoints(keyword: string) {
       const serviceId = useSelectorStore().currentService ? useSelectorStore().currentService.id : "";
       if (!serviceId) {
         return;
@@ -65,7 +65,7 @@ export const eventStore = defineStore({
       const res: AxiosResponse = await graphql.query("queryEndpoints").params({
         serviceId,
         duration: useAppStoreWithOut().durationTime,
-        keyword: "",
+        keyword: keyword || "",
       });
       if (res.data.errors) {
         return res.data;
@@ -106,6 +106,6 @@ export const eventStore = defineStore({
   },
 });
 
-export function useEventStore(): any {
+export function useEventStore(): Recordable {
   return eventStore(store);
 }

src/store/modules/log.ts

@@ -27,10 +27,10 @@ interface LogState {
   services: Service[];
   instances: Instance[];
   endpoints: Endpoint[];
-  conditions: any;
-  selectorStore: any;
+  conditions: Recordable;
+  selectorStore: Recordable;
   supportQueryLogsByKeywords: boolean;
-  logs: any[];
+  logs: Recordable[];
   loadLogs: boolean;
 }
 
@@ -50,7 +50,7 @@ export const logStore = defineStore({
     loadLogs: false,
   }),
   actions: {
-    setLogCondition(data: any) {
+    setLogCondition(data: Recordable) {
       this.conditions = { ...this.conditions, ...data };
     },
     resetState() {
@@ -152,6 +152,6 @@ export const logStore = defineStore({
   },
 });
 
-export function useLogStore(): any {
+export function useLogStore(): Recordable {
   return logStore(store);
 }

src/store/modules/network-profiling.ts

@@ -22,6 +22,7 @@ import type { AxiosResponse } from "axios";
 import type { Call } from "@/types/topology";
 import type { LayoutConfig } from "@/types/dashboard";
 import { ElMessage } from "element-plus";
+import type { DurationTime } from "@/types/app";
 
 interface NetworkProfilingState {
   networkTasks: Array<Recordable<EBPFTaskList>>;
@@ -64,6 +65,12 @@ export const networkProfilingStore = defineStore({
     setLink(link: Call) {
       this.call = link;
     },
+    seNodes(nodes: Node[]) {
+      this.nodes = nodes;
+    },
+    setLinks(links: Call[]) {
+      this.calls = links;
+    },
     setMetricsLayout(layout: LayoutConfig[]) {
       this.metricsLayout = layout;
     },
@@ -74,7 +81,7 @@ export const networkProfilingStore = defineStore({
       this.activeMetricIndex = index;
     },
     setTopology(data: { nodes: ProcessNode[]; calls: Call[] }) {
-      const obj = {} as any;
+      const obj = {} as Recordable;
       let calls = (data.calls || []).reduce((prev: Call[], next: Call) => {
         if (!obj[next.id]) {
           obj[next.id] = true;
@@ -92,8 +99,8 @@ export const networkProfilingStore = defineStore({
         }
         return prev;
       }, []);
-      const param = {} as any;
-      calls = data.calls.reduce((prev: (Call | any)[], next: Call | any) => {
+      const param = {} as Recordable;
+      calls = data.calls.reduce((prev: (Call & Recordable)[], next: Call & Recordable) => {
         if (param[next.targetId + next.sourceId]) {
           next.lowerArc = true;
         }
@@ -165,7 +172,7 @@ export const networkProfilingStore = defineStore({
       }
       return res.data;
     },
-    async getProcessTopology(params: { duration: any; serviceInstanceId: string }) {
+    async getProcessTopology(params: { duration: DurationTime; serviceInstanceId: string }) {
       this.loadNodes = true;
       const res: AxiosResponse = await graphql.query("getProcessTopology").params(params);
       this.loadNodes = false;
@@ -182,6 +189,6 @@ export const networkProfilingStore = defineStore({
   },
 });
 
-export function useNetworkProfilingStore(): any {
+export function useNetworkProfilingStore(): Recordable {
   return networkProfilingStore(store);
 }

src/store/modules/profile.ts

@@ -34,6 +34,7 @@ interface ProfileState {
   taskEndpoints: Endpoint[];
   condition: { serviceId: string; endpointName: string };
   taskList: TaskListItem[];
+  currentTask: Recordable<TaskListItem>;
   segmentList: Trace[];
   currentSegment: Recordable<Trace>;
   segmentSpans: Array<Recordable<SegmentSpan>>;
@@ -51,6 +52,7 @@ export const profileStore = defineStore({
     condition: { serviceId: "", endpointName: "" },
     taskList: [],
     segmentList: [],
+    currentTask: {},
     currentSegment: {},
     segmentSpans: [],
     currentSpan: {},
@@ -65,11 +67,27 @@ export const profileStore = defineStore({
         ...data,
       };
     },
+    setCurrentTask(task: TaskListItem) {
+      this.currentTask = task || {};
+      this.analyzeTrees = [];
+    },
+    setSegmentSpans(spans: Recordable<SegmentSpan>[]) {
+      this.currentSpan = spans[0] || {};
+      this.segmentSpans = spans;
+    },
     setCurrentSpan(span: Recordable<SegmentSpan>) {
       this.currentSpan = span;
+      this.analyzeTrees = [];
     },
-    setCurrentSegment(s: Recordable<Trace>) {
-      this.currentSegment = s;
+    setCurrentSegment(segment: Trace) {
+      this.currentSegment = segment;
+      this.segmentSpans = segment.spans || [];
+      if (segment.spans) {
+        this.currentSpan = segment.spans[0] || {};
+      } else {
+        this.currentSpan = {};
+      }
+      this.analyzeTrees = [];
     },
     setHighlightTop() {
       this.highlightTop = !this.highlightTop;
@@ -104,8 +122,9 @@ export const profileStore = defineStore({
       if (res.data.errors) {
         return res.data;
       }
-      const list = res.data.data.taskList;
+      const list = res.data.data.taskList || [];
       this.taskList = list;
+      this.currentTask = list[0] || {};
       if (!list.length) {
         this.segmentList = [];
         this.segmentSpans = [];
@@ -128,7 +147,7 @@ export const profileStore = defineStore({
       }
       const { segmentList } = res.data.data;
 
-      this.segmentList = segmentList;
+      this.segmentList = segmentList || [];
       if (!segmentList.length) {
         this.segmentSpans = [];
         this.analyzeTrees = [];
@@ -137,14 +156,14 @@ export const profileStore = defineStore({
       }
       if (segmentList[0]) {
         this.currentSegment = segmentList[0];
-        this.getSegmentSpans({ segmentId: segmentList[0].segmentId });
+        this.getSegmentSpans(segmentList[0].segmentId);
       } else {
         this.currentSegment = {};
       }
       return res.data;
     },
     async getSegmentSpans(params: { segmentId: string }) {
-      if (!params.segmentId) {
+      if (!(params && params.segmentId)) {
         return new Promise((resolve) => resolve({}));
       }
       const res: AxiosResponse = await graphql.query("queryProfileSegment").params(params);
@@ -162,7 +181,7 @@ export const profileStore = defineStore({
         return {
           ...d,
           segmentId: this.currentSegment?.segmentId,
-          traceId: (this.currentSegment.traceIds as any)[0],
+          traceId: (this.currentSegment.traceIds as string[])[0],
         };
       });
       if (!(segment.spans && segment.spans.length)) {
@@ -173,14 +192,11 @@ export const profileStore = defineStore({
       this.currentSpan = segment.spans[index];
       return res.data;
     },
-    async getProfileAnalyze(params: { segmentId: string; timeRanges: Array<{ start: number; end: number }> }) {
-      if (!params.segmentId) {
+    async getProfileAnalyze(params: Array<{ segmentId: string; timeRange: { start: number; end: number } }>) {
+      if (!params.length) {
         return new Promise((resolve) => resolve({}));
       }
-      if (!params.timeRanges.length) {
-        return new Promise((resolve) => resolve({}));
-      }
-      const res: AxiosResponse = await graphql.query("getProfileAnalyze").params(params);
+      const res: AxiosResponse = await graphql.query("getProfileAnalyze").params({ queries: params });
 
       if (res.data.errors) {
         this.analyzeTrees = [];
@@ -220,6 +236,6 @@ export const profileStore = defineStore({
   },
 });
 
-export function useProfileStore(): any {
+export function useProfileStore(): Recordable {
   return profileStore(store);
 }

src/store/modules/selectors.ts

@@ -184,7 +184,7 @@ export const selectorStore = defineStore({
         if (isRelation) {
           this.currentDestPod = res.data.data.instance || null;
           this.destPods = [res.data.data.instance];
-          return;
+          return res.data;
         }
         this.currentPod = res.data.data.instance || null;
         this.pods = [res.data.data.instance];
@@ -199,16 +199,16 @@ export const selectorStore = defineStore({
       const res: AxiosResponse = await graphql.query("queryEndpoint").params({
         endpointId,
       });
-      if (!res.data.errors) {
-        if (isRelation) {
-          this.currentDestPod = res.data.data.endpoint || null;
-          this.destPods = [res.data.data.endpoint];
-          return;
-        }
-        this.currentPod = res.data.data.endpoint || null;
-        this.pods = [res.data.data.endpoint];
+      if (res.data.errors) {
+        return res.data;
       }
-
+      if (isRelation) {
+        this.currentDestPod = res.data.data.endpoint || null;
+        this.destPods = [res.data.data.endpoint];
+        return res.data;
+      }
+      this.currentPod = res.data.data.endpoint || null;
+      this.pods = [res.data.data.endpoint];
       return res.data;
     },
     async getProcess(processId: string, isRelation?: boolean) {
@@ -222,7 +222,7 @@ export const selectorStore = defineStore({
         if (isRelation) {
           this.currentDestProcess = res.data.data.process || null;
           this.destProcesses = [res.data.data.process];
-          return;
+          return res.data;
         }
         this.currentProcess = res.data.data.process || null;
         this.processes = [res.data.data.process];
@@ -233,6 +233,6 @@ export const selectorStore = defineStore({
   },
 });
 
-export function useSelectorStore(): any {
+export function useSelectorStore(): Recordable {
   return selectorStore(store);
 }

src/store/modules/task-timeline.ts

@@ -0,0 +1,134 @@
+/**
+ * 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 { defineStore } from "pinia";
+import { ElMessage } from "element-plus";
+import { store } from "@/store";
+import graphql from "@/graphql";
+import type { AxiosResponse } from "axios";
+import { useAppStoreWithOut } from "@/store/modules/app";
+import type { EBPFTaskList } from "@/types/ebpf";
+import { useNetworkProfilingStore } from "@/store/modules/network-profiling";
+import { useSelectorStore } from "@/store/modules/selectors";
+import { useEbpfStore } from "@/store/modules/ebpf";
+import dateFormatStep from "@/utils/dateFormat";
+import getLocalTime from "@/utils/localtime";
+import { TargetTypes } from "@/views/dashboard/related/continuous-profiling/data";
+interface taskTimelineState {
+  loading: boolean;
+  taskList: EBPFTaskList[];
+  selectedTask: Recordable<EBPFTaskList>;
+}
+
+export const taskTimelineStore = defineStore({
+  id: "taskTimeline",
+  state: (): taskTimelineState => ({
+    loading: false,
+    taskList: [],
+    selectedTask: {},
+  }),
+  actions: {
+    setSelectedTask(task: Recordable<EBPFTaskList>) {
+      this.selectedTask = task || {};
+    },
+    setTaskList(list: EBPFTaskList[]) {
+      this.taskList = list;
+    },
+    async getContinousTaskList(params: {
+      serviceId: string;
+      serviceInstanceId: string;
+      targets: string[];
+      triggerType: string;
+    }) {
+      if (!params.serviceId) {
+        return new Promise((resolve) => resolve({}));
+      }
+      this.loading = true;
+      const res: AxiosResponse = await graphql.query("getEBPFTasks").params(params);
+
+      this.loading = false;
+      this.errorTip = "";
+      if (res.data.errors) {
+        return res.data;
+      }
+      const selectorStore = useSelectorStore();
+      this.taskList = (res.data.data.queryEBPFTasks || []).filter(
+        (d: EBPFTaskList) => selectorStore.currentProcess && d.processId === selectorStore.currentProcess.id,
+      );
+      // this.selectedTask = this.taskList[0] || {};
+      // await this.getGraphData();
+      return res.data;
+    },
+    async getGraphData() {
+      let res: any = {};
+
+      if (this.selectedTask.targetType === TargetTypes[2].value) {
+        res = await this.getTopology();
+      } else {
+        const ebpfStore = useEbpfStore();
+        res = await ebpfStore.getEBPFSchedules({
+          taskId: this.selectedTask.taskId,
+        });
+      }
+
+      if (res.errors) {
+        ElMessage.error(res.errors);
+      }
+    },
+    async getTopology() {
+      const networkProfilingStore = useNetworkProfilingStore();
+      const appStore = useAppStoreWithOut();
+      const selectorStore = useSelectorStore();
+      networkProfilingStore.setSelectedNetworkTask(this.selectedTask);
+      const { taskStartTime, fixedTriggerDuration } = this.selectedTask;
+      const startTime =
+        fixedTriggerDuration > 1800 ? taskStartTime + fixedTriggerDuration * 1000 - 30 * 60 * 1000 : taskStartTime;
+      let endTime = taskStartTime + fixedTriggerDuration * 1000;
+      if (taskStartTime + fixedTriggerDuration * 1000 > new Date().getTime()) {
+        endTime = new Date().getTime();
+      }
+      const resp = await networkProfilingStore.getProcessTopology({
+        serviceInstanceId: (selectorStore.currentPod || {}).id || "",
+        duration: {
+          start: dateFormatStep(getLocalTime(appStore.utc, new Date(startTime)), appStore.duration.step, true),
+          end: dateFormatStep(getLocalTime(appStore.utc, new Date(endTime)), appStore.duration.step, true),
+          step: appStore.duration.step,
+        },
+      });
+      if (resp.errors) {
+        ElMessage.error(resp.errors);
+      }
+      return resp;
+    },
+    async preAnalyzeTask() {
+      if (this.selectedStrategy.type === "NETWORK") {
+        const networkProfilingStore = useNetworkProfilingStore();
+        await networkProfilingStore.setSelectedNetworkTask(this.selectedTask);
+        return;
+      }
+      const res = await this.getEBPFSchedules({
+        taskId: this.selectedTask.taskId,
+      });
+      if (res.errors) {
+        ElMessage.error(res.errors);
+      }
+    },
+  },
+});
+
+export function useTaskTimelineStore(): Recordable {
+  return taskTimelineStore(store);
+}

src/store/modules/topology.ts

@@ -24,6 +24,7 @@ import { useAppStoreWithOut } from "@/store/modules/app";
 import type { AxiosResponse } from "axios";
 import query from "@/graphql/fetch";
 import { useQueryTopologyMetrics } from "@/hooks/useMetricsProcessor";
+import { useQueryTopologyExpressionsProcessor } from "@/hooks/useExpressionsProcessor";
 import { ElMessage } from "element-plus";
 
 interface MetricVal {
@@ -73,7 +74,7 @@ export const topologyStore = defineStore({
       this.nodes = data.nodes;
     },
     setTopology(data: { nodes: Node[]; calls: Call[] }) {
-      const obj = {} as any;
+      const obj = {} as Recordable;
       const services = useSelectorStore().services;
       const nodes = (data.nodes || []).reduce((prev: Node[], next: Node) => {
         if (!obj[next.id]) {
@@ -114,6 +115,16 @@ export const topologyStore = defineStore({
     setLinkClientMetrics(m: MetricVal) {
       this.linkClientMetrics = m;
     },
+    setLegendValues(expressions: string, data: { [key: string]: any }) {
+      for (let idx = 0; idx < this.nodes.length; idx++) {
+        for (let index = 0; index < expressions.length; index++) {
+          const k = "expression" + idx + index;
+          if (expressions[index]) {
+            this.nodes[idx][expressions[index]] = Number(data[k].results[0].values[0].value);
+          }
+        }
+      }
+    },
     async getDepthServiceTopology(serviceIds: string[], depth: number) {
       const res = await this.getServicesTopology(serviceIds);
       if (depth > 1) {
@@ -180,6 +191,9 @@ export const topologyStore = defineStore({
       }
     },
     async getServicesTopology(serviceIds: string[]) {
+      if (!serviceIds.length) {
+        return new Promise((resolve) => resolve({}));
+      }
       const duration = useAppStoreWithOut().durationTime;
       const res: AxiosResponse = await graphql.query("getServicesTopology").params({
         serviceIds,
@@ -196,7 +210,7 @@ export const topologyStore = defineStore({
       const clientServiceId = (currentDestService && currentDestService.id) || "";
       const duration = useAppStoreWithOut().durationTime;
       if (!(serverServiceId && clientServiceId)) {
-        return;
+        return new Promise((resolve) => resolve({}));
       }
       const res: AxiosResponse = await graphql.query("getInstanceTopology").params({
         clientServiceId,
@@ -209,6 +223,9 @@ export const topologyStore = defineStore({
       return res.data;
     },
     async updateEndpointTopology(endpointIds: string[], depth: number) {
+      if (!endpointIds.length) {
+        return new Promise((resolve) => resolve({}));
+      }
       const res = await this.getEndpointTopology(endpointIds);
       if (depth > 1) {
         const ids = res.nodes.map((item: Node) => item.id).filter((d: string) => !endpointIds.includes(d));
@@ -274,6 +291,9 @@ export const topologyStore = defineStore({
       }
     },
     async getEndpointTopology(endpointIds: string[]) {
+      if (!endpointIds.length) {
+        return new Promise((resolve) => resolve({}));
+      }
       const duration = useAppStoreWithOut().durationTime;
       const variables = ["$duration: Duration!"];
       const fragment = endpointIds.map((id: string, index: number) => {
@@ -302,8 +322,8 @@ export const topologyStore = defineStore({
         return res.data;
       }
       const topo = res.data.data;
-      const calls = [] as any;
-      const nodes = [] as any;
+      const calls = [] as Call[];
+      const nodes = [] as Node[];
       for (const key of Object.keys(topo)) {
         calls.push(...topo[key].calls);
         nodes.push(...topo[key].nodes);
@@ -321,6 +341,15 @@ export const topologyStore = defineStore({
       this.setNodeMetricValue(res.data.data);
       return res.data;
     },
+    async getNodeExpressionValue(param: { queryStr: string; conditions: { [key: string]: unknown } }) {
+      const res: AxiosResponse = await query(param);
+
+      if (res.data.errors) {
+        return res.data;
+      }
+
+      return res.data;
+    },
     async getLinkClientMetrics(linkClientMetrics: string[]) {
       if (!linkClientMetrics.length) {
         this.setLinkClientMetrics({});
@@ -353,6 +382,29 @@ export const topologyStore = defineStore({
         ElMessage.error(res.errors);
       }
     },
+    async getLinkExpressions(expressions: string[], type: string) {
+      if (!expressions.length) {
+        this.setLinkServerMetrics({});
+        return;
+      }
+      const calls = this.calls.filter((i: Call) => i.detectPoints.includes(type));
+      if (!calls.length) {
+        return;
+      }
+      const { getExpressionQuery, handleExpressionValues } = useQueryTopologyExpressionsProcessor(expressions, calls);
+      const param = getExpressionQuery();
+      const res = await this.getNodeExpressionValue(param);
+      if (res.errors) {
+        ElMessage.error(res.errors);
+        return;
+      }
+      const metrics = handleExpressionValues(res.data);
+      if (type === "SERVER") {
+        this.setLinkServerMetrics(metrics);
+      } else {
+        this.setLinkClientMetrics(metrics);
+      }
+    },
     async queryNodeMetrics(nodeMetrics: string[]) {
       if (!nodeMetrics.length) {
         this.setNodeMetricValue({});
@@ -369,6 +421,28 @@ export const topologyStore = defineStore({
         ElMessage.error(res.errors);
       }
     },
+    async queryNodeExpressions(expressions: string[]) {
+      if (!expressions.length) {
+        this.setNodeMetricValue({});
+        return;
+      }
+      if (!this.nodes.length) {
+        this.setNodeMetricValue({});
+        return;
+      }
+      const { getExpressionQuery, handleExpressionValues } = useQueryTopologyExpressionsProcessor(
+        expressions,
+        this.nodes,
+      );
+      const param = getExpressionQuery();
+      const res = await this.getNodeExpressionValue(param);
+      if (res.errors) {
+        ElMessage.error(res.errors);
+        return;
+      }
+      const metrics = handleExpressionValues(res.data);
+      this.setNodeMetricValue(metrics);
+    },
     async getLegendMetrics(param: { queryStr: string; conditions: { [key: string]: unknown } }) {
       const res: AxiosResponse = await query(param);
 
@@ -377,7 +451,7 @@ export const topologyStore = defineStore({
       }
       const data = res.data.data;
       const metrics = Object.keys(data);
-      this.nodes = this.nodes.map((d: Node | any) => {
+      this.nodes = this.nodes.map((d: Node & Recordable) => {
         for (const m of metrics) {
           for (const val of data[m].values) {
             if (d.id === val.id) {
@@ -410,6 +484,6 @@ export const topologyStore = defineStore({
   },
 });
 
-export function useTopologyStore(): any {
+export function useTopologyStore(): Recordable {
   return topologyStore(store);
 }

src/store/modules/trace.ts

@@ -31,9 +31,9 @@ interface TraceState {
   traceList: Trace[];
   traceSpans: Span[];
   currentTrace: Recordable<Trace>;
-  conditions: any;
-  traceSpanLogs: any[];
-  selectorStore: any;
+  conditions: Recordable;
+  traceSpanLogs: Recordable[];
+  selectorStore: Recordable;
 }
 
 export const traceStore = defineStore({
@@ -55,7 +55,7 @@ export const traceStore = defineStore({
     selectorStore: useSelectorStore(),
   }),
   actions: {
-    setTraceCondition(data: any) {
+    setTraceCondition(data: Recordable) {
       this.conditions = { ...this.conditions, ...data };
     },
     setCurrentTrace(trace: Recordable<Trace>) {
@@ -171,7 +171,7 @@ export const traceStore = defineStore({
       this.setTraceSpans(data || []);
       return res.data;
     },
-    async getSpanLogs(params: any) {
+    async getSpanLogs(params: Recordable) {
       const res: AxiosResponse = await graphql.query("queryServiceLogs").params(params);
       if (res.data.errors) {
         this.traceSpanLogs = [];
@@ -197,6 +197,6 @@ export const traceStore = defineStore({
   },
 });
 
-export function useTraceStore(): any {
+export function useTraceStore(): Recordable {
   return traceStore(store);
 }

src/styles/lib.scss

@@ -189,12 +189,12 @@
 .scroll_bar_style::-webkit-scrollbar-track {
   background-color: #eee;
   border-radius: 3px;
-  box-shadow: inset 0 0 6px #ccc;
+  box-shadow: inset 0 0 6px $disabled-color;
 }
 
 .scroll_bar_style::-webkit-scrollbar-thumb {
   border-radius: 3px;
-  box-shadow: inset 0 0 6px #ccc;
+  box-shadow: inset 0 0 6px $disabled-color;
   background-color: #aaa;
 }
 
@@ -215,3 +215,31 @@
   box-shadow: inset 0 0 6px #888;
   background-color: #999;
 }
+.d3-tip {
+  line-height: 1;
+  padding: 8px;
+  color: #eee;
+  border-radius: 4px;
+  font-size: $font-size-smaller;
+}
+.d3-tip {
+  background: #252a2f;
+}
+
+.d3-tip:after {
+  box-sizing: border-box;
+  display: block;
+  font-size: 10px;
+  width: 100%;
+  line-height: 0.8;
+  color: #252a2f;
+  content: "\25BC";
+  position: absolute;
+  text-align: center;
+}
+
+.d3-tip.n:after {
+  margin: -2px 0 0 0;
+  top: 100%;
+  left: 0;
+}