diff --git a/package-lock.json b/package-lock.json
index 9993f986..a53afd05 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,7 +16,6 @@
         "element-plus": "^2.0.2",
         "lodash": "^4.17.21",
         "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",
@@ -1812,18 +1811,6 @@
         "ms": "^2.1.1"
       }
     },
-    "node_modules/@egjs/hammerjs": {
-      "version": "2.0.17",
-      "resolved": "https://registry.npmjs.org/@egjs/hammerjs/-/hammerjs-2.0.17.tgz",
-      "integrity": "sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A==",
-      "peer": true,
-      "dependencies": {
-        "@types/hammerjs": "^2.0.36"
-      },
-      "engines": {
-        "node": ">=0.8.0"
-      }
-    },
     "node_modules/@element-plus/icons-vue": {
       "version": "0.2.7",
       "resolved": "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-0.2.7.tgz",
@@ -3313,12 +3300,6 @@
         "@types/node": "*"
       }
     },
-    "node_modules/@types/hammerjs": {
-      "version": "2.0.41",
-      "resolved": "https://registry.npmjs.org/@types/hammerjs/-/hammerjs-2.0.41.tgz",
-      "integrity": "sha512-ewXv/ceBaJprikMcxCmWU1FKyMAQ2X7a9Gtmzw8fcg2kIePI1crERDM818W+XYrxqdBBOdlf2rm137bU+BltCA==",
-      "peer": true
-    },
     "node_modules/@types/http-proxy": {
       "version": "1.17.8",
       "resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.8.tgz",
@@ -7901,7 +7882,8 @@
     "node_modules/component-emitter": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz",
-      "integrity": "sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg=="
+      "integrity": "sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==",
+      "dev": true
     },
     "node_modules/compressible": {
       "version": "2.0.18",
@@ -8713,12 +8695,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/cssfilter": {
-      "version": "0.0.10",
-      "resolved": "https://registry.npmjs.org/cssfilter/-/cssfilter-0.0.10.tgz",
-      "integrity": "sha1-xtJnJjKi5cg+AT5oZKQs6N79IK4=",
-      "peer": true
-    },
     "node_modules/cssnano": {
       "version": "4.1.11",
       "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-4.1.11.tgz",
@@ -16462,12 +16438,6 @@
         "node": ">=0.6.0"
       }
     },
-    "node_modules/keycharm": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/keycharm/-/keycharm-0.4.0.tgz",
-      "integrity": "sha512-TyQTtsabOVv3MeOpR92sIKk/br9wxS+zGj4BG7CR8YbK4jM3tyIBaF0zhzeBUMx36/Q/iQLOKKOT+3jOQtemRQ==",
-      "peer": true
-    },
     "node_modules/killable": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",
@@ -18259,6 +18229,7 @@
       "version": "2.24.0",
       "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz",
       "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==",
+      "dev": true,
       "engines": {
         "node": "*"
       }
@@ -21727,15 +21698,6 @@
         "node": ">= 6"
       }
     },
-    "node_modules/propagating-hammerjs": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/propagating-hammerjs/-/propagating-hammerjs-2.0.1.tgz",
-      "integrity": "sha512-PH3zG5whbSxMocphXJzVtvKr+vWAgfkqVvtuwjSJ/apmEACUoiw6auBAT5HYXpZOR0eGcTAfYG5Yl8h91O5Elg==",
-      "peer": true,
-      "peerDependencies": {
-        "@egjs/hammerjs": "^2.0.17"
-      }
-    },
     "node_modules/proto-list": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz",
@@ -26875,6 +26837,7 @@
       "version": "8.3.2",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
       "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "dev": true,
       "bin": {
         "uuid": "dist/bin/uuid"
       }
@@ -26934,59 +26897,6 @@
       "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
       "dev": true
     },
