ops / monitor-ui · Commits

Go to a project

Authored by zhengyouwei
Commit 4dd00a0087bb85856fa8594ee61fcaf50b5f1cb6 1 parent 74a1895e

node

Inline Side-by-side
Showing 9 changed files with 428 additions and 7 deletions
  1 +package com.ui.model.domain;
  2 +
  3 +import java.util.List;
  4 +
  5 +/**
  6 + * Created by zhengyouwei on 2017/1/4.
  7 + */
  8 +public class PythonEnv {
  9 +
  10 + private String name;
  11 +
  12 + private List<String> host_ips;
  13 +
  14 + public String getName() {
  15 + return name;
  16 + }
  17 +
  18 + public void setName(String name) {
  19 + this.name = name;
  20 + }
  21 +
  22 + public List<String> getHost_ips() {
  23 + return host_ips;
  24 + }
  25 +
  26 + public void setHost_ips(List<String> host_ips) {
  27 + this.host_ips = host_ips;
  28 + }
  29 +}
  1 +package com.ui.model.domain;
  2 +
  3 +import java.util.List;
  4 +
  5 +/**
  6 + * Created by zhengyouwei on 2017/1/4.
  7 + */
  8 +public class PythonProject {
  9 +
  10 + private String project;
  11 +
  12 + private String name;
  13 +
  14 + private String group;
  15 +
  16 + private int groupid;
  17 +
  18 + private List<PythonEnv> envs;
  19 +
  20 + public String getProject() {
  21 + return project;
  22 + }
  23 +
  24 + public void setProject(String project) {
  25 + this.project = project;
  26 + }
  27 +
  28 + public String getName() {
  29 + return name;
  30 + }
  31 +
  32 + public void setName(String name) {
  33 + this.name = name;
  34 + }
  35 +
  36 + public String getGroup() {
  37 + return group;
  38 + }
  39 +
  40 + public void setGroup(String group) {
  41 + this.group = group;
  42 + }
  43 +
  44 + public List<PythonEnv> getEnvs() {
  45 + return envs;
  46 + }
  47 +
  48 + public void setEnvs(List<PythonEnv> envs) {
  49 + this.envs = envs;
  50 + }
  51 +
  52 + public int getGroupid() {
  53 + return groupid;
  54 + }
  55 +
  56 + public void setGroupid(int groupid) {
  57 + this.groupid = groupid;
  58 + }
  59 +}
