ops / monitor-ui · Commits

Go to a project

Authored by jack.xue
Commit 2fa6fac6c2979dd12c00cb5f9eb850d4b99f2cd8 1 parent 95e128bd

123123

Inline Side-by-side
Showing 2 changed files with 136 additions and 46 deletions
@@ -16,22 +16,16 @@ @@ -16,22 +16,16 @@
16 <div class="widget-title"> 16 <div class="widget-title">
17 17
18 <h5>Dynamic table</h5> 18 <h5>Dynamic table</h5>
  19 +
19 </div> 20 </div>
  21 +
20 <!-- 树 --> 22 <!-- 树 -->
21 <div style="margin-top: 45px; float: left;margin-top: 54px;border: dashed;width: 300px;color: #D3D3D3;height: 580px;"> 23 <div style="margin-top: 45px; float: left;margin-top: 54px;border: dashed;width: 300px;color: #D3D3D3;height: 580px;">
22 <div class="widget-title"> 24 <div class="widget-title">
23 -  
24 <h5>Tree Title</h5> 25 <h5>Tree Title</h5>
25 </div> 26 </div>
26 - <ul class="ui-widget ui-helper-clearfix" id="icons" style="float: left;margin-left: 165px;">  
27 - <li title=".ui-icon-plusthick" class="ui-state-default ui-corner-all" onclick="deletebtn()"><span  
28 - class="ui-icon ui-icon-plusthick"></span></li>  
29 - </ul>  
30 - <ul class="ui-widget ui-helper-clearfix" id="icons" style="margin-right: 12px;">  
31 - <li title=".ui-icon-minusthick" class="ui-state-default ui-corner-all" onclick="editbtn()"><span  
32 - class="ui-icon ui-icon-minusthick"></span></li>  
33 - </ul>  
34 - <div id="continer"></div> 27 + <div id="jstree" class="jstree jstree-default" role="tree" aria-multiselectable="true"
  28 + tabindex="0" style="height: 400px;color: black"></div>
35 </div> 29 </div>
36 <!-- 列表 --> 30 <!-- 列表 -->
37 <div class="widget-content nopadding" style="margin-left: 300px;"> 31 <div class="widget-content nopadding" style="margin-left: 300px;">
@@ -49,9 +43,6 @@ @@ -49,9 +43,6 @@
49 </div> 43 </div>
50 <button id="submit" class="btn btn-default">搜索</button> 44 <button id="submit" class="btn btn-default">搜索</button>
51 </div> 45 </div>
52 - <button id="addBtn" class="btn btn-primary" style="margin-top: 12px;margin-left: 500px;"  
53 - data-target="#addModal" data-toggle="modal">新增  
54 - </button>  
55 </div> 46 </div>
56 </div> 47 </div>
57 <div id="table"></div> 48 <div id="table"></div>
@@ -66,17 +57,24 @@ @@ -66,17 +57,24 @@
66 <div class="modal-header"> 57 <div class="modal-header">
67 <button type="button" class="close" data-dismiss="modal" 58 <button type="button" class="close" data-dismiss="modal"
68 aria-hidden="true">&times;</button> 59 aria-hidden="true">&times;</button>
69 - <h4 class="modal-title" id="myModalLabel">新增</h4> 60 + <h4 class="modal-title" id="addModalLabel">新增</h4>
70 </div> 61 </div>
71 <div class="modal-body"> 62 <div class="modal-body">
72 <div class="row-fluid"> 63 <div class="row-fluid">
73 <div class="span12"> 64 <div class="span12">
74 <div class="widget-content nopadding"> 65 <div class="widget-content nopadding">
75 - <form action="/mobject/add" method="post" class="form-horizontal"> 66 + <form action="#" method="post" class="form-horizontal" id="addForm">
  67 + <div class="control-group" typeof="hidden" id="moId">
  68 +
  69 + </div>
  70 + <div class="control-group" typeof="hidden" id="moTypeId">
  71 +
  72 + </div>
76 <div class="control-group"> 73 <div class="control-group">
77 <label class="control-label" style="float: left;">名称</label> 74 <label class="control-label" style="float: left;">名称</label>
78 <div class="controls"> 75 <div class="controls">
79 <input type="text" id="moName"/> 76 <input type="text" id="moName"/>
  77 +
