aiforge/templates/repo/debugjob/index.tmpl

<!-- 头部导航栏 -->
{{template "base/head" .}}

<style>
    .label_after::after{
        margin: -.2em 0 0 .2em;
        content: '\00a0';
}
    .selectcloudbrain .active.item{
        color: #0087f5 !important;
        border: 1px solid #0087f5;
        margin: -1px;
        background: #FFF !important;
    }
    #deletemodel {
        width: 100%;
        height: 100%;
    }
    /* 弹窗 */

    #mask {
        position: fixed;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        filter: alpha(opacity=60);
        background-color: #777;
        z-index: 1000;
        display: none;
        opacity: 0.8;
        -moz-opacity: 0.5;
        padding-top: 100px;
        color: #000000
    }

    #loadingPage {
        margin: 200px auto;
        width: 50px;
        height: 40px;
        text-align: center;
        font-size: 10px;
        display: block;
    }

    #loadingPage>div {
        background-color: green;
        height: 100%;
        width: 6px;
        display: inline-block;
        -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
        animation: sk-stretchdelay 1.2s infinite ease-in-out;
    }

    #loadingPage .rect2 {
        -webkit-animation-delay: -1.1s;
        animation-delay: -1.1s;
    }

    #loadingPage .rect3 {
        -webkit-animation-delay: -1.0s;
        animation-delay: -1.0s;
    }

    #loadingPage .rect4 {
        -webkit-animation-delay: -0.9s;
        animation-delay: -0.9s;
    }

    #loadingPage .rect5 {
        -webkit-animation-delay: -0.8s;
        animation-delay: -0.8s;
    }

    @-webkit-keyframes sk-stretchdelay {
        0%,
        40%,
        100% {
            -webkit-transform: scaleY(0.4)
        }
        20% {
            -webkit-transform: scaleY(1.0)
        }
    }

    @keyframes sk-stretchdelay {
        0%,
        40%,
        100% {
            transform: scaleY(0.4);
            -webkit-transform: scaleY(0.4);
        }
        20% {
            transform: scaleY(1.0);
            -webkit-transform: scaleY(1.0);
        }
    }
    /* 消息框 */

    .alert {
        display: none;
        position: fixed;
        width: 100%;
        z-index: 1001;
        padding: 15px;
        border: 1px solid transparent;
        border-radius: 4px;
        text-align: center;
        font-weight: bold;
    }

    .alert-success {
        color: #3c763d;
        background-color: #dff0d8;
        border-color: #d6e9c6;
    }

    .alert-info {
        color: #31708f;
        background-color: #d9edf7;
        border-color: #bce8f1;
    }

    .alert-warning {
        color: #8a6d3b;
        background-color: #fcf8e3;
        border-color: #faebcc;
    }

    .alert-danger {
        color: #a94442;
        background-color: #f2dede;
        border-color: #ebccd1;
    }

    .pusher {
        width: calc(100% - 260px);
        box-sizing: border-box;
    }
    /* 弹窗 (background)  */

    #imageModal {
        display: none;
        position: fixed;
        z-index: 1;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgb(0, 0, 0);
        background-color: rgba(0, 0, 0, 0.4);
    }
    /* 弹窗内容 */

    .modal-content {
        background-color: #fefefe;
        margin: 15% auto;
        padding: 20px;
        border: 1px solid #888;
        width: 30%;
    }
    /* 关闭按钮 */

    .close {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
    }

    .close:hover,
    .close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }

    .dis {
        margin-bottom: 20px;
    }

    .disabled {
        cursor: pointer;
        pointer-events: none;
    }
    .time-show{
        font-size: 10px;
        margin-top: 0.4rem;
        display: inline-block;
    }

</style>

<!-- 弹窗 -->
<div id="mask">
    <div id="loadingPage">
        <div class="rect1"></div>
        <div class="rect2"></div>
        <div class="rect3"></div>
        <div class="rect4"></div>
        <div class="rect5"></div>
    </div>
</div>

