switch_search.jsp 12.8 KB
<%@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 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="panel-body">

                <div class="row">
                    <div class="col-xs-11">
                        <!-- PAGE CONTENT BEGINS -->

                        <div class="row">
                            <div class="col-xs-12 col-sm-12 widget-container-span">
                                <div class="tabbable">
                                    <ul class="nav nav-tabs" id="myTab">
                                        <li class="active" style="width: 110px">
                                            <a data-toggle="tab" href="#home">
                                                <em class="green icon-cloud bigger-110"></em>
                                                aws
                                            </a>
                                        </li>

                                        <li style="width: 110px">
                                            <a data-toggle="tab" href="#profile">
                                                <em class="green icon-cloud bigger-110"></em>
                                                qq
                                            </a>
                                        </li>
                                    </ul>

                                    <div class="tab-content">
                                        <div id="home" class="tab-pane in active">
                                            <button class="btn btn-sm btn-success"
                                                    onclick="reloadTable('aws')">
                                                <em class="icon-cogs bigger-110"></em>
                                                刷新
                                            </button>

                                            <button class="btn btn-sm btn-info"
                                                    onclick="switchSearch('aws')">
                                                <em class="icon-cogs bigger-110"></em>
                                                aws流量切换
                                            </button>
                                            <button class="btn btn-sm btn-danger"
                                                    onclick="commit('aws')">
                                                <em class="icon-cogs bigger-110"></em>
                                                提交至域名服务器
                                            </button>
                                            <h3 class="header smaller red"></h3>
                                            <table id="awsDetailTable"></table>

                                        </div>

                                        <div id="profile" class="tab-pane">
                                            <button class="btn btn-sm btn-success"
                                                    onclick="reloadTable('qcloud')">
                                                <em class="icon-cogs bigger-110"></em>
                                                刷新
                                            </button>

                                            <button class="btn btn-sm btn-success"
                                                    onclick="switchSearch('qcloud')">
                                                <em class="icon-cogs bigger-110"></em>
                                                qcloud流量切换
                                            </button>
                                            <button class="btn btn-sm btn-danger"
                                                    onclick="commit('qcloud')">
                                                <em class="icon-cogs bigger-110"></em>
                                                提交至域名服务器
                                            </button>
                                            <h3 class="header smaller red"></h3>
                                            <table id="qcloudDetailTable"></table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- /span -->

                        </div>
                        <!-- /row -->

                    </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_switchsearch").addClass("active");
</script>

</body>

</html>

<script>

    $(function () {
        //加载表格
        $("#awsDetailTable").table({
            //title: "aws搜索流量列表",
            dataType: "json",
            pagination: false,
            pageSize: 10,
            columnAutoWidth: false,
            url: contextPath + "internalDns/selectAll",
            queryParams:{
                domain: 'yohoops.org.',
                environment: 'aws',
                tag: 'search'
            },
            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;
                }
            }]
        });

        //加载表格
        $("#qcloudDetailTable").table({
            //title: "qcloud搜索流量列表",
            dataType: "json",
            pagination: false,
            pageSize: 10,
            columnAutoWidth: false,
            url: contextPath + "internalDns/selectAll",
            queryParams:{
                domain: 'yohoops.org.',
                environment: 'qcloud',
                tag: 'search'
            },
            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;
                }
            }]
        });

    });
    
    function commit(cloud) {
        alert("开发中"+cloud);
    }

    function switchSearch(cloud) {
        alert("开发中"+cloud);
    }

    function reloadTable(cloud){
        if("aws"==cloud){
            $("#awsDetailTable").table("load");
        }else{
            $("#qcloudDetailTable").table("load");
        }

    }
</script>