fix: update attached event's details (#200 )

fix: update attached event details (#199 )
fix: update attached event‘s occurrence date (#198 )
2025-09-24 07:59:28 +00:00 · 2022-12-02 15:03:29 +08:00 · 2022-12-01 13:06:46 +08:00 · 2022-12-01 10:47:30 +08:00 · 2022-11-30 16:48:49 +08:00 · 2022-11-29 18:47:53 +08:00
230 changed files with 14216 additions and 2879 deletions
--- a/.github/workflows/nodejs.yml
+++ b/.github/workflows/nodejs.yml
@@ -44,9 +44,9 @@ jobs:
        uses: actions/setup-node@v1
        with:
          node-version: ${{ matrix.node-version }}
-      - name: npm install, lint, build, and test
+      - name: npm ci, lint, build, and test
        run: |
-          npm install
+          npm ci
          npm run lint
          npm run build --if-present
          npm run test:unit
--- a/.licenserc.yaml
+++ b/.licenserc.yaml
@@ -28,6 +28,8 @@ header:
    - '.gitignore'
    - '.prettierrc'
    - '.browserslistrc'
+    - 'src/types/auto-imports.d.ts'
+    - 'src/types/components.d.ts'
    - '**/*.md'
    - '**/*.json'

--- a/.prettierignore
+++ b/.prettierignore
@@ -0,0 +1,21 @@
+#
+# 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.
+#
+
+/src/types/auto-imports.d.ts
+/src/types/components.d.ts
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "skywalking-booster-ui",
-  "version": "0.1.0",
+  "version": "9.3.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
@@ -12,17 +12,19 @@
  "dependencies": {
    "axios": "^0.24.0",
    "d3": "^7.3.0",
+    "d3-flame-graph": "^4.1.3",
    "d3-tip": "^0.9.1",
    "echarts": "^5.2.2",
    "element-plus": "^2.0.2",
    "lodash": "^4.17.21",
+    "monaco-editor": "^0.27.0",
    "pinia": "^2.0.5",
+    "vis-timeline": "^7.5.1",
    "vue": "^3.0.0",
    "vue-grid-layout": "^3.0.0-beta1",
    "vue-i18n": "^9.1.9",
    "vue-router": "^4.0.0-0",
-    "vue-types": "^4.1.1",
-    "vuex": "^4.0.0-0"
+    "vue-types": "^4.1.1"
  },
  "devDependencies": {
    "@types/d3": "^7.1.0",
@@ -34,7 +36,7 @@
    "@typescript-eslint/eslint-plugin": "^4.18.0",
    "@typescript-eslint/parser": "^4.18.0",
    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-e2e-cypress": "~4.5.0",
+    "@vue/cli-plugin-e2e-cypress": "~5.0.8",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
@@ -51,6 +53,7 @@
    "eslint-plugin-vue": "^7.0.0",
    "husky": "^7.0.4",
    "lint-staged": "^12.1.3",
+    "monaco-editor-webpack-plugin": "^4.1.2",
    "node-sass": "^6.0.1",
    "postcss-html": "^1.3.0",
    "postcss-scss": "^4.0.2",
@@ -63,6 +66,8 @@
    "stylelint-order": "^5.0.0",
    "svg-sprite-loader": "^6.0.11",
    "typescript": "~4.4.4",
+    "unplugin-auto-import": "^0.7.0",
+    "unplugin-vue-components": "^0.19.2",
    "vue-jest": "^5.0.0-0"
  },
  "eslintConfig": {
@@ -103,6 +108,9 @@
      }
    ]
  },
