github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-05-01 07:42:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: implement the Dark Theme (#334)

Browse Source
This commit is contained in:
Fine0830 2023-11-14 20:37:15 +08:00 committed by GitHub
parent 780104c5d2
commit 832dc1676b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
81 changed files with 638 additions and 351 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

192
package-lock.json generated
View File

@ -13,7 +13,7 @@
"d3-flame-graph": "^4.1.3",
"d3-tip": "^0.9.1",
"echarts": "^5.2.2",
"element-plus": "^2.1.0",
"element-plus": "^2.2.5",
"lodash": "^4.17.21",
"monaco-editor": "^0.34.1",
"pinia": "^2.0.28",
@ -1307,9 +1307,9 @@
}
},
"node_modules/@ctrl/tinycolor": {
"version": "3.5.0",
"resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.5.0.tgz",
"integrity": "sha512-tlJpwF40DEQcfR/QF+wNMVyGMaO9FQp6Z1Wahj4Gk3CJQYHwA2xVG7iKDFdW6zuxZY9XWOpGcfNCTsX4McOsOg==",
"version": "3.6.1",
"resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz",
"integrity": "sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==",
"engines": {
"node": ">=10"
}
@ -1375,9 +1375,9 @@
}
},
"node_modules/@element-plus/icons-vue": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-1.1.4.tgz",
"integrity": "sha512-Iz/nHqdp1sFPmdzRwHkEQQA3lKvoObk8azgABZ81QUOpW9s/lUyQVUSh0tNtEPZXQlKwlSh7SPgoVxzrE0uuVQ==",
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-2.1.0.tgz",
"integrity": "sha512-PSBn3elNoanENc1vnCfh+3WA9fimRC7n+fWkf3rE5jvv+aBohNHABC/KAR5KWPecxWxDTVT1ERpRbOMRcOV/vA==",
"peerDependencies": {
"vue": "^3.2.0"
}
@ -1784,6 +1784,19 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/@floating-ui/core": {
"version": "0.7.3",
"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-0.7.3.tgz",
"integrity": "sha512-buc8BXHmG9l82+OQXOFU3Kr2XQx9ys01U/Q9HMIrZ300iLc8HLMgh7dcCqgYzAzf4BkoQvDcXf5Y+CuEZ5JBYg=="
},
"node_modules/@floating-ui/dom": {
"version": "0.5.4",
"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-0.5.4.tgz",
"integrity": "sha512-419BMceRLq0RrmTSDxn8hf9R3VCJv2K9PUfugh5JyEFmdjzDo+e8U5EdR8nzKq8Yj1htzLm3b6eQEEam3/rrtg==",
"dependencies": {
"@floating-ui/core": "^0.7.3"
}
},
"node_modules/@hapi/hoek": {
"version": "9.3.0",
"resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz",
@ -2144,9 +2157,10 @@
}
},
"node_modules/@popperjs/core": {
"version": "2.11.6",
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
"integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==",
"name": "@sxzz/popperjs-es",
"version": "2.11.7",
"resolved": "https://registry.npmjs.org/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz",
"integrity": "sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ==",
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/popperjs"
@ -2561,10 +2575,9 @@
"integrity": "sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ=="
},
"node_modules/@types/lodash-es": {
"version": "4.17.6",
"resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.6.tgz",
"integrity": "sha512-R+zTeVUKDdfoRxpAryaQNRKk3105Rrgx2CFRClIgRGaqDTdjsm8h6IYA8ir584W3ePzkZfst5xIgDwYrlh9HLg==",
"peer": true,
"version": "4.17.11",
"resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.11.tgz",
"integrity": "sha512-eCw8FYAWHt2DDl77s+AMLLzPn310LKohruumpucZI4oOFJkIgnlaJcy23OKMJxx4r9PeTF13Gv6w+jqjWQaYUg==",
"dependencies": {
"@types/lodash": "*"
}
@ -5666,33 +5679,43 @@
"dev": true
},
"node_modules/element-plus": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/element-plus/-/element-plus-2.1.0.tgz",
"integrity": "sha512-PQM3LMv5qKf0sS/k+PXuBcmKl1Eb3b7fxKPyFHZ6eodZcNykbEMcpLZefQkvmDr6calVnuQ7TUnTm7Tm9LJXvg==",
"version": "2.2.5",
"resolved": "https://registry.npmjs.org/element-plus/-/element-plus-2.2.5.tgz",
"integrity": "sha512-Kl0yn/PQca5YQo3M3NPBP4Xl71NQuMtDx5zNXZGVyl5FjdMujXiFB9SXKYGDUCgFU3d/Rl14vB4Fpmcl2Iz+Hw==",
"dependencies": {
"@ctrl/tinycolor": "^3.4.0",
"@element-plus/icons-vue": "^1.0.1",
"@popperjs/core": "^2.11.2",
"@vueuse/core": "^7.7.1",
"async-validator": "^4.0.7",
"dayjs": "^1.10.8",
"@ctrl/tinycolor": "^3.4.1",
"@element-plus/icons-vue": "^2.0.5",
"@floating-ui/dom": "^0.5.2",
"@popperjs/core": "npm:@sxzz/popperjs-es@^2.11.7",
"@types/lodash": "^4.14.182",
"@types/lodash-es": "^4.17.6",
"@vueuse/core": "^8.6.0",
"async-validator": "^4.1.1",
"dayjs": "^1.11.3",
"escape-html": "^1.0.3",
"lodash": "^4.17.21",
"lodash-es": "^4.17.21",
"lodash-unified": "^1.0.2",
"memoize-one": "^6.0.0",
"normalize-wheel-es": "^1.1.1"
"normalize-wheel-es": "^1.1.2"
},
"peerDependencies": {
"vue": "^3.2.0"
}
},
"node_modules/element-plus/node_modules/@types/web-bluetooth": {
"version": "0.0.14",
"resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.14.tgz",
"integrity": "sha512-5d2RhCard1nQUC3aHcq/gHzWYO6K0WJmAbjO7mQJgCQKtZpgXxv1rOM6O/dBDhDYYVutk1sciOgNSe+5YyfM8A=="
},
"node_modules/element-plus/node_modules/@vueuse/core": {
"version": "7.7.1",
"resolved": "https://registry.npmjs.org/@vueuse/core/-/core-7.7.1.tgz",
"integrity": "sha512-PRRgbATMpoeUmkCEBtUeJgOwtew8s+4UsEd+Pm7MhkjL2ihCNrSqxNVtM6NFE4uP2sWnkGcZpCjPuNSxowJ1Ow==",
"version": "8.9.4",
"resolved": "https://registry.npmjs.org/@vueuse/core/-/core-8.9.4.tgz",
"integrity": "sha512-B/Mdj9TK1peFyWaPof+Zf/mP9XuGAngaJZBwPaXBvU3aCTZlx3ltlrFFFyMV4iGBwsjSCeUCgZrtkEj9dS2Y3Q==",
"dependencies": {
"@vueuse/shared": "7.7.1",
"@types/web-bluetooth": "^0.0.14",
"@vueuse/metadata": "8.9.4",
"@vueuse/shared": "8.9.4",
"vue-demi": "*"
},
"funding": {
@ -5712,9 +5735,9 @@
}
},
"node_modules/element-plus/node_modules/@vueuse/core/node_modules/@vueuse/shared": {
"version": "7.7.1",
"resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-7.7.1.tgz",
"integrity": "sha512-rN2qd22AUl7VdBxihagWyhUNHCyVk9IpvBTTfHoLH9G7rGE552X1f+zeCfehuno0zXif13jPw+icW/wn2a0rnQ==",
"version": "8.9.4",
"resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-8.9.4.tgz",
"integrity": "sha512-wt+T30c4K6dGRMVqPddexEVLa28YwxW5OFIPmzUHICjphfAuBFTTdDoyqREZNDOFJZ44ARH1WWQNCUK8koJ+Ag==",
"dependencies": {
"vue-demi": "*"
},
@ -5735,9 +5758,9 @@
}
},
"node_modules/element-plus/node_modules/@vueuse/core/node_modules/vue-demi": {
"version": "0.13.11",
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
"integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
"version": "0.14.6",
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
"integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
"hasInstallScript": true,
"bin": {
"vue-demi-fix": "bin/vue-demi-fix.js",
@ -5759,6 +5782,14 @@
}
}
},
"node_modules/element-plus/node_modules/@vueuse/metadata": {
"version": "8.9.4",
"resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-8.9.4.tgz",
"integrity": "sha512-IwSfzH80bnJMzqhaapqJl9JRIiyQU0zsRGEgnxN6jhq7992cPUJIRfV+JHRIZXjYqbwt07E1gTEp0R0zPJ1aqw==",
"funding": {
"url": "https://github.com/sponsors/antfu"
}
},
"node_modules/element-resize-detector": {
"version": "1.2.4",
"resolved": "https://registry.npmjs.org/element-resize-detector/-/element-resize-detector-1.2.4.tgz",
@ -16121,9 +16152,9 @@
"requires": {}
},
"@ctrl/tinycolor": {
"version": "3.5.0",
"resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.5.0.tgz",
"integrity": "sha512-tlJpwF40DEQcfR/QF+wNMVyGMaO9FQp6Z1Wahj4Gk3CJQYHwA2xVG7iKDFdW6zuxZY9XWOpGcfNCTsX4McOsOg=="
"version": "3.6.1",
"resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz",
"integrity": "sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA=="
},
"@cypress/request": {
"version": "3.0.1",
@ -16182,9 +16213,9 @@
}
},
"@element-plus/icons-vue": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-1.1.4.tgz",
"integrity": "sha512-Iz/nHqdp1sFPmdzRwHkEQQA3lKvoObk8azgABZ81QUOpW9s/lUyQVUSh0tNtEPZXQlKwlSh7SPgoVxzrE0uuVQ==",
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-2.1.0.tgz",
"integrity": "sha512-PSBn3elNoanENc1vnCfh+3WA9fimRC7n+fWkf3rE5jvv+aBohNHABC/KAR5KWPecxWxDTVT1ERpRbOMRcOV/vA==",
"requires": {}
},
"@esbuild/android-arm": {
@ -16375,6 +16406,19 @@
}
}
},
"@floating-ui/core": {
"version": "0.7.3",
"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-0.7.3.tgz",
"integrity": "sha512-buc8BXHmG9l82+OQXOFU3Kr2XQx9ys01U/Q9HMIrZ300iLc8HLMgh7dcCqgYzAzf4BkoQvDcXf5Y+CuEZ5JBYg=="
},
"@floating-ui/dom": {
"version": "0.5.4",
"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-0.5.4.tgz",
"integrity": "sha512-419BMceRLq0RrmTSDxn8hf9R3VCJv2K9PUfugh5JyEFmdjzDo+e8U5EdR8nzKq8Yj1htzLm3b6eQEEam3/rrtg==",
"requires": {
"@floating-ui/core": "^0.7.3"
}
},
"@hapi/hoek": {
"version": "9.3.0",
"resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz",
@ -16647,9 +16691,9 @@
}
},
"@popperjs/core": {
"version": "2.11.6",
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
"integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw=="
"version": "npm:@sxzz/popperjs-es@2.11.7",
"resolved": "https://registry.npmjs.org/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz",
"integrity": "sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ=="
},
"@rollup/pluginutils": {
"version": "4.2.1",
@ -17053,10 +17097,9 @@
"integrity": "sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ=="
},
"@types/lodash-es": {
"version": "4.17.6",
"resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.6.tgz",
"integrity": "sha512-R+zTeVUKDdfoRxpAryaQNRKk3105Rrgx2CFRClIgRGaqDTdjsm8h6IYA8ir584W3ePzkZfst5xIgDwYrlh9HLg==",
"peer": true,
"version": "4.17.11",
"resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.11.tgz",
"integrity": "sha512-eCw8FYAWHt2DDl77s+AMLLzPn310LKohruumpucZI4oOFJkIgnlaJcy23OKMJxx4r9PeTF13Gv6w+jqjWQaYUg==",
"requires": {
"@types/lodash": "*"
}
@ -19361,48 +19404,63 @@
"dev": true
},
"element-plus": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/element-plus/-/element-plus-2.1.0.tgz",
"integrity": "sha512-PQM3LMv5qKf0sS/k+PXuBcmKl1Eb3b7fxKPyFHZ6eodZcNykbEMcpLZefQkvmDr6calVnuQ7TUnTm7Tm9LJXvg==",
"version": "2.2.5",
"resolved": "https://registry.npmjs.org/element-plus/-/element-plus-2.2.5.tgz",
"integrity": "sha512-Kl0yn/PQca5YQo3M3NPBP4Xl71NQuMtDx5zNXZGVyl5FjdMujXiFB9SXKYGDUCgFU3d/Rl14vB4Fpmcl2Iz+Hw==",
"requires": {
"@ctrl/tinycolor": "^3.4.0",
"@element-plus/icons-vue": "^1.0.1",
"@popperjs/core": "^2.11.2",
"@vueuse/core": "^7.7.1",
"async-validator": "^4.0.7",
"dayjs": "^1.10.8",
"@ctrl/tinycolor": "^3.4.1",
"@element-plus/icons-vue": "^2.0.5",
"@floating-ui/dom": "^0.5.2",
"@popperjs/core": "npm:@sxzz/popperjs-es@^2.11.7",
"@types/lodash": "^4.14.182",
"@types/lodash-es": "^4.17.6",
"@vueuse/core": "^8.6.0",
"async-validator": "^4.1.1",
"dayjs": "^1.11.3",
"escape-html": "^1.0.3",
"lodash": "^4.17.21",
"lodash-es": "^4.17.21",
"lodash-unified": "^1.0.2",
"memoize-one": "^6.0.0",
"normalize-wheel-es": "^1.1.1"
"normalize-wheel-es": "^1.1.2"
},
"dependencies": {
"@types/web-bluetooth": {
"version": "0.0.14",
"resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.14.tgz",
"integrity": "sha512-5d2RhCard1nQUC3aHcq/gHzWYO6K0WJmAbjO7mQJgCQKtZpgXxv1rOM6O/dBDhDYYVutk1sciOgNSe+5YyfM8A=="
},
"@vueuse/core": {
"version": "7.7.1",
"resolved": "https://registry.npmjs.org/@vueuse/core/-/core-7.7.1.tgz",
"integrity": "sha512-PRRgbATMpoeUmkCEBtUeJgOwtew8s+4UsEd+Pm7MhkjL2ihCNrSqxNVtM6NFE4uP2sWnkGcZpCjPuNSxowJ1Ow==",
"version": "8.9.4",
"resolved": "https://registry.npmjs.org/@vueuse/core/-/core-8.9.4.tgz",
"integrity": "sha512-B/Mdj9TK1peFyWaPof+Zf/mP9XuGAngaJZBwPaXBvU3aCTZlx3ltlrFFFyMV4iGBwsjSCeUCgZrtkEj9dS2Y3Q==",
"requires": {
"@vueuse/shared": "7.7.1",
"@types/web-bluetooth": "^0.0.14",
"@vueuse/metadata": "8.9.4",
"@vueuse/shared": "8.9.4",
"vue-demi": "*"
},
"dependencies": {
"@vueuse/shared": {
"version": "7.7.1",
"resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-7.7.1.tgz",
"integrity": "sha512-rN2qd22AUl7VdBxihagWyhUNHCyVk9IpvBTTfHoLH9G7rGE552X1f+zeCfehuno0zXif13jPw+icW/wn2a0rnQ==",
"version": "8.9.4",
"resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-8.9.4.tgz",
"integrity": "sha512-wt+T30c4K6dGRMVqPddexEVLa28YwxW5OFIPmzUHICjphfAuBFTTdDoyqREZNDOFJZ44ARH1WWQNCUK8koJ+Ag==",
"requires": {
"vue-demi": "*"
}
},
"vue-demi": {
"version": "0.13.11",
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
"integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
"version": "0.14.6",
"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
"integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
"requires": {}
}
}
},
"@vueuse/metadata": {
"version": "8.9.4",
"resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-8.9.4.tgz",
"integrity": "sha512-IwSfzH80bnJMzqhaapqJl9JRIiyQU0zsRGEgnxN6jhq7992cPUJIRfV+JHRIZXjYqbwt07E1gTEp0R0zPJ1aqw=="
}
}
},