<div class="alert"></div>
<div class="repository release dataset-list view">
    {{template "repo/header" .}}
    {{template "base/alert" .}}
    <!-- 提示框 -->

    <!-- 列表容器 -->
    <div class="ui container">

        <div class="ui two column stackable grid">
                <div class="column">
                    <div class="ui blue small menu compact selectcloudbrain">
                        <a class="active item" href="{{.RepoLink}}/debugjob?debugListType=all">{{$.i18n.Tr "repo.modelarts.notebook"}}</a>
                        <a class="item" href="{{.RepoLink}}/modelarts/train-job">{{$.i18n.Tr "repo.modelarts.train_job"}}</a>
                        <a class="item" href="{{.RepoLink}}/modelarts/inference-job">{{$.i18n.Tr "repo.modelarts.infer_job"}}</a>
                        <a class="item" href="{{.RepoLink}}/cloudbrain/benchmark">{{$.i18n.Tr "repo.modelarts.evaluate_job"}}</a>
                    </div>
                </div>
                <div class="column right aligned">
                    <div class="ui selection dropdown" style="min-width: 10em;min-height:2.6em;border-radius: .28571429rem;margin-right: 1em;padding: .67em 3.2em .7em 1em;">
                        {{svg "octicon-server" 16}}
                        <div class="default text" style="color: rgba(0,0,0,.87);"></div>
                        <i class="dropdown icon"></i>
                        <div class="menu">
                            <div class="item" data-value="all">{{$.i18n.Tr "repo.gpu_type_all"}}</div>
                            <div class="item"  data-value="CPU/GPU">CPU/GPU</div>
                            <div class="item"  data-value="NPU">NPU</div>
                        </div>
                    </div>
                    {{if .Permission.CanWrite $.UnitTypeCloudBrain}}
                    <a class="ui green button" href="{{.RepoLink}}/cloudbrain/create">{{$.i18n.Tr "repo.modelarts.train_job.new_debug"}}</a>
                    {{else}}
                    <a class="ui disabled button">{{$.i18n.Tr "repo.modelarts.train_job.new_debug"}}</a>
                    {{end}}
                </div>
        </div>
        {{if eq 0 (len .Tasks)}}
        <div class="ui placeholder segment bgtask-none">
                <div class="ui icon header bgtask-header-pic"></div>
                <div class="bgtask-content-header">{{$.i18n.Tr "repo.debug_task_not_created"}}</div>
                <div class="bgtask-content">
                    {{if $.RepoIsEmpty}}
                    <div class="bgtask-content-txt">{{$.i18n.Tr "repo.repo_not_initialized" .RepoLink | Safe}}</div>
                    {{end}}
                    <div class="bgtask-content-txt">{{$.i18n.Tr "repo.debug_task_running_limit"}}</div>
                    <div class="bgtask-content-txt">{{$.i18n.Tr "repo.dataset_desc"}}</div>
                    <div class="bgtask-content-txt">{{$.i18n.Tr "repo.platform_instructions" | Safe}}</div>
                </div>
        </div>
        {{else}}
        <!-- 中下列表展示区 -->
        <div class="ui grid">
            <div class="row">
                <div class="ui sixteen wide column">
                    <!-- 任务展示 -->
                    <!-- 表头 -->
                    <div class="dataset list">
                        <div class="ui grid stackable" style="background: #f0f0f0;;">
                            <div class="row">
                                <div class="four wide column">
                                    <span style="margin:0 6px">{{$.i18n.Tr "repo.cloudbrain_task"}}</span>
                                </div>
                                <div class="two wide column text center">
                                    <span style="margin:0 6px">{{$.i18n.Tr "repo.modelarts.status"}}</span>
                                </div>
                                <div class="two wide column text center">
                                    <span>{{$.i18n.Tr "repo.modelarts.createtime"}}</span>
                                </div>
                                <div class="two wide column text center">
                                    <span>{{$.i18n.Tr "repo.modelarts.computing_resources"}}</span>
                                </div>
                                <div class="one wide column text center">
                                    <span>{{$.i18n.Tr "repo.cloudbrain_creator"}}</span>
                                </div>
                                <div class="five wide column text center">
                                    <span>{{$.i18n.Tr "repo.cloudbrain_operate"}}</span>
                                </div>
                            </div>
                        </div>
                        {{range .Tasks}}
                        <div class="ui grid stackable item">
                            <div class="row">
                                <!-- 任务名 -->
                                <div class="four wide column">
                                    <a class="title" href='{{if eq .ComputeResource "CPU/GPU"}}{{$.RepoLink}}/cloudbrain/{{.Cloudbrain.ID}}{{else}}{{$.RepoLink}}/modelarts/notebook/{{.Cloudbrain.ID}}{{end}}'  title="{{.JobName}}" style="font-size: 14px;">
                                        <span class="fitted text_over" style="width: 90%;vertical-align: middle;">{{.DisplayJobName}}</span>
                                    </a>
                                </div>
                                <div class="two wide column text center">
                                     <!--任务状态 -->
                                     <span class="job-status" id="{{.Cloudbrain.ID}}" data-repopath="{{$.RepoRelPath}}{{if eq .ComputeResource "CPU/GPU"}}/cloudbrain{{else}}/modelarts/notebook{{end}}" data-jobid="{{.Cloudbrain.ID}}" data-resource="{{.ComputeResource}}">
                                        <span><i id="{{.Cloudbrain.ID}}-icon" style="vertical-align: middle;" class="{{.Status}}"></i><span id="{{.Cloudbrain.ID}}-text" style="margin-left: 0.4em;font-size: 12px;">{{.Status}}</span></span>
                                    </span>
                                </div>
                                <div class="two wide column text center">
                                    <!-- 任务创建时间 -->
                                    <span style="font-size: 12px;margin-left: 0.4rem;" class="">{{TimeSinceUnix .Cloudbrain.CreatedUnix $.Lang}}</span>
                                </div>
                                <div class="two wide column text center">
                                        <!-- 任务计算资源 -->
                                        <span style="font-size: 12px;margin-left: 0.4rem;" class="">{{.ComputeResource}}</span>
                                </div>
                                <div class="one wide column text center">
                                    {{if .User.Name}}
                                        <a href="{{AppSubUrl}}/{{.User.Name}}" title="{{.User.Name}}"><img class="ui avatar image" src="{{.User.RelAvatarLink}}"></a>
                                    {{else}}
                                        <a title="Ghost"><img class="ui avatar image" src="{{AppSubUrl}}/user/avatar/Ghost/-1"></a>
                                    {{end}}
                                </div>
                                <div class="five wide column text center">
                                    <div class="ui compact buttons">
                                        <!-- {{if and (ne .Status "WAITING") (ne .JobType "DEBUG")}}
                                        <a class="ui basic button" href="{{$.Link}}/{{.Cloudbrain.ID}}/rate" target="_blank">
                                            评分
                                        </a>
                                        {{end}} -->
                                        <!-- 调试 -->
                                        <form id="debugAgainForm-{{.Cloudbrain.ID}}">
                                            {{$.CsrfTokenHtml}}
                                            {{if .CanDebug}}
                                                {{if eq .Status "RUNNING" "WAITING" "CREATING" "STARTING"}}
                                                <a style="margin: 0 1rem;" id="ai-debug-{{.Cloudbrain.ID}}" class='ui basic ai_debug {{if eq .Status "CREATING" "STOPPING"  "WAITING" "STARTING"}}disabled {{else}}blue {{end}}button' data-jobid="{{.Cloudbrain.ID}}" data-repopath='{{$.RepoLink}}{{if eq .ComputeResource "CPU/GPU"}}/cloudbrain{{else}}/modelarts/notebook{{end}}/{{.Cloudbrain.ID}}/'>
                                                    {{$.i18n.Tr "repo.debug"}}
                                                </a>
                                                {{else}}
                                                <a id="ai-debug-{{.Cloudbrain.ID}}" class='ui basic ai_debug {{if eq .Status "CREATING" "STOPPING"  "WAITING" "STARTING"}} disabled {{else}}blue {{end}}button' data-jobid="{{.Cloudbrain.ID}}" data-repopath='{{$.RepoLink}}{{if eq .ComputeResource "CPU/GPU"}}/cloudbrain{{else}}/modelarts/notebook{{end}}/{{.Cloudbrain.ID}}/' data-linkpath='{{$.Link}}'>
                                                    {{$.i18n.Tr "repo.debug_again"}}
                                                </a>
                                                {{end}}
                                            {{else}}
                                                {{if eq .Status "RUNNING" "WAITING" "CREATING" "STARTING"}}
                                                    <a  class="ui basic disabled button">
                                                        {{$.i18n.Tr "repo.debug"}}
                                                    </a>
                                                {{else}}
                                                <a  class="ui basic disabled button">
                                                    {{$.i18n.Tr "repo.debug_again"}}
                                                </a>
                                                {{end}}
                                            {{end}}
                                        </form>

                                        <!-- 停止 -->
                                        <form id="stopForm-{{.Cloudbrain.ID}}"  style="margin-left:-1px;">
                                            {{$.CsrfTokenHtml}}
                                            {{if .CanDel}}
                                            <a id="ai-stop-{{.Cloudbrain.ID}}" class='ui basic ai_stop {{if eq .Status "STOPPED" "FAILED" "START_FAILED" "STOPPING"  "CREATING"  "STARTING" "SUCCEEDED"}}disabled {{else}}blue {{end}}button' data-repopath="{{$.RepoLink}}{{if eq .ComputeResource "CPU/GPU"}}/cloudbrain{{else}}/modelarts/notebook{{end}}/{{.Cloudbrain.ID}}/stop" data-jobid="{{.Cloudbrain.ID}}">
                                                {{$.i18n.Tr "repo.stop"}}
                                            </a>
                                            {{else}}
                                            <a  class="ui basic disabled button">
                                                    {{$.i18n.Tr "repo.stop"}}
                                            </a>
                                            {{end}}
                                        </form>
                                        <!-- 删除 -->
                                        <form  id="delForm-{{.Cloudbrain.ID}}" action="{{if eq .ComputeResource "CPU/GPU"}}{{$.RepoLink}}/cloudbrain{{else}}{{$.RepoLink}}/modelarts/notebook{{end}}/{{.Cloudbrain.ID}}/del" method="post">
                                            <input type="hidden" name="debugListType" value="{{$.ListType}}">
                                            {{$.CsrfTokenHtml}}
                                            {{if .CanDel}}
                                            <a id="ai-delete-{{.Cloudbrain.ID}}" class='ui basic ai_delete {{if eq .Status "STOPPED" "FAILED" "START_FAILED"}}blue {{else}}disabled {{end}}button'  style="border-radius: .28571429rem;">
                                                {{$.i18n.Tr "repo.delete"}}
                                            </a>
                                            {{else}}
                                            <a  class="ui basic button disabled" style="border-radius: .28571429rem;">
                                                {{$.i18n.Tr "repo.delete"}}
                                            </a>
                                            {{end}}
                                        </form>
                                    </div>
                                    <div class="ui compact buttons" style="{{if eq .ComputeResource "CPU/GPU"}} visibility: visible {{else}} visibility: hidden{{end}}">
                                        <div class="ui dropdown" id="model_more" style="padding: .58928571em 1.125em .58928571em;">
                                            <div class="text">{{$.i18n.Tr "repo.more"}}</div>
                                            <i class="dropdown icon"></i>
                                            <div class="menu" style="right: auto;">
                                                <div class="item" style="padding: 0 !important;">
                                                    <!-- 接收结果 -->
                                                    <iframe src="" frameborder="0" name="iframeContent" style="display: none;"></iframe>
                                                    {{if .CanDebug}}
                                                    <a id="model-image-{{.Cloudbrain.ID}}" class='imageBtn ui basic {{if ne .Status "RUNNING"}}disabled {{else}}blue {{end}}button'>{{$.i18n.Tr "repo.submit_image"}}</a>
                                                    {{else}}
                                                    <a  class="imageBtn ui basic disabled button">{{$.i18n.Tr "repo.submit_image"}}</a>
                                                    {{end}}
                                                </div>
                                                <div class="item" style="padding: 0 !important;">
                                                        <!-- 模型下载 -->
                                                    {{if .CanDebug}}
                                                    <a class="ui basic blue button" href="{{$.RepoLink}}/cloudbrain/{{.Cloudbrain.ID}}/models" target="_blank">{{$.i18n.Tr "repo.download"}}</a>
                                                    {{else}}
                                                    <a class="ui basic disabled button">{{$.i18n.Tr "repo.download"}}</a>
                                                    {{end}}
                                                </div>
                                                {{if and  (ne .JobType "DEBUG") (eq .Cloudbrain.Type 0)}}
                                                <div class="item" style="padding: 0 !important;">
                                                    <a class="ui basic blue button" href="{{$.RepoLink}}/cloudbrain/{{.Cloudbrain.ID}}/rate" target="_blank">
                                                        评分
                                                    </a>
                                                </div>
                                                {{end}}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- 镜像列表弹窗 -->
                                <div id="imageModal" class="modal" style="display: none;">
                                    <div class="modal-content">
                                        <!-- 表格 -->
                                        <div class="ui form">
                                            <form id="commitImageForm" action="{{$.RepoLink}}/cloudbrain/{{.Cloudbrain.ID}}/commit_image" method="post" target="iframeContent">
                                                {{$.CsrfTokenHtml}}
                                                <div class="row">
                                                    <p style="display: inline;">提交任务镜像</p>
                                                    <span class="close">&times;</span>
                                                </div>

                                                <div class="ui divider"></div>

                                                <div class="inline required field dis">
                                                    <label> {{$.i18n.Tr "repo.cloudbrain.mirror_tag"}}:</label>
                                                    <input name="tag" id="image_tag" tabindex="3" autofocus required maxlength="255" style="width:75%">
                                                </div>

                                                <div class="inline field">
                                                    <label class="label_after">{{$.i18n.Tr "repo.cloudbrain.mirror_description"}}:</label>
                                                    <textarea name="description" maxlength="255" rows="8" style="width:75%;margin-left: 0.2em;"></textarea>
                                                </div>
                                                <div class="ui divider"></div>
                                                <div class="inline field">
                                                    <label></label>
                                                    <button class="ui green button" onclick="showmask()">
                                                        {{$.i18n.Tr "repo.cloudbrain.commit_image"}}
                                                    </button>
                                                </div>
                                            </form>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                        {{end}} {{template "base/paginate" .}}
                    </div>
                </div>
            </div>
        </div>
        {{end}}
    </div>