80 </div> 78 </div>
81 </div> 79 </div>
82 <div class="control-group"> 80 <div class="control-group">
@@ -88,19 +86,19 @@ @@ -88,19 +86,19 @@
88 <div class="control-group"> 86 <div class="control-group">
89 <label class="control-label" style="float: left;">类型</label> 87 <label class="control-label" style="float: left;">类型</label>
90 <div class="controls"> 88 <div class="controls">
91 - <input type="text" value="" readonly="readonly" id=""/> 89 + <input type="text" readonly="readonly" id="moTypeName"/>
92 </div> 90 </div>
93 </div> 91 </div>
94 <div class="control-group"> 92 <div class="control-group">
95 <label class="control-label" style="float: left;">标签</label> 93 <label class="control-label" style="float: left;">标签</label>
96 <div class="controls"> 94 <div class="controls">
97 - <input type="text"/> 95 + <input type="text" id="moTags"/>
98 </div> 96 </div>
99 </div> 97 </div>
100 <div class="control-group"> 98 <div class="control-group">
101 <label class="control-label" style="float: left;">域名</label> 99 <label class="control-label" style="float: left;">域名</label>
102 <div class="controls"> 100 <div class="controls">
103 - <input type="text"/> 101 + <input type="text" id="moUrl"/>
104 </div> 102 </div>
105 </div> 103 </div>
106 </form> 104 </form>
@@ -111,7 +109,7 @@ @@ -111,7 +109,7 @@
111 <div class="modal-footer"> 109 <div class="modal-footer">
112 <button type="button" class="btn btn-default" data-dismiss="modal">关闭 110 <button type="button" class="btn btn-default" data-dismiss="modal">关闭
113 </button> 111 </button>
114 - <button type="submit" class="btn btn-primary" value="Validate">提交</button> 112 + <button type="submit" class="btn btn-primary" id="addSubmit">提交</button>
115 </div> 113 </div>
116 </div> 114 </div>
117 <!-- /.modal-content --> 115 <!-- /.modal-content -->
@@ -319,18 +317,6 @@ @@ -319,18 +317,6 @@
319 317
320 }); 318 });
321 319
322 - var dom = document.getElementById("icons");  
323 - var str = dom.getAttribute("style");  
324 - str = str.replace(/height\b\s*\:\s*\d+\px;?/ig, "");  
325 - dom.setAttribute("style", str);  
326 - function deletebtn() {  
327 - alert(1);  
328 - }  
329 -  
330 - function editbtn() {  
331 - alert(2);  
332 - }  
333 -  
334 function deleteMObject(rowData) { 320 function deleteMObject(rowData) {
335 $("#deleteModal #moId").val(rowData.moId); 321 $("#deleteModal #moId").val(rowData.moId);
336 } 322 }
@@ -355,8 +341,7 @@ @@ -355,8 +341,7 @@
355 341
356 $("#updateModal #updateSubmit").click(function () { 342 $("#updateModal #updateSubmit").click(function () {
357 343
358 - if(!validEmpty($("#updateModal #moName").val()))  
359 - { 344 + if (!validEmpty($("#updateModal #moName").val())) {
360 alert("必须填写监控对象名称！"); 345 alert("必须填写监控对象名称！");
361 return; 346 return;
362 } 347 }
@@ -389,6 +374,62 @@ @@ -389,6 +374,62 @@
389 }); 374 });
390 }); 375 });
391 376
  377 +
  378 + $("#deleteModal #deleteSubmit").click(function () {
  379 + $.ajax({
  380 + url: contextPath + "/mobject/delete",
  381 + type: "post",
  382 + dataType: "json",
  383 + data: {
  384 + moId: $("#deleteModal #moId").val()
  385 + },
  386 + success: function () {
  387 + var div = document.getElementById("deleteModal");
  388 + div.style.display = "none";
  389 + },
  390 + error: function () {
  391 +
  392 + }
  393 + });
  394 + });
  395 +
  396 + $("#addModal #addSubmit").click(function () {
  397 + if (!validEmpty($("#addModal #moName").val())) {
  398 + alert("必须填写监控对象名称！");
  399 + return;
  400 + }
  401 + if (!validIp($("#addModal #moHostIp").val())) {
  402 + alert("Ip 填写错误！");
  403 + return;
  404 + }
  405 +
  406 + $.ajax(
  407 + {
  408 + url: contextPath + "/mobject/add",
  409 + type: "post",
  410 + dataType: "json",
  411 + data: {
  412 + moName: $("#addModal #moName").val(),
  413 + moHostIp: $("#addModal #moHostIp").val(),
  414 + moTypeId: $("#addModal #moTypeId").val(),
  415 + moTypeName: $("#addModal #moTypeName").val(),
  416 + moTags: $("#addModal #moTags").val(),
  417 + moUrl: $("#addModal #moUrl").val()
  418 + },
  419 + success: function () {
  420 + var div = document.getElementById("addModal");
  421 + div.style.display = "none";
  422 + },
  423 + error: function () {
  424 + alert();
  425 + }
  426 + }
  427 + );
  428 +
  429 + }
  430 + );
  431 +
  432 +
