ops / monitor-ui · Commits

Go to a project

Authored by FengRuwei
Commit aa5ce1e47280e3f7862cbd7d16d0365c706e5b0b 1 parent 2d283414

可编辑下拉框&获取javaapp详细信息

Inline Side-by-side
Showing 7 changed files with 184 additions and 33 deletions
  1 +package com.ui.model.req;
  2 +
  3 +import com.ui.model.rep.PageBean;
  4 +import lombok.Data;
  5 +
  6 +/**
  7 + * Created by fruwei on 2016/6/23.
  8 + */
  9 +@Data
  10 +public class JavaApiHisReq extends PageRequest {
  11 + int apiId;
  12 + int mobjId;
  13 + String startTime="";
  14 + String endTime="";
  15 +}
@@ -5,6 +5,7 @@ import com.alibaba.fastjson.JSONObject; @@ -5,6 +5,7 @@ import com.alibaba.fastjson.JSONObject;
5 import com.ui.contants.HttpUriContants; 5 import com.ui.contants.HttpUriContants;
6 import com.ui.http.HttpRestClient; 6 import com.ui.http.HttpRestClient;
7 import com.ui.model.BaseResponse; 7 import com.ui.model.BaseResponse;
  8 +import com.ui.model.req.JavaApiHisReq;
