refactored code
This commit is contained in:
dcore94
parent
b0cad84a5b
commit
76d527215b
|
|
@ -4,49 +4,26 @@ class CCPInfrastructureList extends HTMLElement{
|
|||
#socket;
|
||||
#interval = null;
|
||||
#infrastructures;
|
||||
#runtimes;
|
||||
#rootdoc;
|
||||
|
||||
#style = `
|
||||
<link rel="stylesheet" href="https://cdn.dev.d4science.org/ccp/css/common.css"></link>
|
||||
<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 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>
|
||||
<style>
|
||||
.ccp_infrastructure_controller{
|
||||
|
||||
}
|
||||
.ccp_toolbar_button {
|
||||
padding: .3rem;
|
||||
line-height: 1rem;
|
||||
}
|
||||
.ccp_infrastructure_list{
|
||||
list-style:none;
|
||||
.ccp-infrastructure-list{
|
||||
list-style: none;
|
||||
padding-left: 1rem;
|
||||
user-select: none;
|
||||
}
|
||||
.ccp_infrastructure_item{
|
||||
.ccp-infrastructure-item{
|
||||
padding: .3rem 0 .3rem 0;
|
||||
}
|
||||
.ccp_infrastructure_list .lxd{
|
||||
.ccp-infrastructure-list .lxd{
|
||||
background-color: #dd4814;
|
||||
}
|
||||
.ccp_infrastructure_list .docker{
|
||||
.ccp-infrastructure-list .docker{
|
||||
background-color: #2496ed;
|
||||
}
|
||||
.ccp_runtime_list{
|
||||
list-style:none;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
.ccp_runtime_item{
|
||||
padding: .3rem 0 .3rem 0;
|
||||
}
|
||||
.ccp_instance_list{
|
||||
list-style:none;
|
||||
}
|
||||
.ccp_instance_item{
|
||||
padding: 0.3rem 0 0.3rem 1rem;
|
||||
font-style: italic;
|
||||
color: 888888;
|
||||
}
|
||||
</style>
|
||||
`;
|
||||
|
||||
|
|
@ -81,20 +58,6 @@ class CCPInfrastructureList extends HTMLElement{
|
|||
}).catch(err=>{
|
||||
alert(err)
|
||||
})
|
||||
|
||||
/*const prom2 = this.#boot.secureFetch(this.#serviceurl + "/runtimes").
|
||||
then(resp=>{
|
||||
if(resp.status !== 200) throw "Unable to fetch runtimes";
|
||||
return resp.json()
|
||||
}).then(data=>{
|
||||
this.#runtimes = data
|
||||
}).catch(err=>{
|
||||
alert(err)
|
||||
})
|
||||
|
||||
Promise.all([prom1, prom2]).then(results=>{
|
||||
this.showList()
|
||||
})*/
|
||||
}
|
||||
|
||||
refreshInfrastructures(){
|
||||
|
|
@ -107,15 +70,8 @@ class CCPInfrastructureList extends HTMLElement{
|
|||
return;
|
||||
}
|
||||
this.#rootdoc.innerHTML = `
|
||||
<div class="ccp_infrastructure_controller">
|
||||
<link href="https://cdn.dev.d4science.org/ccp/css/common.css" rel="stylesheet">
|
||||
<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">
|
||||
<style>
|
||||
.ccp-infrastructure-list{
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
</style>
|
||||
<div class="ccp-infrastructure-controller">
|
||||
${this.#style}
|
||||
<div class="card">
|
||||
<div class="card-header" style="padding:0.5rem">
|
||||
<div class="ccp-toolbar-header">
|
||||
|
|
@ -145,24 +101,12 @@ class CCPInfrastructureList extends HTMLElement{
|
|||
break;
|
||||
}
|
||||
})
|
||||
|
||||
/*const forms = Array.prototype.slice.call(this.#rootdoc.querySelectorAll(".ccp_runtime_builder"))
|
||||
forms.forEach(f=>{
|
||||
f.addEventListener("submit", ev=>{
|
||||
ev.stopPropagation()
|
||||
ev.preventDefault()
|
||||
const sel = ev.target.querySelector("select")
|
||||
let url = ev.target.action + sel.value
|
||||
this.#boot.secureFetch(url, { method : ev.target.method})
|
||||
return false
|
||||
})
|
||||
})*/
|
||||
}
|
||||
|
||||
showInfrastructures(){
|
||||
return this.#infrastructures.map(i => {
|
||||
return `
|
||||
<li class="ccp_infrastructure_item" title="${i.description}">
|
||||
<li class="ccp-infrastructure-item" title="${i.description}">
|
||||
<details>
|
||||
<summary>
|
||||
<span>${i.name}</span>
|
||||
|
|
@ -175,46 +119,6 @@ class CCPInfrastructureList extends HTMLElement{
|
|||
}).join("\n")
|
||||
}
|
||||
|
||||
/* showDeployableRuntimes(infra){
|
||||
const alreadydeployed = infra.runtimes.map(r=>r["descriptor-id"])
|
||||
infra.available_runtimes = infra.available_runtimes ? infra.available_runtimes : []
|
||||
const options = infra.available_runtimes.filter(r=>{
|
||||
return infra.type === r.type && alreadydeployed.indexOf(r.id) === -1
|
||||
}).map(r=>{
|
||||
return `<option value="${r.name}" title="${r.description}">${r.name}</option>`
|
||||
}).join("\n")
|
||||
return `
|
||||
<div style="padding-left:1rem">
|
||||
<form class="ccp_runtime_builder" action="${this.#serviceurl}/infrastructures/${infra.id}/runtime/" method="POST">
|
||||
<select name="runtime_selector" style="padding:.2rem;margin:5px;border:none">
|
||||
${options}
|
||||
</select>
|
||||
<button type="submit" class="btn btn-primary ccp_toolbar_button" title="Deploy runtime">+</button>
|
||||
</form>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
|
||||
showRuntimes(infra){
|
||||
return infra.runtimes.map(r =>{
|
||||
return `
|
||||
<li class="ccp_runtime_item" title="${r.name}">
|
||||
<details>
|
||||
<summary>${r.name}</summary>
|
||||
</details>
|
||||
</li>
|
||||
`
|
||||
}).join("\n")
|
||||
}
|
||||
|
||||
showInstances(runtime){
|
||||
return runtime.instances.map(i =>{
|
||||
return `
|
||||
<li class="ccp_instance_item">${i.name}</li>
|
||||
`
|
||||
}).join("\n")
|
||||
}*/
|
||||
|
||||
showAge(infra){
|
||||
const age = Math.floor(((new Date()) - (new Date(infra.date))) / 3600000)
|
||||
var cls = "badge-success"
|
||||
|
|
@ -230,7 +134,9 @@ class CCPInfrastructureList extends HTMLElement{
|
|||
}
|
||||
|
||||
showType(infra){
|
||||
return `<span class="badge badge-secondary ${infra.type}" title="${infra.type}">${infra.type}</span>`
|
||||
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>`
|
||||
}
|
||||
|
||||
connectBroadcast(){
|
||||
|
|
@ -248,16 +154,6 @@ class CCPInfrastructureList extends HTMLElement{
|
|||
}
|
||||
}, 30000)
|
||||
}
|
||||
|
||||
/*getCompatibleRuntimes(rts){
|
||||
const available = Object.keys(this.#infrastructures).reduce((acc, i) => {
|
||||
const compatiblerts = this.#infrastructures[i].runtimes.
|
||||
filter(r=>rts.indexOf(r["descriptor-id"]) >= 0).
|
||||
map(cr=>{ return { runtime : cr, infrastructure : this.#infrastructures[i] } })
|
||||
return acc.concat(compatiblerts)
|
||||
}, [])
|
||||
return available
|
||||
}*/
|
||||
}
|
||||
|
||||
window.customElements.define('d4s-ccp-infrastructurelist', CCPInfrastructureList);
|
||||
window.customElements.define('d4s-ccp-infrastructurelist', CCPInfrastructureList);
|
||||
Loading…
Reference in New Issue