ops / monitor-ui · Commits

Go to a project

Authored by qinchao
Commit c801a0d4f18433405040430da33f1e8a32b46dab 1 parent 79cd5d70

nginx切换调整

Inline Side-by-side
Showing 5 changed files with 153 additions and 167 deletions
... ... @@ -60,6 +60,8 @@ public enum UserOperateEnum {
nodeBuild_switchAz2("/nodeBuild/switchAz2","node发布az2区域灰度与线上自动切换",true),
topoSwitch_switchLbWeight("/topoSwitch/switchLbWeight","NGINX切换权重",true),
/************************ 管理员 ************************/
//redis缓存清理
redisClear_clear("/redisClear/clear","redis缓存清理",true),
... ...
... ... @@ -157,6 +157,7 @@ public class HttpUriContants {
public static final String VIEW_TOCHANGE_NGINX_CONF = "/nginxswitch/viewToChangeNginxConf";
public static final String SWITCH_NGINX = "/nginxswitch/switchNginxConf";
public static final String VIEW_NGINX_CURRENT_CONF = "/nginxswitch/viewCurrentConf";
public static final String NGINX_SWTICH_LB_WEIGHT = "/nginxswitch/switchLbWeight";
/**
* luaswitch
... ...
package com.ui.ctrl;
import com.alibaba.fastjson.JSONArray;
import com.google.common.collect.Lists;
import com.ui.contants.HttpUriContants;
import com.ui.http.HttpRestClient;
import com.ui.model.BaseResponse;
import com.ui.project.ProjectOnline;
import org.apache.commons.collections.CollectionUtils;
import org.apache.commons.lang.StringUtils;
import org.slf4j.Logger;
... ... @@ -12,6 +14,7 @@ import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.core.ParameterizedTypeReference;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;
... ... @@ -143,4 +146,22 @@ public class TopoSwitchCtrl {
return new BaseResponse(resultMap);
}
/**
* 切换lb权重，nginx指向变化
* @return
*/
@RequestMapping(value = "switchLbWeight", method = RequestMethod.POST)
@ResponseBody
public BaseResponse switchLbWeight(String cloudName,String target) {
if(StringUtils.isBlank(cloudName)||StringUtils.isBlank(target)){
return new BaseResponse(201,"switchLbWeight传入参数为空");
}
Map<String,String> map=new HashMap<>();
map.put("cloudName",cloudName);
map.put("target",target);
return httpRestClient.defaultGet(HttpUriContants.NGINX_SWTICH_LB_WEIGHT,BaseResponse.class,map);
}
}
\ No newline at end of file
... ...
... ... @@ -29,7 +29,7 @@
<script src="<%=basePath %>js/typeahead-bs2.min.js" type="text/javascript"></script>
<script src="<%=basePath %>js/ace-elements.min.js" type="text/javascript"></script>
<script src="<%=basePath %>js/ace.min.js" type="text/javascript"></script>
<script src="<%=basePath %>js/layer/layer.js" type="text/javascript"></script>
<script src="<%=basePath %>js/layer/v311/layer.js" type="text/javascript"></script>
<script src="<%=basePath %>/js/unicorn.js" type="text/javascript"></script>
<script src="<%=basePath %>js/bootstrap-plugin/datetimepicker/moment-with-locales.js" charset="UTF-8"
type="text/javascript"></script>
... ... @@ -76,186 +76,117 @@
</div>
</div>
<div class="widget-box">
<div class="widget-content nopadding" >
<div class="widget-content nopadding">
<div class="tree_container" style="color: black;overflow:auto;">
<div class="panel panel-default">
<div class="widget-title" style="height: 50px;">
<h5 style="display: inline">入口切换</h5>
</div>
<div class="panel-body">
<button class="btn btn-sm btn-primary"
onclick="dnsViewConf()">
<em class="icon-cogs bigger-110"></em>
查看当前入口配置
</button>
<h3 class="header smaller red"></h3>
<div id="dns-div" class="btn-group">
</div>
</div>
<div class="widget-title" style="height: 50px;">
<h5 style="display: inline">直连切换</h5>
</div>
<div class="panel-body">
<button class="btn btn-sm btn-primary"
onclick="luaViewConf()">
<em class="icon-cogs bigger-110"></em>
查看当前配置
</button>
<h3 class="header smaller red"></h3>
<div id="lua-div" class="btn-group">
</div>
</div>
<div class="panel panel-default">
<div class="widget-title" style="height: 50px;">
<h5 style="display: inline">nginx切换</h5>
</div>
<div id="nginx-div" class="panel-body">
<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="form-group">
<button class="col-sm-1 btn btn-sm " disabled="disabled">
az1 area
</button>
<div class="col-sm-8" style="display: inline">
<div class="rdio rdio-default" style="display:inline;">
<input type="radio" name="target_operate_nginx" id="az1_target_operate_az1"
value="az1" />
<label for="az1_target_operate_az1">az1</label>
</div>
<div class="row">
<div class="col-xs-12">
<!-- PAGE CONTENT BEGINS -->
<div class="rdio rdio-default" style="display:inline;margin-left:30px;">
<input type="radio" name="target_operate_nginx" id="az1_target_operate_az2"
value="az2" />
<label for="az1_target_operate_az2">az2</label>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 widget-container-span">
<div class="tabbable">
<ul class="nav nav-tabs" id="myTab">
<div class="rdio rdio-default" style="display:inline;margin-left:30px;">
<input type="radio" name="target_operate_nginx" id="az1_target_operate_az3"
value="az3" />
<label for="az1_target_operate_az3">az3</label>
</div>
<li class="active" style="width: 110px">
<a data-toggle="tab" href="#profile">
<em class="green icon-cloud bigger-110"></em>
az1
</a>
</li>
<button class=" btn btn-sm btn-success"
style="display:inline;margin-left:30px;"
onclick="nginxInitSwitch('az1')">
<em class="icon-cogs bigger-110"></em>
切换az1
</button>
</div>
</div>
<br><br>
<div class="form-group">
<button class="col-sm-1 btn btn-sm " disabled="disabled">
az2 area
</button>
<div class="col-sm-8" style="display: inline">
<div class="rdio rdio-default" style="display:inline;">
<input type="radio" name="target_operate_nginx" id="az2_target_operate_az1"
value="az1" />
<label for="az2_target_operate_az1">az1</label>
</div>
<li style="width: 110px">
<a data-toggle="tab" href="#home">
<em class="green icon-cloud bigger-110"></em>
az2
</a>
</li>
<div class="rdio rdio-default" style="display:inline;margin-left:30px;">
<input type="radio" name="target_operate_nginx" id="az2_target_operate_az2"
value="az2" />
<label for="az2_target_operate_az2">az2</label>
</div>
</ul>
<div class="rdio rdio-default" style="display:inline;margin-left:30px;">
<input type="radio" name="target_operate_nginx" id="az2_target_operate_az3"
value="az3" />
<label for="az2_target_operate_az3">az3</label>
</div>
<div class="tab-content">
<div id="profile" class="tab-pane">
<button class="btn btn-sm btn-primary"
onclick="nginxViewConf('qcloud')">
<em class="icon-cogs bigger-110"></em>
查看当前配置
</button>
<h3 class="header smaller red"></h3>
<button class=" btn btn-sm btn-success"
style="display:inline;margin-left:30px;"
onclick="nginxInitSwitch('az2')">
<em class="icon-cogs bigger-110"></em>
切换az2
</button>
</div>
</div>
<div class="btn-group">
<button class="btn btn-sm " disabled="disabled">
线上切换
</button>
<button class="btn btn-sm btn-success"
onclick="nginxInitSwitch('qcloud','qcloud','online')">
<em class="icon-cogs bigger-110"></em>
切向az1
</button>
<button class="btn btn-sm btn-success"
onclick="nginxInitSwitch('qcloud','qcloud_az2','online')">
<em class="icon-cogs bigger-110"></em>
切向az2
</button>
<br/><br/>
<button class="btn btn-sm " disabled="disabled">
灰度切换
</button>
&nbsp;&nbsp;
<button class="btn btn-sm btn-success"
onclick="nginxInitSwitch('qcloud','qcloud','gray')">
<em class="icon-cogs bigger-110"></em>
切向az1
</button>
<button class="btn btn-sm btn-success"
onclick="nginxInitSwitch('qcloud','qcloud_az2','gray')">
<em class="icon-cogs bigger-110"></em>
切向az2
</button>
<button class="btn btn-sm btn-success"
onclick="nginxInitSwitch('qcloud','gray','gray')">
<em class="icon-cogs bigger-110"></em>
切向gray
</button>
<br><br>
<div class="form-group">
<button class="col-sm-1 btn btn-sm " disabled="disabled">
az3 area
</button>
<div class="col-sm-8" style="display: inline">
<div class="rdio rdio-default" style="display:inline;">
<input type="radio" name="target_operate_nginx" id="az3_target_operate_az1"
value="az1" />
<label for="az3_target_operate_az1">az1</label>
</div>
</div>
</div>
<div class="rdio rdio-default" style="display:inline;margin-left:30px;">
<input type="radio" name="target_operate_nginx" id="az3_target_operate_az2"
value="az2" />
<label for="az3_target_operate_az2">az2</label>
</div>
<div id="home" class="tab-pane in active">
<button class="btn btn-sm btn-primary"
onclick="nginxViewConf('qcloud_az2')">
<em class="icon-cogs bigger-110"></em>
查看当前配置
</button>
<h3 class="header smaller red"></h3>
<div class="rdio rdio-default" style="display:inline;margin-left:30px;">
<input type="radio" name="target_operate_nginx" id="az3_target_operate_az3"
value="az3" />
<label for="az3_target_operate_az3">az3</label>
</div>
<div class="btn-group">
<button class="btn btn-sm " disabled="disabled">
线上切换
</button>
<button class="btn btn-sm btn-success"
onclick="nginxInitSwitch('qcloud_az2','qcloud','online')">
<em class="icon-cogs bigger-110"></em>
切向az1
</button>
<button class="btn btn-sm btn-success"
onclick="nginxInitSwitch('qcloud_az2','qcloud_az2','online')">
<em class="icon-cogs bigger-110"></em>
切向az2
</button>
<br><br>
<button class="btn btn-sm " disabled="disabled">
灰度切换
</button>
<button class="btn btn-sm btn-success"
onclick="nginxInitSwitch('qcloud_az2','qcloud','gray')">
<em class="icon-cogs bigger-110"></em>
切向az1
</button>
<button class="btn btn-sm btn-success"
onclick="nginxInitSwitch('qcloud_az2','qcloud_az2','gray')">
<em class="icon-cogs bigger-110"></em>
切向az2
</button>
<button class="btn btn-sm btn-success"
onclick="nginxInitSwitch('qcloud_az2','gray','gray')">
<em class="icon-cogs bigger-110"></em>
切向gray
</button>
</div>
</div>
</div>
</div>
</div>
<!-- /span -->
<button class=" btn btn-sm btn-success"
style="display:inline;margin-left:30px;"
onclick="nginxInitSwitch('az3')">
<em class="icon-cogs bigger-110"></em>
切换az3
</button>
</div>
</div>
<div class="vspace-xs-6"></div>
</div>
<!-- /row -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="<%=basePath %>script/common/genarate_left_panel.js?v=<%=ProjectConstant.MENU_VERSION %>"></script>
<script src="<%=basePath %>script/switch.js?v=20180514-007"></script>
<script src="<%=basePath %>script/switch.js?v=20180528-002"></script>
<script type="text/javascript">
$("#li_switch").addClass("active open");
... ...
... ... @@ -274,6 +274,9 @@ function drawData(resp) {
var link = newLink(scene,az3Nginx, az3Gateway,"");
link.arrowsRadius = 10;
//nginx切换区域
$("#nginxSwitchDiv").show();
//创建lua切换按钮
//createLuaSwitchButton(data.luaType);
... ... @@ -502,12 +505,17 @@ function nginxInitSwitch(cloudName, target, onlineOrGray) {
// prompt("提示", "无可切换的gateway！");
// return;
//}
var target = $('input:radio[name=target_operate_nginx]:checked').val();
if(!target){
prompt("提示", "请选择目标nginx！");
return;
}
var dialog = $("<div>").appendTo($("body"));
dialog.dialog({
title: "你确定切换吗",
backdrop: "static",
content: "你确定要将" + cloudName + "上的" + onlineOrGray + "流量切向" + target + "吗？",
content: "你确定要将 " + cloudName + " 上的lb " + "流量切向 " + target + " 吗？",
buttons: [{
text: "否",
className: "btn-danger",
... ... @@ -520,11 +528,34 @@ function nginxInitSwitch(cloudName, target, onlineOrGray) {
onclick: function () {
var param = {
cloudName: cloudName,
target: target,
onlineOrGray: onlineOrGray
//noChangeIps: JSON.stringify(arr)
target: target
};
sendAjax("post", getUrlBasePath() + "/nginxswitch/viewToChangeNginxConf", param, "text", nginxViewToChangeSuccess, errorFunc);
var layerMirror=layer.open( {
type:3,
//area: ['800px', '500px'],
content:"准备切换，请等待",
time: 0 //不自动关闭
});
$.ajax({
url: contextPath+'topoSwitch/switchLbWeight',
type: "post",
dataType: "json",
data: param ,
success: function (data) {
console.log(data);
if(data.code != 200){
layer.close(layerMirror);
alert(data.message);
}else{
window.location.href = contextPath + "topoSwitch/toTopoSwitch";
}
},
error: function (e) {
alert("系统错误");
}
});
dialog.dialog("hide");
}
}]
... ...