removed one more service call

ccp/executionformfragment.html

@@ -13,8 +13,42 @@
         <span class="fas fa-spinner fa-spin"></span>
       </div>
       <form name="execution_form">
-        <div class="ccp-inputs">
+        <div class="card">
-          <div class="form-group"></div>
+          <div class="card-header">
+            <h5>Inputs</h5>
+          </div>
+          <div class="card-body ccp-inputs">
+            <div class="card-body">
+              <div class="form-group"></div>
+            </div>
+          </div>        
+        </div>
+        <div class="card">
+          <div class="card-header">
+            <h5>Outputs</h5>
+          </div>
+          <div class="card-body">
+            <div class="form-row ccp-outputs">
+              <div class="col form-group"></div>
+            </div>
+          </div>
+        </div>
+        <div class="card">
+          <div class="card-header">
+            <h5>Runtimes <span alt="refresh" title="refresh" style="cursor:pointer" name="refresh-runtimes" class="text-info">&#8634;</span></h5>
+          </div>
+          <div class="card-body">
+            <div class="ccp-runtimes">
+              <div class="form-row">
+                <select class="form-control">
+                  <option value=""></option>
+                </select>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="form-group">
+          <button id="execute_method_button" class="btn btn-info">Execute</button>
         </div>
  	<button class="btn btn-info">Execute</button>
       </form>

ccp/js/executionformcontroller.js

@@ -4,14 +4,17 @@ class CCPExecutionForm extends HTMLElement{
   #rootdoc;
   #data;
   #method;
+  #infrastructurecontroller;
   
   #serviceurl = "https://nubis1.int.d4science.net:8080" 
-  #cdnurl = "https://nubis1.int.d4science.net:8080/ccp/executionformfragment.html"
+  //#cdnurl = "https://nubis1.int.d4science.net:8080/ccp/executionformfragment.html"
+  #cdnurl = "http://d4science-cdn-public:8984/resources/ccp/executionformfragment.html"
   
   constructor(){
     super()
     this.#boot = document.querySelector("d4s-boot-2")
     this.#rootdoc = this.attachShadow({ "mode" : "open"})
+    this.#infrastructurecontroller = document.querySelector("d4s-ccp-infrastructurelist")
     this.fetchMarkup()
   }
   
@@ -41,12 +44,16 @@ class CCPExecutionForm extends HTMLElement{
   }
   
   loadMethod(){
-    this.#boot.service(this.#serviceurl + "/processes/" + this.#method, "GET", null, 
+    this.#boot.secureFetch(this.#serviceurl + "/processes/" + this.#method).then(
       (resp)=>{
-        this.#data = JSON.parse(resp)
+        if(resp.status === 200){
-        this.showMethod()
+          return resp.json()
-      }, 
+        }else throw "Error retrieving process"
-      ()=>{ alert("Unable to load method") })
+      }
+    ).then(data=>{
+      this.#data = data
+      this.showMethod()
+    }).catch(err=>alert(err))
   }
   
   showEmpty(resp){
@@ -61,6 +68,18 @@ class CCPExecutionForm extends HTMLElement{
     }
   }
   
+  sendExecutionRequest(){
+    const url = this.#serviceurl + "/processes/" + this.#method + "/execution"
+    this.#boot.secureFetch(
+      url, { method : "POST", body : JSON.stringify({}), headers : { "Content-Type" : "application/json"}}
+    ).then(reply=>{
+      if(reply.status !== 200 && reply.status !== 201){
+        throw "Error while requesting resource"
+      }
+      console.log("Execution reuqest sent")
+    }).catch(err => alert("Unable to call execute"))
+  }
+  
   #empty_executionform_bss = {
     template : "#EXECUTION_FORM_EMPTY_TEMPLATE",
     target : "div[name=execution_form]",
@@ -114,7 +133,52 @@ class CCPExecutionForm extends HTMLElement{
             }
           }
         ]
-      }
+      },
+      {
+        target: "div.ccp-outputs",
+        in : (e,d)=>d,
+        recurse : [
+          {
+            "in" : (e,d)=>{ return Object.values(d.outputs) },
+            target : "div",
+            apply : (e,d)=>{
+              e.innerHTML = `<d4s-ccp-output output='${JSON.stringify(d)}'></d4s-ccp-output>`
+            }
+          }
+        ]
+      },
+      {
+        target: "div.ccp-runtimes *[name=refresh-runtimes]",
+        on_click : ev=>{
+          BSS.apply(this.#executionform_bss)
+        }
+      },
+      {
+        target: "div.ccp-runtimes select",
+        in : (e,d)=>d,
+        recurse : [
+          {
+            "in" : (e,d)=>{ 
+              const rts = d.links.filter(l=> l.rel === "compatibleWith").map(l=>l.href.replace("runtimes/",""))
+              return this.#infrastructurecontroller.getCompatibleRuntimes(rts) 
+            },
+            target : "option",
+            apply : (e,d)=>{
+              e.value = d.runtime["descriptor-id"]
+              e.textContent = `${d.runtime.name} [${d.infrastructure.name}]`
+            }
+          }
+        ]
+      },
+      {
+        target: "#execute_method_button",
+        on_click : ev=>{
+          ev.preventDefault()
+          ev.stopPropagation()
+          this.sendExecutionRequest()
+          return false;
+        }
+      },
     ]
   }
   

