project_build.jsp 14.2 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/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-title">
                <h5>发布进程信息</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>
                                <input type="text" id="operate_name" name="operate_name" class="form-control"
                                       readonly="readonly" value="${operate_name}"/>
                            </div>
                            <div class="input-group" style="float: left;">
                                <span class="input-group-addon">环境:</span>
                                <input type="text" id="environment_name" name="environment_name" class="form-control"
                                       readonly="readonly" value="${environment_name}"/>
                            </div>
                            <div class="input-group" style="float: left;">
                                <span class="input-group-addon">分支:</span>
                                <input type="text" id="branch_name" name="branch_name" class="form-control"
                                       readonly="readonly" value="${branch_name}"/>
                            </div>
                            <div class="input-group" style="float: left;">
                                <span class="input-group-addon">回滚:</span>
                                <input type="text" id="rollbackfile_name" name="rollbackfile_name" class="form-control"
                                       readonly="readonly" value="${rollbackfile_name}"/>
                            </div>
                        </div>
                    </div>
                    <button id="btnTest" class="btn btn-primary" style="margin-left: 10px;margin-top:10px" onclick="testexecute()">
                        集成测试
                    </button>
                </div>
                <div class="widget-title" style="height: 40px;display:none;" id="testingdiv">
                    <div>
                        <div class="form-inline" role="form">
                            <div class="input-group" style="float: left;margin-left: 25px;margin-top:3px">
                                <span class="input-group-addon">集成测试结果:</span>
                                <input type="text" readonly="readonly" id="testingresult" name="testingresult" style="width: 500px" class="form-control" placeholder="" />
                            </div>
                        </div>
                    </div>
                </div>
                <c:forEach items="${messageList }" var="message">
                    <div style="float: left;height: 600px;">
                        <hr>
                        <div>执行顺序:<strong>${message.projectOrder}</strong>
                        </div>
                        <div>当前项目:<input type="text" id="currentProject_${message.id}" value="${message.currentProject}" readonly="readonly">
                            <button type="button" id="cancel-btn_${message.id}" onclick="cancelBuild('${message.id}')"
                                    class="btn btn-xs btn-danger">取消
                            </button>
                        </div>
                        <div style="height: 50px" class="alert alert-warning" id="task-info-div_${message.id}">
                        </div>
                    <textarea id="resultArea_${message.id}" rows="25" cols="100"
                              style="background-color: black; color: white" readonly="readonly"></textarea>
                    </div>
                </c:forEach>


            </div>
        </div>
    </div>

</div>
<input type="hidden" id="messageListHidden" value="${messageids}">
</body>
<script src="<%=basePath %>script/common/genarate_left_panel.js"></script>
<script>
    $("#li_project").addClass("active open");
    $("#li_projectRelease").addClass("active");
</script>
<script>

    var myArray;
    var removeArray = new Array();
    $(function () {
        var messageListHidden = $("#messageListHidden").val();
        myArray = messageListHidden.split(",");

        var interval = setInterval(function () {//查后台,展示数据
            $.each(myArray, function (idx, val) {
                if(jQuery.inArray(val, removeArray) != -1){
                    return;
                }
                if(val == ""){
                    return;
                }
                var cproject = $("#currentProject_"+val).val();
                $.ajax({
                    url: contextPath + 'project/getbuildmsg?messageid=' + val+"&project="+cproject,
                    type: 'POST',
                    dataType: 'json',
                    success: function (data3) {
                        var obj2 = eval("(" + data3 + ")");
                        var messagedata = obj2.data;

                        var currproject = messagedata.currentProject;
                        if (currproject != cproject) {
                            $("#currentProject_"+val).val(currproject);//更换当前的项目
                            $("#resultArea_" + val).val("")
                        }

                        if ((messagedata.message != "") && (messagedata.message != null) && (messagedata.message != undefined)) {
                            var d = $("#resultArea_" + val).val();
                            $("#resultArea_"+ val).val(d + messagedata.message);
                            var scrollTop = $("#resultArea_" + val)[0].scrollHeight;
                            $("#resultArea_" + val).scrollTop(scrollTop);
                        }

                        //code为2 ,则结束
                        var code = obj2.code;
                        var message = obj2.message;
                        //只有状态2,3,4才表示系统部署成功与否
                        if (code == 2 || code == 3 || code == 4) {
                            document.getElementById("task-info-div_" + val).innerHTML = "<strong>'" + message + "'</strong>";
                            removeArray.push(val);
                            $("#cancel-btn_"+val).hide();
                        }

                    },
                    error: function (e) {
                    }
                });
            });
        }, 3000);
    });

    /**
     * 取消
     */
    function cancelBuild(messageid) {

        var jsondata = {"id": messageid};
        $.ajax({
            url: contextPath + 'project/cancelBuild',
            type: 'POST',
            dataType: 'json',
            data: jsondata,
            success: function (data) {
            },
            error: function (e) {
            }
        });
    }

    //做停止用
    var setIntervalIndex;
    //调用30次后停止调用
    var setIntervalCount = 0;

    /**
     * 集成测试
     */
    function testexecute(){
        $("#testingdiv").hide();
        setIntervalCount = 0;
        var value;
        var envi = $("#environment_name").val();
        if(envi == "aws"){
            value = 6;
        }else if(envi == "qcloud"){
            value = 7;
        }else{
            value = 5;
        }
        if(setIntervalIndex != null && setIntervalIndex != undefined){
            clearInterval(setIntervalIndex);
            setIntervalIndex = null;
        }
        $.ajax({
            url: contextPath + 'project/testexecute?env=' + value,
            type: 'POST',
            dataType: 'json',
            success: function (returnVal) {
                $("#btnTest").attr('disabled',true);//设置disabled属性为true,按钮不可用
                if(returnVal == null || returnVal.data == null || returnVal.data == ""){
                    alert("http://qmc.yohops.com:9999/autoTask/executeApiAutoTask,参数env="+value+",post请求失败!");
                    $("#btnTest").removeAttr("disabled"); //移除disabled属性
                    return;
                }
                var json = returnVal.data;
                //获取到id
                var id = json.id;
                setIntervalIndex = setInterval(function(){testget(id);}, 1000 * 60);
            },
            error: function (e) {
            }
        });
    }

    /**
     * 集成测试
     */
    function testget(id){
        if(id == null || id == undefined){
            return;
        }
        $.ajax({
            url: contextPath + 'project/testget?id=' + id,
            type: 'POST',
            dataType: 'json',
            success: function (returnVal) {
                if(returnVal == null || returnVal.data == null || returnVal.data == ""){
                    setIntervalCount = setIntervalCount + 1;
                    if(setIntervalCount >= 30){
                        $("#btnTest").removeAttr("disabled"); //移除disabled属性
                        clearInterval(setIntervalIndex);
                    }
                    return;
                }
                var message = returnVal.message;
                var code = returnVal.code;

                $("#testingdiv").show();
                $("#testingresult").val("id:" + id + ";message:" + message + ";code:"+code);
                $("#btnTest").removeAttr("disabled"); //移除disabled属性
                clearInterval(setIntervalIndex);
            },
            error: function (e) {
            }
        });
    }
</script>

<script>
    document.onkeydown = function()
    {
        if(event.keyCode==116 || event.keyCode==8 ||  (event.ctrlKey && event.keyCode==82) || event.keyCode == 13) {
            event.keyCode=0;
            event.returnValue = false;
        }
    }
    document.oncontextmenu = function() {event.returnValue = false;}

</script>