docker_project.jsp 22.1 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" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%
    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 lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>项目发布</title>
    <link rel="stylesheet" href="<%=basePath %>css/unicorn.main.css"/>
    <link rel="stylesheet" href="<%=basePath %>css/unicorn.grey.css"/>
    <link rel="stylesheet" href="<%=basePath %>css/bootstrap.min.css"/>
    <link href="<%=basePath%>css/style.default.css" rel="stylesheet">
    <link href="<%=basePath%>css/morris.css" rel="stylesheet">
    <link href="<%=basePath%>css/select2.css" rel="stylesheet"/>
    <script>
        var contextPath = '<%=basePath %>';
    </script>
</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">项目发布Docker</a>
    </div>
    <div>
        <!-- query panel -->
        <form class="form-bordered">
            <div class="form-group">
                <label class="col-sm-1 control-label">操作选择</label>

                <div class="col-sm-8"  style="display: inline">
                    <div class="rdio rdio-default">
                        <input type="radio" name="operate" id="operatedeploy" value="Deploy" checked="checked" onclick="operateChange()"/>
                        <label for="operatedeploy">发布</label>
                    </div>

                    <div class="rdio rdio-default">
                        <input type="radio" name="operate" value="Rollback" id="operateback" onclick="operateChange()"/>
                        <label for="operateback">回滚</label>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-1 control-label">发布环境</label>

                <div class="col-sm-8">
                    <c:forEach items="${environments }" var="envi" varStatus="enviStatus">
                        <div class="rdio rdio-default">
                            <input type="radio" name="environments" id="${envi }" value="${envi }"
                                    <c:choose>
                                        <c:when test="${releaseWorkJob_environment!=null}">
                                            <c:set var="envi_comm">${envi},</c:set>
                                            <c:if test="${fn:containsIgnoreCase(releaseWorkJob_environment,envi_comm)}">checked="checked"</c:if>
                                        </c:when>
                                        <c:otherwise>
                                            <c:if test="${enviStatus.index==0}">checked="checked"</c:if>
                                        </c:otherwise>
                                    </c:choose>
                            />
                            <label for="${envi }">${envi }</label>
                        </div>
                    </c:forEach>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-1 control-label">项目类别</label>

                <div class="col-sm-8">
                    <c:forEach items="${projectTypes }" var="projType" varStatus="projTypeStatus">
                        <div class="rdio rdio-default"  style='display: inline'>
                            <input type="radio" name="projectTypes" id="${projType.key }" value="${projType.key }"
                                   onclick="getProjects()"

                                    <c:choose>
                                        <c:when test="${releaseWorkJob_projectType!=null}">
                                            <c:if test="${fn:containsIgnoreCase(releaseWorkJob_projectType,projType.key)}">checked="checked"</c:if>
                                        </c:when>
                                        <c:otherwise>
                                            <c:if test="${projTypeStatus.index==0}">checked="checked"</c:if>
                                        </c:otherwise>
                                    </c:choose>


                            />
                            <label for="${projType.key }">${projType.value }</label>&nbsp;&nbsp;&nbsp;
                        </div>
                    </c:forEach>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-1 control-label">项目选择</label>

                <div class="col-sm-8" id="project-div">
                </div>
            </div>

            <div class="form-group" id="branch-div">
                <label class="col-sm-1 control-label">Branch输入</label>
                <div class="col-sm-8">
                    <input name="branch" type="text" class="form-control"
                           value="${releaseWorkJob_branch}"
                           style="width: 300px"/>
                </div>
            </div>

            <div class="form-group" id="rollback-div" style="display: none">
                <label class="col-sm-1 control-label">回滚版本选择</label>

                <div class="col-sm-8" id="select-rollbackList-div">

                </div>
            </div>

            <div class="form-group" id="workid-div">
                <label class="col-sm-1 control-label">关联工单</label>
                <div class="col-sm-8">
                    <input name="workid" type="text" class="form-control"
                           value="${releaseWorkJob_id}"
                           style="width: 300px" placeholder="填写　release0　可以不关联工单号"/>
                </div>
            </div>


            <div class="form-group">
                <label class="col-sm-1 control-label">确认操作</label>

                <div class="col-sm-8">
                    <button type="button" id="submit-btn" onclick="comfirmSubmit()" class="btn btn-primary">提交</button>
                </div>
            </div>

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

