added execution history controller
This commit is contained in:
dcore94
parent
90b8348d8c
commit
2c4352c7c5
|
|
@ -0,0 +1,261 @@
|
||||||
|
class CCPExecutionHistory extends HTMLElement {
|
||||||
|
|
||||||
|
#boot = null;
|
||||||
|
#rootdoc = null;
|
||||||
|
#serviceurl = null;
|
||||||
|
#broadcasturl = null;
|
||||||
|
#executions = [];
|
||||||
|
#socket = null;
|
||||||
|
|
||||||
|
constructor(){
|
||||||
|
super()
|
||||||
|
this.#boot = document.querySelector("d4s-boot-2")
|
||||||
|
this.#rootdoc = this.attachShadow({ "mode" : "open"})
|
||||||
|
this.#serviceurl = this.getAttribute("serviceurl")
|
||||||
|
this.#broadcasturl = this.getAttribute("broadcasturl")
|
||||||
|
if(!this.#broadcasturl){
|
||||||
|
this.#broadcasturl = this.#serviceurl.replace(/^http/, "ws")
|
||||||
|
}
|
||||||
|
this.#broadcasturl = this.#broadcasturl + "/ws/notification"
|
||||||
|
this.connectNewExecution()
|
||||||
|
this.connectBroadcast()
|
||||||
|
}
|
||||||
|
|
||||||
|
connectedCallback(){
|
||||||
|
this.#rootdoc.innerHTML = this.render()
|
||||||
|
this.refreshExecutions()
|
||||||
|
}
|
||||||
|
|
||||||
|
render(){
|
||||||
|
return `
|
||||||
|
<style>
|
||||||
|
.noselect{
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
.lxd{
|
||||||
|
background-color: #dd4814;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
.docker{
|
||||||
|
color: white;
|
||||||
|
background-color: #2496ed;
|
||||||
|
}
|
||||||
|
.ccp-toolbar-button {
|
||||||
|
font-weight: bold;
|
||||||
|
padding: 0.3rem !important;
|
||||||
|
line-height: .8rem !important;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.ccp-toolbar-button svg {
|
||||||
|
fill: white;
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<template id="EXECUTIOM_LIST_TEMPLATE">
|
||||||
|
<ol name="ccp_execution_list" class="ccp-execution-list list-group">
|
||||||
|
<li class="ccp-execution-item list-group-item" style="border: none">
|
||||||
|
<details open>
|
||||||
|
<summary class="noselect">
|
||||||
|
<span name="runtime" class="badge"></span>
|
||||||
|
<h5 style="display:inline"></h5>
|
||||||
|
<span name="status" class="badge"></span>
|
||||||
|
<button data-index="0" name="delete" title="Delete" class="btn btn-danger ccp-toolbar-button">
|
||||||
|
<svg viewBox="0 0 24 24">
|
||||||
|
<path d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z"></path>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</summary>
|
||||||
|
<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>
|
||||||
|
<ul class="list-group">
|
||||||
|
<li class="list-group-item" style="border: none"></li>
|
||||||
|
</ul>
|
||||||
|
</details>
|
||||||
|
</li>
|
||||||
|
</ol>
|
||||||
|
</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">
|
||||||
|
<ol name="ccp_execution_list" style="display:none"></ol>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
|
||||||
|
refreshExecution(id){
|
||||||
|
this.#boot.secureFetch(`${this.#serviceurl}/executions?id=${id}`).then(reply =>{
|
||||||
|
if(reply.status === 200) return reply.json();
|
||||||
|
else throw `Unable to load execution ${id}`
|
||||||
|
}).then(data=>{
|
||||||
|
const exec = data[0]
|
||||||
|
for(var i=0; i < this.#executions.length; i++){
|
||||||
|
if(this.#executions[i].id == exec.id){
|
||||||
|
this.#executions[i] = exec
|
||||||
|
break
|
||||||
|
}
|
||||||
|
if(i === this.#executions.length){
|
||||||
|
this.#executions = data.concat(this.#executions)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
BSS.apply(this.execution_list_bss, this.#rootdoc)
|
||||||
|
}).catch(err=>{ console.error(err)})
|
||||||
|
}
|
||||||
|
|
||||||
|
deleteExecution(id){
|
||||||
|
this.#boot.secureFetch(`${this.#serviceurl}/executions/${id}`, { method: "DELETE"}).then(reply =>{
|
||||||
|
if(reply.status === 200) this.refreshExecutions();
|
||||||
|
else throw `Unable to delete execution ${id}`
|
||||||
|
}).catch(err=>{ console.error(err)})
|
||||||
|
}
|
||||||
|
|
||||||
|
refreshExecutions(){
|
||||||
|
this.#boot.secureFetch(`${this.#serviceurl}/executions`).then(reply =>{
|
||||||
|
if(reply.status === 200) return reply.json();
|
||||||
|
else throw "Unable to load executions"
|
||||||
|
}).then(data=>{
|
||||||
|
this.#executions = data
|
||||||
|
BSS.apply(this.execution_list_bss, this.#rootdoc)
|
||||||
|
}).catch(err=>{ console.error(err)})
|
||||||
|
}
|
||||||
|
|
||||||
|
connectNewExecution(){
|
||||||
|
document.addEventListener("newexecution", ev=>{
|
||||||
|
this.#executions = [ {id: ev.detail } ].concat(this.#executions)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
connectBroadcast(){
|
||||||
|
this.#socket = new WebSocket(this.#broadcasturl + "/executions");
|
||||||
|
this.#socket.onmessage = event=>{
|
||||||
|
const data = JSON.parse(event.data)
|
||||||
|
let exec = this.#executions.filter(e=>e.id === data.jobID)[0]
|
||||||
|
if(exec){
|
||||||
|
this.refreshExecution(exec.id)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
window.setInterval( ()=>this.#socket.send("ping"), 30000)
|
||||||
|
}
|
||||||
|
|
||||||
|
download(url, name) {
|
||||||
|
this.#boot.secureFetch(url).then(reply => {
|
||||||
|
if (reply.status !== 200) {
|
||||||
|
throw "Unable to download"
|
||||||
|
}
|
||||||
|
return reply.blob()
|
||||||
|
|
||||||
|
}).then(blob => {
|
||||||
|
const objectURL = URL.createObjectURL(blob)
|
||||||
|
var tmplnk = document.createElement("a")
|
||||||
|
tmplnk.download = name
|
||||||
|
tmplnk.href = objectURL
|
||||||
|
//tmplnk.target="_blank"
|
||||||
|
document.body.appendChild(tmplnk)
|
||||||
|
tmplnk.click()
|
||||||
|
document.body.removeChild(tmplnk)
|
||||||
|
|
||||||
|
}).catch(err => console.error(err))
|
||||||
|
}
|
||||||
|
|
||||||
|
execution_list_bss = {
|
||||||
|
template : "#EXECUTIOM_LIST_TEMPLATE",
|
||||||
|
target : "ol[name=ccp_execution_list]",
|
||||||
|
in : ()=>{ return {executions : this.#executions} },
|
||||||
|
recurse:[
|
||||||
|
{
|
||||||
|
target : "li",
|
||||||
|
in : (e,d)=>d.executions,
|
||||||
|
apply: (e,d,i)=>e.setAttribute("data-index", i),
|
||||||
|
on_click: ev=>{
|
||||||
|
if(ev.target.getAttribute("name") === "delete"){
|
||||||
|
if(window.confirm("Confirm deletion of this execution?")){
|
||||||
|
const index = Number(ev.target.getAttribute("data-index"))
|
||||||
|
this.deleteExecution(this.#executions[index].id)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
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=runtime]",
|
||||||
|
apply : (e,d)=>{
|
||||||
|
e.classList.add(d.infrastructuretype)
|
||||||
|
e.title = e.alt = `${d.runtime} (image: ${d.runtimeimage}) on ${d.infrastructure}`
|
||||||
|
e.textContent = d.runtime
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
target : "h5",
|
||||||
|
apply : (e,d)=>{
|
||||||
|
e.textContent = `${d.method} v. ${d.methodversion}`
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
target : "span[name=updated]",
|
||||||
|
apply : (e,d)=>{
|
||||||
|
const dt = new Date(d.updated)
|
||||||
|
e.textContent = `Last update ${dt.toLocaleDateString()} @ ${dt.toLocaleTimeString()}`
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
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 === "failure") e.classList.add("badge-danger");
|
||||||
|
else e.classList.add("badge-secondary");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
target : "span[name=message]",
|
||||||
|
apply : (e,d)=>{
|
||||||
|
if(d.message){
|
||||||
|
e.textContent = d.message
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
target : "ul",
|
||||||
|
recurse : [
|
||||||
|
{
|
||||||
|
target : "li",
|
||||||
|
"in" : (e,d)=>{
|
||||||
|
return d.resources.map(l=>{
|
||||||
|
return { href : this.#serviceurl + "/executions/" + d.id + "/" + l.path, path : l.path}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
on_click : ev=>{
|
||||||
|
const href = ev.currentTarget.bss_input.data.href
|
||||||
|
const name = ev.currentTarget.bss_input.data.path
|
||||||
|
this.download(href, name)
|
||||||
|
},
|
||||||
|
apply : (e,d)=>{
|
||||||
|
e.innerHTML = `<a href="${d.href}" onclick="event.preventDefault()">${d.path}</a>`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
window.customElements.define('d4s-ccp-executionhistory', CCPExecutionHistory);
|
||||||
Loading…
Reference in New Issue