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
package com.ui.model.req;
import com.ui.model.rep.PageBean;
import lombok.Data;
/**
* Created by fruwei on 2016/6/23.
*/
@Data
public class JavaApiHisReq extends PageRequest {
int apiId;
int mobjId;
String startTime="";
String endTime="";
}
... ...
... ... @@ -5,6 +5,7 @@ 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.JavaApiHisReq;
import com.ui.model.req.JavaApiInfoReq;
import com.ui.model.req.JavaApiStatusListReq;
import com.ui.model.req.JavaApiStatusReq;
... ... @@ -92,18 +93,15 @@ public class JavaAPICtrl {
@RequestMapping("/history")
@ResponseBody
public BaseResponse getHistory(@RequestParam(required = false, defaultValue = "0") int api_id,
@RequestParam(required = false, defaultValue = "0") int mobj_id,
@RequestParam(required = false, defaultValue = "0") long start_time,
@RequestParam(required = false, defaultValue = "0") long end_time,
@RequestParam(required = false, defaultValue = "0") int page) {
public BaseResponse getHistory(JavaApiHisReq req) {
Map<String, String> param = new HashMap<String, String>();
param.put("api_id", "" + api_id);
param.put("mobj_id", "" + mobj_id);
param.put("start_time", "" + start_time);
param.put("end_time", "" + end_time);
param.put("page", "" + page);
param.put("api_id", "" + req.getApiId());
param.put("mobj_id", "" + req.getMobjId());
param.put("start_time", "" + req.getStartTime());
param.put("end_time", "" + req.getEndTime());
param.put("page", "" + (req.getCurrentPage() - 1));
param.put("pageSize", "" + req.getPageSize());
BaseResponse rep;
try {
... ...
... ... @@ -58,7 +58,6 @@ public class MObjectInfoCtrl {
public BaseResponse queryMHostInfo(MObjectHostInfoReq request) {
BaseResponse response = httpRestClient.defaultPost("/mobject/queryHost", request, BaseResponse.class);
return response;
}
... ... @@ -66,7 +65,13 @@ public class MObjectInfoCtrl {
public BaseResponse queryMHostInfo() {
BaseResponse response = httpRestClient.defaultGet("/mobject/javaapi", BaseResponse.class);
return response;
}
@RequestMapping(value = "/queryMobjById")
public BaseResponse queryMInfoByType(@RequestParam int typeId) {
BaseResponse response = httpRestClient.defaultGet("/mobject/mobjById?typeId=" + typeId, BaseResponse.class);
return response;
}
... ...
/**
* jQuery Editable Select
* by Indri Muska <indrimuska@gmail.com>
*
* Source on GitHub @ https://github.com/indrimuska/jquery-editable-select
*
* File: jquery.editable-select.min.css
* Minifier: http://www.cssminifier.com/
*/
input.es-input {
padding-right: 20px !important;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAICAYAAADJEc7MAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAG2YAABzjgAA4DIAAIM2AAB5CAAAxgwAADT6AAAgbL5TJ5gAAABGSURBVHjaYvz//z8DOYCJgUzA0tnZidPK8vJyRpw24pLEpwnuVHRFhDQxMDAwMPz//x+OOzo6/iPz8WFGuocqAAAA//8DAD/sORHYg7kaAAAAAElFTkSuQmCC) right center no-repeat
}
input.es-input:focus {
-webkit-border-bottom-left-radius: 0;
-moz-border-radius-bottomleft: 0;
border-bottom-left-radius: 0;
-webkit-border-bottom-right-radius: 0;
-moz-border-radius-bottomright: 0;
border-bottom-right-radius: 0
}
.es-list {
display: block;
position: absolute;
padding: 0;
margin: 0;
border: 1px solid #d1d1d1;
display: none;
z-index: 1000;
background: #fff;
max-height: 160px;
overflow-y: auto;
-moz-box-shadow: 0 2px 3px #ccc;
-webkit-box-shadow: 0 2px 3px #ccc;
box-shadow: 0 2px 3px #ccc
}
.es-list li {
display: block;
padding: 5px 10px;
margin: 0
}
.es-list li.selected {
/*background: #f3f3f3*/
}
... ...
(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&&
"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,
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");
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();
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,
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();
return d}})(jQuery);
\ No newline at end of file
... ...
... ... @@ -27,7 +27,7 @@
</select>
</div>
<div class="input-group" style="float: left;">
<span class="input-g roup-addon">请求类型：</span>
<span class="input-group-addon">请求类型：</span>
<select id="searchApiReqMethod" name="searchApiReqMethod" class="form-control">
<option value="2">ALL</option>
<option value="0">GET</option>
... ... @@ -43,9 +43,6 @@
<button id="addInfoBtn" class="btn btn-primary" style="margin-top: 12px;margin-left: 100px;">
新增
</button>
<button id="modeoBtn" class="btn btn-primary" style="margin-top: 12px;margin-left: 100px;">
编辑模式
</button>
</div>
</div>
<div id="infoTable">
... ... @@ -347,7 +344,8 @@
var div = $("<div>");
var hisBtn = $("<button>").addClass("btn btn-xs btn-success").html("历史").appendTo(div);
hisBtn.click(function () {
window.open(contextPath +"jsp/javaapi/javaApihis.jsp?id=" + rowData.serviceId);
// window.open(contextPath + "jsp/javaapi/javaApihis.jsp?api_id=" + rowData.serviceId);
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')
});
div.append("&nbsp;");
... ...
... ... @@ -57,6 +57,10 @@
<script src="<%=basePath %>js/bootstrap-plugin/datetimepicker/bootstrap-datetimepicker.js" charset="UTF-8"
type="text/javascript"></script>
<link rel="stylesheet" href="<%=basePath %>css/jquery.editable-select.min.css"/>
<script src="<%=basePath %>js/jquery.editable-select.min.js" charset="UTF-8"
type="text/javascript"></script>
<script>
var contextPath = '<%=basePath %>';
</script>
... ... @@ -84,27 +88,39 @@
style=" margin-top: 12px;margin-left: 25px;float: left;">
<div class="input-group" style="float: left;">
<span class="input-group-addon">服务名：</span>
<input type="text" id="searchApiName" name="apiName" class="form-control" placeholder=""/>
<input type="text" id="searchApiName" name="apiName" readonly='true' class="form-control"
placeholder=""/>
</div>
<div class="input-group" style="float: left;">
<span class="input-group-addon">IP：</span>
<select id="searchIP" name="searchIP" class="form-control" style="background-color: white">
<option value="0">ALL</option>
</select>
</div>
<div class="input-group" style="float: left;">
<span class="input-group-addon">status：</span>
<select id="searchStatus" name="searchStatus" class="form-control">
<option value="2">ALL</option>
<option value="0">FAILED</option>
<option value="1">OK</option>
</select>
</div>
<%--<div class="input-group" style="float: left;">--%>
<%--<span class="input-group-addon">服务类型：</span>--%>
<%--<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>--%>
<%--<span class="input-group-addon">url：</span>--%>
<%--<input type="text" id="searchapiUrl" name="apiUrl" class="form-control" placeholder=""/>--%>
<%--</div>--%>
<div class="input-group" style="float: left;">
<span class="input-group-addon">开始时间：</span>
<input type="text" id="starTime" name="time" class="form-control" placeholder=""/>
</div>
<div class="input-group" style="float: left;">
<span class="input-group-addon">url：</span>
<input type="text" id="searchapiUrl" name="apiUrl" class="form-control" placeholder=""/>
<span class="input-group-addon">结束时间：</span>
<input type="text" id="endTime" name="time" class="form-control" placeholder=""/>
</div>
<%--<button id="searchJavaInfoBtn" class="btn btn-default">搜索</button>--%>
<button id="searchBtn" class="btn btn-default">搜索</button>
</div>
</div>
</div>
... ... @@ -119,17 +135,62 @@
<script type="text/javascript">
var api_id =<%=api_id %>;
var mobj_id =<%=mobj_id %>;
var map_ip = {};
//加载表格
$(function () {
$('#searchIP').editableSelect({
effects: 'slide'
});
$.ajax({
url: contextPath + "/mobject/queryMobjById?typeId=" + api_id,
type: 'get',
success: function (data) {
if (!data || data.code != 200) {
$.toaster('获取IP失败', '警告', 'warn');
return;
}
console.log(data.data);
var selObj = $("#searchIP");
$.each(data.data, function (idx, val) {
if (map_ip["" + val.moId] == undefined) {
map_ip["" + val.moId] = val.moHostIp;
}
var value = val.moId;
var text = val.moHostIp;
selObj.append("<option value='" + value + "'>" + text + "</option>");
})
},
error: function (data) {
$.toaster('获取IP失败', '警告', 'warn');
}
});
//设置默认时间
$("#starTime").datetimepicker({
format: 'YYYY-MM-DD HH:mm:ss'
});
$("#endTime").datetimepicker({
format: 'YYYY-MM-DD HH:mm:ss'
});
//加载表格
$("#infoTable").table({
columnAutoWidth: false,
url: contextPath + "/javaApi/history?api_id=" + api_id + "&mobj_id=" + mobj_id,
url: contextPath + "/javaApi/history",
striped: true,
title: "java服务信息历史",
dataType: "json",
pagination: true,
pageSize: 10,
queryParams: {
'apiId': api_id,
'mobjId': mobj_id
},
loadFilter: function (data) {
return defaultLoadFilter(data);
},
... ... @@ -193,6 +254,24 @@
}]
});
//点击查询按钮
$("#searchBtn").click(function () {
var startTime = $("#starTime").val();
var endTime = $("#endTime").val();
startTime = startTime.replace(new RegExp("-", "gm"), "/");
startTime = (new Date(startTime)).getTime();
endTime = endTime.replace(new RegExp("-", "gm"), "/");
endTime = (new Date(endTime)).getTime();
$("#infoTable").table("load", {
'apiId': api_id,
'mobjId': mobj_id,
'startTime': startTime,
'endTime': endTime
});
});
});
</script>
... ...