From 230c5f6c485e8700681223ac44140209eb066bf1 Mon Sep 17 00:00:00 2001
From: fairy <zhaozhenfang@kylinos.cn>
Date: Tue, 5 Nov 2024 17:13:22 +0800
Subject: [PATCH] add menu button to host on topo

---
 web/src/components/PGTopo.vue | 246 +++++++++++++++++++---------------
 web/src/stores/topo.ts        |   3 +
 web/src/utils/socket.ts       | 164 +++++++++++++++++++++++
 3 files changed, 303 insertions(+), 110 deletions(-)
 create mode 100644 web/src/utils/socket.ts

diff --git a/web/src/components/PGTopo.vue b/web/src/components/PGTopo.vue
index 3dd55a9..0331e1d 100644
--- a/web/src/components/PGTopo.vue
+++ b/web/src/components/PGTopo.vue
@@ -1,45 +1,47 @@
 <template>
   <div id="topo-container" class="container">
     <div class="topo_legend">
-      <p><img width="20" src="../assets/icon/server_blue.png" alt=""><span>主机</span></p>
-      <p><img width="20" src="../assets/icon/process.png" alt=""><span>进程</span></p>
-      <p><img width="20" src="../assets/icon/net.png" alt=""><span>网络</span></p>
-      <p><img width="20" src="../assets/icon/resource.png" alt=""><span>资源</span></p>
+      <p>
+        <img width="20" src="../assets/icon/server_blue.png" alt="" /><span>主机</span>
+      </p>
+      <p><img width="20" src="../assets/icon/process.png" alt="" /><span>进程</span></p>
+      <p><img width="20" src="../assets/icon/net.png" alt="" /><span>网络</span></p>
+      <p><img width="20" src="../assets/icon/resource.png" alt="" /><span>资源</span></p>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import G6, { Graph } from '@antv/g6';
-import type { ICombo, INode } from '@antv/g6';
+import G6, { Graph } from "@antv/g6";
+import type { ICombo, INode } from "@antv/g6";
 import { ref, reactive, onMounted, watch, nextTick } from "vue";
 import server_logo from "@/assets/icon/server_blue.png";
 import process_logo from "@/assets/icon/process.png";
 import net_logo from "@/assets/icon/net.png";
 import resource_logo from "@/assets/icon/resource.png";
-import { useTopoStore } from '@/stores/topo';
-import { colorSets, graphInitOptions, graphTreeInitOptions } from './PGOptions';
+import { useTopoStore } from "@/stores/topo";
+import { colorSets, graphInitOptions, graphTreeInitOptions } from "./PGOptions";
 
-const emit = defineEmits(['clickTopoCanvas'])
+const emit = defineEmits(["clickTopoCanvas"]);
 
 const props = defineProps({
   graph_mode: {
     type: String,
-    default: 'default',
-    require: true
+    default: "default",
+    require: true,
   },
   time_interval: {
     type: String,
-    default: '关闭',
-    require: true
-  }
-})
+    default: "关闭",
+    require: true,
+  },
+});
 
 let topo_container: HTMLElement;
 
 let graph: Graph;
 let topo_data = reactive<any>({});
-let topo_type = ref('comb');
+let topo_type = ref("comb");
 
 let combo_positions: Map<string, number[]>;
 let combo_color: Map<string, string[]>;
