From d3e26430a8b083bb82f9372710af2589fde4a096 Mon Sep 17 00:00:00 2001
From: zhoupzh <zhoupzh@pcl.ac.cn>
Date: Thu, 11 Nov 2021 17:03:48 +0800
Subject: [PATCH] fix issue

---
 templates/repo/modelarts/trainjob/show.tmpl | 379 +++++++++++++-------
 1 file changed, 258 insertions(+), 121 deletions(-)

diff --git a/templates/repo/modelarts/trainjob/show.tmpl b/templates/repo/modelarts/trainjob/show.tmpl
index 58a639ff5..08dce8c61 100755
--- a/templates/repo/modelarts/trainjob/show.tmpl
+++ b/templates/repo/modelarts/trainjob/show.tmpl
@@ -1,139 +1,269 @@
 {{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);
+}
+.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: 260px;
+    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;
+    color: #8a8e99;
+    font-size: 12px;
+    white-space: nowrap;
+    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 {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+</style>
 <div class="repository">
 {{template "repo/header" .}}
-    <div class="repository new repo ui middle very relaxed page grid">
-        <div class="column">
-            {{template "base/alert" .}}
-            <h4 class="ui top attached header">
-                <div class="ui two column grid">
-                    <div class="column">
-                        {{$.i18n.Tr "repo.modelarts.version_manage"}}
+    <div class="ui container">
+        <h4 class="ui header" id="vertical-segment">
+            <a href="javascript:window.history.back();"><i class="arrow left icon"></i>返回</a>
+        </h4>
+        <div class="ui accordion">
+            <div class="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;">
+                                    <button>创建模型</button>
+                                    <button>修改</button>
+                                    <button>停止</button>
+                                    <button>删除</button>
+                                </div>
+                                <div class="ac-display-inblock title_text acc-margin-bottom">
+                                    <span class="cti-mgRight-sm">2021/11/08 19:35:19</span>
+                                    <span class="cti-mgRight-sm"> 当前版本：V0073</span>
+                                    <span class="cti-mgRight-sm">  父版本：V0070</span>
+                                    <span class="cti-mgRight-sm ac-text-normal title_text">状态
+                                        <span><i id="icon" style="vertical-align: middle;" class=""></i><span id="text" style="margin-left: 0.4em;font-size: 12px;">运行成功</span></span>
+                                    </span>
+                                    <span class="ac-text-normal title_text">运行时间：</span>
+                                    <span class="cti-mgRight-sm uc-accordionTitle-black">01:09:50</span>
+                                    <span data-tooltip="刷新" data-inverted=""><i class="redo icon"></i></span>
+
+                                </div>
+                            </span>
+                        </span>
                     </div>
-                    <div class="column right aligned">
-                        <a href="javascript:window.history.back();">{{svg "octicon-reply" 16}}{{$.i18n.Tr "repo.modelarts.back"}}</a>
+                </div>
+            </div>
+            <div class="content accordion-border">
+                <div class="content-pad">
+                    <div class="ui pointing secondary menu">
+                        <a class="active item" data-tab="first">配置信息</a>
+                        <a class="item" data-tab="second">日志文件</a>
+                        <a class="item" data-tab="third">模型下载</a>
                     </div>
-                </div>     
-            </h4>
+                    <div class="ui tab" data-tab="first">
+                        <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">
+                                                        作业名称
+                                                    </td>
 
-            <div class="ui attached segment">
-                
-                <div class="ui style accordion">
-                    <div class="title active">
-                        <i class="dropdown icon"></i>
-                        {{$.i18n.Tr "repo.modelarts.train_job.version"}}
-                    </div>
-                    <div class="content active">
-                        <div class="ui container">
-                            <div class="ui top attached tabular menu">
-                                    <a class="item active" data-tab="configs">{{$.i18n.Tr "repo.modelarts.train_job.config"}}</a>
-                                    <a class="item logs" data-tab="logs">{{$.i18n.Tr "repo.modelarts.log"}}</a>
-                                    <!-- <a class="item" data-tab="resources">资源占用情况</a> -->
-                                </div>
-                                <div class="ui bottom attached tab segment active" data-tab="configs">
-                                    <div>
-                                        <div class="ui yellow segment">
-                                            <table class="ui celled striped table">
-                                                <thead>
-                                                <tr> <th colspan="2"> {{.i18n.Tr "repo.modelarts.train_job.basic_info"}} </th> </tr>
-                                                </thead>
-                                                <tbody>
-                                                    <tr>
-                                                        <td class="four wide"> {{.i18n.Tr "repo.modelarts.train_job.job_name"}} </td>
-                                                        <td>{{.result.JobName}}</td>
-                                                    </tr>
-                                                    <tr>
-                                                        <td class="four wide"> {{.i18n.Tr "repo.modelarts.train_job.job_status"}} </td>
-                                                        <td>{{.result.Status}}</td>
-                                                    </tr>
-                                                    <tr>
-                                                        <td  class="four wide"> {{.i18n.Tr "repo.modelarts.train_job.version"}} </td>
-                                                        <td>{{.result.VersionName}}</td>
-                                                    </tr>
-                                                    <tr>
-                                                        <td  class="four wide"> {{.i18n.Tr "repo.modelarts.train_job.start_time"}} </td>
-                                                        <td>{{.result.CreateTime}}</td>
-                                                    </tr>
-                                                    <tr>
-                                                        <td class="four wide"> {{.i18n.Tr "repo.modelarts.train_job.dura_time"}} </td>
-                                                        <td>{{.result.TrainJobDuration}}</td>
-                                                    </tr>
-                                                    <tr>
-                                                        <td  class="four wide"> {{.i18n.Tr "repo.modelarts.train_job.description"}} </td>
-                                                        <td>{{.result.Description}}</td>
-                                                    </tr>
-                                                </tbody>
-                                            </table>
-                                        </div>
-                                        <div class="ui green segment">
-                                            <table class="ui celled striped table">
-                                                <thead>
-                                                <tr> <th colspan="2"> {{.i18n.Tr "repo.modelarts.train_job.parameter_setting_info"}} </th> </tr>
-                                                </thead>
-                                                <tbody>
-                                                    <tr>
-                                                        <td class="four wide"> {{.i18n.Tr "repo.modelarts.train_job.AI_driver"}} </td>
-                                                        <td>{{.result.EngineName}} | {{.result.EngineVersion}}</td>
-                                                    </tr>
-                                                    <tr>
-                                                        <td class="four wide"> {{.i18n.Tr "repo.modelarts.train_job.start_file"}}</td>
-                                                        <td>{{.result.BootFileUrl}}</td>
-                                                    </tr>
-                                                    <tr>
-                                                        <td  class="four wide"> {{.i18n.Tr "repo.modelarts.train_job.dataset"}} </td>
-                                                        <td>{{.result.DatasetName}}</td>
-                                                    </tr>
-                                                    <tr>
-                                                        <td  class="four wide"> {{.i18n.Tr "repo.modelarts.train_job.run_parameter"}} </td>
-                                                        <td>{{.result.Parameter}}</td>
-                                                    </tr>
-                                                </tbody>
-                                            </table>
-                                        </div>
-                                        <div class="ui blue segment">
-                                            <table class="ui celled striped table">
-                                                <thead>
-                                                <tr> <th colspan="2"> {{.i18n.Tr "repo.modelarts.train_job.resource_setting_info"}} </th> </tr>
-                                                </thead>
-                                                <tbody>
-                                                    <tr>
-                                                        <td class="four wide"> {{.i18n.Tr "repo.modelarts.train_job.resource_pool"}} </td>
-                                                        <td>{{.result.PoolName}}</td>
+                                                    <td class="ti-text-form-content">
+                                                        <div class="text-span text-span-w">
+                                                                trainjob-d672 | job15b681bc 
+                                                        </div>
+                                                    </td>
+                                                </tr>
+                                                <tr class="ti-no-ng-animate">
+                                                        <td class="ti-no-ng-animate ti-text-form-label">
+                                                            作业名称
+                                                        </td>
+    
+                                                        <td class="ti-text-form-content">
+                                                            <div class="text-span text-span-w">
+                                                                    trainjob-d672 | job15b681bc 
+                                                            </div>
+                                                        </td>
+                                                </tr>
+                                                <tr class="ti-no-ng-animate">
+                                                    <td class="ti-no-ng-animate ti-text-form-label">
+                                                                作业名称
+                                                    </td>
+        
+                                                    <td class="ti-text-form-content">
+                                                        <div class="text-span text-span-w">
+                                                                        trainjob-d672 | job15b681bc 
+                                                        </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">
+                                                            作业名称
+                                                        </td>
+    
+                                                        <td class="ti-text-form-content">
+                                                            <div class="text-span text-span-w">
+                                                                    trainjob-d672 | job15b681bc 
+                                                            </div>
+                                                        </td>
                                                     </tr>
-                                                    <tr>
-                                                        <td class="four wide"> {{.i18n.Tr "repo.modelarts.train_job.amount_of_compute_node"}}</td>
-                                                        <td>{{.result.WorkServerNum}}</td>
+                                                    <tr class="ti-no-ng-animate">
+                                                            <td class="ti-no-ng-animate ti-text-form-label">
+                                                                作业名称
+                                                            </td>
+        
+                                                            <td class="ti-text-form-content">
+                                                                <div class="text-span text-span-w">
+                                                                        trainjob-d672 | job15b681bc 
+                                                                </div>
+                                                            </td>
                                                     </tr>
-                                                    <tr>
-                                                        <td  class="four wide"> {{.i18n.Tr "repo.modelarts.train_job.NAS_mount_path"}} </td>
-                                                        <td>{{.result.NasMountPath}}</td>
+                                                    <tr class="ti-no-ng-animate">
+                                                        <td class="ti-no-ng-animate ti-text-form-label">
+                                                                    作业名称
+                                                        </td>
+            
+                                                        <td class="ti-text-form-content">
+                                                            <div class="text-span text-span-w">
+                                                                            trainjob-d672 | job15b681bc 
+                                                            </div>
+                                                        </td>
                                                     </tr>
                                                 </tbody>
                                             </table>
                                         </div>
-                                    </div>
                                 </div>
-                                <div class="ui bottom attached tab segment" data-tab="logs">
-                                    <div class="ui message" style="display: none;">
-                                        <div class="header">
-                                        </div>
-                                    </div>
-                                        <div class="ui top attached segment" style="background: #f0f0f0;">
-                                            <div class="center aligned">
-                                                <label>{{$.i18n.Tr "repo.modelarts.log"}}:</label>
-                                                <span class="fitted file_name">{{.log_file_name}}</span>
-                                                <input type="hidden" name="file_name" value={{.log_file_name}}>
-                                                <input type="hidden"  name="start_line" value={{.log.StartLine}}>
-                                                <input type="hidden"  name="end_line" value={{.log.EndLine}}>
-                                            </div>
-                                        </div>
-                                        <div class="ui attached segment log" style="height: 300px !important; overflow: auto;">
-                                            <pre>{{.log.Content}}</pre>
-                                        </div>
-                                        
-                                   </div>
+                            </div>
+                            
+                        </div>
+                    </div>
+                    <div class="ui tab" data-tab="second">
+                        <div>
+                            <div class="ui message" style="display: none;">
+                                <div class="header"></div>
+                            </div>
+                            <div class="ui top attached segment" style="background: #f0f0f0;">
+                                <div class="center aligned">
+                                    <label>{{$.i18n.Tr "repo.modelarts.log"}}:</label>
+                                        <span class="fitted file_name">{{.log_file_name}}</span>
+                                        <input type="hidden" name="file_name" value={{.log_file_name}}>
+                                        <input type="hidden"  name="start_line" value={{.log.StartLine}}>
+                                        <input type="hidden"  name="end_line" value={{.log.EndLine}}>
                                 </div>
+                            </div>
+                            <div class="ui attached segment log" style="height: 300px !important; overflow: auto;">
+                                <pre>{{.log.Content}}</pre>
+                            </div>
+                                        
                         </div>
+                        
                     </div>
+                    <div class="ui tab" data-tab="third">
+                        <div class="content-pad">
+                            asdasd
+                        </div>
+                    </div>
+
                 </div>
             </div>
         </div>
@@ -143,8 +273,15 @@
 
 <script>
     $('.menu .item').tab()
-    $('.ui.style.accordion').accordion();
+    // $('.ui.style.accordion').accordion();
 
+    // $(document).ready(function(){
+    // $('.ui.accordion').accordion({selector:{trigger:'.icon'}});
+    // });
+    $(document).ready(function(){
+        $('.secondary.menu .item').tab();
+    });
+    
     var userName
     var repoPath
     var jobID