From 24cca12430d623a09f77c4d63843118975f50c14 Mon Sep 17 00:00:00 2001
From: Fine <fanxue0830@gmail.com>
Date: Wed, 10 Jan 2024 11:37:03 +0800
Subject: [PATCH] feat: update layer

---
 .../topology/config/HierarchySettings.vue     | 30 +++++++++++--------
 .../related/topology/service/HierarchyMap.vue | 15 +++-------
 2 files changed, 22 insertions(+), 23 deletions(-)

diff --git a/src/views/dashboard/related/topology/config/HierarchySettings.vue b/src/views/dashboard/related/topology/config/HierarchySettings.vue
index 9f82ac6f..4e4a8382 100644
--- a/src/views/dashboard/related/topology/config/HierarchySettings.vue
+++ b/src/views/dashboard/related/topology/config/HierarchySettings.vue
@@ -42,33 +42,29 @@ limitations under the License. -->
   </div>
 </template>
 <script lang="ts" setup>
-  import { computed, ref } from "vue";
+  import { onMounted, ref } from "vue";
   import { useI18n } from "vue-i18n";
+  import { ElMessage } from "element-plus";
   import type { HierarchyServicesConfig } from "@/types/dashboard";
   import type { Node } from "@/types/topology";
   import type { Option } from "@/types/app";
   import { useDashboardStore } from "@/store/modules/dashboard";
   import { useTopologyStore } from "@/store/modules/topology";
+  import { useSelectorStore } from "@/store/modules/selectors";
   import Metrics from "./Metrics.vue";
 
   const emits = defineEmits(["update"]);
   const { t } = useI18n();
   const dashboardStore = useDashboardStore();
   const topologyStore = useTopologyStore();
+  const selectorStore = useSelectorStore();
   const { hierarchyServicesConfig } = dashboardStore.selectedGrid;
-  const layers = computed<Option[]>(() => {
-    const map = new Map();
-    const arr = topologyStore.nodes.reduce((prev: Option[], next: Node) => {
-      if (next.layer && !map.get(next.layer)) {
-        map.set(next.layer, true);
-        prev.push({ value: next.layer, label: next.layer });
-      }
-      return prev;
-    }, []);
-    return arr;
-  });
+  const layers = ref<Option[]>([]);
   const currentConfig = ref<HierarchyServicesConfig>(hierarchyServicesConfig(0) || {});
 
+  onMounted(() => {
+    setLayers();
+  });
   function changeLayer(opt: Option[]) {
     const { hierarchyServicesConfig } = dashboardStore.selectedGrid;
     const layer = opt[0].value;
@@ -98,6 +94,16 @@ limitations under the License. -->
     dashboardStore.setConfigs(param);
     emits("update", param);
   }
+
+  async function setLayers() {
+    const resp = await selectorStore.fetchLayers();
+    if (resp.errors) {
+      ElMessage.error(resp.errors);
+    }
+    layers.value = resp.data.layers.map((d: string) => {
+      return { label: d, value: d };
+    });
+  }
 </script>
 <style lang="scss" scoped>
   .title {
diff --git a/src/views/dashboard/related/topology/service/HierarchyMap.vue b/src/views/dashboard/related/topology/service/HierarchyMap.vue
index de657676..8e6e1e8a 100644
--- a/src/views/dashboard/related/topology/service/HierarchyMap.vue
+++ b/src/views/dashboard/related/topology/service/HierarchyMap.vue
@@ -176,8 +176,8 @@ limitations under the License. -->
   }
   async function freshNodes() {
     topologyStore.setHierarchyServiceNode(null);
-    const resp = await getTopology();
-    // const resp = await topologyStore.getHierarchyServiceTopology();
+    // const resp = await getTopology();
+    const resp = await topologyStore.getHierarchyServiceTopology();
     loading.value = false;
 
     if (resp && resp.errors) {
@@ -198,9 +198,9 @@ limitations under the License. -->
   }
 
   function draw() {
-    const levels = computeLevels(topologyStore.calls, topologyStore.nodes, []);
+    const levels = computeLevels(topologyStore.hierarchyServiceCalls, topologyStore.hierarchyServiceNodes, []);
 
-    topologyLayout.value = layout(levels, topologyStore.calls, radius);
+    topologyLayout.value = layout(levels, topologyStore.hierarchyServiceCalls, radius);
     graphWidth.value = topologyLayout.value.layout.width;
     const drag: any = d3.drag().on("drag", (d: { x: number; y: number }) => {
       topologyLayout.value.calls = changeNode(d, currentNode.value, topologyLayout.value, radius);
@@ -219,13 +219,6 @@ limitations under the License. -->
     currentNode.value = null;
   }
 
-  async function getTopology() {
-    const ids = selectorStore.services.map((d: Service) => d.id);
-    const serviceIds = dashboardStore.entity === EntityType[0].value ? [selectorStore.currentService.id] : ids;
-    const resp = await topologyStore.getDepthServiceTopology(serviceIds, 2);
-    return resp;
-  }
-
   function showConfig() {
     showSetting.value = !showSetting.value;
   }