refactored code

ccp/js/infrastructurelistcontroller.js

@@ -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-infrastructure-list{
-      
+      list-style: none;
-    }
-    .ccp_toolbar_button {
-      padding: .3rem;
-      line-height: 1rem;
-    }
-    .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">
+      <div class="ccp-infrastructure-controller">
-        <link href="https://cdn.dev.d4science.org/ccp/css/common.css" rel="stylesheet">
+        ${this.#style}
-        <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="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);