-    "node_modules/vis-data": {
-      "version": "7.1.4",
-      "resolved": "https://registry.npmjs.org/vis-data/-/vis-data-7.1.4.tgz",
-      "integrity": "sha512-usy+ePX1XnArNvJ5BavQod7YRuGQE1pjFl+pu7IS6rCom2EBoG0o1ZzCqf3l5US6MW51kYkLR+efxRbnjxNl7w==",
-      "hasInstallScript": true,
-      "peer": true,
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/visjs"
-      },
-      "peerDependencies": {
-        "uuid": "^7.0.0 || ^8.0.0",
-        "vis-util": "^4.0.0 || ^5.0.0"
-      }
-    },
-    "node_modules/vis-timeline": {
-      "version": "7.5.1",
-      "resolved": "https://registry.npmjs.org/vis-timeline/-/vis-timeline-7.5.1.tgz",
-      "integrity": "sha512-XZMHHbA8xm9/Y/iu3mE9MT7J5tfWgbdsW+PmqrgINU2QRX24AiqifNHZHV4YYzeJstiTSOg9Gs5qRkxQ0BvZJw==",
-      "hasInstallScript": true,
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/visjs"
-      },
-      "peerDependencies": {
-        "@egjs/hammerjs": "^2.0.0",
-        "component-emitter": "^1.3.0",
-        "keycharm": "^0.3.0 || ^0.4.0",
-        "moment": "^2.24.0",
-        "propagating-hammerjs": "^1.4.0 || ^2.0.0",
-        "uuid": "^3.4.0 || ^7.0.0 || ^8.0.0",
-        "vis-data": "^6.3.0 || ^7.0.0",
-        "vis-util": "^3.0.0 || ^4.0.0 || ^5.0.0",
-        "xss": "^1.0.0"
-      }
-    },
-    "node_modules/vis-util": {
-      "version": "5.0.3",
-      "resolved": "https://registry.npmjs.org/vis-util/-/vis-util-5.0.3.tgz",
-      "integrity": "sha512-Wf9STUcFrDzK4/Zr7B6epW2Kvm3ORNWF+WiwEz2dpf5RdWkLUXFSbLcuB88n1W6tCdFwVN+v3V4/Xmn9PeL39g==",
-      "peer": true,
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/visjs"
-      },
-      "peerDependencies": {
-        "@egjs/hammerjs": "^2.0.0",
-        "component-emitter": "^1.3.0"
-      }
-    },
     "node_modules/vm-browserify": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",
@@ -28835,28 +28745,6 @@
       "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
       "dev": true
     },
-    "node_modules/xss": {
-      "version": "1.0.11",
-      "resolved": "https://registry.npmjs.org/xss/-/xss-1.0.11.tgz",
-      "integrity": "sha512-EimjrjThZeK2MO7WKR9mN5ZC1CSqivSl55wvUK5EtU6acf0rzEE1pN+9ZDrFXJ82BRp3JL38pPE6S4o/rpp1zQ==",
-      "peer": true,
-      "dependencies": {
-        "commander": "^2.20.3",
-        "cssfilter": "0.0.10"
-      },
-      "bin": {
-        "xss": "bin/xss"
-      },
-      "engines": {
-        "node": ">= 0.10.0"
-      }
-    },
-    "node_modules/xss/node_modules/commander": {
-      "version": "2.20.3",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
-      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
-      "peer": true
-    },
     "node_modules/xtend": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
@@ -30311,15 +30199,6 @@
         }
       }
     },
-    "@egjs/hammerjs": {
-      "version": "2.0.17",
-      "resolved": "https://registry.npmjs.org/@egjs/hammerjs/-/hammerjs-2.0.17.tgz",
-      "integrity": "sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A==",
-      "peer": true,
-      "requires": {
-        "@types/hammerjs": "^2.0.36"
-      }
-    },
     "@element-plus/icons-vue": {
       "version": "0.2.7",
       "resolved": "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-0.2.7.tgz",
@@ -31583,12 +31462,6 @@
         "@types/node": "*"
       }
     },
-    "@types/hammerjs": {
-      "version": "2.0.41",
-      "resolved": "https://registry.npmjs.org/@types/hammerjs/-/hammerjs-2.0.41.tgz",
-      "integrity": "sha512-ewXv/ceBaJprikMcxCmWU1FKyMAQ2X7a9Gtmzw8fcg2kIePI1crERDM818W+XYrxqdBBOdlf2rm137bU+BltCA==",
-      "peer": true
-    },
     "@types/http-proxy": {
       "version": "1.17.8",
       "resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.8.tgz",
@@ -35280,7 +35153,8 @@
     "component-emitter": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz",
-      "integrity": "sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg=="
+      "integrity": "sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==",
+      "dev": true
     },
     "compressible": {
       "version": "2.0.18",
@@ -35921,12 +35795,6 @@
       "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
       "dev": true
     },
-    "cssfilter": {
-      "version": "0.0.10",
-      "resolved": "https://registry.npmjs.org/cssfilter/-/cssfilter-0.0.10.tgz",
-      "integrity": "sha1-xtJnJjKi5cg+AT5oZKQs6N79IK4=",
-      "peer": true
-    },
     "cssnano": {
       "version": "4.1.11",
       "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-4.1.11.tgz",
@@ -42014,12 +41882,6 @@
         "verror": "1.10.0"
       }
     },