392 function validIp(ip) { 433 function validIp(ip) {
393 var iPattern = /^([0-9]|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.([0-9]|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.([0-9]|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.([0-9]|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])$/; 434 var iPattern = /^([0-9]|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.([0-9]|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.([0-9]|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.([0-9]|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])$/;
394 if ("" != ip && iPattern.test(ip)) { 435 if ("" != ip && iPattern.test(ip)) {
@@ -409,18 +450,59 @@ @@ -409,18 +450,59 @@
409 450
410 } 451 }
411 452
412 - $("#deleteModal #deleteSubmit").click(function () {  
413 - $.ajax({  
414 - url: contextPath + "/mobject/delete",  
415 - type: "post",  
416 - dataType: "json",  
417 - data: {  
418 - moId: $("#deleteModal #moId").val()  
419 - }  
420 - });  
421 - });  
422 - function addMObject() {  
423 -  
424 - }  
425 </script> 453 </script>
  454 +
  455 +<script type="text/javascript" src="<%=basePath %>/script/yoho.type.tree.js"></script>
  456 +
  457 +
  458 +<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
  459 + aria-labelledby="myModalLabel" aria-hidden="true">
  460 + <div class="modal-dialog" style="width: 300px">
  461 + <div class="modal-content">
  462 + <div class="modal-header">
  463 + <h4 class="modal-title" id="myModalLabel">
  464 + 添加类型
  465 + </h4>
  466 + </div>
  467 + <div class="modal-body">
  468 + <div id="modal_type_add">
  469 + <div class="input-group" style="padding-bottom: 5px">
  470 + <span class="input-group-addon" style="width: 100px">父节点：</span>
  471 + <input type="text" id="tx_new_type_parent" width="50" readonly="true" class="form-control"
  472 + placeholder=""/>
  473 + </div>
  474 + <div class="input-group" style="padding-bottom: 5px">
  475 + <span class="input-group-addon" style="width: 100px">Name：</span>
  476 + <input type="text" id="tx_new_type_name" width="50" class="form-control" placeholder=""/>
  477 + </div>
  478 + <div class="input-group" style="padding-bottom: 5px">
  479 + <span class="input-group-addon" style="width: 100px">子节点：</span>
  480 + <input type="checkbox" id="cb_new_type_isleaf" style="margin-left: 30px" name="appName"
  481 + value="JAVA">
  482 + </div>
  483 + </div>
  484 + <div id="modal_type_update">
  485 + <div class="input-group" style="padding-bottom: 5px">
  486 + <span class="input-group-addon" style="width: 100px">原名称：</span>
  487 + <input type="text" id="tx_update_type_name_old" readonly="true" class="form-control"
  488 + placeholder=""/>
  489 + </div>
  490 + <div class="input-group" style="padding-bottom: 5px">
  491 + <span class="input-group-addon" style="width: 100px">新名称：</span>
  492 + <input type="text" id="tx_update_type_name_new" class="form-control" placeholder=""/>
  493 + </div>
  494 + </div>
  495 + <div id="modal_type_del">
  496 + 确认删除该类型节点?
  497 + </div>
  498 + </div>
  499 + <div class="modal-footer">
  500 + <input type="hidden" id="tx_type_action"/>
  501 + <input type="hidden" id="tx_type_id"/>
  502 + <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
  503 + <button type="button" id="btn4type" class="btn btn-primary">确认</button>
  504 + </div>
  505 + </div>
  506 + </div>
  507 +</div>
426   508  
@@ -94,6 +94,14 @@ var addMObjType = function (nodeid, name) { @@ -94,6 +94,14 @@ var addMObjType = function (nodeid, name) {
94 94
95 console.log("id: " + id + " path: " + path + " name :" + name); 95 console.log("id: " + id + " path: " + path + " name :" + name);
96 //TODO 打开新增服务对象对话框 96 //TODO 打开新增服务对象对话框
  97 + $('#addModal').modal({keyboard: true});
  98 +
  99 + $("#addModal #moTypeName").val(name);
  100 +
  101 + $("#addModal #moTypeId").val(id);
  102 +
  103 + alert($("#addModal #moTypeName").val());
  104 +
97 105
98 106
99 } 107 }