gCubeSystem
/
cdn-experiments
16
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity

simplified infrastructures widget

This commit is contained in:
dcore94 2023-03-28 11:27:45 +02:00
parent e08c990cc3
commit d94d3b97ae
1 changed files with 28 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
ccp/js/infrastructurelistcontroller.js
View File

@ -71,7 +71,7 @@ class CCPInfrastructureList extends HTMLElement{
} }
fetchInfrastructures(){ fetchInfrastructures(){
const prom1 = this.#boot.secureFetch(this.#serviceurl + "/infrastructures/cache"). const prom1 = this.#boot.secureFetch(this.#serviceurl + "/infrastructures").
then(resp=>{ then(resp=>{
if(resp.status !== 200) throw "Unable to fetch infrastructure cache"; if(resp.status !== 200) throw "Unable to fetch infrastructure cache";
return resp.json() return resp.json()
@ -98,7 +98,7 @@ class CCPInfrastructureList extends HTMLElement{
} }
refreshInfrastructures(){ refreshInfrastructures(){
this.#boot.secureFetch(this.#serviceurl + "/infrastructures/cache", { method : "HEAD"}) this.#boot.secureFetch(this.#serviceurl + "/infrastructures", { method : "HEAD"})
} }
showList(){ showList(){
@ -108,11 +108,26 @@ class CCPInfrastructureList extends HTMLElement{
} }
this.#rootdoc.innerHTML = ` this.#rootdoc.innerHTML = `
<div class="ccp_infrastructure_controller"> <div class="ccp_infrastructure_controller">
${this.#style} <link href="https://cdn.dev.d4science.org/ccp/css/common.css" rel="stylesheet">
${this.toolbar()} <div class="card">
<ul class="ccp_infrastructure_list"> <div class="card-header" style="padding:0.5rem">
${this.showInfrastructures()} <div class="ccp-toolbar-header">
</ul> <div>
<span name="header" class="mr-2">Infrastructures</span>
</div>
<div class="ccp-toolbar-right">
<button name="refresh" class="btn btn-primary ccp_toolbar_button" title="Refresh">
<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">
<ul class="ccp_infrastructure_list">
${this.showInfrastructures()}
</ul>
</div>
</div>
</div> </div>
` `
this.#rootdoc.querySelector(".ccp_infrastructure_toolbar").addEventListener("click", ev=>{ this.#rootdoc.querySelector(".ccp_infrastructure_toolbar").addEventListener("click", ev=>{
@ -124,7 +139,7 @@ class CCPInfrastructureList extends HTMLElement{
} }
}) })
const forms = Array.prototype.slice.call(this.#rootdoc.querySelectorAll(".ccp_runtime_builder")) /*const forms = Array.prototype.slice.call(this.#rootdoc.querySelectorAll(".ccp_runtime_builder"))
forms.forEach(f=>{ forms.forEach(f=>{
f.addEventListener("submit", ev=>{ f.addEventListener("submit", ev=>{
ev.stopPropagation() ev.stopPropagation()
@ -134,15 +149,7 @@ class CCPInfrastructureList extends HTMLElement{
this.#boot.secureFetch(url, { method : ev.target.method}) this.#boot.secureFetch(url, { method : ev.target.method})
return false return false
}) })
}) })*/
}
toolbar(){
return `
<div class="ccp_infrastructure_toolbar">
<button name="refresh" class="btn btn-primary ccp_toolbar_button" title="Refresh">&#8634;</button>
</div>
`
} }
showInfrastructures(){ showInfrastructures(){
@ -155,17 +162,13 @@ class CCPInfrastructureList extends HTMLElement{
${this.showAge(i)} ${this.showAge(i)}
${this.showType(i)} ${this.showType(i)}
</summary> </summary>
${this.showDeployableRuntimes(i)}
<ul class="ccp_runtime_list">
${this.showRuntimes(i)}
</ul>
</details> </details>
</li> </li>
` `
}).join("\n") }).join("\n")
} }
showDeployableRuntimes(infra){ /* showDeployableRuntimes(infra){
const alreadydeployed = infra.runtimes.map(r=>r["descriptor-id"]) const alreadydeployed = infra.runtimes.map(r=>r["descriptor-id"])
infra.available_runtimes = infra.available_runtimes ? infra.available_runtimes : [] infra.available_runtimes = infra.available_runtimes ? infra.available_runtimes : []
const options = infra.available_runtimes.filter(r=>{ const options = infra.available_runtimes.filter(r=>{
@ -191,9 +194,6 @@ class CCPInfrastructureList extends HTMLElement{
<li class="ccp_runtime_item" title="${r.name}"> <li class="ccp_runtime_item" title="${r.name}">
<details> <details>
<summary>${r.name}</summary> <summary>${r.name}</summary>
<ul class="ccp_instance_list">
${this.showInstances(r)}
</ul>
</details> </details>
</li> </li>
` `
@ -206,7 +206,7 @@ class CCPInfrastructureList extends HTMLElement{
<li class="ccp_instance_item">${i.name}</li> <li class="ccp_instance_item">${i.name}</li>
` `
}).join("\n") }).join("\n")
} }*/
showAge(infra){ showAge(infra){
const age = Math.floor(((new Date()) - (new Date(infra.date))) / 3600000) const age = Math.floor(((new Date()) - (new Date(infra.date))) / 3600000)
@ -242,7 +242,7 @@ class CCPInfrastructureList extends HTMLElement{
}, 30000) }, 30000)
} }
getCompatibleRuntimes(rts){ /*getCompatibleRuntimes(rts){
const available = Object.keys(this.#infrastructures).reduce((acc, i) => { const available = Object.keys(this.#infrastructures).reduce((acc, i) => {
const compatiblerts = this.#infrastructures[i].runtimes. const compatiblerts = this.#infrastructures[i].runtimes.
filter(r=>rts.indexOf(r["descriptor-id"]) >= 0). filter(r=>rts.indexOf(r["descriptor-id"]) >= 0).
@ -250,7 +250,7 @@ class CCPInfrastructureList extends HTMLElement{
return acc.concat(compatiblerts) return acc.concat(compatiblerts)
}, []) }, [])
return available return available
} }*/
} }
window.customElements.define('d4s-ccp-infrastructurelist', CCPInfrastructureList); window.customElements.define('d4s-ccp-infrastructurelist', CCPInfrastructureList);