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 @@ @@ -82,6 +82,12 @@
82 <groupId>org.projectlombok</groupId> 82 <groupId>org.projectlombok</groupId>
83 <artifactId>lombok</artifactId> 83 <artifactId>lombok</artifactId>
84 </dependency> 84 </dependency>
  85 +
  86 + <dependency>
  87 + <groupId>com.google.code.gson</groupId>
  88 + <artifactId>gson</artifactId>
  89 + <version>2.8.2</version>
  90 + </dependency>
85 </dependencies> 91 </dependencies>
86 92
87 93
@@ -2,6 +2,7 @@ package com.ui.ctrl; @@ -2,6 +2,7 @@ package com.ui.ctrl;
2 2
3 3
4 import com.alibaba.fastjson.JSON; 4 import com.alibaba.fastjson.JSON;
  5 +import com.google.gson.Gson;
5 import com.ui.common.TagTypeEnum; 6 import com.ui.common.TagTypeEnum;
6 import com.ui.contants.HttpUriContants; 7 import com.ui.contants.HttpUriContants;
7 import com.ui.http.HttpRestClient; 8 import com.ui.http.HttpRestClient;
@@ -46,6 +47,64 @@ public class HostInfoCtrl { @@ -46,6 +47,64 @@ public class HostInfoCtrl {
46 return mv; 47 return mv;
47 } 48 }
48 49
  50 + @RequestMapping("/toHostTopoList")
  51 + public ModelAndView toHostTopoList() {
  52 + ModelAndView mv = new ModelAndView();
  53 + mv.setViewName("host/hostTopoList");
  54 + return mv;
  55 + }
  56 +
  57 + @RequestMapping("/toHostTopoSub")
  58 + public ModelAndView toHostTopoSub(String id) {
  59 + ModelAndView mv = new ModelAndView();
  60 + mv.setViewName("host/hostTopo");
  61 +
  62 +
  63 + int divMarginTop=100;
  64 + int divPadding=60;
  65 + int divLevel=0;
  66 + int divMiddle=200;
  67 + int countInRow=6;
  68 +
  69 + List<Map<String,Object>> echartDataList=new ArrayList<>();
  70 + Map<String,Object> pTmp=null;
  71 + //lb
  72 + /*Map<String,Object> pTmp=new HashMap<>();
  73 + pTmp.put("name","lb");
  74 + pTmp.put("x",divMiddle);
  75 + pTmp.put("y",divMarginTop+divPadding*(divLevel++));
  76 + pTmp.put("fixed",true);
  77 + pTmp.put("symbolSize",new Integer[]{120,50});
  78 + pTmp.put("itemStyle",JSON.parseObject("{normal:{color:'#169fe6'}}"));
  79 + echartDataList.add(pTmp);*/
  80 + //nginx
  81 + pTmp=new HashMap<>();
  82 + pTmp.put("name","nginx");
  83 + pTmp.put("x",divMiddle);
  84 + pTmp.put("y",divMarginTop+divPadding*(divLevel++));
  85 + pTmp.put("fixed",true);
  86 + pTmp.put("symbolSize",new Integer[]{120,50});
  87 + pTmp.put("itemStyle",JSON.parseObject("{normal:{color:'#169fe6'}}"));
  88 + echartDataList.add(pTmp);
  89 +
  90 + //yoho-gateway
  91 + pTmp=new HashMap<>();
  92 + pTmp.put("name","gateway");
  93 + pTmp.put("x",divMiddle);
  94 + pTmp.put("y",divMarginTop+divPadding*(divLevel++));
  95 + pTmp.put("fixed",true);
  96 + pTmp.put("symbolSize",new Integer[]{120,50});
  97 + pTmp.put("itemStyle",JSON.parseObject("{normal:{color:'#169fe6'}}"));
  98 + echartDataList.add(pTmp);
  99 +
  100 +
  101 +
  102 + Gson gson = new Gson();
  103 + String jsonString=gson.toJson( echartDataList,ArrayList.class);
  104 + mv.addObject("echartDataList",jsonString);
  105 + return mv;
  106 + }
  107 +