@@ -13,7 +13,7 @@ public class ProjectEnvironment { @@ -13,7 +13,7 @@ public class ProjectEnvironment {
13 map.put("aws", "http://172.31.16.167:8883/web/"); 13 map.put("aws", "http://172.31.16.167:8883/web/");
14 map.put("qcloud","http://172.31.16.167:8883/web/"); 14 map.put("qcloud","http://172.31.16.167:8883/web/");
15 map.put("qcloud_gray","http://172.31.16.167:8883/web/"); 15 map.put("qcloud_gray","http://172.31.16.167:8883/web/");
16 - 16 + map.put("aws_gray","http://172.31.16.167:8883/web/");
17 } 17 }
18 18
19 public static Set<String> getEnviroments(){ 19 public static Set<String> getEnviroments(){
  1 +package com.ui.ctrl;
  2 +
  3 +import com.alibaba.fastjson.JSONArray;
  4 +import com.ui.http.HttpRestClient;
  5 +import com.ui.model.BaseResponse;
  6 +import com.ui.model.domain.PythonEnv;
  7 +import com.ui.model.domain.PythonProject;
  8 +import org.springframework.beans.factory.annotation.Autowired;
  9 +import org.springframework.stereotype.Controller;
  10 +import org.springframework.ui.Model;
  11 +import org.springframework.web.bind.annotation.RequestMapping;
  12 +import org.springframework.web.bind.annotation.ResponseBody;
  13 +import org.springframework.web.servlet.ModelAndView;
  14 +
  15 +import java.io.BufferedReader;
  16 +import java.io.File;
  17 +import java.io.FileNotFoundException;
  18 +import java.io.FileReader;
  19 +import java.util.List;
  20 +
  21 +/**
  22 + * Created by zhengyouwei on 2017/1/11.
  23 + */
  24 +@Controller
  25 +@RequestMapping("/nodeMonitor")
  26 +public class NodeMonitorCtrl {
  27 + @Autowired
  28 + private HttpRestClient httpRestClient;
  29 +
  30 + private String NODE_URL = "http://172.31.16.167:8883/node/";
  31 +
  32 + // private String NODE_URL = "http://127.0.0.1:8883/node/";
  33 +
  34 + @RequestMapping("/toNodeMonitor")
  35 + public ModelAndView toNodeMonitor(Model model) {
  36 + String projects = httpRestClient.get(NODE_URL + "getProjects", String.class, null);
  37 + List projectList = JSONArray.parseObject(projects, List.class);
  38 + model.addAttribute("projectList", projectList);
  39 + return new ModelAndView("nodeMonitor/nodeMonitor");
  40 + }
  41 +
  42 + @RequestMapping("/getProject")
  43 + @ResponseBody
  44 + public PythonProject getProject(String project) {
  45 + return httpRestClient.get(NODE_URL + "getProject?name=" + project, PythonProject.class, null);
  46 + }
  47 +
  48 + @RequestMapping("/getIPS")
  49 + @ResponseBody
  50 + public PythonEnv getIPS(String project, String environment) {
  51 + PythonProject pythonProject = httpRestClient.get(NODE_URL + "getProject?name=" + project, PythonProject.class, null);
  52 + List<PythonEnv> list = pythonProject.getEnvs();
  53 + for (PythonEnv pythonEnv : list) {
  54 + if (environment.equals(pythonEnv.getName())) {
  55 + return pythonEnv;
  56 + }
  57 + }
  58 + return null;
  59 + }
  60 +
  61 + @RequestMapping("/getInfo")
  62 + @ResponseBody
  63 + public String getInfo(String ip) {
  64 +// try {
  65 +// BufferedReader br = new BufferedReader(new FileReader(new File("C:\\Users\\yoho\\Documents\\Tencent Files\\1005982697\\FileRecv\\node.json")));
  66 +// String tmp;
  67 +// StringBuilder sb = new StringBuilder();
  68 +// while ((tmp = br.readLine()) != null) {
  69 +// sb.append(tmp);
  70 +// }
  71 +// return sb.toString();
  72 +// } catch (Exception e) {
  73 +// e.printStackTrace();
  74 +// }
  75 +// return null;
  76 + return httpRestClient.get("http://"+ip+":9615", String.class, null);
  77 + }
  78 +
  79 +}
@@ -95,10 +95,11 @@ public class WorkSystemCtrl { @@ -95,10 +95,11 @@ public class WorkSystemCtrl {
95 } else if (Platform.PHP.equals(platform)) { 95 } else if (Platform.PHP.equals(platform)) {
96 String result = httpRestClient.get("http://172.31.16.167:8883/php/getProjects", String.class, null); 96 String result = httpRestClient.get("http://172.31.16.167:8883/php/getProjects", String.class, null);
97 return JSON.parseObject(result,List.class); 97 return JSON.parseObject(result,List.class);
98 - } else {  
99 - return ProjectOnline.getNodeList(); 98 + } else if (Platform.NODE.equals(platform)) {
  99 + String result = httpRestClient.get("http://172.31.16.167:8883/node/getProjects", String.class, null);
  100 + return JSON.parseObject(result,List.class);
100 } 101 }
101 - 102 + return null;
102 } 103 }
103 104
104 105
@@ -8,7 +8,6 @@ @@ -8,7 +8,6 @@
8 color: #fff; 8 color: #fff;
9 } 9 }
10 10
11 -  
12 .panel-fail-alt .panel-heading { 11 .panel-fail-alt .panel-heading {
13 background-color: #FF3030; 12 background-color: #FF3030;
14 color: #fff; 13 color: #fff;
@@ -19,7 +18,10 @@ @@ -19,7 +18,10 @@
19 color: #fff; 18 color: #fff;
20 } 19 }
21 20
22 - 21 +.panel-node-alt .panel-heading {
  22 + background-color: #b0b1b8;
  23 + color: #000000;
  24 +}
