From e479d75ff18d7205f158f39a1f6b7c5452dfb0b7 Mon Sep 17 00:00:00 2001
From: dcore94 <m.lettere@gmail.com>
Date: Thu, 8 Sep 2022 16:03:28 +0200
Subject: [PATCH] many fixes

---
 ccp/js/executionmonitorcontroller.js   |   8 +-
 ccp/js/infrastructurelistcontroller.js |  11 +-
 ccp/js/methodeditorcontroller.js       | 155 +++++++++++--------------
 3 files changed, 77 insertions(+), 97 deletions(-)

diff --git a/ccp/js/executionmonitorcontroller.js b/ccp/js/executionmonitorcontroller.js
index 123e7bd..5dd504e 100644
--- a/ccp/js/executionmonitorcontroller.js
+++ b/ccp/js/executionmonitorcontroller.js
@@ -53,7 +53,7 @@ class CCPExecutionMonitor extends HTMLElement {
   }
   
   refreshExecution(execution){
-    this.#boot.secureFetch(execution.self).then(reply =>{
+    this.#boot.secureFetch(`${this.#serviceurl}/executions/${execution.jobID}`).then(reply =>{
       if(reply.status === 200) return reply.json();
       else throw "Unable to load job links"
     }).then(data=>{
@@ -142,7 +142,11 @@ class CCPExecutionMonitor extends HTMLElement {
             recurse : [
               {
                 target : "li",
-                "in" : (e,d)=>{return d.links.map(l=>{ return { href : d.self + "/" + l.path, path : l.path} })},
+                "in" : (e,d)=>{
+                  return d.links.map(l=>{ 
+                    return { href : this.#serviceurl + "/executions/" + d.jobID + "/" + l.path, path : l.path} 
+                  })
+                },
                 on_click : ev=>{
                   const href = ev.currentTarget.bss_input.data.href
                   const name = ev.currentTarget.bss_input.data.path
diff --git a/ccp/js/infrastructurelistcontroller.js b/ccp/js/infrastructurelistcontroller.js
index aba0474..8736e87 100644
--- a/ccp/js/infrastructurelistcontroller.js
+++ b/ccp/js/infrastructurelistcontroller.js
@@ -76,11 +76,12 @@ class CCPInfrastructureList extends HTMLElement{
         return resp.json()
       }).then(data=>{
         this.#infrastructures = data
+        this.showList()
       }).catch(err=>{
         alert(err)
       })
     
-    const prom2 = this.#boot.secureFetch(this.#serviceurl + "/runtimes").
+    /*const prom2 = this.#boot.secureFetch(this.#serviceurl + "/runtimes").
       then(resp=>{
         if(resp.status !== 200) throw "Unable to fetch runtimes";
         return resp.json()
@@ -92,7 +93,7 @@ class CCPInfrastructureList extends HTMLElement{
       
     Promise.all([prom1, prom2]).then(results=>{
       this.showList()
-    })    
+    })*/    
   }
   
   refreshInfrastructures(){
@@ -165,10 +166,10 @@ class CCPInfrastructureList extends HTMLElement{
   
   showDeployableRuntimes(infra){
     const alreadydeployed = infra.runtimes.map(r=>r["descriptor-id"])
-    const options = this.#runtimes.filter(r=>{
+    const options = infra.available_runtimes.filter(r=>{
       return infra.type === r.type && alreadydeployed.indexOf(r.id) === -1
     }).map(r=>{
-      return `<option value="${r.id}" title="${r.description}">${r.name}</option>`
+      return `<option value="${r.name}" title="${r.description}">${r.name}</option>`
     }).join("\n")
     return `
       <div style="padding-left:1rem">
@@ -185,7 +186,7 @@ class CCPInfrastructureList extends HTMLElement{
   showRuntimes(infra){
     return infra.runtimes.map(r =>{
       return `
-        <li class="ccp_runtime_item" title="${r.description}">
+        <li class="ccp_runtime_item" title="${r.name}">
           <details>
             <summary>${r.name}</summary>
             <ul class="ccp_instance_list">
diff --git a/ccp/js/methodeditorcontroller.js b/ccp/js/methodeditorcontroller.js
index ded60fb..d9b01d4 100644
--- a/ccp/js/methodeditorcontroller.js
+++ b/ccp/js/methodeditorcontroller.js
@@ -8,6 +8,8 @@ class CCPMethodEditorController extends HTMLElement{
   #locked = false;
   
   #isupdate = false;
+  #cloneornew_dialog = null;
+  #dragging_method = null;
   
   #tmp_inputs = []
   #tmp_outputs = []
@@ -25,82 +27,29 @@ class CCPMethodEditorController extends HTMLElement{
       parameters : [
         {
           name : "deploy-script",
-          value : [
-`
-- hosts: localhost  
-  tasks:    
-    - name: hookup instance
-      add_host:        
-        name: "{ instancename }"
-        ansible_connection: lxd
-        groupname: "targets"
-`     
-          ]
+          value : []
         },
         {
           name : "execute-script",
-          value : [
-`
-- hosts: localhost  
-  tasks:    
-    - name: hookup instance
-      add_host:        
-        name: "{ instancename }"
-        ansible_connection: lxd
-        groupname: "targets"
-` 
-          ]
-        },
-        {
-          name : "fetch-output-script",
-          value : [
-`
-- hosts: localhost  
-  tasks:    
-    - name: hookup instance
-      add_host:        
-        name: "{ instancename }"
-        ansible_connection: lxd
-        groupname: "targets"
-` 
-          ]
+          value : []
         },
         {
           name : "undeploy-script",
-          value : [
-`
-- hosts: localhost  
-  tasks:    
-    - name: hookup instance
-      add_host:        
-        name: "{ instancename }"
-        ansible_connection: lxd
-        groupname: "targets"
-`
-          ]
-        },
-        {
-          name : "cancel-script",
-          value : [
-`
-- hosts: localhost  
-  tasks:    
-    - name: hookup instance
-      add_host:        
-        name: "{ instancename }"
-        ansible_connection: lxd
-        groupname: "targets"
-`
-          ]
+          value : []
         }
       ]
     },
     links : []
   }
   
+  #scripts = `
+    <link rel="canonical" href="https://getbootstrap.com/docs/5.0/components/modal/">
+  `
+  
   #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 href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+
     <style>
       .ccp-method-editor {
         position: relative;
@@ -193,11 +142,6 @@ class CCPMethodEditorController extends HTMLElement{
       <path d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z" />
     </svg>
   `
-  
-  #ansible_icon = `
-    <svg viewBox="0 0 24 24"><path fill="currentColor" d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10s10-4.5 10-10S17.5 2 12 2m4.1 15c-.19 0-.34-.1-.55-.27l-5.16-4.17l-1.73 4.34H7.17l4.37-10.51c.11-.28.35-.42.63-.42s.5.14.62.42l3.98 9.58c.04.11.07.22.07.29c-.01.42-.34.74-.74.74m-3.93-8.89l2.59 6.39l-3.91-3.08l1.32-3.31Z"></path>
-    </svg>
-  `
    
   constructor(){
     super();
@@ -212,13 +156,23 @@ class CCPMethodEditorController extends HTMLElement{
 
   }
 
+  isRuntimeRegistered(rt){
+    return (this.#runtimes.filter(r=>r.id === rt.id)).length > 0
+  }
+
   fetchRuntimes(){
-    this.#boot.secureFetch(this.#serviceurl + "/runtimes").
+    this.#boot.secureFetch(this.#serviceurl + "/infrastructures/cache").
       then(resp=>{
         if(resp.status !== 200) throw "Unable to fetch runtimes";
         return resp.json()
       }).then(data=>{
-        this.#runtimes = data
+        this.#runtimes = []
+        //merge all runtimes
+        data.forEach( i => {
+          i.available_runtimes.forEach(r => {
+            if(!this.isRuntimeRegistered(r)){ this.#runtimes.push(r)} 
+          })
+        })
         this.render()
       }).catch(err=>{
         alert(err)
@@ -296,12 +250,11 @@ class CCPMethodEditorController extends HTMLElement{
     const subject = this.#boot.subject
     const matchingauthors = method.metadata ? method.metadata.filter(md=>md.role === "author" && md.href.endsWith("/" + subject)).length : 0
     if(matchingauthors === 0) this.cloneMethod(method.id);
-    else
-      if(window.confirm("Do you want to create a new clone?")){
-        this.cloneMethod(method.id)
-      } else {
-        this.editMethod(method.id)  
-      }
+    else{
+      this.#dragging_method = method.id
+      this.#cloneornew_dialog.style.display = "block"
+      this.#cloneornew_dialog.classList.add("show")
+    }
   }
   
   cloneMethod(method){
@@ -380,6 +333,20 @@ class CCPMethodEditorController extends HTMLElement{
  
   render(){
     this.#rootdoc.innerHTML = `
+      <!-- Modal -->
+      <div class="modal fade" style="background-color:rgba(0,0,0,0.3)" id="cloneornew" tabindex="-1" role="dialog">
+        <div class="modal-dialog" role="document">
+          <div class="modal-content shadow-lg border-primary">
+            <div class="modal-body">
+              Choose whether you want to clone this method or edit it.
+            </div>
+            <div class="modal-footer">
+              <button name="clone" type="button" class="btn btn-info">Clone</button>
+              <button name="edit" type="button" class="btn btn-primary">Edit</button>
+            </div>
+          </div>
+        </div>
+      </div>
       <div class="ccp-method-editor">
         <div class="d-none plexiglass">
           <svg class="spinner" viewBox="0 0 66 66">
@@ -476,14 +443,9 @@ class CCPMethodEditorController extends HTMLElement{
                     <option value=""></option>
                     <option value="deploy-script">Deploy</option>
                     <option value="execute-script">Execute</option>
-                    <option value="fetch-output-script">Fetch output</option>
                     <option value="undeploy-script">Undeploy</option>
-                    <option value="cancel-script">Cancel</option>
                   </select>
                 </div>
-                <div>
-                  ${ this.renderAnsibleIcon() }  
-                </div>
               </div>
             </summary>
             <div class="card-body" name="input_container">
@@ -496,6 +458,22 @@ class CCPMethodEditorController extends HTMLElement{
     this.renderInputs()
     this.renderOutputs()
     
+    this.#cloneornew_dialog = this.#rootdoc.querySelector("#cloneornew")
+    
+    this.#rootdoc.querySelector("#cloneornew button[name=clone]").addEventListener("click", ev=>{
+      this.#cloneornew_dialog.classList.remove("show")
+      this.#cloneornew_dialog.style.display = "none"
+      this.cloneMethod(this.#dragging_method)
+      this.#dragging_method = null
+    })
+    
+    this.#rootdoc.querySelector("#cloneornew button[name=edit]").addEventListener("click", ev=>{
+      this.#cloneornew_dialog.classList.remove("show")
+      this.#cloneornew_dialog.style.display = "none"
+      this.editMethod(this.#dragging_method)
+      this.#dragging_method = null
+    })
+    
     this.#rootdoc.querySelector("input[name=title]").addEventListener("input", ev=>{
       this.#current.title = ev.currentTarget.value
       this.#rootdoc.querySelector("span[name=header]").innerText = this.#current.title
@@ -717,18 +695,10 @@ class CCPMethodEditorController extends HTMLElement{
       ev.stopPropagation()
       const scriptname = ev.target.getAttribute("name")
       const script = this.#current.additionalParameters.parameters.filter(p=>p.name === scriptname)[0]
-      if(script) script.value[0] = ev.target.value;
+      if(script) script.value = ev.target.value.split(/\r?\n/);
     })
   }
   
-  renderAnsibleIcon(){
-    return `
-      <div title="Ansible" style="width:2rem;height:2rem;position:absolute;right:5px;top:30%;opacity:0.4;">
-        ${ this.#ansible_icon }
-      </div>
-    `
-  }
-  
   renderAuthors(){
     return `
       <ul class="author_list">
@@ -856,7 +826,12 @@ class CCPMethodEditorController extends HTMLElement{
   
   renderScripts(){
     return this.#current.additionalParameters.parameters.map(
-       (script, i) => `<textarea rows="5" class="script-area form-control d-none" name="${script.name}">${script.value[0]}</textarea>`
+       (script, i) => {
+         let code = script.value.length ? script.value.join("\r\n") : ""
+         return ` 
+           <textarea rows="5" class="script-area form-control d-none" name="${script.name}">${code}</textarea>
+         `
+       }
     ).join("\n")
   }
 }