gCubeSystem
/
web-components
16
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 2 Wiki Activity

Improved output UI

This commit is contained in:
dcore94 2024-11-29 10:37:50 +01:00
parent 034370f577
commit 7e9558f1bf
1 changed files with 25 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
ccp/js/executionhistorycontroller.js
View File

@ -180,8 +180,12 @@ class CCPExecutionHistory extends HTMLElement {
</div>
<div name="logterminalcontainer" style="margin:5px 0 5px 0">
</div>
<ul>
<li></li>
<ul class="my-3" style="list-style:none;padding-left:0;max-height:8rem; overflow-y:auto; overflow-x:hidden">
<label class="form-check form-switch form-check-inline">
<span class="mr-2">Metadata</span>
<input class="form-check-input" type="checkbox" name="toggle_meta">
</label>
<li style="text-overflow: ellipsis;white-space:nowrap;overflow-x: clip;"></li>
</ul>
<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")}">
@ -967,13 +971,20 @@ class CCPExecutionHistory extends HTMLElement {
},
{
target : "ul",
on_click: ev=>{
const tgt = ev.target
const ul = ev.currentTarget
if(tgt.getAttribute("name") === "toggle_meta"){
Array.prototype.slice.call(ul.querySelectorAll("li.metadata")).forEach(e=>e.classList.toggle("d-none"))
}
},
recurse : [
{
target : "li",
"in" : (e,d)=>{
const resources = d.resources ? d.resources : []
return resources.map(l=>{
return { href : this.#serviceurl + "/executions/" + d.id + "/" + l.path, path : l.path}
return { id: d.id, size: l.size, href : this.#serviceurl + "/executions/" + d.id + "/" + l.path, path : l.path}
})
},
on_click : ev=>{
@ -982,7 +993,17 @@ class CCPExecutionHistory extends HTMLElement {
this.download(href, name)
},
apply : (e,d)=>{
e.innerHTML = `<a href="${d.href}" onclick="event.preventDefault()">${d.path}</a>`
const regexp = /^metadata.+|^auth.+|.+\/ccp-entrypoint.sh$|.+\/ccpenv$|.+\/docker-compose.yaml/
var size = ""
if(d.path.match(regexp)){
e.classList.add("metadata")
e.classList.add("d-none")
}else if(d.size){
const s = Number(d.size)
var i = s === 0 ? 0 : Math.floor(Math.log(s) / Math.log(1024));
size = `[${+((s / Math.pow(1024, i)).toFixed(2)) * 1 + ' ' + ['B', 'kB', 'MB', 'GB', 'TB'][i]}]`
}
e.innerHTML = `<small class="text-muted">${size} </small><a href="${d.href}" onclick="event.preventDefault()">${d.path}</a>`
}
}
]