OpenI
/
aiforge
Not watched
1
0
Fork 0
Code
Releases 128 Wiki Activity
Issues 0 Pull Requests 0 Datasets Model Cloudbrain
You can not select more than 25 topics Topics must start with a chinese character,a letter or number, can include dashes ('-') and can be up to 35 characters long.
Tree: c4e9610929
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from 'c4e9610929'
${ noResults }
aiforge/templates/repo/modelarts/trainjob/show.tmpl

739 lines
34 kB
Raw Blame History 

  1. {{template "base/head" .}}

  2. <style>

  3. .according-panel-heading{

  4.     box-sizing: border-box;

  5.     padding: 8px 16px;

  6.     color: #252b3a;

  7.     background-color: #f2f5fc;

  8.     line-height: 1.5;

  9.     cursor: pointer;

  10.     -moz-user-select: none;

  11.     -webkit-user-select: none;

  12.     -ms-user-select: none;

  13.     -khtml-user-select: none;

  14.     user-select: none;

  15. }

  16. .accordion-panel-title {

  17.     margin-top: 0;

  18.     margin-bottom: 0;

  19.     color: #252b3a;

  20. }

  21. .accordion-panel-title-content{

  22.     vertical-align: middle;

  23.     display: inline-block;

  24.     width: calc(100% - 32px);

  25.     cursor: default;

  26. }

  27. .acc-margin-bottom {

  28.     margin-bottom: 5px;

  29. }

  30. .title_text {

  31.     font-size: 12px;

  32. }

  33. .ac-display-inblock {

  34.     display: inline-block;

  35. }

  36. .cti-mgRight-sm {

  37.     margin-right: 8px;

  38. }

  39. .ac-text-normal {

  40.     font-size: 14px;

  41.     color: #575d6c;

  42. }

  43. .uc-accordionTitle-black {

  44.     color: #333;

  45. }

  46. .accordion-border{

  47.     border:1px solid #cce2ff;

  48. }

  49. .padding0{

  50.     padding: 0 !important;

  51. }

  52. .content-pad{

  53.     padding: 15px 35px;

  54. }

  55. .content-margin{

  56.     margin:10px 5px ;

  57. }

  58. .tab_2_content {

  59.     min-height: 360px;

  60.     margin-left: 10px;

  61. }

  62. .ac-grid {

  63.     display: block;

  64.     *zoom: 1;

  65. }

  66. .ac-grid-col {

  67.     float: left;

  68.     width: 100%;

  69. }

  70. .ac-grid-col2 .ac-grid-col {

  71.     width: 50%;

  72. }

  73. .ti-form {

  74.     text-align: left;

  75.     max-width: 100%;

  76.     vertical-align: middle;

  77. }

  78. .ti-form>tbody {

  79.     font-size: 12px;

  80. }

  81. .ti-form>tbody, .ti-form>tbody>tr {

  82.     vertical-align: inherit;

  83. }

  84. .ti-text-form-label {

  85.     

  86.     padding-bottom: 20px;

  87.     padding-right: 20px;

  88.     color: #8a8e99;

  89.     font-size: 12px;

  90.     white-space: nowrap;

  91.     width: 80px;

  92.     line-height: 30px;

  93. }

  94. .ti-text-form-content{

  95.     line-height: 30px;

  96.     padding-bottom: 20px;

  97. }

  98. .ti-form>tbody>tr>td {

  99.     vertical-align: top;

  100.     white-space: normal;

  101. }

  102. td, th {

  103.     padding: 0;

  104. }

  105. .ac-grid-col .text-span {

  106.     overflow: hidden;

  107.     text-overflow: ellipsis;

  108.     white-space: nowrap;

  109. }

  110. .redo-color{

  111.     color: #3291F8;

  112. }

  113. .ti-action-menu-item:not(:last-child){

  114.     margin-right: 10px;

  115.     padding-right: 11px;

  116.     text-decoration: none!important;

  117.     color: #526ecc;

  118.     cursor: pointer;

  119.     display: inline-block;

  120.     -moz-user-select: none;

  121.     -webkit-user-select: none;

  122.     -ms-user-select: none;

  123.     -khtml-user-select: none;

  124.     user-select: none;

  125.     position: relative;

  126. }

  127. .ti-action-menu-item:not(:last-child):after {

  128.     content: "";

  129.     display: inline-block;

  130.     position: absolute;

  131.     height: 12px;

  132.     right: 0;

  133.     top: 50%;

  134.     -webkit-transform: translateY(-6px);

  135.     -ms-transform: translateY(-6px);

  136.     -o-transform: translateY(-6px);

  137.     transform: translateY(-6px);

  138.     border-right: 1px solid #dfe1e6;

  139. }

  140. .text-width80{

  141.     width: 100px;

  142.     line-height: 30px;

  143. }

  144. .border-according{

  145.     border: 1px solid #dfe1e6;

  146. }

  147. .disabled {

  148.         cursor: default;

  149.         pointer-events: none;

  150.         color: rgba(0,0,0,.6) !important;

  151.         opacity: .45 !important;

  152. }

  153. .pad20{

  154.     

  155.     border:0px !important;

  156. }

  157. .model_file_bread{

  158.     margin-bottom: -0.5rem !important;

  159.     padding-left: 1rem;

  160.     padding-top: 0.5rem ;

  161. }

  162. </style>

  163. <div class="repository">

  164. {{template "repo/header" .}}

  165.     <div class="ui container">

  166.         <h4 class="ui header" id="vertical-segment">

  167.             <a href="javascript:window.history.back();"><i class="arrow left icon"></i>返回</a>

  168.         </h4>

  169.         {{range $k ,$v := .version_list_task}}

  170.         <div class="ui accordion border-according"  id="accordion{{.VersionName}}" data-repopath="{{$.RepoRelPath}}" data-jobid="{{.JobID}}" data-version="{{.VersionName}}">

  171.             <div class="title padding0">

  172.                 <div class="according-panel-heading">

  173.                     <div class="accordion-panel-title">

  174.                         <i class="dropdown icon"></i>

  175.                         <span class="accordion-panel-title-content">

  176.                             <span>

  177.                                 <div style="float: right;">

  178.                                     <a class="ti-action-menu-item {{if ne .Status "COMPLETED"}}disabled {{end}}">创建模型</a>

  179.                                     <a class="ti-action-menu-item" href="{{$.RepoLink}}/modelarts/train-job/{{.JobID}}/create_version?version_name={{.VersionName}}">修改</a>

  180.                                     <a class="ti-action-menu-item {{if eq .Status "KILLED" "FAILED" "START_FAILED" "KILLING" "COMPLETED"}}disabled {{end}}" id="{{.VersionName}}-stop" onclick="stopVersion({{.VersionName}})">停止</a>

  181.                                     <a class="ti-action-menu-item " href="{{$.Link}}/models?version_name={{.VersionName}}" target="_blank">模型下载</a>

  182.                                     <a class="ti-action-menu-item"  onclick="deleteVersion({{.VersionName}})" style="color: #FF4D4F;">删除</a>

  183.                                 </div>

  184.                                 <div class="ac-display-inblock title_text acc-margin-bottom">

  185.                                     

  186.                                     <span class="cti-mgRight-sm">2021/11/08 19:35:19</span>

  187.                                     <span class="cti-mgRight-sm"> 当前版本：{{.VersionName}}</span>

  188.                                     <span class="cti-mgRight-sm">  父版本：{{.FatherVersionName}}</span>

  189.                                     <span class="cti-mgRight-sm ac-text-normal title_text">状态：

  190.                                         <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>

  191.                                     </span>

  192.                                     <span class="ac-text-normal title_text">运行时间：</span>

  193.                                     <span class="cti-mgRight-sm uc-accordionTitle-black" id="{{.VersionName}}-duration-span">{{.TrainJobDuration}}</span>

  194.                                     <span data-tooltip="刷新" style="cursor: pointer;" data-inverted="" onclick="refreshStatus({{.VersionName}})"><i class="redo icon redo-color"></i></span>

  195. 

  196.                                 </div>

  197.                             </span>

  198.                         </span>

  199.                     </div>

  200.                 </div>

  201.             </div>

  202.             <div class="content accordion-border">

  203.                 <div class="content-pad">

  204.                     <div class="ui pointing secondary menu">

  205.                         <a class="active item" data-tab="first{{$k}}">配置信息</a>

  206.                         <a class="item" data-tab="second{{$k}}" onclick="loadLog({{.VersionName}})">日志文件</a>

  207.                         <a class="item" data-tab="third{{$k}}" onclick="loadModelFile({{.VersionName}},'','true')" target="_blank">模型下载</a>

  208.                     </div>

  209.                     <div class="ui tab active" data-tab="first{{$k}}">

  210.                         <div style="padding-top: 10px;">

  211.                             <div class="tab_2_content">

  212.                                 <div class="ac-grid ac-grid-col2">

  213.                                     <div class="ac-grid-col">

  214.                                         <table class="ti-form">

  215.                                             <tbody class="ti-text-form">

  216.                                                 <tr class="ti-no-ng-animate">

  217.                                                     <td class="ti-no-ng-animate ti-text-form-label text-width80">

  218.                                                         任务名称

  219.                                                     </td>

  220. 

  221.                                                     <td class="ti-text-form-content">

  222.                                                         <div class="text-span text-span-w">

  223.                                                                 {{.JobName}}

  224.                                                         </div>

  225.                                                     </td>

  226.                                                 </tr>

  227.                                                 <tr class="ti-no-ng-animate">

  228.                                                     <td class="ti-no-ng-animate ti-text-form-label text-width80">

  229.                                                         状态

  230.                                                     </td>

  231. 

  232.                                                     <td class="ti-text-form-content">

  233.                                                         <div class="text-span text-span-w" id="{{.VersionName}}-status">

  234.                                                                 {{.Status}}

  235.                                                         </div>

  236.                                                     </td>

  237.                                                 </tr>

  238.                                                 <tr class="ti-no-ng-animate">

  239.                                                     <td class="ti-no-ng-animate ti-text-form-label text-width80">

  240.                                                         运行版本

  241.                                                     </td>

  242.         

  243.                                                     <td class="ti-text-form-content">

  244.                                                         <div class="text-span text-span-w">

  245.                                                                 {{.VersionName}}

  246.                                                         </div>

  247.                                                     </td>

  248.                                                 </tr>

  249.                                                 <tr class="ti-no-ng-animate">

  250.                                                     <td class="ti-no-ng-animate ti-text-form-label text-width80">

  251.                                                         开始时间

  252.                                                     </td>

  253.         

  254.                                                     <td class="ti-text-form-content">

  255.                                                         <div class="text-span text-span-w">

  256.                                                                 空白

  257.                                                         </div>

  258.                                                     </td>

  259.                                                 </tr>

  260.                                                 <tr class="ti-no-ng-animate">

  261.                                                     <td class="ti-no-ng-animate ti-text-form-label text-width80">

  262.                                                         运行时间

  263.                                                     </td>

  264.         

  265.                                                     <td class="ti-text-form-content">

  266.                                                         <div class="text-span text-span-w" id="{{.VersionName}}-duration">

  267.                                                             {{.TrainJobDuration}}

  268.                                                         </div>

  269.                                                     </td>

  270.                                                 </tr>

  271.                                                 <tr class="ti-no-ng-animate">

  272.                                                     <td class="ti-no-ng-animate ti-text-form-label text-width80">

  273.                                                         规格

  274.                                                     </td>

  275.         

  276.                                                     <td class="ti-text-form-content">

  277.                                                         <div class="text-span text-span-w">

  278.                                                             {{.FlavorName}}

  279.                                                         </div>

  280.                                                     </td>

  281.                                                 </tr>

  282.                                                 <tr class="ti-no-ng-animate">

  283.                                                     <td class="ti-no-ng-animate ti-text-form-label text-width80">

  284.                                                         计算节点

  285.                                                     </td>

  286.         

  287.                                                     <td class="ti-text-form-content">

  288.                                                         <div class="text-span text-span-w">

  289.                                                             {{.WorkServerNumber}}

  290.                                                         </div>

  291.                                                     </td>

  292.                                                 </tr>

  293.                                             </tbody>

  294.                                         </table>

  295.                                     </div>

  296.                                     <div class="ac-grid-col">

  297.                                             <table class="ti-form">

  298.                                                 <tbody class="ti-text-form">

  299.                                                     <tr class="ti-no-ng-animate">

  300.                                                         <td class="ti-no-ng-animate ti-text-form-label text-width80">

  301.                                                             AI引擎

  302.                                                         </td>

  303.     

  304.                                                         <td class="ti-text-form-content">

  305.                                                             <div class="text-span text-span-w">

  306.                                                             {{.EngineName}}

  307.                                                             </div>

  308.                                                         </td>

  309.                                                     </tr>

  310.                                                     <tr class="ti-no-ng-animate">

  311.                                                         <td class="ti-no-ng-animate ti-text-form-label text-width80">

  312.                                                             {{$.i18n.Tr "repo.modelarts.code_version"}}

  313.                                                         </td>

  314.     

  315.                                                         <td class="ti-text-form-content">

  316.                                                             <div class="text-span text-span-w">

  317.                                                                 {{.BranchName}}

  318.                                                             </div>

  319.                                                         </td>

  320.                                                     </tr>

  321.                                                     <tr class="ti-no-ng-animate">

  322.                                                         <td class="ti-no-ng-animate ti-text-form-label text-width80">

  323.                                                             启动文件

  324.                                                         </td>

  325.             

  326.                                                         <td class="ti-text-form-content">

  327.                                                             <div class="text-span text-span-w">

  328.                                                                     {{.BootFile}}

  329.                                                             </div>

  330.                                                         </td>

  331.                                                     </tr>

  332.                                                     <tr class="ti-no-ng-animate">

  333.                                                         <td class="ti-no-ng-animate ti-text-form-label text-width80">

  334.                                                             训练数据集

  335.                                                         </td>

  336.                 

  337.                                                         <td class="ti-text-form-content">

  338.                                                             <div class="text-span text-span-w">

  339.                                                                 {{.DatasetName}}

  340.                                                             </div>

  341.                                                         </td>

  342.                                                     </tr>

  343.                                                     <tr class="ti-no-ng-animate">

  344.                                                         <td class="ti-no-ng-animate ti-text-form-label text-width80">

  345.                                                             运行参数

  346.                                                         </td>

  347.                 

  348.                                                         <td class="ti-text-form-content">

  349.                                                             <div class="text-span text-span-w">

  350.                                                                 {{.Parameters}}

  351.                                                             </div>

  352.                                                         </td>

  353.                                                     </tr>

  354.                                                     <tr class="ti-no-ng-animate">

  355.                                                         <td class="ti-no-ng-animate ti-text-form-label text-width80">

  356.                                                             训练输出位置

  357.                                                         </td>

  358.                 

  359.                                                         <td class="ti-text-form-content">

  360.                                                             <div class="text-span text-span-w">

  361.                                                                 {{.TrainUrl}}

  362.                                                             </div>

  363.                                                         </td>

  364.                                                     </tr>

  365.                                                     <tr class="ti-no-ng-animate">

  366.                                                         <td class="ti-no-ng-animate ti-text-form-label text-width80">

  367.                                                             描述

  368.                                                         </td>

  369.                 

  370.                                                         <td class="ti-text-form-content">

  371.                                                             <div class="text-span text-span-w">

  372.                                                                 <!-- {{.TrainUrl}} -->

  373.                                                             </div>

  374.                                                         </td>

  375.                                                     </tr>

  376.                                                 </tbody>

  377.                                             </table>

  378.                                         </div>

  379.                                 </div>

  380.                             </div>

  381.                             

  382.                         </div>

  383.                     </div>

  384.                     <div class="ui tab" data-tab="second{{$k}}">

  385.                         <div>

  386.                             <div class="ui message" style="display: none;">

  387.                                 <div id="header"></div>

  388.                             </div>

  389.                             <div class="ui top attached segment" style="background: #f0f0f0;">

  390.                                 <div class="center aligned">

  391.                                     <label>{{$.i18n.Tr "repo.modelarts.log"}}:</label>

  392.                                         <!-- <span class="fitted file_name">{{.}}</span> -->

  393.                                         <!-- <input type="hidden" name="file_name" value>

  394.                                         <input type="hidden"  name="start_line" value>

  395.                                         <input type="hidden"  name="end_line" value> -->

  396.                                         

  397.                                 </div>

  398.                             </div>

  399.                             <div class="ui attached segment log" style="height: 300px !important; overflow: auto;">

  400.                                 <input type="hidden" class="version_name" name="version_name" value={{.VersionName}}>

  401.                                 <input type="hidden"  name="end_line" value>

  402.                                 <input type="hidden"  name="start_line" value>

  403.                                 <pre id="log_file{{.VersionName}}"></pre>

  404.                             </div>

  405.                                         

  406.                         </div>

  407.                         

  408.                     </div>

  409.                     <div class="ui tab" data-tab="third{{$k}}">

  410.                         <div class='ui breadcrumb model_file_bread' id='file_breadcrumb'>

  411. 

  412. 

  413.                         </div>

  414.                         <div id="dir_list">

  415.                             

  416.                         </div>

  417.                     </div>

  418. 

  419.                 </div>

  420.             </div>

  421.         </div>

  422.         {{end}}

  423.     </div>

  424.     <!-- 确认模态框 -->

  425.     <div id="deletemodel">

  426.         <div class="ui basic modal">

  427.             <div class="ui icon header">

  428.                 <i class="trash icon"></i> 删除任务

  429.             </div>

  430.     

  431.             <div class="content">

  432.                 <p>你确认删除该任务么？此任务一旦删除不可恢复。</p>

  433.             </div>

  434.             <div class="actions">

  435.                 <div class="ui red basic inverted cancel button">

  436.                     <i class="remove icon"></i> 取消操作

  437.                 </div>

  438.                 <div class="ui green basic inverted ok button">

  439.                     <i class="checkmark icon"></i> 确定操作

  440.                 </div>

  441.             </div>

  442.         </div>

  443.     </div>

  444. </div>

  445. {{template "base/footer" .}}

  446. 

  447. <script>

  448.     console.log({{.version_list_task}})

  449.     

  450.     $('.menu .item').tab()

  451.     // $('.ui.style.accordion').accordion();

  452. 

  453.     $(document).ready(function(){

  454.     $('.ui.accordion').accordion({selector:{trigger:'.icon'}});

  455.     });

  456.     $(document).ready(function(){

  457.         $('.secondary.menu .item').tab();

  458.     });

  459.     

  460.     var userName

  461.     var repoPath

  462.     var jobID

  463.     $(document).ready(function(){

  464.         var url = window.location.href;

  465.         var urlArr = url.split('/')

  466.         userName = urlArr.slice(-5)[0]

  467.         repoPath = urlArr.slice(-4)[0]

  468.         jobID = urlArr.slice(-1)[0]

  469.     })

  470.     function stopBubbling(e) {

  471.         e = window.event || e;

  472.         if (e.stopPropagation) {

  473.             e.stopPropagation();      //阻止事件 冒泡传播

  474.         } else {

  475.             e.cancelBubble = true;   //ie兼容

  476.         }

  477.     }

  478.     // var timeid = window.setInterval(refreshStatus(version_name), 30000);

  479.     // document.ready(refreshStatus(version_name))

  480.     var timeid = window.setInterval(loadJobStatus, 10000);

  481.     $(document).ready(loadJobStatus);

  482. 

  483.     function loadJobStatus() {

  484.         $(".ui.accordion.border-according").each((index, job) => {

  485.             

  486.             const jobID = job.dataset.jobid;

  487.             const repoPath = job.dataset.repopath;

  488.             const versionname = job.dataset.version

  489.             if (job.textContent.trim() == 'IMAGE_FAILED' || job.textContent.trim() == 'SUBMIT_FAILED' || job.textContent.trim() == 'DELETE_FAILED'

  490.                 || job.textContent.trim() == 'KILLED' || job.textContent.trim() == 'COMPLETED' || job.textContent.trim() == 'FAILED'

  491.                 || job.textContent.trim() == 'CANCELED' || job.textContent.trim() == 'LOST') {

  492.                 return

  493.             }

  494. 

  495.             $.get(`/api/v1/repos/${repoPath}/modelarts/train-job/${jobID}?version_name=${versionname}`, (data) => {

  496.                 // const jobID = data.JobID

  497.                 // const status = data.JobStatus

  498.                 // const duration = data.JobDuration

  499.                 $(`#${versionname}-duration-span`).text(data.JobDuration)

  500.                 $(`#${versionname}-status-span span`).text(data.JobStatus)

  501.                 $(`#${versionname}-status-span i`).attr("class",data.JobStatus)

  502.                 // detail status and duration

  503.                 $('#'+versionname+'-duration').text(data.JobDuration)

  504.                 $('#'+versionname+'-status').text(data.JobStatus)

  505.                 // $('#duration-'+jobID).text(duration)

  506.                 // if (status != job.textContent.trim()) {

  507.                 //     $('#' + jobID+'-icon').removeClass().addClass(status)

  508.                 //     $('#' + jobID+ '-text').text(status)

  509. 

  510.                 // }

  511.             }).fail(function(err) {

  512.                 console.log(err);

  513.             });

  514.         });

  515.     };

  516. 

  517.     function refreshStatus(version_name){

  518.         $.get(`/api/v1/repos/${userName}/${repoPath}/modelarts/train-job/${jobID}?version_name=${version_name}`,(data)=>{

  519.             console.log(data)

  520.             // header status and duration

  521.             $(`#${version_name}-duration-span`).text(data.JobDuration)

  522.             $(`#${version_name}-status-span span`).text(data.JobStatus)

  523.             $(`#${version_name}-status-span i`).attr("class",data.JobStatus)

  524.             // detail status and duration

  525.             $('#'+version_name+'-duration').text(data.JobDuration)

  526.             $('#'+version_name+'-status').text(data.JobStatus)

  527. 

  528. 

  529.         }).fail(function(err) {

  530.             console.log(err);

  531.         });

  532.         stopBubbling(arguments.callee.caller.arguments[0])

  533.     }

  534.     function deleteVersion(version_name){

  535.         stopBubbling(arguments.callee.caller.arguments[0])

  536.         let flag = 1;

  537.         $('.ui.basic.modal').modal({

  538.                 onDeny: function() {

  539.                     flag = false

  540.                 },

  541.                 onApprove: function() {

  542.                     $.post(`/api/v1/repos/${userName}/${repoPath}/modelarts/train-job/${jobID}/del_version`,{version_name:version_name},(data)=>{

  543.                         $('#accordion'+version_name).remove()

  544.                     }).fail(function(err) {

  545.                         console.log(err);

  546.                     });

  547.                     flag = true

  548.                 },

  549.                 onHidden: function() {

  550.                     if (flag == false) {

  551.                         $('.alert').html('您已取消操作').removeClass('alert-success').addClass('alert-danger').show().delay(1500).fadeOut();

  552.                     }

  553.                 }

  554.             })

  555.         .modal('show')

  556.         

  557.     }

  558.     function stopVersion(version_name){

  559.         stopBubbling(arguments.callee.caller.arguments[0])

  560.         $.post(`/api/v1/repos/${userName}/${repoPath}/modelarts/train-job/${jobID}/stop_version`,{version_name:version_name},(data)=>{

  561.             if(data.StatusOK===0){

  562.                 $('#'+version_name+'-stop').addClass('disabled')

  563.                 refreshStatus(version_name)

  564.             }

  565.         }).fail(function(err) {

  566.             console.log(err);	            

  567.         });

  568.     }

  569.     function loadLog(version_name){

  570.         $.get(`/api/v1/repos/${userName}/${repoPath}/modelarts/train-job/${jobID}/log?version_name=${version_name}&lines=20&order=asc`, (data) => {

  571.             $('input[name=end_line]').val(data.EndLine)

  572.             $('input[name=start_line]').val(data.StartLine)

  573.             $(`#log_file${version_name}`).text(data.Content)

  574.         }).fail(function(err) {

  575.             console.log(err);

  576.         });

  577.     }

  578.     function loadModelFile(version_name,parents,filename){

  579.         console.log("")

  580.         parents = parents || ''

  581.         filename = filename || ''

  582.         $.get(`/api/v1/repos/${userName}/${repoPath}/modelarts/train-job/${jobID}/model_list?version_name=${version_name}&parentDir=${parents}`, (data) => {

  583.                 console.log("=====parents======",data,version_name,parents)

  584.                 if(!filename){

  585.                     console.log("bread")

  586.                     $("#dir_list").empty() 

  587.                     renderDir(data,version_name)

  588.                     renderBrend(version_name,parents,filename,false)

  589.                 }else{

  590.                     $("#dir_list").empty() 

  591.                     renderDir(data,version_name)

  592.                     renderBrend(version_name,parents,filename,true)

  593.                 }

  594.                 

  595.             

  596.             }).fail(function(err) {

  597.                 console.log(err,version_name);

  598.             });

  599.         // if(!parents){

  600.         //     $.get(`/api/v1/repos/${userName}/${repoPath}/modelarts/train-job/${jobID}/model_list?version_name=${version_name}`, (data) => {

  601.         //         console.log("===========",data,version_name)

  602.         //         $("#dir_list").empty() 

  603.         //         renderDir(data,version_name)

  604.             

  605.         //     }).fail(function(err) {

  606.         //         console.log(err);

  607.         //     });

  608.         // }else{

  609.         //     console.log("-----else-----",version_name)

  610.             

  611.         // }

  612.         

  613.     }

  614.     let parentsArr=[]

  615.     function renderBrend(version_name,parents,filename,flag){

  616.         if(flag){

  617.             parentsArr.push(parents)

  618.             console.log("parents parentsARR",parents,parentsArr)

  619.             

  620.             let htmlBrend = ""

  621.             if($('#file_breadcrumb .active').length>0){

  622.                 let parents1 = parentsArr.shift()

  623.                 let sectionName=$('#file_breadcrumb .active.section').html()

  624.                 $('#file_breadcrumb .active.section').replaceWith(`<a class='section' onclick="loadModelFile('${version_name}','${parents1}')">${sectionName}</a>`)

  625.                 htmlBrend += `<div class='active section'>${filename}</div>`

  626. 

  627. 

  628.             }else{

  629.                 

  630.                 htmlBrend += `<div class='active section'>${version_name}</div>`

  631.                 

  632.             }

  633.             console.log("parentsARR",parentsArr)

  634.             

  635.             htmlBrend += "<div class='divider'> / </div>" 

  636.             $('#file_breadcrumb').append(htmlBrend)

  637. 

  638.         }else{

  639.             if(!parents){

  640.                 $('#file_breadcrumb').empty()

  641.                 let htmlBread = ""

  642.                 htmlBread += `<div class='active section'>${version_name}</div>`

  643.                 htmlBread += "<div class='divider'> / </div>" 

  644.                 $('#file_breadcrumb').append(htmlBread)

  645.             }else{

  646.                 

  647.                 $(`a.section:contains(${parents})`).nextAll().remove()

  648.                 $(`a.section:contains(${parents})`).replaceWith(`<div class='active section'>${parents}</div>`)

  649.                 $(`a.section:contains(${parents})`).append("<div class='divider'> / </div>")

  650. 

  651.             }

  652.             

  653.         }

  654.         

  655.     }

  656.     function renderDir(data,version_name){

  657.         let html=""

  658.             html += "<div class='ui grid' style='margin:0;'>"

  659.             html += "<div class='row' style='padding: 0;'>"

  660.             html += "<div class='ui sixteen wide column' style='padding:1rem;'>"

  661.             html += "<div class='dir list'>"

  662.             html += "<table id='repo-files-table' class='ui single line table pad20'>"

  663.             html += '<tbody>'

  664.             // html += "</tbody>"

  665.             for(let i=0;i<data.Dirs.length;i++){

  666.                 html += "<tr>"

  667.                 html += "<td class='name six wid'>"

  668.                 html += "<span class='truncate'>"

  669.                 html += "<span class='octicon octicon-file-directory'>"

  670.                 html += "</span>"

  671.                 if(data.Dirs[i].IsDir){

  672.                     html += `<a  onclick="loadModelFile('${version_name}','${data.Dirs[i].ParenDir}','${data.Dirs[i].FileName}')">`

  673.                     html += "<span class='fitted'><i class='folder icon' width='16' height='16' aria-hidden='true'></i>" + data.Dirs[i].FileName + "</span>"

  674.                 }else{

  675.                     html += `<a  href='${location.href}/download_model?parentDir=&fileName=${data.Dirs[i].FileName}&jobName=${data.task.JobName}'>`

  676.                     html += "<span class='fitted'><i class='file icon' width='16' height='16' aria-hidden='true'></i>" + data.Dirs[i].FileName + "</span>"

  677.                 }

  678.                 html += '</a>'

  679.                 html += "</span>"

  680.                 html += "</td>"

  681.                 html += "<td class='message seven wide'>"

  682.                 html += "<span class='truncate has-emoji'>" + data.Dirs[i].Size + "</span>"

  683.                 html += "</td>"

  684. 

  685.                 html += "<td class='text right age three wide'>"

  686.                 html += "<span class='truncate has-emoji'>" + data.Dirs[i].ModTime + "</span>"

  687.                 html += "</td>"

  688.                 html += "</tr>"

  689.                 

  690.             }

  691.             html += "</tbody>"

  692.             html += "</table>"

  693.             html += "</div>"

  694.             html += "</div>"

  695.             html += "</div>"

  696.             html += "</div>"

  697.             $("#dir_list").append(html)

  698.     }

  699.     $(".log").scroll(function () {

  700.         var scrollTop = $(this)[0].scrollTop;   // 滚动距离

  701.         var scrollHeight = $(this)[0].scrollHeight;  // 文档高度

  702.         var divHeight = $(this).height();   // 可视区高度

  703.         let version_name=$(this).find('input[name=version_name]').val()

  704.         if(parseInt(scrollTop) + divHeight + 18 == scrollHeight){

  705.             var end_line = $('input[name=end_line]').val()

  706.             $.get(`/api/v1/repos/${userName}/${repoPath}/modelarts/train-job/${jobID}/log?version_name=${version_name}&base_line=${end_line}&order=desc`, (data) => {

  707.                 if (data.Lines == 0){

  708.                     $('#header').text('您已翻阅至日志底部')

  709.                     $('.message').css('display', 'block')

  710.                     setTimeout(function(){

  711.                         $('.message').css('display', 'none')     

  712.                     }, 1000)

  713.                 }else{

  714.                     $('input[name=end_line]').val(data.EndLine)

  715.                     $('.log').append('<pre>' + data.Content) 

  716.                 }

  717.             }).fail(function(err) {

  718.                 console.log(err);

  719.             });

  720.         }

  721.         if(scrollTop == 0){

  722.             var start_line = $('input[name=start_line]').val()

  723.             $.get(`/api/v1/repos/${userName}/${repoPath}/modelarts/train-job/${jobID}/log?version_name=${version_name}&base_line=${start_line}&order=asc`, (data) => {

  724.                 if (data.Lines == 0){

  725.                     $('#header').text('您已翻阅至日志顶部')

  726.                     $('.message').css('display', 'block')

  727.                     setTimeout(function(){

  728.                         $('.message').css('display', 'none')     

  729.                     }, 1000)

  730.                 }else{

  731.                     $('input[name=start_line]').val(data.StartLine)   //如果变动就改变所对应的值

  732.                     $(".log").prepend('<pre>' + data.Content)

  733.                 }

  734.             }).fail(function(err) {

  735.                 console.log(err);

  736.             });

  737.         }

  738.     })

  739. </script>