docker_build.jsp 18.3 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="workid_name" name="workid_name" class="form-control"
                                       readonly="readonly" value="${workid_name}"/>
                            </div>
                        </div>
                    </div>

                </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:if test="${failMsg!=null&&failMsg!=''}">
                    <div class="widget-title" style="height: 40px;" >
                        <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"  style="width: 500px" class="form-control" placeholder="" value="${failMsg}"/>
                                </div>
                            </div>
                        </div>
                    </div>
                </c:if>
                <c:forEach items="${buildInfoList }" var="buildInfo">
                    <div style="float: left;height: 600px;">
                        <hr>
                        <div>当前项目:<input type="text" id="currentProject_${buildInfo.buildId}" value="${buildInfo.projectName}" readonly="readonly">
                        </div>
                        <%--<div style="height: 50px" class="alert alert-warning" id="task-info-div_${dockerProject.id}">
                        </div>--%>
                    <textarea id="resultArea_${buildInfo.buildId}" rows="25" cols="100"
                              style="background-color: black; color: white" readonly="readonly"></textarea>
                    </div>
                </c:forEach>


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

</div>

</body>
<script src="<%=basePath %>script/common/genarate_left_panel.js"></script>
<script>
    $("#li_project").addClass("active open");
    $("#li_dockerRelease").addClass("active");
