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 89 additions and 32 deletions
@@ -47,7 +47,10 @@ public class HttpUriContants { @@ -47,7 +47,10 @@ public class HttpUriContants {
47 public static final String JAVA_API_SAVE = "/javaApi/save"; 47 public static final String JAVA_API_SAVE = "/javaApi/save";
48 public static final String JAVA_API_STATUS = "/javaApiStatus/query"; 48 public static final String JAVA_API_STATUS = "/javaApiStatus/query";
49 public static final String JAVA_API_HIS = "/javaApiStatus/queryhis"; 49 public static final String JAVA_API_HIS = "/javaApiStatus/queryhis";
  50 + public static final String JAVA_API_STATUS_ALL = "/javaApiStatus/queryAll";
  51 +
50 public static final String JAVA_API_DETAILS = "/javaApi/apiDetails"; 52 public static final String JAVA_API_DETAILS = "/javaApi/apiDetails";
  53 +
51 /*** 54 /***
52 * ZK监控信息查询 55 * ZK监控信息查询
53 ****/ 56 ****/
@@ -125,4 +125,23 @@ public class JavaAPICtrl { @@ -125,4 +125,23 @@ public class JavaAPICtrl {
125 } 125 }
126 126
127 127
  128 + /**
  129 + * 获取所有服务状态
  130 + * @return
  131 + */
  132 + @RequestMapping("/allStatus")
  133 + @ResponseBody
  134 + public BaseResponse allStatus() {
  135 + log.info("get allStatus");
  136 + BaseResponse rep;
  137 + try {
  138 + rep = httpClient.defaultGet(HttpUriContants.JAVA_API_STATUS_ALL, BaseResponse.class);
  139 + } catch (Exception e) {
  140 + rep = new BaseResponse(400);
  141 + rep.setMessage("list format error");
  142 +
  143 + }
  144 + return rep;
  145 + }
  146 +
128 } 147 }
@@ -28,3 +28,7 @@ a.api_info{ @@ -28,3 +28,7 @@ a.api_info{
28 div.api_info_container{ 28 div.api_info_container{
29 padding-left: 5px; 29 padding-left: 5px;
30 } 30 }
  31 +
  32 +.btn_java_api {
  33 + margin-right: 5px;
  34 +}
@@ -13,6 +13,10 @@ @@ -13,6 +13,10 @@
13 page_type=""; 13 page_type="";
14 if(page_url==null) 14 if(page_url==null)
15 page_url=""; 15 page_url="";
  16 +
  17 + String api_type = request.getParameter("api_type");
  18 + if (api_type == null)
  19 + api_type = "0";
16 %> 20 %>
17 21
18 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 22 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
@@ -98,9 +102,11 @@ @@ -98,9 +102,11 @@
98 "javaApi": 'jsp/javaapi/javaApi.jsp', 102 "javaApi": 'jsp/javaapi/javaApi.jsp',
99 "zkInfo": '/jsp/zkInfo/zkInfoList.jsp', 103 "zkInfo": '/jsp/zkInfo/zkInfoList.jsp',
100 "redisInfo": '/jsp/redisInfo/redisInfoList.jsp' 104 "redisInfo": '/jsp/redisInfo/redisInfoList.jsp'
101 - } 105 + };
102 var page_type = "<%=page_type %>"; 106 var page_type = "<%=page_type %>";
103 var page_url = "<%=page_url %>"; 107 var page_url = "<%=page_url %>";
  108 + var api_type = "<%=api_type %>";
  109 +
