ops / monitor-ui · Commits

Go to a project

Authored by qinchao
Commit a3e8b6709ea3c1adc9564114faa767c322d65f83 1 parent 9878037a

线下店nginx切换

Inline Side-by-side
Showing 4 changed files with 378 additions and 24 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;
/**
* 线下店的nginx切换
*
* @author craig.qin 2018-1-10
*/
@Controller
@RequestMapping("storeSwitch")
public class StoreSwitchCtrl {
@Autowired
HttpRestClient httpRestClient;
@RequestMapping(value = "toStoreSwitch")
public ModelAndView toStoreSwitch() {
ModelAndView mdv = new ModelAndView("storeSwitch/storeswitch");
return mdv;
}
/**
* 展示配置文件信息
*
*/
@RequestMapping(value = "viewStoreNginxCurrentConf")
@ResponseBody
public BaseResponse viewStoreNginxCurrentConf() {
return httpRestClient.defaultGet( "/storeSwitch/viewStoreNginxCurrentConf", BaseResponse.class, null);
}
/**
* 解析当前配置，绘图用
*
*/
@RequestMapping(value = "getStoreNginxStatus")
@ResponseBody
public BaseResponse getStoreNginxStatus() {
return httpRestClient.defaultGet( "/storeSwitch/getStoreNginxStatus", BaseResponse.class, null);
}
}
... ...
... ... @@ -109,7 +109,7 @@
</div>
</div>
</body>
<script src="<%=basePath %>script/common/genarate_left_panel.js?v=20171227"></script>
<script src="<%=basePath %>script/common/genarate_left_panel.js?v=20180110"></script>
<script type="text/javascript">
$("#li_dashboard").addClass("active");
</script>
... ...
<%@page language="java" contentType="text/html;charset=utf-8" %>
<%@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="storeNginxConfView()">
<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">线下店服务切换</h5>
</div>
<div class="panel-body">
<div class="btn-group">
<button class="btn btn-sm btn-success"
onclick="storeServiceSwitch('online')">
<em class="icon-cogs bigger-110"></em>
切向online
</button>
<button class="btn btn-sm btn-success"
onclick="storeServiceSwitch('gray')">
<em class="icon-cogs bigger-110"></em>
切向gary
</button>
</div>
</div>
<h3 class="header smaller red"></h3>
<div class="widget-title" style="height: 50px;">
<h5 style="display: inline">延展服务切换</h5>
</div>
<div class="panel-body">
<div class="btn-group">
<button class="btn btn-sm btn-success"
onclick="extendServiceSwitch('online')">
<em class="icon-cogs bigger-110"></em>
切向online
</button>
<button class="btn btn-sm btn-success"
onclick="extendServiceSwitch('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"></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+"/storeSwitch/getStoreNginxStatus",
data: {},
dataType: "json",
success: function(resp){
drawData(resp);
},
error: function(){
layer.msg("获取线下店nginx配置信息异常", {icon: 2});
}
});
});
//线下店服务
function storeNginxConfView() {
$.ajax({
type: "post",
url: contextPath+"/storeSwitch/viewStoreNginxCurrentConf",
data: {},
dataType: "json",
success: function(resp){
viewCurrentConf(resp);
},
error: function(){
layer.msg("获取线下店nginx配置信息异常", {icon: 2});
}
});
}
/**
* 打开对话框，查看当前配置
* @param resp 切换后的响应数据
*/
function viewCurrentConf(data) {
/* console.log(resp);
var data = JSON.parse(resp);*/
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"
});
}
//线下店服务切换
function storeServiceSwitch(switchTarget) {
alert(switchTarget+"开发中");
}
//延展服务切换
function extendServiceSwitch(switchTarget) {
alert(switchTarget+"开发中");
}
/**
* 展示画布 和 数据
* @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 storeNginx = newNode(scene,appNodeX+250,appNodeY+100,appNodeW,appNodeH,'storeNginx');
container_qq.add(storeNginx);
var storeService = newNode(scene,appNodeX+100,appNodeY+250,appNodeW,appNodeH,'线下店服务');
container_qq.add(storeService);
var storeService_gray = newNode(scene,appNodeX+180,appNodeY+330,appNodeW,appNodeH,'线下店服务gray');
container_qq.add(storeService_gray);
var extendService = newNode(scene,appNodeX+430,appNodeY+250,appNodeW,appNodeH,'延展服务');
container_qq.add(extendService);
var extendService_gray = newNode(scene,appNodeX+320,appNodeY+330,appNodeW,appNodeH,'延展服务gray');
container_qq.add(extendService_gray);
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("storeNginx"==text){
node.setImage(contextPath + 'img/pstn/router2.png', true);
node.textPosition = 'Top_Center';// 文字居中
}else if("延展服务"==text||"延展服务gray"==text){
node.setImage(contextPath + 'img/pstn/router.png', true);
if("延展服务gray"==text){
node.alarm = "";
node.alarmColor = '0,255,0';
}
}else if("线下店服务"==text||"线下店服务gray"==text){
node.setImage(contextPath + 'img/pstn/msc.png', true);
if("线下店服务gray"==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;
}
</script>
\ No newline at end of file
... ...
... ... @@ -18,10 +18,8 @@ innerHTML += "<li id='li_javaApi'><a id='li_javaApi_a' href=''><i class='icon ic
innerHTML += "<li id='li_zkInfo'><a id='li_zkInfo_a' href=''><i class='icon icon-th'></i> <span>ZK监控</span></a></li>";
innerHTML += "<li id='li_zkSvcLookup'><a id='li_zkSvcLookup_a' href=''><i class='icon icon-th'></i> <span>ZK服务信息</span></a></li>";
innerHTML += "<li id='li_rabbitview'><a id='li_rabbitview_a' href=''><i class='icon icon-th'></i> <span>Rabbitmq监控</span></a></li>";
/*innerHTML += "<li id='li_redisInfo'><a id='li_redisInfo_a' href=''><i class='icon icon-th'></i> <span>Redis监控</span></a></li>";*/
innerHTML += "<li id='li_newRedisMonitor'><a id='li_newRedisMonitor_a' href=''><i class='icon icon-th'></i> <span>Redis监控</span></a></li>";
innerHTML += "<li id='li_newRedisMonitor'><a id='li_memcachedMonitor_a' href=''><i class='icon icon-th'></i> <span>Memcached监控</span></a></li>";
/*innerHTML += "<li id='li_nginxview'><a id='li_nginxview_a' href=''><i class='icon icon-th'></i> <span>Nginx监控</span></a></li>";*/
innerHTML += "<li id='li_dns_monitor'><a id='li_dns_monitor_a' href=''><i class='icon icon-th'></i> <span>DNS反劫持监控</span></a></li>";
innerHTML += "<li id='li_monit'><a id='li_monit_a' href=''><i class='icon icon-th'></i> <span>Monit监控</span></a></li>";
innerHTML += "<li id='li_sqlOpLogs'><a id='li_sqlOpLogs_a' href=''><i class='icon icon-th'></i> <span>SQL操作日志</span></a></li>";
... ... @@ -33,7 +31,6 @@ innerHTML += "<li id='li_bigdata_ops_dashboard_info'><a id='li_bigdata_ops_dashb
innerHTML += "<li id='li_bigdata_ops_strategy_info'><a id='li_bigdata_ops_strategy_info_a' href=''><i class='icon icon-th'></i> <span>告警策略配置</span></a></li>";
innerHTML += "<li id='li_bigdata_ops_metric_info'><a id='li_bigdata_ops_metric_info_a' href=''><i class='icon icon-th'></i> <span>监控指标管理</span></a></li>";
innerHTML += "<li id='li_bigdata_ops_host_info'><a id='li_bigdata_ops_host_info_a' href=''><i class='icon icon-th'></i> <span>主机策略查看</span></a></li>";
// innerHTML += "<li id='li_bigdata_ops_group_info'><a id='li_bigdata_ops_group_info_a' href=''><i class='icon icon-th'></i> <span>集群策略配置</span></a></li>";
innerHTML += "<li id='li_bigdata_ops_alarm_info'><a id='li_bigdata_ops_alarm_info_a' href=''><i class='icon icon-th'></i> <span>告警动作配置</span></a></li>";
... ... @@ -46,13 +43,6 @@ innerHTML += "<li id='li_hostInfoList'><a id='li_hostInfoList_a' href=''><i clas
innerHTML += "<li id='li_mobjectInfo'><a id='li_mobjectInfo_a' href=''><i class='icon icon-th'></i> <span>监控对象</span></a></li>";
innerHTML += "</ul></li>";
/*Hystrix*/
/*innerHTML += "<li class='submenu' id='li_hystrix'><a id='a_hystrix' href='#'><i class='icon icon-th-list'></i> <span>Hystrix</span><span class='label'>2</span></a>";*/
/*innerHTML += "<ul><li id='li_hystrix_aws'><a id='a_hystrix_aws' href=''>AWS</a></li>";*/
/*innerHTML += "<li id='li_hystrix_qcloud'><a id='a_hystrix_qcloud' href=''>QCloud</a></li>";*/
/*innerHTML += "<li id='li_hystrix_nginx'><a id='a_hystrix_nginx' href=''>NGINX</a></li>";*/
/*innerHTML += "</ul></li>";*/
/*工单系统*/
innerHTML += "<li class='submenu' id='li_worksystem'><a id='li_worksystem_a' href='#'><i class='icon icon-th-list'></i> <span>工单系统</span><span class='label'>4</span></a><ul>";
innerHTML += "<li id='li_addWork'><a id='li_addWork_a' href=''><i class='icon icon-th'></i> <span>新建工单</span></a></li>";
... ... @@ -61,11 +51,6 @@ innerHTML += "<li id='li_handledWork'><a id='li_handledWork_a' href=''><i class=
innerHTML += "<li id='li_works'><a id='li_works_a' href=''><i class='icon icon-th'></i> <span>工单列表</span></a></li>";
innerHTML += "</ul></li>";
/*ABtest*/
/*innerHTML += "<li class='submenu' id='li_appConfig'><a id='li_appConfig_a' href='#'><i class='icon icon-th-list'></i> <span>APP配置</span><span class='label'>2</span></a><ul>";
innerHTML += "<li id='li_ABTestTotal'><a id='li_ABTestTotal_a' href=''><i class='icon icon-th'></i> <span>AB总体配置</span></a></li>";
innerHTML += "<li id='li_ABTestConfig'><a id='li_ABTestConfig_a' href=''><i class='icon icon-th'></i> <span>AB详细配置</span></a></li>";
innerHTML += "</ul></li>";*/
/*配置管理*/
innerHTML += "<li class='submenu' id='li_config'><a id='li_config_a' href='#'><i class='icon icon-th-list'></i> <span>配置管理</span><span class='label'>9</span></a><ul>";
... ... @@ -76,8 +61,6 @@ innerHTML += "<li id='li_degrade_info'><a id='li_degrade_info_a' href=''><i clas
innerHTML += "<li id='li_app_degrade'><a id='li_app_degrade_a' href=''><i class='icon icon-th'></i> <span>APP降级管理</span></a></li>";
innerHTML += "<li id='li_hystrix_info'><a id='li_hystrix_info_a' href=''><i class='icon icon-th'></i> <span>Hystrix配置</span></a></li>";
innerHTML += "<li id='li_cache_info'><a id='li_cache_info_a' href=''><i class='icon icon-th'></i> <span>缓存时间配置</span></a></li>";
/*innerHTML += "<li id='li_aws_ebs'><a id='li_aws_ebs_a' href=''><i class='icon icon-th'></i> <span>AWS_EBS镜像任务</span></a></li>";*/
// innerHTML += "<li id='li_ips_compare'><a id='li_ips_compare_a' href=''><i class='icon icon-th'></i> <span>在线服务Ip配置对比</span></a></li>";
innerHTML += "<li id='li_ips_compare_new'><a id='li_ips_compare_new_a' href=''><i class='icon icon-th'></i> <span>在线服务Ip配置对比</span></a></li>";
innerHTML += "<li id='li_docker_project_info'><a id='li_docker_project_info_a' href=''><i class='icon icon-th'></i> <span>Docker项目配置</span></a></li>";
innerHTML += "</ul></li>";
... ... @@ -96,18 +79,14 @@ 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'>5</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'>6</span></a>";
innerHTML += "<ul>";
//innerHTML += "<ul><li id='li_nginxswitch'><a id='li_nginxswitch_a' href=''>nginx切换</a></li>";
//innerHTML += "<li id='li_luaswitch'><a id='li_luaswitch_a' href='#'>LUA切换</a></li>";
//innerHTML += "<li id='li_limitswitch'><a id='li_limitswitch_a' href='#'>限流调整</a></li>";
//innerHTML += "<li id='li_lbswitch'><a id='li_lbswitch_a' href='#'>直连开关</a></li>";
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>";
//innerHTML += "<li id='li_centerswitch'><a id='li_centerswitch_a' href='#'>双中心切换</a></li>";
innerHTML += "<li id='li_centerswitch_new'><a id='li_centerswitch_new_a' href='#'>双中心切换_新</a></li>";
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 += "</ul></li>";
/*manage*/
... ... @@ -225,6 +204,7 @@ document.getElementById("li_internalDomain_a").setAttribute("href",path+"/intern
document.getElementById("li_internalDomainHistory_a").setAttribute("href",path+"/internalDns/toHistory");
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_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");
... ...