<!-- 初始化确认页面  -->
<div class="modal fade" id="confirmSubmitDivId" tabindex="-1" role="dialog" aria-labelledby="confirmSubmitLabel"
     aria-hidden="true" style="padding-top: 10%">
    <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>--%>
                <h2 class="modal-title" id="confirmSubmitLabel">
                    <span style="font-weight: bold;"> 确认提交</span>
                </h2>
            </div>
            <div class="modal-body">
                <form class="bs-example bs-example-form"  role="form"
                       method="post">
                    <div class="input-group">
                        <span class="input-group-addon">操作类型</span>
                        <input type="text" name="operate_name" class="form-control" readonly="readonly">
                    </div>
                    <br>

                    <div class="input-group">
                        <span class="input-group-addon">发布环境</span>
                        <input type="text" name="environment_name" class="form-control" readonly="readonly">
                    </div>
                    <br>

                    <div class="input-group">
                        <span class="input-group-addon">工程名称</span>
                        <input type="hidden" name="project_id" class="form-control" readonly="readonly">
                        <input type="text" name="project_name" class="form-control" readonly="readonly">
                    </div>
                    <br>

                    <div class="input-group">
                        <span class="input-group-addon">分支名称</span>
                        <input type="text" name="branch_name" class="form-control" readonly="readonly">
                    </div>
                    <br>

                    <div class="input-group">
                        <span class="input-group-addon">关联工单</span>
                        <input type="text" name="workid_name" class="form-control" readonly="readonly">
                    </div>
                    <br>
                    <div class="input-group">
                        <span class="input-group-addon">回滚文件</span>
                        <input type="text" name="rollbackfile_name" class="form-control" readonly="readonly">
                    </div>

                    <div class="modal-footer">
                        <button id="confirmBtn" type="button" class="btn btn-primary" onclick="deployOrRollback()">确认</button>
                        <button id="cancelBtn" type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    </div>
                </form>
            </div>

        </div>
    </div>
</div>
<!-- 初始化确认页面  end -->

</body>
<script type="text/javascript">
    var default_releaseWorkJob_branch="${releaseWorkJob_branch}";
    var default_releaseWorkJob_project="${releaseWorkJob_project}";
    var default_releaseWorkJob_enviCount = "${releaseWorkJob_enviCount}";
    var default_releaseWorkJob_environment="${releaseWorkJob_environment}";
</script>
<script src="<%=basePath%>js/jquery-2.1.4.min.js"></script>
<script src="<%=basePath %>js/jquery-plugin/jquery.extend.js" charset="UTF-8" type="text/javascript"></script>
<script src="<%=basePath%>js/bootstrap.min.js"></script>
<script src="<%=basePath%>js/select2.min.js"></script>
<script src="<%=basePath%>js/custom.js"></script>
<script src="<%=basePath %>/js/unicorn.js"></script>
<script src="<%=basePath %>script/common/genarate_left_panel.js"></script>
<script type="text/javascript">
    $("#li_project").addClass("active open");
    $("#li_dockerRelease").addClass("active");
</script>

