ops / monitor-ui · Commits

Go to a project

Authored by qinchao
Commit dc224717efa22caab6d9d48f25e08d36ed82eb29 1 parent 89faa5f2

主机拓扑

Inline Side-by-side
Showing 4 changed files with 377 additions and 11 deletions
@@ -2,11 +2,15 @@ package com.ui.ctrl; @@ -2,11 +2,15 @@ package com.ui.ctrl;
2 2
3 3
4 import com.alibaba.fastjson.JSON; 4 import com.alibaba.fastjson.JSON;
  5 +import com.google.common.collect.Lists;
5 import com.google.gson.Gson; 6 import com.google.gson.Gson;
6 import com.ui.common.TagTypeEnum; 7 import com.ui.common.TagTypeEnum;
7 import com.ui.contants.HttpUriContants; 8 import com.ui.contants.HttpUriContants;
8 import com.ui.http.HttpRestClient; 9 import com.ui.http.HttpRestClient;
  10 +import com.ui.model.AntvData;
  11 +import com.ui.model.AntvNode;
9 import com.ui.model.BaseResponse; 12 import com.ui.model.BaseResponse;
  13 +import com.ui.model.HostGroup;
10 import com.ui.model.req.HostInfoReq; 14 import com.ui.model.req.HostInfoReq;
11 import com.ui.model.req.SetHostTagsReq; 15 import com.ui.model.req.SetHostTagsReq;
12 import com.ui.model.req.TagReq; 16 import com.ui.model.req.TagReq;
@@ -18,10 +22,7 @@ import org.springframework.web.bind.annotation.RequestMapping; @@ -18,10 +22,7 @@ import org.springframework.web.bind.annotation.RequestMapping;
18 import org.springframework.web.bind.annotation.ResponseBody; 22 import org.springframework.web.bind.annotation.ResponseBody;
19 import org.springframework.web.servlet.ModelAndView; 23 import org.springframework.web.servlet.ModelAndView;
20 24
21 -import java.util.ArrayList;  
22 -import java.util.HashMap;  
23 -import java.util.List;  
24 -import java.util.Map; 25 +import java.util.*;
25 26
26 /** 27 /**
27 * Created by yoho on 2016/6/14. 28 * Created by yoho on 2016/6/14.
@@ -51,9 +52,228 @@ public class HostInfoCtrl { @@ -51,9 +52,228 @@ public class HostInfoCtrl {
51 public ModelAndView toHostTopoList() { 52 public ModelAndView toHostTopoList() {
52 ModelAndView mv = new ModelAndView(); 53 ModelAndView mv = new ModelAndView();
53 mv.setViewName("host/hostTopoList"); 54 mv.setViewName("host/hostTopoList");
  55 +
  56 + //初始化数据
  57 + Map<String,List<HostGroup>> initDataMap = tmpConstructData();
  58 +
  59 + int beginx=60;
  60 + int beginy=60;
  61 + int gap_h=100;
  62 + int gap_x=300;
  63 + int intval=140;
  64 + List<AntvNode> nodes=new ArrayList<>();
  65 + List<Map<String,String>> edges=new ArrayList<>();
  66 +
  67 + int count=0;
  68 + int maxSize=0;
  69 + for (Map.Entry<String, List<HostGroup>> entry : initDataMap.entrySet()) {
  70 + String topNode = entry.getKey();
  71 + AntvNode node=new AntvNode();
  72 + node.setId(topNode);
  73 + node.setLabel(topNode);
  74 + node.setShape("rect");
  75 + node.setX(beginx+(count*gap_x));
  76 + node.setY(beginy);
  77 + nodes.add(node);
  78 + int secondCount=1;
  79 + List<HostGroup> ls=entry.getValue();
  80 + if(ls.size()>maxSize){
  81 + maxSize = ls.size();
  82 + }
  83 + for(HostGroup secondeNode:ls){
  84 + String sndNodeID=""+secondeNode.getId();
  85 + AntvNode nodeSnd=new AntvNode();
  86 + nodeSnd.setId(sndNodeID);
  87 + nodeSnd.setLabel(secondeNode.getGroupName());
  88 + nodeSnd.setShape("rect");
  89 + nodeSnd.setX(beginx+(count*gap_x)+intval);
  90 + nodeSnd.setY(beginy+secondCount*gap_h);
  91 + nodes.add(nodeSnd);
  92 +
  93 + secondCount++;
  94 + //连线
  95 + Map<String,String> edgeMap=new HashMap<>();
  96 + edgeMap.put("source",topNode);
  97 + edgeMap.put("target",sndNodeID);
  98 + edges.add(edgeMap);
  99 +
  100 + }
  101 + count++;
  102 + }
  103 +
  104 + AntvData data=new AntvData();
  105 + data.setNodes(nodes);
  106 + data.setEdges(edges);
  107 + Gson gson = new Gson();
  108 + String jsonString=gson.toJson( data,AntvData.class);
  109 + mv.addObject("antvData",jsonString);
  110 + mv.addObject("antvHeight",100*(maxSize+1));
54 return mv; 111 return mv;
55 } 112 }
56 113
  114 +
  115 + private Map<String,List<HostGroup>> tmpConstructData(){
  116 + Map<String,List<HostGroup>> initDataMap=new LinkedHashMap<>();
  117 + HostGroup group6=new HostGroup();
  118 + group6.setId(1006);
  119 + group6.setGroupName("search");
  120 +
  121 + HostGroup group5=new HostGroup();
  122 + group5.setId(1005);
  123 + group5.setGroupName("mysql");
  124 +
  125 + HostGroup group4=new HostGroup();
  126 + group4.setId(1004);
  127 + group4.setGroupName("中间件");
  128 +
  129 + HostGroup group3=new HostGroup();
  130 + group3.setId(1003);
  131 + group3.setGroupName("service");
  132 +
  133 + HostGroup group2=new HostGroup();
  134 + group2.setId(1002);
  135 + group2.setGroupName("gateway");
  136 +
  137 + HostGroup group1=new HostGroup();
  138 + group1.setId(1001);
  139 + group1.setGroupName("nginx");
  140 +
  141 + initDataMap.put("前台", Lists.newArrayList(group1,group2,group3,group4,group5,group6));
  142 +
  143 + HostGroup group26=new HostGroup();
  144 + group26.setId(2006);
  145 + group26.setGroupName("greenplum");
  146 +
  147 + HostGroup group25=new HostGroup();
  148 + group25.setId(2005);
  149 + group25.setGroupName("mysql");
  150 +
  151 + HostGroup group24=new HostGroup();
  152 + group24.setId(2004);
  153 + group24.setGroupName("中间件");
  154 +
  155 + HostGroup group22=new HostGroup();
  156 + group22.setId(2003);
  157 + group22.setGroupName("service");
  158 +
  159 + HostGroup group21=new HostGroup();
  160 + group21.setId(2001);
  161 + group21.setGroupName("nginx");
  162 + initDataMap.put("crm", Lists.newArrayList(group21,group22,group24,group25,group26));
  163 +
  164 + HostGroup group35=new HostGroup();
  165 + group35.setId(3005);
  166 + group35.setGroupName("mysql");
  167 +
  168 +
  169 + HostGroup group32=new HostGroup();
  170 + group32.setId(3002);
  171 + group32.setGroupName("service");
  172 +
  173 + HostGroup group31=new HostGroup();
  174 + group31.setId(3001);
  175 + group31.setGroupName("nginx");
  176 + initDataMap.put("线下店", Lists.newArrayList(group31,group32, group35));
  177 +
  178 + HostGroup group68=new HostGroup();
  179 + group68.setId(68);
  180 + group68.setGroupName("code-deploy");
  181 +
  182 + HostGroup group67=new HostGroup();
  183 + group67.setId(67);
  184 + group67.setGroupName("health");
  185 +
  186 + HostGroup group66=new HostGroup();
  187 + group66.setId(66);
  188 + group66.setGroupName("kafka");
  189 +
  190 +
  191 + HostGroup group65=new HostGroup();
  192 + group65.setId(65);
  193 + group65.setGroupName("zabbix");
  194 +
  195 + HostGroup group64=new HostGroup();
  196 + group64.setId(64);
  197 + group64.setGroupName("gitlab");
  198 +
  199 + HostGroup group63=new HostGroup();
  200 + group63.setId(63);
  201 + group63.setGroupName("influxdb");
  202 +
  203 +
  204 + HostGroup group62=new HostGroup();
  205 + group62.setId(62);
  206 + group62.setGroupName("dns");
  207 +
  208 + HostGroup group61=new HostGroup();
  209 + group61.setId(61);
  210 + group61.setGroupName("nginx");
  211 + initDataMap.put("线下店", Lists.newArrayList(group31,group32, group35));
  212 + initDataMap.put("ops", Lists.newArrayList(group61,group62,group63,group64,group65,group66,group67,group68));
  213 +
  214 +
  215 + HostGroup group75=new HostGroup();
  216 + group75.setId(75);
  217 + group75.setGroupName("dns");
  218 +
  219 + HostGroup group74=new HostGroup();
  220 + group74.setId(74);
  221 + group74.setGroupName("mysql");
  222 +
  223 + HostGroup group73=new HostGroup();
  224 + group73.setId(73);
  225 + group73.setGroupName("search");
  226 +
  227 +
  228 + HostGroup group72=new HostGroup();
  229 + group72.setId(72);
  230 + group72.setGroupName("nginx");
  231 +
  232 + HostGroup group71=new HostGroup();
  233 + group71.setId(71);
  234 + group71.setGroupName("socail");
  235 +
  236 + initDataMap.put("web", Lists.newArrayList(group71,group72,group73,group74,group75));
  237 +
  238 +
  239 + HostGroup group86=new HostGroup();
  240 + group86.setId(86);
  241 + group86.setGroupName("containers");
  242 +
  243 +
  244 + HostGroup group85=new HostGroup();
  245 + group85.setId(85);
  246 + group85.setGroupName("dns");
  247 +
  248 + HostGroup group84=new HostGroup();
  249 + group84.setId(84);
  250 + group84.setGroupName("mysql");
  251 +
  252 + HostGroup group83=new HostGroup();
  253 + group83.setId(83);
  254 + group83.setGroupName("search");
  255 +
  256 +
  257 + HostGroup group82=new HostGroup();
  258 + group82.setId(82);
  259 + group82.setGroupName("nginx");
  260 +
  261 + HostGroup group81=new HostGroup();
  262 + group81.setId(81);
  263 + group81.setGroupName("socail");
  264 + initDataMap.put("media", Lists.newArrayList(group81,group82,group83,group84,group85,group86));
  265 +
  266 + HostGroup group92=new HostGroup();
  267 + group92.setId(92);
  268 + group92.setGroupName("mysql");
  269 +
  270 + HostGroup group91=new HostGroup();
  271 + group91.setId(91);
  272 + group91.setGroupName("平台端");
  273 + initDataMap.put("后台", Lists.newArrayList(group91,group92));
  274 + return initDataMap;
  275 + }
  276 +
57 @RequestMapping("/toHostTopoSub") 277 @RequestMapping("/toHostTopoSub")
58 public ModelAndView toHostTopoSub(String id) { 278 public ModelAndView toHostTopoSub(String id) {
59 ModelAndView mv = new ModelAndView(); 279 ModelAndView mv = new ModelAndView();
  1 +package com.ui.model;
  2 +
  3 +import lombok.Data;
  4 +
  5 +import java.util.List;
  6 +import java.util.Map;
  7 +
  8 +@Data
  9 +public class AntvData {
  10 +
  11 + private List<AntvNode> nodes;
  12 + private List<Map<String,String>> edges;
  13 +}
  1 +package com.ui.model;
  2 +
  3 +import lombok.Data;
  4 +
  5 +@Data
  6 +public class AntvNode {
  7 + private int x;
  8 + private int y;
  9 + private String shape;//rect
  10 + private String label;
  11 + private String id;
  12 +}
@@ -12,6 +12,7 @@ @@ -12,6 +12,7 @@
12 <html> 12 <html>
13 <head> 13 <head>
14 <jsp:include page="/jsp/common/include.jsp" flush="true"/> 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>
15 <script> 16 <script>
16 var contextPath = '<%=basePath %>'; 17 var contextPath = '<%=basePath %>';
17 </script> 18 </script>
@@ -34,14 +35,14 @@ @@ -34,14 +35,14 @@
34 <h5>主机管理-主机拓扑图</h5> 35 <h5>主机管理-主机拓扑图</h5>
35 </div> 36 </div>
36 <div class="widget-content nopadding"> 37 <div class="widget-content nopadding">
37 - <div class="panel-body">  
38 - <button class="btn btn-large btn-primary" style="background-color: green;margin-left:50px;" onclick="hostTopo('qiantai')"> 38 + <div class="panel-body" id="hostListTopoDiv">
  39 + <%--<button class="btn btn-large btn-primary" style="background-color: green;margin-left:50px;" onclick="hostTopo('qiantai')">
39 前台:218 40 前台:218
40 </button> 41 </button>
41 42
42 <button class="btn btn-large btn-primary" style="background-color: green;margin-left:50px;" onclick="hostTopo('线下店')"> 43 <button class="btn btn-large btn-primary" style="background-color: green;margin-left:50px;" onclick="hostTopo('线下店')">
43 线下店:5 44 线下店:5
44 - </button> 45 + </button>--%>
45 </div> 46 </div>
46 </div> 47 </div>
47 </div> 48 </div>
@@ -53,10 +54,130 @@ @@ -53,10 +54,130 @@
53 $("#li_host").addClass("active open"); 54 $("#li_host").addClass("active open");
54 $("#li_hostTopo").addClass("active"); 55 $("#li_hostTopo").addClass("active");
55 </script> 56 </script>
56 -<script> 57 +<script type="text/javascript">
  58 + // 第一步：获取数据
  59 + var data2 = {
  60 + "nodes": [
  61 + {
  62 + x:120,
  63 + y:60,
  64 + "shape": "rect",
  65 + "label": "首页000000000",
  66 + "level":1,
  67 + "id": "add1174b"
  68 + },
  69 + {
  70 + x:180,
  71 + y:123,
  72 + "shape": "rect",
  73 + "label": "页面1",
  74 + "level":2,
  75 + "id": "fbc69eaa"
  76 + },
  77 + {
  78 + x:180,
  79 + y:250,
  80 + "shape": "rect",
  81 + "label": "页面2",
  82 + "level":2,
  83 + "id": "6d0df4b8"
  84 + },
  85 + {
  86 + x:180,
  87 + y:376,
  88 + "shape": "rect",
  89 + "label": "页面3",
  90 + "level":2,
  91 + "id": "fcaedf74"
  92 + }
  93 + ],
  94 + "edges": [
  95 + {
  96 + "source": "add1174b",
  97 + "target": "fbc69eaa",
  98 + "id": "ae85ce02"
  99 + },
  100 + {
  101 + "source": "add1174b",
  102 + "target": "6d0df4b8",
  103 + "id": "4f2a272a"
  104 + },
  105 + {
  106 + "source": "add1174b",
  107 + "target": "fcaedf74",
  108 + "id": "e1d27d5d"
  109 + }
  110 + ]
  111 + };
  112 +
  113 + var data=${antvData};
  114 + console.log(data);
  115 + // 第二步：注册图形
  116 + G6.registNode('rect', {
  117 + // 设置锚点
  118 + getAnchorPoints: function(){
  119 + return [
  120 + [0.5, 1], // 右边边的中点
  121 + [0, 0.5] // 左边边的中点
  122 + ];
  123 + }
  124 + });
  125 + // 第三步：进行布局
  126 + var Layout = G6.Layout;
  127 + var margin = 60;
  128 + var height = 800 - 2 * margin;
  129 + var width = 500 - 2 * margin;
  130 + var nodes = data.nodes;
  131 + var edges = data.edges;
  132 + /*var layout = new Layout.Flow({
  133 + nodes: nodes,
  134 + edges: edges
  135 + });
  136 + nodes = layout.getNodes();*/
  137 +
  138 + /*nodes.map(function(node) {
  139 + var x = node.x * width + margin;
  140 + var y = node.y * height + margin;
  141 + node.x = x;
  142 + node.y = y;
  143 + /!* node.x = node.level* 10;
  144 +
  145 + node.y = node.level*100 +gap;
  146 + gap = node.level*gap;*!/
  147 +
  148 +
  149 + console.log(node.x,node.y);
  150 + });*/
