From 2de8fdca8b6e4f3a8333bcfb87da40e4614e6309 Mon Sep 17 00:00:00 2001
From: zouap <zouap@pcl.ac.cn>
Date: Tue, 18 Jan 2022 10:04:19 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4=E4=BB=A3=E7=A0=81=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: zouap <zouap@pcl.ac.cn>
---
 routers/repo/cloudbrain.go                    |  11 +-
 routers/routes/routes.go                      |   2 +-
 templates/repo/cloudbrain/benchmark/new.tmpl  |  22 +-
 templates/repo/cloudbrain/benchmark/show.tmpl | 866 ++++++++++++++++++
 4 files changed, 886 insertions(+), 15 deletions(-)
 create mode 100644 templates/repo/cloudbrain/benchmark/show.tmpl

diff --git a/routers/repo/cloudbrain.go b/routers/repo/cloudbrain.go
index 0aaff7f11..75850bbce 100755
--- a/routers/repo/cloudbrain.go
+++ b/routers/repo/cloudbrain.go
@@ -34,6 +34,7 @@ const (
 
 	tplCloudBrainBenchmarkIndex base.TplName = "repo/cloudbrain/benchmark/index"
 	tplCloudBrainBenchmarkNew   base.TplName = "repo/cloudbrain/benchmark/new"
+	tplCloudBrainBenchmarkShow  base.TplName = "repo/cloudbrain/benchmark/show"
 )
 
 var (
@@ -321,7 +322,15 @@ func CloudBrainRestart(ctx *context.Context) {
 	})
 }
 