8 import com.ui.model.req.JavaApiInfoReq; 9 import com.ui.model.req.JavaApiInfoReq;
9 import com.ui.model.req.JavaApiStatusListReq; 10 import com.ui.model.req.JavaApiStatusListReq;
10 import com.ui.model.req.JavaApiStatusReq; 11 import com.ui.model.req.JavaApiStatusReq;
@@ -92,18 +93,15 @@ public class JavaAPICtrl { @@ -92,18 +93,15 @@ public class JavaAPICtrl {
92 93
93 @RequestMapping("/history") 94 @RequestMapping("/history")
94 @ResponseBody 95 @ResponseBody
95 - public BaseResponse getHistory(@RequestParam(required = false, defaultValue = "0") int api_id,  
96 - @RequestParam(required = false, defaultValue = "0") int mobj_id,  
97 - @RequestParam(required = false, defaultValue = "0") long start_time,  
98 - @RequestParam(required = false, defaultValue = "0") long end_time,  
99 - @RequestParam(required = false, defaultValue = "0") int page) { 96 + public BaseResponse getHistory(JavaApiHisReq req) {
100 97
101 Map<String, String> param = new HashMap<String, String>(); 98 Map<String, String> param = new HashMap<String, String>();
102 - param.put("api_id", "" + api_id);  
103 - param.put("mobj_id", "" + mobj_id);  
104 - param.put("start_time", "" + start_time);  
105 - param.put("end_time", "" + end_time);  
106 - param.put("page", "" + page); 99 + param.put("api_id", "" + req.getApiId());
  100 + param.put("mobj_id", "" + req.getMobjId());
  101 + param.put("start_time", "" + req.getStartTime());
  102 + param.put("end_time", "" + req.getEndTime());
  103 + param.put("page", "" + (req.getCurrentPage() - 1));
  104 + param.put("pageSize", "" + req.getPageSize());
107 105
108 BaseResponse rep; 106 BaseResponse rep;
109 try { 107 try {
@@ -58,7 +58,6 @@ public class MObjectInfoCtrl { @@ -58,7 +58,6 @@ public class MObjectInfoCtrl {
58 public BaseResponse queryMHostInfo(MObjectHostInfoReq request) { 58 public BaseResponse queryMHostInfo(MObjectHostInfoReq request) {
59 59
60 BaseResponse response = httpRestClient.defaultPost("/mobject/queryHost", request, BaseResponse.class); 60 BaseResponse response = httpRestClient.defaultPost("/mobject/queryHost", request, BaseResponse.class);
61 -  
62 return response; 61 return response;
63 } 62 }
64 63
@@ -66,7 +65,13 @@ public class MObjectInfoCtrl { @@ -66,7 +65,13 @@ public class MObjectInfoCtrl {
66 public BaseResponse queryMHostInfo() { 65 public BaseResponse queryMHostInfo() {
67 66
68 BaseResponse response = httpRestClient.defaultGet("/mobject/javaapi", BaseResponse.class); 67 BaseResponse response = httpRestClient.defaultGet("/mobject/javaapi", BaseResponse.class);
  68 + return response;
  69 + }
  70 +
  71 + @RequestMapping(value = "/queryMobjById")
  72 + public BaseResponse queryMInfoByType(@RequestParam int typeId) {
69 73
  74 + BaseResponse response = httpRestClient.defaultGet("/mobject/mobjById?typeId=" + typeId, BaseResponse.class);
70 return response; 75 return response;
71 } 76 }
72 77
  1 +/**
  2 + * jQuery Editable Select
  3 + * by Indri Muska <indrimuska@gmail.com>
  4 + *
  5 + * Source on GitHub @ https://github.com/indrimuska/jquery-editable-select
  6 + *
  7 + * File: jquery.editable-select.min.css
  8 + * Minifier: http://www.cssminifier.com/
  9 + */
  10 +
  11 +input.es-input {
  12 + padding-right: 20px !important;
  13 + background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAICAYAAADJEc7MAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAG2YAABzjgAA4DIAAIM2AAB5CAAAxgwAADT6AAAgbL5TJ5gAAABGSURBVHjaYvz//z8DOYCJgUzA0tnZidPK8vJyRpw24pLEpwnuVHRFhDQxMDAwMPz//x+OOzo6/iPz8WFGuocqAAAA//8DAD/sORHYg7kaAAAAAElFTkSuQmCC) right center no-repeat
  14 +}
  15 +
  16 +input.es-input:focus {
  17 + -webkit-border-bottom-left-radius: 0;
  18 + -moz-border-radius-bottomleft: 0;
  19 + border-bottom-left-radius: 0;
  20 + -webkit-border-bottom-right-radius: 0;
  21 + -moz-border-radius-bottomright: 0;
  22 + border-bottom-right-radius: 0
  23 +}
  24 +
  25 +.es-list {
  26 + display: block;
  27 + position: absolute;
  28 + padding: 0;
  29 + margin: 0;
  30 + border: 1px solid #d1d1d1;
  31 + display: none;
  32 + z-index: 1000;
  33 + background: #fff;
  34 + max-height: 160px;
  35 + overflow-y: auto;
  36 + -moz-box-shadow: 0 2px 3px #ccc;
  37 + -webkit-box-shadow: 0 2px 3px #ccc;
  38 + box-shadow: 0 2px 3px #ccc
  39 +}
  40 +
  41 +.es-list li {
  42 + display: block;
  43 + padding: 5px 10px;
  44 + margin: 0
  45 +}
  46 +
  47 +.es-list li.selected {
  48 + /*background: #f3f3f3*/
  49 +}
  1 +(function(c){c.extend(c.expr[":"],{nic:function(a,c,d,b){return!(0<=(a.textContent||a.innerText||"").toLowerCase().indexOf((d[3]||"").toLowerCase()))}});c.fn.editableSelect=function(a){var g=this.clone(),d=c('<input type="text">'),b=c('<ul class="es-list">');a=c.extend({},{filter:!0,effect:"default",duration:"fast",onCreate:null,onShow:null,onHide:null,onSelect:null},a);switch(a.effects){case "default":case "fade":case "slide":break;default:a.effects="default"}isNaN(a.duration)&&"fast"==a.duration&&
  2 +"slow"==a.duration&&(a.duration="fast");this.replaceWith(d);({init:function(){var f=this;f.copyAttributes(g,d);d.addClass("es-input");c(document.body).append(b);g.find("option").each(function(){var a=c("<li>");a.html(c(this).text());f.copyAttributes(this,a);b.append(a);c(this).attr("selected")&&d.val(c(this).text())});d.on("focus input click",f.show);c(document).click(function(a){c(a.target).is(d)||c(a.target).is(b)||f.hide()});f.initializeList();f.initializeEvents();a.onCreate&&a.onCreate.call(this,
  3 +d)},initializeList:function(){var a=this;b.find("li").each(function(){c(this).on("mousemove",function(){b.find(".selected").removeClass("selected");c(this).addClass("selected")});c(this).click(function(){a.setField.call(this,a)})});b.mouseenter(function(){b.find("li.selected").removeClass("selected")})},initializeEvents:function(){var a=this;d.bind("input keydown",function(c){switch(c.keyCode){case 40:a.show();c=b.find("li:visible");var e=c.filter("li.selected");b.find(".selected").removeClass("selected");
  4 +e=c.eq(0<e.size()?c.index(e)+1:0);e=(0<e.size()?e:b.find("li:visible:first")).addClass("selected");a.scroll(e,!0);break;case 38:a.show();c=b.find("li:visible");e=c.filter("li.selected");b.find("li.selected").removeClass("selected");e=c.eq(0<e.size()?c.index(e)-1:-1);(0<e.size()?e:b.find("li:visible:last")).addClass("selected");a.scroll(e,!1);break;case 13:b.is(":visible")&&(a.setField.call(b.find("li.selected"),a),c.preventDefault());case 9:case 27:a.hide();break;default:a.show()}})},show:function(){b.find("li").show();
  5 +b.css({top:d.offset().top+d.outerHeight()-1,left:d.offset().left,width:d.innerWidth()});if((a.filter?b.find("li:nic("+d.val()+")").hide().size():0)==b.find("li").size())b.hide();else switch(a.effects){case "fade":b.fadeIn(a.duration);break;case "slide":b.slideDown(a.duration);break;default:b.show(a.duration)}a.onShow&&a.onShow.call(this,d)},hide:function(){switch(a.effects){case "fade":b.fadeOut(a.duration);break;case "slide":b.slideUp(a.duration);break;default:b.hide(a.duration)}a.onHide&&a.onHide.call(this,
  6 +d)},scroll:function(a,d){var e=0,h=b.find("li:visible").index(a);b.find("li:visible").each(function(a,b){a<h&&(e+=c(b).outerHeight())});if(e+a.outerHeight()>=b.scrollTop()+b.outerHeight()||e<=b.scrollTop())d?b.scrollTop(e+a.outerHeight()-b.outerHeight()):b.scrollTop(e)},copyAttributes:function(a,b){var e=c(a)[0].attributes,d;for(d in e)c(b).attr(e[d].nodeName,e[d].nodeValue)},setField:function(b){if(!c(this).is("li:visible"))return!1;d.val(c(this).text());b.hide();a.onSelect&&a.onSelect.call(d,c(this))}}).init();
  7 +return d}})(jQuery);
@@ -27,7 +27,7 @@ @@ -27,7 +27,7 @@
27 </select> 27 </select>
28 </div> 28 </div>
29 <div class="input-group" style="float: left;"> 29 <div class="input-group" style="float: left;">
30 - <span class="input-g roup-addon">请求类型：</span> 30 + <span class="input-group-addon">请求类型：</span>
31 <select id="searchApiReqMethod" name="searchApiReqMethod" class="form-control"> 31 <select id="searchApiReqMethod" name="searchApiReqMethod" class="form-control">
32 <option value="2">ALL</option> 32 <option value="2">ALL</option>
33 <option value="0">GET</option> 33 <option value="0">GET</option>
@@ -43,9 +43,6 @@ @@ -43,9 +43,6 @@
43 <button id="addInfoBtn" class="btn btn-primary" style="margin-top: 12px;margin-left: 100px;"> 43 <button id="addInfoBtn" class="btn btn-primary" style="margin-top: 12px;margin-left: 100px;">
44 新增 44 新增
45 </button> 45 </button>
46 - <button id="modeoBtn" class="btn btn-primary" style="margin-top: 12px;margin-left: 100px;">  
47 - 编辑模式  
48 - </button>  
49 </div> 46 </div>
50 </div> 47 </div>
51 <div id="infoTable"> 48 <div id="infoTable">
@@ -347,7 +344,8 @@ @@ -347,7 +344,8 @@
347 var div = $("<div>"); 344 var div = $("<div>");
348 var hisBtn = $("<button>").addClass("btn btn-xs btn-success").html("历史").appendTo(div); 345 var hisBtn = $("<button>").addClass("btn btn-xs btn-success").html("历史").appendTo(div);
349 hisBtn.click(function () { 346 hisBtn.click(function () {
350 - window.open(contextPath +"jsp/javaapi/javaApihis.jsp?id=" + rowData.serviceId); 347 +// window.open(contextPath + "jsp/javaapi/javaApihis.jsp?api_id=" + rowData.serviceId);
  348 + window.open(contextPath + "jsp/javaapi/javaApihis.jsp?api_id=" + rowData.serviceId, '历史信息', 'height=800, width=1200, top=200, left=200, toolbar=no, menubar=no,location=no, status=no')
351 }); 349 });
352 div.append("&nbsp;"); 350 div.append("&nbsp;");
353 351
@@ -57,6 +57,10 @@ @@ -57,6 +57,10 @@
57 <script src="<%=basePath %>js/bootstrap-plugin/datetimepicker/bootstrap-datetimepicker.js" charset="UTF-8" 57 <script src="<%=basePath %>js/bootstrap-plugin/datetimepicker/bootstrap-datetimepicker.js" charset="UTF-8"
58 type="text/javascript"></script> 58 type="text/javascript"></script>
59 59
  60 + <link rel="stylesheet" href="<%=basePath %>css/jquery.editable-select.min.css"/>
  61 + <script src="<%=basePath %>js/jquery.editable-select.min.js" charset="UTF-8"
  62 + type="text/javascript"></script>
  63 +
60 <script> 64 <script>
61 var contextPath = '<%=basePath %>'; 65 var contextPath = '<%=basePath %>';
62 </script> 66 </script>
@@ -84,27 +88,39 @@ @@ -84,27 +88,39 @@
84 style=" margin-top: 12px;margin-left: 25px;float: left;"> 88 style=" margin-top: 12px;margin-left: 25px;float: left;">
85 <div class="input-group" style="float: left;"> 89 <div class="input-group" style="float: left;">
86 <span class="input-group-addon">服务名：</span> 90 <span class="input-group-addon">服务名：</span>
87 - <input type="text" id="searchApiName" name="apiName" class="form-control" placeholder=""/> 91 + <input type="text" id="searchApiName" name="apiName" readonly='true' class="form-control"
  92 + placeholder=""/>
  93 + </div>
  94 + <div class="input-group" style="float: left;">
  95 + <span class="input-group-addon">IP：</span>
  96 + <select id="searchIP" name="searchIP" class="form-control" style="background-color: white">
  97 + <option value="0">ALL</option>
  98 + </select>
  99 + </div>
  100 + <div class="input-group" style="float: left;">
  101 + <span class="input-group-addon">status：</span>
  102 + <select id="searchStatus" name="searchStatus" class="form-control">
  103 + <option value="2">ALL</option>
  104 + <option value="0">FAILED</option>
  105 + <option value="1">OK</option>
  106 + </select>
88 </div> 107 </div>
89 <%--<div class="input-group" style="float: left;">--%> 108 <%--<div class="input-group" style="float: left;">--%>
90 - <%--<span class="input-group-addon">服务类型：</span>--%>  
91 - <%--<select id="searchApiType" name="searchApiType" class="form-control" placeholder="">--%>  
92 - <%--<option value="0">ALL</option>--%>  
93 - <%--</select>--%>  
94 - <%--</div>--%>  
95 - <%--<div class="input-group" style="float: left;">--%>  
96 - <%--<span class="input-group-addon">请求类型：</span>--%>  
97 - <%--<select id="searchApiReqMethod" name="searchApiReqMethod" class="form-control">--%>  
98 - <%--<option value="2">ALL</option>--%>  
99 - <%--<option value="0">GET</option>--%>  
100 - <%--<option value="1">POST</option>--%>  
101 - <%--</select>--%> 109 + <%--<span class="input-group-addon">url：</span>--%>
  110 + <%--<input type="text" id="searchapiUrl" name="apiUrl" class="form-control" placeholder=""/>--%>
102 <%--</div>--%> 111 <%--</div>--%>
  112 +
  113 + <div class="input-group" style="float: left;">
  114 + <span class="input-group-addon">开始时间：</span>
  115 + <input type="text" id="starTime" name="time" class="form-control" placeholder=""/>
  116 + </div>
  117 +
103 <div class="input-group" style="float: left;"> 118 <div class="input-group" style="float: left;">
104 - <span class="input-group-addon">url：</span>  
105 - <input type="text" id="searchapiUrl" name="apiUrl" class="form-control" placeholder=""/> 119 + <span class="input-group-addon">结束时间：</span>
  120 + <input type="text" id="endTime" name="time" class="form-control" placeholder=""/>
106 </div> 121 </div>
107 - <%--<button id="searchJavaInfoBtn" class="btn btn-default">搜索</button>--%> 122 +
  123 + <button id="searchBtn" class="btn btn-default">搜索</button>
108 </div> 124 </div>
109 </div> 125 </div>
110 </div> 126 </div>
@@ -119,17 +135,62 @@ @@ -119,17 +135,62 @@
119 <script type="text/javascript"> 135 <script type="text/javascript">
120 var api_id =<%=api_id %>; 136 var api_id =<%=api_id %>;
121 var mobj_id =<%=mobj_id %>; 137 var mobj_id =<%=mobj_id %>;
  138 + var map_ip = {};
122 //加载表格 139 //加载表格
123 $(function () { 140 $(function () {
  141 +
  142 + $('#searchIP').editableSelect({
  143 + effects: 'slide'
  144 + });
  145 + $.ajax({
  146 + url: contextPath + "/mobject/queryMobjById?typeId=" + api_id,
  147 + type: 'get',
  148 + success: function (data) {
  149 + if (!data || data.code != 200) {
  150 + $.toaster('获取IP失败', '警告', 'warn');
  151 + return;
  152 + }
  153 + console.log(data.data);
  154 + var selObj = $("#searchIP");
  155 +
  156 + $.each(data.data, function (idx, val) {
  157 + if (map_ip["" + val.moId] == undefined) {
  158 + map_ip["" + val.moId] = val.moHostIp;
  159 + }
  160 + var value = val.moId;
  161 + var text = val.moHostIp;
  162 + selObj.append("<option value='" + value + "'>" + text + "</option>");
  163 + })
  164 + },
  165 + error: function (data) {
  166 + $.toaster('获取IP失败', '警告', 'warn');
  167 +
  168 + }
  169 + });
  170 +
  171 +
  172 + //设置默认时间
  173 + $("#starTime").datetimepicker({
  174 + format: 'YYYY-MM-DD HH:mm:ss'
  175 + });
  176 +
  177 + $("#endTime").datetimepicker({
  178 + format: 'YYYY-MM-DD HH:mm:ss'
  179 + });
  180 +
124 //加载表格 181 //加载表格
125 $("#infoTable").table({ 182 $("#infoTable").table({
126 columnAutoWidth: false, 183 columnAutoWidth: false,
127 - url: contextPath + "/javaApi/history?api_id=" + api_id + "&mobj_id=" + mobj_id, 184 + url: contextPath + "/javaApi/history",
128 striped: true, 185 striped: true,
129 title: "java服务信息历史", 186 title: "java服务信息历史",
130 dataType: "json", 187 dataType: "json",
131 pagination: true, 188 pagination: true,
132 pageSize: 10, 189 pageSize: 10,
  190 + queryParams: {
  191 + 'apiId': api_id,
  192 + 'mobjId': mobj_id
  193 + },
133 loadFilter: function (data) { 194 loadFilter: function (data) {
134 return defaultLoadFilter(data); 195 return defaultLoadFilter(data);
135 }, 196 },
@@ -193,6 +254,24 @@ @@ -193,6 +254,24 @@
193 254
194 }] 255 }]
195 }); 256 });
  257 +
  258 + //点击查询按钮
  259 + $("#searchBtn").click(function () {
  260 + var startTime = $("#starTime").val();
  261 + var endTime = $("#endTime").val();
  262 + startTime = startTime.replace(new RegExp("-", "gm"), "/");
  263 + startTime = (new Date(startTime)).getTime();
  264 + endTime = endTime.replace(new RegExp("-", "gm"), "/");
  265 + endTime = (new Date(endTime)).getTime();
  266 +
  267 + $("#infoTable").table("load", {
  268 + 'apiId': api_id,
  269 + 'mobjId': mobj_id,
  270 + 'startTime': startTime,
  271 + 'endTime': endTime
  272 + });
  273 + });
  274 +
196 }); 275 });
197 276
198 </script> 277 </script>