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: e3df303fc4
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from 'e3df303fc4'
${ noResults }
aiforge/templates/repo/modelarts/trainjob/show.tmpl

741 lines
37 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 !important;

  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.     width: 450px;

  107.     overflow: hidden;

  108.     text-overflow: ellipsis;

  109.     white-space: nowrap;

  110. }

  111. .redo-color{

  112.     color: #3291F8;

  113. }

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

  115.     margin-right: 10px;

  116.     padding-right: 11px;

  117.     text-decoration: none!important;

  118.     color: #526ecc;

  119.     cursor: pointer;

  120.     display: inline-block;

  121.     -moz-user-select: none;

  122.     -webkit-user-select: none;

  123.     -ms-user-select: none;

  124.     -khtml-user-select: none;

  125.     user-select: none;

  126.     position: relative;

  127. }

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

  129.     content: "";

  130.     display: inline-block;

  131.     position: absolute;

  132.     height: 12px;

  133.     right: 0;

  134.     top: 50%;

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

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

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

  138.     transform: translateY(-6px);

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

  140. }

  141. .text-width80{

  142.     width: 100px;

  143.     line-height: 30px;

  144. }

  145. .border-according{

  146.     border: 1px solid #dfe1e6;

  147. }

  148. .disabled {

  149.         cursor: default;

  150.         pointer-events: none;

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

  152.         opacity: .45 !important;

  153. }

  154. .pad20{

  155.     

  156.     border:0px !important;

  157. }

  158. .model_file_bread{

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

  160.     padding-left: 1rem;

  161.     padding-top: 0.5rem ;

  162. }

  163. </style>

  164. <div class="repository">

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

  166.     <div class="ui container">

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

  168.             <div class="ui breadcrumb">

  169.                 <a class="section" href="{{.RepoLink}}/cloudbrain">

  170.                     {{.i18n.Tr "repo.cloudbrain"}}

  171.                 </a>

  172.                 <div class="divider"> / </div>

  173.                 <a class="section" href="{{$.RepoLink}}/modelarts/train-job">

  174.                     {{$.i18n.Tr "repo.modelarts.train_job"}}

  175.                 </a>

  176.                 <div class="divider"> / </div>

  177. 				<div class="active section">{{.jobName}}</div>

  178. 			</div>

  179.         </h4>

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

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

  182.             <div class="{{if eq $k 0}}active{{end}} title padding0">

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

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

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

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

  187.                             <span>

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

  189.                                     {{$.CsrfTokenHtml}}

  190.                                     {{if .CanDebug}}

  191.                                     <a class="ti-action-menu-item" href="{{$.RepoLink}}/modelarts/train-job/{{.JobID}}/create_version?version_name={{.VersionName}}">{{$.i18n.Tr "repo.modelarts.modify"}}</a>

  192.                                     {{else}}

  193.                                     <a class="ti-action-menu-item disabled" href="{{$.RepoLink}}/modelarts/train-job/{{.JobID}}/create_version?version_name={{.VersionName}}">{{$.i18n.Tr "repo.modelarts.modify"}}</a>

  194.                                     {{end}}

  195.                                     {{$.CsrfTokenHtml}}

  196.                                     {{if .CanDel}}

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

  198.                                     {{else}}

  199.                                     <a class="ti-action-menu-item disabled" id="{{.VersionName}}-stop" onclick="stopVersion({{.VersionName}})">{{$.i18n.Tr "repo.stop"}}</a>

  200.                                     {{end}}

  201.                                     

  202.                                     {{$.CsrfTokenHtml}}

  203.                                     {{if .CanDel}}

  204.                                     <a class="ti-action-menu-item"  onclick="deleteVersion({{.VersionName}})" style="color: #FF4D4F;">{{$.i18n.Tr "repo.delete"}}</a>

  205.                                     {{else}}

  206.                                     <a class="ti-action-menu-item disabled"  onclick="deleteVersion({{.VersionName}})" style="color: #FF4D4F;">{{$.i18n.Tr "repo.delete"}}</a>

  207.                                     {{end}}

  208.                                 </div>

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

  210.                                     

  211.                                     <span class="cti-mgRight-sm">{{TimeSinceUnix1 .Cloudbrain.CreatedUnix}}</span>   

  212.                                     <span class="cti-mgRight-sm"> {{$.i18n.Tr "repo.modelarts.current_version"}}：{{.VersionName}}</span>

  213.                                     <span class="cti-mgRight-sm">  {{$.i18n.Tr "repo.modelarts.parent_version"}}：{{.PreVersionName}}</span>

  214.                                     <span class="cti-mgRight-sm">{{$.i18n.Tr "repo.modelarts.status"}}：

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

  216.                                     </span>

  217.                                     <span class="cti-mgRight-sm">{{$.i18n.Tr "repo.modelarts.train_job.dura_time"}}：</span>

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

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

  220. 

  221.                                 </div>

  222.                             </span>

  223.                         </span>

  224.                     </div>

  225.                 </div>

  226.             </div>

  227.             <div class="{{if eq $k 0}}active{{end}} content">

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

  229.                     <div class="ui pointing secondary menu" style="border-bottom: 1px solid rgba(34,36,38,.15);">

  230.                         

  231.                         <a class="active item" data-tab="first{{$k}}">{{$.i18n.Tr "repo.modelarts.train_job.config"}}</a>

  232.                         <a class="item" data-tab="second{{$k}}" onclick="loadLog({{.VersionName}})">{{$.i18n.Tr "repo.modelarts.log"}}</a>

  233.                         <a class="item" data-tab="third{{$k}}" onclick="loadModelFile({{.VersionName}},'','','init')">{{$.i18n.Tr "repo.model_download"}}</a>

  234.                     </div>

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

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

  237.                             <div class="tab_2_content">

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

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

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

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

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

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

  244.                                                         {{$.i18n.Tr "repo.cloudbrain_task"}}

  245.                                                     </td>

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

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

  248.                                                             {{.JobName}}

  249.                                                         </div>

  250.                                                     </td>

  251.                                                 </tr>

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

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

  254.                                                         {{$.i18n.Tr "repo.modelarts.status"}}

  255.                                                     </td>

  256. 

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

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

  259.                                                             {{.Status}}

  260.                                                         </div>

  261.                                                     </td>

  262.                                                 </tr>

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

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

  265.                                                         {{$.i18n.Tr "repo.modelarts.run_version"}}

  266.                                                     </td>

  267.         

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

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

  270.                                                             {{.VersionName}}

  271.                                                         </div>

  272.                                                     </td>

  273.                                                 </tr>

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

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

  276.                                                         {{$.i18n.Tr "repo.modelarts.train_job.start_time"}} 

  277.                                                     </td>

  278.         

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

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

  281.                                                             <span style="font-size: 12px;" class="">{{TimeSinceUnix1 .Cloudbrain.CreatedUnix}}</span>

  282.                                                         </div>

  283.                                                     </td>

  284.                                                 </tr>

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

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

  287.                                                         {{$.i18n.Tr "repo.modelarts.train_job.dura_time"}} 

  288.                                                     </td>

  289.         

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

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

  292.                                                             {{.TrainJobDuration}}

  293.                                                         </div>

  294.                                                     </td>

  295.                                                 </tr>

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

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

  298.                                                             {{$.i18n.Tr "repo.modelarts.train_job.standard"}} 

  299.                                                     </td>

  300.         

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

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

  303.                                                             {{.FlavorName}}

  304.                                                         </div>

  305.                                                     </td>

  306.                                                 </tr>

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

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

  309.                                                         {{$.i18n.Tr "repo.modelarts.train_job.compute_node"}} 

  310.                                                     </td>

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

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

  313.                                                             {{.WorkServerNumber}}

  314.                                                         </div>

  315.                                                     </td>

  316.                                                 </tr>

  317.                                             </tbody>

  318.                                         </table>

  319.                                     </div>

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

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

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

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

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

  325.                                                             {{$.i18n.Tr "repo.modelarts.train_job.AI_driver"}} 

  326.                                                         </td>

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

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

  329.                                                             {{.EngineName}}

  330.                                                             </div>

  331.                                                         </td>

  332.                                                     </tr>

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

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

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

  336.                                                         </td>

  337.     

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

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

  340.                                                                 {{.BranchName}}

  341.                                                             </div>

  342.                                                         </td>

  343.                                                     </tr>

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

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

  346.                                                             {{$.i18n.Tr "repo.modelarts.train_job.start_file"}}

  347.                                                         </td>

  348.             

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

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

  351.                                                                 {{.BootFile}}

  352.                                                             </div>

  353.                                                         </td>

  354.                                                     </tr>

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

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

  357.                                                             {{$.i18n.Tr "repo.modelarts.train_job.train_dataset"}}   

  358.                                                         </td>

  359.                 

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

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

  362.                                                                 {{.DatasetName}}

  363.                                                             </div>

  364.                                                         </td>

  365.                                                     </tr>

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

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

  368.                                                             {{$.i18n.Tr "repo.modelarts.train_job.run_parameter"}} 

  369.                                                         </td>

  370.                 

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

  372.                                                             <div class="text-span text-span-w" title="{{.Parameters}}">

  373.                                                                 {{.Parameters}}

  374.                                                             </div>

  375.                                                         </td>

  376.                                                     </tr>

  377.                                                     </tr>

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

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

  380.                                                             {{$.i18n.Tr "repo.modelarts.train_job.description"}}  

  381.                                                         </td>

  382.                 

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

  384.                                                             <div class="text-span text-span-w" title="{{.Cloudbrain.Description}}">

  385.                                                                 {{.Cloudbrain.Description}}

  386.                                                             </div>

  387.                                                         </td>

  388.                                                     </tr>

  389.                                                 </tbody>

  390.                                             </table>

  391.                                         </div>

  392.                                 </div>

  393.                             </div>

  394.                             

  395.                         </div>

  396.                     </div>

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

  398.                         <div>

  399.                             <div class="ui message message{{.VersionName}}" style="display: none;">

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

  401.                             </div>

  402.                             <div class="ui attached  log" onscroll="logScroll({{.VersionName}})" id="log{{.VersionName}}" style="height: 300px !important; overflow: auto;">

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

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

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

  406.                             </div>

  407.                                         

  408.                         </div>

  409.                         

  410.                     </div>

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

  412.                         <input type="hidden" name="model{{.VersionName}}" value="-1">

  413.                         <input type="hidden" name="modelback{{.VersionName}}" value="-1">

  414.                         <div class='ui breadcrumb model_file_bread' id='file_breadcrumb{{.VersionName}}'>

  415.                             <div class="active section">{{.VersionName}}</div>

  416.                             <div class="divider"> / </div>

  417. 

  418.                         </div>

  419.                         <div id="dir_list{{.VersionName}}">

  420.                             

  421.                         </div>

  422.                     </div>

  423. 

  424.                 </div>

  425.             </div>

  426.         </div>

  427.         {{end}} {{template "base/paginate" .}}

  428.     </div>

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

  430.     <div id="deletemodel">

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

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

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

  434.             </div>

  435.     

  436.             <div class="content">

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

  438.             </div>

  439.             <div class="actions">

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

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

  442.                 </div>

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

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

  445.                 </div>

  446.             </div>

  447.         </div>

  448.     </div>

  449. </div>

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

  451. 

  452. <script>

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

  454. 

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

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

  457.     });

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

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

  460.     });

  461.     

  462.     let userName

  463.     let repoPath

  464.     let jobID

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

  466.         let url = window.location.href;

  467.         let urlArr = url.split('/')

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

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

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

  471.     })

  472.     function stopBubbling(e) {

  473.         e = window.event || e;

  474.         if (e.stopPropagation) {

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

  476.         } else {

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

  478.         }

  479.     }

  480.     let timeid = window.setInterval(loadJobStatus, 30000);

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

  482.     

  483.     function renderSize(value){

  484.         if(null==value||value==''){

  485.             return "0 Bytes";

  486.         }

  487.         var unitArr = new Array("Bytes","KB","MB","GB","TB","PB","EB","ZB","YB");

  488.         var index=0;

  489.         var srcsize = parseFloat(value);

  490.         index=Math.floor(Math.log(srcsize)/Math.log(1024));

  491.         var size =srcsize/Math.pow(1024,index);

  492.         size=size.toFixed(0);//保留的小数位数

  493.         return size+unitArr[index];

  494.     }

  495.     function loadJobStatus() {

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

  497.             const jobID = job.dataset.jobid;

  498.             const repoPath = job.dataset.repopath;

  499.             const versionname = job.dataset.version

  500.             // ['IMAGE_FAILED','SUBMIT_FAILED','DELETE_FAILED','KILLED','COMPLETED','FAILED','CANCELED','LOST','START_FAILED']

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

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

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

  504.             //     return

  505.             // }

  506.             let status = $(`#${versionname}-status-span`).text()

  507.             

  508.             if(['IMAGE_FAILED','SUBMIT_FAILED','DELETE_FAILED','KILLED','COMPLETED','FAILED','CANCELED','LOST','START_FAILED'].includes(status)){

  509.                 return 

  510.             }

  511.             let stopArray=["KILLED","FAILED","START_FAILED","KILLING","COMPLETED"]

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

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

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

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

  516.                 // detail status and duration

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

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

  519.                 if(stopArray.includes(data.JobStatus)){

  520.                     $('#'+versionname+'-stop').addClass('disabled')

  521.                 }

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

  523.                 console.log(err);

  524.             });

  525.         });

  526.     };

  527. 

  528.     function refreshStatus(version_name){

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

  530.             // header status and duration

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

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

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

  534.             // detail status and duration

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

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

  537.             loadLog(version_name)

  538. 

  539. 

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

  541.             console.log(err);

  542.         });

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

  544.     }

  545.     function deleteVersion(version_name){

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

  547.         let flag = 1;

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

  549.                 onDeny: function() {

  550.                     flag = false

  551.                 },

  552.                 onApprove: function() {

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

  554.                         if(data.VersionListCount===0){

  555.                             location.href=`/${userName}/${repoPath}/modelarts/train-job`

  556.                         }else{

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

  558.                         }

  559.                         

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

  561.                         console.log(err);

  562.                     });

  563.                     flag = true

  564.                 },

  565.                 onHidden: function() {

  566.                     if (flag == false) {

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

  568.                     }

  569.                 }

  570.             })

  571.         .modal('show')

  572.         

  573.     }

  574.     function stopVersion(version_name){

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

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

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

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

  579.                 refreshStatus(version_name)

  580.             }

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

  582.             console.log(err);	            

  583.         });

  584.     }

  585.     function loadLog(version_name){

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

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

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

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

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

  591.             console.log(err);

  592.         });

  593.     }

  594.     function loadModelFile(version_name,parents,filename,init){

  595.         parents = parents || ''

  596.         filename = filename || ''

  597.         init = init || ''

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

  599.                 $(`#dir_list${version_name}`).empty() 

  600.                 renderDir(data,version_name)

  601.                 if(init==="init"){

  602.                     $(`input[name=model${version_name}]`).val("")

  603.                     $(`input[name=modelback${version_name}]`).val(version_name)

  604.                     $(`#file_breadcrumb${version_name}`).empty()

  605.                     let htmlBread = ""

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

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

  608.                     $(`#file_breadcrumb${version_name}`).append(htmlBread)

  609.                 }else{

  610.                     renderBrend(version_name,parents,filename,init)

  611.                 }

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

  613.                 console.log(err,version_name);

  614.             });

  615.         

  616.     }

  617.     function renderBrend(version_name,parents,filename,init){

  618.         if(init=="folder"){

  619.             let htmlBrend = ""

  620.             let sectionName=$(`#file_breadcrumb${version_name} .active.section`).text()

  621.             let parents1 = $(`input[name=model${version_name}]`).val()

  622.             let filename1 = $(`input[name=modelback${version_name}]`).val()

  623.             if(parents1===""){

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

  625.             }else{

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

  627.             }

  628.             

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

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

  631.             $(`#file_breadcrumb${version_name}`).append(htmlBrend)

  632.             $(`input[name=model${version_name}]`).val(parents)

  633.             $(`input[name=modelback${version_name}]`).val(filename)

  634.         }else{

  635.             $(`input[name=model${version_name}]`).val(parents)

  636.             $(`input[name=modelback${version_name}]`).val(filename)

  637.             $(`#file_breadcrumb${version_name} a.section:contains(${filename})`).nextAll().remove()

  638.             $(`#file_breadcrumb${version_name} a.section:contains(${filename})`).replaceWith(`<div class='active section'>${filename}</div>`)

  639.             $(`#file_breadcrumb${version_name} div.section:contains(${filename})`).append("<div class='divider'> / </div>")

  640.         }

  641.         

  642.     }

  643.     function renderDir(data,version_name){

  644.         let html=""

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

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

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

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

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

  650.             html += '<tbody>'

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

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

  653.                 let dirs_size = renderSize(data.Dirs[i].Size)

  654.                 html += "<tr>"

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

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

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

  658.                 html += "</span>"

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

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

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

  662.                 }else{

  663.                     html += `<a href="${location.href}/model_download?version_name=${version_name}&file_name=${data.Dirs[i].FileName}&parent_dir=${data.Dirs[i].ParenDir}">`

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

  665.                 }

  666.                 html += '</a>'

  667.                 html += "</span>"

  668.                 html += "</td>"

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

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

  671.                     html += "<span class='truncate has-emoji'></span>"

  672.                 }else{

  673.                     html += "<span class='truncate has-emoji'>"+ `${dirs_size}` + "</span>"

  674.                 }

  675.                 

  676.                 html += "</td>"

  677. 

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

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

  680.                 html += "</td>"

  681.                 html += "</tr>"

  682.                 

  683.             }

  684.             html += "</tbody>"

  685.             html += "</table>"

  686.             html += "</div>"

  687.             html += "</div>"

  688.             html += "</div>"

  689.             html += "</div>"

  690.             $(`#dir_list${version_name}`).append(html)

  691.     }

  692.     

  693.     function logScroll(version_name) {

  694.        

  695.         let container = document.querySelector(`#log${version_name}`)

  696.         let scrollTop = container.scrollTop

  697.         let scrollHeight = container.scrollHeight

  698.         let clientHeight = container.clientHeight

  699.         let scrollLeft = container.scrollLeft

  700.         if((parseInt(scrollTop)  + clientHeight == scrollHeight || parseInt(scrollTop)  + clientHeight +1 == scrollHeight || parseInt(scrollTop)  + clientHeight - 1 == scrollHeight) && (scrollLeft===0)){

  701.             let end_line = $(`#log${version_name} input[name=end_line]`).val()

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

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

  704.                     $(`.message${version_name} #header`).text('您已翻阅至日志底部')

  705.                     $(`.message${version_name}`).css('display', 'block')

  706.                     setTimeout(function(){

  707.                         $(`.message${version_name}`).css('display', 'none')     

  708.                     }, 1000)

  709.                 }else{

  710.                     if(end_line===data.EndLine){

  711.                         return

  712.                     }

  713.                     else{

  714.                         $(`#log${version_name} input[name=end_line]`).val(data.EndLine)

  715.                         $(`#log${version_name}`).append('<pre>' + data.Content) 

  716.                     }

  717.                     

  718.                 }

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

  720.                 console.log(err);

  721.             });

  722.         }

  723.         if(scrollTop == 0 && scrollLeft==0){

  724.             let start_line = $(`#log${version_name} input[name=start_line]`).val()

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

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

  727.                     $(`.message${version_name} #header`).text('您已翻阅至日志顶部')

  728.                     $(`.message${version_name}`).css('display', 'block')

  729.                     setTimeout(function(){

  730.                         $(`.message${version_name}`).css('display', 'none')     

  731.                     }, 1000)

  732.                 }else{

  733.                     $(`#log${version_name} input[name=start_line]`).val(data.StartLine)   //如果变动就改变所对应的值

  734.                     $(`#log${version_name}`).prepend('<pre>' + data.Content)

  735.                 }

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

  737.                 console.log(err);

  738.             });

  739.         }

  740.     }

  741. </script>