ops / monitor-ui · Commits

Go to a project

Authored by mlge
Commit f13d0b3acef6883f03238ea47d9a7b3e445fd6fe 1 parent aad256ce

在线ip配置支持双云一键对比

Inline Side-by-side
Showing 3 changed files with 283 additions and 0 deletions
... ... @@ -5,6 +5,7 @@ import com.ui.model.BaseResponse;
import com.ui.model.req.CompareReq;
import com.ui.model.req.NginxSyncTask;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView;
... ... @@ -24,6 +25,14 @@ public class CompareIpsCtrl {
return new ModelAndView("compare/compareIps");
}
/**
* 在线ip配置对比--新（一次性对比所有的）
* @return
*/
@RequestMapping("/toCompareIpsNew")
public ModelAndView toCompareIpsNewView() {
return new ModelAndView("compare/compareIpsNew");
}
@RequestMapping("/compare")
public BaseResponse pushTask(CompareReq req)
... ... @@ -32,4 +41,17 @@ public class CompareIpsCtrl {
return response;
}
/**
* 在线ip对比--一键比对所有的服务
* @param cloud
* @return
*/
@RequestMapping("/compareAll")
public BaseResponse compareAll( String cloud)
{
BaseResponse response = httpRestClient.defaultPost("/compareIps/compareAll", cloud, BaseResponse.class);
return response;
}
}
... ...
<%@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/bootstrap-datetimepicker.css"/>
<link href="<%=basePath %>js/bootstrap-plugin/css/bootstrap.table.css" rel="stylesheet" media="screen"/>
<link rel="stylesheet" href="<%=basePath %>css/bootstrap-responsive.min.css"/>
<link rel="stylesheet" href="<%=basePath %>css/fullcalendar.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/uniform.css"/>
<link rel="stylesheet" href="<%=basePath %>css/select2.css"/>
<link rel="stylesheet" href="<%=basePath %>js/jstree/themes/proton/style.css"/>
<link rel="stylesheet" href="<%=basePath %>css/select2.css"/>
<link rel="stylesheet" href="<%=basePath %>css/yoho.css"/>
<script src="<%=basePath %>js/excanvas.min.js" charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath %>js/jquery-1.12.0.min.js" charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath %>js/jquery-ui.custom.js" charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath %>/js/bootstrap.min.js"></script>
<script src="<%=basePath %>/js/unicorn.js"></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/layer/layer.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/jstree/jstree.js"></script>
<script src="<%=basePath %>js/jquery.toaster.js"></script>
<link href="<%=basePath %>css/jquery.tagsinput.css" rel="stylesheet"/>
<script src="<%=basePath %>js/jquery.tagsinput.min.js" type="text/javascript"></script>
<script>
var contextPath = '<%=basePath %>';
</script>
<title>YOHO!运维</title>
</head>
<body>
<!-- 头部 -->
<div id="head">
</div>
<!-- 右侧具体内容 -->
<div id="content">
<div id="breadcrumb">
<a href="#" title="Go to Home" class="tip-bottom"><i
class="icon-home"></i> Home</a> <a href="#" class="current">在线IP配置对比</a>
</div>
<div class="container-fluid">
<div class="widget-box">
<div class="widget-title">
<h5>在线IP配置对比</h5>
</div>
<div class="widget-content nopadding">
<div class="widget-title" style="height: 53px;">
<div>
<div class="form-inline" role="form" id="inBoxQueryDiv"
style=" margin-top: 12px;margin-left: 25px;float: left;">
<div class="input-group" style="float: left;">
<span class="input-group-addon">范围选择：</span>
<select class="form-control" id="choosenCloud">
<option value="qcloud">腾讯云</option>
<option value="aws">AWS</option>
</select>
</div>
<button class="btn btn-primary" style="margin-left: 18px;" onclick="compareAll()">对比</button>
</div>
</div>
</div>
<div id="compareTable" >
<%--<thead>
<th>服务名称</th>
<th>cmdb</th>
<th>ip-tables</th>
<th>zk</th>
<th>比较结果</th>
</thead>
<tbody>
</tbody>--%>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
//双云一键对比
function compareAll(){
var cloud = $("#choosenCloud").val();
$("#compareTable").table({
columnAutoWidth: true,
url: contextPath +"/compareIps/compareAll?cloud="+cloud,
dataType: "json",
striped: true,
pagination: false,
loadFilter: function (data) {
return defaultLoadFilter(data);
},
columns:[{
title: "序号",
formatter: function(value,rowData,rowIndex){
return rowIndex + 1;
}
},{
title: "服务名称",
field: "serviceName"
}, {
title: "cmdb",
field: "ipMaps",
formatter: function (value, rowData, rowIndex) {
var cmdbIps = value["cmdb"];
var resultText = "<div name='ipsDiv' style='display:none'>";
if(cmdbIps != null){
for (var i = 0; i < cmdbIps.length; i ++){
resultText = resultText + cmdbIps[i] + "</br>";
}
}
resultText = resultText + "</div>";
return "<a onclick='showIps(this)' value='true' style='cursor:pointer'> 点击显示详情..</a>" + resultText;
},
}, {
title: "ip-tables",
field: "ipMaps",
formatter: function (value, rowData, rowIndex) {
var resultText = "<div name='ipsDiv' style='display:none'>";
var iptables = "" ;
if("nginx" == rowData.serviceName){
if("qcloud" == cloud){
iptables = value["qcloud_clb"];
resultText = resultText + "qcloud_clb" + "</br>";
}else if("aws" == cloud){
iptables = value["aws_elb"];
resultText = resultText + "aws_elb" + "</br>";
}
}else{
iptables = value["ip-tables"];
}
if(iptables != null){
for (var i = 0; i < iptables.length; i ++){
resultText = resultText + iptables[i] + "</br>";
}
}
resultText = resultText + "</div>";
return "<a onclick='showIps(this)' value='true' style='cursor:pointer'> 点击显示详情..</a>" + resultText;
},
},{
title: "zk-instaces",
field: "ipMaps",
formatter: function (value, rowData, rowIndex) {
var zkInstances = "";
var resultText = "<div name='ipsDiv' style='display:none'>";
if("nginx" == rowData.serviceName){
return "";
}else if("gateway" == rowData.serviceName){
zkInstances = value["nginx-upstream"];
resultText = resultText + "nginx-upstream" + "</br>";
}else{
zkInstances = value["zk-instaces"];
}
if(zkInstances != null){
for (var i = 0; i < zkInstances.length; i ++){
resultText = resultText + zkInstances[i] + "</br>";
}
}
resultText = resultText + "</div>";
return "<a onclick='showIps(this)' value='true'style='cursor:pointer'> 点击显示详情..</a>" + resultText;
},
},
{
title: "status",
field:"status",
formatter: function (value, rowData, rowIndex) {
var that = this;
if( 1 == value){
return "<font color='red'>结果不一致</font>";
}else {
return "一致";
}
},
}]
});
}
function showIps(elememt){
var that = elememt;
var btnText = $(that).attr("value");
if("true" == btnText){
var ipsDiv = $(that).closest("tr").find("div[name='ipsDiv']").each(function (index,el) {
$(this).show();//显示ips
});
$(that).closest("tr").find("a").each(function (index,el) {
$(this).attr("value","false");
$(this).text("点击隐藏");
});
}else{
var ipsDiv = $(that).closest("tr").find("div[name='ipsDiv']").each(function (index,el) {
$(this).hide();//隐藏ips
});
$(that).closest("tr").find("a").each(function (index,el) {
$(this).attr("value","true");
$(this).text("点击显示详情..");
});
}
}
</script>
<script src="<%=basePath %>script/common/genarate_left_panel.js"></script>
<script type="text/javascript">
$("#li_config").addClass("active open");
$("#li_ips_compare_new").addClass("active");
</script>
</html>
\ No newline at end of file
... ...
... ... @@ -76,6 +76,7 @@ innerHTML += "<li id='li_hystrix_info'><a id='li_hystrix_info_a' href=''><i clas
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配置对比_new</span></a></li>";
innerHTML += "</ul></li>";
/*project*/
... ... @@ -192,6 +193,7 @@ document.getElementById("li_memcachedMonitor_a").setAttribute("href", path + "/m
document.getElementById("li_javarestart_a").setAttribute("href", path + "/javaRestart/toJavaRestart");
//document.getElementById("li_centerswitch_a").setAttribute("href", path + "/centerSwitch/toCenterSwitch");
document.getElementById("li_ips_compare_a").setAttribute("href", path + "/compareIps/toCompareIps");
document.getElementById("li_ips_compare_new_a").setAttribute("href", path + "/compareIps/toCompareIpsNew");
document.getElementById("li_malicious_ip_rules_a").setAttribute("href", path + "/maliciousIp/toMaliciousIpRules");
//document.getElementById("li_malicious_ips_a").setAttribute("href", path + "/maliciousIp/toMaliciousIps");
document.getElementById("li_malicious_ips_a_new").setAttribute("href", path + "/maliciousIp/toMaliciousIpsNew");
... ...