ops / monitor-ui · Commits

Go to a project

Authored by FengRuwei
Commit 7452ca850ce90a9d8215d0962952cdb3f52f21b0 1 parent 3f86a6bb

添加java api首页dashboard

Inline Side-by-side
Showing 6 changed files with 100 additions and 43 deletions
... ... @@ -47,7 +47,10 @@ public class HttpUriContants {
public static final String JAVA_API_SAVE = "/javaApi/save";
public static final String JAVA_API_STATUS = "/javaApiStatus/query";
public static final String JAVA_API_HIS = "/javaApiStatus/queryhis";
public static final String JAVA_API_STATUS_ALL = "/javaApiStatus/queryAll";
public static final String JAVA_API_DETAILS = "/javaApi/apiDetails";
/***
* ZK监控信息查询
****/
... ...
... ... @@ -125,4 +125,23 @@ public class JavaAPICtrl {
}
/**
* 获取所有服务状态
* @return
*/
@RequestMapping("/allStatus")
@ResponseBody
public BaseResponse allStatus() {
log.info("get allStatus");
BaseResponse rep;
try {
rep = httpClient.defaultGet(HttpUriContants.JAVA_API_STATUS_ALL, BaseResponse.class);
} catch (Exception e) {
rep = new BaseResponse(400);
rep.setMessage("list format error");
}
return rep;
}
}
... ...
... ... @@ -27,4 +27,8 @@ a.api_info{
div.api_info_container{
padding-left: 5px;
}
.btn_java_api {
margin-right: 5px;
}
\ No newline at end of file
... ...
... ... @@ -13,6 +13,10 @@
page_type="";
if(page_url==null)
page_url="";
String api_type = request.getParameter("api_type");
if (api_type == null)
api_type = "0";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
... ... @@ -98,9 +102,11 @@
"javaApi": 'jsp/javaapi/javaApi.jsp',
"zkInfo": '/jsp/zkInfo/zkInfoList.jsp',
"redisInfo": '/jsp/redisInfo/redisInfoList.jsp'
}
};
var page_type = "<%=page_type %>";
var page_url = "<%=page_url %>";
var api_type = "<%=api_type %>";
$(function () {
loadPage();
});
... ...
... ... @@ -34,20 +34,6 @@
<script type="text/javascript">
var javaApiDatas = {
"gateway": {},
"order": {},
"promotion": {},
"product": {},
"message": {},
"sns": {},
"user": {},
"resources": {},
"activity": {},
"union": {},
"browser": {},
"wechat": {}
};
var getJavaAppType = function () {
$.ajax({
... ... @@ -75,18 +61,32 @@
var api_info_item_panel = $(' <div class="panel panel-default">');
var api_info_item_panel_title = $('<div class="panel-heading">' + val.typeName + '</div>');
var api_info_item_panel_body = $('<div class="panel-body">');
api_info_item_panel_body.append('<h3><span class="label label-default">AWS</span> <span class="label label-default">QCloud</span> </h3>')
api_info_item_panel_body.append('<h5 >更新时间:</h5>');
api_info_item_panel_body.append('<button class="btn_java_api btn btn-lg btn-default" id="btn_1_' + val.typeId + '">AWS &nbsp;<span class="badge"></span></button>');
api_info_item_panel_body.append('<button class="btn_java_api btn btn-lg btn-default" id="btn_2_' + val.typeId + '">QCloud &nbsp;<span class="badge"></span></button>');
api_info_item_panel_body.append('<button class="btn_java_api btn btn-lg btn-default" id="btn_3_' + val.typeId + '">其他 &nbsp;<span class="badge"></span></button>');
api_info_item_panel.append(api_info_item_panel_title)
.append(api_info_item_panel_body);
api_info_item.append(api_info_item_panel);
div_dash.append(api_info_item);
});
$(".btn_java_api").on("click", function () {
console.info(this);
var url = contextPath + "?page_url=jsp/javaapi/javaApiList.jsp&page_type=javaApi";
var api_type = $(this).attr("id").split("_")[2];
url += "&api_type=" + api_type;
window.location.href = url;
});
timer();
};
var refreshDashBoard=function(){
var refreshDashBoard = function () {
$.ajax({
url: contextPath + "/javaapi",
url: contextPath + "/javaApi/allStatus",
type: 'get',
success: function (data) {
if (!data || data.code != 200) {
... ... @@ -94,28 +94,40 @@
return;
}
console.info(data.data);
initDashBoard(data.data);
$.each(data.data, function (idx, val) {
console.log($("#btn_" + val.cloudType + "_" + val.serviceType));
var btn = $("#btn_" + val.cloudType + "_" + val.serviceType);
if (val.errNum > 0) {
$(btn.children("span")[0]).html(val.errNum)
btn.removeClass("btn-success");
btn.addClass("btn-danger");
} else {
$(btn.children("span")[0]).html()
btn.removeClass("btn-danger");
btn.addClass("btn-success");
}
});
},
error: function (data) {
$.toaster('获取java服务类型失败', '警告', 'warning');
}
});
};
function timer() {
refreshDashBoard();
setTimeout("timer()", 30000);
}
timer();
};
$(function () {
getJavaAppType();
});
... ...
<%@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>
... ... @@ -37,7 +38,8 @@
</div>
<div class="input-group" style="float: left;">
<span class="input-group-addon">url：</span>
<input type="text" id="searchApiUrl" name="searchApiUrl" class="form-control" placeholder=""/>
<input type="text" id="searchApiUrl" name="searchApiUrl" class="form-control"
placeholder=""/>
</div>
<button id="searchJavaInfoBtn" class="btn btn-default">搜索</button>
</div>
... ... @@ -57,13 +59,17 @@
var java_app = {};
var table_data;
var refreshTypeSelected = function () {
var selObj = $("#searchApiType");
$.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>");
});
if (api_type != undefined && api_type != 0) {
selObj.val(api_type);
}
};
var getTypeName = function (typeId) {
for (var i = 0; i < java_api_type.length; i++) {
... ... @@ -254,8 +260,7 @@
getJavaAppType();
getJavaApp();
//加载表格
$("#infoTable").table({
var tableParam = {
columnAutoWidth: false,
url: contextPath + "/javaApi/query",
striped: true,
... ... @@ -395,29 +400,37 @@
},
width: "10%"
}]
});
};
var params = {};
if (api_type != undefined && api_type != 0) {
tableParam.queryParams = {
'serviceType': api_type
}
}
//加载表格
$("#infoTable").table(tableParam);
$("#addInfoBtn").click(function () {
editJavaInfo(null);
});
});
//点击查询按钮
$("#searchJavaInfoBtn").click(function () {
var name = $("#searchApiName").val();
var url = $("#searchApiUrl").val();
var type = $("#searchApiType").val();
var method = $("#searchApiReqMethod").val();
$("#infoTable").table("load", {
'apiName': name,
'apiUrl': url,
'serviceType': type,
'apiReqMethod': method
//点击查询按钮
$("#searchJavaInfoBtn").click(function () {
var name = $("#searchApiName").val();
var url = $("#searchApiUrl").val();
var type = $("#searchApiType").val();
var method = $("#searchApiReqMethod").val();
$("#infoTable").table("load", {
'apiName': name,
'apiUrl': url,
'serviceType': type,
'apiReqMethod': method
});
});
});
//打开新增或修改页面
function editJavaInfo(rowData) {
console.log(rowData);
... ...