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="cloudbrain_debug" style="display: none;" data-debug="{{$.i18n.Tr "repo.debug"}}"
        data-debug-again="{{$.i18n.Tr "repo.debug_again"}}"></div>
    <!-- 列表容器 -->
    <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="{{.DisplayJobName}}" 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" "CREATE_FAILED"}}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" "SUCCEEDED" "CREATE_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;">
                                                    {{if .CanDebug}}
                                                    <a id="model-image-{{.Cloudbrain.ID}}"
                                                        class='imageBtn ui basic {{if ne .Status "RUNNING"}}disabled {{else}}blue {{end}}button'
                                                        href="{{$.RepoLink}}/cloudbrain/{{.Cloudbrain.ID}}/commit_image">{{$.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>
                        </div>
                        {{end}}
                        <div id="app" style="margin-top: 2rem;">
                            <div class="center">
                                <el-pagination background @current-change="handleCurrentChange" :current-page="page"
                                    :page-sizes="[10]" :page-size="10" layout="total, sizes, prev, pager, next, jumper"
                                    :total="{{.Page.Paginater.Total}}">
                                </el-pagination>
                            </div>
                        </div>
                    </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> {{.i18n.Tr "cloudbrain.delete_task"}}
        </div>

        <div class="content">
            <p>{{.i18n.Tr "cloudbrain.task_delete_confirm"}}</p>
        </div>
        <div class="actions">
            <div class="ui red basic inverted cancel button">
                <i class="remove icon"></i> {{.i18n.Tr "cloudbrain.operate_cancel"}}
            </div>
            <div class="ui green basic inverted ok button">
                <i class="checkmark icon"></i> {{.i18n.Tr "cloudbrain.operate_confirm"}}
            </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')
            })
    })

</script>