2022-03-25 15:39:39 +01:00
|
|
|
class CCPExecutionForm extends HTMLElement{
|
|
|
|
|
|
|
|
#boot;
|
|
|
|
#rootdoc;
|
|
|
|
#data;
|
|
|
|
#method;
|
2022-04-12 19:51:38 +02:00
|
|
|
#infrastructurecontroller;
|
2022-03-25 15:39:39 +01:00
|
|
|
|
|
|
|
#serviceurl = "https://nubis1.int.d4science.net:8080"
|
2022-04-12 19:51:38 +02:00
|
|
|
//#cdnurl = "https://nubis1.int.d4science.net:8080/ccp/executionformfragment.html"
|
|
|
|
#cdnurl = "http://d4science-cdn-public:8984/resources/ccp/executionformfragment.html"
|
2022-03-25 15:39:39 +01:00
|
|
|
|
|
|
|
constructor(){
|
|
|
|
super()
|
|
|
|
this.#boot = document.querySelector("d4s-boot-2")
|
|
|
|
this.#rootdoc = this.attachShadow({ "mode" : "open"})
|
2022-04-12 19:51:38 +02:00
|
|
|
this.#infrastructurecontroller = document.querySelector("d4s-ccp-infrastructurelist")
|
2022-03-25 15:39:39 +01:00
|
|
|
this.fetchMarkup()
|
|
|
|
}
|
|
|
|
|
|
|
|
static get observedAttributes() {
|
|
|
|
return ["method"];
|
|
|
|
}
|
|
|
|
|
|
|
|
attributeChangedCallback(name, oldValue, newValue) {
|
|
|
|
if((oldValue != newValue) && (name === "method")){
|
|
|
|
this.#method = newValue
|
|
|
|
this.loadMethod()
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
fetchMarkup(){
|
|
|
|
return fetch(this.#cdnurl).then(
|
|
|
|
(reply)=>{
|
|
|
|
if(reply.status === 200){
|
|
|
|
return reply.text()
|
|
|
|
}else{ throw new Exception("Unable to fetch markup") }
|
|
|
|
}).then(data=>{
|
|
|
|
this.#rootdoc.innerHTML = data
|
|
|
|
this.showMethod()
|
|
|
|
}).catch(err=>{
|
|
|
|
console.error(err)
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
loadMethod(){
|
2022-04-12 19:51:38 +02:00
|
|
|
this.#boot.secureFetch(this.#serviceurl + "/processes/" + this.#method).then(
|
2022-03-25 15:39:39 +01:00
|
|
|
(resp)=>{
|
2022-04-12 19:51:38 +02:00
|
|
|
if(resp.status === 200){
|
|
|
|
return resp.json()
|
|
|
|
}else throw "Error retrieving process"
|
|
|
|
}
|
|
|
|
).then(data=>{
|
|
|
|
this.#data = data
|
|
|
|
this.showMethod()
|
|
|
|
}).catch(err=>alert(err))
|
2022-03-25 15:39:39 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
showEmpty(resp){
|
|
|
|
BSS.apply(this.#empty_executionform_bss, this.#rootdoc)
|
|
|
|
}
|
|
|
|
|
|
|
|
showMethod(){
|
|
|
|
if(this.#method == null) this.showEmpty();
|
|
|
|
else{
|
|
|
|
console.log(this.#data)
|
|
|
|
BSS.apply(this.#executionform_bss, this.#rootdoc)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-04-12 19:51:38 +02:00
|
|
|
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"))
|
|
|
|
}
|
|
|
|
|
2022-03-25 15:39:39 +01:00
|
|
|
#empty_executionform_bss = {
|
|
|
|
template : "#EXECUTION_FORM_EMPTY_TEMPLATE",
|
2022-03-28 16:42:02 +02:00
|
|
|
target : "div[name=execution_form]",
|
2022-03-25 15:39:39 +01:00
|
|
|
on_drop : ev=>{
|
2022-03-28 16:42:02 +02:00
|
|
|
if(ev.dataTransfer && ev.dataTransfer.getData('text/plain+ccpmethod')){
|
|
|
|
const id = ev.dataTransfer.getData('text/plain+ccpmethod')
|
2022-03-25 15:39:39 +01:00
|
|
|
this.setAttribute("method", id);
|
|
|
|
ev.preventDefault()
|
|
|
|
ev.stopPropagation()
|
|
|
|
ev.currentTarget.style.backgroundColor = "white"
|
|
|
|
}
|
|
|
|
},
|
|
|
|
on_dragover : ev=>{
|
|
|
|
ev.preventDefault()
|
|
|
|
},
|
|
|
|
}
|
|
|
|
|
|
|
|
#executionform_bss = {
|
|
|
|
template : "#EXECUTION_FORM_TEMPLATE",
|
2022-03-28 16:52:09 +02:00
|
|
|
target : "div[name=execution_form]",
|
2022-03-25 15:39:39 +01:00
|
|
|
in : ()=>this.#data,
|
|
|
|
on_drop : ev=>{
|
2022-03-28 16:42:02 +02:00
|
|
|
if(ev.dataTransfer && ev.dataTransfer.getData('text/plain+ccpmethod')){
|
|
|
|
const id = ev.dataTransfer.getData('text/plain+ccpmethod');
|
2022-03-25 15:39:39 +01:00
|
|
|
this.setAttribute("method", id);
|
|
|
|
ev.preventDefault()
|
|
|
|
ev.stopPropagation()
|
|
|
|
}
|
|
|
|
},
|
|
|
|
on_dragover : ev=>{
|
|
|
|
ev.preventDefault()
|
|
|
|
},
|
|
|
|
recurse : [
|
|
|
|
{
|
|
|
|
target: "h3",
|
|
|
|
apply : (e,d)=>e.textContent = d.title + " (v. " + d.version + ")"
|
|
|
|
},
|
|
|
|
{
|
|
|
|
target: "p.description",
|
|
|
|
apply : (e,d)=>e.textContent = d.description
|
|
|
|
},
|
|
|
|
{
|
|
|
|
target: "div.ccp-inputs",
|
|
|
|
in : (e,d)=>d,
|
|
|
|
recurse : [
|
|
|
|
{
|
|
|
|
"in" : (e,d)=>{ return Object.values(d.inputs) },
|
|
|
|
target : "div",
|
|
|
|
apply : (e,d)=>{
|
|
|
|
e.innerHTML = `<d4s-ccp-input input='${JSON.stringify(d)}'></d4s-ccp-input>`
|
|
|
|
}
|
|
|
|
}
|
|
|
|
]
|
2022-04-12 19:51:38 +02:00
|
|
|
},
|
|
|
|
{
|
|
|
|
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;
|
|
|
|
}
|
|
|
|
},
|
2022-03-25 15:39:39 +01:00
|
|
|
]
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
window.customElements.define('d4s-ccp-executionform', CCPExecutionForm);
|