nginxSync.jsp 13.5 KB
<%@ page import="org.aspectj.weaver.ast.Var" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%
    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>
    <link href="<%=basePath %>css/nginxview.css" rel="stylesheet">
    <script type="text/javascript" src="<%=basePath %>js/echarts.simple.min.js"></script>
    <script type="text/javascript" src="<%=basePath %>js/echarts.min.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">Nginx配置同步</a>
    </div>

    <div class="container-fluid">
        <div class="widget-box">
            <div class="widget-title">
                <h5>Nginx配置同步</h5>
            </div>
            <div class="container-fluid">
                <div class="row-fluid">
                    <div class="col-md-6" style="width: 90%">
                        <div class="form-group">
                            <label class="col-sm-1 control-label">任务选择</label>

                            <div class="col-sm-8">
                                <div class="rdio rdio-default">
                                    <input type="radio" name="operate" id="nginx" value="nginx_val" checked="checked"
                                           onclick="operateChange(1)"/>
                                    <label for="nginx">nginx 同步</label>
                                </div>

                                <div class="rdio rdio-default">
                                    <input type="radio" name="operate" value="dns_nginx_val" id="dns_nginx"
                                           onclick="operateChange(3)"/>
                                    <label for="dns_nginx">DNS_nginx 同步</label>
                                </div>

                                <div class="rdio rdio-default">
                                    <input type="radio" name="operate" value="h5_nginx_val" id="h5_nginx"
                                           onclick="operateChange(2)"/>
                                    <label for="h5_nginx">H5_nginx 同步</label>
                                </div>

                                <div class="rdio rdio-default">
                                    <input type="radio" name="operate" value="h5_nginx_val" id="h5_nginx"
                                           onclick="operateChange(4)"/>
                                    <label for="h5_nginx">zixun_nginx 同步</label>
                                </div>

                                <div class="rdio rdio-default">
                                    <input type="radio" name="operate" value="h5_nginx_val" id="h5_nginx"
                                           onclick="operateChange(5)"/>
                                    <label for="h5_nginx">mars_nginx 同步</label>
                                </div>

                                <div class="rdio rdio-default">
                                    <input type="radio" name="operate" value="h5_nginx_val" id="h5_nginx"
                                           onclick="operateChange(6)"/>
                                    <label for="h5_nginx">global_nginx 同步</label>
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="col-md-6" style="width: 90%; margin-top: 20px">
                        <div class="form-group">
                            <label class="col-sm-1 control-label">范围选择</label>
                            <div class="col-sm-8">
                                <div class="rdio rdio-default">
                                    <input type="radio" name="operate-1" id="all" value="all_val" checked="checked"
                                           onclick="operSelect(1)"/>
                                    <label for="all">All</label>
                                </div>

                                <div class="rdio rdio-default">
                                    <input type="radio" name="operate-1" value="qcloud_val" id="qcloud"
                                           onclick="operSelect(2)"/>
                                    <label for="qcloud">腾讯云</label>
                                </div>

                                <div class="rdio rdio-default">
                                    <input type="radio" name="operate-1" value="aws_val" id="aws"
                                           onclick="operSelect(3)"/>
                                    <label for="aws">AWS</label>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-6" style="width: 90%">
                        <div class="form-group">
                            <div class="col-sm-8" style="margin-bottom: 10px;margin-top: 10px">
                                <button id="exe_btn" class="btn btn-success btn-rounded"
                                        onclick="btn_click()">Run
                                </button>
                            </div>
                        </div>
                        <div class="form-group" style="margin-top: 40px">
                            <div class="col-sm-8">
                                <textarea id="textArea" rows="30" cols="120"
                                          style="background-color: black; color: white;resize: none"
                                          readonly="readonly"></textarea>
                            </div>
                        </div>
                    </div><!-- col-md-6 -->
                </div>
            </div>
        </div>

    </div>
</div>
</body>
<script src="<%=basePath %>script/common/genarate_left_panel.js"></script>
<script>
    $("#li_config").addClass("active open");
    $("#li_nginxSync").addClass("active");
</script>
<script type="text/javascript">
    $(

    );

    var type = 1;

    var select = 1;

    function operateChange(id) {
        type = id;
    }

    function operSelect(id) {
        select = id;
    }

    function disableSelect() {
        var select = document.getElementById("nginx");
        select.disabled = true;
        select = document.getElementById("dns_nginx");
        select.disabled = true;
        select = document.getElementById("h5_nginx");
        select.disabled = true;
        select = document.getElementById("all");
        select.disabled = true;
        select = document.getElementById("qcloud");
        select.disabled = true;
        select = document.getElementById("aws");
        select.disabled = true;
        var btn = document.getElementById("exe_btn");
        btn.disabled = true;
    }

    function ableSelect() {
        var select = document.getElementById("nginx");
        select.disabled = false;
        select = document.getElementById("dns_nginx");
        select.disabled = false;
        select = document.getElementById("h5_nginx");
        select.disabled = false;
        select = document.getElementById("all");
        select.disabled = false;
        select = document.getElementById("qcloud");
        select.disabled = false;
        select = document.getElementById("aws");
        select.disabled = false;
        var btn = document.getElementById("exe_btn");
        btn.disabled = false;
    }

    function btn_click() {
        disableSelect();
        console.log("select "+select);
        document.getElementById("textArea").innerText = "";
        $.ajax({
            url: getUrlBasePath() + "/nginxSync/pushTask",
            type: "post",
            dataType: "json",
            data: {
                type: type,
                select: select
            },
            success: function (response) {
                var txtId = "textArea";
                var interval = setInterval(function () {
                    $.ajax({
                        url: "/nginxSync/getTaskLog",
                        type: 'POST',
                        dataType: 'json',
                        data: {
                            taskId: response.data.taskId
                        },
                        success: function (data3) {
                            console.log(data3);
                            var messagedata = data3.data;
                            var logList = messagedata.log;
                            if (logList != "") {
                                var d = document.getElementById(txtId).innerHTML;
                                document.getElementById(txtId).innerText = d + logList;
                                console.log("textarea: " + document.getElementById(txtId).innerHTML);
                                document.getElementById(txtId).scrollTop = document.getElementById(txtId).scrollHeight;
                            }
                            //code为2 ,则结束
                            var code = messagedata.isFinished;
                            if (code == 1) {
                                clearInterval(interval);
                                alert("Success to execute job...");
                                ableSelect();
                            }
                        },
                        error: function (e) {
                            alert("从后台获取数据出错");
                            ableSelect();
                        }
                    });

                }, 3000);
            },
            error: function (e) {
                alert("Failed to execute job...");
                ableSelect();
            }
        });
    }


</script>
</body>
</html>