| @@ -231,8 +231,8 @@ | |||
| <div class="column"> | |||
| <div class="ui blue small menu compact selectcloudbrain"> | |||
| <a class="active item" href="{{.RepoLink}}/modelarts">调试任务</a> | |||
| <a class="item" href="{{.RepoLink}}/modelarts/train_job">训练任务</a> | |||
| <a class="active item" href="{{.RepoLink}}/modelarts/notebook">调试任务</a> | |||
| <a class="item" href="{{.RepoLink}}/modelarts/train-job">训练任务</a> | |||
| </div> | |||
| </div> | |||
| <div class="column right aligned"> | |||
| @@ -1,221 +1 @@ | |||
| {{template "base/head" .}} | |||
| <style> | |||
| #deletemodel { | |||
| width: 100%; | |||
| height: 100%; | |||
| } | |||
| .alert { | |||
| display: none; | |||
| position: fixed; | |||
| width: 100%; | |||
| z-index: 1001; | |||
| padding: 15px; | |||
| border: 1px solid transparent; | |||
| border-radius: 4px; | |||
| text-align: center; | |||
| font-weight: bold; | |||
| } | |||
| .alert-success { | |||
| color: #3c763d; | |||
| background-color: #dff0d8; | |||
| border-color: #d6e9c6; | |||
| } | |||
| .alert-danger { | |||
| color: #a94442; | |||
| background-color: #f2dede; | |||
| border-color: #ebccd1; | |||
| } | |||
| </style> | |||
| <div class="modelarts"> | |||
| <div class="repository release dataset-list view container"> | |||
| <div class="alert"></div> | |||
| {{template "repo/header" .}} | |||
| <div class="ui container"> | |||
| <div class="ui grid"> | |||
| {{template "repo/modelarts/navbar" .}} | |||
| <!-- 右侧 --> | |||
| <div class="ui thirteen wide column"> | |||
| <div class="ui three column stackable grid"> | |||
| <div class="column"> | |||
| <h2>{{.i18n.Tr "repo.modelarts.notebook"}}</h2> | |||
| </div> | |||
| <div class="column"> | |||
| </div> | |||
| <div class="column right aligned"> | |||
| {{if .Permission.CanWrite $.UnitTypeCloudBrain}} | |||
| <a class="ui green button" href="{{.RepoLink}}/modelarts/notebook/create">{{.i18n.Tr "repo.cloudbrain.new"}}</a> {{end}} | |||
| </div> | |||
| </div> | |||
| <div class="ui divider"></div> | |||
| <div class="ui grid"> | |||
| <div class="row"> | |||
| <div class="ui sixteen wide column"> | |||
| <div class="ui sixteen wide column"> | |||
| <div class="ui two column stackable grid"> | |||
| <div class="column"> | |||
| </div> | |||
| <div class="column right aligned"> | |||
| <div class="ui right dropdown type jump item"> | |||
| <span class="text"> | |||
| {{.i18n.Tr "repo.issues.filter_sort"}}<i class="dropdown icon"></i> | |||
| </span> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| <!-- 任务展示 --> | |||
| <div class="dataset list"> | |||
| {{range .Tasks}} | |||
| <div class="ui grid stackable item"> | |||
| <div class="row"> | |||
| <!-- 任务名 --> | |||
| <div class="four wide center column"> | |||
| <a class="title" href="{{$.Link}}/{{.JobID}}"> | |||
| <!-- <span class="fitted">{{svg "octicon-tasklist" 16}}</span> --> | |||
| <span class="fitted">{{.JobName}}</span> | |||
| </a> | |||
| </div> | |||
| <!--任务状态 --> | |||
| <div class="two wide center column job-status" id="{{.JobID}}" data-repopath="{{$.RepoRelPath}}" data-jobid="{{.JobID}}"> | |||
| {{.Status}} | |||
| </div> | |||
| <!-- 任务创建时间 --> | |||
| <div class="two wide center column"> | |||
| <span class="ui text center">{{svg "octicon-flame" 16}} {{TimeSinceUnix .CreatedUnix $.Lang}}</span> | |||
| </div> | |||
| <!-- 查看 --> | |||
| <div class="two wide center column"> | |||
| <span class="ui text clipboard"> | |||
| <a class="title" href="{{$.Link}}/{{.JobID}}"> | |||
| <span class="fitted">查看</span> | |||
| </a> | |||
| </span> | |||
| </div> | |||
| <!-- 删除任务 --> | |||
| <div class="two wide center column"> | |||
| <div class="ui text center clipboard"> | |||
| <form id="delForm-{{.JobID}}" action="{{if ne .Status "STOPPED"}}javascript:void(0){{else}}{{$.Link}}/{{.JobID}}/del{{end}}" method="post"> | |||
| {{$.CsrfTokenHtml}} | |||
| <a class="fitted" onclick="assertDelete(this)" style="{{if ne .Status "STOPPED"}}color:#CCCCCC{{end}}; font-size:16px; font-weight:bold">删除</a> | |||
| </form> | |||
| </div> | |||
| </div> | |||
| <!-- 调试 --> | |||
| <div class="two wide center column"> | |||
| <div class="ui text center clipboard"> | |||
| <a class="title" onclick="stop(this)" href="{{if not .CanDebug}}javascript:void(0){{else}}{{$.Link}}/{{.JobID}}/debug{{end}}" style="{{if not .CanDebug}}color:#CCCCCC{{end}}"> | |||
| <span class="fitted">调试</span> | |||
| </a> | |||
| </div> | |||
| </div> | |||
| <!-- 停止 --> | |||
| <div class="two wide center column"> | |||
| <div class="ui text center clipboard"> | |||
| <form id="stopForm-{{.JobID}}" action="{{if ne .Status "RUNNING"}}javascript:void(0){{else}}{{$.Link}}/{{.JobID}}/stop{{end}}" method="post"> | |||
| {{$.CsrfTokenHtml}} | |||
| <a class="fitted" onclick="document.getElementById('stopForm-{{.JobID}}').submit();" style="{{if ne .Status "RUNNING"}}color:#CCCCCC{{end}}; font-size:16px; font-weight:bold">停止</a> | |||
| </form> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| {{end}} {{template "base/paginate" .}} | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| <!-- 确认模态框 --> | |||
| <div id="deletemodel"> | |||
| <div class="ui basic modal"> | |||
| <div class="ui icon header"> | |||
| <i class="trash icon"></i> 删除任务 | |||
| </div> | |||
| <div class="content"> | |||
| <p>你确认删除该任务么?此任务一旦删除不可恢复。</p> | |||
| </div> | |||
| <div class="actions"> | |||
| <div class="ui red basic inverted cancel button"> | |||
| <i class="remove icon"></i> 取消操作 | |||
| </div> | |||
| <div class="ui green basic inverted ok button"> | |||
| <i class="checkmark icon"></i> 确定操作 | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| {{template "base/footer" .}} | |||
| <script> | |||
| // 调试新开窗口 | |||
| function stop(obj) { | |||
| if (obj.style.color != "rgb(204, 204, 204)") { | |||
| obj.target = '_blank' | |||
| } else { | |||
| return | |||
| } | |||
| } | |||
| // 删除时用户确认 | |||
| function assertDelete(obj) { | |||
| if (obj.style.color == "rgb(204, 204, 204)") { | |||
| return | |||
| } else { | |||
| var delId = obj.parentNode.id | |||
| flag = 1; | |||
| $('.ui.basic.modal') | |||
| .modal({ | |||
| onDeny: function() { | |||
| flag = false | |||
| }, | |||
| onApprove: function() { | |||
| document.getElementById(delId).submit() | |||
| flag = true | |||
| }, | |||
| onHidden: function() { | |||
| if (flag == false) { | |||
| $('.alert').html('您已取消操作').removeClass('alert-success').addClass('alert-danger').show().delay(1500).fadeOut(); | |||
| } | |||
| } | |||
| }) | |||
| .modal('show') | |||
| } | |||
| } | |||
| // 加载任务状态 | |||
| $(document).ready(function() { | |||
| $(".job-status").each((index, job) => { | |||
| const jobID = job.dataset.jobid; | |||
| const repoPath = job.dataset.repopath; | |||
| if (job.textContent.trim() == 'STOPPED') { | |||
| return | |||
| } | |||
| $.get(`/api/v1/repos/${repoPath}/modelarts/notebook/${jobID}`, (data) => { | |||
| const jobID = data.JobID | |||
| const status = data.JobStatus | |||
| $('#' + jobID).text(status) | |||
| // console.log(data) | |||
| }).fail(function(err) { | |||
| console.log(err); | |||
| }); | |||
| }); | |||
| }); | |||
| </script> | |||
| <div>notebook</div> | |||
| @@ -1,225 +1 @@ | |||
| {{template "base/head" .}} | |||
| <style> | |||
| #deletemodel { | |||
| width: 100%; | |||
| height: 100%; | |||
| } | |||
| .alert { | |||
| display: none; | |||
| position: fixed; | |||
| width: 100%; | |||
| z-index: 1001; | |||
| padding: 15px; | |||
| border: 1px solid transparent; | |||
| border-radius: 4px; | |||
| text-align: center; | |||
| font-weight: bold; | |||
| } | |||
| .alert-success { | |||
| color: #3c763d; | |||
| background-color: #dff0d8; | |||
| border-color: #d6e9c6; | |||
| } | |||
| .alert-danger { | |||
| color: #a94442; | |||
| background-color: #f2dede; | |||
| border-color: #ebccd1; | |||
| } | |||
| /* | |||
| .disabled { | |||
| cursor: pointer; | |||
| pointer-events: none; | |||
| } | |||
| .ui.segment.bottom.attached { | |||
| border: none; | |||
| } | |||
| .ui.secondary.vertical.pointing.menu{ | |||
| border-right-width: 0px !important; | |||
| } | |||
| .vertical.menu .item { | |||
| border-right-color: white !important; | |||
| } | |||
| .vertical.menu .activate.item { | |||
| font-weight: 700; | |||
| } */ | |||
| </style> | |||
| <div class="modelarts"> | |||
| <div class="repository release modelarts train_job view container"> | |||
| <div class="alert"></div> | |||
| {{template "repo/header" .}} | |||
| <div class="ui container"> | |||
| {{template "base/alert" .}} | |||
| <div class="ui grid"> | |||
| {{template "repo/modelarts/navbar" .}} | |||
| <!-- 右侧 --> | |||
| <div class="ui thirteen wide column"> | |||
| <div class="ui three column stackable grid"> | |||
| <div class="column"> | |||
| <h2>{{.i18n.Tr "repo.modelarts.train_job"}}</h2> | |||
| </div> | |||
| <div class="column"> | |||
| </div> | |||
| <div class="column right aligned"> | |||
| {{if .CanCreate}} | |||
| <a class="ui green button" href="{{.RepoLink}}/modelarts/train-job/create">{{.i18n.Tr "repo.modelarts.train_job.new"}}</a> | |||
| {{end}} | |||
| </div> | |||
| </div> | |||
| <div class="ui divider"></div> | |||
| <div class="ui grid"> | |||
| <div class="row"> | |||
| <div class="ui sixteen wide column"> | |||
| <div class="ui sixteen wide column"> | |||
| <div class="ui two column stackable grid"> | |||
| <div class="column"> | |||
| </div> | |||
| <div class="column right aligned"> | |||
| <div class="ui right dropdown type jump item"> | |||
| <span class="text"> | |||
| {{.i18n.Tr "repo.issues.filter_sort"}}<i class="dropdown icon"></i> | |||
| </span> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| <!-- 任务展示 --> | |||
| <div class="dataset list"> | |||
| {{range .Tasks}} | |||
| <div class="ui grid stackable item"> | |||
| <div class="row"> | |||
| <!-- 任务名 --> | |||
| <div class="four wide center column"> | |||
| <a class="title" href="{{$.Link}}/{{.JobID}}"> | |||
| <!-- <span class="fitted">{{svg "octicon-tasklist" 16}}</span> --> | |||
| <span class="fitted">{{.JobName}}</span> | |||
| </a> | |||
| </div> | |||
| <!--任务状态 --> | |||
| <div class="five wide center column job-status" id="{{.JobID}}" data-repopath="{{$.RepoRelPath}}" data-jobid="{{.JobID}}"> | |||
| {{.Status}} | |||
| </div> | |||
| <!-- 运行时长 --> | |||
| <div class="three wide center column"> | |||
| <span class="ui text center">{{svg "octicon-flame" 16}} {{TimeSinceUnix .CreatedUnix $.Lang}}</span> | |||
| </div> | |||
| <!-- 删除 --> | |||
| <div class="two wide center column"> | |||
| <div class="ui text center clipboard"> | |||
| <form id="delForm-{{.JobID}}" action="{{$.Link}}/{{.JobID}}/del" method="post"> | |||
| {{$.CsrfTokenHtml}} | |||
| <a class="fitted" onclick="assertDelete(this)" style="font-size:16px; font-weight:bold">删除</a> | |||
| </form> | |||
| </div> | |||
| </div> | |||
| <!-- 停止 --> | |||
| <div class="two wide column"> | |||
| <div class="ui text center clipboard"> | |||
| <form id="stopForm-{{.JobID}}" action="{{if ne .Status "RUNNING"}}javascript:void(0){{else}}{{$.Link}}/{{.JobID}}/stop{{end}}" method="post"> | |||
| {{$.CsrfTokenHtml}} | |||
| <a class="fitted" onclick="document.getElementById('stopForm-{{.JobID}}').submit();" style="{{if ne .Status "RUNNING"}}color:#CCCCCC{{end}};font-size:16px; font-weight:bold">停止</a> | |||
| </form> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| {{end}} {{template "base/paginate" .}} | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| <!-- 确认模态框 --> | |||
| <div id="deletemodel"> | |||
| <div class="ui basic modal"> | |||
| <div class="ui icon header"> | |||
| <i class="trash icon"></i> 删除任务 | |||
| </div> | |||
| <div class="content"> | |||
| <p>你确认删除该任务么?此任务一旦删除不可恢复。</p> | |||
| </div> | |||
| <div class="actions"> | |||
| <div class="ui red basic inverted cancel button"> | |||
| <i class="remove icon"></i> 取消操作 | |||
| </div> | |||
| <div class="ui green basic inverted ok button"> | |||
| <i class="checkmark icon"></i> 确定操作 | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| {{template "base/footer" .}} | |||
| <script> | |||
| $(".vertical.menu a").click(function(){ | |||
| $(this).siblings().removeClass("activate") | |||
| $(this).addClass("activate") | |||
| }) | |||
| // 删除时用户确认 | |||
| function assertDelete(obj) { | |||
| if (obj.style.color == "rgb(204, 204, 204)") { | |||
| return | |||
| } else { | |||
| var delId = obj.parentNode.id | |||
| flag = 1; | |||
| $('.ui.basic.modal') | |||
| .modal({ | |||
| onDeny: function() { | |||
| flag = false | |||
| }, | |||
| onApprove: function() { | |||
| document.getElementById(delId).submit() | |||
| flag = true | |||
| }, | |||
| onHidden: function() { | |||
| if (flag == false) { | |||
| $('.alert').html('您已取消操作').removeClass('alert-success').addClass('alert-danger').show().delay(1500).fadeOut(); | |||
| } | |||
| } | |||
| }) | |||
| .modal('show') | |||
| } | |||
| } | |||
| // 加载任务状态 | |||
| $(document).ready(function() { | |||
| $(".job-status").each((index, job) => { | |||
| const jobID = job.dataset.jobid; | |||
| const repoPath = job.dataset.repopath; | |||
| if (job.textContent.trim() == 'STOPPED') { | |||
| return | |||
| } | |||
| $.get(`/api/v1/repos/${repoPath}/modelarts/train-job/${jobID}`, (data) => { | |||
| const jobID = data.JobID | |||
| const status = data.JobStatus | |||
| $('#' + jobID).text(status) | |||
| // console.log(data) | |||
| }).fail(function(err) { | |||
| console.log(err); | |||
| }); | |||
| }); | |||
| }); | |||
| </script> | |||
| <div>aaaa</div> | |||