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

5
src/App.vue
View File

@ -27,10 +27,11 @@ limitations under the License. -->
} }
}, 500); }, 500);
</script> </script>
<style> <style lang="scss">
#app { #app {
color: #2c3e50; color: $font-color;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
background-color: $layout-background;
} }
</style> </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; border: 1px solid #ddd;
background: $theme-background; background: $theme-background;
border-radius: 3px; border-radius: 3px;
color: #000; color: $font-color;
font-size: $font-size-smaller; font-size: $font-size-smaller;
height: 24px; height: 24px;
@ -112,7 +112,7 @@ limitations under the License. -->
width: 100%; width: 100%;
padding: 2px 10px; padding: 2px 10px;
overflow: auto; overflow: auto;
color: #606266; color: var(--sw-setting-color);
position: relative; position: relative;
&:hover { &:hover {
@ -133,7 +133,7 @@ limitations under the License. -->
} }
.opt-wrapper { .opt-wrapper {
color: #606266; color: var(--sw-setting-color);
position: absolute; position: absolute;
top: 26px; top: 26px;
left: 0; left: 0;

5
src/constants/data.ts
View File

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

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

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

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

@ -48,11 +48,14 @@ limitations under the License. -->
@input="changeTimeRange" @input="changeTimeRange"
/> />
<span> UTC{{ appStore.utcHour >= 0 ? "+" : "" }}{{ `${appStore.utcHour}:${appStore.utcMin}` }} </span> <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"> <span title="refresh" class="ghost ml-5 cp" @click="handleReload">
<Icon iconName="retry" :loading="appStore.autoRefresh" class="middle" /> <Icon iconName="retry" :loading="appStore.autoRefresh" class="middle" />
</span> </span>
<span class="version ml-5 cp"> <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> <template #reference>
<span> <span>
<Icon iconName="info_outline" size="middle" /> <Icon iconName="info_outline" size="middle" />
@ -74,7 +77,8 @@ limitations under the License. -->
import { MetricCatalog } from "@/views/dashboard/data"; import { MetricCatalog } from "@/views/dashboard/data";
import type { DashboardItem } from "@/types/dashboard"; import type { DashboardItem } from "@/types/dashboard";
import router from "@/router"; 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 */ /*global Indexable */
const { t, te } = useI18n(); const { t, te } = useI18n();
@ -84,11 +88,27 @@ limitations under the License. -->
const pathNames = ref<{ path?: string; name: string; selected: boolean }[][]>([]); const pathNames = ref<{ path?: string; name: string; selected: boolean }[][]>([]);
const timeRange = ref<number>(0); const timeRange = ref<number>(0);
const pageTitle = ref<string>(""); const pageTitle = ref<string>("");
const theme = ref<boolean>(true);
changeTheme();
resetDuration(); resetDuration();
getVersion(); getVersion();
getNavPaths(); 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[]) { function getName(list: any[]) {
return list.find((d: any) => d.selected) || {}; return list.find((d: any) => d.selected) || {};
} }
@ -287,21 +307,16 @@ limitations under the License. -->
padding: 5px; padding: 5px;
text-align: left; text-align: left;
justify-content: space-between; justify-content: space-between;
background-color: #fafbfc; background-color: $theme-background;
border-bottom: 1px solid #dfe4e8; border-bottom: 1px solid $border-color;
color: #222; color: $font-color;
font-size: $font-size-smaller; font-size: $font-size-smaller;
} }
.nav-bar.dark {
background-color: #333840;
border-bottom: 1px solid #252a2f;
color: #fafbfc;
}
.title { .title {
font-size: $font-size-normal; font-size: $font-size-normal;
font-weight: 500; font-weight: 500;
padding-top: 5px;
} }
.nav-tabs { .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 dateFormatStep, { dateFormatTime } from "@/utils/dateFormat";
import { TimeType } from "@/constants/data"; import { TimeType } from "@/constants/data";
import type { MenuOptions, SubItem } from "@/types/app"; import type { MenuOptions, SubItem } from "@/types/app";
import { Themes } from "@/constants/data";
/*global Nullable*/ /*global Nullable*/
interface AppState { interface AppState {
durationRow: Recordable; durationRow: Recordable;
@ -36,6 +37,7 @@ interface AppState {
isMobile: boolean; isMobile: boolean;
reloadTimer: Nullable<IntervalHandle>; reloadTimer: Nullable<IntervalHandle>;
allMenus: MenuOptions[]; allMenus: MenuOptions[];
theme: string;
} }
export const appStore = defineStore({ export const appStore = defineStore({
@ -56,6 +58,7 @@ export const appStore = defineStore({
isMobile: false, isMobile: false,
reloadTimer: null, reloadTimer: null,
allMenus: [], allMenus: [],
theme: Themes.Dark,
}), }),
getters: { getters: {
duration(): Duration { duration(): Duration {
@ -126,6 +129,9 @@ export const appStore = defineStore({
updateDurationRow(data: Duration) { updateDurationRow(data: Duration) {
this.durationRow = data; this.durationRow = data;
}, },
setTheme(data: string) {
this.theme = data;
},
setUTC(utcHour: number, utcMin: number): void { setUTC(utcHour: number, utcMin: number): void {
this.runEventStack(); this.runEventStack();
this.utcMin = utcMin; this.utcMin = utcMin;

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

@ -163,7 +163,7 @@ export const profileStore = defineStore({
return res.data; return res.data;
}, },
async getSegmentSpans(params: { segmentId: string }) { async getSegmentSpans(params: { segmentId: string }) {
if (!params.segmentId) { if (!(params && params.segmentId)) {
return new Promise((resolve) => resolve({})); return new Promise((resolve) => resolve({}));
} }
const res: AxiosResponse = await graphql.query("queryProfileSegment").params(params); 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 { .el-drawer__header {
margin-bottom: 0; margin-bottom: 0;
padding-left: 10px; padding-left: 10px;
@ -173,9 +161,10 @@ pre {
div.vis-tooltip { div.vis-tooltip {
max-width: 600px; max-width: 600px;
overflow: hidden; overflow: hidden;
background-color: $theme-background !important; background-color: var(--vis-tooltip-bg) !important;
white-space: normal !important; white-space: normal !important;
font-size: $font-size-smaller !important; font-size: $font-size-smaller !important;
color: var(--font-color) !important;
} }
.vis-item { .vis-item {
@ -187,13 +176,13 @@ div.vis-tooltip {
background-color: #e66; background-color: #e66;
opacity: 0.8; opacity: 0.8;
border-color: #e66; border-color: #e66;
color: $text-color !important; color: var(--sw-event-vis-selected) !important;
} }
.vis-item.Normal { .vis-item.Normal {
background-color: #fac858; background-color: #fac858;
border-color: #fac858; border-color: #fac858;
color: #666 !important; color: var(--sw-event-vis-selected) !important;
} }
.vis-item .vis-item-content { .vis-item .vis-item-content {
@ -202,7 +191,11 @@ div.vis-tooltip {
.vis-item.vis-selected.Error, .vis-item.vis-selected.Error,
.vis-item.vis-selected.Normal { .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 { .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 { .category {
flex-wrap: wrap; flex-wrap: wrap;
border-right: 1px solid #ddd; border-right: 1px solid var(--sw-marketplace-border);
align-content: flex-start; align-content: flex-start;
height: 100%; height: 100%;
overflow: auto; overflow: auto;

4
src/views/Settings.vue
View File

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -68,7 +68,7 @@ limitations under the License. -->
.header { .header {
padding: 10px; padding: 10px;
font-size: $font-size-smaller; font-size: $font-size-smaller;
border-bottom: 1px solid #dcdfe6; border-bottom: 1px solid $border-color;
} }
.tools { .tools {
@ -80,7 +80,7 @@ limitations under the License. -->
&:hover { &:hover {
color: $active-color; 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; height: 20px;
line-height: 20px; line-height: 20px;
outline: none; outline: none;
color: #333; color: $font-color;
font-style: normal; font-style: normal;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
margin-right: 20px; margin-right: 20px;
background-color: $theme-background;
} }
.tab-icons { .tab-icons {
color: #333; color: $font-color;
i { i {
margin-right: 3px; margin-right: 3px;
@ -350,17 +351,17 @@ limitations under the License. -->
.tab-header { .tab-header {
justify-content: space-between; justify-content: space-between;
width: 100%; width: 100%;
border-bottom: 1px solid #eee; border-bottom: 1px solid $border-color-primary;
} }
.vue-grid-layout { .vue-grid-layout {
background: #f7f9fa; background: $layout-background;
height: auto !important; height: auto !important;
} }
.vue-grid-item:not(.vue-grid-placeholder) { .vue-grid-item:not(.vue-grid-placeholder) {
background: $theme-background; background: $theme-background;
box-shadow: 0 1px 4px 0 #00000029; box-shadow: 0 0 3px 0 $box-shadow-color;
border-radius: 3px; border-radius: 3px;
} }

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

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

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

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

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

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

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

@ -59,7 +59,6 @@ limitations under the License. -->
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.topology { .topology {
// background-color: #333840;
width: 100%; width: 100%;
height: 100%; height: 100%;
font-size: $font-size-smaller; font-size: $font-size-smaller;
@ -82,7 +81,7 @@ limitations under the License. -->
&:hover { &:hover {
color: $active-color; 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 { .header {
padding: 10px; padding: 10px;
font-size: $font-size-smaller; font-size: $font-size-smaller;
border-bottom: 1px solid #dcdfe6; border-bottom: 1px solid $border-color;
min-width: 1200px; min-width: 1200px;
} }
@ -89,7 +89,7 @@ limitations under the License. -->
&:hover { &:hover {
color: $active-color; 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; height: 30px;
padding: 5px; padding: 5px;
width: 100%; width: 100%;
border-bottom: 1px solid #eee; border-bottom: 1px solid $border-color-primary;
justify-content: space-between; justify-content: space-between;
} }
@ -294,7 +294,7 @@ limitations under the License. -->
&:hover { &:hover {
color: $active-color; 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", green: "#67C23A",
blue: "#409EFF", blue: "#409EFF",
red: "#F56C6C", red: "#F56C6C",
grey: "#909399", grey: "#809399",
white: "#fff", white: "#fff",
black: "#000", black: "#303133",
orange: "#E6A23C", orange: "#E6A23C",
purple: "#bf99f8", 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 type { BarConfig, EventParams, RelatedTrace, Filters } from "@/types/dashboard";
import useLegendProcess from "@/hooks/useLegendProcessor"; import useLegendProcess from "@/hooks/useLegendProcessor";
import Legend from "./components/Legend.vue"; import Legend from "./components/Legend.vue";
import { useAppStoreWithOut } from "@/store/modules/app";
import { Themes } from "@/constants/data";
/*global defineProps, defineEmits */ /*global defineProps, defineEmits */
const emits = defineEmits(["click"]); const emits = defineEmits(["click"]);
@ -46,6 +48,7 @@ limitations under the License. -->
default: () => ({}), default: () => ({}),
}, },
}); });
const appStore = useAppStoreWithOut();
const { showEchartsLegend, isRight, chartColors } = useLegendProcess(props.config.legend); const { showEchartsLegend, isRight, chartColors } = useLegendProcess(props.config.legend);
const option = computed(() => getOption()); const option = computed(() => getOption());
@ -91,8 +94,11 @@ limitations under the License. -->
top: 0, top: 0,
left: 0, left: 0,
itemWidth: 12, itemWidth: 12,
backgroundColor: appStore.theme === Themes.Dark ? "#333" : "#fff",
borderColor: appStore.theme === Themes.Dark ? "#333" : "#fff",
textStyle: { textStyle: {
color: "#333", fontSize: 12,
color: appStore.theme === Themes.Dark ? "#eee" : "#333",
}, },
}, },
grid: { grid: {

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

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

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

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

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

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

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

@ -80,13 +80,13 @@ limitations under the License. -->
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.vue-grid-layout { .vue-grid-layout {
background: #f7f9fa; background: $layout-background;
height: auto !important; height: auto !important;
} }
.vue-grid-item:not(.vue-grid-placeholder) { .vue-grid-item:not(.vue-grid-placeholder) {
background-color: $theme-background; background-color: $theme-background;
box-shadow: 0 1px 4px 0 #00000029; box-shadow: 0 0 3px 0 $box-shadow-color;
border-radius: 3px; 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. --> limitations under the License. -->
<template> <template>
<div class="dashboard-tool flex-h"> <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="flex-h">
<div class="selectors-item" v-if="key !== 10"> <div class="selectors-item" v-if="key !== 10">
<span class="label">$Service</span> <span class="label">$Service</span>
@ -103,27 +103,24 @@ limitations under the License. -->
<template #dropdown> <template #dropdown>
<el-dropdown-menu> <el-dropdown-menu>
<el-dropdown-item @click="clickIcons(t)" v-for="(t, index) in toolIcons" :key="index" :title="t.content"> <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> <span>{{ t.content }}</span>
</el-dropdown-item> </el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</template> </template>
</el-dropdown> </el-dropdown>
<el-tooltip content="Apply" placement="bottom" effect="light"> <el-tooltip content="Apply" placement="bottom">
<i @click="applyDashboard"> <i @click="applyDashboard">
<Icon class="icon-btn" size="sm" iconName="save" /> <Icon class="icon-btn" size="sm" iconName="save" />
</i> </i>
</el-tooltip> </el-tooltip>
</div> </div>
<div class="switch"> <div class="ml-5">
<el-switch <el-switch
v-model="dashboardStore.editMode" v-model="dashboardStore.editMode"
active-text="E" active-text="E"
inactive-text="V" inactive-text="V"
size="small"
inline-prompt inline-prompt
active-color="#409eff"
inactive-color="#999"
@change="changeMode" @change="changeMode"
/> />
</div> </div>
@ -738,15 +735,15 @@ limitations under the License. -->
<style lang="scss" scoped> <style lang="scss" scoped>
.dashboard-tool { .dashboard-tool {
text-align: right; text-align: right;
padding: 3px 5px 5px; padding: 5px;
background: rgb(240 242 245); background: $dashboard-tool-bg-color;
border-bottom: 1px solid #dfe4e8; border-bottom: 1px solid $border-color;
justify-content: space-between; justify-content: space-between;
} }
.switch { .tool-selectors {
padding-top: 2px; align-items: center;
margin: 0 10px; height: auto;
} }
.label { .label {
@ -761,6 +758,7 @@ limitations under the License. -->
.tools { .tools {
justify-content: space-between; justify-content: space-between;
align-items: center;
height: auto; height: auto;
} }
@ -768,12 +766,12 @@ limitations under the License. -->
display: inline-block; display: inline-block;
padding: 3px; padding: 3px;
text-align: center; text-align: center;
border: 1px solid $disabled-color; border: 1px solid var(--sw-icon-btn-border);
border-radius: 3px; border-radius: 3px;
margin-left: 6px; margin-left: 6px;
cursor: pointer; cursor: pointer;
background-color: #eee; background-color: var(--sw-icon-btn-bg);
color: #666; color: var(--sw-icon-btn-color);
font-size: $font-size-smaller; 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; font-weight: bold;
border-bottom: 1px solid rgb(0 0 0 / 7%); border-bottom: 1px solid rgb(0 0 0 / 7%);
padding: 10px 20px; padding: 10px 20px;
background-color: #f3f4f9; background-color: var(--sw-table-header);
} }
.settings { .settings {
padding: 1px 0; padding: 1px 0;
border: 1px solid #666; border: 1px solid #666;
border-radius: 3px; border-radius: 3px;
color: #666; color: var(--text-color-placeholder);
cursor: pointer; cursor: pointer;
} }

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

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

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

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

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

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

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

@ -74,7 +74,7 @@ limitations under the License. -->
.log { .log {
font-size: $font-size-smaller; font-size: $font-size-smaller;
height: 100%; height: 100%;
border-bottom: 1px solid #eee; border-bottom: 1px solid $border-color-primary;
width: 100%; width: 100%;
overflow: auto; overflow: auto;
} }
@ -85,7 +85,7 @@ limitations under the License. -->
user-select: none; user-select: none;
border-left: 0; border-left: 0;
border-right: 0; border-right: 0;
border-bottom: 1px solid rgb(0 0 0 / 10%); border-bottom: 1px solid var(--sw-trace-list-border);
.traceId { .traceId {
width: 140px; width: 140px;
@ -109,7 +109,7 @@ limitations under the License. -->
border: 1px solid transparent; border: 1px solid transparent;
border-right: 1px dotted silver; border-right: 1px dotted silver;
line-height: 30px; line-height: 30px;
background-color: #f3f4f9; background-color: var(--sw-table-header);
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; 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; cursor: pointer;
transition: all 0.5ms linear; transition: all 0.5ms linear;
border: 1px solid $disabled-color; border: 1px solid $disabled-color;
color: #666; color: var(--text-color-placeholder);
display: inline-block; display: inline-block;
padding: 5px; padding: 5px;
border-radius: 3px; border-radius: 3px;
@ -568,7 +568,7 @@ limitations under the License. -->
position: absolute; position: absolute;
visibility: hidden; visibility: hidden;
padding: 5px; padding: 5px;
border: 1px solid #000; border: var(--sw-topology-border);
border-radius: 3px; border-radius: 3px;
background-color: $theme-background; 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; width: 330px;
height: calc(100% - 10px); height: calc(100% - 10px);
overflow: auto; overflow: auto;
border-right: 1px solid rgb(0 0 0 / 10%); border-right: 1px solid var(--sw-trace-list-border);
} }
.item span { .item span {
@ -228,7 +228,7 @@ limitations under the License. -->
border-bottom: 1px solid rgb(0 0 0 / 7%); border-bottom: 1px solid rgb(0 0 0 / 7%);
&.selected { &.selected {
background-color: #ededed; background-color: var(--sw-list-selected);
} }
} }
@ -253,14 +253,14 @@ limitations under the License. -->
.profile-tr { .profile-tr {
&:hover { &:hover {
background-color: rgb(0 0 0 / 4%); background-color: var(--sw-list-hover);
} }
} }
.profile-t-tool { .profile-t-tool {
padding: 10px 5px 10px 10px; padding: 10px 5px 10px 10px;
border-bottom: 1px solid rgb(0 0 0 / 7%); border-bottom: 1px solid rgb(0 0 0 / 7%);
background: #f3f4f9; background-color: var(--sw-table-header);
width: 100%; width: 100%;
} }

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

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

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

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

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

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

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

@ -107,7 +107,7 @@ limitations under the License. -->
user-select: none; user-select: none;
border-left: 0; border-left: 0;
border-right: 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 { .profile-header div {
@ -115,7 +115,7 @@ limitations under the License. -->
padding: 0 4px; padding: 0 4px;
border-right: 1px dotted silver; border-right: 1px dotted silver;
line-height: 30px; line-height: 30px;
background-color: #f3f4f9; background-color: var(--sw-table-header);
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; 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. --> limitations under the License. -->
<template> <template>
<div> <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 <div
:class="['thread', 'level' + data.parentId]" :class="['thread', 'level' + data.parentId]"
:style="{ :style="{
@ -47,6 +50,8 @@ limitations under the License. -->
<script lang="ts"> <script lang="ts">
import { ref, defineComponent, toRefs } from "vue"; import { ref, defineComponent, toRefs } from "vue";
import type { PropType } from "vue"; import type { PropType } from "vue";
import { useAppStoreWithOut } from "@/store/modules/app";
import { Themes } from "@/constants/data";
const props = { const props = {
data: { type: Object as PropType<any>, default: () => ({}) }, data: { type: Object as PropType<any>, default: () => ({}) },
@ -56,24 +61,25 @@ limitations under the License. -->
name: "TableItem", name: "TableItem",
props, props,
setup(props) { setup(props) {
const appStore = useAppStoreWithOut();
const displayChildren = ref<boolean>(true); const displayChildren = ref<boolean>(true);
function toggle() { function toggle() {
displayChildren.value = !displayChildren.value; displayChildren.value = !displayChildren.value;
} }
return { toggle, displayChildren, ...toRefs(props) }; return { Themes, appStore, toggle, displayChildren, ...toRefs(props) };
}, },
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "./profile.scss"; @import url("./profile.scss");
.profile-item.level0 { .profile-item.level0 {
background: rgba(0, 0, 0, 0.04); background-color: var(--sw-list-hover);
color: #448dfe; color: var(--el-color-primary);
&:hover { &:hover {
background: rgba(0, 0, 0, 0.04); background-color: var(--sw-list-hover);
color: #448dfe; color: var(--el-color-primary);
} }
&::before { &::before {
@ -81,7 +87,7 @@ limitations under the License. -->
content: ""; content: "";
width: 5px; width: 5px;
height: 100%; height: 100%;
background: #448dfe; background-color: var(--el-color-primary);
left: 0; left: 0;
} }
} }
@ -92,11 +98,11 @@ limitations under the License. -->
} }
.profile-item.selected { .profile-item.selected {
background: rgba(0, 0, 0, 0.04); background-color: var(--sw-list-selected);
} }
.profile-item:not(.level0):hover { .profile-item:not(.level0):hover {
background: rgba(0, 0, 0, 0.04); background-color: var(--sw-list-hover);
} }
.profile-item > div { .profile-item > div {
@ -123,7 +129,7 @@ limitations under the License. -->
width: 100%; width: 100%;
height: 6px; height: 6px;
border-radius: 3px; border-radius: 3px;
background: rgb(63, 177, 227); background: var(--el-color-primary);
position: relative; position: relative;
margin-top: 11px; margin-top: 11px;
border: none; border: none;
@ -131,7 +137,7 @@ limitations under the License. -->
.inner-progress_bar { .inner-progress_bar {
position: absolute; position: absolute;
background: rgb(110, 64, 170); background: rgb(110 64 170);
height: 4px; height: 4px;
border-radius: 2px; border-radius: 2px;
left: 0; left: 0;

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

@ -168,10 +168,10 @@ limitations under the License. -->
.profile-td { .profile-td {
padding: 5px 10px; padding: 5px 10px;
border-bottom: 1px solid rgb(0 0 0 / 7%); border-bottom: 1px solid var(--sw-trace-list-border);
&.selected { &.selected {
background-color: #ededed; background-color: var(--sw-list-selected);
} }
} }
@ -183,7 +183,7 @@ limitations under the License. -->
.profile-t-wrapper { .profile-t-wrapper {
overflow: auto; overflow: auto;
flex-grow: 1; flex-grow: 1;
border-right: 1px solid rgb(0 0 0 / 10%); border-right: 1px solid var(--sw-trace-list-border);
} }
.profile-t { .profile-t {
@ -196,20 +196,20 @@ limitations under the License. -->
.profile-tr { .profile-tr {
&:hover { &:hover {
background-color: rgb(0 0 0 / 4%); background-color: var(--sw-list-hover);
} }
} }
.profile-segment { .profile-segment {
border-top: 1px solid rgb(0 0 0 / 7%); border-top: 1px solid var(--sw-trace-list-border);
} }
.profile-t-tool { .profile-t-tool {
padding: 5px 10px; padding: 5px 10px;
font-weight: bold; font-weight: bold;
border-right: 1px solid rgb(0 0 0 / 7%); border-right: 1px solid var(--sw-trace-list-border);
border-bottom: 1px solid rgb(0 0 0 / 7%); border-bottom: 1px solid var(--sw-trace-list-border);
background: #f3f4f9; background-color: var(--sw-table-header);
} }
.log-item { .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('-', '')]" :href="!n.type || n.type === `N/A` ? icons.UNDEFINED : icons[n.type.toUpperCase().replace('-', '')]"
/> />
<text <text
class="node-text"
:x="n.x - (Math.min(n.name.length, 20) * 6) / 2 + 6" :x="n.x - (Math.min(n.name.length, 20) * 6) / 2 + 6"
:y="n.y + n.height + 8" :y="n.y + n.height + 8"
style="pointer-events: none" style="pointer-events: none"
@ -678,6 +679,12 @@ limitations under the License. -->
overflow: auto; overflow: auto;
margin-top: 30px; margin-top: 30px;
.node-text {
fill: var(--sw-topology-color);
font-size: 12px;
opacity: 0.9;
}
.svg-topology { .svg-topology {
cursor: move; cursor: move;
background-color: $theme-background; background-color: $theme-background;
@ -687,7 +694,7 @@ limitations under the License. -->
position: absolute; position: absolute;
top: 10px; top: 10px;
left: 25px; left: 25px;
color: #666; color: var(--sw-topology-color);
div { div {
margin-bottom: 8px; margin-bottom: 8px;
@ -716,31 +723,26 @@ limitations under the License. -->
padding: 0 15px; padding: 0 15px;
border-radius: 3px; border-radius: 3px;
color: $disabled-color; color: $disabled-color;
border: 1px solid #eee; border: 1px solid $border-color-primary;
background-color: $theme-background; background-color: var(--sw-topology-setting-bg);
box-shadow: #eee 1px 2px 10px; box-shadow: var(--sw-topology-box-shadow);
transition: all 0.5ms linear; transition: all 0.5ms linear;
&.dark {
background-color: #2b3037;
}
} }
.label { .label {
color: #666; color: var(--sw-topology-color);
display: inline-block; display: inline-block;
margin-right: 5px; margin-right: 5px;
} }
.operations-list { .operations-list {
position: absolute; position: absolute;
color: #333; color: $font-color;
cursor: pointer; cursor: pointer;
border: var(--sw-topology-border);
border-radius: 3px;
background-color: $theme-background; background-color: $theme-background;
border-radius: 5px;
padding: 10px 0; padding: 10px 0;
border: 1px solid #999;
box-shadow: #ddd 1px 2px 10px;
span { span {
display: block; display: block;
@ -752,7 +754,7 @@ limitations under the License. -->
span:hover { span:hover {
color: $active-color; color: $active-color;
background-color: #eee; background-color: $popper-hover-bg-color;
} }
} }
@ -765,7 +767,7 @@ limitations under the License. -->
.switch-icon { .switch-icon {
cursor: pointer; cursor: pointer;
transition: all 0.5ms linear; transition: all 0.5ms linear;
background: rgb(0 0 0 / 30%); background: var(--sw-topology-switch-icon);
color: $text-color; color: $text-color;
display: inline-block; display: inline-block;
padding: 2px 4px; padding: 2px 4px;
@ -784,13 +786,6 @@ limitations under the License. -->
.topo-node { .topo-node {
cursor: pointer; 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 { @keyframes topo-dash {
from { from {
@ -810,7 +805,7 @@ limitations under the License. -->
position: absolute; position: absolute;
visibility: hidden; visibility: hidden;
padding: 5px; padding: 5px;
border: 1px solid #000; border: var(--sw-topology-border);
border-radius: 3px; border-radius: 3px;
background-color: $theme-background; 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; right: 10px;
width: 400px; width: 400px;
height: 600px; height: 600px;
border: 1px solid #eee; border: 1px solid $border-color-primary;
background-color: $theme-background;
overflow: auto; overflow: auto;
padding: 10px 15px; padding: 10px 15px;
border-radius: 3px; border-radius: 3px;
color: $disabled-color; color: $disabled-color;
background-color: var(--sw-topology-setting-bg);
box-shadow: var(--sw-topology-box-shadow);
transition: all 0.5ms linear; transition: all 0.5ms linear;
z-index: 99; z-index: 99;
text-align: left; text-align: left;
box-shadow: #eee 1px 2px 10px;
} }
.tool { .tool {
@ -307,7 +307,7 @@ limitations under the License. -->
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
transition: all 0.5ms linear; transition: all 0.5ms linear;
background: rgb(0 0 0 / 30%); background: var(--sw-topology-switch-icon);
color: $text-color; color: $text-color;
display: inline-block; display: inline-block;
border-radius: 3px; border-radius: 3px;
@ -322,7 +322,7 @@ limitations under the License. -->
.operations-list { .operations-list {
position: absolute; position: absolute;
padding: 10px 0; padding: 10px 0;
color: #333; color: $font-color;
cursor: pointer; cursor: pointer;
background-color: $theme-background; background-color: $theme-background;
border-radius: 3px; border-radius: 3px;
@ -338,7 +338,7 @@ limitations under the License. -->
span:hover { span:hover {
color: $active-color; color: $active-color;
background-color: #eee; background-color: $popper-hover-bg-color;
} }
i { 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 type { MetricConfigOpt } from "@/types/dashboard";
import { aggregation } from "@/hooks/useMetricsProcessor"; import { aggregation } from "@/hooks/useMetricsProcessor";
import { MetricModes } from "../../../data"; import { MetricModes } from "../../../data";
import { useAppStoreWithOut } from "@/store/modules/app";
import { Themes } from "@/constants/data";
/*global defineEmits, defineProps */ /*global defineEmits, defineProps */
const props = defineProps({ const props = defineProps({
@ -33,6 +35,7 @@ limitations under the License. -->
}, },
}); });
const emit = defineEmits(["click"]); const emit = defineEmits(["click"]);
const appStore = useAppStoreWithOut();
const topologyStore = useTopologyStore(); const topologyStore = useTopologyStore();
const option = computed(() => getOption()); const option = computed(() => getOption());
@ -52,7 +55,7 @@ limitations under the License. -->
data: topologyStore.nodes, data: topologyStore.nodes,
links: topologyStore.calls, links: topologyStore.calls,
label: { label: {
color: "#666", color: appStore.theme === Themes.Dark ? "#ccc" : "#666",
formatter: (param: any) => param.data.name, formatter: (param: any) => param.data.name,
}, },
color: ["#6be6c1", "#3fcfdc", "#626c91", "#3fbcde", "#a0a7e6", "#3fa9e1", "#96dee8", "#bf99f8"], 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 { .title {
color: #666; color: var(--sw-topology-color);
margin-bottom: 0; margin-bottom: 0;
} }
.label { .label {
font-size: $font-size-smaller; font-size: $font-size-smaller;
margin-top: 10px; margin-top: 10px;
color: #666; color: var(--sw-topology-color);
} }
.legend-btn { .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) { export function layout(levels: Node[][], calls: Call[], radius: number) {
// precompute level depth // precompute level depth
console.log(levels);
levels.forEach((l: Node[], i: number) => l.forEach((n: any) => n && (n.level = i))); levels.forEach((l: Node[], i: number) => l.forEach((n: any) => n && (n.level = i)));
const nodes: Node[] = levels.reduce((a, x) => a.concat(x), []); 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 { .trace-detail-wrapper {
font-size: $font-size-smaller; font-size: $font-size-smaller;
padding: 5px 10px; padding: 5px 10px;
border-bottom: 1px solid #eee; border-bottom: 1px solid $border-color-primary;
width: 100%; width: 100%;
height: 95px; height: 95px;
.grey { .grey {
color: $text-color; color: #fff;
background-color: #448dfe; background-color: $active-background;
} }
.ghost { .ghost {

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

@ -31,7 +31,7 @@ limitations under the License. -->
@change="changeLatency" @change="changeLatency"
class="ml-10" class="ml-10"
/> />
<el-popover trigger="hover" width="250" placement="bottom" effect="light"> <el-popover trigger="hover" width="250" placement="bottom">
<template #reference> <template #reference>
<div class="cp conditions-popup"> <div class="cp conditions-popup">
<Icon iconName="conditions" size="middle" /> <Icon iconName="conditions" size="middle" />
@ -52,7 +52,7 @@ limitations under the License. -->
</div> </div>
</div> </div>
</el-popover> </el-popover>
<el-popover trigger="hover" width="250" placement="bottom" effect="light"> <el-popover trigger="hover" width="250" placement="bottom">
<template #reference> <template #reference>
<div class="cp metric-value"> <div class="cp metric-value">
<Icon iconName="info_outline" size="middle" /> <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 { .header {
padding: 10px; padding: 10px;
font-size: $font-size-smaller; font-size: $font-size-smaller;
border-bottom: 1px solid #dcdfe6; border-bottom: 1px solid $border-color;
min-width: 1200px; min-width: 1200px;
} }

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

@ -163,7 +163,7 @@ limitations under the License. -->
.trace-t-wrapper { .trace-t-wrapper {
overflow: auto; overflow: auto;
border-right: 1px solid rgb(0 0 0 / 10%); border-right: 1px solid var(--sw-trace-list-border);
} }
.trace-t-loading { .trace-t-loading {
@ -191,21 +191,21 @@ limitations under the License. -->
.trace-tr { .trace-tr {
&:hover { &:hover {
background-color: rgb(0 0 0 / 4%); background-color: var(--sw-list-hover);
} }
} }
.trace-td { .trace-td {
padding: 5px; padding: 5px;
border-bottom: 1px solid rgb(0 0 0 / 7%); border-bottom: 1px solid var(--sw-trace-list-border);
&.selected { &.selected {
background-color: #ededed; background-color: var(--sw-list-selected);
} }
} }
.trace-success { .trace-success {
border-left: 4px solid rgb(46 47 51 / 10%); border-left: 4px solid var(--sw-trace-success);
} }
.trace-warning { .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 TreeGraph from "../../utils/d3-trace-tree";
import type { Span, Ref } from "@/types/trace"; import type { Span, Ref } from "@/types/trace";
import SpanDetail from "./SpanDetail.vue"; import SpanDetail from "./SpanDetail.vue";
import { useAppStoreWithOut } from "@/store/modules/app";
/* global defineProps, Nullable, defineExpose,Recordable*/ /* global defineProps, Nullable, defineExpose,Recordable*/
const props = defineProps({ const props = defineProps({
@ -35,6 +36,7 @@ limitations under the License. -->
traceId: { type: String, default: "" }, traceId: { type: String, default: "" },
type: { type: String, default: "List" }, type: { type: String, default: "List" },
}); });
const appStore = useAppStoreWithOut();
const loading = ref<boolean>(false); const loading = ref<boolean>(false);
const showDetail = ref<boolean>(false); const showDetail = ref<boolean>(false);
const fixSpansSize = ref<number>(0); 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> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.d3-graph { .d3-graph {
@ -301,12 +314,12 @@ limitations under the License. -->
} }
.trace-node-container { .trace-node-container {
fill: rgba(0, 0, 0, 0); fill: rgb(0 0 0 / 0%);
stroke-width: 5px; stroke-width: 5px;
cursor: pointer; cursor: pointer;
&:hover { &: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 */ /*global defineProps, Nullable, Recordable */
const props = defineProps({ const props = defineProps({
currentSpan: { type: Object as PropType<Recordable>, default: () => ({}) }, currentSpan: { type: Object as PropType<Recordable>, default: () => ({}) },
traceId: { type: String, default: "" },
}); });
const { t } = useI18n(); const { t } = useI18n();
const traceStore = useTraceStore(); const traceStore = useTraceStore();
@ -167,7 +168,7 @@ limitations under the License. -->
const res = await traceStore.getSpanLogs({ const res = await traceStore.getSpanLogs({
condition: { condition: {
relatedTrace: { relatedTrace: {
traceId: props.currentSpan.traceId, traceId: props.currentSpan.traceId || props.traceId,
segmentId: props.currentSpan.segmentId, segmentId: props.currentSpan.segmentId,
spanId: props.currentSpan.spanId, 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"> <div class="trace-t-loading" v-show="loading">
<Icon iconName="spinner" size="sm" /> <Icon iconName="spinner" size="sm" />
</div> </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> <div class="trace-tips" v-if="!tableData.length">{{ $t("noData") }}</div>
</TableContainer> </TableContainer>
</div> </div>

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

@ -41,6 +41,7 @@ limitations under the License. -->
</div> </div>
<TableItem <TableItem
:method="method" :method="method"
:traceId="traceId"
v-for="(item, index) in tableData" v-for="(item, index) in tableData"
:data="item" :data="item"
:key="'key' + index" :key="'key' + index"
@ -63,6 +64,7 @@ limitations under the License. -->
tableData: { type: Array as PropType<Recordable>, default: () => [] }, tableData: { type: Array as PropType<Recordable>, default: () => [] },
type: { type: String, default: "" }, type: { type: String, default: "" },
headerType: { type: String, default: "" }, headerType: { type: String, default: "" },
traceId: { type: String, default: "" },
}); });
const emits = defineEmits(["select"]); const emits = defineEmits(["select"]);
const method = ref<number>(300); const method = ref<number>(300);
@ -165,12 +167,12 @@ limitations under the License. -->
user-select: none; user-select: none;
border-left: 0; border-left: 0;
border-right: 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 { .trace-header div {
display: inline-block; display: inline-block;
background-color: #f3f4f9; background-color: var(--sw-table-header);
padding: 0 4px; padding: 0 4px;
border: 1px solid transparent; border: 1px solid transparent;
border-right: 1px dotted silver; 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> </div>
<el-dialog v-model="showDetail" :destroy-on-close="true" fullscreen @closed="showDetail = false"> <el-dialog v-model="showDetail" :destroy-on-close="true" fullscreen @closed="showDetail = false">
<SpanDetail :currentSpan="data" /> <SpanDetail :currentSpan="data" :traceId="traceId" />
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import { ref, computed, defineComponent } from "vue"; import { ref, computed, defineComponent, watch } from "vue";
import type { PropType } from "vue"; import type { PropType } from "vue";
import SpanDetail from "../D3Graph/SpanDetail.vue"; import SpanDetail from "../D3Graph/SpanDetail.vue";
import { dateFormat } from "@/utils/dateFormat"; import { dateFormat } from "@/utils/dateFormat";
import { useAppStoreWithOut } from "@/store/modules/app"; import { useAppStoreWithOut } from "@/store/modules/app";
import { Themes } from "@/constants/data";
/*global Recordable*/ /*global Recordable*/
const props = { const props = {
@ -155,6 +156,7 @@ limitations under the License. -->
method: { type: Number, default: 0 }, method: { type: Number, default: 0 },
type: { type: String, default: "" }, type: { type: String, default: "" },
headerType: { type: String, default: "" }, headerType: { type: String, default: "" },
traceId: { type: String, traceId: "" },
}; };
export default defineComponent({ export default defineComponent({
name: "TableItem", name: "TableItem",
@ -201,12 +203,12 @@ limitations under the License. -->
} }
const items: any = document.querySelectorAll(".trace-item"); const items: any = document.querySelectorAll(".trace-item");
for (const item of items) { 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]; const p: any = document.getElementsByClassName("profiled")[0];
if (p) { if (p) {
p.style.background = "#eee"; p.style.background = appStore.theme === Themes.Dark ? "#333" : "#eee";
} }
} }
function selectSpan(event: Recordable) { function selectSpan(event: Recordable) {
@ -232,6 +234,19 @@ limitations under the License. -->
showSelectSpan(dom); showSelectSpan(dom);
showDetail.value = true; 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 { return {
displayChildren, displayChildren,
outterPercent, outterPercent,
@ -272,7 +287,8 @@ limitations under the License. -->
} }
.profiled { .profiled {
background-color: #eee; // background-color: #eee;
background-color: var(--sw-table-header);
position: relative; position: relative;
} }
@ -285,10 +301,10 @@ limitations under the License. -->
padding: 10px; padding: 10px;
border-radius: 5px; border-radius: 5px;
border: 1px solid $disabled-color; border: 1px solid $disabled-color;
background-color: #333; background-color: $font-color;
color: $text-color; color: $text-color;
text-align: center; text-align: center;
box-shadow: #eee 1px 2px 10px; box-shadow: var(--box-shadow-color) 0 2px 3px;
display: none; display: none;
} }
@ -297,8 +313,8 @@ limitations under the License. -->
position: absolute; position: absolute;
left: 250px; left: 250px;
top: 20px; top: 20px;
border: 6px solid #333; border: 6px solid $font-color;
border-color: transparent transparent #333; border-color: transparent transparent $font-color;
display: none; display: none;
} }
@ -320,11 +336,11 @@ limitations under the License. -->
} }
.trace-item.selected { .trace-item.selected {
background: rgb(0 0 0 / 4%); background-color: var(--sw-list-selected);
} }
.trace-item:not(.level0):hover { .trace-item:not(.level0):hover {
background: rgb(0 0 0 / 4%); background-color: var(--sw-list-hover);
} }
.trace-item > div { .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 type { Trace } from "@/types/trace";
import dayjs from "dayjs"; import dayjs from "dayjs";
import icons from "@/assets/img/icons"; import icons from "@/assets/img/icons";
import { useAppStoreWithOut } from "@/store/modules/app";
import { Themes } from "@/constants/data";
export default class ListGraph { export default class ListGraph {
private barHeight = 48; private barHeight = 48;
@ -127,6 +129,7 @@ export default class ListGraph {
} }
update(source: Recordable, callback: Function) { update(source: Recordable, callback: Function) {
const t = this; const t = this;
const appStore = useAppStoreWithOut();
const nodes = this.root.descendants(); const nodes = this.root.descendants();
let index = -1; let index = -1;
this.root.eachBefore((n: Recordable) => { this.root.eachBefore((n: Recordable) => {
@ -166,7 +169,7 @@ export default class ListGraph {
.attr("width", 16) .attr("width", 16)
.attr("height", 16) .attr("height", 16)
.attr("x", 6) .attr("x", 6)
.attr("y", -10) .attr("y", -8)
.attr("xlink:href", (d: any) => .attr("xlink:href", (d: any) =>
d.data.type === "Entry" ? icons.ENTRY : d.data.type === "Exit" ? icons.EXIT : "", d.data.type === "Entry" ? icons.ENTRY : d.data.type === "Exit" ? icons.EXIT : "",
) )
@ -186,7 +189,7 @@ export default class ListGraph {
.attr("width", 16) .attr("width", 16)
.attr("height", 16) .attr("height", 16)
.attr("x", 6) .attr("x", 6)
.attr("y", -10) .attr("y", -8)
.attr("xlink:href", (d: any) => { .attr("xlink:href", (d: any) => {
const key = (d.data.refs || []).findIndex((d: { type: string }) => d.type === "CROSS_THREAD"); const key = (d.data.refs || []).findIndex((d: { type: string }) => d.type === "CROSS_THREAD");
return key > -1 ? icons.STREAM : ""; return key > -1 ? icons.STREAM : "";
@ -214,14 +217,14 @@ export default class ListGraph {
.append("text") .append("text")
.attr("x", 13) .attr("x", 13)
.attr("y", 5) .attr("y", 5)
.attr("fill", "#E54C17") .attr("fill", appStore.theme === Themes.Dark ? "#666" : "#E54C17")
.html((d: Recordable) => (d.data.isError ? "◉" : "")); .html((d: Recordable) => (d.data.isError ? "◉" : ""));
nodeEnter nodeEnter
.append("text") .append("text")
.attr("class", "node-text") .attr("class", "node-text")
.attr("x", 35) .attr("x", 35)
.attr("y", -6) .attr("y", -6)
.attr("fill", "#333") .attr("fill", appStore.theme === Themes.Dark ? "#eee" : "#333")
.html((d: Recordable) => { .html((d: Recordable) => {
if (d.data.label === "TRACE_ROOT") { if (d.data.label === "TRACE_ROOT") {
return ""; return "";
@ -242,7 +245,7 @@ export default class ListGraph {
}) })
.attr("cy", -5) .attr("cy", -5)
.attr("fill", "none") .attr("fill", "none")
.attr("stroke", "#e66") .attr("stroke", appStore.theme === Themes.Dark ? "#666" : "#e66")
.style("opacity", (d: Recordable) => { .style("opacity", (d: Recordable) => {
const events = d.data.attachedEvents; const events = d.data.attachedEvents;
if (events && events.length) { if (events && events.length) {
@ -255,7 +258,7 @@ export default class ListGraph {
.append("text") .append("text")
.attr("x", 267) .attr("x", 267)
.attr("y", -1) .attr("y", -1)
.attr("fill", "#e66") .attr("fill", appStore.theme === Themes.Dark ? "#666" : "#e66")
.style("font-size", "10px") .style("font-size", "10px")
.text((d: Recordable) => { .text((d: Recordable) => {
const events = d.data.attachedEvents; const events = d.data.attachedEvents;
@ -270,7 +273,7 @@ export default class ListGraph {
.attr("class", "node-text") .attr("class", "node-text")
.attr("x", 35) .attr("x", 35)
.attr("y", 12) .attr("y", 12)
.attr("fill", "#ccc") .attr("fill", appStore.theme === Themes.Dark ? "#777" : "#ccc")
.style("font-size", "11px") .style("font-size", "11px")
.text( .text(
(d: Recordable) => (d: Recordable) =>
@ -305,11 +308,15 @@ export default class ListGraph {
.style("opacity", 1); .style("opacity", 1);
nodeEnter nodeEnter
.append("circle") .append("circle")
.attr("r", 3) .attr("r", appStore.theme === Themes.Dark ? 4 : 3)
.style("cursor", "pointer") .style("cursor", "pointer")
.attr("stroke-width", 2.5) .attr("stroke-width", appStore.theme === Themes.Dark ? 3 : 2.5)
.attr("fill", (d: Recordable) => .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) => .style("stroke", (d: Recordable) =>
d.data.label === "TRACE_ROOT" ? "" : `${this.sequentialScale(this.list.indexOf(d.data.serviceCode))}`, d.data.label === "TRACE_ROOT" ? "" : `${this.sequentialScale(this.list.indexOf(d.data.serviceCode))}`,
@ -320,7 +327,7 @@ export default class ListGraph {
node node
.transition() .transition()
.duration(400) .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) .style("opacity", 1)
.select("circle") .select("circle")
.attr("fill", (d: Recordable) => .attr("fill", (d: Recordable) =>
@ -343,8 +350,8 @@ export default class ListGraph {
.enter() .enter()
.insert("path", "g") .insert("path", "g")
.attr("class", "trace-link") .attr("class", "trace-link")
.attr("fill", "rgba(0,0,0,0)") .attr("fill", appStore.theme === Themes.Dark ? "rgba(244,244,244,0)" : "rgba(0,0,0,0)")
.attr("stroke", "rgba(0, 0, 0, 0.1)") .attr("stroke", appStore.theme === Themes.Dark ? "rgba(244,244,244,0.4)" : "rgba(0, 0, 0, 0.1)")
.attr("stroke-width", 2) .attr("stroke-width", 2)
.attr("transform", `translate(5, 0)`) .attr("transform", `translate(5, 0)`)
.attr("d", () => { .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 * as d3 from "d3";
import d3tip from "d3-tip"; import d3tip from "d3-tip";
import type { Trace, Span } from "@/types/trace"; import type { Trace, Span } from "@/types/trace";
import { useAppStoreWithOut } from "@/store/modules/app";
import { Themes } from "@/constants/data";
export default class TraceMap { export default class TraceMap {
private i = 0; private i = 0;
@ -132,6 +134,7 @@ export default class TraceMap {
this.update(this.root); this.update(this.root);
} }
update(source: Recordable) { update(source: Recordable) {
const appStore = useAppStoreWithOut();
const that: any = this; const that: any = this;
const treeData = this.treemap(this.root); const treeData = this.treemap(this.root);
const nodes = treeData.descendants(), 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.slice(0, 10) + "..."
: (d.data.isError ? "◉ " : "") + d.data.label, : (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 nodeEnter
.append("text") .append("text")
.attr("class", "node-text") .attr("class", "node-text")
@ -245,7 +250,7 @@ export default class TraceMap {
return d.children || d._children ? -45 : 15; return d.children || d._children ? -45 : 15;
}) })
.attr("dy", "1em") .attr("dy", "1em")
.attr("fill", "#bbb") .attr("fill", appStore.theme === Themes.Dark ? "#888" : "#bbb")
.attr("text-anchor", function (d: Recordable) { .attr("text-anchor", function (d: Recordable) {
return d.children || d._children ? "end" : "start"; return d.children || d._children ? "end" : "start";
}) })
@ -330,7 +335,7 @@ export default class TraceMap {
const o = { x: source.x0, y: source.y0 }; const o = { x: source.x0, y: source.y0 };
return diagonal(o, o); 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("stroke-width", 1.5)
.style("fill", "none"); .style("fill", "none");

2
vite.config.ts
View File

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