</script>
<script>
    var buildInfoList = '${buildInfoList}';

    $(function () {
        if(buildInfoList!=null&&buildInfoList.length>0){
            var buildInfoListJson=JSON.parse(buildInfoList);
            //docek发布
            for(var i=0;i<buildInfoListJson.length;i++){
                buildDocker(buildInfoListJson[i]);
            }
        }
    });


    function buildDocker(buildInfo){
        //镜像的制作状态
       console.log(buildInfo);
       builderDocker_queryJenkinsStatus(buildInfo,buildInfo.buildId);

    }

    function builderDocker_queryJenkinsStatus(buildInfo,textareaId) {
        var buildId=buildInfo.buildId;
        var url = contextPath + 'dockerBuild/queryJenkinsStatus';
        writeToText(textareaId,"镜像制作信息:"+buildId);
        writeToText(textareaId,"开始查询镜像制作是否完成..........");
        var count = 0;
        var errorTimes = 0;
        var intervalIndex = setInterval(function() {
            $.ajax({
                url: url,
                type: 'POST',
                data:{
                    buildId:buildId
                },
                dataType: 'json',
                timeout : 0,
                success: function (data) {
                    if (!data || data.code != 200) {
                        errorTimes++;
                        if(errorTimes>5){
                            clearInterval(intervalIndex);
                            writeToText(textareaId,"发生错误data is null or data code !=200,查询镜像制作程序终止..........");
                            writeToText(textareaId,"data is "+data);
                            responseError(data);
                        }else{
                            writeToText(textareaId,"发生错误data is null or data code !=200,继续获取数据,请耐心等待, errorTimes =."+errorTimes);
                            writeToText(textareaId,"data is "+data);
                        }
                    }else{
                        if(!("SUCCESS"==data.data)){
                            writeToText(textareaId,"............查询次数............"+count);
                        }else{
                            clearInterval(intervalIndex);
                            writeToText(textareaId,"镜像制作完成..........");
                            writeToText(textareaId,"开始查询腾讯云发布结果,请等待..........");
                            //开始查询腾讯云deploy状态,延迟60秒再开始查询
                            setTimeout(function(){
                                builderDocker_queryServiceStatus(buildInfo,textareaId);
                            }, 6000);
                        }
                    }
                    count += 1;
                },
                error: function (e) {
                    errorTimes++;
                    if(errorTimes>5){
                        clearInterval(intervalIndex);
                        writeToText(textareaId,"发生错误error,查询镜像制作程序终止..........");
                        writeToText(textareaId,"error is "+e);
                        requestError(textareaId,url);
                    }else{
                        writeToText(textareaId,"发生错误error,继续获取数据,请耐心等待,errorTimes =."+errorTimes);
                        writeToText(textareaId,"error is "+e);
                    }
                }
            });
        }, 20000);
    }

    function builderDocker_queryServiceStatus(buildInfo,textareaId){
        var paramFront=getDockerRequestParam(buildInfo.projectInfo);
        var url = contextPath + 'dockerBuild/queryDockerServerStatus';
        writeToText(textareaId,"开始查询服务启动..........");
        var count = 0;
        var errorTimes = 0;
        var intervalIndex = setInterval(function() {
            $.ajax({
                url: url,
                type: 'POST',
                data:paramFront,
                dataType: 'json',
                timeout : 0,
                success: function (data) {
                    if (!data || data.code != 200) {
                        errorTimes++;
                        if(errorTimes>5){
                            clearInterval(intervalIndex);
                            writeToText(textareaId,"发生错误data is null or data code !=200,查询服务启动程序终止..........");
                            writeToText(textareaId,"data is "+data);
                            responseError(data);
                        }else{
                            writeToText(textareaId,"发生错误data is null or data code !=200,查询服务启动,继续获取数据,请耐心等待, errorTimes =."+errorTimes);
                            writeToText(textareaId,"data is "+data);
                        }
                    }else{
                        if(data.data!=null&&((data.data).toUpperCase()=="NORMAL")){
                            clearInterval(intervalIndex);
                            writeToText(textareaId,"查询服务启动完成..........over!");
                        }else{
                            writeToText(textareaId,"............查询次数............"+count+"......当前状态---->"+data.data);
                        }
                    }
                    count += 1;
                },
                error: function (e) {
                    errorTimes++;
                    if(errorTimes>5){
                        clearInterval(intervalIndex);
                        writeToText(textareaId,"发生错误error,查询服务启动程序终止..........");
                        writeToText(textareaId,"error is "+e);
                        requestError(textareaId,url);
                    }else{
                        writeToText(textareaId,"发生错误error,查询服务启动,继续获取数据,请耐心等待,errorTimes =."+errorTimes);
                        writeToText(textareaId,"error is "+e);
                    }
                }
            });
        }, 10000);
    }

    function getDockerRequestParam(dockerProject){
        console.log("dockerProject is "+dockerProject);
        var frontParam={};
        frontParam.serviceName=dockerProject.dockerProjectName;
        if($("#environment_name").val().toUpperCase().indexOf("GRAY")>=0){
            frontParam.clusterId=dockerProject.dockerGrayClusterId;
            frontParam.namespace =dockerProject.dockerGrayNameSpace;
        }else{
            frontParam.clusterId=dockerProject.dockerOnlineClusterId;
            frontParam.namespace =dockerProject.dockerOnlineNameSpace;
        }
        return frontParam;
    }

   /* function builderDocker_deploy(dockerProject){
        writeToText(dockerProject.id,"开始docker发布....");
        var url= contextPath + 'dockerBuild/deployMirror';
        $.ajax({
            url: url,
            type: 'POST',
            dataType: 'json',
            data:getDockerRequestParam(dockerProject),
            async: false,
            success: function (data) {
                if (!data || data.code != 200) {
                    writeToText(dockerProject.id,"....docker发布请求失败!");
                    responseError(dockerProject.id,data);
                }else{
                    writeToText(dockerProject.id,"....docker发布请求成功");
                    builderDocker_queryServiceStatus(dockerProject);
                }
            },
            error: function (e) {
                writeToText(dockerProject.id,"....docker发布请求失败,发生异常!");
                requestError(dockerProject.id,url);
            }
        });
    }*/

    /*function builderDocker_createMirror(dockerProject){
        writeToText(dockerProject.id,"开始jenkins制作镜像....");
        var url= contextPath + 'dockerBuild/createMirror';
        var mirrorParam= {
            projectName:dockerProject.projectName,
            projectGitGroup:dockerProject.projectGitGroup,
            deployName:dockerProject.dockerProjectName,
            projectJobType:dockerProject.projectJobType,
            projectPort:dockerProject.port,
            nodeEnv:$("#environment_name").val(),
            branch:$("#branch_name").val(),
            releaseWorkId:$("#workid_name").val()
        };

        if($("#environment_name").val().toUpperCase().indexOf("GRAY")>=0){
            mirrorParam.imageSource=dockerProject.dockerGrayImageStore;
        }else{
            mirrorParam.imageSource=dockerProject.dockerOnlineImageStore;
        }
        $.ajax({
            url: url,
            type: 'POST',
            dataType: 'json',
            data:mirrorParam,
            async: false,
            success: function (data) {
                if (!data || data.code != 200) {
                    writeToText(dockerProject.id,"....jenkins制作镜像请求失败!");
                    responseError(dockerProject.id,data);
                }else{
                    writeToText(dockerProject.id,"....jenkins制作镜像请求成功,buildId is "+data.data);

                    builderDocker_queryJenkinsStatus(data.data,dockerProject);
                }
            },
            error: function (e) {
                writeToText(dockerProject.id,"....jenkins制作镜像请求失败,发生异常!");
                requestError(dockerProject.id,url);
            }
        });
    }*/



    //写入消息
    function writeToText(id,msg){
        var d = $("#resultArea_"+id).val();
        $("#resultArea_"+id).html(d + "&#13" + msg);
        var scrollTop = $("#resultArea_"+id)[0].scrollHeight;
        $("#resultArea_"+id).scrollTop(scrollTop);
    }

    //请求接口异常
    function requestError(id,api){
        writeToText(id,'系统异常:' + api);
    }




</script>