feat: set conditions for different layers node

src/components/Selector.vue

@@ -43,7 +43,6 @@ interface Option {
 }
 
 /*global  defineProps, defineEmits*/
-
 const emit = defineEmits(["change"]);
 const props = defineProps({
   options: {
@@ -54,7 +53,7 @@ const props = defineProps({
     type: [Array, String] as PropType<string[] | string>,
     default: () => [],
   },
-  size: { type: [], default: "default" },
+  size: { type: null, default: "default" },
   placeholder: { type: String, default: "Select a option" },
   borderRadius: { type: Number, default: 3 },
   multiple: { type: Boolean, default: false },

src/store/modules/topology.ts

@@ -56,8 +56,25 @@ export const topologyStore = defineStore({
       this.call = link;
     },
     setTopology(data: { nodes: Node[]; calls: Call[] }) {
-      this.nodes = data.nodes;
-      this.calls = data.calls;
+      this.nodes = data.nodes.map((n: Node) => {
+        const service =
+          useSelectorStore().services.filter(
+            (d: Service) => d.id === n.id
+          )[0] || {};
+        n.layer = service.layers ? service.layers[0] : null;
+        return n;
+      });
+      this.calls = data.calls.map((c: Call) => {
+        for (const s of useSelectorStore().services) {
+          if (c.source.id === s.id) {
+            c.source.layer = s.layers[0];
+          }
+          if (c.target.id === s.id) {
+            c.target.layer = s.layers[0];
+          }
+        }
+        return c;
+      });
     },
     setNodeMetrics(m: { id: string; value: unknown }[]) {
       this.nodeMetrics = m;

src/types/topology.d.ts

@@ -15,31 +15,17 @@
  * limitations under the License.
  */
 export interface Call {
-  avgResponseTime: number;
-  cpm: number;
-  isAlert: boolean;
   source: string | any;
   target: string | any;
   id: string;
   detectPoints: string[];
   type?: string;
-  sourceObj?: any;
-  isGroupActive?: boolean;
-  latency?: number;
+  layer?: string;
 }
 export interface Node {
-  apdex: number;
-  avgResponseTime: number;
-  cpm: number;
   id: string;
-  isAlarm: boolean;
   name: string;
-  numOfServer: number;
-  numOfServerAlarm: number;
-  numOfServiceAlarm: number;
-  sla: number;
   type: string;
   isReal: boolean;
-  isGroupActive?: boolean;
-  latency?: number;
+  layer?: string;
 }

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

@@ -36,7 +36,7 @@ limitations under the License. -->
     </div>
     <div
       class="operations-list"
-      v-if="topologyStore.node && topologyStore.node.isReal"
+      v-if="topologyStore.node"
       :style="{
         top: operationsPos.y + 'px',
         left: operationsPos.x + 'px',
@@ -182,8 +182,22 @@ function handleNodeClick(d: Node & { x: number; y: number }) {
   topologyStore.setLink(null);
   operationsPos.x = d.x;
   operationsPos.y = d.y + 30;
+  console.log(d.layer === String(dashboardStore.layerId));
+  if (d.layer === String(dashboardStore.layerId)) {
+    return;
+  }
+  items.value = [
+    { id: "inspect", title: "Inspect", func: handleInspect },
+    { id: "alarm", title: "Alarm", func: handleGoAlarm },
+  ];
 }
 function handleLinkClick(event: any, d: Call) {
+  if (
+    d.source.layer !== dashboardStore.layerId ||
+    d.target.layer !== dashboardStore.layerId
+  ) {
+    return;
+  }
   event.stopPropagation();
   topologyStore.setNode(null);
   topologyStore.setLink(d);
@@ -305,13 +319,14 @@ function update() {
 }
 async function handleInspect() {
   svg.value.selectAll(".topo-svg-graph").remove();
-  const resp = await topologyStore.getServiceTopology(topologyStore.node.id);
+  const id = topologyStore.node.id;
+  topologyStore.setNode(null);
+  topologyStore.setLink(null);
+  const resp = await topologyStore.getServiceTopology(id);
 
   if (resp.errors) {
     ElMessage.error(resp.errors);
   }
-  topologyStore.setNode(null);
-  topologyStore.setLink(null);
   await init();
   update();
 }
@@ -410,12 +425,6 @@ function updateSettings(config: any) {
 onBeforeUnmount(() => {
   window.removeEventListener("resize", resize);
 });
-// watch(
-//   () => [topologyStore.nodes, topologyStore.calls],
-//   () => {
-//     update();
-//   }
-// );
 </script>
 <style lang="scss">
 .micro-topo-chart {