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

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>
-      <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;

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