From ef4fc4ad84fad74d314ed63868eefdff6a4f0769 Mon Sep 17 00:00:00 2001
From: zhoupzh <zhoupzh@pcl.ac.cn>
Date: Fri, 22 Apr 2022 17:02:57 +0800
Subject: [PATCH] fix issue

---
 templates/repo/modelarts/trainjob/show.tmpl | 81 +++++++++++++--------
 web_src/less/openi.less                     | 17 ++++-
 2 files changed, 66 insertions(+), 32 deletions(-)

diff --git a/templates/repo/modelarts/trainjob/show.tmpl b/templates/repo/modelarts/trainjob/show.tmpl
index 88cabb4ab..92f98939e 100755
--- a/templates/repo/modelarts/trainjob/show.tmpl
+++ b/templates/repo/modelarts/trainjob/show.tmpl
@@ -249,7 +249,7 @@ td, th {
                     <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 log_bottom" data-tab="second{{$k}}" data-version="{{.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}}">
@@ -422,10 +422,10 @@ td, th {
                     <div class="ui tab" data-tab="second{{$k}}">
                         <div style="position: relative;">
                             <span>
-                                <a title="滚动到顶部" style="position: absolute; right: -32px;cursor: pointer;" id="log_top"><i class="icon-to-top"></i></a>
+                                <a title="滚动到顶部" style="position: absolute; right: -32px;cursor: pointer;" class="log_top" data-version="{{.VersionName}}"><i class="icon-to-top"></i></a>
                             </span>
                             <span>
-                                <a title="滚动到底部" style="position: absolute; bottom: 10px;right: -32px;cursor: pointer;" id="log_bottom"><i class="icon-to-bottom"></i></a>
+                                <a title="滚动到底部" style="position: absolute; bottom: 10px;right: -32px;cursor: pointer;" class="log_bottom" data-version="{{.VersionName}}"><i class="icon-to-bottom"></i></a>
                             </span>
                             <div class="ui message message{{.VersionName}}" style="display: none;">
                                 <div id="header"></div>
@@ -867,9 +867,12 @@ td, th {
                 console.log(err);
             });
         }
-        if(scrollTop == 0 && scrollLeft==0){
+
+        if(scrollTop == 1 && 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) => {
+                console.log("11111")
                 if (data.Lines == 0){
                     $(`.message${version_name} #header`).text('您已翻阅至日志顶部')
                     $(`.message${version_name}`).css('display', 'block')
@@ -905,37 +908,53 @@ td, th {
         }, 1)
     }
 
-    $('#log_top').click(function(){
+    $('.log_top').click(function(){
         let logContentDom = document.querySelector('.log')
         if(!logContentDom)
             return
-        scrollAnimation(logContentDom, logContentDom.scrollTop, 0);
+        let version_name = $('.log_top').data('version')
+        $(`#log_file${version_name}`).siblings('pre').remove()
+        $.get(`/api/v1/repos/${userName}/${repoPath}/modelarts/train-job/${jobID}/log?version_name=${version_name}&base_line=&lines=50&order=asc`, (data) => {
+            
+            $(`#log${version_name} input[name=end_line]`).val(data.EndLine)   //如果变动就改变所对应的值
+            $(`#log${version_name} input[name=start_line]`).val(data.StartLine)
+            $(`#log${version_name}`).prepend('<pre>' + data.Content)
+            scrollAnimation(logContentDom, logContentDom.scrollTop, 0);
+        })
+
     })
-    $('#log_bottom').click(function(){
+    $('.log_bottom').click(function(){
+        
         let logContentDom = document.querySelector('.log')
-			if(!logContentDom)
-				return
-			//如果内容撑大到可以滚动，则触发滚动
-			// if(!['10','11','12'].includes(context.taskInfo.statusCode)){
-            //     context.getLogContent(0, context.lines, 'goDown')
-            // }
-            if(logContentDom.scrollHeight > logContentDom.clientHeight){
-                console.log("1111")
-                scrollAnimation(logContentDom, logContentDom.scrollTop, logContentDom.scrollHeight - logContentDom.clientHeight);
-            }
-			else{
-                logScroll(version_name)
-                logContentDom.scrollTo(0,logContentDom.scrollTop-1);
-            }
-			// if(this.checkCurrentCanScrollBottom()){
-			// 	// this.goDown();
-				
-				
-			// 	this.scrollAnimation(logContentDom, logContentDom.scrollTop, logContentDom.scrollHeight - logContentDom.clientHeight);
-			// }else{
-			// 	//如果内容不足，则往后追加内容
-			// 	this.goDown();
-			// 	logContentDom.scrollTo(0,logContentDom.scrollTop-1);
-			// }
+        let version_name = $('.log_bottom').data('version')
+        console.log($(`#log${version_name}`).siblings('pre'))
+        $(`#log_file${version_name}`).siblings('pre').remove()
+        $.get(`/api/v1/repos/${userName}/${repoPath}/modelarts/train-job/${jobID}/log?version_name=${version_name}&base_line=&lines=50&order=desc`, (data) => {
+            
+            $(`#log${version_name} input[name=end_line]`).val(data.EndLine)   //如果变动就改变所对应的值
+            $(`#log${version_name} input[name=start_line]`).val(data.StartLine)
+            $(`#log${version_name}`).append('<pre>' + data.Content)
+            $.get(`/api/v1/repos/${userName}/${repoPath}/modelarts/train-job/${jobID}/log?version_name=${version_name}&base_line=${data.EndLine}&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);
+            });
+            scrollAnimation(logContentDom, logContentDom.scrollTop+1, logContentDom.scrollHeight - logContentDom.clientHeight);
+        })
     })
 </script>
diff --git a/web_src/less/openi.less b/web_src/less/openi.less
index c195bac38..2a7d86665 100644
--- a/web_src/less/openi.less
+++ b/web_src/less/openi.less
@@ -248,7 +248,22 @@ footer .column{margin-bottom:0!important; padding-bottom:0!important;}
 .icon-bind{background-position: -550px -52px;}
 .icon-unbind{background-position: -568px -52px;}
 .CREATING, .STOPPING, .DELETING, .STARTING, i.WAITING ,.INIT,.KILLING{display:inline-block;background-image:url('/img/loading.gif');background-repeat:no-repeat;width:16px;height:16px;background-size:16px 16px;margin-right:5px;}
-
+.icon-to-top{
+	background:url("/img/icons.svg");
+	background-position: -540px -208px;
+	width: 30px;
+	height: 30px;
+	display: inline-block;
+	cursor: pointer;
+}
+.icon-to-bottom{
+	background:url("/img/icons.svg");
+	background-position: -574px -208px;
+	width: 30px;
+	height: 30px;
+	display: inline-block;
+	cursor: pointer;
+}
 i.COMPLETED,i.SUCCEEDED{display:inline-block;width:18px;height:18px;background:url("/img/icons.svg");background-position: -496px -52px;background-position: -441px -52px;}
 .text_over{
 	overflow: hidden;