From 70dca4ff3f58719c05efc66b48df8273531dc3de Mon Sep 17 00:00:00 2001
From: zhoupzh <zhoupzh@pcl.ac.cn>
Date: Mon, 1 Nov 2021 11:03:41 +0800
Subject: [PATCH] fix issue cloudbrain moderlarts

---
 templates/repo/cloudbrain/index.tmpl         | 51 ++++++++++++----
 templates/repo/modelarts/notebook/index.tmpl | 58 +++++++++++++-----
 templates/repo/modelarts/trainjob/index.tmpl | 63 ++++++++++++++++----
 3 files changed, 133 insertions(+), 39 deletions(-)

diff --git a/templates/repo/cloudbrain/index.tmpl b/templates/repo/cloudbrain/index.tmpl
index 795e35aac..ff9bb24c4 100755
--- a/templates/repo/cloudbrain/index.tmpl
+++ b/templates/repo/cloudbrain/index.tmpl
@@ -323,7 +323,7 @@
                                         {{else}}
                                             {{.Status}}
                                         {{end}} -->
-                                        <span><i style="vertical-align: middle;" class="{{.Status}}"></i><span style="margin-left: 0.4em;font-size: 12px;">{{.Status}}</span></span>
+                                        <span><i id="{{.JobID}}-icon" style="vertical-align: middle;" class="{{.Status}}"></i><span id="{{.JobID}}-text" style="margin-left: 0.4em;font-size: 12px;">{{.Status}}</span></span>
                                     </span>
                                     <!-- <span class="job-status" id="{{.JobID}}" data-repopath="{{$.RepoRelPath}}" data-jobid="{{.JobID}}" >
                                             {{if eq .Status "STOPPED"}}
@@ -357,13 +357,13 @@
                                         {{end}}
 
                                         <!-- 调试 -->
-                                        <a class="ui basic {{if not .CanDebug}}disabled {{else}}blue {{end}}button" href="{{$.Link}}/{{.JobID}}/debug" target="_blank">
+                                        <a id="model-debug" class="ui basic {{if not .CanDebug}}disabled {{else}}blue {{end}}button" href="{{$.Link}}/{{.JobID}}/debug" target="_blank">
                                             调试
                                         </a>
                                         
-                                        <form id="stopForm-{{.JobID}}" action="{{if or (eq .Status "STOPPED") (eq .Status "FAILED")}}javascript:void(0){{else}}{{$.Link}}/{{.JobID}}/stop{{end}}" method="post" style="margin-left:-1px;">
+                                        <form id="stopForm-{{.JobID}}" action="{{$.Link}}/{{.JobID}}/stop" method="post" style="margin-left:-1px;">
                                             {{$.CsrfTokenHtml}}
-                                            <a class="ui basic {{if or (eq .Status "STOPPED") (eq .Status "FAILED")}}disabled {{else}}blue {{end}}button" onclick="document.getElementById('stopForm-{{.JobID}}').submit();">
+                                            <a id="stop-model-debug" class="ui basic {{if or (eq .Status "STOPPED") (eq .Status "FAILED")}}disabled {{else}}blue {{end}}button" onclick="document.getElementById('stopForm-{{.JobID}}').submit();">
                                                 停止
                                             </a>
                                         </form>                                        
@@ -376,14 +376,14 @@
                                         
                                         <!-- 接收结果 -->
                                         <iframe src="" frameborder="0" name="iframeContent" style="display: none;"></iframe>
-                                        <a class="imageBtn ui basic {{if not .CanDebug}}disabled {{else}}blue {{end}}button" value="{{.CanDebug}}">提交镜像</a>
+                                        <a id="model-image" class="imageBtn ui basic {{if not .CanDebug}}disabled {{else}}blue {{end}}button" value="{{.CanDebug}}">提交镜像</a>
 
                                     </div>
                                     
                                     <!-- 删除任务 -->
-                                    <form class="ui compact buttons" id="delForm-{{.JobID}}" action="{{if not .CanDel}}javascript:void(0){{else}}{{$.Link}}/{{.JobID}}/del{{end}}" method="post">
+                                    <form class="ui compact buttons" id="delForm-{{.JobID}}" action="{{$.Link}}/{{.JobID}}/del" method="post">
                                         {{$.CsrfTokenHtml}}
