ops / monitor-ui · Commits

Go to a project

Authored by qinchao
Commit d52fd740bb1e3656b7048f7fa1ade65c6fd7fc81 1 parent e1442d48

mha

Inline Side-by-side
Showing 6 changed files with 381 additions and 50 deletions
... ... @@ -110,6 +110,7 @@ public class HttpUriContants {
* mysql监控
****/
public static String MYSQL_MONITOR_QUERY_MYSQL_MOBJECT = "/mysqlMonitor/queryMysqlMobject";
public static String MYSQL_MONITOR_QUERY_MHA_LIST = "/mysqlMonitor/queryMhaList";
/**
* user
... ...
... ... @@ -2,15 +2,11 @@ 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;
... ... @@ -22,7 +18,10 @@ import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;
import java.util.*;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
/**
* Created by yoho on 2016/6/14.
... ... @@ -72,20 +71,9 @@ public class HostInfoCtrl {
return httpRestClient.defaultGet(HttpUriContants.TYPE_GET_HOST_SUB_TOPO, BaseResponse.class,map);
}
/*public ModelAndView toHostTopoList() {
ModelAndView mv = new ModelAndView();
mv.setViewName("host/hostTopoList");
//初始化数据
Map<String,List<HostGroup>> initDataMap = tmpConstructData();
getJsonAntvData(initDataMap,6, mv);
return mv;
}*/
//numInRow 第二层的节点一排放几个
private void getJsonAntvData(Map<String,List<HostGroup>> initDataMap,int cols,ModelAndView mv){
/* private void getJsonAntvData(Map<String,List<HostGroup>> initDataMap,int cols,ModelAndView mv){
int beginx=60;
int beginy=60;
... ... @@ -173,9 +161,9 @@ public class HostInfoCtrl {
mv.addObject("antvData",jsonString);
mv.addObject("antvHeight",last_y+100);
}
}*/
@RequestMapping("/toHostTopoSub")
/*@RequestMapping("/toHostTopoSub")
public ModelAndView toHostTopoSub(String id) {
ModelAndView mv = new ModelAndView();
mv.setViewName("host/hostTopo");
... ... @@ -196,9 +184,9 @@ public class HostInfoCtrl {
mv.addObject("parentLabel",parentLabel);
return mv;
}
}*/
private List<HostGroup> tmpDetailData(boolean subFlag){
/* private List<HostGroup> tmpDetailData(boolean subFlag){
List<HostGroup> ls=new ArrayList<>();
if(subFlag){
... ... @@ -439,7 +427,7 @@ public class HostInfoCtrl {
group91.setGroupName("平台端");
initDataMap.put("后台", Lists.newArrayList(group91,group92));
return initDataMap;
}
}*/
... ...
... ... @@ -18,7 +18,16 @@ public class MysqlMonitorCtrl {
@RequestMapping("/toMysqlMonitor")
public ModelAndView toMysqlMonitor() {
return new ModelAndView("mysqlmonitor/mysqlMonitor");
return new ModelAndView("mysqlmonitor/mysqlMhaMonitor");
}
/**
* 查询mha配置列表
*/
@RequestMapping("/queryMhaList")
@ResponseBody
public BaseResponse queryMhaList() {
return httpRestClient.defaultGet(HttpUriContants.MYSQL_MONITOR_QUERY_MHA_LIST,BaseResponse.class);
}
/**
... ...
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;
private int level;
private int[] size={100,30};
}
<%--
CreateUser: craig.qin
CreateDate: 2018/1/31
--%>
<%@page language="java" contentType="text/html;charset=utf-8" %>
<%@page import="com.ui.contants.ProjectConstant"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="<%=basePath%>css/bootstrap.min.css"/>
<link rel="stylesheet" href="<%=basePath%>css/unicorn.main.css"/>
<link rel="stylesheet" href="<%=basePath%>css/unicorn.grey.css"/>
<link rel="stylesheet" href="<%=basePath%>css/jquery-ui.css"/>
<link rel="stylesheet"
href="<%=basePath%>css/bootstrap-responsive.min.css"/>
<link rel="stylesheet" href="<%=basePath%>css/uniform.css"/>
<link rel="stylesheet" href="<%=basePath%>css/select2.css"/>
<link rel="stylesheet" href="<%=basePath%>css/font-awesome.min.css"/>
<script src="<%=basePath%>js/excanvas.min.js" charset="UTF-8"
type="text/javascript"></script>
<script src="<%=basePath%>js/jquery-1.12.0.min.js" charset="UTF-8"
type="text/javascript"></script>
<script src="<%=basePath%>js/jquery.table.mergecell.js" charset="UTF-8"
type="text/javascript"></script>
<script src="<%=basePath%>js/jquery-ui.custom.js" charset="UTF-8"
type="text/javascript"></script>
<script src="<%=basePath%>/js/bootstrap.min.js"></script>
<script src="<%=basePath%>/js/unicorn.js"></script>
<script
src="<%=basePath%>js/bootstrap-plugin/datetimepicker/moment-with-locales.js"
charset="UTF-8" type="text/javascript"></script>
<script
src="<%=basePath%>js/bootstrap-plugin/datetimepicker/bootstrap-datetimepicker.js"
charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath%>js/global.js" charset="UTF-8"
type="text/javascript"></script>
<script src="<%=basePath%>js/bootstrap-plugin/bootstrap.pagination.js"
charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath%>js/bootstrap-plugin/bootstrap.table.js"
charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath%>js/bootstrap-plugin/bootstrap.dialog.js"
charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath%>js/bootstrap-plugin/bootstrap.form.js"
charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath%>js/bootstrap-plugin/bootstrap.panel.js"
charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath%>js/bootstrap-plugin/bootstrap.alerts.js"
charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath%>js/bootstrap-plugin/bootstrap.accordion.js"
charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath%>js/bootstrap-plugin/bootstrap.breadcrumb.js"
charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath%>js/bootstrap-plugin/bootstrap.validate.js"
charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath%>js/bootstrap-plugin/bootstrap.form.js"
charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath%>js/layer/layer.js" charset="UTF-8"
type="text/javascript"></script>
<script src="<%=basePath%>js/bootstrap-plugin/bootstrap.select.js"
charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath%>js/jstree/jstree.min.js"></script>
<script src="<%=basePath%>js/jquery.toaster.js"></script>
<script src="<%=basePath %>js/antv/antv-g6-1.1.6.js" charset="UTF-8" type="text/javascript"></script>
<script>
var contextPath = '<%=basePath%>';
</script>
<style>
.node-container{
position: absolute;
z-index: 9999;
width: 300px;
height: 80px;
border: 1px solid #999;
border-radius: 6px;
overflow: hidden;
position: relative;
}
.node-container .node-container-title{
color: white;
font-size: 2em;
float:left;
height:20px;
}
.node-container .node-container-content{
margin-top:30px;
background-color: white;
}
.node-container .node-container-title-button-div{
float:right;
}
.node-container .node-container-title-button-div button{
margin-left:3px;
margin-right:3px;
width:20px;
}
</style>
<title>YOHO!运维</title>
</head>
<body>
<!-- 头部 -->
<div id="head"></div>
<!-- 右侧具体内容 -->
<div id="content">
<div id="breadcrumb">
<a href="#" title="Go to Home" class="tip-bottom"><i class="icon-home"></i>首页</a> <a href="#" class="current">MHA监控管理</a>
</div>
<div class="container-fluid">
<div class="widget-box">
<div class="widget-title">
<h5>MHA拓扑</h5>
</div>
<div class="widget-content nopadding">
<div class="panel-body" id="mhaTopoDiv">
</div>
</div>
</div>
</div>
</div>
<script src="<%=basePath %>script/common/genarate_left_panel.js?v=<%=ProjectConstant.MENU_VERSION %>"></script>
<script>
$("#li_monitor").addClass("active open");
$("#li_mysql").addClass("active");
</script>
<script type="text/javascript">
var Util = G6.Util;
$(function () {
timer();
});
function timer() {
refreshDiv();
// setTimeout("timer()", 60*1000);
}
function refreshDiv(){
$.ajax({
url: contextPath + "/mysqlMonitor/queryMhaList",
type: 'get',
success: function (data) {
if (!data || data.code != 200) {
alert("获取mha列表信息失败"+data.message);
return;
}
initDashBoard(data.data);
},
error: function (data) {
alert("获取mha列表信息失败，异常");
}
});
}
function initDashBoard(cfgList){
createTopo(cfgList);
}
function createTopo(data) {
// 第二步：注册节点
/* G6.registNode('customNode', {
draw: function(cfg, group){
return drawCard(cfg, group);
}
});*/
G6.registNode('customNode', {
cssSize: true, // 不使用内部 size 作为节点尺寸
getHtml: function(cfg){
var model = cfg.model;
var container = Util.createDOM('<div class="node-container"></div>');
var title = Util.createDOM('<div class="node-container-title">'+model.id+'</div>');
container.appendChild(title);
var buttonDiv = Util.createDOM('<div class="node-container-title-button-div"></div>');
var btn = Util.createDOM('<button>I</button>');
btn.addEventListener('click', function(){
alert(222);
});
buttonDiv.appendChild(btn);
btn = Util.createDOM('<button >X</button>');
btn.addEventListener('click', function(){
alert(1111);
});
buttonDiv.appendChild(btn);
container.appendChild(buttonDiv);
var content = Util.createDOM('<div class="node-container-content">'+model.ip+'</div>');
container.appendChild(content);
return container;
}
}, 'html');
var tree = new G6.Net({
id: "mhaTopoDiv" , // 此处替换容器id
fitView: 'autoSize' // 自动缩放 autoSize autoZoom
/* ,layoutCfg: {
// direction: 'LR', // 方向（LR/RL/H/TB/BT/V）
getHGap: function(/!* d *!/) { // 横向间距
return 100;
},
getVGap: function(/!* d *!/) { // 竖向间距
return 10;
}
}*/
});
tree.source(data.nodes, data.edges);
tree.node().style({
stroke: null, // 去除默认边框
fillOpacity: 1
}).color( function(obj){
var rst;
if(obj.disabledFlag){
rst = '#CCC';
}else{
if(obj.noMaster==1){
//rst = '#F90426';
//rst = '#87CEEB';
rst = '#3B89CF';
}else{
rst = '#3B89CF';
}
}
return rst;
}).label('serverId').shape('customNode');
tree.edge().style({
//stroke: 'black',
lineWidth: 2,
arrow: true
});
tree.render();
return tree;
}
function reloadCanvas(model,tree,newChildData){
/*var oldSize=model.children.length;
var newSize=newChildData==null?0:newChildData.length;
model.children = newChildData;
if(oldSize!=newSize){
var treeData=tree.save();
var treeData_source=treeData.source;
//方式一
tree.destroy();
createTopo(treeData_source);
//方式二
/!*tree.changeData(treeData_source);
tree.autoSize();
tree.refresh();*!/
}*/
}
function drawCard(cfg, group){
var model = cfg.model;
var width = 300;
var height = 80;
var upRectHeight = 50;
var x = cfg.x - width/2; // 左上角x
var y = cfg.y - height/2; // 左上角y
var color = cfg.color;
var padding = 10;
var ip = model.ip;
var keyShape;
keyShape = group.addShape('rect', {
attrs: {
x: x,
y: y,
width: width,
height: height,
stroke: '#999',
radius: 10,
fill: 'white'
}
});
group.addShape('rect', {
attrs: {
x: x,
y: y,
width: width,
height: upRectHeight,
fill: color,
clip: keyShape
}
});
// 标题
group.addShape('text', {
attrs: {
x: x + padding,
y: y + padding,
text: cfg.label,
textBaseline: 'top',
textAlign: 'left',
fontSize: 18,
fill: 'white'
}
});
// Master or No-master
/* group.addShape('text', {
attrs: {
x: x + padding,
y: y + upRectHeight + padding,
text: "",
textBaseline: 'top',
textAlign: 'left',
fontSize: 14,
fill: 'black'
}
});*/
// ip
group.addShape('text', {
attrs: {
x: cfg.x + width/2 - padding,
y: y + upRectHeight + padding,
text: ip ,
textBaseline: 'top',
textAlign: 'right',
fontSize: 14,
fill: '#333'
}
});
return keyShape;
}
</script>
</body>
</html>
\ No newline at end of file
... ...