diff --git a/monitor-ui-ctrl/src/main/java/com/ui/ctrl/TopoSwitchCtrl.java b/monitor-ui-ctrl/src/main/java/com/ui/ctrl/TopoSwitchCtrl.java
index a5f875f..01f57db 100644
--- a/monitor-ui-ctrl/src/main/java/com/ui/ctrl/TopoSwitchCtrl.java
+++ b/monitor-ui-ctrl/src/main/java/com/ui/ctrl/TopoSwitchCtrl.java
@@ -88,23 +88,24 @@ public class TopoSwitchCtrl {
resultMap.put("elb_"+keys[0]+"_"+keys[1], keys[2]);//指定elb的ip
//计算elb指向的nginx
- List<String> ipInWeight=(ArrayList<String>)lbMap.get(key);
+ Map<String,Integer> ipInWeightMap=(HashMap<String,Integer>)lbMap.get(key);
- if(ipInWeight!=null&&ipInWeight.size()>0){
+ if(ipInWeightMap!=null&&ipInWeightMap.size()>0){
String forward_nginx=keys[0]+"_"+keys[1];
+ List<String> ipInWeight=Lists.newArrayList(ipInWeightMap.keySet());
if(forward_nginx_Map.get(forward_nginx)==null){
forward_nginx_Map.put(forward_nginx,new ArrayList<String>());
}
if(CollectionUtils.retainAll(az1NginxIps,ipInWeight).size()>0){
- forward_nginx_Map.get(forward_nginx).add("az1");
+ forward_nginx_Map.get(forward_nginx).add("az1"+":"+ipInWeightMap.get(az1NginxIps.get(0)));
}
if(CollectionUtils.retainAll(az2NginxIps,ipInWeight).size()>0){
- forward_nginx_Map.get(forward_nginx).add("az2");
+ forward_nginx_Map.get(forward_nginx).add("az2"+":"+ipInWeightMap.get(az2NginxIps.get(0)));
}
if(CollectionUtils.retainAll(az3NginxIps,ipInWeight).size()>0){
- forward_nginx_Map.get(forward_nginx).add("az3");
+ forward_nginx_Map.get(forward_nginx).add("az3"+":"+ipInWeightMap.get(az3NginxIps.get(0)));
}
}
diff --git a/monitor-ui-web/src/main/webapp/jsp/switch/switch_topology.jsp b/monitor-ui-web/src/main/webapp/jsp/switch/switch_topology.jsp
index 136e563..56366a2 100644
--- a/monitor-ui-web/src/main/webapp/jsp/switch/switch_topology.jsp
+++ b/monitor-ui-web/src/main/webapp/jsp/switch/switch_topology.jsp
@@ -12,6 +12,7 @@
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+
<link rel="stylesheet" href="<%=basePath %>css/bootstrap.min.css"/>
<link rel="stylesheet" href="<%=basePath %>css/unicorn.main.css"/>
<link rel="stylesheet" href="<%=basePath %>css/unicorn.grey.css"/>
@@ -24,6 +25,7 @@
<link rel="stylesheet" href="<%=basePath %>css/ace.min.css"/>
<link rel="stylesheet" href="<%=basePath %>css/ace-rtl.min.css"/>
<link rel="stylesheet" href="<%=basePath %>css/ace-skins.min.css"/>
+ <link href="https://cdn.bootcss.com/bootstrap-slider/10.0.2/css/bootstrap-slider.min.css" rel="stylesheet">
<script src="<%=basePath %>js/jquery-2.1.4.min.js" type="text/javascript"></script>
<script src="<%=basePath %>js/bootstrap.min.js" type="text/javascript"></script>
<script src="<%=basePath %>js/typeahead-bs2.min.js" type="text/javascript"></script>
@@ -52,6 +54,7 @@
<script src="<%=basePath %>js/bootstrap-plugin/bootstrap.form.js" charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath %>js/bootstrap-plugin/bootstrap.select.js" charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath %>js/jquery.toaster.js" type="text/javascript"></script>
+ <script src="https://cdn.bootcss.com/bootstrap-slider/10.0.2/bootstrap-slider.min.js"></script>
<script src="<%=basePath %>js/jtopo-0.4.8-min.js"></script>
<script src="<%=basePath %>js/toolbar.js"></script>
@@ -59,6 +62,11 @@
<script>
var contextPath = '<%=basePath %>';
</script>
+ <style>
+ .slider-selection {
+ background: #BABABA;
+ }
+ </style>
<title>YOHO!运维</title>
</head>
<body style="background-color: #444444;font-size: 14px">
@@ -79,8 +87,158 @@
<div class="widget-title" style="height: 50px;">
<h5 style="display: inline">nginx切换</h5>
</div>
+
<div id="nginxSwitchDiv" style="display: none" class="panel-body">
+ <div class="row">
+ <div class="col-xs-12">
+ <!-- PAGE CONTENT BEGINS -->
+
+ <div class="row">
+ <div class="col-xs-12 col-sm-12 widget-container-span">
+ <div class="tabbable">
+ <ul class="nav nav-tabs">
+
+ <li class="active" style="width: 110px">
+ <a data-toggle="tab" href="#mytab_pane_az1">
+ <em class="green icon-cloud bigger-110"></em>
+ az1
+ </a>
+ </li>
+
+ <li style="width: 110px">
+ <a data-toggle="tab" href="#mytab_pane_az2">
+ <em class="green icon-cloud bigger-110"></em>
+ az2
+ </a>
+ </li>
+
+ <li style="width: 110px">
+ <a data-toggle="tab" href="#mytab_pane_az3">
+ <em class="green icon-cloud bigger-110"></em>
+ az3
+ </a>
+ </li>
+
+ </ul>
+
+ <div class="tab-content">
+ <div id="mytab_pane_az1" class="tab-pane in active">
+ <div class="ckbox ckbox-default" style="margin-top:30px;">
+ <input type="checkbox" name="az1_target_operate_nginx" id="az1_target_operate_nginx_az1" secondgroup="az1"
+ value="az1" />
+ <label for="az1_target_operate_nginx_az1">az1</label>
+
+ <input id="az1_input_slider_az1" class="slider" type="text"
+ data-slider-min="0" data-slider-max="10" data-slider-step="1" data-slider-value="0" data-slider-tooltip="show"/>
+ </div>
+
+ <div class="ckbox ckbox-default" style="margin-top:30px;">
+ <input type="checkbox" name="az1_target_operate_nginx" id="az1_target_operate_nginx_az2" secondgroup="az1"
+ value="az2" />
+ <label for="az1_target_operate_nginx_az2">az2</label>
+
+ <input id="az1_input_slider_az2" class="slider" type="text"
+ data-slider-min="0" data-slider-max="10" data-slider-step="1" data-slider-value="0" data-slider-tooltip="show"/>
+ </div>
+
+ <div class="ckbox ckbox-default" style="margin-top:30px;">
+ <input type="checkbox" name="az1_target_operate_nginx" id="az1_target_operate_nginx_az3" secondgroup="az1"
+ value="az3" />
+ <label for="az1_target_operate_nginx_az3">az3</label>
+
+ <input id="az1_input_slider_az3" class="slider" type="text"
+ data-slider-min="0" data-slider-max="10" data-slider-step="1" data-slider-value="0" data-slider-tooltip="show"/>
+ </div>
+
+ <button class=" btn btn-sm btn-success"
+ style="display:inline;margin-left:30px;margin-top:20px;"
+ onclick="nginxInitSwitch('az1')">
+ <em class="icon-cogs bigger-110"></em>
+ 切换az1
+ </button>
+ </div>
+ <div id="mytab_pane_az2" class="tab-pane">
+ <div class="ckbox ckbox-default" style="margin-top:30px;">
+ <input type="checkbox" name="az1_target_operate_nginx" id="az2_target_operate_nginx_az1" secondgroup="az1"
+ value="az1" />
+ <label for="az2_target_operate_nginx_az1">az1</label>
+
+ <input id="az2_input_slider_az1" class="slider" type="text"
+ data-slider-min="0" data-slider-max="10" data-slider-step="1" data-slider-value="0" data-slider-tooltip="show"/>
+ </div>
+
+ <div class="ckbox ckbox-default" style="margin-top:30px;">
+ <input type="checkbox" name="az1_target_operate_nginx" id="az2_target_operate_nginx_az2" secondgroup="az1"
+ value="az2" />
+ <label for="az2_target_operate_nginx_az2">az2</label>
+
+ <input id="az2_input_slider_az2" class="slider" type="text"
+ data-slider-min="0" data-slider-max="10" data-slider-step="1" data-slider-value="0" data-slider-tooltip="show"/>
+ </div>
+
+ <div class="ckbox ckbox-default" style="margin-top:30px;">
+ <input type="checkbox" name="az1_target_operate_nginx" id="az2_target_operate_nginx_az3" secondgroup="az1"
+ value="az3" />
+ <label for="az2_target_operate_nginx_az3">az3</label>
+
+ <input id="az2_input_slider_az3" class="slider" type="text"
+ data-slider-min="0" data-slider-max="10" data-slider-step="1" data-slider-value="0" data-slider-tooltip="show"/>
+ </div>
+
+ <button class=" btn btn-sm btn-success"
+ style="display:inline;margin-left:30px;margin-top:20px;"
+ onclick="nginxInitSwitch('az2')">
+ <em class="icon-cogs bigger-110"></em>
+ 切换az2
+ </button>
+ </div>
+ <div id="mytab_pane_az3" class="tab-pane">
+ <div class="ckbox ckbox-default" style="margin-top:30px;">
+ <input type="checkbox" name="az1_target_operate_nginx" id="az3_target_operate_nginx_az1" secondgroup="az1"
+ value="az1" />
+ <label for="az3_target_operate_nginx_az1">az1</label>
+
+ <input id="az3_input_slider_az1" class="slider" type="text"
+ data-slider-min="0" data-slider-max="10" data-slider-step="1" data-slider-value="0" data-slider-tooltip="show"/>
+ </div>
+
+ <div class="ckbox ckbox-default" style="margin-top:30px;">
+ <input type="checkbox" name="az1_target_operate_nginx" id="az3_target_operate_nginx_az2" secondgroup="az1"
+ value="az2" />
+ <label for="az3_target_operate_nginx_az2">az2</label>
+
+ <input id="az3_input_slider_az2" class="slider" type="text"
+ data-slider-min="0" data-slider-max="10" data-slider-step="1" data-slider-value="0" data-slider-tooltip="show"/>
+ </div>
+
+ <div class="ckbox ckbox-default" style="margin-top:30px;">
+ <input type="checkbox" name="az1_target_operate_nginx" id="az3_target_operate_nginx_az3" secondgroup="az1"
+ value="az3" />
+ <label for="az3_target_operate_nginx_az3">az3</label>
+
+ <input id="az3_input_slider_az3" class="slider" type="text"
+ data-slider-min="0" data-slider-max="10" data-slider-step="1" data-slider-value="0" data-slider-tooltip="show"/>
+ </div>
+
+ <button class=" btn btn-sm btn-success"
+ style="display:inline;margin-left:30px;margin-top:20px;"
+ onclick="nginxInitSwitch('az3')">
+ <em class="icon-cogs bigger-110"></em>
+ 切换az3
+ </button>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- /span -->
+
+ <div class="vspace-xs-6"></div>
+ </div>
+ <!-- /row -->
+ </div>
+ </div>
+ <!--
<div class="form-group">
<button class="col-sm-1 btn btn-sm " disabled="disabled">
az1 area
@@ -178,6 +336,8 @@
</div>
</div>
+ -->
+
</div>
@@ -186,7 +346,7 @@
</div>
<script src="<%=basePath %>script/common/genarate_left_panel.js?v=<%=ProjectConstant.MENU_VERSION %>"></script>
-<script src="<%=basePath %>script/switch.js?v=20180529-002"></script>
+<script src="<%=basePath %>script/switch.js?v=20180529-004"></script>
<script type="text/javascript">
$("#li_switch").addClass("active open");
diff --git a/monitor-ui-web/src/main/webapp/script/switch.js b/monitor-ui-web/src/main/webapp/script/switch.js
index 75f99e9..b3ee773 100644
--- a/monitor-ui-web/src/main/webapp/script/switch.js
+++ b/monitor-ui-web/src/main/webapp/script/switch.js
@@ -1,4 +1,5 @@
$(document).ready(function () {
+ $("input.slider").slider();
sendAjax("post", "getNgixnStatus", null, "json", drawData, errorFunc);
});
@@ -111,29 +112,41 @@ function drawData(resp) {
container_az3.add(tmp);
}
- console.log(elbMap);
for(var key in data.lb_forward_nginx){
- var valMap=data.lb_forward_nginx[key];
- console.log(key);
+ var valueCloudAndWeightStr=data.lb_forward_nginx[key];
var tmpElbObj=elbMap[key];
var tmpCloud=key.substr(0,3);
- console.log(tmpCloud);
- if(valMap.indexOf("az1")>=0){
- var link = newLink(scene,tmpElbObj, az1Nginx);
- link.arrowsRadius = 10;
- $("#"+tmpCloud+"_target_operate_nginx_az1").prop("checked",true);
- }
- if(valMap.indexOf("az2")>=0){
- var link = newLink(scene,tmpElbObj, az2Nginx);
- link.arrowsRadius = 10;
- $("#"+tmpCloud+"_target_operate_nginx_az2").prop("checked",true);
- }
- if(valMap.indexOf("az3")>=0){
- var link = newLink(scene,tmpElbObj, az3Nginx);
- link.arrowsRadius = 10;
- $("#"+tmpCloud+"_target_operate_nginx_az3").prop("checked",true);
+ console.log(valueCloudAndWeightStr);
+ if(valueCloudAndWeightStr!=null&&valueCloudAndWeightStr.length>0){
+ var cloudAndWeightArray=valueCloudAndWeightStr.split(",");
+ for(var i=0;i<cloudAndWeightArray.length;i++){
+ var cloud=cloudAndWeightArray[i].split(":")[0];
+ var weight=cloudAndWeightArray[i].split(":")[1];
+
+ if(cloud.indexOf("az1")>=0){
+ var link = newLink(scene,tmpElbObj, az1Nginx,weight);
+ link.arrowsRadius = 10;
+ $("#"+tmpCloud+"_target_operate_nginx_az1").prop("checked",true);
+ $("#"+tmpCloud+"_input_slider_az1").slider("setValue",weight);
+ }
+ if(cloud.indexOf("az2")>=0){
+ var link = newLink(scene,tmpElbObj, az2Nginx,weight);
+ link.arrowsRadius = 10;
+ $("#"+tmpCloud+"_target_operate_nginx_az2").prop("checked",true);
+ $("#"+tmpCloud+"_input_slider_az2").slider("setValue",weight);
+ }
+ if(cloud.indexOf("az3")>=0){
+ var link = newLink(scene,tmpElbObj, az3Nginx,weight);
+ link.arrowsRadius = 10;
+ $("#"+tmpCloud+"_target_operate_nginx_az3").prop("checked",true);
+ $("#"+tmpCloud+"_input_slider_az3").slider("setValue",weight);
+ }
+ }
+
}
+
+
}
var az1Gateway = newNode(scene,appNodeX+120,appNodeY+370,appNodeW,appNodeH,'az1Gateway');