+func CloudBrainBenchMarkShow(ctx *context.Context) {
+	cloudBrainShow(ctx, tplCloudBrainBenchmarkShow)
+}
+
 func CloudBrainShow(ctx *context.Context) {
+	cloudBrainShow(ctx, tplCloudBrainShow)
+}
+
+func cloudBrainShow(ctx *context.Context, tpName base.TplName) {
 	ctx.Data["PageIsCloudBrain"] = true
 
 	var jobID = ctx.Params(":jobid")
@@ -366,7 +375,7 @@ func CloudBrainShow(ctx *context.Context) {
 
 	ctx.Data["task"] = task
 	ctx.Data["jobID"] = jobID
-	ctx.HTML(200, tplCloudBrainShow)
+	ctx.HTML(200, tpName)
 }
 
 func CloudBrainDebug(ctx *context.Context) {
diff --git a/routers/routes/routes.go b/routers/routes/routes.go
index 8b4a75acd..25c54793e 100755
--- a/routers/routes/routes.go
+++ b/routers/routes/routes.go
@@ -983,7 +983,7 @@ func RegisterRoutes(m *macaron.Macaron) {
 			m.Group("/benchmark", func() {
 				m.Get("", reqRepoCloudBrainReader, repo.CloudBrainBenchmarkIndex)
 				m.Group("/:jobid", func() {
-					m.Get("", reqRepoCloudBrainReader, repo.CloudBrainShow)
+					m.Get("", reqRepoCloudBrainReader, repo.CloudBrainBenchMarkShow)
 					m.Post("/stop", cloudbrain.AdminOrOwnerOrJobCreaterRight, repo.CloudBrainStop)
 					m.Post("/del", cloudbrain.AdminOrOwnerOrJobCreaterRight, repo.CloudBrainDel)
 					m.Get("/rate", reqRepoCloudBrainReader, repo.GetRate)
diff --git a/templates/repo/cloudbrain/benchmark/new.tmpl b/templates/repo/cloudbrain/benchmark/new.tmpl
index 781a29c44..fad6496e0 100644
--- a/templates/repo/cloudbrain/benchmark/new.tmpl
+++ b/templates/repo/cloudbrain/benchmark/new.tmpl
@@ -81,12 +81,15 @@
                     <label style="font-weight: normal;">{{.i18n.Tr "repo.modelarts.train_job.job_name"}}</label>
                     <input style="width: 60%;" name="job_name" id="trainjob_job_name" placeholder={{.i18n.Tr "repo.modelarts.train_job.job_name"}} value="{{.job_name}}" tabindex="3" autofocus required maxlength="254">
                 </div>
-                
-                <div class="unite min_title inline field">
-                    <label style="font-weight: normal;" for="description">{{.i18n.Tr "repo.modelarts.train_job.description"}}&nbsp;&nbsp;</label>
-                    <textarea style="width: 80%;" id="description" name="description" rows="3" maxlength="254" placeholder={{.i18n.Tr "repo.modelarts.train_job.new_place"}} onchange="this.value=this.value.substring(0, 255)" onkeydown="this.value=this.value.substring(0, 255)" onkeyup="this.value=this.value.substring(0, 255)"></textarea>
+
+                 <div class="required unite min_title inline field">
+                        <label style="font-weight: normal;">GPU类型</label>
+                        <select id="cloudbrain_gpu_type" class="ui search dropdown" placeholder="选择GPU类型" style='width:385px' name="gpu_type">
+                            {{range .gpu_types}}
+                                <option value="{{.Queue}}">{{.Value}}</option>
+                            {{end}}
+                        </select>
                 </div>
-                
 
                 <div class="required unite min_title inline fields" style="width: 90%;">
                     <label style="font-weight: normal;">{{.i18n.Tr "repo.cloudbrain.benchmark.evaluate_type"}}&nbsp;&nbsp;&nbsp;</label>
@@ -121,14 +124,7 @@
                         </datalist>
                 </div>
 
-                <div class="required unite min_title inline field">
-                        <label style="font-weight: normal;">GPU类型</label>
-                        <select id="cloudbrain_gpu_type" class="ui search dropdown" placeholder="选择GPU类型" style='width:385px' name="gpu_type">
-                            {{range .gpu_types}}
-                                <option value="{{.Queue}}">{{.Value}}</option>
-                            {{end}}
-                        </select>
-                </div>
+               
 
                 <div class="required unite min_title inline field">
                         <label style="font-weight: normal;">资源规格</label>
diff --git a/templates/repo/cloudbrain/benchmark/show.tmpl b/templates/repo/cloudbrain/benchmark/show.tmpl
new file mode 100644
index 000000000..1b8c13ef8
--- /dev/null
+++ b/templates/repo/cloudbrain/benchmark/show.tmpl
@@ -0,0 +1,866 @@
+{{template "base/head" .}}
+<style>
+.according-panel-heading{
+    box-sizing: border-box;
+    padding: 8px 16px;
+    color: #252b3a;
+    background-color: #f2f5fc;
+    line-height: 1.5;
+    cursor: pointer;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    -khtml-user-select: none;
+    user-select: none;
+}
+.accordion-panel-title {
+    margin-top: 0;
+    margin-bottom: 0;
+    color: #252b3a;
+}
+.accordion-panel-title-content{
+    vertical-align: middle;
+    display: inline-block;
+    width: calc(100% - 32px);
+    cursor: default;
+}
+.acc-margin-bottom {
+    margin-bottom: 5px;
+}
+.title_text {
+    font-size: 12px;
+}
+.ac-display-inblock {
+    display: inline-block;
+}
+.cti-mgRight-sm {
+    margin-right: 8px;
+}
+.ac-text-normal {
+    font-size: 14px;
+    color: #575d6c;
+}
+.uc-accordionTitle-black {
+    color: #333;
+}
+.accordion-border{
+    border:1px solid #cce2ff;
+}
+.padding0{
+    padding: 0 !important;
+}
+.content-pad{
+    padding: 15px 35px;
+}
+.content-margin{
+    margin:10px 5px ;
+}
+.tab_2_content {
+    min-height: 360px;
+    margin-left: 10px;
+}
+.ac-grid {
+    display: block;
+    *zoom: 1;
+}
+.ac-grid-col {
+    float: left;
+    width: 100%;
+}
+.ac-grid-col2 .ac-grid-col {
+    width: 50%;
+}
+.ti-form {
+    text-align: left;
+    max-width: 100%;
+    vertical-align: middle;
+}
+.ti-form>tbody {
+    font-size: 12px;
+}
+.ti-form>tbody, .ti-form>tbody>tr {
+    vertical-align: inherit;
+}
+.ti-text-form-label {
+    
+    padding-bottom: 20px;
+    padding-right: 20px;
+    color: #8a8e99;
+    font-size: 12px;
+    white-space: nowrap !important;
+    width: 80px;
+    line-height: 30px;
+}
+.ti-text-form-content{
+    line-height: 30px;
+    padding-bottom: 20px;
+}
+.ti-form>tbody>tr>td {
+    vertical-align: top;
+    white-space: normal;
+}
+td, th {
+    padding: 0;
+}
+.ac-grid-col .text-span {
+    width: 450px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.redo-color{
+    color: #3291F8;
+}
+.ti-action-menu-item:not(:last-child){
+    margin-right: 10px;
+    padding-right: 11px;
+    text-decoration: none!important;
+    color: #526ecc;
+    cursor: pointer;
+    display: inline-block;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    -khtml-user-select: none;
+    user-select: none;
+    position: relative;
+}
+.ti-action-menu-item:not(:last-child):after {
+    content: "";
+    display: inline-block;
+    position: absolute;
+    height: 12px;
+    right: 0;
+    top: 50%;
+    -webkit-transform: translateY(-6px);
+    -ms-transform: translateY(-6px);
+    -o-transform: translateY(-6px);
+    transform: translateY(-6px);
+    border-right: 1px solid #dfe1e6;
+}
+.text-width80{
+    width: 100px;
+    line-height: 30px;
+}
+.border-according{
+    border: 1px solid #dfe1e6;
+}
+.disabled {
+        cursor: default;
+        pointer-events: none;
+        color: rgba(0,0,0,.6) !important;
+        opacity: .45 !important;
+}
+.pad20{
+    
+    border:0px !important;
+}
+.model_file_bread{
+    margin-bottom: -0.5rem !important;
+    padding-left: 1rem;
+    padding-top: 0.5rem ;
+}
+</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="repository">
+{{template "repo/header" .}}
+    <div class="ui container">
+        <h4 class="ui header" id="vertical-segment">
+            <div class="ui breadcrumb">
+                <a class="section" href="{{.RepoLink}}/cloudbrain">
+                    {{.i18n.Tr "repo.cloudbrain"}}
+                </a>
+                <div class="divider"> / </div>
+                <a class="section" href="{{$.RepoLink}}/modelarts/train-job">
+                    {{$.i18n.Tr "repo.modelarts.train_job"}}
+                </a>
+                <div class="divider"> / </div>
+				<div class="active section">{{.jobName}}</div>
+			</div>
+        </h4>
+        {{range $k ,$v := .version_list_task}}
+        <div class="ui accordion border-according"  id="accordion{{.VersionName}}" data-repopath="{{$.RepoRelPath}}" data-jobid="{{.JobID}}" data-version="{{.VersionName}}">
+            <div class="{{if eq $k 0}}active{{end}} title padding0">
+                <div class="according-panel-heading">
+                    <div class="accordion-panel-title">
+                        <i class="dropdown icon"></i>
+                        <span class="accordion-panel-title-content">
+                            <span>
+                                <div style="float: right;">
+                                    {{$.CsrfTokenHtml}}
+                                    {{if and (.CanModify) (eq .Status "COMPLETED")}}
+                                    <a class="ti-action-menu-item" onclick="showcreate({{.}})">{{$.i18n.Tr "repo.modelarts.create_model"}}</a>
+                                    {{else}}
+                                    <a class="ti-action-menu-item disabled">{{$.i18n.Tr "repo.modelarts.create_model"}}</a>
+                                    {{end}}
+                                    {{$.CsrfTokenHtml}}
+                                    {{if .CanModify}}
+                                    <a class="ti-action-menu-item" href="{{$.RepoLink}}/modelarts/train-job/{{.JobID}}/create_version?version_name={{.VersionName}}">{{$.i18n.Tr "repo.modelarts.modify"}}</a>
+                                    {{else}}
+                                    <a class="ti-action-menu-item disabled" href="{{$.RepoLink}}/modelarts/train-job/{{.JobID}}/create_version?version_name={{.VersionName}}">{{$.i18n.Tr "repo.modelarts.modify"}}</a>
+                                    {{end}}
+                                    {{$.CsrfTokenHtml}}
+                                    {{if .CanDel}}
+                                    <a class="ti-action-menu-item {{if eq .Status "KILLED" "FAILED" "START_FAILED" "KILLING" "COMPLETED"}}disabled {{end}}" id="{{.VersionName}}-stop" onclick="stopVersion({{.VersionName}})">{{$.i18n.Tr "repo.stop"}}</a>
+                                    {{else}}
+                                    <a class="ti-action-menu-item disabled" id="{{.VersionName}}-stop" onclick="stopVersion({{.VersionName}})">{{$.i18n.Tr "repo.stop"}}</a>
+                                    {{end}}
+                                    
+                                    {{$.CsrfTokenHtml}}
+                                    {{if .CanDel}}
+                                    <a class="ti-action-menu-item"  onclick="deleteVersion({{.VersionName}})" style="color: #FF4D4F;">{{$.i18n.Tr "repo.delete"}}</a>
+                                    {{else}}
+                                    <a class="ti-action-menu-item disabled"  onclick="deleteVersion({{.VersionName}})" style="color: #FF4D4F;">{{$.i18n.Tr "repo.delete"}}</a>
+                                    {{end}}
+                                </div>
+                                <div class="ac-display-inblock title_text acc-margin-bottom">
+                                    
+                                    <span class="cti-mgRight-sm">{{TimeSinceUnix1 .Cloudbrain.CreatedUnix}}</span>   
+                                    <span class="cti-mgRight-sm"> {{$.i18n.Tr "repo.modelarts.current_version"}}：{{.VersionName}}</span>
+                                    <span class="cti-mgRight-sm">  {{$.i18n.Tr "repo.modelarts.parent_version"}}：{{.PreVersionName}}</span>
+                                    <span class="cti-mgRight-sm">{{$.i18n.Tr "repo.modelarts.status"}}：
+                                        <span id="{{.VersionName}}-status-span"><i id="icon" style="vertical-align: middle;" class="{{.Status}}"></i><span id="text" style="margin-left: 0.4em;font-size: 12px;">{{.Status}}</span></span>
+                                    </span>
+                                    <span class="cti-mgRight-sm">{{$.i18n.Tr "repo.modelarts.train_job.dura_time"}}：</span>
+                                    <span class="cti-mgRight-sm uc-accordionTitle-black" id="{{.VersionName}}-duration-span">{{.TrainJobDuration}}</span>
+                                    <span data-tooltip="刷新" style="cursor: pointer;" data-inverted="" onclick="refreshStatus({{.VersionName}})"><i class="redo icon redo-color"></i></span>
+
+                                </div>
+                            </span>
+                        </span>
+                    </div>
+                </div>
+            </div>
+            <div class="{{if eq $k 0}}active{{end}} content">
+                <div class="content-pad">
+                    <div class="ui pointing secondary menu" style="border-bottom: 1px solid rgba(34,36,38,.15);">
+                        
+                        <a class="active item" data-tab="first{{$k}}">{{$.i18n.Tr "repo.modelarts.train_job.config"}}</a>
+                        <a class="item" data-tab="second{{$k}}" onclick="loadLog({{.VersionName}})">{{$.i18n.Tr "repo.modelarts.log"}}</a>
+                        <a class="item" data-tab="third{{$k}}" onclick="loadModelFile({{.VersionName}},'','','init')">{{$.i18n.Tr "repo.model_download"}}</a>
+                    </div>
+                    <div class="ui tab active" data-tab="first{{$k}}">
+                        <div style="padding-top: 10px;">
+                            <div class="tab_2_content">
+                                <div class="ac-grid ac-grid-col2">
+                                    <div class="ac-grid-col">
+                                        <table class="ti-form">
+                                            <tbody class="ti-text-form">
+                                                <tr class="ti-no-ng-animate">
+                                                    <td class="ti-no-ng-animate ti-text-form-label text-width80">
+                                                        {{$.i18n.Tr "repo.cloudbrain_task"}}
+                                                    </td>
+                                                    <td class="ti-text-form-content">
+                                                        <div class="text-span text-span-w">
+                                                            {{.JobName}}
+                                                        </div>
+                                                    </td>
+                                                </tr>
+                                                <tr class="ti-no-ng-animate">
+                                                    <td class="ti-no-ng-animate ti-text-form-label text-width80">
+                                                        {{$.i18n.Tr "repo.modelarts.status"}}
+                                                    </td>
+
+                                                    <td class="ti-text-form-content">
+                                                        <div class="text-span text-span-w" id="{{.VersionName}}-status">
+                                                            {{.Status}}
+                                                        </div>
+                                                    </td>
+                                                </tr>
+                                                <tr class="ti-no-ng-animate">
+                                                    <td class="ti-no-ng-animate ti-text-form-label text-width80">
+                                                        {{$.i18n.Tr "repo.modelarts.run_version"}}
+                                                    </td>
+        
+                                                    <td class="ti-text-form-content">
+                                                        <div class="text-span text-span-w">
+                                                            {{.VersionName}}
+                                                        </div>
+                                                    </td>
+                                                </tr>
+                                                <tr class="ti-no-ng-animate">
+                                                    <td class="ti-no-ng-animate ti-text-form-label text-width80">
+                                                        {{$.i18n.Tr "repo.modelarts.train_job.start_time"}} 
+                                                    </td>
+        
+                                                    <td class="ti-text-form-content">
+                                                        <div class="text-span text-span-w">
+                                                            <span style="font-size: 12px;" class="">{{TimeSinceUnix1 .Cloudbrain.CreatedUnix}}</span>
+                                                        </div>
+                                                    </td>
+                                                </tr>
+                                                <tr class="ti-no-ng-animate">
+                                                    <td class="ti-no-ng-animate ti-text-form-label text-width80">
+                                                        {{$.i18n.Tr "repo.modelarts.train_job.dura_time"}} 
+                                                    </td>
+        
+                                                    <td class="ti-text-form-content">
+                                                        <div class="text-span text-span-w" id="{{.VersionName}}-duration">
+                                                            {{.TrainJobDuration}}
+                                                        </div>
+                                                    </td>
+                                                </tr>
+                                                <tr class="ti-no-ng-animate">
+                                                    <td class="ti-no-ng-animate ti-text-form-label text-width80">
+                                                            {{$.i18n.Tr "repo.modelarts.train_job.standard"}} 
+                                                    </td>
+        
+                                                    <td class="ti-text-form-content">
+                                                        <div class="text-span text-span-w">
+                                                            {{.FlavorName}}
+                                                        </div>
+                                                    </td>
+                                                </tr>
+                                                <tr class="ti-no-ng-animate">
+                                                    <td class="ti-no-ng-animate ti-text-form-label text-width80">
+                                                        {{$.i18n.Tr "repo.modelarts.train_job.compute_node"}} 
+                                                    </td>
+                                                    <td class="ti-text-form-content">
+                                                        <div class="text-span text-span-w">
+                                                            {{.WorkServerNumber}}
+                                                        </div>
+                                                    </td>
+                                                </tr>
+                                            </tbody>
+                                        </table>
+                                    </div>
+                                    <div class="ac-grid-col">
+                                            <table class="ti-form">
+                                                <tbody class="ti-text-form">
+                                                    <tr class="ti-no-ng-animate">
+                                                        <td class="ti-no-ng-animate ti-text-form-label text-width80">
+                                                            {{$.i18n.Tr "repo.modelarts.train_job.AI_driver"}} 
+                                                        </td>
+                                                        <td class="ti-text-form-content">
+                                                            <div class="text-span text-span-w">
+                                                            {{.EngineName}}
+                                                            </div>
+                                                        </td>
+                                                    </tr>
+                                                    <tr class="ti-no-ng-animate">
+                                                        <td class="ti-no-ng-animate ti-text-form-label text-width80">
+                                                            {{$.i18n.Tr "repo.modelarts.code_version"}}
+                                                        </td>
+    
+                                                        <td class="ti-text-form-content">
+                                                            <div class="text-span text-span-w">
+                                                                {{.BranchName}}
+                                                            </div>
+                                                        </td>
+                                                    </tr>
+                                                    <tr class="ti-no-ng-animate">
+                                                        <td class="ti-no-ng-animate ti-text-form-label text-width80">
+                                                            {{$.i18n.Tr "repo.modelarts.train_job.start_file"}}
+                                                        </td>
+            
+                                                        <td class="ti-text-form-content">
+                                                            <div class="text-span text-span-w">
+                                                                {{.BootFile}}
+                                                            </div>
+                                                        </td>
+                                                    </tr>
+                                                    <tr class="ti-no-ng-animate">
+                                                        <td class="ti-no-ng-animate ti-text-form-label text-width80">
+                                                            {{$.i18n.Tr "repo.modelarts.train_job.train_dataset"}}   
+                                                        </td>
+                
+                                                        <td class="ti-text-form-content">
+                                                            <div class="text-span text-span-w">
+                                                                {{.DatasetName}}
+                                                            </div>
+                                                        </td>
+                                                    </tr>
+                                                    <tr class="ti-no-ng-animate">
+                                                        <td class="ti-no-ng-animate ti-text-form-label text-width80" >
+                                                            {{$.i18n.Tr "repo.modelarts.train_job.run_parameter"}} 
+                                                        </td>
+                
+                                                        <td class="ti-text-form-content">
+                                                            <div class="text-span text-span-w" title="{{.Parameters}}">
+                                                                {{.Parameters}}
+                                                            </div>
+                                                        </td>
+                                                    </tr>
+                                                    </tr>
+                                                    <tr class="ti-no-ng-animate">
+                                                        <td class="ti-no-ng-animate ti-text-form-label text-width80">
+                                                            {{$.i18n.Tr "repo.modelarts.train_job.description"}}  
+                                                        </td>
+                
+                                                        <td class="ti-text-form-content">
+                                                            <div class="text-span text-span-w" title="{{.Cloudbrain.Description}}">
+                                                                {{.Cloudbrain.Description}}
+                                                            </div>
+                                                        </td>
+                                                    </tr>
+                                                </tbody>
+                                            </table>
+                                        </div>
+                                </div>
+                            </div>
+                            
+                        </div>
+                    </div>
+                    <div class="ui tab" data-tab="second{{$k}}">
+                        <div>
+                            <div class="ui message message{{.VersionName}}" style="display: none;">
+                                <div id="header"></div>
+                            </div>
+                            <div class="ui attached  log" onscroll="logScroll({{.VersionName}})" id="log{{.VersionName}}" style="height: 300px !important; overflow: auto;">
+                                <input type="hidden"  name="end_line" value>
+                                <input type="hidden"  name="start_line" value>
+                                <pre id="log_file{{.VersionName}}"></pre>
+                            </div>
+                                        
+                        </div>
+                        
+                    </div>
+                    <div class="ui tab" data-tab="third{{$k}}">
+                        <input type="hidden" name="model{{.VersionName}}" value="-1">
+                        <input type="hidden" name="modelback{{.VersionName}}" value="-1">
+                        <div class='ui breadcrumb model_file_bread' id='file_breadcrumb{{.VersionName}}'>
+                            <div class="active section">{{.VersionName}}</div>
+                            <div class="divider"> / </div>
+
+                        </div>
+                        <div id="dir_list{{.VersionName}}">
+                            
+                        </div>
+                    </div>
+
+                </div>
+            </div>
+        </div>
+        {{end}} {{template "base/paginate" .}}
+    </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 id="newmodel">
+            <div class="ui modal second">
+                <div class="header" style="padding: 1rem;background-color: rgba(240, 240, 240, 100);">
+                    <h4 id="model_header">导入新模型</h4>
+                </div>
+                <div class="content content-padding">
+                    <form id="formId" method="POST" class="ui form">
+                        <div class="ui error message">
+                        </div>
+                        {{$.CsrfTokenHtml}}
+                        <input type="hidden" name="trainTaskCreate" value="true">
+
+                        <div class="two inline fields ">   
+                            <div class="required ten wide field">
+                                <label style="margin-left: -23px;">选择训练任务</label>
+                                <input type="hidden" class="width83" id="JobId" name="JobId" readonly required>
+                                <input class="width83" id="JobName" readonly required>
+                                
+                            </div>
+                            <div class="required six widde field">
+                                <label>版本</label>
+                                <input class="width70" id="VersionName" name="VersionName" readonly required>
+                            </div>
+                        </div>
+        
+                        <div class="required inline field" id="modelname">
+                            <label>模型名称</label>
+                            <input style="width: 45%;" id="name" name="Name" required maxlength="25" onkeyup="this.value=this.value.replace(/[, ]/g,'')">
+                        </div>
+                        <div class="required inline field" id="verionname">
+                            <label>模型版本</label>
+                            <input style="width: 45%;" id="version" name="Version" value="" readonly required maxlength="255">
+                        </div>
+                        <div class="inline field">
+                            <label>模型标签</label>
+                            <input style="width: 83%;margin-left: 7px;" id="label" name="Label" maxlength="255" placeholder='{{.i18n.Tr "repo.modelarts.train_job.label_place"}}'>
+                        </div>
+                        <div class="inline field">
+                            <label for="description">模型描述</label>
+                            <textarea style="width: 83%;margin-left: 7px;" id="Description" name="Description" rows="3" maxlength="255" placeholder='{{.i18n.Tr "repo.modelarts.train_job.new_place"}}' onchange="this.value=this.value.substring(0, 255)" onkeydown="this.value=this.value.substring(0, 255)" onkeyup="this.value=this.value.substring(0, 256)"></textarea>
+                        </div>
+        
+                        <div class="inline field" style="margin-left: 75px;">
+                            <button onclick="createModel()" id="submitId" type="button" class="ui create_train_job green button" style="position: absolute;">
+                            {{.i18n.Tr "repo.model.manage.sava_model"}}
+                            </button>
+                        </div>
+                    </form>
+                    <div class="actions" style="display: inline-block;margin-left: 180px;">
+                        <button class="ui button cancel" >{{.i18n.Tr "repo.cloudbrain.cancel"}}</button>
+                    </div>
+                </div>
+                
+            
+        </div>
+</div>
+{{template "base/footer" .}}
+
+<script>
+    $('.menu .item').tab()
+
+    $(document).ready(function(){
+    $('.ui.accordion').accordion({selector:{trigger:'.icon'}});
+    });
+    $(document).ready(function(){
+        $('.secondary.menu .item').tab();
+    });
+    
+    let userName
+    let repoPath
+    let jobID
+    $(document).ready(function(){
+        let url = window.location.href;
+        let urlArr = url.split('/')
+        userName = urlArr.slice(-5)[0]
+        repoPath = urlArr.slice(-4)[0]
+        jobID = urlArr.slice(-1)[0]
+    })
+    function stopBubbling(e) {
+        e = window.event || e;
+        if (e.stopPropagation) {
+            e.stopPropagation();      //阻止事件 冒泡传播
+        } else {
+            e.cancelBubble = true;   //ie兼容
+        }
+    }
+    let timeid = window.setInterval(loadJobStatus, 30000);
+    $(document).ready(loadJobStatus);
+    function showcreate(obj){
+        $('.ui.modal.second')
+        .modal({
+            centered: false,
+            onShow:function(){
+                $('input[name="Version"]').addClass('model_disabled')
+                // $('input[name="JobId"]').text(obj.JobName)
+                $('#JobName').val(obj.JobName).addClass('model_disabled')
+                $('input[name="JobId"]').val(obj.JobID)
+                $('input[name="VersionName"]').val(obj.VersionName).addClass('model_disabled')
+                $('.ui.dimmer').css({"background-color":"rgb(136, 136, 136,0.7)"})
+                createModelName()
+                
+                
+            },
+            onHide:function(){
+                document.getElementById("formId").reset();
+                $('.ui.dimmer').css({"background-color":""})
+                $('.ui.error.message').text()
+                $('.ui.error.message').css('display','none')
+                
+            }
+        })
+        .modal('show')
+    }
+    function createModel(){
+        let url_href = `/${userName}/${repoPath}/modelmanage/create_new_model`
+        let data = $("#formId").serialize()
+        $("#mask").css({"display":"block","z-index":"9999"})
+        $.ajax({
+                url:url_href,
+                type:'POST',
+                data:data,
+                success:function(res){
+                    location.href=`/${userName}/${repoPath}/modelmanage/show_model`
+                    $('.ui.modal.second').modal('hide')
+                },
+                error: function(xhr){
+                // 隐藏 loading
+                // 只有请求不正常（状态码不为200）才会执行
+                    $('.ui.error.message').text(xhr.responseText)
+                    $('.ui.error.message').css('display','block')
+                },
+                complete:function(xhr){
+                    $("#mask").css({"display":"none","z-index":"1"})
+                }
+            })
+        
+    }
+    function createModelName(){
+        let repoName = location.pathname.split('/')[2]
+        let modelName = repoName + '_model_' + Math.random().toString(36).substr(2, 4)
+        $('#name').val(modelName)
+        $('#version').val("0.0.1")
+    }
+    function renderSize(value){
+        if(null==value||value==''){
+            return "0 Bytes";
+        }
+        var unitArr = new Array("Bytes","KB","MB","GB","TB","PB","EB","ZB","YB");
+        var index=0;
+        var srcsize = parseFloat(value);
+        index=Math.floor(Math.log(srcsize)/Math.log(1024));
+        var size =srcsize/Math.pow(1024,index);
+        size=size.toFixed(2);//保留的小数位数
+        return size+unitArr[index];
+    }
+    function loadJobStatus() {
+        $(".ui.accordion.border-according").each((index, job) => {
+            const jobID = job.dataset.jobid;
+            const repoPath = job.dataset.repopath;
+            const versionname = job.dataset.version
+            // ['IMAGE_FAILED','SUBMIT_FAILED','DELETE_FAILED','KILLED','COMPLETED','FAILED','CANCELED','LOST','START_FAILED']
+            // if (job.textContent.trim() == 'IMAGE_FAILED' || job.textContent.trim() == 'SUBMIT_FAILED' || job.textContent.trim() == 'DELETE_FAILED'
+            //     || job.textContent.trim() == 'KILLED' || job.textContent.trim() == 'COMPLETED' || job.textContent.trim() == 'FAILED'
+            //     || job.textContent.trim() == 'CANCELED' || job.textContent.trim() == 'LOST') {
+            //     return
+            // }
+            let status = $(`#${versionname}-status-span`).text()
+            
+            if(['IMAGE_FAILED','SUBMIT_FAILED','DELETE_FAILED','KILLED','COMPLETED','FAILED','CANCELED','LOST','START_FAILED'].includes(status)){
+                return 
+            }
+            let stopArray=["KILLED","FAILED","START_FAILED","KILLING","COMPLETED"]
+            $.get(`/api/v1/repos/${repoPath}/modelarts/train-job/${jobID}?version_name=${versionname}`, (data) => {
+                $(`#${versionname}-duration-span`).text(data.JobDuration)
+                $(`#${versionname}-status-span span`).text(data.JobStatus)
+                $(`#${versionname}-status-span i`).attr("class",data.JobStatus)
+                // detail status and duration
+                $('#'+versionname+'-duration').text(data.JobDuration)
+                $('#'+versionname+'-status').text(data.JobStatus)
+                if(stopArray.includes(data.JobStatus)){
+                    $('#'+versionname+'-stop').addClass('disabled')
+                }
+            }).fail(function(err) {
+                console.log(err);
+            });
+        });
+    };
+
+    function refreshStatus(version_name){
+        $.get(`/api/v1/repos/${userName}/${repoPath}/modelarts/train-job/${jobID}?version_name=${version_name}`,(data)=>{
+            // header status and duration
+            $(`#${version_name}-duration-span`).text(data.JobDuration)
+            $(`#${version_name}-status-span span`).text(data.JobStatus)
+            $(`#${version_name}-status-span i`).attr("class",data.JobStatus)
+            // detail status and duration
+            $('#'+version_name+'-duration').text(data.JobDuration)
+            $('#'+version_name+'-status').text(data.JobStatus)
+            loadLog(version_name)
+
+
+        }).fail(function(err) {
+            console.log(err);
+        });
+        stopBubbling(arguments.callee.caller.arguments[0])
+    }
+    function deleteVersion(version_name){
+        stopBubbling(arguments.callee.caller.arguments[0])
+        let flag = 1;
+        $('.ui.basic.modal').modal({
+                onDeny: function() {
+                    flag = false
+                },
+                onApprove: function() {
+                    $.post(`/api/v1/repos/${userName}/${repoPath}/modelarts/train-job/${jobID}/del_version`,{version_name:version_name},(data)=>{
+                        if(data.VersionListCount===0){
+                            location.href=`/${userName}/${repoPath}/modelarts/train-job`
+                        }else{
+                            $('#accordion'+version_name).remove()
+                        }
+                        
+                    }).fail(function(err) {
+                        console.log(err);
+                    });
+                    flag = true
+                },
+                onHidden: function() {
+                    if (flag == false) {
+                        $('.alert').html('您已取消操作').removeClass('alert-success').addClass('alert-danger').show().delay(1500).fadeOut();
+                    }
+                }
+            })
+        .modal('show')
+        
+    }
+    function stopVersion(version_name){
+        stopBubbling(arguments.callee.caller.arguments[0])
+        $.post(`/api/v1/repos/${userName}/${repoPath}/modelarts/train-job/${jobID}/stop_version`,{version_name:version_name},(data)=>{
+            if(data.StatusOK===0){
+                $('#'+version_name+'-stop').addClass('disabled')
+                refreshStatus(version_name)
+            }
+        }).fail(function(err) {
+            console.log(err);	            
+        });
+    }
+    function loadLog(version_name){
+        $.get(`/api/v1/repos/${userName}/${repoPath}/modelarts/train-job/${jobID}/log?version_name=${version_name}&lines=50&order=asc`, (data) => {
+            $('input[name=end_line]').val(data.EndLine)
+            $('input[name=start_line]').val(data.StartLine)
+            $(`#log_file${version_name}`).text(data.Content)
+        }).fail(function(err) {
+            console.log(err);
+        });
+    }
+    function loadModelFile(version_name,parents,filename,init){
+        parents = parents || ''
+        filename = filename || ''
+        init = init || ''
+        $.get(`/api/v1/repos/${userName}/${repoPath}/modelarts/train-job/${jobID}/model_list?version_name=${version_name}&parentDir=${parents}`, (data) => {
+                $(`#dir_list${version_name}`).empty() 
+                renderDir(data,version_name)
+                if(init==="init"){
+                    $(`input[name=model${version_name}]`).val("")
+                    $(`input[name=modelback${version_name}]`).val(version_name)
+                    $(`#file_breadcrumb${version_name}`).empty()
+                    let htmlBread = ""
+                    htmlBread += `<div class='active section'>${version_name}</div>`
+                    htmlBread += "<div class='divider'> / </div>" 
+                    $(`#file_breadcrumb${version_name}`).append(htmlBread)
+                }else{
+                    renderBrend(version_name,parents,filename,init)
+                }
+            }).fail(function(err) {
+                console.log(err,version_name);
+            });
+        
+    }
+    function renderBrend(version_name,parents,filename,init){
+        if(init=="folder"){
+            let htmlBrend = ""
+            let sectionName=$(`#file_breadcrumb${version_name} .active.section`).text()
+            let parents1 = $(`input[name=model${version_name}]`).val()
+            let filename1 = $(`input[name=modelback${version_name}]`).val()
+            if(parents1===""){
+                $(`#file_breadcrumb${version_name} .active.section`).replaceWith(`<a class='section' onclick="loadModelFile('${version_name}','${parents1}','','init')">${sectionName}</a>`)
+            }else{
+                $(`#file_breadcrumb${version_name} .active.section`).replaceWith(`<a class='section' onclick="loadModelFile('${version_name}','${parents1}','${filename1}')">${sectionName}</a>`)
+            }
+            
+            htmlBrend += `<div class='active section'>${filename}</div>`
+            htmlBrend += "<div class='divider'> / </div>" 
+            $(`#file_breadcrumb${version_name}`).append(htmlBrend)
+            $(`input[name=model${version_name}]`).val(parents)
+            $(`input[name=modelback${version_name}]`).val(filename)
+        }else{
+            $(`input[name=model${version_name}]`).val(parents)
+            $(`input[name=modelback${version_name}]`).val(filename)
+            $(`#file_breadcrumb${version_name} a.section:contains(${filename})`).nextAll().remove()
+            $(`#file_breadcrumb${version_name} a.section:contains(${filename})`).replaceWith(`<div class='active section'>${filename}</div>`)
+            $(`#file_breadcrumb${version_name} div.section:contains(${filename})`).append("<div class='divider'> / </div>")
+        }
+        
+    }
+    function renderDir(data,version_name){
+        let html=""
+            html += "<div class='ui grid' style='margin:0;'>"
+            html += "<div class='row' style='padding: 0;'>"
+            html += "<div class='ui sixteen wide column' style='padding:1rem;'>"
+            html += "<div class='dir list'>"
+            html += "<table id='repo-files-table' class='ui single line table pad20'>"
+            html += '<tbody>'
+            // html += "</tbody>"
+            for(let i=0;i<data.Dirs.length;i++){
+                let dirs_size = renderSize(data.Dirs[i].Size)
+                html += "<tr>"
+                html += "<td class='name six wid'>"
+                html += "<span class='truncate'>"
+                html += "<span class='octicon octicon-file-directory'>"
+                html += "</span>"
+                if(data.Dirs[i].IsDir){
+                    html += `<a  onclick="loadModelFile('${version_name}','${data.Dirs[i].ParenDir}','${data.Dirs[i].FileName}','folder')">`
+                    html += "<span class='fitted'><i class='folder icon' width='16' height='16' aria-hidden='true'></i>" + data.Dirs[i].FileName + "</span>"
+                }else{
+                    html += `<a href="${location.href}/model_download?version_name=${version_name}&file_name=${data.Dirs[i].FileName}&parent_dir=${data.Dirs[i].ParenDir}">`
+                    html += "<span class='fitted'><i class='file icon' width='16' height='16' aria-hidden='true'></i>" + data.Dirs[i].FileName + "</span>"
+                }
+                html += '</a>'
+                html += "</span>"
+                html += "</td>"
+                html += "<td class='message seven wide'>"
+                if(data.Dirs[i].IsDir){
+                    html += "<span class='truncate has-emoji'></span>"
+                }else{
+                    html += "<span class='truncate has-emoji'>"+ `${dirs_size}` + "</span>"
+                }
+                
+                html += "</td>"
+
+                html += "<td class='text right age three wide'>"
+                html += "<span class='truncate has-emoji'>" + data.Dirs[i].ModTime + "</span>"
+                html += "</td>"
+                html += "</tr>"
+                
+            }
+            html += "</tbody>"
+            html += "</table>"
+            html += "</div>"
+            html += "</div>"
+            html += "</div>"
+            html += "</div>"
+            $(`#dir_list${version_name}`).append(html)
+    }
+    
+    function logScroll(version_name) {
+       
+        let container = document.querySelector(`#log${version_name}`)
+        let scrollTop = container.scrollTop
+        let scrollHeight = container.scrollHeight
+        let clientHeight = container.clientHeight
+        let scrollLeft = container.scrollLeft
+        if((parseInt(scrollTop)  + clientHeight == scrollHeight || parseInt(scrollTop)  + clientHeight +1 == scrollHeight || parseInt(scrollTop)  + clientHeight - 1 == scrollHeight) && (scrollLeft===0)){
+            let end_line = $(`#log${version_name} input[name=end_line]`).val()
+            $.get(`/api/v1/repos/${userName}/${repoPath}/modelarts/train-job/${jobID}/log?version_name=${version_name}&base_line=${end_line}&lines=50&order=desc`, (data) => {
+                if (data.Lines == 0){
+                    $(`.message${version_name} #header`).text('您已翻阅至日志底部')
+                    $(`.message${version_name}`).css('display', 'block')
+                    setTimeout(function(){
+                        $(`.message${version_name}`).css('display', 'none')     
+                    }, 1000)
+                }else{
+                    if(end_line===data.EndLine){
+                        return
+                    }
+                    else{
+                        $(`#log${version_name} input[name=end_line]`).val(data.EndLine)
+                        $(`#log${version_name}`).append('<pre>' + data.Content) 
+                    }
+                    
+                }
+            }).fail(function(err) {
+                console.log(err);
+            });
+        }
+        if(scrollTop == 0 && scrollLeft==0){
+            let start_line = $(`#log${version_name} input[name=start_line]`).val()
+            $.get(`/api/v1/repos/${userName}/${repoPath}/modelarts/train-job/${jobID}/log?version_name=${version_name}&base_line=${start_line}&lines=50&order=asc`, (data) => {
+                if (data.Lines == 0){
+                    $(`.message${version_name} #header`).text('您已翻阅至日志顶部')
+                    $(`.message${version_name}`).css('display', 'block')
+                    setTimeout(function(){
+                        $(`.message${version_name}`).css('display', 'none')     
+                    }, 1000)
+                }else{
+                    $(`#log${version_name} input[name=start_line]`).val(data.StartLine)   //如果变动就改变所对应的值
+                    $(`#log${version_name}`).prepend('<pre>' + data.Content)
+                }
+            }).fail(function(err) {
+                console.log(err);
+            });
+        }
+    }
+</script>
\ No newline at end of file