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 @@ @@ -8,3 +8,19 @@
8 margin-right: 2px; 8 margin-right: 2px;
9 } 9 }
10 10
  11 +.tip_well{
  12 + max-width: 400px;
  13 + margin: 0 auto;
  14 + position: fixed;
  15 + top: 10px;
  16 +}
  17 +/*// Max Width of the popover (depending on the container!) */
  18 +.popover{
  19 + max-width:600px;
  20 +}
  21 +
  22 +a.api_info{
  23 + margin-left: 2px;
  24 + margin-right: 2px;
  25 + cursor: pointer;
  26 +}
@@ -26,6 +26,7 @@ @@ -26,6 +26,7 @@
26 <link rel="stylesheet" href="<%=basePath %>js/jstree/themes/proton/style.css"/> 26 <link rel="stylesheet" href="<%=basePath %>js/jstree/themes/proton/style.css"/>
27 <link rel="stylesheet" href="<%=basePath %>css/select2.css"/> 27 <link rel="stylesheet" href="<%=basePath %>css/select2.css"/>
28 <link rel="stylesheet" href="<%=basePath %>css/bootstrap-datetimepicker.css"/> 28 <link rel="stylesheet" href="<%=basePath %>css/bootstrap-datetimepicker.css"/>
  29 + <link rel="stylesheet" href="<%=basePath %>css/yoho.css"/>
29 <script src="<%=basePath %>js/jquery-1.12.0.min.js" charset="UTF-8" type="text/javascript"></script> 30 <script src="<%=basePath %>js/jquery-1.12.0.min.js" charset="UTF-8" type="text/javascript"></script>
30 <script src="<%=basePath %>/js/bootstrap.min.js"></script> 31 <script src="<%=basePath %>/js/bootstrap.min.js"></script>
31 <script src="<%=basePath %>js/global.js" charset="UTF-8" type="text/javascript"></script> 32 <script src="<%=basePath %>js/global.js" charset="UTF-8" type="text/javascript"></script>
@@ -127,18 +127,38 @@ @@ -127,18 +127,38 @@
127 }); 127 });
128 }; 128 };
129 129
130 - 130 + // $('body').popover({
  131 + // selector: '.has-popover',
  132 + // container: 'body'
  133 + // });
  134 + $('body').on('click', function (e) {
  135 + $('[data-toggle="popover"]').each(function () {
  136 + //the 'is' for buttons that trigger popups
  137 + //the 'has' for icons within a button that triggers a popup
  138 + if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
  139 + $(this).popover('hide');
  140 + }
  141 + });
  142 + });
