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;
import com.alibaba.fastjson.JSON;
import com.google.common.collect.Lists;
import com.google.gson.Gson;
import com.ui.common.TagTypeEnum;
import com.ui.contants.HttpUriContants;
import com.ui.http.HttpRestClient;
import com.ui.model.AntvData;
import com.ui.model.AntvNode;
import com.ui.model.BaseResponse;
import com.ui.model.HostGroup;
import com.ui.model.req.HostInfoReq;
import com.ui.model.req.SetHostTagsReq;
import com.ui.model.req.TagReq;
... ... @@ -18,10 +22,7 @@ import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.*;
/**
* Created by yoho on 2016/6/14.
... ... @@ -51,9 +52,228 @@ public class HostInfoCtrl {
public ModelAndView toHostTopoList() {
ModelAndView mv = new ModelAndView();
mv.setViewName("host/hostTopoList");
//初始化数据
Map<String,List<HostGroup>> initDataMap = tmpConstructData();
int beginx=60;
int beginy=60;
int gap_h=100;
int gap_x=300;
int intval=140;
List<AntvNode> nodes=new ArrayList<>();
List<Map<String,String>> edges=new ArrayList<>();
int count=0;
int maxSize=0;
for (Map.Entry<String, List<HostGroup>> entry : initDataMap.entrySet()) {
String topNode = entry.getKey();
AntvNode node=new AntvNode();
node.setId(topNode);
node.setLabel(topNode);
node.setShape("rect");
node.setX(beginx+(count*gap_x));
node.setY(beginy);
nodes.add(node);
int secondCount=1;
List<HostGroup> ls=entry.getValue();
if(ls.size()>maxSize){
maxSize = ls.size();
}
for(HostGroup secondeNode:ls){
String sndNodeID=""+secondeNode.getId();
AntvNode nodeSnd=new AntvNode();
nodeSnd.setId(sndNodeID);
nodeSnd.setLabel(secondeNode.getGroupName());
nodeSnd.setShape("rect");
nodeSnd.setX(beginx+(count*gap_x)+intval);
nodeSnd.setY(beginy+secondCount*gap_h);
nodes.add(nodeSnd);
secondCount++;
//连线
Map<String,String> edgeMap=new HashMap<>();
edgeMap.put("source",topNode);
edgeMap.put("target",sndNodeID);
edges.add(edgeMap);
}
count++;
}
AntvData data=new AntvData();
data.setNodes(nodes);
data.setEdges(edges);
Gson gson = new Gson();
String jsonString=gson.toJson( data,AntvData.class);
mv.addObject("antvData",jsonString);
mv.addObject("antvHeight",100*(maxSize+1));
return mv;
}
private Map<String,List<HostGroup>> tmpConstructData(){
Map<String,List<HostGroup>> initDataMap=new LinkedHashMap<>();
HostGroup group6=new HostGroup();
group6.setId(1006);
group6.setGroupName("search");
HostGroup group5=new HostGroup();
group5.setId(1005);
group5.setGroupName("mysql");
HostGroup group4=new HostGroup();
group4.setId(1004);
group4.setGroupName("中间件");
HostGroup group3=new HostGroup();
group3.setId(1003);
group3.setGroupName("service");
HostGroup group2=new HostGroup();
group2.setId(1002);
group2.setGroupName("gateway");
HostGroup group1=new HostGroup();
group1.setId(1001);
group1.setGroupName("nginx");
initDataMap.put("前台", Lists.newArrayList(group1,group2,group3,group4,group5,group6));
HostGroup group26=new HostGroup();
group26.setId(2006);
group26.setGroupName("greenplum");
HostGroup group25=new HostGroup();
group25.setId(2005);
group25.setGroupName("mysql");
HostGroup group24=new HostGroup();
group24.setId(2004);
group24.setGroupName("中间件");
HostGroup group22=new HostGroup();
group22.setId(2003);
group22.setGroupName("service");
HostGroup group21=new HostGroup();
group21.setId(2001);
group21.setGroupName("nginx");
initDataMap.put("crm", Lists.newArrayList(group21,group22,group24,group25,group26));
HostGroup group35=new HostGroup();
group35.setId(3005);
group35.setGroupName("mysql");
HostGroup group32=new HostGroup();
group32.setId(3002);
group32.setGroupName("service");
HostGroup group31=new HostGroup();
group31.setId(3001);
group31.setGroupName("nginx");
initDataMap.put("线下店", Lists.newArrayList(group31,group32, group35));
HostGroup group68=new HostGroup();
group68.setId(68);
group68.setGroupName("code-deploy");
HostGroup group67=new HostGroup();
group67.setId(67);
group67.setGroupName("health");
HostGroup group66=new HostGroup();
group66.setId(66);
group66.setGroupName("kafka");
HostGroup group65=new HostGroup();
group65.setId(65);
group65.setGroupName("zabbix");
HostGroup group64=new HostGroup();
group64.setId(64);
group64.setGroupName("gitlab");
HostGroup group63=new HostGroup();
group63.setId(63);
group63.setGroupName("influxdb");
HostGroup group62=new HostGroup();
group62.setId(62);
group62.setGroupName("dns");
HostGroup group61=new HostGroup();
group61.setId(61);
group61.setGroupName("nginx");
initDataMap.put("线下店", Lists.newArrayList(group31,group32, group35));
initDataMap.put("ops", Lists.newArrayList(group61,group62,group63,group64,group65,group66,group67,group68));
HostGroup group75=new HostGroup();
group75.setId(75);
group75.setGroupName("dns");
HostGroup group74=new HostGroup();
group74.setId(74);
group74.setGroupName("mysql");
HostGroup group73=new HostGroup();
group73.setId(73);
group73.setGroupName("search");
HostGroup group72=new HostGroup();
group72.setId(72);
group72.setGroupName("nginx");
HostGroup group71=new HostGroup();
group71.setId(71);
group71.setGroupName("socail");
initDataMap.put("web", Lists.newArrayList(group71,group72,group73,group74,group75));
HostGroup group86=new HostGroup();
group86.setId(86);
group86.setGroupName("containers");
HostGroup group85=new HostGroup();
group85.setId(85);
group85.setGroupName("dns");
HostGroup group84=new HostGroup();
group84.setId(84);
group84.setGroupName("mysql");
HostGroup group83=new HostGroup();
group83.setId(83);
group83.setGroupName("search");
HostGroup group82=new HostGroup();
group82.setId(82);
group82.setGroupName("nginx");
HostGroup group81=new HostGroup();
group81.setId(81);
group81.setGroupName("socail");
initDataMap.put("media", Lists.newArrayList(group81,group82,group83,group84,group85,group86));
HostGroup group92=new HostGroup();
group92.setId(92);
group92.setGroupName("mysql");
HostGroup group91=new HostGroup();
group91.setId(91);
group91.setGroupName("平台端");
initDataMap.put("后台", Lists.newArrayList(group91,group92));
return initDataMap;
}
@RequestMapping("/toHostTopoSub")
public ModelAndView toHostTopoSub(String id) {
ModelAndView mv = new ModelAndView();
... ...
package com.ui.model;
import lombok.Data;
import java.util.List;
import java.util.Map;
@Data
public class AntvData {
private List<AntvNode> nodes;
private List<Map<String,String>> edges;
}
... ...
package com.ui.model;
import lombok.Data;
@Data
public class AntvNode {
private int x;
private int y;
private String shape;//rect
private String label;
private String id;
}
... ...
... ... @@ -12,6 +12,7 @@
<html>
<head>
<jsp:include page="/jsp/common/include.jsp" flush="true"/>
<script src="https://gw.alipayobjects.com/as/g/datavis/g6/1.1.6/index.js"></script>
<script>
var contextPath = '<%=basePath %>';
</script>
... ... @@ -34,14 +35,14 @@
<h5>主机管理-主机拓扑图</h5>
</div>
<div class="widget-content nopadding">
<div class="panel-body">
<button class="btn btn-large btn-primary" style="background-color: green;margin-left:50px;" onclick="hostTopo('qiantai')">
<div class="panel-body" id="hostListTopoDiv">
<%--<button class="btn btn-large btn-primary" style="background-color: green;margin-left:50px;" onclick="hostTopo('qiantai')">
前台:218
</button>
<button class="btn btn-large btn-primary" style="background-color: green;margin-left:50px;" onclick="hostTopo('线下店')">
线下店:5
</button>
</button>--%>
</div>
</div>
</div>
... ... @@ -53,10 +54,130 @@
$("#li_host").addClass("active open");
$("#li_hostTopo").addClass("active");
</script>
<script>
<script type="text/javascript">
// 第一步：获取数据
var data2 = {
"nodes": [
{
x:120,
y:60,
"shape": "rect",
"label": "首页000000000",
"level":1,
"id": "add1174b"
},
{
x:180,
y:123,
"shape": "rect",
"label": "页面1",
"level":2,
"id": "fbc69eaa"
},
{
x:180,
y:250,
"shape": "rect",
"label": "页面2",
"level":2,
"id": "6d0df4b8"
},
{
x:180,
y:376,
"shape": "rect",
"label": "页面3",
"level":2,
"id": "fcaedf74"
}
],
"edges": [
{
"source": "add1174b",
"target": "fbc69eaa",
"id": "ae85ce02"
},
{
"source": "add1174b",
"target": "6d0df4b8",
"id": "4f2a272a"
},
{
"source": "add1174b",
"target": "fcaedf74",
"id": "e1d27d5d"
}
]
};
var data=${antvData};
console.log(data);
// 第二步：注册图形
G6.registNode('rect', {
// 设置锚点
getAnchorPoints: function(){
return [
[0.5, 1], // 右边边的中点
[0, 0.5] // 左边边的中点
];
}
});
// 第三步：进行布局
var Layout = G6.Layout;
var margin = 60;
var height = 800 - 2 * margin;
var width = 500 - 2 * margin;
var nodes = data.nodes;
var edges = data.edges;
/*var layout = new Layout.Flow({
nodes: nodes,
edges: edges
});
nodes = layout.getNodes();*/
/*nodes.map(function(node) {
var x = node.x * width + margin;
var y = node.y * height + margin;
node.x = x;
node.y = y;
/!* node.x = node.level* 10;
node.y = node.level*100 +gap;
gap = node.level*gap;*!/
console.log(node.x,node.y);
});*/
function hostTopo(id){
window.location.href = getUrlBasePath() + "/hostInfoList/toHostTopoSub?id="+id;
}
console.log(nodes);
// 第四步：初始化图
var net = new G6.Net({
id: "hostListTopoDiv", // 此处替换容器id
height: ${antvHeight}, // 此处替换高度
// width:1000,
// fitView: 'autoZoom' // 自动缩放
});
// 第五步：载入数据
net.source(nodes, edges);
// 第六步：数据映射
net.node()
.style(function(obj){
var keepRatio=0;
var attrs = {};
attrs.fill = 'l (0) 0:#00A263 ' + keepRatio + ':#00A263 ' + keepRatio + ':#E6504A';
//attrs.fill = '#00A263';// #':#E6504A';
attrs.fillOpacity = 0.4;
return attrs;
});
net.edge()
.shape('VH')
.style({
stroke: "#00A263",
strokeOpacity: 0.6,
arrow: true
});
// 第七步：添加图例
// 第八步：渲染关系图
net.render();
</script>
... ...