Merge branch 'master' into switch_conf

# Conflicts:
#	monitor-ui-web/src/main/webapp/script/common/genarate_left_panel.js

+package com.ui.model.req;
+
+import lombok.Data;
+
+/**
+ * Created by yoho on 2016/10/27.
+ */
+@Data
+public class ActionRequest {
+    private String hostId;
+
+    private String service;
+
+    private String action;
+}

@@ -43,7 +43,11 @@ public class JavaMonitorCtrl {
     public BaseResponse queryApiMonitorInfo(JavaApiMonitorReq req) {
         //校验参数
         if(StringUtils.isEmpty(req.getServiceName())){
-            req.setServiceName("gateway");
+            req.setServiceName("all");
+        }
+        //0-gateway的默认，-1-all的默认
+        if(req.getServiceType() == 0){
+            req.setServiceType(-1);
         }
         if(req.getTimeInterval() == 0){
             req.setTimeInterval(1);
@@ -55,7 +59,7 @@ public class JavaMonitorCtrl {
     @RequestMapping("/getGraphData")
     @ResponseBody
     public BaseResponse getGraphData(JavaApiMonitorReq req) {
-        if(StringUtils.isEmpty(req.getServiceName())){
+        if(StringUtils.isEmpty(req.getServiceName()) || "all".equals(req.getServiceName())){
             req.setServiceName("gateway");
         }
         BaseResponse rep;
@@ -73,7 +77,11 @@ public class JavaMonitorCtrl {
     public BaseResponse queryIpList(JavaApiMonitorReq req) {
         //校验参数
         if(StringUtils.isEmpty(req.getServiceName())){
-            req.setServiceName("gateway");
+            req.setServiceName("all");
+        }
+        //0-gateway的默认，-1-all的默认
+        if(req.getServiceType() == 0){
+            req.setServiceType(-1);
         }
         BaseResponse rep = httpClient.defaultPost(HttpUriContants.JAVA_IP_LIST, req, BaseResponse.class);
         return rep;
@@ -88,6 +96,10 @@ public class JavaMonitorCtrl {
         if ("0".equals(req.getIp())) {
             req.setIp("");
          }
+        //0-gateway的默认，-1-all的默认
+        if(req.getServiceType() == 0){
+            req.setServiceType(-1);
+        }
         BaseResponse rep = httpClient.defaultPost(HttpUriContants.JAVA_API_LIST, req, BaseResponse.class);
         return rep;
     }

+package com.ui.ctrl;
+
+import com.ui.http.HttpRestClient;
+import com.ui.model.BaseResponse;
+import com.ui.model.req.ActionRequest;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.web.bind.annotation.PathVariable;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RestController;
+import org.springframework.web.servlet.ModelAndView;
+
+/**
+ * Created by yoho on 2016/10/27.
+ */
+@RestController
+@RequestMapping(value = "/monit")
+public class MonitCtrl {
+
+    @Autowired
+    HttpRestClient httpRestClient;
+
+    @RequestMapping("/toMonit")
+    public ModelAndView toNginxView() {
+        return new ModelAndView("monit/monit");
+    }
+
+    @RequestMapping("/service/all")
+    public BaseResponse queryAllService() {
+
+        BaseResponse response = httpRestClient.defaultGet("/monit/service/all", BaseResponse.class);
+
+        return response;
+    }
+
+/*    @RequestMapping("/hosts/action")
+    public BaseResponse operHostService(String request) {
+        BaseResponse response = httpRestClient.defaultPost("/monit/hosts/action", request, BaseResponse.class);
+
+        return response;
+    }*/
+
+
+    @RequestMapping("/hosts/oneAction")
+    public BaseResponse operOneHostService(ActionRequest request) {
+        BaseResponse response = httpRestClient.defaultPost("/monit/hosts/oneAction", request, BaseResponse.class);
+
+        return response;
+    }
+
+    @RequestMapping("/hosts/delete/{monitId}")
+    public BaseResponse delHostService(@PathVariable("monitId") String monitId) {
+        BaseResponse response = httpRestClient.defaultPost("/monit/hosts/delete/" + monitId, null, BaseResponse.class);
+
+        return response;
+    }
+}

+.blanksegmentation {
+    height: 30px;
+}
+
+#rightpanel{
+    margin: 0 40px;
+}
+
+.margin10px{
+	margin-top:10px;
+}
+
+.margin15px{
+	margin-top:15px;
+}
+
+.margin20px{
+	margin-top:20px;
+}
+
+.title-hr{
+	margin:30px 0;
+}
+
+.table-hr{
+	margin:5px 64% 8px 0;
+}
+

@@ -114,6 +114,14 @@
             cloudType = 1;
         }
         getJavaAppType(cloudType);
+        $("#infoTable").table("load", {
+            startTime : startTime,
+            endTime : endTime,
+            serviceType : serviceType,
+            serviceName : serviceName,
+            ip:"",
+            cloudType :cloudType
+        });
     }
 
     //ip类型选择事件
@@ -134,7 +142,8 @@
             type: 'post',
             data : {
                 serviceType:serviceType,
-                cloudType : cloudType
+                cloudType : cloudType,
+                serviceName : serviceName
             },
             dataType:'json',
             success: function (data) {
@@ -169,21 +178,25 @@
                 if(data.data != null){
                     //同步加载根据平均耗时排序的tab页列表
                     var costObj = new Array();
+                    var errorObj = new Array();
                     for(var j = 0;j<data.data.length;j++){
                         costObj.push(data.data[j]);
+                        errorObj.push(data.data[j]);
                     }
                     //按平均耗时从大到小排序ss
                     costObj.sort(function(a,b){
+                        if(b.avgCost == a.avgCost){
+                            return b.errorCount-a.errorCount;
+                        }
                         return b.avgCost-a.avgCost;
                     });
 
                     //同步加载根据异常次数排序的tab页列表
-                    var errorObj = new Array();
-                    for (var i = 0; i < data.data.length; i++) {
-                        errorObj.push(data.data[i]);
-                    }
                     //按异常次数从大到小排序
                     errorObj.sort(function (a, b) {
+                        if(b.errorCount == a.errorCount){
+                            return b.avgCost-a.avgCost;
+                        }
                         return b.errorCount - a.errorCount;
                     });
                     $("#infoTable").table("loadLoaclData", errorObj);
@@ -199,10 +212,10 @@
                     var end = endTime.split(" ");
 
                     var div = $("<div>");
-                    var editBtn = $("<button>").addClass("btn btn-xs btn-success").html(rowData.apiName).appendTo(div);
+                    var editBtn = $("<button>").addClass("btn btn-xs btn-success").css("height","35px").html(rowData.apiName).appendTo(div);
                     editBtn.click(function () {
                         var dialog = $("<div>").appendTo($("body"));
-                        var url = contextPath + "/javaMonitor/toJavaIpInfoList?serviceName="+serviceName+"&apiName="+rowData.apiName+"&serviceType="+serviceType+"&cloudType="+$("#cloudType").val()
+                        var url = contextPath + "/javaMonitor/toJavaIpInfoList?serviceName="+rowData.serviceName+"&apiName="+rowData.apiName+"&cloudType="+$("#cloudType").val()
                                 +"&startTime1="+start[0]+"&startTime2="+start[1]+"&endTime1="+end[0]+"&endTime2="+end[1];
                         dialog.dialog({
                             backdrop: "static",

@@ -5,7 +5,6 @@
     String basePath = request.getScheme() + "://"
             + request.getServerName() + ":" + request.getServerPort()
             + path + "/";
-    String serviceType = request.getParameter("serviceType");
     String serviceName = request.getParameter("serviceName");
     String startTime1 = request.getParameter("startTime1");
     String endTime1 = request.getParameter("endTime1");
@@ -57,7 +56,6 @@
     $(function () {
 
         var contextPath = '<%=basePath %>';
-        var serviceType = "<%=serviceType %>";
         var serviceName = "<%=serviceName%>";
         var startTime = "<%=startTime1%>"+" "+"<%=startTime2%>";
         var endTime = "<%=endTime1%>"+" "+"<%=endTime2%>";
@@ -74,7 +72,6 @@
             queryParams : {
                 startTime : startTime,
                 endTime : endTime,
-                serviceType : serviceType,
                 serviceName : serviceName,
                 apiName :apiName,
                 cloudType : cloudType
@@ -87,21 +84,25 @@
                 if(data.data != null){
                     //同步加载根据平均耗时排序的tab页列表
                     var costObj = new Array();
+                    var errorObj = new Array();
                     for(var j = 0;j<data.data.length;j++){
                         costObj.push(data.data[j]);
+                        errorObj.push(data.data[j]);
                     }
                     //按平均耗时从大到小排序ss
                     costObj.sort(function(a,b){
+                        if(b.avgCost == a.avgCost){
+                            return b.errorCount-a.errorCount;
+                        }
                         return b.avgCost-a.avgCost;
                     });
 
                     //同步加载根据异常次数排序的tab页列表
-                    var errorObj = new Array();
-                    for (var i = 0; i < data.data.length; i++) {
-                        errorObj.push(data.data[i]);
-                    }
                     //按异常次数从大到小排序
                     errorObj.sort(function (a, b) {
+                        if(b.errorCount == a.errorCount){
+                            return b.avgCost-a.avgCost;
+                        }
                         return b.errorCount - a.errorCount;
                     });
                     $("#javaMonitorForm #ipInfoTable").table("loadLoaclData", errorObj);

@@ -87,7 +87,7 @@
                 <div id="infoTableDiv">
                     <ul class="nav nav-tabs" role="tablist">
                         <li role="presentation" class="active">
-                            <a href="#ipPart" aria-controls="ipPart" role="tab" data-toggle="tab">IP</a>
+                            <a href="#ipPart" aria-controls="ipPart" role="tab" data-toggle="tab">总请求次数</a>
                         </li>
                         <li role="presentation">
                             <a href="#timesPart" aria-controls="timesPart" role="tab" data-toggle="tab">异常次数</a>
@@ -287,7 +287,11 @@
                     title = "异常次数-曲线图";
                     xText = "error times";
                 }
-                drawLine(lineType,title,$("#searchApiName").select("getText"),xText,categories,series);
+                var subTitle = $("#searchApiName").select("getText");
+                if(subTitle == "all"){
+                    subTitle = "gateway"
+                }
+                drawLine(lineType,title,subTitle,xText,categories,series);
             }
         });
     }
@@ -298,10 +302,13 @@
             valueField: "typeId",
             textField: "typeName",
             className: "form-control",
+            firstText : "all",
+            firstValue : 0,
             url: contextPath + "/type/queryJavaApiType",
             loadFilter: function (data) {
                 return defaultLoadFilter(data);
-            }
+            },
+            value : 0
         });
 
         $("#ipInfoTable").table({
@@ -311,37 +318,48 @@
             dataType: "json",
             sortable: true, //是否启用排序
             sortOrder:"desc",
-            loadFilter: function (data) {
-                //记录下开始时间和结束时间
-                paramObj.startTime = data.data.startTime;
-                paramObj.endTime = data.data.endTime;
-                return defaultLoadFilter(data).content;
-            },
             onLoadSuccess: function (data) {
-                //记录第一条ip
-                if(data!= null){
-                    paramObj.ipName = data[0].ip;
-                    //同步加载根据异常次数排序的tab页列表
-                    var errorObj = new Array();
-                    for(var i = 0;i<data.length;i++){
-                        errorObj.push(data[i]);
-                    }
-                    //按异常次数从大到小排序
-                    errorObj.sort(function(a,b){
-                        return b.errorCount-a.errorCount;
-                    });
-                    $("#infoTable").table("loadLoaclData", errorObj);
 
-                    //同步加载根据平均耗时排序的tab页列表
-                    var costObj = new Array();
-                    for(var j = 0;j<data.length;j++){
-                        costObj.push(data[j]);
-                    }
-                    //按平均耗时从大到小排序ss
-                    costObj.sort(function(a,b){
-                        return b.avgCost-a.avgCost;
-                    });
-                    $("#infoTable1").table("loadLoaclData", costObj);
+                if(data.data!= null){
+                    //记录下开始时间和结束时间
+                    paramObj.startTime = data.data.startTime;
+                    paramObj.endTime = data.data.endTime;
+                   if(data.data.content != null){
+                       //根据总请求次数排序
+                       var totalObj = new Array();
+                       var errorObj = new Array();
+                       var costObj = new Array();
+                       for(var k = 0;k<data.data.content.length;k++){
+                           totalObj.push(data.data.content[k]);
+                           errorObj.push(data.data.content[k]);
+                           costObj.push(data.data.content[k]);
+                       }
+                       //按平均耗时从大到小排序ss
+                       totalObj.sort(function(a,b){
+                           return b.totalCount-a.totalCount;
+                       });
+                       $("#ipInfoTable").table("loadLoaclData", totalObj);
+
+                       //同步加载根据异常次数排序的tab页列表
+                       //按异常次数从大到小排序
+                       errorObj.sort(function(a,b){
+                        if(b.errorCount == a.errorCount){
+                            return b.avgCost-a.avgCost
+                        }
+                           return b.errorCount-a.errorCount;
+                       });
+                       $("#infoTable").table("loadLoaclData", errorObj);
+
+                       //同步加载根据平均耗时排序的tab页列表
+                       //按平均耗时从大到小排序ss
+                       costObj.sort(function(a,b){
+                           if(b.avgCost == a.avgCost){
+                               return b.errorCount-a.errorCount
+                           }
+                           return b.avgCost-a.avgCost;
+                       });
+                       $("#infoTable1").table("loadLoaclData", costObj);
+                   }
                 }
             },
             columns: [{

+<%@page language="java" contentType="text/html;charset=utf-8" %>
+<%@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"/>
+    <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>
+    <script src="<%=basePath %>js/jquery-2.1.4.min.js"></script>
+    <script src="<%=basePath %>js/bootstrap.min.js"></script>
+    <script src="<%=basePath %>js/select2.min.js"></script>
+    <script src="<%=basePath %>js/custom.js"></script>
+    <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">Monit</a>
+    </div>
+
+    <div class="container-fluid">
+        <div id="body_div">
+            <div class="blanksegmentation"></div>
+        </div>
+    </div>
+
+</div>
+
+
+<script src="<%=basePath %>script/common/genarate_left_panel.js"></script>
+<script>
+    $("#li_monitor").addClass("active open");
+    $("#li_monit").addClass("active");
+</script>
+<script src="<%=basePath %>script/monit.js"></script>
+</body>
+</html>

@@ -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'>8</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'>9</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_javaApi'><a id='li_javaApi_a' href=''><i class='icon icon-th'></i> <span>JAVA服务信息</span></a></li>";
 innerHTML += "<li id='li_zkInfo'><a id='li_zkInfo_a' href=''><i class='icon icon-th'></i> <span>ZK监控</span></a></li>";
@@ -21,8 +21,10 @@ innerHTML += "<li id='li_newRedisMonitor'><a id='li_newRedisMonitor_a' href=''><
 innerHTML += "<li id='li_newRedisMonitor'><a id='li_memcachedMonitor_a' href=''><i class='icon icon-th'></i> <span>Memcached监控</span></a></li>";
 innerHTML += "<li id='li_nginxview'><a id='li_nginxview_a' href=''><i class='icon icon-th'></i> <span>Nginx监控</span></a></li>";
 innerHTML += "<li id='li_dns_monitor'><a id='li_dns_monitor_a' href=''><i class='icon icon-th'></i> <span>DNS反劫持监控</span></a></li>";
+innerHTML += "<li id='li_monit'><a id='li_monit_a' href=''><i class='icon icon-th'></i> <span>Monit监控</span></a></li>";
 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 id='li_hostGroupList'><a id='li_hostGroupList_a' href=''><i class='icon icon-th'></i> <span>标签管理</span></a></li>";
@@ -129,6 +131,7 @@ document.getElementById("li_centerswitch_a").setAttribute("href", path + "/cente
 document.getElementById("li_ips_compare_a").setAttribute("href", path + "/compareIps/toCompareIps");
 document.getElementById("li_limitswitch_a").setAttribute("href", path + "/limitSwitch/toLimitSwitch");
 document.getElementById("li_lbswitch_a").setAttribute("href", path + "/lbSwitch/toLbSwitch");
+document.getElementById("li_monit_a").setAttribute("href",path+"/monit/toMonit");
 
 function getUrlBasePath() {
     var location = ( window.location + '').split('/');

+//加载页面 初始化页面
+queryAllMonitorService();
+
+//设置定时器，一分钟刷新一次页面
+timename = setInterval("queryAllMonitorService();", 60 * 1000);
+
+//查询monitor所有服务信息，并且刷新页面展示
+function queryAllMonitorService() {
+    $.ajax({
+        "url": "/monit/service/all",
+        "type": 'GET',
+        "dataType": "json",
+        success: function (response) {
+            console.log(response.data);
+            genarateMonitorDashboard(response.data);
+        },
+        error: function (response) {
+            localAlert("Error", "获取服务失败，请稍后重试。");
+            return;
+        }
+    });
+}
+
+//生成monitor dashboard展示页面
+function genarateMonitorDashboard(data) {
+
+    var innerHTML = "";
+    for (var i in data) {
+        var info = data[i];
+        console.log("monitorId: " + info.monitorId);
+        innerHTML += "<div class='blanksegmentation'></div>";
+        innerHTML += "<div class='panel panel-default'>";
+
+        //genarate panel header httpInfo
+        innerHTML += genarateHttpInfoDiv(info.httpInfo, info.monitorId);
+
+        //genarate panel body serviceInfos events
+        innerHTML += genarateServiceInfosTables(info.servicesInfo, info.eventsInfo, info.monitorId);
+
+        innerHTML += "</div>";
+    }
+
+    document.getElementById("body_div").innerHTML = innerHTML;
+}
+
+//HttpInfo panel header
+function genarateHttpInfoDiv(httpInfo, monitorId) {
+    console.log("httpInfo: " + httpInfo);
+    var innerHTML = "<div class='panel-heading'>";
+    innerHTML += genarateSpanText("address: " + httpInfo.address, 20);
+    innerHTML += genarateSpanText("port: " + httpInfo.port, 20);
+    innerHTML += genarateSpanText("ssl: " + httpInfo.ssl, 20);
+    innerHTML += "<a href=\"javascript:deleteBtnOnClicked(\'" + monitorId + "\')\"><span class='glyphicon glyphicon-trash' style='color: #FF0000;font-size:18px'></span></a>";
+    innerHTML += "</div>";
+    return innerHTML;
+}
+
+//serviceInfos Table events Table
+function genarateServiceInfosTables(serviceInfos, events, monitorId) {
+
+    var innerHTML = "<div class='panel-body'>";
+
+    //genarate serviceInfo table<th>
+    innerHTML += "<table class='table table-bordered mb30'>";
+    innerHTML += "<thead><tr><th style='width: 25%;'>serviceName</th><th style='width: 20%;'>serviceStatus</th><th style='width: 10%;'>system</th>";
+    innerHTML += "<th style='width: 15%;'>start</th><th style='width: 15%;'>stop</th><th style='width: 15%;'>restart</th></tr></thead><tbody>";
+
+    //genarate serviceInfo table<tr>
+    for (var i in serviceInfos) {
+        var service = serviceInfos[i];
+        innerHTML += "<tr>"
+        innerHTML += "<td>" + service.serviceName + "</td>";
+
+        //status == NORMAL status font turn green, start button unclickable, and the others potition, turn red stop button unclickable
+        if (serviceInfos[i].serviceStatus == "NORMAL") {
+            innerHTML += "<td style='color:#008000;font-weight:bold'>" + service.serviceStatus + "</td>";
+            innerHTML += "<td>" + service.system + "</td>";
+            innerHTML += "<td><button class='btn btn-success btn-rounded' onclick=\"actionBtnOnClicked('" + monitorId + "','" + service.serviceName + "', 'start')\">Start</button></td>";
+            innerHTML += "<td><button class='btn btn-danger btn-rounded' onclick=\"actionBtnOnClicked('" + monitorId + "','" + service.serviceName + "', 'stop')\">Stop</button></td>";
+            innerHTML += "<td><button class='btn btn-success btn-rounded' onclick=\"actionBtnOnClicked('" + monitorId + "','" + service.serviceName + "', 'restart')\">Restart</button></td>";
+        } else {
+            innerHTML += "<td style='color:#FF0000;font-weight:bold'>" + serviceInfos[i].serviceStatus + "</td>";
+            innerHTML += "<td>" + serviceInfos[i].system + "</td>";
+            innerHTML += "<td><button class='btn btn-success btn-rounded' onclick=\"actionBtnOnClicked('" + monitorId + "','" + service.serviceName + "', 'start')\">Start</button></td>";
+            innerHTML += "<td><button class='btn btn-danger btn-rounded' onclick=\"actionBtnOnClicked('" + monitorId + "','" + service.serviceName + "', 'stop')\">Stop</button></td>";
+            innerHTML += "<td><button class='btn btn-success btn-rounded' onclick=\"actionBtnOnClicked('" + monitorId + "','" + service.serviceName + "', 'restart')\">Restart</button></td>";
+        }
+        innerHTML += "</tr>";
+    }
+    innerHTML += "</tbody></table>";
+
+    //genarate events table<th>
+    innerHTML += "<table class='table table-bordered mb30'>";
+    innerHTML += "<thead><tr><th>collected_sec</th><th>service</th><th>type</th>";
+    innerHTML += "<th>message</th></tr></thead><tbody>";
+    for (var i in events) {
+        var event = events[i];
+        innerHTML += "<tr>"
+        innerHTML += "<td>" + event.collected_sec + "</td>";
+        innerHTML += "<td>" + event.service + "</td>";
+        innerHTML += "<td>" + event.type + "</td>";
+        innerHTML += "<td>" + event.message + "</td>";
+        innerHTML += "</tr>";
+    }
+    innerHTML += "</tbody></table>"
+
+    innerHTML += "</div>";
+    return innerHTML;
+}
+
+//生成data的json字符串
+function buildBody(monitorId, serviceName, actionType) {
+
+    var actionItem = new Object();
+    actionItem['hostId'] = monitorId;
+    actionItem['service'] = serviceName;
+    actionItem['action'] = actionType;
+
+    var actions = new Array();
+    actions.push(actionItem);
+
+    var body = new Object();
+    body['actions'] = actions;
+    return JSON.stringify(body);
+}
+
+//启停按钮的动作方法
+function actionBtnOnClicked(monitorId, serviceName, actionType) {
+
+    var body = buildBody(monitorId, serviceName, actionType);
+    console.log(body);
+
+    if (actionType == "delete") {
+        deleteBtnOnClicked(monitorId);
+        return;
+    }
+
+    $.ajax({
+        "url": "/monit/hosts/oneAction",
+        "type": 'POST',
+        "dataType": "json",
+        "data": {
+            hostId: monitorId,
+            service: serviceName,
+            action: actionType
+        },
+        success: function (resp) {
+            console.log(resp);
+            queryAllMonitorService();
+        },
+        error: function (e) {
+            localAlert("Error", "操作失败：" + e.data);
+            queryAllMonitorService();
+        }
+    });
+}
+
+//delete按钮的动作方法
+function deleteBtnOnClicked(monitorId) {
+    var url = "/monit/hosts/delete/" + monitorId;
+    console.log(url)
+    $.ajax({
+        "url": url,
+        "type": 'POST',
+        "dataType": "json",
+        success: function (data) {
+            queryAllMonitorService();
+        },
+        error: function (e) {
+            queryAllMonitorService();
+        }
+    });
+}
+
+function genarateSpanText(text, size) {
+    return "<span style='font-size:" + size + "px;margin-right:20px'>" + text + "</span>";
+}
\ No newline at end of file