aiforge/templates/repo/modelarts/trainjob/index.tmpl

{{template "base/head" .}}
<style>
    .ui.segment.bottom.attached {
        border: none;
    }
    
    .ui.secondary.vertical.pointing.menu{
        border-right-width: 0px;
    }

    .vertical.menu .item {
        border-right-color: white !important;
    }

    .vertical.menu .activate.item {
        font-weight: 700;
    }
</style>
<div class="repository view">
    {{template "repo/header" .}}
    <div class="modelarts train_job container">
        <div class="ui container">
            <div class="ui grid">
                <div class="three wide column">
                    <div class="ui grid">
                        <div class="sixteen wide column ui secondary sticky pointing tabular vertical menu">
                            <a class="item" href="{{.RepoLink}}/modelarts/notebook">
                                {{svg "octicon-repo" 16}} {{.i18n.Tr "repo.modelarts.nodebook"}}
                            </a>
                            <a class="activate item" href="{{.RepoLink}}/modelarts/train-job">
                                {{svg "octicon-inbox" 16}} {{.i18n.Tr "repo.modelarts.train_job"}}
                            </a>
                        </div>
                    </div>
                </div>
                
                <!-- 右侧 -->
                <div class="ui thirteen wide column">
                    {{template "base/alert" .}}
                    <div class="ui three column stackable grid">
                        <div class="column">
                            <h2>{{.i18n.Tr "repo.modelarts.train_job"}}</h2>
                        </div>
                        <div class="column">
                        </div>
                        <div class="column right aligned">
                            <a class="ui green button" href="{{.RepoLink}}/modelarts/train-job/create">{{.i18n.Tr "repo.modelarts.train_job.new"}}</a>
                        </div>
                    </div>
                    <div class="ui divider"></div>
                    <div class="ui thirteen wide column">
                        <div class="ui thirteen wide column">
                            <div class="ui two column stackable grid">
                                <div class="column">
                                </div>
                                <div class="column right aligned">
                                    <div class="ui right dropdown type jump item">
                                        <span class="text">
                                            {{.i18n.Tr "repo.issues.filter_sort"}}<i class="dropdown icon"></i>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
    
                        <!-- 任务展示 -->
                        <div class="train_job list">
                            {{range .Tasks}}
                            <div class="ui grid stackable item">
                                <div class="row">
                                    <!-- 任务名 -->
                                    <div class="four wide column">
                                        <a class="title" href="{{$.Link}}/{{.JobID}}">
                                            <span class="fitted">{{svg "octicon-tasklist" 16}}</span>
                                            <span class="fitted">{{.JobName}}</span>
                                        </a>
                                    </div>
    
                                    <!--任务状态 -->
                                    <div class="two wide column job-status" id="{{.JobID}}" data-repopath="{{$.RepoRelPath}}" data-jobid="{{.JobID}}">
                                        {{.Status}}
                                    </div>

                                    <!-- 运行时长 -->
                                    <div class="two wide column">
                                        <span class="ui text center">{{svg "octicon-flame" 16}} {{TimeSinceUnix .CreatedUnix $.Lang}}</span>
                                    </div>
    
                                    <!-- 任务创建时间 -->
                                    <div class="three wide column">
                                        <span class="ui text center">{{svg "octicon-flame" 16}} {{TimeSinceUnix .CreatedUnix $.Lang}}</span>
                                    </div>
    
                                    <!-- 删除 -->
                                    <div class="one wide column">
                                        <div class="ui text center clipboard">
                                            <form id="delForm-{{.JobID}}" action="{{if ne .Status "STOPPED"}}javascript:void(0){{else}}{{$.Link}}/{{.JobID}}/del{{end}}" method="post">
                                                {{$.CsrfTokenHtml}}
                                                <a class="fitted" onclick="assertDelete(this)" style="{{if ne .Status "STOPPED"}}color:#CCCCCC{{end}}; font-size:16px; font-weight:bold">删除</a>
                                            </form>
                                        </div>
                                    </div>
    
                                    <!-- 停止 -->
                                    <div class="one wide column">
                                        <div class="ui text center clipboard">
                                            <form id="stopForm-{{.JobID}}" action="{{if ne .Status "RUNNING"}}javascript:void(0){{else}}{{$.Link}}/{{.JobID}}/stop{{end}}" method="post">
                                                {{$.CsrfTokenHtml}}
                                                <a class="fitted" onclick="document.getElementById('stopForm-{{.JobID}}').submit();" style="{{if ne .Status "RUNNING"}}color:#CCCCCC{{end}}; font-size:16px; font-weight:bold">停止</a>
                                            </form>
                                        </div>
                                    </div>
    
                                </div>
                            </div>
                            {{end}} {{template "base/paginate" .}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{{template "base/footer" .}}

<script>
    $(".vertical.menu a").click(function(){
        $(this).siblings().removeClass("activate")
        $(this).addClass("activate")
    })
</script>