feat: set default depth

src/locales/lang/en.ts

@@ -239,6 +239,7 @@ const msg = {
   defaultOrder: "Default Order",
   chartType: "Chart Type",
   currentDepth: "Current Depth",
+  defaultDepth: "Default Depth",
   traceTagsTip: `Only tags defined in the core/default/searchableTracesTags are searchable.
   Check more details on the Configuration Vocabulary page`,
   tagsLink: "Configuration Vocabulary page",

src/locales/lang/zh.ts

@@ -240,6 +240,7 @@ const msg = {
   defaultOrder: "默认顺序",
   chartType: "图表类型",
   currentDepth: "当前深度",
+  defaultDepth: "默认深度",
   traceTagsTip:
     "只有core/default/searchableTracesTags中定义的标记才可搜索。查看配置词汇表页面上的更多详细信息。",
   tagsLink: "配置词汇页",

src/store/data.ts

@@ -105,25 +105,6 @@ export const ConfigData3: any = [
   {
     x: 0,
     y: 0,
-    w: 4,
-    h: 6,
-    i: "1",
-    type: "Topology",
-    widget: {
-      title: "Topology",
-      tips: "Topology",
-    },
-    graph: {
-      fontColor: "white",
-      backgroundColor: "green",
-      iconTheme: true,
-      content: "Topology",
-      fontSize: 18,
-    },
-  },
-  {
-    x: 4,
-    y: 0,
     w: 8,
     h: 12,
     i: "0",

src/store/modules/topology.ts

@@ -35,6 +35,7 @@ interface TopologyState {
   nodeMetrics: MetricVal;
   linkServerMetrics: MetricVal;
   linkClientMetrics: MetricVal;
+  defaultDepth: string;
 }
 
 export const topologyStore = defineStore({
@@ -47,6 +48,7 @@ export const topologyStore = defineStore({
     nodeMetrics: {},
     linkServerMetrics: {},
     linkClientMetrics: {},
+    defaultDepth: "2",
   }),
   actions: {
     setNode(node: Node) {
@@ -112,6 +114,9 @@ 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

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

src/views/dashboard/configuration/graph-styles/TopologyItem.vue

@@ -66,20 +66,34 @@ limitations under the License. -->
       @change="changeConfig({ content })"
     />
   </div>
+  <div class="item">
+    <span class="label">{{ t("defaultDepth") }}</span>
+    <Selector
+      class="inputs"
+      :value="depth"
+      :options="DepthList"
+      @change="changeDepth($event)"
+    />
+  </div>
 </template>
 <script lang="ts" setup>
 import { useI18n } from "vue-i18n";
 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");
 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);
 const colors = [
   {
     label: "Green",
@@ -92,7 +106,7 @@ 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 = {
@@ -101,6 +115,11 @@ function changeConfig(param: { [key: string]: unknown }) {
   };
   dashboardStore.selectWidget({ ...selectedGrid, graph });
 }
+function changeDepth(opt: Option[]) {
+  const val = opt[0].value;
+  topologyStore.setDefaultDepth(val);
+  changeConfig({ depth: val });
+}
 </script>
 <style lang="scss" scoped>
 .slider {

src/views/dashboard/related/topology/components/Graph.vue

@@ -108,7 +108,7 @@ const items = ref<
   { id: "inspect", title: "Inspect", func: handleInspect },
   { id: "alarm", title: "Alarm", func: handleGoAlarm },
 ]);
-const depth = ref<string>("2");
+const depth = ref<string>(topologyStore.defaultDepth);
 
 onMounted(async () => {
   loading.value = true;
@@ -468,7 +468,7 @@ onBeforeUnmount(() => {
     position: absolute;
     top: 70px;
     right: 0;
-    width: 380px;
+    width: 400px;
     height: 700px;
     background-color: #2b3037;
     overflow: auto;

src/views/dashboard/related/topology/components/PodTopology.vue

@@ -209,7 +209,7 @@ function handleClick(event: any) {
   position: absolute;
   top: 40px;
   right: 0;
-  width: 380px;
+  width: 400px;
   height: 700px;
   background-color: #2b3037;
   overflow: auto;

src/views/dashboard/related/topology/components/Settings.vue

@@ -369,7 +369,7 @@ function addMetric() {
 
 .inputs {
   margin-top: 8px;
-  width: 350px;
+  width: 370px;
 }
 
 .item {
@@ -397,6 +397,6 @@ function addMetric() {
 }
 
 .delete {
-  margin: 0 1px;
+  margin: 0 3px;
 }
 </style>