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
package com.ui.model.domain;
import java.util.List;
/**
* Created by zhengyouwei on 2017/1/4.
*/
public class PythonEnv {
private String name;
private List<String> host_ips;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public List<String> getHost_ips() {
return host_ips;
}
public void setHost_ips(List<String> host_ips) {
this.host_ips = host_ips;
}
}
... ...
package com.ui.model.domain;
import java.util.List;
/**
* Created by zhengyouwei on 2017/1/4.
*/
public class PythonProject {
private String project;
private String name;
private String group;
private int groupid;
private List<PythonEnv> envs;
public String getProject() {
return project;
}
public void setProject(String project) {
this.project = project;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getGroup() {
return group;
}
public void setGroup(String group) {
this.group = group;
}
public List<PythonEnv> getEnvs() {
return envs;
}
public void setEnvs(List<PythonEnv> envs) {
this.envs = envs;
}
public int getGroupid() {
return groupid;
}
public void setGroupid(int groupid) {
this.groupid = groupid;
}
}
... ...
... ... @@ -13,7 +13,7 @@ public class ProjectEnvironment {
map.put("aws", "http://172.31.16.167:8883/web/");
map.put("qcloud","http://172.31.16.167:8883/web/");
map.put("qcloud_gray","http://172.31.16.167:8883/web/");
map.put("aws_gray","http://172.31.16.167:8883/web/");
}
public static Set<String> getEnviroments(){
... ...
package com.ui.ctrl;
import com.alibaba.fastjson.JSONArray;
import com.ui.http.HttpRestClient;
import com.ui.model.BaseResponse;
import com.ui.model.domain.PythonEnv;
import com.ui.model.domain.PythonProject;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;
import java.io.BufferedReader;
import java.io.File;
import java.io.FileNotFoundException;
import java.io.FileReader;
import java.util.List;
/**
* Created by zhengyouwei on 2017/1/11.
*/
@Controller
@RequestMapping("/nodeMonitor")
public class NodeMonitorCtrl {
@Autowired
private HttpRestClient httpRestClient;
private String NODE_URL = "http://172.31.16.167:8883/node/";
// private String NODE_URL = "http://127.0.0.1:8883/node/";
@RequestMapping("/toNodeMonitor")
public ModelAndView toNodeMonitor(Model model) {
String projects = httpRestClient.get(NODE_URL + "getProjects", String.class, null);
List projectList = JSONArray.parseObject(projects, List.class);
model.addAttribute("projectList", projectList);
return new ModelAndView("nodeMonitor/nodeMonitor");
}
@RequestMapping("/getProject")
@ResponseBody
public PythonProject getProject(String project) {
return httpRestClient.get(NODE_URL + "getProject?name=" + project, PythonProject.class, null);
}
@RequestMapping("/getIPS")
@ResponseBody
public PythonEnv getIPS(String project, String environment) {
PythonProject pythonProject = httpRestClient.get(NODE_URL + "getProject?name=" + project, PythonProject.class, null);
List<PythonEnv> list = pythonProject.getEnvs();
for (PythonEnv pythonEnv : list) {
if (environment.equals(pythonEnv.getName())) {
return pythonEnv;
}
}
return null;
}
@RequestMapping("/getInfo")
@ResponseBody
public String getInfo(String ip) {
// try {
// BufferedReader br = new BufferedReader(new FileReader(new File("C:\\Users\\yoho\\Documents\\Tencent Files\\1005982697\\FileRecv\\node.json")));
// String tmp;
// StringBuilder sb = new StringBuilder();
// while ((tmp = br.readLine()) != null) {
// sb.append(tmp);
// }
// return sb.toString();
// } catch (Exception e) {
// e.printStackTrace();
// }
// return null;
return httpRestClient.get("http://"+ip+":9615", String.class, null);
}
}
... ...
... ... @@ -95,10 +95,11 @@ public class WorkSystemCtrl {
} else if (Platform.PHP.equals(platform)) {
String result = httpRestClient.get("http://172.31.16.167:8883/php/getProjects", String.class, null);
return JSON.parseObject(result,List.class);
} else {
return ProjectOnline.getNodeList();
} else if (Platform.NODE.equals(platform)) {
String result = httpRestClient.get("http://172.31.16.167:8883/node/getProjects", String.class, null);
return JSON.parseObject(result,List.class);
}
return null;
}
... ...
... ... @@ -8,7 +8,6 @@
color: #fff;
}
.panel-fail-alt .panel-heading {
background-color: #FF3030;
color: #fff;
... ... @@ -19,7 +18,10 @@
color: #fff;
}
.panel-node-alt .panel-heading {
background-color: #b0b1b8;
color: #000000;
}
.noborder {
border: 0;
... ...
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" %>
<%
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/bootstrap-datetimepicker.css"/>
<link href="<%=basePath %>js/bootstrap-plugin/css/bootstrap.table.css" rel="stylesheet" media="screen"/>
<link rel="stylesheet" href="<%=basePath %>css/bootstrap-responsive.min.css"/>
<link rel="stylesheet" href="<%=basePath %>css/fullcalendar.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/uniform.css"/>
<link rel="stylesheet" href="<%=basePath %>css/select2.css"/>
<link rel="stylesheet" href="<%=basePath %>js/jstree/themes/proton/style.css"/>
<link rel="stylesheet" href="<%=basePath %>css/select2.css"/>
<link rel="stylesheet" href="<%=basePath %>css/yoho.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-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>
<link rel="stylesheet" href="<%=basePath %>css/nginxview.css"/>
<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">nodeMonitor</a>
</div>
<div class="container-fluid">
<div class="widget-box">
<div class="widget-title">
<h5>node发布查询</h5>
</div>
<div class="widget-content nopadding">
<div class="widget-title" style="height: 53px;">
<div class="form-inline" role="form" id="inBoxQueryDiv"
style=" margin-top: 12px;margin-left: 25px;float: left;">
<div class="input-group" style="float: left;">
<span class="input-group-addon">项目：</span>
<select id="projectSelect" name="projectSelect" class="form-control"
onclick="changeProject()">
<c:forEach items="${projectList}" var="project">
<option value="${project.name}">${project.name}</option>
</c:forEach>
</select>
</div>
<div class="input-group" style="float: left;">
<span class="input-group-addon">云：</span>
<select id="cloudSelect" name="cloudSelect" class="form-control">
</select>
</div>
<button id="searchBtn" class="btn btn-primary" style="margin-left: 18px;"
onclick="search()">查询
</button>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid" style="border:solid 1px #CDC9C9; padding: 10px">
<div class="span12">
<div class="section section-visible">
<div class="hider updatable" style="display:block;">
<div class="row row-stat" id="show_row">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="<%=basePath %>script/common/genarate_left_panel.js"></script>
<script>
$("#li_monitor").addClass("active open");
$("#li_nodeMonitor").addClass("active");
</script>
<script>
$(function () {
changeProject();
});
function changeProject() {
var project = $("#projectSelect option:selected").val();
$.ajax({
url: contextPath + '/nodeMonitor/getProject?project=' + project,
type: 'POST',
dataType: 'json',
success: function (data) {
$("#cloudSelect").empty();
var list = data.envs;
for (var i = 0; i < list.length; i++) {
var env = list[i];
$("#cloudSelect").append("<option value='" + env.name + "'>" + env.name + "</option>");
}
},
error: function (e) {
alert("从后台获取数据出错");
}
});
}
function search() {
var project = $("#projectSelect option:selected").val();
var environment = $("#cloudSelect option:selected").val();
$.ajax({
url: contextPath + '/nodeMonitor/getIPS?project=' + project + "&environment=" + environment,
type: 'POST',
dataType: 'json',
success: function (data) {
var list = data.host_ips;
var show_row = $("#show_row");
show_row.empty();
for (var i = 0; i < list.length; i++) {
getInfo(show_row,list[i]);
}
},
error: function (e) {
}
});
}
function getInfo(show_row,ip){
var project = $("#projectSelect option:selected").val();
$.ajax({
url: contextPath + '/nodeMonitor/getInfo?ip=' + ip,
type: 'POST',
dataType: 'json',
success: function (data) {
var resp = eval("(" + data + ")");
var processes = resp.processes;
var cpu_usg;
var free_mem;
var total = 0;
var online = 0;
processes.forEach(function (p) {
if (p.name === 'pm2-server-monit') {
var cpuUsg = p.pm2_env.axm_monitor['CPU usage'].value;
var freeMem = p.pm2_env.axm_monitor['Free memory'].value;
cpu_usg = cpuUsg;
free_mem = freeMem;
}
if (p.name == project) {
total++;
}
if ("online" == p.pm2_env.status) {
online++;
}
});
var col = $("<div class='col-md-4'\>");
col.appendTo(show_row);
var panel = $("<div >");
panel.addClass("panel panel-node-alt noborder")
col.append(panel);
var panel_head = $("<div class='panel-heading noborder'>")
panel.append(panel_head);
var panel_icon = $("<div class='panel-icon' style='background-image:url(\"" + contextPath + "img/cloud.png\"); width:60px;height:60px;' >");
panel_head.append(panel_icon);
var media_body = $("<div class='media-body'>");
panel_head.append(media_body);
var tile_info = $("<h1 class='mt5'>").html(ip);
media_body.append(tile_info);
var hr = $("<hr>");
panel_head.append(hr);
var server = $("<div>");
var server_key = $("<span>").html("主机状态&nbsp;&nbsp;&nbsp;&nbsp;");
server.append(server_key);
var server_value = $("<span class=\"label label-serstatus label-success\">").html("CPU:" + cpu_usg + ";可用内存:" + free_mem);
;
server.append(server_value);
panel_head.append(server);
var run = $("<div>");
var run_key = $("<span>").html("运行状态&nbsp;&nbsp;&nbsp;&nbsp;");
run.append(run_key);
var run_value = $("<span class=\"label label-serstatus label-success\">").html("线程数:" + total + ";online:" + online);
;
run.append(run_value);
panel_head.append(run);
},
error: function (e) {
}
});
}
</script>
... ...
... ... @@ -11,7 +11,7 @@ innerHTML += "<div id='sidebar'><ul>";
innerHTML += "<li id='li_dashboard'><a id='li_dashboard_a' href=''><i class='icon icon-th'></i> <span>Dashboard</span></a></li>";
/*监控*/
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>";
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>";
innerHTML += "<li id='li_javaMonitor'><a id='li_javaMonitor_a' href=''><i class='icon icon-th'></i> <span>JAVA服务监控</span></a></li>";
innerHTML += "<li id='li_javaApiMonitor'><a id='li_javaApiMonitor_a' href=''><i class='icon icon-th'></i> <span>JAVA API监控</span></a></li>";
innerHTML += "<li id='li_javaApi'><a id='li_javaApi_a' href=''><i class='icon icon-th'></i> <span>JAVA服务信息</span></a></li>";
... ...