internal_domain.jsp 22.6 KB

Raw Blame History Permalink

<%@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="yohoops-aws_media-li" onclick="searchKeysBefore('yohoops','aws_media')"><strong>yohoops.org.:aws_media</strong>
                                </li>
                                </li>
                                <li id="yohoops-qcloud_media-li" onclick="searchKeysBefore('yohoops','qcloud_media')"><strong>yohoops.org.:qcloud_media</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">&times;</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("&nbsp;");
                    $("<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;
        }
        if(type == "a" && !isIP(value)){
            $("#configForm #messageAlert").alerts({
                content: "IP格式不正确！",
                type: "danger"
            });
            return;
        }
        if(type == "cname" && !isDomain(value)){
            $("#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();
                        }
                    });
                }
            }]
        });
    }

    function commit() {
        var currentDomain = $("#current_domain").val();
        if (currentDomain == 'yohoops') {
            currentDomain = 'yohoops.org.';
        } else {
            currentDomain = 'yohobuy.com.';
        }
        var currentCloud = $("#current_cloud").val();
        var param = {
            domain: currentDomain,
            environment: currentCloud
        };
        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/refresh",
                        type: 'post',
                        async: false,
                        dataType: "json",
                        data: param,
                        success: function (data) {
                            localAlert('刷新结果', data.data);
                        }
                    });
                }
            }]
        });

    }

    function isIP(ip)
    {
        var reSpaceCheck = /^(\d+)\.(\d+)\.(\d+)\.(\d+)$/;
        if (reSpaceCheck.test(ip))
        {
            ip.match(reSpaceCheck);
            if (RegExp.$1<=255&&RegExp.$1>=0
                    &&RegExp.$2<=255&&RegExp.$2>=0
                    &&RegExp.$3<=255&&RegExp.$3>=0
                    &&RegExp.$4<=255&&RegExp.$4>=0)
            {
                return true;
            }else
            {
                return false;
            }
        }else
        {
            return false;
        }
    }

    function isDomain(domain){
        var pattern  = /[A-Za-z0-9_]+(\.[A-Za-z0-9_]+)+/;
        if (pattern.test(domain)){
            return true;
        }else{
            return false;
        }
    }

</script>