ops / monitor-ui · Commits

Go to a project

Authored by qinchao
Commit 89faa5f276eeb4ec2f40a7d91a74ea90cdfc171b 2 parents aac85e43 da21b4fd

Merge branch 'dev_host_topo_ui'

Inline Side-by-side
Showing 5 changed files with 270 additions and 1 deletions
... ... @@ -82,6 +82,12 @@
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
</dependency>
<dependency>
<groupId>com.google.code.gson</groupId>
<artifactId>gson</artifactId>
<version>2.8.2</version>
</dependency>
</dependencies>
... ...
... ... @@ -2,6 +2,7 @@ package com.ui.ctrl;
import com.alibaba.fastjson.JSON;
import com.google.gson.Gson;
import com.ui.common.TagTypeEnum;
import com.ui.contants.HttpUriContants;
import com.ui.http.HttpRestClient;
... ... @@ -46,6 +47,64 @@ public class HostInfoCtrl {
return mv;
}
@RequestMapping("/toHostTopoList")
public ModelAndView toHostTopoList() {
ModelAndView mv = new ModelAndView();
mv.setViewName("host/hostTopoList");
return mv;
}
@RequestMapping("/toHostTopoSub")
public ModelAndView toHostTopoSub(String id) {
ModelAndView mv = new ModelAndView();
mv.setViewName("host/hostTopo");
int divMarginTop=100;
int divPadding=60;
int divLevel=0;
int divMiddle=200;
int countInRow=6;
List<Map<String,Object>> echartDataList=new ArrayList<>();
Map<String,Object> pTmp=null;
//lb
/*Map<String,Object> pTmp=new HashMap<>();
pTmp.put("name","lb");
pTmp.put("x",divMiddle);
pTmp.put("y",divMarginTop+divPadding*(divLevel++));
pTmp.put("fixed",true);
pTmp.put("symbolSize",new Integer[]{120,50});
pTmp.put("itemStyle",JSON.parseObject("{normal:{color:'#169fe6'}}"));
echartDataList.add(pTmp);*/
//nginx
pTmp=new HashMap<>();
pTmp.put("name","nginx");
pTmp.put("x",divMiddle);
pTmp.put("y",divMarginTop+divPadding*(divLevel++));
pTmp.put("fixed",true);
pTmp.put("symbolSize",new Integer[]{120,50});
pTmp.put("itemStyle",JSON.parseObject("{normal:{color:'#169fe6'}}"));
echartDataList.add(pTmp);
//yoho-gateway
pTmp=new HashMap<>();
pTmp.put("name","gateway");
pTmp.put("x",divMiddle);
pTmp.put("y",divMarginTop+divPadding*(divLevel++));
pTmp.put("fixed",true);
pTmp.put("symbolSize",new Integer[]{120,50});
pTmp.put("itemStyle",JSON.parseObject("{normal:{color:'#169fe6'}}"));
echartDataList.add(pTmp);
Gson gson = new Gson();
String jsonString=gson.toJson( echartDataList,ArrayList.class);
mv.addObject("echartDataList",jsonString);
return mv;
}
/**
* 根据标签类别，查询该类别下的属于tag
* @param type
... ...
<%@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>
<jsp:include page="/jsp/common/include.jsp" flush="true"/>
<script>
var contextPath = '<%=basePath %>';
</script>
<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> Home</a> <a href="#" class="current">主机拓扑图</a>
</div>
<div class="container-fluid">
<div class="widget-box">
<div class="widget-title">
<h5>主机管理-主机拓扑图</h5>
</div>
<div class="widget-content nopadding">
<div id="hostTopoDiv" class="input-group"
style="height: 600px;width: 1000px;margin-left: 50px">
</div>
</div>
</div>
</div>
</div>
</body>
<script src="<%=basePath %>script/common/genarate_left_panel.js?v=<%=ProjectConstant.MENU_VERSION %>"></script>
<script>
$("#li_host").addClass("active open");
$("#li_hostTopo").addClass("active");
</script>
<script>
var theme = {
// 默认色板
color: [
'#68a54a',
'#408829',
'#a9cba2',
'#86b379',
'#397b29',
'#8abb6f',
'#759c6a',
'#bfd3b7'
]};
var dataOptionList=${echartDataList};
var option = {
title: {
text: '主机topo-'+"前台"
},
tooltip: {
show:false,
//trigger:'item',
//enterable:true,
formatter:function(){
return "b<br/>a : c分<input type='checkbox'/>";
}
},
animationDurationUpdate: 1500,
animationEasingUpdate: 'quinticInOut',
series : [
{
silent:false,//图形是否不响应和触发鼠标事件
legendHoverLink:false,
hoverAnimation:false,
focusNodeAdjacency:false,
//left:0,
top:50,
type: 'graph',
layout: 'none',
symbolSize:50,
label: {
normal: {
show: true
}
},
symbol:'roundRect',
edgeSymbol: ['roundRect', 'arrow'],
edgeSymbolSize: [4, 10],
edgeLabel: {
normal: {
textStyle: {
fontSize: 20
}
}
},
//data:d1,
data:dataOptionList,
links: [],
lineStyle: {
normal: {
opacity: 0.9,
width: 2
}
}
}
]
};
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('hostTopoDiv'),theme);
// var myChart = echarts.init(document.getElementById('hostTopoDiv'));
$(function () {
//更新曲线图
myChart.setOption(option);
myChart.on("click", function (param){
alert(param.dataIndex+':'+option.series[0].data[param.dataIndex].name+":"+option.series[0].data[param.dataIndex].itemStyle.normal.color);
option.series[0].data[param.dataIndex].itemStyle.normal['color']="#ff5e52";
myChart.setOption(option,true);//重绘
});
});
</script>
... ...
<%@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>
<jsp:include page="/jsp/common/include.jsp" flush="true"/>
<script>
var contextPath = '<%=basePath %>';
</script>
<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> Home</a> <a href="#" class="current">主机拓扑图</a>
</div>
<div class="container-fluid">
<div class="widget-box">
<div class="widget-title">
<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')">
前台:218
</button>
<button class="btn btn-large btn-primary" style="background-color: green;margin-left:50px;" onclick="hostTopo('线下店')">
线下店:5
</button>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="<%=basePath %>script/common/genarate_left_panel.js?v=<%=ProjectConstant.MENU_VERSION %>"></script>
<script>
$("#li_host").addClass("active open");
$("#li_hostTopo").addClass("active");
</script>
<script>
function hostTopo(id){
window.location.href = getUrlBasePath() + "/hostInfoList/toHostTopoSub?id="+id;
}
</script>
... ...
... ... @@ -80,10 +80,11 @@ innerHTML += "<li id='li_bigdata_ops_plugin__info'><a id='li_bigdata_ops_plugin_
innerHTML += "</ul></li>";
/*主机管理*/
innerHTML += "<li class='submenu' id='li_host'><a id='li_host_a' href='#'><i class='icon icon-th-list'></i> <span>主机管理</span><span class='label'>3</span></a><ul>";
innerHTML += "<li class='submenu' id='li_host'><a id='li_host_a' href='#'><i class='icon icon-th-list'></i> <span>主机管理</span><span class='label'>4</span></a><ul>";
innerHTML += "<li id='li_hostGroupList'><a id='li_hostGroupList_a' href=''><i class='icon icon-th'></i> <span>标签管理</span></a></li>";
innerHTML += "<li id='li_hostInfoList'><a id='li_hostInfoList_a' href=''><i class='icon icon-th'></i> <span>主机管理</span></a></li>";
innerHTML += "<li id='li_mobjectInfo'><a id='li_mobjectInfo_a' href=''><i class='icon icon-th'></i> <span>监控对象</span></a></li>";
innerHTML += "<li id='li_hostTopo'><a id='li_hostTopo_a' href=''><i class='icon icon-th'></i> <span>主机Topo</span></a></li>";
innerHTML += "</ul></li>";
/*工单系统*/
... ... @@ -196,6 +197,7 @@ document.getElementById("li_dashboard_a").setAttribute("href", path + "/dashboar
document.getElementById("li_mobjectInfo_a").setAttribute("href", path + "/mobject/toMobject");
document.getElementById("li_hostGroupList_a").setAttribute("href", path + "/hostGroup/toHostGroup");
document.getElementById("li_hostInfoList_a").setAttribute("href", path + "/hostInfoList/toHostInfos");
document.getElementById("li_hostTopo_a").setAttribute("href", path + "/hostInfoList/toHostTopoList");
document.getElementById("li_javaMonitor_a").setAttribute("href", path + "/javaMonitor/toJavaMonitor");
document.getElementById("li_javaApiMonitor_a").setAttribute("href", path + "/javaApiMonitor/toJavaApiMonitor");
document.getElementById("li_javaApi_a").setAttribute("href", path + "/javaApi/toJavaApi");
... ...