49 /** 108 /**
50 * 根据标签类别，查询该类别下的属于tag 109 * 根据标签类别，查询该类别下的属于tag
51 * @param type 110 * @param type
  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>
  16 + var contextPath = '<%=basePath %>';
  17 + </script>
  18 + <title>YOHO!运维</title>
  19 +</head>
  20 +<body>
  21 +
  22 +<!-- 头部 -->
  23 +<div id="head">
  24 +</div>
  25 +<!-- 右侧具体内容 -->
  26 +<div id="content">
  27 + <div id="breadcrumb">
  28 + <a href="#" title="Go to Home" class="tip-bottom"><i
  29 + class="icon-home"></i> Home</a> <a href="#" class="current">主机拓扑图</a>
  30 + </div>
  31 + <div class="container-fluid">
  32 + <div class="widget-box">
  33 + <div class="widget-title">
  34 + <h5>主机管理-主机拓扑图</h5>
  35 + </div>
  36 + <div class="widget-content nopadding">
  37 + <div id="hostTopoDiv" class="input-group"
  38 + style="height: 600px;width: 1000px;margin-left: 50px">
  39 + </div>
  40 +
  41 + </div>
  42 + </div>
  43 + </div>
  44 +</div>
  45 +</body>
  46 +<script src="<%=basePath %>script/common/genarate_left_panel.js?v=<%=ProjectConstant.MENU_VERSION %>"></script>
  47 +<script>
  48 + $("#li_host").addClass("active open");
  49 + $("#li_hostTopo").addClass("active");
  50 +</script>
  51 +<script>
  52 + var theme = {
  53 + // 默认色板
  54 + color: [
  55 + '#68a54a',
  56 + '#408829',
  57 + '#a9cba2',
  58 + '#86b379',
  59 +
  60 + '#397b29',
  61 + '#8abb6f',
  62 + '#759c6a',
  63 + '#bfd3b7'
  64 + ]};
  65 +
  66 + var dataOptionList=${echartDataList};
  67 +
  68 + var option = {
  69 + title: {
  70 + text: '主机topo-'+"前台"
  71 + },
  72 +
  73 + tooltip: {
  74 + show:false,
  75 + //trigger:'item',
  76 + //enterable:true,
  77 + formatter:function(){
  78 + return "b<br/>a : c分<input type='checkbox'/>";
  79 + }
  80 + },
  81 + animationDurationUpdate: 1500,
  82 + animationEasingUpdate: 'quinticInOut',
  83 + series : [
  84 + {
  85 + silent:false,//图形是否不响应和触发鼠标事件
  86 + legendHoverLink:false,
  87 + hoverAnimation:false,
  88 + focusNodeAdjacency:false,
  89 + //left:0,
  90 + top:50,
  91 + type: 'graph',
  92 + layout: 'none',
  93 + symbolSize:50,
  94 + label: {
  95 + normal: {
  96 + show: true
  97 + }
  98 + },
  99 +
  100 + symbol:'roundRect',
  101 + edgeSymbol: ['roundRect', 'arrow'],
  102 + edgeSymbolSize: [4, 10],
  103 + edgeLabel: {
  104 + normal: {
  105 + textStyle: {
  106 + fontSize: 20
  107 + }
  108 + }
  109 + },
  110 +//data:d1,
  111 + data:dataOptionList,
  112 + links: [],
  113 + lineStyle: {
  114 + normal: {
  115 + opacity: 0.9,
  116 + width: 2
  117 + }
  118 + }
  119 + }
  120 + ]
  121 + };
  122 +
  123 + // 基于准备好的dom，初始化echarts实例
  124 + var myChart = echarts.init(document.getElementById('hostTopoDiv'),theme);
  125 +
  126 + // var myChart = echarts.init(document.getElementById('hostTopoDiv'));
  127 + $(function () {
  128 + //更新曲线图
  129 + myChart.setOption(option);
  130 +
  131 + myChart.on("click", function (param){
  132 + alert(param.dataIndex+':'+option.series[0].data[param.dataIndex].name+":"+option.series[0].data[param.dataIndex].itemStyle.normal.color);
  133 + option.series[0].data[param.dataIndex].itemStyle.normal['color']="#ff5e52";
  134 +
  135 + myChart.setOption(option,true);//重绘
  136 + });
  137 + });
  138 +
  139 +
  140 +</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>
  16 + var contextPath = '<%=basePath %>';
  17 + </script>
  18 + <title>YOHO!运维</title>
  19 +</head>
  20 +<body>
  21 +
  22 +<!-- 头部 -->
  23 +<div id="head">
  24 +</div>
  25 +<!-- 右侧具体内容 -->
  26 +<div id="content">
  27 + <div id="breadcrumb">
  28 + <a href="#" title="Go to Home" class="tip-bottom"><i
  29 + class="icon-home"></i> Home</a> <a href="#" class="current">主机拓扑图</a>
  30 + </div>
  31 + <div class="container-fluid">
  32 + <div class="widget-box">
  33 + <div class="widget-title">
  34 + <h5>主机管理-主机拓扑图</h5>
  35 + </div>
  36 + <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')">
  39 + 前台:218
  40 + </button>
  41 +
  42 + <button class="btn btn-large btn-primary" style="background-color: green;margin-left:50px;" onclick="hostTopo('线下店')">
  43 + 线下店:5
  44 + </button>
  45 + </div>
  46 + </div>
  47 + </div>
  48 + </div>
  49 +</div>
  50 +</body>
  51 +<script src="<%=basePath %>script/common/genarate_left_panel.js?v=<%=ProjectConstant.MENU_VERSION %>"></script>
  52 +<script>
  53 + $("#li_host").addClass("active open");
  54 + $("#li_hostTopo").addClass("active");
  55 +</script>
  56 +<script>
  57 +
  58 + function hostTopo(id){
  59 + window.location.href = getUrlBasePath() + "/hostInfoList/toHostTopoSub?id="+id;
  60 + }
  61 +
  62 +</script>
@@ -80,10 +80,11 @@ innerHTML += "<li id='li_bigdata_ops_plugin__info'><a id='li_bigdata_ops_plugin_ @@ -80,10 +80,11 @@ innerHTML += "<li id='li_bigdata_ops_plugin__info'><a id='li_bigdata_ops_plugin_
80 innerHTML += "</ul></li>"; 80 innerHTML += "</ul></li>";
81 81
82 /*主机管理*/ 82 /*主机管理*/
83 -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>"; 83 +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>";
84 innerHTML += "<li id='li_hostGroupList'><a id='li_hostGroupList_a' href=''><i class='icon icon-th'></i> <span>标签管理</span></a></li>"; 84 innerHTML += "<li id='li_hostGroupList'><a id='li_hostGroupList_a' href=''><i class='icon icon-th'></i> <span>标签管理</span></a></li>";
85 innerHTML += "<li id='li_hostInfoList'><a id='li_hostInfoList_a' href=''><i class='icon icon-th'></i> <span>主机管理</span></a></li>"; 85 innerHTML += "<li id='li_hostInfoList'><a id='li_hostInfoList_a' href=''><i class='icon icon-th'></i> <span>主机管理</span></a></li>";
86 innerHTML += "<li id='li_mobjectInfo'><a id='li_mobjectInfo_a' href=''><i class='icon icon-th'></i> <span>监控对象</span></a></li>"; 86 innerHTML += "<li id='li_mobjectInfo'><a id='li_mobjectInfo_a' href=''><i class='icon icon-th'></i> <span>监控对象</span></a></li>";
  87 +innerHTML += "<li id='li_hostTopo'><a id='li_hostTopo_a' href=''><i class='icon icon-th'></i> <span>主机Topo</span></a></li>";
