fix: set config to control depth selector (#16)

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`,

src/locales/lang/zh.ts

@@ -89,6 +89,7 @@ const msg = {
   backgroundColors: "背景颜色",
   fontColors: "字体颜色",
   iconTheme: "图标主题",
+  showDepth: "展示深度选择器",
   hourTip: "选择小时",
   minuteTip: "选择分钟",
   secondTip: "选择秒数",

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) => {

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) {

src/types/dashboard.ts

@@ -120,4 +120,5 @@ export interface TopologyConfig {
   content?: string;
   fontSize?: number;
   depth?: string;
+  showDepth?: boolean;
 }

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>

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>
+      <span v-show="dashboardStore.selectedGrid.showDepth">
-      <Selector
+        <span class="label">{{ t("currentDepth") }}</span>
-        class="inputs"
+        <Selector
-        :value="depth"
+          class="inputs"
-        :options="DepthList"
+          :value="depth"
-        placeholder="Select a option"
+          :options="DepthList"
-        @change="changeDepth"
+          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;

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 },