github/skywalking-booster-ui
3
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-10-14 11:21:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: implement the Dark Theme (#334)

Browse Source
This commit is contained in:
Fine0830
2023-11-14 20:37:15 +08:00
committed by GitHub
parent 780104c5d2
commit 832dc1676b
81 changed files with 638 additions and 351 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/App.vue
View File

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

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

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 269 B

After

Width:  |  Height:  |  Size: 259 B

6
src/components/SelectSingle.vue
View File

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

5
src/constants/data.ts
View File

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

7
src/hooks/useEcharts.ts
View File

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

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

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

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

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

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

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

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

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

25
src/styles/light.scss
View File

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

25
src/styles/reset.scss
View File

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

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

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

2
src/views/Marketplace.vue
View File

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

4
src/views/Settings.vue
View File

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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