87 innerHTML += "</ul></li>"; 88 innerHTML += "</ul></li>";
88 89
89 /*工单系统*/ 90 /*工单系统*/
@@ -196,6 +197,7 @@ document.getElementById("li_dashboard_a").setAttribute("href", path + "/dashboar @@ -196,6 +197,7 @@ document.getElementById("li_dashboard_a").setAttribute("href", path + "/dashboar
196 document.getElementById("li_mobjectInfo_a").setAttribute("href", path + "/mobject/toMobject"); 197 document.getElementById("li_mobjectInfo_a").setAttribute("href", path + "/mobject/toMobject");
197 document.getElementById("li_hostGroupList_a").setAttribute("href", path + "/hostGroup/toHostGroup"); 198 document.getElementById("li_hostGroupList_a").setAttribute("href", path + "/hostGroup/toHostGroup");
198 document.getElementById("li_hostInfoList_a").setAttribute("href", path + "/hostInfoList/toHostInfos"); 199 document.getElementById("li_hostInfoList_a").setAttribute("href", path + "/hostInfoList/toHostInfos");
  200 +document.getElementById("li_hostTopo_a").setAttribute("href", path + "/hostInfoList/toHostTopoList");
199 document.getElementById("li_javaMonitor_a").setAttribute("href", path + "/javaMonitor/toJavaMonitor"); 201 document.getElementById("li_javaMonitor_a").setAttribute("href", path + "/javaMonitor/toJavaMonitor");
200 document.getElementById("li_javaApiMonitor_a").setAttribute("href", path + "/javaApiMonitor/toJavaApiMonitor"); 202 document.getElementById("li_javaApiMonitor_a").setAttribute("href", path + "/javaApiMonitor/toJavaApiMonitor");
201 document.getElementById("li_javaApi_a").setAttribute("href", path + "/javaApi/toJavaApi"); 203 document.getElementById("li_javaApi_a").setAttribute("href", path + "/javaApi/toJavaApi");