build(deps-dev): bump axios from 1.15.0 to 1.16.0 (#551 )

fix: add templates to optimize log content and update topology tooltips (#550 )
feat: support trace v1 in trace single page (#549 )
2026-05-23 14:38:36 +00:00 · 2026-05-08 10:18:47 +08:00 · 2026-04-29 20:58:36 +08:00 · 2026-04-27 19:04:47 +08:00 · 2026-04-21 15:41:06 +08:00 · 2026-04-18 14:09:25 +08:00
40 changed files with 1649 additions and 144 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -62,7 +62,7 @@
        "typescript": "^5.7.3",
        "unplugin-auto-import": "^0.18.2",
        "unplugin-vue-components": "^0.27.3",
-        "vite": "^6.4.1",
+        "vite": "^6.4.2",
        "vite-plugin-monaco-editor": "^1.1.0",
        "vite-plugin-svg-icons": "^2.0.1",
        "vitest": "^4.0.18",
@@ -4627,21 +4627,24 @@
      "dev": true
    },
    "node_modules/axios": {
-      "version": "1.13.4",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.13.4.tgz",
-      "integrity": "sha512-1wVkUaAO6WyaYtCkcYCOx12ZgpGf9Zif+qXa4n+oYzK558YryKqiL6UWwd5DqiH3VRW0GYhTZQ/vlgJrCoNQlg==",
+      "version": "1.16.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.16.0.tgz",
+      "integrity": "sha512-6hp5CwvTPlN2A31g5dxnwAX0orzM7pmCRDLnZSX772mv8WDqICwFjowHuPs04Mc8deIld1+ejhtaMn5vp6b+1w==",
      "dev": true,
      "dependencies": {
-        "follow-redirects": "^1.15.6",
-        "form-data": "^4.0.4",
-        "proxy-from-env": "^1.1.0"
+        "follow-redirects": "^1.16.0",
+        "form-data": "^4.0.5",
+        "proxy-from-env": "^2.1.0"
      }
    },
    "node_modules/axios/node_modules/proxy-from-env": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
-      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
-      "dev": true
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-2.1.0.tgz",
+      "integrity": "sha512-cJ+oHTW1VAEa8cJslgmUZrc+sjRKgAKl3Zyse6+PV38hZe/V6Z14TbCuXcan9F9ghlz4QrFr2c92TNF82UkYHA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      }
    },
    "node_modules/balanced-match": {
      "version": "1.0.2",
@@ -7501,9 +7504,9 @@
      "dev": true
    },
    "node_modules/follow-redirects": {
-      "version": "1.15.6",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
-      "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
+      "version": "1.16.0",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.16.0.tgz",
+      "integrity": "sha512-y5rN/uOsadFT/JfYwhxRS5R7Qce+g3zG97+JrtFZlC9klX/W5hD7iiLzScI4nZqUS7DNUdhPgw4xI8W2LuXlUw==",
      "dev": true,
      "funding": [
        {
@@ -7530,9 +7533,9 @@
      }
    },
    "node_modules/form-data": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.4.tgz",
-      "integrity": "sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow==",
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.5.tgz",
+      "integrity": "sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w==",
      "dev": true,
      "dependencies": {
        "asynckit": "^0.4.0",
@@ -9475,14 +9478,14 @@
      }
    },
    "node_modules/lodash": {
-      "version": "4.17.23",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.23.tgz",
-      "integrity": "sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w=="
+      "version": "4.18.1",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.18.1.tgz",
+      "integrity": "sha512-dMInicTPVE8d1e5otfwmmjlxkZoUpiVLwyeTdUsi/Caj/gfzzblBcCE5sRHV/AsjuCmxWrte2TNGSYuCeCq+0Q=="
    },
    "node_modules/lodash-es": {
-      "version": "4.17.23",
-      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.23.tgz",
-      "integrity": "sha512-kVI48u3PZr38HdYz98UmfPnXl2DXrpdctLrFLCd3kOx1xUkOmpFPx7gCWWM5MPkL/fD8zb+Ph0QzjGFs4+hHWg=="
+      "version": "4.18.1",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.18.1.tgz",
+      "integrity": "sha512-J8xewKD/Gk22OZbhpOVSwcs60zhd95ESDwezOFuA3/099925PdHJ7OFHNTGtajL3AlZkykD32HykiMo+BIBI8A=="
    },
    "node_modules/lodash-unified": {
      "version": "1.0.3",
@@ -13420,9 +13423,9 @@
      }
    },
    "node_modules/vite": {
-      "version": "6.4.1",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-6.4.1.tgz",
-      "integrity": "sha512-+Oxm7q9hDoLMyJOYfUYBuHQo+dkAloi33apOPP56pzj+vsdJDzr+j1NISE5pyaAuKL4A3UD34qd0lx5+kfKp2g==",
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-6.4.2.tgz",
+      "integrity": "sha512-2N/55r4JDJ4gdrCvGgINMy+HH3iRpNIz8K6SFwVsA+JbQScLiC+clmAxBgwiSPgcG9U15QmvqCGWzMbqda5zGQ==",
      "dev": true,
      "dependencies": {
        "esbuild": "^0.25.0",
@@ -17284,20 +17287,20 @@
      "dev": true
    },
    "axios": {
-      "version": "1.13.4",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.13.4.tgz",
-      "integrity": "sha512-1wVkUaAO6WyaYtCkcYCOx12ZgpGf9Zif+qXa4n+oYzK558YryKqiL6UWwd5DqiH3VRW0GYhTZQ/vlgJrCoNQlg==",
+      "version": "1.16.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.16.0.tgz",
+      "integrity": "sha512-6hp5CwvTPlN2A31g5dxnwAX0orzM7pmCRDLnZSX772mv8WDqICwFjowHuPs04Mc8deIld1+ejhtaMn5vp6b+1w==",
      "dev": true,
      "requires": {
-        "follow-redirects": "^1.15.6",
-        "form-data": "^4.0.4",
-        "proxy-from-env": "^1.1.0"
+        "follow-redirects": "^1.16.0",
+        "form-data": "^4.0.5",
+        "proxy-from-env": "^2.1.0"
      },
      "dependencies": {
        "proxy-from-env": {
-          "version": "1.1.0",
-          "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
-          "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-2.1.0.tgz",
+          "integrity": "sha512-cJ+oHTW1VAEa8cJslgmUZrc+sjRKgAKl3Zyse6+PV38hZe/V6Z14TbCuXcan9F9ghlz4QrFr2c92TNF82UkYHA==",
          "dev": true
        }
      }
@@ -19405,9 +19408,9 @@
      "dev": true
    },
    "follow-redirects": {
-      "version": "1.15.6",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
-      "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
+      "version": "1.16.0",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.16.0.tgz",
+      "integrity": "sha512-y5rN/uOsadFT/JfYwhxRS5R7Qce+g3zG97+JrtFZlC9klX/W5hD7iiLzScI4nZqUS7DNUdhPgw4xI8W2LuXlUw==",
      "dev": true
    },
    "forever-agent": {
@@ -19417,9 +19420,9 @@
      "dev": true
    },
    "form-data": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.4.tgz",
-      "integrity": "sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow==",
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.5.tgz",
+      "integrity": "sha512-8RipRLol37bNs2bhoV67fiTEvdTrbMUYcFTiy3+wuuOnUog2QBHCZWXDRijWQfAkhBj2Uf5UnVaiWwA5vdd82w==",
      "dev": true,
      "requires": {
        "asynckit": "^0.4.0",
@@ -20792,14 +20795,14 @@
      }
    },
    "lodash": {
-      "version": "4.17.23",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.23.tgz",
-      "integrity": "sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w=="
+      "version": "4.18.1",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.18.1.tgz",
+      "integrity": "sha512-dMInicTPVE8d1e5otfwmmjlxkZoUpiVLwyeTdUsi/Caj/gfzzblBcCE5sRHV/AsjuCmxWrte2TNGSYuCeCq+0Q=="
    },
    "lodash-es": {
-      "version": "4.17.23",
-      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.23.tgz",
-      "integrity": "sha512-kVI48u3PZr38HdYz98UmfPnXl2DXrpdctLrFLCd3kOx1xUkOmpFPx7gCWWM5MPkL/fD8zb+Ph0QzjGFs4+hHWg=="
+      "version": "4.18.1",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.18.1.tgz",
+      "integrity": "sha512-J8xewKD/Gk22OZbhpOVSwcs60zhd95ESDwezOFuA3/099925PdHJ7OFHNTGtajL3AlZkykD32HykiMo+BIBI8A=="
    },
    "lodash-unified": {
      "version": "1.0.3",
@@ -23674,9 +23677,9 @@
      "requires": {}
    },
    "vite": {
-      "version": "6.4.1",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-6.4.1.tgz",
-      "integrity": "sha512-+Oxm7q9hDoLMyJOYfUYBuHQo+dkAloi33apOPP56pzj+vsdJDzr+j1NISE5pyaAuKL4A3UD34qd0lx5+kfKp2g==",
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-6.4.2.tgz",
+      "integrity": "sha512-2N/55r4JDJ4gdrCvGgINMy+HH3iRpNIz8K6SFwVsA+JbQScLiC+clmAxBgwiSPgcG9U15QmvqCGWzMbqda5zGQ==",
      "dev": true,
      "requires": {
        "esbuild": "^0.25.0",
--- a/package.json
+++ b/package.json
@@ -81,7 +81,7 @@
    "typescript": "^5.7.3",
    "unplugin-auto-import": "^0.18.2",
    "unplugin-vue-components": "^0.27.3",
-    "vite": "^6.4.1",
+    "vite": "^6.4.2",
    "vite-plugin-monaco-editor": "^1.1.0",
    "vite-plugin-svg-icons": "^2.0.1",
    "vitest": "^4.0.18",
--- a/src/assets/icons/mobile.svg
+++ b/src/assets/icons/mobile.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="M8.25 2.016h7.5q1.313 0 2.273 0.961t0.961 2.273v13.5q0 1.313-0.961 2.273t-2.273 0.961h-7.5q-1.313 0-2.273-0.961t-0.961-2.273v-13.5q0-1.313 0.961-2.273t2.273-0.961zM8.25 4.031q-0.469 0-0.844 0.375t-0.375 0.844v13.5q0 0.469 0.375 0.844t0.844 0.375h7.5q0.469 0 0.844-0.375t0.375-0.844v-13.5q0-0.469-0.375-0.844t-0.844-0.375h-1.734q-0.094 0.563-0.563 0.891t-1.125 0.328h-0.656q-0.656 0-1.125-0.328t-0.563-0.891h-1.734zM9.375 11.109h1.453l0.844-1.688q0.141-0.281 0.422-0.281 0.328 0 0.422 0.281l1.219 3 0.563-1.125q0.094-0.188 0.281-0.281t0.375-0.094h1.969q0.422 0 0.422 0.422t-0.422 0.422h-1.734l-1.031 2.109q-0.141 0.281-0.469 0.281-0.281 0-0.422-0.281l-1.219-2.953-0.563 1.078q-0.094 0.234-0.281 0.328t-0.422 0.094h-1.734q-0.422 0-0.422-0.422t0.422-0.422zM10.828 17.531h2.344q0.422 0 0.422 0.422t-0.422 0.422h-2.344q-0.422 0-0.422-0.422t0.422-0.422z"></path>
+</svg>
--- a/src/graphql/fragments/pprof.ts
+++ b/src/graphql/fragments/pprof.ts
@@ -0,0 +1,79 @@
+/**
+ * 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 GetPprofTaskList = {
+  variable: "$request: PprofTaskListRequest!",
+  query: `
+  pprofTaskList: queryPprofTaskList(request: $request) {
+    errorReason
+    tasks {
+      id
+      serviceId
+      serviceInstanceIds
+      createTime
+      events
+      duration
+      dumpPeriod
+    }
+  }
+  `,
+};
+
+export const GetPprofTaskProcess = {
+  variable: "$taskId: String!",
+  query: `
+  taskProgress: queryPprofTaskProgress(taskId: $taskId) {
+    logs {
+      id
+      instanceId
+      instanceName
+      operationType
+      operationTime
+    }
+    errorInstanceIds
+    successInstanceIds
+  }
+  `,
+};
+
+export const CreatePprofTask = {
+  variable: "$pprofTaskCreationRequest: PprofTaskCreationRequest!",
+  query: `
+  task: createPprofTask(pprofTaskCreationRequest: $pprofTaskCreationRequest) {
+    id
+    errorReason
+    code
+  }
+  `,
+};
+
+export const GetPprofAnalyze = {
+  variable: "$request: PprofAnalyzationRequest!",
+  query: `
+  analysisResult: queryPprofAnalyze(request: $request) {
+    tree {
+      elements {
+        id
+        parentId
+        symbol: codeSignature
+        dumpCount: total
+        self
+      }
+    }
+  }
+  `,
+};
--- a/src/graphql/index.ts
+++ b/src/graphql/index.ts
@@ -27,6 +27,7 @@ import * as event from "./query/event";
 import * as ebpf from "./query/ebpf";
 import * as demandLog from "./query/demand-log";
 import * as asyncProfile from "./query/async-profile";
+import * as pprof from "./query/pprof";

 const query: { [key: string]: string } = {
  ...app,
@@ -41,6 +42,7 @@ const query: { [key: string]: string } = {
  ...ebpf,
  ...demandLog,
  ...asyncProfile,
+  ...pprof,
 };
 class Graphql {
  queryData = "";
--- a/src/graphql/query/pprof.ts
+++ b/src/graphql/query/pprof.ts
@@ -0,0 +1,26 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { GetPprofTaskList, GetPprofTaskProcess, CreatePprofTask, GetPprofAnalyze } from "../fragments/pprof";
+
+export const getPprofTaskList = `query getPprofTaskList(${GetPprofTaskList.variable}) {${GetPprofTaskList.query}}`;
+
+export const getPprofTaskProcess = `query getPprofTaskProcess(${GetPprofTaskProcess.variable}) {${GetPprofTaskProcess.query}}`;
+
+export const savePprofTask = `mutation createPprofTask(${CreatePprofTask.variable}) {${CreatePprofTask.query}}`;
+
+export const getPprofAnalyze = `query getPprofAnalyze(${GetPprofAnalyze.variable}) {${GetPprofAnalyze.query}}`;
--- a/src/hooks/useExpressionsProcessor.ts
+++ b/src/hooks/useExpressionsProcessor.ts
@@ -192,7 +192,7 @@ export async function useDashboardQueryProcessor(configList: DashboardWidgetConf
          )
        ) {
          for (const item of results) {
-            let label: string = name;
+            let label: string = "" as string;
            if (item.metric) {
              const joined = item.metric.labels
                .map((d: { key: string; value: string }) => `${d.key}=${d.value}`)
--- a/src/locales/lang/en.ts
+++ b/src/locales/lang/en.ts
@@ -395,6 +395,7 @@ const msg = {
  errorInstances: "Error Instances",
  successInstances: "Success Instances",
  profilingEvents: "Async Profiling Events",
+  pprofEvent: "PProf Event",
  execArgs: "Exec Args",
  instances: "Instances",
  snapshot: "Snapshot",
@@ -407,7 +408,16 @@ const msg = {
  maxDuration: "Max Duration",
  minutes: "Minutes",
  invalidProfilingDurationRange: "Please enter a valid duration between 1 and 900 seconds",
+  invalidPprofDuration: "Please enter a valid duration in minutes",
+  invalidPprofDumpPeriod: "Please enter a valid dump period",
+  pprofDumpPeriod: "Dump Period",
+  pprofDurationHint: "Duration is required for CPU, BLOCK and MUTEX tasks.",
+  pprofDumpPeriodBlockHint:
+    "For BLOCK tasks, dump period is required and represents the blocked nanoseconds sampling rate. 1 samples every event.",
+  pprofDumpPeriodMutexHint:
+    "For MUTEX tasks, dump period is required and represents the contention occurrences sampling rate. 1 samples every event.",
  taskCreatedSuccessfully: "Task created successfully",
+  taskCreationFailed: "Task creation failed",
  runQuery: "Run Query",
  spansTable: "Spans Table",
  download: "Download",
--- a/src/locales/lang/es.ts
+++ b/src/locales/lang/es.ts
@@ -394,6 +394,7 @@ const msg = {
  errorInstances: "Error Instances",
  successInstances: "Success Instances",
  profilingEvents: "Async Profiling Events",
+  pprofEvent: "Evento PProf",
  execArgs: "Exec Args",
  instances: "Instances",
  snapshot: "Snapshot",
@@ -407,7 +408,16 @@ const msg = {
  maxDuration: "Duración Máxima",
  minutes: "Minutos",
  invalidProfilingDurationRange: "Por favor ingrese una duración válida entre 1 y 900 segundos",
+  invalidPprofDuration: "Por favor ingrese una duración válida en minutos",
+  invalidPprofDumpPeriod: "Por favor ingrese un período de volcado válido",
+  pprofDumpPeriod: "Período de Volcado",
+  pprofDurationHint: "La duración es obligatoria para tareas CPU, BLOCK y MUTEX.",
+  pprofDumpPeriodBlockHint:
+    "Para tareas BLOCK, el período de volcado es obligatorio y representa la tasa de muestreo en nanosegundos bloqueados. 1 muestrea todos los eventos.",
+  pprofDumpPeriodMutexHint:
+    "Para tareas MUTEX, el período de volcado es obligatorio y representa la tasa de muestreo por ocurrencias de contención. 1 muestrea todos los eventos.",
  taskCreatedSuccessfully: "Tarea creada exitosamente",
+  taskCreationFailed: "Error al crear la tarea",
  runQuery: "Ejecutar Consulta",
  spansTable: "Tabla de Lapso",
  download: "Descargar",
--- a/src/locales/lang/menus/en.ts
+++ b/src/locales/lang/menus/en.ts
@@ -76,6 +76,18 @@ const titles = {
  // Browser
  browser: "Browser",
  browser_desc: "Provide Browser-Side monitoring of Web-App, Versions and Pages, through Apache SkyWalking Client JS.",
+  // Mobile
+  mobile: "Mobile",
+  mobile_desc: "Mobile application monitoring via OpenTelemetry SDKs.",
+  mobile_ios: "iOS",
+  mobile_ios_desc:
+    "iOS and iPadOS app monitoring via OpenTelemetry Swift SDK. Provides HTTP performance, MetricKit daily stats, and crash diagnostics.",
+  mobile_wechat_mini_program: "WeChat Mini Program",
+  mobile_wechat_mini_program_desc:
+    "WeChat Mini Program monitoring via the mini-program-monitor SDK. Launch / render / route / script / package-load perf, request latency percentiles, error counts, per-page breakdowns, plus trace drill-down for outbound HTTP.",
+  mobile_alipay_mini_program: "Alipay Mini Program",
+  mobile_alipay_mini_program_desc:
+    "Alipay Mini Program monitoring via the mini-program-monitor SDK. Lifecycle-based launch / render approximations, request latency percentiles, error counts, per-page breakdowns, plus trace drill-down for outbound HTTP.",
  // Gateway
  gateway: "Gateway",
  gateway_desc:
--- a/src/locales/lang/menus/es.ts
+++ b/src/locales/lang/menus/es.ts
@@ -77,6 +77,18 @@ const titles = {
  // Browser
  browser: "Navegador",
  browser_desc: "Provide Browser-Side monitoring of Web-App, Versions and Pages, through Apache SkyWalking Client JS.",
+  // Mobile
+  mobile: "Mobile",
+  mobile_desc: "Mobile application monitoring via OpenTelemetry SDKs.",
+  mobile_ios: "iOS",
+  mobile_ios_desc:
+    "iOS and iPadOS app monitoring via OpenTelemetry Swift SDK. Provides HTTP performance, MetricKit daily stats, and crash diagnostics.",
+  mobile_wechat_mini_program: "WeChat Mini Program",
+  mobile_wechat_mini_program_desc:
+    "WeChat Mini Program monitoring via the mini-program-monitor SDK. Launch / render / route / script / package-load perf, request latency percentiles, error counts, per-page breakdowns, plus trace drill-down for outbound HTTP.",
+  mobile_alipay_mini_program: "Alipay Mini Program",
+  mobile_alipay_mini_program_desc:
+    "Alipay Mini Program monitoring via the mini-program-monitor SDK. Lifecycle-based launch / render approximations, request latency percentiles, error counts, per-page breakdowns, plus trace drill-down for outbound HTTP.",
  // Gateway
  gateway: "Puerta",
  gateway_desc:
--- a/src/locales/lang/menus/zh.ts
+++ b/src/locales/lang/menus/zh.ts
@@ -68,6 +68,18 @@ const titles = {
  // Browser
  browser: "Browser",
  browser_desc: "通过Apache SkyWalking Client JS提供Web应用程序、版本和页面的浏览器端监控。",
+  // Mobile
+  mobile: "移动端",
+  mobile_desc: "通过 OpenTelemetry SDK 提供移动应用监控。",
+  mobile_ios: "iOS",
+  mobile_ios_desc:
+    "通过 OpenTelemetry Swift SDK 提供 iOS 和 iPadOS 应用监控，包括 HTTP 性能、MetricKit 每日统计和崩溃诊断。",
+  mobile_wechat_mini_program: "微信小程序",
+  mobile_wechat_mini_program_desc:
+    "通过 mini-program-monitor SDK 提供微信小程序监控。包括启动 / 渲染 / 路由 / 脚本 / 分包加载性能、请求延迟分位数、错误计数、按页面细分，以及出站 HTTP 的链路追踪下钻。",
+  mobile_alipay_mini_program: "支付宝小程序",
+  mobile_alipay_mini_program_desc:
+    "通过 mini-program-monitor SDK 提供支付宝小程序监控。包括基于生命周期的启动 / 渲染近似值、请求延迟分位数、错误计数、按页面细分，以及出站 HTTP 的链路追踪下钻。",
  // Gateway
  gateway: "网关",
  gateway_desc: "API网关是位于客户端和后端服务集合之间的API管理工具。",
--- a/src/locales/lang/zh.ts
+++ b/src/locales/lang/zh.ts
@@ -393,6 +393,7 @@ const msg = {
  errorInstances: "错误的实例",
  successInstances: "成功的实例",
  profilingEvents: "异步分析事件",
+  pprofEvent: "PProf 事件",
  execArgs: "String任务扩展",
  instances: "实例",
  snapshot: "快照",
@@ -405,7 +406,14 @@ const msg = {
  maxDuration: "最大时长",
  minutes: "分钟",
  invalidProfilingDurationRange: "请输入1到900秒之间的有效时长",
+  invalidPprofDuration: "请输入有效的分钟数",
+  invalidPprofDumpPeriod: "请输入有效的采样率",
+  pprofDumpPeriod: "采样率",
+  pprofDurationHint: "CPU、BLOCK 和 MUTEX 任务必须设置采样时长。",
+  pprofDumpPeriodBlockHint: "BLOCK 任务必须设置采样率，单位是纳秒。设置为 1 表示采集所有阻塞事件。",
+  pprofDumpPeriodMutexHint: "MUTEX 任务必须设置采样率，单位是竞争次数。设置为 1 表示采集所有互斥竞争事件。",
  taskCreatedSuccessfully: "任务创建成功",
+  taskCreationFailed: "任务创建失败",
  runQuery: "运行查询",
  spansTable: "Spans表格",
  download: "下载",
--- a/src/store/data.ts
+++ b/src/store/data.ts
@@ -51,6 +51,7 @@ export const ControlsTypes = [
  WidgetType.Ebpf,
  WidgetType.NetworkProfiling,
  WidgetType.AsyncProfiling,
+  WidgetType.Pprof,
  WidgetType.ThirdPartyApp,
  WidgetType.ContinuousProfiling,
  WidgetType.TaskTimeline,
--- a/src/store/modules/pprof.ts
+++ b/src/store/modules/pprof.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 { defineStore } from "pinia";
+import type { PprofTask, PprofTaskCreationRequest, PprofStackElement, PprofTaskProgress } from "@/types/pprof";
+import { store } from "@/store";
+import graphql from "@/graphql";
+import { useAppStoreWithOut } from "@/store/modules/app";
+import { useSelectorStore } from "@/store/modules/selectors";
+import type { Instance } from "@/types/selector";
+
+interface PprofState {
+  taskList: Array<PprofTask>;
+  selectedTask: Nullable<PprofTask>;
+  taskProgress: Nullable<PprofTaskProgress>;
+  instances: Instance[];
+  analyzeTrees: PprofStackElement[];
+  loadingTree: boolean;
+  loadingTasks: boolean;
+}
+
+export const pprofStore = defineStore({
+  id: "pprof",
+  state: (): PprofState => ({
+    taskList: [],
+    selectedTask: null,
+    taskProgress: null,
+    instances: [],
+    analyzeTrees: [],
+    loadingTree: false,
+    loadingTasks: false,
+  }),
+  actions: {
+    setSelectedTask(task: Nullable<PprofTask>) {
+      this.selectedTask = task || {};
+    },
+    setAnalyzeTrees(tree: PprofStackElement[]) {
+      this.analyzeTrees = tree;
+    },
+    async getTaskList() {
+      const selectorStore = useSelectorStore();
+      if (!selectorStore.currentService?.id) {
+        return;
+      }
+      this.loadingTasks = true;
+      const response = await graphql.query("getPprofTaskList").params({
+        request: {
+          serviceId: selectorStore.currentService?.id,
+          limit: 10000,
+        },
+      });
+      this.loadingTasks = false;
+      if (response.errors) {
+        return response;
+      }
+      this.taskList = response.data.pprofTaskList.tasks || [];
+      this.selectedTask = this.taskList[0] || {};
+      this.setAnalyzeTrees([]);
+      this.setSelectedTask(this.selectedTask);
+      if (!this.taskList.length) {
+        return response;
+      }
+      return response;
+    },
+    async getTaskLogs(param: { taskId: string }) {
+      const response = await graphql.query("getPprofTaskProcess").params(param);
+      if (response.errors) {
+        return response;
+      }
+      this.taskProgress = response.data.taskProgress;
+      return response;
+    },
+    async getServiceInstances(param: { serviceId: string; isRelation?: boolean }) {
+      if (!param.serviceId) {
+        return null;
+      }
+      const response = await graphql.query("queryInstances").params({
+        serviceId: param.serviceId,
+        duration: useAppStoreWithOut().durationTime,
+      });
+      if (!response.errors) {
+        this.instances = (response.data.pods || []).map((d: Instance) => {
+          d.value = d.id || "";
+          return d;
+        });
+      }
+      return response;
+    },
+    async createTask(param: PprofTaskCreationRequest) {
+      if (!param.serviceId) {
+        return;
+      }
+      const response = await graphql.query("savePprofTask").params({ pprofTaskCreationRequest: param });
+      if (response.errors) {
+        return response;
+      }
+      this.getTaskList();
+      return response;
+    },
+    async getPprofAnalyze(params: { taskId: string; instanceIds: Array<string> }) {
+      if (!params.instanceIds.length) {
+        this.analyzeTrees = [];
+        return new Promise((resolve) => resolve({}));
+      }
+      this.loadingTree = true;
+      const response = await graphql.query("getPprofAnalyze").params({ request: params });
+      this.loadingTree = false;
+      if (response.errors) {
+        this.analyzeTrees = [];
+        return response;
+      }
+      const { analysisResult } = response.data;
+      if (!analysisResult) {
+        this.analyzeTrees = [];
+        return response;
+      }
+      this.analyzeTrees = [analysisResult.tree];
+      return response;
+    },
+  },
+});
+
+export function usePprofStore() {
+  return pprofStore(store);
+}
--- a/src/store/modules/trace.ts
+++ b/src/store/modules/trace.ts
@@ -177,10 +177,10 @@ export const traceStore = defineStore({
      return response;
    },
    async getTraces() {
+      this.loading = true;
      if (this.hasQueryTracesV2Support) {
        return this.fetchV2Traces();
      }
-      this.loading = true;
      const response = await graphql.query("queryTraces").params({ condition: this.conditions });
      if (response.errors) {
        this.loading = false;
@@ -193,14 +193,15 @@ export const traceStore = defineStore({
        this.loading = false;
        return response;
      }
-      this.getTraceSpans({ traceId: response.data.data.traces[0].traceIds[0] });
      this.traceList = response.data.data.traces.map((d: Trace) => {
        d.traceIds = d.traceIds.map((id: string) => {
          return { value: id, label: id };
        });
        return d;
      });
-      this.setCurrentTrace(response.data.data.traces[0] || {});
+      const currentTrace = this.traceList[0] || {};
+      this.setCurrentTrace(currentTrace);
+      await this.getTraceSpans({ traceId: currentTrace.traceIds?.[0]?.value || "" });
      return response;
    },
    async getTraceSpans(params: { traceId: string }) {
@@ -301,6 +302,27 @@ export const traceStore = defineStore({
      this.setCurrentTrace(trace || {});
      return response;
    },
+
+    async getTraceByTraceId(traceId: string) {
+      this.loading = true;
+      this.setTraceCondition({
+        traceId: traceId,
+      });
+      await this.getHasQueryTracesV2Support();
+      if (this.hasQueryTracesV2Support) {
+        await this.fetchV2Traces();
+        this.loading = false;
+        return;
+      }
+      this.setCurrentTrace({
+        traceIds: [{ value: traceId, label: traceId }],
+        traceId: traceId,
+        endpointNames: [],
+        spans: [],
+      });
+      await this.getTraceSpans({ traceId });
+      this.loading = false;
+    },
  },
 });

--- a/src/types/pprof.ts
+++ b/src/types/pprof.ts
@@ -0,0 +1,72 @@
+/**
+ * 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 type PprofTask = {
+  id: string;
+  serviceId: string;
+  serviceInstanceIds: string[];
+  createTime: number;
+  events: string;
+  duration?: number;
+  dumpPeriod?: number;
+  logs?: PprofTaskLog[];
+  errorInstanceIds?: string[];
+  successInstanceIds?: string[];
+};
+
+export type PprofTaskCreationRequest = {
+  serviceId: string;
+  serviceInstanceIds: string[];
+  events: string;
+  duration?: number;
+  dumpPeriod?: number;
+};
+
+export type PprofStackElement = {
+  id: string;
+  parentId: string;
+  symbol: string;
+  dumpCount: number;
+  self: number;
+  elements?: PprofStackElement[];
+};
+
+export type PprofTaskProgress = {
+  errorInstanceIds: string[];
+  successInstanceIds: string[];
+  logs: PprofTaskLog[];
+};
+
+type PprofTaskLog = {
+  id: string;
+  instanceId: string;
+  instanceName: string;
+  operationType: string;
+  operationTime: number;
+};
+
+export type PprofFlameGraphNode = {
+  id: string;
+  originId: string;
+  name: string;
+  parentId: string;
+  symbol: string;
+  dumpCount: number;
+  self: number;
+  value: number;
+  children?: PprofFlameGraphNode[];
+};
--- a/src/utils/flameGraph.ts
+++ b/src/utils/flameGraph.ts
@@ -22,3 +22,14 @@ export function treeForeach(tree: any, func: (node: any) => void) {
  }
  return tree;
 }
+
+export function escapeHtml(str: string): string {
+  const htmlEscapes: Record<string, string> = {
+    "&": "&amp;",
+    "<": "&lt;",
+    ">": "&gt;",
+    '"': "&quot;",
+    "'": "&#039;",
+  };
+  return str.replace(/[&<>"']/g, (char) => htmlEscapes[char]);
+}
--- a/src/views/Marketplace.vue
+++ b/src/views/Marketplace.vue
@@ -156,7 +156,6 @@ limitations under the License. -->

  .link {
    float: right;
-    margin-bottom: 20px;
  }

  .active {
--- a/src/views/dashboard/Trace.vue
+++ b/src/views/dashboard/Trace.vue
@@ -14,10 +14,14 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
  <div style="padding: 20px">
-    <TraceContent v-if="traceStore.currentTrace" :trace="traceStore.currentTrace" />
-    <div style="text-align: center; padding: 20px" v-if="!traceStore.loading && !traceStore.currentTrace"
-      >No trace found</div
-    >
+    <div v-if="traceStore.traceSpans.length">
+      <TraceContent
+        v-if="traceStore.hasQueryTracesV2Support && traceStore.currentTrace"
+        :trace="traceStore.currentTrace"
+      />
+      <SpanList v-if="!traceStore.hasQueryTracesV2Support" />
+    </div>
+    <div style="text-align: center; padding: 20px" v-else> No trace found </div>
  </div>
 </template>

@@ -26,17 +30,16 @@ limitations under the License. -->
  import { computed, onMounted, provide } from "vue";
  import { useTraceStore } from "@/store/modules/trace";
  import TraceContent from "@/views/dashboard/related/trace/components/TraceQuery/TraceContent.vue";
+  import SpanList from "@/views/dashboard/related/trace/components/TraceList/SpanList.vue";

  const route = useRoute();
  const traceStore = useTraceStore();
  const traceId = computed(() => route.params.traceId as string);
  provide("options", {});
  onMounted(() => {
-    if (traceId.value) {
-      traceStore.setTraceCondition({
-        traceId: traceId.value,
-      });
-      traceStore.fetchV2Traces();
+    if (!traceId.value) {
+      return;
    }
+    traceStore.getTraceByTraceId(traceId.value);
  });
 </script>
--- a/src/views/dashboard/controls/Pprof.vue
+++ b/src/views/dashboard/controls/Pprof.vue
@@ -0,0 +1,86 @@
+<!-- Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License. -->
+<template>
+  <div class="profile-wrapper flex-v">
+    <el-popover placement="bottom" trigger="click" :width="100" v-if="dashboardStore.editMode">
+      <template #reference>
+        <span class="operation cp">
+          <Icon iconName="ellipsis_v" size="middle" />
+        </span>
+      </template>
+      <div class="tools" @click="removeWidget">
+        <span>{{ t("delete") }}</span>
+      </div>
+    </el-popover>
+    <Header />
+    <Content :config="props.data" />
+  </div>
+</template>
+<script lang="ts" setup>
+  import type { PropType } from "vue";
+  import { useI18n } from "vue-i18n";
+  import { useDashboardStore } from "@/store/modules/dashboard";
+  import Content from "../related/pprof/Content.vue";
+  import Header from "../related/pprof/Header.vue";
+  import type { LayoutConfig } from "@/types/dashboard";
+
+  /*global defineProps*/
+  const props = defineProps({
+    data: {
+      type: Object as PropType<LayoutConfig>,
+      default: () => ({ graph: {} }),
+    },
+    activeIndex: { type: String, default: "" },
+  });
+  const { t } = useI18n();
+  const dashboardStore = useDashboardStore();
+
+  function removeWidget() {
+    dashboardStore.removeControls(props.data);
+  }
+</script>
+<style lang="scss" scoped>
+  .profile-wrapper {
+    width: 100%;
+    height: 100%;
+    font-size: $font-size-smaller;
+    position: relative;
+  }
+
+  .operation {
+    position: absolute;
+    top: 8px;
+    right: 3px;
+  }
+
+  .header {
+    padding: 10px;
+    font-size: $font-size-smaller;
+    border-bottom: 1px solid $border-color;
+  }
+
+  .tools {
+    padding: 5px 0;
+    color: #999;
+    cursor: pointer;
+    position: relative;
+    text-align: center;
+
+    &:hover {
+      color: $active-color;
+      background-color: $popper-hover-bg-color;
+    }
+  }
+</style>
--- a/src/views/dashboard/controls/index.ts
+++ b/src/views/dashboard/controls/index.ts
@@ -27,6 +27,7 @@ import Event from "./Event.vue";
 import NetworkProfiling from "./NetworkProfiling.vue";
 import ContinuousProfiling from "./ContinuousProfiling.vue";
 import AsyncProfiling from "./AsyncProfiling.vue";
+import Pprof from "./Pprof.vue";
 import TimeRange from "./TimeRange.vue";
 import ThirdPartyApp from "./ThirdPartyApp.vue";
 import TaskTimeline from "./TaskTimeline.vue";
@@ -45,6 +46,7 @@ export default {
  NetworkProfiling,
  ContinuousProfiling,
  AsyncProfiling,
+  Pprof,
  TimeRange,
  ThirdPartyApp,
  TaskTimeline,
--- a/src/views/dashboard/controls/tab.ts
+++ b/src/views/dashboard/controls/tab.ts
@@ -26,6 +26,7 @@ import Event from "./Event.vue";
 import NetworkProfiling from "./NetworkProfiling.vue";
 import ContinuousProfiling from "./ContinuousProfiling.vue";
 import AsyncProfiling from "./AsyncProfiling.vue";
+import Pprof from "./Pprof.vue";
 import TimeRange from "./TimeRange.vue";
 import ThirdPartyApp from "./ThirdPartyApp.vue";
 import TaskTimeline from "./TaskTimeline.vue";
@@ -45,5 +46,6 @@ export default {
  ThirdPartyApp,
  ContinuousProfiling,
  AsyncProfiling,
+  Pprof,
  TaskTimeline,
 };
--- a/src/views/dashboard/data.ts
+++ b/src/views/dashboard/data.ts
@@ -151,6 +151,7 @@ export enum WidgetType {
  NetworkProfiling = "NetworkProfiling",
  ContinuousProfiling = "ContinuousProfiling",
  AsyncProfiling = "AsyncProfiling",
+  Pprof = "Pprof",
  ThirdPartyApp = "ThirdPartyApp",
  TaskTimeline = "TaskTimeline",
 }
@@ -173,6 +174,7 @@ export const ServiceTools = [
  { name: "insert_chart", content: "Add eBPF Profiling", id: WidgetType.Ebpf },
  { name: "continuous_profiling", content: "Add Continuous Profiling", id: WidgetType.ContinuousProfiling },
  { name: "async_profiling", content: "Add Async Profiling", id: WidgetType.AsyncProfiling },
+  { name: "chart", content: "Add PProf Profiling", id: WidgetType.Pprof },
  { name: "assignment", content: "Add Log", id: WidgetType.Log },
  { name: "demand", content: "Add On Demand Log", id: WidgetType.DemandLog },
  { name: "event", content: "Add Event", id: WidgetType.Event },
--- a/src/views/dashboard/related/event/Header.vue
+++ b/src/views/dashboard/related/event/Header.vue
@@ -234,6 +234,7 @@ limitations under the License. -->
  }

  .label {
-    line-height: 24px;
+    line-height: var(--el-input-height, 24px);
+    flex-shrink: 0;
  }
 </style>
--- a/src/views/dashboard/related/log/Header.vue
+++ b/src/views/dashboard/related/log/Header.vue
@@ -72,7 +72,7 @@ limitations under the License. -->
  </div>
  <div class="flex-h row" v-show="!isBrowser">
    <div class="mr-10 traceId">
-      <span class="grey mr-5 label">{{ t("traceID") }}:</span>
+      <span class="grey mr-5">{{ t("traceID") }}:</span>
      <el-input v-model="traceId" class="inputs-max" size="small" />
    </div>
    <ConditionTags :type="'LOG'" @update="updateTags" />
@@ -480,6 +480,7 @@ limitations under the License. -->
  }

  .label {
-    line-height: 24px;
+    line-height: var(--el-input-height, 24px);
+    flex-shrink: 0;
  }
 </style>
--- a/src/views/dashboard/related/log/LogTable/LogService.vue
+++ b/src/views/dashboard/related/log/LogTable/LogService.vue
@@ -27,7 +27,12 @@ limitations under the License. -->
          <Icon iconName="merge" />
        </el-tooltip>
      </span>
-      <span v-else v-html="highlightKeywords(getDataValue(item.label))"></span>
+      <span v-else>
+        <template v-for="(part, partIndex) in highlightKeywords(getDataValue(item.label))" :key="partIndex">
+          <span v-if="part.highlight" class="keyword-highlight">{{ part.text }}</span>
+          <template v-else>{{ part.text }}</template>
+        </template>
+      </span>
    </div>
  </div>
 </template>
@@ -59,10 +64,41 @@ limitations under the License. -->
    }
    return (props.data.tags.find((d: { key: string; value: string }) => d.key === "level") || {}).value || "";
  });
