ops / monitor-ui · Commits

Go to a project

Authored by fanzelei
Commit a3134e0dc55e3952c5d40cc6014bd6a2978aef90 2 parents 39d6dd80 73cb96e4

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

Inline Side-by-side
Showing 3 changed files with 159 additions and 104 deletions
... ... @@ -8,3 +8,19 @@
margin-right: 2px;
}
.tip_well{
max-width: 400px;
margin: 0 auto;
position: fixed;
top: 10px;
}
/*// Max Width of the popover (depending on the container!) */
.popover{
max-width:600px;
}
a.api_info{
margin-left: 2px;
margin-right: 2px;
cursor: pointer;
}
\ No newline at end of file
... ...
... ... @@ -26,6 +26,7 @@
<link rel="stylesheet" href="<%=basePath %>js/jstree/themes/proton/style.css"/>
<link rel="stylesheet" href="<%=basePath %>css/select2.css"/>
<link rel="stylesheet" href="<%=basePath %>css/bootstrap-datetimepicker.css"/>
<link rel="stylesheet" href="<%=basePath %>css/yoho.css"/>
<script src="<%=basePath %>js/jquery-1.12.0.min.js" charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath %>/js/bootstrap.min.js"></script>
<script src="<%=basePath %>js/global.js" charset="UTF-8" type="text/javascript"></script>
... ...
... ... @@ -127,18 +127,38 @@
});
};
// $('body').popover({
// selector: '.has-popover',
// container: 'body'
// });
$('body').on('click', function (e) {
$('[data-toggle="popover"]').each(function () {
//the 'is' for buttons that trigger popups
//the 'has' for icons within a button that triggers a popup
if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
$(this).popover('hide');
}
});
});
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);
});
var span;
if (toggle == 1) {
span = $("<button class='btn btn-success btn-xs tag_javaapp has-popover' >").attr("id", "span_" + serviceId + "_" + val.moId).html(val.moHostIp);
span.attr("data-toggle", "popover");
span.attr("data-placement", "bottom");
span.attr("data-html", "true");
// span.attr("title", "message");
// span.attr("data-content", "message");
} else {
span = $("<button class='btn btn-inverse btn-xs tag_javaapp' >").attr("id", "span_no_" + serviceId + "_" + val.moId).html(val.moHostIp);
}
rel.append(span);
}
);
// $('[data-toggle="popover"]').popover();
return rel;
}
... ... @@ -146,7 +166,12 @@
var setStatus = function (statusObj) {
var id = "span_" + statusObj.serviceId + "_" + statusObj.mObjectId;
// console.log(statusObj);
var content = "start: " + statusObj.startTime + " ";
content += "end: " + statusObj.endTime + " ";
content += "cost: " + statusObj.costTime + "ms<br>";
if (statusObj.status == 0) {
content += "exception: " + statusObj.exception;
if ($("#" + id).hasClass('btn-success')) {
$("#" + id).removeClass('btn-success');
$("#" + id).addClass('btn-danger');
... ... @@ -158,7 +183,11 @@
$("#" + id).addClass('btn-success');
}
}
$("#" + id).attr("data-content", content);
$("#" + id).popover({
delay: {"show": 500, "hide": 100}
// container: 'tip_well'
});
}
var getJavaAppStatus = function () {
... ... @@ -251,107 +280,116 @@
field: "serviceId",
width: "2%"
}, {
title: "服务名",
title: "服务",
field: "apiName",
width: "8%"
}, {
title: "URL",
field: "apiUrl",
width: "10%"
}, {
title: "服务类型",
field: "serviceType",
formatter: function (value, rowData, rowIndex) {
return getTypeName(rowData.serviceType);
},
width: "8%"
}, {
title: "请求",
field: "apiMethod",
formatter: function (value, rowData, rowIndex) {
if (rowData.apiReqMethod == 0)
return "GET";
else
return "POST";
},
width: "4%"
}, {
title: "告警阈值",
field: "apiWarnTrigger",
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', 'div_api_' + rowData.serviceId);
div.append("<span>" + rowData.apiName + "</span>");
div.append("<a class='api_info' title='" + rowData.apiUrl + "'>url</a>")
div.append("<a class='api_info' title='" + rowData.apiData + "'>data </a>")
return div;
},
width: "40%"
}, {
title: "操作",
field: "op",
formatter: function (value, rowData, rowIndex) {
var div = $("<div>");
var editBtn = $("<button>").addClass("btn btn-xs btn-success").html("修改").appendTo(div);
editBtn.click(function () {
editJavaInfo(rowData);
});
div.append("&nbsp;");
var delBtn = $("<button>").addClass("btn btn-xs btn-danger").html("删除").appendTo(div);
delBtn.click(function () {
var dialog = $("<div>").appendTo($("body"));
dialog.dialog({
title: "你确定删除吗",
backdrop: "static",
content: "你确定要删除该Java服务信息吗？",
buttons: [{
text: "否",
className: "btn-danger",
onclick: function () {
$(dialog).dialog("hide");
}
}, {
text: "是",
className: "btn-success",
onclick: function () {
$(dialog).dialog("hide");
$.ajax({
url: contextPath + "/javaApi/del?id=" + rowData.serviceId,
type: 'get',
dataType: "json",
success: function (data) {
if (!data || data.code != 200) {
localAlert('删除失败', data.message);
width: "14%"
},
// {
// title: "URL",
// field: "apiUrl",
// width: "10%"
// },
{
title: "服务类型",
field: "serviceType",
formatter: function (value, rowData, rowIndex) {
return getTypeName(rowData.serviceType);
},
width: "8%"
}, {
title: "请求",
field: "apiMethod",
formatter: function (value, rowData, rowIndex) {
if (rowData.apiReqMethod == 0)
return "GET";
else
return "POST";
},
width: "4%"
}, {
title: "告警阈值",
field: "apiWarnTrigger",
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);
return div;
},
width: "40%"
}, {
title: "操作",
field: "op",
formatter: function (value, rowData, rowIndex) {
var div = $("<div>");
var editBtn = $("<button>").addClass("btn btn-xs btn-success").html("修改").appendTo(div);
editBtn.click(function () {
editJavaInfo(rowData);
});
div.append("&nbsp;");
var delBtn = $("<button>").addClass("btn btn-xs btn-danger").html("删除").appendTo(div);
delBtn.click(function () {
var dialog = $("<div>").appendTo($("body"));
dialog.dialog({
title: "你确定删除吗",
backdrop: "static",
content: "你确定要删除该Java服务信息吗？",
buttons: [{
text: "否",
className: "btn-danger",
onclick: function () {
$(dialog).dialog("hide");
}
}, {
text: "是",
className: "btn-success",
onclick: function () {
$(dialog).dialog("hide");
$.ajax({
url: contextPath + "/javaApi/del?id=" + rowData.serviceId,
type: 'get',
dataType: "json",
success: function (data) {
if (!data || data.code != 200) {
localAlert('删除失败', data.message);
}
$("#infoTable").table("load");
},
error: function (data) {
localAlert('系统异常', data.message);
}
$("#infoTable").table("load");
},
error: function (data) {
localAlert('系统异常', data.message);
}
});
}
}]
});
}
}]
});
});
});
return div;
},
width: "7%"
}]
return div;
},
width: "7%"
}]
});
... ...