+  "eslintIgnore": [
+    "vue.config.js"
+  ],
  "browserslist": [
    "> 1%",
    "last 2 versions",
@@ -133,7 +141,7 @@
    "package.json": [
      "prettier --write"
    ],
-    "*.{scss,less,styl,html}": [
+    "*.{scss,less,styl}": [
      "stylelint --fix",
      "prettier --write"
    ],
--- a/public/index.html
+++ b/public/index.html
@@ -13,7 +13,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License. -->
 <!DOCTYPE html>
-<html lang="">
+<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
--- a/src/App.vue
+++ b/src/App.vue
@@ -13,11 +13,13 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
-  <router-view :key="$route.fullPath" />
+  <router-view />
 </template>
 <style>
 #app {
  color: #2c3e50;
  height: 100%;
+  overflow: hidden;
+  min-width: 1024px;
 }
 </style>
--- a/src/assets/icons/add_fill.svg
+++ b/src/assets/icons/add_fill.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="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>
--- a/src/assets/icons/arrow-down.svg
+++ b/src/assets/icons/arrow-down.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 xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path id="a" d="m10.472352 7.28232367c.3431062-.36783247.904419-.36783247 1.2592596-.00644059.3578153.36442148.3578153.95850784.0002156 1.28561559l-3.10532264 3.16826253c-.17025689.1734002-.39845625.2702388-.62654793.2702388-.24380864 0-.45151514-.0919745-.62697852-.2706782l-3.09835734-3.16693764c-.36405333-.352236-.36405333-.94614513-.01248284-1.28566765.34310619-.36783247.90441901-.36783247 1.25901327-.0066912l2.48658215 2.52737493z"/></svg>
--- a/src/assets/icons/circle.svg
+++ b/src/assets/icons/circle.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="1667899293763" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4705" width="16" height="16"><path d="M512 512m-368 0a368 368 0 1 0 736 0 368 368 0 1 0-736 0Z" p-id="4706"></path></svg>
--- a/src/assets/icons/conditions.svg
+++ b/src/assets/icons/conditions.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 t="1666624449554" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2649" width="48" height="48"><path d="M381.482667 673.877333a90.389333 90.389333 0 0 1 85.226666 60.245334H853.333333v64H465.28a90.389333 90.389333 0 0 1-167.573333 0H170.666667v-64h125.610666a90.389333 90.389333 0 0 1 85.205334-60.245334z m0 64a26.346667 26.346667 0 1 0 0 52.693334 26.346667 26.346667 0 0 0 0-52.693334z m261.034666-304.938666a90.389333 90.389333 0 0 1 85.205334 60.245333H853.333333v64h-127.04a90.389333 90.389333 0 0 1-167.573333 0H170.666667v-64h386.624a90.389333 90.389333 0 0 1 85.226666-60.245333z m0 64a26.346667 26.346667 0 1 0 0 52.693333 26.346667 26.346667 0 0 0 0-52.693333zM381.482667 192a90.389333 90.389333 0 0 1 85.226666 60.224H853.333333v64H465.28a90.389333 90.389333 0 0 1-167.573333 0H170.666667v-64h125.610666A90.389333 90.389333 0 0 1 381.482667 192z m0 64a26.346667 26.346667 0 1 0 0 52.693333 26.346667 26.346667 0 0 0 0-52.693333z" p-id="2650"></path></svg>
--- a/src/assets/icons/control.svg
+++ b/src/assets/icons/control.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="1648717513168" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15451" width="48" height="48"><path d="M810.666667 213.333333v597.333334H213.333333V213.333333h597.333334m85.333333-85.333333H128v768h768V128z m-512 170.666667h-85.333333v85.333333h85.333333z m170.666667 0h-85.333334v85.333333h85.333334z m-170.666667 170.666666h-85.333333v85.333334h85.333333z m170.666667 0h-85.333334v85.333334h85.333334z m-170.666667 170.666667h-85.333333v85.333333h85.333333z m170.666667 0h-85.333334v85.333333h85.333334z m170.666666-341.333333h-85.333333v85.333333h85.333333z m0 170.666666h-85.333333v85.333334h85.333333z m0 170.666667h-85.333333v85.333333h85.333333z" p-id="15452" fill="#515151"></path></svg>
+<svg t="1648717513168" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15451" width="48" height="48"><path d="M810.666667 213.333333v597.333334H213.333333V213.333333h597.333334m85.333333-85.333333H128v768h768V128z m-512 170.666667h-85.333333v85.333333h85.333333z m170.666667 0h-85.333334v85.333333h85.333334z m-170.666667 170.666666h-85.333333v85.333334h85.333333z m170.666667 0h-85.333334v85.333334h85.333334z m-170.666667 170.666667h-85.333333v85.333333h85.333333z m170.666667 0h-85.333334v85.333333h85.333334z m170.666666-341.333333h-85.333333v85.333333h85.333333z m0 170.666666h-85.333333v85.333334h85.333333z m0 170.666667h-85.333333v85.333333h85.333333z" p-id="15452"></path></svg>
--- a/src/assets/icons/copy.svg
+++ b/src/assets/icons/copy.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="1664265269855" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4109" width="48" height="48"><path d="M866.461538 39.384615H354.461538c-43.323077 0-78.769231 35.446154-78.76923 78.769231v39.384616h472.615384c43.323077 0 78.769231 35.446154 78.769231 78.76923v551.384616h39.384615c43.323077 0 78.769231-35.446154 78.769231-78.769231V118.153846c0-43.323077-35.446154-78.769231-78.769231-78.769231z m-118.153846 275.692308c0-43.323077-35.446154-78.769231-78.76923-78.769231H157.538462c-43.323077 0-78.769231 35.446154-78.769231 78.769231v590.769231c0 43.323077 35.446154 78.769231 78.769231 78.769231h512c43.323077 0 78.769231-35.446154 78.76923-78.769231V315.076923z m-354.461538 137.846154c0 11.815385-7.876923 19.692308-19.692308 19.692308h-157.538461c-11.815385 0-19.692308-7.876923-19.692308-19.692308v-39.384615c0-11.815385 7.876923-19.692308 19.692308-19.692308h157.538461c11.815385 0 19.692308 7.876923 19.692308 19.692308v39.384615z m157.538461 315.076923c0 11.815385-7.876923 19.692308-19.692307 19.692308H216.615385c-11.815385 0-19.692308-7.876923-19.692308-19.692308v-39.384615c0-11.815385 7.876923-19.692308 19.692308-19.692308h315.076923c11.815385 0 19.692308 7.876923 19.692307 19.692308v39.384615z m78.769231-157.538462c0 11.815385-7.876923 19.692308-19.692308 19.692308H216.615385c-11.815385 0-19.692308-7.876923-19.692308-19.692308v-39.384615c0-11.815385 7.876923-19.692308 19.692308-19.692308h393.846153c11.815385 0 19.692308 7.876923 19.692308 19.692308v39.384615z" p-id="4110"></path></svg>
--- a/src/assets/icons/demand.svg
+++ b/src/assets/icons/demand.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 t="1654161407133" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1721" width="16" height="16"><path d="M804.224 86.144c0-19.264-15.616-34.944-34.944-34.944l-734.336 0c-19.264 0-34.944 15.68-34.944 34.944l0 82.048 804.224 0 0-82.048zM738.88 602.432c0 47.072-38.176 85.248-85.248 85.248s-85.248-38.176-85.248-85.248c0-47.072 38.176-85.248 85.248-85.248s85.248 38.176 85.248 85.248zM804.992 264.64l0-62.976-804.224 0 0 665.408c0 18.56 14.656 33.472 32.96 34.56l402.24 0c61.12 44.544 136.192 71.168 217.664 71.168 204.544 0 370.368-165.824 370.368-370.368 0-150.592-89.984-279.936-219.008-337.792zM412.096 298.24l30.528 0c-10.624 7.36-20.8 15.36-30.528 23.744l0-23.744zM63.04 298.24l153.024 0 0 153.024-153.024 0 0-153.024zM216.064 805.056l-153.024 0 0-153.024 153.024 0 0 153.024zM219.136 631.232l-153.024 0 0-153.024 153.024 0 0 153.024zM237.568 805.056l0-153.024 49.408 0c7.488 55.936 27.264 107.904 56.832 153.024l-106.24 0zM284.672 631.232l-44.032 0 0-153.024 64.384 0c-13.824 38.848-21.824 80.576-21.824 124.224 0 9.728 0.768 19.264 1.472 28.8zM390.592 341.76c-31.168 31.424-56.512 68.544-74.88 109.44l-78.144 0 0-152.96 153.024 0 0 43.52zM899.136 638.4l-63.36 12.864c-4.288 16.064-10.688 31.296-18.816 45.376l35.712 53.888-50.944 50.944-53.888-35.712c-14.08 8.128-29.312 14.528-45.376 18.816l-12.864 63.36-72 0-12.864-63.36c-16.064-4.288-31.296-10.688-45.376-18.816l-53.888 35.712-50.944-50.944 35.712-53.888c-8.128-14.08-14.528-29.312-18.816-45.376l-63.36-12.864 0-72 63.36-12.864c4.352-16.064 10.688-31.296 18.816-45.312l-35.712-53.952 50.944-50.944 53.888 35.776c14.08-8.128 29.312-14.464 45.376-18.816l12.864-63.36 72 0 12.864 63.36c16.064 4.288 31.296 10.688 45.376 18.816l53.888-35.712 50.944 50.944-35.712 53.824c8.128 14.08 14.528 29.312 18.816 45.376l63.36 12.864 0 72z" p-id="1722" fill="#707070"></path></svg>
--- a/src/assets/icons/event.svg
+++ b/src/assets/icons/event.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="1655695739627" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2218" width="48" height="48"><path d="M173.292308 177.230769C86.646154 265.846154 39.384615 382.030769 39.384615 504.123077 39.384615 531.692308 61.046154 551.384615 86.646154 551.384615s47.261538-21.661538 47.261538-47.261538c-1.969231-96.492308 37.415385-189.046154 106.338462-257.969231s163.446154-106.338462 257.969231-106.338461c27.569231 0 47.261538-21.661538 47.261538-47.261539 0-27.569231-21.661538-47.261538-47.261538-47.261538C378.092308 43.323077 259.938462 90.584615 173.292308 177.230769z m57.107692 326.892308c0 27.569231 19.692308 47.261538 47.261538 47.261538s47.261538-21.661538 47.261539-47.261538c0-45.292308 17.723077-90.584615 51.2-122.092308 33.476923-33.476923 76.8-49.230769 122.092308-51.2 27.569231 0 47.261538-21.661538 47.261538-47.261538 0-27.569231-19.692308-47.261538-47.261538-47.261539-70.892308 0-139.815385 27.569231-191.015385 76.8-7.876923 9.846154-80.738462 82.707692-76.8 191.015385z m665.6-204.8c-17.723077-23.630769-41.353846-51.2-45.292308-55.138462-5.907692-3.938462-13.784615-7.876923-21.661538-7.876923-7.876923 0-15.753846 1.969231-19.692308 7.876923L610.461538 441.107692c-47.261538-39.384615-118.153846-37.415385-163.446153 7.876923-45.292308 45.292308-47.261538 116.184615-7.876923 163.446154l-191.015385 191.015385c-5.907692 5.907692-9.846154 13.784615-9.846154 21.661538 0 9.846154 3.938462 19.692308 11.815385 25.6l53.16923 39.384616c72.861538 57.107692 163.446154 88.615385 259.938462 88.615384 232.369231 0 421.415385-189.046154 421.415385-421.415384 0-94.523077-33.476923-185.107692-88.615385-257.969231z" p-id="2219" fill="#707070"></path></svg>
--- a/src/assets/icons/gateway.svg
+++ b/src/assets/icons/gateway.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="1664244255409" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2266" width="48" height="48"><path d="M523.776 430.592l-153.088 88.576 153.088 88.576 152.576-88.576-152.576-88.576z m-165.888 108.544l0.512 177.152 153.6 87.552-1.024-176.64-153.088-88.064z m330.24 0l-153.6 87.552-1.024 176.64 153.6-87.552 1.024-176.64z m131.072 205.824l-68.096-40.96 39.936-8.704-5.632-26.112-67.072 14.848-13.824 23.04 101.376 60.928 13.312-23.04z m-142.848 7.68l68.096 40.96-39.936 8.704 5.632 26.112 67.072-14.848 13.824-23.04-101.888-60.928-12.8 23.04zM481.28 424.96h26.624V306.176H481.28v79.36l-27.648-29.696-19.456 18.432L481.28 424.96z m53.76-118.784V424.96h26.624V345.088l27.648 29.696 19.456-18.432-47.104-50.176h-26.624z m-190.464 401.92l-13.312-23.04-68.608 40.448 11.264-38.912-25.6-7.168-18.944 66.048 13.312 23.04 101.888-60.416z m-89.088 82.944l13.312 23.04 68.608-39.936-11.264 38.912 25.6 7.168 19.456-66.048-13.312-23.04-102.4 59.904z m622.08-45.056c-45.568 0-82.432 36.864-82.432 82.432 0 45.568 36.864 82.432 82.432 82.432 45.568 0 82.432-36.864 82.432-82.432 0-45.568-36.864-82.432-82.432-82.432z m0 122.88c-22.528 0-40.448-17.92-40.448-40.448s17.92-40.448 40.448-40.448 40.448 17.92 40.448 40.448-17.92 40.448-40.448 40.448zM521.728 292.864c45.568 0 82.432-36.864 82.432-82.432 0-45.568-36.864-82.432-82.432-82.432-45.568 0-82.432 36.864-82.432 82.432 0 45.568 36.864 82.432 82.432 82.432z m0-122.88c22.528 0 40.448 17.92 40.448 40.448s-17.92 40.448-40.448 40.448-40.448-17.92-40.448-40.448 18.432-40.448 40.448-40.448zM167.936 749.056c-45.568 0-82.432 36.864-82.432 82.432 0 45.568 36.864 82.432 82.432 82.432 45.568 0 82.432-36.864 82.432-82.432 0-45.568-36.864-82.432-82.432-82.432z m0 122.88c-22.528 0-40.448-17.92-40.448-40.448s17.92-40.448 40.448-40.448 40.448 17.92 40.448 40.448-18.432 40.448-40.448 40.448z" p-id="2267"></path></svg>
--- a/src/assets/icons/info_outline.svg
+++ b/src/assets/icons/info_outline.svg
@@ -13,6 +13,5 @@ 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>info_outline</title>
 <path d="M11.016 9v-2.016h1.969v2.016h-1.969zM12 20.016q3.281 0 5.648-2.367t2.367-5.648-2.367-5.648-5.648-2.367-5.648 2.367-2.367 5.648 2.367 5.648 5.648 2.367zM12 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.93zM11.016 17.016v-6h1.969v6h-1.969z"></path>
 </svg>
--- a/src/assets/icons/insert_chart.svg
+++ b/src/assets/icons/insert_chart.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="M17.016 17.016v-4.031h-2.016v4.031h2.016zM12.984 17.016v-10.031h-1.969v10.031h1.969zM9 17.016v-7.031h-2.016v7.031h2.016zM18.984 3q0.797 0 1.406 0.609t0.609 1.406v13.969q0 0.797-0.609 1.406t-1.406 0.609h-13.969q-0.797 0-1.406-0.609t-0.609-1.406v-13.969q0-0.797 0.609-1.406t1.406-0.609h13.969z"></path>
+</svg>
--- a/src/assets/icons/keyboard_arrow_down.svg
+++ b/src/assets/icons/keyboard_arrow_down.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="M7.406 8.578l4.594 4.594 4.594-4.594 1.406 1.406-6 6-6-6z"></path>
+</svg>
--- a/src/assets/icons/keyboard_arrow_up.svg
+++ b/src/assets/icons/keyboard_arrow_up.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="M7.406 15.422l-1.406-1.406 6-6 6 6-1.406 1.406-4.594-4.594z"></path>
+</svg>
--- a/src/assets/icons/library_add.svg
+++ b/src/assets/icons/library_add.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="M18.984 11.016v-2.016h-3.984v-3.984h-2.016v3.984h-3.984v2.016h3.984v3.984h2.016v-3.984h3.984zM20.016 2.016q0.797 0 1.383 0.586t0.586 1.383v12q0 0.797-0.586 1.406t-1.383 0.609h-12q-0.797 0-1.406-0.609t-0.609-1.406v-12q0-0.797 0.609-1.383t1.406-0.586h12zM3.984 6v14.016h14.016v1.969h-14.016q-0.797 0-1.383-0.586t-0.586-1.383v-14.016h1.969z"></path>
+</svg>
--- a/src/assets/icons/operation.svg
+++ b/src/assets/icons/operation.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="1664266918236" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5378" width="48" height="48"><path d="M571.178667 643.328a144 144 0 0 1-189.098667-193.450667l77.781333 77.866667a48 48 0 1 0 67.882667-67.84l-77.824-77.909333a144 144 0 0 1 193.450667 189.141333l226.517333 207.061333a64.896 64.896 0 1 1-91.690667 91.690667l-207.018666-226.56z m51.498666 134.656a288.298667 288.298667 0 0 1-38.656 12.928v95.488c0 5.290667-4.309333 9.6-9.642666 9.6h-124.757334a9.6 9.6 0 0 1-9.6-9.6v-95.488a286.293333 286.293333 0 0 1-74.325333-30.805333l-67.541333 67.541333a9.6 9.6 0 0 1-13.568 0L196.352 739.413333a9.6 9.6 0 0 1 0-13.568l67.541333-67.541333a286.293333 286.293333 0 0 1-30.805333-74.325333H137.6A9.6 9.6 0 0 1 128 574.378667v-124.757334c0-5.290667 4.309333-9.6 9.6-9.6h95.488c6.826667-26.453333 17.28-51.370667 30.805333-74.325333L196.352 298.154667a9.6 9.6 0 0 1 0-13.568L284.586667 196.352a9.6 9.6 0 0 1 13.568 0l67.541333 67.498667a287.146667 287.146667 0 0 1 74.325333-30.848V137.6c0-5.290667 4.266667-9.6 9.6-9.6h124.8c5.248 0 9.6 4.309333 9.6 9.6v95.488c26.368 6.826667 51.328 17.28 74.282667 30.805333l67.541333-67.541333a9.6 9.6 0 0 1 13.568 0l88.234667 88.234667a9.6 9.6 0 0 1 0 13.568l-67.498667 67.541333a287.146667 287.146667 0 0 1 30.848 74.282667h95.402667c5.290667 0 9.6 4.352 9.6 9.642666v124.757334c0 5.333333-4.266667 9.6-9.6 9.6h-95.488c-4.693333 18.133333-11.178667 35.754667-19.328 52.650666a9.6 9.6 0 0 1-15.018667 2.986667l-10.112-9.173333-38.314666-34.261334-12.16-10.88a9.6 9.6 0 0 1-2.688-10.24A192.298667 192.298667 0 0 0 512 320a192 192 0 1 0 63.018667 373.333333 9.6 9.6 0 0 1 10.24 2.645334l10.837333 12.074666 35.285333 39.338667 8.149334 9.130667a9.6 9.6 0 0 1-2.901334 15.061333 283.306667 283.306667 0 0 1-13.952 6.4z" p-id="5379"></path></svg>
--- a/src/assets/icons/setting_empty.svg
+++ b/src/assets/icons/setting_empty.svg
--- a/src/assets/icons/time_range.svg
+++ b/src/assets/icons/time_range.svg
@@ -0,0 +1,19 @@
+<!-- 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="1660976558460" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="813" width="48" height="48">
+<path d="M498.596 482.29H345.42v57.308h210.478V274.197h-57.301V482.29z m0 0M577.685 644.985h379.88v57.302h-379.88v-57.302z m0 0M577.685 773.765h379.88v57.307h-379.88v-57.307z m0 0M577.685 902.55h379.88v57.307h-379.88V902.55z m0 0" p-id="814"></path>
+<path d="M102.523 382.29a28.668 28.668 0 0 0 23.367 2.56l190.81-61.886c15.053-4.883 23.298-21.04 18.415-36.09-4.882-15.052-21.04-23.297-36.093-18.415l-123.346 40c15.994-26.117 35.17-50.538 57.37-72.745 73.768-73.767 171.847-114.388 276.169-114.388 104.32 0 202.395 40.622 276.161 114.388S899.77 407.56 899.77 511.882c0 26.428-2.616 52.45-7.71 77.78h58.303c4.465-25.499 6.709-51.47 6.709-77.78 0-60.45-11.846-119.102-35.205-174.336-22.56-53.335-54.85-101.227-95.969-142.35-41.122-41.122-89.017-73.408-142.348-95.968-55.233-23.361-113.89-35.207-174.334-35.207-60.45 0-119.107 11.846-174.337 35.208-53.335 22.56-101.23 54.846-142.35 95.969-23.98 23.98-44.933 50.278-62.727 78.6l-20.738-105.654c-3.043-15.528-18.105-25.642-33.632-22.6-15.528 3.048-25.643 18.105-22.6 33.637l36.103 183.932a28.666 28.666 0 0 0 13.588 19.178z m0 0M126.02 587.942H67.768c5.76 33.679 15.368 66.544 28.79 98.278 22.56 53.334 54.85 101.225 95.972 142.348 41.123 41.123 89.014 73.409 142.349 95.969 54.112 22.888 111.518 34.711 170.668 35.182v-57.324c-102.95-0.941-199.595-41.446-272.5-114.349-55.501-55.502-92.237-124.77-107.027-200.104z m0 0" p-id="815">
+</path>
+</svg>
--- a/src/assets/icons/timeline.svg
+++ b/src/assets/icons/timeline.svg
@@ -13,6 +13,5 @@ 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>timeline</title>
 <path d="M23.016 8.016q0 0.797-0.609 1.383t-1.406 0.586h-0.047q-0.328 0-0.469-0.047l-3.563 3.563q0.094 0.281 0.094 0.516 0 0.797-0.609 1.383t-1.406 0.586-1.406-0.586-0.609-1.383q0-0.234 0.094-0.516l-2.578-2.578q-0.281 0.094-0.516 0.094t-0.516-0.094l-4.547 4.547q0.094 0.281 0.094 0.516 0 0.797-0.609 1.406t-1.406 0.609-1.406-0.609-0.609-1.406 0.609-1.383 1.406-0.586q0.375 0 0.516 0.047l4.547-4.547q-0.047-0.141-0.047-0.516 0-0.797 0.586-1.406t1.383-0.609 1.406 0.609 0.609 1.406q0 0.375-0.047 0.516l2.531 2.531q0.141-0.047 0.516-0.047t0.516 0.047l3.563-3.516q-0.094-0.281-0.094-0.516 0-0.797 0.609-1.406t1.406-0.609 1.406 0.609 0.609 1.406z"></path>
 </svg>
--- a/src/assets/icons/view.svg
+++ b/src/assets/icons/view.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="1650287922642" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3055" width="48" height="48"><path d="M277.333333 325.333333m5.333334 0l325.333333 0q5.333333 0 5.333333 5.333334l0 64q0 5.333333-5.333333 5.333333l-325.333333 0q-5.333333 0-5.333334-5.333333l0-64q0-5.333333 5.333334-5.333334Z" p-id="3056" fill="#707070"></path><path d="M277.333333 474.666667m5.333334 0l325.333333 0q5.333333 0 5.333333 5.333333l0 64q0 5.333333-5.333333 5.333333l-325.333333 0q-5.333333 0-5.333334-5.333333l0-64q0-5.333333 5.333334-5.333333Z" p-id="3057" fill="#707070"></path><path d="M277.333333 624m5.333334 0l247.36 0q5.333333 0 5.333333 5.333333l0 64q0 5.333333-5.333333 5.333334l-247.36 0q-5.333333 0-5.333334-5.333334l0-64q0-5.333333 5.333334-5.333333Z" p-id="3058" fill="#707070"></path><path d="M565.333333 842.666667H186.666667a5.333333 5.333333 0 0 1-5.333334-5.333334V186.666667a5.333333 5.333333 0 0 1 5.333334-5.333334h522.666666v346.24a5.333333 5.333333 0 0 0 5.333334 5.333334h64a5.333333 5.333333 0 0 0 5.333333-5.333334V106.666667H112a5.333333 5.333333 0 0 0-5.333333 5.333333v800a5.333333 5.333333 0 0 0 5.333333 5.333333h453.333333a5.333333 5.333333 0 0 0 5.333334-5.333333v-64a5.333333 5.333333 0 0 0-5.333334-5.333333z" p-id="3059" fill="#707070"></path><path d="M868.426667 723.786667a144.64 144.64 0 1 0-144.64 144.64 144.64 144.64 0 0 0 144.64-144.64z m-144.64 69.973333a69.973333 69.973333 0 1 1 69.973333-69.973333 70.026667 70.026667 0 0 1-69.973333 69.973333z" p-id="3060" fill="#707070"></path><path d="M811.758007 864.533065m3.771237-3.771236l45.254834-45.254834q3.771236-3.771236 7.542472 0l45.254834 45.254834q3.771236 3.771236 0 7.542472l-45.254834 45.254834q-3.771236 3.771236-7.542472 0l-45.254834-45.254834q-3.771236-3.771236 0-7.542472Z" p-id="3061" fill="#707070"></path></svg>
--- a/src/assets/img/technologies/APACHESHENYU.png
+++ b/src/assets/img/technologies/APACHESHENYU.png
--- a/src/assets/img/technologies/BOTTLE.png
+++ b/src/assets/img/technologies/BOTTLE.png
--- a/src/assets/img/technologies/EVENTMESH.png
+++ b/src/assets/img/technologies/EVENTMESH.png
--- a/src/assets/img/technologies/HTTPDARK.png
+++ b/src/assets/img/technologies/HTTPDARK.png
--- a/src/assets/img/technologies/HTTPS.png
+++ b/src/assets/img/technologies/HTTPS.png
--- a/src/assets/img/technologies/IMPALA.png
+++ b/src/assets/img/technologies/IMPALA.png
--- a/src/assets/img/technologies/MICRONAUT.png
+++ b/src/assets/img/technologies/MICRONAUT.png
--- a/src/assets/img/technologies/NATS.png
+++ b/src/assets/img/technologies/NATS.png
--- a/src/components/DateCalendar.vue
+++ b/src/components/DateCalendar.vue
@@ -247,7 +247,7 @@ limitations under the License. -->
              (state.showMinutes = state.showSeconds = false)
          "
          :class="{ on: state.showHours }"
-          >{{ state.hour || dd }}</a
+          >{{ dd(state.hour) }}</a
        >
        <span>:</span>
        <a
@@ -257,7 +257,7 @@ limitations under the License. -->
              (state.showHours = state.showSeconds = false)
          "
          :class="{ on: state.showMinutes }"
-          >{{ state.minute || dd }}</a
+          >{{ dd(state.minute) }}</a
        >
        <span v-show="state.m !== 'D'">
          <span>:</span>
@@ -268,7 +268,7 @@ limitations under the License. -->
                (state.showHours = state.showMinutes = false)
            "
            :class="{ on: state.showSeconds }"
-            >{{ state.second || dd }}</a
+            >{{ dd(state.second) }}</a
          >
        </span>
      </div>
@@ -464,7 +464,6 @@ const status = (
    const minutes = time.getMinutes();
    const seconds = time.getSeconds();
    const milliseconds = time.getMilliseconds();
-    const dd = (t: number) => `0${t}`.slice(-2);
    const map: { [key: string]: string | number } = {
      YYYY: year,
      MM: dd(month + 1),
@@ -553,7 +552,7 @@ const ok = (info: any) => {
  if (props.right && _time.getTime() / 100000 > start.value) {
    emit("setDates", _time, "right");
  }
-  if (!(props.left && props.right)) {
+  if (!(props.left || props.right)) {
    emit("setDates", _time);
  }
  emit("ok", info === "h");
@@ -633,11 +632,6 @@ onMounted(() => {
  right: 24px;
 }

-.calendar-next-month-btn .middle,
-.calendar-prev-month-btn .middle {
-  margin-top: 8px;
-}
-
 .calendar-body {
  position: relative;
  width: 196px;
--- a/src/components/Graph.vue
+++ b/src/components/Graph.vue
@@ -15,6 +15,28 @@ limitations under the License. -->
 <template>
  <div class="chart" ref="chartRef" :style="`height:${height};width:${width};`">
    <div v-if="!available" class="no-data">No Data</div>
+    <div class="menus" v-show="visMenus" ref="menus">
+      <div class="tools" @click="associateMetrics" v-if="associate.length">
+        {{ t("associateMetrics") }}
+      </div>
+      <div
+        class="tools"
+        @click="viewTrace"
+        v-if="relatedTrace && relatedTrace.enableRelate"
+      >
+        {{ t("viewTrace") }}
+      </div>
+    </div>
+    <el-drawer
+      v-model="showTrace"
+      size="100%"
+      :destroy-on-close="true"
+      :before-close="() => (showTrace = false)"
+      :append-to-body="true"
+      title="The Related Traces"
+    >
+      <Trace :data="traceOptions" />
+    </el-drawer>
  </div>
 </template>
 <script lang="ts" setup>
@@ -28,15 +50,28 @@ import {
  computed,
 } from "vue";
 import type { PropType } from "vue";
+import { useI18n } from "vue-i18n";
+import { EventParams } from "@/types/app";
+import { Filters, RelatedTrace } from "@/types/dashboard";
 import { useECharts } from "@/hooks/useEcharts";
 import { addResizeListener, removeResizeListener } from "@/utils/event";
+import Trace from "@/views/dashboard/related/trace/Index.vue";
+import associateProcessor from "@/hooks/useAssociateProcessor";

 /*global Nullable, defineProps, defineEmits*/
 const emits = defineEmits(["select"]);
+const { t } = useI18n();
 const chartRef = ref<Nullable<HTMLDivElement>>(null);
+const menus = ref<Nullable<HTMLDivElement>>(null);
+const visMenus = ref<boolean>(false);
 const { setOptions, resize, getInstance } = useECharts(
  chartRef as Ref<HTMLDivElement>
 );
+const currentParams = ref<Nullable<EventParams>>(null);
+const showTrace = ref<boolean>(false);
+const traceOptions = ref<{ type: string; filters?: unknown }>({
+  type: "Trace",
+});
 const props = defineProps({
  height: { type: String, default: "100%" },
  width: { type: String, default: "100%" },
@@ -44,6 +79,16 @@ const props = defineProps({
    type: Object as PropType<{ [key: string]: any }>,
    default: () => ({}),
  },
+  filters: {
+    type: Object as PropType<Filters>,
+  },
+  relatedTrace: {
+    type: Object as PropType<RelatedTrace>,
+  },
+  associate: {
+    type: Array as PropType<{ widgetId: string }[]>,
+    default: () => [],
+  },
 });
 const available = computed(
  () =>
@@ -53,22 +98,99 @@ const available = computed(
    (Array.isArray(props.option.series.data) && props.option.series.data[0])
 );
 onMounted(async () => {
-  if (!available.value) {
-    return;
-  }
  await setOptions(props.option);
  chartRef.value && addResizeListener(unref(chartRef), resize);
+  instanceEvent();
+});
+
+function instanceEvent() {
  setTimeout(() => {
    const instance = getInstance();

    if (!instance) {
      return;
    }
-    instance.on("click", (params: any) => {
-      emits("select", params);
+    instance.on("click", (params: EventParams) => {
+      currentParams.value = params;
+      if (!menus.value || !chartRef.value) {
+        return;
+      }
+      visMenus.value = true;
+      const w = chartRef.value.getBoundingClientRect().width || 0;
+      const h = chartRef.value.getBoundingClientRect().height || 0;
+      if (w - params.event.offsetX > 120) {
+        menus.value.style.left = params.event.offsetX + "px";
+      } else {
+        menus.value.style.left = params.event.offsetX - 120 + "px";
+      }
+      if (h - params.event.offsetY < 50) {
+        menus.value.style.top = params.event.offsetY - 40 + "px";
+      } else {
+        menus.value.style.top = params.event.offsetY + 2 + "px";
+      }
    });
+    document.addEventListener(
+      "click",
+      () => {
+        if (instance.isDisposed()) {
+          return;
+        }
+        visMenus.value = false;
+        instance.dispatchAction({
+          type: "updateAxisPointer",
+          currTrigger: "leave",
+        });
+      },
+      true
+    );
  }, 1000);
-});
+}
+
+function associateMetrics() {
+  emits("select", currentParams.value);
+  const { dataIndex, seriesIndex } = currentParams.value || {
+    dataIndex: 0,
+    seriesIndex: 0,
+  };
+  updateOptions({ dataIndex, seriesIndex });
+}
+
+function updateOptions(params?: { dataIndex: number; seriesIndex: number }) {
+  const instance = getInstance();
+  if (!instance) {
+    return;
+  }
+  if (!props.filters) {
+    return;
+  }
+  if (props.filters.isRange) {
+    const { eventAssociate } = associateProcessor(props);
+    const options = eventAssociate();
+    setOptions(options || props.option);
+  } else {
+    instance.dispatchAction({
+      type: "updateAxisPointer",
+      dataIndex: params ? params.dataIndex : props.filters.dataIndex,
+      seriesIndex: params ? params.seriesIndex : 0,
+    });
+    const ids = props.option.series.map((_: unknown, index: number) => index);
+    instance.dispatchAction({
+      type: "highlight",
+      dataIndex: params ? params.dataIndex : props.filters.dataIndex,
+      seriesIndex: ids,
+    });
+  }
+}
+
+function viewTrace() {
+  const item = associateProcessor(props).traceFilters(currentParams.value);
+  traceOptions.value = {
+    ...traceOptions.value,
+    filters: item,
+  };
+  showTrace.value = true;
+  visMenus.value = true;
+}

 watch(
  () => props.option,
@@ -79,7 +201,18 @@ watch(
    if (JSON.stringify(newVal) === JSON.stringify(oldVal)) {
      return;
    }
-    setOptions(newVal);
+    let options;
+    if (props.filters && props.filters.isRange) {
+      const { eventAssociate } = associateProcessor(props);
+      options = eventAssociate();
+    }
+    setOptions(options || props.option);
+  }
+);
+watch(
+  () => props.filters,
+  () => {
+    updateOptions();
  }
 );

@@ -101,5 +234,30 @@ onBeforeUnmount(() => {

 .chart {
  overflow: hidden;
+  flex: 1;
+}
+
+.menus {
+  position: absolute;
+  display: block;
+  white-space: nowrap;
+  z-index: 9999999;
+  box-shadow: #ddd 1px 2px 10px;
+  transition: all cubic-bezier(0.075, 0.82, 0.165, 1) linear;
+  background-color: rgb(255, 255, 255);
+  border-radius: 4px;
+  color: rgb(51, 51, 51);
+  padding: 5px;
+}
+
+.tools {
+  padding: 5px;
+  color: #999;
+  cursor: pointer;
+
+  &:hover {
+    color: #409eff;
+    background-color: #eee;
+  }
 }
 </style>
--- a/src/components/Radio.vue
+++ b/src/components/Radio.vue
@@ -24,15 +24,15 @@ import { ref } from "vue";
 import type { PropType } from "vue";

 interface Option {
-  label: string;
-  value: string;
+  label: string | number;
+  value: string | number;
 }

 /*global  defineProps, defineEmits */
 const emit = defineEmits(["change"]);
 const props = defineProps({
  options: {
-    type: Array as PropType<(Option & { disabled: boolean })[]>,
+    type: Array as PropType<Option[]>,
    default: () => [],
  },
  value: {
@@ -44,7 +44,7 @@ const props = defineProps({

 const selected = ref<string>(props.value);

-function checked(opt: string) {
+function checked(opt: unknown) {
  emit("change", opt);
 }
 </script>
--- a/src/components/SelectSingle.vue
+++ b/src/components/SelectSingle.vue
@@ -45,7 +45,7 @@ import { Option } from "@/types/app";
 const emit = defineEmits(["change"]);
 const props = defineProps({
  options: {
-    type: Array as PropType<(Option & { disabled: boolean })[]>,
+    type: Array as PropType<Option[]>,
    default: () => [],
  },
  value: {
--- a/src/components/Selector.vue
+++ b/src/components/Selector.vue
@@ -18,7 +18,6 @@ limitations under the License. -->
    v-model="selected"
    :placeholder="placeholder"
    @change="changeSelected"
-    filterable
    :multiple="multiple"
    :disabled="disabled"
    :style="{ borderRadius }"
@@ -26,12 +25,13 @@ limitations under the License. -->
    :remote="isRemote"
    :reserve-keyword="isRemote"
    :remote-method="remoteMethod"
+    :filterable="filterable"
  >
    <el-option
      v-for="item in options"
-      :key="item.value"
-      :label="item.label"
-      :value="item.value"
+      :key="item.value || ''"
+      :label="item.label || ''"
+      :value="item.value || ''"
    >
    </el-option>
  </el-select>
@@ -58,7 +58,7 @@ const props = defineProps({
  },
  size: { type: null, default: "default" },
  placeholder: {
-    type: [String, Number] as PropType<string | number>,
+    type: [String, undefined] as PropType<string>,
    default: "Select a option",
  },
  borderRadius: { type: Number, default: 3 },
@@ -66,6 +66,7 @@ const props = defineProps({
  disabled: { type: Boolean, default: false },
  clearable: { type: Boolean, default: false },
  isRemote: { type: Boolean, default: false },
+  filterable: { type: Boolean, default: true },
 });

 const selected = ref<string[] | string>(props.value);
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -14,13 +14,13 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
+import type { App } from "vue";
 import Icon from "./Icon.vue";
 import TimePicker from "./TimePicker.vue";
 import Selector from "./Selector.vue";
 import Graph from "./Graph.vue";
 import Radio from "./Radio.vue";
 import SelectSingle from "./SelectSingle.vue";
-import type { App } from "vue";
 import VueGridLayout from "vue-grid-layout";

 const components: { [key: string]: any } = {
--- a/src/constants/data.ts
+++ b/src/constants/data.ts
@@ -14,6 +14,7 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
+
 export enum TimeType {
  MINUTE_TIME = "MINUTE",
  HOUR_TIME = "HOUR",
@@ -23,19 +24,5 @@ export enum TimeType {
 export const Languages = [
  { label: "English", value: "en" },
  { label: "Chinese", value: "zh" },
+  { label: "Spanish", value: "es" },
 ];
-
-export const RoutesMap: { [key: string]: string } = {
-  GeneralServices: "GENERAL",
-  Database: "VIRTUAL_DATABASE",
-  MeshServices: "MESH",
-  ControlPanel: "MESH_CP",
-  DataPanel: "MESH_DP",
-  Linux: "OS_LINUX",
-  SkyWalkingServer: "SO11Y_OAP",
-  Satellite: "SO11Y_SATELLITE",
-  Functions: "FAAS",
-  Browser: "BROWSER",
-  KubernetesCluster: "K8S",
-  KubernetesService: "K8S_SERVICE",
-};
--- a/src/graphql/fragments/alarm.ts
+++ b/src/graphql/fragments/alarm.ts
@@ -45,6 +45,5 @@ export const Alarm = {
          endTime
        }
      }
-      total
    }`,
 };
--- a/src/graphql/fragments/demand-log.ts
+++ b/src/graphql/fragments/demand-log.ts
@@ -0,0 +1,36 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export const queryContainers = {
+  variable: "$condition: OndemandContainergQueryCondition!",
+  query: `
+  containers: listContainers(condition: $condition) {
+    errorReason
+    containers
+  }`,
+};
+
+export const queryStreamingLogs = {
+  variable: "$condition: OndemandLogQueryCondition",
+  query: `
+  logs: ondemandPodLogs(condition: $condition) {
+    errorReason
+    logs {
+      content
+    }
+  }`,
+};
--- a/src/graphql/fragments/ebpf.ts
+++ b/src/graphql/fragments/ebpf.ts
@@ -0,0 +1,114 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export const queryCreateTaskData = {
+  variable: "$serviceId: ID!",
+  query: `
+  createTaskData: queryPrepareCreateEBPFProfilingTaskData(serviceId: $serviceId) {
+    couldProfiling
+    processLabels
+    }`,
+};
+export const createEBPFTask = {
+  variable: "$request: EBPFProfilingTaskFixedTimeCreationRequest!",
+  query: `
+  createTaskData: createEBPFProfilingFixedTimeTask(request: $request) {
+    status
+    errorReason
+    id
+  }`,
+};
+export const queryEBPFTasks = {
+  variable:
+    "$serviceId: ID, $serviceInstanceId: ID, $targets: [EBPFProfilingTargetType!]",
+  query: `
+  queryEBPFTasks: queryEBPFProfilingTasks(serviceId: $serviceId, serviceInstanceId: $serviceInstanceId, targets: $targets) {
+    taskId
+    serviceName
+    serviceId
+    serviceInstanceId
+    serviceInstanceName
+    processLabels
+    taskStartTime
+    triggerType
+    fixedTriggerDuration
+    targetType
+    createTime
+  }`,
+};
+export const queryEBPFSchedules = {
+  variable: "$taskId: ID!",
+  query: `
+  eBPFSchedules: queryEBPFProfilingSchedules(taskId: $taskId) {
+    scheduleId
+    taskId
+    process {
+      id
+      name
+      serviceId
+      serviceName
+      instanceId
+      instanceName
+      agentId
+      detectType
+      attributes {
+        name
+        value
+      }
+      labels
+    }
+    startTime
+    endTime
+  }`,
+};
+
+export const analysisEBPFResult = {
+  variable:
+    "$scheduleIdList: [ID!]!, $timeRanges: [EBPFProfilingAnalyzeTimeRange!]!, $aggregateType: EBPFProfilingAnalyzeAggregateType",
+  query: `
+  analysisEBPFResult: analysisEBPFProfilingResult(scheduleIdList: $scheduleIdList, timeRanges: $timeRanges, aggregateType: $aggregateType) {
+    tip
+    trees {
+      elements {
+        id
+        parentId
+        symbol
+        stackType
+        dumpCount
+      }
+    }
+  }`,
+};
+
+export const createNetworkProfiling = {
+  variable: "$request: EBPFProfilingNetworkTaskRequest!",
+  query: `
+  createEBPFNetworkProfiling(request: $request) {
+    status
+    errorReason
+    id
+  }`,
+};
+
+export const keepNetworkProfiling = {
+  variable: "$taskId: ID!",
+  query: `
+  keepEBPFNetworkProfiling(taskId: $taskId) {
+    status
+    errorReason
+  }`,
+};
--- a/src/graphql/fragments/event.ts
+++ b/src/graphql/fragments/event.ts
@@ -35,6 +35,5 @@ export const FetchEvents = {
      startTime
      endTime
    }
-    total
  }`,
 };
--- a/src/graphql/fragments/log.ts
+++ b/src/graphql/fragments/log.ts
@@ -30,7 +30,6 @@ export const QueryBrowserErrorLogs = {
           stack
           grade
        }
-        total
    }`,
 };

@@ -54,7 +53,6 @@ export const QueryServiceLogs = {
            value
          }
        }
-        total
    }`,
 };

@@ -63,3 +61,15 @@ export const QueryLogsByKeywords = {
  query: `
  support: supportQueryLogsByKeywords`,
 };
+
+export const LogTagKeys = {
+  variable: "$duration: Duration!",
+  query: `
+  tagKeys: queryLogTagAutocompleteKeys(duration: $duration)`,
+};
+
+export const LogTagValues = {
+  variable: "$tagKey: String!, $duration: Duration!",
+  query: `
+  tagValues: queryLogTagAutocompleteValues(tagKey: $tagKey, duration: $duration)`,
+};
--- a/src/graphql/fragments/selector.ts
+++ b/src/graphql/fragments/selector.ts
@@ -20,10 +20,10 @@ export const Services = {
  services: listServices(layer: $layer) {
    id
    value: name
-      label: name
-      group
-      layers
-      normal
+    label: name
+    group
+    layers
+    normal
  }
  `,
 };
@@ -36,19 +36,41 @@ export const Instances = {
  variable: "$serviceId: ID!, $duration: Duration!",
  query: `
  pods: listInstances(duration: $duration, serviceId: $serviceId) {
-     id
-     value: name
-      label: name
-      language
-      instanceUUID
-      layer
-      attributes {
-        name
-        value
-      }
+    id
+    value: name
+    label: name
+    language
+    instanceUUID
+    attributes {
+      name
+      value
    }
+  }
  `,
 };
+
+export const Processes = {
+  variable: "$instanceId: ID!, $duration: Duration!",
+  query: `
+  processes: listProcesses(instanceId: $instanceId, duration: $duration) {
+    id
+    value: name
+    label: name
+    serviceId
+    serviceName
+    instanceId
+    instanceName
+    agentId
+    detectType
+    attributes {
+      name
+      value
+    }
+    labels
+  }
+`,
+};
+
 export const Endpoints = {
  variable: "$serviceId: ID!, $keyword: String!",
  query: `
@@ -66,10 +88,10 @@ export const getService = {
  service: getService(serviceId: $serviceId) {
    id
    value: name
-      label: name
-      group
-      layers
-      normal
+    label: name
+    group
+    layers
+    normal
  }
  `,
 };
@@ -79,16 +101,15 @@ export const getInstance = {
  query: `
  instance: getInstance(instanceId: $instanceId) {
    id
-     value: name
-      label: name
-      language
-      instanceUUID
-      layer
-      attributes {
-        name
-        value
-      }
+    value: name
+    label: name
+    language
+    instanceUUID
+    attributes {
+      name
+      value
    }
+  }
  `,
 };

@@ -97,10 +118,31 @@ export const getEndpoint = {
  query: `
  endpoint: getEndpointInfo(endpointId: $endpointId) {
    id
-     value: name
-      label: name
-      serviceId
-      serviceName
+    value: name
+    label: name
+    serviceId
+    serviceName
+  }
+  `,
+};
+
+export const getProcess = {
+  variable: "$processId: ID!",
+  query: `
+  process: getProcess(processId: $processId) {
+    id
+    value: name
+    label: name
+    serviceId
+    serviceName
+    instanceId
+    instanceName
+    agentId
+    detectType
+    attributes {
+      name
+      value
+    }
  }
  `,
 };
--- a/src/graphql/fragments/topology.ts
+++ b/src/graphql/fragments/topology.ts
@@ -75,3 +75,28 @@ export const InstanceTopology = {
  }
 `,
 };
+export const ProcessTopology = {
+  variable: "$serviceInstanceId: ID!, $duration: Duration!",
+  query: `
+  topology: getProcessTopology(serviceInstanceId: $serviceInstanceId,
+    duration: $duration) {
+    nodes {
+      id
+      name
+      isReal
+      serviceName
+      serviceId
+      serviceInstanceId
+      serviceInstanceName
+    }
+    calls {
+      id
+      source
+      detectPoints
+      target
+      sourceComponents
+      targetComponents
+    }
+  }
+`,
+};
--- a/src/graphql/fragments/trace.ts
+++ b/src/graphql/fragments/trace.ts
@@ -27,7 +27,6 @@ export const Traces = {
      isError
      traceIds
    }
-    total
  }`,
 };

@@ -70,7 +69,37 @@ export const TraceSpans = {
          value
        }
      }
+      attachedEvents {
+        startTime {
+          seconds
+          nanos
+        }
+        event
+        endTime {
+          seconds
+          nanos
+        }
+        tags {
+          key
+          value
+        }
+        summary {
+          key
+          value
+        }
+      }
    }
  }
  `,
 };
+export const TraceTagKeys = {
+  variable: "$duration: Duration!",
+  query: `
+  tagKeys: queryTraceTagAutocompleteKeys(duration: $duration)`,
+};
+
+export const TraceTagValues = {
+  variable: "$tagKey: String!, $duration: Duration!",
+  query: `
+  tagValues: queryTraceTagAutocompleteValues(tagKey: $tagKey, duration: $duration)`,
+};
--- a/src/graphql/index.ts
+++ b/src/graphql/index.ts
@@ -25,6 +25,8 @@ import * as log from "./query/log";
 import * as profile from "./query/profile";
 import * as alarm from "./query/alarm";
 import * as event from "./query/event";
+import * as ebpf from "./query/ebpf";
+import * as demandLog from "./query/demand-log";

 const query: { [key: string]: string } = {
  ...app,
@@ -36,6 +38,8 @@ const query: { [key: string]: string } = {
  ...profile,
  ...alarm,
  ...event,
+  ...ebpf,
+  ...demandLog,
 };
 class Graphql {
  private queryData = "";
--- a/src/graphql/query/demand-log.ts
+++ b/src/graphql/query/demand-log.ts
@@ -0,0 +1,22 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { queryContainers, queryStreamingLogs } from "../fragments/demand-log";
+
+export const fetchContainers = `query listContainers(${queryContainers.variable}) {${queryContainers.query}}`;
+
+export const fetchDemandPodLogs = `query ondemandPodLogs(${queryStreamingLogs.variable}) {${queryStreamingLogs.query}}`;
--- a/src/graphql/query/ebpf.ts
+++ b/src/graphql/query/ebpf.ts
@@ -0,0 +1,40 @@
+/**
+ * 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 {
+  queryCreateTaskData,
+  createEBPFTask,
+  queryEBPFTasks,
+  queryEBPFSchedules,
+  analysisEBPFResult,
+  createNetworkProfiling,
+  keepNetworkProfiling,
+} from "../fragments/ebpf";
+
+export const getCreateTaskData = `query queryCreateTaskData(${queryCreateTaskData.variable}) {${queryCreateTaskData.query}}`;
+
+export const saveEBPFTask = `mutation createEBPFTask(${createEBPFTask.variable}) {${createEBPFTask.query}}`;
+
+export const getEBPFTasks = `query queryEBPFTasks(${queryEBPFTasks.variable}) {${queryEBPFTasks.query}}`;
+
+export const getEBPFSchedules = `query queryEBPFSchedules(${queryEBPFSchedules.variable}) {${queryEBPFSchedules.query}}`;
+
+export const getEBPFResult = `query analysisEBPFResult(${analysisEBPFResult.variable}) {${analysisEBPFResult.query}}`;
+
+export const newNetworkProfiling = `mutation createNetworkProfiling(${createNetworkProfiling.variable}) {${createNetworkProfiling.query}}`;
+
+export const aliveNetworkProfiling = `mutation keepNetworkProfiling(${keepNetworkProfiling.variable}) {${keepNetworkProfiling.query}}`;
--- a/src/graphql/query/log.ts
+++ b/src/graphql/query/log.ts
@@ -19,9 +19,13 @@ import {
  QueryBrowserErrorLogs,
  QueryServiceLogs,
  QueryLogsByKeywords,
+  LogTagValues,
+  LogTagKeys,
 } from "../fragments/log";

 export const queryBrowserErrorLogs = `query queryBrowserErrorLogs(${QueryBrowserErrorLogs.variable}) {
  ${QueryBrowserErrorLogs.query}}`;
 export const queryServiceLogs = `query queryLogs(${QueryServiceLogs.variable}) {${QueryServiceLogs.query}}`;
 export const queryLogsByKeywords = `query queryLogsByKeywords {${QueryLogsByKeywords.query}}`;
+export const queryLogTagValues = `query queryTagValues(${LogTagValues.variable}) {${LogTagValues.query}}`;
+export const queryLogTagKeys = `query queryTagKeys(${LogTagKeys.variable}) {${LogTagKeys.query}}`;
--- a/src/graphql/query/selector.ts
+++ b/src/graphql/query/selector.ts
@@ -22,6 +22,8 @@ import {
  getService,
  getInstance,
  getEndpoint,
+  Processes,
+  getProcess,
 } from "../fragments/selector";

 export const queryServices = `query queryServices(${Services.variable}) {${Services.query}}`;
@@ -30,4 +32,6 @@ export const queryInstances = `query queryInstances(${Instances.variable}) {${In
 export const queryLayers = `query listLayer {${Layers.query}}`;
 export const queryService = `query queryService(${getService.variable}) {${getService.query}}`;
 export const queryInstance = `query queryInstance(${getInstance.variable}) {${getInstance.query}}`;
-export const queryEndpoint = `query queryInstance(${getEndpoint.variable}) {${getEndpoint.query}}`;
+export const queryEndpoint = `query queryEndpoint(${getEndpoint.variable}) {${getEndpoint.query}}`;
+export const queryProcesses = `query queryProcesses(${Processes.variable}) {${Processes.query}}`;
+export const queryProcess = `query queryProcess(${getProcess.variable}) {${getProcess.query}}`;
--- a/src/graphql/query/topology.ts
+++ b/src/graphql/query/topology.ts
@@ -18,8 +18,10 @@ import {
  InstanceTopology,
  EndpointTopology,
  ServicesTopology,
+  ProcessTopology,
 } from "../fragments/topology";

 export const getInstanceTopology = `query queryData(${InstanceTopology.variable}) {${InstanceTopology.query}}`;
 export const getEndpointTopology = `query queryData(${EndpointTopology.variable}) {${EndpointTopology.query}}`;
 export const getServicesTopology = `query queryData(${ServicesTopology.variable}) {${ServicesTopology.query}}`;
+export const getProcessTopology = `query queryData(${ProcessTopology.variable}) {${ProcessTopology.query}}`;
--- a/src/graphql/query/trace.ts
+++ b/src/graphql/query/trace.ts
@@ -15,8 +15,17 @@
 * limitations under the License.
 */

-import { Traces, TraceSpans } from "../fragments/trace";
+import {
+  Traces,
+  TraceSpans,
+  TraceTagKeys,
+  TraceTagValues,
+} from "../fragments/trace";

 export const queryTraces = `query queryTraces(${Traces.variable}) {${Traces.query}}`;

 export const queryTrace = `query queryTrace(${TraceSpans.variable}) {${TraceSpans.query}}`;
+
+export const queryTraceTagKeys = `query queryTraceTagKeys(${TraceTagKeys.variable}) {${TraceTagKeys.query}}`;
+
+export const queryTraceTagValues = `query queryTraceTagValues(${TraceTagValues.variable}) {${TraceTagValues.query}}`;
--- a/src/hooks/data.ts
+++ b/src/hooks/data.ts
@@ -21,6 +21,7 @@ export enum MetricQueryTypes {
  ReadLabeledMetricsValues = "readLabeledMetricsValues",
  READHEATMAP = "readHeatMap",
  ReadSampledRecords = "readSampledRecords",
+  ReadRecords = "readRecords",
 }

 export enum Calculations {
@@ -32,7 +33,12 @@ export enum Calculations {
  Precision = "precision",
  ConvertSeconds = "convertSeconds",
  ConvertMilliseconds = "convertMilliseconds",
-  MsTos = "msTos",
+  MsToS = "msTos",
+  Average = "average",
+  PercentageAvg = "percentageAvg",
+  ApdexAvg = "apdexAvg",
+  SecondToDay = "secondToDay",
+  NanosecondToMillisecond = "nanosecondToMillisecond",
 }
 export enum sizeEnum {
  XS = "XS",
@@ -96,4 +102,10 @@ export const RespFields: any = {
    value
    refId
  }`,
+  readRecords: `{
+    id
+    name
+    value
+    refId
+  }`,
 };
--- a/src/hooks/useAssociateProcessor.ts
+++ b/src/hooks/useAssociateProcessor.ts
@@ -0,0 +1,138 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { useAppStoreWithOut } from "@/store/modules/app";
+import dateFormatStep from "@/utils/dateFormat";
+import getLocalTime from "@/utils/localtime";
+import { EventParams } from "@/types/app";
+
+export default function associateProcessor(props: any) {
+  function eventAssociate() {
+    if (!props.filters) {
+      return;
+    }
+    if (!props.filters.duration) {
+      return props.option;
+    }
+    if (!props.option.series[0]) {
+      return;
+    }
+    const list = props.option.series[0].data.map(
+      (d: (number | string)[]) => d[0]
+    );
+    if (!list.includes(props.filters.duration.endTime)) {
+      return;
+    }
+    const markArea = {
+      silent: true,
+      itemStyle: {
+        opacity: 0.3,
+      },
+      data: [
+        [
+          {
+            xAxis: props.filters.duration.startTime,
+          },
+          {
+            xAxis: props.filters.duration.endTime,
+          },
+        ],
+      ],
+    };
+    const series = (window as any).structuredClone(props.option.series);
+    for (const [key, temp] of series.entries()) {
+      if (key === 0) {
+        temp.markArea = markArea;
+      }
+    }
+    const options = {
+      ...props.option,
+      series,
+    };
+    return options;
+  }
+  function traceFilters(currentParams: Nullable<EventParams>) {
+    const appStore = useAppStoreWithOut();
+
+    if (!currentParams) {
+      return;
+    }
+    const start = appStore.intervalUnix[currentParams.dataIndex];
+    const { step } = appStore.durationRow;
+    let duration = undefined;
+
+    if (start) {
+      const end = start;
+      duration = {
+        start: dateFormatStep(
+          getLocalTime(appStore.utc, new Date(start)),
+          step,
+          true
+        ),
+        end: dateFormatStep(
+          getLocalTime(appStore.utc, new Date(end)),
+          step,
+          true
+        ),
+        step,
+      };
+    }
+    const relatedTrace = props.relatedTrace || {};
+    const status = relatedTrace.status;
+    const queryOrder = relatedTrace.queryOrder;
+    const latency = relatedTrace.latency;
+    const series = props.option.series || [];
+    const item: any = {
+      duration,
+      queryOrder,
+      status,
+    };
+    if (latency) {
+      const latencyList = series.map(
+        (d: { name: string; data: number[][] }, index: number) => {
+          const data = [
+            d.data[currentParams.dataIndex][1],
+            series[index + 1]
+              ? series[index + 1].data[currentParams.dataIndex][1]
+              : Infinity,
+          ];
+          return {
+            label:
+              d.name +
+              "--" +
+              (series[index + 1] ? series[index + 1].name : "Infinity"),
+            value: String(index),
+            data,
+          };
+        }
+      );
+      item.latency = latencyList;
+    }
+    const value = series.map(
+      (d: { name: string; data: number[][] }, index: number) => {
+        return {
+          label: d.name,
+          value: String(index),
+          data: d.data[currentParams.dataIndex][1],
+          date: d.data[currentParams.dataIndex][0],
+        };
+      }
+    );
+    item.metricValue = value;
+    return item;
+  }
+  return { eventAssociate, traceFilters };
+}
--- a/src/hooks/useDashboardsSession.ts
+++ b/src/hooks/useDashboardsSession.ts
@@ -14,19 +14,68 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
+import { ElMessage } from "element-plus";
+import { useDashboardStore } from "@/store/modules/dashboard";
+import { LayoutConfig } from "@/types/dashboard";

-export default function getDashboard(param: {
+export default function getDashboard(param?: {
  name: string;
  layer: string;
  entity: string;
 }) {
+  const dashboardStore = useDashboardStore();
+  const opt = param || dashboardStore.currentDashboard;
  const list = JSON.parse(sessionStorage.getItem("dashboards") || "[]");
  const dashboard = list.find(
    (d: { name: string; layer: string; entity: string }) =>
-      d.name === param.name &&
-      d.entity === param.entity &&
-      d.layer === param.layer
+      d.name === opt.name && d.entity === opt.entity && d.layer === opt.layer
  );
+  const all = dashboardStore.layout;
+  const widgets: LayoutConfig[] = [];
+  for (const item of all) {
+    if (item.type === "Tab") {
+      widgets.push(item);
+      if (item.children && item.children.length) {
+        for (const child of item.children) {
+          if (child.children && child.children.length) {
+            widgets.push(...child.children);
+          }
+        }
+      }
+    } else {
+      widgets.push(item);
+    }
+  }
+  function associationWidget(sourceId: string, filters: unknown, type: string) {
+    const widget = widgets.find((d: { type: string }) => d.type === type);
+    if (!widget) {
+      return ElMessage.info(`There has no a ${type} widget in the dashboard`);
+    }
+    const item = {
+      ...widget,
+      filters,
+    };
+    dashboardStore.setWidget(item);
+    const targetTabIndex = (widget.id || "").split("-");
+    const sourceTabindex = (sourceId || "").split("-") || [];
+    let container: Nullable<Element>;

-  return dashboard;
+    if (targetTabIndex[1] === undefined) {
+      container = document.querySelector(".ds-main");
+    } else {
+      const w = widgets.find((d: any) => d.id === targetTabIndex[0]);
+      container = document.querySelector(".tab-layout");
+      const layout: Nullable<Element> = document.querySelector(".ds-main");
+      if (w && layout) {
+        layout.scrollTop = w.y * 10 + w.h * 5;
+      }
+    }
+    if (targetTabIndex[1] && targetTabIndex[1] !== sourceTabindex[1]) {
+      dashboardStore.setActiveTabIndex(Number(targetTabIndex[1]));
+    }
+    if (container && widget) {
+      container.scrollTop = widget.y * 10 + widget.h * 5;
+    }
+  }
+  return { dashboard, widgets, associationWidget };
 }
--- a/src/hooks/useEcharts.ts
+++ b/src/hooks/useEcharts.ts
@@ -18,7 +18,6 @@ import {
  BarSeriesOption,
  LineSeriesOption,
  HeatmapSeriesOption,
-  PieSeriesOption,
  SankeySeriesOption,
 } from "echarts/charts";
 import {
@@ -46,7 +45,6 @@ export type ECOption = echarts.ComposeOption<
  | DatasetComponentOption
  | LegendComponentOption
  | HeatmapSeriesOption
-  | PieSeriesOption
  | SankeySeriesOption
 >;

@@ -79,7 +77,11 @@ export function useECharts(
    if (!el || !unref(el)) {
      return;
    }
+    const { width, height } = el.getBoundingClientRect();

+    if (!width || !height) {
+      return;
+    }
    chartInstance = echarts.init(el, t);
    const { removeEvent } = useEventListener({
      el: window,
--- a/src/hooks/useLegendProcessor.ts
+++ b/src/hooks/useLegendProcessor.ts
@@ -0,0 +1,142 @@
+/**
+ * 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 { LegendOptions } from "@/types/dashboard";
+import { isDef } from "@/utils/is";
+
+export default function useLegendProcess(legend?: LegendOptions) {
+  let isRight = false;
+  if (legend && legend.toTheRight) {
+    isRight = true;
+  }
+  function showEchartsLegend(keys: string[]) {
+    if (legend && isDef(legend.show)) {
+      if (legend.asTable && legend.show) {
+        return false;
+      }
+      return legend.show;
+    }
+    if (keys.length === 1) {
+      return false;
+    }
+    if (legend && legend.asTable) {
+      return false;
+    }
+    return true;
+  }
+  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 headers = [];
+
+    for (const [key, value] of keys.entries()) {
+      const arr = JSON.parse(JSON.stringify(data[value]));
+      const item: { [key: string]: unknown } = {
+        name: value,
+        topN: arr
+          .map((d: number, index: number) => {
+            return {
+              key: intervalTime[index],
+              value: d,
+            };
+          })
+          .sort(
+            (
+              a: { key: string; value: number },
+              b: { key: string; value: number }
+            ) => b.value - a.value
+          )
+          .filter((_: unknown, index: number) => index < 10),
+      };
+      if (legend) {
+        if (legend.min) {
+          item.min = Math.min(...data[value]).toFixed(2);
+          if (key === 0) {
+            headers.push({ value: "min", label: "Min" });
+          }
+        }
+        if (legend.max) {
+          item.max = Math.max(...data[value]).toFixed(2);
+          if (key === 0) {
+            headers.push({ value: "max", label: "Max" });
+          }
+        }
+        if (legend.mean) {
+          const total = data[value].reduce((prev: number, next: number) => {
+            prev += Number(next);
+            return prev;
+          }, 0);
+          item.mean = (total / data[value].length).toFixed(4);
+          if (key === 0) {
+            headers.push({ value: "mean", label: "Mean" });
+          }
+        }
+        if (legend.total) {
+          item.total = data[value]
+            .reduce((prev: number, next: number) => {
+              prev += Number(next);
+              return prev;
+            }, 0)
+            .toFixed(2);
+          if (key === 0) {
+            headers.push({ value: "total", label: "Total" });
+          }
+        }
+      }
+      source.push(item);
+    }
+
+    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;
+  }
+  return { showEchartsLegend, isRight, aggregations, chartColors };
+}
--- a/src/hooks/useListConfig.ts
+++ b/src/hooks/useListConfig.ts
@@ -0,0 +1,43 @@
+/**
+ * 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 { MetricQueryTypes, Calculations } from "./data";
+export function useListConfig(config: any, index: string) {
+  const i = Number(index);
+  const types = [
+    Calculations.Average,
+    Calculations.ApdexAvg,
+    Calculations.PercentageAvg,
+  ];
+  const calculation =
+    config.metricConfig &&
+    config.metricConfig[i] &&
+    config.metricConfig[i].calculation;
+  const isLinear =
+    [
+      MetricQueryTypes.ReadMetricsValues,
+      MetricQueryTypes.ReadLabeledMetricsValues,
+    ].includes(config.metricTypes[i]) && !types.includes(calculation);
+  const isAvg =
+    [
+      MetricQueryTypes.ReadMetricsValues,
+      MetricQueryTypes.ReadLabeledMetricsValues,
+    ].includes(config.metricTypes[i]) && types.includes(calculation);
+  return {
+    isLinear,
+    isAvg,
+  };
+}
--- a/src/hooks/useMetricsProcessor.ts
+++ b/src/hooks/useMetricsProcessor.ts
@@ -46,6 +46,7 @@ export function useQueryProcessor(config: any) {
    "ServiceRelation",
    "ServiceInstanceRelation",
    "EndpointRelation",
+    "ProcessRelation",
  ].includes(dashboardStore.entity);
  if (isRelation && !selectorStore.currentDestService) {
    return;
@@ -73,50 +74,73 @@ export function useQueryProcessor(config: any) {
        order: c.sortOrder || "DES",
      };
    } else {
-      if (metricType === MetricQueryTypes.ReadLabeledMetricsValues) {
-        const labels = (c.labelsIndex || "")
-          .split(",")
-          .map((item: string) => item.replace(/^\s*|\s*$/g, ""));
-        variables.push(`$labels${index}: [String!]!`);
-        conditions[`labels${index}`] = labels;
-      }
-      variables.push(`$condition${index}: MetricsCondition!`);
-      conditions[`condition${index}`] = {
-        name,
-        entity: {
-          scope: dashboardStore.entity,
-          serviceName:
-            dashboardStore.entity === "All"
-              ? undefined
-              : selectorStore.currentService.value,
-          normal:
-            dashboardStore.entity === "All"
-              ? undefined
-              : selectorStore.currentService.normal,
-          serviceInstanceName: dashboardStore.entity.includes("ServiceInstance")
-            ? selectorStore.currentPod && selectorStore.currentPod.value
+      const entity = {
+        scope: config.catalog,
+        serviceName:
+          dashboardStore.entity === "All"
+            ? undefined
+            : selectorStore.currentService.value,
+        normal:
+          dashboardStore.entity === "All"
+            ? undefined
+            : selectorStore.currentService.normal,
+        serviceInstanceName: [
+          "ServiceInstance",
+          "ServiceInstanceRelation",
+          "ProcessRelation",
+        ].includes(dashboardStore.entity)
+          ? 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,
-          endpointName: dashboardStore.entity.includes("Endpoint")
-            ? selectorStore.currentPod && selectorStore.currentPod.value
-            : undefined,
-          destNormal: isRelation
-            ? selectorStore.currentDestService.normal
-            : undefined,
-          destServiceName: isRelation
-            ? selectorStore.currentDestService.value
-            : undefined,
-          destServiceInstanceName:
-            dashboardStore.entity === "ServiceInstanceRelation"
-              ? 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,
      };
+      if ([MetricQueryTypes.ReadRecords].includes(metricType)) {
+        variables.push(`$condition${index}: RecordCondition!`);
+        conditions[`condition${index}`] = {
+          name,
+          parentEntity: entity,
+          topN: 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!]!`);
+          conditions[`labels${index}`] = labels;
+        }
+        variables.push(`$condition${index}: MetricsCondition!`);
+        conditions[`condition${index}`] = {
+          name,
+          entity,
+        };
+      }
    }
    if (metricType === MetricQueryTypes.ReadLabeledMetricsValues) {
      return `${name}${index}: ${metricType}(condition: $condition${index}, labels: $labels${index}, duration: $duration)${RespFields[metricType]}`;
@@ -125,6 +149,7 @@ export function useQueryProcessor(config: any) {
    }
  });
  const queryStr = `query queryData(${variables}) {${fragment}}`;
+
  return {
    queryStr,
    conditions,
@@ -142,6 +167,10 @@ export function useSourceProcessor(
    ElMessage.error(resp.errors);
    return {};
  }
+  if (!resp.data) {
+    ElMessage.error("The query is wrong");
+    return {};
+  }
  const source: { [key: string]: unknown } = {};
  const keys = Object.keys(resp.data);

@@ -150,9 +179,10 @@ export function useSourceProcessor(
    const c = (config.metricConfig && config.metricConfig[index]) || {};

    if (type === MetricQueryTypes.ReadMetricsValues) {
-      source[m] = resp.data[keys[index]].values.values.map(
-        (d: { value: number }) => aggregation(d.value, c)
-      );
+      source[c.label || m] =
+        (resp.data[keys[index]] &&
+          calculateExp(resp.data[keys[index]].values.values, c)) ||
+        [];
    }
    if (type === MetricQueryTypes.ReadLabeledMetricsValues) {
      const resVal = Object.values(resp.data)[0] || [];
@@ -166,7 +196,6 @@ export function useSourceProcessor(
        const values = item.values.values.map((d: { value: number }) =>
          aggregation(Number(d.value), c)
        );
-
        const indexNum = labelsIdx.findIndex((d: string) => d === item.label);
        if (labels[indexNum] && indexNum > -1) {
          source[labels[indexNum]] = values;
@@ -179,8 +208,13 @@ export function useSourceProcessor(
      source[m] = aggregation(Number(Object.values(resp.data)[0]), c);
    }
    if (
-      type === MetricQueryTypes.SortMetrics ||
-      type === MetricQueryTypes.ReadSampledRecords
+      (
+        [
+          MetricQueryTypes.ReadRecords,
+          MetricQueryTypes.ReadSampledRecords,
+          MetricQueryTypes.SortMetrics,
+        ] as string[]
+      ).includes(type)
    ) {
      source[m] = (Object.values(resp.data)[0] || []).map(
        (d: { value: unknown; name: string }) => {
@@ -221,13 +255,19 @@ export function useSourceProcessor(

 export function useQueryPodsMetrics(
  pods: Array<Instance | Endpoint | Service | any>,
-  config: { metrics: string[]; metricTypes: string[] },
+  config: {
+    metrics: string[];
+    metricTypes: string[];
+    metricConfig: MetricConfigOpt[];
+  },
  scope: string
 ) {
-  if (!(config.metrics && config.metrics[0])) {
+  const metricTypes = (config.metricTypes || []).filter((m: string) => m);
+  if (!metricTypes.length) {
    return;
  }
-  if (!(config.metricTypes && config.metricTypes[0])) {
+  const metrics = (config.metrics || []).filter((m: string) => m);
+  if (!metrics.length) {
    return;
  }
  const appStore = useAppStoreWithOut();
@@ -249,14 +289,24 @@ export function useQueryPodsMetrics(
        endpointName: scope === "Endpoint" ? d.label : undefined,
        normal: scope === "Service" ? d.normal : currentService.normal,
      };
-      const f = config.metrics.map((name: string, idx: number) => {
-        const metricType = config.metricTypes[idx] || "";
+      const f = metrics.map((name: string, idx: number) => {
+        const metricType = metricTypes[idx] || "";
+        variables.push(`$condition${index}${idx}: MetricsCondition!`);
        conditions[`condition${index}${idx}`] = {
          name,
          entity: param,
        };
-        variables.push(`$condition${index}${idx}: MetricsCondition!`);
-        return `${name}${index}${idx}: ${metricType}(condition: $condition${index}${idx}, duration: $duration)${RespFields[metricType]}`;
+        let labelStr = "";
+        if (metricType === MetricQueryTypes.ReadLabeledMetricsValues) {
+          const c = config.metricConfig[idx] || {};
+          variables.push(`$labels${index}${idx}: [String!]!`);
+          labelStr = `labels: $labels${index}${idx}, `;
+          const labels = (c.labelsIndex || "")
+            .split(",")
+            .map((item: string) => item.replace(/^\s*|\s*$/g, ""));
+          conditions[`labels${index}${idx}`] = labels;
+        }
+        return `${name}${index}${idx}: ${metricType}(condition: $condition${index}${idx}, ${labelStr}duration: $duration)${RespFields[metricType]}`;
      });
      return f;
    }
@@ -266,6 +316,7 @@ export function useQueryPodsMetrics(

  return { queryStr, conditions };
 }
+
 export function usePodsSource(
  pods: Array<Instance | Endpoint>,
  resp: { errors: string; data: { [key: string]: any } },
@@ -279,23 +330,85 @@ export function usePodsSource(
    ElMessage.error(resp.errors);
    return {};
  }
+  const names: string[] = [];
+  const metricConfigArr: MetricConfigOpt[] = [];
+  const metricTypesArr: string[] = [];
  const data = pods.map((d: Instance | any, idx: number) => {
    config.metrics.map((name: string, index: number) => {
-      const c = (config.metricConfig && config.metricConfig[index]) || {};
+      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);
+        if (idx === 0) {
+          names.push(name);
+          metricConfigArr.push(c);
+          metricTypesArr.push(config.metricTypes[index]);
+        }
      }
      if (config.metricTypes[index] === MetricQueryTypes.ReadMetricsValues) {
-        d[name] = resp.data[key].values.values.map((d: { value: number }) =>
-          aggregation(d.value, c)
+        d[name] = {};
+        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)
        );
+        if (idx === 0) {
+          names.push(name);
+          metricConfigArr.push(c);
+          metricTypesArr.push(config.metricTypes[index]);
+        }
+      }
+      if (
+        config.metricTypes[index] === MetricQueryTypes.ReadLabeledMetricsValues
+      ) {
+        const resVal = resp.data[key] || [];
+        const labels = (c.label || "")
+          .split(",")
+          .map((item: string) => item.replace(/^\s*|\s*$/g, ""));
+        const labelsIdx = (c.labelsIndex || "")
+          .split(",")
+          .map((item: string) => item.replace(/^\s*|\s*$/g, ""));
+        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 indexNum = labelsIdx.findIndex((d: string) => d === item.label);
+          let key = item.label;
+          if (labels[indexNum] && indexNum > -1) {
+            key = labels[indexNum];
+          }
+          if (!d[key]) {
+            d[key] = {};
+          }
+          if (
+            [
+              Calculations.Average,
+              Calculations.ApdexAvg,
+              Calculations.PercentageAvg,
+            ].includes(c.calculation)
+          ) {
+            d[key]["avg"] = calculateExp(item.values.values, c);
+          }
+          d[key]["values"] = values;
+          if (idx === 0) {
+            names.push(key);
+            metricConfigArr.push({ ...c, index: i });
+            metricTypesArr.push(config.metricTypes[index]);
+          }
+        }
      }
    });
-
    return d;
  });
-  return data;
+  return { data, names, metricConfigArr, metricTypesArr };
 }
 export function useQueryTopologyMetrics(metrics: string[], ids: string[]) {
  const appStore = useAppStoreWithOut();
@@ -322,37 +435,73 @@ 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);
+  let data: (number | string)[] = [];
+  switch (config.calculation) {
+    case Calculations.Average:
+      data = [(sum / arr.length).toFixed(2)];
+      break;
+    case Calculations.PercentageAvg:
+      data = [(sum / arr.length / 100).toFixed(2)];
+      break;
+    case Calculations.ApdexAvg:
+      data = [(sum / arr.length / 10000).toFixed(2)];
+      break;
+    default:
+      data = arr.map((d) => aggregation(d.value, config));
+      break;
+  }
+  return data;
+}

-export function aggregation(val: number, config: any): number | string {
+export function aggregation(
+  val: number,
+  config: { calculation?: string }
+): number | string {
  let data: number | string = Number(val);

  switch (config.calculation) {
    case Calculations.Percentage:
-      data = val / 100;
+      data = (val / 100).toFixed(2);
+      break;
+    case Calculations.PercentageAvg:
+      data = (val / 100).toFixed(2);
      break;
    case Calculations.ByteToKB:
-      data = val / 1024;
+      data = (val / 1024).toFixed(2);
      break;
    case Calculations.ByteToMB:
-      data = val / 1024 / 1024;
+      data = (val / 1024 / 1024).toFixed(2);
      break;
    case Calculations.ByteToGB:
-      data = val / 1024 / 1024 / 1024;
+      data = (val / 1024 / 1024 / 1024).toFixed(2);
      break;
    case Calculations.Apdex:
-      data = val / 10000;
+      data = (val / 10000).toFixed(2);
      break;
    case Calculations.ConvertSeconds:
-      data = dayjs(val).format("YYYY-MM-DD HH:mm:ss");
+      data = dayjs(val * 1000).format("YYYY-MM-DD HH:mm:ss");
      break;
    case Calculations.ConvertMilliseconds:
-      data = dayjs.unix(val).format("YYYY-MM-DD HH:mm:ss");
+      data = dayjs(val).format("YYYY-MM-DD HH:mm:ss");
      break;
    case Calculations.Precision:
      data = data.toFixed(2);
      break;
-    case Calculations.MsTos:
-      data = val / 1000;
+    case Calculations.MsToS:
+      data = (val / 1000).toFixed(2);
+      break;
+    case Calculations.SecondToDay:
+      data = (val / 86400).toFixed(2);
+      break;
+    case Calculations.NanosecondToMillisecond:
+      data = (val / 1000 / 1000).toFixed(2);
      break;
    default:
      data;
@@ -372,6 +521,7 @@ export async function useGetMetricEntity(metric: string, metricType: any) {
    [
      MetricQueryTypes.ReadSampledRecords,
      MetricQueryTypes.SortMetrics,
+      MetricQueryTypes.ReadRecords,
    ].includes(metricType)
  ) {
    const res = await dashboardStore.fetchMetricList(metric);
--- a/src/layout/components/AppMain.vue
+++ b/src/layout/components/AppMain.vue
@@ -21,19 +21,6 @@ limitations under the License. -->
    </router-view>
  </section>
 </template>
-<script lang="ts" setup>
-import { ElMessage } from "element-plus";
-import { useAppStoreWithOut } from "@/store/modules/app";
-
-const appStore = useAppStoreWithOut();
-if (!appStore.utc) {
-  const res = appStore.queryOAPTimeInfo();
-
-  if (res.errors) {
-    ElMessage.error(res.errors);
-  }
-}
-</script>
 <style lang="scss" scoped>
 .app-main {
  height: calc(100% - 40px);
--- a/src/layout/components/NavBar.vue
+++ b/src/layout/components/NavBar.vue
@@ -13,12 +13,12 @@ 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>
-  <div class="nav-bar flex-h" :class="{ dark: theme === 'dark' }">
+  <div class="nav-bar flex-h">
    <div class="title">{{ appStore.pageTitle || t(pageName) }}</div>
    <div class="app-config">
      <span class="red" v-show="timeRange">{{ t("timeTips") }}</span>
      <TimePicker
-        :value="time"
+        :value="[appStore.durationRow.start, appStore.durationRow.end]"
        position="bottom"
        format="YYYY-MM-DD HH:mm"
        @input="changeTimeRange"
@@ -49,7 +49,7 @@ limitations under the License. -->
  </div>
 </template>
 <script lang="ts" setup>
-import { ref, watch, computed } from "vue";
+import { ref, watch } from "vue";
 import { useRoute } from "vue-router";
 import { useI18n } from "vue-i18n";
 import timeFormat from "@/utils/timeFormat";
@@ -61,23 +61,20 @@ const appStore = useAppStoreWithOut();
 const route = useRoute();
 const pageName = ref<string>("");
 const timeRange = ref<number>(0);
-const theme = ref<string>("light");

+resetDuration();
 getVersion();
 const setConfig = (value: string) => {
  pageName.value = value || "";
-  // theme.value = route.path.includes("/infrastructure/") ? "dark" : "light";
 };
-const time = computed(() => [
-  appStore.durationRow.start,
-  appStore.durationRow.end,
-]);
-const handleReload = () => {
+
+function handleReload() {
  const gap =
    appStore.duration.end.getTime() - appStore.duration.start.getTime();
-  const time: Date[] = [new Date(new Date().getTime() - gap), new Date()];
-  appStore.setDuration(timeFormat(time));
-};
+  const dates: Date[] = [new Date(new Date().getTime() - gap), new Date()];
+  appStore.setDuration(timeFormat(dates));
+}
+
 function changeTimeRange(val: Date[] | any) {
  timeRange.value =
    val[1].getTime() - val[0].getTime() > 60 * 24 * 60 * 60 * 1000 ? 1 : 0;
@@ -94,14 +91,24 @@ watch(
  }
 );
 async function getVersion() {
-  if (appStore.version) {
-    return;
-  }
  const res = await appStore.fetchVersion();
  if (res.errors) {
    ElMessage.error(res.errors);
  }
 }
+function resetDuration() {
+  const { duration }: any = route.params;
+  if (duration) {
+    const d = JSON.parse(duration);
+
+    appStore.updateDurationRow({
+      start: new Date(d.start),
+      end: new Date(d.end),
+      step: d.step,
+    });
+    appStore.updateUTC(d.utc);
+  }
+}
 </script>
 <style lang="scss" scoped>
 .nav-bar {
--- a/src/layout/components/SideBar.vue
+++ b/src/layout/components/SideBar.vue
@@ -33,15 +33,11 @@ limitations under the License. -->
      <template v-for="(menu, index) in routes" :key="index">
        <el-sub-menu :index="String(menu.name)" v-if="menu.meta.hasGroup">
          <template #title>
-            <router-link
-              class="items"
-              :to="menu.path"
-              :exact="menu.meta.exact || false"
-            >
+            <router-link class="items" :to="menu.path">
              <el-icon class="menu-icons" :style="{ marginRight: '12px' }">
                <Icon size="lg" :iconName="menu.meta.icon" />
              </el-icon>
-              <span :class="isCollapse ? 'collapse' : ''">
+              <span class="title" :class="isCollapse ? 'collapse' : ''">
                {{ t(menu.meta.title) }}
              </span>
            </router-link>
@@ -52,12 +48,8 @@ limitations under the License. -->
              :index="m.name"
              :key="idx"
            >
-              <router-link
-                class="items"
-                :to="m.path"
-                :exact="m.meta.exact || false"
-              >
-                <span>{{ t(m.meta.title) }}</span>
+              <router-link class="items" :to="m.path">
+                <span class="title">{{ m.meta && t(m.meta.title) }}</span>
              </router-link>
            </el-menu-item>
          </el-menu-item-group>
@@ -68,21 +60,13 @@ limitations under the License. -->
          v-else
        >
          <el-icon class="menu-icons" :style="{ marginRight: '12px' }">
-            <router-link
-              class="items"
-              :to="menu.children[0].path"
-              :exact="menu.meta.exact"
-            >
+            <router-link class="items" :to="menu.children[0].path">
              <Icon size="lg" :iconName="menu.meta.icon" />
            </router-link>
          </el-icon>
          <template #title>
-            <router-link
-              class="items"
-              :to="menu.children[0].path"
-              :exact="menu.meta.exact"
-            >
-              <span>{{ t(menu.meta.title) }}</span>
+            <router-link class="items" :to="menu.children[0].path">
+              <span class="title">{{ t(menu.meta.title) }}</span>
            </router-link>
          </template>
        </el-menu-item>
@@ -109,13 +93,20 @@ import { ref } from "vue";
 import { useRouter, RouteRecordRaw } from "vue-router";
 import { useI18n } from "vue-i18n";
 import Icon from "@/components/Icon.vue";
+import { useAppStoreWithOut } from "@/store/modules/app";

+const appStore = useAppStoreWithOut();
 const { t } = useI18n();
-const name = ref<any>(String(useRouter().currentRoute.value.name));
+const name = ref<string>(String(useRouter().currentRoute.value.name));
 const theme = ["VirtualMachine", "Kubernetes"].includes(name.value || "")
  ? ref("light")
  : ref("black");
-const routes = ref<any>(useRouter().options.routes);
+const routes = ref<RouteRecordRaw[] | any>(useRouter().options.routes);
+if (/Android|webOS|iPhone|iPod|iPad|BlackBerry/i.test(navigator.userAgent)) {
+  appStore.setIsMobile(true);
+} else {
+  appStore.setIsMobile(false);
+}
 const isCollapse = ref(false);
 const controlMenu = () => {
  isCollapse.value = !isCollapse.value;
@@ -134,13 +125,13 @@ const filterMenus = (menus: any[]) => {
 .side-bar {
  background: #252a2f;
  height: 100%;
-  min-height: 700px;
-  position: relative;
  margin-bottom: 100px;
+  overflow-y: auto;
+  overflow-x: hidden;
 }

 .el-menu-vertical:not(.el-menu--collapse) {
-  width: 200px;
+  width: 220px;
  font-size: 16px;
 }

@@ -166,7 +157,7 @@ span.collapse {
 .menu-control {
  position: absolute;
  top: 7px;
-  left: 200px;
+  left: 220px;
  cursor: pointer;
  transition: all 0.2s linear;
  z-index: 99;
@@ -201,4 +192,11 @@ span.collapse {
  width: 100%;
  height: 60px;
 }
+
+.title {
+  display: inline-block;
+  max-width: 110px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
 </style>
--- a/src/locales/index.ts
+++ b/src/locales/index.ts
@@ -17,10 +17,12 @@
 import { createI18n } from "vue-i18n";
 import zh from "./lang/zh";
 import en from "./lang/en";
+import es from "./lang/es";

 const messages = {
  en,
  zh,
+  es,
 };

 const savedLanguage = window.localStorage.getItem("language");
--- a/src/locales/lang/en.ts
+++ b/src/locales/lang/en.ts
@@ -32,6 +32,7 @@ const msg = {
  dashboards: "Dashboards",
  profiles: "Profiles",
  database: "Database",
+  mySQL: "MySQL",
  serviceName: "Service Name",
  technologies: "Technologies",
  generalServicePanel: "General Service Panel",
@@ -51,17 +52,19 @@ const msg = {
  instance: "Instance",
  create: "Create",
  loading: "Loading",
-  selectVisualization: "Visualize your metrics",
+  selectVisualization: "Visualize Metrics",
  visualization: "Visualization",
-  graphStyles: "Graph styles",
-  widgetOptions: "Widget options",
-  standardOptions: "Standard options",
+  graphStyles: "Graph Styles",
+  widgetOptions: "Widget Options",
+  standardOptions: "Standard Options",
  max: "Max",
  min: "Min",
  plus: "Plus",
+  mean: "Mean",
  minus: "Minus",
  multiply: "Multiply",
  divide: "Divide",
+  total: "Total",
  convertToMilliseconds: "Convert Unix Timestamp(milliseconds)",
  convertToSeconds: "Convert Unix Timestamp(seconds)",
  smooth: "Smooth",
@@ -107,12 +110,13 @@ const msg = {
  showXAxis: "Show X Axis",
  showYAxis: "Show Y Axis",
  nameError: "The dashboard name cannot be duplicate",
+  nameEmptyError: "The dashboard name cannot be empty",
  showGroup: "Show Group",
  noRoot: "Please set a root dashboard for",
  noWidget: "Please add widgets.",
  rename: "Rename",
-  deleteTitle: "Are you sure to delete this?",
-  rootTitle: "Are you sure to set this?",
+  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",
@@ -122,6 +126,7 @@ const msg = {
  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",
@@ -131,6 +136,52 @@ const msg = {
  metricLabel: "Metric Label",
  showUnit: "Show Unit",
  noGraph: "No Graph",
+  taskId: "Task ID",
+  triggerType: "Trigger Type",
+  targetType: "Target Type",
+  ebpfTip: "Don't have a process for profiling",
+  processSelect: "Click to select processes",
+  container: "Container",
+  limit: "Limit",
+  page: "Page",
+  interval: "Refresh Interval",
+  pause: "Pause",
+  begin: "Start",
+  associateOptions: "Association Options",
+  associateMetrics: "Association Metrics",
+  widget: "Widget",
+  nameTip:
+    "The name only supports Chinese and English, horizontal lines and underscores. The length of the name is limited to 300 characters",
+  duplicateName: "Duplicate name",
+  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",
+  queryOrder: "Query By Duration",
+  setOrder: "Query Order",
+  latency: "Latency",
+  metricValues: "Metric Values",
+  queryConditions: "Query Conditions",
+  enableRelatedTrace: "Enable Related Trace",
+  maxTraceDuration: "Maximum Duration",
+  minTraceDuration: "Minimum Duration",
+  legendOptions: "Legend Options",
+  showLegend: "Show Legend",
+  asTable: "As Table",
+  toTheRight: "To The Right",
+  legendValues: "Legend Values",
+  minDuration: "Minimal Request Duration",
+  when4xx:
+    "Sample HTTP requests and responses with tracing when response code between 400 and 499",
+  when5xx:
+    "Sample HTTP requests and responses with tracing when response code between 500 and 599",
+  taskTitle: "HTTP request and response collecting rules",
+  seconds: "Seconds",
  hourTip: "Select Hour",
  minuteTip: "Select Minute",
  secondTip: "Select Second",
@@ -138,9 +189,7 @@ const msg = {
  yearSuffix: "Year",
  monthsHead: "Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec",
  months: "Jan_Feb_Mar_Apr_May_Jun_Jul_Aug_Sep_Oct_Nov_Dec",
-  weeks: "Mon_Tue_Wed_Thu_Fir_Sat_Sun",
-  hello: "Hello",
-  helloMessage: "Welcome Back, Apache SkyWalking APM System !",
+  weeks: "Mon_Tue_Wed_Thu_Fri_Sat_Sun",
  username: "Username",
  password: "Password",
  title: "Title",
@@ -149,7 +198,7 @@ const msg = {
  dashboard: "Dashboard",
  topology: "Topology",
  trace: "Trace",
-  alarm: "Alarms",
+  alarm: "Alerting",
  auto: "Auto",
  reload: "Reload",
  version: "Version",
@@ -224,7 +273,7 @@ const msg = {
  entityType: "Entity Type",
  maxItemNum: "Max number of Item",
  unknownMetrics: "Unknown Metrics",
-  labels: "Labels",
+  labels: "Label",
  aggregation: "Calculation",
  unit: "Unit",
  labelsIndex: "Label Subscript",
@@ -237,6 +286,10 @@ const msg = {
  defaultDepth: "Default Depth",
  traceTagsTip: `Only tags defined in the core/default/searchableTracesTags are searchable.
  Check more details on the Configuration Vocabulary page`,
+  logTagsTip: `Only tags defined in the core/default/searchableLogsTags are searchable.
+  Check more details on the Configuration Vocabulary page`,
+  alarmTagsTip: `Only tags defined in the core/default/searchableAlarmTags are searchable.
+  Check more details on the Configuration Vocabulary page`,
  tagsLink: "Configuration Vocabulary page",
  addTag: "Please input a tag",
  log: "Log",
@@ -281,6 +334,7 @@ const msg = {
  eventsParameters: "Event Parameters",
  eventDetail: "Event Detail",
  value: "Value",
+  key: "Key",
  show: "Show",
  hide: "Hide",
  statistics: "Statistics",
@@ -317,7 +371,9 @@ const msg = {
  addExcludingKeywordsOfContent: "Please input a keyword of excluding content",
  noticeTag: "Please press Enter after inputting a tag(key=value).",
  conditionNotice:
-    "Notice: Please press Enter after inputting a tag, key of content, exclude key of content(key=value).",
+    "Notice: Please press Enter after inputting a key of content, exclude key of content(key=value).",
  language: "Language",
+  gateway: "Gateway",
+  virtualMQ: "Virtual MQ",
 };
 export default msg;
--- a/src/locales/lang/es.ts
+++ b/src/locales/lang/es.ts
@@ -0,0 +1,382 @@
+/**
+ * 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 msg = {
+  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",
+  events: "Eventos",
+  alerts: "Alertas",
+  settings: "Ajustes",
+  dashboards: "Paneles",
+  profiles: "Perfiles",
+  database: "Base de Datos",
+  mySQL: "MySQL",
+  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",
+  edit: "Editar",
+  delete: "Eliminar",
+  confirm: "Confirmar",
+  layer: "Capa",
+  endpoint: "Endpoint",
+  instance: "Instancia",
+  create: "Crear",
+  loading: "Cargando",
+  selectVisualization: "Visualiza tus métricas",
+  visualization: "Visualizaciones",
+  graphStyles: "Estilo de gráficas",
+  widgetOptions: "Opciones widget",
+  standardOptions: "Opciones estandar",
+  max: "Máx",
+  min: "Mín",
+  mean: "Promedio",
+  plus: "Más",
+  minus: "Menoss",
+  multiply: "Multiplcar",
+  total: "Todo",
+  divide: "Dividir",
+  convertToMilliseconds: "Convertir Unix Timestamp(milisegundos)",
+  convertToSeconds: "Convertir Unix Timestamp(segundos)",
+  smooth: "Suabe",
+  showSymbol: "Mostrar Símbolo",
+  step: "Paso",
+  showValues: "Mostrar Valores",
+  fontSize: "Tamaño Fuente",
+  showBackground: "Mostrar Fondo",
+  areaOpacity: "Opacidad Área",
+  editGraph: "Editar Opciones",
+  dashboardName: "Selecciona Nombre del Panel",
+  linkDashboard: "Nombre del panel relacionado con llamadas de la topología",
+  linkServerMetrics:
+    "Métricas de servidor relacionadas con llamadas de la topología",
+  linkClientMetrics:
+    "Métricas de cliente relacionadas con llamadas de la topología",
+  nodeDashboard: "Nombre del panel relacionado con nodos de la topología",
+  nodeMetrics: "Mêtricas relacionas con nodos de la topología",
+  instanceDashboard: "Nombre del panel relacionado con instancias de servicio",
+  endpointDashboard: "Nombre del panel relacionado con endpoints",
+  callSettings: "Ajustes Llamada",
+  nodeSettings: "Ajustes Nodo",
+  conditions: "Condiciones",
+  legendSettings: "Ajustes Leyenda",
+  setLegend: "Poner Leyenda",
+  backgroundColors: "Colores Fondo",
+  fontColors: "Colores Fuente",
+  iconTheme: "Tema Iconos",
+  default: "Por Defecto",
+  topSlow: "Top 5 lentos",
+  topChildren: "Top 5 hijos",
+  taskList: "Listado Tareas",
+  sampledTraces: "Trazas Muestreadas",
+  editTab: "Habilitar edición nombre pestanyas",
+  label: "Nombre Servicio",
+  id: "ID Servicio",
+  setRoot: "Ponerlo a raíz",
+  setNormal: "Ponerlo a normal",
+  export: "Exportar Plantilla Panel",
+  import: "Importar Plantilla Panel",
+  yes: "Sí",
+  no: "No",
+  tableHeaderCol1: "Nombre de la primera columna de la tabla",
+  tableHeaderCol2: "Nombre de la segunda columna de la tabla",
+  showXAxis: "Mostrar Eje X",
+  showYAxis: "Mostrar Eje Y",
+  nameError: "El nombre del panel no puede ser duplicado",
+  nameEmptyError: "El nombre del panel no puede estar vacío",
+  showGroup: "Mostrar Grupo",
+  noRoot: "Por favor ponga la raíz del panel",
+  noWidget: "Por favor añada widgets.",
+  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",
+  showUnit: "Mostrar Unidad",
+  noGraph: "Ningún Gráfico",
+  taskId: "ID Tarea",
+  triggerType: "Tipo de Disparador",
+  targetType: "Tipo de Objetivo",
+  ebpfTip: "Le falta el proceso para perfilar",
+  processSelect: "Click para seleccionar proceso",
+  page: "Página",
+  interval: "Intervalo de actualización",
+  pause: "Pausa",
+  begin: "Inicio",
+  associateOptions: "Opciones de asociación",
+  associateMetrics: "Índice de correlación",
+  widget: "Dispositivo pequeño",
+  text: "Texto",
+  duplicateName: "Nombre duplicado",
+  nameTip:
+    "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",
+  metricValues: "Valor métrico",
+  legendValues: "Valor de la leyenda",
+  seconds: "Segundos",
+  hourTip: "Seleccione Hora",
+  minuteTip: "Seleccione Minuto",
+  secondTip: "Seleccione Segundo",
+  viewTrace: "Ver trazas relacionadas",
+  relatedTraceOptions: "Opciones de seguimiento relacionadas",
+  setLatencyDuration: "Índice de correlación retardada",
+  enableRelatedTrace: "Activar trazas relacionadas",
+  queryConditions: "Condiciones de consulta",
+  maxTraceDuration: "Duración máxima",
+  minTraceDuration: "Duración mínima",
+  legendOptions: "Opciones de leyenda",
+  showLegend: "Mostrar leyenda",
+  asTable: "Como tabla",
+  toTheRight: "Derecha",
+  minDuration: "Duración mínima de la solicitud",
+  when4xx:
+    "Ejemplo de solicitud y respuesta http con seguimiento cuando el Código de respuesta está entre 400 y 499",
+  when5xx:
+    "Ejemplo de solicitud y respuesta http con seguimiento cuando el Código de respuesta está entre 500 y 599",
+  taskTitle: "Reglas de recolección de peticiones y respuestas HTTP",
+  second: "s",
+  yearSuffix: "Año",
+  monthsHead: "Ene_Feb_Mar_Abr_May_Jun_Jul_Ago_Set_Oct_Nov_Dic",
+  months: "Ene_Feb_Mar_Abr_May_Jun_Jul_Ago_Set_Oct_Nov_Dic",
+  weeks: "Lun_Mar_Mier_Jue_Vie_Sáb_Dom",
+  username: "Usuario",
+  password: "Contraseña",
+  title: "Título",
+  width: "Ancho",
+  height: "Alto",
+  dashboard: "Panel",
+  topology: "Topología",
+  trace: "Traza",
+  alarm: "Recordatorio en curso",
+  auto: "Auto",
+  reload: "Recargar",
+  version: "Versión",
+  copy: "Copiar",
+  reset: "Resetear",
+  apply: "Aplicar",
+  template: "Plantilla",
+  cancel: "Cancelar",
+  createTab: "Crear Pestanya",
+  tabName: "Nombre de la Pestaña",
+  detectPoint: "Detectar Punto",
+  name: "Nombre",
+  types: "Tipos",
+  all: "Todo",
+  endpoints: "Endpoints",
+  cache: "Cache",
+  serviceinstance: "InstanciaServicio",
+  databaseaccess: "AccesoBaseDeDatos",
+  servicerelation: "RelaciónServicio",
+  serviceinstancerelation: "RelaciónInstanciaServicio",
+  endpointrelation: "RelaciónEndpoint",
+  status: "Estado",
+  endpointName: "Nombre Endpoint",
+  search: "Buscar",
+  clear: "Limpiar",
+  more: "Más",
+  traceID: "ID Traza",
+  range: "Rango",
+  timeRange: "Rango de Tiempo",
+  duration: "Duración",
+  startTime: "Hora Inicio",
+  start: "Incio",
+  spans: "Lapso",
+  spanInfo: "Info Lapso",
+  spanType: "Tipo de Lapso",
+  time: "Tiempo",
+  tags: "Etiquetas",
+  component: "Componente",
+  table: "Tabla",
+  list: "Lista",
+  tree: "Árbol",
+  filterScope: "Alcance de Filtro",
+  searchKeyword: "Palabra Clave",
+  quarterHourCutTip: "Últimos 15 mins",
+  halfHourCutTip: "Últimos 30 mins",
+  hourCutTip: "Última 1 hora",
+  dayCutTip: "Último 1 día",
+  weekCutTip: "Última 1 semana",
+  monthCutTip: "Última 1 mes",
+  serverZone: "Zona Horaria Servidor OAP",
+  exportImage: "Exportar imagen",
+  object: "Objecto",
+  profile: "Perfil",
+  newTask: "Nueva Tarea",
+  monitorTime: "Tiempo Monitorización",
+  monitorDuration: "Duración Monitorización",
+  minThreshold: "Mínn Umbral Duración",
+  dumpPeriod: "Volcar Periodo",
+  createTask: "Crear Tarea",
+  maxSamplingCount: "Máx Cantidad Mostreo",
+  analyze: "Analizar",
+  noData: "Ningún Dato",
+  taskInfo: "Información Tarea",
+  task: "Tarea",
+  operationType: "Tipo Operación",
+  operationTime: "Tiempo Operación",
+  taskView: "Ver Tarea",
+  includeChildren: "Incluir Hijos",
+  excludeChildren: "Excluir Hijos",
+  view: "Ver",
+  timeTips: "Intervalo de tiempo no puede excedir 60 dias",
+  entityType: "Tipo Entidad",
+  maxItemNum: "Máx número artículos",
+  unknownMetrics: "Métrica desconocida",
+  labels: "Etiquetas",
+  aggregation: "Cálculo",
+  unit: "Unidad",
+  labelsIndex: "Subíndice Etiqueta",
+  group: "Grupo Servicio",
+  browserView: "Navegador",
+  sortOrder: "Orden de clasificación",
+  chartType: "Tipo Gráfico",
+  currentDepth: "Profundidad actual",
+  showDepth: "Mostrar Selector Profundidad",
+  defaultDepth: "Profundidad Por Defecto",
+  traceTagsTip: `Solamente etiquetas definidas en core/default/searchableTracesTags pueden ser buscadas.
+  Más información en la página de Vocabulario de Configuración`,
+  logTagsTip: `Solamente etiquetas definidas en core/default/searchableLogsTags pueden ser buscadas.
+  Más información en la página de Vocabulario de Configuración`,
+  alarmTagsTip: `Solamente etiquetas definidas en core/default/searchableAlarmTags pueden ser buscadas.
+  Más información en la página de Vocabulario de Configuración`,
+  tagsLink: "Página de Vocabulario de Configuración",
+  addTag: "Por favor introduzca una etiqueta",
+  log: "Registro de Datos",
+  logCategory: "Categoría Registro de Datos",
+  errorCatalog: "Catálogo de Errores",
+  logDetail: "Detalle Registro de Datos",
+  timeReload: "Aviso: El intervalo de tiempo tiene que ser mayor que 0",
+  errorInfo: "Info Error",
+  stack: "Pila",
+  serviceVersion: "Versión Servicio",
+  errorPage: "Página de Error",
+  category: "Categoría",
+  grade: "Grado",
+  relatedTraceLogs: "Registro de Datos Relacionados",
+  setConditions: "Más Condiciones",
+  metricName: "Seleccionar Nombre Métrica",
+  keywordsOfContent: "Claves de Contenido",
+  excludingKeywordsOfContent: "Excluir Claves de Contenido",
+  return: "Volver",
+  isError: "Error",
+  contentType: "Tipo de Contenido",
+  content: "Contenido",
+  viewLogs: "Ver Registro de Datos",
+  logsTagsTip: `Solamente etiquetas definidas en core/default/searchableLogsTags pueden ser buscadas.
+  Más información en la página de Vocabulario de Configuración`,
+  keywordsOfContentLogTips:
+    "El almacenamiento actual del servidor SkyWalking OAP no lo soporta.",
+  setEvent: "Establecer Evento",
+  viewAttributes: "Ver",
+  serviceEvents: "Eventos Servico",
+  select: "Seleccionar",
+  eventID: "ID Evento",
+  eventName: "Nombre Evento",
+  endTime: "Hora Finalización",
+  instanceEvents: "Eventos Instancia",
+  endpointEvents: "Eventos Endpoint",
+  enableEvents: "Habilitar Eventos",
+  disableEvents: "Deshabilitar Eventos",
+  eventSeries: "Serie de Eventos",
+  eventsType: "Tipo de Evento",
+  eventsMessage: "Mensaje del Evento",
+  eventsParameters: "Parámetro del Evento",
+  eventDetail: "Detalle del Evento",
+  value: "Valor",
+  key: "Clave",
+  show: "Mostrar",
+  hide: "Oculatr",
+  statistics: "Estadísticas",
+  message: "Mensaje",
+  tooltipsContent: "Contenido de Información de Herramienta",
+  alarmDetail: "Detalle Alarma",
+  scope: "Alcance",
+  destService: "Servicio Destinación",
+  destServiceInstance: "Instancia Servicio Destinación",
+  destEndpoint: "Endpoint Destinación",
+  eventSource: "Fuente Envento",
+  modalTitle: "Inspección",
+  selectRedirectPage:
+    "Quiere inspeccionar las Trazas or Registros de datos del servicio %s?",
+  logAnalysis: "Lenguaje de Análisis de Registro de Datos",
+  logDataBody: "Contenido del Registro de Datos",
+  addType: "Por favor introduzca un tipo",
+  traceContext: "Registro de datos con contexto de traza",
+  traceSegmentId: "ID Segmento Traza",
+  spanId: "ID Lapso",
+  inputTraceSegmentId: "Por favor introduzca el ID del segmento de la traza",
+  inputSpanId: "Por favor introduzca el ID del lapso",
+  inputTraceId: "Por favor introduzca el ID de la traza",
+  dsl: "Entrada de guión para LAL",
+  logContentType: "Tipo del registro de datos",
+  logRespContent: "Contenido Registro de Datos",
+  analysis: "Análisis",
+  waitLoading: "Cargando",
+  dslEmpty: "Entrada de guión de LAL no puede estar vacio",
+  logContentEmpty: "El contenido del registro de datos no puede estar vacio.",
+  debug: "Debugar",
+  addTraceID: "Por favor introduzca el ID de la traza",
+  addTags: "Por favor introduzaca una etiqueta",
+  addKeywordsOfContent: "Por favor introduzca una clave de contenido",
+  addExcludingKeywordsOfContent:
+    "Por favor introduzca una clave excluyente de contenido",
+  noticeTag:
+    "Por favor presione Intro después de introducir una etiqueta(clave=valor).",
+  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",
+};
+export default msg;
--- a/src/locales/lang/zh.ts
+++ b/src/locales/lang/zh.ts
@@ -32,6 +32,7 @@ const msg = {
  dashboards: "仪表盘",
  profiles: "性能剖析",
  database: "数据库",
+  mySQL: "MySQL",
  serviceName: "服务名称",
  technologies: "技术",
  health: "健康",
@@ -55,10 +56,12 @@ const msg = {
  standardOptions: "标准选项",
  max: "最大值",
  min: "最小值",
+  mean: "平均值",
  plus: "加法",
  minus: "减法",
  multiply: "乘法",
  divide: "除法",
+  total: "总计",
  convertToMilliseconds: "转换Unix时间戳（毫秒）",
  convertToSeconds: "转换Unix时间戳（秒）",
  smooth: "光滑的",
@@ -105,6 +108,7 @@ const msg = {
  showXAxis: "显示X轴",
  showYAxis: "显示Y轴",
  nameError: "仪表板名称不能重复",
+  nameEmptyError: "仪表板名称不能为空",
  noRoot: "请设置根仪表板，为",
  showGroup: "显示分组",
  noWidget: "请添加组件",
@@ -120,6 +124,7 @@ const msg = {
  editWarning: "你正在进入编辑模式",
  viewWarning: "你正在进入预览模式",
  virtualDatabase: "虚拟数据库",
+  virtualCache: "虚拟缓存",
  reloadDashboards: "重新加载仪表盘",
  kubernetesService: "服务",
  kubernetesCluster: "集群",
@@ -129,6 +134,49 @@ const msg = {
  metricLabel: "指标标签",
  showUnit: "显示单位",
  noGraph: "无图表",
+  taskId: "任务ID",
+  triggerType: "触发类型",
+  targetType: "目标类型",
+  processSelect: "点击选择进程",
+  ebpfTip: "没有进程可以分析",
+  container: "容器",
+  limit: "范围",
+  page: "页面",
+  interval: "刷新间隔时间",
+  pause: "暂停",
+  begin: "开始",
+  associateOptions: "关联选项",
+  associateMetrics: "关联指标",
+  widget: "部件",
+  enableAssociate: "启用关联",
+  nameTip: "该名称仅支持中文和英文、横线和下划线, 并且限制长度为300个字符",
+  duplicateName: "重复的名称",
+  text: "文本",
+  query: "查询",
+  postgreSQL: "PostgreSQL",
+  endpointTips: "这里最多展示20条endpoints。",
+  apisix: "APISIX",
+  viewTrace: "查看相关Trace",
+  relatedTraceOptions: "相关的Trace选项",
+  setLatencyDuration: "延迟相关指标",
+  queryOrder: "按持续时间查询",
+  setOrder: "查询顺序",
+  latency: "延迟",
+  metricValues: "指标值",
+  enableRelatedTrace: "启用相关Trace",
+  queryConditions: "查询条件",
+  maxTraceDuration: "最大持续时间",
+  minTraceDuration: "最小持续时间",
+  legendOptions: "图例选项",
+  showLegend: "显示图例",
+  asTable: "作为表格",
+  toTheRight: "在右边",
+  legendValues: "图例值",
+  minDuration: "最小请求持续时间",
+  when4xx: "当响应代码介于400和499之间时，带有跟踪的HTTP请求和响应示例",
+  when5xx: "当响应代码介于500和599之间时，带有跟踪的HTTP请求和响应示例",
+  taskTitle: "HTTP请求和响应收集规则",
+  seconds: "秒",
  hourTip: "选择小时",
  minuteTip: "选择分钟",
  secondTip: "选择秒数",
@@ -137,8 +185,6 @@ const msg = {
  monthsHead: "1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月",
  months: "一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月",
  weeks: "一_二_三_四_五_六_日",
-  hello: "你好",
-  helloMessage: "欢迎来到, Apache SkyWalking APM 系统 !",
  username: "用户名",
  password: "密码",
  title: "标题",
@@ -238,6 +284,10 @@ const msg = {
  defaultDepth: "默认深度",
  traceTagsTip:
    "只有core/default/searchableTracesTags中定义的标记才可搜索。查看配置词汇表页面上的更多详细信息。",
+  logTagsTip:
+    "只有core/default/searchableTracesTags中定义的标记才可搜索。查看配置词汇表页面上的更多详细信息。",
+  alarmTagsTip:
+    "只有core/default/searchableTracesTags中定义的标记才可搜索。查看配置词汇表页面上的更多详细信息。",
  tagsLink: "配置词汇页",
  addTag: "请添加标签",
  logCategory: "日志类别",
@@ -280,6 +330,7 @@ const msg = {
  eventsParameters: "事件参数",
  eventDetail: "事件详情",
  value: "数值",
+  key: "Key",
  tableHeader: "表头名称",
  tableValues: "表值",
  show: "展示",
@@ -318,7 +369,9 @@ const msg = {
  addExcludingKeywordsOfContent: "请输入一个内容不包含的关键词",
  noticeTag: "请输入一个标签(key=value)之后回车",
  conditionNotice:
-    "请输入一个标签、内容关键词或者内容不包含的关键词(key=value)之后回车",
+    "请输入一个内容关键词或者内容不包含的关键词(key=value)之后回车",
  language: "语言",
+  gateway: "网关",
+  virtualMQ: "虚拟消息队列",
 };
 export default msg;
--- a/src/main.ts
+++ b/src/main.ts
@@ -20,14 +20,18 @@ import router from "./router";
 import { store } from "./store";
 import components from "@/components";
 import i18n from "./locales";
-import "element-plus/dist/index.css";
-import "./styles/index.scss";
-import ElementPlus from "element-plus";
+import { useAppStoreWithOut } from "@/store/modules/app";
+import "./styles/index.ts";

 const app = createApp(App);
+const appStore = useAppStoreWithOut();

-app.use(ElementPlus, { size: "small", zIndex: 3000 });
 app.use(components);
 app.use(i18n);
 app.use(store);
-app.use(router).mount("#app");
+mountApp();
+
+async function mountApp() {
+  await appStore.queryOAPTimeInfo();
+  app.use(router).mount("#app");
+}
--- a/src/router/alarm.ts
+++ b/src/router/alarm.ts
@@ -25,18 +25,14 @@ export const routesAlarm: Array<RouteRecordRaw> = [
      title: "alarm",
      icon: "spam",
      hasGroup: false,
-      exact: true,
    },
    component: Layout,
    children: [
      {
-        path: "/alarm",
+        path: "/alerting",
        name: "Alarm",
-        meta: {
-          exact: false,
-        },
        component: () =>
-          import(/* webpackChunkName: "alarms" */ "@/views/Alarm.vue"),
+          import(/* webpackChunkName: "alerting" */ "@/views/Alarm.vue"),
      },
    ],
  },
--- a/src/router/dashboard.ts
+++ b/src/router/dashboard.ts
@@ -26,7 +26,6 @@ export const routesDashboard: Array<RouteRecordRaw> = [
      title: "dashboards",
      icon: "dashboard_customize",
      hasGroup: true,
-      exact: true,
    },
    children: [
      {
@@ -38,7 +37,6 @@ export const routesDashboard: Array<RouteRecordRaw> = [
        name: "List",
        meta: {
          title: "dashboardList",
-          exact: false,
        },
      },
      {
@@ -50,73 +48,198 @@ export const routesDashboard: Array<RouteRecordRaw> = [
        name: "New",
        meta: {
          title: "dashboardNew",
-          exact: false,
        },
      },
      {
-        path: "/dashboard/:layerId/:entity/:name",
+        path: "",
+        redirect: "/dashboard/:layerId/:entity/:name",
+        name: "Create",
        component: () =>
          import(
            /* webpackChunkName: "dashboards" */ "@/views/dashboard/Edit.vue"
          ),
-        name: "Create",
        meta: {
-          title: "dashboardEdit",
-          exact: false,
          notShow: true,
        },
+        children: [
+          {
+            path: "/dashboard/:layerId/:entity/:name",
+            component: () =>
+              import(
+                /* webpackChunkName: "dashboards" */ "@/views/dashboard/Edit.vue"
+              ),
+            name: "CreateChild",
+          },
+          {
+            path: "/dashboard/:layerId/:entity/:name/tab/:activeTabIndex",
+            component: () =>
+              import(
+                /* webpackChunkName: "dashboards" */ "@/views/dashboard/Edit.vue"
+              ),
+            name: "CreateActiveTabIndex",
+          },
+        ],
      },
      {
-        path: "/dashboard/:layerId/:entity/:serviceId/:name",
+        path: "",
        component: () =>
          import(
            /* webpackChunkName: "dashboards" */ "@/views/dashboard/Edit.vue"
          ),
        name: "View",
+        redirect: "/dashboard/:layerId/:entity/:serviceId/:name",
        meta: {
-          title: "dashboardEdit",
-          exact: false,
          notShow: true,
        },
+        children: [
+          {
+            path: "/dashboard/:layerId/:entity/:serviceId/:name",
+            component: () =>
+              import(
+                /* webpackChunkName: "dashboards" */ "@/views/dashboard/Edit.vue"
+              ),
+            name: "ViewChild",
+          },
+          {
+            path: "/dashboard/:layerId/:entity/:serviceId/:name/tab/:activeTabIndex",
+            component: () =>
+              import(
+                /* webpackChunkName: "dashboards" */ "@/views/dashboard/Edit.vue"
+              ),
+            name: "ViewActiveTabIndex",
+          },
+        ],
      },
      {
-        path: "/dashboard/related/:layerId/:entity/:serviceId/:destServiceId/:name",
+        path: "",
+        redirect:
+          "/dashboard/related/:layerId/:entity/:serviceId/:destServiceId/:name",
        component: () =>
          import(
            /* webpackChunkName: "dashboards" */ "@/views/dashboard/Edit.vue"
          ),
        name: "ViewServiceRelation",
        meta: {
-          title: "dashboardEdit",
-          exact: false,
          notShow: true,
        },
+        children: [
+          {
+            path: "/dashboard/related/:layerId/:entity/:serviceId/:destServiceId/:name",
+            component: () =>
+              import(
+                /* webpackChunkName: "dashboards" */ "@/views/dashboard/Edit.vue"
+              ),
+            name: "ViewServiceRelation",
+          },
+          {
+            path: "/dashboard/related/:layerId/:entity/:serviceId/:destServiceId/:name/tab/:activeTabIndex",
+            component: () =>
+              import(
+                /* webpackChunkName: "dashboards" */ "@/views/dashboard/Edit.vue"
+              ),
+            name: "ViewServiceRelationActiveTabIndex",
+          },
+        ],
      },
      {
-        path: "/dashboard/:layerId/:entity/:serviceId/:podId/:name",
+        path: "",
+        redirect: "/dashboard/:layerId/:entity/:serviceId/:podId/:name",
        component: () =>
          import(
            /* webpackChunkName: "dashboards" */ "@/views/dashboard/Edit.vue"
          ),
        name: "ViewPod",
        meta: {
-          title: "dashboardEdit",
-          exact: false,
          notShow: true,
        },
+        children: [
+          {
+            path: "/dashboard/:layerId/:entity/:serviceId/:podId/:name",
+            component: () =>
+              import(
+                /* webpackChunkName: "dashboards" */ "@/views/dashboard/Edit.vue"
+              ),
+            name: "ViewPod",
+          },
+          {
+            path: "/dashboard/:layerId/:entity/:serviceId/:podId/:name/tab/:activeTabIndex",
+            component: () =>
+              import(
+                /* webpackChunkName: "dashboards" */ "@/views/dashboard/Edit.vue"
+              ),
+            name: "ViewPodActiveTabIndex",
+          },
+        ],
      },
      {
-        path: "/dashboard/:layerId/:entity/:serviceId/:podId/:destServiceId/:destPodId/:name",
+        path: "",
+        redirect:
+          "/dashboard/:layerId/:entity/:serviceId/:podId/:destServiceId/:destPodId/:name",
        component: () =>
          import(
            /* webpackChunkName: "dashboards" */ "@/views/dashboard/Edit.vue"
          ),
-        name: "ViewPodRelation",
+        name: "PodRelation",
        meta: {
-          title: "dashboardEdit",
-          exact: true,
          notShow: true,
        },
+        children: [
+          {
+            path: "/dashboard/:layerId/:entity/:serviceId/:podId/:destServiceId/:destPodId/:name",
+            component: () =>
+              import(
+                /* webpackChunkName: "dashboards" */ "@/views/dashboard/Edit.vue"
+              ),
+            name: "ViewPodRelation",
+          },
+          {
+            path: "/dashboard/:layerId/:entity/:serviceId/:podId/:destServiceId/:destPodId/:name/tab/:activeTabIndex",
+            component: () =>
+              import(
+                /* webpackChunkName: "dashboards" */ "@/views/dashboard/Edit.vue"
+              ),
+            name: "ViewPodRelationActiveTabIndex",
+          },
+        ],
+      },
+      {
+        path: "",
+        redirect:
+          "/dashboard/:layerId/:entity/:serviceId/:podId/:processId/:destServiceId/:destPodId/:destProcessId/:name",
+        component: () =>
+          import(
+            /* webpackChunkName: "dashboards" */ "@/views/dashboard/Edit.vue"
+          ),
+        name: "ProcessRelation",
+        meta: {
+          notShow: true,
+        },
+        children: [
+          {
+            path: "/dashboard/:layerId/:entity/:serviceId/:podId/:processId/:destServiceId/:destPodId/:destProcessId/:name",
+            component: () =>
+              import(
+                /* webpackChunkName: "dashboards" */ "@/views/dashboard/Edit.vue"
+              ),
+            name: "ViewProcessRelation",
+          },
+          {
+            path: "/dashboard/:layerId/:entity/:serviceId/:podId/:processId/:destServiceId/:destPodId/:destProcessId/:name/tab/:activeTabIndex",
+            component: () =>
+              import(
+                /* webpackChunkName: "dashboards" */ "@/views/dashboard/Edit.vue"
+              ),
+            name: "ViewProcessRelationActiveTabIndex",
+          },
+          {
+            path: "/dashboard/:layerId/:entity/:serviceId/:podId/:processId/:destServiceId/:destPodId/:destProcessId/:name/duration/:duration",
+            component: () =>
+              import(
+                /* webpackChunkName: "dashboards" */ "@/views/dashboard/Edit.vue"
+              ),
+            name: "ViewProcessRelationDuration",
+          },
+        ],
      },
    ],
  },
--- a/src/router/data/browser.ts
+++ b/src/router/data/browser.ts
@@ -14,10 +14,8 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
-import { RouteRecordRaw } from "vue-router";
-import Layout from "@/layout/Index.vue";

-export const routesBrowser: Array<RouteRecordRaw> = [
+export default [
  {
    path: "",
    name: "Browser",
@@ -26,18 +24,22 @@ export const routesBrowser: Array<RouteRecordRaw> = [
      icon: "language",
    },
    redirect: "/browser",
-    component: Layout,
    children: [
      {
        path: "/browser",
        name: "Browser",
        meta: {
          title: "browser",
-          headPath: "/browser",
-          exact: true,
+          layer: "BROWSER",
+        },
+      },
+      {
+        path: "/browser/tab/:activeTabIndex",
+        name: "BrowserActiveTabIndex",
+        meta: {
+          notShow: true,
+          layer: "BROWSER",
        },
-        component: () =>
-          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
      },
    ],
  },
--- a/src/router/data/database.ts
+++ b/src/router/data/database.ts
@@ -0,0 +1,63 @@
+/**
+ * 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",
+        },
+      },
+    ],
+  },
+];
--- a/src/router/data/functions.ts
+++ b/src/router/data/functions.ts
@@ -14,30 +14,25 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
-import { RouteRecordRaw } from "vue-router";
-import Layout from "@/layout/Index.vue";

-export const routesFunctions: Array<RouteRecordRaw> = [
+export default [
  {
    path: "",
    name: "Functions",
    meta: {
      title: "functions",
      icon: "cloud_queue",
+      layer: "FAAS",
    },
    redirect: "/functions",
-    component: Layout,
    children: [
      {
        path: "/functions",
        name: "Functions",
-        meta: {
-          title: "functions",
-          headPath: "/functions",
-          exact: true,
-        },
-        component: () =>
-          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
+      },
+      {
+        path: "/functions/tab/:activeTabIndex",
+        name: "FunctionsActiveTabIndex",
      },
    ],
  },
--- a/src/router/data/gateway.ts
+++ b/src/router/data/gateway.ts
@@ -14,29 +14,33 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
-import { RouteRecordRaw } from "vue-router";
-import Layout from "@/layout/Index.vue";

-export const routesEvent: Array<RouteRecordRaw> = [
+export default [
  {
    path: "",
-    name: "Events",
+    name: "Gateway",
    meta: {
-      title: "events",
-      icon: "av_timer",
-      hasGroup: false,
-      exact: true,
+      title: "gateway",
+      icon: "gateway",
+      hasGroup: true,
    },
-    component: Layout,
+    redirect: "/apisix",
    children: [
      {
-        path: "/events",
-        name: "Events",
+        path: "/apisix",
+        name: "APISIX",
        meta: {
-          exact: false,
+          title: "apisix",
+          layer: "APISIX",
+        },
+      },
+      {
+        path: "/apisix/tab/:activeTabIndex",
+        name: "APISIXActiveTabIndex",
+        meta: {
+          notShow: true,
+          layer: "APISIX",
        },
-        component: () =>
-          import(/* webpackChunkName: "events" */ "@/views/Event.vue"),
      },
    ],
  },
--- a/src/router/data/general.ts
+++ b/src/router/data/general.ts
@@ -0,0 +1,94 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+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",
+        },
+      },
+    ],
+  },
+];
--- a/src/router/data/index.ts
+++ b/src/router/data/index.ts
@@ -14,32 +14,24 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
-import { RouteRecordRaw } from "vue-router";
-import Layout from "@/layout/Index.vue";
+import general from "./general";
+import serviceMesh from "./serviceMesh";
+import database from "./database";
+import infrastructure from "./infrastructure";
+import selfObservability from "./selfObservability";
+import functions from "./functions";
+import browser from "./browser";
+import k8s from "./k8s";
+import gateway from "./gateway";

-export const routesGen: Array<RouteRecordRaw> = [
-  {
-    path: "",
-    name: "General",
-    meta: {
-      title: "general",
-      icon: "chart",
-      hasGroup: false,
-      exact: true,
-    },
-    component: Layout,
-    children: [
-      {
-        path: "/general",
-        name: "GeneralServices",
-        meta: {
-          title: "services",
-          headPath: "/general/service",
-          exact: true,
-        },
-        component: () =>
-          import(/* webpackChunkName: "layers" */ "@/views/Layer.vue"),
-      },
-    ],
-  },
+export default [
+  ...general,
+  ...serviceMesh,
+  ...functions,
+  ...k8s,
+  ...infrastructure,
+  ...browser,
+  ...gateway,
+  ...database,
+  ...selfObservability,
 ];
--- a/src/router/data/infrastructure.ts
+++ b/src/router/data/infrastructure.ts
@@ -14,31 +14,34 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
-import { RouteRecordRaw } from "vue-router";
-import Layout from "@/layout/Index.vue";

-export const routesDatabase: Array<RouteRecordRaw> = [
+export default [
  {
    path: "",
-    name: "Database",
+    name: "Infrastructure",
    meta: {
-      title: "database",
-      icon: "storage",
+      title: "infrastructure",
+      icon: "scatter_plot",
      hasGroup: true,
    },
-    redirect: "/database",
-    component: Layout,
+    redirect: "/linux",
    children: [
      {
-        path: "/database",
-        name: "Database",
+        path: "/linux",
+        name: "Linux",
        meta: {
-          title: "virtualDatabase",
-          headPath: "/database",
-          exact: true,
+          title: "linux",
+          layer: "OS_LINUX",
+        },
+      },
+      {
+        path: "/linux/tab/:activeTabIndex",
+        name: "LinuxActiveTabIndex",
+        meta: {
+          title: "linux",
+          notShow: true,
+          layer: "OS_LINUX",
        },
-        component: () =>
-          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
      },
    ],
  },
--- a/src/router/data/k8s.ts
+++ b/src/router/data/k8s.ts
@@ -14,10 +14,8 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
-import { RouteRecordRaw } from "vue-router";
-import Layout from "@/layout/Index.vue";

-export const routesK8s: Array<RouteRecordRaw> = [
+export default [
  {
    path: "",
    name: "Kubernetes",
@@ -27,25 +25,42 @@ export const routesK8s: Array<RouteRecordRaw> = [
      hasGroup: true,
    },
    redirect: "/kubernetes/cluster",
-    component: Layout,
    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",
        },
-        component: () =>
-          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
      },
      {
        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",
        },
-        component: () =>
-          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
      },
    ],
  },
--- a/src/router/data/selfObservability.ts
+++ b/src/router/data/selfObservability.ts
@@ -14,10 +14,8 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
-import { RouteRecordRaw } from "vue-router";
-import Layout from "@/layout/Index.vue";

-export const routesSelf: Array<RouteRecordRaw> = [
+export default [
  {
    path: "",
    name: "SelfObservability",
@@ -27,27 +25,38 @@ export const routesSelf: Array<RouteRecordRaw> = [
      icon: "logo",
      hasGroup: true,
    },
-    component: Layout,
    children: [
      {
        path: "/self/skyWalkingServer",
        name: "SkyWalkingServer",
        meta: {
          title: "skyWalkingServer",
-          headPath: "/mesh/services",
+          layer: "SO11Y_OAP",
+        },
+      },
+      {
+        path: "/self/skyWalkingServer/tab/:activeTabIndex",
+        name: "SkyWalkingServerActiveTabIndex",
+        meta: {
+          notShow: true,
+          layer: "SO11Y_OAP",
        },
-        component: () =>
-          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
      },
      {
        path: "/self/satellite",
        name: "Satellite",
        meta: {
          title: "satellite",
-          headPath: "/mesh/controlPanel",
+          layer: "SO11Y_SATELLITE",
+        },
+      },
+      {
+        path: "/self/satellite/tab/:activeTabIndex",
+        name: "SatelliteActiveTabIndex",
+        meta: {
+          notShow: true,
+          layer: "SO11Y_SATELLITE",
        },
-        component: () =>
-          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
      },
    ],
  },
--- a/src/router/data/serviceMesh.ts
+++ b/src/router/data/serviceMesh.ts
@@ -14,10 +14,8 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
-import { RouteRecordRaw } from "vue-router";
-import Layout from "@/layout/Index.vue";

-export const routesMesh: Array<RouteRecordRaw> = [
+export default [
  {
    path: "",
    name: "ServiceMesh",
@@ -27,36 +25,58 @@ export const routesMesh: Array<RouteRecordRaw> = [
      icon: "epic",
      hasGroup: true,
    },
-    component: Layout,
    children: [
      {
        path: "/mesh/services",
        name: "MeshServices",
        meta: {
+          notShow: false,
          title: "services",
-          headPath: "/mesh/services",
+          layer: "MESH",
+        },
+      },
+      {
+        path: "/mesh/services/tab/:activeTabIndex",
+        name: "MeshServicesActiveTabIndex",
+        meta: {
+          notShow: true,
+          layer: "MESH",
        },
-        component: () =>
-          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
      },
      {
        path: "/mesh/controlPanel",
        name: "ControlPanel",
        meta: {
+          notShow: false,
          title: "controlPanel",
-          headPath: "/mesh/controlPanel",
+          layer: "MESH_CP",
+        },
+      },
+      {
+        path: "/mesh/controlPanel/tab/:activeTabIndex",
+        name: "ControlPanelActiveTabIndex",
+        meta: {
+          notShow: true,
+          layer: "MESH_CP",
        },
-        component: () =>
-          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
      },
      {
        path: "/mesh/dataPanel",
        name: "DataPanel",
        meta: {
+          notShow: false,
          title: "dataPanel",
-          headPath: "/mesh/dataPanel",
+          layer: "MESH_DP",
+        },
+      },
+      {
+        path: "/mesh/dataPanel/tab/:activeTabIndex",
+        name: "DataPanelActiveTabIndex",
+        meta: {
+          notShow: true,
+          title: "dataPanelActiveTabIndex",
+          layer: "MESH_DP",
        },
-        component: () => import("@/views/Layer.vue"),
      },
    ],
  },
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -15,31 +15,15 @@
 * limitations under the License.
 */
 import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
-import { routesGen } from "./general";
-import { routesMesh } from "./serviceMesh";
-import { routesDatabase } from "./database";
-import { routesInfra } from "./infrastructure";
 import { routesDashboard } from "./dashboard";
-import { routesEvent } from "./event";
 import { routesSetting } from "./setting";
 import { routesAlarm } from "./alarm";
-import { routesSelf } from "./selfObservability";
-import { routesFunctions } from "./functions";
-import { routesBrowser } from "./browser";
-import { routesK8s } from "./k8s";
+import routesLayers from "./layer";

 const routes: Array<RouteRecordRaw> = [
-  ...routesGen,
-  ...routesMesh,
-  ...routesFunctions,
-  ...routesK8s,
-  ...routesInfra,
-  ...routesBrowser,
-  ...routesDatabase,
-  ...routesSelf,
+  ...routesLayers,
  ...routesDashboard,
  ...routesAlarm,
-  ...routesEvent,
  ...routesSetting,
 ];

--- a/src/router/infrastructure.ts
+++ b/src/router/infrastructure.ts
@@ -1,60 +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.
- */
-import { RouteRecordRaw } from "vue-router";
-import Layout from "@/layout/Index.vue";
-
-export const routesInfra: Array<RouteRecordRaw> = [
-  {
-    path: "",
-    name: "Infrastructure",
-    meta: {
-      title: "infrastructure",
-      icon: "scatter_plot",
-      exact: true,
-      hasGroup: true,
-    },
-    redirect: "/linux",
-    component: Layout,
-    children: [
-      {
-        path: "/linux",
-        name: "Linux",
-        meta: {
-          title: "linux",
-        },
-        component: () =>
-          import(/* webpackChunkName: "layer" */ "@/views/Layer.vue"),
-      },
-      // {
-      //   path: "/infrastructure/vm",
-      //   name: "VirtualMachine",
-      //   meta: {
-      //     title: "virtualMachine",
-      //   },
-      //   component: () => import("@/views/infrastructure/Infrastructure.vue"),
-      // },
-      // {
-      //   path: "/infrastructure/k8s",
-      //   name: "Kubernetes",
-      //   meta: {
-      //     title: "kubernetes",
-      //   },
-      //   component: () => import("@/views/infrastructure/Infrastructure.vue"),
-      // },
-    ],
-  },
-];
--- a/src/router/layer.ts
+++ b/src/router/layer.ts
@@ -0,0 +1,35 @@
+/**
+ * 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 LayerJson from "./data";
+import Layout from "@/layout/Index.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(/* webpackChunkName: "layer" */ "@/views/Layer.vue");
+        return d;
+      });
+    }
+    return item;
+  });
+  return routes;
+}
+
+export default layerDashboards();
--- a/src/router/setting.ts
+++ b/src/router/setting.ts
@@ -25,7 +25,6 @@ export const routesSetting: Array<RouteRecordRaw> = [
      title: "settings",
      icon: "settings",
      hasGroup: false,
-      exact: false,
    },
    component: Layout,
    children: [
@@ -36,7 +35,6 @@ export const routesSetting: Array<RouteRecordRaw> = [
          title: "settings",
          icon: "settings",
          hasGroup: false,
-          exact: false,
        },
        component: () =>
          import(/* webpackChunkName: "settings" */ "@/views/Settings.vue"),
--- a/src/store/data.ts
+++ b/src/store/data.ts
@@ -29,3 +29,11 @@ export const TextConfig = {
  fontSize: 14,
  textAlign: "left",
 };
+
+export const TimeRangeConfig = {
+  fontColor: "black",
+  backgroundColor: "white",
+  fontSize: 14,
+  textAlign: "center",
+  text: "text",
+};
--- a/src/store/modules/app.ts
+++ b/src/store/modules/app.ts
@@ -33,6 +33,8 @@ interface AppState {
  autoRefresh: boolean;
  pageTitle: string;
  version: string;
+  isMobile: boolean;
+  reloadTimer: Nullable<any>;
 }

 export const appStore = defineStore({
@@ -51,6 +53,8 @@ export const appStore = defineStore({
    autoRefresh: false,
    pageTitle: "",
    version: "",
+    isMobile: false,
+    reloadTimer: null,
  }),
  getters: {
    duration(): Duration {
@@ -67,7 +71,7 @@ export const appStore = defineStore({
        step: this.duration.step,
      };
    },
-    intervalTime(): string[] {
+    intervalUnix(): number[] {
      let interval = 946080000000;
      switch (this.duration.step) {
        case "MINUTE":
@@ -88,20 +92,22 @@ export const appStore = defineStore({
              this.duration.start.getMonth());
          break;
      }
-      const utcArr = this.utc.split(":");
-      const utcHour = isNaN(Number(utcArr[0])) ? 0 : Number(utcArr[0]);
-      const utcMin = isNaN(Number(utcArr[1])) ? 0 : Number(utcArr[1]);
      const utcSpace =
-        (utcHour + new Date().getTimezoneOffset() / 60) * 3600000 +
-        utcMin * 60000;
+        (this.utcHour + new Date().getTimezoneOffset() / 60) * 3600000 +
+        this.utcMin * 60000;
      const startUnix: number = this.duration.start.getTime();
      const endUnix: number = this.duration.end.getTime();
-      const timeIntervals: string[] = [];
+      const timeIntervals: number[] = [];
      for (let i = 0; i <= endUnix - startUnix; i += interval) {
-        const temp: string = dateFormatTime(
-          new Date(startUnix + i - utcSpace),
-          this.duration.step
-        );
+        timeIntervals.push(startUnix + i - utcSpace);
+      }
+      return timeIntervals;
+    },
+    intervalTime(): string[] {
+      const arr = this.intervalUnix;
+      const timeIntervals: string[] = [];
+      for (const item of arr) {
+        const temp: string = dateFormatTime(new Date(item), this.duration.step);
        timeIntervals.push(temp);
      }
      return timeIntervals;
@@ -118,12 +124,21 @@ export const appStore = defineStore({
      }
      this.runEventStack();
    },
+    updateDurationRow(data: Duration) {
+      this.durationRow = data;
+    },
    setUTC(utcHour: number, utcMin: number): void {
      this.runEventStack();
      this.utcMin = utcMin;
      this.utcHour = utcHour;
      this.utc = `${utcHour}:${utcMin}`;
    },
+    updateUTC(data: string) {
+      this.utc = data;
+    },
+    setIsMobile(mode: boolean) {
+      this.isMobile = mode;
+    },
    setEventStack(funcs: (() => void)[]): void {
      this.eventStack = funcs;
    },
@@ -151,9 +166,12 @@ export const appStore = defineStore({
        .params({});
      if (res.data.errors) {
        this.utc = -(new Date().getTimezoneOffset() / 60) + ":0";
-        return res.data;
+      } else {
+        this.utc = res.data.data.getTimeInfo.timezone / 100 + ":0";
      }
-      this.utc = res.data.data.getTimeInfo.timezone / 100 + ":0";
+      const utcArr = this.utc.split(":");
+      this.utcHour = isNaN(Number(utcArr[0])) ? 0 : Number(utcArr[0]);
+      this.utcMin = isNaN(Number(utcArr[1])) ? 0 : Number(utcArr[1]);

      return res.data;
    },
@@ -167,6 +185,9 @@ export const appStore = defineStore({
      this.version = res.data.data.version;
      return res.data;
    },
+    setReloadTimer(timer: any): void {
+      this.reloadTimer = timer;
+    },
  },
 });
 export function useAppStoreWithOut(): any {
--- a/src/store/modules/dashboard.ts
+++ b/src/store/modules/dashboard.ts
@@ -20,10 +20,8 @@ import { LayoutConfig } from "@/types/dashboard";
 import graphql from "@/graphql";
 import query from "@/graphql/fetch";
 import { DashboardItem } from "@/types/dashboard";
-import { useAppStoreWithOut } from "@/store/modules/app";
 import { useSelectorStore } from "@/store/modules/selectors";
-import { NewControl, TextConfig } from "../data";
-import { Duration } from "@/types/app";
+import { NewControl, TextConfig, TimeRangeConfig } from "../data";
 import { AxiosResponse } from "axios";
 import { ElMessage } from "element-plus";
 import { useI18n } from "vue-i18n";
@@ -35,13 +33,13 @@ interface DashboardState {
  entity: string;
  layerId: string;
  activedGridItem: string;
-  durationTime: Duration;
  selectorStore: any;
  showTopology: boolean;
  currentTabItems: LayoutConfig[];
  dashboards: DashboardItem[];
  currentDashboard: Nullable<DashboardItem>;
  editMode: boolean;
+  currentTabIndex: number;
 }

 export const dashboardStore = defineStore({
@@ -53,13 +51,13 @@ export const dashboardStore = defineStore({
    entity: "",
    layerId: "",
    activedGridItem: "",
-    durationTime: useAppStoreWithOut().durationTime,
    selectorStore: useSelectorStore(),
    showTopology: false,
    currentTabItems: [],
    dashboards: [],
    currentDashboard: null,
    editMode: false,
+    currentTabIndex: 0,
  }),
  actions: {
    setLayout(data: LayoutConfig[]) {
@@ -84,6 +82,7 @@ export const dashboardStore = defineStore({
      const newItem: LayoutConfig = {
        ...NewControl,
        i: index,
+        id: index,
        type,
        metricTypes: [""],
        metrics: [""],
@@ -114,13 +113,27 @@ export const dashboardStore = defineStore({
              : 3,
        };
      }
-      if (type === "Trace" || type === "Profile" || type === "Log") {
+      if (
+        [
+          "Trace",
+          "Profile",
+          "Log",
+          "DemandLog",
+          "Ebpf",
+          "NetworkProfiling",
+        ].includes(type)
+      ) {
        newItem.h = 36;
      }
      if (type === "Text") {
        newItem.h = 6;
        newItem.graph = TextConfig;
      }
+      if (type === "TimeRange") {
+        newItem.w = 8;
+        newItem.h = 6;
+        newItem.graph = TimeRangeConfig;
+      }
      this.activedGridItem = newItem.i;
      this.selectedGrid = newItem;
      this.layout = this.layout.map((d: LayoutConfig) => {
@@ -156,9 +169,11 @@ export const dashboardStore = defineStore({
      if (!children.length) {
        index = "0";
      }
+      const id = `${activedGridItem}-${tabIndex}-${index}`;
      const newItem: LayoutConfig = {
        ...NewControl,
        i: index,
+        id,
        type,
        metricTypes: [""],
        metrics: [""],
@@ -169,13 +184,27 @@ export const dashboardStore = defineStore({
          showDepth: true,
        };
      }
-      if (type === "Trace" || type === "Profile" || type === "Log") {
+      if (
+        [
+          "Trace",
+          "Profile",
+          "Log",
+          "DemandLog",
+          "Ebpf",
+          "NetworkProfiling",
+        ].includes(type)
+      ) {
        newItem.h = 32;
      }
      if (type === "Text") {
        newItem.h = 6;
        newItem.graph = TextConfig;
      }
+      if (type === "TimeRange") {
+        newItem.w = 8;
+        newItem.h = 6;
+        newItem.graph = TextConfig;
+      }
      if (this.layout[idx].children) {
        const items = children.map((d: LayoutConfig) => {
          d.y = d.y + newItem.h;
@@ -190,6 +219,7 @@ export const dashboardStore = defineStore({
      this.activedGridItem = index;
    },
    setActiveTabIndex(index: number, target?: number) {
+      this.currentTabIndex = index;
      const m = target || this.activedGridItem;
      const idx = this.layout.findIndex((d: LayoutConfig) => d.i === m);
      if (idx < 0) {
@@ -279,6 +309,28 @@ export const dashboardStore = defineStore({
      };
      this.selectedGrid = this.layout[index];
    },
+    setWidget(param: LayoutConfig) {
+      for (let i = 0; i < this.layout.length; i++) {
+        if (this.layout[i].type === "Tab") {
+          if (this.layout[i].children && this.layout[i].children.length) {
+            for (const child of this.layout[i].children) {
+              if (child.children && child.children.length) {
+                for (let c = 0; c < child.children.length; c++) {
+                  if (child.children[c].id === param.id) {
+                    child.children.splice(c, 1, param);
+                    return;
+                  }
+                }
+              }
+            }
+          }
+        } else {
+          if (this.layout[i].id === param.id) {
+            this.layout.splice(i, 1, param);
+          }
+        }
+      }
+    },
    async fetchMetricType(item: string) {
      const res: AxiosResponse = await graphql
        .query("queryTypeOfMetrics")
--- a/src/store/modules/demand-log.ts
+++ b/src/store/modules/demand-log.ts
@@ -0,0 +1,126 @@
+/**
+ * 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 { Instance } from "@/types/selector";
+import { store } from "@/store";
+import graphql from "@/graphql";
+import { AxiosResponse } from "axios";
+import { useAppStoreWithOut } from "@/store/modules/app";
+import { useSelectorStore } from "@/store/modules/selectors";
+import { Conditions, Log } from "@/types/demand-log";
+
+interface DemandLogState {
+  containers: Instance[];
+  instances: Instance[];
+  conditions: Conditions;
+  selectorStore: any;
+  logs: Log[];
+  loadLogs: boolean;
+  message: string;
+  total: number;
+}
+
+export const demandLogStore = defineStore({
+  id: "demandLog",
+  state: (): DemandLogState => ({
+    containers: [{ label: "", value: "" }],
+    instances: [{ value: "", label: "" }],
+    conditions: {
+      container: "",
+      serviceInstanceId: "",
+      duration: useAppStoreWithOut().durationTime,
+    },
+    selectorStore: useSelectorStore(),
+    logs: [],
+    loadLogs: false,
+    message: "",
+    total: 0,
+  }),
+  actions: {
+    setLogCondition(data: Conditions) {
+      this.conditions = { ...this.conditions, ...data };
+    },
+    setLogs(logs: Log[], message?: string) {
+      this.logs = logs;
+      this.message = message || "";
+    },
+    async getInstances(id: string) {
+      const serviceId = this.selectorStore.currentService
+        ? this.selectorStore.currentService.id
+        : id;
+      const res: AxiosResponse = await graphql.query("queryInstances").params({
+        serviceId,
+        duration: useAppStoreWithOut().durationTime,
+      });
+
+      if (res.data.errors) {
+        return res.data;
+      }
+      this.instances = res.data.data.pods || [];
+      return res.data;
+    },
+    async getContainers(serviceInstanceId: string) {
+      if (!serviceInstanceId) {
+        return new Promise((resolve) =>
+          resolve({ errors: "No service instance" })
+        );
+      }
+      const condition = {
+        serviceInstanceId,
+      };
+      const res: AxiosResponse = await graphql
+        .query("fetchContainers")
+        .params({ condition });
+
+      if (res.data.errors) {
+        return res.data;
+      }
+      if (res.data.data.containers.errorReason) {
+        this.containers = [{ label: "", value: "" }];
+        return res.data;
+      }
+      this.containers = res.data.data.containers.containers.map((d: string) => {
+        return { label: d, value: d };
+      });
+      return res.data;
+    },
+    async getDemandLogs() {
+      this.loadLogs = true;
+      const res: AxiosResponse = await graphql
+        .query("fetchDemandPodLogs")
+        .params({ condition: this.conditions });
+      this.loadLogs = false;
+      if (res.data.errors) {
+        return res.data;
+      }
+      if (res.data.data.logs.errorReason) {
+        this.setLogs("", res.data.data.logs.errorReason);
+        return res.data;
+      }
+      this.total = res.data.data.logs.logs.length;
+      const logs = res.data.data.logs.logs
+        .map((d: Log) => d.content)
+        .join("\n");
+      this.setLogs(logs);
+      return res.data;
+    },
+  },
+});
+
+export function useDemandLogStore(): any {
+  return demandLogStore(store);
+}
--- a/src/store/modules/ebpf.ts
+++ b/src/store/modules/ebpf.ts
@@ -0,0 +1,177 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { defineStore } from "pinia";
+import { Option } from "@/types/app";
+import {
+  EBPFTaskCreationRequest,
+  EBPFProfilingSchedule,
+  EBPFTaskList,
+  AnalyzationTrees,
+} from "@/types/ebpf";
+import { store } from "@/store";
+import graphql from "@/graphql";
+import { AxiosResponse } from "axios";
+interface EbpfState {
+  taskList: EBPFTaskList[];
+  eBPFSchedules: EBPFProfilingSchedule[];
+  currentSchedule: EBPFProfilingSchedule | Record<string, never>;
+  analyzeTrees: AnalyzationTrees[];
+  labels: Option[];
+  couldProfiling: boolean;
+  tip: string;
+  selectedTask: Recordable<EBPFTaskList>;
+  aggregateType: string;
+}
+
+export const ebpfStore = defineStore({
+  id: "eBPF",
+  state: (): EbpfState => ({
+    taskList: [],
+    eBPFSchedules: [],
+    currentSchedule: {},
+    analyzeTrees: [],
+    labels: [{ value: "", label: "" }],
+    couldProfiling: false,
+    tip: "",
+    selectedTask: {},
+    aggregateType: "COUNT",
+  }),
+  actions: {
+    setSelectedTask(task: EBPFTaskList) {
+      this.selectedTask = task || {};
+    },
+    setCurrentSchedule(s: EBPFProfilingSchedule) {
+      this.currentSchedule = s;
+    },
+    setAnalyzeTrees(tree: AnalyzationTrees[]) {
+      this.analyzeTrees = tree;
+    },
+    async getCreateTaskData(serviceId: string) {
+      const res: AxiosResponse = await graphql
+        .query("getCreateTaskData")
+        .params({ serviceId });
+
+      if (res.data.errors) {
+        return res.data;
+      }
+      const json = res.data.data.createTaskData;
+      this.couldProfiling = json.couldProfiling || false;
+      this.labels = json.processLabels.map((d: string) => {
+        return { label: d, value: d };
+      });
+      return res.data;
+    },
+    async createTask(param: EBPFTaskCreationRequest) {
+      const res: AxiosResponse = await graphql
+        .query("saveEBPFTask")
+        .params({ request: param });
+
+      if (res.data.errors) {
+        return res.data;
+      }
+      this.getTaskList({
+        serviceId: param.serviceId,
+        targets: ["ON_CPU", "OFF_CPU"],
+      });
+      return res.data;
+    },
+    async getTaskList(params: {
+      serviceId: string;
+      serviceInstanceId: string;
+      targets: string[];
+    }) {
+      if (!params.serviceId) {
+        return new Promise((resolve) => resolve({}));
+      }
+      const res: AxiosResponse = await graphql
+        .query("getEBPFTasks")
+        .params(params);
+
+      this.tip = "";
+      if (res.data.errors) {
+        return res.data;
+      }
+      this.taskList = res.data.data.queryEBPFTasks || [];
+      this.selectedTask = this.taskList[0] || {};
+      this.setSelectedTask(this.selectedTask);
+      if (!this.taskList.length) {
+        return res.data;
+      }
+      this.getEBPFSchedules({ taskId: this.taskList[0].taskId });
+      return res.data;
+    },
+    async getEBPFSchedules(params: { taskId: string }) {
+      if (!params.taskId) {
+        return new Promise((resolve) => resolve({}));
+      }
+      const res: AxiosResponse = await graphql
+        .query("getEBPFSchedules")
+        .params({ ...params });
+
+      if (res.data.errors) {
+        this.eBPFSchedules = [];
+        return res.data;
+      }
+      this.tip = "";
+      const { eBPFSchedules } = res.data.data;
+
+      this.eBPFSchedules = eBPFSchedules;
+      if (!eBPFSchedules.length) {
+        this.eBPFSchedules = [];
+        this.analyzeTrees = [];
+      }
+      return res.data;
+    },
+    async getEBPFAnalyze(params: {
+      scheduleIdList: string[];
+      timeRanges: Array<{ start: number; end: number }>;
+      aggregateType: string;
+    }) {
+      this.aggregateType = params.aggregateType;
+      if (!params.scheduleIdList.length) {
+        return new Promise((resolve) => resolve({}));
+      }
+      if (!params.timeRanges.length) {
+        return new Promise((resolve) => resolve({}));
+      }
+      const res: AxiosResponse = await graphql
+        .query("getEBPFResult")
+        .params(params);
+
+      if (res.data.errors) {
+        this.analyzeTrees = [];
+        return res.data;
+      }
+      const { analysisEBPFResult } = res.data.data;
+      this.tip = analysisEBPFResult.tip;
+      if (!analysisEBPFResult) {
+        this.analyzeTrees = [];
+        return res.data;
+      }
+      if (analysisEBPFResult.tip) {
+        this.analyzeTrees = [];
+        return res.data;
+      }
+      this.analyzeTrees = analysisEBPFResult.trees;
+      return res.data;
+    },
+  },
+});
+
+export function useEbpfStore(): any {
+  return ebpfStore(store);
+}
--- a/src/store/modules/event.ts
+++ b/src/store/modules/event.ts
@@ -19,17 +19,16 @@ import { store } from "@/store";
 import graphql from "@/graphql";
 import { AxiosResponse } from "axios";
 import { Event, QueryEventCondition } from "@/types/events";
-import { Instance, Endpoint, Service } from "@/types/selector";
+import { Instance, Endpoint } from "@/types/selector";
 import { useAppStoreWithOut } from "@/store/modules/app";
+import { useSelectorStore } from "@/store/modules/selectors";

 interface eventState {
  loading: boolean;
  events: Event[];
-  total: number;
-  services: Service[];
  instances: Instance[];
  endpoints: Endpoint[];
-  condition: QueryEventCondition | any;
+  condition: Nullable<QueryEventCondition>;
 }

 export const eventStore = defineStore({
@@ -37,34 +36,18 @@ export const eventStore = defineStore({
  state: (): eventState => ({
    loading: false,
    events: [],
-    total: 0,
-    services: [{ value: "", label: "All" }],
    instances: [{ value: "", label: "All" }],
    endpoints: [{ value: "", label: "All" }],
-    condition: {
-      time: useAppStoreWithOut().durationTime,
-      paging: { pageNum: 1, pageSize: 15, needTotal: true },
-    },
+    condition: null,
  }),
  actions: {
-    setEventCondition(data: any) {
-      this.condition = { ...this.condition, ...data };
+    setEventCondition(data: QueryEventCondition) {
+      this.condition = data;
    },
-    async getServices(layer: string) {
-      if (!layer) {
-        this.services = [{ value: "", label: "All" }];
-        return new Promise((resolve) => resolve([]));
-      }
-      const res: AxiosResponse = await graphql.query("queryServices").params({
-        layer,
-      });
-      if (res.data.errors) {
-        return res.data;
-      }
-      this.services = res.data.data.services;
-      return res.data;
-    },
-    async getInstances(serviceId: string) {
+    async getInstances() {
+      const serviceId = useSelectorStore().currentService
+        ? useSelectorStore().currentService.id
+        : "";
      const res: AxiosResponse = await graphql.query("queryInstances").params({
        serviceId,
        duration: useAppStoreWithOut().durationTime,
@@ -78,7 +61,13 @@ export const eventStore = defineStore({
      ];
      return res.data;
    },
-    async getEndpoints(serviceId: string) {
+    async getEndpoints() {
+      const serviceId = useSelectorStore().currentService
+        ? useSelectorStore().currentService.id
+        : "";
+      if (!serviceId) {
+        return;
+      }
      const res: AxiosResponse = await graphql.query("queryEndpoints").params({
        serviceId,
        duration: useAppStoreWithOut().durationTime,
@@ -94,9 +83,12 @@ export const eventStore = defineStore({
    },
    async getEvents() {
      this.loading = true;
-      const res: AxiosResponse = await graphql
-        .query("queryEvents")
-        .params({ condition: this.condition });
+      const res: AxiosResponse = await graphql.query("queryEvents").params({
+        condition: {
+          ...this.condition,
+          time: useAppStoreWithOut().durationTime,
+        },
+      });
      this.loading = false;
      if (res.data.errors) {
        return res.data;
@@ -112,10 +104,12 @@ export const eventStore = defineStore({
              scope = "Endpoint";
            }
            item.scope = scope;
+            if (!item.endTime || item.endTime === item.startTime) {
+              item.endTime = Number(item.startTime) + 60000;
+            }
            return item;
          }
        );
-        this.total = res.data.data.fetchEvents.total;
      }
      return res.data;
    },
--- a/src/store/modules/log.ts
+++ b/src/store/modules/log.ts
@@ -15,7 +15,6 @@
 * limitations under the License.
 */
 import { defineStore } from "pinia";
-import { Duration } from "@/types/app";
 import { Instance, Endpoint, Service } from "@/types/selector";
 import { store } from "@/store";
 import graphql from "@/graphql";
@@ -29,11 +28,9 @@ interface LogState {
  instances: Instance[];
  endpoints: Endpoint[];
  conditions: any;
-  durationTime: Duration;
  selectorStore: any;
  supportQueryLogsByKeywords: boolean;
  logs: any[];
-  logsTotal: number;
  loadLogs: boolean;
 }

@@ -45,19 +42,24 @@ export const logStore = defineStore({
    endpoints: [{ value: "0", label: "All" }],
    conditions: {
      queryDuration: useAppStoreWithOut().durationTime,
-      paging: { pageNum: 1, pageSize: 15, needTotal: true },
+      paging: { pageNum: 1, pageSize: 15 },
    },
    supportQueryLogsByKeywords: true,
-    durationTime: useAppStoreWithOut().durationTime,
    selectorStore: useSelectorStore(),
    logs: [],
-    logsTotal: 0,
    loadLogs: false,
  }),
  actions: {
    setLogCondition(data: any) {
      this.conditions = { ...this.conditions, ...data };
    },
+    resetState() {
+      this.logs = [];
+      this.conditions = {
+        queryDuration: useAppStoreWithOut().durationTime,
+        paging: { pageNum: 1, pageSize: 15 },
+      };
+    },
    async getServices(layer: string) {
      const res: AxiosResponse = await graphql.query("queryServices").params({
        layer,
@@ -74,7 +76,7 @@ export const logStore = defineStore({
        : id;
      const res: AxiosResponse = await graphql.query("queryInstances").params({
        serviceId,
-        duration: this.durationTime,
+        duration: useAppStoreWithOut().durationTime,
      });

      if (res.data.errors) {
@@ -92,7 +94,7 @@ export const logStore = defineStore({
        : id;
      const res: AxiosResponse = await graphql.query("queryEndpoints").params({
        serviceId,
-        duration: this.durationTime,
+        duration: useAppStoreWithOut().durationTime,
        keyword: keyword || "",
      });
      if (res.data.errors) {
@@ -134,7 +136,6 @@ export const logStore = defineStore({
      }

      this.logs = res.data.data.queryLogs.logs;
-      this.logsTotal = res.data.data.queryLogs.total;
      return res.data;
    },
    async getBrowserLogs() {
@@ -148,7 +149,20 @@ export const logStore = defineStore({
        return res.data;
      }
      this.logs = res.data.data.queryBrowserErrorLogs.logs;
-      this.logsTotal = res.data.data.queryBrowserErrorLogs.total;
+      return res.data;
+    },
+    async getLogTagKeys() {
+      const res: AxiosResponse = await graphql
+        .query("queryLogTagKeys")
+        .params({ duration: useAppStoreWithOut().durationTime });
+
+      return res.data;
+    },
+    async getLogTagValues(tagKey: string) {
+      const res: AxiosResponse = await graphql
+        .query("queryLogTagValues")
+        .params({ tagKey, duration: useAppStoreWithOut().durationTime });
+
      return res.data;
    },
  },
--- a/src/store/modules/network-profiling.ts
+++ b/src/store/modules/network-profiling.ts
@@ -0,0 +1,203 @@
+/**
+ * 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 { EBPFTaskList, ProcessNode } from "@/types/ebpf";
+import { store } from "@/store";
+import graphql from "@/graphql";
+import { AxiosResponse } from "axios";
+import { Call } from "@/types/topology";
+import { LayoutConfig } from "@/types/dashboard";
+import { ElMessage } from "element-plus";
+
+interface NetworkProfilingState {
+  networkTasks: EBPFTaskList[];
+  networkTip: string;
+  selectedNetworkTask: Recordable<EBPFTaskList>;
+  nodes: ProcessNode[];
+  calls: Call[];
+  node: Nullable<ProcessNode>;
+  call: Nullable<Call>;
+  metricsLayout: LayoutConfig[];
+  selectedMetric: Nullable<LayoutConfig>;
+  activeMetricIndex: string;
+  aliveNetwork: boolean;
+  loadNodes: boolean;
+}
+
+export const networkProfilingStore = defineStore({
+  id: "networkProfiling",
+  state: (): NetworkProfilingState => ({
+    networkTasks: [],
+    networkTip: "",
+    selectedNetworkTask: {},
+    nodes: [],
+    calls: [],
+    node: null,
+    call: null,
+    metricsLayout: [],
+    selectedMetric: null,
+    activeMetricIndex: "",
+    aliveNetwork: false,
+    loadNodes: false,
+  }),
+  actions: {
+    setSelectedNetworkTask(task: EBPFTaskList) {
+      this.selectedNetworkTask = task || {};
+    },
+    setNode(node: Node) {
+      this.node = node;
+    },
+    setLink(link: Call) {
+      this.call = link;
+    },
+    setMetricsLayout(layout: LayoutConfig[]) {
+      this.metricsLayout = layout;
+    },
+    setSelectedMetric(item: LayoutConfig) {
+      this.selectedMetric = item;
+    },
+    setActiveItem(index: string) {
+      this.activeMetricIndex = index;
+    },
+    setTopology(data: { nodes: ProcessNode[]; calls: Call[] }) {
+      const obj = {} as any;
+      let calls = (data.calls || []).reduce((prev: Call[], next: Call) => {
+        if (!obj[next.id]) {
+          obj[next.id] = true;
+          next.value = next.value || 1;
+          for (const node of data.nodes) {
+            if (next.source === node.id) {
+              next.sourceObj = node;
+            }
+            if (next.target === node.id) {
+              next.targetObj = node;
+            }
+          }
+          next.value = next.value || 1;
+          prev.push(next);
+        }
+        return prev;
+      }, []);
+      const param = {} as any;
+      calls = data.calls.reduce((prev: (Call | any)[], next: Call | any) => {
+        if (param[next.targetId + next.sourceId]) {
+          next.lowerArc = true;
+        }
+        param[next.sourceId + next.targetId] = true;
+        next.sourceId = next.source;
+        next.targetId = next.target;
+        next.source = next.sourceObj;
+        next.target = next.targetObj;
+        delete next.sourceObj;
+        delete next.targetObj;
+        prev.push(next);
+        return prev;
+      }, []);
+      this.calls = calls;
+      this.nodes = data.nodes;
+    },
+    async createNetworkTask(
+      instanceId: string,
+      params: {
+        uriRegex: string;
+        when4xx: string;
+        when5xx: string;
+        minDuration: number;
+      }[]
+    ) {
+      const res: AxiosResponse = await graphql
+        .query("newNetworkProfiling")
+        .params({
+          request: {
+            instanceId,
+            samplings: params,
+          },
+        });
+
+      if (res.data.errors) {
+        return res.data;
+      }
+      return res.data;
+    },
+    async getTaskList(params: {
+      serviceId: string;
+      serviceInstanceId: string;
+      targets: string[];
+    }) {
+      if (!params.serviceId) {
+        return new Promise((resolve) => resolve({}));
+      }
+      const res: AxiosResponse = await graphql
+        .query("getEBPFTasks")
+        .params(params);
+
+      this.networkTip = "";
+      if (res.data.errors) {
+        return res.data;
+      }
+      this.networkTasks = res.data.data.queryEBPFTasks || [];
+      this.selectedNetworkTask = this.networkTasks[0] || {};
+      this.setSelectedNetworkTask(this.selectedNetworkTask);
+      if (!this.networkTasks.length) {
+        this.nodes = [];
+        this.calls = [];
+      }
+      return res.data;
+    },
+    async keepNetworkProfiling(taskId: string) {
+      if (!taskId) {
+        return new Promise((resolve) => resolve({}));
+      }
+      const res: AxiosResponse = await graphql
+        .query("aliveNetworkProfiling")
+        .params({ taskId });
+
+      this.aliveMessage = "";
+      if (res.data.errors) {
+        return res.data;
+      }
+      this.aliveNetwork = res.data.data.keepEBPFNetworkProfiling.status;
+      if (!this.aliveNetwork) {
+        ElMessage.warning(res.data.data.keepEBPFNetworkProfiling.errorReason);
+      }
+      return res.data;
+    },
+    async getProcessTopology(params: {
+      duration: any;
+      serviceInstanceId: string;
+    }) {
+      this.loadNodes = true;
+      const res: AxiosResponse = await graphql
+        .query("getProcessTopology")
+        .params(params);
+      this.loadNodes = false;
+      if (res.data.errors) {
+        this.nodes = [];
+        this.calls = [];
+        return res.data;
+      }
+      const { topology } = res.data.data;
+
+      this.setTopology(topology);
+      return res.data;
+    },
+  },
+});
+
+export function useNetworkProfilingStore(): any {
+  return networkProfilingStore(store);
+}
--- a/src/store/modules/profile.ts
+++ b/src/store/modules/profile.ts
@@ -15,8 +15,7 @@
 * limitations under the License.
 */
 import { defineStore } from "pinia";
-import { Duration } from "@/types/app";
-import { Service } from "@/types/selector";
+import { Endpoint } from "@/types/selector";
 import {
  TaskListItem,
  SegmentSpan,
@@ -31,8 +30,8 @@ import { AxiosResponse } from "axios";
 import { useAppStoreWithOut } from "@/store/modules/app";

 interface ProfileState {
-  services: Service[];
-  durationTime: Duration;
+  endpoints: Endpoint[];
+  taskEndpoints: Endpoint[];
  condition: { serviceId: string; endpointName: string };
  taskList: TaskListItem[];
  segmentList: Trace[];
@@ -47,8 +46,8 @@ interface ProfileState {
 export const profileStore = defineStore({
  id: "profile",
  state: (): ProfileState => ({
-    services: [{ value: "0", label: "All" }],
-    durationTime: useAppStoreWithOut().durationTime,
+    endpoints: [{ value: "", label: "All" }],
+    taskEndpoints: [{ value: "", label: "All" }],
    condition: { serviceId: "", endpointName: "" },
    taskList: [],
    segmentList: [],
@@ -75,14 +74,28 @@ export const profileStore = defineStore({
    setHighlightTop() {
      this.highlightTop = !this.highlightTop;
    },
-    async getServices(layer: string) {
-      const res: AxiosResponse = await graphql.query("queryServices").params({
-        layer,
+    async getEndpoints(serviceId: string, keyword?: string) {
+      const res: AxiosResponse = await graphql.query("queryEndpoints").params({
+        serviceId,
+        duration: useAppStoreWithOut().durationTime,
+        keyword: keyword || "",
      });
      if (res.data.errors) {
        return res.data;
      }
-      this.services = res.data.data.services;
+      this.endpoints = res.data.data.pods || [];
+      return res.data;
+    },
+    async getTaskEndpoints(serviceId: string, keyword?: string) {
+      const res: AxiosResponse = await graphql.query("queryEndpoints").params({
+        serviceId,
+        duration: useAppStoreWithOut().durationTime,
+        keyword: keyword || "",
+      });
+      if (res.data.errors) {
+        return res.data;
+      }
+      this.taskEndpoints = [{ value: "", label: "All" }, ...res.data.data.pods];
      return res.data;
    },
    async getTaskList() {
@@ -106,6 +119,9 @@ export const profileStore = defineStore({
      return res.data;
    },
    async getSegmentList(params: { taskID: string }) {
+      if (!params.taskID) {
+        return new Promise((resolve) => resolve({}));
+      }
      const res: AxiosResponse = await graphql
        .query("getProfileTaskSegmentList")
        .params(params);
@@ -132,6 +148,9 @@ export const profileStore = defineStore({
      return res.data;
    },
    async getSegmentSpans(params: { segmentId: string }) {
+      if (!params.segmentId) {
+        return new Promise((resolve) => resolve({}));
+      }
      const res: AxiosResponse = await graphql
        .query("queryProfileSegment")
        .params(params);
@@ -145,7 +164,13 @@ export const profileStore = defineStore({
        this.analyzeTrees = [];
        return res.data;
      }
-      this.segmentSpans = segment.spans;
+      this.segmentSpans = segment.spans.map((d: SegmentSpan) => {
+        return {
+          ...d,
+          segmentId: this.currentSegment.segmentId,
+          traceId: this.currentSegment.traceIds[0],
+        };
+      });
      if (!(segment.spans && segment.spans.length)) {
        this.analyzeTrees = [];
        return res.data;
@@ -158,6 +183,12 @@ export const profileStore = defineStore({
      segmentId: string;
      timeRanges: Array<{ start: number; end: number }>;
    }) {
+      if (!params.segmentId) {
+        return new Promise((resolve) => resolve({}));
+      }
+      if (!params.timeRanges.length) {
+        return new Promise((resolve) => resolve({}));
+      }
      const res: AxiosResponse = await graphql
        .query("getProfileAnalyze")
        .params(params);
--- a/src/store/modules/selectors.ts
+++ b/src/store/modules/selectors.ts
@@ -15,23 +15,24 @@
 * limitations under the License.
 */
 import { defineStore } from "pinia";
-import { Duration } from "@/types/app";
-import { Service, Instance, Endpoint } from "@/types/selector";
+import { Service, Instance, Endpoint, Process } from "@/types/selector";
 import { store } from "@/store";
 import graphql from "@/graphql";
 import { AxiosResponse } from "axios";
 import { useAppStoreWithOut } from "@/store/modules/app";
-
 interface SelectorState {
  services: Service[];
  destServices: Service[];
  pods: Array<Instance | Endpoint>;
+  processes: Process[];
+  destProcesses: Process[];
  currentService: Nullable<Service>;
  currentPod: Nullable<Instance | Endpoint>;
+  currentProcess: Nullable<Process>;
  currentDestService: Nullable<Service>;
  currentDestPod: Nullable<Instance | Endpoint>;
  destPods: Array<Instance | Endpoint>;
-  durationTime: Duration;
+  currentDestProcess: Nullable<Process>;
 }

 export const selectorStore = defineStore({
@@ -41,11 +42,14 @@ export const selectorStore = defineStore({
    destServices: [],
    pods: [],
    destPods: [],
+    processes: [],
+    destProcesses: [],
    currentService: null,
    currentPod: null,
+    currentProcess: null,
    currentDestService: null,
    currentDestPod: null,
-    durationTime: useAppStoreWithOut().durationTime,
+    currentDestProcess: null,
  }),
  actions: {
    setCurrentService(service: Nullable<Service>) {
@@ -60,6 +64,18 @@ export const selectorStore = defineStore({
    setCurrentDestPod(pod: Nullable<Instance | Endpoint>) {
      this.currentDestPod = pod;
    },
+    setCurrentProcess(process: Nullable<Process>) {
+      this.currentProcess = process;
+    },
+    setCurrentDestProcess(process: Nullable<Process>) {
+      this.currentDestProcess = process;
+    },
+    setDestPods(pods: Array<Instance | Endpoint>) {
+      this.destPods = pods;
+    },
+    setDestProcesses(processes: Array<Process>) {
+      this.destProcesses = processes;
+    },
    async fetchLayers(): Promise<AxiosResponse> {
      const res: AxiosResponse = await graphql.query("queryLayers").params({});

@@ -86,7 +102,7 @@ export const selectorStore = defineStore({
      }
      const res: AxiosResponse = await graphql.query("queryInstances").params({
        serviceId,
-        duration: this.durationTime,
+        duration: useAppStoreWithOut().durationTime,
      });
      if (!res.data.errors) {
        if (param && param.isRelation) {
@@ -97,6 +113,27 @@ export const selectorStore = defineStore({
      }
      return res.data;
    },
+    async getProcesses(param?: {
+      instanceId: string;
+      isRelation: boolean;
+    }): Promise<Nullable<AxiosResponse>> {
+      const instanceId = param ? param.instanceId : this.currentPod?.id;
+      if (!instanceId) {
+        return null;
+      }
+      const res: AxiosResponse = await graphql.query("queryProcesses").params({
+        instanceId,
+        duration: useAppStoreWithOut().durationTime,
+      });
+      if (!res.data.errors) {
+        if (param && param.isRelation) {
+          this.destProcesses = res.data.data.processes || [];
+          return res.data;
+        }
+        this.processes = res.data.data.processes || [];
+      }
+      return res.data;
+    },
    async getEndpoints(params: {
      keyword?: string;
      serviceId?: string;
@@ -112,7 +149,7 @@ export const selectorStore = defineStore({
      }
      const res: AxiosResponse = await graphql.query("queryEndpoints").params({
        serviceId,
-        duration: this.durationTime,
+        duration: useAppStoreWithOut().durationTime,
        keyword: params.keyword || "",
        limit: params.limit,
      });
@@ -180,6 +217,25 @@ export const selectorStore = defineStore({
        this.pods = [res.data.data.endpoint];
      }

+      return res.data;
+    },
+    async getProcess(instanceId: string, isRelation?: boolean) {
+      if (!instanceId) {
+        return;
+      }
+      const res: AxiosResponse = await graphql.query("queryProcess").params({
+        instanceId,
+      });
+      if (!res.data.errors) {
+        if (isRelation) {
+          this.currentDestProcess = res.data.data.process || null;
+          this.destProcesses = [res.data.data.process];
+          return;
+        }
+        this.currentProcess = res.data.data.process || null;
+        this.processes = [res.data.data.process];
+      }
+
      return res.data;
    },
  },
--- a/src/store/modules/topology.ts
+++ b/src/store/modules/topology.ts
@@ -23,7 +23,7 @@ import { useSelectorStore } from "@/store/modules/selectors";
 import { useAppStoreWithOut } from "@/store/modules/app";
 import { AxiosResponse } from "axios";
 import query from "@/graphql/fetch";
-import { useQueryTopologyMetrics } from "@/hooks/useProcessor";
+import { useQueryTopologyMetrics } from "@/hooks/useMetricsProcessor";
 import { ElMessage } from "element-plus";

 interface MetricVal {
@@ -75,7 +75,7 @@ export const topologyStore = defineStore({
    setTopology(data: { nodes: Node[]; calls: Call[] }) {
      const obj = {} as any;
      const services = useSelectorStore().services;
-      const nodes = data.nodes.reduce((prev: Node[], next: Node) => {
+      const nodes = (data.nodes || []).reduce((prev: Node[], next: Node) => {
        if (!obj[next.id]) {
          obj[next.id] = true;
          const s = services.filter((d: Service) => d.id === next.id)[0] || {};
@@ -84,7 +84,7 @@ export const topologyStore = defineStore({
        }
        return prev;
      }, []);
-      const calls = data.calls.reduce((prev: Call[], next: Call) => {
+      const calls = (data.calls || []).reduce((prev: Call[], next: Call) => {
        if (!obj[next.id]) {
          obj[next.id] = true;
          next.value = next.value || 1;
@@ -117,7 +117,7 @@ export const topologyStore = defineStore({
    async getDepthServiceTopology(serviceIds: string[], depth: number) {
      const res = await this.getServicesTopology(serviceIds);
      if (depth > 1) {
-        const ids = res.nodes
+        const ids = (res.nodes || [])
          .map((item: Node) => item.id)
          .filter((d: string) => !serviceIds.includes(d));
        if (!ids.length) {
@@ -410,6 +410,9 @@ export const topologyStore = defineStore({
      const idsC = this.calls
        .filter((i: Call) => i.detectPoints.includes("CLIENT"))
        .map((b: Call) => b.id);
+      if (!idsC.length) {
+        return;
+      }
      const param = await useQueryTopologyMetrics(linkClientMetrics, idsC);
      const res = await this.getCallClientMetrics(param);

@@ -425,6 +428,9 @@ export const topologyStore = defineStore({
      const idsS = this.calls
        .filter((i: Call) => i.detectPoints.includes("SERVER"))
        .map((b: Call) => b.id);
+      if (!idsS.length) {
+        return;
+      }
      const param = await useQueryTopologyMetrics(linkServerMetrics, idsS);
      const res = await this.getCallServerMetrics(param);

@@ -438,6 +444,9 @@ export const topologyStore = defineStore({
        return;
      }
      const ids = this.nodes.map((d: Node) => d.id);
+      if (!ids.length) {
+        return;
+      }
      const param = await useQueryTopologyMetrics(nodeMetrics, ids);
      const res = await this.getNodeMetricValue(param);

--- a/src/store/modules/trace.ts
+++ b/src/store/modules/trace.ts
@@ -15,7 +15,6 @@
 * limitations under the License.
 */
 import { defineStore } from "pinia";
-import { Duration } from "@/types/app";
 import { Instance, Endpoint, Service } from "@/types/selector";
 import { Trace, Span } from "@/types/trace";
 import { store } from "@/store";
@@ -23,22 +22,17 @@ import graphql from "@/graphql";
 import { AxiosResponse } from "axios";
 import { useAppStoreWithOut } from "@/store/modules/app";
 import { useSelectorStore } from "@/store/modules/selectors";
+import { QueryOrders } from "@/views/dashboard/data";

 interface TraceState {
  services: Service[];
  instances: Instance[];
  endpoints: Endpoint[];
  traceList: Trace[];
-  traceTotal: number;
  traceSpans: Span[];
  currentTrace: Trace | any;
  conditions: any;
  traceSpanLogs: any[];
-  traceSpanLogsTotal: number;
-  // traceListErrors: string;
-  // traceSpanErrors: string;
-  // traceSpanLogErrors: string;
-  durationTime: Duration;
  selectorStore: any;
 }

@@ -50,22 +44,19 @@ export const traceStore = defineStore({
    endpoints: [{ value: "0", label: "All" }],
    traceList: [],
    traceSpans: [],
-    traceTotal: 0,
    currentTrace: {},
    conditions: {
      queryDuration: useAppStoreWithOut().durationTime,
      traceState: "ALL",
-      queryOrder: "BY_START_TIME",
-      paging: { pageNum: 1, pageSize: 15, needTotal: true },
+      queryOrder: QueryOrders[0].value,
+      paging: { pageNum: 1, pageSize: 20 },
    },
    traceSpanLogs: [],
-    traceSpanLogsTotal: 0,
-    durationTime: useAppStoreWithOut().durationTime,
    selectorStore: useSelectorStore(),
  }),
  actions: {
    setTraceCondition(data: any) {
-      this.condition = { ...this.condition, ...data };
+      this.conditions = { ...this.conditions, ...data };
    },
    setCurrentTrace(trace: Trace) {
      this.currentTrace = trace;
@@ -73,6 +64,17 @@ export const traceStore = defineStore({
    setTraceSpans(spans: Span) {
      this.traceSpans = spans;
    },
+    resetState() {
+      this.traceSpans = [];
+      this.traceList = [];
+      this.currentTrace = {};
+      this.conditions = {
+        queryDuration: useAppStoreWithOut().durationTime,
+        paging: { pageNum: 1, pageSize: 20 },
+        traceState: "ALL",
+        queryOrder: QueryOrders[0].value,
+      };
+    },
    async getServices(layer: string) {
      const res: AxiosResponse = await graphql.query("queryServices").params({
        layer,
@@ -83,22 +85,49 @@ export const traceStore = defineStore({
      this.services = res.data.data.services;
      return res.data;
    },
+    async getService(serviceId: string) {
+      if (!serviceId) {
+        return;
+      }
+      const res: AxiosResponse = await graphql.query("queryService").params({
+        serviceId,
+      });
+
+      return res.data;
+    },
+    async getInstance(instanceId: string) {
+      if (!instanceId) {
+        return;
+      }
+      const res: AxiosResponse = await graphql.query("queryInstance").params({
+        instanceId,
+      });
+
+      return res.data;
+    },
+    async getEndpoint(endpointId: string) {
+      if (!endpointId) {
+        return;
+      }
+      const res: AxiosResponse = await graphql.query("queryEndpoint").params({
+        endpointId,
+      });
+
+      return res.data;
+    },
    async getInstances(id: string) {
      const serviceId = this.selectorStore.currentService
        ? this.selectorStore.currentService.id
        : id;
      const res: AxiosResponse = await graphql.query("queryInstances").params({
        serviceId: serviceId,
-        duration: this.durationTime,
+        duration: useAppStoreWithOut().durationTime,
      });

      if (res.data.errors) {
        return res.data;
      }
-      this.instances = [
-        { value: "0", label: "All" },
-        ...res.data.data.pods,
-      ] || [{ value: " 0", label: "All" }];
+      this.instances = [{ value: "0", label: "All" }, ...res.data.data.pods];
      return res.data;
    },
    async getEndpoints(id: string, keyword?: string) {
@@ -107,27 +136,23 @@ export const traceStore = defineStore({
        : id;
      const res: AxiosResponse = await graphql.query("queryEndpoints").params({
        serviceId,
-        duration: this.durationTime,
+        duration: useAppStoreWithOut().durationTime,
        keyword: keyword || "",
      });
      if (res.data.errors) {
        return res.data;
      }
-      this.endpoints = [
-        { value: "0", label: "All" },
-        ...res.data.data.pods,
-      ] || [{ value: "0", label: "All" }];
+      this.endpoints = [{ value: "0", label: "All" }, ...res.data.data.pods];
      return res.data;
    },
    async getTraces() {
      const res: AxiosResponse = await graphql
        .query("queryTraces")
-        .params({ condition: this.condition });
+        .params({ condition: this.conditions });
      if (res.data.errors) {
        return res.data;
      }
      if (!res.data.data.data.traces.length) {
-        this.traceTotal = 0;
        this.traceList = [];
        this.setCurrentTrace({});
        this.setTraceSpans([]);
@@ -140,7 +165,6 @@ export const traceStore = defineStore({
        });
        return d;
      });
-      this.traceTotal = res.data.data.data.total;
      this.setCurrentTrace(res.data.data.data.traces[0] || {});
      return res.data;
    },
@@ -151,7 +175,8 @@ export const traceStore = defineStore({
      if (res.data.errors) {
        return res.data;
      }
-      this.setTraceSpans(res.data.data.trace.spans || []);
+      const data = res.data.data.trace.spans;
+      this.setTraceSpans(data || []);
      return res.data;
    },
    async getSpanLogs(params: any) {
@@ -160,11 +185,23 @@ export const traceStore = defineStore({
        .params(params);
      if (res.data.errors) {
        this.traceSpanLogs = [];
-        this.traceSpanLogsTotal = 0;
        return res.data;
      }
      this.traceSpanLogs = res.data.data.queryLogs.logs || [];
-      this.traceSpanLogsTotal = res.data.data.queryLogs.total;
+      return res.data;
+    },
+    async getTagKeys() {
+      const res: AxiosResponse = await graphql
+        .query("queryTraceTagKeys")
+        .params({ duration: useAppStoreWithOut().durationTime });
+
+      return res.data;
+    },
+    async getTagValues(tagKey: string) {
+      const res: AxiosResponse = await graphql
+        .query("queryTraceTagValues")
+        .params({ tagKey, duration: useAppStoreWithOut().durationTime });
+
      return res.data;
    },
  },
--- a/src/styles/grid.scss
+++ b/src/styles/grid.scss
@@ -15,10 +15,7 @@
 * limitations under the License.
 */

-.show-xs,
-.show-sm,
-.show-md,
-.show-lg {
+.show-xs {
  display: none !important;
 }
@media (max-width: 767px) {
@@ -30,145 +27,6 @@
    display: none !important;
  }
 }
-@media (min-width: 768px) and (max-width: 1023px) {
-  .show-sm {
-    display: block !important;
-  }
-
-  .hide-sm {
-    display: none !important;
-  }
-}
-@media (min-width: 1024px) and (max-width: 1279px) {
-  .show-md {
-    display: block !important;
-  }
-
-  .hide-md {
-    display: none !important;
-  }
-}
-@media (min-width: 1280px) {
-  .show-lg {
-    display: block !important;
-  }
-
-  .hide-lg {
-    display: none !important;
-  }
-}
-
-.g-xs-1,
-.g-xs-2,
-.g-xs-3,
-.g-xs-4,
-.g-xs-5,
-.g-xs-6,
-.g-xs-7,
-.g-xs-8,
-.g-xs-9,
-.g-xs-10,
-.g-xs-11,
-.g-xs-12 {
-  float: left;
-  min-height: 1px;
-}
-
-.g-xs-12 {
-  width: 100%;
-}
-
-.g-xs-11 {
-  width: 91.666%;
-}
-
-.g-xs-10 {
-  width: 83.333%;
-}
-
-.g-xs-9 {
-  width: 75%;
-}
-
-.g-xs-8 {
-  width: 66.666%;
-}
-
-.g-xs-7 {
-  width: 58.333%;
-}
-
-.g-xs-6 {
-  width: 50%;
-}
-
-.g-xs-5 {
-  width: 41.666%;
-}
-
-.g-xs-4 {
-  width: 33.333%;
-}
-
-.g-xs-3 {
-  width: 25%;
-}
-
-.g-xs-2 {
-  width: 16.666%;
-}
-
-.g-xs-1 {
-  width: 8.333%;
-}
-
-.g-xs-space-12 {
-  margin-left: 100%;
-}
-
-.g-xs-space-11 {
-  margin-left: 91.666%;
-}
-
-.g-xs-space-10 {
-  margin-left: 83.333%;
-}
-
-.g-xs-space-9 {
-  margin-left: 75%;
-}
-
-.g-xs-space-8 {
-  margin-left: 66.666%;
-}
-
-.g-xs-space-7 {
-  margin-left: 58.333%;
-}
-
-.g-xs-space-6 {
-  margin-left: 50%;
-}
-
-.g-xs-space-5 {
-  margin-left: 41.666%;
-}
-
-.g-xs-space-4 {
-  margin-left: 33.333%;
-}
-
-.g-xs-space-3 {
-  margin-left: 25%;
-}
-
-.g-xs-space-2 {
-  margin-left: 16.666%;
-}
-
-.g-xs-space-1 {
-  margin-left: 8.333%;
-}
@media (min-width: 768px) {
  .g-sm-1,
  .g-sm-2,
@@ -233,278 +91,4 @@
  .g-sm-1 {
    width: 8.333%;
  }
-
-  .g-sm-space-12 {
-    margin-left: 100%;
-  }
-
-  .g-sm-space-11 {
-    margin-left: 91.666%;
-  }
-
-  .g-sm-space-10 {
-    margin-left: 83.333%;
-  }
-
-  .g-sm-space-9 {
-    margin-left: 75%;
-  }
-
-  .g-sm-space-8 {
-    margin-left: 66.666%;
-  }
-
-  .g-sm-space-7 {
-    margin-left: 58.333%;
-  }
-
-  .g-sm-space-6 {
-    margin-left: 50%;
-  }
-
-  .g-sm-space-5 {
-    margin-left: 41.666%;
-  }
-
-  .g-sm-space-4 {
-    margin-left: 33.333%;
-  }
-
-  .g-sm-space-3 {
-    margin-left: 25%;
-  }
-
-  .g-sm-space-2 {
-    margin-left: 16.666%;
-  }
-
-  .g-sm-space-1 {
-    margin-left: 8.333%;
-  }
-}
-@media (min-width: 1024px) {
-  .g-md-1,
-  .g-md-2,
-  .g-md-3,
-  .g-md-4,
-  .g-md-5,
-  .g-md-6,
-  .g-md-7,
-  .g-md-8,
-  .g-md-9,
-  .g-md-10,
-  .g-md-11,
-  .g-md-12 {
-    float: left;
-    min-height: 1px;
-  }
-
-  .g-md-12 {
-    width: 100%;
-  }
-
-  .g-md-11 {
-    width: 91.666%;
-  }
-
-  .g-md-10 {
-    width: 83.333%;
-  }
-
-  .g-md-9 {
-    width: 75%;
-  }
-
-  .g-md-8 {
-    width: 66.666%;
-  }
-
-  .g-md-7 {
-    width: 58.333%;
-  }
-
-  .g-md-6 {
-    width: 50%;
-  }
-
-  .g-md-5 {
-    width: 41.666%;
-  }
-
-  .g-md-4 {
-    width: 33.333%;
-  }
-
-  .g-md-3 {
-    width: 25%;
-  }
-
-  .g-md-2 {
-    width: 16.666%;
-  }
-
-  .g-md-1 {
-    width: 8.333%;
-  }
-
-  .g-md-space-12 {
-    margin-left: 100%;
-  }
-
-  .g-md-space-11 {
-    margin-left: 91.666%;
-  }
-
-  .g-md-space-10 {
-    margin-left: 83.333%;
-  }
-
-  .g-md-space-9 {
-    margin-left: 75%;
-  }
-
-  .g-md-space-8 {
-    margin-left: 66.666%;
-  }
-
-  .g-md-space-7 {
-    margin-left: 58.333%;
-  }
-
-  .g-md-space-6 {
-    margin-left: 50%;
-  }
-
-  .g-md-space-5 {
-    margin-left: 41.666%;
-  }
-
-  .g-md-space-4 {
-    margin-left: 33.333%;
-  }
-
-  .g-md-space-3 {
-    margin-left: 25%;
-  }
-
-  .g-md-space-2 {
-    margin-left: 16.666%;
-  }
-
-  .g-md-space-1 {
-    margin-left: 8.333%;
-  }
-}
-@media (min-width: 1280px) {
-  .g-lg-1,
-  .g-lg-2,
-  .g-lg-3,
-  .g-lg-4,
-  .g-lg-5,
-  .g-lg-6,
-  .g-lg-7,
-  .g-lg-8,
-  .g-lg-9,
-  .g-lg-10,
-  .g-lg-11,
-  .g-lg-12 {
-    float: left;
-    min-height: 1px;
-  }
-
-  .g-lg-12 {
-    width: 100%;
-  }
-
-  .g-lg-11 {
-    width: 91.666%;
-  }
-
-  .g-lg-10 {
-    width: 83.333%;
-  }
-
-  .g-lg-9 {
-    width: 75%;
-  }
-
-  .g-lg-8 {
-    width: 66.666%;
-  }
-
-  .g-lg-7 {
-    width: 58.333%;
-  }
-
-  .g-lg-6 {
-    width: 50%;
-  }
-
-  .g-lg-5 {
-    width: 41.666%;
-  }
-
-  .g-lg-4 {
-    width: 33.333%;
-  }
-
-  .g-lg-3 {
-    width: 25%;
-  }
-
-  .g-lg-2 {
-    width: 16.666%;
-  }
-
-  .g-lg-1 {
-    width: 8.333%;
-  }
-
-  .g-lg-space-12 {
-    margin-left: 100%;
-  }
-
-  .g-lg-space-11 {
-    margin-left: 91.666%;
-  }
-
-  .g-lg-space-10 {
-    margin-left: 83.333%;
-  }
-
-  .g-lg-space-9 {
-    margin-left: 75%;
-  }
-
-  .g-lg-space-8 {
-    margin-left: 66.666%;
-  }
-
-  .g-lg-space-7 {
-    margin-left: 58.333%;
-  }
-
-  .g-lg-space-6 {
-    margin-left: 50%;
-  }
-
-  .g-lg-space-5 {
-    margin-left: 41.666%;
-  }
-
-  .g-lg-space-4 {
-    margin-left: 33.333%;
-  }
-
-  .g-lg-space-3 {
-    margin-left: 25%;
-  }
-
-  .g-lg-space-2 {
-    margin-left: 16.666%;
-  }
-
-  .g-lg-space-1 {
-    margin-left: 8.333%;
-  }
 }
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Fine0830	1f98619a5b	fix: update attached event's details (#200 )	2022-12-02 15:03:29 +08:00
Fine0830	aab44626da	fix: update attached event details (#199 )	2022-12-01 13:06:46 +08:00
Fine0830	0ff5d4d6bb	fix: update attached event‘s occurrence date (#198 )	2022-12-01 10:47:30 +08:00
Fine0830	611731d6d0	fix: update attached event details (#197 )	2022-11-30 16:48:49 +08:00
Fine0830	221751f034	fix: optimize metrics association (#196 )	2022-11-29 18:47:53 +08:00
Fine0830	d4dde7e73b	fix: optimize config UI for related trace and metrics (#195 )	2022-11-29 14:24:15 +08:00
Fine0830	5be106fc4f	fix: add `ProcessRelation` to entity types (#194 )	2022-11-28 22:49:23 +08:00
Fine0830	d8f91bbdf3	feat: Implement creating tasks UI for network profiling widget (#193 )	2022-11-28 17:57:23 +08:00
Fine0830	23e9742946	feat: enhance associating metrics with traces by `refId` (#192 )	2022-11-25 17:33:51 +08:00
Fine0830	7a1c83b5fb	fix: update metric processor for the `readRecords` and remove `readSampledRecords` from metrics selector (#191 )	2022-11-24 18:51:21 +08:00
Fine0830	7d802d490e	feat: visualize attached events on the trace widget (#190 )	2022-11-24 11:19:25 +08:00
Fine0830	da1db8def6	fix: update query conditions for metrics related traces (#189 )	2022-11-22 22:39:22 +08:00
Fine0830	2230d05508	fix: optimize metrics related trace (#188 )	2022-11-21 14:28:37 +08:00
WD	e8d909792d	chore: fix typo (#187 )	2022-11-21 10:07:01 +08:00
Fine0830	dc842609ba	fix: update condition logic for trace tree data (#186 )	2022-11-19 16:53:15 +08:00
drgnchan	670bef1d69	fix typo (#185 )	2022-11-18 11:55:52 +08:00
Fine0830	882828b04a	feat: enhance tags component to search tags with the input value (#184 )	2022-11-17 17:57:23 +08:00
WD	ed6fb0448b	feat: solve the problem of floating loading (#183 )	2022-11-17 16:07:18 +08:00
Fine0830	a0fc879eb1	feat: enhance graph legend for the single metric (#182 )	2022-11-10 15:13:17 +08:00
Fine0830	b37d65eaac	feat: enhance the legend of metrics graph widget with the summary table (#181 )	2022-11-10 14:55:19 +08:00
heihei180	fd46211a37	add apache eventMesh logo file (#180 )	2022-11-06 15:12:30 +08:00
Fine0830	ae0b8c056d	fix trace profiling widget, select the first span by default (#179 )	2022-11-04 20:31:46 +08:00
Fine0830	4b88d8bbb3	fix: reset tag keys list and duration condition (#178 )	2022-10-31 12:05:25 +08:00
Fine0830	09051e916b	feat: support labeled value on the service/instance/endpoint list widgets (#177 )	2022-10-31 10:27:37 +08:00
Fine0830	e597f91448	remove unuse icon (#176 )	2022-10-26 21:53:27 +08:00
Fine0830	4232161d36	fix: set selector props and update configuration panel styles (#175 )	2022-10-25 16:48:49 +08:00
Fine0830	eda44db0cd	feat: associate metrics with trace widget on dashboards (#174 )	2022-10-25 11:36:49 +08:00
pg.yang	78f0096c00	add menu for virtual mq (#173 )	2022-10-20 20:36:28 +08:00
Fine0830	5e161f17c2	feat: add `readRecords` to metric types (#172 )	2022-10-17 21:55:14 +08:00
WD	77d189cdfb	fix: added name verification to avoid creating blank dashboard name (#171 )	2022-10-17 21:25:59 +08:00
Fine0830	9f57e35119	revert logs on trace widget (#170 )	2022-10-14 11:28:10 +08:00
dependabot[bot]	2bf90d6a6d	build(deps): bump d3-color from 3.0.1 to 3.1.0 (#166 )	2022-10-01 10:33:48 +08:00
Fine0830	0f4319499a	fix: query logs with the specific service ID (#165 )	2022-09-30 10:25:05 +08:00
pg.yang	5bb58a00cd	feat: add gateway,apisix menu (#163 )	2022-09-27 10:36:15 +08:00
吴晟 Wu Sheng	d50e9fc261	Remove commented codes (#162 )	2022-09-21 12:34:06 +08:00
Fine0830	b235929c77	feat: enhance menu configuration to make it easier to change (#161 )	2022-09-20 16:24:42 +08:00
Fine0830	4561e2e374	fix: remove All from the endpoints selector from profiling	2022-09-19 14:05:09 +08:00
pg.yang	214b34ddfd	feat: add virtual cache dashboard (#159 )	2022-09-19 10:02:22 +08:00
Fine0830	26817e9f92	feat: enhance the process topology graph to support dragging nodes (#158 )	2022-09-15 17:18:39 +08:00
Fine0830	9ed0121fd0	fix: update styles for an adaptive height (#157 )	2022-09-13 16:31:30 +08:00
Fine0830	0d63d538c3	fix: set up a new time range after clicking the refresh button (#156 )	2022-09-08 22:41:02 +08:00
Fine0830	5da441ff9a	fix: polish the endpoint list graph (#155 )	2022-09-08 21:46:37 +08:00
kezhenxu94	49bc349064	Keep package.json and package-lock.json in sync (#154 )	2022-09-06 14:31:52 +08:00
Lv Lifeng	61a4d2f759	Add impala icon 4 impala jdbc plugin (#153 )	2022-09-03 19:45:54 +08:00
云泥	0b4e738699	fix: tab active incorrectly, when click tab space (#152 )	2022-09-01 15:49:15 +08:00
Fine0830	b88356ba46	fix: polish the network profiling widget, bugfix (#151 )	2022-08-30 13:20:45 +08:00
Fine0830	d8889f1787	fix: set configurations for process topology (#150 )	2022-08-29 17:32:49 +08:00
Fine0830	1a989a1434	fix widget name (#149 )	2022-08-29 17:02:42 +08:00
Fine0830	82b348a766	feat: add a calculation to convert nanoseconds to milliseconds (#148 )	2022-08-26 16:26:25 +08:00
Fine0830	42b20660e4	fix: set selector parameters for metrics, optimize the process topology (#147 )	2022-08-26 12:42:12 +08:00
Fine0830	cb3aa940b3	feat: create markers on process topology calls (#146 )	2022-08-25 12:03:13 +08:00
Fine0830	87a5553e6d	fix: update process widget and query process metrics (#145 )	2022-08-24 17:39:40 +08:00
dependabot[bot]	e17562a766	build(deps): bump moment and @vue/cli-plugin-e2e-cypress (#144 )	2022-08-23 13:56:13 +08:00
pg.yang	fdfdaab47b	Add Nats icon for Java plugin (#142 ) Co-authored-by: 吴晟 Wu Sheng <wu.sheng@foxmail.com>	2022-08-23 13:48:54 +08:00
Fine0830	a4fc5192ac	feat: Implement the network profiling widget (#132 )	2022-08-23 13:41:05 +08:00
yswdqz	ffabc7c7a7	Fix a typo about PostgreSQL Monitoring. (#141 )	2022-08-22 23:21:27 +08:00
Fine0830	2fd5fb9b1e	add sub menu for PostgreSQL layer (#140 )	2022-08-22 21:48:02 +08:00
Fine0830	adb457d660	fix: pick calendar with a wrong time range and set a unique value for dashboard grid key (#139 )	2022-08-18 16:29:36 +08:00
Fine0830	9c0bb988e6	feat: support the process dashboard and create the time range text widget (#138 )	2022-08-15 16:49:00 +08:00
pg.yang	973b51e9ca	Add Micronaut icon for Java plugin (#137 )	2022-08-10 17:00:22 +08:00
Fine0830	f5bcd5da2e	feat: add a calculation to convert seconds to days (#135 )	2022-08-08 10:26:36 +08:00
Fine0830	732b834749	feat: add the MYSQL layer and update layer routers (#134 )	2022-08-07 17:16:44 +08:00
Fine0830	4b43196bc2	fix query order for trace list (#133 )	2022-08-05 17:02:29 +08:00
Fine0830	b01565b2b8	fix: set the value(SECOND) of the `step` filed for queries (#131 )	2022-07-29 20:54:57 +08:00
Fine0830	3b3e790dd9	feat: event widget associates with trace and log widget (#130 )	2022-07-29 16:34:36 +08:00
Fine0830	dc8e4bf273	fix: the log details don't display when the log fields don't have value (#129 )	2022-07-27 19:31:17 +08:00
Fine0830	2ba3c67d31	feat: the log widget and the trace widget associate with each other, remove log tables on the trace widget (#128 )	2022-07-27 16:24:34 +08:00
Fine0830	673b1a41a8	refactor: update the tags component (#127 )	2022-07-25 17:34:05 +08:00
Fine0830	c7079ea17c	fix short time range (#125 )	2022-07-21 10:06:51 +08:00
Fine0830	017f5bf709	fix errors (#124 )	2022-07-20 19:42:41 +08:00
Fine0830	bec86e80fd	fix: update dashboard list with using the search box (#123 )	2022-07-20 16:53:01 +08:00
Fine0830	ec7a8bbfa9	fix: update event associations with the duration step (#122 )	2022-07-19 14:11:41 +08:00
Fine0830	4e022ff29a	fix short time range (#121 )	2022-07-19 12:47:03 +08:00
Fine0830	42ead4a572	feat: Enhance associations for the Event widget (#120 )	2022-07-19 11:57:26 +08:00
Fine0830	e144b43267	fix: update widget name rules and the association selector options (#119 )	2022-07-14 16:40:06 +08:00
Fine0830	b5c07e023b	fix view mode (#118 )	2022-07-13 10:34:30 +08:00
horochx	04d109d0e3	fix: hide the copy button when `db.statement` is empty (#117 )	2022-07-11 14:53:03 +08:00
Fine0830	024cd1195d	fix tag dropdown (#116 )	2022-07-11 10:22:09 +08:00
Fine0830	7fbd6170de	feat: Implement an association between widgets(line, bar, area graphs) with time (#115 )	2022-07-08 16:17:17 +08:00
jiang1997	3ff3d5d1cd	Add Python Bottle Plugin Logo (#114 )	2022-07-05 18:43:32 +08:00
Fine0830	2230702d97	feat: Implement the Event widget (#112 )	2022-06-22 19:11:02 +08:00
horochx	9ad9362935	fix: SpanDetail text overlap (#113 )	2022-06-22 18:54:31 +08:00
Fine0830	2be0a84d48	fix: optimize widgets (#111 )	2022-06-16 15:19:17 +08:00
Fine0830	4c762a2458	fix: optimize widgets (#110 )	2022-06-15 19:24:07 +08:00
drgnchan	7813c92673	fix:clear interval fail when close autoRefresh (#108 )	2022-06-15 10:06:53 +08:00
Fine0830	f12d7899e4	fix router (#109 )	2022-06-14 22:23:23 +08:00
Fine0830	b697fe4713	feat: set a url parameter to activate tab index (#107 )	2022-06-14 17:01:11 +08:00
Fine0830	0828f8a7aa	fix: update query conditions for the browser logs (#106 )	2022-06-14 11:26:53 +08:00
Fine0830	f9aa6600a7	fix: disable the query button without containers on the on-demand log widget. (#105 )	2022-06-08 12:07:21 +08:00
Fine0830	3c37d7c197	fix: set the duration and scroll position for on-demand logs (#104 )	2022-06-07 21:54:29 +08:00
Fine0830	c875c95c20	fix: activate the correct tab index after renaming a Tabs name (#103 )	2022-06-06 16:36:04 +08:00
Fine0830	30069ce825	feat: visualize a on-demand log widget (#99 )	2022-06-02 20:09:38 +08:00
dependabot[bot]	0a746a125b	build(deps): bump eventsource from 1.1.0 to 1.1.1 (#102 )	2022-06-02 10:00:40 +08:00
Fine0830	4d26728eb5	feat: add `Percentage Of Root` and `Percentage Of Selected` in the eBPF widget (#101 )	2022-05-30 18:18:37 +08:00
Fine0830	74cb089271	feat: sort spans with `startTime` or `spanId` in a segment (#100 )	2022-05-26 13:04:43 +08:00
Fine0830	b34c0b0c72	feat: add a Spanish option in the lang selector (#98 )	2022-05-24 11:53:41 +08:00
Fine0830	45f896bf36	feat: visualize the OFF CPU eBPF profiling (#97 )	2022-05-23 16:00:30 +08:00
Marc Navarro	f334985cf0	Add Spanish Translation (#96 )	2022-05-22 15:07:51 +08:00
Fine0830	f2e75f2b9f	fix: update query conditions for browser logs (#95 )	2022-05-20 10:51:19 +08:00
Fine0830	b544decbbb	feat: remove needTotal and total fields from query conditions (#94 )	2022-05-19 19:29:02 +08:00
Fine0830	b953904c71	feat: remove the total filed from query conditions (#93 )	2022-05-19 15:49:24 +08:00
Fine0830	7e0d716111	refactor: remove a timeline graph from the eBPF profiling widget (#91 )	2022-05-18 20:47:18 +08:00
Fine0830	21523b8cb5	fix: polish the eBPF profiling widget (#90 )	2022-05-18 17:40:40 +08:00
Fine0830	8c7fee4d86	feat: remove unexpected data for exporting dashboards (#89 )	2022-05-16 21:38:39 +08:00
Fine0830	7f474984c4	fix: set duration time (#88 )	2022-05-15 15:14:02 +08:00
Fine0830	918791f7ed	fix: the page doesn't need to be re-rendered when the url changes (#87 )	2022-05-13 14:40:18 +08:00
Fine0830	784c2e97b8	feat: support multiple trees for the flame graph (#86 )	2022-05-12 20:57:37 +08:00
Fine0830	b492787027	feat: Implement tags auto-complete for Trace and Log (#85 )	2022-05-12 17:00:07 +08:00
Fine0830	0e0f2704b3	fix graphql query (#84 )	2022-05-11 20:02:45 +08:00
Fine0830	ca14a7d2c2	fix: set date to 0 and remove duration filed (#83 )	2022-05-11 15:05:58 +08:00
Fine0830	49c4c96a6a	remove process layer (#82 )	2022-05-10 17:25:56 +08:00
Fine0830	a0b57d0a5a	feat: remove the layer filed for instance query (#81 )	2022-05-10 17:03:47 +08:00
Fine0830	024a0fe44c	fix: set graph options(#80 )	2022-05-10 11:07:36 +08:00
Fine0830	918b0551ad	fix: set dropdown for the Tab widget, init instance relation selectors, update sankey graph (#79 )	2022-05-09 20:18:20 +08:00
Fine0830	d93a7cead2	feat: mobile terminal adaptation (#78 )	2022-05-09 14:54:08 +08:00
Fine0830	2a2500a28d	fix: verify query params to avoid invalid queries (#77 )	2022-05-05 19:12:32 +08:00
Fine0830	7d1bb43adb	fix: view spans details and task logs (#76 )	2022-05-04 14:28:27 +08:00
Fine0830	4c1884d552	fix the tag tips (#75 )	2022-04-29 15:26:58 +08:00
Fine0830	f40e9633df	avoid invalid querys (#74 )	2022-04-27 21:38:31 +08:00
Fine0830	02f5c4b976	fix: optimize the trace widget (#73 )	2022-04-26 19:32:23 +08:00
Fine0830	8a07b1d804	feat: Implement the eBPF profile widget on dashboard (#72 )	2022-04-24 20:24:23 +08:00
Fine0830	393885324b	fix utc (#71 )	2022-04-21 12:39:06 +08:00
Rancho Lee	6bfb7915bb	-- fix: viewLogs button query no data (#70 )	2022-04-20 09:00:23 +08:00
Brandon Fergerson	be60d5c770	Update en.ts (#69 )	2022-04-17 17:06:08 +08:00
Fine0830	3c68a4a327	build: remove compression plugin and config (#68 )	2022-04-15 14:39:15 +08:00
Fine0830	f22208395a	fix metrics index (#67 )	2022-04-15 11:25:33 +08:00
Fine0830	26db1ec23e	feat: add Avg calculations (#66 )	2022-04-14 18:15:28 +08:00
Fine0830	69a9c6de13	feat: add an avg calculation for metrics of list graphs (#65 )	2022-04-14 14:38:32 +08:00
Fine0830	2dd9df19d7	fix: refresh dashboards with current selectors (#64 )	2022-04-12 16:29:33 +08:00
dependabot[bot]	5dfbbacd14	build(deps): bump follow-redirects from 1.14.7 to 1.14.9 (#62 )	2022-04-12 09:49:49 +08:00
dependabot[bot]	deb59705ae	build(deps): bump url-parse from 1.5.4 to 1.5.10 (#61 )	2022-04-11 22:49:13 +08:00
Fine0830	3b4c3cc4ea	build: split chunks, compress files, and auto import components on demand (#60 )	2022-04-11 22:36:16 +08:00
hutaishi	1d83e14f22	Add Apache ShenYu (incubating) component LOGO (#59 )	2022-04-10 21:12:47 +08:00