ops / monitor-ui · Commits

Go to a project

Authored by fanzelei
Commit be3eeb22a3b5c72f5c7a0022fcbe5b1d812825ea 2 parents 4df8803d a334b9f1

Merge branch 'master' of http://git.yoho.cn/ops/monitor-ui

Inline Side-by-side
Showing 7 changed files with 196 additions and 54 deletions
... ... @@ -37,7 +37,7 @@ public class HttpUriContants {
public static final String JAVA_API_GET = "/javaApi/query";
public static final String JAVA_API_DEL = "/javaApi/del";
public static final String JAVA_API_SAVE = "/javaApi/save";
public static final String JAVA_API_STATUS = "/javaApiStatus/query";
}
... ...
package com.ui.model.req;
import lombok.Data;
import java.util.ArrayList;
import java.util.List;
/**
* Created by fruwei on 2016/6/21.
*/
@Data
public class JavaApiStatusListReq {
private ArrayList<JavaApiStatusReq> javaApiStatusReqList;
}
... ...
package com.ui.model.req;
import lombok.Data;
/**
* Created by fruwei on 2016/6/21.
*/
@Data
public class JavaApiStatusReq {
private Integer serviceId;
private Integer serviceType;
private Integer mObjectId;
}
... ...
package com.ui.ctrl;
import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import com.ui.contants.HttpUriContants;
import com.ui.http.HttpRestClient;
import com.ui.model.BaseResponse;
import com.ui.model.req.JavaApiInfoReq;
import com.ui.model.req.JavaApiStatusListReq;
import com.ui.model.req.JavaApiStatusReq;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import java.util.ArrayList;
import java.util.List;
/**
* Created by fruwei on 2016/6/17.
*/
... ... @@ -63,4 +71,22 @@ public class JavaAPICtrl {
}
@RequestMapping("/status")
@ResponseBody
public BaseResponse status(@RequestParam("list") String strList) {
log.info("status req : {}", strList);
BaseResponse rep;
try {
List<JavaApiStatusReq> req = JSON.parseArray(strList, JavaApiStatusReq.class);
rep = httpClient.defaultPost(HttpUriContants.JAVA_API_STATUS, req.toArray(), BaseResponse.class);
} catch (Exception e) {
rep = new BaseResponse(400);
rep.setMessage("list format error");
}
return rep;
}
}
... ...
... ... @@ -144,6 +144,11 @@
//隐藏正在加载
_hideLoading(jq);
//处理onAfterShow事件
if (opt.onAfterShow) {
opt.onAfterShow.call(jq);
}
}
}
... ... @@ -200,6 +205,11 @@
_createPage(jq);
//隐藏正在加载
_hideLoading(jq);
//处理onAfterShow事件
if (opt.onAfterShow) {
opt.onAfterShow.call(jq);
}
},
error : function() {
//隐藏正在加载
... ... @@ -505,7 +515,11 @@
* 加载之前执行，如果返回false，则不去远端调用
*
*/
onBeforeLoad : function() {}
onBeforeLoad : function() {},
/**
* 显示后执行
*/
onAfterShow:function(){}
};
$.fn.table.defaults = $.extend({}, $.fn.table.events, {
columnAutoWidth : false,//列是否自动宽度
... ...
... ... @@ -21,14 +21,14 @@
</div>
<div class="form-group">
<label class="col-sm-2 control-label"> <span style="color:red">*</span>类型：</label>
<label class="col-sm-2 control-label"> <span style="color:red">*</span>类别：</label>
<div class="col-sm-2">
<select id="serviceType" name="serviceType" class="form-control">
<select id="serviceType" name="serviceType" class="form-control">
</select>
</div>
<label class="col-sm-2 control-label"> <span style="color:red">*</span>请求类型：</label>
<label class="col-sm-2 control-label"> <span style="color:red">*</span>请求：</label>
<div class="col-sm-2">
<select id="apiReqMethod" name="apiReqMethod" class="form-control">
... ...
<%@page language="java" contentType="text/html;charset=utf-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<div id="breadcrumb">
<a href="#" title="Go to Home" class="tip-bottom"><i
class="icon-home"></i> Java服务</a> <a href="#" class="current">服务信息</a>
... ... @@ -23,11 +22,14 @@
</div>
<div class="input-group" style="float: left;">
<span class="input-group-addon">服务类型：</span>
<select id="searchApiType" name="searchApiType" class="form-control" placeholder=""/>
<select id="searchApiType" name="searchApiType" class="form-control" placeholder="">
<option value="0">ALL</option>
</select>
</div>
<div class="input-group" style="float: left;">
<span class="input-group-addon">请求类型：</span>
<select id="searchApiReqMethod" name="searchApiReqMethod" class="form-control">
<option value="2">ALL</option>
<option value="0">GET</option>
<option value="1">POST</option>
</select>
... ... @@ -53,21 +55,21 @@
</div>
</div>
<script>
var java_api_type=[];
var java_app={};
var java_api_type = [];
var java_app = {};
var table_data;
var refreshTypeSelected=function(){
$.each(java_api_type,function(idx,val){
var refreshTypeSelected = function () {
$.each(java_api_type, function (idx, val) {
var selObj = $("#searchApiType");
var value=val.value;
var text=val.text;
selObj.append("<option value='"+value+"'>"+text+"</option>");
var value = val.value;
var text = val.text;
selObj.append("<option value='" + value + "'>" + text + "</option>");
});
};
var getTypeName=function(typeId){
for(var i=0;i<java_api_type.length;i++){
if(java_api_type[i].value==typeId){
var getTypeName = function (typeId) {
for (var i = 0; i < java_api_type.length; i++) {
if (java_api_type[i].value == typeId) {
return java_api_type[i].text;
}
}
... ... @@ -76,7 +78,7 @@
};
var getJavaAppType=function(){
var getJavaAppType = function () {
$.ajax({
url: contextPath + "/type/queryJavaApiType",
type: 'get',
... ... @@ -85,10 +87,10 @@
$.toaster('获取java服务类型失败', '警告', 'warn');
return;
}
$.each(data.data,function(idx,val){
$.each(data.data, function (idx, val) {
java_api_type.push({
"value":val.typeId,
"text":val.typeName
"value": val.typeId,
"text": val.typeName
});
})
refreshTypeSelected();
... ... @@ -100,7 +102,7 @@
});
};
var getJavaApp=function(){
var getJavaApp = function () {
$.ajax({
url: contextPath + "/mobject/queryJavaApp",
type: 'get',
... ... @@ -110,11 +112,11 @@
return;
}
console.log(data.data);
$.each(data.data,function(idx,val){
if(java_app[""+val.moTypeId]==undefined) {
java_app[""+val.moTypeId] = [];
$.each(data.data, function (idx, val) {
if (java_app["" + val.moTypeId] == undefined) {
java_app["" + val.moTypeId] = [];
}
java_app[""+val.moTypeId].push(val);
java_app["" + val.moTypeId].push(val);
})
console.log(java_app);
},
... ... @@ -126,10 +128,14 @@
};
var createJavaAppDiv=function(apps){
var rel=$("<div>");
$.each(apps,function(idx,val){
var span=$("<span class='btn btn-primary btn-sm tag_javaapp' >").html(val.moHostIp);
var createJavaAppDiv = function (apps, serviceId,toggle) {
var rel = $("<div>");
$.each(apps, function (idx, val) {
var span;
if(toggle==1)
span = $("<span class='btn btn-success btn-xs tag_javaapp' >").attr("id", "span_" + serviceId + "_" + val.moId).html(val.moHostIp);
else
span = $("<span class='btn btn-inverse btn-xs tag_javaapp' >").attr("id", "span_no_" + serviceId + "_" + val.moId).html(val.moHostIp);
rel.append(span);
});
... ... @@ -137,24 +143,81 @@
}
var refreshJavaAppStatus=function(){
var setStatus = function (statusObj) {
var id = "span_" + statusObj.serviceId + "_" + statusObj.mObjectId;
if (statusObj.status == 0) {
if ($("#" + id).hasClass('btn-success')) {
$("#" + id).removeClass('btn-success');
$("#" + id).addClass('btn-danger');
}
}
else {
if ($("#" + id).hasClass('btn-danger')) {
$("#" + id).removeClass('btn-danger');
$("#" + id).addClass('btn-success');
}
}
}
var getJavaAppStatus = function () {
console.log("refresh status");
if (table_data == null || table_data.rows == undefined)
return;
var reqList = [];
$.each(table_data.rows, function (idx, val) {
if(val.apiToggle==0) //关闭了
return;
var apps = java_app["" + val.serviceType];
var serviceId = val.serviceId;
$.each(apps, function (idx, val) {
reqList.push({
serviceId: serviceId,
mObjectId: val.moId
});
});
});
$.ajax({
url: contextPath + "/javaApi/status?list=" + JSON.stringify(reqList),
type: 'get',
success: function (data) {
// console.log(data);
if (!data || data.code != 200) {
$.toaster('获取java服务状态失败', '警告', 'warn');
return;
}
$.each(data.data, function (idx, val) {
setStatus(val);
})
},
error: function (data) {
$.toaster('获取java服务状态失败', '警告', 'warn');
}
});
};
var refreshJavaAppStatus = function () {
console.log("refreshJavaAppStatus");
if(table_data==null||table_data.rows==undefined)
if (table_data == null || table_data.rows == undefined)
return;
$.each(table_data.rows,function(idx,val){
var apps=java_app[""+val.serviceType];
$.each(table_data.rows, function (idx, val) {
var apps = java_app["" + val.serviceType];
var appDiv=createJavaAppDiv(apps);
$("#status_"+val.serviceId).html("");
$("#status_"+val.serviceId).append(appDiv);
var appDiv = createJavaAppDiv(apps, val.serviceId,val.apiToggle);
$("#status_" + val.serviceId).html("");
$("#status_" + val.serviceId).append(appDiv);
getJavaAppStatus();
});
};
function timer(){
refreshJavaAppStatus();
setTimeout("timer()",5000);
function timer() {
getJavaAppStatus();
setTimeout("timer()", 50000);
}
timer();
... ... @@ -175,9 +238,12 @@
loadFilter: function (data) {
return defaultLoadFilter(data);
},
onLoadSuccess:function(data){
onLoadSuccess: function (data) {
console.log(data);
table_data=data;
table_data = data;
},
onAfterShow: function () {
refreshJavaAppStatus();
},
columns: [{
title: "ID",
... ... @@ -194,13 +260,13 @@
}, {
title: "服务类型",
field: "serviceType",
formatter:function(value,rowData,rowIndex) {
formatter: function (value, rowData, rowIndex) {
return getTypeName(rowData.serviceType);
},
width: "5%"
width: "8%"
}, {
title: "请求类型",
title: "请求",
field: "apiMethod",
formatter: function (value, rowData, rowIndex) {
if (rowData.apiReqMethod == 0)
... ... @@ -212,24 +278,30 @@
}, {
title: "告警阈值",
field: "apiTrigger",
width: "3%"
field: "apiWarnTrigger",
width: "4%"
}, {
title: "是否启用",
field: "apiIsUse",
width: "4%"
title: "启用",
field: "apiToggle",
formatter: function (value, rowData, rowIndex) {
if (rowData.apiToggle == 0)
return "NO";
else
return "YES";
},
width: "3%"
}, {
title: "运行状态",
field: "apiStatus",
formatter: function (value, rowData, rowIndex) {
var div = $("<div >").attr('id','status_'+rowData.serviceId);
var div = $("<div >").attr('id', 'status_' + rowData.serviceId);
return div;
},
width: "40%"
},{
}, {
title: "操作",
field: "op",
formatter: function (value, rowData, rowIndex) {
... ... @@ -281,7 +353,7 @@
}]
});
refreshJavaAppStatus();
$("#addInfoBtn").click(function () {
editJavaInfo(null);
});
... ... @@ -359,7 +431,7 @@
dataType: "json",
sync: false,
data: {
'serviceId':serviceId,
'serviceId': serviceId,
'serviceType': $("#javaInfoForm #serviceType").val(),
'apiName': $("#javaInfoForm #apiName").val(),
'apiUrl': $("#javaInfoForm #apiUrl").val(),
... ...