ops / monitor-ui · Commits

Go to a project

Authored by zhengyouwei
Commit 2a27417aaa8683f64f7697835fde08980cb8da25 1 parent b07cc07a

siwtch

Inline Side-by-side
Showing 5 changed files with 325 additions and 12 deletions
... ... @@ -105,6 +105,7 @@ public class HttpUriContants {
public static final String VIEW_NGINX_CONF = "/nginxswitch/viewNginxConf";
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";
/**
* luaswitch
... ... @@ -112,6 +113,7 @@ public class HttpUriContants {
public static final String VIEW_LUA_CONF = "/luaswitch/viewConf";
public static final String VIEW_TOCHANGE_LUA_CONF = "/luaswitch/viewToChangeLuaConf";
public static final String SWITCH_LUA = "/luaswitch/switchConf";
public static final String VIEW_CURRENT_CONF = "/luaswitch/viewCurrentConf";
/**
* lbswitch
... ...
... ... @@ -67,4 +67,15 @@ public class LuaSwitchCtrl {
return httpRestClient.defaultGet(HttpUriContants.SWITCH_LUA, BaseResponse.class, map);
}
/**
* 查看当前配置
*
* @return BaseResponse
*/
@RequestMapping(value = "viewCurrentConf")
@ResponseBody
public BaseResponse viewCurrentConf() {
return httpRestClient.defaultGet(HttpUriContants.VIEW_CURRENT_CONF, BaseResponse.class, null);
}
}
... ...
... ... @@ -80,4 +80,16 @@ public class NginxSwitchCtrl {
return httpRestClient.defaultGet(HttpUriContants.VIEW_TOCHANGE_NGINX_CONF, BaseResponse.class, map);
}
/**
* 查看 当前配置
*
*/
@RequestMapping(value = "viewCurrentConf")
@ResponseBody
public BaseResponse viewCurrentConf(String cloudName) {
Map<String, String> map = new HashMap<>();
map.put("cloudName", cloudName);
return httpRestClient.defaultGet(HttpUriContants.VIEW_NGINX_CURRENT_CONF, BaseResponse.class, map);
}
}
... ...
... ... @@ -70,9 +70,151 @@
<div class="container-fluid">
<div class="widget-box">
<div style="float: left;width: 800px;color: #D3D3D3;height: 600px;">
<canvas width="800" height="550" id="canvas"></canvas>
</div>
<div class="widget-content nopadding" style="margin-left: 800px;border-left: 1px solid #E5E5E5;">
<div class="widget-content nopadding">
<div class="tree_container" style="height: 540px;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="luaViewConf()">
<em class="icon-cogs bigger-110"></em>
查看当前配置
</button>
<h3 class="header smaller red"></h3>
<div id="lua-div" class="btn-group">
</div>
</div>
<canvas width="850" height="550" id="canvas"></canvas>
<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="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" id="myTab">
<li class="active" style="width: 110px">
<a data-toggle="tab" href="#home">
<em class="green icon-cloud bigger-110"></em>
aws
</a>
</li>
<li style="width: 110px">
<a data-toggle="tab" href="#profile">
<em class="green icon-cloud bigger-110"></em>
qq
</a>
</li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane in active">
<button class="btn btn-sm btn-primary"
onclick="nginxViewConf('aws')">
<em class="icon-cogs bigger-110"></em>
查看当前配置
</button>
<h3 class="header smaller red"></h3>
<div class="btn-group">
<button class="btn btn-sm " disabled="disabled">
线上切换
</button>
<button class="btn btn-sm btn-success"
onclick="nginxInitSwitch('aws','qcloud','online')">
<em class="icon-cogs bigger-110"></em>
切向qcloud
</button>
<button class="btn btn-sm btn-success" onclick="nginxInitSwitch('aws','aws','online')">
<em class="icon-cogs bigger-110"></em>
切向aws
</button>
<br><br>
<button class="btn btn-sm " disabled="disabled">
灰度切换
</button>
<button class="btn btn-sm btn-success" onclick="nginxInitSwitch('aws','qcloud','gray')">
<em class="icon-cogs bigger-110"></em>
切向qcloud
</button>
<button class="btn btn-sm btn-success" onclick="nginxInitSwitch('aws','aws','gray')">
<em class="icon-cogs bigger-110"></em>
切向aws
</button>
<button class="btn btn-sm btn-success" onclick="nginxInitSwitch('aws','gray','gray')">
<em class="icon-cogs bigger-110"></em>
切向gray
</button>
</div>
</div>
<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>
<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>
切向qcloud
</button>
<button class="btn btn-sm btn-success"
onclick="nginxInitSwitch('qcloud','aws','online')">
<em class="icon-cogs bigger-110"></em>
切向aws
</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>
切向qcloud
</button>
<button class="btn btn-sm btn-success" onclick="nginxInitSwitch('qcloud','aws','gray')">
<em class="icon-cogs bigger-110"></em>
切向aws
</button>
<button class="btn btn-sm btn-success" onclick="nginxInitSwitch('qcloud','gray','gray')">
<em class="icon-cogs bigger-110"></em>
切向gray
</button>
</div>
</div>
</div>
</div>
</div><!-- /span -->
<div class="vspace-xs-6"></div>
</div><!-- /row -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
... ...
... ... @@ -106,31 +106,135 @@ function drawData(resp) {
}
if('aws' == data.defaultDns){
var link = newFoldLink(scene,appNode, awsElb, 'defaultDns');
var link = newFoldLink(scene,appNode, awsElb, 'defaultDns','',5);
link.arrowsRadius = 10;
}else{
var link = newFoldLink(scene,appNode, qqElb, 'defaultDns');
var link = newFoldLink(scene,appNode, qqElb, 'defaultDns','',5);
link.arrowsRadius = 10;
}
if('aws' == data.qqDns){
var link = newFoldLink(scene,appNode, awsElb, 'otherDns');
var link = newFoldLink(scene,appNode, awsElb, 'otherDns','',5);
link.arrowsRadius = 10;
}else{
var link = newFoldLink(scene,appNode, qqElb, 'otherDns');
var link = newFoldLink(scene,appNode, qqElb, 'otherDns','',5);
link.arrowsRadius = 10;
}
//创建lua切换按钮
createLuaSwitchButton(data.luaType);
}
/**
* 创建lua切换按钮
* @param luaType
*/
function createLuaSwitchButton(luaType){
var awsButton = "<button class=\"btn btn-sm btn-success\" onclick=\"luaInitSwitch(\'aws\')\"> <em class=\"icon-cogs bigger-110\"></em>切向aws</button>";
var qqButton = "<button class=\"btn btn-sm btn-success\" onclick=\"luaInitSwitch(\'qcloud\')\"> <em class=\"icon-cogs bigger-110\"></em>切向qcloud</button>";
var mixButton = "<button class=\"btn btn-sm btn-success\" onclick=\"luaInitSwitch(\'mix\')\"> <em class=\"icon-cogs bigger-110\"></em>切向双云</button>";
if(luaType == 'aws'){
$("#lua-div").html(qqButton + mixButton);
}else if (luaType == 'qq'){
$("#lua-div").html(awsButton + mixButton);
}else{
$("#lua-div").html(awsButton + qqButton);
}
}
/**
* "*切换"按钮点击事件，打开确认操作对话框
* @param cloudName 目标中心名称
*/
function luaInitSwitch(cloudName) {
var dialog = $("<div>").appendTo($("body"));
dialog.dialog({
title: "你确定切换吗",
backdrop: "static",
content: "你确定要将Lua脚本切换至" + cloudName + "吗？",
buttons: [{
text: "否",
className: "btn-danger",
onclick: function () {
dialog.dialog("hide");
}
}, {
text: "是",
className: "btn-success",
onclick: function () {
var param = {
cloudName: cloudName
};
sendAjax("post", getUrlBasePath() + "/luaswitch/viewToChangeLuaConf", param, "text", luaViewToChangeSuccess, errorFunc);
dialog.dialog("hide");
}
}]
});
}
/**
* 打开对话框，展示切换后的配置
* @param resp 切换后的响应数据
*/
function luaViewToChangeSuccess(resp) {
var data = JSON.parse(resp);
var dialog = $("<div>").appendTo($("body"));
dialog.dialog({
title: "切换结果",
backdrop: "static",
content: "<pre>" + data.data + "</pre>",
buttons: [{
text: "否",
className: "btn-danger",
onclick: function () {
dialog.dialog("hide");
}
}, {
text: "确定",
className: "btn-success",
onclick: function () {
sendAjax("post", getUrlBasePath() + "/luaswitch/switchConf", {}, "text", switchSuccess, errorFunc);
dialog.dialog("hide");
toWait();
}
}]
}).find(".modal-body").css({
height: "650px"
});
}
/**
* 查看当前lua配置
*/
function luaViewConf(){
sendAjax("post", getUrlBasePath() + "/luaswitch/viewCurrentConf", {}, "text", viewCurrentConf, errorFunc);
}
/**
* 查看当前nginx配置
*/
function nginxViewConf(cloud){
sendAjax("post", getUrlBasePath() + "/nginxswitch/viewCurrentConf", {cloudName:cloud}, "text", viewCurrentConf, errorFunc);
}
/**
* 切换配置成功，跳转回首页
*/
function switchSuccess() {
window.location.href = getUrlBasePath() + "/topoSwitch/toTopoSwitch";
}
/**
* "切向*"按钮点击事件，打开确认操作对话框
* @param cloudName 源中心名称
* @param target 目标中心名称
* @param onlineOrGray 切换：线上/灰度
*/
function initSwitch(cloudName, target, onlineOrGray) {
function nginxInitSwitch(cloudName, target, onlineOrGray) {
var arr = getNoChangeIpArr(cloudName, onlineOrGray);
if (undefined === arr || null === arr || 0 === arr.length) {
prompt("提示", "无可切换的gateway！");
... ... @@ -158,7 +262,7 @@ function initSwitch(cloudName, target, onlineOrGray) {
onlineOrGray: onlineOrGray,
noChangeIps: JSON.stringify(arr)
};
sendAjax("post", "viewToChangeNginxConf", param, "text", viewToChangeSuccess, errorFunc);
sendAjax("post", getUrlBasePath() + "/nginxswitch/viewToChangeNginxConf", param, "text", nginxViewToChangeSuccess, errorFunc);
dialog.dialog("hide");
}
}]
... ... @@ -169,7 +273,7 @@ function initSwitch(cloudName, target, onlineOrGray) {
* 打开对话框，展示切换后的配置
* @param resp 切换后的响应数据
*/
function viewToChangeSuccess(resp) {
function nginxViewToChangeSuccess(resp) {
var data = JSON.parse(resp);
var dialog = $("<div>").appendTo($("body"));
dialog.dialog({
... ... @@ -189,7 +293,7 @@ function viewToChangeSuccess(resp) {
var param = {
cloudName: data.data.cloudName
};
sendAjax("post", "switchNginxConf", param, "text", switchSuccess, errorFunc);
sendAjax("post", getUrlBasePath() + "/nginxswitch/switchNginxConf", param, "text", switchSuccess, errorFunc);
dialog.dialog("hide");
toWait();
... ... @@ -200,11 +304,28 @@ function viewToChangeSuccess(resp) {
});
}
/**
* 切换配置成功，跳转回首页
* 打开对话框，查看当前配置
* @param resp 切换后的响应数据
*/
function switchSuccess() {
window.location.href = getUrlBasePath() + "/nginxswitch/toNginxSwitch";
function viewCurrentConf(resp) {
var data = JSON.parse(resp);
var dialog = $("<div>").appendTo($("body"));
dialog.dialog({
title: "当前配置",
backdrop: "static",
content: "<pre>" + data.data + "</pre>",
buttons: [{
text: "确定",
className: "btn-danger",
onclick: function () {
dialog.dialog("hide");
}
}]
}).find(".modal-body").css({
height: "650px"
});
}
/**
... ... @@ -286,6 +407,31 @@ function toWait() {
// 节点
function newNode(scene,x, y, w, h, text) {
var node = new JTopo.Node(text);
... ...