added archived executions panel
This commit is contained in:
dcore94
parent
d7b062828b
commit
9426adf4eb
|
|
@ -13,6 +13,9 @@ class CCPExecutionHistory extends HTMLElement {
|
|||
#searchfield = null;
|
||||
#fileupload = null;
|
||||
#archiveupload = null;
|
||||
#ws = null;
|
||||
#execfolderid = null
|
||||
#archived = []
|
||||
#messages = {
|
||||
"en" : {
|
||||
"search" : "Search",
|
||||
|
|
@ -61,10 +64,12 @@ class CCPExecutionHistory extends HTMLElement {
|
|||
}
|
||||
this.#broadcasturl = this.#broadcasturl + "/ws/notification"
|
||||
this.#archive = this.getAttribute("archive")
|
||||
|
||||
this.connectNewExecution()
|
||||
this.connectBroadcastWithSubject()
|
||||
this.render()
|
||||
this.refreshExecutions()
|
||||
this.refreshArchivedExecutions()
|
||||
}
|
||||
|
||||
render(){
|
||||
|
|
@ -182,6 +187,72 @@ class CCPExecutionHistory extends HTMLElement {
|
|||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
<template id="ARCHIVED_EXECUTIOM_LIST_TEMPLATE">
|
||||
<ul name="ccp_archived_execution_list" class="ccp-execution-list list-group border border-2">
|
||||
<li class="ccp-method-item list-group-item list-group-item-dark">
|
||||
<details name="level1">
|
||||
<summary class="ccp-method-item-header noselect d-flex flex-wrap justify-content-between">
|
||||
<h5 class="text-primary d-inline"></h5>
|
||||
</summary>
|
||||
<ul class="ccp-execution-list list-group" style="list-style:none">
|
||||
<li class="ccp-execution-item list-group-item-secondary my-2 p-2" draggable="true">
|
||||
<details>
|
||||
<summary>
|
||||
<span name="version" class="badge badge-primary"></span>
|
||||
<span name="status" class="ml-1 badge"></span>
|
||||
<div class="d-flex float-right" style="gap: 3px 5px; max-width: 40%; min-width:60px; flex-wrap:wrap;">
|
||||
${ this.#archive ? `
|
||||
<button data-index="0" name="restore" title="${this.getLabel("restore_execution_help")}" class="btn btn-primary ccp-toolbar-button ccp-toolbar-button-small">
|
||||
<svg viewBox="0 -960 960 960" width="24px" fill="#5f6368">
|
||||
<path d="M480-250q78 0 134-56t56-134q0-78-56-134t-134-56q-38 0-71 14t-59 38v-62h-60v170h170v-60h-72q17-18 41-29t51-11q54 0 92 38t38 92q0 54-38 92t-92 38q-44 0-77-25.5T356-400h-62q14 65 65.5 107.5T480-250ZM240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h320l240 240v480q0 33-23.5 56.5T720-80H240Zm0-80h480v-446L526-800H240v640Zm0 0v-640 640Z"/>
|
||||
</svg>
|
||||
</button>`
|
||||
: ``
|
||||
}
|
||||
</div>
|
||||
<p name="createstart" class="font-weight-light font-italic" style="margin-top:revert">
|
||||
<span name="created"></span>.
|
||||
<span name="started" class="ml-1"></span>
|
||||
</p>
|
||||
<p name="message" class="font-weight-light font-italic" style="margin-top:revert">
|
||||
<span name="updated"></span>:
|
||||
<span name="message" class="ml-1"></span>
|
||||
</p>
|
||||
</summary>
|
||||
<div class="d-flex flex-wrap" style="gap:3px; overflow:hidden">
|
||||
<span style="text-overflow:ellipsis" class="badge badge-light text-info border border-info" name="infrastructure" alt="Infrastructure" title="Infrastructure"></span>
|
||||
<span class="badge" name="runtime" alt="Runtime" title="Runtime"></span>
|
||||
</div>
|
||||
<div class="d-flex flex-column align-items-end" style="gap: 3px;">
|
||||
<div class="d-flex align-items-center" style="gap:5px" title="${this.getLabel("generate_code_help")}">
|
||||
<label style="text-wrap:nowrap">${this.getLabel("generate_code")}</label>
|
||||
<select name="language-selector" class="form-control">
|
||||
<option value="text/python" data-ext="py" title="Generate plain Python3">Python 3</option>
|
||||
<option value="text/plain+r" data-ext="r" title="Generate plain R">R</option>
|
||||
<option value="application/vnd.jupyter+python" data-ext="ipynb" title="Generate Jupyter notebook with Python 3 cells">Jupyter Python3</option>
|
||||
<option value="text/julia" data-ext="jl" title="Generate Julia 1.9.0 code (HTTP 1.10.0, JSON3 1.13.2)">Julia 1.9.0</option>
|
||||
<option value="application/x-sh+curl" data-ext="sh" title="Generate Bash script (curl)">Bash (curl)</option>
|
||||
<option value="application/x-sh+wget" data-ext="sh" title="Generate Bash script (wget)">Bash (wget)</option>
|
||||
</select>
|
||||
<button data-index="0" name="codegen" title="Generate code" class="btn btn-primary ccp-toolbar-button ccp-toolbar-button-small">
|
||||
<svg viewBox="0 96 960 960">
|
||||
<path d="m384 721 43-43-101-102 101-101-43-43-144 144.5L384 721Zm192 0 145-145-144-144-43 43 101 101-102 102 43 43ZM180 936q-24.75 0-42.375-17.625T120 876V276q0-24.75 17.625-42.375T180 216h205q5-35 32-57.5t63-22.5q36 0 63 22.5t32 57.5h205q24.75 0 42.375 17.625T840 276v600q0 24.75-17.625 42.375T780 936H180Zm0-60h600V276H180v600Zm300-617q14 0 24.5-10.5T515 224q0-14-10.5-24.5T480 189q-14 0-24.5 10.5T445 224q0 14 10.5 24.5T480 259ZM180 876V276v600Z"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="d-flex align-items-middle" style="gap:5px">
|
||||
<div class="d-flex">
|
||||
<a title="${this.getLabel("direct_link_help")}" class="text-truncate" name="direct_link_execution" href="${window.location.href}">${this.getLabel("direct_link")}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
</li>
|
||||
</ul>
|
||||
</details>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
|
|
@ -193,7 +264,7 @@ class CCPExecutionHistory extends HTMLElement {
|
|||
<button name="refresh" class="btn btn-primary ccp-toolbar-button" title="${this.getLabel("refresh_help")}">
|
||||
<svg viewBox="0 0 48 48"><path d="M24 40q-6.65 0-11.325-4.675Q8 30.65 8 24q0-6.65 4.675-11.325Q17.35 8 24 8q4.25 0 7.45 1.725T37 14.45V8h3v12.7H27.3v-3h8.4q-1.9-3-4.85-4.85Q27.9 11 24 11q-5.45 0-9.225 3.775Q11 18.55 11 24q0 5.45 3.775 9.225Q18.55 37 24 37q4.15 0 7.6-2.375 3.45-2.375 4.8-6.275h3.1q-1.45 5.25-5.75 8.45Q29.45 40 24 40Z"/></svg>
|
||||
</button>
|
||||
<label name="fileupload" class="btn btn-primary ccp-toolbar-button m-0" title="${this.getLabel("import_file_help")}">
|
||||
<!--label name="fileupload" class="btn btn-primary ccp-toolbar-button m-0" title="${this.getLabel("import_file_help")}">
|
||||
<svg viewBox="0 96 960 960"><path d="M452 854h60V653l82 82 42-42-156-152-154 154 42 42 84-84v201ZM220 976q-24 0-42-18t-18-42V236q0-24 18-42t42-18h361l219 219v521q0 24-18 42t-42 18H220Zm331-554V236H220v680h520V422H551ZM220 236v186-186 680-680Z"/></svg>
|
||||
<input type="file" class="d-none" multiple="multiple"/>
|
||||
</label>
|
||||
|
|
@ -204,7 +275,7 @@ class CCPExecutionHistory extends HTMLElement {
|
|||
<path d="M450 776H280q-83 0-141.5-58.5T80 576q0-83 58.5-141.5T280 376h170v60H280q-58.333 0-99.167 40.765-40.833 40.764-40.833 99Q140 634 180.833 675q40.834 41 99.167 41h170v60ZM324 606v-60h310v60H324Zm556-30h-60q0-58-40.833-99-40.834-41-99.167-41H510v-60h170q83 0 141.5 58.5T880 576ZM699 896V776H579v-60h120V596h60v120h120v60H759v120h-60Z"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -212,39 +283,78 @@ class CCPExecutionHistory extends HTMLElement {
|
|||
<div class="mb-3">
|
||||
<input accept="application/zip" type="text" name="search" class="form-control" placeholder="Search"/>
|
||||
</div>
|
||||
<div>
|
||||
<ul name="ccp_execution_list"></ul>
|
||||
<ul id="switch_executions" class="nav nav-tabs">
|
||||
<li class="nav-item">
|
||||
<a name="live_executions" class="nav-link active" href="#">${this.getLabel("live_executions")}</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a name="archived_executions" class="nav-link" href="#">${this.getLabel("archived_executions")}</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
<div class="tab-pane fade show active" id="live_executions">
|
||||
<ul name="ccp_execution_list"></ul>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="archived_executions">
|
||||
<ul name="ccp_archived_execution_list"></ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
this.#rootdoc.querySelector("button[name=refresh]").addEventListener("click", ev=>{
|
||||
this.refreshExecutions()
|
||||
this.refreshArchivedExecutions()
|
||||
})
|
||||
|
||||
this.#searchfield = this.#rootdoc.querySelector("input[name=search]")
|
||||
this.#searchfield.addEventListener("input", ev=>{
|
||||
this.updateList()
|
||||
})
|
||||
|
||||
this.#fileupload = this.#rootdoc.querySelector("label[name=fileupload] > input[type=file]")
|
||||
this.#fileupload.addEventListener("change", ev=>{
|
||||
const filelist = ev.target.files;
|
||||
if (filelist.length > 0) {
|
||||
const files = Array.prototype.slice.call(filelist)
|
||||
this.importExecutions(files)
|
||||
|
||||
const linklive = this.#rootdoc.querySelector("a.nav-link[name=live_executions]")
|
||||
const linkarch = this.#rootdoc.querySelector("a.nav-link[name=archived_executions]")
|
||||
const tablive = this.#rootdoc.querySelector("div.tab-pane#live_executions")
|
||||
const tabarch = this.#rootdoc.querySelector("div.tab-pane#archived_executions")
|
||||
this.#rootdoc.querySelector("#switch_executions").addEventListener("click", ev=>{
|
||||
const tgt = ev.target
|
||||
if(tgt == linklive){
|
||||
linklive.classList.add("active")
|
||||
linkarch.classList.remove("active")
|
||||
tablive.classList.add("show")
|
||||
tablive.classList.add("active")
|
||||
tabarch.classList.remove("show")
|
||||
tabarch.classList.remove("active")
|
||||
}else if(tgt == linkarch){
|
||||
linklive.classList.remove("active")
|
||||
linkarch.classList.add("active")
|
||||
tabarch.classList.add("show")
|
||||
tabarch.classList.add("active")
|
||||
tablive.classList.remove("show")
|
||||
tablive.classList.remove("active")
|
||||
}
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation()
|
||||
})
|
||||
|
||||
this.#archiveupload = this.#rootdoc.querySelector("button[name=archive]")
|
||||
this.#archiveupload.addEventListener("click", ev=>{
|
||||
const link = ev.target.parentElement.querySelector("input").value
|
||||
if(link){
|
||||
if(confirm(this.getLabel("confirm_import") + "?")){
|
||||
this.fromArchiveFolder(link)
|
||||
}
|
||||
}
|
||||
})
|
||||
// this.#fileupload = this.#rootdoc.querySelector("label[name=fileupload] > input[type=file]")
|
||||
// this.#fileupload.addEventListener("change", ev=>{
|
||||
// const filelist = ev.target.files;
|
||||
// if (filelist.length > 0) {
|
||||
// const files = Array.prototype.slice.call(filelist)
|
||||
// this.importExecutions(files)
|
||||
// }
|
||||
// })
|
||||
|
||||
// this.#archiveupload = this.#rootdoc.querySelector("button[name=archive]")
|
||||
// this.#archiveupload.addEventListener("click", ev=>{
|
||||
// const link = ev.target.parentElement.querySelector("input").value
|
||||
// if(link){
|
||||
// if(confirm(this.getLabel("confirm_import") + "?")){
|
||||
// this.fromArchiveFolder(link)
|
||||
// }
|
||||
// }
|
||||
// })
|
||||
}
|
||||
|
||||
updateList(){
|
||||
|
|
@ -272,7 +382,7 @@ class CCPExecutionHistory extends HTMLElement {
|
|||
return catalog
|
||||
}, {})
|
||||
}
|
||||
|
||||
|
||||
refreshExecution(id){
|
||||
this.#boot.secureFetch(`${this.#serviceurl}/executions?id=${id}`).then(reply =>{
|
||||
if(reply.ok) return reply.json();
|
||||
|
|
@ -489,6 +599,66 @@ class CCPExecutionHistory extends HTMLElement {
|
|||
}).catch(err=>{ alert(err)})
|
||||
}
|
||||
}
|
||||
|
||||
async initWorkspace(){
|
||||
if(!this.#ws){
|
||||
const wsurl = "https://workspace-repository.dev.d4science.org/storagehub/workspace"
|
||||
this.#ws = new D4SWorkspace(wsurl, this.#boot)
|
||||
}
|
||||
|
||||
if(!this.#execfolderid){
|
||||
const rootws = await this.#ws.getWorkspace()
|
||||
const ccpfolder = await this.#ws.findByName(rootws.id, "CCP")
|
||||
if(ccpfolder.length === 1){
|
||||
const execfolder = await this.#ws.findByName(ccpfolder[0].id, "executions")
|
||||
if(execfolder.length === 1){
|
||||
this.#execfolderid = execfolder[0].id
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async refreshArchivedExecutions(){
|
||||
await this.initWorkspace()
|
||||
if(this.#execfolderid){
|
||||
const folders = await this.#ws.listFolder(this.#execfolderid)
|
||||
this.#archived = {}
|
||||
for(let i=0; i < folders.length; i++){
|
||||
const methodfolder = folders[i]
|
||||
const executionfolders = await this.#ws.listFolder(methodfolder.id)
|
||||
for(let j=0; j < executionfolders.length; j++){
|
||||
const metadatafolder = await this.#ws.findByName(executionfolders[j].id, "metadata")
|
||||
if(metadatafolder.length === 1){
|
||||
const metadata = await this.#ws.download(metadatafolder[0].id, null, true)
|
||||
const zip = new JSZip()
|
||||
const req = JSON.parse(await (zip.loadAsync(metadata).then(z=>z.file("metadata/request.json").async("string"))))
|
||||
const status = JSON.parse(await (zip.loadAsync(metadata).then(z=>z.file("metadata/jobStatus.json").async("string"))))
|
||||
const meth = JSON.parse(await (zip.loadAsync(metadata).then(z=>z.file("metadata/method.json").async("string"))))
|
||||
const infra = JSON.parse(await (zip.loadAsync(metadata).then(z=>z.file("metadata/infrastructure.json").async("string"))))
|
||||
const entry = {
|
||||
id : req.id,
|
||||
status : status.status,
|
||||
created : status.created,
|
||||
started : status.started,
|
||||
updated : status.updated,
|
||||
message : status.message,
|
||||
method : meth.title,
|
||||
methodversion : meth.version,
|
||||
infrastructure: infra.name,
|
||||
infrastructuretype : infra.type,
|
||||
ccpnote : req.inputs.ccpnote ? req.inputs.ccpnote : "",
|
||||
runtime : req.inputs.ccpruntime,
|
||||
replicas : req.inputs.ccpreplicas ? req.inputs.ccpreplicas : 1,
|
||||
href : `items/${executionfolders[j].id}/download`
|
||||
}
|
||||
if(this.#archived[entry.method]) this.#archived[entry.method].push(entry);
|
||||
else this.#archived[entry.method] = [entry]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
BSS.apply(this.#archived_execution_list_bss, this.#rootdoc)
|
||||
}
|
||||
|
||||
#execution_list_bss = {
|
||||
template : "#EXECUTIOM_LIST_TEMPLATE",
|
||||
|
|
@ -737,5 +907,159 @@ class CCPExecutionHistory extends HTMLElement {
|
|||
}
|
||||
]
|
||||
}
|
||||
|
||||
#archived_execution_list_bss = {
|
||||
template : "#ARCHIVED_EXECUTIOM_LIST_TEMPLATE",
|
||||
target : "ul[name=ccp_archived_execution_list]",
|
||||
in : ()=>this,
|
||||
recurse:[
|
||||
{
|
||||
target : "li.ccp-method-item",
|
||||
"in" : (e,d)=>Object.keys(this.#archived),
|
||||
recurse: [
|
||||
{
|
||||
target : "details[name=level1]",
|
||||
apply : (e,d)=>{
|
||||
e.alt = e.title = d
|
||||
if(sessionStorage.getItem(d) === "open") e.open = "open";
|
||||
else e.removeAttribute("open");
|
||||
},
|
||||
on_toggle : ev=>{
|
||||
if(ev.target.open){
|
||||
sessionStorage.setItem(ev.currentTarget.alt, 'open')
|
||||
}else{
|
||||
sessionStorage.removeItem(ev.currentTarget.alt)
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
target : "summary.ccp-method-item-header h5",
|
||||
apply : (e,d) => { e.textContent = d }
|
||||
},
|
||||
{
|
||||
target : "li.ccp-execution-item",
|
||||
"in" : (e,d)=>this.#archived[d],
|
||||
apply : (e,d)=>{
|
||||
e.setAttribute("data-index", d.id)
|
||||
e.setAttribute("data-href", d.href)
|
||||
},
|
||||
on_click: ev=>{
|
||||
if(ev.target.getAttribute("name") === "restore"){
|
||||
if(window.confirm(this.getLabel("confirm_restore_execution"))){
|
||||
const href = ev.currentTarget.getAttribute("data-href")
|
||||
this.fromArchiveFolder(href)
|
||||
}
|
||||
}
|
||||
},
|
||||
recurse : [
|
||||
{
|
||||
target : "details",
|
||||
apply : (e,d)=>{
|
||||
e.alt = e.title = d.id
|
||||
if(sessionStorage.getItem(d.id) === "open") e.open = "open";
|
||||
else e.removeAttribute("open");
|
||||
},
|
||||
on_toggle : ev=>{
|
||||
if(ev.target.open){
|
||||
sessionStorage.setItem(ev.currentTarget.alt, 'open')
|
||||
}else{
|
||||
sessionStorage.removeItem(ev.currentTarget.alt)
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
target : "span[name=version]",
|
||||
apply : (e,d)=>{
|
||||
if(d.ccpnote){
|
||||
e.textContent = `${d.ccpnote} (${d.methodversion})`
|
||||
}else{
|
||||
e.textContent = `${d.methodversion}`
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
target : "span[name=status]",
|
||||
apply : (e,d)=>{
|
||||
if(d.status){
|
||||
const status = d.status
|
||||
e.textContent = status
|
||||
if (status === "running") e.classList.add("badge-primary");
|
||||
else if (status === "successful") e.classList.add("badge-success");
|
||||
else if (status === "failed") e.classList.add("badge-danger");
|
||||
else e.classList.add("badge-secondary");
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
target : "span[name=created]",
|
||||
apply : (e,d)=>{
|
||||
if(d.created){
|
||||
const dt = new Date(d.created)
|
||||
e.textContent = `Accepted ${dt.toLocaleDateString()} @ ${dt.toLocaleTimeString()}`
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
target : "span[name=started]",
|
||||
apply : (e,d)=>{
|
||||
if(d.started){
|
||||
const dt = new Date(d.started)
|
||||
e.textContent = `Started ${dt.toLocaleDateString()} @ ${dt.toLocaleTimeString()}`
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
target : "span[name=updated]",
|
||||
apply : (e,d)=>{
|
||||
const dt = new Date(d.updated)
|
||||
e.textContent = `Last update ${dt.toLocaleDateString()} @ ${dt.toLocaleTimeString()}`
|
||||
}
|
||||
},
|
||||
{
|
||||
target : "span[name=message]",
|
||||
apply : (e,d)=>{
|
||||
if(d.message){
|
||||
e.textContent = d.message
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
target : "span[name=infrastructure]",
|
||||
apply : (e,d)=>{
|
||||
e.textContent = d.infrastructure
|
||||
}
|
||||
},
|
||||
{
|
||||
target : "span[name=runtime]",
|
||||
apply : (e,d)=>{
|
||||
const rt = d.runtime ? d.runtime : ""
|
||||
const infratype = d.infrastructuretype ? d.infrastructuretype : ""
|
||||
e.textContent = rt + (d.replicas && d.replicas !== "1" ? ' x ' + d.replicas : '')
|
||||
const t = infratype.match(/docker/i) ? "docker" : null
|
||||
const t2 = !t && infratype.match(/lxd/i) ? "lxd" : t
|
||||
e.classList.add(t2)
|
||||
}
|
||||
},
|
||||
{
|
||||
target : "button[name=codegen]",
|
||||
apply : (e,d)=>e.setAttribute("data-index", d.id),
|
||||
on_click: (ev)=>{
|
||||
const id = ev.target.getAttribute("data-index")
|
||||
const langsel = ev.target.parentElement.querySelector("select[name=language-selector]")
|
||||
const lang = langsel.value
|
||||
const ext = langsel.selectedOptions[0].getAttribute("data-ext")
|
||||
this.generateCode(id, lang, `${id}.${ext}`)
|
||||
}
|
||||
},
|
||||
{
|
||||
target : "a[name=direct_link_execution]",
|
||||
apply : (e,d)=>e.href = window.location.origin + window.location.pathname + "?execution=" + d.id
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
window.customElements.define('d4s-ccp-executionhistory', CCPExecutionHistory);
|
||||
|
|
|
|||
Loading…
Reference in New Issue