-    "keycharm": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/keycharm/-/keycharm-0.4.0.tgz",
-      "integrity": "sha512-TyQTtsabOVv3MeOpR92sIKk/br9wxS+zGj4BG7CR8YbK4jM3tyIBaF0zhzeBUMx36/Q/iQLOKKOT+3jOQtemRQ==",
-      "peer": true
-    },
     "killable": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",
@@ -43406,7 +43268,8 @@
     "moment": {
       "version": "2.24.0",
       "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz",
-      "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg=="
+      "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==",
+      "dev": true
     },
     "move-concurrently": {
       "version": "1.0.1",
@@ -46071,13 +45934,6 @@
         "sisteransi": "^1.0.5"
       }
     },
-    "propagating-hammerjs": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/propagating-hammerjs/-/propagating-hammerjs-2.0.1.tgz",
-      "integrity": "sha512-PH3zG5whbSxMocphXJzVtvKr+vWAgfkqVvtuwjSJ/apmEACUoiw6auBAT5HYXpZOR0eGcTAfYG5Yl8h91O5Elg==",
-      "peer": true,
-      "requires": {}
-    },
     "proto-list": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz",
@@ -50179,7 +50035,8 @@
     "uuid": {
       "version": "8.3.2",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
-      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "dev": true
     },
     "v8-compile-cache": {
       "version": "2.3.0",
@@ -50228,26 +50085,6 @@
         }
       }
     },
-    "vis-data": {
-      "version": "7.1.4",
-      "resolved": "https://registry.npmjs.org/vis-data/-/vis-data-7.1.4.tgz",
-      "integrity": "sha512-usy+ePX1XnArNvJ5BavQod7YRuGQE1pjFl+pu7IS6rCom2EBoG0o1ZzCqf3l5US6MW51kYkLR+efxRbnjxNl7w==",
-      "peer": true,
-      "requires": {}
-    },
-    "vis-timeline": {
-      "version": "7.5.1",
-      "resolved": "https://registry.npmjs.org/vis-timeline/-/vis-timeline-7.5.1.tgz",
-      "integrity": "sha512-XZMHHbA8xm9/Y/iu3mE9MT7J5tfWgbdsW+PmqrgINU2QRX24AiqifNHZHV4YYzeJstiTSOg9Gs5qRkxQ0BvZJw==",
-      "requires": {}
-    },
-    "vis-util": {
-      "version": "5.0.3",
-      "resolved": "https://registry.npmjs.org/vis-util/-/vis-util-5.0.3.tgz",
-      "integrity": "sha512-Wf9STUcFrDzK4/Zr7B6epW2Kvm3ORNWF+WiwEz2dpf5RdWkLUXFSbLcuB88n1W6tCdFwVN+v3V4/Xmn9PeL39g==",
-      "peer": true,
-      "requires": {}
-    },
     "vm-browserify": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",
@@ -51759,24 +51596,6 @@
       "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
       "dev": true
     },
-    "xss": {
-      "version": "1.0.11",
-      "resolved": "https://registry.npmjs.org/xss/-/xss-1.0.11.tgz",
-      "integrity": "sha512-EimjrjThZeK2MO7WKR9mN5ZC1CSqivSl55wvUK5EtU6acf0rzEE1pN+9ZDrFXJ82BRp3JL38pPE6S4o/rpp1zQ==",
-      "peer": true,
-      "requires": {
-        "commander": "^2.20.3",
-        "cssfilter": "0.0.10"
-      },
-      "dependencies": {
-        "commander": {
-          "version": "2.20.3",
-          "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
-          "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
-          "peer": true
-        }
-      }
-    },
     "xtend": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
diff --git a/package.json b/package.json
index 66a6188d..ece16b3a 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,6 @@
     "element-plus": "^2.0.2",
     "lodash": "^4.17.21",
     "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",
diff --git a/src/graphql/fragments/log.ts b/src/graphql/fragments/log.ts
index 78738d8e..18e814ec 100644
--- a/src/graphql/fragments/log.ts
+++ b/src/graphql/fragments/log.ts
@@ -54,7 +54,6 @@ export const QueryServiceLogs = {
             value
           }
         }
-        total
     }`,
 };
 
diff --git a/src/graphql/fragments/trace.ts b/src/graphql/fragments/trace.ts
index 04f718e0..e1e0af9b 100644
--- a/src/graphql/fragments/trace.ts
+++ b/src/graphql/fragments/trace.ts
@@ -27,7 +27,6 @@ export const Traces = {
       isError
       traceIds
     }
-    total
   }`,
 };
 