104 $(function () { 110 $(function () {
105 loadPage(); 111 loadPage();
106 }); 112 });
@@ -34,20 +34,6 @@ @@ -34,20 +34,6 @@
34 34
35 35
36 <script type="text/javascript"> 36 <script type="text/javascript">
37 - var javaApiDatas = {  
38 - "gateway": {},  
39 - "order": {},  
40 - "promotion": {},  
41 - "product": {},  
42 - "message": {},  
43 - "sns": {},  
44 - "user": {},  
45 - "resources": {},  
46 - "activity": {},  
47 - "union": {},  
48 - "browser": {},  
49 - "wechat": {}  
50 - };  
51 37
52 var getJavaAppType = function () { 38 var getJavaAppType = function () {
53 $.ajax({ 39 $.ajax({
@@ -75,18 +61,32 @@ @@ -75,18 +61,32 @@
75 var api_info_item_panel = $(' <div class="panel panel-default">'); 61 var api_info_item_panel = $(' <div class="panel panel-default">');
76 var api_info_item_panel_title = $('<div class="panel-heading">' + val.typeName + '</div>'); 62 var api_info_item_panel_title = $('<div class="panel-heading">' + val.typeName + '</div>');
77 var api_info_item_panel_body = $('<div class="panel-body">'); 63 var api_info_item_panel_body = $('<div class="panel-body">');
78 - api_info_item_panel_body.append('<h3><span class="label label-default">AWS</span> <span class="label label-default">QCloud</span> </h3>') 64 + api_info_item_panel_body.append('<h5 >更新时间:</h5>');
  65 +
  66 + 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>');
  67 + 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>');
  68 + 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>');
79 api_info_item_panel.append(api_info_item_panel_title) 69 api_info_item_panel.append(api_info_item_panel_title)
80 .append(api_info_item_panel_body); 70 .append(api_info_item_panel_body);
81 api_info_item.append(api_info_item_panel); 71 api_info_item.append(api_info_item_panel);
82 div_dash.append(api_info_item); 72 div_dash.append(api_info_item);
83 }); 73 });
84 74
  75 + $(".btn_java_api").on("click", function () {
  76 + console.info(this);
  77 + var url = contextPath + "?page_url=jsp/javaapi/javaApiList.jsp&page_type=javaApi";
  78 + var api_type = $(this).attr("id").split("_")[2];
  79 + url += "&api_type=" + api_type;
  80 + window.location.href = url;
  81 + });
  82 +
  83 + timer();
  84 +
85 }; 85 };
86 86
87 - var refreshDashBoard=function(){ 87 + var refreshDashBoard = function () {
88 $.ajax({ 88 $.ajax({
89 - url: contextPath + "/javaapi", 89 + url: contextPath + "/javaApi/allStatus",
90 type: 'get', 90 type: 'get',
91 success: function (data) { 91 success: function (data) {
92 if (!data || data.code != 200) { 92 if (!data || data.code != 200) {
@@ -94,28 +94,40 @@ @@ -94,28 +94,40 @@
94 return; 94 return;
95 } 95 }
96 console.info(data.data); 96 console.info(data.data);
97 - initDashBoard(data.data); 97 +
  98 + $.each(data.data, function (idx, val) {
  99 + console.log($("#btn_" + val.cloudType + "_" + val.serviceType));
  100 + var btn = $("#btn_" + val.cloudType + "_" + val.serviceType);
  101 + if (val.errNum > 0) {
  102 + $(btn.children("span")[0]).html(val.errNum)
  103 + btn.removeClass("btn-success");
  104 + btn.addClass("btn-danger");
  105 + } else {
  106 + $(btn.children("span")[0]).html()
  107 + btn.removeClass("btn-danger");
  108 + btn.addClass("btn-success");
  109 + }
  110 + });
  111 +
98 }, 112 },
99 error: function (data) { 113 error: function (data) {
100 $.toaster('获取java服务类型失败', '警告', 'warning'); 114 $.toaster('获取java服务类型失败', '警告', 'warning');
101 -  
102 } 115 }
103 -  
104 }); 116 });
105 117
106 }; 118 };
107 119
108 120
109 -  
110 function timer() { 121 function timer() {
111 refreshDashBoard(); 122 refreshDashBoard();
112 setTimeout("timer()", 30000); 123 setTimeout("timer()", 30000);
113 - }  
114 - timer(); 124 + };
  125 +
115 126
116 $(function () { 127 $(function () {
117 getJavaAppType(); 128 getJavaAppType();
118 129
  130 +
119 }); 131 });
120 132
121 133
1 <%@page language="java" contentType="text/html;charset=utf-8" %> 1 <%@page language="java" contentType="text/html;charset=utf-8" %>
2 <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 2 <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
  3 +
