ops / monitor-ui · Commits

Go to a project

Authored by qinchao
Commit 2a9852060fba65bdf3cc63c184cfff476c751f10 1 parent c0e33380

灰度nginx切换

Inline Side-by-side
Showing 2 changed files with 356 additions and 0 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.ResponseBody;
import org.springframework.web.servlet.ModelAndView;
import java.util.HashMap;
import java.util.Map;
/**
* 灰度的nginx切换
*
* @author craig.qin 2018-1-10
*/
@Controller
@RequestMapping("/grayNginxSwitch")
public class GrayNginxSwitchCtrl {
@Autowired
HttpRestClient httpRestClient;
@RequestMapping(value = "/toGrayNginxSwitch")
public ModelAndView toGrayNginxSwitch() {
ModelAndView mdv = new ModelAndView("switch/switch_nginx_gray");
return mdv;
}
/**
* 展示配置文件信息
*
*/
@RequestMapping(value = "/viewGrayNginxCurrentConf")
@ResponseBody
public BaseResponse viewGrayNginxCurrentConf() {
return httpRestClient.defaultGet( "/grayNginxSwitch/viewGrayNginxCurrentConf", BaseResponse.class, null);
}
/**
* 解析当前配置，绘图用
*
*/
@RequestMapping(value = "/getGrayNginxStatus")
@ResponseBody
public BaseResponse getGrayNginxStatus() {
return httpRestClient.defaultGet( "/grayNginxSwitch/getGrayNginxStatus", 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 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="grayNginxConfView()">
<em class="icon-cogs bigger-110"></em>
查看当前配置
</button>
</div>
<h3 class="header smaller red"></h3>
<div class="widget-title" style="height: 50px;">
<h5 style="display: inline">灰度nginx切换</h5>
</div>
<div class="panel-body">
<div class="btn-group">
<button class="btn btn-sm btn-success"
onclick="grayServiceSwitch('online')">
<em class="icon-cogs bigger-110"></em>
切向online
</button>
<button class="btn btn-sm btn-success"
onclick="grayServiceSwitch('gray')">
<em class="icon-cogs bigger-110"></em>
切向gary
</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_storeswitch").addClass("active");
</script>
</body>
</html>
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
type: "post",
url: contextPath+"/grayNginxSwitch/getGrayNginxStatus",
data: {},
dataType: "json",
success: function(resp){
drawData(resp);
},
error: function(){
layer.msg("获取灰度nginx配置信息异常", {icon: 2});
}
});
});
function grayServiceSwitch(target){
alert("开发中。。。"+target);
}
//灰度nginx配置
function grayNginxConfView() {
$.ajax({
type: "post",
url: contextPath+"/grayNginxSwitch/viewGrayNginxCurrentConf",
data: {},
dataType: "json",
success: function(resp){
viewCurrentConf(resp);
},
error: function(){
layer.msg("获取线下店nginx配置信息异常", {icon: 2});
}
});
}
/**
* 打开对话框，查看当前配置
* @param resp 切换后的响应数据
*/
function viewCurrentConf(data) {
var dialog = $("<div>").appendTo($("body"));
dialog.dialog({
size:"modal-lg",
title: "当前配置",
backdrop: "static",
content: "<pre>" + data.data + "</pre>",
buttons: [{
text: "关闭",
className: "btn-danger",
onclick: function () {
dialog.dialog("hide");
}
}]
}).find(".modal-body").css({
height: "650px"
});
}
/**
* 展示画布 和 数据
* @param resp
*/
function drawData(resp) {
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 = 0;
var appNodeY = 0;
var appNodeW = 30;
var appNodeH = 26;
//定义container for qq
var container_qq = new JTopo.Container();
container_qq.setBound(appNodeX+100, appNodeY+200, 300, 280);
scene.add(container_qq);
//定义container的边界
container_qq.add(newNode(scene,appNodeX+10,appNodeY+10,1,1));
container_qq.add(newNode(scene,appNodeX+10,appNodeY+400,1,1));
container_qq.add(newNode(scene,appNodeX+550,appNodeY+10,1,1));
var grayNginx = newNode(scene,appNodeX+250,appNodeY+100,appNodeW,appNodeH,'grayNginx');
container_qq.add(grayNginx);
var storeService = newNode(scene,appNodeX+100,appNodeY+250,appNodeW,appNodeH,'aws-gateway');
container_qq.add(storeService);
var storeService_gray = newNode(scene,appNodeX+430,appNodeY+250,appNodeW,appNodeH,'灰度gateway');
container_qq.add(storeService_gray);
var data = resp.data;
var grayLinkColor="220,20,60";
//服务指向
if('online' == data.grayService){
var link = newLink(scene,storeNginx, storeService,"online");
link.arrowsRadius = 10;
}else if('gray' == data.grayService){
var link = newLink(scene,storeNginx, storeService_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("grayNginx"==text){
node.setImage(contextPath + 'img/pstn/router2.png', true);
node.textPosition = 'Top_Center';// 文字居中
}else if("AWS-gateway"==text||"灰度gateway"==text){
node.setImage(contextPath + 'img/pstn/msc.png', true);
if("灰度gateway"==text){
node.alarm = "";
node.alarmColor = '0,255,0';
}
}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;
}
// 简单连线
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
... ...