mirror of
https://github.com/apache/skywalking-booster-ui.git
synced 2025-05-14 17:05:10 +00:00
Merge branch 'main' of github.com:apache/skywalking-booster-ui into feat/log
This commit is contained in:
Qiuxia Fan
commit
c8a6f2df9e
201
package-lock.json
generated
201
package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -54,7 +54,6 @@ export const QueryServiceLogs = {
|
||||
value
|
||||
}
|
||||
}
|
||||
total
|
||||
}`,
|
||||
};
|
||||
|
||||
|
||||
@ -27,7 +27,6 @@ export const Traces = {
|
||||
isError
|
||||
traceIds
|
||||
}
|
||||
total
|
||||
}`,
|
||||
};
|
||||
|
||||
|
||||
@ -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() {
|
||||
|
||||
@ -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() {
|
||||
|
||||
2
src/types/ebpf.d.ts
vendored
2
src/types/ebpf.d.ts
vendored
@ -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 = {
|
||||
|
||||
@ -94,6 +94,8 @@ function setCurrentLog(log: any) {
|
||||
font-size: 12px;
|
||||
height: 100%;
|
||||
border-bottom: 1px solid #eee;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.log-header {
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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,
|
||||
() => {
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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();
|
||||
|
||||
@ -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();
|
||||
}
|
||||
|
||||
@ -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,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
@ -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();
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user