|
|
<%@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.min.js"></script>
|
|
|
<script src="<%=basePath %>js/jquery.toaster.js"></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">内部域名</a>
|
|
|
</div>
|
|
|
|
|
|
<div class="container-fluid">
|
|
|
<div class="widget-box">
|
|
|
<div class="widget-content nopadding">
|
|
|
<!-- 树 -->
|
|
|
<div style="float: left;width: 300px;color: #D3D3D3;height: 600px;">
|
|
|
<div class="widget-title" style="height: 50px;">
|
|
|
<h5>域名类型</h5>
|
|
|
</div>
|
|
|
<div class="config_container"
|
|
|
style="height: 540px;color: black;overflow:auto;width: 300px;text-align: center;">
|
|
|
<div class="span3">
|
|
|
<ul class="site-stats">
|
|
|
<li id="yohoops-aws-li" onclick="searchKeysBefore('yohoops','aws')"><strong>yohoops.org.:aws</strong></li>
|
|
|
<li id="yohoops-qcloud-li" onclick="searchKeysBefore('yohoops','qcloud')"><strong>yohoops.org.:qcloud</strong></li>
|
|
|
<li id="yohobuy-aws-li" onclick="searchKeysBefore('yohobuy','aws')"><strong>yohobuy.com.:aws</strong></li>
|
|
|
<li id="yohobuy-qcloud-li" onclick="searchKeysBefore('yohobuy','qcloud')"><strong>yohobuy.com.:qcloud</strong></li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 列表 -->
|
|
|
<div class="widget-content nopadding" style="margin-left: 300px;border-left: 1px solid #E5E5E5;">
|
|
|
<div class="widget-title" style="height: 50px;">
|
|
|
<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">TAG:</span>
|
|
|
<select id="tag-select" name="tag-select-name" class="form-control" onchange="searchKeys()">
|
|
|
<option value="ALL" selected="selected"></option>
|
|
|
<c:forEach items="${tags }" var="tag">
|
|
|
<option value="${tag.groupName }">${tag.groupName }</option>
|
|
|
</c:forEach>
|
|
|
</select>
|
|
|
</div>
|
|
|
|
|
|
<button id="addBtn" class="btn btn-success" style="margin-left: 18px;" onclick="editConfig(0)">新增</button>
|
|
|
<button id="commitBtn" class="btn btn-primary" style="margin-left: 18px;" onclick="commit()">提交至域名服务器</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="widget-content nopadding">
|
|
|
<div class="tree_container" style="height: 540px;color: black;overflow:auto;">
|
|
|
<div id="detailTable"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<%--<div id="abtestTable">--%>
|
|
|
|
|
|
<%--</div>--%>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
|
|
|
<div class="modal-dialog">
|
|
|
<div class="modal-content">
|
|
|
<div class="modal-header">
|
|
|
<button type="button" class="close" data-dismiss="modal"
|
|
|
aria-hidden="true">×</button>
|
|
|
<h4 class="modal-title" id="myModalLabel"></h4>
|
|
|
</div>
|
|
|
<div class="modal-body">
|
|
|
<form id="configForm" class="form-horizontal">
|
|
|
<div class="form-group">
|
|
|
<label class="col-sm-2 control-label"> <span style="color:red">*</span>域名:</label>
|
|
|
|
|
|
<div class="col-sm-8">
|
|
|
<input type="text" class="form-control" id="domain-add" name="domain-add"
|
|
|
size="150" readonly="readonly"/>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="form-group">
|
|
|
<label class="col-sm-2 control-label"> <span style="color:red">*</span>环境:</label>
|
|
|
|
|
|
<div class="col-sm-8">
|
|
|
<input type="text" class="form-control" id="cloud-add" name="cloud-add"
|
|
|
readonly="readonly" size="150"/>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="form-group">
|
|
|
<label class="col-sm-2 control-label"> <span style="color:red">*</span>名称:</label>
|
|
|
|
|
|
<div class="col-sm-8">
|
|
|
<input type="text" class="form-control" id="name-add" name="name-add"
|
|
|
size="150"/>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="form-group">
|
|
|
<label class="col-sm-2 control-label"> <span style="color:red">*</span>类型:</label>
|
|
|
|
|
|
<div class="col-sm-8">
|
|
|
<select id="type-add" name="type-add" class="form-control"
|
|
|
style="width: 300px">
|
|
|
<option value="a">a</option>
|
|
|
<option value="cname">cname</option>
|
|
|
</select>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="form-group">
|
|
|
<label class="col-sm-2 control-label"> <span style="color:red">*</span>值:</label>
|
|
|
|
|
|
<div class="col-sm-8">
|
|
|
<input type="text" class="form-control" id="value-add" name="value-add"
|
|
|
size="150"/>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="form-group">
|
|
|
<label class="col-sm-2 control-label"> 标签:</label>
|
|
|
|
|
|
<div class="col-sm-8">
|
|
|
<c:forEach items="${tags }" var="tag" varStatus="status">
|
|
|
<input type="checkbox" name="tag-add" value="${tag.groupName}"> ${tag.groupName}
|
|
|
<c:if test="${(status.index+1) % 4 == 0}"><br></c:if>
|
|
|
</c:forEach>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="form-group">
|
|
|
<label class="col-sm-2 control-label"> </label>
|
|
|
|
|
|
<div class="col-sm-8" id="messageAlert"></div>
|
|
|
</div>
|
|
|
</form>
|
|
|
</div>
|
|
|
<div class="modal-footer">
|
|
|
<button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
|
|
|
<button type="button" class="btn btn-success" value="Validate" onclick="saveConfig()">提交</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- /.modal-content -->
|
|
|
</div>
|
|
|
<!-- /.modal -->
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
<input type="hidden" id="current_domain"/>
|
|
|
<input type="hidden" id="current_cloud"/>
|
|
|
<input type="hidden" id="editId" name="editId"/>
|
|
|
|
|
|
<script src="<%=basePath %>script/common/genarate_left_panel.js"></script>
|
|
|
<script type="text/javascript">
|
|
|
$("#li_project").addClass("active open");
|
|
|
$("#li_internalDomain").addClass("active");
|
|
|
</script>
|
|
|
</body>
|
|
|
</html>
|
|
|
|
|
|
<script>
|
|
|
|
|
|
$(function () {
|
|
|
|
|
|
var table = {
|
|
|
columnAutoWidth: false,
|
|
|
url: contextPath + "/internalDns/selectAll",
|
|
|
striped: true,
|
|
|
loadFilter: function (data) {
|
|
|
return defaultLoadFilter(data);
|
|
|
},
|
|
|
columns: [{
|
|
|
title: "name",
|
|
|
field: "name",
|
|
|
width: "20%"
|
|
|
}, {
|
|
|
title: "type",
|
|
|
field: "type",
|
|
|
width: "10%"
|
|
|
}, {
|
|
|
title: "value",
|
|
|
field: "value",
|
|
|
width: "30%"
|
|
|
},{
|
|
|
title: "tag",
|
|
|
field: "tag",
|
|
|
width: "10%"
|
|
|
},{
|
|
|
title: "domain",
|
|
|
field: "domain",
|
|
|
width: "10%"
|
|
|
},{
|
|
|
title: "cloud",
|
|
|
field: "environment",
|
|
|
width: "10%"
|
|
|
},{
|
|
|
title: "操作",
|
|
|
formatter: function (value, rowData, rowIndex) {
|
|
|
var div = $("<div>");
|
|
|
$("<button onclick=\"editConfig(\'" + rowData.id + "\')\">").addClass("btn btn-xs btn-success").html("修改").appendTo(div);
|
|
|
div.append(" ");
|
|
|
$("<button onclick=\"deleteConfig(\'" + rowData.id + "\')\">").addClass("btn btn-xs btn-danger").html("删除").appendTo(div);
|
|
|
return div;
|
|
|
}
|
|
|
}]
|
|
|
}
|
|
|
$("#detailTable").table(table);
|
|
|
|
|
|
searchKeysBefore('yohoops','aws');
|
|
|
|
|
|
});
|
|
|
|
|
|
function searchKeysBefore(domain,cloud) {
|
|
|
var currentDomain = $("#current_domain").val();
|
|
|
var currentCloud = $("#current_cloud").val();
|
|
|
|
|
|
if (currentDomain != '') {
|
|
|
$("#" + currentDomain + "-"+currentCloud+"-li").removeClass("alert alert-danger");
|
|
|
}
|
|
|
$("#current_domain").val(domain);
|
|
|
$("#current_cloud").val(cloud);
|
|
|
|
|
|
$("#" + domain + "-"+cloud+"-li").addClass("alert alert-danger");
|
|
|
searchKeys();
|
|
|
}
|
|
|
|
|
|
//点击查询按钮
|
|
|
function searchKeys() {
|
|
|
var currentDomain = $("#current_domain").val();
|
|
|
var currentCloud = $("#current_cloud").val();
|
|
|
var currentTag = $("#tag-select").val();
|
|
|
if(currentDomain == 'yohoops'){
|
|
|
currentDomain = 'yohoops.org.';
|
|
|
}else{
|
|
|
currentDomain = 'yohobuy.com.';
|
|
|
}
|
|
|
|
|
|
var param = {
|
|
|
domain: currentDomain,
|
|
|
environment:currentCloud,
|
|
|
tag:currentTag
|
|
|
}
|
|
|
|
|
|
$("#detailTable").table("load", param);
|
|
|
};
|
|
|
|
|
|
|
|
|
//打开新增或修改页面
|
|
|
function editConfig(id) {
|
|
|
var currentDomain = $("#current_domain").val();
|
|
|
if(currentDomain == 'yohoops'){
|
|
|
currentDomain = 'yohoops.org.';
|
|
|
}else{
|
|
|
currentDomain = 'yohobuy.com.';
|
|
|
}
|
|
|
var currentCloud = $("#current_cloud").val();
|
|
|
$("#editId").val(id)
|
|
|
$("input[name='tag-add']").removeAttr("checked");
|
|
|
|
|
|
$("#configForm #messageAlert").hide();
|
|
|
if (id == 0) {//新增页面
|
|
|
$("#myModalLabel").text("新增");
|
|
|
$("#domain-add").val(currentDomain);
|
|
|
$("#cloud-add").val(currentCloud);
|
|
|
$("#name-add").val('');
|
|
|
$("#value-add").val('');
|
|
|
|
|
|
} else {
|
|
|
$("#myModalLabel").text("修改");
|
|
|
var param = {
|
|
|
id: id
|
|
|
}
|
|
|
$.ajax({
|
|
|
type: 'post',
|
|
|
url: contextPath + "/internalDns/selectById",
|
|
|
data: param,
|
|
|
dataType: 'json',
|
|
|
success: function (resp) {
|
|
|
var data = resp.data;
|
|
|
$("#domain-add").val(data.domain);
|
|
|
$("#cloud-add").val(data.environment);
|
|
|
$("#name-add").val(data.name);
|
|
|
$("#value-add").val(data.value);
|
|
|
$("#type-add").val(data.type);
|
|
|
var tagArr=data.tag.split(",");
|
|
|
for(i=0;i<tagArr.length;i++){
|
|
|
$(":checkbox[value='"+tagArr[i]+"']").prop("checked",true);
|
|
|
}
|
|
|
},
|
|
|
error: function (data) {
|
|
|
localAlert('系统异常', data.message);
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
$("#myModal").modal('show');
|
|
|
}
|
|
|
;
|
|
|
|
|
|
//打开新增或修改页面
|
|
|
function saveConfig() {
|
|
|
var id = $("#editId").val();
|
|
|
var domain = $("#domain-add").val();
|
|
|
var cloud = $("#cloud-add").val();
|
|
|
var name = $("#name-add").val();
|
|
|
var value = $("#value-add").val();
|
|
|
var type = $("#type-add").val();
|
|
|
var tags="";
|
|
|
$("input[name='tag-add']:checked").each(function(){
|
|
|
tags += $(this).attr('value')+',';
|
|
|
});
|
|
|
|
|
|
if (name == null || name == "") {
|
|
|
$("#configForm #messageAlert").alerts({
|
|
|
content: "请输入名称!",
|
|
|
type: "danger"
|
|
|
});
|
|
|
return;
|
|
|
}
|
|
|
if (value == null || value == "") {
|
|
|
$("#configForm #messageAlert").alerts({
|
|
|
content: "请输入值!",
|
|
|
type: "danger"
|
|
|
});
|
|
|
return;
|
|
|
}
|
|
|
if (type == null || type == "") {
|
|
|
$("#configForm #messageAlert").alerts({
|
|
|
content: "请选择类型!",
|
|
|
type: "danger"
|
|
|
});
|
|
|
return;
|
|
|
}
|
|
|
var param = {
|
|
|
id: id,
|
|
|
domain:domain,
|
|
|
environment:cloud,
|
|
|
name: name,
|
|
|
value: value,
|
|
|
type:type,
|
|
|
tag:tags
|
|
|
}
|
|
|
$.ajax({
|
|
|
type: 'post',
|
|
|
url: contextPath + "/internalDns/save",
|
|
|
data: param,
|
|
|
dataType: 'json',
|
|
|
success: function (data) {
|
|
|
if (!data || data.code != 200) {
|
|
|
localAlert('新增失败', data.message);
|
|
|
} else {
|
|
|
$("#myModal").modal('hide');
|
|
|
searchKeys();
|
|
|
}
|
|
|
},
|
|
|
error: function (data) {
|
|
|
localAlert('系统异常', data.message);
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
|
|
|
//删除
|
|
|
function deleteConfig(id) {
|
|
|
var dialog = $("<div>").appendTo($("body"));
|
|
|
dialog.dialog({
|
|
|
title: "你确定删除吗",
|
|
|
backdrop: "static",
|
|
|
content: "你确定要删除该配置吗?",
|
|
|
buttons: [{
|
|
|
text: "否",
|
|
|
className: "btn-danger",
|
|
|
onclick: function () {
|
|
|
$(dialog).dialog("hide");
|
|
|
}
|
|
|
}, {
|
|
|
text: "是",
|
|
|
className: "btn-success",
|
|
|
onclick: function () {
|
|
|
$(dialog).dialog("hide");
|
|
|
$.ajax({
|
|
|
url: contextPath + "/internalDns/deleteById?id=" + id,
|
|
|
type: 'post',
|
|
|
async: false,
|
|
|
dataType: "json",
|
|
|
success: function (data) {
|
|
|
if (!data || data.code != 200) {
|
|
|
localAlert('删除失败', data.message);
|
|
|
}
|
|
|
searchKeys();
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
}]
|
|
|
});
|
|
|
}
|
|
|
|
|
|
|
|
|
</script> |
|
|
|
|
|
\ No newline at end of file |
...
|
...
|
|