From 476855b631e4476953c79898a7dc4a6db3f621d7 Mon Sep 17 00:00:00 2001
From: Gitea <gitea@fake.local>
Date: Mon, 29 Mar 2021 19:24:06 +0800
Subject: [PATCH] complate new train-job design

---
 options/locale/locale_zh-CN.ini               |   2 +
 templates/repo/modelarts/notebook/index.tmpl  |  20 +-
 templates/repo/modelarts/trainjob/index.tmpl  |  41 ++-
 templates/repo/modelarts/trainjob/new.tmpl    | 308 ++++++++++--------
 .../modelarts/trainjob/new_train_job.tmpl     | 249 --------------
 .../modelarts/trainjob/train_job_list.tmpl    | 127 --------
 6 files changed, 213 insertions(+), 534 deletions(-)
 delete mode 100755 templates/repo/modelarts/trainjob/new_train_job.tmpl
 delete mode 100755 templates/repo/modelarts/trainjob/train_job_list.tmpl

diff --git a/options/locale/locale_zh-CN.ini b/options/locale/locale_zh-CN.ini
index 952923d2b..79424b709 100755
--- a/options/locale/locale_zh-CN.ini
+++ b/options/locale/locale_zh-CN.ini
@@ -785,6 +785,8 @@ modelarts.train_job.standard=规格
 modelarts.train_job.query_whether_save_parameter=保存作业参数
 modelarts.train_job.common_frame=常用框架
 modelarts.train_job.amount_of_compute_node=计算节点个数
+modelarts.train_job.job_parameter_name=作业参数名称
+modelarts.train_job.parameter_description=作业参数描述
 
 template.items=模板选项
 template.git_content=Git数据(默认分支)
diff --git a/templates/repo/modelarts/notebook/index.tmpl b/templates/repo/modelarts/notebook/index.tmpl
index e030940a5..c4fb18862 100755
--- a/templates/repo/modelarts/notebook/index.tmpl
+++ b/templates/repo/modelarts/notebook/index.tmpl
@@ -180,14 +180,15 @@
     }
     
     .ui.secondary.vertical.pointing.menu{
-        border-right-width: 0;
-        margin-right: 0;
-        border-right-color: white;
-        margin-top: 14px;
+        border-right-width: 0px;
     }
 
-    .ui.secondary.vertical.pointing.menu .active.item {
-        border-color: none;
+    .vertical.menu .item {
+        border-right-color: white !important;
+    }
+
+    .vertical.menu .activate.item {
+        font-weight: 700;
     }
 </style>
 <div class="modelarts">
@@ -213,7 +214,7 @@
                 <div class="computer three wide computer column">
                     <div class="ui grid">
                         <div class="sixteen wide column ui secondary sticky pointing tabular vertical menu">
-                            <a class="item" href="{{.RepoLink}}/modelarts/notebook">
+                            <a class="activate item" href="{{.RepoLink}}/modelarts/notebook">
                                 {{svg "octicon-repo" 16}} {{.i18n.Tr "repo.modelarts.nodebook"}}
                             </a>
                             <a class="item" href="{{.RepoLink}}/modelarts/train-job">
@@ -504,7 +505,8 @@
     }
 
     // 超链接
