github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-05-15 09:48:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'main' of github.com:apache/skywalking-booster-ui into feat/log

Browse Source
This commit is contained in:
Qiuxia Fan 2022-05-19 15:49:29 +08:00
commit c8a6f2df9e
18 changed files with 140 additions and 287 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

201
package-lock.json generated
View File

@ -16,7 +16,6 @@
"element-plus": "^2.0.2", "element-plus": "^2.0.2",
"lodash": "^4.17.21", "lodash": "^4.17.21",
"pinia": "^2.0.5", "pinia": "^2.0.5",
"vis-timeline": "^7.5.1",
"vue": "^3.0.0", "vue": "^3.0.0",
"vue-grid-layout": "^3.0.0-beta1", "vue-grid-layout": "^3.0.0-beta1",
"vue-i18n": "^9.1.9", "vue-i18n": "^9.1.9",
@ -1812,18 +1811,6 @@
"ms": "^2.1.1" "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": { "node_modules/@element-plus/icons-vue": {
"version": "0.2.7", "version": "0.2.7",
"resolved": "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-0.2.7.tgz", "resolved": "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-0.2.7.tgz",
@ -3313,12 +3300,6 @@
"@types/node": "*" "@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": { "node_modules/@types/http-proxy": {
"version": "1.17.8", "version": "1.17.8",
"resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.8.tgz", "resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.8.tgz",
@ -7901,7 +7882,8 @@
"node_modules/component-emitter": { "node_modules/component-emitter": {
"version": "1.3.0", "version": "1.3.0",
"resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz", "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": { "node_modules/compressible": {
"version": "2.0.18", "version": "2.0.18",
@ -8713,12 +8695,6 @@
"node": ">=4" "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": { "node_modules/cssnano": {
"version": "4.1.11", "version": "4.1.11",
"resolved": "https://registry.npmjs.org/cssnano/-/cssnano-4.1.11.tgz", "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-4.1.11.tgz",
@ -16462,12 +16438,6 @@
"node": ">=0.6.0" "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": { "node_modules/killable": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz", "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",
@ -18259,6 +18229,7 @@
"version": "2.24.0", "version": "2.24.0",
"resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz", "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,
"engines": { "engines": {
"node": "*" "node": "*"
} }
@ -21727,15 +21698,6 @@
"node": ">= 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": { "node_modules/proto-list": {
"version": "1.2.4", "version": "1.2.4",
"resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz", "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz",
@ -26875,6 +26837,7 @@
"version": "8.3.2", "version": "8.3.2",
"resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", "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,
"bin": { "bin": {
"uuid": "dist/bin/uuid" "uuid": "dist/bin/uuid"
} }
@ -26934,59 +26897,6 @@
"integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=", "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
"dev": true "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": { "node_modules/vm-browserify": {
"version": "1.1.2", "version": "1.1.2",
"resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz", "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",
@ -28835,28 +28745,6 @@
"integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==", "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
"dev": true "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": { "node_modules/xtend": {
"version": "4.0.2", "version": "4.0.2",
"resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz", "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": { "@element-plus/icons-vue": {
"version": "0.2.7", "version": "0.2.7",
"resolved": "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-0.2.7.tgz", "resolved": "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-0.2.7.tgz",
@ -31583,12 +31462,6 @@
"@types/node": "*" "@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": { "@types/http-proxy": {
"version": "1.17.8", "version": "1.17.8",
"resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.8.tgz", "resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.8.tgz",
@ -35280,7 +35153,8 @@
"component-emitter": { "component-emitter": {
"version": "1.3.0", "version": "1.3.0",
"resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz", "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": { "compressible": {
"version": "2.0.18", "version": "2.0.18",
@ -35921,12 +35795,6 @@
"integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==", "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
"dev": true "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": { "cssnano": {
"version": "4.1.11", "version": "4.1.11",
"resolved": "https://registry.npmjs.org/cssnano/-/cssnano-4.1.11.tgz", "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-4.1.11.tgz",
@ -42014,12 +41882,6 @@
"verror": "1.10.0" "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": { "killable": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz", "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",
@ -43406,7 +43268,8 @@
"moment": { "moment": {
"version": "2.24.0", "version": "2.24.0",
"resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz", "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": { "move-concurrently": {
"version": "1.0.1", "version": "1.0.1",
@ -46071,13 +45934,6 @@
"sisteransi": "^1.0.5" "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": { "proto-list": {
"version": "1.2.4", "version": "1.2.4",
"resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz", "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz",
@ -50179,7 +50035,8 @@
"uuid": { "uuid": {
"version": "8.3.2", "version": "8.3.2",
"resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", "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": { "v8-compile-cache": {
"version": "2.3.0", "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": { "vm-browserify": {
"version": "1.1.2", "version": "1.1.2",
"resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz", "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",
@ -51759,24 +51596,6 @@
"integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==", "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
"dev": true "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": { "xtend": {
"version": "4.0.2", "version": "4.0.2",
"resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz", "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",

1
package.json
View File

@ -18,7 +18,6 @@
"element-plus": "^2.0.2", "element-plus": "^2.0.2",
"lodash": "^4.17.21", "lodash": "^4.17.21",
"pinia": "^2.0.5", "pinia": "^2.0.5",
"vis-timeline": "^7.5.1",
"vue": "^3.0.0", "vue": "^3.0.0",
"vue-grid-layout": "^3.0.0-beta1", "vue-grid-layout": "^3.0.0-beta1",
"vue-i18n": "^9.1.9", "vue-i18n": "^9.1.9",

1
src/graphql/fragments/log.ts
View File

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

1
src/graphql/fragments/trace.ts
View File

@ -27,7 +27,6 @@ export const Traces = {
isError isError
traceIds traceIds
} }
total
}`, }`,
}; };

6
src/store/modules/log.ts
View File

@ -31,7 +31,6 @@ interface LogState {
selectorStore: any; selectorStore: any;
supportQueryLogsByKeywords: boolean; supportQueryLogsByKeywords: boolean;
logs: any[]; logs: any[];
logsTotal: number;
loadLogs: boolean; loadLogs: boolean;
} }
@ -43,12 +42,11 @@ export const logStore = defineStore({
endpoints: [{ value: "0", label: "All" }], endpoints: [{ value: "0", label: "All" }],
conditions: { conditions: {
queryDuration: useAppStoreWithOut().durationTime, queryDuration: useAppStoreWithOut().durationTime,
paging: { pageNum: 1, pageSize: 15, needTotal: true }, paging: { pageNum: 1, pageSize: 15 },
}, },
supportQueryLogsByKeywords: true, supportQueryLogsByKeywords: true,
selectorStore: useSelectorStore(), selectorStore: useSelectorStore(),
logs: [], logs: [],
logsTotal: 0,
loadLogs: false, loadLogs: false,
}), }),
actions: { actions: {
@ -131,7 +129,6 @@ export const logStore = defineStore({
} }
this.logs = res.data.data.queryLogs.logs; this.logs = res.data.data.queryLogs.logs;
this.logsTotal = res.data.data.queryLogs.total;
return res.data; return res.data;
}, },
async getBrowserLogs() { async getBrowserLogs() {
@ -145,7 +142,6 @@ export const logStore = defineStore({
return res.data; return res.data;
} }
this.logs = res.data.data.queryBrowserErrorLogs.logs; this.logs = res.data.data.queryBrowserErrorLogs.logs;
this.logsTotal = res.data.data.queryBrowserErrorLogs.total;
return res.data; return res.data;
}, },
async getLogTagKeys() { async getLogTagKeys() {

10
src/store/modules/trace.ts
View File

@ -28,12 +28,10 @@ interface TraceState {
instances: Instance[]; instances: Instance[];
endpoints: Endpoint[]; endpoints: Endpoint[];
traceList: Trace[]; traceList: Trace[];
traceTotal: number;
traceSpans: Span[]; traceSpans: Span[];
currentTrace: Trace | any; currentTrace: Trace | any;
conditions: any; conditions: any;
traceSpanLogs: any[]; traceSpanLogs: any[];
traceSpanLogsTotal: number;
selectorStore: any; selectorStore: any;
} }
@ -45,16 +43,14 @@ export const traceStore = defineStore({
endpoints: [{ value: "0", label: "All" }], endpoints: [{ value: "0", label: "All" }],
traceList: [], traceList: [],
traceSpans: [], traceSpans: [],
traceTotal: 0,
currentTrace: {}, currentTrace: {},
conditions: { conditions: {
queryDuration: useAppStoreWithOut().durationTime, queryDuration: useAppStoreWithOut().durationTime,
traceState: "ALL", traceState: "ALL",
queryOrder: "BY_START_TIME", queryOrder: "BY_START_TIME",
paging: { pageNum: 1, pageSize: 15, needTotal: true }, paging: { pageNum: 1, pageSize: 20 },
}, },
traceSpanLogs: [], traceSpanLogs: [],
traceSpanLogsTotal: 0,
selectorStore: useSelectorStore(), selectorStore: useSelectorStore(),
}), }),
actions: { actions: {
@ -115,7 +111,6 @@ export const traceStore = defineStore({
return res.data; return res.data;
} }
if (!res.data.data.data.traces.length) { if (!res.data.data.data.traces.length) {
this.traceTotal = 0;
this.traceList = []; this.traceList = [];
this.setCurrentTrace({}); this.setCurrentTrace({});
this.setTraceSpans([]); this.setTraceSpans([]);
@ -128,7 +123,6 @@ export const traceStore = defineStore({
}); });
return d; return d;
}); });
this.traceTotal = res.data.data.data.total;
this.setCurrentTrace(res.data.data.data.traces[0] || {}); this.setCurrentTrace(res.data.data.data.traces[0] || {});
return res.data; return res.data;
}, },
@ -148,11 +142,9 @@ export const traceStore = defineStore({
.params(params); .params(params);
if (res.data.errors) { if (res.data.errors) {
this.traceSpanLogs = []; this.traceSpanLogs = [];
this.traceSpanLogsTotal = 0;
return res.data; return res.data;
} }
this.traceSpanLogs = res.data.data.queryLogs.logs || []; this.traceSpanLogs = res.data.data.queryLogs.logs || [];
this.traceSpanLogsTotal = res.data.data.queryLogs.total;
return res.data; return res.data;
}, },
async getTagKeys() { async getTagKeys() {

2
src/types/ebpf.d.ts vendored
View File

@ -52,7 +52,7 @@ export type Process = {
instanceName: string; instanceName: string;
agentId: string; agentId: string;
detectType: string; detectType: string;
attributes: { name: string; value: string }; attributes: { name: string; value: string }[];
labels: string[]; labels: string[];
}; };
export type StackElement = { export type StackElement = {

2
src/views/dashboard/related/components/LogTable/Index.vue
View File

@ -94,6 +94,8 @@ function setCurrentLog(log: any) {
font-size: 12px; font-size: 12px;
height: 100%; height: 100%;
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
width: 100%;
overflow: auto;
} }
.log-header { .log-header {

10
src/views/dashboard/related/ebpf/Content.vue
View File

@ -16,7 +16,7 @@ limitations under the License. -->
<div class="flex-h content"> <div class="flex-h content">
<TaskList /> <TaskList />
<div class="vis-graph ml-5"> <div class="vis-graph ml-5">
<div class="item"> <div class="schedules">
<EBPFSchedules /> <EBPFSchedules />
</div> </div>
<div class="item"> <div class="item">
@ -39,12 +39,18 @@ import EBPFStack from "./components/EBPFStack.vue";
.vis-graph { .vis-graph {
height: 100%; height: 100%;
width: calc(100% - 300px); width: calc(100% - 300px);
min-width: 700px;
overflow: auto;
} }
.item { .item {
width: 100%; width: 100%;
overflow: auto; overflow: auto;
height: calc(50% - 10px); height: calc(100% - 70px);
padding-bottom: 10px; padding-bottom: 10px;
} }
.schedules {
height: 60px;
}
</style> </style>

89
src/views/dashboard/related/ebpf/components/EBPFSchedules.vue
View File

@ -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 See the License for the specific language governing permissions and
limitations under the License. --> limitations under the License. -->
<template> <template>
<div class="filters"> <div class="filters flex-h">
<Selector <Selector
:value="selectedLabels" :value="selectedLabels"
:options="labels" :options="labels"
@ -23,6 +23,11 @@ limitations under the License. -->
class="inputs mr-10" class="inputs mr-10"
:multiple="true" :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"> <el-popover placement="bottom" :width="680" trigger="click">
<template #reference> <template #reference>
<el-button type="primary" size="small"> <el-button type="primary" size="small">
@ -34,7 +39,7 @@ limitations under the License. -->
placeholder="Please input name" placeholder="Please input name"
class="input-with-search" class="input-with-search"
size="small" size="small"
@change="searchProcesses" @change="searchProcesses(0)"
> >
<template #append> <template #append>
<el-button size="small"> <el-button size="small">
@ -77,7 +82,6 @@ limitations under the License. -->
{{ t("analyze") }} {{ t("analyze") }}
</el-button> </el-button>
</div> </div>
<div ref="timeline" class="schedules"></div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, watch } from "vue"; import { ref, watch } from "vue";
@ -87,25 +91,21 @@ import { Option } from "@/types/app";
import { TableHeader } from "./data"; import { TableHeader } from "./data";
import { useEbpfStore } from "@/store/modules/ebpf"; import { useEbpfStore } from "@/store/modules/ebpf";
import { EBPFProfilingSchedule, Process } from "@/types/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"; import { ElMessage, ElTable } from "element-plus";
const { t } = useI18n(); const { t } = useI18n();
const ebpfStore = useEbpfStore(); const ebpfStore = useEbpfStore();
const pageSize = 5; const pageSize = 5;
/*global Nullable */
const multipleTableRef = ref<InstanceType<typeof ElTable>>(); const multipleTableRef = ref<InstanceType<typeof ElTable>>();
const selectedProcesses = ref<string[]>([]); 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 labels = ref<Option[]>([{ label: "All", value: "0" }]);
const processes = ref<Process[]>([]); const processes = ref<Process[]>([]);
const currentProcesses = ref<Process[]>([]); const currentProcesses = ref<Process[]>([]);
const selectedLabels = ref<string[]>(["0"]); const selectedLabels = ref<string[]>(["0"]);
const searchText = ref<string>(""); const searchText = ref<string>("");
const duration = ref<string[]>([]);
const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") => 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[]) { function changeLabels(opt: any[]) {
const arr = opt.map((d) => d.value); const arr = opt.map((d) => d.value);
@ -160,56 +160,59 @@ async function analyzeEBPF() {
} }
function visTimeline() { function visTimeline() {
if (visGraph.value) {
visGraph.value.destroy();
}
labels.value = [{ label: "All", value: "0" }]; labels.value = [{ label: "All", value: "0" }];
selectedLabels.value = ["0"]; selectedLabels.value = ["0"];
processes.value = []; processes.value = [];
const schedules = ebpfStore.eBPFSchedules.map( const ranges = ebpfStore.eBPFSchedules.map((d: EBPFProfilingSchedule) => {
(d: EBPFProfilingSchedule, index: number) => { for (const l of d.process.labels) {
for (const l of d.process.labels) { labels.value.push({ label: l, value: l });
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),
};
} }
); processes.value.push(d.process);
searchProcesses(); return [d.startTime / 10000, d.endTime / 10000];
if (!timeline.value) { });
return; const arr = ranges.flat(1);
} const min = Math.min(...arr);
const h = timeline.value.getBoundingClientRect().height; const max = Math.max(...arr);
const items: any = new DataSet(schedules); duration.value = [dateFormat(min * 10000), dateFormat(max * 10000)];
const options = { searchProcesses(0);
height: h,
width: "100%",
locale: "en",
};
visGraph.value = new Timeline(timeline.value, items, options);
} }
function changePage(pageIndex: number) { function changePage(pageIndex: number) {
searchProcesses(pageIndex); searchProcesses(pageIndex);
} }
function searchProcesses(pageIndex?: any) { function searchProcesses(pageIndex: number) {
const arr = processes.value.filter( 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.name.includes(searchText.value) ||
d.instanceName.includes(searchText.value) d.instanceName.includes(searchText.value) ||
searchAttribute(d.attributes, searchText.value)
); );
currentProcesses.value = arr.splice( currentProcesses.value = arr.filter(
(pageIndex - 1 || 0) * pageSize, (d, index: number) =>
pageSize * (pageIndex || 1) (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( watch(
() => ebpfStore.eBPFSchedules, () => ebpfStore.eBPFSchedules,
() => { () => {

10
src/views/dashboard/related/ebpf/components/EBPFStack.vue
View File

@ -78,6 +78,7 @@ function drawGraph() {
.sort(true) .sort(true)
.title("") .title("")
.selfValue(false) .selfValue(false)
.inverted(true)
.setColorMapper((d, originalColor) => .setColorMapper((d, originalColor) =>
d.highlight ? "#6aff8f" : originalColor d.highlight ? "#6aff8f" : originalColor
); );
@ -86,8 +87,9 @@ function drawGraph() {
.direction("w") .direction("w")
.html( .html(
(d: { data: StackElement }) => (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); flameChart.value.tooltip(tip);
d3.select("#graph-stack").datum(stackTree.value).call(flameChart.value); d3.select("#graph-stack").datum(stackTree.value).call(flameChart.value);
} }
@ -176,4 +178,8 @@ watch(
color: red; color: red;
margin-top: 20px; margin-top: 20px;
} }
.name {
word-wrap: break-word;
}
</style> </style>

4
src/views/dashboard/related/ebpf/components/NewTask.vue
View File

@ -111,10 +111,6 @@ function changeType(opt: any[]) {
} }
async function createTask() { async function createTask() {
if (!labels.value.length) {
ElMessage.warning("no labels");
return;
}
const date = monitorTime.value === "0" ? new Date() : time.value; const date = monitorTime.value === "0" ? new Date() : time.value;
const params = { const params = {
serviceId: selectorStore.currentService.id, serviceId: selectorStore.currentService.id,

2
src/views/dashboard/related/log/Header.vue
View File

@ -229,7 +229,7 @@ function searchLogs() {
keywordsOfContent: keywordsOfContent.value, keywordsOfContent: keywordsOfContent.value,
excludingKeywordsOfContent: excludingKeywordsOfContent.value, excludingKeywordsOfContent: excludingKeywordsOfContent.value,
tags: tagsMap.value.length ? tagsMap.value : undefined, 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, relatedTrace: traceId.value ? { traceId: traceId.value } : undefined,
}); });
queryLogs(); queryLogs();

15
src/views/dashboard/related/log/List.vue
View File

@ -26,8 +26,10 @@ limitations under the License. -->
<el-pagination <el-pagination
v-model:currentPage="logStore.conditions.paging.pageNum" v-model:currentPage="logStore.conditions.paging.pageNum"
v-model:page-size="pageSize" v-model:page-size="pageSize"
layout="prev, pager, next, jumper" :small="true"
:total="logStore.logsTotal" layout="prev, pager, next"
:pager-count="5"
:total="total"
@current-change="updatePage" @current-change="updatePage"
:style="`float: right`" :style="`float: right`"
/> />
@ -35,7 +37,7 @@ limitations under the License. -->
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from "vue"; import { ref, computed } from "vue";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import LogTable from "@/views/dashboard/related/components/LogTable/Index.vue"; import LogTable from "@/views/dashboard/related/components/LogTable/Index.vue";
import { useLogStore } from "@/store/modules/log"; import { useLogStore } from "@/store/modules/log";
@ -49,9 +51,14 @@ const type = ref<string>(
dashboardStore.layerId === "BROWSER" ? "browser" : "service" dashboardStore.layerId === "BROWSER" ? "browser" : "service"
); );
const pageSize = ref<number>(15); 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) { function updatePage(p: number) {
logStore.setLogCondition({ logStore.setLogCondition({
paging: { pageNum: p, pageSize: pageSize.value, needTotal: true }, paging: { pageNum: p, pageSize: pageSize.value },
}); });
queryLogs(); queryLogs();
} }

14
src/views/dashboard/related/trace/Detail.vue
View File

@ -44,7 +44,9 @@ limitations under the License. -->
v-model:currentPage="pageNum" v-model:currentPage="pageNum"
v-model:page-size="pageSize" v-model:page-size="pageSize"
:small="true" :small="true"
:total="traceStore.traceSpanLogsTotal" layout="prev, pager, next"
:pager-count="5"
:total="total"
@current-change="turnLogsPage" @current-change="turnLogsPage"
/> />
<LogTable <LogTable
@ -146,7 +148,7 @@ limitations under the License. -->
</template> </template>
<script lang="ts"> <script lang="ts">
import dayjs from "dayjs"; import dayjs from "dayjs";
import { ref, defineComponent } from "vue"; import { ref, defineComponent, computed } from "vue";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import { useTraceStore } from "@/store/modules/trace"; import { useTraceStore } from "@/store/modules/trace";
import { Option } from "@/types/app"; import { Option } from "@/types/app";
@ -171,6 +173,11 @@ export default defineComponent({
const displayMode = ref<string>("List"); const displayMode = ref<string>("List");
const pageNum = ref<number>(1); const pageNum = ref<number>(1);
const pageSize = 10; 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") => const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
dayjs(date).format(pattern); dayjs(date).format(pattern);
const showTraceLogs = ref<boolean>(false); const showTraceLogs = ref<boolean>(false);
@ -202,7 +209,7 @@ export default defineComponent({
relatedTrace: { relatedTrace: {
traceId: traceId.value || traceStore.currentTrace.traceIds[0].value, traceId: traceId.value || traceStore.currentTrace.traceIds[0].value,
}, },
paging: { pageNum: pageNum.value, pageSize, needTotal: true }, paging: { pageNum: pageNum.value, pageSize },
}, },
}); });
if (res.errors) { if (res.errors) {
@ -227,6 +234,7 @@ export default defineComponent({
pageSize, pageSize,
pageNum, pageNum,
loading, loading,
total,
}; };
}, },
}); });

24
src/views/dashboard/related/trace/Filter.vue
View File

@ -72,9 +72,19 @@ limitations under the License. -->
</div> </div>
<div class="mr-10"> <div class="mr-10">
<span class="sm b grey mr-5">{{ t("duration") }}:</span> <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> <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> </div>
<div class="flex-h"> <div class="flex-h">
@ -100,8 +110,8 @@ const selectorStore = useSelectorStore();
const dashboardStore = useDashboardStore(); const dashboardStore = useDashboardStore();
const traceStore = useTraceStore(); const traceStore = useTraceStore();
const traceId = ref<string>(""); const traceId = ref<string>("");
const minTraceDuration = ref<string>(""); const minTraceDuration = ref<number>(NaN);
const maxTraceDuration = ref<string>(""); const maxTraceDuration = ref<number>(NaN);
const tagsList = ref<string[]>([]); const tagsList = ref<string[]>([]);
const tagsMap = ref<Option[]>([]); const tagsMap = ref<Option[]>([]);
const state = reactive<any>({ const state = reactive<any>({
@ -174,11 +184,11 @@ function searchTraces() {
serviceInstanceId: instance || state.instance.id || undefined, serviceInstanceId: instance || state.instance.id || undefined,
traceState: state.status.value || "ALL", traceState: state.status.value || "ALL",
queryDuration: appStore.durationTime, queryDuration: appStore.durationTime,
minTraceDuration: appStore.minTraceDuration || undefined, minTraceDuration: Number(minTraceDuration.value),
maxTraceDuration: appStore.maxTraceDuration || undefined, maxTraceDuration: Number(maxTraceDuration.value),
queryOrder: "BY_DURATION", queryOrder: "BY_DURATION",
tags: tagsMap.value.length ? tagsMap.value : undefined, tags: tagsMap.value.length ? tagsMap.value : undefined,
paging: { pageNum: 1, pageSize: 15, needTotal: true }, paging: { pageNum: 1, pageSize: 20 },
}); });
queryTraces(); queryTraces();
} }

22
src/views/dashboard/related/trace/TraceList.vue
View File

@ -17,9 +17,9 @@ limitations under the License. -->
v-model:currentPage="traceStore.conditions.paging.pageNum" v-model:currentPage="traceStore.conditions.paging.pageNum"
v-model:page-size="pageSize" v-model:page-size="pageSize"
:small="true" :small="true"
layout="prev, pager, next, jumper" layout="prev, pager, next"
:total="traceStore.traceTotal" :pager-count="5"
v-model:pager-count="pageCount" :total="total"
@current-change="updatePage" @current-change="updatePage"
/> />
<div class="selectors"> <div class="selectors">
@ -71,7 +71,7 @@ limitations under the License. -->
<script lang="ts" setup> <script lang="ts" setup>
import dayjs from "dayjs"; import dayjs from "dayjs";
import { ref } from "vue"; import { ref, computed } from "vue";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import { useTraceStore } from "@/store/modules/trace"; import { useTraceStore } from "@/store/modules/trace";
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
@ -83,8 +83,12 @@ const { t } = useI18n();
const traceStore = useTraceStore(); const traceStore = useTraceStore();
const loading = ref<boolean>(false); const loading = ref<boolean>(false);
const selectedKey = ref<string>(""); const selectedKey = ref<string>("");
const pageSize = ref<number>(15); const pageSize = ref<number>(20);
const pageCount = ref<number>(5); 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") => const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
dayjs(date).format(pattern); dayjs(date).format(pattern);
@ -96,7 +100,7 @@ function searchTrace() {
function updatePage(p: number) { function updatePage(p: number) {
traceStore.setTraceCondition({ traceStore.setTraceCondition({
paging: { pageNum: p, pageSize: pageSize.value, needTotal: true }, paging: { pageNum: p, pageSize: pageSize.value },
}); });
searchTrace(); searchTrace();
} }
@ -104,7 +108,7 @@ function updatePage(p: number) {
function changeSort(opt: Option[] | any) { function changeSort(opt: Option[] | any) {
traceStore.setTraceCondition({ traceStore.setTraceCondition({
queryOrder: opt[0].value, queryOrder: opt[0].value,
paging: { pageNum: 1, pageSize: pageSize.value, needTotal: true }, paging: { pageNum: 1, pageSize: pageSize.value },
}); });
searchTrace(); searchTrace();
} }
@ -167,7 +171,7 @@ async function queryTraces() {
} }
.list { .list {
width: 400px; width: 300px;
} }
.trace-tr { .trace-tr {

13
src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue
View File

@ -91,7 +91,9 @@ limitations under the License. -->
v-model:currentPage="pageNum" v-model:currentPage="pageNum"
v-model:page-size="pageSize" v-model:page-size="pageSize"
:small="true" :small="true"
:total="traceStore.traceSpanLogsTotal" layout="prev, pager, next"
:pager-count="5"
:total="total"
@current-change="turnPage" @current-change="turnPage"
/> />
<LogTable <LogTable
@ -106,7 +108,7 @@ limitations under the License. -->
</el-dialog> </el-dialog>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from "vue"; import { ref, computed } from "vue";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import type { PropType } from "vue"; import type { PropType } from "vue";
import dayjs from "dayjs"; import dayjs from "dayjs";
@ -124,6 +126,11 @@ const traceStore = useTraceStore();
const pageNum = ref<number>(1); const pageNum = ref<number>(1);
const showRelatedLogs = ref<boolean>(false); const showRelatedLogs = ref<boolean>(false);
const pageSize = 10; 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") => const dateFormat = (date: number, pattern = "YYYY-MM-DD HH:mm:ss") =>
dayjs(date).format(pattern); dayjs(date).format(pattern);
async function getTaceLogs() { async function getTaceLogs() {
@ -135,7 +142,7 @@ async function getTaceLogs() {
segmentId: props.currentSpan.segmentId, segmentId: props.currentSpan.segmentId,
spanId: props.currentSpan.spanId, spanId: props.currentSpan.spanId,
}, },
paging: { pageNum: pageNum.value, pageSize, needTotal: true }, paging: { pageNum: pageNum.value, pageSize },
}, },
}); });
if (res.errors) { if (res.errors) {