-                                        <a class="ui compact {{if not .CanDel}}disabled {{else}}red {{end}}button" onclick="assertDelete(this)" style="border-radius: .28571429rem;">
+                                        <a id="model-delete" class="ui compact {{if not .CanDel}}disabled {{else}}red {{end}}button" onclick="assertDelete(this)" style="border-radius: .28571429rem;">
                                             删除
                                         </a>
                                     </form>
@@ -512,23 +512,52 @@
     $(document).ready(loadJobStatus);
     function loadJobStatus() {
         $(".job-status").each((index, job) => {
-            console.log("---------",index,job)
             const jobID = job.dataset.jobid;
             const repoPath = job.dataset.repopath;
             if (job.textContent.trim() == 'STOPPED' || job.textContent.trim() == 'FAILED') {
                 
                 return
             }
-
+            
             $.get(`/api/v1/repos/${repoPath}/cloudbrain/${jobID}`, (data) => {
                 const jobID = data.JobID
                 const status = data.JobStatus
                 if (status != job.textContent.trim()) {
-                    //$('#' + jobID).text(status)
+                    console.log("---------")
+                    $('#' + jobID+'-icon').removeClass().addClass(status)
+                    $('#' + jobID+ '-text').text(status)
+                    
                     //if (status == 'STOPPED') {
-                        window.location.reload()
+                        // window.location.reload()
                     //}
                 }
+                if(status==="RUNNING"){
+                    $('#model-debug').removeClass('disabled')
+                    $('#model-debug').addClass('blue')
+                    $('#model-image').removeClass('disabled')
+                    $('#model-image').addClass('blue')
+                    
+
+                }
+                if(status!=="RUNNING"){
+                    $('#model-debug').removeClass('blue')
+                    $('#model-debug').addClass('disabled')
+                    $('#model-image').removeClass('blue')
+                    $('#model-image').addClass('disabled')
+
+                }
+                if(status!=="STOPPED" || status!=="FAILED"){
+                   $('#stop-model-debug').removeClass('disabled')
+                   $('#stop-model-debug').addClass('blue')
+                   $('#model-delete').removeClass('red')
+                   $('#model-delete').addClass('disabled')
+                }
+                if(status=="STOPPED" || status=="FAILED"){
+                   $('#stop-model-debug').removeClass('blue')
+                   $('#stop-model-debug').addClass('disabled')
+                   $('#model-delete').removeClass('disabled')
+                   $('#model-delete').addClass('red')
+                }
             }).fail(function(err) {
                 console.log(err);
             });
diff --git a/templates/repo/modelarts/notebook/index.tmpl b/templates/repo/modelarts/notebook/index.tmpl
index 2a4115723..8f8396cb9 100755
--- a/templates/repo/modelarts/notebook/index.tmpl
+++ b/templates/repo/modelarts/notebook/index.tmpl
@@ -291,7 +291,7 @@
                                         {{.Status}}
                                     </span> -->
                                     <span class="job-status" id="{{.JobID}}" data-repopath="{{$.RepoRelPath}}" data-jobid="{{.JobID}}">
-                                            <span><i style="vertical-align: middle;" class="{{.Status}}"></i><span style="margin-left: 0.4em;font-size: 12px;">{{.Status}}</span></span>
+                                            <span><i id="{{.JobID}}-icon" style="vertical-align: middle;" class="{{.Status}}"></i><span id="{{.JobID}}-text" style="margin-left: 0.4em;font-size: 12px;">{{.Status}}</span></span>
                                     </span>
                                     <!-- 任务创建时间 -->
                                     <span style="font-size: 12px;margin-left: 0.4rem;" class="">{{TimeSinceUnix .Cloudbrain.CreatedUnix $.Lang}}</span>
@@ -310,33 +310,33 @@
                                         <!-- <a class="ui basic blue button" href="{{$.Link}}/{{.JobID}}">
                                             查看
                                         </a> -->
-                                        <a class="ui basic {{if not .CanDebug}}disabled {{else}}blue {{end}}button" href="{{$.Link}}/{{.JobID}}/debug" target="_blank">
+                                        <a id="model-debug" class="ui basic {{if not .CanDebug}}disabled {{else}}blue {{end}}button" href="{{$.Link}}/{{.JobID}}/debug" target="_blank">
                                             调试
                                         </a>
-                                        <form id="stopForm-{{.JobID}}" action="{{if ne .Status "RUNNING"}}javascript:void(0){{else}}{{$.Link}}/{{.JobID}}/stop{{end}}" method="post" style="margin-left:-1px;">
+                                        <form id="stopForm-{{.JobID}}" action="{{$.Link}}/{{.JobID}}/stop" method="post" style="margin-left:-1px;">
                                             {{$.CsrfTokenHtml}}
-                                            <a class="ui basic {{if ne .Status "RUNNING"}}disabled {{else}}blue {{end}}button" onclick="document.getElementById('stopForm-{{.JobID}}').submit();">
+                                            <a id="stop-model-debug" class="ui basic {{if or (eq .Status "STOPPED") (eq .Status "FAILED")}}disabled {{else}}blue {{end}}button" onclick="document.getElementById('stopForm-{{.JobID}}').submit();">
                                                 停止
                                             </a>
                                         </form>
                                     </div>
 
-                                    <div class="ui compact buttons" style="margin-right:10px;">
+                                    <!-- <div class="ui compact buttons" style="margin-right:10px;"> -->
                                             <!-- 模型下载 -->
-                                            <a class="ui basic blue button" href="{{$.Link}}/{{.JobID}}/models" target="_blank">
+                                            <!-- <a class="ui basic blue button" href="{{$.Link}}/{{.JobID}}/models" target="_blank">
                                                 模型下载
-                                            </a>
+                                            </a> -->
                                             
                                             <!-- 接收结果 -->
-                                            <iframe src="" frameborder="0" name="iframeContent" style="display: none;"></iframe>
-                                            <a class="imageBtn ui basic {{if not .CanDebug}}disabled {{else}}blue {{end}}button" value="{{.CanDebug}}">提交镜像</a>
+                                            <!-- <iframe src="" frameborder="0" name="iframeContent" style="display: none;"></iframe>
+                                            <a class="imageBtn ui basic {{if not .CanDebug}}disabled {{else}}blue {{end}}button" value="{{.CanDebug}}">提交镜像</a> -->
     
-                                    </div>
+                                    <!-- </div> -->
 
                                     <!-- 删除任务 -->
-                                    <form class="ui compact buttons" id="delForm-{{.JobID}}" action="{{if eq .Status "RUNNING"}}javascript:void(0){{else}}{{$.Link}}/{{.JobID}}/del{{end}}" method="post">
+                                    <form class="ui compact buttons" id="delForm-{{.JobID}}" action="{{$.Link}}/{{.JobID}}/del" method="post">
                                         {{$.CsrfTokenHtml}}
-                                        <a class="ui compact {{if eq .Status "RUNNING"}}disabled {{else}}red {{end}}button" onclick="assertDelete(this)" style="border-radius: .28571429rem;">
+                                        <a id="model-delete" class="ui compact {{if eq .Status "RUNNING"}}disabled {{else}}red {{end}}button" onclick="assertDelete(this)" style="border-radius: .28571429rem;">
                                             删除
                                         </a>
                                     </form>
@@ -423,7 +423,7 @@
 
     // 加载任务状态
     var timeid = window.setInterval(loadJobStatus, 15000);
-    // $(document).ready(loadJobStatus);
+    $(document).ready(loadJobStatus);
     function loadJobStatus() {
         $(".job-status").each((index, job) => {
             const jobID = job.dataset.jobid;
@@ -435,12 +435,38 @@
             $.get(`/api/v1/repos/${repoPath}/modelarts/notebook/${jobID}`, (data) => {
                 const jobID = data.JobID
                 const status = data.JobStatus
-                if (status != job.textContent.trim() || status=='RUNNING') {
-                    //$('#' + jobID).text(status)
+                if (status != job.textContent.trim()) {
+                    console.log("---------")
+                    $('#' + jobID+'-icon').removeClass().addClass(status)
+                    $('#' + jobID+ '-text').text(status)
+                    
                     //if (status == 'STOPPED') {
-                        window.location.reload()
+                        // window.location.reload()
                     //}
                 }
+                if(status==="RUNNING"){
+                    $('#model-debug').removeClass('disabled')
+                    $('#model-debug').addClass('blue')
+                    
+
+                }
+                if(status!=="RUNNING"){
+                    $('#model-debug').removeClass('blue')
+                    $('#model-debug').addClass('disabled')
+
+                }
+                if(status!=="STOPPED" || status!=="FAILED"){
+                   $('#stop-model-debug').removeClass('disabled')
+                   $('#stop-model-debug').addClass('blue')
+                   $('#model-delete').removeClass('red')
+                   $('#model-delete').addClass('disabled')
+                }
+                if(status=="STOPPED" || status=="FAILED"){
+                   $('#stop-model-debug').removeClass('blue')
+                   $('#stop-model-debug').addClass('disabled')
+                   $('#model-delete').removeClass('disabled')
+                   $('#model-delete').addClass('red')
+                }
             }).fail(function(err) {
                 console.log(err);
             });
diff --git a/templates/repo/modelarts/trainjob/index.tmpl b/templates/repo/modelarts/trainjob/index.tmpl
index 0d15638ad..8c2bab57f 100755
--- a/templates/repo/modelarts/trainjob/index.tmpl
+++ b/templates/repo/modelarts/trainjob/index.tmpl
@@ -317,7 +317,7 @@
                                         {{.Status}}
                                     </span> -->
                                     <span class="job-status" id="{{.JobID}}" data-repopath="{{$.RepoRelPath}}" data-jobid="{{.JobID}}">
-                                            <span><i style="vertical-align: middle;" class="{{.Status}}"></i><span style="margin-left: 0.4em;font-size: 12px;">{{.Status}}</span></span>
+                                            <span><i id="{{.JobID}}-icon" style="vertical-align: middle;" class="{{.Status}}"></i><span  id="{{.JobID}}-text" style="margin-left: 0.4em;font-size: 12px;">{{.Status}}</span></span>
                                     </span>
                                     <!-- 任务创建时间 -->
                                     <span style="font-size: 12px;margin-left: 0.4rem;" class="">{{TimeSinceUnix .Cloudbrain.CreatedUnix $.Lang}}</span>
@@ -329,7 +329,7 @@
                                             {{.Status}}
                                         </span> -->
                                         
-                                        <span>{{.TrainJobDuration}}</span>
+                                        <span id="model-duration">{{.TrainJobDuration}}</span>
                                         
                                         <!-- 任务创建时间 -->
                                         <!-- <span style="font-size: 12px;margin-left: 0.4rem;" class="">{{TimeSinceUnix .Cloudbrain.CreatedUnix $.Lang}}</span> -->
@@ -351,16 +351,16 @@
                                         <a class="ui basic {{if not .CanDebug}}disabled {{else}}blue {{end}}button" href="{{$.Link}}/{{.JobID}}/debug" target="_blank">
                                             调试
                                         </a> -->
-                                        <form id="stopForm-{{.JobID}}" action="{{if ne .Status "RUNNING"}}javascript:void(0){{else}}{{$.Link}}/{{.JobID}}/stop{{end}}" method="post" style="margin-left:-1px;">
+                                        <form id="stopForm-{{.JobID}}" action="{{$.Link}}/{{.JobID}}/stop" method="post" style="margin-left:-1px;">
                                             {{$.CsrfTokenHtml}}
-                                            <a class="ui basic {{if ne .Status "RUNNING"}}disabled {{else}}blue {{end}}button" onclick="document.getElementById('stopForm-{{.JobID}}').submit();">
+                                            <a id="stop-model-debug" class="ui basic {{if ne .Status "RUNNING"}}disabled {{else}}blue {{end}}button" onclick="document.getElementById('stopForm-{{.JobID}}').submit();">
                                                 停止
                                             </a>
                                         </form>
                                     </div>
                                     <div class="ui compact buttons" style="margin-right:10px;">
                                             <!-- 模型下载 -->
-                                            <a class="ui basic blue button" href="{{$.Link}}/{{.JobID}}/models" target="_blank">
+                                            <a id="stop-model-debug" class="ui basic blue button" href="{{$.Link}}/{{.JobID}}/models" target="_blank">
                                                 模型下载
                                             </a>
                                             
@@ -370,9 +370,9 @@
     
                                     </div>
                                     <!-- 删除任务 -->
-                                    <form class="ui compact buttons" id="delForm-{{.JobID}}" action="{{if eq .Status "RUNNING"}}javascript:void(0){{else}}{{$.Link}}/{{.JobID}}/del{{end}}" method="post">
+                                    <form class="ui compact buttons" id="delForm-{{.JobID}}" action="{{$.Link}}/{{.JobID}}/del" method="post">
                                         {{$.CsrfTokenHtml}}
-                                        <a class="ui compact {{if eq .Status "RUNNING" }}disabled {{else}}red {{end}}button" onclick="assertDelete(this)" style="border-radius: .28571429rem;">
+                                        <a id="model-delete" class="ui compact {{if eq .Status "RUNNING" }}disabled {{else}}red {{end}}button" onclick="assertDelete(this)" style="border-radius: .28571429rem;">
                                             删除
                                         </a>
                                     </form>
@@ -459,7 +459,7 @@
 
     // 加载任务状态
     var timeid = window.setInterval(loadJobStatus, 15000);
-    // $(document).ready(loadJobStatus);
+    $(document).ready(loadJobStatus);
     function loadJobStatus() {
         $(".job-status").each((index, job) => {
             const jobID = job.dataset.jobid;
@@ -471,18 +471,57 @@
             $.get(`/api/v1/repos/${repoPath}/modelarts/train-job/${jobID}`, (data) => {
                 const jobID = data.JobID
                 const status = data.JobStatus
-                if (status != job.textContent.trim() || status=='RUNNING') {
-                    //$('#' + jobID).text(status)
+                function runtime(){
+                    if(time){
+                        let hours = time/3600000<10 ? time/3600000+"0":time/3600000
+                        let miuns = time%3600000/60000<10 ? time%3600000/60000+"0":time%3600000/60000
+                        let seconds = time%60000/1000<10 ? time%60000/1000<10+"0":time%60000/1000<10
+                        return hours + ":" + miuns + ":" + seconds
+                    }else{
+                        return "00:00:00"
+                    }
+                }
+                if (status != job.textContent.trim()) {
+                    
+                    $('#' + jobID+'-icon').removeClass().addClass(status)
+                    $('#' + jobID+ '-text').text(status)
+                    
                     //if (status == 'STOPPED') {
-                        window.location.reload()
+                        // window.location.reload()
                     //}
                 }
+                if(status==="RUNNING"){
+                    $('#model-debug').removeClass('disabled')
+                    $('#model-debug').addClass('blue')
+                    let TrainDuration = runtime(time)
+                    $('#model-duration').text(TrainDuration)
+
+                    
+
+                }
+                if(status!=="RUNNING"){
+                    $('#model-debug').removeClass('blue')
+                    $('#model-debug').addClass('disabled')
+
+                }
+                if(status!=="STOPPED" || status!=="FAILED"){
+                   $('#stop-model-debug').removeClass('disabled')
+                   $('#stop-model-debug').addClass('blue')
+                   $('#model-delete').removeClass('red')
+                   $('#model-delete').addClass('disabled')
+                }
+                if(status=="STOPPED" || status=="FAILED"){
+                   $('#stop-model-debug').removeClass('blue')
+                   $('#stop-model-debug').addClass('disabled')
+                   $('#model-delete').removeClass('disabled')
+                   $('#model-delete').addClass('red')
+                }
             }).fail(function(err) {
                 console.log(err);
             });
         });
     };
-
+    
     // 获取弹窗
     var modal = document.getElementById('imageModal');