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

many fixes

This commit is contained in:
dcore94 2022-09-08 16:03:28 +02:00
parent 6e46e96078
commit e479d75ff1
3 changed files with 77 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
ccp/js/executionmonitorcontroller.js
View File

@ -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

11
ccp/js/infrastructurelistcontroller.js
View File

@ -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">

155
ccp/js/methodeditorcontroller.js
View File

@ -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")
}
}