cdn-experiments/ccp/js/infrastructurelistcontrolle...

159 lines
4.9 KiB
JavaScript
Raw Normal View History

2022-03-29 16:06:46 +02:00
class CCPInfrastructureList extends HTMLElement{
#boot;
2022-04-12 19:51:38 +02:00
#socket;
2023-03-13 17:36:15 +01:00
#interval = null;
2022-06-27 18:52:48 +02:00
#infrastructures;
#rootdoc;
#style = `
<link rel="stylesheet" href="https://cdn.dev.d4science.org/ccp/css/common.css"></link>
2023-03-28 16:05:16 +02:00
<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"></link>
2022-06-27 18:52:48 +02:00
<style>
2023-03-28 16:05:16 +02:00
.ccp-infrastructure-list{
list-style: none;
2022-06-27 18:52:48 +02:00
padding-left: 1rem;
user-select: none;
}
2023-03-28 16:05:16 +02:00
.ccp-infrastructure-item{
2022-06-27 18:52:48 +02:00
padding: .3rem 0 .3rem 0;
}
2023-03-28 16:05:16 +02:00
.ccp-infrastructure-list .lxd{
2022-06-27 18:52:48 +02:00
background-color: #dd4814;
}
2023-03-28 16:05:16 +02:00
.ccp-infrastructure-list .docker{
2022-06-27 18:52:48 +02:00
background-color: #2496ed;
}
</style>
`;
2022-03-29 16:06:46 +02:00
#serviceurl;
#broadcasturl;
2022-03-29 16:06:46 +02:00
constructor(){
super()
this.#boot = document.querySelector("d4s-boot-2")
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"
2022-06-27 18:52:48 +02:00
this.#rootdoc = this.attachShadow({ "mode" : "open"})
2022-04-12 19:51:38 +02:00
}
connectedCallback(){
2022-06-27 18:52:48 +02:00
this.connectBroadcast()
this.fetchInfrastructures()
2022-04-12 19:51:38 +02:00
}
fetchInfrastructures(){
2023-03-28 11:27:45 +02:00
const prom1 = this.#boot.secureFetch(this.#serviceurl + "/infrastructures").
2022-06-27 18:52:48 +02:00
then(resp=>{
if(resp.status !== 200) throw "Unable to fetch infrastructures";
2022-06-27 18:52:48 +02:00
return resp.json()
}).then(data=>{
this.#infrastructures = data
2022-09-08 16:03:28 +02:00
this.showList()
2022-06-27 18:52:48 +02:00
}).catch(err=>{
alert(err)
})
2022-03-29 16:06:46 +02:00
}
2022-06-27 18:52:48 +02:00
refreshInfrastructures(){
2023-03-28 11:27:45 +02:00
this.#boot.secureFetch(this.#serviceurl + "/infrastructures", { method : "HEAD"})
2022-06-27 18:52:48 +02:00
}
showList(){
if(this.getAttribute("render") !== "true") {
this.#rootdoc.innerHTML = ""
return;
}
this.#rootdoc.innerHTML = `
2023-03-28 16:05:16 +02:00
<div class="ccp-infrastructure-controller">
${this.#style}
2023-03-28 11:27:45 +02:00
<div class="card">
<div class="card-header" style="padding:0.5rem">
<div class="ccp-toolbar-header">
<div>
<span name="header" class="mr-2">Infrastructures</span>
</div>
2023-03-28 11:49:21 +02:00
<div class="ccp-toolbar-right ccp-infrastructure-toolbar">
2023-03-28 11:47:33 +02:00
<button name="refresh" class="btn btn-primary ccp-toolbar-button" title="Refresh">
2023-03-28 11:27:45 +02:00
<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"></path></svg>
</button>
</div>
</div>
</div>
<div class="card-body">
2023-03-28 11:49:21 +02:00
<ul class="ccp-infrastructure-list">
2023-03-28 11:27:45 +02:00
${this.showInfrastructures()}
</ul>
</div>
</div>
2022-06-27 18:52:48 +02:00
</div>
`
2023-03-28 11:49:21 +02:00
this.#rootdoc.querySelector(".ccp-infrastructure-toolbar").addEventListener("click", ev=>{
2022-06-27 18:52:48 +02:00
const evname = ev.target.getAttribute("name")
switch(evname){
case "refresh":
this.refreshInfrastructures();
break;
}
})
}
showInfrastructures(){
return this.#infrastructures.map(i => {
return `
2023-03-28 16:05:16 +02:00
<li class="ccp-infrastructure-item" title="${i.description}">
2022-06-27 18:52:48 +02:00
<details>
<summary>
<span>${i.name}</span>
${this.showAge(i)}
${this.showType(i)}
</summary>
</details>
</li>
`
}).join("\n")
}
showAge(infra){
const age = Math.floor(((new Date()) - (new Date(infra.date))) / 3600000)
var cls = "badge-success"
var agetext = "fresh"
if(age > 24){
cls = "badge-warning";
agetext = "aged"
} else if (age > 72){
cls = "badge-secondary"
agetext = "old"
}
return `<span class="badge ${cls}" name="age" title="${age} hours">${agetext}</span>`
}
showType(infra){
2023-03-28 16:05:16 +02:00
const t = infra.type.match(/docker/i) ? "docker" : null
const t2 = !t && infra.type.match(/lxd/i) ? "lxd" : t
return `<span class="badge badge-secondary ${t2}" title="${infra.type}">${infra.type}</span>`
2022-06-27 18:52:48 +02:00
}
connectBroadcast(){
2022-04-12 19:51:38 +02:00
this.#socket = new WebSocket(this.#broadcasturl + "/infrastructures");
this.#socket.onmessage = event=>{
2022-06-27 18:52:48 +02:00
this.fetchInfrastructures()
2022-04-12 19:51:38 +02:00
}
2023-03-13 17:36:15 +01:00
this.#interval = window.setInterval( ()=>{
if(this.#socket.readyState === 3){
this.#socket.close()
window.clearInterval(this.#interval)
this.connectBroadcast()
}else{
this.#socket.send("ping")
}
}, 30000)
2022-04-12 19:51:38 +02:00
}
2022-03-29 16:06:46 +02:00
}
2023-03-28 16:05:16 +02:00
window.customElements.define('d4s-ccp-infrastructurelist', CCPInfrastructureList);