@@ -231,8 +231,8 @@ | |||||
<div class="column"> | <div class="column"> | ||||
<div class="ui blue small menu compact selectcloudbrain"> | <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> | </div> | ||||
<div class="column right aligned"> | <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> |