ops / monitor-ui · Commits

Go to a project

Authored by qinchao
Commit e1f31f484a9173b2255092b4757b3c6895265fc0 1 parent 98a691c2

主机管理

Inline Side-by-side
Showing 4 changed files with 305 additions and 124 deletions
@@ -29,7 +29,8 @@ public class HttpUriContants { @@ -29,7 +29,8 @@ public class HttpUriContants {
29 public static String TYPE_QUERY_JAVAAPI = "/type/queryJavaApi"; 29 public static String TYPE_QUERY_JAVAAPI = "/type/queryJavaApi";
30 public static String TYPE_GET_ZKTREE = "/type/queryZk"; 30 public static String TYPE_GET_ZKTREE = "/type/queryZk";
31 public static String TYPE_GET_ZK_LEAF = "/type/queryZkLeaf"; 31 public static String TYPE_GET_ZK_LEAF = "/type/queryZkLeaf";
32 - 32 + public static String TYPE_GET_HOST_TOPO = "/type/queryHostTopo";
  33 + public static String TYPE_GET_HOST_SUB_TOPO = "/type/querySubHostTopo";
33 /*** 34 /***
34 * 主机信息 35 * 主机信息
35 ****/ 36 ****/
@@ -53,13 +53,36 @@ public class HostInfoCtrl { @@ -53,13 +53,36 @@ public class HostInfoCtrl {
53 ModelAndView mv = new ModelAndView(); 53 ModelAndView mv = new ModelAndView();
54 mv.setViewName("host/hostTopoList"); 54 mv.setViewName("host/hostTopoList");
55 55
  56 + //初始化数据,先加载两层
  57 + BaseResponse response = httpRestClient.defaultGet(HttpUriContants.TYPE_GET_HOST_TOPO, BaseResponse.class);
  58 + if(response!=null&&response.getCode()==200){
  59 + Gson gson = new Gson();
  60 + String jsonString=gson.toJson( response.getData());
  61 + mv.addObject("antvData",jsonString);
  62 + }
  63 +
  64 + return mv;
  65 + }
  66 +
  67 + @RequestMapping("/querySubHostTopo")
  68 + @ResponseBody
  69 + public BaseResponse querySubHostTopo(int typeId) {
  70 + Map<String,Integer> map = new HashMap();
  71 + map.put("typeId",typeId);
  72 + return httpRestClient.defaultGet(HttpUriContants.TYPE_GET_HOST_SUB_TOPO, BaseResponse.class,map);
  73 + }
  74 +
  75 + /*public ModelAndView toHostTopoList() {
  76 + ModelAndView mv = new ModelAndView();
  77 + mv.setViewName("host/hostTopoList");
  78 +
56 //初始化数据 79 //初始化数据
57 Map<String,List<HostGroup>> initDataMap = tmpConstructData(); 80 Map<String,List<HostGroup>> initDataMap = tmpConstructData();
58 81
59 getJsonAntvData(initDataMap,6, mv); 82 getJsonAntvData(initDataMap,6, mv);
60 83
61 return mv; 84 return mv;
62 - } 85 + }*/
63 86
64 //numInRow 第二层的节点一排放几个 87 //numInRow 第二层的节点一排放几个
65 private void getJsonAntvData(Map<String,List<HostGroup>> initDataMap,int cols,ModelAndView mv){ 88 private void getJsonAntvData(Map<String,List<HostGroup>> initDataMap,int cols,ModelAndView mv){
@@ -191,7 +214,7 @@ public class HostInfoCtrl { @@ -191,7 +214,7 @@ public class HostInfoCtrl {
191 214
192 HostGroup group12=new HostGroup(); 215 HostGroup group12=new HostGroup();
193 group12.setId(1001012); 216 group12.setId(1001012);
194 - group12.setGroupName("risk"); 217 + group12.setGroupName("risk22");
195 ls.add(group12); 218 ls.add(group12);
196 219
197 HostGroup group11=new HostGroup(); 220 HostGroup group11=new HostGroup();
@@ -48,131 +48,110 @@ @@ -48,131 +48,110 @@
48 $("#li_hostTopo").addClass("active"); 48 $("#li_hostTopo").addClass("active");
49 </script> 49 </script>
50 <script type="text/javascript"> 50 <script type="text/javascript">
  51 +
51 // 第一步：获取数据 52 // 第一步：获取数据
52 - var data=${antvData};  
53 - // 第二步：注册图形  
54 - G6.registNode('rect', {  
55 - // 设置锚点  
56 - getAnchorPoints: function(){  
57 - return [  
58 - [1, 0.1], // 右边边的中点  
59 - [0.5, 0] // 左边边的中点  
60 - ];  
61 - }  
62 - });  
63 - var nodes = data.nodes;  
64 - /*for(var i=0;i<nodes.length;i++){  
65 - nodes[i].size=[100,30];  
66 - }*/  
67 - var edges = data.edges;  
68 -  
69 - // 第三步：进行布局  
70 - /* var Layout = G6.Layout;  
71 - var margin = 60;  
72 - var height = 800 - 2 * margin;  
73 - var width = 500 - 2 * margin;  
74 -  
75 - var layout = new Layout.Flow({  
76 - nodes: nodes,  
77 - edges: edges  
78 - });  
79 - nodes = layout.getNodes();*/  
80 -  
81 - /*nodes.map(function(node) {  
82 - var x = node.x * width + margin;  
83 - var y = node.y * height + margin;  
84 - node.x = x;  
85 - node.y = y;  
86 - /!* node.x = node.level* 10;  
87 -  
88 - node.y = node.level*100 +gap;  
89 - gap = node.level*gap;*!/  
90 -  
91 -  
92 - console.log(node.x,node.y);  
93 - });  
94 -  
95 - console.log(nodes);*/  
96 - // 第四步：初始化图  
97 - var net = new G6.Net({  
98 - fitView: 'autoZoom' ,// 自动缩放  
99 - height: ${antvHeight}, // 此处替换高度  
100 - behaviourFilter: ['wheelZoom', 'dragNode','dragBlank', 'dragCanvas'],  
101 - // width:1000,  
102 - id: "hostListTopoDiv" // 此处替换容器id  
103 - });  
104 - // 第五步：载入数据  
105 - net.source(nodes, edges);  
106 - // 第六步：数据映射  
107 - net.node()  
108 - .style(function(obj){  
109 - var keepRatio=0;  
110 - if(obj.level==0){  
111 - keepRatio = 1; 53 + var data=[];
  54 + if(${antvData}){
  55 + data=${antvData};
  56 +
  57 + console.log(data);
  58 + }
  59 +
  60 + function createNet(data) {
  61 + var tree = new G6.Tree({
  62 + id: "hostListTopoDiv" , // 此处替换容器id
  63 + modes:{
  64 + default: [
  65 + 'dragBlank', 'spreadout', 'buttonPointer'
  66 + ]
  67 + },
  68 + fitView: 'autoSize', // 自动缩放 autoSize autoZoom
  69 + layoutCfg: {
  70 + // direction: 'LR', // 方向（LR/RL/H/TB/BT/V）
  71 + getHGap: function(/* d */) { // 横向间距
  72 + return 100;
  73 + },
  74 + getVGap: function(/* d */) { // 竖向间距
  75 + return 10;
  76 + }
112 } 77 }
113 - var attrs = {};  
114 - attrs.fill = 'l (0) 0:#ccc ' + keepRatio + ':#ccc ' + keepRatio + ':#00A263';  
115 - //attrs.fill = '#00A263';// #':#E6504A';  
116 - attrs.fillOpacity = 0.4;  
117 - return attrs;  
118 }); 78 });
119 - net.edge()  
120 - .shape('HV')  
121 - .style({  
122 - stroke: "#CCC",  
123 - strokeOpacity: 0.6,  
124 - //lineWidth:1,  
125 - // lineDash:[5,5],  
126 - arrow: true 79 + tree.source(data);
  80 + tree.node()
  81 + .label(function (obj) {
  82 + return obj.name;
  83 + })
  84 + .style({
  85 + fillOpacity: 1
  86 + });
  87 + tree.edge().shape('smooth');
  88 + tree.render();
  89 +
  90 + //dblclick or click
  91 + tree.on('click', function(ev){
  92 + if(ev.itemType !== 'node'){
  93 + console.log(ev.itemType);
  94 + return;
  95 + }
  96 + var model=ev.item.getModel();
  97 + if(model.children.length>0){
  98 + return;
  99 + }
  100 + $.ajax({
  101 + url : contextPath +"/hostInfoList/querySubHostTopo",
  102 + type : 'post',
  103 + data : {
  104 + typeId : model.id
  105 + },
  106 + async : false,
  107 + dataType : "json",
  108 + success : function(resp) {
  109 + if(resp!=null&&resp.code==200){
  110 + model.children = resp.data;
  111 +
  112 + if(resp.data.length>0){
  113 + var collapsedIds=[];//记录折叠的id
  114 + var treeData=tree.save();
  115 + var treeData_source=treeData.source;
  116 + /*treeRemoveCollapsed(treeData_source,collapsedIds);
  117 +
  118 + console.log(collapsedIds);*/
  119 +
  120 + //方式一
  121 + /*tree.destroy();
  122 + var new_tree= createNet(treeData_source);
  123 + if(collapsedIds.length>0){
  124 +
  125 + }*/
  126 +
  127 + //方式二
  128 + tree.changeData(treeData_source);
  129 + tree.autoSize();
  130 + tree.refresh();
  131 + }
  132 +
  133 +
  134 + }
  135 + }
  136 + });
  137 +
127 }); 138 });
128 - // 第七步：添加图例  
129 -  
130 - // 第八步：渲染关系图  
131 - net.render();  
132 -  
133 - var mouseEnterNodeStyle = {  
134 - fill:"#FF0000",  
135 - lineWidth: 2  
136 - };  
137 - var nodeStyle = {  
138 - fill:"#00A263",  
139 - lineWidth: 1  
140 - };  
141 -  
142 - net.on('itemmouseenter', function(ev){  
143 - if(ev.itemType !== 'node'){  
144 - return;  
145 - }  
146 - if(ev.item.getModel().level==0){  
147 - return ;  
148 - }  
149 - var keyShape = ev.item.getKeyShape();  
150 - keyShape.attr(mouseEnterNodeStyle);  
151 - net.refresh();  
152 - });  
153 - net.on('itemmouseleave', function(ev){  
154 - if(ev.itemType !== 'node'){  
155 - return;  
156 - }  
157 - if(ev.item.getModel().level==0){  
158 - return ;  
159 - }  
160 - var keyShape = ev.item.getKeyShape();  
161 - keyShape.attr(nodeStyle);  
162 - net.refresh();  
163 - });  
164 -  
165 - //dblclick  
166 - net.on('click', function(ev){  
167 - if(ev.itemType !== 'node'){  
168 - return; 139 + return tree;
  140 + }
  141 +
  142 + function treeRemoveCollapsed(node,nodeIDArray) {
  143 + if(node.isCollapsed){
  144 + node.isCollapsed=false;
  145 + nodeIDArray.push(node.id) ;
169 } 146 }
170 - var model=ev.item.getModel();  
171 - if(model.level==0){  
172 - return ; 147 + var children = node.children;
  148 + if (children && children.length) {
  149 + for (var i = 0; i < children.length; i++) {
  150 + treeRemoveCollapsed(children[i],nodeIDArray);
  151 + }
173 } 152 }
174 - var uri=getUrlBasePath() + "/hostInfoList/toHostTopoSub?id="+model.id;  
175 - //window.location.href = uri ;  
176 - window.open(uri);  
177 - }); 153 + }
  154 +
  155 + createNet(data);
  156 +
178 </script> 157 </script>
  1 +<%@page language="java" contentType="text/html;charset=utf-8" %>
  2 +<%@ page import="com.ui.contants.ProjectConstant"%>
  3 +<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
  4 +<%
  5 + String path = request.getContextPath();
  6 + String basePath = request.getScheme() + "://"
  7 + + request.getServerName() + ":" + request.getServerPort()
  8 + + path + "/";
  9 +%>
  10 +
  11 +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  12 +<html>
  13 +<head>
  14 + <jsp:include page="/jsp/common/include.jsp" flush="true"/>
  15 + <script src="https://gw.alipayobjects.com/as/g/datavis/g6/1.1.6/index.js"></script>
  16 + <script>
  17 + var contextPath = '<%=basePath %>';
  18 + </script>
  19 + <title>YOHO!运维</title>
  20 +</head>
  21 +<body>
  22 +
  23 +<!-- 头部 -->
  24 +<div id="head">
  25 +</div>
  26 +<!-- 右侧具体内容 -->
  27 +<div id="content">
  28 + <div id="breadcrumb">
  29 + <a href="#" title="Go to Home" class="tip-bottom"><i
  30 + class="icon-home"></i> Home</a> <a href="#" class="current">主机拓扑图</a>
  31 + </div>
  32 + <div class="container-fluid">
  33 + <div class="widget-box">
  34 + <div class="widget-title">
  35 + <h5>主机管理-主机拓扑图</h5>
  36 + </div>
  37 + <div class="widget-content nopadding">
  38 + <div class="panel-body" id="hostListTopoDiv">
  39 + </div>
  40 + </div>
  41 + </div>
  42 + </div>
  43 +</div>
  44 +</body>
  45 +<script src="<%=basePath %>script/common/genarate_left_panel.js?v=<%=ProjectConstant.MENU_VERSION %>"></script>
  46 +<script>
  47 + $("#li_host").addClass("active open");
  48 + $("#li_hostTopo").addClass("active");
  49 +</script>
  50 +<script type="text/javascript">
  51 + // 第一步：获取数据
  52 + var data=${antvData};
  53 + // 第二步：注册图形
  54 + G6.registNode('rect', {
  55 + // 设置锚点
  56 + getAnchorPoints: function(){
  57 + return [
  58 + [1, 0.1], // 右边边的中点
  59 + [0.5, 0] // 左边边的中点
  60 + ];
  61 + }
  62 + });
  63 + var nodes = data.nodes;
  64 + /*for(var i=0;i<nodes.length;i++){
  65 + nodes[i].size=[100,30];
  66 + }*/
  67 + var edges = data.edges;
  68 +
  69 + // 第三步：进行布局
  70 + /* var Layout = G6.Layout;
  71 + var margin = 60;
  72 + var height = 800 - 2 * margin;
  73 + var width = 500 - 2 * margin;
  74 +
  75 + var layout = new Layout.Flow({
  76 + nodes: nodes,
  77 + edges: edges
  78 + });
  79 + nodes = layout.getNodes();*/
  80 +
  81 + /*nodes.map(function(node) {
  82 + var x = node.x * width + margin;
  83 + var y = node.y * height + margin;
  84 + node.x = x;
  85 + node.y = y;
  86 + /!* node.x = node.level* 10;
  87 +
  88 + node.y = node.level*100 +gap;
  89 + gap = node.level*gap;*!/
  90 +
  91 +
  92 + console.log(node.x,node.y);
  93 + });
  94 +
  95 + console.log(nodes);*/
  96 + // 第四步：初始化图
  97 + var net = new G6.Net({
  98 + fitView: 'autoZoom' ,// 自动缩放
  99 + height: ${antvHeight}, // 此处替换高度
  100 + behaviourFilter: ['wheelZoom', 'dragNode','dragBlank', 'dragCanvas'],
  101 + // width:1000,
  102 + id: "hostListTopoDiv" // 此处替换容器id
  103 + });
  104 + // 第五步：载入数据
  105 + net.source(nodes, edges);
  106 + // 第六步：数据映射
  107 + net.node()
  108 + .style(function(obj){
  109 + var keepRatio=0;
  110 + if(obj.level==0){
  111 + keepRatio = 1;
  112 + }
  113 + var attrs = {};
  114 + attrs.fill = 'l (0) 0:#ccc ' + keepRatio + ':#ccc ' + keepRatio + ':#00A263';
  115 + //attrs.fill = '#00A263';// #':#E6504A';
  116 + attrs.fillOpacity = 0.4;
  117 + return attrs;
  118 + });
  119 + net.edge()
  120 + .shape('HV')
  121 + .style({
  122 + stroke: "#CCC",
  123 + strokeOpacity: 0.6,
  124 + //lineWidth:1,
  125 + // lineDash:[5,5],
  126 + arrow: true
  127 + });
  128 + // 第七步：添加图例
  129 +
  130 + // 第八步：渲染关系图
  131 + net.render();
  132 +
  133 + var mouseEnterNodeStyle = {
  134 + fill:"#FF0000",
  135 + lineWidth: 2
  136 + };
  137 + var nodeStyle = {
  138 + fill:"#00A263",
  139 + lineWidth: 1
  140 + };
  141 +
  142 + net.on('itemmouseenter', function(ev){
  143 + if(ev.itemType !== 'node'){
  144 + return;
  145 + }
  146 + if(ev.item.getModel().level==0){
  147 + return ;
  148 + }
  149 + var keyShape = ev.item.getKeyShape();
  150 + keyShape.attr(mouseEnterNodeStyle);
  151 + net.refresh();
  152 + });
  153 + net.on('itemmouseleave', function(ev){
  154 + if(ev.itemType !== 'node'){
  155 + return;
  156 + }
  157 + if(ev.item.getModel().level==0){
  158 + return ;
  159 + }
  160 + var keyShape = ev.item.getKeyShape();
  161 + keyShape.attr(nodeStyle);
  162 + net.refresh();
  163 + });
  164 +
  165 + //dblclick
  166 + net.on('click', function(ev){
  167 + if(ev.itemType !== 'node'){
  168 + return;
  169 + }
  170 + var model=ev.item.getModel();
  171 + if(model.level==0){
  172 + return ;
  173 + }
  174 + var uri=getUrlBasePath() + "/hostInfoList/toHostTopoSub?id="+model.id;
  175 + //window.location.href = uri ;
  176 + window.open(uri);
  177 + });
  178 +</script>