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
  1 +package com.ui.ctrl;
  2 +
  3 +import com.ui.http.HttpRestClient;
  4 +import com.ui.model.BaseResponse;
  5 +import org.springframework.beans.factory.annotation.Autowired;
  6 +import org.springframework.stereotype.Controller;
  7 +import org.springframework.web.bind.annotation.RequestMapping;
  8 +import org.springframework.web.bind.annotation.ResponseBody;
  9 +import org.springframework.web.servlet.ModelAndView;
  10 +
  11 +import java.util.HashMap;
  12 +import java.util.Map;
  13 +
  14 +/**
  15 + * 灰度的nginx切换
  16 + *
  17 + * @author craig.qin 2018-1-10
  18 + */
  19 +@Controller
  20 +@RequestMapping("/grayNginxSwitch")
  21 +public class GrayNginxSwitchCtrl {
  22 +
  23 + @Autowired
  24 + HttpRestClient httpRestClient;
  25 +
  26 + @RequestMapping(value = "/toGrayNginxSwitch")
  27 + public ModelAndView toGrayNginxSwitch() {
  28 + ModelAndView mdv = new ModelAndView("switch/switch_nginx_gray");
  29 + return mdv;
  30 + }
  31 +
  32 + /**
  33 + * 展示配置文件信息
  34 + *
  35 + */
  36 + @RequestMapping(value = "/viewGrayNginxCurrentConf")
  37 + @ResponseBody
  38 + public BaseResponse viewGrayNginxCurrentConf() {
  39 + return httpRestClient.defaultGet( "/grayNginxSwitch/viewGrayNginxCurrentConf", BaseResponse.class, null);
  40 + }
  41 +
  42 + /**
  43 + * 解析当前配置，绘图用
  44 + *
  45 + */
  46 + @RequestMapping(value = "/getGrayNginxStatus")
  47 + @ResponseBody
  48 + public BaseResponse getGrayNginxStatus() {
  49 + return httpRestClient.defaultGet( "/grayNginxSwitch/getGrayNginxStatus", BaseResponse.class, null);
  50 + }
  51 +
  52 +
  53 +
  54 +
  55 +}
  1 +<%@page language="java" contentType="text/html;charset=utf-8" %>
  2 +<%@page import="com.ui.contants.ProjectConstant"%>
  3 +<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
  4 +<%
  5 + String path = request.getContextPath();
  6 + String basePath = request.getScheme() + "://"
  7 + + request.getServerName() + ":" + request.getServerPort()
  8 + + path + "/";
  9 +%>
  10 +
  11 +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  12 +<html>
  13 +<head>
  14 + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  15 + <link rel="stylesheet" href="<%=basePath %>css/bootstrap.min.css"/>
  16 + <link rel="stylesheet" href="<%=basePath %>css/unicorn.main.css"/>
  17 + <link rel="stylesheet" href="<%=basePath %>css/unicorn.grey.css"/>
  18 + <link rel="stylesheet" href="<%=basePath %>css/jquery-ui.css"/>
  19 + <link rel="stylesheet" href="<%=basePath %>css/bootstrap-responsive.min.css"/>
  20 + <link rel="stylesheet" href="<%=basePath %>css/uniform.css"/>
  21 + <link rel="stylesheet" href="<%=basePath %>css/select2.css"/>
  22 + <link rel="stylesheet" href="<%=basePath %>css/font-awesome.min.css"/>
  23 + <link rel="stylesheet" href="<%=basePath %>css/dnspod_switch.css"/>
  24 + <link rel="stylesheet" href="<%=basePath %>css/ace.min.css"/>
  25 + <link rel="stylesheet" href="<%=basePath %>css/ace-rtl.min.css"/>
  26 + <link rel="stylesheet" href="<%=basePath %>css/ace-skins.min.css"/>
  27 + <script src="<%=basePath %>js/jquery-2.1.4.min.js" type="text/javascript"></script>
  28 + <script src="<%=basePath %>js/bootstrap.min.js" type="text/javascript"></script>
  29 + <script src="<%=basePath %>js/typeahead-bs2.min.js" type="text/javascript"></script>
  30 + <script src="<%=basePath %>js/ace-elements.min.js" type="text/javascript"></script>
  31 + <script src="<%=basePath %>js/ace.min.js" type="text/javascript"></script>
  32 + <script src="<%=basePath %>js/layer/layer.js" type="text/javascript"></script>
  33 + <script src="<%=basePath %>/js/unicorn.js" type="text/javascript"></script>
  34 + <script src="<%=basePath %>js/bootstrap-plugin/datetimepicker/moment-with-locales.js" charset="UTF-8"
  35 + type="text/javascript"></script>
  36 + <script src="<%=basePath %>js/bootstrap-plugin/datetimepicker/bootstrap-datetimepicker.js" charset="UTF-8"
  37 + type="text/javascript"></script>
  38 + <script src="<%=basePath %>js/global.js" charset="UTF-8" type="text/javascript"></script>
  39 + <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.pagination.js" charset="UTF-8"
  40 + type="text/javascript"></script>
  41 + <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.table.js" charset="UTF-8" type="text/javascript"></script>
  42 + <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.dialog.js" charset="UTF-8" type="text/javascript"></script>
  43 + <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.form.js" charset="UTF-8" type="text/javascript"></script>
  44 + <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.panel.js" charset="UTF-8" type="text/javascript"></script>
  45 + <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.alerts.js" charset="UTF-8" type="text/javascript"></script>
  46 + <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.accordion.js" charset="UTF-8"
  47 + type="text/javascript"></script>
  48 + <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.breadcrumb.js" charset="UTF-8"
  49 + type="text/javascript"></script>
  50 + <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.validate.js" charset="UTF-8"
  51 + type="text/javascript"></script>
  52 + <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.form.js" charset="UTF-8" type="text/javascript"></script>
  53 + <script src="<%=basePath %>js/bootstrap-plugin/bootstrap.select.js" charset="UTF-8" type="text/javascript"></script>
  54 + <script src="<%=basePath %>js/jquery.toaster.js" type="text/javascript"></script>
  55 +
  56 + <script src="<%=basePath %>js/jtopo-0.4.8-min.js"></script>
  57 + <script src="<%=basePath %>js/toolbar.js"></script>
  58 +
  59 + <script>
  60 + var contextPath = '<%=basePath %>';
  61 + </script>
  62 + <title>YOHO!运维</title>
  63 +</head>
  64 +<body style="background-color: #444444;font-size: 14px">
  65 +
  66 +<!-- 头部 -->
  67 +<div id="head">
  68 +</div>
  69 +<!-- 右侧具体内容 -->
  70 +<div id="content">
  71 +
  72 + <div class="container-fluid">
  73 + <div class="widget-box">
  74 + <div style="float: left;width: 600px;color: #D3D3D3;height: 450px;">
  75 + <canvas width="600" height="450" id="canvas"></canvas>
  76 + </div>
  77 + <div class="widget-content nopadding" style="margin-left: 600px;border-left: 1px solid #E5E5E5;">
  78 + <div class="widget-content nopadding">
  79 + <div class="tree_container" style="height: 540px;color: black;overflow:auto;">
  80 + <div class="panel panel-default">
  81 +
  82 + <div class="widget-title" style="height: 50px;">
  83 + <h5 style="display: inline"></h5>
  84 + </div>
  85 + <div class="panel-body">
  86 + <button class="btn btn-sm btn-primary"
  87 + onclick="grayNginxConfView()">
  88 + <em class="icon-cogs bigger-110"></em>
  89 + 查看当前配置
  90 + </button>
  91 + </div>
  92 + <h3 class="header smaller red"></h3>
  93 +
  94 + <div class="widget-title" style="height: 50px;">
  95 + <h5 style="display: inline">灰度nginx切换</h5>
  96 + </div>
  97 + <div class="panel-body">
  98 + <div class="btn-group">
  99 + <button class="btn btn-sm btn-success"
  100 + onclick="grayServiceSwitch('online')">
  101 + <em class="icon-cogs bigger-110"></em>
  102 + 切向online
  103 + </button>
  104 + <button class="btn btn-sm btn-success"
  105 + onclick="grayServiceSwitch('gray')">
  106 + <em class="icon-cogs bigger-110"></em>
  107 + 切向gary
  108 + </button>
  109 + </div>
  110 + </div>
  111 +
  112 +
  113 +
  114 + </div>
  115 + </div>
  116 + </div>
  117 + </div>
  118 +
  119 + </div>
  120 + </div>
  121 +</div>
  122 +
  123 +<script src="<%=basePath %>script/common/genarate_left_panel.js?v=<%=ProjectConstant.MENU_VERSION %>"></script>
  124 +
  125 +<script type="text/javascript">
  126 + $("#li_switch").addClass("active open");
  127 + $("#li_storeswitch").addClass("active");
  128 +</script>
  129 +</body>
  130 +</html>
  131 +<script type="text/javascript">
  132 + $(document).ready(function () {
  133 + $.ajax({
  134 + type: "post",
  135 + url: contextPath+"/grayNginxSwitch/getGrayNginxStatus",
  136 + data: {},
  137 + dataType: "json",
  138 + success: function(resp){
  139 + drawData(resp);
  140 + },
  141 + error: function(){
  142 + layer.msg("获取灰度nginx配置信息异常", {icon: 2});
  143 + }
  144 + });
  145 + });
  146 +
  147 + function grayServiceSwitch(target){
  148 + alert("开发中。。。"+target);
  149 + }
  150 +
  151 + //灰度nginx配置
  152 + function grayNginxConfView() {
  153 + $.ajax({
  154 + type: "post",
  155 + url: contextPath+"/grayNginxSwitch/viewGrayNginxCurrentConf",
  156 + data: {},
  157 + dataType: "json",
  158 + success: function(resp){
  159 + viewCurrentConf(resp);
  160 + },
  161 + error: function(){
  162 + layer.msg("获取线下店nginx配置信息异常", {icon: 2});
  163 + }
  164 + });
  165 + }
  166 +
  167 + /**
  168 + * 打开对话框，查看当前配置
  169 + * @param resp 切换后的响应数据
  170 + */
  171 + function viewCurrentConf(data) {
  172 + var dialog = $("<div>").appendTo($("body"));
  173 + dialog.dialog({
  174 + size:"modal-lg",
  175 + title: "当前配置",
  176 + backdrop: "static",
  177 + content: "<pre>" + data.data + "</pre>",
  178 + buttons: [{
  179 + text: "关闭",
  180 + className: "btn-danger",
  181 + onclick: function () {
  182 + dialog.dialog("hide");
  183 + }
  184 + }]
  185 + }).find(".modal-body").css({
  186 + height: "650px"
  187 + });
  188 + }
  189 +
  190 +
  191 + /**
  192 + * 展示画布 和 数据
  193 + * @param resp
  194 + */
  195 + function drawData(resp) {
  196 + var canvas = document.getElementById('canvas');
  197 + var stage = new JTopo.Stage(canvas);
  198 + //显示工具栏
  199 + //showJTopoToobar(stage);
  200 + var scene = new JTopo.Scene();
  201 + stage.add(scene);
  202 + scene.background = contextPath + "img/bg.jpg";
  203 +
  204 + var appNodeX = 0;
  205 + var appNodeY = 0;
  206 + var appNodeW = 30;
  207 + var appNodeH = 26;
  208 +
  209 +
  210 + //定义container for qq
  211 + var container_qq = new JTopo.Container();
  212 + container_qq.setBound(appNodeX+100, appNodeY+200, 300, 280);
  213 + scene.add(container_qq);
  214 + //定义container的边界
  215 + container_qq.add(newNode(scene,appNodeX+10,appNodeY+10,1,1));
  216 + container_qq.add(newNode(scene,appNodeX+10,appNodeY+400,1,1));
  217 + container_qq.add(newNode(scene,appNodeX+550,appNodeY+10,1,1));
  218 +
  219 +
  220 + var grayNginx = newNode(scene,appNodeX+250,appNodeY+100,appNodeW,appNodeH,'grayNginx');
  221 + container_qq.add(grayNginx);
  222 +
  223 +
  224 + var storeService = newNode(scene,appNodeX+100,appNodeY+250,appNodeW,appNodeH,'aws-gateway');
  225 + container_qq.add(storeService);
  226 +
  227 + var storeService_gray = newNode(scene,appNodeX+430,appNodeY+250,appNodeW,appNodeH,'灰度gateway');
  228 + container_qq.add(storeService_gray);
  229 +
  230 +
  231 + var data = resp.data;
  232 + var grayLinkColor="220,20,60";
  233 +
  234 + //服务指向
  235 + if('online' == data.grayService){
  236 + var link = newLink(scene,storeNginx, storeService,"online");
  237 + link.arrowsRadius = 10;
  238 + }else if('gray' == data.grayService){
  239 + var link = newLink(scene,storeNginx, storeService_gray,"gray",grayLinkColor);
  240 + link.arrowsRadius = 10;
  241 + }
  242 +
  243 + }
  244 +
  245 + // 节点
  246 + function newNode(scene,x, y, w, h, text) {
  247 + var node = new JTopo.Node(text);
  248 + node.setLocation(x, y);
  249 + node.setSize(w, h);
  250 + if("grayNginx"==text){
  251 + node.setImage(contextPath + 'img/pstn/router2.png', true);
  252 + node.textPosition = 'Top_Center';// 文字居中
  253 + }else if("AWS-gateway"==text||"灰度gateway"==text){
  254 + node.setImage(contextPath + 'img/pstn/msc.png', true);
  255 + if("灰度gateway"==text){
  256 + node.alarm = "";
  257 + node.alarmColor = '0,255,0';
  258 + }
  259 + }else if(text!=null&&text.length>0){
  260 + node.setImage(contextPath + 'img/pstn/msc.png', true);
  261 + }
  262 + scene.add(node);
  263 + return node;
  264 + }
  265 +
  266 + // 简单连线
  267 + function newLink(scene,nodeA, nodeZ, text,color,) {
  268 + var link = new JTopo.Link(nodeA, nodeZ, text);
  269 + link.lineWidth = 3; // 线宽
  270 + link.bundleOffset = 60; // 折线拐角处的长度
  271 + link.bundleGap = 20; // 线条之间的间隔
  272 + link.textOffsetY = 3; // 文本偏移量（向下3个像素）
  273 + if(color){
  274 + link.strokeColor =color;
  275 + }else{
  276 + link.strokeColor = '0,200,255';
  277 + }
  278 +
  279 + scene.add(link);
  280 + return link;
  281 + }
  282 +
  283 +
  284 +
  285 + // 简单连线
  286 + function newLink(scene,nodeA, nodeZ, text,color,) {
  287 + var link = new JTopo.Link(nodeA, nodeZ, text);
  288 + link.lineWidth = 3; // 线宽
  289 + link.bundleOffset = 60; // 折线拐角处的长度
  290 + link.bundleGap = 20; // 线条之间的间隔
  291 + link.textOffsetY = 3; // 文本偏移量（向下3个像素）
  292 + if(color){
  293 + link.strokeColor =color;
  294 + }else{
  295 + link.strokeColor = '0,200,255';
  296 + }
  297 +
  298 + scene.add(link);
  299 + return link;
  300 + }
  301 +</script>