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.

show.tmpl 34 kB

3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
3 years ago
3 years ago
3 years ago
4 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
3 years ago
4 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739
  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. padding-bottom: 20px;
  86. padding-right: 20px;
  87. color: #8a8e99;
  88. font-size: 12px;
  89. white-space: nowrap;
  90. width: 80px;
  91. line-height: 30px;
  92. }
  93. .ti-text-form-content{
  94. line-height: 30px;
  95. padding-bottom: 20px;
  96. }
  97. .ti-form>tbody>tr>td {
  98. vertical-align: top;
  99. white-space: normal;
  100. }
  101. td, th {
  102. padding: 0;
  103. }
  104. .ac-grid-col .text-span {
  105. overflow: hidden;
  106. text-overflow: ellipsis;
  107. white-space: nowrap;
  108. }
  109. .redo-color{
  110. color: #3291F8;
  111. }
  112. .ti-action-menu-item:not(:last-child){
  113. margin-right: 10px;
  114. padding-right: 11px;
  115. text-decoration: none!important;
  116. color: #526ecc;
  117. cursor: pointer;
  118. display: inline-block;
  119. -moz-user-select: none;
  120. -webkit-user-select: none;
  121. -ms-user-select: none;
  122. -khtml-user-select: none;
  123. user-select: none;
  124. position: relative;
  125. }
  126. .ti-action-menu-item:not(:last-child):after {
  127. content: "";
  128. display: inline-block;
  129. position: absolute;
  130. height: 12px;
  131. right: 0;
  132. top: 50%;
  133. -webkit-transform: translateY(-6px);
  134. -ms-transform: translateY(-6px);
  135. -o-transform: translateY(-6px);
  136. transform: translateY(-6px);
  137. border-right: 1px solid #dfe1e6;
  138. }
  139. .text-width80{
  140. width: 100px;
  141. line-height: 30px;
  142. }
  143. .border-according{
  144. border: 1px solid #dfe1e6;
  145. }
  146. .disabled {
  147. cursor: default;
  148. pointer-events: none;
  149. color: rgba(0,0,0,.6) !important;
  150. opacity: .45 !important;
  151. }
  152. .pad20{
  153. border:0px !important;
  154. }
  155. .model_file_bread{
  156. margin-bottom: -0.5rem !important;
  157. padding-left: 1rem;
  158. padding-top: 0.5rem ;
  159. }
  160. </style>
  161. <div class="repository">
  162. {{template "repo/header" .}}
  163. <div class="ui container">
  164. <h4 class="ui header" id="vertical-segment">
  165. <a href="javascript:window.history.back();"><i class="arrow left icon"></i>返回</a>
  166. </h4>
  167. {{range $k ,$v := .version_list_task}}
  168. <div class="ui accordion border-according" id="accordion{{.VersionName}}" data-repopath="{{$.RepoRelPath}}" data-jobid="{{.JobID}}" data-version="{{.VersionName}}">
  169. <div class="title padding0">
  170. <div class="according-panel-heading">
  171. <div class="accordion-panel-title">
  172. <i class="dropdown icon"></i>
  173. <span class="accordion-panel-title-content">
  174. <span>
  175. <div style="float: right;">
  176. <a class="ti-action-menu-item {{if ne .Status "COMPLETED"}}disabled {{end}}">创建模型</a>
  177. <a class="ti-action-menu-item" href="{{$.RepoLink}}/modelarts/train-job/{{.JobID}}/create_version?version_name={{.VersionName}}">修改</a>
  178. <a class="ti-action-menu-item {{if eq .Status "KILLED" "FAILED" "START_FAILED" "KILLING" "COMPLETED"}}disabled {{end}}" id="{{.VersionName}}-stop" onclick="stopVersion({{.VersionName}})">停止</a>
  179. <a class="ti-action-menu-item " href="{{$.Link}}/models?version_name={{.VersionName}}" target="_blank">模型下载</a>
  180. <a class="ti-action-menu-item" onclick="deleteVersion({{.VersionName}})" style="color: #FF4D4F;">删除</a>
  181. </div>
  182. <div class="ac-display-inblock title_text acc-margin-bottom">
  183. <span class="cti-mgRight-sm">2021/11/08 19:35:19</span>
  184. <span class="cti-mgRight-sm"> 当前版本:{{.VersionName}}</span>
  185. <span class="cti-mgRight-sm"> 父版本:{{.FatherVersionName}}</span>
  186. <span class="cti-mgRight-sm ac-text-normal title_text">状态:
  187. <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>
  188. </span>
  189. <span class="ac-text-normal title_text">运行时间:</span>
  190. <span class="cti-mgRight-sm uc-accordionTitle-black" id="{{.VersionName}}-duration-span">{{.TrainJobDuration}}</span>
  191. <span data-tooltip="刷新" style="cursor: pointer;" data-inverted="" onclick="refreshStatus({{.VersionName}})"><i class="redo icon redo-color"></i></span>
  192. </div>
  193. </span>
  194. </span>
  195. </div>
  196. </div>
  197. </div>
  198. <div class="content accordion-border">
  199. <div class="content-pad">
  200. <div class="ui pointing secondary menu">
  201. <a class="active item" data-tab="first{{$k}}">配置信息</a>
  202. <a class="item" data-tab="second{{$k}}" onclick="loadLog({{.VersionName}})">日志文件</a>
  203. <a class="item" data-tab="third{{$k}}" onclick="loadModelFile({{.VersionName}},'','true')" target="_blank">模型下载</a>
  204. </div>
  205. <div class="ui tab active" data-tab="first{{$k}}">
  206. <div style="padding-top: 10px;">
  207. <div class="tab_2_content">
  208. <div class="ac-grid ac-grid-col2">
  209. <div class="ac-grid-col">
  210. <table class="ti-form">
  211. <tbody class="ti-text-form">
  212. <tr class="ti-no-ng-animate">
  213. <td class="ti-no-ng-animate ti-text-form-label text-width80">
  214. 任务名称
  215. </td>
  216. <td class="ti-text-form-content">
  217. <div class="text-span text-span-w">
  218. {{.JobName}}
  219. </div>
  220. </td>
  221. </tr>
  222. <tr class="ti-no-ng-animate">
  223. <td class="ti-no-ng-animate ti-text-form-label text-width80">
  224. 状态
  225. </td>
  226. <td class="ti-text-form-content">
  227. <div class="text-span text-span-w" id="{{.VersionName}}-status">
  228. {{.Status}}
  229. </div>
  230. </td>
  231. </tr>
  232. <tr class="ti-no-ng-animate">
  233. <td class="ti-no-ng-animate ti-text-form-label text-width80">
  234. 运行版本
  235. </td>
  236. <td class="ti-text-form-content">
  237. <div class="text-span text-span-w">
  238. {{.VersionName}}
  239. </div>
  240. </td>
  241. </tr>
  242. <tr class="ti-no-ng-animate">
  243. <td class="ti-no-ng-animate ti-text-form-label text-width80">
  244. 开始时间
  245. </td>
  246. <td class="ti-text-form-content">
  247. <div class="text-span text-span-w">
  248. 空白
  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. 运行时间
  255. </td>
  256. <td class="ti-text-form-content">
  257. <div class="text-span text-span-w" id="{{.VersionName}}-duration">
  258. {{.TrainJobDuration}}
  259. </div>
  260. </td>
  261. </tr>
  262. <tr class="ti-no-ng-animate">
  263. <td class="ti-no-ng-animate ti-text-form-label text-width80">
  264. 规格
  265. </td>
  266. <td class="ti-text-form-content">
  267. <div class="text-span text-span-w">
  268. {{.FlavorName}}
  269. </div>
  270. </td>
  271. </tr>
  272. <tr class="ti-no-ng-animate">
  273. <td class="ti-no-ng-animate ti-text-form-label text-width80">
  274. 计算节点
  275. </td>
  276. <td class="ti-text-form-content">
  277. <div class="text-span text-span-w">
  278. {{.WorkServerNumber}}
  279. </div>
  280. </td>
  281. </tr>
  282. </tbody>
  283. </table>
  284. </div>
  285. <div class="ac-grid-col">
  286. <table class="ti-form">
  287. <tbody class="ti-text-form">
  288. <tr class="ti-no-ng-animate">
  289. <td class="ti-no-ng-animate ti-text-form-label text-width80">
  290. AI引擎
  291. </td>
  292. <td class="ti-text-form-content">
  293. <div class="text-span text-span-w">
  294. {{.EngineName}}
  295. </div>
  296. </td>
  297. </tr>
  298. <tr class="ti-no-ng-animate">
  299. <td class="ti-no-ng-animate ti-text-form-label text-width80">
  300. {{$.i18n.Tr "repo.modelarts.code_version"}}
  301. </td>
  302. <td class="ti-text-form-content">
  303. <div class="text-span text-span-w">
  304. {{.BranchName}}
  305. </div>
  306. </td>
  307. </tr>
  308. <tr class="ti-no-ng-animate">
  309. <td class="ti-no-ng-animate ti-text-form-label text-width80">
  310. 启动文件
  311. </td>
  312. <td class="ti-text-form-content">
  313. <div class="text-span text-span-w">
  314. {{.BootFile}}
  315. </div>
  316. </td>
  317. </tr>
  318. <tr class="ti-no-ng-animate">
  319. <td class="ti-no-ng-animate ti-text-form-label text-width80">
  320. 训练数据集
  321. </td>
  322. <td class="ti-text-form-content">
  323. <div class="text-span text-span-w">
  324. {{.DatasetName}}
  325. </div>
  326. </td>
  327. </tr>
  328. <tr class="ti-no-ng-animate">
  329. <td class="ti-no-ng-animate ti-text-form-label text-width80">
  330. 运行参数
  331. </td>
  332. <td class="ti-text-form-content">
  333. <div class="text-span text-span-w">
  334. {{.Parameters}}
  335. </div>
  336. </td>
  337. </tr>
  338. <tr class="ti-no-ng-animate">
  339. <td class="ti-no-ng-animate ti-text-form-label text-width80">
  340. 训练输出位置
  341. </td>
  342. <td class="ti-text-form-content">
  343. <div class="text-span text-span-w">
  344. {{.TrainUrl}}
  345. </div>
  346. </td>
  347. </tr>
  348. <tr class="ti-no-ng-animate">
  349. <td class="ti-no-ng-animate ti-text-form-label text-width80">
  350. 描述
  351. </td>
  352. <td class="ti-text-form-content">
  353. <div class="text-span text-span-w">
  354. <!-- {{.TrainUrl}} -->
  355. </div>
  356. </td>
  357. </tr>
  358. </tbody>
  359. </table>
  360. </div>
  361. </div>
  362. </div>
  363. </div>
  364. </div>
  365. <div class="ui tab" data-tab="second{{$k}}">
  366. <div>
  367. <div class="ui message" style="display: none;">
  368. <div id="header"></div>
  369. </div>
  370. <div class="ui top attached segment" style="background: #f0f0f0;">
  371. <div class="center aligned">
  372. <label>{{$.i18n.Tr "repo.modelarts.log"}}:</label>
  373. <!-- <span class="fitted file_name">{{.}}</span> -->
  374. <!-- <input type="hidden" name="file_name" value>
  375. <input type="hidden" name="start_line" value>
  376. <input type="hidden" name="end_line" value> -->
  377. </div>
  378. </div>
  379. <div class="ui attached segment log" style="height: 300px !important; overflow: auto;">
  380. <input type="hidden" class="version_name" name="version_name" value={{.VersionName}}>
  381. <input type="hidden" name="end_line" value>
  382. <input type="hidden" name="start_line" value>
  383. <pre id="log_file{{.VersionName}}"></pre>
  384. </div>
  385. </div>
  386. </div>
  387. <div class="ui tab" data-tab="third{{$k}}">
  388. <div class='ui breadcrumb model_file_bread' id='file_breadcrumb'>
  389. </div>
  390. <div id="dir_list">
  391. </div>
  392. </div>
  393. </div>
  394. </div>
  395. </div>
  396. {{end}}
  397. </div>
  398. <!-- 确认模态框 -->
  399. <div id="deletemodel">
  400. <div class="ui basic modal">
  401. <div class="ui icon header">
  402. <i class="trash icon"></i> 删除任务
  403. </div>
  404. <div class="content">
  405. <p>你确认删除该任务么?此任务一旦删除不可恢复。</p>
  406. </div>
  407. <div class="actions">
  408. <div class="ui red basic inverted cancel button">
  409. <i class="remove icon"></i> 取消操作
  410. </div>
  411. <div class="ui green basic inverted ok button">
  412. <i class="checkmark icon"></i> 确定操作
  413. </div>
  414. </div>
  415. </div>
  416. </div>
  417. </div>
  418. {{template "base/footer" .}}
  419. <script>
  420. console.log({{.version_list_task}})
  421. $('.menu .item').tab()
  422. // $('.ui.style.accordion').accordion();
  423. $(document).ready(function(){
  424. $('.ui.accordion').accordion({selector:{trigger:'.icon'}});
  425. });
  426. $(document).ready(function(){
  427. $('.secondary.menu .item').tab();
  428. });
  429. var userName
  430. var repoPath
  431. var jobID
  432. $(document).ready(function(){
  433. var url = window.location.href;
  434. var urlArr = url.split('/')
  435. userName = urlArr.slice(-5)[0]
  436. repoPath = urlArr.slice(-4)[0]
  437. jobID = urlArr.slice(-1)[0]
  438. })
  439. function stopBubbling(e) {
  440. e = window.event || e;
  441. if (e.stopPropagation) {
  442. e.stopPropagation(); //阻止事件 冒泡传播
  443. } else {
  444. e.cancelBubble = true; //ie兼容
  445. }
  446. }
  447. // var timeid = window.setInterval(refreshStatus(version_name), 30000);
  448. // document.ready(refreshStatus(version_name))
  449. var timeid = window.setInterval(loadJobStatus, 10000);
  450. $(document).ready(loadJobStatus);
  451. function loadJobStatus() {
  452. $(".ui.accordion.border-according").each((index, job) => {
  453. const jobID = job.dataset.jobid;
  454. const repoPath = job.dataset.repopath;
  455. const versionname = job.dataset.version
  456. if (job.textContent.trim() == 'IMAGE_FAILED' || job.textContent.trim() == 'SUBMIT_FAILED' || job.textContent.trim() == 'DELETE_FAILED'
  457. || job.textContent.trim() == 'KILLED' || job.textContent.trim() == 'COMPLETED' || job.textContent.trim() == 'FAILED'
  458. || job.textContent.trim() == 'CANCELED' || job.textContent.trim() == 'LOST') {
  459. return
  460. }
  461. $.get(`/api/v1/repos/${repoPath}/modelarts/train-job/${jobID}?version_name=${versionname}`, (data) => {
  462. // const jobID = data.JobID
  463. // const status = data.JobStatus
  464. // const duration = data.JobDuration
  465. $(`#${versionname}-duration-span`).text(data.JobDuration)
  466. $(`#${versionname}-status-span span`).text(data.JobStatus)
  467. $(`#${versionname}-status-span i`).attr("class",data.JobStatus)
  468. // detail status and duration
  469. $('#'+versionname+'-duration').text(data.JobDuration)
  470. $('#'+versionname+'-status').text(data.JobStatus)
  471. // $('#duration-'+jobID).text(duration)
  472. // if (status != job.textContent.trim()) {
  473. // $('#' + jobID+'-icon').removeClass().addClass(status)
  474. // $('#' + jobID+ '-text').text(status)
  475. // }
  476. }).fail(function(err) {
  477. console.log(err);
  478. });
  479. });
  480. };
  481. function refreshStatus(version_name){
  482. $.get(`/api/v1/repos/${userName}/${repoPath}/modelarts/train-job/${jobID}?version_name=${version_name}`,(data)=>{
  483. console.log(data)
  484. // header status and duration
  485. $(`#${version_name}-duration-span`).text(data.JobDuration)
  486. $(`#${version_name}-status-span span`).text(data.JobStatus)
  487. $(`#${version_name}-status-span i`).attr("class",data.JobStatus)
  488. // detail status and duration
  489. $('#'+version_name+'-duration').text(data.JobDuration)
  490. $('#'+version_name+'-status').text(data.JobStatus)
  491. }).fail(function(err) {
  492. console.log(err);
  493. });
  494. stopBubbling(arguments.callee.caller.arguments[0])
  495. }
  496. function deleteVersion(version_name){
  497. stopBubbling(arguments.callee.caller.arguments[0])
  498. let flag = 1;
  499. $('.ui.basic.modal').modal({
  500. onDeny: function() {
  501. flag = false
  502. },
  503. onApprove: function() {
  504. $.post(`/api/v1/repos/${userName}/${repoPath}/modelarts/train-job/${jobID}/del_version`,{version_name:version_name},(data)=>{
  505. $('#accordion'+version_name).remove()
  506. }).fail(function(err) {
  507. console.log(err);
  508. });
  509. flag = true
  510. },
  511. onHidden: function() {
  512. if (flag == false) {
  513. $('.alert').html('您已取消操作').removeClass('alert-success').addClass('alert-danger').show().delay(1500).fadeOut();
  514. }
  515. }
  516. })
  517. .modal('show')
  518. }
  519. function stopVersion(version_name){
  520. stopBubbling(arguments.callee.caller.arguments[0])
  521. $.post(`/api/v1/repos/${userName}/${repoPath}/modelarts/train-job/${jobID}/stop_version`,{version_name:version_name},(data)=>{
  522. if(data.StatusOK===0){
  523. $('#'+version_name+'-stop').addClass('disabled')
  524. refreshStatus(version_name)
  525. }
  526. }).fail(function(err) {
  527. console.log(err);
  528. });
  529. }
  530. function loadLog(version_name){
  531. $.get(`/api/v1/repos/${userName}/${repoPath}/modelarts/train-job/${jobID}/log?version_name=${version_name}&lines=20&order=asc`, (data) => {
  532. $('input[name=end_line]').val(data.EndLine)
  533. $('input[name=start_line]').val(data.StartLine)
  534. $(`#log_file${version_name}`).text(data.Content)
  535. }).fail(function(err) {
  536. console.log(err);
  537. });
  538. }
  539. function loadModelFile(version_name,parents,filename){
  540. console.log("")
  541. parents = parents || ''
  542. filename = filename || ''
  543. $.get(`/api/v1/repos/${userName}/${repoPath}/modelarts/train-job/${jobID}/model_list?version_name=${version_name}&parentDir=${parents}`, (data) => {
  544. console.log("=====parents======",data,version_name,parents)
  545. if(!filename){
  546. console.log("bread")
  547. $("#dir_list").empty()
  548. renderDir(data,version_name)
  549. renderBrend(version_name,parents,filename,false)
  550. }else{
  551. $("#dir_list").empty()
  552. renderDir(data,version_name)
  553. renderBrend(version_name,parents,filename,true)
  554. }
  555. }).fail(function(err) {
  556. console.log(err,version_name);
  557. });
  558. // if(!parents){
  559. // $.get(`/api/v1/repos/${userName}/${repoPath}/modelarts/train-job/${jobID}/model_list?version_name=${version_name}`, (data) => {
  560. // console.log("===========",data,version_name)
  561. // $("#dir_list").empty()
  562. // renderDir(data,version_name)
  563. // }).fail(function(err) {
  564. // console.log(err);
  565. // });
  566. // }else{
  567. // console.log("-----else-----",version_name)
  568. // }
  569. }
  570. let parentsArr=[]
  571. function renderBrend(version_name,parents,filename,flag){
  572. if(flag){
  573. parentsArr.push(parents)
  574. console.log("parents parentsARR",parents,parentsArr)
  575. let htmlBrend = ""
  576. if($('#file_breadcrumb .active').length>0){
  577. let parents1 = parentsArr.shift()
  578. let sectionName=$('#file_breadcrumb .active.section').html()
  579. $('#file_breadcrumb .active.section').replaceWith(`<a class='section' onclick="loadModelFile('${version_name}','${parents1}')">${sectionName}</a>`)
  580. htmlBrend += `<div class='active section'>${filename}</div>`
  581. }else{
  582. htmlBrend += `<div class='active section'>${version_name}</div>`
  583. }
  584. console.log("parentsARR",parentsArr)
  585. htmlBrend += "<div class='divider'> / </div>"
  586. $('#file_breadcrumb').append(htmlBrend)
  587. }else{
  588. if(!parents){
  589. $('#file_breadcrumb').empty()
  590. let htmlBread = ""
  591. htmlBread += `<div class='active section'>${version_name}</div>`
  592. htmlBread += "<div class='divider'> / </div>"
  593. $('#file_breadcrumb').append(htmlBread)
  594. }else{
  595. $(`a.section:contains(${parents})`).nextAll().remove()
  596. $(`a.section:contains(${parents})`).replaceWith(`<div class='active section'>${parents}</div>`)
  597. $(`a.section:contains(${parents})`).append("<div class='divider'> / </div>")
  598. }
  599. }
  600. }
  601. function renderDir(data,version_name){
  602. let html=""
  603. html += "<div class='ui grid' style='margin:0;'>"
  604. html += "<div class='row' style='padding: 0;'>"
  605. html += "<div class='ui sixteen wide column' style='padding:1rem;'>"
  606. html += "<div class='dir list'>"
  607. html += "<table id='repo-files-table' class='ui single line table pad20'>"
  608. html += '<tbody>'
  609. // html += "</tbody>"
  610. for(let i=0;i<data.Dirs.length;i++){
  611. html += "<tr>"
  612. html += "<td class='name six wid'>"
  613. html += "<span class='truncate'>"
  614. html += "<span class='octicon octicon-file-directory'>"
  615. html += "</span>"
  616. if(data.Dirs[i].IsDir){
  617. html += `<a onclick="loadModelFile('${version_name}','${data.Dirs[i].ParenDir}','${data.Dirs[i].FileName}')">`
  618. html += "<span class='fitted'><i class='folder icon' width='16' height='16' aria-hidden='true'></i>" + data.Dirs[i].FileName + "</span>"
  619. }else{
  620. html += `<a href='${location.href}/download_model?parentDir=&fileName=${data.Dirs[i].FileName}&jobName=${data.task.JobName}'>`
  621. html += "<span class='fitted'><i class='file icon' width='16' height='16' aria-hidden='true'></i>" + data.Dirs[i].FileName + "</span>"
  622. }
  623. html += '</a>'
  624. html += "</span>"
  625. html += "</td>"
  626. html += "<td class='message seven wide'>"
  627. html += "<span class='truncate has-emoji'>" + data.Dirs[i].Size + "</span>"
  628. html += "</td>"
  629. html += "<td class='text right age three wide'>"
  630. html += "<span class='truncate has-emoji'>" + data.Dirs[i].ModTime + "</span>"
  631. html += "</td>"
  632. html += "</tr>"
  633. }
  634. html += "</tbody>"
  635. html += "</table>"
  636. html += "</div>"
  637. html += "</div>"
  638. html += "</div>"
  639. html += "</div>"
  640. $("#dir_list").append(html)
  641. }
  642. $(".log").scroll(function () {
  643. var scrollTop = $(this)[0].scrollTop; // 滚动距离
  644. var scrollHeight = $(this)[0].scrollHeight; // 文档高度
  645. var divHeight = $(this).height(); // 可视区高度
  646. let version_name=$(this).find('input[name=version_name]').val()
  647. if(parseInt(scrollTop) + divHeight + 18 == scrollHeight){
  648. var end_line = $('input[name=end_line]').val()
  649. $.get(`/api/v1/repos/${userName}/${repoPath}/modelarts/train-job/${jobID}/log?version_name=${version_name}&base_line=${end_line}&order=desc`, (data) => {
  650. if (data.Lines == 0){
  651. $('#header').text('您已翻阅至日志底部')
  652. $('.message').css('display', 'block')
  653. setTimeout(function(){
  654. $('.message').css('display', 'none')
  655. }, 1000)
  656. }else{
  657. $('input[name=end_line]').val(data.EndLine)
  658. $('.log').append('<pre>' + data.Content)
  659. }
  660. }).fail(function(err) {
  661. console.log(err);
  662. });
  663. }
  664. if(scrollTop == 0){
  665. var start_line = $('input[name=start_line]').val()
  666. $.get(`/api/v1/repos/${userName}/${repoPath}/modelarts/train-job/${jobID}/log?version_name=${version_name}&base_line=${start_line}&order=asc`, (data) => {
  667. if (data.Lines == 0){
  668. $('#header').text('您已翻阅至日志顶部')
  669. $('.message').css('display', 'block')
  670. setTimeout(function(){
  671. $('.message').css('display', 'none')
  672. }, 1000)
  673. }else{
  674. $('input[name=start_line]').val(data.StartLine) //如果变动就改变所对应的值
  675. $(".log").prepend('<pre>' + data.Content)
  676. }
  677. }).fail(function(err) {
  678. console.log(err);
  679. });
  680. }
  681. })
  682. </script>