ops / monitor-ui · Commits

Go to a project

Authored by qinchao
Commit dffbcabe99f2299be88dd27a1c37c2b1c0fe954e 1 parent 233f1da2

pch5切换

Inline Side-by-side
Showing 3 changed files with 458 additions and 1 deletions
package com.ui.ctrl;
import com.ui.http.HttpRestClient;
import com.ui.model.BaseResponse;
import org.springframework.beans.factory.annotation.Autowired;
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;
/**
* pch5切换
*
* @author craig.qin 2018-3-6
*/
@Controller
@RequestMapping("/pch5Switch")
public class Pch5SwitchCtrl {
@Autowired
HttpRestClient httpRestClient;
@RequestMapping(value = "/toPch5Switch")
public ModelAndView toPch5Switch() {
ModelAndView mdv = new ModelAndView("pch5Switch/pch5switch");
return mdv;
}
/**
* 解析当前配置，绘图用
*
*/
@RequestMapping(value = "/getElbStatus")
@ResponseBody
public BaseResponse getElbStatus() {
return httpRestClient.defaultGet( "/pch5Switch/getElbStatus", BaseResponse.class, null);
}
/**
* 可用区切换
*
*/
@RequestMapping(value = "/switchArea",method = RequestMethod.POST)
@ResponseBody
public BaseResponse switchArea(String area) {
return httpRestClient.defaultGet( "/pch5Switch/switchArea?area="+area, BaseResponse.class, null);
}
/**
* az2切换
*
*/
@RequestMapping(value = "/switchAz2",method = RequestMethod.POST)
@ResponseBody
public BaseResponse switchAz2(String onlineOrGray) {
return httpRestClient.defaultGet( "/pch5Switch/switchAz2?onlineOrGray="+onlineOrGray, BaseResponse.class, null);
}
}
... ...
<%@page language="java" contentType="text/html;charset=utf-8" %>
<%@page import="com.ui.contants.ProjectConstant"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<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"/>
<link rel="stylesheet" href="<%=basePath %>css/jquery-ui.css"/>
<link rel="stylesheet" href="<%=basePath %>css/bootstrap-responsive.min.css"/>
<link rel="stylesheet" href="<%=basePath %>css/uniform.css"/>
<link rel="stylesheet" href="<%=basePath %>css/select2.css"/>
<link rel="stylesheet" href="<%=basePath %>css/font-awesome.min.css"/>
<link rel="stylesheet" href="<%=basePath %>css/dnspod_switch.css"/>
<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"/>
<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>
<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/unicorn.js" type="text/javascript"></script>
<script src="<%=basePath %>js/bootstrap-plugin/datetimepicker/moment-with-locales.js" charset="UTF-8"
type="text/javascript"></script>
<script src="<%=basePath %>js/bootstrap-plugin/datetimepicker/bootstrap-datetimepicker.js" charset="UTF-8"
type="text/javascript"></script>
<script src="<%=basePath %>js/global.js" charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath %>js/bootstrap-plugin/bootstrap.pagination.js" charset="UTF-8"
type="text/javascript"></script>
<script src="<%=basePath %>js/bootstrap-plugin/bootstrap.table.js" charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath %>js/bootstrap-plugin/bootstrap.dialog.js" charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath %>js/bootstrap-plugin/bootstrap.form.js" charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath %>js/bootstrap-plugin/bootstrap.panel.js" charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath %>js/bootstrap-plugin/bootstrap.alerts.js" charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath %>js/bootstrap-plugin/bootstrap.accordion.js" charset="UTF-8"
type="text/javascript"></script>
<script src="<%=basePath %>js/bootstrap-plugin/bootstrap.breadcrumb.js" charset="UTF-8"
type="text/javascript"></script>
<script src="<%=basePath %>js/bootstrap-plugin/bootstrap.validate.js" charset="UTF-8"
type="text/javascript"></script>
<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="<%=basePath %>js/jtopo-0.4.8-min.js"></script>
<script src="<%=basePath %>js/toolbar.js"></script>
<script>
var contextPath = '<%=basePath %>';
</script>
<title>YOHO!运维</title>
</head>
<body style="background-color: #444444;font-size: 14px">
<!-- 头部 -->
<div id="head">
</div>
<!-- 右侧具体内容 -->
<div id="content">
<div class="container-fluid">
<div class="widget-box">
<div style="float: left;width: 600px;color: #D3D3D3;height: 450px;">
<canvas width="600" height="450" id="canvas"></canvas>
</div>
<div class="widget-content nopadding" style="margin-left: 600px;border-left: 1px solid #E5E5E5;">
<div id="operateDiv" 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">pch5可用区切换</h5>
</div>
<div class="panel-body">
<div class="btn-group">
<button class="btn btn-sm btn-primary"
onclick="switchArea('all')">
<em class="icon-cogs bigger-110"></em>
指向az1+az2
</button>
<button style="margin-left:20px;" class="btn btn-sm btn-danger"
onclick="switchArea('az1')">
<em class="icon-cogs bigger-110"></em>
指向az1
</button>
<button style="margin-left:20px;" class="btn btn-sm btn-danger"
onclick="switchArea('az')">
<em class="icon-cogs bigger-110"></em>
指向az2
</button>
</div>
</div>
<h3 class="header smaller red"></h3>
<div class="widget-title" style="height: 50px;">
<h5 style="display: inline">pch5-az2 灰度环境切换</h5>
</div>
<div class="panel-body">
<div class="btn-group">
<button class="btn btn-sm btn-primary"
onclick="az2ServiceSwitch('online')">
<em class="icon-cogs bigger-110"></em>
关闭灰度
</button>
<button style="margin-left:20px;" class="btn btn-sm btn-danger"
onclick="az2ServiceSwitch('gray')">
<em class="icon-cogs bigger-110"></em>
启用灰度
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="<%=basePath %>script/common/genarate_left_panel.js?v=<%=ProjectConstant.MENU_VERSION %>"></script>
<script type="text/javascript">
$("#li_switch").addClass("active open");
$("#li_pch5switch").addClass("active");
</script>
</body>
</html>
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
type: "post",
url: contextPath+"/pch5Switch/getElbStatus",
data: {},
dataType: "json",
success: function(resp){
if(resp.code==200){
drawData(resp.data);
}else{
//layer.msg("绘图异常："+resp.message, {icon: 2});
$("#operateDiv").html('<div style="height:450px;color:red;padding-top:50px;">配置错误<br>'+resp.message+'</div>');
}
},
error: function(){
$("#operateDiv").html('<div style="height:450px;color:red;padding-top:50px;">错误error<br>获取pch5-elb配置信息异常</div>');
}
});
});
/**
* pch5Nginx切换
*/
function switchArea(targetAz) {
var msgInfo=targetAz;
if("all"==targetAz){
msgInfo = "az1+az2";
}
var dialog = $("<div>").appendTo($("body"));
dialog.dialog({
title: "你确定切换pch5可用区吗",
backdrop: "static",
content: "你确定要将 可用区 流量切向" + msgInfo + "吗？",
buttons: [{
text: "否",
className: "btn-danger",
onclick: function () {
dialog.dialog("hide");
}
}, {
text: "是",
className: "btn-success",
onclick: function () {
var param = {
area: targetAz
};
$.ajax({
type: "post",
url: contextPath+"/pch5Switch/switchArea",
data: param,
dataType: "json",
success: function(resp){
if(resp.code==200){
/**
* 切换配置成功，跳转回首页
*/
window.location.href = contextPath + "/pch5Switch/toPch5Switch";
}else{
layer.msg("切换pch5-elb可用区发送异常："+resp.message, {icon: 2});
}
},
error: function(){
layer.msg("切换pch5-elb可用区发送异常", {icon: 2});
}
});
dialog.dialog("hide");
}
}]
});
}
/**
* az2服务切换
*/
function az2ServiceSwitch(onlineOrGray) {
var dialog = $("<div>").appendTo($("body"));
dialog.dialog({
title: "你确定切换吗",
backdrop: "static",
content: "你确定要将 az2 流量切向" + onlineOrGray + "吗？",
buttons: [{
text: "否",
className: "btn-danger",
onclick: function () {
dialog.dialog("hide");
}
}, {
text: "是",
className: "btn-success",
onclick: function () {
var param = {
onlineOrGray: onlineOrGray
};
$.ajax({
type: "post",
url: contextPath+"/pch5Switch/switchAz2",
data: param,
dataType: "json",
success: function(resp){
if(resp.code==200){
/**
* 切换配置成功，跳转回首页
*/
window.location.href = contextPath + "/pch5Switch/toPch5Switch";
}else{
layer.msg("az2 灰度切换异常："+resp.message, {icon: 2});
}
},
error: function(){
layer.msg("az2 灰度切换异常", {icon: 2});
}
});
dialog.dialog("hide");
}
}]
});
}
/**
* 展示画布 和 数据
* @param resp
*/
function drawData(respData) {
console.log(respData);
var canvas = document.getElementById('canvas');
var stage = new JTopo.Stage(canvas);
//显示工具栏
//showJTopoToobar(stage);
var scene = new JTopo.Scene();
stage.add(scene);
scene.background = contextPath + "img/bg.jpg";
var appNodeX = 100;
var appNodeY = 0;
var appNodeW = 30;
var appNodeH = 26;
//定义container for az1
var container_az1 = new JTopo.Container('az1');
container_az1.setBound(appNodeX+100, appNodeY+200, 300, 280);
container_az1.fontColor = '100,255,0';
container_az1.font = '18pt 微软雅黑';
scene.add(container_az1);
//定义container的边界
container_az1.add(newNode(scene,appNodeX+10,appNodeY+180,1,1));//左上
container_az1.add(newNode(scene,appNodeX+10,appNodeY+380,1,1));//左下
container_az1.add(newNode(scene,appNodeX+100,appNodeY+180,1,1));//右上
//定义container for az2
var margin_left_container= 250;
var container_az2 = new JTopo.Container('az2');
container_az2.setBound(appNodeX+100, appNodeY+200, 300, 280);
container_az2.fontColor = '100,255,0';
container_az2.font = '18pt 微软雅黑';
scene.add(container_az2);
//定义container的边界
container_az2.add(newNode(scene,appNodeX+10 + margin_left_container,appNodeY+180,1,1));//左上
container_az2.add(newNode(scene,appNodeX+10 + margin_left_container,appNodeY+380,1,1));//左下
container_az2.add(newNode(scene,appNodeX+100 + margin_left_container,appNodeY+180,1,1));//右上
var prod_elb = newNode(scene,appNodeX+155,appNodeY+50,appNodeW,appNodeH,'prod_elb');
//所有az1机器
if(respData.az1Ips){
$.each(respData.az1Ips, function(index, value, array) {
var host = newNode(scene,appNodeX+50,appNodeY+200+index*140,appNodeW,appNodeH,value);
container_az1.add(host);
});
if(respData.inAz1){
var link = newLink(scene,prod_elb, container_az1,"");
link.arrowsRadius = 10;
link.strokeColor = '0,250,0';
}
}
//所有az2机器，az2机器一定挂载的grayElb，但是不一定挂载到prodElb
if(respData.az2Ips){
$.each(respData.az2Ips, function(index, value, array) {
var host = newNode(scene,appNodeX+300,appNodeY+200+index*140,appNodeW,appNodeH,value);
container_az2.add(host);
});
if(respData.inAz2){
var link = newLink(scene,prod_elb, container_az2,"");
link.arrowsRadius = 10;
link.strokeColor = '0,250,0';
}
}
return ;
var data = resp.data;
var grayLinkColor="220,20,60";
//线下店服务指向
if('online' == data.storeService){
var link = newLink(scene,storeNginx, storeService,"online");
link.arrowsRadius = 10;
}else if('gray' == data.storeService){
var link = newLink(scene,storeNginx, storeService_gray,"gray",grayLinkColor);
link.arrowsRadius = 10;
}
//延展服务指向
if('online' == data.extendService){
var link = newLink(scene,storeNginx, extendService,"online");
link.arrowsRadius = 10;
}else if('gray' == data.extendService){
var link = newLink(scene,storeNginx, extendService_gray,"gray",grayLinkColor);
link.arrowsRadius = 10;
}
}
// 节点
function newNode(scene,x, y, w, h, text) {
var node = new JTopo.Node(text);
node.setLocation(x, y);
node.setSize(w, h);
if("prod_elb"==text||"gray_elb"==text){
node.setImage(contextPath + 'img/pstn/cloud.png', true);
node.textPosition = 'Middle_Center';// 文字居中
}else if(text!=null&&text.length>0){
node.setImage(contextPath + 'img/pstn/msc.png', true);
}
scene.add(node);
return node;
}
// 简单连线
function newLink(scene,nodeA, nodeZ, text,color,) {
var link = new JTopo.Link(nodeA, nodeZ, text);
link.lineWidth = 3; // 线宽
link.bundleOffset = 60; // 折线拐角处的长度
link.bundleGap = 20; // 线条之间的间隔
link.textOffsetY = 3; // 文本偏移量（向下3个像素）
if(color){
link.strokeColor =color;
}else{
link.strokeColor = '0,200,255';
}
scene.add(link);
return link;
}
</script>
\ No newline at end of file
... ...
... ... @@ -124,7 +124,7 @@ innerHTML += "<li id='li_javarollbackbytime'><a id='li_javarollbackbytime_a' hre
innerHTML += "</ul></li>";
/*switch*/
innerHTML += "<li class='submenu' id='li_switch'><a id='li_switch_a' href='#'><i class='icon icon-th-list'></i> <span>关键切换</span><span class='label'>6</span></a>";
innerHTML += "<li class='submenu' id='li_switch'><a id='li_switch_a' href='#'><i class='icon icon-th-list'></i> <span>关键切换</span><span class='label'>7</span></a>";
innerHTML += "<ul>";
innerHTML += "<li id='li_javarestart'><a id='li_javarestart_a' href='#'>java重启</a></li>";
innerHTML += "<li id='li_nodeMonitor'><a id='li_nodeMonitor_a' href=''><i class='icon icon-th'></i> <span>node重启</span></a></li>";
... ... @@ -132,6 +132,7 @@ innerHTML += "<li id='li_centerswitch_new'><a id='li_centerswitch_new_a' href='#
innerHTML += "<li id='li_switchtopo'><a id='li_switchtopo_a' href='#'>NGINX切换</a></li>";
innerHTML += "<li id='li_switchsearch'><a id='li_switchsearch_a' href='#'>搜索流量切换</a></li>";
innerHTML += "<li id='li_storeswitch'><a id='li_storeswitch_a' href='#'>线下店nginx切换</a></li>";
innerHTML += "<li id='li_pch5switch'><a id='li_pch5switch_a' href='#'>PCH5切换</a></li>";
innerHTML += "</ul></li>";
/*manage*/
... ... @@ -261,6 +262,7 @@ document.getElementById("li_internalDomainHistory_a").setAttribute("href",path+"
document.getElementById("li_switchtopo_a").setAttribute("href",path+"/topoSwitch/toTopoSwitch");
document.getElementById("li_switchsearch_a").setAttribute("href",path+"/searchSwitch/toSearchSwitch");
document.getElementById("li_storeswitch_a").setAttribute("href",path+"/storeSwitch/toStoreSwitch");
document.getElementById("li_pch5switch_a").setAttribute("href",path+"/pch5Switch/toPch5Switch");
document.getElementById("li_centerswitch_new_a").setAttribute("href",path+"/centerSwitch/toCenterSwitchNew");
document.getElementById("li_javarollbackbytime_a").setAttribute("href",path+"/project/toRollbackByTime");
document.getElementById("li_sql_operate_a").setAttribute("href",path+"/sqlOperate/toSqlOperate");
... ...