feat: add the layers filed and associate layers dashboards for the service topology nodes (#370)

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

@@ -124,11 +124,17 @@ limitations under the License. -->
         left: operationsPos.x + 5 + 'px',
       }"
     >
-      <span v-for="(item, index) of items" :key="index" @click="item.func(item.dashboard)">
+      <span v-for="(item, index) of items" :key="index" @click="item.func(item)">
         {{ item.title }}
       </span>
     </div>
-    <el-dialog v-model="hierarchyRelated" :destroy-on-close="true" @closed="hierarchyRelated = false" width="640px">
+    <el-dialog
+      v-model="hierarchyRelated"
+      :title="getHierarchyTitle()"
+      :destroy-on-close="true"
+      @closed="hierarchyRelated = false"
+      width="640px"
+    >
       <div class="hierarchy-related">
         <hierarchy-map :config="config" />
       </div>
@@ -160,6 +166,7 @@ limitations under the License. -->
   import { layout, computeLevels, changeNode } from "../components/utils/layout";
   import zoom from "@/views/dashboard/related/components/utils/zoom";
   import { useQueryTopologyExpressionsProcessor } from "@/hooks/useExpressionsProcessor";
+  import { ConfigFieldTypes } from "@/views/dashboard/data";
   /*global Nullable, defineProps */
   const props = defineProps({
     config: {
@@ -268,6 +275,20 @@ limitations under the License. -->
     currentNode.value = null;
   }
 
+  function getHierarchyTitle() {
+    if (!currentNode.value) {
+      return;
+    }
+    if (currentNode.value.layers.includes(dashboardStore.layerId)) {
+      return `${dashboardStore.layerId} --> ${currentNode.value.name}`;
+    }
+    const layer = currentNode.value.layers.filter((d: string) => d !== dashboardStore.layerId);
+    if (layer.length) {
+      return `${layer[0]} --> ${currentNode.value.name}`;
+    }
+    return "";
+  }
+
   async function initLegendMetrics() {
     if (!topologyStore.nodes.length) {
       return;
@@ -410,19 +431,15 @@ limitations under the License. -->
     topologyStore.setLink(null);
     operationsPos.x = event.offsetX;
     operationsPos.y = event.offsetY;
-    if (d.layer === String(dashboardStore.layerId)) {
+    if (d.layers.includes(dashboardStore.layerId)) {
       setNodeTools(settings.value.nodeDashboard);
       return;
     }
-    items.value = [
-      { id: "hierarchyServices", title: "Hierarchy Services", func: handleHierarchyRelatedServices },
-      { id: "inspect", title: "Inspect", func: handleInspect },
-      { id: "alerting", title: "Alerting", func: handleGoAlerting },
-    ];
+    initNodeMenus();
   }
   function handleLinkClick(event: MouseEvent, d: Call) {
     event.stopPropagation();
-    if (d.sourceObj.layer !== dashboardStore.layerId || d.targetObj.layer !== dashboardStore.layerId) {
+    if (!d.sourceObj.layers.includes(dashboardStore.layerId) || !d.targetObj.layers.includes(dashboardStore.layerId)) {
       return;
     }
     topologyStore.setNode(null);
@@ -462,25 +479,34 @@ limitations under the License. -->
     topologyStore.setNode(null);
     topologyStore.setLink(null);
   }
-  function handleGoEndpoint(name: string) {
+  function handleGoEndpoint(params: { dashboard: string }) {
+    if (!params.dashboard) {
+      return;
+    }
     const origin = dashboardStore.entity;
-    const path = `/dashboard/${dashboardStore.layerId}/${EntityType[2].value}/${topologyStore.node.id}/${name}`;
+    const path = `/dashboard/${dashboardStore.layerId}/${EntityType[2].value}/${topologyStore.node.id}/${params.dashboard}`;
     const routeUrl = router.resolve({ path });
 
     window.open(routeUrl.href, "_blank");
     dashboardStore.setEntity(origin);
   }
-  function handleGoInstance(name: string) {
+  function handleGoInstance(params: { dashboard: string }) {
+    if (!params.dashboard) {
+      return;
+    }
     const origin = dashboardStore.entity;
-    const path = `/dashboard/${dashboardStore.layerId}/${EntityType[3].value}/${topologyStore.node.id}/${name}`;
+    const path = `/dashboard/${dashboardStore.layerId}/${EntityType[3].value}/${topologyStore.node.id}/${params.dashboard}`;
     const routeUrl = router.resolve({ path });
 
     window.open(routeUrl.href, "_blank");
     dashboardStore.setEntity(origin);
   }
-  function handleGoDashboard(name: string) {
+  function handleGoDashboard(params: { dashboard: string }) {
+    if (!params.dashboard) {
+      return;
+    }
     const origin = dashboardStore.entity;
-    const path = `/dashboard/${dashboardStore.layerId}/${EntityType[0].value}/${topologyStore.node.id}/${name}`;
+    const path = `/dashboard/${dashboardStore.layerId}/${EntityType[0].value}/${topologyStore.node.id}/${params.dashboard}`;
     const routeUrl = router.resolve({ path });
 
     window.open(routeUrl.href, "_blank");
@@ -492,6 +518,28 @@ limitations under the License. -->
 
     window.open(routeUrl.href, "_blank");
   }
+  function handleGoLayerDashboard(param: { id: string }) {
+    if (!(param.id && currentNode.value)) {
+      return;
+    }
+    const origin = dashboardStore.entity;
+    const { dashboard } = getDashboard(
+      {
+        layer: param.id,
+        entity: EntityType[0].value,
+      },
+      ConfigFieldTypes.ISDEFAULT,
+    );
+    if (!dashboard) {
+      return ElMessage.info("No Dashboard");
+    }
+
+    const path = `/dashboard/${param.id}/${EntityType[0].value}/${currentNode.value.id}/${dashboard.name}`;
+    const routeUrl = router.resolve({ path });
+
+    window.open(routeUrl.href, "_blank");
+    dashboardStore.setEntity(origin);
+  }
   async function backToTopology() {
     loading.value = true;
     await freshNodes();
@@ -520,12 +568,26 @@ limitations under the License. -->
     settings.value = config;
     setNodeTools(config.nodeDashboard);
   }
-  function setNodeTools(nodeDashboard: any) {
+  function initNodeMenus() {
     items.value = [
       { id: "hierarchyServices", title: "Hierarchy Services", func: handleHierarchyRelatedServices },
       { id: "inspect", title: "Inspect", func: handleInspect },
       { id: "alerting", title: "Alerting", func: handleGoAlerting },
     ];
+    if (!currentNode.value) {
+      return;
+    }
+    const diffLayers = currentNode.value.layers.filter((l: string) => l !== dashboardStore.layerId);
+    for (const l of diffLayers) {
+      items.value.push({
+        id: l,
+        title: `${l} Dashboard`,
+        func: handleGoLayerDashboard,
+      });
+    }
+  }
+  function setNodeTools(nodeDashboard: any) {
+    initNodeMenus();
     if (!(nodeDashboard && nodeDashboard.length)) {
       return;
     }