-  const highlightKeywords = (content: string) => {
-    const keywords = Object.values(logStore.conditions.keywordsOfContent || {});
-    const regex = new RegExp(keywords.join("|"), "gi");
-    return `${content}`.replace(regex, (match) => `<span style="color: red">${match}</span>`);
+  type HighlightPart = {
+    text: string;
+    highlight: boolean;
+  };
+
+  const escapeRegExp = (value: string) => value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+
+  const highlightKeywords = (content: string): HighlightPart[] => {
+    const text = `${content || ""}`;
+    const keywords = [
+      ...new Set(Object.values(logStore.conditions.keywordsOfContent || {}).map((keyword) => `${keyword}`.trim())),
+    ].filter(Boolean);
+
+    if (!keywords.length) {
+      return [{ text, highlight: false }];
+    }
+
+    const regex = new RegExp(keywords.map(escapeRegExp).join("|"), "gi");
+    const parts: HighlightPart[] = [];
+    let lastIndex = 0;
+    let match: RegExpExecArray | null;
+
+    while ((match = regex.exec(text)) !== null) {
+      if (match.index > lastIndex) {
+        parts.push({ text: text.slice(lastIndex, match.index), highlight: false });
+      }
+      parts.push({ text: match[0], highlight: true });
+      lastIndex = regex.lastIndex;
+    }
+
+    if (lastIndex < text.length) {
+      parts.push({ text: text.slice(lastIndex), highlight: false });
+    }
+
+    return parts.length ? parts : [{ text, highlight: false }];
  };

  function getDataValue(label: string) {
@@ -165,4 +201,8 @@ limitations under the License. -->
  .warning {
    color: var(--sw-orange);
  }
+
+  .keyword-highlight {
+    color: var(--sw-red);
+  }
 </style>
--- a/src/views/dashboard/related/network-profiling/components/ProcessTopology.vue
+++ b/src/views/dashboard/related/network-profiling/components/ProcessTopology.vue
@@ -461,14 +461,28 @@ limitations under the License. -->
    }
  }

