132 lines
4.2 KiB
JavaScript
132 lines
4.2 KiB
JavaScript
class CCPExecutionMonitor extends HTMLElement {
|
|
|
|
#boot = null;
|
|
#rootdoc = null;
|
|
#broadcasturl = "ws://nubis1.int.d4science.net:8989/ws/notification";
|
|
#executions = [];
|
|
#socket = null;
|
|
|
|
constructor(){
|
|
super()
|
|
this.#boot = document.querySelector("d4s-boot-2")
|
|
this.#rootdoc = this.attachShadow({ "mode" : "open"})
|
|
this.connectBroadcast()
|
|
}
|
|
|
|
connectedCallback(){
|
|
this.#rootdoc.innerHTML = this.render()
|
|
}
|
|
|
|
render(){
|
|
return `
|
|
<template id="EXECUTIOM_LIST_TEMPLATE">
|
|
<ol name="ccp_execution_list" class="ccp-execution-list" class="ccp-execution-list">
|
|
<li class="ccp-execution-item">
|
|
<details open>
|
|
<summary>
|
|
<h5 style="display:inline"></h5>
|
|
<span name="status" class="badge"></span>
|
|
</summary>
|
|
<p name="message" class="status-message font-weight-light font-italic" style="margin-top:revert"></span>
|
|
<ul class="list-group">
|
|
<li class="list-group-item"></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">
|
|
<h3>Execution monitor</h3>
|
|
<ol name="ccp_execution_list" style="display:none"></ol>
|
|
`
|
|
}
|
|
|
|
addExecution(execution){
|
|
this.#executions.push(execution)
|
|
this.refreshExecution(execution)
|
|
}
|
|
|
|
refreshExecution(execution){
|
|
this.#boot.secureFetch(execution.self).then(reply =>{
|
|
if(reply.status === 200) return reply.json();
|
|
else throw "Unable to load job links" + reply.text
|
|
}).then(data=>{
|
|
execution.links = data
|
|
BSS.apply(this.execution_list_bss, this.#rootdoc)
|
|
}).catch(err=>{ console.error(err)})
|
|
}
|
|
|
|
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.jobID === data.jobID)[0]
|
|
if(exec){
|
|
exec.events.push(data)
|
|
if(!exec.self) exec.self = data.links[0].href;
|
|
this.refreshExecution(exec)
|
|
}
|
|
}
|
|
window.setInterval( ()=>this.#socket.send("ping"), 30000)
|
|
}
|
|
|
|
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)=>{
|
|
if(d.events && d.events.length > 0){
|
|
e.alt = e.title = (new Date(d.events[d.events.length - 1].updated)).toLocaleString()
|
|
}
|
|
},
|
|
recurse : [
|
|
{
|
|
target : "h5",
|
|
apply : (e,d)=>{
|
|
e.textContent = d.method
|
|
}
|
|
},
|
|
{
|
|
target : "span[name=status]",
|
|
apply : (e,d)=>{
|
|
if(d.events && d.events.length > 0){
|
|
const status = d.events[d.events.length - 1].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 : ".status-message",
|
|
apply : (e,d)=>{
|
|
if(d.events && d.events.length > 0){
|
|
e.textContent = d.events[d.events.length - 1].message
|
|
}
|
|
}
|
|
},
|
|
{
|
|
target : "ul",
|
|
recurse : [
|
|
{
|
|
target : "li",
|
|
"in" : (e,d)=>{return d.links.map(l=>{ return { href : d.self + "/" + l.path, path : l.path} })},
|
|
apply : (e,d)=>{
|
|
console.log("applying", e, d)
|
|
e.innerHTML = `<a href="${d.href}">${d.path}</a>`
|
|
}
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
}
|
|
window.customElements.define('d4s-ccp-executionmonitor', CCPExecutionMonitor); |