diff --git a/src/store/modules/log.ts b/src/store/modules/log.ts
index a92981cc..ce1674d1 100644
--- a/src/store/modules/log.ts
+++ b/src/store/modules/log.ts
@@ -31,7 +31,6 @@ interface LogState {
   selectorStore: any;
   supportQueryLogsByKeywords: boolean;
   logs: any[];
-  logsTotal: number;
   loadLogs: boolean;
 }
 
@@ -43,12 +42,11 @@ 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,
     selectorStore: useSelectorStore(),
     logs: [],
-    logsTotal: 0,
     loadLogs: false,
   }),
   actions: {
@@ -131,7 +129,6 @@ export const logStore = defineStore({
       }
 
       this.logs = res.data.data.queryLogs.logs;
-      this.logsTotal = res.data.data.queryLogs.total;
       return res.data;
     },
     async getBrowserLogs() {
@@ -145,7 +142,6 @@ 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() {
diff --git a/src/store/modules/trace.ts b/src/store/modules/trace.ts
index 25eacc6d..4e337351 100644
--- a/src/store/modules/trace.ts
+++ b/src/store/modules/trace.ts
@@ -28,12 +28,10 @@ interface TraceState {
   instances: Instance[];
   endpoints: Endpoint[];
   traceList: Trace[];
-  traceTotal: number;
   traceSpans: Span[];
   currentTrace: Trace | any;
   conditions: any;
   traceSpanLogs: any[];
-  traceSpanLogsTotal: number;
   selectorStore: any;
 }
 
@@ -45,16 +43,14 @@ 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 },
+      paging: { pageNum: 1, pageSize: 20 },
     },
     traceSpanLogs: [],
-    traceSpanLogsTotal: 0,
     selectorStore: useSelectorStore(),
   }),
   actions: {
@@ -115,7 +111,6 @@ export const traceStore = defineStore({
         return res.data;
       }
       if (!res.data.data.data.traces.length) {
-        this.traceTotal = 0;
         this.traceList = [];
         this.setCurrentTrace({});
         this.setTraceSpans([]);
@@ -128,7 +123,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;
     },
@@ -148,11 +142,9 @@ 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() {
diff --git a/src/types/ebpf.d.ts b/src/types/ebpf.d.ts
index b40597ef..4598528e 100644
--- a/src/types/ebpf.d.ts
+++ b/src/types/ebpf.d.ts
@@ -52,7 +52,7 @@ export type Process = {
   instanceName: string;
   agentId: string;
   detectType: string;
-  attributes: { name: string; value: string };
+  attributes: { name: string; value: string }[];
   labels: string[];
 };
 export type StackElement = {
diff --git a/src/views/dashboard/related/components/LogTable/Index.vue b/src/views/dashboard/related/components/LogTable/Index.vue
index b507b0be..4d4f75e7 100644
--- a/src/views/dashboard/related/components/LogTable/Index.vue
+++ b/src/views/dashboard/related/components/LogTable/Index.vue
@@ -94,6 +94,8 @@ function setCurrentLog(log: any) {
   font-size: 12px;
   height: 100%;
   border-bottom: 1px solid #eee;
+  width: 100%;
+  overflow: auto;
 }
 
 .log-header {
diff --git a/src/views/dashboard/related/ebpf/Content.vue b/src/views/dashboard/related/ebpf/Content.vue
index e4b0653b..91abfd26 100644
--- a/src/views/dashboard/related/ebpf/Content.vue
+++ b/src/views/dashboard/related/ebpf/Content.vue
@@ -16,7 +16,7 @@ limitations under the License. -->
   <div class="flex-h content">
     <TaskList />
     <div class="vis-graph ml-5">
-      <div class="item">
+      <div class="schedules">
         <EBPFSchedules />
       </div>
       <div class="item">
@@ -39,12 +39,18 @@ import EBPFStack from "./components/EBPFStack.vue";
 .vis-graph {
   height: 100%;
   width: calc(100% - 300px);
+  min-width: 700px;
+  overflow: auto;
 }
 
 .item {
   width: 100%;
   overflow: auto;
-  height: calc(50% - 10px);
+  height: calc(100% - 70px);
   padding-bottom: 10px;
 }
+
+.schedules {
+  height: 60px;
+}
 </style>
diff --git a/src/views/dashboard/related/ebpf/components/EBPFSchedules.vue b/src/views/dashboard/related/ebpf/components/EBPFSchedules.vue
index a584e40f..3caaff0b 100644
--- a/src/views/dashboard/related/ebpf/components/EBPFSchedules.vue
+++ b/src/views/dashboard/related/ebpf/components/EBPFSchedules.vue
@@ -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. -->
 <template>
-  <div class="filters">
+  <div class="filters flex-h">
     <Selector
       :value="selectedLabels"
       :options="labels"
@@ -23,6 +23,11 @@ limitations under the License. -->
       class="inputs mr-10"
       :multiple="true"
     />
+    <el-button type="primary" size="small">
+      <span>{{ duration[0] }}</span>
+      <span> ~ </span>
+      <span>{{ duration[1] }}</span>
+    </el-button>
     <el-popover placement="bottom" :width="680" trigger="click">
       <template #reference>
         <el-button type="primary" size="small">
@@ -34,7 +39,7 @@ limitations under the License. -->
         placeholder="Please input name"
         class="input-with-search"
         size="small"
-        @change="searchProcesses"
+        @change="searchProcesses(0)"
       >
         <template #append>
           <el-button size="small">
@@ -77,7 +82,6 @@ limitations under the License. -->
       {{ t("analyze") }}
     </el-button>
   </div>
-  <div ref="timeline" class="schedules"></div>
 </template>
 <script lang="ts" setup>
 import { ref, watch } from "vue";
@@ -87,25 +91,21 @@ import { Option } from "@/types/app";
 import { TableHeader } from "./data";
 import { useEbpfStore } from "@/store/modules/ebpf";
 import { EBPFProfilingSchedule, Process } from "@/types/ebpf";
-import { DataSet, Timeline } from "vis-timeline/standalone";
-import "vis-timeline/styles/vis-timeline-graph2d.css";
 import { ElMessage, ElTable } from "element-plus";
 
 const { t } = useI18n();
 const ebpfStore = useEbpfStore();
 const pageSize = 5;
-/*global Nullable */
 const multipleTableRef = ref<InstanceType<typeof ElTable>>();
 const selectedProcesses = ref<string[]>([]);
-const timeline = ref<Nullable<HTMLDivElement>>(null);
-const visGraph = ref<Nullable<any>>(null);
 const labels = ref<Option[]>([{ label: "All", value: "0" }]);
 const processes = ref<Process[]>([]);
 const currentProcesses = ref<Process[]>([]);
 const selectedLabels = ref<string[]>(["0"]);
 const searchText = ref<string>("");
+const duration = ref<string[]>([]);
 const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
-  new Date(dayjs(date).format(pattern));
+  dayjs(date).format(pattern);
 
 function changeLabels(opt: any[]) {
   const arr = opt.map((d) => d.value);
@@ -160,56 +160,59 @@ async function analyzeEBPF() {
 }
 
 function visTimeline() {
-  if (visGraph.value) {
-    visGraph.value.destroy();
-  }
   labels.value = [{ label: "All", value: "0" }];
   selectedLabels.value = ["0"];
   processes.value = [];
-  const schedules = ebpfStore.eBPFSchedules.map(
-    (d: EBPFProfilingSchedule, index: number) => {
-      for (const l of d.process.labels) {
-        labels.value.push({ label: l, value: l });
-      }
-      processes.value.push(d.process);
-      return {
-        id: index + 1,
-        content: d.process.name,
-        start: dateFormat(d.startTime),
-        end: dateFormat(d.endTime),
-      };
+  const ranges = ebpfStore.eBPFSchedules.map((d: EBPFProfilingSchedule) => {
+    for (const l of d.process.labels) {
+      labels.value.push({ label: l, value: l });
     }
-  );
-  searchProcesses();
-  if (!timeline.value) {
-    return;
-  }
-  const h = timeline.value.getBoundingClientRect().height;
-  const items: any = new DataSet(schedules);
-  const options = {
-    height: h,
-    width: "100%",
-    locale: "en",
-  };
-  visGraph.value = new Timeline(timeline.value, items, options);
+    processes.value.push(d.process);
+    return [d.startTime / 10000, d.endTime / 10000];
+  });
+  const arr = ranges.flat(1);
+  const min = Math.min(...arr);
+  const max = Math.max(...arr);
+  duration.value = [dateFormat(min * 10000), dateFormat(max * 10000)];
+  searchProcesses(0);
 }
 
 function changePage(pageIndex: number) {
   searchProcesses(pageIndex);
 }
 
-function searchProcesses(pageIndex?: any) {
+function searchProcesses(pageIndex: number) {
   const arr = processes.value.filter(
-    (d: { name: string; instanceName: string }) =>
+    (d: {
+      name: string;
+      instanceName: string;
+      attributes: { name: string; value: string }[];
+    }) =>
       d.name.includes(searchText.value) ||
-      d.instanceName.includes(searchText.value)
+      d.instanceName.includes(searchText.value) ||
+      searchAttribute(d.attributes, searchText.value)
   );
-  currentProcesses.value = arr.splice(
-    (pageIndex - 1 || 0) * pageSize,
-    pageSize * (pageIndex || 1)
+  currentProcesses.value = arr.filter(
+    (d, index: number) =>
+      (pageIndex - 1 || 0) * pageSize <= index &&
+      pageSize * (pageIndex || 1) > index
   );
 }
 
+function searchAttribute(
+  attributes: { name: string; value: string }[],
+  text: string
+) {
+  const item = attributes.find(
+    (d: { name: string; value: string }) => d.name === "command_line"
+  );
+
+  if (!item) {
+    return false;
+  }
+  return item.value.includes(text);
+}
+
 watch(
   () => ebpfStore.eBPFSchedules,
   () => {
diff --git a/src/views/dashboard/related/ebpf/components/EBPFStack.vue b/src/views/dashboard/related/ebpf/components/EBPFStack.vue
index 9ff7832a..a363b19f 100644
--- a/src/views/dashboard/related/ebpf/components/EBPFStack.vue
+++ b/src/views/dashboard/related/ebpf/components/EBPFStack.vue
@@ -78,6 +78,7 @@ function drawGraph() {
     .sort(true)
     .title("")
     .selfValue(false)
+    .inverted(true)
     .setColorMapper((d, originalColor) =>
       d.highlight ? "#6aff8f" : originalColor
     );
@@ -86,8 +87,9 @@ function drawGraph() {
     .direction("w")
     .html(
       (d: { data: StackElement }) =>
-        `<div class="mb-5">Symbol: ${d.data.name}</div><div class="mb-5">Dump Count: ${d.data.dumpCount}</div>`
-    );
+        `<div class="mb-5 name">Symbol: ${d.data.name}</div><div class="mb-5">Dump Count: ${d.data.dumpCount}</div>`
+    )
+    .style("max-width", "500px");
   flameChart.value.tooltip(tip);
   d3.select("#graph-stack").datum(stackTree.value).call(flameChart.value);
 }
@@ -176,4 +178,8 @@ watch(
   color: red;
   margin-top: 20px;
 }
+
+.name {
+  word-wrap: break-word;
+}
 </style>
diff --git a/src/views/dashboard/related/ebpf/components/NewTask.vue b/src/views/dashboard/related/ebpf/components/NewTask.vue
index 5a0e63cc..f5d2597b 100644
--- a/src/views/dashboard/related/ebpf/components/NewTask.vue
+++ b/src/views/dashboard/related/ebpf/components/NewTask.vue
@@ -111,10 +111,6 @@ function changeType(opt: any[]) {
 }
 
 async function createTask() {
-  if (!labels.value.length) {
-    ElMessage.warning("no labels");
-    return;
-  }
   const date = monitorTime.value === "0" ? new Date() : time.value;
   const params = {
     serviceId: selectorStore.currentService.id,
diff --git a/src/views/dashboard/related/log/Header.vue b/src/views/dashboard/related/log/Header.vue
index b03c84e9..023d964e 100644
--- a/src/views/dashboard/related/log/Header.vue
+++ b/src/views/dashboard/related/log/Header.vue
@@ -229,7 +229,7 @@ function searchLogs() {
     keywordsOfContent: keywordsOfContent.value,
     excludingKeywordsOfContent: excludingKeywordsOfContent.value,
     tags: tagsMap.value.length ? tagsMap.value : undefined,
-    paging: { pageNum: 1, pageSize: 15, needTotal: true },
+    paging: { pageNum: 1, pageSize: 15 },
     relatedTrace: traceId.value ? { traceId: traceId.value } : undefined,
   });
   queryLogs();
diff --git a/src/views/dashboard/related/log/List.vue b/src/views/dashboard/related/log/List.vue
index acc3cfb5..583b30a1 100644
--- a/src/views/dashboard/related/log/List.vue
+++ b/src/views/dashboard/related/log/List.vue
@@ -26,8 +26,10 @@ limitations under the License. -->
       <el-pagination
         v-model:currentPage="logStore.conditions.paging.pageNum"
         v-model:page-size="pageSize"
-        layout="prev, pager, next, jumper"
-        :total="logStore.logsTotal"
+        :small="true"
+        layout="prev, pager, next"
+        :pager-count="5"
+        :total="total"
         @current-change="updatePage"
         :style="`float: right`"
       />
@@ -35,7 +37,7 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts" setup>
-import { ref } from "vue";
+import { ref, computed } from "vue";
 import { useI18n } from "vue-i18n";
 import LogTable from "@/views/dashboard/related/components/LogTable/Index.vue";
 import { useLogStore } from "@/store/modules/log";
@@ -49,9 +51,14 @@ const type = ref<string>(
   dashboardStore.layerId === "BROWSER" ? "browser" : "service"
 );
 const pageSize = ref<number>(15);
+const total = computed(() =>
+  logStore.logs.length === pageSize.value
+    ? pageSize.value * logStore.conditions.paging.pageNum + 1
+    : pageSize.value * logStore.conditions.paging.pageNum
+);
 function updatePage(p: number) {
   logStore.setLogCondition({
-    paging: { pageNum: p, pageSize: pageSize.value, needTotal: true },
+    paging: { pageNum: p, pageSize: pageSize.value },
   });
   queryLogs();
 }
diff --git a/src/views/dashboard/related/trace/Detail.vue b/src/views/dashboard/related/trace/Detail.vue
index d44b01a5..4b2cda82 100644
--- a/src/views/dashboard/related/trace/Detail.vue
+++ b/src/views/dashboard/related/trace/Detail.vue
@@ -44,7 +44,9 @@ limitations under the License. -->
               v-model:currentPage="pageNum"
               v-model:page-size="pageSize"
               :small="true"
-              :total="traceStore.traceSpanLogsTotal"
+              layout="prev, pager, next"
+              :pager-count="5"
+              :total="total"
               @current-change="turnLogsPage"
             />
             <LogTable
@@ -146,7 +148,7 @@ limitations under the License. -->
 </template>
 <script lang="ts">
 import dayjs from "dayjs";
-import { ref, defineComponent } from "vue";
+import { ref, defineComponent, computed } from "vue";
 import { useI18n } from "vue-i18n";
 import { useTraceStore } from "@/store/modules/trace";
 import { Option } from "@/types/app";
@@ -171,6 +173,11 @@ export default defineComponent({
     const displayMode = ref<string>("List");
     const pageNum = ref<number>(1);
     const pageSize = 10;
+    const total = computed(() =>
+      traceStore.traceList.length === pageSize
+        ? pageSize * pageNum.value + 1
+        : pageSize * pageNum.value
+    );
     const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
       dayjs(date).format(pattern);
     const showTraceLogs = ref<boolean>(false);
@@ -202,7 +209,7 @@ export default defineComponent({
           relatedTrace: {
             traceId: traceId.value || traceStore.currentTrace.traceIds[0].value,
           },
-          paging: { pageNum: pageNum.value, pageSize, needTotal: true },
+          paging: { pageNum: pageNum.value, pageSize },
         },
       });
       if (res.errors) {
@@ -227,6 +234,7 @@ export default defineComponent({
       pageSize,
       pageNum,
       loading,
+      total,
     };
   },
 });
diff --git a/src/views/dashboard/related/trace/Filter.vue b/src/views/dashboard/related/trace/Filter.vue
index 5128d807..b399fc51 100644
--- a/src/views/dashboard/related/trace/Filter.vue
+++ b/src/views/dashboard/related/trace/Filter.vue
@@ -72,9 +72,19 @@ limitations under the License. -->
     </div>
     <div class="mr-10">
       <span class="sm b grey mr-5">{{ t("duration") }}:</span>
-      <el-input size="small" class="inputs mr-5" v-model="minTraceDuration" />
+      <el-input
+        size="small"
+        class="inputs mr-5"
+        v-model="minTraceDuration"
+        type="number"
+      />
       <span class="grey mr-5">-</span>
-      <el-input size="small" class="inputs" v-model="maxTraceDuration" />
+      <el-input
+        size="small"
+        class="inputs"
+        v-model="maxTraceDuration"
+        type="number"
+      />
     </div>
   </div>
   <div class="flex-h">
@@ -100,8 +110,8 @@ const selectorStore = useSelectorStore();
 const dashboardStore = useDashboardStore();
 const traceStore = useTraceStore();
 const traceId = ref<string>("");
-const minTraceDuration = ref<string>("");
-const maxTraceDuration = ref<string>("");
+const minTraceDuration = ref<number>(NaN);
+const maxTraceDuration = ref<number>(NaN);
 const tagsList = ref<string[]>([]);
 const tagsMap = ref<Option[]>([]);
 const state = reactive<any>({
@@ -174,11 +184,11 @@ function searchTraces() {
     serviceInstanceId: instance || state.instance.id || undefined,
     traceState: state.status.value || "ALL",
     queryDuration: appStore.durationTime,
-    minTraceDuration: appStore.minTraceDuration || undefined,
-    maxTraceDuration: appStore.maxTraceDuration || undefined,
+    minTraceDuration: Number(minTraceDuration.value),
+    maxTraceDuration: Number(maxTraceDuration.value),
     queryOrder: "BY_DURATION",
     tags: tagsMap.value.length ? tagsMap.value : undefined,
-    paging: { pageNum: 1, pageSize: 15, needTotal: true },
+    paging: { pageNum: 1, pageSize: 20 },
   });
   queryTraces();
 }
diff --git a/src/views/dashboard/related/trace/TraceList.vue b/src/views/dashboard/related/trace/TraceList.vue
index 9240e5de..6e6dd7d5 100644
--- a/src/views/dashboard/related/trace/TraceList.vue
+++ b/src/views/dashboard/related/trace/TraceList.vue
@@ -17,9 +17,9 @@ limitations under the License. -->
         v-model:currentPage="traceStore.conditions.paging.pageNum"
         v-model:page-size="pageSize"
         :small="true"
-        layout="prev, pager, next, jumper"
-        :total="traceStore.traceTotal"
-        v-model:pager-count="pageCount"
+        layout="prev, pager, next"
+        :pager-count="5"
+        :total="total"
         @current-change="updatePage"
       />
       <div class="selectors">
@@ -71,7 +71,7 @@ limitations under the License. -->
 
 <script lang="ts" setup>
 import dayjs from "dayjs";
-import { ref } from "vue";
+import { ref, computed } from "vue";
 import { useI18n } from "vue-i18n";
 import { useTraceStore } from "@/store/modules/trace";
 import { ElMessage } from "element-plus";
@@ -83,8 +83,12 @@ const { t } = useI18n();
 const traceStore = useTraceStore();
 const loading = ref<boolean>(false);
 const selectedKey = ref<string>("");
-const pageSize = ref<number>(15);
-const pageCount = ref<number>(5);
+const pageSize = ref<number>(20);
+const total = computed(() =>
+  traceStore.traceList.length === pageSize.value
+    ? pageSize.value * traceStore.conditions.paging.pageNum + 1
+    : pageSize.value * traceStore.conditions.paging.pageNum
+);
 const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
   dayjs(date).format(pattern);
 
@@ -96,7 +100,7 @@ function searchTrace() {
 
 function updatePage(p: number) {
   traceStore.setTraceCondition({
-    paging: { pageNum: p, pageSize: pageSize.value, needTotal: true },
+    paging: { pageNum: p, pageSize: pageSize.value },
   });
   searchTrace();
 }
@@ -104,7 +108,7 @@ function updatePage(p: number) {
 function changeSort(opt: Option[] | any) {
   traceStore.setTraceCondition({
     queryOrder: opt[0].value,
-    paging: { pageNum: 1, pageSize: pageSize.value, needTotal: true },
+    paging: { pageNum: 1, pageSize: pageSize.value },
   });
   searchTrace();
 }
@@ -167,7 +171,7 @@ async function queryTraces() {
 }
 
 .list {
-  width: 400px;
+  width: 300px;
 }
 
 .trace-tr {
diff --git a/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue b/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue
index a34db4e9..89a1046d 100644
--- a/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue
+++ b/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue
@@ -91,7 +91,9 @@ limitations under the License. -->
       v-model:currentPage="pageNum"
       v-model:page-size="pageSize"
       :small="true"
-      :total="traceStore.traceSpanLogsTotal"
+      layout="prev, pager, next"
+      :pager-count="5"
+      :total="total"
       @current-change="turnPage"
     />
     <LogTable
@@ -106,7 +108,7 @@ limitations under the License. -->
   </el-dialog>
 </template>
 <script lang="ts" setup>
-import { ref } from "vue";
+import { ref, computed } from "vue";
 import { useI18n } from "vue-i18n";
 import type { PropType } from "vue";
 import dayjs from "dayjs";
@@ -124,6 +126,11 @@ const traceStore = useTraceStore();
 const pageNum = ref<number>(1);
 const showRelatedLogs = ref<boolean>(false);
 const pageSize = 10;
+const total = computed(() =>
+  traceStore.traceList.length === pageSize
+    ? pageSize * pageNum.value + 1
+    : pageSize * pageNum.value
+);
 const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
   dayjs(date).format(pattern);
 async function getTaceLogs() {
@@ -135,7 +142,7 @@ async function getTaceLogs() {
         segmentId: props.currentSpan.segmentId,
         spanId: props.currentSpan.spanId,
       },
-      paging: { pageNum: pageNum.value, pageSize, needTotal: true },
+      paging: { pageNum: pageNum.value, pageSize },
     },
   });
   if (res.errors) {