</div>
</div>
</div>

<!-- 确认模态框 -->
<div id="deletemodel">
    <div class="ui basic modal">
        <div class="ui icon header">
            <i class="trash icon"></i> 删除任务
        </div>

        <div class="content">
            <p>你确认删除该任务么？此任务一旦删除不可恢复。</p>
        </div>
        <div class="actions">
            <div class="ui red basic inverted cancel button">
                <i class="remove icon"></i> 取消操作
            </div>
            <div class="ui green basic inverted ok button">
                <i class="checkmark icon"></i> 确定操作
            </div>
        </div>
    </div>
</div>

</div>
{{template "base/footer" .}}
<script>
    // 调试和评分新开窗口
    const {AppSubUrl, StaticUrlPrefix, csrf} = window.config;
    let url={{.RepoLink}}
    let redirect_to = {{$.Link}}
    let getParam=getQueryVariable('debugListType')

    let dropdownValue = ['all','',false].includes(getParam)? '{{$.i18n.Tr "repo.gpu_type_all"}}' : getParam
    // localStorage.setItem('all',location.href)
    function getQueryVariable(variable)
    {
        let query = window.location.search.substring(1);
        let vars = query.split("&");
        for (let i=0;i<vars.length;i++) {
                let pair = vars[i].split("=");
                if(pair[0] == variable){return pair[1];}
        }
        return(false);
    }
    $(document).ready(function(){
        dropdownValue = dropdownValue==="CPU%2FGPU"? 'CPU/GPU' : dropdownValue
        $('.default.text').text(dropdownValue)
        $('.ui.dropdown')
        .dropdown({
            action: 'hide',
        })
        $('.ui.selection.dropdown').dropdown({
            onChange:function(value){

                location.href = `${url}/debugjob?debugListType=${value}`
            }
        })
        $('.message .close')
        .on('click', function() {
            $(this)
            .closest('.message')
            .transition('fade')
        })
    })
    // 获取弹窗
    var modal = document.getElementById('imageModal');

    // 打开弹窗的按钮对象
    var btns = document.getElementsByClassName("imageBtn");

    // 获取 <span> 元素，用于关闭弹窗
    var spans = document.getElementsByClassName('close');

    // 点击按钮打开弹窗
    for (i = 0; i < btns.length; i++) {
        btns[i].onclick = function() {
            modal.style.display = "block";
        }
    }

    // 点击 <span> (x), 关闭弹窗
    for (i = 0; i < spans.length; i++) {
        spans[i].onclick = function() {
            modal.style.display = "none";
        }
    }

    // 在用户点击其他地方时，关闭弹窗
    window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    }
    // 显示弹窗，弹出相应的信息
    function showmask() {
        var image_tag = !$('#image_tag').val()
        if(image_tag){
            return
        }
        $('#imageModal').css('display', 'none')
        $('#mask').css('display', 'block')

        $("iframe[name=iframeContent]").on("load", function() {　　
            var responseText = $("iframe")[0].contentDocument.body.getElementsByTagName("pre")[0].innerHTML;　
            var json1 = JSON.parse(responseText)
            $('#mask').css('display', 'none')
            if (json1.result_code === "0") {
                $('.alert').html('操作成功!').removeClass('alert-danger').addClass('alert-success').show().delay(1500).fadeOut();
            } else {
                $('.alert').html(json1.error_msg).removeClass('alert-success').addClass('alert-danger').show().delay(5000).fadeOut();
            }
        })
    }

</script>