| @@ -1,215 +1,213 @@ | |||
| {{template "base/head" .}} | |||
| <div class="repository release dataset-list view"> | |||
| {{template "repo/header" .}} | |||
| <div class="ui container"> | |||
| <div class="ui three column stackable grid"> | |||
| <div class="column"> | |||
| <h2>{{.i18n.Tr "repo.cloudbrain"}}</h2> | |||
| </div> | |||
| <div class="column"> | |||
| </div> | |||
| <div class="column right aligned"> | |||
| {{if .Permission.CanWrite $.UnitTypeCloudBrain}} | |||
| <a class="ui green button" href="{{.RepoLink}}/cloudbrain/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"> | |||
| {{template "repo/header" .}} | |||
| <div class="ui container"> | |||
| <div class="ui three column stackable grid"> | |||
| <div class="column"> | |||
| <h2>{{.i18n.Tr "repo.cloudbrain"}}</h2> | |||
| </div> | |||
| <div class="column"> | |||
| </div> | |||
| <div class="column right aligned"> | |||
| {{if .Permission.CanWrite $.UnitTypeCloudBrain}} | |||
| <a class="ui green button" href="{{.RepoLink}}/cloudbrain/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 item"> | |||
| <div class="row"> | |||
| <div class="five wide column"> | |||
| <a class="title" href="{{$.Link}}/{{.JobID}}"> | |||
| <span class="fitted">{{svg "octicon-tasklist" 16}}</span> | |||
| <span class="fitted">{{.JobName}}</span> | |||
| </a> | |||
| </div> | |||
| <div class="three wide column job-status" id="{{.JobID}}" data-repopath="{{$.RepoRelPath}}" data-jobid="{{.JobID}}"> | |||
| {{.Status}} | |||
| </div> | |||
| <div class="three wide column"> | |||
| <span class="ui text center">{{svg "octicon-flame" 16}} {{TimeSinceUnix .CreatedUnix $.Lang}}</span> | |||
| </div> | |||
| <div class="one wide column"> | |||
| <span class="ui text center clipboard"> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| <div class="dataset list"> | |||
| {{range .Tasks}} | |||
| <div class="ui grid item"> | |||
| <div class="row"> | |||
| <div class="five wide column"> | |||
| <a class="title" href="{{$.Link}}/{{.JobID}}"> | |||
| <span class="fitted">{{svg "octicon-tasklist" 16}}</span> | |||
| <span class="fitted">{{.JobName}}</span> | |||
| </a> | |||
| </div> | |||
| <div class="three wide column job-status" id="{{.JobID}}" data-repopath="{{$.RepoRelPath}}" data-jobid="{{.JobID}}"> | |||
| {{.Status}} | |||
| </div> | |||
| <div class="three wide column"> | |||
| <span class="ui text center">{{svg "octicon-flame" 16}} {{TimeSinceUnix .CreatedUnix $.Lang}}</span> | |||
| </div> | |||
| <div class="one wide column"> | |||
| <span class="ui text center clipboard"> | |||
| <a class="title" href="{{$.Link}}/{{.JobID}}"> | |||
| <span class="fitted">查看</span> | |||
| </a> | |||
| </span> | |||
| </div> | |||
| <div class="one wide column"> | |||
| <span class="ui text center clipboard"> | |||
| </a> | |||
| </span> | |||
| </div> | |||
| <div class="one wide column"> | |||
| <span class="ui text center clipboard"> | |||
| <a class="title" href="{{if not .CanDebug}}javascript:void(0){{else}}{{$.Link}}/{{.JobID}}/debug{{end}}" style="{{if not .CanDebug}}color:#CCCCCC{{end}}"> | |||
| <span class="fitted">调试</span> | |||
| </a> | |||
| </span> | |||
| </div> | |||
| <div class="one wide column"> | |||
| <span class="ui text center clipboard"> | |||
| </a> | |||
| </span> | |||
| </div> | |||
| <div class="one wide column"> | |||
| <span 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> | |||
| </span> | |||
| </div> | |||
| <!-- 打开弹窗按钮 --> | |||
| <a class="imageBtn" style="{{if not .CanDebug}}color:#CCCCCC;cursor:pointer;pointer-events:none;{{end}}; font-size:16px; font-weight:bold" value="{{.CanDebug}}">提交镜像</a> | |||
| <!-- 弹窗 --> | |||
| <div id="imageModal" class="modal"> | |||
| <!-- 弹窗内容 --> | |||
| <div class="modal-content"> | |||
| <span class="close">×</span> | |||
| <form id="commitImageForm" action="{{$.Link}}/{{.JobID}}/commit_image" method="post"> | |||
| {{$.CsrfTokenHtml}} | |||
| <p>提交任务镜像</p> | |||
| <div class="ui divider"></div> | |||
| <div class="inline required field dis"> | |||
| <label>镜像标签:</label> | |||
| <input name="tag" id="image_tag" tabindex="3" autofocus required maxlength="255" style="width:75%"> | |||
| </div> | |||
| <div class="inline required field" style="position:relative;height:180px;"> | |||
| <div style="height:20px;width:75px;"> | |||
| <label>镜像描述:</label> | |||
| </div> | |||
| <div style="position:absolute;left:75px;top:0;width:75%"> | |||
| <textarea name="description" rows="10" style="width:100%"></textarea> | |||
| </div> | |||
| </div> | |||
| <div class="ui divider"></div> | |||
| <div class="inline field"> | |||
| <label></label> | |||
| <button class="ui green button"> | |||
| </div> | |||
| <!-- 打开弹窗按钮 --> | |||
| <a class="imageBtn" style="{{if not .CanDebug}}color:#CCCCCC;cursor:pointer;pointer-events:none;{{end}}; font-size:16px; font-weight:bold" value="{{.CanDebug}}">提交镜像</a> | |||
| <!-- 弹窗 --> | |||
| <div id="imageModal" class="modal"> | |||
| <!-- 弹窗内容 --> | |||
| <div class="modal-content"> | |||
| <span class="close">×</span> | |||
| <form id="commitImageForm" action="{{$.Link}}/{{.JobID}}/commit_image" method="post"> | |||
| {{$.CsrfTokenHtml}} | |||
| <p>提交任务镜像</p> | |||
| <div class="ui divider"></div> | |||
| <div class="inline required field dis"> | |||
| <label>镜像标签:</label> | |||
| <input name="tag" id="image_tag" tabindex="3" autofocus required maxlength="255" style="width:75%"> | |||
| </div> | |||
| <div class="inline required field" style="position:relative;height:180px;"> | |||
| <div style="height:20px;width:75px;"> | |||
| <label>镜像描述:</label> | |||
| </div> | |||
| <div style="position:absolute;left:75px;top:0;width:75%"> | |||
| <textarea name="description" rows="10" style="width:100%"></textarea> | |||
| </div> | |||
| </div> | |||
| <div class="ui divider"></div> | |||
| <div class="inline field"> | |||
| <label></label> | |||
| <button class="ui green button"> | |||
| {{$.i18n.Tr "repo.cloudbrain.commit_image"}} | |||
| </button> | |||
| </div> | |||
| </form> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| {{end}} | |||
| {{template "base/paginate" .}} | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </form> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| {{end}} {{template "base/paginate" .}} | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| {{template "base/footer" .}} | |||
| <script> | |||
| $( document ).ready(function() { | |||
| $( ".job-status" ).each(( index, job ) => { | |||
| const jobID = job.dataset.jobid; | |||
| const repoPath = job.dataset.repopath; | |||
| if (job.textContent.trim() == 'STOPPED') { | |||
| return | |||
| } | |||
| $(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}/cloudbrain/${jobID}`, ( data ) => { | |||
| const jobID = data.JobID | |||
| const status = data.JobStatus | |||
| $('#'+ jobID).text(status) | |||
| // console.log(data) | |||
| }).fail(function(err) { | |||
| console.log( err ); | |||
| }); | |||
| }); | |||
| }); | |||
| $.get(`/api/v1/repos/${repoPath}/cloudbrain/${jobID}`, (data) => { | |||
| const jobID = data.JobID | |||
| const status = data.JobStatus | |||
| $('#' + jobID).text(status) | |||
| // console.log(data) | |||
| }).fail(function(err) { | |||
| console.log(err); | |||
| }); | |||
| }); | |||
| }); | |||
| // 获取弹窗 | |||
| var modal = document.getElementById('imageModal'); | |||
| // 打开弹窗的按钮对象 | |||
| var btns = document.getElementsByClassName("imageBtn"); | |||
| // 获取 <span> 元素,用于关闭弹窗 | |||
| var spans = document.getElementsByClassName('close'); | |||
| // 点击按钮打开弹窗 | |||
| for(i=0;i<btns.length;i++){ | |||
| btns[i].onclick = function() { | |||
| modal.style.display = "block"; | |||
| } | |||
| } | |||
| // 点击 <span> (x), 关闭弹窗 | |||
| for(i=0;i<spans.length;i++){ | |||
| spans[i].onclick = function() { | |||
| modal.style.display = "none"; | |||
| } | |||
| } | |||
| // 获取弹窗 | |||
| var modal = document.getElementById('imageModal'); | |||
| // 在用户点击其他地方时,关闭弹窗 | |||
| window.onclick = function(event) { | |||
| if (event.target == modal) { | |||
| modal.style.display = "none"; | |||
| } | |||
| } | |||
| // 打开弹窗的按钮对象 | |||
| var btns = document.getElementsByClassName("imageBtn"); | |||
| </script> | |||
| // 获取 <span> 元素,用于关闭弹窗 | |||
| var spans = document.getElementsByClassName('close'); | |||
| // 点击按钮打开弹窗 | |||
| for (i = 0; i < btns.length; i++) { | |||
| btns[i].onclick = function() { | |||
| modal.style.display = "block"; | |||
| } | |||
| } | |||
| <style> | |||
| /* 弹窗 (background) */ | |||
| .modal { | |||
| display: none; /* 默认隐藏 */ | |||
| position: fixed; /* 固定定位 */ | |||
| z-index: 1; /* 设置在顶层 */ | |||
| left: 0; | |||
| top: 0; | |||
| width: 100%; | |||
| height: 100%; | |||
| overflow: auto; | |||
| background-color: rgb(0,0,0); | |||
| background-color: rgba(0,0,0,0.4); | |||
| } | |||
| /* 弹窗内容 */ | |||
| .modal-content { | |||
| background-color: #fefefe; | |||
| margin: 15% auto; | |||
| padding: 20px; | |||
| border: 1px solid #888; | |||
| width: 25%; | |||
| } | |||
| /* 关闭按钮 */ | |||
| .close { | |||
| color: #aaa; | |||
| float: right; | |||
| font-size: 28px; | |||
| font-weight: bold; | |||
| } | |||
| .close:hover, | |||
| .close:focus { | |||
| color: black; | |||
| text-decoration: none; | |||
| cursor: pointer; | |||
| } | |||
| // 点击 <span> (x), 关闭弹窗 | |||
| for (i = 0; i < spans.length; i++) { | |||
| spans[i].onclick = function() { | |||
| .dis{ | |||
| margin-bottom:20px; | |||
| } | |||
| modal.style.display = "none"; | |||
| } | |||
| } | |||
| // 在用户点击其他地方时,关闭弹窗 | |||
| window.onclick = function(event) { | |||
| if (event.target == modal) { | |||
| modal.style.display = "none"; | |||
| } | |||
| } | |||
| </script> | |||
| <style> | |||
| /* 弹窗 (background) */ | |||
| .modal { | |||
| display: none; | |||
| /* 默认隐藏 */ | |||
| position: fixed; | |||
| /* 固定定位 */ | |||
| z-index: 1; | |||
| /* 设置在顶层 */ | |||
| left: 0; | |||
| top: 0; | |||
| width: 100%; | |||
| height: 100%; | |||
| overflow: auto; | |||
| background-color: rgb(0, 0, 0); | |||
| background-color: rgba(0, 0, 0, 0.4); | |||
| } | |||
| /* 弹窗内容 */ | |||
| .modal-content { | |||
| background-color: #fefefe; | |||
| margin: 15% auto; | |||
| padding: 20px; | |||
| border: 1px solid #888; | |||
| width: 25%; | |||
| } | |||
| /* 关闭按钮 */ | |||
| .close { | |||
| color: #aaa; | |||
| float: right; | |||
| font-size: 28px; | |||
| font-weight: bold; | |||
| } | |||
| .close:hover, | |||
| .close:focus { | |||
| color: black; | |||
| text-decoration: none; | |||
| cursor: pointer; | |||
| } | |||
| .dis { | |||
| margin-bottom: 20px; | |||
| } | |||
| </style> | |||