-  function showNodeTip(d: ProcessNode, event: MouseEvent) {
-    const tipHtml = ` <div class="mb-5"><span class="grey">name: </span>${d.name}</div>`;
+  type TooltipRow = {
+    label: string;
+    value: unknown;
+  };

+  function renderTooltipRows(rows: TooltipRow[]) {
+    tooltip.value.html("");
+    const row = tooltip.value.selectAll("div").data(rows).enter().append("div").attr("class", "mb-5");
+
+    row
+      .append("span")
+      .attr("class", "grey")
+      .text((d: TooltipRow) => `${d.label}: `);
+    row.append("span").text((d: TooltipRow) => `${d.value ?? ""}`);
+  }
+
+  function showNodeTip(d: ProcessNode, event: MouseEvent) {
    tooltip.value
      .style("top", event.offsetY + "px")
      .style("left", event.offsetX + "px")
-      .style("visibility", "visible")
-      .html(tipHtml);
+      .style("visibility", "visible");
+    renderTooltipRows([{ label: "name", value: d.name }]);
  }

  function hideNodeTip() {
@@ -487,14 +501,14 @@ limitations under the License. -->
    if (types.includes("tls")) {
      l = "TLS";
    }
-    const tipHtml = `<div><span class="grey">${t("detectPoint")}: </span>${link.detectPoints.join(" | ")}</div>
-        <div><span class="grey">Type: </span>${l}</div>`;
-
    tooltip.value
      .style("top", event.offsetY + "px")
      .style("left", event.offsetX + "px")
-      .style("visibility", "visible")
-      .html(tipHtml);
+      .style("visibility", "visible");
+    renderTooltipRows([
+      { label: t("detectPoint"), value: link.detectPoints.join(" | ") },
+      { label: "Type", value: l },
+    ]);
  }

  function hideLinkTip() {
--- a/src/views/dashboard/related/pprof/Content.vue
+++ b/src/views/dashboard/related/pprof/Content.vue
@@ -0,0 +1,68 @@
+<!-- Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License. -->
+<template>
+  <div class="flex-h content">
+    <TaskList />
+    <div class="vis-graph ml-5">
+      <div class="mb-20 mt-10">
+        <Filter />
+      </div>
+      <div class="stack" v-loading="pprofStore.loadingTree">
+        <PprofStack />
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { onMounted } from "vue";
+  import { ElMessage } from "element-plus";
+  import { usePprofStore } from "@/store/modules/pprof";
+  import { useSelectorStore } from "@/store/modules/selectors";
+  import TaskList from "./components/TaskList.vue";
+  import Filter from "./components/Filter.vue";
+  import PprofStack from "./components/PprofStack.vue";
+
+  const pprofStore: ReturnType<typeof usePprofStore> = usePprofStore();
+  const selectorStore = useSelectorStore();
+
+  onMounted(async () => {
+    const resp = await pprofStore.getServiceInstances({ serviceId: selectorStore.currentService?.id || "" });
+    if (resp?.errors) {
+      ElMessage.error(resp.errors);
+    }
+  });
+</script>
+<style lang="scss" scoped>
+  .content {
+    height: calc(100% - 30px);
+    width: 100%;
+  }
+
+  .vis-graph {
+    height: 100%;
+    flex-grow: 2;
+    min-width: 700px;
+    overflow: hidden;
+    position: relative;
+    width: calc(100% - 330px);
+  }
+
+  .stack {
+    width: 100%;
+    overflow: auto;
+    height: calc(100% - 100px);
+    padding-bottom: 10px;
+  }
+</style>
--- a/src/views/dashboard/related/pprof/Header.vue
+++ b/src/views/dashboard/related/pprof/Header.vue
@@ -0,0 +1,46 @@
+<!-- Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License. -->
+<template>
+  <div class="flex-h header">
+    <div class="title">PProf Profiling</div>
+    <el-button class="mr-20" size="small" type="primary" @click="() => (newTask = true)">
+      {{ t("newTask") }}
+    </el-button>
+  </div>
+  <el-dialog v-model="newTask" :destroy-on-close="true" fullscreen @closed="newTask = false">
+    <NewTask @close="newTask = false" />
+  </el-dialog>
+</template>
+<script lang="ts" setup>
+  import { ref } from "vue";
+  import { useI18n } from "vue-i18n";
+  import NewTask from "./components/NewTask.vue";
+
+  const { t } = useI18n();
+  const newTask = ref<boolean>(false);
+</script>
+<style lang="scss" scoped>
+  .header {
+    padding: 10px;
+    font-size: $font-size-smaller;
+    border-bottom: 1px solid $border-color;
+    justify-content: space-between;
+  }
+
+  .title {
+    font-weight: bold;
+    line-height: 24px;
+  }
+</style>
--- a/src/views/dashboard/related/pprof/components/Filter.vue
+++ b/src/views/dashboard/related/pprof/components/Filter.vue
@@ -0,0 +1,80 @@
+<!-- Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License. -->
+<template>
+  <div class="flex-h">
+    <Selector
+      class="filter-selector"
+      :multiple="true"
+      :value="serviceInstanceIds"
+      size="small"
+      :options="instances"
+      placeholder="Select instances"
+      @change="changeInstances"
+    />
+    <el-button type="primary" size="small" @click="analyzeProfiling">
+      {{ t("analyze") }}
+    </el-button>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { computed, ref, watch } from "vue";
+  import { useI18n } from "vue-i18n";
+  import { ElMessage } from "element-plus";
+  import { usePprofStore } from "@/store/modules/pprof";
+  import type { Instance } from "@/types/selector";
+  import type { Option } from "@/types/app";
+
+  const { t } = useI18n();
+  const pprofStore = usePprofStore();
+  const serviceInstanceIds = ref<string[]>([]);
+  const instances = computed(() =>
+    pprofStore.instances.filter((d: Instance) =>
+      (pprofStore.selectedTask?.successInstanceIds || []).includes(d.id || ""),
+    ),
+  );
+
+  function changeInstances(options: Option[]) {
+    serviceInstanceIds.value = options.map((d: Option) => d.value);
+    pprofStore.setAnalyzeTrees([]);
+  }
+
+  async function analyzeProfiling() {
+    const instanceIds = (pprofStore.instances || [])
+      .filter((d: Instance) => (serviceInstanceIds.value || []).includes(d.value))
+      .map((d: Instance) => d.id || "") as string[];
+    const res = await pprofStore.getPprofAnalyze({
+      instanceIds,
+      taskId: pprofStore.selectedTask?.id || "",
+    });
+    if ((res as { errors?: string }).errors) {
+      ElMessage.error((res as { errors: string }).errors);
+    }
+  }
+
+  watch(
+    () => pprofStore.selectedTask?.successInstanceIds,
+    (value) => {
+      serviceInstanceIds.value = value || [];
+      pprofStore.setAnalyzeTrees([]);
+    },
+    { immediate: true },
+  );
+</script>
+<style>
+  .filter-selector {
+    width: 400px;
+    margin-right: 10px;
+  }
+</style>
--- a/src/views/dashboard/related/pprof/components/NewTask.vue
+++ b/src/views/dashboard/related/pprof/components/NewTask.vue
@@ -0,0 +1,185 @@
+<!-- Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License. -->
+
+<template>
+  <div class="pprof-task">
+    <div>
+      <div class="label">{{ t("instance") }}</div>
+      <Selector
+        class="profile-input"
+        :multiple="true"
+        :value="serviceInstanceIds"
+        size="small"
+        :options="pprofStore.instances"
+        placeholder="Select instances"
+        @change="changeInstances"
+        :filterable="true"
+      />
+    </div>
+    <div>
+      <div class="label">{{ t("pprofEvent") }}</div>
+      <Radio class="mb-5" :value="eventType" :options="PprofEvents" @change="changeEventType" />
+    </div>
+    <div v-if="requiresDuration">
+      <div class="label">{{ t("duration") }}</div>
+      <Radio class="mb-5" :value="duration" :options="DurationOptions" @change="changeDuration" />
+      <div v-if="duration === DurationOptions[5].value" class="custom-duration">
+        <div class="label">{{ t("customDuration") }} ({{ t("minutes") }})</div>
+        <el-input
+          size="small"
+          class="profile-input"
+          v-model="customDurationMinutes"
+          type="number"
+          :min="1"
+          placeholder="Enter duration in minutes"
+        />
+      </div>
+      <div class="hint">{{ t("pprofDurationHint") }}</div>
+    </div>
+    <div v-if="requiresDumpPeriod">
+      <div class="label">{{ t("pprofDumpPeriod") }}</div>
+      <el-input
+        size="small"
+        class="profile-input"
+        v-model="dumpPeriod"
+        type="number"
+        :min="1"
+        placeholder="Enter dump period"
+      />
+      <div class="hint">
+        {{ eventType === "BLOCK" ? t("pprofDumpPeriodBlockHint") : t("pprofDumpPeriodMutexHint") }}
+      </div>
+    </div>
+    <div>
+      <el-button @click="createTask" type="primary" class="create-task-btn" :loading="loading">
+        {{ t("createTask") }}
+      </el-button>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { computed, ref } from "vue";
+  import { useI18n } from "vue-i18n";
+  import { usePprofStore } from "@/store/modules/pprof";
+  import { useSelectorStore } from "@/store/modules/selectors";
+  import { ElMessage } from "element-plus";
+  import { DurationOptions, PprofEvents, DurationRequiredEvents, DumpPeriodRequiredEvents } from "./data";
+  import type { PprofTaskCreationRequest } from "@/types/pprof";
+
+  /* global defineEmits */
+  const emits = defineEmits(["close"]);
+  const pprofStore = usePprofStore();
+  const selectorStore = useSelectorStore();
+  const { t } = useI18n();
+  const serviceInstanceIds = ref<string[]>([]);
+  const eventType = ref<string>(PprofEvents[0].value);
+  const duration = ref<string>(DurationOptions[1].value);
+  const customDurationMinutes = ref<number>(5);
+  const dumpPeriod = ref<number | string>("");
+  const loading = ref<boolean>(false);
+  const requiresDuration = computed(() => DurationRequiredEvents.includes(eventType.value));
+  const requiresDumpPeriod = computed(() => DumpPeriodRequiredEvents.includes(eventType.value));
+
+  function changeDuration(val: string) {
+    duration.value = val;
+  }
+
+  function changeEventType(val: string) {
+    eventType.value = val;
+  }
+
+  function changeInstances(options: { id: string }[]) {
+    serviceInstanceIds.value = options.map((d: { id: string }) => d.id);
+  }
+
+  async function createTask() {
+    const params: PprofTaskCreationRequest = {
+      serviceId: selectorStore.currentService?.id || "",
+      serviceInstanceIds: serviceInstanceIds.value,
+      events: eventType.value,
+    };
+
+    if (requiresDuration.value) {
+      const finalDuration =
+        duration.value === DurationOptions[5].value ? Number(customDurationMinutes.value) : Number(duration.value);
+      if (!finalDuration || finalDuration < 1) {
+        ElMessage.error(t("invalidPprofDuration"));
+        return;
+      }
+      params.duration = finalDuration;
+    }
+
+    if (requiresDumpPeriod.value) {
+      const finalDumpPeriod = Number(dumpPeriod.value);
+      if (!finalDumpPeriod || finalDumpPeriod < 1) {
+        ElMessage.error(t("invalidPprofDumpPeriod"));
+        return;
+      }
+      params.dumpPeriod = finalDumpPeriod;
+    }
+
+    loading.value = true;
+    const res = await pprofStore.createTask(params);
+    loading.value = false;
+    if (!res) {
+      ElMessage.error(t("taskCreationFailed"));
+      return;
+    }
+    if (res.errors) {
+      ElMessage.error(res.errors);
+      return;
+    }
+    const result = res.data?.task;
+    if (!result) {
+      ElMessage.error(t("taskCreationFailed"));
+      return;
+    }
+    if (result.errorReason) {
+      ElMessage.error(result.errorReason);
+      return;
+    }
+    emits("close");
+    ElMessage.success(t("taskCreatedSuccessfully"));
+  }
+</script>
+<style lang="scss" scoped>
+  .pprof-task {
+    margin: 0 auto;
+    width: 600px;
+  }
+
+  .label {
+    margin-top: 10px;
+    font-size: $font-size-normal;
+  }
+
+  .profile-input {
+    width: 600px;
+  }
+
+  .create-task-btn {
+    width: 600px;
+    margin-top: 50px;
+  }
+
+  .custom-duration {
+    margin-top: 10px;
+  }
+
+  .hint {
+    font-size: $font-size-smaller;
+    color: var(--text-color-placeholder);
+  }
+</style>
--- a/src/views/dashboard/related/pprof/components/PprofStack.vue
+++ b/src/views/dashboard/related/pprof/components/PprofStack.vue
@@ -0,0 +1,170 @@
+<!-- Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License. -->
+<template>
+  <div ref="graph"></div>
+</template>
+<script lang="ts" setup>
+  /* global Nullable */
+  import { ref, watch } from "vue";
+  import * as d3 from "d3";
+  import d3tip from "d3-tip";
+  import { flamegraph } from "d3-flame-graph";
+  import { usePprofStore } from "@/store/modules/pprof";
+  import type { PprofStackElement, PprofFlameGraphNode } from "@/types/pprof";
+  import "d3-flame-graph/dist/d3-flamegraph.css";
+  import { treeForeach, escapeHtml } from "@/utils/flameGraph";
+
+  const pprofStore = usePprofStore();
+  const stackTree = ref<Nullable<PprofFlameGraphNode>>(null);
+  const selectStack = ref<Nullable<PprofFlameGraphNode>>(null);
+  const graph = ref<Nullable<HTMLDivElement>>(null);
+  const flameChart = ref<any>(null);
+  const min = ref<number>(1);
+  const max = ref<number>(1);
+
+  function drawGraph() {
+    if (flameChart.value) {
+      flameChart.value.destroy();
+    }
+    if (!pprofStore.analyzeTrees.length || !graph.value) {
+      stackTree.value = null;
+      return;
+    }
+    const root: PprofFlameGraphNode = {
+      parentId: "0",
+      originId: "1",
+      name: "Virtual Root",
+      children: [],
+      value: 0,
+      id: "1",
+      symbol: "Virtual Root",
+      dumpCount: 0,
+      self: 0,
+    };
+    countRange();
+    const elements = processTree((pprofStore.analyzeTrees[0].elements || []) as PprofStackElement[]);
+    if (!elements) {
+      stackTree.value = null;
+      return;
+    }
+    stackTree.value = elements;
+    const treeRoot = { ...root, ...elements };
+    const width = graph.value.getBoundingClientRect().width || 0;
+    const w = width < 800 ? 802 : width;
+    flameChart.value = flamegraph()
+      .width(w - 15)
+      .cellHeight(18)
+      .transitionDuration(750)
+      .minFrameSize(1)
+      .transitionEase(d3.easeCubic as any)
+      .sort(true)
+      .title("")
+      .selfValue(false)
+      .inverted(true)
+      .onClick((d: { data: PprofFlameGraphNode }) => {
+        selectStack.value = d.data;
+      })
+      .setColorMapper((d, originalColor) => (d.highlight ? "#6aff8f" : originalColor));
+    const tip = (d3tip as any)()
+      .attr("class", "d3-tip")
+      .direction("s")
+      .html((d: { data: PprofFlameGraphNode } & { parent: { data: PprofFlameGraphNode } }) => {
+        const name = escapeHtml(d.data.name);
+        const rateOfParent =
+          (d.parent &&
+            `<div class="mb-5">Percentage Of Selected: ${
+              (
+                (d.data.dumpCount / ((selectStack.value && selectStack.value.dumpCount) || treeRoot.dumpCount)) *
+                100
+              ).toFixed(3) + "%"
+            }</div>`) ||
+          "";
+        const rateOfRoot = `<div class="mb-5">Percentage Of Root: ${
+          ((d.data.dumpCount / treeRoot.dumpCount) * 100).toFixed(3) + "%"
+        }</div>`;
+        return `<div class="mb-5 name">Symbol: ${name}</div>
+          <div class="mb-5">Total: ${d.data.dumpCount}</div>
+          <div class="mb-5">Self: ${d.data.self}</div>
+          ${rateOfParent}${rateOfRoot}`;
+      })
+      .style("max-width", "400px");
+    flameChart.value.tooltip(tip);
+    d3.select(graph.value).datum(treeRoot).call(flameChart.value);
+  }
+
+  function countRange() {
+    const list = (pprofStore.analyzeTrees[0]?.elements || []).map((ele: PprofStackElement) => ele.dumpCount);
+    max.value = Math.max(...(list.length ? list : [1]));
+    min.value = Math.min(...(list.length ? list : [1]));
+  }
+
+  function processTree(arr: PprofStackElement[]): Nullable<PprofFlameGraphNode> {
+    const obj: Record<string, PprofFlameGraphNode> = {};
+    const childrenByParentId: Record<string, PprofFlameGraphNode[]> = {};
+    let res = null as Nullable<PprofFlameGraphNode>;
+    const copyArr = arr.map((item) => {
+      const node: PprofFlameGraphNode = {
+        parentId: String(Number(item.parentId) + 1),
+        originId: String(Number(item.id) + 1),
+        id: item.id,
+        name: item.symbol,
+        symbol: item.symbol,
+        dumpCount: item.dumpCount,
+        self: item.self,
+        value: 0,
+      };
+      obj[node.originId] = node;
+      // Group nodes by their parentId
+      if (childrenByParentId[node.parentId]) {
+        childrenByParentId[node.parentId].push(node);
+      } else {
+        childrenByParentId[node.parentId] = [node];
+      }
+      return node;
+    });
+    const scale = d3.scaleLinear().domain([min.value, max.value]).range([1, 200]);
+    // Link children to parents in O(n) using the adjacency map
+    for (const item of copyArr) {
+      item.value = Number(scale(item.dumpCount).toFixed(4));
+      if (item.parentId === "0") {
+        res = item as PprofFlameGraphNode;
+      }
+      const children = childrenByParentId[item.originId];
+      if (children) {
+        item.children = children;
+      }
+    }
+    if (!res) {
+      return null;
+    }
+    treeForeach([res], (node: PprofFlameGraphNode) => {
+      if (node.children) {
+        let val = 0;
+        for (const child of node.children) {
+          val = child.value + val;
+        }
+        node.value = node.value < val ? val : node.value;
+      }
+    });
+    return res;
+  }
+
+  watch(
+    () => pprofStore.analyzeTrees,
+    () => {
+      drawGraph();
+    },
+  );
+</script>
--- a/src/views/dashboard/related/pprof/components/TaskList.vue
+++ b/src/views/dashboard/related/pprof/components/TaskList.vue
@@ -0,0 +1,284 @@
+<!-- Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License. -->
+<template>
+  <div class="profile-task-list flex-v" v-loading="pprofStore.loadingTasks">
+    <div class="profile-t-tool flex-h">{{ t("taskList") }}</div>
+    <div class="profile-t-wrapper">
+      <div class="no-data" v-show="!pprofStore.taskList.length">
+        {{ t("noData") }}
+      </div>
+      <table class="profile-t">
+        <tr
+          class="profile-tr cp"
+          v-for="(i, index) in pprofStore.taskList"
+          @click="changeTask(i)"
+          :key="index"
+          :class="{
+            selected: pprofStore.selectedTask?.id === i.id,
+          }"
+        >
+          <td class="profile-td">
+            <div class="ell">
+              <span>{{ i.id }}</span>
+              <a class="profile-btn r" @click="() => (showDetail = true)">
+                <Icon iconName="view" size="middle" />
+              </a>
+            </div>
+            <div class="grey ell sm task-info">
+              <span class="mr-10 sm">
+                {{ dateFormat(i.createTime) }}
+              </span>
+              <span class="task-type">{{ i.events }}</span>
+            </div>
+          </td>
+        </tr>
+      </table>
+    </div>
+  </div>
+  <el-dialog v-model="showDetail" :destroy-on-close="true" fullscreen @closed="showDetail = false">
+    <div class="profile-detail flex-v" v-if="pprofStore.selectedTask?.id">
+      <div>
+        <h5 class="mb-10">{{ t("task") }}.</h5>
+        <div class="mb-10 clear item">
+          <span class="g-sm-4 grey">ID:</span>
+          <span class="g-sm-8 wba">{{ pprofStore.selectedTask.id }}</span>
+        </div>
+        <div class="mb-10 clear item">
+          <span class="g-sm-4 grey">{{ t("service") }}:</span>
+          <span class="g-sm-8 wba">{{ service }}</span>
+        </div>
+        <div class="mb-10 clear item">
+          <span class="g-sm-4 grey">{{ t("events") }}:</span>
+          <span class="g-sm-8 wba">{{ pprofStore.selectedTask.events }}</span>
+        </div>
+        <div class="mb-10 clear item" v-if="pprofStore.selectedTask.duration !== undefined">
+          <span class="g-sm-4 grey">{{ t("duration") }}:</span>
+          <span class="g-sm-8 wba">{{ pprofStore.selectedTask.duration }}{{ t("minutes") }}</span>
+        </div>
+        <div class="mb-10 clear item" v-if="pprofStore.selectedTask.dumpPeriod !== undefined">
+          <span class="g-sm-4 grey">{{ t("pprofDumpPeriod") }}:</span>
+          <span class="g-sm-8 wba">{{ pprofStore.selectedTask.dumpPeriod }}</span>
+        </div>
+      </div>
+      <div>
+        <h5 class="mb-5 mt-10" v-show="pprofStore.selectedTask?.logs?.length"> {{ t("logs") }}. </h5>
+        <div v-for="(i, index) in Object.keys(instanceLogs)" :key="index">
+          <div class="sm">
+            <span class="mr-10 grey">{{ t("instance") }}:</span>
+            <span>{{ i }}</span>
+          </div>
+          <div v-for="(d, logIndex) in instanceLogs[i]" :key="`${d.instanceId}-${logIndex}`">
+            <span class="mr-10 grey">{{ t("operationType") }}:</span>
+            <span class="mr-20">{{ d.operationType }}</span>
+            <span class="mr-10 grey">{{ t("time") }}:</span>
+            <span>{{ dateFormat(d.operationTime) }}</span>
+          </div>
+        </div>
+      </div>
+      <div>
+        <h5 class="mb-10 mt-10" v-show="errorInstances.length"> {{ t("errorInstances") }}</h5>
+        <div v-for="(instance, index) in errorInstances" :key="instance.value || index">
+          <div class="mb-10 sm">
+            <span class="mr-10 grey">{{ t("instance") }}:</span>
+            <span>{{ instance.label }}</span>
+          </div>
+          <div v-for="(d, attrIndex) in instance.attributes" :key="d.value + attrIndex">
+            <span class="mr-10 grey">{{ d.name }}:</span>
+            <span class="mr-20">{{ d.value }}</span>
+          </div>
+        </div>
+      </div>
+      <div>
+        <h5 class="mb-10 mt-10" v-show="successInstances.length"> {{ t("successInstances") }}</h5>
+        <div v-for="(instance, index) in successInstances" :key="instance.value || index">
+          <div class="mb-10 sm">
+            <span class="mr-10 grey">{{ t("instance") }}:</span>
+            <span>{{ instance.label }}</span>
+          </div>
+          <div v-for="(d, attrIndex) in instance.attributes" :key="d.value + attrIndex">
+            <span class="mr-10 grey">{{ d.name }}:</span>
+            <span class="mr-20">{{ d.value }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </el-dialog>
+</template>
+<script lang="ts" setup>
+  import { ref, onMounted, watch } from "vue";
+  import { useI18n } from "vue-i18n";
+  import { useSelectorStore } from "@/store/modules/selectors";
+  import { usePprofStore } from "@/store/modules/pprof";
+  import type { TaskLog } from "@/types/profile";
+  import type { PprofTask } from "@/types/pprof";
+  import { ElMessage } from "element-plus";
+  import { dateFormat } from "@/utils/dateFormat";
+  import type { Instance, Service } from "@/types/selector";
+
+  /*global Nullable*/
+  const { t } = useI18n();
+  const pprofStore = usePprofStore();
+  const selectorStore = useSelectorStore();
+  const showDetail = ref<boolean>(false);
+  const service = ref<string>("");
+  const instanceLogs = ref<Record<string, TaskLog[]>>({});
+  const errorInstances = ref<Instance[]>([]);
+  const successInstances = ref<Instance[]>([]);
+
+  onMounted(() => {
+    fetchTasks();
+  });
+
+  watch(
+    () => pprofStore.instances,
+    () => {
+      syncTaskDetails(pprofStore.selectedTask);
+    },
+    { deep: true },
+  );
+
+  async function fetchTasks() {
+    const res = await pprofStore.getTaskList();
+    if (res?.errors) {
+      ElMessage.error(res.errors);
+      return;
+    }
+    const errorReason = res?.data?.pprofTaskList?.errorReason;
+    if (errorReason) {
+      ElMessage.error(errorReason);
+      return;
+    }
+    if (pprofStore.selectedTask?.id) {
+      await changeTask(pprofStore.selectedTask as PprofTask);
+    }
+  }
+
+  function syncTaskDetails(item?: Nullable<PprofTask>) {
+    if (!item?.id) {
+      instanceLogs.value = {};
+      errorInstances.value = [];
+      successInstances.value = [];
+      return;
+    }
+    errorInstances.value = pprofStore.instances.filter((d: Instance) =>
+      d.id ? (item.errorInstanceIds || []).includes(d.id) : false,
+    );
+    successInstances.value = pprofStore.instances.filter((d: Instance) =>
+      d.id ? (item.successInstanceIds || []).includes(d.id) : false,
+    );
+    instanceLogs.value = {};
+    for (const d of item.logs || []) {
+      if (instanceLogs.value[d.instanceName]) {
+        instanceLogs.value[d.instanceName].push(d);
+      } else {
+        instanceLogs.value[d.instanceName] = [d];
+      }
+    }
+  }
+
+  async function changeTask(item: PprofTask) {
+    if (item.id !== pprofStore.selectedTask?.id) {
+      pprofStore.setAnalyzeTrees([]);
+      pprofStore.setSelectedTask(item);
+    }
+    service.value = (selectorStore.services.find((s: Service) => s.id === item.serviceId) || {}).label || "";
+    const res = await pprofStore.getTaskLogs({ taskId: item.id });
+    if (res?.errors) {
+      ElMessage.error(res.errors);
+      return;
+    }
+    const selectedTask = {
+      ...item,
+      ...pprofStore.taskProgress,
+    };
+    pprofStore.setSelectedTask(selectedTask);
+    syncTaskDetails(selectedTask);
+  }
+</script>
+<style lang="scss" scoped>
+  .profile-task-list {
+    width: 300px;
+    height: calc(100% - 20px);
+    overflow: auto;
+    border-right: 1px solid var(--sw-trace-list-border);
+  }
+
+  .item span {
+    height: 21px;
+  }
+
+  .profile-td {
+    padding: 5px 10px;
+    border-bottom: 1px solid var(--sw-trace-list-border);
+  }
+
+  .selected {
+    background-color: var(--sw-list-selected);
+  }
+
+  .no-data {
+    text-align: center;
+    margin-top: 10px;
+  }
+
+  .profile-t-wrapper {
+    overflow: auto;
+    flex-grow: 1;
+  }
+
+  .profile-t {
+    width: 100%;
+    border-spacing: 0;
+    table-layout: fixed;
+    flex-grow: 1;
+    position: relative;
+  }
+
+  .profile-tr {
+    &:hover {
+      background-color: var(--sw-list-selected);
+    }
+  }
+
+  .profile-t-tool {
+    padding: 5px 10px;
+    font-weight: bold;
+    border-right: 1px solid var(--sw-trace-list-border);
+    border-bottom: 1px solid var(--sw-trace-list-border);
+    background-color: var(--sw-table-header);
+  }
+
+  .profile-btn {
+    color: $font-color;
+    padding: 1px 3px;
+    border-radius: 2px;
+    font-size: $font-size-smaller;
+    float: right;
+  }
+
+  .task-info {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .task-type {
+    color: var(--sw-profile-task-type);
+    background-color: var(--sw-list-selected);
+    padding: 1px 6px;
+    border-radius: 3px;
+    font-size: $font-size-smaller;
+  }
+</style>
--- a/src/views/dashboard/related/pprof/components/data.ts
+++ b/src/views/dashboard/related/pprof/components/data.ts
@@ -0,0 +1,39 @@
+/**
+ * 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 DurationOptions = [
+  { value: "1", label: "1 min" },
+  { value: "5", label: "5 min" },
+  { value: "10", label: "10 min" },
+  { value: "15", label: "15 min" },
+  { value: "30", label: "30 min" },
+  { value: "custom", label: "Custom" },
+];
+
+export const PprofEvents = [
+  { label: "CPU", value: "CPU" },
+  { label: "HEAP", value: "HEAP" },
+  { label: "BLOCK", value: "BLOCK" },
+  { label: "MUTEX", value: "MUTEX" },
+  { label: "GOROUTINE", value: "GOROUTINE" },
+  { label: "THREADCREATE", value: "THREADCREATE" },
+  { label: "ALLOCS", value: "ALLOCS" },
+];
+
+export const DurationRequiredEvents = ["CPU", "BLOCK", "MUTEX"];
+
+export const DumpPeriodRequiredEvents = ["BLOCK", "MUTEX"];
--- a/src/views/dashboard/related/topology/pod/InstanceMap.vue
+++ b/src/views/dashboard/related/topology/pod/InstanceMap.vue
@@ -122,27 +122,33 @@ limitations under the License. -->
      ).dashboard || {};
    const exprssions = dashboard.expressions || [];
    const nodeMetricConfig = dashboard.expressionsConfig || [];
-    const html = exprssions.map((m: string, index: number) => {
+    const metrics = exprssions.map((m: string, index: number) => {
      const metric =
        topologyStore.hierarchyInstanceNodeMetrics[data.layer || ""][m].values.find(
          (val: { id: string; value: unknown }) => val.id === data.id,
        ) || null;
      const opt: MetricConfigOpt = nodeMetricConfig[index] || {};

-      return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${metric?.value || NaN} ${
-        opt.unit || ""
-      }</div>`;
+      return {
+        label: opt.label || m,
+        value: `${metric?.value || NaN} ${opt.unit || ""}`,
+      };
    });
-    const tipHtml = [
-      `<div class="mb-5"><span class="grey">name: </span>${data.name}</div><div class="mb-5"><span class="grey">layer: </span>${data.layer}</div>`,
-      ...html,
-    ].join(" ");

    popover.value
      .style("top", event.offsetY + 10 + "px")
      .style("left", event.offsetX + 10 + "px")
      .style("visibility", "visible")
-      .html(tipHtml);
+      .html("");
+
+    const rows = [{ label: "name", value: data.name }, { label: "layer", value: data.layer }, ...metrics];
+
+    const row = popover.value.selectAll("div").data(rows).enter().append("div").attr("class", "mb-5");
+    row
+      .append("span")
+      .attr("class", "grey")
+      .text((d: { label: string }) => `${d.label}: `);
+    row.append("span").text((d: { value: unknown }) => `${d.value ?? ""}`);
  }

  function hideTip() {
--- a/src/views/dashboard/related/topology/service/HierarchyMap.vue
+++ b/src/views/dashboard/related/topology/service/HierarchyMap.vue
@@ -130,26 +130,32 @@ limitations under the License. -->
      ).dashboard || {};
    const exprssions = dashboard.expressions || [];
    const nodeMetricConfig = dashboard.expressionsConfig || [];
-    const html = exprssions.map((m: string, index: number) => {
+    const metrics = exprssions.map((m: string, index: number) => {
      const metric =
        topologyStore.hierarchyNodeMetrics[data.layer || ""][m].values.find(
          (val: { id: string; value: unknown }) => val.id === data.id,
        ) || null;
      const opt: MetricConfigOpt = nodeMetricConfig[index] || {};
-      return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${metric?.value || NaN} ${
-        opt.unit || ""
-      }</div>`;
-    });
-    const tipHtml = [
-      `<div class="mb-5"><span class="grey">name: </span>${data.name}</div><div class="mb-5"><span class="grey">layer: </span>${data.layer}</div>`,
-      ...html,
-    ].join(" ");

+      return {
+        label: opt.label || m,
+        value: `${metric?.value || NaN} ${opt.unit || ""}`,
+      };
+    });
    popover.value
      .style("top", event.offsetY + 10 + "px")
      .style("left", event.offsetX + 10 + "px")
      .style("visibility", "visible")
-      .html(tipHtml);
+      .html("");
+
+    const rows = [{ label: "name", value: data.name }, { label: "layer", value: data.layer }, ...metrics];
+
+    const row = popover.value.selectAll("div").data(rows).enter().append("div").attr("class", "mb-5");
+    row
+      .append("span")
+      .attr("class", "grey")
+      .text((d: { label: string }) => `${d.label}: `);
+    row.append("span").text((d: { value: unknown }) => `${d.value ?? ""}`);
  }

  function hideTip() {
--- a/src/views/dashboard/related/topology/service/ServiceMap.vue
+++ b/src/views/dashboard/related/topology/service/ServiceMap.vue
@@ -304,70 +304,103 @@ limitations under the License. -->
    }
    return Number(d[legendMQE.expression]) && d.isReal ? icons.CUBEERROR : icons.CUBE;
  }
+
+  type TooltipRow = {
+    label: string;
+    value: unknown;
+  };
+
+  function isTooltipRow(row: TooltipRow | null): row is TooltipRow {
+    return Boolean(row);
+  }
+
+  function renderTooltipRows(rows: TooltipRow[]) {
+    tooltip.value.html("");
+    const row = tooltip.value.selectAll("div").data(rows).enter().append("div").attr("class", "mb-5");
+
+    row
+      .append("span")
+      .attr("class", "grey")
+      .text((d: TooltipRow) => `${d.label}: `);
+    row.append("span").text((d: TooltipRow) => `${d.value ?? ""}`);
+  }
+
  function showNodeTip(event: MouseEvent, data: Node) {
    const nodeMetrics: string[] = settings.value.nodeExpressions || [];
    const nodeMetricConfig = settings.value.nodeMetricConfig || [];
-    const html = nodeMetrics.map((m, index) => {
+    const metrics = nodeMetrics.map((m, index) => {
      const metric =
        topologyStore.nodeMetricValue[m]?.values?.find((val: { id: string; value: unknown }) => val.id === data.id) ||
        null;
      const opt: MetricConfigOpt = nodeMetricConfig[index] || {};
-      return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${metric?.value || NaN} ${
-        opt.unit || "unknown"
-      }</div>`;
+
+      return {
+        label: opt.label || m,
+        value: `${metric?.value || NaN} ${opt.unit || "unknown"}`,
+      };
    });
-    let tipHtml = `<div class="mb-5"><span class="grey">name: </span>${
-      data.name
-    }</div><div class="mb-5"><span class="grey">type: </span>${data.type || "UNKNOWN"}</div>`;
-    if (data.isReal) {
-      tipHtml = [tipHtml, ...html].join(" ");
-    }
+    const rows = [
+      { label: "name", value: data.name },
+      { label: "type", value: data.type || "UNKNOWN" },
+    ];
+    const tipRows = data.isReal ? [...rows, ...metrics] : rows;
+
    tooltip.value
      .style("top", event.offsetY + 10 + "px")
      .style("left", event.offsetX + 10 + "px")
-      .style("visibility", "visible")
-      .html(tipHtml);
+      .style("visibility", "visible");
+    renderTooltipRows(tipRows);
  }
  function showLinkTip(event: MouseEvent, data: Call) {
    const linkClientMetrics: string[] = settings.value.linkClientExpressions || [];
    const linkServerMetricConfig: MetricConfigOpt[] = settings.value.linkServerMetricConfig || [];
    const linkClientMetricConfig: MetricConfigOpt[] = settings.value.linkClientMetricConfig || [];
    const linkServerMetrics: string[] = settings.value.linkServerExpressions || [];
-    const htmlServer = linkServerMetrics.map((m, index) => {
-      const metric = topologyStore.linkServerMetrics[m]?.values?.find(
-        (val: { id: string; value: unknown }) => val.id === data.id,
-      );
-      if (metric) {
-        const opt: MetricConfigOpt = linkServerMetricConfig[index] || {};
-        return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${metric.value || NaN} ${
-          opt.unit || ""
-        }</div>`;
-      }
-    });
-    const htmlClient = linkClientMetrics.map((m: string, index: number) => {
-      const opt: MetricConfigOpt = linkClientMetricConfig[index] || {};
-      const metric = topologyStore.linkClientMetrics[m]?.values?.find(
-        (val: { id: string; value: unknown }) => val.id === data.id,
-      );
-      if (metric) {
-        return ` <div class="mb-5"><span class="grey">${opt.label || m}: </span>${metric.value || NaN} ${
-          opt.unit || ""
-        }</div>`;
-      }
-    });
-    const html = [
-      ...htmlServer,
-      ...htmlClient,
-      `<div><span class="grey">${t("detectPoint")}:</span>${data.detectPoints.join(" | ")}</div>`,
-    ].join(" ");
+    const serverRows = linkServerMetrics
+      .map((m, index): TooltipRow | null => {
+        const metric = topologyStore.linkServerMetrics[m]?.values?.find(
+          (val: { id: string; value: unknown }) => val.id === data.id,
+        );
+        if (metric) {
+          const opt: MetricConfigOpt = linkServerMetricConfig[index] || {};
+          return {
+            label: opt.label || m,
+            value: `${metric.value || NaN} ${opt.unit || ""}`,
+          };
+        }
+        return null;
+      })
+      .filter(isTooltipRow);
+    const clientRows = linkClientMetrics
+      .map((m: string, index: number): TooltipRow | null => {
+        const opt: MetricConfigOpt = linkClientMetricConfig[index] || {};
+        const metric = topologyStore.linkClientMetrics[m]?.values?.find(
+          (val: { id: string; value: unknown }) => val.id === data.id,
+        );
+        if (metric) {
+          return {
+            label: opt.label || m,
+            value: `${metric.value || NaN} ${opt.unit || ""}`,
+          };
+        }
+        return null;
+      })
+      .filter(isTooltipRow);
+    const rows = [
+      ...serverRows,
+      ...clientRows,
+      {
+        label: t("detectPoint"),
+        value: data.detectPoints.join(" | "),
+      },
+    ];

    tooltip.value
      .style("top", event.offsetY + "px")
      .style("left", event.offsetX + "px")
-      .style("visibility", "visible")
-      .html(html);
+      .style("visibility", "visible");
+    renderTooltipRows(rows);
  }
-
  function hideTip() {
    tooltip.value.style("visibility", "hidden");
  }
--- a/src/views/dashboard/related/trace/components/TraceList/Filter.vue
+++ b/src/views/dashboard/related/trace/components/TraceList/Filter.vue
@@ -356,6 +356,7 @@ limitations under the License. -->
  }

  .label {
-    line-height: 24px;
+    line-height: var(--el-input-height, 24px);
+    flex-shrink: 0;
  }
 </style>
--- a/src/views/dashboard/related/trace/components/TraceList/SpanList.vue
+++ b/src/views/dashboard/related/trace/components/TraceList/SpanList.vue
@@ -67,6 +67,8 @@ limitations under the License. -->
        :traceId="traceStore.currentTrace?.traceIds?.[0]?.value"
        :showBtnDetail="false"
        :headerType="WidgetType.Trace"
+        :minTimestamp="NaN"
+        :maxTimestamp="NaN"
      />
    </div>
  </div>
Author	SHA1	Message	Date
dependabot[bot]	0dfb65bad3	build(deps-dev): bump axios from 1.15.0 to 1.16.0 (#551 )	2026-05-08 10:18:47 +08:00
Fine0830	99b5083ea5	fix: add templates to optimize log content and update topology tooltips (#550 )	2026-04-29 20:58:36 +08:00
Fine0830	2c1e8511e7	feat: support trace v1 in trace single page (#549 )	2026-04-27 19:04:47 +08:00
吴晟 Wu Sheng	d39db06b34	Add WeChat and Alipay Mini Program i18n menu entries (#548 )	2026-04-21 15:41:06 +08:00
Fine0830	f6c6612af8	fix: add `flex-shrink` style for labels (#547 )	2026-04-18 14:09:25 +08:00
Fine0830	a6be0e0e0d	fix: correct metric labels in dashboards (#546 )	2026-04-17 22:48:24 +08:00
吴晟 Wu Sheng	d2879e3f37	Add mobile menu icon and i18n labels (#545 )	2026-04-17 10:14:36 +08:00
dependabot[bot]	85c76575b2	build(deps-dev): bump follow-redirects from 1.15.11 to 1.16.0 (#544 )	2026-04-16 10:36:59 +08:00
Jingyi Qu	54ba66db92	Add the front end for pprof profiling (#541 )	2026-04-13 10:38:26 +08:00
dependabot[bot]	ed4841450c	build(deps): bump lodash from 4.17.23 to 4.18.1 (#540 )	2026-04-12 20:58:02 +08:00
dependabot[bot]	010844c374	build(deps-dev): bump axios from 1.13.4 to 1.15.0 (#543 )	2026-04-12 20:54:01 +08:00
dependabot[bot]	ffca69ec66	build(deps-dev): bump vite from 6.4.1 to 6.4.2 (#542 )	2026-04-07 13:09:08 +08:00
dependabot[bot]	f6a6afd2e0	build(deps): bump lodash-es from 4.17.23 to 4.18.1 (#539 )	2026-04-02 21:25:23 +08:00