-    $("a").click(function(){
-        $(this).toggleClass("active")
+    $(".vertical.menu a").click(function(){
+        $(this).siblings().removeClass("activate")
+        $(this).addClass("activate")
     })
 </script>
diff --git a/templates/repo/modelarts/trainjob/index.tmpl b/templates/repo/modelarts/trainjob/index.tmpl
index 5a067798c..a6ad50222 100755
--- a/templates/repo/modelarts/trainjob/index.tmpl
+++ b/templates/repo/modelarts/trainjob/index.tmpl
@@ -1,20 +1,26 @@
 {{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" .}}
-    <style>
-        .ui.segment.bottom.attached {
-            border: none;
-        }
-        
-        .ui.secondary.vertical.pointing.menu{
-            border-right-width: 0;
-            margin-right: 0;
-            border-right-color: white;
-            margin-top: 14px;
-        }
-    </style>
     <div class="modelarts train_job container">
         <div class="ui container">
+            {{template "base/alert" .}}
             <div class="ui grid">
                 <div class="three wide column">
                     <div class="ui grid">
@@ -22,7 +28,7 @@
                             <a class="item" href="{{.RepoLink}}/modelarts/notebook">
                                 {{svg "octicon-repo" 16}} {{.i18n.Tr "repo.modelarts.nodebook"}}
                             </a>
-                            <a class="item" href="{{.RepoLink}}/modelarts/train-job">
+                            <a class="activate item" href="{{.RepoLink}}/modelarts/train-job">
                                 {{svg "octicon-inbox" 16}} {{.i18n.Tr "repo.modelarts.train_job"}}
                             </a>
                         </div>
@@ -120,4 +126,11 @@
         </div>
     </div>
 </div>
-{{template "base/footer" .}}
\ No newline at end of file
+{{template "base/footer" .}}
+
+<script>
+    $(".vertical.menu a").click(function(){
+        $(this).siblings().removeClass("activate")
+        $(this).addClass("activate")
+    })
+</script>
\ No newline at end of file
diff --git a/templates/repo/modelarts/trainjob/new.tmpl b/templates/repo/modelarts/trainjob/new.tmpl
index 30822cabe..98a8bf1c9 100755
--- a/templates/repo/modelarts/trainjob/new.tmpl
+++ b/templates/repo/modelarts/trainjob/new.tmpl
@@ -1,7 +1,6 @@
 {{template "base/head" .}}
-<!-- <style>
+<style>
     /* 遮罩层css效果图  */
-    
     #mask {
         position: fixed;
         top: 0px;
@@ -80,7 +79,7 @@
             -webkit-transform: scaleY(1.0);
         }
     }
-    
+
     .inline.required.field.cloudbrain_benchmark {
         display: none;
     }
@@ -94,150 +93,145 @@
         <div class="rect4"></div>
         <div class="rect5"></div>
     </div>
-</div> -->
-<style>
-    .inline.field>label{
-    
-}
-</style>
+</div>
+
 <div class="repository">
     {{template "repo/header" .}}
-    <div class="repository new repo ui middle very relaxed page grid">
-        <div class="column">
-            {{template "base/alert" .}}
-            
-            <!-- <div class="ui attached segment"> -->
-                
-                <form class="ui form" action="{{.Link}}" method="post">
-                    {{.CsrfTokenHtml}}
-                    <h4 class="ui top attached header">
-                        {{.i18n.Tr "repo.modelarts.train_job.new"}}
-                    </h4>
-                    <div class="ui attached segment">
-                        <div class="inline required field">
-                            <label>{{.i18n.Tr "repo.modelarts.train_job.job_name"}}</label>
-                            <input name="job_name" id="cloudbrain_job_name" placeholder={{.i18n.Tr "repo.modelarts.train_job.job_name"}} value="{{.job_name}}" tabindex="3" autofocus required maxlength="255">
-                        </div>
-                        <div class="inline required field">
-                            <label>{{.i18n.Tr "repo.modelarts.train_job.version"}}</label>
-                            <span>第一版本</span>
-                        </div>
-                                               
-                        <div class="inline required field">
-                            <label>{{.i18n.Tr "repo.modelarts.train_job.algorithm_origin"}}</label>
-                            <select class="ui search dropdown" id="cloudbrain_image" placeholder={{.i18n.Tr "repo.modelarts.train_job.common_frame"}} style='width:385px' name="image">
-                                {{range .images}}
-                                    <option name="image" value="{{.Place}}">{{.PlaceView}}</option>
-                                {{end}}
-                            </select>
-                        </div>
-                        <div class="inline required field">
+    <div class="ui container">
+        <h4 class="ui top attached header">
+            {{.i18n.Tr "新建训练作业"}}
+        </h4>
+        <div class="ui attached segment">
+            <form class="ui equal width form" action="{{.Link}}" method="post">
+                {{.CsrfTokenHtml}}
+                <input type="hidden" name="action" value="update">
+                <h4 class="ui dividing header">基本信息</h4>
+                <div class="required field">
+                    <label>{{.i18n.Tr "repo.modelarts.train_job.job_name"}}</label>
+                    <input name="job_name" id="cloudbrain_job_name" placeholder={{.i18n.Tr "repo.modelarts.train_job.job_name"}} value="{{.job_name}}" tabindex="3" autofocus required maxlength="255">
+                </div>
+                <div class="inline field">
+                    <label>{{.i18n.Tr "repo.modelarts.train_job.version"}}</label>
+                    <span>第一版本</span>
+                </div>   
+                <div class="field">
+                    <label for="description">{{.i18n.Tr "repo.modelarts.train_job.description"}}</label>
+                    <textarea id="description" name="description" rows="2"></textarea>
+                </div>
+                <h4 class="ui dividing header">参数设置</h4>
+                <div class="required field">
+                    <label>{{.i18n.Tr "repo.modelarts.train_job.algorithm_origin"}}</label>
+                    <div class="ui top attached tabular menu">
+                        <a class="item active" data-tab="frame">{{svg "octicon-repo" 16}}常用框架</a>
+                    </div>
+                    <div class="ui bottom attached tab active segment" data-tab="frame">
+                        <div class="required field">
                             <label>{{.i18n.Tr "repo.modelarts.train_job.AI_driver"}}</label>
-                                <select class="ui search dropdown" id="cloudbrain_benchmark_category" style='width:385px'>
-                                    {{range .benchmark_categories}}
-                                        <option value="{{.Value}}">{{.Value}}</option>
-                                    {{end}}
-                                </select>
-                        </div>
-                        <div class="inline field">
-                            <label></label>
-                                <select class="ui search dropdown" id="cloudbrain_benchmark_category" style='width:385px'>
-                                    {{range .benchmark_categories}}
-                                        <option value="{{.Value}}">{{.Value}}</option>
-                                    {{end}}
-                                </select>
-                        </div>
-                        
-                        <div class="inline required field">
-                            <label>{{.i18n.Tr "repo.modelarts.train_job.dataset"}}</label>
-                            <select class="ui search dropdown" id="cloudbrain_benchmark_category" style='width:385px'>
-                                {{range .benchmark_categories}}
-                                    <option value="{{.Value}}">{{.Value}}</option>
-                                {{end}}
-                            </select>
-                        </div>
-                        <div class="inline required field">
-                            <label>{{.i18n.Tr "repo.modelarts.train_job.dataset_version"}}</label>
-                            <select class="ui search dropdown" id="cloudbrain_benchmark_category" style='width:385px'>
-                                {{range .benchmark_categories}}
-                                    <option value="{{.Value}}">{{.Value}}</option>
-                                {{end}}
-                            </select>
-                        </div>
-                        <div class="inline required field">
-                            <label>{{.i18n.Tr "repo.modelarts.train_job.dataset_store_location"}}</label>
-                            <input name="dataset_path" id="cloudbrain_dataset_path" value="{{.dataset_path}}" tabindex="3" autofocus required maxlength="255" readonly="readonly">
-                        </div>
-                        <div class="inline required field">
-                            <label>{{.i18n.Tr "repo.modelarts.train_job.train_output_location"}}</label>
-                            <input name="dataset_path" id="cloudbrain_dataset_path" value="{{.dataset_path}}" tabindex="3" autofocus required maxlength="255" readonly="readonly">
-                        </div>
-
-                        <div class="inline required field">
-                            <label>{{.i18n.Tr "repo.modelarts.train_job.run_parameter"}}</label>
-                            <input type="text" placeholder={{.i18n.Tr "repo.modelarts.train_job.parameter_name"}}>
-                        </div>
-                        <div class="inline field">
-                            <label></label>
-                            <input type="text" placeholder={{.i18n.Tr "repo.modelarts.train_job.parameter_value"}}>
-                        </div>
-                        
-                        <div class="inline required field">
-                            <label>{{.i18n.Tr "repo.modelarts.train_job.resource_pool"}}</label>
-                            <select class="ui search dropdown" multiple="multiple" id="cloudbrain_benchmark_category" style='width:385px'>
-                                {{range .benchmark_categories}}
-                                    <option value="{{.Value}}">{{.Value}}</option>
-                                {{end}}
-                            </select>
-                        </div>
-                        <!-- 资源类型待完善 -->
-                        <div class="inline required field">
-                            <label>{{.i18n.Tr "repo.modelarts.train_job.resource_type"}}</label>
-                            <input name="job_type" id="cloudbrain_job_type" value="{{.notebook_type}}" tabindex="3" autofocus required maxlength="255" readonly="readonly">
-                        </div>
-                        <div class="inline required field">
-                            <label>{{.i18n.Tr "repo.modelarts.train_job.standard"}}</label>
-                            <select class="ui search dropdown" multiple="multiple" id="cloudbrain_benchmark_category" style='width:385px'>
-                                {{range .benchmark_categories}}
-                                    <option value="{{.Value}}">{{.Value}}</option>
-                                {{end}}
-                            </select>
-                        </div>
-                        <div class="inline required field">
-                            <label>{{.i18n.Tr "repo.modelarts.train_job.amount_of_compute_node"}}</label>
-                        </div>
-                        <div class="inline field">
-                            <label for="description">{{.i18n.Tr "repo.modelarts.train_job.description"}}</label>
-                            <textarea id="description" name="description" rows="2"></textarea>
-                        </div>
-                        <div class="inline required field">
-                            <label>{{.i18n.Tr "repo.modelarts.train_job.code_store_location"}}</label>
-                            <input name="dataset_path" id="cloudbrain_dataset_path" value="{{.dataset_path}}" tabindex="3" autofocus required maxlength="255" readonly="readonly">
+                            <div class="two fields">
+                                <div class="field">
+                                    <select class="ui search dropdown" id="cloudbrain_benchmark_category" style='width:385px'>
+                                        {{range .benchmark_categories}}
+                                            <option value="{{.Value}}">{{.Value}}</option>
+                                        {{end}}
+                                    </select>
+                                </div>
+                                <div class="field">
+                                    <select class="ui search dropdown" id="cloudbrain_benchmark_category" style='width:385px'>
+                                        {{range .benchmark_categories}}
+                                            <option value="{{.Value}}">{{.Value}}</option>
+                                        {{end}}
+                                    </select>
+                                </div>
+                            </div>
                         </div>
                         <div class="inline required field">
                             <label>{{.i18n.Tr "repo.modelarts.train_job.start_file"}}</label>
                             <input name="dataset_path" id="cloudbrain_dataset_path" value="{{.dataset_path}}" tabindex="3" autofocus required maxlength="255" readonly="readonly">
                         </div>
-                        <div class="inline field">
-                            <label></label>
-                            <div class="ui checkbox">
-                                <input name="template" type="checkbox">
-                                <label>{{.i18n.Tr "repo.modelarts.train_job.query_whether_save_parameter"}}</label>
+                    </div> 
+                </div>
+                <div class="required field">
+                    <label>{{.i18n.Tr "repo.modelarts.train_job.dataset"}}</label>
+                    <select class="ui search dropdown" id="cloudbrain_benchmark_category" style='width:385px'>
+                        {{range .benchmark_categories}}
+                            <option value="{{.Value}}">{{.Value}}</option>
+                        {{end}}
+                    </select>
+                </div>
+    
+                <div class="inline required field">
+                    <label>{{.i18n.Tr "repo.modelarts.train_job.run_parameter"}}</label>
+                    <span id="add_run_para"><i class="plus circle icon"></i>增加运行参数</span>
+                    <div class="dynamic field">
+
+                    </div>
+                </div>
+
+                <h4 class="ui dividing header">资源设置</h4>
+                <div class="required field">
+                    <label>{{.i18n.Tr "repo.modelarts.train_job.resource_pool"}}</label>
+                    <select class="ui search dropdown" multiple="multiple" id="cloudbrain_benchmark_category" style='width:385px'>
+                        {{range .benchmark_categories}}
+                            <option value="{{.Value}}">{{.Value}}</option>
+                        {{end}}
+                    </select>
+                </div>
+
+                <div class="required grouped fields">
+                    <label for="resource_type">{{.i18n.Tr "repo.modelarts.train_job.resource_type"}}</label>
+                    {{range .benchmark_categories}}
+                    <div class="field">
+                        <div class="ui grid">
+                            <div class="four wide column">
+                                <div class="ui radio checkbox">
+                                    <input type="radio" name="resource_type" checked="" tabindex="0" class="hidden">
+                                </div>
                             </div>
+                            <div class="four wide column">train-private-1</div>
+                            <div class="four wide column">{{svg "octicon-verified" 16}} 运行中</div>
+                            <div class="four wide column"> CPU：192 核 2048GiB</div>
                         </div>
+                    </div>
+                    {{end}}
+                </div>
 
-                        
-                        <div class="inline field">
-                            <label></label>
-                            <button class="ui green button" onclick="showmask()">
-                            {{.i18n.Tr "repo.cloudbrain.new"}}
-                            </button>
-                            <a class="ui button" href="/">{{.i18n.Tr "repo.cloudbrain.cancel"}}</a>
-                        </div>
-                        </form>
+                <div class="required field">
+                    <label>{{.i18n.Tr "repo.modelarts.train_job.standard"}}</label>
+                    <select class="ui search dropdown" multiple="multiple" id="cloudbrain_benchmark_category" style='width:385px'>
+                        {{range .benchmark_categories}}
+                            <option value="{{.Value}}">{{.Value}}</option>
+                        {{end}}
+                    </select>
+                </div>
+                <div class="inline required field">
+                    <label>{{.i18n.Tr "repo.modelarts.train_job.amount_of_compute_node"}}</label>
+                    <input name="job_type" id="cloudbrain_job_type" value="{{.notebook_type}}" tabindex="3" autofocus required maxlength="255">
+                </div>
+                <div class="field">
+                    <div class="ui save checkbox">
+                        <input name="template" type="checkbox">
+                        <label>{{.i18n.Tr "repo.modelarts.train_job.query_whether_save_parameter"}}</label>
+                    </div>
+                </div>
+                <div class="disabled field" id="save_para"> 
+                    <div class="required field">
+                        <label>{{.i18n.Tr "repo.modelarts.train_job.job_parameter_name"}}</label>
+                        <input name="job_type" id="cloudbrain_job_type" value="{{.notebook_type}}" tabindex="3" autofocus required maxlength="255">
                     </div>
-                </form>
-            <!-- </div> -->
+                    <div class="field">
+                        <label for="parameter_description">{{.i18n.Tr "repo.modelarts.train_job.parameter_description"}}</label>
+                        <textarea id="parameter_description" name="parameter_description" rows="2"></textarea>
+                    </div>
+                </div>
+                
+                <div class="inline field">
+                    <button class="ui green button" onclick="showmask()">
+                    {{.i18n.Tr "repo.cloudbrain.new"}}
+                    </button>
+                    <a class="ui button" href="/">{{.i18n.Tr "repo.cloudbrain.cancel"}}</a>
+                </div>
+            
+            </form>
         </div>
     </div>
 </div>
@@ -246,4 +240,48 @@
 <script>
     $('select.dropdown')
         .dropdown();
+    $('.menu .item')
+        .tab();
+    $('#add_run_para').click(function(){
+        value = '<div class="two fields">' +
+                    '<div class="field">' + 
+                        '<input type="text" name="shipping[first-name]" placeholder={{.i18n.Tr "repo.modelarts.train_job.parameter_name"}}> ' + 
+                    '</div> ' + 
+                    '<div class="field"> ' +
+                        '<input type="text" name="shipping[last-name]" placeholder={{.i18n.Tr "repo.modelarts.train_job.parameter_value"}}>' +
+                    '</div>'+
+                    '<span>' +
+                        '<i class="trash icon">' +
+                        '</i>' +
+                    '</span>' +
+                '</div>'
+        $(".dynamic.field").append(value)
+    })
+
+    $(".dynamic.field").on("click",".trash.icon", function() {
+        $(this).parent().parent().remove()
+    });
+
+    $('.ui.save.checkbox').click(function(){
+        $('.ui.save.checkbox').checkbox({
+            onChecked: function() {
+                $('#save_para').removeClass("disabled")
+            },
+            onUnchecked: function() {
+                $('#save_para').addClass("disabled")
+            }
+        });
+    })
+
+    // 点击按钮后遮罩层显示
+    function showmask() {
+        document.getElementById("mask").style.display = "block"
+    }
+
+    // 页面加载完毕后遮罩层隐藏
+    document.onreadystatechange = function() {
+        if (document.readyState === "complete") {
+            document.getElementById("mask").style.display = "none"
+        }
+    }
 </script>
\ No newline at end of file
diff --git a/templates/repo/modelarts/trainjob/new_train_job.tmpl b/templates/repo/modelarts/trainjob/new_train_job.tmpl
deleted file mode 100755
index 30822cabe..000000000
--- a/templates/repo/modelarts/trainjob/new_train_job.tmpl
+++ /dev/null
@@ -1,249 +0,0 @@
-{{template "base/head" .}}
-<!-- <style>
-    /* 遮罩层css效果图  */
-    
-    #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
-    }
-    /* 加载圈css效果图 */
-    
-    #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);
-        }
-    }
-    
-    .inline.required.field.cloudbrain_benchmark {
-        display: none;
-    }
-</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> -->
-<style>
-    .inline.field>label{
-    
-}
-</style>
-<div class="repository">
-    {{template "repo/header" .}}
-    <div class="repository new repo ui middle very relaxed page grid">
-        <div class="column">
-            {{template "base/alert" .}}
-            
-            <!-- <div class="ui attached segment"> -->
-                
-                <form class="ui form" action="{{.Link}}" method="post">
-                    {{.CsrfTokenHtml}}
-                    <h4 class="ui top attached header">
-                        {{.i18n.Tr "repo.modelarts.train_job.new"}}
-                    </h4>
-                    <div class="ui attached segment">
-                        <div class="inline required field">
-                            <label>{{.i18n.Tr "repo.modelarts.train_job.job_name"}}</label>
-                            <input name="job_name" id="cloudbrain_job_name" placeholder={{.i18n.Tr "repo.modelarts.train_job.job_name"}} value="{{.job_name}}" tabindex="3" autofocus required maxlength="255">
-                        </div>
-                        <div class="inline required field">
-                            <label>{{.i18n.Tr "repo.modelarts.train_job.version"}}</label>
-                            <span>第一版本</span>
-                        </div>
-                                               
-                        <div class="inline required field">
-                            <label>{{.i18n.Tr "repo.modelarts.train_job.algorithm_origin"}}</label>
-                            <select class="ui search dropdown" id="cloudbrain_image" placeholder={{.i18n.Tr "repo.modelarts.train_job.common_frame"}} style='width:385px' name="image">
-                                {{range .images}}
-                                    <option name="image" value="{{.Place}}">{{.PlaceView}}</option>
-                                {{end}}
-                            </select>
-                        </div>
-                        <div class="inline required field">
-                            <label>{{.i18n.Tr "repo.modelarts.train_job.AI_driver"}}</label>
-                                <select class="ui search dropdown" id="cloudbrain_benchmark_category" style='width:385px'>
-                                    {{range .benchmark_categories}}
-                                        <option value="{{.Value}}">{{.Value}}</option>
-                                    {{end}}
-                                </select>
-                        </div>
-                        <div class="inline field">
-                            <label></label>
-                                <select class="ui search dropdown" id="cloudbrain_benchmark_category" style='width:385px'>
-                                    {{range .benchmark_categories}}
-                                        <option value="{{.Value}}">{{.Value}}</option>
-                                    {{end}}
-                                </select>
-                        </div>
-                        
-                        <div class="inline required field">
-                            <label>{{.i18n.Tr "repo.modelarts.train_job.dataset"}}</label>
-                            <select class="ui search dropdown" id="cloudbrain_benchmark_category" style='width:385px'>
-                                {{range .benchmark_categories}}
-                                    <option value="{{.Value}}">{{.Value}}</option>
-                                {{end}}
-                            </select>
-                        </div>
-                        <div class="inline required field">
-                            <label>{{.i18n.Tr "repo.modelarts.train_job.dataset_version"}}</label>
-                            <select class="ui search dropdown" id="cloudbrain_benchmark_category" style='width:385px'>
-                                {{range .benchmark_categories}}
-                                    <option value="{{.Value}}">{{.Value}}</option>
-                                {{end}}
-                            </select>
-                        </div>
-                        <div class="inline required field">
-                            <label>{{.i18n.Tr "repo.modelarts.train_job.dataset_store_location"}}</label>
-                            <input name="dataset_path" id="cloudbrain_dataset_path" value="{{.dataset_path}}" tabindex="3" autofocus required maxlength="255" readonly="readonly">
-                        </div>
-                        <div class="inline required field">
-                            <label>{{.i18n.Tr "repo.modelarts.train_job.train_output_location"}}</label>
-                            <input name="dataset_path" id="cloudbrain_dataset_path" value="{{.dataset_path}}" tabindex="3" autofocus required maxlength="255" readonly="readonly">
-                        </div>
-
-                        <div class="inline required field">
-                            <label>{{.i18n.Tr "repo.modelarts.train_job.run_parameter"}}</label>
-                            <input type="text" placeholder={{.i18n.Tr "repo.modelarts.train_job.parameter_name"}}>
-                        </div>
-                        <div class="inline field">
-                            <label></label>
-                            <input type="text" placeholder={{.i18n.Tr "repo.modelarts.train_job.parameter_value"}}>
-                        </div>
-                        
-                        <div class="inline required field">
-                            <label>{{.i18n.Tr "repo.modelarts.train_job.resource_pool"}}</label>
-                            <select class="ui search dropdown" multiple="multiple" id="cloudbrain_benchmark_category" style='width:385px'>
-                                {{range .benchmark_categories}}
-                                    <option value="{{.Value}}">{{.Value}}</option>
-                                {{end}}
-                            </select>
-                        </div>
-                        <!-- 资源类型待完善 -->
-                        <div class="inline required field">
-                            <label>{{.i18n.Tr "repo.modelarts.train_job.resource_type"}}</label>
-                            <input name="job_type" id="cloudbrain_job_type" value="{{.notebook_type}}" tabindex="3" autofocus required maxlength="255" readonly="readonly">
-                        </div>
-                        <div class="inline required field">
-                            <label>{{.i18n.Tr "repo.modelarts.train_job.standard"}}</label>
-                            <select class="ui search dropdown" multiple="multiple" id="cloudbrain_benchmark_category" style='width:385px'>
-                                {{range .benchmark_categories}}
-                                    <option value="{{.Value}}">{{.Value}}</option>
-                                {{end}}
-                            </select>
-                        </div>
-                        <div class="inline required field">
-                            <label>{{.i18n.Tr "repo.modelarts.train_job.amount_of_compute_node"}}</label>
-                        </div>
-                        <div class="inline field">
-                            <label for="description">{{.i18n.Tr "repo.modelarts.train_job.description"}}</label>
-                            <textarea id="description" name="description" rows="2"></textarea>
-                        </div>
-                        <div class="inline required field">
-                            <label>{{.i18n.Tr "repo.modelarts.train_job.code_store_location"}}</label>
-                            <input name="dataset_path" id="cloudbrain_dataset_path" value="{{.dataset_path}}" tabindex="3" autofocus required maxlength="255" readonly="readonly">
-                        </div>
-                        <div class="inline required field">
-                            <label>{{.i18n.Tr "repo.modelarts.train_job.start_file"}}</label>
-                            <input name="dataset_path" id="cloudbrain_dataset_path" value="{{.dataset_path}}" tabindex="3" autofocus required maxlength="255" readonly="readonly">
-                        </div>
-                        <div class="inline field">
-                            <label></label>
-                            <div class="ui checkbox">
-                                <input name="template" type="checkbox">
-                                <label>{{.i18n.Tr "repo.modelarts.train_job.query_whether_save_parameter"}}</label>
-                            </div>
-                        </div>
-
-                        
-                        <div class="inline field">
-                            <label></label>
-                            <button class="ui green button" onclick="showmask()">
-                            {{.i18n.Tr "repo.cloudbrain.new"}}
-                            </button>
-                            <a class="ui button" href="/">{{.i18n.Tr "repo.cloudbrain.cancel"}}</a>
-                        </div>
-                        </form>
-                    </div>
-                </form>
-            <!-- </div> -->
-        </div>
-    </div>
-</div>
-{{template "base/footer" .}}
-
-<script>
-    $('select.dropdown')
-        .dropdown();
-</script>
\ No newline at end of file
diff --git a/templates/repo/modelarts/trainjob/train_job_list.tmpl b/templates/repo/modelarts/trainjob/train_job_list.tmpl
deleted file mode 100755
index 6c305219f..000000000
--- a/templates/repo/modelarts/trainjob/train_job_list.tmpl
+++ /dev/null
@@ -1,127 +0,0 @@
-{{template "base/head" .}}
-<div class="repository view">
-    {{template "repo/header" .}}
-    <style>
-        .ui.segment.bottom.attached {
-            border: none;
-        }
-        
-        .ui.secondary.vertical.pointing.menu{
-            border-right-width: 0;
-            margin-right: 0;
-            border-right-color: white;
-            margin-top: 14px;
-        }
-
-    </style>
-    <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="{{if .PageIsExploreRepositories}}active{{end}} item" href="{{AppSubUrl}}/explore/repos">
-                                {{svg "octicon-repo" 16}} {{.i18n.Tr "explore.repos"}}
-                            </a>
-                            <a class="{{if .PageIsDatasets}}active{{end}} item" href="{{AppSubUrl}}/explore/datasets">
-                                {{svg "octicon-inbox" 16}} {{.i18n.Tr "datasets"}}
-                            </a>
-                            <a class="{{if .PageIsExploreUsers}}active{{end}} item" href="{{AppSubUrl}}/explore/users">
-                                {{svg "octicon-person" 16}} {{.i18n.Tr "explore.users"}}
-                            </a>
-                        </div>
-                    </div>
-                </div>
-                
-                <!-- 右侧 -->
-                <div class="ui thirteen wide column">
-                    <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/notebook/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="three wide column">
-                                        <span class="ui text center">{{svg "octicon-flame" 16}} {{TimeSinceUnix .CreatedUnix $.Lang}}</span>
-                                    </div>
-    
-                                    <!-- 查看 -->
-                                    <div class="one wide column">
-                                        <span class="ui text center clipboard">
-                                            <a class="title" href="{{$.Link}}/{{.JobID}}">
-                                                <span class="fitted">查看</span>
-                                            </a>
-                                        </span>
-                                    </div>
-    
-                                    <!-- 删除 -->
-                                    <div class="two 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="two 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" .}}
\ No newline at end of file