131 var createJavaAppDiv = function (apps, serviceId, toggle) { 143 var createJavaAppDiv = function (apps, serviceId, toggle) {
132 var rel = $("<div>"); 144 var rel = $("<div>");
133 $.each(apps, function (idx, val) { 145 $.each(apps, function (idx, val) {
134 - var span;  
135 - if (toggle == 1)  
136 - span = $("<span class='btn btn-success btn-xs tag_javaapp' >").attr("id", "span_" + serviceId + "_" + val.moId).html(val.moHostIp);  
137 - else  
138 - span = $("<span class='btn btn-inverse btn-xs tag_javaapp' >").attr("id", "span_no_" + serviceId + "_" + val.moId).html(val.moHostIp);  
139 - rel.append(span);  
140 - }); 146 + var span;
  147 + if (toggle == 1) {
  148 + span = $("<button class='btn btn-success btn-xs tag_javaapp has-popover' >").attr("id", "span_" + serviceId + "_" + val.moId).html(val.moHostIp);
  149 + span.attr("data-toggle", "popover");
  150 + span.attr("data-placement", "bottom");
  151 + span.attr("data-html", "true");
  152 +// span.attr("title", "message");
  153 + // span.attr("data-content", "message");
  154 + } else {
  155 + span = $("<button class='btn btn-inverse btn-xs tag_javaapp' >").attr("id", "span_no_" + serviceId + "_" + val.moId).html(val.moHostIp);
  156 + }
141 157
  158 + rel.append(span);
  159 + }
  160 + );
  161 + // $('[data-toggle="popover"]').popover();
142 return rel; 162 return rel;
143 } 163 }
144 164
@@ -146,7 +166,12 @@ @@ -146,7 +166,12 @@
146 var setStatus = function (statusObj) { 166 var setStatus = function (statusObj) {
147 var id = "span_" + statusObj.serviceId + "_" + statusObj.mObjectId; 167 var id = "span_" + statusObj.serviceId + "_" + statusObj.mObjectId;
148 // console.log(statusObj); 168 // console.log(statusObj);
  169 + var content = "start: " + statusObj.startTime + " ";
  170 + content += "end: " + statusObj.endTime + " ";
  171 + content += "cost: " + statusObj.costTime + "ms<br>";
  172 +
149 if (statusObj.status == 0) { 173 if (statusObj.status == 0) {
  174 + content += "exception: " + statusObj.exception;
150 if ($("#" + id).hasClass('btn-success')) { 175 if ($("#" + id).hasClass('btn-success')) {
151 $("#" + id).removeClass('btn-success'); 176 $("#" + id).removeClass('btn-success');
152 $("#" + id).addClass('btn-danger'); 177 $("#" + id).addClass('btn-danger');
@@ -158,7 +183,11 @@ @@ -158,7 +183,11 @@
158 $("#" + id).addClass('btn-success'); 183 $("#" + id).addClass('btn-success');
159 } 184 }
160 } 185 }
161 - 186 + $("#" + id).attr("data-content", content);
  187 + $("#" + id).popover({
  188 + delay: {"show": 500, "hide": 100}
  189 + // container: 'tip_well'
  190 + });
162 } 191 }
163 192
164 var getJavaAppStatus = function () { 193 var getJavaAppStatus = function () {
@@ -251,107 +280,116 @@ @@ -251,107 +280,116 @@
251 field: "serviceId", 280 field: "serviceId",
252 width: "2%" 281 width: "2%"
253 }, { 282 }, {
254 - title: "服务名", 283 + title: "服务",
255 field: "apiName", 284 field: "apiName",
256 - width: "8%"  
257 - }, {  
258 - title: "URL",  
259 - field: "apiUrl",  
260 - width: "10%"  
261 - }, {  
262 - title: "服务类型",  
263 - field: "serviceType",  
264 formatter: function (value, rowData, rowIndex) { 285 formatter: function (value, rowData, rowIndex) {
265 - return getTypeName(rowData.serviceType);  
266 - },  
267 - width: "8%"  
268 -  
269 - }, {  
270 - title: "请求",  
271 - field: "apiMethod",  
272 - formatter: function (value, rowData, rowIndex) {  
273 - if (rowData.apiReqMethod == 0)  
274 - return "GET";  
275 - else  
276 - return "POST";  
277 - },  
278 - width: "4%"  
279 -  
280 - }, {  
281 - title: "告警阈值",  
282 - field: "apiWarnTrigger",  
283 - width: "4%"  
284 -  
285 - }, {  
286 - title: "启用",  
287 - field: "apiToggle",  
288 - formatter: function (value, rowData, rowIndex) {  
289 - if (rowData.apiToggle == 0)  
290 - return "NO";  
291 - else  
292 - return "YES";  
293 - },  
294 - width: "3%"  
295 -  
296 - }, {  
297 - title: "运行状态",  
298 - field: "apiStatus",  
299 - formatter: function (value, rowData, rowIndex) {  
300 - var div = $("<div >").attr('id', 'status_' + rowData.serviceId); 286 + var div = $("<div >").attr('id', 'div_api_' + rowData.serviceId);
  287 + div.append("<span>" + rowData.apiName + "</span>");
  288 + div.append("<a class='api_info' title='" + rowData.apiUrl + "'>url</a>")
  289 + div.append("<a class='api_info' title='" + rowData.apiData + "'>data </a>")
301 return div; 290 return div;
302 }, 291 },
303 - width: "40%"  
304 -  
305 - }, {  
306 - title: "操作",  
307 - field: "op",  
308 - formatter: function (value, rowData, rowIndex) {  
309 - var div = $("<div>");  
310 - var editBtn = $("<button>").addClass("btn btn-xs btn-success").html("修改").appendTo(div);  
311 - editBtn.click(function () {  
312 - editJavaInfo(rowData);  
313 - });  
314 - div.append("&nbsp;");  
315 - var delBtn = $("<button>").addClass("btn btn-xs btn-danger").html("删除").appendTo(div);  
316 - delBtn.click(function () {  
317 - var dialog = $("<div>").appendTo($("body"));  
318 - dialog.dialog({  
319 - title: "你确定删除吗",  
320 - backdrop: "static",  
321 - content: "你确定要删除该Java服务信息吗？",  
322 - buttons: [{  
323 - text: "否",  
324 - className: "btn-danger",  
325 - onclick: function () {  
326 - $(dialog).dialog("hide");  
327 - }  
328 - }, {  
329 - text: "是",  
330 - className: "btn-success",  
331 - onclick: function () {  
332 - $(dialog).dialog("hide");  
333 - $.ajax({  
334 - url: contextPath + "/javaApi/del?id=" + rowData.serviceId,  
335 - type: 'get',  
336 - dataType: "json",  
337 - success: function (data) {  
338 - if (!data || data.code != 200) {  
339 - localAlert('删除失败', data.message); 292 + width: "14%"
  293 + },
  294 +// {
  295 +// title: "URL",
  296 +// field: "apiUrl",
  297 +// width: "10%"
  298 +// },
  299 + {
  300 + title: "服务类型",
  301 + field: "serviceType",
  302 + formatter: function (value, rowData, rowIndex) {
  303 + return getTypeName(rowData.serviceType);
  304 + },
  305 + width: "8%"
  306 +
  307 + }, {
  308 + title: "请求",
  309 + field: "apiMethod",
  310 + formatter: function (value, rowData, rowIndex) {
  311 + if (rowData.apiReqMethod == 0)
  312 + return "GET";
  313 + else
  314 + return "POST";
  315 + },
  316 + width: "4%"
  317 +
  318 + }, {
  319 + title: "告警阈值",
  320 + field: "apiWarnTrigger",
  321 + width: "4%"
  322 +
  323 + }, {
  324 + title: "启用",
  325 + field: "apiToggle",
  326 + formatter: function (value, rowData, rowIndex) {
  327 + if (rowData.apiToggle == 0)
  328 + return "NO";
  329 + else
  330 + return "YES";
  331 + },
  332 + width: "3%"
  333 +
  334 + }, {
  335 + title: "运行状态",
  336 + field: "apiStatus",
  337 + formatter: function (value, rowData, rowIndex) {
  338 + var div = $("<div >").attr('id', 'status_' + rowData.serviceId);
  339 + return div;
  340 + },
  341 + width: "40%"
  342 +
  343 + }, {
  344 + title: "操作",
  345 + field: "op",
  346 + formatter: function (value, rowData, rowIndex) {
  347 + var div = $("<div>");
  348 + var editBtn = $("<button>").addClass("btn btn-xs btn-success").html("修改").appendTo(div);
  349 + editBtn.click(function () {
  350 + editJavaInfo(rowData);
  351 + });
  352 + div.append("&nbsp;");
  353 + var delBtn = $("<button>").addClass("btn btn-xs btn-danger").html("删除").appendTo(div);
  354 + delBtn.click(function () {
  355 + var dialog = $("<div>").appendTo($("body"));
  356 + dialog.dialog({
  357 + title: "你确定删除吗",
  358 + backdrop: "static",
  359 + content: "你确定要删除该Java服务信息吗？",
  360 + buttons: [{
  361 + text: "否",
  362 + className: "btn-danger",
  363 + onclick: function () {
  364 + $(dialog).dialog("hide");
  365 + }
  366 + }, {
  367 + text: "是",
  368 + className: "btn-success",
  369 + onclick: function () {
  370 + $(dialog).dialog("hide");
  371 + $.ajax({
  372 + url: contextPath + "/javaApi/del?id=" + rowData.serviceId,
  373 + type: 'get',
  374 + dataType: "json",
  375 + success: function (data) {
  376 + if (!data || data.code != 200) {
  377 + localAlert('删除失败', data.message);
  378 + }
  379 + $("#infoTable").table("load");
  380 + },
  381 + error: function (data) {
  382 + localAlert('系统异常', data.message);
340 } 383 }
341 - $("#infoTable").table("load");  
342 - },  
343 - error: function (data) {  
344 - localAlert('系统异常', data.message);  
345 - }  
346 - });  
347 - }  
348 - }] 384 + });
  385 + }
  386 + }]
  387 + });
349 }); 388 });
350 - });  
351 - return div;  
352 - },  
353 - width: "7%"  
354 - }] 389 + return div;
  390 + },
  391 + width: "7%"
  392 + }]
355 }); 393 });
356 394
357 395