From c173b5ecf2ec31365f7e63b1b477b30c3acf35b1 Mon Sep 17 00:00:00 2001
From: zhoupzh <zhoupzh@pcl.ac.cn>
Date: Wed, 29 Dec 2021 18:23:08 +0800
Subject: [PATCH] fix issue

---
 .../repo/modelarts/inferencejob/index.tmpl    |  72 ++++++++-
 .../repo/modelarts/inferencejob/new.tmpl      |   1 +
 .../repo/modelarts/inferencejob/show.tmpl     | 141 +++++++++++++++++-
 3 files changed, 203 insertions(+), 11 deletions(-)

diff --git a/templates/repo/modelarts/inferencejob/index.tmpl b/templates/repo/modelarts/inferencejob/index.tmpl
index 445bcdd58..382bdeb5d 100644
--- a/templates/repo/modelarts/inferencejob/index.tmpl
+++ b/templates/repo/modelarts/inferencejob/index.tmpl
@@ -154,10 +154,10 @@
 
                                     </div>
                                     <!-- 删除任务 -->
-                                    <form class="ui compact buttons" id="delForm-{{.JobID}}" action="{{$.Link}}/{{.JobID}}/del" method="post">
+                                    <div class="ui compact buttons">
                                         {{$.CsrfTokenHtml}}
                                         {{if .CanDel}}
-                                        <a style="padding: 0.5rem 1rem;margin-left:0.2rem" id="model-delete-{{.JobID}}" class="ui basic blue button" onclick="assertDelete(this)" style="border-radius: .28571429rem;">
+                                        <a style="padding: 0.5rem 1rem;margin-left:0.2rem" id="model-delete-{{.JobID}}" class="ui basic blue button" onclick="assertDelete(this,{{.VersionName}},{{.JobID}})" style="border-radius: .28571429rem;">
                                             {{$.i18n.Tr "repo.delete"}}
                                         </a>
                                         {{else}}
@@ -165,7 +165,7 @@
                                             {{$.i18n.Tr "repo.delete"}}
                                         </a>
                                         {{end}}
-                                    </form>
+                                    </div>
                                 </div>
                             </div>
                         </div>