23 25
24 .noborder { 26 .noborder {
25 border: 0; 27 border: 0;
  1 +<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
  2 +<%@ page language="java" contentType="text/html; charset=UTF-8"
  3 + pageEncoding="UTF-8" %>
  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 + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  15 + <link rel="stylesheet" href="<%=basePath %>css/bootstrap.min.css"/>
  16 + <link rel="stylesheet" href="<%=basePath %>css/bootstrap-datetimepicker.css"/>
  17 + <link href="<%=basePath %>js/bootstrap-plugin/css/bootstrap.table.css" rel="stylesheet" media="screen"/>
  18 + <link rel="stylesheet" href="<%=basePath %>css/bootstrap-responsive.min.css"/>
  19 + <link rel="stylesheet" href="<%=basePath %>css/fullcalendar.css"/>
  20 + <link rel="stylesheet" href="<%=basePath %>css/unicorn.main.css"/>
  21 + <link rel="stylesheet" href="<%=basePath %>css/unicorn.grey.css"/>
  22 + <link rel="stylesheet" href="<%=basePath %>css/jquery-ui.css"/>
  23 + <link rel="stylesheet" href="<%=basePath %>css/uniform.css"/>
  24 + <link rel="stylesheet" href="<%=basePath %>css/select2.css"/>
  25 + <link rel="stylesheet" href="<%=basePath %>js/jstree/themes/proton/style.css"/>
  26 + <link rel="stylesheet" href="<%=basePath %>css/select2.css"/>
  27 + <link rel="stylesheet" href="<%=basePath %>css/yoho.css"/>
  28 + <script src="<%=basePath %>js/excanvas.min.js" charset="UTF-8" type="text/javascript"></script>
  29 + <script src="<%=basePath %>js/jquery-1.12.0.min.js" charset="UTF-8" type="text/javascript"></script>
  30 + <script src="<%=basePath %>js/jquery-ui.custom.js" charset="UTF-8" type="text/javascript"></script>
  31 + <script src="<%=basePath %>/js/bootstrap.min.js"></script>
  32 + <script src="<%=basePath %>/js/unicorn.js"></script>
  33 + <script src="<%=basePath %>js/bootstrap-plugin/datetimepicker/moment-with-locales.js" charset="UTF-8"
  34 + type="text/javascript"></script>
  35 + <script src="<%=basePath %>js/bootstrap-plugin/datetimepicker/bootstrap-datetimepicker.js" charset="UTF-8"
  36 + type="text/javascript"></script>
  37 + <script src="<%=basePath %>js/global.js" charset="UTF-8" type="text/javascript"></script>
  38 + <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.pagination.js" charset="UTF-8"
  39 + type="text/javascript"></script>
  40 + <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.table.js" charset="UTF-8" type="text/javascript"></script>
  41 + <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.dialog.js" charset="UTF-8" type="text/javascript"></script>
  42 + <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.form.js" charset="UTF-8" type="text/javascript"></script>
  43 + <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.panel.js" charset="UTF-8" type="text/javascript"></script>
  44 + <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.alerts.js" charset="UTF-8" type="text/javascript"></script>
  45 + <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.accordion.js" charset="UTF-8"
  46 + type="text/javascript"></script>
  47 + <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.breadcrumb.js" charset="UTF-8"
  48 + type="text/javascript"></script>
  49 + <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.validate.js" charset="UTF-8"
  50 + type="text/javascript"></script>
  51 + <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.form.js" charset="UTF-8" type="text/javascript"></script>
  52 + <script src="<%=basePath %>js/layer/layer.js" charset="UTF-8" type="text/javascript"></script>
  53 + <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.select.js" charset="UTF-8" type="text/javascript"></script>
  54 + <script src="<%=basePath %>js/jstree/jstree.min.js"></script>
  55 + <script src="<%=basePath %>js/jquery.toaster.js"></script>
  56 + <link rel="stylesheet" href="<%=basePath %>css/nginxview.css"/>
  57 + <script>
  58 + var contextPath = '<%=basePath %>';
  59 + </script>
  60 + <title>YOHO!运维</title>
  61 +</head>
  62 +<body>
  63 +
  64 +<!-- 头部 -->
  65 +<div id="head">
  66 +</div>
  67 +<!-- 右侧具体内容 -->
  68 +<div id="content">
  69 +
  70 + <div id="breadcrumb">
  71 + <a href="#" title="Go to Home" class="tip-bottom"><i
  72 + class="icon-home"></i> Home</a> <a
  73 + href="#" class="current">nodeMonitor</a>
  74 + </div>
  75 +
  76 + <div class="container-fluid">
  77 + <div class="widget-box">
  78 + <div class="widget-title">
  79 + <h5>node发布查询</h5>
  80 + </div>
  81 + <div class="widget-content nopadding">
  82 + <div class="widget-title" style="height: 53px;">
  83 + <div class="form-inline" role="form" id="inBoxQueryDiv"
  84 + style=" margin-top: 12px;margin-left: 25px;float: left;">
  85 + <div class="input-group" style="float: left;">
  86 + <span class="input-group-addon">项目：</span>
  87 + <select id="projectSelect" name="projectSelect" class="form-control"
  88 + onclick="changeProject()">
  89 + <c:forEach items="${projectList}" var="project">
  90 + <option value="${project.name}">${project.name}</option>
  91 + </c:forEach>
  92 + </select>
  93 + </div>
  94 + <div class="input-group" style="float: left;">
  95 + <span class="input-group-addon">云：</span>
  96 + <select id="cloudSelect" name="cloudSelect" class="form-control">
  97 +
  98 + </select>
  99 + </div>
  100 + <button id="searchBtn" class="btn btn-primary" style="margin-left: 18px;"
  101 + onclick="search()">查询
  102 + </button>
  103 + </div>
  104 + </div>
  105 +
  106 + <div class="container-fluid">
  107 + <div class="row-fluid" style="border:solid 1px #CDC9C9; padding: 10px">
  108 + <div class="span12">
  109 + <div class="section section-visible">
  110 + <div class="hider updatable" style="display:block;">
  111 + <div class="row row-stat" id="show_row">
  112 + </div>
  113 + </div>
  114 + </div>
  115 + </div>
  116 + </div>
  117 + </div>
  118 + </div>
  119 + </div>
  120 + </div>
  121 +</div>
  122 +</body>
  123 +<script src="<%=basePath %>script/common/genarate_left_panel.js"></script>
  124 +<script>
  125 + $("#li_monitor").addClass("active open");
  126 + $("#li_nodeMonitor").addClass("active");
  127 +</script>
  128 +<script>
  129 +
  130 + $(function () {
  131 + changeProject();
  132 + });
  133 +
  134 +
  135 + function changeProject() {
  136 + var project = $("#projectSelect option:selected").val();
  137 + $.ajax({
  138 + url: contextPath + '/nodeMonitor/getProject?project=' + project,
  139 + type: 'POST',
  140 + dataType: 'json',
  141 + success: function (data) {
  142 + $("#cloudSelect").empty();
  143 + var list = data.envs;
  144 + for (var i = 0; i < list.length; i++) {
  145 + var env = list[i];
  146 + $("#cloudSelect").append("<option value='" + env.name + "'>" + env.name + "</option>");
  147 + }
  148 + },
  149 + error: function (e) {
  150 + alert("从后台获取数据出错");
  151 + }
  152 + });
  153 + }
  154 +
  155 + function search() {
  156 + var project = $("#projectSelect option:selected").val();
  157 + var environment = $("#cloudSelect option:selected").val();
  158 + $.ajax({
  159 + url: contextPath + '/nodeMonitor/getIPS?project=' + project + "&environment=" + environment,
  160 + type: 'POST',
  161 + dataType: 'json',
  162 + success: function (data) {
  163 + var list = data.host_ips;
  164 + var show_row = $("#show_row");
  165 + show_row.empty();
  166 + for (var i = 0; i < list.length; i++) {
  167 + getInfo(show_row,list[i]);
  168 + }
  169 + },
  170 + error: function (e) {
  171 + }
  172 + });
  173 +
  174 + }
  175 +
  176 + function getInfo(show_row,ip){
  177 + var project = $("#projectSelect option:selected").val();
  178 + $.ajax({
  179 + url: contextPath + '/nodeMonitor/getInfo?ip=' + ip,
  180 + type: 'POST',
  181 + dataType: 'json',
  182 + success: function (data) {
  183 + var resp = eval("(" + data + ")");
  184 + var processes = resp.processes;
  185 + var cpu_usg;
  186 + var free_mem;
  187 + var total = 0;
  188 + var online = 0;
  189 + processes.forEach(function (p) {
  190 + if (p.name === 'pm2-server-monit') {
  191 + var cpuUsg = p.pm2_env.axm_monitor['CPU usage'].value;
  192 + var freeMem = p.pm2_env.axm_monitor['Free memory'].value;
  193 +
  194 + cpu_usg = cpuUsg;
  195 + free_mem = freeMem;
  196 + }
  197 +
  198 + if (p.name == project) {
  199 + total++;
  200 + }
  201 +
  202 + if ("online" == p.pm2_env.status) {
  203 + online++;
  204 + }
  205 +
  206 + });
  207 +
  208 + var col = $("<div class='col-md-4'\>");
  209 + col.appendTo(show_row);
  210 +
  211 + var panel = $("<div >");
  212 + panel.addClass("panel panel-node-alt noborder")
  213 + col.append(panel);
  214 +
  215 + var panel_head = $("<div class='panel-heading noborder'>")
  216 + panel.append(panel_head);
  217 +
  218 + var panel_icon = $("<div class='panel-icon' style='background-image:url(\"" + contextPath + "img/cloud.png\"); width:60px;height:60px;' >");
  219 + panel_head.append(panel_icon);
  220 +
  221 + var media_body = $("<div class='media-body'>");
  222 + panel_head.append(media_body);
  223 + var tile_info = $("<h1 class='mt5'>").html(ip);
  224 + media_body.append(tile_info);
  225 +
  226 + var hr = $("<hr>");
  227 + panel_head.append(hr);
  228 +
  229 + var server = $("<div>");
  230 + var server_key = $("<span>").html("主机状态&nbsp;&nbsp;&nbsp;&nbsp;");
  231 + server.append(server_key);
  232 + var server_value = $("<span class=\"label label-serstatus label-success\">").html("CPU:" + cpu_usg + ";可用内存:" + free_mem);
  233 + ;
  234 + server.append(server_value);
  235 + panel_head.append(server);
  236 +
  237 + var run = $("<div>");
  238 + var run_key = $("<span>").html("运行状态&nbsp;&nbsp;&nbsp;&nbsp;");
  239 + run.append(run_key);
  240 + var run_value = $("<span class=\"label label-serstatus label-success\">").html("线程数:" + total + ";online:" + online);
  241 + ;
  242 + run.append(run_value);
  243 + panel_head.append(run);
  244 +
  245 + },
  246 + error: function (e) {
  247 + }
  248 + });
  249 + }
  250 +</script>
  251 +
@@ -11,7 +11,7 @@ innerHTML += "<div id='sidebar'><ul>"; @@ -11,7 +11,7 @@ innerHTML += "<div id='sidebar'><ul>";
11 innerHTML += "<li id='li_dashboard'><a id='li_dashboard_a' href=''><i class='icon icon-th'></i> <span>Dashboard</span></a></li>"; 11 innerHTML += "<li id='li_dashboard'><a id='li_dashboard_a' href=''><i class='icon icon-th'></i> <span>Dashboard</span></a></li>";
12 12
13 /*监控*/ 13 /*监控*/
14 -innerHTML += "<li class='submenu' id='li_monitor'><a id='li_monitor_a' href='#'><i class='icon icon-th-list'></i> <span>监控</span><span class='label'>9</span></a><ul>"; 14 +innerHTML += "<li class='submenu' id='li_monitor'><a id='li_monitor_a' href='#'><i class='icon icon-th-list'></i> <span>监控</span><span class='label'>10</span></a><ul>";
15 innerHTML += "<li id='li_javaMonitor'><a id='li_javaMonitor_a' href=''><i class='icon icon-th'></i> <span>JAVA服务监控</span></a></li>"; 15 innerHTML += "<li id='li_javaMonitor'><a id='li_javaMonitor_a' href=''><i class='icon icon-th'></i> <span>JAVA服务监控</span></a></li>";
16 innerHTML += "<li id='li_javaApiMonitor'><a id='li_javaApiMonitor_a' href=''><i class='icon icon-th'></i> <span>JAVA API监控</span></a></li>"; 16 innerHTML += "<li id='li_javaApiMonitor'><a id='li_javaApiMonitor_a' href=''><i class='icon icon-th'></i> <span>JAVA API监控</span></a></li>";
17 innerHTML += "<li id='li_javaApi'><a id='li_javaApi_a' href=''><i class='icon icon-th'></i> <span>JAVA服务信息</span></a></li>"; 17 innerHTML += "<li id='li_javaApi'><a id='li_javaApi_a' href=''><i class='icon icon-th'></i> <span>JAVA服务信息</span></a></li>";