ops / monitor-ui · Commits

Go to a project

Authored by qinchao
Commit 66ed1c91f5ed2f4c4e85a5b3376a8d1272dc93dd 1 parent 751abddf

nginx切换调整

Inline Side-by-side
Showing 3 changed files with 198 additions and 24 deletions
... ... @@ -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)));
}
}
... ...
... ... @@ -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>
&nbsp;&nbsp;&nbsp;&nbsp;
<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>
&nbsp;&nbsp;&nbsp;&nbsp;
<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>
&nbsp;&nbsp;&nbsp;&nbsp;
<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>
&nbsp;&nbsp;&nbsp;&nbsp;
<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>
&nbsp;&nbsp;&nbsp;&nbsp;
<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>
&nbsp;&nbsp;&nbsp;&nbsp;
<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>
&nbsp;&nbsp;&nbsp;&nbsp;
<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>
&nbsp;&nbsp;&nbsp;&nbsp;
<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>
&nbsp;&nbsp;&nbsp;&nbsp;
<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");
... ...
$(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');
... ...