@@ -221,7 +221,7 @@ function loadJobStatus() {
         if(['IMAGE_FAILED','SUBMIT_FAILED','DELETE_FAILED','KILLED','COMPLETED','FAILED','CANCELED','LOST','START_FAILED'].includes(status_text)){
             return 
         }
-        $.get(`/api/v1/repos/${repoPath}/modelarts/train-job/${jobID}?version_name=${versionname}`, (data) => {
+        $.get(`/api/v1/repos/${repoPath}/modelarts/inference-job/${jobID}?version_name=${versionname}`, (data) => {
             const jobID = data.JobID
             const status = data.JobStatus
             const duration = data.JobDuration
@@ -237,4 +237,68 @@ function loadJobStatus() {
         });
     });
 };
+function deleteVersion(version_name,jobID){
+    const url = '/api/v1/repos/{{$.RepoRelPath}}/modelarts/inference-job/'+jobID+'/del_version'
+    $.post(url,{version_name:version_name},(data)=>{
+        if(data.StatusOK===0){
+            location.reload()
+        }
+    }).fail(function(err) {
+        console.log(err);	            
+    });
+}
+function stopVersion(version_name,jobID){
+    const url = '/api/v1/repos/{{$.RepoRelPath}}/modelarts//inference-job/'+jobID+'/stop_version'
+    $.post(url,{version_name:version_name},(data)=>{
+        if(data.StatusOK===0){
+            $('#'+version_name+'-stop').removeClass('blue')
+            $('#'+version_name+'-stop').addClass('disabled')
+            refreshStatus(version_name,jobID)
+        }
+    }).fail(function(err) {
+        console.log(err);	            
+    });
+}
+function refreshStatus(version_name,jobID){
+
+    const url = '/api/v1/repos/{{$.RepoRelPath}}/modelarts/inference-job/'+jobID+'?version_name='+version_name
+    $.get(url,(data)=>{
+        
+        
+        $(`#${jobID}-icon`).attr("class",data.JobStatus)
+        // detail status and duration
+        
+        $(`#${jobID}-text`).text(data.JobStatus)
+
+
+    }).fail(function(err) {
+        console.log(err);
+    });
+
+}
+function assertDelete(obj,version_name,jobID) {
+    if (obj.style.color == "rgb(204, 204, 204)") {
+        return
+    } else {
+        // var delId = obj.parentNode.id
+        flag = 1;
+        $('.ui.basic.modal')
+            .modal({
+                onDeny: function() {
+                    flag = false
+                },
+                onApprove: function() {
+                    // document.getElementById(delId).submit()
+                    deleteVersion(version_name,jobID)
+                    flag = true
+                },
+                onHidden: function() {
+                    if (flag == false) {
+                        $('.alert').html('您已取消操作').removeClass('alert-success').addClass('alert-danger').show().delay(1500).fadeOut();
+                    }
+                }
+            })
+            .modal('show')
+    }
+}
 </script>
diff --git a/templates/repo/modelarts/inferencejob/new.tmpl b/templates/repo/modelarts/inferencejob/new.tmpl
index a959566bd..3a9a910cc 100644
--- a/templates/repo/modelarts/inferencejob/new.tmpl
+++ b/templates/repo/modelarts/inferencejob/new.tmpl
@@ -263,6 +263,7 @@
 {{template "base/footer" .}}
 
 <script>
+    console.log({{.attachments}})
     const RepoLink = {{.RepoLink}}
     const url_href = window.location.pathname.split('create')[0]
     let nameMap,nameList
diff --git a/templates/repo/modelarts/inferencejob/show.tmpl b/templates/repo/modelarts/inferencejob/show.tmpl
index a8024211a..15e0f5815 100644
--- a/templates/repo/modelarts/inferencejob/show.tmpl
+++ b/templates/repo/modelarts/inferencejob/show.tmpl
@@ -170,21 +170,22 @@ td, th {
                     {{.i18n.Tr "repo.cloudbrain"}}
                 </a>
                 <div class="divider"> / </div>
-                <a class="section" href="{{$.RepoLink}}/modelarts/train-job">
+                <a class="section" href="{{$.RepoLink}}/modelarts/inference-job">
                     {{$.i18n.Tr "repo.modelarts.train_job"}}
                 </a>
                 <div class="divider"> / </div>
 				<div class="active section">{{.jobName}}</div>
 			</div>
         </h4>
+        {{with .task}}
         <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">{{$.i18n.Tr "repo.modelarts.train_job.config"}}</a>
-                    <a class="item" data-tab="second" onclick="loadLog()">{{$.i18n.Tr "repo.modelarts.log"}}</a>
-                    <a class="item" data-tab="third" onclick="loadModelFile('','','','init')">{{$.i18n.Tr "repo.model_download"}}</a>
+                    <a class="item" data-tab="second" onclick="loadLog({{.VersionName}})">{{$.i18n.Tr "repo.modelarts.log"}}</a>
+                    <a class="item" data-tab="third" onclick="loadModelFile({{.VersionName}},'','','init')">{{$.i18n.Tr "repo.model_download"}}</a>
                 </div>
-                {{with .task}}
+                
                 <div class="ui tab active" data-tab="first">
                     <div style="padding-top: 10px;">
                         <div class="tab_2_content">
@@ -419,8 +420,21 @@ td, th {
                     </div>
                     
                 </div>
-                {{end}}
+                <div class="ui tab" data-tab="third">
+                    <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>
+        {{end}}
             
                 
             
@@ -451,6 +465,9 @@ td, th {
 {{template "base/footer" .}}
 <script>
 console.log({{.task}})
+$(document).ready(function(){
+    $('.secondary.menu .item').tab();
+});
 let userName
 let repoPath
 let jobID
@@ -479,7 +496,7 @@ function logScroll(version_name) {
     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) => {
+        $.get(`/api/v1/repos/${userName}/${repoPath}/modelarts/inference-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')
@@ -502,7 +519,7 @@ function logScroll(version_name) {
     }
     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) => {
+        $.get(`/api/v1/repos/${userName}/${repoPath}/modelarts/inference-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')
@@ -518,4 +535,114 @@ function logScroll(version_name) {
         });
     }
 }
+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 loadModelFile(version_name,parents,filename,init){
+    parents = parents || ''
+    filename = filename || ''
+    init = init || ''
+    $.get(`/api/v1/repos/${userName}/${repoPath}/modelarts/inference-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)
+}
 </script>
\ No newline at end of file