3 <div id="breadcrumb"> 4 <div id="breadcrumb">
4 <a href="#" title="Go to Home" class="tip-bottom"><i 5 <a href="#" title="Go to Home" class="tip-bottom"><i
5 class="icon-home"></i> Java服务</a> <a href="#" class="current">服务信息</a> 6 class="icon-home"></i> Java服务</a> <a href="#" class="current">服务信息</a>
@@ -37,7 +38,8 @@ @@ -37,7 +38,8 @@
37 </div> 38 </div>
38 <div class="input-group" style="float: left;"> 39 <div class="input-group" style="float: left;">
39 <span class="input-group-addon">url：</span> 40 <span class="input-group-addon">url：</span>
40 - <input type="text" id="searchApiUrl" name="searchApiUrl" class="form-control" placeholder=""/> 41 + <input type="text" id="searchApiUrl" name="searchApiUrl" class="form-control"
  42 + placeholder=""/>
41 </div> 43 </div>
42 <button id="searchJavaInfoBtn" class="btn btn-default">搜索</button> 44 <button id="searchJavaInfoBtn" class="btn btn-default">搜索</button>
43 </div> 45 </div>
@@ -57,13 +59,17 @@ @@ -57,13 +59,17 @@
57 var java_app = {}; 59 var java_app = {};
58 var table_data; 60 var table_data;
59 var refreshTypeSelected = function () { 61 var refreshTypeSelected = function () {
60 - $.each(java_api_type, function (idx, val) {  
61 var selObj = $("#searchApiType"); 62 var selObj = $("#searchApiType");
  63 + $.each(java_api_type, function (idx, val) {
62 var value = val.value; 64 var value = val.value;
63 var text = val.text; 65 var text = val.text;
64 selObj.append("<option value='" + value + "'>" + text + "</option>"); 66 selObj.append("<option value='" + value + "'>" + text + "</option>");
65 }); 67 });
66 68
  69 + if (api_type != undefined && api_type != 0) {
  70 + selObj.val(api_type);
  71 + }
  72 +
67 }; 73 };
68 var getTypeName = function (typeId) { 74 var getTypeName = function (typeId) {
69 for (var i = 0; i < java_api_type.length; i++) { 75 for (var i = 0; i < java_api_type.length; i++) {
@@ -254,8 +260,7 @@ @@ -254,8 +260,7 @@
254 getJavaAppType(); 260 getJavaAppType();
255 getJavaApp(); 261 getJavaApp();
256 262
257 - //加载表格  
258 - $("#infoTable").table({ 263 + var tableParam = {
259 columnAutoWidth: false, 264 columnAutoWidth: false,
260 url: contextPath + "/javaApi/query", 265 url: contextPath + "/javaApi/query",
261 striped: true, 266 striped: true,
@@ -395,15 +400,21 @@ @@ -395,15 +400,21 @@
395 }, 400 },
396 width: "10%" 401 width: "10%"
397 }] 402 }]
398 - }); 403 + };
  404 + var params = {};
  405 + if (api_type != undefined && api_type != 0) {
  406 + tableParam.queryParams = {
  407 + 'serviceType': api_type
  408 + }
  409 + }
  410 +
  411 + //加载表格
  412 + $("#infoTable").table(tableParam);
399 413
400 414
401 $("#addInfoBtn").click(function () { 415 $("#addInfoBtn").click(function () {
402 editJavaInfo(null); 416 editJavaInfo(null);
403 }); 417 });
404 - });  
405 -  
406 -  
407 //点击查询按钮 418 //点击查询按钮
408 $("#searchJavaInfoBtn").click(function () { 419 $("#searchJavaInfoBtn").click(function () {
409 var name = $("#searchApiName").val(); 420 var name = $("#searchApiName").val();
@@ -417,6 +428,8 @@ @@ -417,6 +428,8 @@
417 'apiReqMethod': method 428 'apiReqMethod': method
418 }); 429 });
419 }); 430 });
  431 + });
  432 +
420 433
421 //打开新增或修改页面 434 //打开新增或修改页面
422 function editJavaInfo(rowData) { 435 function editJavaInfo(rowData) {