feat: add node expressions

src/views/dashboard/related/topology/config/HierarchySettings.vue

@@ -49,6 +49,7 @@ limitations under the License. -->
   import type { Option } from "@/types/app";
   import { useDashboardStore } from "@/store/modules/dashboard";
   import { useTopologyStore } from "@/store/modules/topology";
+  import Metrics from "./Metrics.vue";
 
   const emits = defineEmits(["update"]);
   const { t } = useI18n();
@@ -77,12 +78,21 @@ limitations under the License. -->
 
   function changeNodeExpressions(param: string[]) {
     currentConfig.value.nodeExpressions = param;
+    updateSettings();
   }
 
   function updateSettings() {
+    const { hierarchyServicesConfig } = dashboardStore.selectedGrid;
+    const index = hierarchyServicesConfig.findIndex(
+      (d: HierarchyServicesConfig) => d.layer === currentConfig.value.layer,
+    );
+    if (index < 0) {
+      return;
+    }
+    hierarchyServicesConfig[index] = currentConfig.value;
     const param = {
       ...dashboardStore.selectedGrid,
-      hierarchyServicesConfig: currentConfig.value,
+      hierarchyServicesConfig,
     };
     dashboardStore.selectWidget(param);
     dashboardStore.setConfigs(param);

src/views/dashboard/related/topology/service/HierarchyMap.vue

@@ -96,7 +96,7 @@ limitations under the License. -->
       </span>
     </div>
     <div class="setting" v-if="showSetting && dashboardStore.editMode">
-      <hierarchy-settings />
+      <hierarchy-settings @update="updateSettings" />
     </div>
   </div>
 </template>
@@ -128,7 +128,7 @@ limitations under the License. -->
   const props = defineProps({
     config: {
       type: Object as PropType<any>,
-      default: () => ({ graph: {} }),
+      default: () => ({}),
     },
   });
   const { t } = useI18n();
@@ -143,7 +143,6 @@ limitations under the License. -->
   const graph = ref<Nullable<any>>(null);
   const settings = ref<any>(props.config);
   const showSetting = ref<boolean>(false);
-  const graphConfig = computed(() => props.config.graph || {});
   const topologyLayout = ref<any>({});
   const popover = ref<Nullable<any>>(null);
   const graphWidth = ref<number>(100);
@@ -188,11 +187,16 @@ limitations under the License. -->
   }
 
   async function update() {
+    topologyStore.queryHierarchyNodeExpressions(settings.value.hierarchyServicesConfig || []);
     // await initLegendMetrics();
     draw();
     popover.value = d3.select("#popover");
   }
 
+  function updateSettings(config: any) {
+    settings.value = config;
+  }
+
   function draw() {
     const levels = computeLevels(topologyStore.calls, topologyStore.nodes, []);
 

src/views/dashboard/related/topology/service/utils/layout.ts

@@ -191,22 +191,17 @@ export function computeLevels(calls: Call[], nodeList: Node[], levels: any[]) {
   }
   return levels;
 }
-export function changeNode(
-  d: { x: number; y: number },
-  currentNode: Nullable<Node>,
-  topologyLayout: any,
-  radius: number,
-) {
+export function changeNode(d: { x: number; y: number }, currentNode: Nullable<Node>, layout: any, radius: number) {
   if (!currentNode) {
     return;
   }
-  for (const node of topologyLayout.nodes) {
+  for (const node of layout.nodes) {
     if (node.id === currentNode.id) {
       node.x = d.x;
       node.y = d.y;
     }
   }
-  for (const call of topologyLayout.calls) {
+  for (const call of layout.calls) {
     if (call.sourceObj.id === currentNode.id) {
       call.sourceObj.x = d.x;
       call.sourceObj.y = d.y;
@@ -230,5 +225,5 @@ export function changeNode(
       call.targetY = pos[1].y;
     }
   }
-  return computeCallPos(topologyLayout.value.calls, radius);
+  return computeCallPos(layout.calls, radius);
 }