You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@skywalking.apache.org by wu...@apache.org on 2023/11/14 12:37:20 UTC
(skywalking-booster-ui) branch main updated: feat: implement the Dark Theme (#334)
This is an automated email from the ASF dual-hosted git repository.
wusheng pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/skywalking-booster-ui.git
The following commit(s) were added to refs/heads/main by this push:
new 832dc167 feat: implement the Dark Theme (#334)
832dc167 is described below
commit 832dc1676b7a79ed74759be3cb4f35ff522ac9b4
Author: Fine0830 <fa...@gmail.com>
AuthorDate: Tue Nov 14 20:37:15 2023 +0800
feat: implement the Dark Theme (#334)
---
package-lock.json | 196 +++++++++++++--------
package.json | 2 +-
src/App.vue | 5 +-
src/assets/img/tools/EXIT.png | Bin 269 -> 259 bytes
src/components/SelectSingle.vue | 6 +-
src/constants/data.ts | 5 +
src/hooks/useEcharts.ts | 7 +-
src/layout/components/AppMain.vue | 2 +-
src/layout/components/NavBar.vue | 37 ++--
src/store/modules/app.ts | 6 +
src/store/modules/profile.ts | 2 +-
src/styles/light.scss | 25 ---
src/styles/reset.scss | 25 +--
src/styles/theme.scss | 152 ++++++++++++++++
src/views/Marketplace.vue | 2 +-
src/views/Settings.vue | 4 +-
src/views/alarm/Content.vue | 2 +-
src/views/alarm/Header.vue | 11 +-
src/views/dashboard/Widget.vue | 2 +-
.../configuration/ContinuousProfiling.vue | 2 +-
src/views/dashboard/configuration/Event.vue | 2 +-
src/views/dashboard/configuration/Text.vue | 3 +-
.../dashboard/configuration/ThirdPartyApp.vue | 2 +-
src/views/dashboard/configuration/TimeRange.vue | 2 +-
src/views/dashboard/configuration/Topology.vue | 2 +-
src/views/dashboard/configuration/Widget.vue | 6 +-
.../configuration/widget/metric/Index.vue | 3 +-
.../dashboard/controls/ContinuousProfiling.vue | 6 +-
src/views/dashboard/controls/DemandLog.vue | 4 +-
src/views/dashboard/controls/Ebpf.vue | 4 +-
src/views/dashboard/controls/Event.vue | 4 +-
src/views/dashboard/controls/Log.vue | 4 +-
src/views/dashboard/controls/NetworkProfiling.vue | 6 +-
src/views/dashboard/controls/Profile.vue | 4 +-
src/views/dashboard/controls/Tab.vue | 11 +-
src/views/dashboard/controls/TaskTimeline.vue | 6 +-
src/views/dashboard/controls/Text.vue | 16 +-
src/views/dashboard/controls/ThirdPartyApp.vue | 2 +-
src/views/dashboard/controls/TimeRange.vue | 2 +-
src/views/dashboard/controls/Topology.vue | 3 +-
src/views/dashboard/controls/Trace.vue | 4 +-
src/views/dashboard/controls/Widget.vue | 4 +-
src/views/dashboard/data.ts | 4 +-
src/views/dashboard/graphs/Bar.vue | 8 +-
src/views/dashboard/graphs/Card.vue | 2 +-
src/views/dashboard/graphs/Line.vue | 14 +-
src/views/dashboard/graphs/Table.vue | 4 +-
src/views/dashboard/graphs/TopList.vue | 10 +-
src/views/dashboard/panel/Layout.vue | 4 +-
src/views/dashboard/panel/Tool.vue | 30 ++--
.../components/InstanceList.vue | 4 +-
.../continuous-profiling/components/Policy.vue | 4 +-
.../continuous-profiling/components/PolicyList.vue | 8 +-
src/views/dashboard/related/ebpf/Header.vue | 2 +-
.../dashboard/related/ebpf/components/TaskList.vue | 12 +-
src/views/dashboard/related/log/LogTable/Index.vue | 6 +-
.../components/ProcessTopology.vue | 4 +-
.../related/network-profiling/components/Tasks.vue | 8 +-
.../network-profiling/components/TimeLine.vue | 2 +-
src/views/dashboard/related/profile/Header.vue | 2 +-
.../related/profile/components/SegmentList.vue | 17 +-
.../related/profile/components/Stack/Container.vue | 4 +-
.../related/profile/components/Stack/Item.vue | 30 ++--
.../related/profile/components/TaskList.vue | 16 +-
.../related/topology/components/Graph.vue | 41 ++---
.../related/topology/components/PodTopology.vue | 12 +-
.../related/topology/components/Sankey.vue | 5 +-
.../related/topology/components/Settings.vue | 4 +-
.../related/topology/components/utils/layout.ts | 1 -
src/views/dashboard/related/trace/Detail.vue | 6 +-
src/views/dashboard/related/trace/Header.vue | 4 +-
src/views/dashboard/related/trace/Index.vue | 2 +-
src/views/dashboard/related/trace/TraceList.vue | 10 +-
.../related/trace/components/D3Graph/Index.vue | 17 +-
.../trace/components/D3Graph/SpanDetail.vue | 3 +-
.../related/trace/components/Table/Index.vue | 8 +-
.../trace/components/Table/TableContainer.vue | 6 +-
.../related/trace/components/Table/TableItem.vue | 40 +++--
.../dashboard/related/trace/utils/d3-trace-list.ts | 33 ++--
.../dashboard/related/trace/utils/d3-trace-tree.ts | 11 +-
vite.config.ts | 2 +-
81 files changed, 640 insertions(+), 353 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index eb5864d0..fbf93d83 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,7 +13,7 @@
"d3-flame-graph": "^4.1.3",
"d3-tip": "^0.9.1",
"echarts": "^5.2.2",
- "element-plus": "^2.1.0",
+ "element-plus": "^2.2.5",
"lodash": "^4.17.21",
"monaco-editor": "^0.34.1",
"pinia": "^2.0.28",
@@ -1307,9 +1307,9 @@
}
},
"node_modules/@ctrl/tinycolor": {
- "version": "3.5.0",
- "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.5.0.tgz",
- "integrity": "sha512-tlJpwF40DEQcfR/QF+wNMVyGMaO9FQp6Z1Wahj4Gk3CJQYHwA2xVG7iKDFdW6zuxZY9XWOpGcfNCTsX4McOsOg==",
+ "version": "3.6.1",
+ "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz",
+ "integrity": "sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==",
"engines": {
"node": ">=10"
}
@@ -1375,9 +1375,9 @@
}
},
"node_modules/@element-plus/icons-vue": {
- "version": "1.1.4",
- "resolved": "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-1.1.4.tgz",
- "integrity": "sha512-Iz/nHqdp1sFPmdzRwHkEQQA3lKvoObk8azgABZ81QUOpW9s/lUyQVUSh0tNtEPZXQlKwlSh7SPgoVxzrE0uuVQ==",
+ "version": "2.1.0",
+ "resolved": "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-2.1.0.tgz",
+ "integrity": "sha512-PSBn3elNoanENc1vnCfh+3WA9fimRC7n+fWkf3rE5jvv+aBohNHABC/KAR5KWPecxWxDTVT1ERpRbOMRcOV/vA==",
"peerDependencies": {
"vue": "^3.2.0"
}
@@ -1784,6 +1784,19 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
+ "node_modules/@floating-ui/core": {
+ "version": "0.7.3",
+ "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-0.7.3.tgz",
+ "integrity": "sha512-buc8BXHmG9l82+OQXOFU3Kr2XQx9ys01U/Q9HMIrZ300iLc8HLMgh7dcCqgYzAzf4BkoQvDcXf5Y+CuEZ5JBYg=="
+ },
+ "node_modules/@floating-ui/dom": {
+ "version": "0.5.4",
+ "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-0.5.4.tgz",
+ "integrity": "sha512-419BMceRLq0RrmTSDxn8hf9R3VCJv2K9PUfugh5JyEFmdjzDo+e8U5EdR8nzKq8Yj1htzLm3b6eQEEam3/rrtg==",
+ "dependencies": {
+ "@floating-ui/core": "^0.7.3"
+ }
+ },
"node_modules/@hapi/hoek": {
"version": "9.3.0",
"resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz",
@@ -2144,9 +2157,10 @@
}
},
"node_modules/@popperjs/core": {
- "version": "2.11.6",
- "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
- "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==",
+ "name": "@sxzz/popperjs-es",
+ "version": "2.11.7",
+ "resolved": "https://registry.npmjs.org/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz",
+ "integrity": "sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ==",
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/popperjs"
@@ -2561,10 +2575,9 @@
"integrity": "sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ=="
},
"node_modules/@types/lodash-es": {
- "version": "4.17.6",
- "resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.6.tgz",
- "integrity": "sha512-R+zTeVUKDdfoRxpAryaQNRKk3105Rrgx2CFRClIgRGaqDTdjsm8h6IYA8ir584W3ePzkZfst5xIgDwYrlh9HLg==",
- "peer": true,
+ "version": "4.17.11",
+ "resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.11.tgz",
+ "integrity": "sha512-eCw8FYAWHt2DDl77s+AMLLzPn310LKohruumpucZI4oOFJkIgnlaJcy23OKMJxx4r9PeTF13Gv6w+jqjWQaYUg==",
"dependencies": {
"@types/lodash": "*"
}
@@ -5666,33 +5679,43 @@
"dev": true
},
"node_modules/element-plus": {
- "version": "2.1.0",
- "resolved": "https://registry.npmjs.org/element-plus/-/element-plus-2.1.0.tgz",
- "integrity": "sha512-PQM3LMv5qKf0sS/k+PXuBcmKl1Eb3b7fxKPyFHZ6eodZcNykbEMcpLZefQkvmDr6calVnuQ7TUnTm7Tm9LJXvg==",
- "dependencies": {
- "@ctrl/tinycolor": "^3.4.0",
- "@element-plus/icons-vue": "^1.0.1",
- "@popperjs/core": "^2.11.2",
- "@vueuse/core": "^7.7.1",
- "async-validator": "^4.0.7",
- "dayjs": "^1.10.8",
+ "version": "2.2.5",
+ "resolved": "https://registry.npmjs.org/element-plus/-/element-plus-2.2.5.tgz",
+ "integrity": "sha512-Kl0yn/PQca5YQo3M3NPBP4Xl71NQuMtDx5zNXZGVyl5FjdMujXiFB9SXKYGDUCgFU3d/Rl14vB4Fpmcl2Iz+Hw==",
+ "dependencies": {
+ "@ctrl/tinycolor": "^3.4.1",
+ "@element-plus/icons-vue": "^2.0.5",
+ "@floating-ui/dom": "^0.5.2",
+ "@popperjs/core": "npm:@sxzz/popperjs-es@^2.11.7",
+ "@types/lodash": "^4.14.182",
+ "@types/lodash-es": "^4.17.6",
+ "@vueuse/core": "^8.6.0",
+ "async-validator": "^4.1.1",
+ "dayjs": "^1.11.3",
"escape-html": "^1.0.3",
"lodash": "^4.17.21",
"lodash-es": "^4.17.21",
"lodash-unified": "^1.0.2",
"memoize-one": "^6.0.0",
- "normalize-wheel-es": "^1.1.1"
+ "normalize-wheel-es": "^1.1.2"
},
"peerDependencies": {
"vue": "^3.2.0"
}
},
+ "node_modules/element-plus/node_modules/@types/web-bluetooth": {
+ "version": "0.0.14",
+ "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.14.tgz",
+ "integrity": "sha512-5d2RhCard1nQUC3aHcq/gHzWYO6K0WJmAbjO7mQJgCQKtZpgXxv1rOM6O/dBDhDYYVutk1sciOgNSe+5YyfM8A=="
+ },
"node_modules/element-plus/node_modules/@vueuse/core": {
- "version": "7.7.1",
- "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-7.7.1.tgz",
- "integrity": "sha512-PRRgbATMpoeUmkCEBtUeJgOwtew8s+4UsEd+Pm7MhkjL2ihCNrSqxNVtM6NFE4uP2sWnkGcZpCjPuNSxowJ1Ow==",
+ "version": "8.9.4",
+ "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-8.9.4.tgz",
+ "integrity": "sha512-B/Mdj9TK1peFyWaPof+Zf/mP9XuGAngaJZBwPaXBvU3aCTZlx3ltlrFFFyMV4iGBwsjSCeUCgZrtkEj9dS2Y3Q==",
"dependencies": {
- "@vueuse/shared": "7.7.1",
+ "@types/web-bluetooth": "^0.0.14",
+ "@vueuse/metadata": "8.9.4",
+ "@vueuse/shared": "8.9.4",
"vue-demi": "*"
},
"funding": {
@@ -5712,9 +5735,9 @@
}
},
"node_modules/element-plus/node_modules/@vueuse/core/node_modules/@vueuse/shared": {
- "version": "7.7.1",
- "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-7.7.1.tgz",
- "integrity": "sha512-rN2qd22AUl7VdBxihagWyhUNHCyVk9IpvBTTfHoLH9G7rGE552X1f+zeCfehuno0zXif13jPw+icW/wn2a0rnQ==",
+ "version": "8.9.4",
+ "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-8.9.4.tgz",
+ "integrity": "sha512-wt+T30c4K6dGRMVqPddexEVLa28YwxW5OFIPmzUHICjphfAuBFTTdDoyqREZNDOFJZ44ARH1WWQNCUK8koJ+Ag==",
"dependencies": {
"vue-demi": "*"
},
@@ -5735,9 +5758,9 @@
}
},
"node_modules/element-plus/node_modules/@vueuse/core/node_modules/vue-demi": {
- "version": "0.13.11",
- "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
- "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
+ "version": "0.14.6",
+ "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
+ "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
"hasInstallScript": true,
"bin": {
"vue-demi-fix": "bin/vue-demi-fix.js",
@@ -5759,6 +5782,14 @@
}
}
},
+ "node_modules/element-plus/node_modules/@vueuse/metadata": {
+ "version": "8.9.4",
+ "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-8.9.4.tgz",
+ "integrity": "sha512-IwSfzH80bnJMzqhaapqJl9JRIiyQU0zsRGEgnxN6jhq7992cPUJIRfV+JHRIZXjYqbwt07E1gTEp0R0zPJ1aqw==",
+ "funding": {
+ "url": "https://github.com/sponsors/antfu"
+ }
+ },
"node_modules/element-resize-detector": {
"version": "1.2.4",
"resolved": "https://registry.npmjs.org/element-resize-detector/-/element-resize-detector-1.2.4.tgz",
@@ -16121,9 +16152,9 @@
"requires": {}
},
"@ctrl/tinycolor": {
- "version": "3.5.0",
- "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.5.0.tgz",
- "integrity": "sha512-tlJpwF40DEQcfR/QF+wNMVyGMaO9FQp6Z1Wahj4Gk3CJQYHwA2xVG7iKDFdW6zuxZY9XWOpGcfNCTsX4McOsOg=="
+ "version": "3.6.1",
+ "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz",
+ "integrity": "sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA=="
},
"@cypress/request": {
"version": "3.0.1",
@@ -16182,9 +16213,9 @@
}
},
"@element-plus/icons-vue": {
- "version": "1.1.4",
- "resolved": "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-1.1.4.tgz",
- "integrity": "sha512-Iz/nHqdp1sFPmdzRwHkEQQA3lKvoObk8azgABZ81QUOpW9s/lUyQVUSh0tNtEPZXQlKwlSh7SPgoVxzrE0uuVQ==",
+ "version": "2.1.0",
+ "resolved": "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-2.1.0.tgz",
+ "integrity": "sha512-PSBn3elNoanENc1vnCfh+3WA9fimRC7n+fWkf3rE5jvv+aBohNHABC/KAR5KWPecxWxDTVT1ERpRbOMRcOV/vA==",
"requires": {}
},
"@esbuild/android-arm": {
@@ -16375,6 +16406,19 @@
}
}
},
+ "@floating-ui/core": {
+ "version": "0.7.3",
+ "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-0.7.3.tgz",
+ "integrity": "sha512-buc8BXHmG9l82+OQXOFU3Kr2XQx9ys01U/Q9HMIrZ300iLc8HLMgh7dcCqgYzAzf4BkoQvDcXf5Y+CuEZ5JBYg=="
+ },
+ "@floating-ui/dom": {
+ "version": "0.5.4",
+ "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-0.5.4.tgz",
+ "integrity": "sha512-419BMceRLq0RrmTSDxn8hf9R3VCJv2K9PUfugh5JyEFmdjzDo+e8U5EdR8nzKq8Yj1htzLm3b6eQEEam3/rrtg==",
+ "requires": {
+ "@floating-ui/core": "^0.7.3"
+ }
+ },
"@hapi/hoek": {
"version": "9.3.0",
"resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz",
@@ -16647,9 +16691,9 @@
}
},
"@popperjs/core": {
- "version": "2.11.6",
- "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
- "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw=="
+ "version": "npm:@sxzz/popperjs-es@2.11.7",
+ "resolved": "https://registry.npmjs.org/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz",
+ "integrity": "sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ=="
},
"@rollup/pluginutils": {
"version": "4.2.1",
@@ -17053,10 +17097,9 @@
"integrity": "sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ=="
},
"@types/lodash-es": {
- "version": "4.17.6",
- "resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.6.tgz",
- "integrity": "sha512-R+zTeVUKDdfoRxpAryaQNRKk3105Rrgx2CFRClIgRGaqDTdjsm8h6IYA8ir584W3ePzkZfst5xIgDwYrlh9HLg==",
- "peer": true,
+ "version": "4.17.11",
+ "resolved": "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.11.tgz",
+ "integrity": "sha512-eCw8FYAWHt2DDl77s+AMLLzPn310LKohruumpucZI4oOFJkIgnlaJcy23OKMJxx4r9PeTF13Gv6w+jqjWQaYUg==",
"requires": {
"@types/lodash": "*"
}
@@ -19361,48 +19404,63 @@
"dev": true
},
"element-plus": {
- "version": "2.1.0",
- "resolved": "https://registry.npmjs.org/element-plus/-/element-plus-2.1.0.tgz",
- "integrity": "sha512-PQM3LMv5qKf0sS/k+PXuBcmKl1Eb3b7fxKPyFHZ6eodZcNykbEMcpLZefQkvmDr6calVnuQ7TUnTm7Tm9LJXvg==",
- "requires": {
- "@ctrl/tinycolor": "^3.4.0",
- "@element-plus/icons-vue": "^1.0.1",
- "@popperjs/core": "^2.11.2",
- "@vueuse/core": "^7.7.1",
- "async-validator": "^4.0.7",
- "dayjs": "^1.10.8",
+ "version": "2.2.5",
+ "resolved": "https://registry.npmjs.org/element-plus/-/element-plus-2.2.5.tgz",
+ "integrity": "sha512-Kl0yn/PQca5YQo3M3NPBP4Xl71NQuMtDx5zNXZGVyl5FjdMujXiFB9SXKYGDUCgFU3d/Rl14vB4Fpmcl2Iz+Hw==",
+ "requires": {
+ "@ctrl/tinycolor": "^3.4.1",
+ "@element-plus/icons-vue": "^2.0.5",
+ "@floating-ui/dom": "^0.5.2",
+ "@popperjs/core": "npm:@sxzz/popperjs-es@^2.11.7",
+ "@types/lodash": "^4.14.182",
+ "@types/lodash-es": "^4.17.6",
+ "@vueuse/core": "^8.6.0",
+ "async-validator": "^4.1.1",
+ "dayjs": "^1.11.3",
"escape-html": "^1.0.3",
"lodash": "^4.17.21",
"lodash-es": "^4.17.21",
"lodash-unified": "^1.0.2",
"memoize-one": "^6.0.0",
- "normalize-wheel-es": "^1.1.1"
+ "normalize-wheel-es": "^1.1.2"
},
"dependencies": {
+ "@types/web-bluetooth": {
+ "version": "0.0.14",
+ "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.14.tgz",
+ "integrity": "sha512-5d2RhCard1nQUC3aHcq/gHzWYO6K0WJmAbjO7mQJgCQKtZpgXxv1rOM6O/dBDhDYYVutk1sciOgNSe+5YyfM8A=="
+ },
"@vueuse/core": {
- "version": "7.7.1",
- "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-7.7.1.tgz",
- "integrity": "sha512-PRRgbATMpoeUmkCEBtUeJgOwtew8s+4UsEd+Pm7MhkjL2ihCNrSqxNVtM6NFE4uP2sWnkGcZpCjPuNSxowJ1Ow==",
+ "version": "8.9.4",
+ "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-8.9.4.tgz",
+ "integrity": "sha512-B/Mdj9TK1peFyWaPof+Zf/mP9XuGAngaJZBwPaXBvU3aCTZlx3ltlrFFFyMV4iGBwsjSCeUCgZrtkEj9dS2Y3Q==",
"requires": {
- "@vueuse/shared": "7.7.1",
+ "@types/web-bluetooth": "^0.0.14",
+ "@vueuse/metadata": "8.9.4",
+ "@vueuse/shared": "8.9.4",
"vue-demi": "*"
},
"dependencies": {
"@vueuse/shared": {
- "version": "7.7.1",
- "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-7.7.1.tgz",
- "integrity": "sha512-rN2qd22AUl7VdBxihagWyhUNHCyVk9IpvBTTfHoLH9G7rGE552X1f+zeCfehuno0zXif13jPw+icW/wn2a0rnQ==",
+ "version": "8.9.4",
+ "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-8.9.4.tgz",
+ "integrity": "sha512-wt+T30c4K6dGRMVqPddexEVLa28YwxW5OFIPmzUHICjphfAuBFTTdDoyqREZNDOFJZ44ARH1WWQNCUK8koJ+Ag==",
"requires": {
"vue-demi": "*"
}
},
"vue-demi": {
- "version": "0.13.11",
- "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
- "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
+ "version": "0.14.6",
+ "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.6.tgz",
+ "integrity": "sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==",
"requires": {}
}
}
+ },
+ "@vueuse/metadata": {
+ "version": "8.9.4",
+ "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-8.9.4.tgz",
+ "integrity": "sha512-IwSfzH80bnJMzqhaapqJl9JRIiyQU0zsRGEgnxN6jhq7992cPUJIRfV+JHRIZXjYqbwt07E1gTEp0R0zPJ1aqw=="
}
}
},
diff --git a/package.json b/package.json
index 737a83ef..6265b22f 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
"d3-flame-graph": "^4.1.3",
"d3-tip": "^0.9.1",
"echarts": "^5.2.2",
- "element-plus": "^2.1.0",
+ "element-plus": "^2.2.5",
"lodash": "^4.17.21",
"monaco-editor": "^0.34.1",
"pinia": "^2.0.28",
diff --git a/src/App.vue b/src/App.vue
index 93c3bce8..19b8887f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -27,10 +27,11 @@ limitations under the License. -->
}
}, 500);
</script>
-<style>
+<style lang="scss">
#app {
- color: #2c3e50;
+ color: $font-color;
height: 100%;
overflow: hidden;
+ background-color: $layout-background;
}
</style>
diff --git a/src/assets/img/tools/EXIT.png b/src/assets/img/tools/EXIT.png
index 88aca495..977493de 100644
Binary files a/src/assets/img/tools/EXIT.png and b/src/assets/img/tools/EXIT.png differ
diff --git a/src/components/SelectSingle.vue b/src/components/SelectSingle.vue
index 1ff98576..6f6cdd5f 100644
--- a/src/components/SelectSingle.vue
+++ b/src/components/SelectSingle.vue
@@ -88,7 +88,7 @@ limitations under the License. -->
border: 1px solid #ddd;
background: $theme-background;
border-radius: 3px;
- color: #000;
+ color: $font-color;
font-size: $font-size-smaller;
height: 24px;
@@ -112,7 +112,7 @@ limitations under the License. -->
width: 100%;
padding: 2px 10px;
overflow: auto;
- color: #606266;
+ color: var(--sw-setting-color);
position: relative;
&:hover {
@@ -133,7 +133,7 @@ limitations under the License. -->
}
.opt-wrapper {
- color: #606266;
+ color: var(--sw-setting-color);
position: absolute;
top: 26px;
left: 0;
diff --git a/src/constants/data.ts b/src/constants/data.ts
index 77238da5..9cbc1e17 100644
--- a/src/constants/data.ts
+++ b/src/constants/data.ts
@@ -26,3 +26,8 @@ export const Languages = [
{ label: "Chinese", value: "zh" },
{ label: "Spanish", value: "es" },
];
+
+export enum Themes {
+ Dark = "dark",
+ Light = "light",
+}
diff --git a/src/hooks/useEcharts.ts b/src/hooks/useEcharts.ts
index cc28c467..2aacc49d 100644
--- a/src/hooks/useEcharts.ts
+++ b/src/hooks/useEcharts.ts
@@ -30,6 +30,8 @@ import { useDebounceFn } from "@vueuse/core";
import { useEventListener } from "./useEventListener";
import { useBreakpoint } from "./useBreakpoint";
import echarts from "@/utils/echarts";
+import { useAppStoreWithOut } from "@/store/modules/app";
+import { Themes } from "@/constants/data";
export type ECOption = echarts.ComposeOption<
| BarSeriesOption
@@ -44,8 +46,9 @@ export type ECOption = echarts.ComposeOption<
>;
export function useECharts(elRef: Ref<HTMLDivElement>, theme: "light" | "dark" | "default" = "default"): Indexable {
+ const appStore = useAppStoreWithOut();
const getDarkMode = computed(() => {
- return theme === "default" ? "light" : theme;
+ return appStore.theme === "default" ? Themes.Light : theme;
});
let chartInstance: Nullable<echarts.ECharts> = null;
let resizeFn: Fn = resize;
@@ -55,7 +58,7 @@ export function useECharts(elRef: Ref<HTMLDivElement>, theme: "light" | "dark" |
resizeFn = useDebounceFn(resize, 200);
const getOptions = computed(() => {
- if (getDarkMode.value !== "dark") {
+ if (getDarkMode.value !== Themes.Dark) {
return cacheOptions.value as ECOption;
}
return {
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
index cce7d11c..6b5d403b 100644
--- a/src/layout/components/AppMain.vue
+++ b/src/layout/components/AppMain.vue
@@ -24,7 +24,7 @@ limitations under the License. -->
<style lang="scss" scoped>
.app-main {
height: calc(100% - 40px);
- background: #f7f9fa;
+ background: $layout-background;
overflow: auto;
}
</style>
diff --git a/src/layout/components/NavBar.vue b/src/layout/components/NavBar.vue
index 43202ed5..b7cc0f41 100644
--- a/src/layout/components/NavBar.vue
+++ b/src/layout/components/NavBar.vue
@@ -48,11 +48,14 @@ limitations under the License. -->
@input="changeTimeRange"
/>
<span> UTC{{ appStore.utcHour >= 0 ? "+" : "" }}{{ `${appStore.utcHour}:${appStore.utcMin}` }} </span>
+ <span class="ml-5">
+ <el-switch v-model="theme" :active-icon="Moon" :inactive-icon="Sunny" inline-prompt @change="changeTheme" />
+ </span>
<span title="refresh" class="ghost ml-5 cp" @click="handleReload">
<Icon iconName="retry" :loading="appStore.autoRefresh" class="middle" />
</span>
<span class="version ml-5 cp">
- <el-popover trigger="hover" width="250" placement="bottom" effect="light" :content="appStore.version">
+ <el-popover trigger="hover" width="250" placement="bottom" :content="appStore.version">
<template #reference>
<span>
<Icon iconName="info_outline" size="middle" />
@@ -74,7 +77,8 @@ limitations under the License. -->
import { MetricCatalog } from "@/views/dashboard/data";
import type { DashboardItem } from "@/types/dashboard";
import router from "@/router";
- import { ArrowRight } from "@element-plus/icons-vue";
+ import { ArrowRight, Moon, Sunny } from "@element-plus/icons-vue";
+ import { Themes } from "@/constants/data";
/*global Indexable */
const { t, te } = useI18n();
@@ -84,11 +88,27 @@ limitations under the License. -->
const pathNames = ref<{ path?: string; name: string; selected: boolean }[][]>([]);
const timeRange = ref<number>(0);
const pageTitle = ref<string>("");
+ const theme = ref<boolean>(true);
+ changeTheme();
resetDuration();
getVersion();
getNavPaths();
+ function changeTheme() {
+ const root = document.documentElement;
+
+ if (theme.value) {
+ root.classList.add(Themes.Dark);
+ root.classList.remove(Themes.Light);
+ appStore.setTheme(Themes.Dark);
+ } else {
+ root.classList.add(Themes.Light);
+ root.classList.remove(Themes.Dark);
+ appStore.setTheme(Themes.Light);
+ }
+ }
+
function getName(list: any[]) {
return list.find((d: any) => d.selected) || {};
}
@@ -287,21 +307,16 @@ limitations under the License. -->
padding: 5px;
text-align: left;
justify-content: space-between;
- background-color: #fafbfc;
- border-bottom: 1px solid #dfe4e8;
- color: #222;
+ background-color: $theme-background;
+ border-bottom: 1px solid $border-color;
+ color: $font-color;
font-size: $font-size-smaller;
}
- .nav-bar.dark {
- background-color: #333840;
- border-bottom: 1px solid #252a2f;
- color: #fafbfc;
- }
-
.title {
font-size: $font-size-normal;
font-weight: 500;
+ padding-top: 5px;
}
.nav-tabs {
diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts
index 994e83a5..0cbf1a89 100644
--- a/src/store/modules/app.ts
+++ b/src/store/modules/app.ts
@@ -23,6 +23,7 @@ import type { AxiosResponse } from "axios";
import dateFormatStep, { dateFormatTime } from "@/utils/dateFormat";
import { TimeType } from "@/constants/data";
import type { MenuOptions, SubItem } from "@/types/app";
+import { Themes } from "@/constants/data";
/*global Nullable*/
interface AppState {
durationRow: Recordable;
@@ -36,6 +37,7 @@ interface AppState {
isMobile: boolean;
reloadTimer: Nullable<IntervalHandle>;
allMenus: MenuOptions[];
+ theme: string;
}
export const appStore = defineStore({
@@ -56,6 +58,7 @@ export const appStore = defineStore({
isMobile: false,
reloadTimer: null,
allMenus: [],
+ theme: Themes.Dark,
}),
getters: {
duration(): Duration {
@@ -126,6 +129,9 @@ export const appStore = defineStore({
updateDurationRow(data: Duration) {
this.durationRow = data;
},
+ setTheme(data: string) {
+ this.theme = data;
+ },
setUTC(utcHour: number, utcMin: number): void {
this.runEventStack();
this.utcMin = utcMin;
diff --git a/src/store/modules/profile.ts b/src/store/modules/profile.ts
index f1bbf59a..4fd4b200 100644
--- a/src/store/modules/profile.ts
+++ b/src/store/modules/profile.ts
@@ -163,7 +163,7 @@ export const profileStore = defineStore({
return res.data;
},
async getSegmentSpans(params: { segmentId: string }) {
- if (!params.segmentId) {
+ if (!(params && params.segmentId)) {
return new Promise((resolve) => resolve({}));
}
const res: AxiosResponse = await graphql.query("queryProfileSegment").params(params);
diff --git a/src/styles/light.scss b/src/styles/light.scss
deleted file mode 100644
index ef6be368..00000000
--- a/src/styles/light.scss
+++ /dev/null
@@ -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;
diff --git a/src/styles/reset.scss b/src/styles/reset.scss
index 49262e50..d2396848 100644
--- a/src/styles/reset.scss
+++ b/src/styles/reset.scss
@@ -144,18 +144,6 @@ pre {
}
}
-.el-switch__label--left {
- margin-right: 5px;
-}
-
-.el-switch__label--right {
- margin-left: 5px;
-}
-
-.el-switch__label * {
- font-size: $font-size-smaller;
-}
-
.el-drawer__header {
margin-bottom: 0;
padding-left: 10px;
@@ -173,9 +161,10 @@ pre {
div.vis-tooltip {
max-width: 600px;
overflow: hidden;
- background-color: $theme-background !important;
+ background-color: var(--vis-tooltip-bg) !important;
white-space: normal !important;
font-size: $font-size-smaller !important;
+ color: var(--font-color) !important;
}
.vis-item {
@@ -187,13 +176,13 @@ div.vis-tooltip {
background-color: #e66;
opacity: 0.8;
border-color: #e66;
- color: $text-color !important;
+ color: var(--sw-event-vis-selected) !important;
}
.vis-item.Normal {
background-color: #fac858;
border-color: #fac858;
- color: #666 !important;
+ color: var(--sw-event-vis-selected) !important;
}
.vis-item .vis-item-content {
@@ -202,7 +191,11 @@ div.vis-tooltip {
.vis-item.vis-selected.Error,
.vis-item.vis-selected.Normal {
- color: #1a1a1a !important;
+ color: var(--sw-event-vis-selected) !important;
+}
+
+.vis-time-axis .vis-text {
+ color: var(--sw-time-axis-text) !important;
}
.el-menu--vertical.sub-list {
diff --git a/src/styles/theme.scss b/src/styles/theme.scss
new file mode 100644
index 00000000..9d48255d
--- /dev/null
+++ b/src/styles/theme.scss
@@ -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;
diff --git a/src/views/Marketplace.vue b/src/views/Marketplace.vue
index be1360d1..4a2e0e98 100644
--- a/src/views/Marketplace.vue
+++ b/src/views/Marketplace.vue
@@ -113,7 +113,7 @@ limitations under the License. -->
.category {
flex-wrap: wrap;
- border-right: 1px solid #ddd;
+ border-right: 1px solid var(--sw-marketplace-border);
align-content: flex-start;
height: 100%;
overflow: auto;
diff --git a/src/views/Settings.vue b/src/views/Settings.vue
index 86d71a5f..bd3ef075 100644
--- a/src/views/Settings.vue
+++ b/src/views/Settings.vue
@@ -156,7 +156,7 @@ limitations under the License. -->
}
.settings {
- color: #606266;
+ color: var(--sw-setting-color);
font-size: 13px;
padding: 20px;
@@ -177,7 +177,7 @@ limitations under the License. -->
width: 180px;
display: inline-block;
font-weight: 500;
- color: #000;
+ color: $font-color;
line-height: 25px;
}
}
diff --git a/src/views/alarm/Content.vue b/src/views/alarm/Content.vue
index 56001b31..11cc8871 100644
--- a/src/views/alarm/Content.vue
+++ b/src/views/alarm/Content.vue
@@ -157,7 +157,7 @@ limitations under the License. -->
.timeline-table-i {
padding: 10px 15px;
- border-left: 4px solid #eee;
+ border-left: 4px solid var(--border-color-primary);
position: relative;
&::after {
diff --git a/src/views/alarm/Header.vue b/src/views/alarm/Header.vue
index 0ac0f3dd..544c91f1 100644
--- a/src/views/alarm/Header.vue
+++ b/src/views/alarm/Header.vue
@@ -39,7 +39,11 @@ limitations under the License. -->
@current-change="changePage"
:pager-count="5"
small
- :style="`--el-pagination-bg-color: #f0f2f5; --el-pagination-button-disabled-bg-color: #f0f2f5;`"
+ :style="
+ appStore.theme === Themes.Light
+ ? `--el-pagination-bg-color: #f0f2f5; --el-pagination-button-disabled-bg-color: #f0f2f5;`
+ : ''
+ "
/>
</div>
</div>
@@ -54,6 +58,7 @@ limitations under the License. -->
import { useAppStoreWithOut } from "@/store/modules/app";
import { useAlarmStore } from "@/store/modules/alarm";
import { ElMessage } from "element-plus";
+ import { Themes } from "@/constants/data";
const appStore = useAppStoreWithOut();
const alarmStore = useAlarmStore();
@@ -99,8 +104,8 @@ limitations under the License. -->
<style lang="scss" scoped>
.alarm-tool {
font-size: $font-size-smaller;
- border-bottom: 1px solid #c1c5ca41;
- background-color: #f0f2f5;
+ border-bottom: 1px solid var(--sw-alarm-tool-border);
+ background-color: var(--sw-alarm-tool);
padding: 10px;
position: relative;
}
diff --git a/src/views/dashboard/Widget.vue b/src/views/dashboard/Widget.vue
index 6adb996c..1bbf7215 100644
--- a/src/views/dashboard/Widget.vue
+++ b/src/views/dashboard/Widget.vue
@@ -186,7 +186,7 @@ limitations under the License. -->
<style lang="scss" scoped>
.content {
min-width: 100px;
- border: 1px solid #eee;
+ border: 1px solid $border-color-primary;
background-color: $theme-background;
position: relative;
}
diff --git a/src/views/dashboard/configuration/ContinuousProfiling.vue b/src/views/dashboard/configuration/ContinuousProfiling.vue
index 7b8b9c60..a0a947f8 100644
--- a/src/views/dashboard/configuration/ContinuousProfiling.vue
+++ b/src/views/dashboard/configuration/ContinuousProfiling.vue
@@ -91,7 +91,7 @@ limitations under the License. -->
position: fixed;
bottom: 0;
right: 0;
- border-top: 1px solid #eee;
+ border-top: 1px solid $border-color;
padding: 10px;
text-align: right;
width: 100%;
diff --git a/src/views/dashboard/configuration/Event.vue b/src/views/dashboard/configuration/Event.vue
index 23fe8d16..0f59cb57 100644
--- a/src/views/dashboard/configuration/Event.vue
+++ b/src/views/dashboard/configuration/Event.vue
@@ -68,7 +68,7 @@ limitations under the License. -->
position: fixed;
bottom: 0;
right: 0;
- border-top: 1px solid #eee;
+ border-top: 1px solid $border-color-primary;
padding: 10px;
text-align: right;
width: 100%;
diff --git a/src/views/dashboard/configuration/Text.vue b/src/views/dashboard/configuration/Text.vue
index f70cc1be..984bd06b 100644
--- a/src/views/dashboard/configuration/Text.vue
+++ b/src/views/dashboard/configuration/Text.vue
@@ -89,6 +89,7 @@ limitations under the License. -->
const fontSize = ref<number>(graph.fontSize || 12);
const textAlign = ref(graph.textAlign || "left");
const Colors = [
+ { label: "Theme", value: "theme" },
{
label: "Green",
value: "green",
@@ -151,7 +152,7 @@ limitations under the License. -->
position: fixed;
bottom: 0;
right: 0;
- border-top: 1px solid #eee;
+ border-top: 1px solid $border-color-primary;
padding: 10px;
text-align: right;
width: 100%;
diff --git a/src/views/dashboard/configuration/ThirdPartyApp.vue b/src/views/dashboard/configuration/ThirdPartyApp.vue
index cbfe9314..6e1c7a36 100644
--- a/src/views/dashboard/configuration/ThirdPartyApp.vue
+++ b/src/views/dashboard/configuration/ThirdPartyApp.vue
@@ -80,7 +80,7 @@ limitations under the License. -->
position: fixed;
bottom: 0;
right: 0;
- border-top: 1px solid #eee;
+ border-top: 1px solid $border-color-primary;
padding: 10px;
text-align: right;
width: 100%;
diff --git a/src/views/dashboard/configuration/TimeRange.vue b/src/views/dashboard/configuration/TimeRange.vue
index d1eed12a..a0516edd 100644
--- a/src/views/dashboard/configuration/TimeRange.vue
+++ b/src/views/dashboard/configuration/TimeRange.vue
@@ -147,7 +147,7 @@ limitations under the License. -->
position: fixed;
bottom: 0;
right: 0;
- border-top: 1px solid #eee;
+ border-top: 1px solid $border-color-primary;
padding: 10px;
text-align: right;
width: 100%;
diff --git a/src/views/dashboard/configuration/Topology.vue b/src/views/dashboard/configuration/Topology.vue
index 374e5938..64242f9d 100644
--- a/src/views/dashboard/configuration/Topology.vue
+++ b/src/views/dashboard/configuration/Topology.vue
@@ -63,7 +63,7 @@ limitations under the License. -->
position: fixed;
bottom: 0;
right: 0;
- border-top: 1px solid #eee;
+ border-top: 1px solid $border-color-primary;
padding: 10px;
text-align: right;
width: 100%;
diff --git a/src/views/dashboard/configuration/Widget.vue b/src/views/dashboard/configuration/Widget.vue
index 0c9dc4c5..dd846a99 100644
--- a/src/views/dashboard/configuration/Widget.vue
+++ b/src/views/dashboard/configuration/Widget.vue
@@ -201,7 +201,7 @@ limitations under the License. -->
.graph {
position: relative;
min-width: 1280px;
- border: 1px solid #eee;
+ border: 1px solid $border-color-primary;
background-color: $theme-background;
}
@@ -209,7 +209,7 @@ limitations under the License. -->
height: 25px;
line-height: 25px;
text-align: center;
- background-color: aliceblue;
+ background-color: var(--sw-config-header);
font-size: $font-size-smaller;
position: relative;
}
@@ -249,7 +249,7 @@ limitations under the License. -->
position: fixed;
bottom: 0;
right: 0;
- border-top: 1px solid #eee;
+ border-top: 1px solid $border-color-primary;
padding: 10px;
text-align: right;
width: 100%;
diff --git a/src/views/dashboard/configuration/widget/metric/Index.vue b/src/views/dashboard/configuration/widget/metric/Index.vue
index ac316047..a58d2d9a 100644
--- a/src/views/dashboard/configuration/widget/metric/Index.vue
+++ b/src/views/dashboard/configuration/widget/metric/Index.vue
@@ -630,11 +630,10 @@ limitations under the License. -->
.expression-param {
display: inline-block;
width: 400px;
- border: 1px solid #dcdfe6;
+ border: 1px solid $border-color;
cursor: text;
padding: 0 5px;
border-radius: 3px;
- color: #606266;
outline: none;
margin-right: 5px;
min-height: 26px;
diff --git a/src/views/dashboard/controls/ContinuousProfiling.vue b/src/views/dashboard/controls/ContinuousProfiling.vue
index a6e4e752..10030f8b 100644
--- a/src/views/dashboard/controls/ContinuousProfiling.vue
+++ b/src/views/dashboard/controls/ContinuousProfiling.vue
@@ -75,7 +75,7 @@ limitations under the License. -->
.header {
padding: 10px;
font-size: $font-size-smaller;
- border-bottom: 1px solid #dcdfe6;
+ border-bottom: 1px solid $border-color;
}
.tools {
@@ -87,7 +87,7 @@ limitations under the License. -->
&:hover {
color: $active-color;
- background-color: #eee;
+ background-color: $popper-hover-bg-color;
}
}
@@ -95,6 +95,6 @@ limitations under the License. -->
font-weight: bold;
line-height: 40px;
padding: 0 10px;
- border-bottom: 1px solid #dcdfe6;
+ border-bottom: 1px solid $border-color;
}
</style>
diff --git a/src/views/dashboard/controls/DemandLog.vue b/src/views/dashboard/controls/DemandLog.vue
index b6d30aec..d8c44b79 100644
--- a/src/views/dashboard/controls/DemandLog.vue
+++ b/src/views/dashboard/controls/DemandLog.vue
@@ -69,7 +69,7 @@ limitations under the License. -->
.header {
padding: 10px;
font-size: $font-size-smaller;
- border-bottom: 1px solid #dcdfe6;
+ border-bottom: 1px solid $border-color;
min-width: 1024px;
}
@@ -82,7 +82,7 @@ limitations under the License. -->
&:hover {
color: $active-color;
- background-color: #eee;
+ background-color: $popper-hover-bg-color;
}
}
</style>
diff --git a/src/views/dashboard/controls/Ebpf.vue b/src/views/dashboard/controls/Ebpf.vue
index 69398329..9841e858 100644
--- a/src/views/dashboard/controls/Ebpf.vue
+++ b/src/views/dashboard/controls/Ebpf.vue
@@ -68,7 +68,7 @@ limitations under the License. -->
.header {
padding: 10px;
font-size: $font-size-smaller;
- border-bottom: 1px solid #dcdfe6;
+ border-bottom: 1px solid $border-color;
}
.tools {
@@ -80,7 +80,7 @@ limitations under the License. -->
&:hover {
color: $active-color;
- background-color: #eee;
+ background-color: $popper-hover-bg-color;
}
}
diff --git a/src/views/dashboard/controls/Event.vue b/src/views/dashboard/controls/Event.vue
index 4cec0cde..2aa219a8 100644
--- a/src/views/dashboard/controls/Event.vue
+++ b/src/views/dashboard/controls/Event.vue
@@ -80,7 +80,7 @@ limitations under the License. -->
.header {
padding: 10px;
font-size: $font-size-smaller;
- border-bottom: 1px solid #dcdfe6;
+ border-bottom: 1px solid $border-color;
min-width: 1024px;
}
@@ -93,7 +93,7 @@ limitations under the License. -->
&:hover {
color: $active-color;
- background-color: #eee;
+ background-color: $popper-hover-bg-color;
}
}
diff --git a/src/views/dashboard/controls/Log.vue b/src/views/dashboard/controls/Log.vue
index 0f966c2e..2f7a8c1b 100644
--- a/src/views/dashboard/controls/Log.vue
+++ b/src/views/dashboard/controls/Log.vue
@@ -77,7 +77,7 @@ limitations under the License. -->
.header {
padding: 10px;
font-size: $font-size-smaller;
- border-bottom: 1px solid #dcdfe6;
+ border-bottom: 1px solid $border-color;
min-width: 1024px;
}
@@ -90,7 +90,7 @@ limitations under the License. -->
&:hover {
color: $active-color;
- background-color: #eee;
+ background-color: $popper-hover-bg-color;
}
}
diff --git a/src/views/dashboard/controls/NetworkProfiling.vue b/src/views/dashboard/controls/NetworkProfiling.vue
index c144f8ac..5afc1113 100644
--- a/src/views/dashboard/controls/NetworkProfiling.vue
+++ b/src/views/dashboard/controls/NetworkProfiling.vue
@@ -67,7 +67,7 @@ limitations under the License. -->
.header {
padding: 10px;
font-size: $font-size-smaller;
- border-bottom: 1px solid #dcdfe6;
+ border-bottom: 1px solid $border-color;
}
.tools {
@@ -79,7 +79,7 @@ limitations under the License. -->
&:hover {
color: $active-color;
- background-color: #eee;
+ background-color: $popper-hover-bg-color;
}
}
@@ -87,6 +87,6 @@ limitations under the License. -->
font-weight: bold;
line-height: 40px;
padding: 0 10px;
- border-bottom: 1px solid #dcdfe6;
+ border-bottom: 1px solid $border-color;
}
</style>
diff --git a/src/views/dashboard/controls/Profile.vue b/src/views/dashboard/controls/Profile.vue
index 50871f5c..81cdcadc 100644
--- a/src/views/dashboard/controls/Profile.vue
+++ b/src/views/dashboard/controls/Profile.vue
@@ -68,7 +68,7 @@ limitations under the License. -->
.header {
padding: 10px;
font-size: $font-size-smaller;
- border-bottom: 1px solid #dcdfe6;
+ border-bottom: 1px solid $border-color;
}
.tools {
@@ -80,7 +80,7 @@ limitations under the License. -->
&:hover {
color: $active-color;
- background-color: #eee;
+ background-color: $popper-hover-bg-color;
}
}
diff --git a/src/views/dashboard/controls/Tab.vue b/src/views/dashboard/controls/Tab.vue
index 5574cd94..74f71b92 100644
--- a/src/views/dashboard/controls/Tab.vue
+++ b/src/views/dashboard/controls/Tab.vue
@@ -302,15 +302,16 @@ limitations under the License. -->
height: 20px;
line-height: 20px;
outline: none;
- color: #333;
+ color: $font-color;
font-style: normal;
overflow: hidden;
text-overflow: ellipsis;
margin-right: 20px;
+ background-color: $theme-background;
}
.tab-icons {
- color: #333;
+ color: $font-color;
i {
margin-right: 3px;
@@ -350,17 +351,17 @@ limitations under the License. -->
.tab-header {
justify-content: space-between;
width: 100%;
- border-bottom: 1px solid #eee;
+ border-bottom: 1px solid $border-color-primary;
}
.vue-grid-layout {
- background: #f7f9fa;
+ background: $layout-background;
height: auto !important;
}
.vue-grid-item:not(.vue-grid-placeholder) {
background: $theme-background;
- box-shadow: 0 1px 4px 0 #00000029;
+ box-shadow: 0 0 3px 0 $box-shadow-color;
border-radius: 3px;
}
diff --git a/src/views/dashboard/controls/TaskTimeline.vue b/src/views/dashboard/controls/TaskTimeline.vue
index 9a4be4c3..6adc28e4 100644
--- a/src/views/dashboard/controls/TaskTimeline.vue
+++ b/src/views/dashboard/controls/TaskTimeline.vue
@@ -67,7 +67,7 @@ limitations under the License. -->
.header {
padding: 10px;
font-size: $font-size-smaller;
- border-bottom: 1px solid #dcdfe6;
+ border-bottom: 1px solid $border-color;
}
.tools {
@@ -79,7 +79,7 @@ limitations under the License. -->
&:hover {
color: $active-color;
- background-color: #eee;
+ background-color: $popper-hover-bg-color;
}
}
@@ -87,6 +87,6 @@ limitations under the License. -->
font-weight: bold;
line-height: 40px;
padding: 0 10px;
- border-bottom: 1px solid #dcdfe6;
+ border-bottom: 1px solid $border-color;
}
</style>
diff --git a/src/views/dashboard/controls/Text.vue b/src/views/dashboard/controls/Text.vue
index c66e68bf..2316e752 100644
--- a/src/views/dashboard/controls/Text.vue
+++ b/src/views/dashboard/controls/Text.vue
@@ -32,7 +32,7 @@ limitations under the License. -->
<div
class="body"
:style="{
- backgroundColor: TextColors[graph.backgroundColor],
+ backgroundColor,
justifyContent: graph.textAlign,
}"
>
@@ -40,7 +40,7 @@ limitations under the License. -->
:href="graph.url"
target="_blank"
:style="{
- color: TextColors[graph.fontColor],
+ color: fontColor,
fontSize: graph.fontSize + 'px',
}"
>
@@ -55,6 +55,8 @@ limitations under the License. -->
import { useI18n } from "vue-i18n";
import { useDashboardStore } from "@/store/modules/dashboard";
import { TextColors } from "@/views/dashboard/data";
+ import { useAppStoreWithOut } from "@/store/modules/app";
+ import { Themes } from "@/constants/data";
/*global defineProps */
const props = defineProps({
@@ -65,9 +67,17 @@ limitations under the License. -->
activeIndex: { type: String, default: "" },
});
const { t } = useI18n();
+ const appStore = useAppStoreWithOut();
const graph = computed(() => props.data.graph || {});
const dashboardStore = useDashboardStore();
+ const backgroundColor = computed(
+ () => TextColors[graph.value.backgroundColor] || (appStore.theme === Themes.Dark ? "#212224" : "#fff"),
+ );
+ const fontColor = computed(
+ () => TextColors[graph.value.fontColor] || (appStore.theme === Themes.Dark ? "#fafbfc" : "#3d444f"),
+ );
+
function removeTopo() {
dashboardStore.removeControls(props.data);
}
@@ -112,7 +122,7 @@ limitations under the License. -->
&:hover {
color: $active-color;
- background-color: #eee;
+ background-color: $popper-hover-bg-color;
}
}
</style>
diff --git a/src/views/dashboard/controls/ThirdPartyApp.vue b/src/views/dashboard/controls/ThirdPartyApp.vue
index 5eac036c..3103fc1f 100644
--- a/src/views/dashboard/controls/ThirdPartyApp.vue
+++ b/src/views/dashboard/controls/ThirdPartyApp.vue
@@ -103,7 +103,7 @@ limitations under the License. -->
&:hover {
color: $active-color;
- background-color: #eee;
+ background-color: $popper-hover-bg-color;
}
}
diff --git a/src/views/dashboard/controls/TimeRange.vue b/src/views/dashboard/controls/TimeRange.vue
index ccdea213..fd828e3b 100644
--- a/src/views/dashboard/controls/TimeRange.vue
+++ b/src/views/dashboard/controls/TimeRange.vue
@@ -176,7 +176,7 @@ limitations under the License. -->
&:hover {
color: $active-color;
- background-color: #eee;
+ background-color: $popper-hover-bg-color;
}
}
</style>
diff --git a/src/views/dashboard/controls/Topology.vue b/src/views/dashboard/controls/Topology.vue
index ff2553f5..f1945216 100644
--- a/src/views/dashboard/controls/Topology.vue
+++ b/src/views/dashboard/controls/Topology.vue
@@ -59,7 +59,6 @@ limitations under the License. -->
</script>
<style lang="scss" scoped>
.topology {
- // background-color: #333840;
width: 100%;
height: 100%;
font-size: $font-size-smaller;
@@ -82,7 +81,7 @@ limitations under the License. -->
&:hover {
color: $active-color;
- background-color: #eee;
+ background-color: $popper-hover-bg-color;
}
}
diff --git a/src/views/dashboard/controls/Trace.vue b/src/views/dashboard/controls/Trace.vue
index ab1e8e86..0c1b0682 100644
--- a/src/views/dashboard/controls/Trace.vue
+++ b/src/views/dashboard/controls/Trace.vue
@@ -76,7 +76,7 @@ limitations under the License. -->
.header {
padding: 10px;
font-size: $font-size-smaller;
- border-bottom: 1px solid #dcdfe6;
+ border-bottom: 1px solid $border-color;
min-width: 1200px;
}
@@ -89,7 +89,7 @@ limitations under the License. -->
&:hover {
color: $active-color;
- background-color: #eee;
+ background-color: $popper-hover-bg-color;
}
}
diff --git a/src/views/dashboard/controls/Widget.vue b/src/views/dashboard/controls/Widget.vue
index 72b8d870..f7ac3812 100644
--- a/src/views/dashboard/controls/Widget.vue
+++ b/src/views/dashboard/controls/Widget.vue
@@ -277,7 +277,7 @@ limitations under the License. -->
height: 30px;
padding: 5px;
width: 100%;
- border-bottom: 1px solid #eee;
+ border-bottom: 1px solid $border-color-primary;
justify-content: space-between;
}
@@ -294,7 +294,7 @@ limitations under the License. -->
&:hover {
color: $active-color;
- background-color: #eee;
+ background-color: $popper-hover-bg-color;
}
}
diff --git a/src/views/dashboard/data.ts b/src/views/dashboard/data.ts
index f30b5c15..3b503638 100644
--- a/src/views/dashboard/data.ts
+++ b/src/views/dashboard/data.ts
@@ -306,9 +306,9 @@ export const TextColors: { [key: string]: string } = {
green: "#67C23A",
blue: "#409EFF",
red: "#F56C6C",
- grey: "#909399",
+ grey: "#809399",
white: "#fff",
- black: "#000",
+ black: "#303133",
orange: "#E6A23C",
purple: "#bf99f8",
};
diff --git a/src/views/dashboard/graphs/Bar.vue b/src/views/dashboard/graphs/Bar.vue
index 8db91881..db646e48 100644
--- a/src/views/dashboard/graphs/Bar.vue
+++ b/src/views/dashboard/graphs/Bar.vue
@@ -24,6 +24,8 @@ limitations under the License. -->
import type { BarConfig, EventParams, RelatedTrace, Filters } from "@/types/dashboard";
import useLegendProcess from "@/hooks/useLegendProcessor";
import Legend from "./components/Legend.vue";
+ import { useAppStoreWithOut } from "@/store/modules/app";
+ import { Themes } from "@/constants/data";
/*global defineProps, defineEmits */
const emits = defineEmits(["click"]);
@@ -46,6 +48,7 @@ limitations under the License. -->
default: () => ({}),
},
});
+ const appStore = useAppStoreWithOut();
const { showEchartsLegend, isRight, chartColors } = useLegendProcess(props.config.legend);
const option = computed(() => getOption());
@@ -91,8 +94,11 @@ limitations under the License. -->
top: 0,
left: 0,
itemWidth: 12,
+ backgroundColor: appStore.theme === Themes.Dark ? "#333" : "#fff",
+ borderColor: appStore.theme === Themes.Dark ? "#333" : "#fff",
textStyle: {
- color: "#333",
+ fontSize: 12,
+ color: appStore.theme === Themes.Dark ? "#eee" : "#333",
},
},
grid: {
diff --git a/src/views/dashboard/graphs/Card.vue b/src/views/dashboard/graphs/Card.vue
index 197dcb44..ff5b2c33 100644
--- a/src/views/dashboard/graphs/Card.vue
+++ b/src/views/dashboard/graphs/Card.vue
@@ -61,7 +61,7 @@ limitations under the License. -->
</script>
<style lang="scss" scoped>
.chart-card {
- color: #333;
+ color: $font-color;
width: 100%;
height: 100%;
display: flex;
diff --git a/src/views/dashboard/graphs/Line.vue b/src/views/dashboard/graphs/Line.vue
index a9cda6f9..d438df06 100644
--- a/src/views/dashboard/graphs/Line.vue
+++ b/src/views/dashboard/graphs/Line.vue
@@ -31,6 +31,8 @@ limitations under the License. -->
import Legend from "./components/Legend.vue";
import useLegendProcess from "@/hooks/useLegendProcessor";
import { isDef } from "@/utils/is";
+ import { useAppStoreWithOut } from "@/store/modules/app";
+ import { Themes } from "@/constants/data";
/*global defineProps, defineEmits */
const emits = defineEmits(["click"]);
@@ -40,7 +42,6 @@ limitations under the License. -->
default: () => ({}),
},
intervalTime: { type: Array as PropType<string[]>, default: () => [] },
- theme: { type: String, default: "light" },
config: {
type: Object as PropType<
LineConfig & {
@@ -62,6 +63,7 @@ limitations under the License. -->
}),
},
});
+ const appStore = useAppStoreWithOut();
const setRight = ref<boolean>(false);
const option = computed(() => getOption());
function getOption() {
@@ -93,9 +95,11 @@ limitations under the License. -->
const color: string[] = chartColors(keys);
const tooltip = {
trigger: "axis",
+ backgroundColor: appStore.theme === Themes.Dark ? "#333" : "#fff",
+ borderColor: appStore.theme === Themes.Dark ? "#333" : "#fff",
textStyle: {
fontSize: 12,
- color: "#333",
+ color: appStore.theme === Themes.Dark ? "#eee" : "#333",
},
enterable: true,
confine: true,
@@ -108,9 +112,11 @@ limitations under the License. -->
confine: true,
extraCssText: `height: 20px; padding:0 2px;`,
trigger: "axis",
+ backgroundColor: appStore.theme === Themes.Dark ? "#666" : "#eee",
+ borderColor: appStore.theme === Themes.Dark ? "#666" : "#eee",
textStyle: {
fontSize: 12,
- color: "#333",
+ color: appStore.theme === Themes.Dark ? "#eee" : "#333",
},
};
@@ -125,7 +131,7 @@ limitations under the License. -->
left: 0,
itemWidth: 12,
textStyle: {
- color: props.theme === "dark" ? "#fff" : "#333",
+ color: appStore.theme === Themes.Dark ? "#fff" : "#333",
},
},
grid: {
diff --git a/src/views/dashboard/graphs/Table.vue b/src/views/dashboard/graphs/Table.vue
index a03827a5..2dbae271 100644
--- a/src/views/dashboard/graphs/Table.vue
+++ b/src/views/dashboard/graphs/Table.vue
@@ -106,12 +106,12 @@ limitations under the License. -->
.row:first-child {
div {
border-top: 1px solid $disabled-color;
- background: #eee;
+ background-color: var(--border-color-primary);
}
}
.header {
- color: #000;
+ color: var(--sw-table-color);
font-weight: bold;
}
diff --git a/src/views/dashboard/graphs/TopList.vue b/src/views/dashboard/graphs/TopList.vue
index 336c0892..c3c5377c 100644
--- a/src/views/dashboard/graphs/TopList.vue
+++ b/src/views/dashboard/graphs/TopList.vue
@@ -141,7 +141,7 @@ limitations under the License. -->
.progress-bar {
font-size: $font-size-smaller;
- color: #333;
+ color: $font-color;
}
.chart-slow-i {
@@ -171,7 +171,7 @@ limitations under the License. -->
padding: 4px 10px 7px;
border-radius: 4px;
border: 1px solid #ddd;
- color: #333;
+ color: $font-color;
background-color: $theme-background;
will-change: opacity, background-color;
transition: opacity 0.3s, background-color 0.3s;
@@ -188,12 +188,12 @@ limitations under the License. -->
}
.operation-icon {
- color: #333;
+ color: $font-color;
}
.operation {
padding: 5px 0;
- color: #333;
+ color: $font-color;
cursor: pointer;
position: relative;
text-align: center;
@@ -201,7 +201,7 @@ limitations under the License. -->
&:hover {
color: $active-color;
- background-color: #eee;
+ background-color: $popper-hover-bg-color;
}
}
</style>
diff --git a/src/views/dashboard/panel/Layout.vue b/src/views/dashboard/panel/Layout.vue
index c349bdea..ec7e645f 100644
--- a/src/views/dashboard/panel/Layout.vue
+++ b/src/views/dashboard/panel/Layout.vue
@@ -80,13 +80,13 @@ limitations under the License. -->
</script>
<style lang="scss" scoped>
.vue-grid-layout {
- background: #f7f9fa;
+ background: $layout-background;
height: auto !important;
}
.vue-grid-item:not(.vue-grid-placeholder) {
background-color: $theme-background;
- box-shadow: 0 1px 4px 0 #00000029;
+ box-shadow: 0 0 3px 0 $box-shadow-color;
border-radius: 3px;
}
diff --git a/src/views/dashboard/panel/Tool.vue b/src/views/dashboard/panel/Tool.vue
index aaf27fdd..f584a057 100644
--- a/src/views/dashboard/panel/Tool.vue
+++ b/src/views/dashboard/panel/Tool.vue
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License. -->
<template>
<div class="dashboard-tool flex-h">
- <div :class="isRelation ? 'flex-v' : 'flex-h'">
+ <div :class="isRelation ? 'flex-v' : 'flex-h'" class="tool-selectors">
<div class="flex-h">
<div class="selectors-item" v-if="key !== 10">
<span class="label">$Service</span>
@@ -103,27 +103,24 @@ limitations under the License. -->
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item @click="clickIcons(t)" v-for="(t, index) in toolIcons" :key="index" :title="t.content">
- <Icon class="mr-5" size="middle" :iconName="t.name" />
+ <Icon class="mr-5" size="sm" :iconName="t.name" />
<span>{{ t.content }}</span>
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
- <el-tooltip content="Apply" placement="bottom" effect="light">
+ <el-tooltip content="Apply" placement="bottom">
<i @click="applyDashboard">
<Icon class="icon-btn" size="sm" iconName="save" />
</i>
</el-tooltip>
</div>
- <div class="switch">
+ <div class="ml-5">
<el-switch
v-model="dashboardStore.editMode"
active-text="E"
inactive-text="V"
- size="small"
inline-prompt
- active-color="#409eff"
- inactive-color="#999"
@change="changeMode"
/>
</div>
@@ -738,15 +735,15 @@ limitations under the License. -->
<style lang="scss" scoped>
.dashboard-tool {
text-align: right;
- padding: 3px 5px 5px;
- background: rgb(240 242 245);
- border-bottom: 1px solid #dfe4e8;
+ padding: 5px;
+ background: $dashboard-tool-bg-color;
+ border-bottom: 1px solid $border-color;
justify-content: space-between;
}
- .switch {
- padding-top: 2px;
- margin: 0 10px;
+ .tool-selectors {
+ align-items: center;
+ height: auto;
}
.label {
@@ -761,6 +758,7 @@ limitations under the License. -->
.tools {
justify-content: space-between;
+ align-items: center;
height: auto;
}
@@ -768,12 +766,12 @@ limitations under the License. -->
display: inline-block;
padding: 3px;
text-align: center;
- border: 1px solid $disabled-color;
+ border: 1px solid var(--sw-icon-btn-border);
border-radius: 3px;
margin-left: 6px;
cursor: pointer;
- background-color: #eee;
- color: #666;
+ background-color: var(--sw-icon-btn-bg);
+ color: var(--sw-icon-btn-color);
font-size: $font-size-smaller;
}
diff --git a/src/views/dashboard/related/continuous-profiling/components/InstanceList.vue b/src/views/dashboard/related/continuous-profiling/components/InstanceList.vue
index 57da33c9..ea1f5e94 100644
--- a/src/views/dashboard/related/continuous-profiling/components/InstanceList.vue
+++ b/src/views/dashboard/related/continuous-profiling/components/InstanceList.vue
@@ -149,14 +149,14 @@ limitations under the License. -->
font-weight: bold;
border-bottom: 1px solid rgb(0 0 0 / 7%);
padding: 10px 20px;
- background-color: #f3f4f9;
+ background-color: var(--sw-table-header);
}
.settings {
padding: 1px 0;
border: 1px solid #666;
border-radius: 3px;
- color: #666;
+ color: var(--text-color-placeholder);
cursor: pointer;
}
diff --git a/src/views/dashboard/related/continuous-profiling/components/Policy.vue b/src/views/dashboard/related/continuous-profiling/components/Policy.vue
index 386989cb..4bc5e6f9 100644
--- a/src/views/dashboard/related/continuous-profiling/components/Policy.vue
+++ b/src/views/dashboard/related/continuous-profiling/components/Policy.vue
@@ -212,11 +212,11 @@ limitations under the License. -->
}
#uri-param {
- border: 1px solid #dcdfe6;
+ border: 1px solid $border-color;
cursor: text;
padding: 0 5px;
border-radius: 4px;
- color: #606266;
+ color: var(--sw-setting-color);
outline: none;
height: 100px;
diff --git a/src/views/dashboard/related/continuous-profiling/components/PolicyList.vue b/src/views/dashboard/related/continuous-profiling/components/PolicyList.vue
index 9787903c..428fbd1e 100644
--- a/src/views/dashboard/related/continuous-profiling/components/PolicyList.vue
+++ b/src/views/dashboard/related/continuous-profiling/components/PolicyList.vue
@@ -147,7 +147,7 @@ limitations under the License. -->
width: 300px;
height: 98%;
overflow: auto;
- border-right: 1px solid rgb(0 0 0 / 10%);
+ border-right: 1px solid var(--sw-trace-list-border);
}
.item span {
@@ -159,7 +159,7 @@ limitations under the License. -->
border-bottom: 1px solid rgb(0 0 0 / 7%);
&.selected {
- background-color: #ededed;
+ background-color: var(--sw-list-selected);
}
}
@@ -184,14 +184,14 @@ limitations under the License. -->
.profile-tr {
&:hover {
- background-color: rgb(0 0 0 / 4%);
+ background-color: var(--sw-list-hover);
}
}
.profile-t-tool {
padding: 10px 5px 10px 10px;
border-bottom: 1px solid rgb(0 0 0 / 7%);
- background: #f3f4f9;
+ background-color: var(--sw-table-header);
width: 100%;
font-weight: bold;
}
diff --git a/src/views/dashboard/related/ebpf/Header.vue b/src/views/dashboard/related/ebpf/Header.vue
index 289d1c89..0c3c10df 100644
--- a/src/views/dashboard/related/ebpf/Header.vue
+++ b/src/views/dashboard/related/ebpf/Header.vue
@@ -90,7 +90,7 @@ limitations under the License. -->
.header {
padding: 5px 20px 5px 10px;
font-size: $font-size-smaller;
- border-bottom: 1px solid #dcdfe6;
+ border-bottom: 1px solid $border-color;
justify-content: space-between;
}
diff --git a/src/views/dashboard/related/ebpf/components/TaskList.vue b/src/views/dashboard/related/ebpf/components/TaskList.vue
index 7e50238f..43d322d5 100644
--- a/src/views/dashboard/related/ebpf/components/TaskList.vue
+++ b/src/views/dashboard/related/ebpf/components/TaskList.vue
@@ -80,7 +80,7 @@ limitations under the License. -->
width: 300px;
height: calc(100% - 10px);
overflow: auto;
- border-right: 1px solid rgb(0 0 0 / 10%);
+ border-right: 1px solid var(--sw-trace-list-border);
}
.item span {
@@ -92,7 +92,7 @@ limitations under the License. -->
border-bottom: 1px solid rgb(0 0 0 / 7%);
&.selected {
- background-color: #ededed;
+ background-color: var(--sw-list-selected);
}
}
@@ -117,16 +117,16 @@ limitations under the License. -->
.profile-tr {
&:hover {
- background-color: rgb(0 0 0 / 4%);
+ background-color: var(--sw-list-hover);
}
}
.profile-t-tool {
padding: 5px 10px;
font-weight: bold;
- border-right: 1px solid rgb(0 0 0 / 7%);
- border-bottom: 1px solid rgb(0 0 0 / 7%);
- background: #f3f4f9;
+ border-right: 1px solid var(--sw-trace-list-border);
+ border-bottom: 1px solid var(--sw-trace-list-border);
+ background-color: var(--sw-table-header);
}
.profile-btn {
diff --git a/src/views/dashboard/related/log/LogTable/Index.vue b/src/views/dashboard/related/log/LogTable/Index.vue
index a0b9be81..125345e3 100644
--- a/src/views/dashboard/related/log/LogTable/Index.vue
+++ b/src/views/dashboard/related/log/LogTable/Index.vue
@@ -74,7 +74,7 @@ limitations under the License. -->
.log {
font-size: $font-size-smaller;
height: 100%;
- border-bottom: 1px solid #eee;
+ border-bottom: 1px solid $border-color-primary;
width: 100%;
overflow: auto;
}
@@ -85,7 +85,7 @@ limitations under the License. -->
user-select: none;
border-left: 0;
border-right: 0;
- border-bottom: 1px solid rgb(0 0 0 / 10%);
+ border-bottom: 1px solid var(--sw-trace-list-border);
.traceId {
width: 140px;
@@ -109,7 +109,7 @@ limitations under the License. -->
border: 1px solid transparent;
border-right: 1px dotted silver;
line-height: 30px;
- background-color: #f3f4f9;
+ background-color: var(--sw-table-header);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
diff --git a/src/views/dashboard/related/network-profiling/components/ProcessTopology.vue b/src/views/dashboard/related/network-profiling/components/ProcessTopology.vue
index b8afe084..dea866d6 100644
--- a/src/views/dashboard/related/network-profiling/components/ProcessTopology.vue
+++ b/src/views/dashboard/related/network-profiling/components/ProcessTopology.vue
@@ -524,7 +524,7 @@ limitations under the License. -->
cursor: pointer;
transition: all 0.5ms linear;
border: 1px solid $disabled-color;
- color: #666;
+ color: var(--text-color-placeholder);
display: inline-block;
padding: 5px;
border-radius: 3px;
@@ -568,7 +568,7 @@ limitations under the License. -->
position: absolute;
visibility: hidden;
padding: 5px;
- border: 1px solid #000;
+ border: var(--sw-topology-border);
border-radius: 3px;
background-color: $theme-background;
}
diff --git a/src/views/dashboard/related/network-profiling/components/Tasks.vue b/src/views/dashboard/related/network-profiling/components/Tasks.vue
index a873a636..4886557b 100644
--- a/src/views/dashboard/related/network-profiling/components/Tasks.vue
+++ b/src/views/dashboard/related/network-profiling/components/Tasks.vue
@@ -216,7 +216,7 @@ limitations under the License. -->
width: 330px;
height: calc(100% - 10px);
overflow: auto;
- border-right: 1px solid rgb(0 0 0 / 10%);
+ border-right: 1px solid var(--sw-trace-list-border);
}
.item span {
@@ -228,7 +228,7 @@ limitations under the License. -->
border-bottom: 1px solid rgb(0 0 0 / 7%);
&.selected {
- background-color: #ededed;
+ background-color: var(--sw-list-selected);
}
}
@@ -253,14 +253,14 @@ limitations under the License. -->
.profile-tr {
&:hover {
- background-color: rgb(0 0 0 / 4%);
+ background-color: var(--sw-list-hover);
}
}
.profile-t-tool {
padding: 10px 5px 10px 10px;
border-bottom: 1px solid rgb(0 0 0 / 7%);
- background: #f3f4f9;
+ background-color: var(--sw-table-header);
width: 100%;
}
diff --git a/src/views/dashboard/related/network-profiling/components/TimeLine.vue b/src/views/dashboard/related/network-profiling/components/TimeLine.vue
index e645439c..03d6f7f0 100644
--- a/src/views/dashboard/related/network-profiling/components/TimeLine.vue
+++ b/src/views/dashboard/related/network-profiling/components/TimeLine.vue
@@ -142,7 +142,7 @@ limitations under the License. -->
cursor: pointer;
transition: all 0.5ms linear;
border: 1px solid $disabled-color;
- color: #666;
+ color: var(--text-color-placeholder);
display: inline-block;
padding: 5px;
border-radius: 3px;
diff --git a/src/views/dashboard/related/profile/Header.vue b/src/views/dashboard/related/profile/Header.vue
index 1ea18eae..425b8cb7 100644
--- a/src/views/dashboard/related/profile/Header.vue
+++ b/src/views/dashboard/related/profile/Header.vue
@@ -119,7 +119,7 @@ limitations under the License. -->
.header {
padding: 10px;
font-size: $font-size-smaller;
- border-bottom: 1px solid #dcdfe6;
+ border-bottom: 1px solid $border-color;
}
.name {
diff --git a/src/views/dashboard/related/profile/components/SegmentList.vue b/src/views/dashboard/related/profile/components/SegmentList.vue
index 1addee6a..e0069ff1 100644
--- a/src/views/dashboard/related/profile/components/SegmentList.vue
+++ b/src/views/dashboard/related/profile/components/SegmentList.vue
@@ -58,6 +58,7 @@ limitations under the License. -->
const key = computed(
() =>
(profileStore.currentSegment &&
+ profileStore.currentSegment.spans &&
profileStore.currentSegment.spans.length &&
profileStore.currentSegment.spans[0].segmentId) ||
"",
@@ -82,7 +83,7 @@ limitations under the License. -->
.profile-t-wrapper {
overflow: auto;
flex-grow: 1;
- border-right: 1px solid rgb(0 0 0 / 10%);
+ border-right: 1px solid var(--sw-trace-list-border);
}
.profile-t-loading {
@@ -110,25 +111,25 @@ limitations under the License. -->
.profile-tr {
&:hover {
- background-color: rgb(0 0 0 / 4%);
+ background-color: var(--sw-list-hover);
}
}
.profile-td {
padding: 5px 10px;
- border-bottom: 1px solid rgb(0 0 0 / 7%);
+ border-bottom: 1px solid var(--sw-trace-list-border);
&.selected {
- background-color: #ededed;
+ background-color: var(--sw-list-selected);
}
}
.profile-t-tool {
padding: 5px 10px;
font-weight: bold;
- border-right: 1px solid rgb(0 0 0 / 7%);
- border-bottom: 1px solid rgb(0 0 0 / 7%);
- background: #f3f4f9;
+ border-right: 1px solid var(--sw-trace-list-border);
+ border-bottom: 1px solid var(--sw-trace-list-border);
+ background-color: var(--sw-table-header);
}
.log-item {
@@ -144,6 +145,6 @@ limitations under the License. -->
}
.profile-segment {
- border-top: 1px solid rgb(0 0 0 / 7%);
+ border-top: 1px solid var(--sw-trace-list-border);
}
</style>
diff --git a/src/views/dashboard/related/profile/components/Stack/Container.vue b/src/views/dashboard/related/profile/components/Stack/Container.vue
index e510eddd..6f6e77c0 100644
--- a/src/views/dashboard/related/profile/components/Stack/Container.vue
+++ b/src/views/dashboard/related/profile/components/Stack/Container.vue
@@ -107,7 +107,7 @@ limitations under the License. -->
user-select: none;
border-left: 0;
border-right: 0;
- border-bottom: 1px solid rgb(0 0 0 / 10%);
+ border-bottom: 1px solid var(--sw-trace-list-border);
}
.profile-header div {
@@ -115,7 +115,7 @@ limitations under the License. -->
padding: 0 4px;
border-right: 1px dotted silver;
line-height: 30px;
- background-color: #f3f4f9;
+ background-color: var(--sw-table-header);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
diff --git a/src/views/dashboard/related/profile/components/Stack/Item.vue b/src/views/dashboard/related/profile/components/Stack/Item.vue
index 26c08999..9341f4d5 100644
--- a/src/views/dashboard/related/profile/components/Stack/Item.vue
+++ b/src/views/dashboard/related/profile/components/Stack/Item.vue
@@ -14,7 +14,10 @@ See the License for the specific language governing permissions and
limitations under the License. -->
<template>
<div>
- <div :class="['profile-item', 'level' + data.parentId]" :style="{ color: data.topDur ? '#448dfe' : '#3d444f' }">
+ <div
+ :class="['profile-item', 'level' + data.parentId]"
+ :style="{ color: data.topDur ? '#448dfe' : appStore.theme === Themes.Dark ? '#fafbfc' : '#3d444f' }"
+ >
<div
:class="['thread', 'level' + data.parentId]"
:style="{
@@ -47,6 +50,8 @@ limitations under the License. -->
<script lang="ts">
import { ref, defineComponent, toRefs } from "vue";
import type { PropType } from "vue";
+ import { useAppStoreWithOut } from "@/store/modules/app";
+ import { Themes } from "@/constants/data";
const props = {
data: { type: Object as PropType<any>, default: () => ({}) },
@@ -56,24 +61,25 @@ limitations under the License. -->
name: "TableItem",
props,
setup(props) {
+ const appStore = useAppStoreWithOut();
const displayChildren = ref<boolean>(true);
function toggle() {
displayChildren.value = !displayChildren.value;
}
- return { toggle, displayChildren, ...toRefs(props) };
+ return { Themes, appStore, toggle, displayChildren, ...toRefs(props) };
},
});
</script>
<style lang="scss" scoped>
- @import "./profile.scss";
+ @import url("./profile.scss");
.profile-item.level0 {
- background: rgba(0, 0, 0, 0.04);
- color: #448dfe;
+ background-color: var(--sw-list-hover);
+ color: var(--el-color-primary);
&:hover {
- background: rgba(0, 0, 0, 0.04);
- color: #448dfe;
+ background-color: var(--sw-list-hover);
+ color: var(--el-color-primary);
}
&::before {
@@ -81,7 +87,7 @@ limitations under the License. -->
content: "";
width: 5px;
height: 100%;
- background: #448dfe;
+ background-color: var(--el-color-primary);
left: 0;
}
}
@@ -92,11 +98,11 @@ limitations under the License. -->
}
.profile-item.selected {
- background: rgba(0, 0, 0, 0.04);
+ background-color: var(--sw-list-selected);
}
.profile-item:not(.level0):hover {
- background: rgba(0, 0, 0, 0.04);
+ background-color: var(--sw-list-hover);
}
.profile-item > div {
@@ -123,7 +129,7 @@ limitations under the License. -->
width: 100%;
height: 6px;
border-radius: 3px;
- background: rgb(63, 177, 227);
+ background: var(--el-color-primary);
position: relative;
margin-top: 11px;
border: none;
@@ -131,7 +137,7 @@ limitations under the License. -->
.inner-progress_bar {
position: absolute;
- background: rgb(110, 64, 170);
+ background: rgb(110 64 170);
height: 4px;
border-radius: 2px;
left: 0;
diff --git a/src/views/dashboard/related/profile/components/TaskList.vue b/src/views/dashboard/related/profile/components/TaskList.vue
index 7ebe29b8..a95d04df 100644
--- a/src/views/dashboard/related/profile/components/TaskList.vue
+++ b/src/views/dashboard/related/profile/components/TaskList.vue
@@ -168,10 +168,10 @@ limitations under the License. -->
.profile-td {
padding: 5px 10px;
- border-bottom: 1px solid rgb(0 0 0 / 7%);
+ border-bottom: 1px solid var(--sw-trace-list-border);
&.selected {
- background-color: #ededed;
+ background-color: var(--sw-list-selected);
}
}
@@ -183,7 +183,7 @@ limitations under the License. -->
.profile-t-wrapper {
overflow: auto;
flex-grow: 1;
- border-right: 1px solid rgb(0 0 0 / 10%);
+ border-right: 1px solid var(--sw-trace-list-border);
}
.profile-t {
@@ -196,20 +196,20 @@ limitations under the License. -->
.profile-tr {
&:hover {
- background-color: rgb(0 0 0 / 4%);
+ background-color: var(--sw-list-hover);
}
}
.profile-segment {
- border-top: 1px solid rgb(0 0 0 / 7%);
+ border-top: 1px solid var(--sw-trace-list-border);
}
.profile-t-tool {
padding: 5px 10px;
font-weight: bold;
- border-right: 1px solid rgb(0 0 0 / 7%);
- border-bottom: 1px solid rgb(0 0 0 / 7%);
- background: #f3f4f9;
+ border-right: 1px solid var(--sw-trace-list-border);
+ border-bottom: 1px solid var(--sw-trace-list-border);
+ background-color: var(--sw-table-header);
}
.log-item {
diff --git a/src/views/dashboard/related/topology/components/Graph.vue b/src/views/dashboard/related/topology/components/Graph.vue
index 14df6465..3e732ba4 100644
--- a/src/views/dashboard/related/topology/components/Graph.vue
+++ b/src/views/dashboard/related/topology/components/Graph.vue
@@ -43,6 +43,7 @@ limitations under the License. -->
:href="!n.type || n.type === `N/A` ? icons.UNDEFINED : icons[n.type.toUpperCase().replace('-', '')]"
/>
<text
+ class="node-text"
:x="n.x - (Math.min(n.name.length, 20) * 6) / 2 + 6"
:y="n.y + n.height + 8"
style="pointer-events: none"
@@ -678,6 +679,12 @@ limitations under the License. -->
overflow: auto;
margin-top: 30px;
+ .node-text {
+ fill: var(--sw-topology-color);
+ font-size: 12px;
+ opacity: 0.9;
+ }
+
.svg-topology {
cursor: move;
background-color: $theme-background;
@@ -687,7 +694,7 @@ limitations under the License. -->
position: absolute;
top: 10px;
left: 25px;
- color: #666;
+ color: var(--sw-topology-color);
div {
margin-bottom: 8px;
@@ -716,31 +723,26 @@ limitations under the License. -->
padding: 0 15px;
border-radius: 3px;
color: $disabled-color;
- border: 1px solid #eee;
- background-color: $theme-background;
- box-shadow: #eee 1px 2px 10px;
+ border: 1px solid $border-color-primary;
+ background-color: var(--sw-topology-setting-bg);
+ box-shadow: var(--sw-topology-box-shadow);
transition: all 0.5ms linear;
-
- &.dark {
- background-color: #2b3037;
- }
}
.label {
- color: #666;
+ color: var(--sw-topology-color);
display: inline-block;
margin-right: 5px;
}
.operations-list {
position: absolute;
- color: #333;
+ color: $font-color;
cursor: pointer;
+ border: var(--sw-topology-border);
+ border-radius: 3px;
background-color: $theme-background;
- border-radius: 5px;
padding: 10px 0;
- border: 1px solid #999;
- box-shadow: #ddd 1px 2px 10px;
span {
display: block;
@@ -752,7 +754,7 @@ limitations under the License. -->
span:hover {
color: $active-color;
- background-color: #eee;
+ background-color: $popper-hover-bg-color;
}
}
@@ -765,7 +767,7 @@ limitations under the License. -->
.switch-icon {
cursor: pointer;
transition: all 0.5ms linear;
- background: rgb(0 0 0 / 30%);
+ background: var(--sw-topology-switch-icon);
color: $text-color;
display: inline-block;
padding: 2px 4px;
@@ -784,13 +786,6 @@ limitations under the License. -->
.topo-node {
cursor: pointer;
}
-
- .topo-text {
- font-family: Lato, "Source Han Sans CN", "Microsoft YaHei", sans-serif;
- fill: #ddd;
- font-size: 11px;
- opacity: 0.8;
- }
}
@keyframes topo-dash {
from {
@@ -810,7 +805,7 @@ limitations under the License. -->
position: absolute;
visibility: hidden;
padding: 5px;
- border: 1px solid #000;
+ border: var(--sw-topology-border);
border-radius: 3px;
background-color: $theme-background;
}
diff --git a/src/views/dashboard/related/topology/components/PodTopology.vue b/src/views/dashboard/related/topology/components/PodTopology.vue
index 8db56c0d..40812b14 100644
--- a/src/views/dashboard/related/topology/components/PodTopology.vue
+++ b/src/views/dashboard/related/topology/components/PodTopology.vue
@@ -281,16 +281,16 @@ limitations under the License. -->
right: 10px;
width: 400px;
height: 600px;
- border: 1px solid #eee;
- background-color: $theme-background;
+ border: 1px solid $border-color-primary;
overflow: auto;
padding: 10px 15px;
border-radius: 3px;
color: $disabled-color;
+ background-color: var(--sw-topology-setting-bg);
+ box-shadow: var(--sw-topology-box-shadow);
transition: all 0.5ms linear;
z-index: 99;
text-align: left;
- box-shadow: #eee 1px 2px 10px;
}
.tool {
@@ -307,7 +307,7 @@ limitations under the License. -->
text-align: center;
cursor: pointer;
transition: all 0.5ms linear;
- background: rgb(0 0 0 / 30%);
+ background: var(--sw-topology-switch-icon);
color: $text-color;
display: inline-block;
border-radius: 3px;
@@ -322,7 +322,7 @@ limitations under the License. -->
.operations-list {
position: absolute;
padding: 10px 0;
- color: #333;
+ color: $font-color;
cursor: pointer;
background-color: $theme-background;
border-radius: 3px;
@@ -338,7 +338,7 @@ limitations under the License. -->
span:hover {
color: $active-color;
- background-color: #eee;
+ background-color: $popper-hover-bg-color;
}
i {
diff --git a/src/views/dashboard/related/topology/components/Sankey.vue b/src/views/dashboard/related/topology/components/Sankey.vue
index 156b8302..f8fa2d44 100644
--- a/src/views/dashboard/related/topology/components/Sankey.vue
+++ b/src/views/dashboard/related/topology/components/Sankey.vue
@@ -24,6 +24,8 @@ limitations under the License. -->
import type { MetricConfigOpt } from "@/types/dashboard";
import { aggregation } from "@/hooks/useMetricsProcessor";
import { MetricModes } from "../../../data";
+ import { useAppStoreWithOut } from "@/store/modules/app";
+ import { Themes } from "@/constants/data";
/*global defineEmits, defineProps */
const props = defineProps({
@@ -33,6 +35,7 @@ limitations under the License. -->
},
});
const emit = defineEmits(["click"]);
+ const appStore = useAppStoreWithOut();
const topologyStore = useTopologyStore();
const option = computed(() => getOption());
@@ -52,7 +55,7 @@ limitations under the License. -->
data: topologyStore.nodes,
links: topologyStore.calls,
label: {
- color: "#666",
+ color: appStore.theme === Themes.Dark ? "#ccc" : "#666",
formatter: (param: any) => param.data.name,
},
color: ["#6be6c1", "#3fcfdc", "#626c91", "#3fbcde", "#a0a7e6", "#3fa9e1", "#96dee8", "#bf99f8"],
diff --git a/src/views/dashboard/related/topology/components/Settings.vue b/src/views/dashboard/related/topology/components/Settings.vue
index d2074f36..5fbea92b 100644
--- a/src/views/dashboard/related/topology/components/Settings.vue
+++ b/src/views/dashboard/related/topology/components/Settings.vue
@@ -640,14 +640,14 @@ limitations under the License. -->
}
.title {
- color: #666;
+ color: var(--sw-topology-color);
margin-bottom: 0;
}
.label {
font-size: $font-size-smaller;
margin-top: 10px;
- color: #666;
+ color: var(--sw-topology-color);
}
.legend-btn {
diff --git a/src/views/dashboard/related/topology/components/utils/layout.ts b/src/views/dashboard/related/topology/components/utils/layout.ts
index 27b8073d..52b35e5b 100644
--- a/src/views/dashboard/related/topology/components/utils/layout.ts
+++ b/src/views/dashboard/related/topology/components/utils/layout.ts
@@ -19,7 +19,6 @@ import type { Node, Call } from "@/types/topology";
export function layout(levels: Node[][], calls: Call[], radius: number) {
// precompute level depth
- console.log(levels);
levels.forEach((l: Node[], i: number) => l.forEach((n: any) => n && (n.level = i)));
const nodes: Node[] = levels.reduce((a, x) => a.concat(x), []);
diff --git a/src/views/dashboard/related/trace/Detail.vue b/src/views/dashboard/related/trace/Detail.vue
index d85b5b40..ec4bd9b8 100644
--- a/src/views/dashboard/related/trace/Detail.vue
+++ b/src/views/dashboard/related/trace/Detail.vue
@@ -173,13 +173,13 @@ limitations under the License. -->
.trace-detail-wrapper {
font-size: $font-size-smaller;
padding: 5px 10px;
- border-bottom: 1px solid #eee;
+ border-bottom: 1px solid $border-color-primary;
width: 100%;
height: 95px;
.grey {
- color: $text-color;
- background-color: #448dfe;
+ color: #fff;
+ background-color: $active-background;
}
.ghost {
diff --git a/src/views/dashboard/related/trace/Header.vue b/src/views/dashboard/related/trace/Header.vue
index a4a7cb24..f845ebbb 100644
--- a/src/views/dashboard/related/trace/Header.vue
+++ b/src/views/dashboard/related/trace/Header.vue
@@ -31,7 +31,7 @@ limitations under the License. -->
@change="changeLatency"
class="ml-10"
/>
- <el-popover trigger="hover" width="250" placement="bottom" effect="light">
+ <el-popover trigger="hover" width="250" placement="bottom">
<template #reference>
<div class="cp conditions-popup">
<Icon iconName="conditions" size="middle" />
@@ -52,7 +52,7 @@ limitations under the License. -->
</div>
</div>
</el-popover>
- <el-popover trigger="hover" width="250" placement="bottom" effect="light">
+ <el-popover trigger="hover" width="250" placement="bottom">
<template #reference>
<div class="cp metric-value">
<Icon iconName="info_outline" size="middle" />
diff --git a/src/views/dashboard/related/trace/Index.vue b/src/views/dashboard/related/trace/Index.vue
index 8f211f9b..e7f25de9 100644
--- a/src/views/dashboard/related/trace/Index.vue
+++ b/src/views/dashboard/related/trace/Index.vue
@@ -51,7 +51,7 @@ limitations under the License. -->
.header {
padding: 10px;
font-size: $font-size-smaller;
- border-bottom: 1px solid #dcdfe6;
+ border-bottom: 1px solid $border-color;
min-width: 1200px;
}
diff --git a/src/views/dashboard/related/trace/TraceList.vue b/src/views/dashboard/related/trace/TraceList.vue
index 9be3d2ac..2ec6016d 100644
--- a/src/views/dashboard/related/trace/TraceList.vue
+++ b/src/views/dashboard/related/trace/TraceList.vue
@@ -163,7 +163,7 @@ limitations under the License. -->
.trace-t-wrapper {
overflow: auto;
- border-right: 1px solid rgb(0 0 0 / 10%);
+ border-right: 1px solid var(--sw-trace-list-border);
}
.trace-t-loading {
@@ -191,21 +191,21 @@ limitations under the License. -->
.trace-tr {
&:hover {
- background-color: rgb(0 0 0 / 4%);
+ background-color: var(--sw-list-hover);
}
}
.trace-td {
padding: 5px;
- border-bottom: 1px solid rgb(0 0 0 / 7%);
+ border-bottom: 1px solid var(--sw-trace-list-border);
&.selected {
- background-color: #ededed;
+ background-color: var(--sw-list-selected);
}
}
.trace-success {
- border-left: 4px solid rgb(46 47 51 / 10%);
+ border-left: 4px solid var(--sw-trace-success);
}
.trace-warning {
diff --git a/src/views/dashboard/related/trace/components/D3Graph/Index.vue b/src/views/dashboard/related/trace/components/D3Graph/Index.vue
index 0f9e8f21..f848f8c2 100644
--- a/src/views/dashboard/related/trace/components/D3Graph/Index.vue
+++ b/src/views/dashboard/related/trace/components/D3Graph/Index.vue
@@ -28,6 +28,7 @@ limitations under the License. -->
import TreeGraph from "../../utils/d3-trace-tree";
import type { Span, Ref } from "@/types/trace";
import SpanDetail from "./SpanDetail.vue";
+ import { useAppStoreWithOut } from "@/store/modules/app";
/* global defineProps, Nullable, defineExpose,Recordable*/
const props = defineProps({
@@ -35,6 +36,7 @@ limitations under the License. -->
traceId: { type: String, default: "" },
type: { type: String, default: "List" },
});
+ const appStore = useAppStoreWithOut();
const loading = ref<boolean>(false);
const showDetail = ref<boolean>(false);
const fixSpansSize = ref<number>(0);
@@ -289,6 +291,17 @@ limitations under the License. -->
});
},
);
+ watch(
+ () => appStore.theme,
+ () => {
+ tree.value.init({ label: "TRACE_ROOT", children: segmentId.value }, props.data, fixSpansSize.value);
+ tree.value.draw(() => {
+ setTimeout(() => {
+ loading.value = false;
+ }, 200);
+ });
+ },
+ );
</script>
<style lang="scss" scoped>
.d3-graph {
@@ -301,12 +314,12 @@ limitations under the License. -->
}
.trace-node-container {
- fill: rgba(0, 0, 0, 0);
+ fill: rgb(0 0 0 / 0%);
stroke-width: 5px;
cursor: pointer;
&:hover {
- fill: rgba(0, 0, 0, 0.05);
+ fill: rgb(0 0 0 / 5%);
}
}
diff --git a/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue b/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue
index 7947464c..f4c27777 100644
--- a/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue
+++ b/src/views/dashboard/related/trace/components/D3Graph/SpanDetail.vue
@@ -142,6 +142,7 @@ limitations under the License. -->
/*global defineProps, Nullable, Recordable */
const props = defineProps({
currentSpan: { type: Object as PropType<Recordable>, default: () => ({}) },
+ traceId: { type: String, default: "" },
});
const { t } = useI18n();
const traceStore = useTraceStore();
@@ -167,7 +168,7 @@ limitations under the License. -->
const res = await traceStore.getSpanLogs({
condition: {
relatedTrace: {
- traceId: props.currentSpan.traceId,
+ traceId: props.currentSpan.traceId || props.traceId,
segmentId: props.currentSpan.segmentId,
spanId: props.currentSpan.spanId,
},
diff --git a/src/views/dashboard/related/trace/components/Table/Index.vue b/src/views/dashboard/related/trace/components/Table/Index.vue
index 9d16a758..0d210b1d 100644
--- a/src/views/dashboard/related/trace/components/Table/Index.vue
+++ b/src/views/dashboard/related/trace/components/Table/Index.vue
@@ -17,7 +17,13 @@ limitations under the License. -->
<div class="trace-t-loading" v-show="loading">
<Icon iconName="spinner" size="sm" />
</div>
- <TableContainer :tableData="tableData" type="table" :headerType="headerType" @select="handleSelectSpan">
+ <TableContainer
+ :tableData="tableData"
+ type="table"
+ :headerType="headerType"
+ :traceId="traceId"
+ @select="handleSelectSpan"
+ >
<div class="trace-tips" v-if="!tableData.length">{{ $t("noData") }}</div>
</TableContainer>
</div>
diff --git a/src/views/dashboard/related/trace/components/Table/TableContainer.vue b/src/views/dashboard/related/trace/components/Table/TableContainer.vue
index b396de92..125eee1f 100644
--- a/src/views/dashboard/related/trace/components/Table/TableContainer.vue
+++ b/src/views/dashboard/related/trace/components/Table/TableContainer.vue
@@ -41,6 +41,7 @@ limitations under the License. -->
</div>
<TableItem
:method="method"
+ :traceId="traceId"
v-for="(item, index) in tableData"
:data="item"
:key="'key' + index"
@@ -63,6 +64,7 @@ limitations under the License. -->
tableData: { type: Array as PropType<Recordable>, default: () => [] },
type: { type: String, default: "" },
headerType: { type: String, default: "" },
+ traceId: { type: String, default: "" },
});
const emits = defineEmits(["select"]);
const method = ref<number>(300);
@@ -165,12 +167,12 @@ limitations under the License. -->
user-select: none;
border-left: 0;
border-right: 0;
- border-bottom: 1px solid rgb(0 0 0 / 10%);
+ border-bottom: 1px solid var(--sw-trace-list-border);
}
.trace-header div {
display: inline-block;
- background-color: #f3f4f9;
+ background-color: var(--sw-table-header);
padding: 0 4px;
border: 1px solid transparent;
border-right: 1px dotted silver;
diff --git a/src/views/dashboard/related/trace/components/Table/TableItem.vue b/src/views/dashboard/related/trace/components/Table/TableItem.vue
index 0ce19ad1..52297534 100644
--- a/src/views/dashboard/related/trace/components/Table/TableItem.vue
+++ b/src/views/dashboard/related/trace/components/Table/TableItem.vue
@@ -137,17 +137,18 @@ limitations under the License. -->
/>
</div>
<el-dialog v-model="showDetail" :destroy-on-close="true" fullscreen @closed="showDetail = false">
- <SpanDetail :currentSpan="data" />
+ <SpanDetail :currentSpan="data" :traceId="traceId" />
</el-dialog>
</div>
</template>
<script lang="ts">
import { useI18n } from "vue-i18n";
- import { ref, computed, defineComponent } from "vue";
+ import { ref, computed, defineComponent, watch } from "vue";
import type { PropType } from "vue";
import SpanDetail from "../D3Graph/SpanDetail.vue";
import { dateFormat } from "@/utils/dateFormat";
import { useAppStoreWithOut } from "@/store/modules/app";
+ import { Themes } from "@/constants/data";
/*global Recordable*/
const props = {
@@ -155,6 +156,7 @@ limitations under the License. -->
method: { type: Number, default: 0 },
type: { type: String, default: "" },
headerType: { type: String, default: "" },
+ traceId: { type: String, traceId: "" },
};
export default defineComponent({
name: "TableItem",
@@ -201,12 +203,12 @@ limitations under the License. -->
}
const items: any = document.querySelectorAll(".trace-item");
for (const item of items) {
- item.style.background = "#fff";
+ item.style.background = appStore.theme === Themes.Dark ? "#212224" : "#fff";
}
- dom.style.background = "rgba(0, 0, 0, 0.1)";
+ dom.style.background = appStore.theme === Themes.Dark ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.1)";
const p: any = document.getElementsByClassName("profiled")[0];
if (p) {
- p.style.background = "#eee";
+ p.style.background = appStore.theme === Themes.Dark ? "#333" : "#eee";
}
}
function selectSpan(event: Recordable) {
@@ -232,6 +234,19 @@ limitations under the License. -->
showSelectSpan(dom);
showDetail.value = true;
}
+ watch(
+ () => appStore.theme,
+ () => {
+ const items: any = document.querySelectorAll(".trace-item");
+ for (const item of items) {
+ item.style.background = appStore.theme === Themes.Dark ? "#212224" : "#fff";
+ }
+ const p: any = document.getElementsByClassName("profiled")[0];
+ if (p) {
+ p.style.background = appStore.theme === Themes.Dark ? "#333" : "#eee";
+ }
+ },
+ );
return {
displayChildren,
outterPercent,
@@ -272,7 +287,8 @@ limitations under the License. -->
}
.profiled {
- background-color: #eee;
+ // background-color: #eee;
+ background-color: var(--sw-table-header);
position: relative;
}
@@ -285,10 +301,10 @@ limitations under the License. -->
padding: 10px;
border-radius: 5px;
border: 1px solid $disabled-color;
- background-color: #333;
+ background-color: $font-color;
color: $text-color;
text-align: center;
- box-shadow: #eee 1px 2px 10px;
+ box-shadow: var(--box-shadow-color) 0 2px 3px;
display: none;
}
@@ -297,8 +313,8 @@ limitations under the License. -->
position: absolute;
left: 250px;
top: 20px;
- border: 6px solid #333;
- border-color: transparent transparent #333;
+ border: 6px solid $font-color;
+ border-color: transparent transparent $font-color;
display: none;
}
@@ -320,11 +336,11 @@ limitations under the License. -->
}
.trace-item.selected {
- background: rgb(0 0 0 / 4%);
+ background-color: var(--sw-list-selected);
}
.trace-item:not(.level0):hover {
- background: rgb(0 0 0 / 4%);
+ background-color: var(--sw-list-hover);
}
.trace-item > div {
diff --git a/src/views/dashboard/related/trace/utils/d3-trace-list.ts b/src/views/dashboard/related/trace/utils/d3-trace-list.ts
index 3b06104d..3d738832 100644
--- a/src/views/dashboard/related/trace/utils/d3-trace-list.ts
+++ b/src/views/dashboard/related/trace/utils/d3-trace-list.ts
@@ -20,6 +20,8 @@ import d3tip from "d3-tip";
import type { Trace } from "@/types/trace";
import dayjs from "dayjs";
import icons from "@/assets/img/icons";
+import { useAppStoreWithOut } from "@/store/modules/app";
+import { Themes } from "@/constants/data";
export default class ListGraph {
private barHeight = 48;
@@ -127,6 +129,7 @@ export default class ListGraph {
}
update(source: Recordable, callback: Function) {
const t = this;
+ const appStore = useAppStoreWithOut();
const nodes = this.root.descendants();
let index = -1;
this.root.eachBefore((n: Recordable) => {
@@ -166,7 +169,7 @@ export default class ListGraph {
.attr("width", 16)
.attr("height", 16)
.attr("x", 6)
- .attr("y", -10)
+ .attr("y", -8)
.attr("xlink:href", (d: any) =>
d.data.type === "Entry" ? icons.ENTRY : d.data.type === "Exit" ? icons.EXIT : "",
)
@@ -186,7 +189,7 @@ export default class ListGraph {
.attr("width", 16)
.attr("height", 16)
.attr("x", 6)
- .attr("y", -10)
+ .attr("y", -8)
.attr("xlink:href", (d: any) => {
const key = (d.data.refs || []).findIndex((d: { type: string }) => d.type === "CROSS_THREAD");
return key > -1 ? icons.STREAM : "";
@@ -214,14 +217,14 @@ export default class ListGraph {
.append("text")
.attr("x", 13)
.attr("y", 5)
- .attr("fill", "#E54C17")
+ .attr("fill", appStore.theme === Themes.Dark ? "#666" : "#E54C17")
.html((d: Recordable) => (d.data.isError ? "◉" : ""));
nodeEnter
.append("text")
.attr("class", "node-text")
.attr("x", 35)
.attr("y", -6)
- .attr("fill", "#333")
+ .attr("fill", appStore.theme === Themes.Dark ? "#eee" : "#333")
.html((d: Recordable) => {
if (d.data.label === "TRACE_ROOT") {
return "";
@@ -242,7 +245,7 @@ export default class ListGraph {
})
.attr("cy", -5)
.attr("fill", "none")
- .attr("stroke", "#e66")
+ .attr("stroke", appStore.theme === Themes.Dark ? "#666" : "#e66")
.style("opacity", (d: Recordable) => {
const events = d.data.attachedEvents;
if (events && events.length) {
@@ -255,7 +258,7 @@ export default class ListGraph {
.append("text")
.attr("x", 267)
.attr("y", -1)
- .attr("fill", "#e66")
+ .attr("fill", appStore.theme === Themes.Dark ? "#666" : "#e66")
.style("font-size", "10px")
.text((d: Recordable) => {
const events = d.data.attachedEvents;
@@ -270,7 +273,7 @@ export default class ListGraph {
.attr("class", "node-text")
.attr("x", 35)
.attr("y", 12)
- .attr("fill", "#ccc")
+ .attr("fill", appStore.theme === Themes.Dark ? "#777" : "#ccc")
.style("font-size", "11px")
.text(
(d: Recordable) =>
@@ -305,11 +308,15 @@ export default class ListGraph {
.style("opacity", 1);
nodeEnter
.append("circle")
- .attr("r", 3)
+ .attr("r", appStore.theme === Themes.Dark ? 4 : 3)
.style("cursor", "pointer")
- .attr("stroke-width", 2.5)
+ .attr("stroke-width", appStore.theme === Themes.Dark ? 3 : 2.5)
.attr("fill", (d: Recordable) =>
- d._children ? `${this.sequentialScale(this.list.indexOf(d.data.serviceCode))}` : "rbga(0,0,0,0)",
+ d._children
+ ? `${this.sequentialScale(this.list.indexOf(d.data.serviceCode))}`
+ : appStore.theme === Themes.Dark
+ ? "#eee"
+ : "rbga(0,0,0,0)",
)
.style("stroke", (d: Recordable) =>
d.data.label === "TRACE_ROOT" ? "" : `${this.sequentialScale(this.list.indexOf(d.data.serviceCode))}`,
@@ -320,7 +327,7 @@ export default class ListGraph {
node
.transition()
.duration(400)
- .attr("transform", (d: Recordable) => `translate(${d.y + 5},${d.x})`)
+ .attr("transform", (d: Recordable) => `translate(${d.y + 3},${d.x})`)
.style("opacity", 1)
.select("circle")
.attr("fill", (d: Recordable) =>
@@ -343,8 +350,8 @@ export default class ListGraph {
.enter()
.insert("path", "g")
.attr("class", "trace-link")
- .attr("fill", "rgba(0,0,0,0)")
- .attr("stroke", "rgba(0, 0, 0, 0.1)")
+ .attr("fill", appStore.theme === Themes.Dark ? "rgba(244,244,244,0)" : "rgba(0,0,0,0)")
+ .attr("stroke", appStore.theme === Themes.Dark ? "rgba(244,244,244,0.4)" : "rgba(0, 0, 0, 0.1)")
.attr("stroke-width", 2)
.attr("transform", `translate(5, 0)`)
.attr("d", () => {
diff --git a/src/views/dashboard/related/trace/utils/d3-trace-tree.ts b/src/views/dashboard/related/trace/utils/d3-trace-tree.ts
index 4f5563f3..e7001ac2 100644
--- a/src/views/dashboard/related/trace/utils/d3-trace-tree.ts
+++ b/src/views/dashboard/related/trace/utils/d3-trace-tree.ts
@@ -18,6 +18,8 @@
import * as d3 from "d3";
import d3tip from "d3-tip";
import type { Trace, Span } from "@/types/trace";
+import { useAppStoreWithOut } from "@/store/modules/app";
+import { Themes } from "@/constants/data";
export default class TraceMap {
private i = 0;
@@ -132,6 +134,7 @@ export default class TraceMap {
this.update(this.root);
}
update(source: Recordable) {
+ const appStore = useAppStoreWithOut();
const that: any = this;
const treeData = this.treemap(this.root);
const nodes = treeData.descendants(),
@@ -237,7 +240,9 @@ export default class TraceMap {
? (d.data.isError ? "◉ " : "") + d.data.label.slice(0, 10) + "..."
: (d.data.isError ? "◉ " : "") + d.data.label,
)
- .style("fill", (d: Recordable) => (!d.data.isError ? "#3d444f" : "#E54C17"));
+ .style("fill", (d: Recordable) =>
+ !d.data.isError ? (appStore.theme === Themes.Dark ? "#eee" : "#3d444f") : "#E54C17",
+ );
nodeEnter
.append("text")
.attr("class", "node-text")
@@ -245,7 +250,7 @@ export default class TraceMap {
return d.children || d._children ? -45 : 15;
})
.attr("dy", "1em")
- .attr("fill", "#bbb")
+ .attr("fill", appStore.theme === Themes.Dark ? "#888" : "#bbb")
.attr("text-anchor", function (d: Recordable) {
return d.children || d._children ? "end" : "start";
})
@@ -330,7 +335,7 @@ export default class TraceMap {
const o = { x: source.x0, y: source.y0 };
return diagonal(o, o);
})
- .attr("stroke", "rgba(0, 0, 0, 0.1)")
+ .attr("stroke", appStore.theme === Themes.Dark ? "rgba(255, 255, 255, 0.4)" : "rgba(0, 0, 0, 0.1)")
.style("stroke-width", 1.5)
.style("fill", "none");
diff --git a/vite.config.ts b/vite.config.ts
index d27a6462..1eab0484 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -64,7 +64,7 @@ export default ({ mode }: ConfigEnv): UserConfig => {
preprocessorOptions: {
//define global scss variable
scss: {
- additionalData: `@use "@/styles/light.scss" as *;`,
+ additionalData: `@use "@/styles/theme.scss" as *;`,
},
},
},