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 01194b0 fix: set config to control depth selector (#16)
01194b0 is described below
commit 01194b0325bee689f348a118ef539adcb8fb8595
Author: Fine0830 <[email protected]>
AuthorDate: Mon Feb 21 13:16:34 2022 +0800
fix: set config to control depth selector (#16)
---
src/locales/lang/en.ts | 1 +
src/locales/lang/zh.ts | 1 +
src/store/modules/dashboard.ts | 1 +
src/store/modules/topology.ts | 5 -----
src/types/dashboard.ts | 1 +
.../configuration/graph-styles/TopologyItem.vue | 14 ++++++++++----
.../dashboard/related/topology/components/Graph.vue | 20 +++++++++++---------
.../related/topology/components/PodTopology.vue | 9 +++++++--
8 files changed, 32 insertions(+), 20 deletions(-)
diff --git a/src/locales/lang/en.ts b/src/locales/lang/en.ts
index 12267cc..92dd775 100644
--- a/src/locales/lang/en.ts
+++ b/src/locales/lang/en.ts
@@ -239,6 +239,7 @@ const msg = {
defaultOrder: "Default Order",
chartType: "Chart Type",
currentDepth: "Current Depth",
+ showDepth: "Show Depth Selector",
defaultDepth: "Default Depth",
traceTagsTip: `Only tags defined in the core/default/searchableTracesTags
are searchable.
Check more details on the Configuration Vocabulary page`,
diff --git a/src/locales/lang/zh.ts b/src/locales/lang/zh.ts
index 752649b..19fd397 100644
--- a/src/locales/lang/zh.ts
+++ b/src/locales/lang/zh.ts
@@ -89,6 +89,7 @@ const msg = {
backgroundColors: "背景颜色",
fontColors: "字体颜色",
iconTheme: "图标主题",
+ showDepth: "展示深度选择器",
hourTip: "选择小时",
minuteTip: "选择分钟",
secondTip: "选择秒数",
diff --git a/src/store/modules/dashboard.ts b/src/store/modules/dashboard.ts
index d19ee34..178e504 100644
--- a/src/store/modules/dashboard.ts
+++ b/src/store/modules/dashboard.ts
@@ -92,6 +92,7 @@ export const dashboardStore = defineStore({
iconTheme: true,
content: "Topology",
fontSize: 18,
+ showDepth: true,
};
}
this.layout = this.layout.map((d: LayoutConfig) => {
diff --git a/src/store/modules/topology.ts b/src/store/modules/topology.ts
index d517cd5..9de0316 100644
--- a/src/store/modules/topology.ts
+++ b/src/store/modules/topology.ts
@@ -35,7 +35,6 @@ interface TopologyState {
nodeMetrics: MetricVal;
linkServerMetrics: MetricVal;
linkClientMetrics: MetricVal;
- defaultDepth: string;
}
export const topologyStore = defineStore({
@@ -48,7 +47,6 @@ export const topologyStore = defineStore({
nodeMetrics: {},
linkServerMetrics: {},
linkClientMetrics: {},
- defaultDepth: "2",
}),
actions: {
setNode(node: Node) {
@@ -114,9 +112,6 @@ export const topologyStore = defineStore({
setLinkClientMetrics(m: { id: string; value: unknown }[]) {
this.linkClientMetrics = m;
},
- setDefaultDepth(val: number) {
- this.defaultDepth = val;
- },
async getDepthServiceTopology(serviceIds: string[], depth: number) {
const res = await this.getServicesTopology(serviceIds);
if (depth > 1) {
diff --git a/src/types/dashboard.ts b/src/types/dashboard.ts
index 5a2d022..b8c0544 100644
--- a/src/types/dashboard.ts
+++ b/src/types/dashboard.ts
@@ -120,4 +120,5 @@ export interface TopologyConfig {
content?: string;
fontSize?: number;
depth?: string;
+ showDepth?: boolean;
}
diff --git a/src/views/dashboard/configuration/graph-styles/TopologyItem.vue
b/src/views/dashboard/configuration/graph-styles/TopologyItem.vue
index 2563ecc..52f73ea 100644
--- a/src/views/dashboard/configuration/graph-styles/TopologyItem.vue
+++ b/src/views/dashboard/configuration/graph-styles/TopologyItem.vue
@@ -67,6 +67,15 @@ limitations under the License. -->
/>
</div>
<div class="item">
+ <span class="label">{{ t("showDepth") }}</span>
+ <el-switch
+ v-model="showDepth"
+ active-text="Yes"
+ inactive-text="No"
+ @change="changeConfig({ showDepth })"
+ />
+ </div>
+ <div class="item" v-show="showDepth">
<span class="label">{{ t("defaultDepth") }}</span>
<Selector
class="input"
@@ -83,11 +92,9 @@ import { ref } from "vue";
import { useDashboardStore } from "@/store/modules/dashboard";
import { DepthList } from "../../data";
import { Option } from "@/types/app";
-import { useTopologyStore } from "@/store/modules/topology";
const { t } = useI18n();
const dashboardStore = useDashboardStore();
-const topologyStore = useTopologyStore();
const { selectedGrid } = dashboardStore;
const iconTheme = ref(selectedGrid.graph.iconTheme || true);
const backgroundColor = ref(selectedGrid.graph.backgroundColor || "green");
@@ -95,6 +102,7 @@ const fontColor = ref(selectedGrid.graph.fontColor ||
"white");
const content = ref<string>(selectedGrid.graph.content);
const fontSize = ref<number>(selectedGrid.graph.fontSize);
const depth = ref<string>(selectedGrid.graph.depth || "2");
+const showDepth = ref<boolean>(selectedGrid.graph.showDepth);
const colors = [
{
label: "Green",
@@ -107,7 +115,6 @@ const colors = [
{ label: "Black", value: "black" },
{ label: "Orange", value: "orange" },
];
-topologyStore.setDefaultDepth(depth.value);
function changeConfig(param: { [key: string]: unknown }) {
const { selectedGrid } = dashboardStore;
const graph = {
@@ -118,7 +125,6 @@ function changeConfig(param: { [key: string]: unknown }) {
}
function changeDepth(opt: Option[]) {
const val = opt[0].value;
- topologyStore.setDefaultDepth(val);
changeConfig({ depth: val });
}
</script>
diff --git a/src/views/dashboard/related/topology/components/Graph.vue
b/src/views/dashboard/related/topology/components/Graph.vue
index 22c42a5..d62607d 100644
--- a/src/views/dashboard/related/topology/components/Graph.vue
+++ b/src/views/dashboard/related/topology/components/Graph.vue
@@ -23,14 +23,16 @@ limitations under the License. -->
<Settings @update="updateSettings" @updateNodes="freshNodes" />
</div>
<div class="tool">
- <span class="label">{{ t("currentDepth") }}</span>
- <Selector
- class="inputs"
- :value="depth"
- :options="DepthList"
- placeholder="Select a option"
- @change="changeDepth"
- />
+ <span v-show="dashboardStore.selectedGrid.showDepth">
+ <span class="label">{{ t("currentDepth") }}</span>
+ <Selector
+ class="inputs"
+ :value="depth"
+ :options="DepthList"
+ placeholder="Select a option"
+ @change="changeDepth"
+ />
+ </span>
<span class="switch-icon ml-5" title="Settings" @click="setConfig">
<Icon size="middle" iconName="settings" />
</span>
@@ -108,7 +110,7 @@ const items = ref<
{ id: "inspect", title: "Inspect", func: handleInspect },
{ id: "alarm", title: "Alarm", func: handleGoAlarm },
]);
-const depth = ref<string>(topologyStore.defaultDepth);
+const depth = ref<string>(dashboardStore.selectedGrid.depth || "2");
onMounted(async () => {
loading.value = true;
diff --git a/src/views/dashboard/related/topology/components/PodTopology.vue
b/src/views/dashboard/related/topology/components/PodTopology.vue
index 6607316..9ca7e14 100644
--- a/src/views/dashboard/related/topology/components/PodTopology.vue
+++ b/src/views/dashboard/related/topology/components/PodTopology.vue
@@ -14,7 +14,12 @@ See the License for the specific language governing
permissions and
limitations under the License. -->
<template>
<div class="tool">
- <span v-show="dashboardStore.entity === EntityType[2].value">
+ <span
+ v-show="
+ dashboardStore.entity === EntityType[2].value &&
+ dashboardStore.selectedGrid.showDepth
+ "
+ >
<span class="label">{{ t("currentDepth") }}</span>
<Selector
class="inputs"
@@ -89,7 +94,7 @@ const width = ref<number>(document.body.clientWidth - 40);
const showSettings = ref<boolean>(false);
const settings = ref<any>({});
const operationsPos = reactive<{ x: number; y: number }>({ x: NaN, y: NaN });
-const depth = ref<string>(topologyStore.defaultDepth);
+const depth = ref<string>(dashboardStore.selectedGrid.depth || "3");
const items = [
{ id: "inspect", title: "Inspect", func: inspect },
{ id: "dashboard", title: "View Dashboard", func: goDashboard },