57 151
58 - function hostTopo(id){  
59 - window.location.href = getUrlBasePath() + "/hostInfoList/toHostTopoSub?id="+id;  
60 - } 152 + console.log(nodes);
  153 + // 第四步：初始化图
  154 + var net = new G6.Net({
  155 + id: "hostListTopoDiv", // 此处替换容器id
  156 + height: ${antvHeight}, // 此处替换高度
  157 + // width:1000,
  158 + // fitView: 'autoZoom' // 自动缩放
  159 + });
  160 + // 第五步：载入数据
  161 + net.source(nodes, edges);
  162 + // 第六步：数据映射
  163 + net.node()
  164 + .style(function(obj){
  165 + var keepRatio=0;
  166 + var attrs = {};
  167 + attrs.fill = 'l (0) 0:#00A263 ' + keepRatio + ':#00A263 ' + keepRatio + ':#E6504A';
  168 + //attrs.fill = '#00A263';// #':#E6504A';
  169 + attrs.fillOpacity = 0.4;
  170 + return attrs;
  171 + });
  172 + net.edge()
  173 + .shape('VH')
  174 + .style({
  175 + stroke: "#00A263",
  176 + strokeOpacity: 0.6,
  177 + arrow: true
  178 + });
  179 + // 第七步：添加图例
61 180
  181 + // 第八步：渲染关系图
  182 + net.render();
62 </script> 183 </script>