@@ -55,11 +57,13 @@ onMounted(() => {
   topo_container = document.getElementById("topo-container")!;
   topoW.value = topo_container.clientWidth;
   topoH.value = topo_container.clientHeight;
-  document.getElementById('topo-container')!.addEventListener('click', function (_event: any) {
-    // 点击画布时，关闭日志弹窗和tab页面 
-    emit('clickTopoCanvas', _event)
-  });
-})
+  document
+    .getElementById("topo-container")!
+    .addEventListener("click", function (_event: any) {
+      // 点击画布时，关闭日志弹窗和tab页面
+      emit("clickTopoCanvas", _event);
+    });
+});
 
 const updateTopoData = (topoData: any) => {
   topo_data = topoData;
@@ -70,14 +74,13 @@ const updateTopoData = (topoData: any) => {
       cursor: "all-scroll",
     };
     item.labelCfg = {
-      position: 'middle',
+      position: "middle",
       // offset: 2,
       autoRotate: true,
       style: {
         fontSize: 12,
         opacity: 0.5,
       },
-
     };
     switch (item.Type) {
       case "belong":
@@ -97,7 +100,7 @@ const updateTopoData = (topoData: any) => {
         item.label = item.Type;
         break;
     }
-  })
+  });
 
   topo_data.nodes.forEach((item: any) => {
     item.nodeStrength = -30;
@@ -109,7 +112,7 @@ const updateTopoData = (topoData: any) => {
         item.nodeStrength = -200;
         item.label = item.id.split("_._").pop();
         item.style = {
-          cursor: "all-scroll"
+          cursor: "all-scroll",
         };
         break;
       case "process":
@@ -117,8 +120,8 @@ const updateTopoData = (topoData: any) => {
         item.type = "image";
         item.label = item.name + ":" + item.metrics.Pid;
         item.style = {
-          stroke: '#7262FD',
-          cursor: "all-scroll"
+          stroke: "#7262FD",
+          cursor: "all-scroll",
         };
         item.labelCfg = {
           position: "right",
@@ -130,8 +133,8 @@ const updateTopoData = (topoData: any) => {
         item.type = "image";
         item.label = item.name;
         item.style = {
-          stroke: '#F6BD16',
-          cursor: "all-scroll"
+          stroke: "#F6BD16",
+          cursor: "all-scroll",
         };
         break;
       default:
@@ -140,8 +143,8 @@ const updateTopoData = (topoData: any) => {
         item.type = "image";
         item.label = item.name;
         item.style = {
-          stroke: '#78D3F8',
-          cursor: "all-scroll"
+          stroke: "#78D3F8",
+          cursor: "all-scroll",
         };
         item.labelCfg = {
           position: "left",
@@ -149,7 +152,7 @@ const updateTopoData = (topoData: any) => {
         };
         break;
     }
-  })
+  });
 
   // 初始化combo收缩/展开状态 combo_collapse_status
   if (!combo_collapse_status) {
@@ -162,7 +165,10 @@ const updateTopoData = (topoData: any) => {
   if (!combo_color || combo_color.size < topo_data.combos.length) {
     combo_color = new Map<string, string[]>();
     topo_data.combos.forEach((combo: any, i: number) => {
-      combo_color.set(combo.id, [colorSets[i].mainStroke as string, colorSets[i].mainFill as string]);
+      combo_color.set(combo.id, [
+        colorSets[i].mainStroke as string,
+        colorSets[i].mainFill as string,
+      ]);
     });
   }
 
@@ -172,50 +178,55 @@ const updateTopoData = (topoData: any) => {
       combo.style = {
         stroke: colors[0],
         fill: colors[1],
-        opacity: 0.8
+        opacity: 0.8,
       };
     }
     combo.collapsed = true; // 图固定关键参数，原因未知
-  })
-}
+  });
+};
 
 // 定义节点右键菜单
 const menu = new G6.Menu({
   offsetX: 6,
   offsetY: 10,
-  itemTypes: ['node'],
+  itemTypes: ["node"],
   shouldBegin(_e: any) {
-    if (_e.item._cfg.model.Type === 'host') {
-      return false;
-    }
+    // if (_e.item._cfg.model.Type === 'host') {
+    //   return false;
+    // }
     return true;
   },
   getContent(_e) {
-    const outDiv = document.createElement('div');
-    outDiv.style.width = '80px';
+    const outDiv = document.createElement("div");
+    outDiv.style.width = "80px";
     outDiv.innerHTML = `
     <span style="font-size:14px; cursor:pointer;">
       查看日志
     </span>
-    `
+    `;
     return outDiv;
   },
   // _target：界面元素，item：节点内容
   handleMenuClick(_target, item: any) {
     if (item._cfg) {
-      let host_name = '' as any; let process_name = '' as any;
+      let host_name = "" as any;
+      let process_name = "" as any;
+      let target_ip = "" as any;
       let node_type = item._cfg.model.Type;
-      if (node_type === 'process') {
+      if (node_type === "process") {
         process_name = item._cfg.model.name;
         let nodeNeighbors = graph.getNeighbors(item._cfg.id!) as any;
         host_name = nodeNeighbors[0]._cfg.model.metrics.Hostname;
-      } else if (node_type === 'host') {
+        target_ip = nodeNeighbors[0]._cfg.model.metrics.label;
+      } else if (node_type === "host") {
         process_name = host_name = item._cfg.model!.name;
+        target_ip = item._cfg.model!.label;
       }
 
       useTopoStore().node_click_info.node_id = item._cfg.id!;
       useTopoStore().node_click_info.host_name = host_name;
       useTopoStore().node_click_info.process_name = process_name;
+      useTopoStore().node_click_info.target_ip = target_ip;
     }
   },
 });
@@ -229,9 +240,9 @@ function initGraph(data: any) {
     container: "topo-container",
     width: topoW.value,
     height: topoH.value,
-  }
+  };
 
-  if (topo_type.value === 'comb') {
+  if (topo_type.value === "comb") {
     graph = new G6.Graph({
       ...graphBox,
       ...graphInitOptions,
@@ -246,7 +257,7 @@ function initGraph(data: any) {
       return {
         label: node.node.Type + ":" + node.node.name,
         labelCfg: {
-          position: node.children && node.children.length > 0 ? 'left' : 'right',
+          position: node.children && node.children.length > 0 ? "left" : "right",
           offset: 5,
         },
       };
@@ -254,34 +265,33 @@ function initGraph(data: any) {
   }
 
   // 节点点击事件
-  graph.on('node:click', (e) => {
+  graph.on("node:click", (e) => {
     graph.getNodes().forEach((node) => {
       graph.clearItemStates(node);
     });
     const nodeItem = e.item;
     if (nodeItem) {
-      graph.setItemState(nodeItem, 'click', true);
+      graph.setItemState(nodeItem, "click", true);
       // 抽屉组件展示的节点数据
       let selected_node = nodeItem._cfg;
-      if (selected_node && topo_type.value === 'comb') {
+      if (selected_node && topo_type.value === "comb") {
         useTopoStore().nodeData = selected_node.model;
       } else if (selected_node && selected_node.model) {
         useTopoStore().nodeData = selected_node.model.node;
       }
     }
-
   });
 
   // 边点击事件
-  graph.on('edge:click', (e: any) => {
+  graph.on("edge:click", (e: any) => {
     graph.getEdges().forEach((edge) => {
       graph.clearItemStates(edge);
     });
     const edgeItem = e.item;
-    graph.setItemState(edgeItem, 'click', true);
+    graph.setItemState(edgeItem, "click", true);
     // 抽屉组件展示的边数据
     let selected_edge = e.item._cfg;
-    if (topo_type.value === 'comb') {
+    if (topo_type.value === "comb") {
       useTopoStore().edgeData = selected_edge.model;
     } else {
       useTopoStore().edgeData = selected_edge.model.edge;
@@ -297,40 +307,51 @@ function initGraph(data: any) {
   //   graph.setItemState(e.item, 'active', false);
   // });
 
-  graph.on('node:dragstart', (e) => {
+  graph.on("node:dragstart", (e) => {
     refreshDragedNodePosition(e);
   });
 
-  graph.on('node:dragend', (e) => {
-    node_position_process.set(e.item?.getModel().id as string, [e.item?.getModel().x as number, e.item?.getModel().y as number])
-    if (e.item?.getModel().id === '3df830f0-cc71-48b4-8693-cd36098cc6d1_process_147139') {
-      console.log("node drag end: ", node_position_process.get(e.item?.getModel().id as string));
+  graph.on("node:dragend", (e) => {
+    node_position_process.set(e.item?.getModel().id as string, [
+      e.item?.getModel().x as number,
+      e.item?.getModel().y as number,
+    ]);
+    if (e.item?.getModel().id === "3df830f0-cc71-48b4-8693-cd36098cc6d1_process_147139") {
+      console.log(
+        "node drag end: ",
+        node_position_process.get(e.item?.getModel().id as string)
+      );
     }
   });
 
-  graph.on('combo:dragend', (e) => {
-    combo_positions.set(e.item?.getModel().id as string, [e.item?.getModel().x as number, e.item?.getModel().y as number]);
+  graph.on("combo:dragend", (e) => {
+    combo_positions.set(e.item?.getModel().id as string, [
+      e.item?.getModel().x as number,
+      e.item?.getModel().y as number,
+    ]);
   });
 
   // 保存combo collapse expand状态
-  graph.on('combo:dblclick', (e) => {
-    combo_collapse_status.set(e.item?.getID() as string, e.item?.getModel().collapsed as boolean);
+  graph.on("combo:dblclick", (e) => {
+    combo_collapse_status.set(
+      e.item?.getID() as string,
+      e.item?.getModel().collapsed as boolean
+    );
   });
 
   // 解决拖动产生残影问题
-  graph.get('canvas').set('localRefresh', false);
+  graph.get("canvas").set("localRefresh", false);
 
-  graph.on('wheelzoom', (_e) => {
+  graph.on("wheelzoom", (_e) => {
     zoom_before = graph.getZoom();
   });
 
   // 渲染前的操作
-  graph.on('beforelayout', () => {
-
+  graph.on("beforelayout", () => {
     // 重置combo坐标
     if (combo_positions) {
       graph.getCombos().forEach((combo: ICombo, _i: any) => {
-        const position = combo_positions.get(combo.getModel().id as string)
+        const position = combo_positions.get(combo.getModel().id as string);
         if (position) {
           combo.updatePosition({ x: position[0], y: position[1] });
         }
@@ -343,8 +364,8 @@ function initGraph(data: any) {
     if (node_position_process) {
       graph.getNodes().forEach((node: any, _i: number) => {
         const process_position = node_position_process.get(node.id);
-        if (node.getModel().Type === 'process' && process_position) {
-          node.updatePosition({ x: process_position[0], y: process_position[1] })
+        if (node.getModel().Type === "process" && process_position) {
+          node.updatePosition({ x: process_position[0], y: process_position[1] });
         }
       });
     } else {
@@ -355,8 +376,8 @@ function initGraph(data: any) {
     if (node_position_host) {
       graph.getNodes().forEach((node: any, _i: number) => {
         const host_position = node_position_host.get(node.id);
-        if (node.getModel().Type === 'host' && host_position) {
-          node.updatePosition({ x: host_position[0], y: host_position[1] })
+        if (node.getModel().Type === "host" && host_position) {
+          node.updatePosition({ x: host_position[0], y: host_position[1] });
         }
       });
     } else {
@@ -365,7 +386,7 @@ function initGraph(data: any) {
   });
 
   // 渲染后的操作
-  graph.on('afterlayout', () => {
+  graph.on("afterlayout", () => {
     saveCombosPosition();
 
     // 恢复combo收缩/展开状态
@@ -383,21 +404,20 @@ function initGraph(data: any) {
   graph.data(data);
   graph.render();
 
-
   while (!topo_container) {
-    setTimeout(() => { }, 50);
+    setTimeout(() => {}, 50);
   }
 
-  if (typeof window !== 'undefined') {
+  if (typeof window !== "undefined") {
     window.onresize = () => {
-      graph.changeSize(topo_container.clientWidth, topo_container.clientHeight)
-      graph.fitCenter()
-    }
+      graph.changeSize(topo_container.clientWidth, topo_container.clientHeight);
+      graph.fitCenter();
+    };
   }
 }
 
 function refreshDragedNodePosition(e: any) {
-  const model = e.item.get('model');
+  const model = e.item.get("model");
   model.fx = e.x;
   model.fy = e.y;
 }
@@ -418,54 +438,60 @@ function saveNodePosition() {
     const { x, y, id } = node.getModel();
     if (x && y && id) {
       switch (node.getModel().Type) {
-        case 'host':
+        case "host":
           node_position_host.set(id, [x, y]);
           break;
-        case 'process':
+        case "process":
           node_position_process.set(id, [x, y]);
           break;
         default:
           break;
       }
     }
-
   });
   // console.log(node_position_host, node_position_process)
 }
 
 function changeZoom(zoom: number) {
-  const point_position = graph.getPointByCanvas(graph.getWidth() / 2, graph.getHeight() / 2);
+  const point_position = graph.getPointByCanvas(
+    graph.getWidth() / 2,
+    graph.getHeight() / 2
+  );
   graph.zoom(zoom, point_position, false);
   // graph.zoom(zoom);
 }
 
-watch(() => useTopoStore().topo_data, (new_topo_data) => {
-  nextTick(() => {
-    // 数据处理入口
-    topo_type.value = 'comb';
-    let topo_data_raw = JSON.parse(JSON.stringify(new_topo_data));
-    if (topo_data_raw.tree) {
-      topo_type.value = 'tree';
-      initGraph(topo_data_raw.tree);
-    } else if (topo_data_raw.nodes && !graph) {
-      updateTopoData(topo_data_raw);
-      initGraph(topo_data);
-    } else if (topo_data_raw.nodes) {
-      updateTopoData(topo_data_raw);
-      graph.changeData(topo_data);
-    }
-
-  });
-
-}, { immediate: true, deep: true })
+watch(
+  () => useTopoStore().topo_data,
+  (new_topo_data) => {
+    nextTick(() => {
+      // 数据处理入口
+      topo_type.value = "comb";
+      let topo_data_raw = JSON.parse(JSON.stringify(new_topo_data));
+      if (topo_data_raw.tree) {
+        topo_type.value = "tree";
+        initGraph(topo_data_raw.tree);
+      } else if (topo_data_raw.nodes && !graph) {
+        updateTopoData(topo_data_raw);
+        initGraph(topo_data);
+      } else if (topo_data_raw.nodes) {
+        updateTopoData(topo_data_raw);
+        graph.changeData(topo_data);
+      }
+    });
+  },
+  { immediate: true, deep: true }
+);
 
 // 设置graph_mode
-watch(() => props.graph_mode, (newData) => {
-  if (newData) {
-    graph.setMode(newData);
+watch(
+  () => props.graph_mode,
+  (newData) => {
+    if (newData) {
+      graph.setMode(newData);
+    }
   }
-})
-
+);
 </script>
 
 <style scoped lang="scss">
diff --git a/web/src/stores/topo.ts b/web/src/stores/topo.ts
index dff5e3a..02f00f1 100644
--- a/web/src/stores/topo.ts
+++ b/web/src/stores/topo.ts
@@ -4,6 +4,7 @@ interface nodeItem {
   host_name: string;
   node_id: string;
   process_name: string;
+  target_ip?:string;
 }
 export const useTopoStore = defineStore('topo', () => {
 
@@ -17,6 +18,8 @@ export const useTopoStore = defineStore('topo', () => {
     node_click_info.value.host_name = '';
     node_click_info.value.node_id = '';
     node_click_info.value.process_name = '';
+    node_click_info.value.target_ip = '';
+    console.log('置空节点信息',node_click_info.value.target_ip)
   }
   return {nodeData, node_log_id,node_click_info,topo_data, edgeData,$reset}
 })
diff --git a/web/src/utils/socket.ts b/web/src/utils/socket.ts
new file mode 100644
index 0000000..f45ca1a
--- /dev/null
+++ b/web/src/utils/socket.ts
@@ -0,0 +1,164 @@
+import { ElMessage } from 'element-plus'
+interface socket {
+  websocket: any
+  connectURL: string
+  socket_open: boolean
+  hearbeat_timer: any
+  hearbeat_interval: number
+  is_reonnect: boolean
+  reconnect_count: number
+  reconnect_current: number
+  ronnect_number: number
+  reconnect_timer: any
+  reconnect_interval: number
+  init: (receiveMessage: Function | null, socketUrl: String) => any
+  receive: (message: any) => void
+  heartbeat: () => void
+  send: (data: any, callback?: any) => void
+  close: () => void
+  reconnect: () => void
+}
+
+const socket: socket = {
+  websocket: null,
+  connectURL: 'wss://10.41.107.29:8888/plugin/ws/logs', 
+  // 开启标识
+  socket_open: false,
+  // 心跳timer
+  hearbeat_timer: null,
+  // 心跳发送频率
+  hearbeat_interval: 45000,
+  // 是否自动重连
+  is_reonnect: false,
+  // 重连次数
+  reconnect_count: 100,
+  // 已发起重连次数
+  reconnect_current: 1,
+  // 网络错误提示此时
+  ronnect_number: 0,
+  // 重连timer
+  reconnect_timer: null,
+  // 重连频率
+  reconnect_interval: 5000,
+
+  init: (receiveMessage: Function | null, socketUrl?: String) => {
+    if (!('WebSocket' in window)) {
+      ElMessage.warning('浏览器不支持WebSocket')
+      return null
+    }
+    // 已经创建过连接不再重复创建
+    /* if (socket.websocket) {
+      return socket.websocket
+    } */
+
+    socket.websocket = new WebSocket(socket.connectURL)
+    socket.websocket.onmessage = (e: any) => {
+      if (receiveMessage) {
+        receiveMessage(e)
+      }
+    }
+
+    socket.websocket.onclose = (e: any) => {
+      console.log('检测到关闭',e)
+      clearInterval(socket.hearbeat_interval)
+      socket.socket_open = false
+
+      // 需要重新连接
+      if (socket.is_reonnect) {
+        socket.reconnect_timer = setTimeout(() => {
+          // 超过重连次数
+          if (socket.reconnect_current > socket.reconnect_count) {
+            clearTimeout(socket.reconnect_timer)
+            socket.is_reonnect = false
+            return
+          }
+
+          // 记录重连次数
+          socket.reconnect_current++
+          console.log("重连次数：", socket.reconnect_current)
+          socket.reconnect()
+        }, socket.reconnect_interval)
+      }
+    }
+
+    // 连接成功
+    socket.websocket.onopen = function () {
+      console.log('ws连接成功')
+      socket.socket_open = true
+      socket.is_reonnect = false
+      // 开启心跳
+      // socket.heartbeat()
+    }
+
+    // 连接发生错误
+    socket.websocket.onerror = function (e:any) {
+      console.log('连接发生错误',e)
+    }
+  },
+
+  send: (data, callback = null) => {
+    // 开启状态直接发送
+    if (socket.websocket.readyState === socket.websocket.OPEN) {
+      socket.websocket.send(JSON.stringify(data))
+      if (callback) {
+        callback()
+      }
+
+      // 正在开启状态，则等待1s后重新调用
+    } else {
+      clearInterval(socket.hearbeat_timer)
+      /* if (socket.ronnect_number < 1) {
+        ElMessage({
+          type: 'error',
+          message: 'error',
+          duration: 1000,
+        })
+      } */
+      socket.ronnect_number++
+    }
+  },
+
+  receive: (message: any) => {
+    let params = JSON.parse(message.data).data;
+    return params
+  },
+
+  heartbeat: () => {
+    if (socket.hearbeat_timer) {
+      clearInterval(socket.hearbeat_timer)
+    }
+
+    socket.hearbeat_timer = setInterval(() => {
+      let data = {
+        content: 'ping',
+      }
+      var sendDara = {
+        encryption_type: 'base64',
+        data: data,
+      }
+      socket.send(sendDara)
+    }, socket.hearbeat_interval)
+  },
+
+  close: () => {
+    console.log('关闭ws')
+    clearInterval(socket.hearbeat_interval)
+    socket.is_reonnect = false
+    socket.websocket.close()
+  },
+
+  /**
+   * 重新连接
+   */
+  reconnect: () => {
+    console.log("进入重新连接")
+    if (socket.websocket && !socket.is_reonnect) {
+      socket.close()
+    }
+
+    socket.init(null, '/event')
+  },
+}
+
+export default socket
+
-- 
Gitee