ccp/js/infrastructurelistcontroller.js

@@ -1,26 +1,76 @@
 class CCPInfrastructureList extends HTMLElement{
   
   #boot;
-  #data;
+  #infrastructures;
+  #socket;
+  #data = {};
   
   #serviceurl = "https://nubis1.int.d4science.net:8080" 
+  #broadcasturl = "ws://nubis1.int.d4science.net:8989/ws/notification"
   
   constructor(){
     super()
     this.#boot = document.querySelector("d4s-boot-2")
+  }
+
+  connectedCallback(){
     this.fetchInfrastructures()
   }
 
-  fetchInfrastuctures(){
+  get data(){
-    this.#boot.service(this.#serviceurl + "/infrastructures", "GET", 
+    return this.#data
-      (resp)=>this.updateList(resp), 
+  }
-      ()=>{ alert("An error occurred while fetching CCP infrastructures.") })
+
+  fetchInfrastructures(){
+    console.log("Calling fetch infrastructures")
+    this.#boot.secureFetch(this.#serviceurl + "/infrastructures").
+    then(resp=>{
+      console.log("Received resp for infrastructures ", resp.status)
+      return resp.json()
+    }).then(data=>{
+      this.#infrastructures = data
+      this.updateList()
+    }).catch(err=>{
+      alert("Error while downloading methods: ", err)
+    })
   }
   
   updateList(resp){
-    this.#data = JSON.parse(resp)
+    this.connectBroadcast()
+    this.#infrastructures.forEach(i=>{
+      this.#data[i.id] = { status : "unknown", type : i.type, name : i.name, runtimes : [] }
+      this.#boot.secureFetch(this.#serviceurl + `/infrastructures/${i.id}/status`).then(
+        ()=>console.log("Requested async status update for infrastructure ", i.id) 
+      )
+    })
   }
   
+  connectBroadcast(){
+    this.#socket = new WebSocket(this.#broadcasturl + "/infrastructures");
+    this.#socket.onmessage = event=>{
+      const data = JSON.parse(event.data)
+      this.#data[data.infrastructure].status = data.status.toLowerCase()
+      if(data.type.toLowerCase() === "update" && data.status.toLowerCase() === "ok"){
+        this.#data[data.infrastructure].runtimes = data.data.runtimes
+      }else{
+        this.#data[data.infrastructure].runtimes = []
+      }
+      console.log("New Infrastructure status", this.#data)
+    }
+    window.setInterval( ()=>this.#socket.send("ping"), 30000)
+  }
+  
+  getCompatibleRuntimes(rts){
+    console.log("Request for ", rts)
+    const available = Object.keys(this.#data).reduce((acc, i) => {
+      console.log(this.#data[i].runtimes)
+      const compatiblerts = this.#data[i].runtimes.
+        filter(r=>rts.indexOf(r["descriptor-id"]) >= 0).
+        map(cr=>{ return { runtime : cr, infrastructure : this.#data[i] } })
+      return acc.concat(compatiblerts)
+    }, [])
+    return available
+  }
 }
 
 window.customElements.define('d4s-ccp-infrastructurelist', CCPInfrastructureList);

ccp/js/methodlistcontroller.js

@@ -32,16 +32,26 @@ class CCPMethodList extends HTMLElement{
   }
 
   connectedCallback(){
-    //this.#boot.whenReady(()=>{ this.fetchMethods() })
+    
-    //window.setTimeout(()=>this.fetchMethods(), 1000)
   }
 
   fetchProcesses(){
-    this.#boot.service(this.#serviceurl + "/processes", "GET", { limit : 1000}, (resp)=>this.showList(resp), ()=>{ alert("You are not allowed list CCP methods") })
+    console.log("Calling fetch processes")
+    this.#boot.secureFetch(this.#serviceurl + "/processes?limit=1000").
+    then(resp=>{
+      console.log("Received resp for processes ", resp.status)
+      return resp.json()
+    }).then(data=>{
+      console.log("Processes parsed to json", data)
+      this.#data = data
+      this.showList()
+    }).catch(err=>{
+      alert("Error while downloading methods: ", err)
+    })
   }
   
-  showList(resp){
+  showList(){
-    this.#data = JSON.parse(resp)
+    //this.#data = JSON.parse(resp)
     this.enableSearch()
     this.updateList()
   }

storage/d4s-storage.js

@@ -270,20 +270,18 @@ window.customElements.define('d4s-storage-folder', class extends D4SStorageHtmlE
   }
 
   list(folderId) {
-    this.d4s.service(
+    this.secureFetch(this.buildListUrl(folderId)).then(reply=>{
-        this.buildListUrl(folderId),
+      if(reply.status !== 200) throw "Unable to build list url";
-        'GET', null,
+      return reply.json() 
-        (resp) => this.parseResponse(resp),
+    }).then(data=>{
-        (err) => { alert(err) }
+      this.parseResponse(data)
-    )
+    }).catch(err=>alert(err))
   }
 
-  parseResponse(response) {
+  parseResponse(jresp) {
     const root = this.createContainer()
-    var jresp = JSON.parse(response)
     if (jresp.itemlist) {
         jresp.itemlist.forEach(item => root.appendChild(this.createFileRow(item)))
-
     } else {
         console.error(jresp)
     }