</html>
<script type="text/javascript">
    jQuery(document).ready(function () {
        getProjects();
    });

    /**
     * 操作变更
     */
    function operateChange() {
        getProjects();
        var operate = $("input[name='operate']:checked").val();
        if ("Rollback" == operate) {
            //隐藏Branch输入框
            document.getElementById("branch-div").style.display = "none";
            //展示 回滚选择框
            document.getElementById("rollback-div").style.display = "";


        } else {
            //展示Branch输入框
            document.getElementById("branch-div").style.display = "";
            //隐藏 回滚选择框
            document.getElementById("rollback-div").style.display = "none";
        }
    }

    /**
     * 根据操作获取当前的项目列表
     */
    function getProjects() {
        var operate = $("input[name='operate']:checked").val();
        $.ajax({
            type: 'post',
            url: contextPath + "dockerBuild/getProjects",
            data: {
                projectType:$("input[name='projectTypes']:checked").val()
             },
            dataType: 'json',
            success: function (data) {
                var obj = eval("(" + data + ")");
                if ("Deploy" == operate) {//发布多选框
                    var order1HTML="";
                    var order1num = 1;
                    for (var i = 0; i < obj.length; i++) {
                        var projectId = obj[i].id;
                        var name = obj[i].projectName;
                        var checkstr="";
                        if(default_releaseWorkJob_project!=null&&default_releaseWorkJob_project.indexOf(name+",")>=0){
                            checkstr = " checked ";
                        }
                        order1HTML += "<div class='ckbox ckbox-primary' style='display: inline'>";
                        order1HTML += " <input name='project1' type='checkbox' " + checkstr ;
                        order1HTML += " id='" + name + "' value='" + projectId + "'/>";
                        order1HTML += "<label for='" + name + "' style='width: 200px'>" + name + "</label></div>";
                        if (order1num % 4 == 0) {
                            order1HTML += "</br>";
                        }
                        order1num += 1;
                    }
                    document.getElementById("project-div").innerHTML = order1HTML ;
                    branchdefault();
                    workiddefault();
                }else{
                    var order1HTML="";
                    var order1num = 1;
                    for (var i = 0; i < obj.length; i++) {
                        var projectId = obj[i].id;
                        var name = obj[i].projectName;
                        var checkstr="";
                        if(i==0){
                            checkstr = " checked ";
                        }
                        order1HTML += "<div class='rdio rdio-primary' style='display: inline'>";
                        order1HTML += " <input onchange='getRollbackList()' name='project' type='radio' " + checkstr ;
                        order1HTML += " id='" + name + "' value='" + projectId + "'/>";
                        order1HTML += "<label for='" + name + "' style='width: 200px'>" + name + "</label></div>";
                        if (order1num % 4 == 0) {
                            order1HTML += "</br>";
                        }
                        order1num += 1;
                    }
                    document.getElementById("project-div").innerHTML = order1HTML ;
                    getRollbackList();
                }


                if(default_releaseWorkJob_enviCount!=null&&default_releaseWorkJob_enviCount>=2){
                    alert("提醒：工单的发布环境为"+default_releaseWorkJob_environment+"当前只选中一个！");
                }
            },
            error: function (e) {
                alert("从后台获取数据出错");
            }
        });
    }

    function getRollbackList(){
        var projectId = $("input[name='project']:checked").val();
        var environment = $("input[name='environments']:checked").val();
        $.ajax({
            url: contextPath + 'dockerBuild/getRollbackList?projectId=' + projectId + "&environment=" + environment,
            type: 'POST',
            dataType: 'json',
            success: function (data) {
                document.getElementById("select-rollbackList-div").innerHTML = "";
                if ("failed" == data) {
                    return;
                }

                var list = eval("(" + data + ")");
                //动态生成rollbackList的select组件
                var innerHTMLContext = "<select id='rollbackList' data-placeholder='Choose One' style='width:350px;'>";
                for (var i = 0; i < list.length; i++) {
                    innerHTMLContext += "<option value='" + list[i] + "'>" + list[i] + "</option>";
                }
                innerHTMLContext += "</select>";
                document.getElementById("select-rollbackList-div").innerHTML = innerHTMLContext;

                jQuery('#rollbackList').select2({
                    minimumResultsForSearch: -1
                });
            },
            error: function (e) {
                alert("该项目暂无备份，无法回滚");
            }
        });
    }

    function branchdefault() {
        var operate = $("input[name='operate']:checked").val();
        if (operate == "Deploy") {
            if(default_releaseWorkJob_branch!=null&&default_releaseWorkJob_branch.length>0){
                $("input[name='branch']").val(default_releaseWorkJob_branch);
                return;
            }
            //var environment = $("input[name='environments']:checked").val();
            $("input[name='branch']").val("master");
        }
    }

    function workiddefault() {
        var default_releaseWorkJob_workId="${releaseWorkJob_id}";
        if(default_releaseWorkJob_workId!=null&&default_releaseWorkJob_workId.length>0){
            $("input[name='workid']").val(default_releaseWorkJob_workId);
            return;
        }
        $("input[name='workid']").val("release0");
    }

    //确认提交
    function comfirmSubmit() {
        var operate = $("input[name='operate']:checked").val();
        var environment = $("input[name='environments']:checked").val();
        var projects = new Array();
        var projectNames = new Array();
        if ("Deploy" == operate) {//发布
            $('input[name="project1"]:checked').each(function () {
                projects.push($(this).val());//向数组中添加元素
                projectNames.push($(this).next().text());
            });

            if (projects.length == 0) {
                alert("请选择项目");
                return;
            }

            var branch = $("input[name='branch']").val();
            if (branch == "") {
                alert("请填写分支名称");
                return;
            }
            var workid = $("input[name='workid']").val();
            if (workid == "") {
                alert("请填写关联工单号");
                return;
            }

            $("input[name='operate_name']").val(operate);
            $("input[name='project_id']").val(projects);
            $("input[name='project_name']").val(projectNames);
            $("input[name='environment_name']").val(environment);
            $("input[name='branch_name']").val(branch);
            $("input[name='workid_name']").val(workid);
            $('#confirmSubmitDivId').modal('show');
        }else{
            var project = $("input[name='project']:checked").val();
            var projectName = $("input[name='project']:checked").next().text();
            var rollbackfile = $("#rollbackList option:selected").val();
            if (project == "") {
                alert("请选择回滚项目");
                return;
            }
            var workid = $("input[name='workid']").val();
            if (workid == "") {
                alert("请填写关联工单号");
                return;
            }
            if (typeof(rollbackfile) == "undefined" || rollbackfile == "") {
                alert("请选择回滚版本");
                return;
            }
            $("input[name='operate_name']").val(operate);
            $("input[name='project_id']").val(project);
            $("input[name='project_name']").val(projectName);
            $("input[name='environment_name']").val(environment);
            $("input[name='rollbackfile_name']").val(rollbackfile);
            $("input[name='branch_name']").val("");
            $("input[name='workid_name']").val(workid);
            $('#confirmSubmitDivId').modal('show');
        }
    }

    function deployOrRollback() {
        var operate = $("input[name='operate']:checked").val();
        if ("Deploy" == operate) {//发布
            mirrorAndDeploy();
        }else {
            rollback();
        }
    }

    function rollback(){
        $("#confirmBtn").attr("disabled","disabled");
        $("#cancelBtn").attr("disabled","disabled");
        var param={};
        param.operate_name=$("input[name='operate_name']").val();
        param.project_id=$("input[name='project_id']").val();
        param.project_name=$("input[name='project_name']").val();
        param.environment_name=$("input[name='environment_name']").val();
        param.rollbackImageStore=$("input[name='rollbackfile_name']").val();
        param.workid_name=$("input[name='workid_name']").val();

        $.ajax({
            url: contextPath + "dockerBuild/rollback",
            type: "post",
            dataType: "json",
            data: param ,
            success: function (response) {
                if(response!=null&&(response.code==200)){
                    GobalStandardPost( contextPath+ "dockerBuild/toBuildView",param);
                }else{
                    //失败
                    if(response==null){
                        mirrorFail("回滚失败！");
                    }else{
                        mirrorFail(response.message);
                    }

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

    }

    function mirrorAndDeploy() {
        $("#confirmBtn").attr("disabled","disabled");
        $("#cancelBtn").attr("disabled","disabled");
        var param={};
        param.operate_name=$("input[name='operate_name']").val();
        param.project_id=$("input[name='project_id']").val();
        param.project_name=$("input[name='project_name']").val();
        param.environment_name=$("input[name='environment_name']").val();
        param.branch_name=$("input[name='branch_name']").val();
        param.workid_name=$("input[name='workid_name']").val();

        $.ajax({
            url: contextPath + "dockerBuild/mirrorAndDeploy",
            type: "post",
            dataType: "json",
            data: param ,
            success: function (response) {
                if(response!=null&&(response.code==200||response.code==2000)){
                    //成功(或者部分成功)，进入刷新进度界面
                    param.buildIds=response.data;
                    param.failMsg=response.message;
                    GobalStandardPost( contextPath+ "dockerBuild/toBuildView",param);
                }else{
                    //失败
                    if(response==null){
                        mirrorFail("制作镜像失败！");
                    }else{
                        mirrorFail(response.message);
                    }

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

    function mirrorFail(msg) {
        console.log(msg);
        $("#confirmBtn").removeAttr("disabled");
        $("#cancelBtn").removeAttr("disabled");
        alert(JSON.stringify(msg));
    }

</script>