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/26 12:02:47 UTC
(skywalking-booster-ui) branch main updated: fix: change colors to match dark theme for Network Profiling (#346)
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 a18ac337 fix: change colors to match dark theme for Network Profiling (#346)
a18ac337 is described below
commit a18ac3372eae4796a85661573b454e41a20729a6
Author: Fine0830 <fa...@gmail.com>
AuthorDate: Sun Nov 26 20:02:41 2023 +0800
fix: change colors to match dark theme for Network Profiling (#346)
---
src/assets/icons/add_fill.svg | 2 +-
src/views/dashboard/controls/Tab.vue | 6 ++----
.../related/continuous-profiling/components/PolicyList.vue | 1 +
.../related/network-profiling/components/ProcessTopology.vue | 10 ++++++++--
.../related/network-profiling/components/Settings.vue | 2 +-
.../dashboard/related/network-profiling/components/Tasks.vue | 7 ++++++-
6 files changed, 19 insertions(+), 9 deletions(-)
diff --git a/src/assets/icons/add_fill.svg b/src/assets/icons/add_fill.svg
index 5285acaa..55b2f214 100644
--- a/src/assets/icons/add_fill.svg
+++ b/src/assets/icons/add_fill.svg
@@ -12,4 +12,4 @@ 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. -->
-<svg t="1655799536378" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9286" width="48" height="48"><path d="M563.2 614.4v51.2c0 30.72-20.48 51.2-51.2 51.2s-51.2-20.48-51.2-51.2v-51.2H409.6c-30.72 0-51.2-20.48-51.2-51.2s20.48-51.2 51.2-51.2h51.2V460.8c0-30.72 20.48-51.2 51.2-51.2s51.2 20.48 51.2 51.2v51.2h51.2c30.72 0 51.2 20.48 51.2 51.2s-20.48 51.2-51.2 51.2h-51.2z m51.2-563.2c158.72 15.36 281.6 143.36 281.6 307.2v512c0 56.32-46.08 102.4-102. [...]
\ No newline at end of file
+<svg t="1655799536378" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9286" width="48" height="48"><path d="M563.2 614.4v51.2c0 30.72-20.48 51.2-51.2 51.2s-51.2-20.48-51.2-51.2v-51.2H409.6c-30.72 0-51.2-20.48-51.2-51.2s20.48-51.2 51.2-51.2h51.2V460.8c0-30.72 20.48-51.2 51.2-51.2s51.2 20.48 51.2 51.2v51.2h51.2c30.72 0 51.2 20.48 51.2 51.2s-20.48 51.2-51.2 51.2h-51.2z m51.2-563.2c158.72 15.36 281.6 143.36 281.6 307.2v512c0 56.32-46.08 102.4-102. [...]
\ No newline at end of file
diff --git a/src/views/dashboard/controls/Tab.vue b/src/views/dashboard/controls/Tab.vue
index 55df3fe0..18977897 100644
--- a/src/views/dashboard/controls/Tab.vue
+++ b/src/views/dashboard/controls/Tab.vue
@@ -282,7 +282,7 @@ limitations under the License. -->
<style lang="scss" scoped>
.tabs {
height: 40px;
- color: $disabled-color;
+ color: var(--sw-icon-btn-color);
width: 100%;
overflow-x: auto;
white-space: nowrap;
@@ -311,8 +311,6 @@ limitations under the License. -->
}
.tab-icons {
- color: $font-color;
-
i {
margin-right: 3px;
}
@@ -371,7 +369,7 @@ limitations under the License. -->
}
.tab-icon {
- color: #666;
+ color: var(--sw-icon-btn-color);
}
.vue-grid-item.active {
diff --git a/src/views/dashboard/related/continuous-profiling/components/PolicyList.vue b/src/views/dashboard/related/continuous-profiling/components/PolicyList.vue
index 428fbd1e..40c9ed58 100644
--- a/src/views/dashboard/related/continuous-profiling/components/PolicyList.vue
+++ b/src/views/dashboard/related/continuous-profiling/components/PolicyList.vue
@@ -198,6 +198,7 @@ limitations under the License. -->
.new-task {
float: right;
+ color: $font-color;
}
.reload {
diff --git a/src/views/dashboard/related/network-profiling/components/ProcessTopology.vue b/src/views/dashboard/related/network-profiling/components/ProcessTopology.vue
index dea866d6..a1417a43 100644
--- a/src/views/dashboard/related/network-profiling/components/ProcessTopology.vue
+++ b/src/views/dashboard/related/network-profiling/components/ProcessTopology.vue
@@ -18,7 +18,7 @@ limitations under the License. -->
<g class="svg-graph" :transform="`translate(${diff[0]}, ${diff[1]})`">
<g class="hex-polygon">
<path :d="getHexPolygonVertices()" stroke="#D5DDF6" stroke-width="2" fill="none" />
- <text :x="0" :y="radius - 15" fill="#000" text-anchor="middle">
+ <text :x="0" :y="radius - 15" :fill="appStore.theme === Themes.Dark ? '#eee' : '#000'" text-anchor="middle">
{{ selectorStore.currentPod && selectorStore.currentPod.label }}
</text>
</g>
@@ -40,7 +40,12 @@ limitations under the License. -->
:x="(node.x || 0) - 15"
:y="(node.y || 0) - 15"
/>
- <text :x="node.x" :y="(node.y || 0) + 28" fill="#000" text-anchor="middle">
+ <text
+ :x="node.x"
+ :y="(node.y || 0) + 28"
+ :fill="appStore.theme === Themes.Dark ? '#eee' : '#000'"
+ text-anchor="middle"
+ >
{{ node.name.length > 10 ? `${node.name.substring(0, 10)}...` : node.name }}
</text>
</g>
@@ -122,6 +127,7 @@ limitations under the License. -->
import TimeLine from "./TimeLine.vue";
import { useAppStoreWithOut } from "@/store/modules/app";
import icons from "@/assets/img/icons";
+ import { Themes } from "@/constants/data";
/*global Nullable, defineProps */
const props = defineProps({
diff --git a/src/views/dashboard/related/network-profiling/components/Settings.vue b/src/views/dashboard/related/network-profiling/components/Settings.vue
index a16a3f81..680ea733 100644
--- a/src/views/dashboard/related/network-profiling/components/Settings.vue
+++ b/src/views/dashboard/related/network-profiling/components/Settings.vue
@@ -15,7 +15,7 @@ limitations under the License. -->
<template>
<div class="label">{{ t("linkDashboard") }}</div>
<Selector
- :value="dashboardStore.selectedGrid.linkDashboard || ''"
+ :value="(dashboardStore.selectedGrid && dashboardStore.selectedGrid.linkDashboard) || ''"
:options="linkDashboards"
size="small"
placeholder="Please input a dashboard name for calls"
diff --git a/src/views/dashboard/related/network-profiling/components/Tasks.vue b/src/views/dashboard/related/network-profiling/components/Tasks.vue
index 4886557b..7cc63ea5 100644
--- a/src/views/dashboard/related/network-profiling/components/Tasks.vue
+++ b/src/views/dashboard/related/network-profiling/components/Tasks.vue
@@ -18,7 +18,11 @@ limitations under the License. -->
<div class="profile-t-tool">
<span>{{ t("taskList") }}</span>
<span class="new-task cp" @click="createTask">
- <Icon :style="{ color: inProcess ? '#ccc' : '#000' }" iconName="library_add" size="middle" />
+ <Icon
+ :style="{ color: inProcess ? '#ccc' : appStore.theme === Themes.Dark ? '#fff' : '#000' }"
+ iconName="library_add"
+ size="middle"
+ />
</span>
</div>
<div class="profile-t-wrapper">
@@ -78,6 +82,7 @@ limitations under the License. -->
import { useAppStoreWithOut } from "@/store/modules/app";
import NewTask from "./NewTask.vue";
import { EBPFProfilingTriggerType } from "@/store/data";
+ import { Themes } from "@/constants/data";
/*global Nullable */
const { t } = useI18n();