2
package.json
View File

@ -23,7 +23,7 @@
"d3-flame-graph": "^4.1.3",
"d3-tip": "^0.9.1",
"echarts": "^5.2.2",
"element-plus": "^2.1.0",
"element-plus": "^2.2.5",
"lodash": "^4.17.21",
"monaco-editor": "^0.34.1",
"pinia": "^2.0.28",

5
src/App.vue
View File

@ -27,10 +27,11 @@ limitations under the License. -->
}
}, 500);
</script>
<style>
<style lang="scss">
#app {
color: #2c3e50;
color: $font-color;
height: 100%;
overflow: hidden;
background-color: $layout-background;
}
</style>

BIN
src/assets/img/tools/EXIT.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 269 B

After

Width:  |  Height:  |  Size: 259 B

6
src/components/SelectSingle.vue
View File

@ -88,7 +88,7 @@ limitations under the License. -->
border: 1px solid #ddd;
background: $theme-background;
border-radius: 3px;
color: #000;
color: $font-color;
font-size: $font-size-smaller;
height: 24px;
@ -112,7 +112,7 @@ limitations under the License. -->
width: 100%;
padding: 2px 10px;
overflow: auto;
color: #606266;
color: var(--sw-setting-color);
position: relative;
&:hover {
@ -133,7 +133,7 @@ limitations under the License. -->
}
.opt-wrapper {
color: #606266;
color: var(--sw-setting-color);
position: absolute;
top: 26px;
left: 0;

5
src/constants/data.ts
View File

@ -26,3 +26,8 @@ export const Languages = [
{ label: "Chinese", value: "zh" },
{ label: "Spanish", value: "es" },
];
export enum Themes {
Dark = "dark",
Light = "light",
}

7
src/hooks/useEcharts.ts
View File

@ -30,6 +30,8 @@ import { useDebounceFn } from "@vueuse/core";
import { useEventListener } from "./useEventListener";
import { useBreakpoint } from "./useBreakpoint";
import echarts from "@/utils/echarts";
import { useAppStoreWithOut } from "@/store/modules/app";
import { Themes } from "@/constants/data";
export type ECOption = echarts.ComposeOption<
| BarSeriesOption
@ -44,8 +46,9 @@ export type ECOption = echarts.ComposeOption<
>;
export function useECharts(elRef: Ref<HTMLDivElement>, theme: "light" | "dark" | "default" = "default"): Indexable {
const appStore = useAppStoreWithOut();
const getDarkMode = computed(() => {
return theme === "default" ? "light" : theme;
return appStore.theme === "default" ? Themes.Light : theme;
});
let chartInstance: Nullable<echarts.ECharts> = null;
let resizeFn: Fn = resize;
@ -55,7 +58,7 @@ export function useECharts(elRef: Ref<HTMLDivElement>, theme: "light" | "dark" |
resizeFn = useDebounceFn(resize, 200);
const getOptions = computed(() => {
if (getDarkMode.value !== "dark") {
if (getDarkMode.value !== Themes.Dark) {
return cacheOptions.value as ECOption;
}
return {

2
src/layout/components/AppMain.vue
View File

@ -24,7 +24,7 @@ limitations under the License. -->
<style lang="scss" scoped>
.app-main {
height: calc(100% - 40px);
background: #f7f9fa;
background: $layout-background;
overflow: auto;
}
</style>

37
src/layout/components/NavBar.vue
View File

@ -48,11 +48,14 @@ limitations under the License. -->
@input="changeTimeRange"
/>
<span> UTC{{ appStore.utcHour >= 0 ? "+" : "" }}{{ `${appStore.utcHour}:${appStore.utcMin}` }} </span>
<span class="ml-5">
<el-switch v-model="theme" :active-icon="Moon" :inactive-icon="Sunny" inline-prompt @change="changeTheme" />
</span>
<span title="refresh" class="ghost ml-5 cp" @click="handleReload">
<Icon iconName="retry" :loading="appStore.autoRefresh" class="middle" />
</span>
<span class="version ml-5 cp">
<el-popover trigger="hover" width="250" placement="bottom" effect="light" :content="appStore.version">
<el-popover trigger="hover" width="250" placement="bottom" :content="appStore.version">
<template #reference>
<span>
<Icon iconName="info_outline" size="middle" />
@ -74,7 +77,8 @@ limitations under the License. -->
import { MetricCatalog } from "@/views/dashboard/data";
import type { DashboardItem } from "@/types/dashboard";
import router from "@/router";
import { ArrowRight } from "@element-plus/icons-vue";
import { ArrowRight, Moon, Sunny } from "@element-plus/icons-vue";
import { Themes } from "@/constants/data";
/*global Indexable */
const { t, te } = useI18n();
@ -84,11 +88,27 @@ limitations under the License. -->
const pathNames = ref<{ path?: string; name: string; selected: boolean }[][]>([]);
const timeRange = ref<number>(0);
const pageTitle = ref<string>("");
const theme = ref<boolean>(true);
changeTheme();
resetDuration();
getVersion();
getNavPaths();
function changeTheme() {
const root = document.documentElement;
if (theme.value) {
root.classList.add(Themes.Dark);
root.classList.remove(Themes.Light);
appStore.setTheme(Themes.Dark);
} else {
root.classList.add(Themes.Light);
root.classList.remove(Themes.Dark);
appStore.setTheme(Themes.Light);
}
}
function getName(list: any[]) {
return list.find((d: any) => d.selected) || {};
}
@ -287,21 +307,16 @@ limitations under the License. -->
padding: 5px;
text-align: left;
justify-content: space-between;
background-color: #fafbfc;
border-bottom: 1px solid #dfe4e8;
color: #222;
background-color: $theme-background;
border-bottom: 1px solid $border-color;
color: $font-color;
font-size: $font-size-smaller;
}
.nav-bar.dark {
background-color: #333840;
border-bottom: 1px solid #252a2f;
color: #fafbfc;
}
.title {
font-size: $font-size-normal;
font-weight: 500;
padding-top: 5px;
}
.nav-tabs {

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

@ -23,6 +23,7 @@ import type { AxiosResponse } from "axios";
import dateFormatStep, { dateFormatTime } from "@/utils/dateFormat";
import { TimeType } from "@/constants/data";
import type { MenuOptions, SubItem } from "@/types/app";
import { Themes } from "@/constants/data";
/*global Nullable*/
interface AppState {
durationRow: Recordable;
@ -36,6 +37,7 @@ interface AppState {
isMobile: boolean;
reloadTimer: Nullable<IntervalHandle>;
allMenus: MenuOptions[];
theme: string;
}
export const appStore = defineStore({
@ -56,6 +58,7 @@ export const appStore = defineStore({
isMobile: false,
reloadTimer: null,
allMenus: [],
theme: Themes.Dark,
}),
getters: {
duration(): Duration {
@ -126,6 +129,9 @@ export const appStore = defineStore({
updateDurationRow(data: Duration) {
this.durationRow = data;
},
setTheme(data: string) {
this.theme = data;
},
setUTC(utcHour: number, utcMin: number): void {
this.runEventStack();
this.utcMin = utcMin;

2
src/store/modules/profile.ts
View File

@ -163,7 +163,7 @@ export const profileStore = defineStore({
return res.data;
},
async getSegmentSpans(params: { segmentId: string }) {
if (!params.segmentId) {
if (!(params && params.segmentId)) {
return new Promise((resolve) => resolve({}));
}
const res: AxiosResponse = await graphql.query("queryProfileSegment").params(params);

25
src/styles/light.scss
View File

@ -1,25 +0,0 @@
/**
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
$font-color: #3d444f;
$text-color: #fff;
$disabled-color: #ccc;
$active-color: #409eff;
$theme-background: #fff;
$active-background: #409eff;
$font-size-smaller: 12px;
$font-size-normal: 14px;

25
src/styles/reset.scss
View File

@ -144,18 +144,6 @@ pre {
}
}
.el-switch__label--left {
margin-right: 5px;
}
.el-switch__label--right {
margin-left: 5px;
}
.el-switch__label * {
font-size: $font-size-smaller;
}
.el-drawer__header {
margin-bottom: 0;
padding-left: 10px;
@ -173,9 +161,10 @@ pre {
div.vis-tooltip {
max-width: 600px;
overflow: hidden;
background-color: $theme-background !important;
background-color: var(--vis-tooltip-bg) !important;
white-space: normal !important;
font-size: $font-size-smaller !important;
color: var(--font-color) !important;
}
.vis-item {
@ -187,13 +176,13 @@ div.vis-tooltip {
background-color: #e66;
opacity: 0.8;
border-color: #e66;
color: $text-color !important;
color: var(--sw-event-vis-selected) !important;
}
.vis-item.Normal {
background-color: #fac858;
border-color: #fac858;
color: #666 !important;
color: var(--sw-event-vis-selected) !important;
}
.vis-item .vis-item-content {
@ -202,7 +191,11 @@ div.vis-tooltip {
.vis-item.vis-selected.Error,
.vis-item.vis-selected.Normal {
color: #1a1a1a !important;
color: var(--sw-event-vis-selected) !important;
}
.vis-time-axis .vis-text {
color: var(--sw-time-axis-text) !important;
}
.el-menu--vertical.sub-list {

152
src/styles/theme.scss Normal file
View File

@ -0,0 +1,152 @@
/**
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
@use "element-plus/theme-chalk/src/dark/css-vars.scss" as *;
html {
--el-color-primary: #409eff;
--theme-background: #fff;
--font-color: #3d444f;
--disabled-color: #ccc;
--dashboard-tool-bg: rgb(240 242 245);
--text-color-placeholder: #666;
--border-color: #dcdfe6;
--border-color-primary: #eee;
--layout-background: #f7f9fa;
--box-shadow-color: #ccc;
--sw-bg-color-overlay: #fff;
--sw-border-color-light: #e4e7ed;
--popper-hover-bg: #eee;
--sw-icon-btn-bg: #eee;
--sw-icon-btn-color: #666;
--sw-icon-btn-border: #ccc;
--sw-table-col: #fff;
--sw-config-header: aliceblue;
--sw-topology-color: #666;
--vis-tooltip-bg: #fff;
--sw-topology-switch-icon: rgba(0, 0, 0, 0.3);
--sw-topology-box-shadow: #eee 1px 2px 10px;
--sw-topology-setting-bg: #fff;
--sw-topology-border: 1px solid #999;
--sw-trace-success: rgb(46 47 51 / 10%);
--sw-trace-list-border: rgb(0 0 0 / 10%);
--sw-list-selected: #ededed;
--sw-table-header: #f3f4f9;
--sw-list-hover: rgb(0 0 0 / 4%);
--sw-setting-color: #606266;
--sw-alarm-tool: #f0f2f5;
--sw-alarm-tool-border: #c1c5ca41;
--sw-table-color: #000;
--sw-event-vis-selected: #1a1a1a;
--sw-time-axis-text: #4d4d4d;
--sw-drawer-header: #72767b;
--sw-marketplace-border: #dedfe0;
}
html.dark {
--el-color-primary: rgb(64, 158, 255);
--theme-background: #212224;
--font-color: #fafbfc;
--disabled-color: #ccc;
--dashboard-tool-bg: #000;
--text-color-placeholder: #ccc;
--border-color: #262629;
--border-color-primary: #4b4b52;
--layout-background: #000;
--box-shadow-color: #606266;
--sw-bg-color-overlay: #1d1e1f;
--sw-border-color-light: #414243;
--popper-hover-bg: rgb(64, 158, 255, 0.1);
--sw-icon-btn-bg: #222;
--sw-icon-btn-color: #ccc;
--sw-icon-btn-border: #999;
--sw-table-col: none;
--sw-config-header: #303133;
--sw-topology-color: #ccc;
--vis-tooltip-bg: #414243;
--sw-topology-switch-icon: #aaa;
--sw-topology-box-shadow: 0 0 2px 0 #444;
--sw-topology-setting-bg: #333;
--sw-topology-border: 1px solid #666;
--sw-trace-success: #aaa;
--sw-trace-list-border: #333133;
--sw-list-hover: #262629;
--sw-table-header: #303133;
--sw-list-selected: #3d444f;
--sw-setting-color: #eee;
--sw-alarm-tool: #303133;
--sw-alarm-tool-border: #444;
--sw-table-color: #fff;
--sw-event-vis-selected: #fff;
--sw-time-axis-text: #aaa;
--sw-drawer-header: #e9e9eb;
--sw-marketplace-border: #606266;
}
.el-drawer__header {
color: var(--sw-drawer-header);
}
.el-table tr {
background-color: var(--el-table-tr-bg-color);
}
.el-popper.is-light {
background: var(--sw-bg-color-overlay);
border: 1px solid var(--sw-border-color-light);
}
.el-switch {
--el-switch-off-color: #aaa;
}
.el-table__body-wrapper tr td.el-table-fixed-column--left,
.el-table__body-wrapper tr td.el-table-fixed-column--right,
.el-table__body-wrapper tr th.el-table-fixed-column--left,
.el-table__body-wrapper tr th.el-table-fixed-column--right,
.el-table__footer-wrapper tr td.el-table-fixed-column--left,
.el-table__footer-wrapper tr td.el-table-fixed-column--right,
.el-table__footer-wrapper tr th.el-table-fixed-column--left,
.el-table__footer-wrapper tr th.el-table-fixed-column--right,
.el-table__header-wrapper tr td.el-table-fixed-column--left,
.el-table__header-wrapper tr td.el-table-fixed-column--right,
.el-table__header-wrapper tr th.el-table-fixed-column--left,
.el-table__header-wrapper tr th.el-table-fixed-column--right {
background-color: var(--sw-table-col);
}
.el-table.is-scrolling-none th.el-table-fixed-column--left,
.el-table.is-scrolling-none th.el-table-fixed-column--right,
.el-table th.el-table__cell {
background-color: var(--sw-table-col);
}
$tool-icon-btn-bg: var(--sw-icon-btn-bg);
$tool-icon-btn-color: var(--sw-icon-btn-color);
$popper-hover-bg-color: var(--popper-hover-bg);
$box-shadow-color: var(--box-shadow-color);
$border-color-primary: var(--border-color-primary);
$layout-background: var(--layout-background);
$border-color: var(--border-color);
$dashboard-tool-bg-color: var(--dashboard-tool-bg);
$font-color: var(--font-color);
$text-color: var(--theme-background);
$disabled-color: var(--disabled-color);
$active-color: var(--el-color-primary);
$theme-background: var(--theme-background);
$active-background: var(--el-color-primary);
$font-size-smaller: 12px;
$font-size-normal: 14px;

2
src/views/Marketplace.vue
View File

@ -113,7 +113,7 @@ limitations under the License. -->
.category {
flex-wrap: wrap;
border-right: 1px solid #ddd;
border-right: 1px solid var(--sw-marketplace-border);
align-content: flex-start;
height: 100%;
overflow: auto;

4
src/views/Settings.vue
View File

@ -156,7 +156,7 @@ limitations under the License. -->
}
.settings {
color: #606266;
color: var(--sw-setting-color);
font-size: 13px;
padding: 20px;
@ -177,7 +177,7 @@ limitations under the License. -->
width: 180px;
display: inline-block;
font-weight: 500;
color: #000;
color: $font-color;
line-height: 25px;
}
}

2
src/views/alarm/Content.vue
View File

@ -157,7 +157,7 @@ limitations under the License. -->
.timeline-table-i {
padding: 10px 15px;
border-left: 4px solid #eee;
border-left: 4px solid var(--border-color-primary);
position: relative;
&::after {

11
src/views/alarm/Header.vue
View File

@ -39,7 +39,11 @@ limitations under the License. -->
@current-change="changePage"
:pager-count="5"
small
:style="`--el-pagination-bg-color: #f0f2f5; --el-pagination-button-disabled-bg-color: #f0f2f5;`"
:style="
appStore.theme === Themes.Light
? `--el-pagination-bg-color: #f0f2f5; --el-pagination-button-disabled-bg-color: #f0f2f5;`
: ''
"
/>
</div>
</div>
@ -54,6 +58,7 @@ limitations under the License. -->
import { useAppStoreWithOut } from "@/store/modules/app";
import { useAlarmStore } from "@/store/modules/alarm";
import { ElMessage } from "element-plus";
import { Themes } from "@/constants/data";
const appStore = useAppStoreWithOut();
const alarmStore = useAlarmStore();
@ -99,8 +104,8 @@ limitations under the License. -->
<style lang="scss" scoped>
.alarm-tool {
font-size: $font-size-smaller;
border-bottom: 1px solid #c1c5ca41;
background-color: #f0f2f5;
border-bottom: 1px solid var(--sw-alarm-tool-border);
background-color: var(--sw-alarm-tool);
padding: 10px;
position: relative;
}

2
src/views/dashboard/Widget.vue
View File

@ -186,7 +186,7 @@ limitations under the License. -->
<style lang="scss" scoped>
.content {
min-width: 100px;
border: 1px solid #eee;
border: 1px solid $border-color-primary;
background-color: $theme-background;
position: relative;
}

2
src/views/dashboard/configuration/ContinuousProfiling.vue
View File

@ -91,7 +91,7 @@ limitations under the License. -->
position: fixed;
bottom: 0;
right: 0;
border-top: 1px solid #eee;
border-top: 1px solid $border-color;
padding: 10px;
text-align: right;
width: 100%;

2
src/views/dashboard/configuration/Event.vue
View File

@ -68,7 +68,7 @@ limitations under the License. -->
position: fixed;
bottom: 0;
right: 0;
border-top: 1px solid #eee;
border-top: 1px solid $border-color-primary;
padding: 10px;
text-align: right;
width: 100%;

3
src/views/dashboard/configuration/Text.vue
View File

@ -89,6 +89,7 @@ limitations under the License. -->
const fontSize = ref<number>(graph.fontSize || 12);
const textAlign = ref(graph.textAlign || "left");
const Colors = [
{ label: "Theme", value: "theme" },
{
label: "Green",
value: "green",
@ -151,7 +152,7 @@ limitations under the License. -->
position: fixed;
bottom: 0;
right: 0;
border-top: 1px solid #eee;
border-top: 1px solid $border-color-primary;
padding: 10px;
text-align: right;
width: 100%;

2
src/views/dashboard/configuration/ThirdPartyApp.vue
View File

@ -80,7 +80,7 @@ limitations under the License. -->
position: fixed;
bottom: 0;
right: 0;
border-top: 1px solid #eee;
border-top: 1px solid $border-color-primary;
padding: 10px;
text-align: right;
width: 100%;

2
src/views/dashboard/configuration/TimeRange.vue
View File

@ -147,7 +147,7 @@ limitations under the License. -->
position: fixed;
bottom: 0;
right: 0;
border-top: 1px solid #eee;
border-top: 1px solid $border-color-primary;
padding: 10px;
text-align: right;
width: 100%;

2
src/views/dashboard/configuration/Topology.vue
View File

@ -63,7 +63,7 @@ limitations under the License. -->
position: fixed;
bottom: 0;
right: 0;
border-top: 1px solid #eee;
border-top: 1px solid $border-color-primary;
padding: 10px;
text-align: right;
width: 100%;

6
src/views/dashboard/configuration/Widget.vue
View File

@ -201,7 +201,7 @@ limitations under the License. -->
.graph {
position: relative;
min-width: 1280px;
border: 1px solid #eee;
border: 1px solid $border-color-primary;
background-color: $theme-background;
}
@ -209,7 +209,7 @@ limitations under the License. -->
height: 25px;
line-height: 25px;
text-align: center;
background-color: aliceblue;
background-color: var(--sw-config-header);
font-size: $font-size-smaller;
position: relative;
}
@ -249,7 +249,7 @@ limitations under the License. -->
position: fixed;
bottom: 0;
right: 0;
border-top: 1px solid #eee;
border-top: 1px solid $border-color-primary;
padding: 10px;
text-align: right;
width: 100%;

3
src/views/dashboard/configuration/widget/metric/Index.vue
View File

@ -630,11 +630,10 @@ limitations under the License. -->
.expression-param {
display: inline-block;
width: 400px;
border: 1px solid #dcdfe6;
border: 1px solid $border-color;
cursor: text;
padding: 0 5px;
border-radius: 3px;
color: #606266;
outline: none;
margin-right: 5px;
min-height: 26px;

6
src/views/dashboard/controls/ContinuousProfiling.vue
View File

@ -75,7 +75,7 @@ limitations under the License. -->
.header {
padding: 10px;
font-size: $font-size-smaller;
border-bottom: 1px solid #dcdfe6;
border-bottom: 1px solid $border-color;
}
.tools {
@ -87,7 +87,7 @@ limitations under the License. -->
&:hover {
color: $active-color;
background-color: #eee;
background-color: $popper-hover-bg-color;
}
}
@ -95,6 +95,6 @@ limitations under the License. -->
font-weight: bold;
line-height: 40px;
padding: 0 10px;
border-bottom: 1px solid #dcdfe6;
border-bottom: 1px solid $border-color;
}
</style>

4
src/views/dashboard/controls/DemandLog.vue
View File

@ -69,7 +69,7 @@ limitations under the License. -->
.header {
padding: 10px;
font-size: $font-size-smaller;
border-bottom: 1px solid #dcdfe6;
border-bottom: 1px solid $border-color;
min-width: 1024px;
}
@ -82,7 +82,7 @@ limitations under the License. -->
&:hover {
color: $active-color;
background-color: #eee;
background-color: $popper-hover-bg-color;
}
}
</style>

4
src/views/dashboard/controls/Ebpf.vue
View File

@ -68,7 +68,7 @@ limitations under the License. -->
.header {
padding: 10px;
font-size: $font-size-smaller;
border-bottom: 1px solid #dcdfe6;
border-bottom: 1px solid $border-color;
}
.tools {
@ -80,7 +80,7 @@ limitations under the License. -->
&:hover {
color: $active-color;
background-color: #eee;
background-color: $popper-hover-bg-color;
}
}

4
src/views/dashboard/controls/Event.vue
View File

@ -80,7 +80,7 @@ limitations under the License. -->
.header {
padding: 10px;
font-size: $font-size-smaller;
border-bottom: 1px solid #dcdfe6;
border-bottom: 1px solid $border-color;
min-width: 1024px;
}
@ -93,7 +93,7 @@ limitations under the License. -->
&:hover {
color: $active-color;
background-color: #eee;
background-color: $popper-hover-bg-color;
}
}

4
src/views/dashboard/controls/Log.vue
View File

@ -77,7 +77,7 @@ limitations under the License. -->
.header {
padding: 10px;
font-size: $font-size-smaller;
border-bottom: 1px solid #dcdfe6;
border-bottom: 1px solid $border-color;
min-width: 1024px;
}
@ -90,7 +90,7 @@ limitations under the License. -->
&:hover {
color: $active-color;
background-color: #eee;
background-color: $popper-hover-bg-color;
}
}

6
src/views/dashboard/controls/NetworkProfiling.vue
View File

@ -67,7 +67,7 @@ limitations under the License. -->
.header {
padding: 10px;
font-size: $font-size-smaller;
border-bottom: 1px solid #dcdfe6;
border-bottom: 1px solid $border-color;
}
.tools {
@ -79,7 +79,7 @@ limitations under the License. -->
&:hover {
color: $active-color;
background-color: #eee;
background-color: $popper-hover-bg-color;
}
}
@ -87,6 +87,6 @@ limitations under the License. -->
font-weight: bold;
line-height: 40px;
padding: 0 10px;
border-bottom: 1px solid #dcdfe6;
border-bottom: 1px solid $border-color;
}
</style>

4
src/views/dashboard/controls/Profile.vue
View File

@ -68,7 +68,7 @@ limitations under the License. -->
.header {
padding: 10px;
font-size: $font-size-smaller;
border-bottom: 1px solid #dcdfe6;
border-bottom: 1px solid $border-color;
}
.tools {
@ -80,7 +80,7 @@ limitations under the License. -->
&:hover {
color: $active-color;
background-color: #eee;
background-color: $popper-hover-bg-color;
}
}

11
src/views/dashboard/controls/Tab.vue
View File

@ -302,15 +302,16 @@ limitations under the License. -->
height: 20px;
line-height: 20px;
outline: none;
color: #333;
color: $font-color;
font-style: normal;
overflow: hidden;
text-overflow: ellipsis;
margin-right: 20px;
background-color: $theme-background;
}
.tab-icons {
color: #333;
color: $font-color;
i {
margin-right: 3px;
@ -350,17 +351,17 @@ limitations under the License. -->
.tab-header {
justify-content: space-between;
width: 100%;
border-bottom: 1px solid #eee;
border-bottom: 1px solid $border-color-primary;
}
.vue-grid-layout {
background: #f7f9fa;
background: $layout-background;
height: auto !important;
}
.vue-grid-item:not(.vue-grid-placeholder) {
background: $theme-background;
box-shadow: 0 1px 4px 0 #00000029;
box-shadow: 0 0 3px 0 $box-shadow-color;
border-radius: 3px;
}

6
src/views/dashboard/controls/TaskTimeline.vue
View File

@ -67,7 +67,7 @@ limitations under the License. -->
.header {
padding: 10px;
font-size: $font-size-smaller;
border-bottom: 1px solid #dcdfe6;
border-bottom: 1px solid $border-color;
}
.tools {
@ -79,7 +79,7 @@ limitations under the License. -->
&:hover {
color: $active-color;
background-color: #eee;
background-color: $popper-hover-bg-color;
}
}
@ -87,6 +87,6 @@ limitations under the License. -->
font-weight: bold;
line-height: 40px;
padding: 0 10px;
border-bottom: 1px solid #dcdfe6;
border-bottom: 1px solid $border-color;
}
</style>

16
src/views/dashboard/controls/Text.vue
View File

@ -32,7 +32,7 @@ limitations under the License. -->
<div
class="body"
:style="{
backgroundColor: TextColors[graph.backgroundColor],
backgroundColor,
justifyContent: graph.textAlign,
}"
>
@ -40,7 +40,7 @@ limitations under the License. -->
:href="graph.url"
target="_blank"
:style="{
color: TextColors[graph.fontColor],
color: fontColor,
fontSize: graph.fontSize + 'px',
}"
>
@ -55,6 +55,8 @@ limitations under the License. -->
import { useI18n } from "vue-i18n";
import { useDashboardStore } from "@/store/modules/dashboard";
import { TextColors } from "@/views/dashboard/data";
import { useAppStoreWithOut } from "@/store/modules/app";
import { Themes } from "@/constants/data";
/*global defineProps */
const props = defineProps({
@ -65,9 +67,17 @@ limitations under the License. -->
activeIndex: { type: String, default: "" },
});
const { t } = useI18n();
const appStore = useAppStoreWithOut();
const graph = computed(() => props.data.graph || {});
const dashboardStore = useDashboardStore();
const backgroundColor = computed(
() => TextColors[graph.value.backgroundColor] || (appStore.theme === Themes.Dark ? "#212224" : "#fff"),
);
const fontColor = computed(
() => TextColors[graph.value.fontColor] || (appStore.theme === Themes.Dark ? "#fafbfc" : "#3d444f"),
);
function removeTopo() {
dashboardStore.removeControls(props.data);
}
@ -112,7 +122,7 @@ limitations under the License. -->
&:hover {
color: $active-color;
background-color: #eee;
background-color: $popper-hover-bg-color;
}
}
</style>

2
src/views/dashboard/controls/ThirdPartyApp.vue
View File

@ -103,7 +103,7 @@ limitations under the License. -->
&:hover {
color: $active-color;
background-color: #eee;
background-color: $popper-hover-bg-color;
}
}

2
src/views/dashboard/controls/TimeRange.vue
View File

@ -176,7 +176,7 @@ limitations under the License. -->
&:hover {
color: $active-color;
background-color: #eee;
background-color: $popper-hover-bg-color;
}
}
</style>

3
src/views/dashboard/controls/Topology.vue
View File

@ -59,7 +59,6 @@ limitations under the License. -->
</script>
<style lang="scss" scoped>
.topology {
// background-color: #333840;
width: 100%;
height: 100%;
font-size: $font-size-smaller;
@ -82,7 +81,7 @@ limitations under the License. -->
&:hover {
color: $active-color;
background-color: #eee;
background-color: $popper-hover-bg-color;
}
}

4
src/views/dashboard/controls/Trace.vue
View File

@ -76,7 +76,7 @@ limitations under the License. -->
.header {
padding: 10px;
font-size: $font-size-smaller;
border-bottom: 1px solid #dcdfe6;
border-bottom: 1px solid $border-color;
min-width: 1200px;
}
@ -89,7 +89,7 @@ limitations under the License. -->
&:hover {
color: $active-color;
background-color: #eee;
background-color: $popper-hover-bg-color;
}
}

4
src/views/dashboard/controls/Widget.vue
View File

@ -277,7 +277,7 @@ limitations under the License. -->
height: 30px;
padding: 5px;
width: 100%;
border-bottom: 1px solid #eee;
border-bottom: 1px solid $border-color-primary;
justify-content: space-between;
}
@ -294,7 +294,7 @@ limitations under the License. -->
&:hover {
color: $active-color;
background-color: #eee;
background-color: $popper-hover-bg-color;
}
}

4
src/views/dashboard/data.ts
View File

@ -306,9 +306,9 @@ export const TextColors: { [key: string]: string } = {
green: "#67C23A",
blue: "#409EFF",
red: "#F56C6C",
grey: "#909399",
grey: "#809399",
white: "#fff",
black: "#000",
black: "#303133",
orange: "#E6A23C",
purple: "#bf99f8",
};

8
src/views/dashboard/graphs/Bar.vue
View File

@ -24,6 +24,8 @@ limitations under the License. -->
import type { BarConfig, EventParams, RelatedTrace, Filters } from "@/types/dashboard";
import useLegendProcess from "@/hooks/useLegendProcessor";
import Legend from "./components/Legend.vue";
import { useAppStoreWithOut } from "@/store/modules/app";
import { Themes } from "@/constants/data";
/*global defineProps, defineEmits */
const emits = defineEmits(["click"]);
@ -46,6 +48,7 @@ limitations under the License. -->
default: () => ({}),
},
});
const appStore = useAppStoreWithOut();
const { showEchartsLegend, isRight, chartColors } = useLegendProcess(props.config.legend);
const option = computed(() => getOption());
@ -91,8 +94,11 @@ limitations under the License. -->
top: 0,
left: 0,
itemWidth: 12,
backgroundColor: appStore.theme === Themes.Dark ? "#333" : "#fff",
borderColor: appStore.theme === Themes.Dark ? "#333" : "#fff",
textStyle: {
color: "#333",
fontSize: 12,
color: appStore.theme === Themes.Dark ? "#eee" : "#333",
},
},
grid: {

2
src/views/dashboard/graphs/Card.vue
View File

@ -61,7 +61,7 @@ limitations under the License. -->
</script>
<style lang="scss" scoped>
.chart-card {
color: #333;
color: $font-color;
width: 100%;
height: 100%;
display: flex;

14
src/views/dashboard/graphs/Line.vue
View File

@ -31,6 +31,8 @@ limitations under the License. -->
import Legend from "./components/Legend.vue";
import useLegendProcess from "@/hooks/useLegendProcessor";
import { isDef } from "@/utils/is";
import { useAppStoreWithOut } from "@/store/modules/app";
import { Themes } from "@/constants/data";
/*global defineProps, defineEmits */
const emits = defineEmits(["click"]);
@ -40,7 +42,6 @@ limitations under the License. -->
default: () => ({}),
},
intervalTime: { type: Array as PropType<string[]>, default: () => [] },
theme: { type: String, default: "light" },
config: {
type: Object as PropType<
LineConfig & {
@ -62,6 +63,7 @@ limitations under the License. -->
}),
},
});
const appStore = useAppStoreWithOut();
const setRight = ref<boolean>(false);
const option = computed(() => getOption());
function getOption() {
@ -93,9 +95,11 @@ limitations under the License. -->
const color: string[] = chartColors(keys);
const tooltip = {
trigger: "axis",
backgroundColor: appStore.theme === Themes.Dark ? "#333" : "#fff",
borderColor: appStore.theme === Themes.Dark ? "#333" : "#fff",
textStyle: {
fontSize: 12,
color: "#333",
color: appStore.theme === Themes.Dark ? "#eee" : "#333",
},
enterable: true,
confine: true,
@ -108,9 +112,11 @@ limitations under the License. -->
confine: true,
extraCssText: `height: 20px; padding:0 2px;`,
trigger: "axis",
backgroundColor: appStore.theme === Themes.Dark ? "#666" : "#eee",
borderColor: appStore.theme === Themes.Dark ? "#666" : "#eee",
textStyle: {
fontSize: 12,
color: "#333",
color: appStore.theme === Themes.Dark ? "#eee" : "#333",
},
};
@ -125,7 +131,7 @@ limitations under the License. -->
left: 0,
itemWidth: 12,
textStyle: {
color: props.theme === "dark" ? "#fff" : "#333",
color: appStore.theme === Themes.Dark ? "#fff" : "#333",
},
},
grid: {

4
src/views/dashboard/graphs/Table.vue
View File

@ -106,12 +106,12 @@ limitations under the License. -->
.row:first-child {
div {
border-top: 1px solid $disabled-color;
background: #eee;
background-color: var(--border-color-primary);
}
}
.header {
color: #000;
color: var(--sw-table-color);
font-weight: bold;
}

10
src/views/dashboard/graphs/TopList.vue
View File

@ -141,7 +141,7 @@ limitations under the License. -->
.progress-bar {
font-size: $font-size-smaller;
color: #333;
color: $font-color;
}
.chart-slow-i {
@ -171,7 +171,7 @@ limitations under the License. -->
padding: 4px 10px 7px;
border-radius: 4px;
border: 1px solid #ddd;
color: #333;
color: $font-color;
background-color: $theme-background;
will-change: opacity, background-color;
transition: opacity 0.3s, background-color 0.3s;
@ -188,12 +188,12 @@ limitations under the License. -->
}
.operation-icon {
color: #333;
color: $font-color;
}
.operation {
padding: 5px 0;
color: #333;
color: $font-color;
cursor: pointer;
position: relative;
text-align: center;
@ -201,7 +201,7 @@ limitations under the License. -->
&:hover {
color: $active-color;
background-color: #eee;
background-color: $popper-hover-bg-color;
}
}
</style>

4
src/views/dashboard/panel/Layout.vue
View File

@ -80,13 +80,13 @@ limitations under the License. -->
</script>
<style lang="scss" scoped>
.vue-grid-layout {
background: #f7f9fa;
background: $layout-background;
height: auto !important;
}
.vue-grid-item:not(.vue-grid-placeholder) {
background-color: $theme-background;
box-shadow: 0 1px 4px 0 #00000029;
box-shadow: 0 0 3px 0 $box-shadow-color;
border-radius: 3px;
}

30
src/views/dashboard/panel/Tool.vue
View File

@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License. -->
<template>
<div class="dashboard-tool flex-h">
<div :class="isRelation ? 'flex-v' : 'flex-h'">
<div :class="isRelation ? 'flex-v' : 'flex-h'" class="tool-selectors">
<div class="flex-h">
<div class="selectors-item" v-if="key !== 10">
<span class="label">$Service</span>
@ -103,27 +103,24 @@ limitations under the License. -->
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item @click="clickIcons(t)" v-for="(t, index) in toolIcons" :key="index" :title="t.content">
<Icon class="mr-5" size="middle" :iconName="t.name" />
<Icon class="mr-5" size="sm" :iconName="t.name" />
<span>{{ t.content }}</span>
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<el-tooltip content="Apply" placement="bottom" effect="light">
<el-tooltip content="Apply" placement="bottom">
<i @click="applyDashboard">
<Icon class="icon-btn" size="sm" iconName="save" />
</i>
</el-tooltip>
</div>
<div class="switch">
<div class="ml-5">
<el-switch
v-model="dashboardStore.editMode"
active-text="E"
inactive-text="V"
size="small"
inline-prompt
active-color="#409eff"
inactive-color="#999"
@change="changeMode"
/>
</div>
@ -738,15 +735,15 @@ limitations under the License. -->
<style lang="scss" scoped>
.dashboard-tool {
text-align: right;
padding: 3px 5px 5px;
background: rgb(240 242 245);
border-bottom: 1px solid #dfe4e8;
padding: 5px;
background: $dashboard-tool-bg-color;
border-bottom: 1px solid $border-color;
justify-content: space-between;
}
.switch {
padding-top: 2px;
margin: 0 10px;
.tool-selectors {
align-items: center;
height: auto;
}
.label {
@ -761,6 +758,7 @@ limitations under the License. -->
.tools {
justify-content: space-between;
align-items: center;
height: auto;
}
@ -768,12 +766,12 @@ limitations under the License. -->
display: inline-block;
padding: 3px;
text-align: center;
border: 1px solid $disabled-color;
border: 1px solid var(--sw-icon-btn-border);
border-radius: 3px;
margin-left: 6px;
cursor: pointer;
background-color: #eee;
color: #666;
background-color: var(--sw-icon-btn-bg);
color: var(--sw-icon-btn-color);
font-size: $font-size-smaller;
}

4
src/views/dashboard/related/continuous-profiling/components/InstanceList.vue
View File

@ -149,14 +149,14 @@ limitations under the License. -->
font-weight: bold;
border-bottom: 1px solid rgb(0 0 0 / 7%);
padding: 10px 20px;
background-color: #f3f4f9;
background-color: var(--sw-table-header);
}
.settings {
padding: 1px 0;
border: 1px solid #666;
border-radius: 3px;
color: #666;
color: var(--text-color-placeholder);
cursor: pointer;
}

4
src/views/dashboard/related/continuous-profiling/components/Policy.vue
View File

@ -212,11 +212,11 @@ limitations under the License. -->
}
#uri-param {
border: 1px solid #dcdfe6;
border: 1px solid $border-color;
cursor: text;
padding: 0 5px;
border-radius: 4px;
color: #606266;
color: var(--sw-setting-color);
outline: none;
height: 100px;

8
src/views/dashboard/related/continuous-profiling/components/PolicyList.vue
View File

@ -147,7 +147,7 @@ limitations under the License. -->
width: 300px;
height: 98%;
overflow: auto;
border-right: 1px solid rgb(0 0 0 / 10%);
border-right: 1px solid var(--sw-trace-list-border);
}
.item span {
@ -159,7 +159,7 @@ limitations under the License. -->
border-bottom: 1px solid rgb(0 0 0 / 7%);
&.selected {
background-color: #ededed;
background-color: var(--sw-list-selected);
}
}
@ -184,14 +184,14 @@ limitations under the License. -->
.profile-tr {
&:hover {
background-color: rgb(0 0 0 / 4%);
background-color: var(--sw-list-hover);
}
}
.profile-t-tool {
padding: 10px 5px 10px 10px;
border-bottom: 1px solid rgb(0 0 0 / 7%);
background: #f3f4f9;
background-color: var(--sw-table-header);
width: 100%;
font-weight: bold;
}

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

@ -90,7 +90,7 @@ limitations under the License. -->
.header {
padding: 5px 20px 5px 10px;
font-size: $font-size-smaller;
border-bottom: 1px solid #dcdfe6;
border-bottom: 1px solid $border-color;
justify-content: space-between;
}

12
src/views/dashboard/related/ebpf/components/TaskList.vue
View File

@ -80,7 +80,7 @@ limitations under the License. -->
width: 300px;
height: calc(100% - 10px);
overflow: auto;
border-right: 1px solid rgb(0 0 0 / 10%);
border-right: 1px solid var(--sw-trace-list-border);
}
.item span {
@ -92,7 +92,7 @@ limitations under the License. -->
border-bottom: 1px solid rgb(0 0 0 / 7%);
&.selected {
background-color: #ededed;
background-color: var(--sw-list-selected);
}
}
@ -117,16 +117,16 @@ limitations under the License. -->
.profile-tr {
&:hover {
background-color: rgb(0 0 0 / 4%);
background-color: var(--sw-list-hover);
}
}
.profile-t-tool {
padding: 5px 10px;
font-weight: bold;
border-right: 1px solid rgb(0 0 0 / 7%);
border-bottom: 1px solid rgb(0 0 0 / 7%);
background: #f3f4f9;
border-right: 1px solid var(--sw-trace-list-border);
border-bottom: 1px solid var(--sw-trace-list-border);
background-color: var(--sw-table-header);
}
.profile-btn {

6
src/views/dashboard/related/log/LogTable/Index.vue
View File

@ -74,7 +74,7 @@ limitations under the License. -->
.log {
font-size: $font-size-smaller;
height: 100%;
border-bottom: 1px solid #eee;
border-bottom: 1px solid $border-color-primary;
width: 100%;
overflow: auto;
}
@ -85,7 +85,7 @@ limitations under the License. -->
user-select: none;
border-left: 0;
border-right: 0;
border-bottom: 1px solid rgb(0 0 0 / 10%);
border-bottom: 1px solid var(--sw-trace-list-border);
.traceId {
width: 140px;
@ -109,7 +109,7 @@ limitations under the License. -->
border: 1px solid transparent;
border-right: 1px dotted silver;
line-height: 30px;
background-color: #f3f4f9;
background-color: var(--sw-table-header);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

4
src/views/dashboard/related/network-profiling/components/ProcessTopology.vue
View File

@ -524,7 +524,7 @@ limitations under the License. -->
cursor: pointer;
transition: all 0.5ms linear;
border: 1px solid $disabled-color;
color: #666;
color: var(--text-color-placeholder);
display: inline-block;
padding: 5px;
border-radius: 3px;
@ -568,7 +568,7 @@ limitations under the License. -->
position: absolute;
visibility: hidden;
padding: 5px;
border: 1px solid #000;
border: var(--sw-topology-border);
border-radius: 3px;
background-color: $theme-background;
}

8
src/views/dashboard/related/network-profiling/components/Tasks.vue
View File

@ -216,7 +216,7 @@ limitations under the License. -->
width: 330px;
height: calc(100% - 10px);
overflow: auto;
border-right: 1px solid rgb(0 0 0 / 10%);
border-right: 1px solid var(--sw-trace-list-border);
}
.item span {
@ -228,7 +228,7 @@ limitations under the License. -->
border-bottom: 1px solid rgb(0 0 0 / 7%);
&.selected {
background-color: #ededed;
background-color: var(--sw-list-selected);
}
}
@ -253,14 +253,14 @@ limitations under the License. -->
.profile-tr {
&:hover {
background-color: rgb(0 0 0 / 4%);
background-color: var(--sw-list-hover);
}
}
.profile-t-tool {
padding: 10px 5px 10px 10px;
border-bottom: 1px solid rgb(0 0 0 / 7%);
background: #f3f4f9;
background-color: var(--sw-table-header);
width: 100%;
}

2
src/views/dashboard/related/network-profiling/components/TimeLine.vue
View File

@ -142,7 +142,7 @@ limitations under the License. -->
cursor: pointer;
transition: all 0.5ms linear;
border: 1px solid $disabled-color;
color: #666;
color: var(--text-color-placeholder);
display: inline-block;
padding: 5px;
border-radius: 3px;

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

@ -119,7 +119,7 @@ limitations under the License. -->
.header {
padding: 10px;
font-size: $font-size-smaller;
border-bottom: 1px solid #dcdfe6;
border-bottom: 1px solid $border-color;
}
.name {

17
src/views/dashboard/related/profile/components/SegmentList.vue
View File

@ -58,6 +58,7 @@ limitations under the License. -->
const key = computed(
() =>
(profileStore.currentSegment &&
profileStore.currentSegment.spans &&
profileStore.currentSegment.spans.length &&
profileStore.currentSegment.spans[0].segmentId) ||
"",
@ -82,7 +83,7 @@ limitations under the License. -->
.profile-t-wrapper {
overflow: auto;
flex-grow: 1;
border-right: 1px solid rgb(0 0 0 / 10%);
border-right: 1px solid var(--sw-trace-list-border);
}
.profile-t-loading {
@ -110,25 +111,25 @@ limitations under the License. -->
.profile-tr {
&:hover {
background-color: rgb(0 0 0 / 4%);
background-color: var(--sw-list-hover);
}
}
.profile-td {
padding: 5px 10px;
border-bottom: 1px solid rgb(0 0 0 / 7%);
border-bottom: 1px solid var(--sw-trace-list-border);
&.selected {
background-color: #ededed;
background-color: var(--sw-list-selected);
}
}
.profile-t-tool {
padding: 5px 10px;
font-weight: bold;
border-right: 1px solid rgb(0 0 0 / 7%);
border-bottom: 1px solid rgb(0 0 0 / 7%);
background: #f3f4f9;
border-right: 1px solid var(--sw-trace-list-border);
border-bottom: 1px solid var(--sw-trace-list-border);
background-color: var(--sw-table-header);
}
.log-item {
@ -144,6 +145,6 @@ limitations under the License. -->
}
.profile-segment {
border-top: 1px solid rgb(0 0 0 / 7%);
border-top: 1px solid var(--sw-trace-list-border);
}
</style>

4
src/views/dashboard/related/profile/components/Stack/Container.vue
View File

@ -107,7 +107,7 @@ limitations under the License. -->
user-select: none;
border-left: 0;
border-right: 0;
border-bottom: 1px solid rgb(0 0 0 / 10%);
border-bottom: 1px solid var(--sw-trace-list-border);
}
.profile-header div {
@ -115,7 +115,7 @@ limitations under the License. -->
padding: 0 4px;
border-right: 1px dotted silver;
line-height: 30px;
background-color: #f3f4f9;
background-color: var(--sw-table-header);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

30
src/views/dashboard/related/profile/components/Stack/Item.vue
View File

@ -14,7 +14,10 @@ See the License for the specific language governing permissions and
limitations under the License. -->
<template>
<div>
<div :class="['profile-item', 'level' + data.parentId]" :style="{ color: data.topDur ? '#448dfe' : '#3d444f' }">
<div
:class="['profile-item', 'level' + data.parentId]"
:style="{ color: data.topDur ? '#448dfe' : appStore.theme === Themes.Dark ? '#fafbfc' : '#3d444f' }"
>
<div
:class="['thread', 'level' + data.parentId]"
:style="{
@ -47,6 +50,8 @@ limitations under the License. -->
<script lang="ts">
import { ref, defineComponent, toRefs } from "vue";
import type { PropType } from "vue";
import { useAppStoreWithOut } from "@/store/modules/app";
import { Themes } from "@/constants/data";
const props = {
data: { type: Object as PropType<any>, default: () => ({}) },
@ -56,24 +61,25 @@ limitations under the License. -->
name: "TableItem",
props,
setup(props) {
const appStore = useAppStoreWithOut();
const displayChildren = ref<boolean>(true);
function toggle() {
displayChildren.value = !displayChildren.value;
}
return { toggle, displayChildren, ...toRefs(props) };
return { Themes, appStore, toggle, displayChildren, ...toRefs(props) };
},
});
</script>
<style lang="scss" scoped>
@import "./profile.scss";
@import url("./profile.scss");
.profile-item.level0 {
background: rgba(0, 0, 0, 0.04);
color: #448dfe;
background-color: var(--sw-list-hover);
color: var(--el-color-primary);
&:hover {
background: rgba(0, 0, 0, 0.04);
color: #448dfe;
background-color: var(--sw-list-hover);
color: var(--el-color-primary);
}
&::before {
@ -81,7 +87,7 @@ limitations under the License. -->
content: "";
width: 5px;
height: 100%;
background: #448dfe;
background-color: var(--el-color-primary);
left: 0;
}
}
@ -92,11 +98,11 @@ limitations under the License. -->
}
.profile-item.selected {
background: rgba(0, 0, 0, 0.04);
background-color: var(--sw-list-selected);
}
.profile-item:not(.level0):hover {
background: rgba(0, 0, 0, 0.04);
background-color: var(--sw-list-hover);
}
.profile-item > div {
@ -123,7 +129,7 @@ limitations under the License. -->
width: 100%;
height: 6px;
border-radius: 3px;
background: rgb(63, 177, 227);
background: var(--el-color-primary);
position: relative;
margin-top: 11px;
border: none;
@ -131,7 +137,7 @@ limitations under the License. -->
.inner-progress_bar {
position: absolute;
background: rgb(110, 64, 170);
background: rgb(110 64 170);
height: 4px;
border-radius: 2px;
left: 0;

16
src/views/dashboard/related/profile/components/TaskList.vue
View File

@ -168,10 +168,10 @@ limitations under the License. -->
.profile-td {
padding: 5px 10px;
border-bottom: 1px solid rgb(0 0 0 / 7%);
border-bottom: 1px solid var(--sw-trace-list-border);
&.selected {
background-color: #ededed;
background-color: var(--sw-list-selected);
}
}
@ -183,7 +183,7 @@ limitations under the License. -->
.profile-t-wrapper {
overflow: auto;
flex-grow: 1;
border-right: 1px solid rgb(0 0 0 / 10%);
border-right: 1px solid var(--sw-trace-list-border);
}
.profile-t {
@ -196,20 +196,20 @@ limitations under the License. -->
.profile-tr {
&:hover {
background-color: rgb(0 0 0 / 4%);
background-color: var(--sw-list-hover);
}
}
.profile-segment {
border-top: 1px solid rgb(0 0 0 / 7%);
border-top: 1px solid var(--sw-trace-list-border);
}
.profile-t-tool {
padding: 5px 10px;
font-weight: bold;
border-right: 1px solid rgb(0 0 0 / 7%);
border-bottom: 1px solid rgb(0 0 0 / 7%);
background: #f3f4f9;
border-right: 1px solid var(--sw-trace-list-border);
border-bottom: 1px solid var(--sw-trace-list-border);
background-color: var(--sw-table-header);
}
.log-item {

41
src/views/dashboard/related/topology/components/Graph.vue
View File

@ -43,6 +43,7 @@ limitations under the License. -->
:href="!n.type || n.type === `N/A` ? icons.UNDEFINED : icons[n.type.toUpperCase().replace('-', '')]"
/>
<text
class="node-text"
:x="n.x - (Math.min(n.name.length, 20) * 6) / 2 + 6"
:y="n.y + n.height + 8"
style="pointer-events: none"
@ -678,6 +679,12 @@ limitations under the License. -->
overflow: auto;
margin-top: 30px;
.node-text {
fill: var(--sw-topology-color);
font-size: 12px;
opacity: 0.9;
}
.svg-topology {
cursor: move;
background-color: $theme-background;
@ -687,7 +694,7 @@ limitations under the License. -->
position: absolute;
top: 10px;
left: 25px;
color: #666;
color: var(--sw-topology-color);
div {
margin-bottom: 8px;
@ -716,31 +723,26 @@ limitations under the License. -->
padding: 0 15px;
border-radius: 3px;
color: $disabled-color;
border: 1px solid #eee;
background-color: $theme-background;
box-shadow: #eee 1px 2px 10px;
border: 1px solid $border-color-primary;
background-color: var(--sw-topology-setting-bg);
box-shadow: var(--sw-topology-box-shadow);
transition: all 0.5ms linear;
&.dark {
background-color: #2b3037;
}
}
.label {
color: #666;
color: var(--sw-topology-color);
display: inline-block;
margin-right: 5px;
}
.operations-list {
position: absolute;
color: #333;
color: $font-color;
cursor: pointer;
border: var(--sw-topology-border);
border-radius: 3px;
background-color: $theme-background;
border-radius: 5px;
padding: 10px 0;
border: 1px solid #999;
box-shadow: #ddd 1px 2px 10px;
span {
display: block;
@ -752,7 +754,7 @@ limitations under the License. -->
span:hover {
color: $active-color;
background-color: #eee;
background-color: $popper-hover-bg-color;
}
}
@ -765,7 +767,7 @@ limitations under the License. -->
.switch-icon {
cursor: pointer;
transition: all 0.5ms linear;
background: rgb(0 0 0 / 30%);
background: var(--sw-topology-switch-icon);
color: $text-color;
display: inline-block;
padding: 2px 4px;
@ -784,13 +786,6 @@ limitations under the License. -->
.topo-node {
cursor: pointer;
}
.topo-text {
font-family: Lato, "Source Han Sans CN", "Microsoft YaHei", sans-serif;
fill: #ddd;
font-size: 11px;
opacity: 0.8;
}
}
@keyframes topo-dash {
from {
@ -810,7 +805,7 @@ limitations under the License. -->
position: absolute;
visibility: hidden;
padding: 5px;
border: 1px solid #000;
border: var(--sw-topology-border);
border-radius: 3px;
background-color: $theme-background;
}

12
src/views/dashboard/related/topology/components/PodTopology.vue
View File

@ -281,16 +281,16 @@ limitations under the License. -->
right: 10px;
width: 400px;
height: 600px;
border: 1px solid #eee;
background-color: $theme-background;
border: 1px solid $border-color-primary;
overflow: auto;
padding: 10px 15px;
border-radius: 3px;
color: $disabled-color;
background-color: var(--sw-topology-setting-bg);
box-shadow: var(--sw-topology-box-shadow);
transition: all 0.5ms linear;
z-index: 99;
text-align: left;
box-shadow: #eee 1px 2px 10px;
}
.tool {
@ -307,7 +307,7 @@ limitations under the License. -->
text-align: center;
cursor: pointer;
transition: all 0.5ms linear;
background: rgb(0 0 0 / 30%);
background: var(--sw-topology-switch-icon);
color: $text-color;
display: inline-block;
border-radius: 3px;
@ -322,7 +322,7 @@ limitations under the License. -->
.operations-list {
position: absolute;
padding: 10px 0;
color: #333;
color: $font-color;
cursor: pointer;
background-color: $theme-background;
border-radius: 3px;
@ -338,7 +338,7 @@ limitations under the License. -->
span:hover {
color: $active-color;
background-color: #eee;
background-color: $popper-hover-bg-color;
}
i {

5
src/views/dashboard/related/topology/components/Sankey.vue
View File

@ -24,6 +24,8 @@ limitations under the License. -->
import type { MetricConfigOpt } from "@/types/dashboard";
import { aggregation } from "@/hooks/useMetricsProcessor";
import { MetricModes } from "../../../data";
import { useAppStoreWithOut } from "@/store/modules/app";
import { Themes } from "@/constants/data";
/*global defineEmits, defineProps */
const props = defineProps({
@ -33,6 +35,7 @@ limitations under the License. -->
},
});
const emit = defineEmits(["click"]);
const appStore = useAppStoreWithOut();
const topologyStore = useTopologyStore();
const option = computed(() => getOption());
@ -52,7 +55,7 @@ limitations under the License. -->
data: topologyStore.nodes,
links: topologyStore.calls,
label: {
color: "#666",
color: appStore.theme === Themes.Dark ? "#ccc" : "#666",
formatter: (param: any) => param.data.name,
},
color: ["#6be6c1", "#3fcfdc", "#626c91", "#3fbcde", "#a0a7e6", "#3fa9e1", "#96dee8", "#bf99f8"],

4
src/views/dashboard/related/topology/components/Settings.vue
View File

@ -640,14 +640,14 @@ limitations under the License. -->
}
.title {
color: #666;
color: var(--sw-topology-color);
margin-bottom: 0;
}
.label {
font-size: $font-size-smaller;
margin-top: 10px;
color: #666;
color: var(--sw-topology-color);
}
.legend-btn {

1
src/views/dashboard/related/topology/components/utils/layout.ts
View File

@ -19,7 +19,6 @@ import type { Node, Call } from "@/types/topology";
export function layout(levels: Node[][], calls: Call[], radius: number) {
// precompute level depth
console.log(levels);
levels.forEach((l: Node[], i: number) => l.forEach((n: any) => n && (n.level = i)));
const nodes: Node[] = levels.reduce((a, x) => a.concat(x), []);

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

@ -173,13 +173,13 @@ limitations under the License. -->
.trace-detail-wrapper {
font-size: $font-size-smaller;
padding: 5px 10px;
border-bottom: 1px solid #eee;
border-bottom: 1px solid $border-color-primary;
width: 100%;
height: 95px;
.grey {
color: $text-color;
background-color: #448dfe;
color: #fff;
background-color: $active-background;
}
.ghost {

4
src/views/dashboard/related/trace/Header.vue
View File

@ -31,7 +31,7 @@ limitations under the License. -->
@change="changeLatency"
class="ml-10"
/>
<el-popover trigger="hover" width="250" placement="bottom" effect="light">
<el-popover trigger="hover" width="250" placement="bottom">
<template #reference>
<div class="cp conditions-popup">
<Icon iconName="conditions" size="middle" />
@ -52,7 +52,7 @@ limitations under the License. -->
</div>
</div>
</el-popover>
<el-popover trigger="hover" width="250" placement="bottom" effect="light">
<el-popover trigger="hover" width="250" placement="bottom">
<template #reference>
<div class="cp metric-value">
<Icon iconName="info_outline" size="middle" />

2
src/views/dashboard/related/trace/Index.vue
View File

@ -51,7 +51,7 @@ limitations under the License. -->
.header {
padding: 10px;
font-size: $font-size-smaller;
border-bottom: 1px solid #dcdfe6;
border-bottom: 1px solid $border-color;
min-width: 1200px;
}

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

@ -163,7 +163,7 @@ limitations under the License. -->
.trace-t-wrapper {
overflow: auto;
border-right: 1px solid rgb(0 0 0 / 10%);
border-right: 1px solid var(--sw-trace-list-border);
}
.trace-t-loading {
@ -191,21 +191,21 @@ limitations under the License. -->
.trace-tr {
&:hover {
background-color: rgb(0 0 0 / 4%);
background-color: var(--sw-list-hover);
}
}
.trace-td {
padding: 5px;
border-bottom: 1px solid rgb(0 0 0 / 7%);
border-bottom: 1px solid var(--sw-trace-list-border);
&.selected {
background-color: #ededed;
background-color: var(--sw-list-selected);
}
}
.trace-success {
border-left: 4px solid rgb(46 47 51 / 10%);
border-left: 4px solid var(--sw-trace-success);
}
.trace-warning {

17
src/views/dashboard/related/trace/components/D3Graph/Index.vue
View File

@ -28,6 +28,7 @@ limitations under the License. -->
import TreeGraph from "../../utils/d3-trace-tree";
import type { Span, Ref } from "@/types/trace";
import SpanDetail from "./SpanDetail.vue";
import { useAppStoreWithOut } from "@/store/modules/app";
/* global defineProps, Nullable, defineExpose,Recordable*/
const props = defineProps({
@ -35,6 +36,7 @@ limitations under the License. -->
traceId: { type: String, default: "" },
type: { type: String, default: "List" },
});
const appStore = useAppStoreWithOut();
const loading = ref<boolean>(false);
const showDetail = ref<boolean>(false);
const fixSpansSize = ref<number>(0);
@ -289,6 +291,17 @@ limitations under the License. -->
});
},
);
watch(
() => appStore.theme,
() => {
tree.value.init({ label: "TRACE_ROOT", children: segmentId.value }, props.data, fixSpansSize.value);
tree.value.draw(() => {
setTimeout(() => {
loading.value = false;
}, 200);
});
},
);
</script>
<style lang="scss" scoped>
.d3-graph {
@ -301,12 +314,12 @@ limitations under the License. -->
}
.trace-node-container {
fill: rgba(0, 0, 0, 0);
fill: rgb(0 0 0 / 0%);
stroke-width: 5px;
cursor: pointer;
&:hover {
fill: rgba(0, 0, 0, 0.05);
fill: rgb(0 0 0 / 5%);
}
}

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

@ -142,6 +142,7 @@ limitations under the License. -->
/*global defineProps, Nullable, Recordable */
const props = defineProps({
currentSpan: { type: Object as PropType<Recordable>, default: () => ({}) },
traceId: { type: String, default: "" },
});
const { t } = useI18n();
const traceStore = useTraceStore();
@ -167,7 +168,7 @@ limitations under the License. -->
const res = await traceStore.getSpanLogs({
condition: {
relatedTrace: {
traceId: props.currentSpan.traceId,
traceId: props.currentSpan.traceId || props.traceId,
segmentId: props.currentSpan.segmentId,
spanId: props.currentSpan.spanId,
},

8
src/views/dashboard/related/trace/components/Table/Index.vue
View File

@ -17,7 +17,13 @@ limitations under the License. -->
<div class="trace-t-loading" v-show="loading">
<Icon iconName="spinner" size="sm" />
</div>
<TableContainer :tableData="tableData" type="table" :headerType="headerType" @select="handleSelectSpan">
<TableContainer
:tableData="tableData"
type="table"
:headerType="headerType"
:traceId="traceId"
@select="handleSelectSpan"
>
<div class="trace-tips" v-if="!tableData.length">{{ $t("noData") }}</div>
</TableContainer>
</div>

6
src/views/dashboard/related/trace/components/Table/TableContainer.vue
View File

@ -41,6 +41,7 @@ limitations under the License. -->
</div>
<TableItem
:method="method"
:traceId="traceId"
v-for="(item, index) in tableData"
:data="item"
:key="'key' + index"
@ -63,6 +64,7 @@ limitations under the License. -->
tableData: { type: Array as PropType<Recordable>, default: () => [] },
type: { type: String, default: "" },
headerType: { type: String, default: "" },
traceId: { type: String, default: "" },
});
const emits = defineEmits(["select"]);
const method = ref<number>(300);
@ -165,12 +167,12 @@ limitations under the License. -->
user-select: none;
border-left: 0;
border-right: 0;
border-bottom: 1px solid rgb(0 0 0 / 10%);
border-bottom: 1px solid var(--sw-trace-list-border);
}
.trace-header div {
display: inline-block;
background-color: #f3f4f9;
background-color: var(--sw-table-header);
padding: 0 4px;
border: 1px solid transparent;
border-right: 1px dotted silver;

40
src/views/dashboard/related/trace/components/Table/TableItem.vue
View File

@ -137,17 +137,18 @@ limitations under the License. -->
/>
</div>
<el-dialog v-model="showDetail" :destroy-on-close="true" fullscreen @closed="showDetail = false">
<SpanDetail :currentSpan="data" />
<SpanDetail :currentSpan="data" :traceId="traceId" />
</el-dialog>
</div>
</template>
<script lang="ts">
import { useI18n } from "vue-i18n";
import { ref, computed, defineComponent } from "vue";
import { ref, computed, defineComponent, watch } from "vue";
import type { PropType } from "vue";
import SpanDetail from "../D3Graph/SpanDetail.vue";
import { dateFormat } from "@/utils/dateFormat";
import { useAppStoreWithOut } from "@/store/modules/app";
import { Themes } from "@/constants/data";
/*global Recordable*/
const props = {
@ -155,6 +156,7 @@ limitations under the License. -->
method: { type: Number, default: 0 },
type: { type: String, default: "" },
headerType: { type: String, default: "" },
traceId: { type: String, traceId: "" },
};
export default defineComponent({
name: "TableItem",
@ -201,12 +203,12 @@ limitations under the License. -->
}
const items: any = document.querySelectorAll(".trace-item");
for (const item of items) {
item.style.background = "#fff";
item.style.background = appStore.theme === Themes.Dark ? "#212224" : "#fff";
}
dom.style.background = "rgba(0, 0, 0, 0.1)";
dom.style.background = appStore.theme === Themes.Dark ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.1)";
const p: any = document.getElementsByClassName("profiled")[0];
if (p) {
p.style.background = "#eee";
p.style.background = appStore.theme === Themes.Dark ? "#333" : "#eee";
}
}
function selectSpan(event: Recordable) {
@ -232,6 +234,19 @@ limitations under the License. -->
showSelectSpan(dom);
showDetail.value = true;
}
watch(
() => appStore.theme,
() => {
const items: any = document.querySelectorAll(".trace-item");
for (const item of items) {
item.style.background = appStore.theme === Themes.Dark ? "#212224" : "#fff";
}
const p: any = document.getElementsByClassName("profiled")[0];
if (p) {
p.style.background = appStore.theme === Themes.Dark ? "#333" : "#eee";
}
},
);
return {
displayChildren,
outterPercent,
@ -272,7 +287,8 @@ limitations under the License. -->
}
.profiled {
background-color: #eee;
// background-color: #eee;
background-color: var(--sw-table-header);
position: relative;
}
@ -285,10 +301,10 @@ limitations under the License. -->
padding: 10px;
border-radius: 5px;
border: 1px solid $disabled-color;
background-color: #333;
background-color: $font-color;
color: $text-color;
text-align: center;
box-shadow: #eee 1px 2px 10px;
box-shadow: var(--box-shadow-color) 0 2px 3px;
display: none;
}
@ -297,8 +313,8 @@ limitations under the License. -->
position: absolute;
left: 250px;
top: 20px;
border: 6px solid #333;
border-color: transparent transparent #333;
border: 6px solid $font-color;
border-color: transparent transparent $font-color;
display: none;
}
@ -320,11 +336,11 @@ limitations under the License. -->
}
.trace-item.selected {
background: rgb(0 0 0 / 4%);
background-color: var(--sw-list-selected);
}
.trace-item:not(.level0):hover {
background: rgb(0 0 0 / 4%);
background-color: var(--sw-list-hover);
}
.trace-item > div {

33
src/views/dashboard/related/trace/utils/d3-trace-list.ts
View File

@ -20,6 +20,8 @@ import d3tip from "d3-tip";
import type { Trace } from "@/types/trace";
import dayjs from "dayjs";
import icons from "@/assets/img/icons";
import { useAppStoreWithOut } from "@/store/modules/app";
import { Themes } from "@/constants/data";
export default class ListGraph {
private barHeight = 48;
@ -127,6 +129,7 @@ export default class ListGraph {
}
update(source: Recordable, callback: Function) {
const t = this;
const appStore = useAppStoreWithOut();
const nodes = this.root.descendants();
let index = -1;
this.root.eachBefore((n: Recordable) => {
@ -166,7 +169,7 @@ export default class ListGraph {
.attr("width", 16)
.attr("height", 16)
.attr("x", 6)
.attr("y", -10)
.attr("y", -8)
.attr("xlink:href", (d: any) =>
d.data.type === "Entry" ? icons.ENTRY : d.data.type === "Exit" ? icons.EXIT : "",
)
@ -186,7 +189,7 @@ export default class ListGraph {
.attr("width", 16)
.attr("height", 16)
.attr("x", 6)
.attr("y", -10)
.attr("y", -8)
.attr("xlink:href", (d: any) => {
const key = (d.data.refs || []).findIndex((d: { type: string }) => d.type === "CROSS_THREAD");
return key > -1 ? icons.STREAM : "";
@ -214,14 +217,14 @@ export default class ListGraph {
.append("text")
.attr("x", 13)
.attr("y", 5)
.attr("fill", "#E54C17")
.attr("fill", appStore.theme === Themes.Dark ? "#666" : "#E54C17")
.html((d: Recordable) => (d.data.isError ? "◉" : ""));
nodeEnter
.append("text")
.attr("class", "node-text")
.attr("x", 35)
.attr("y", -6)
.attr("fill", "#333")
.attr("fill", appStore.theme === Themes.Dark ? "#eee" : "#333")
.html((d: Recordable) => {
if (d.data.label === "TRACE_ROOT") {
return "";
@ -242,7 +245,7 @@ export default class ListGraph {
})
.attr("cy", -5)
.attr("fill", "none")
.attr("stroke", "#e66")
.attr("stroke", appStore.theme === Themes.Dark ? "#666" : "#e66")
.style("opacity", (d: Recordable) => {
const events = d.data.attachedEvents;
if (events && events.length) {
@ -255,7 +258,7 @@ export default class ListGraph {
.append("text")
.attr("x", 267)
.attr("y", -1)
.attr("fill", "#e66")
.attr("fill", appStore.theme === Themes.Dark ? "#666" : "#e66")
.style("font-size", "10px")
.text((d: Recordable) => {
const events = d.data.attachedEvents;
@ -270,7 +273,7 @@ export default class ListGraph {
.attr("class", "node-text")
.attr("x", 35)
.attr("y", 12)
.attr("fill", "#ccc")
.attr("fill", appStore.theme === Themes.Dark ? "#777" : "#ccc")
.style("font-size", "11px")
.text(
(d: Recordable) =>
@ -305,11 +308,15 @@ export default class ListGraph {
.style("opacity", 1);
nodeEnter
.append("circle")
.attr("r", 3)
.attr("r", appStore.theme === Themes.Dark ? 4 : 3)
.style("cursor", "pointer")
.attr("stroke-width", 2.5)
.attr("stroke-width", appStore.theme === Themes.Dark ? 3 : 2.5)
.attr("fill", (d: Recordable) =>
d._children ? `${this.sequentialScale(this.list.indexOf(d.data.serviceCode))}` : "rbga(0,0,0,0)",
d._children
? `${this.sequentialScale(this.list.indexOf(d.data.serviceCode))}`
: appStore.theme === Themes.Dark
? "#eee"
: "rbga(0,0,0,0)",
)
.style("stroke", (d: Recordable) =>
d.data.label === "TRACE_ROOT" ? "" : `${this.sequentialScale(this.list.indexOf(d.data.serviceCode))}`,
@ -320,7 +327,7 @@ export default class ListGraph {
node
.transition()
.duration(400)
.attr("transform", (d: Recordable) => `translate(${d.y + 5},${d.x})`)
.attr("transform", (d: Recordable) => `translate(${d.y + 3},${d.x})`)
.style("opacity", 1)
.select("circle")
.attr("fill", (d: Recordable) =>
@ -343,8 +350,8 @@ export default class ListGraph {
.enter()
.insert("path", "g")
.attr("class", "trace-link")
.attr("fill", "rgba(0,0,0,0)")
.attr("stroke", "rgba(0, 0, 0, 0.1)")
.attr("fill", appStore.theme === Themes.Dark ? "rgba(244,244,244,0)" : "rgba(0,0,0,0)")
.attr("stroke", appStore.theme === Themes.Dark ? "rgba(244,244,244,0.4)" : "rgba(0, 0, 0, 0.1)")
.attr("stroke-width", 2)
.attr("transform", `translate(5, 0)`)
.attr("d", () => {

11
src/views/dashboard/related/trace/utils/d3-trace-tree.ts
View File

@ -18,6 +18,8 @@
import * as d3 from "d3";
import d3tip from "d3-tip";
import type { Trace, Span } from "@/types/trace";
import { useAppStoreWithOut } from "@/store/modules/app";
import { Themes } from "@/constants/data";
export default class TraceMap {
private i = 0;
@ -132,6 +134,7 @@ export default class TraceMap {
this.update(this.root);
}
update(source: Recordable) {
const appStore = useAppStoreWithOut();
const that: any = this;
const treeData = this.treemap(this.root);
const nodes = treeData.descendants(),
@ -237,7 +240,9 @@ export default class TraceMap {
? (d.data.isError ? "◉ " : "") + d.data.label.slice(0, 10) + "..."
: (d.data.isError ? "◉ " : "") + d.data.label,
)
.style("fill", (d: Recordable) => (!d.data.isError ? "#3d444f" : "#E54C17"));
.style("fill", (d: Recordable) =>
!d.data.isError ? (appStore.theme === Themes.Dark ? "#eee" : "#3d444f") : "#E54C17",
);
nodeEnter
.append("text")
.attr("class", "node-text")
@ -245,7 +250,7 @@ export default class TraceMap {
return d.children || d._children ? -45 : 15;
})
.attr("dy", "1em")
.attr("fill", "#bbb")
.attr("fill", appStore.theme === Themes.Dark ? "#888" : "#bbb")
.attr("text-anchor", function (d: Recordable) {
return d.children || d._children ? "end" : "start";
})
@ -330,7 +335,7 @@ export default class TraceMap {
const o = { x: source.x0, y: source.y0 };
return diagonal(o, o);
})
.attr("stroke", "rgba(0, 0, 0, 0.1)")
.attr("stroke", appStore.theme === Themes.Dark ? "rgba(255, 255, 255, 0.4)" : "rgba(0, 0, 0, 0.1)")
.style("stroke-width", 1.5)
.style("fill", "none");

2
vite.config.ts
View File

@ -64,7 +64,7 @@ export default ({ mode }: ConfigEnv): UserConfig => {
preprocessorOptions: {
//define global scss variable
scss: {
additionalData: `@use "@/styles/light.scss" as *;`,
additionalData: `@use "@/styles/theme.scss" as *;`,
},
},
},