Skip to content

Commit

Permalink
Adds in-browser rest deployment option (and associated dropdown UI)
Browse files Browse the repository at this point in the history
  • Loading branch information
@pritchardn
pritchardn committed Aug 3, 2022
1 parent 2e733e8 commit cea1699
Showing 1 changed file with 42 additions and 49 deletions.
91 changes: 42 additions & 49 deletions daliuge-translator/dlg/dropmake/web/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,8 +88,10 @@ async function initiateDeploy(method, selected, clickedName){
$("#gen_helm_button").val("Generate & Deploy Physical Graph")
$("#dlg_helm_deploy").prop("checked", true)
$("#pg_helm_form").submit()
}else if(method === "rest"){
}else if(method === "rest-ood"){
restDeploy()
} else if(method === "rest-direct"){
directRestDeploy()
}
}

Expand Down Expand Up @@ -334,14 +336,17 @@ function fillOutSettings() {

var directOption = '<option value="direct">Direct</option>'
var helmOption = '<option value="helm">Helm</option>'
var restOption = '<option value="rest">Rest</option>'
var restOODOption = '<option value="rest-ood">Rest-OOD</option>'
var restDirectOption = '<option value="rest-direct">Rest-Direct</option>'

if(element.deployMethod === "direct"){
directOption = '<option value="direct" selected="true">Direct</option>'
}else if(element.deployMethod === "helm"){
helmOption = '<option value="helm" selected="true">Helm</option>'
}else if(element.deployMethod === "rest"){
restOption = '<option value="rest" selected="true">Rest</option>'
}else if(element.deployMethod === "rest-ood"){
restOODOption = '<option value="rest-ood" selected="true">Rest-OOD</option>'
} else if(element.deployMethod === "rest-direct"){
restDirectOption = '<option value="rest-direct" selected="true">Rest-Direct</option>'
}

var deplpoyMethodRow = '<div class="input-group">'+
Expand All @@ -351,7 +356,8 @@ function fillOutSettings() {
'<div class="settingsInputTooltip tooltip tooltipBottom form-control" data-text="Deploy Method"><select class="deployMethodMethod">'+
directOption+
helmOption+
restOption+
restOODOption+
restDirectOption+
'</select></div>'+
'<input type="text" class="form-control deployMethodActive" value="'+element.active+'">'+
'<button class="btn btn-secondary btn-sm tooltip tooltipBottom" data-text="Delete Deploy Option" type="button" onclick="removeDeployMethod(event)"><i class="material-icons md-24">delete</i></button>'+
Expand All @@ -365,7 +371,8 @@ function addDeployMethod(){

var directOption = '<option value="direct" selected="true">Direct</option>'
var helmOption = '<option value="helm">Helm</option>'
var restOption = '<option value="rest">Rest</option>'
var restOODOption = '<option value="rest-ood">Rest-OOD</option>'
var restDirectOption = '<option value="rest-direct">Rest-Direct</option>'

var deplpoyMethodRow = '<div class="input-group">'+
'<div class="settingsInputTooltip tooltip tooltipBottom form-control" data-text="Deploy Option Name, This must be unique"><input type="text" placeholder="Deployment Name" class=" deployMethodName" value=""></div>'+
Expand All @@ -374,7 +381,8 @@ function addDeployMethod(){
'<div class="settingsInputTooltip tooltip tooltipBottom form-control" data-text="Deploy Method"><select class="deployMethodMethod" name="Deploy Method">'+
directOption+
helmOption+
restOption+
restOODOption+
restDirectOption+
'</select></div>'+
'<input type="text" class="form-control deployMethodActive" value="false">'+
'<button class="btn btn-secondary btn-sm tooltip tooltipBottom" data-text="Delete Deploy Option" type="button" onclick="removeDeployMethod(event)"><i class="material-icons md-24">delete</i></button>'+
Expand Down Expand Up @@ -466,9 +474,8 @@ function handleFetchErrors(response) {
return response;
}

async function helmDeploy() {
// Here as a placeholder until a single rest-deployment is worked out
// This code will largely be a copy form restDeploy, but slightly different
async function directRestDeploy(){
// fetch manager host and port from local storage
murl = window.localStorage.getItem("manager_url");
if (!murl) {
saveSettings();
Expand All @@ -477,9 +484,9 @@ async function helmDeploy() {
fillOutSettings()
murl = window.localStorage.getItem("manager_url");
})
}
};
var manager_url = new URL(murl);
console.log("In Helm Deploy")
console.log("In Direct REST Deploy");

const manager_host = manager_url.hostname;
const manager_port = manager_url.port;
Expand All @@ -499,58 +506,46 @@ async function helmDeploy() {
console.log("Manager prefix:'" + manager_prefix + "'");
console.log("Request mode:'" + request_mode + "'");


// sessionId must be unique or the request will fail
const lgName = pgtName.substring(0, pgtName.lastIndexOf("_pgt.graph"));
const sessionId = lgName + "-" + Date.now();
console.log("sessionId:'" + sessionId + "'");

// build urls
// the manager_url in this case has to point to daliuge_ood
const create_helm_url = manager_url + "/api/helm/start";
const pgt_url = "/gen_pg?tpl_nodes_len=1&pgt_id=" + pgtName; // TODO: tpl_nodes_len >= nodes in LG
const node_list_url = manager_url + "/api/nodes";
const pg_spec_url = "/gen_pg_spec";
const create_session_url = manager_url + "/api/sessions";
const append_graph_url = manager_url + "/api/sessions/" + sessionId + "/graph/append";
const deploy_graph_url = manager_url + "/api/sessions/" + sessionId + "/deploy";
const mgr_url = manager_url + "/session?sessionId=" + sessionId;
// fetch the PGT from this server
console.log("sending request to ", pgt_url);
console.log("graph name:", pgtName);
const pgt = await fetch(pgt_url, {
const nodes_url = manager_url + "/api/nodes";

const nodes = await fetch(nodes_url, {
method: 'GET',
})
.then(handleFetchErrors)
.then(response => response.json())
.catch(function (error) {
showMessageModal("Error", error + "\nGetting PGT unsuccessful: Unable to continue!");
});
// fetch the nodelist from engine
console.log("sending request to ", node_list_url);
const node_list = await fetch(node_list_url, {
.catch(function (error){
showMessageModal('Error', error + "\nGetting Nodes unsuccessful");
})
console.log(nodes)

const pgt_url = "/gen_pg?tpl_nodes_len=" + nodes.length.toString() + "&pgt_id=" + pgtName;
console.log("sending request to ", pgt_url);
console.log("graph name:", pgtName);
const pgt = await fetch(pgt_url, {
method: 'GET',
// mode: request_mode,
// credentials: 'include',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'Origin': 'http://localhost:8084'
},
})
.then(handleFetchErrors)
.then(response => response.json())
.catch(function (error) {
showMessageModal('Error', error + "\nGetting node_list unsuccessful: Unable to continue!");
showMessageModal('Error', error + "\nGetting PGT unsuccessful: Unable to continue!");
});
console.log("node_list", node_list);
// build object containing manager data

console.log("node_list", nodes);
const pg_spec_request_data = {
manager_host: manager_host,
node_list: node_list,
node_list: nodes,
pgt_id: pgt_id
}

console.log(pg_spec_request_data);
// request pg_spec from translator
const pg_spec_url = "/gen_pg_spec";
const pg_spec_response = await fetch(pg_spec_url, {
method: 'POST',
mode: request_mode,
Expand All @@ -564,10 +559,8 @@ async function helmDeploy() {
.catch(function (error) {
showMessageModal('Error', error + "\nGetting pg_spec unsuccessful: Unable to continue!");
});

console.log("pg_spec response", pg_spec_response);
// create session on engine
const session_data = {"sessionId": sessionId};
const create_session_url = manager_url + "/api/sessions";
const create_session = await fetch(create_session_url, {
credentials: 'include',
cache: 'no-cache',
Expand All @@ -592,6 +585,7 @@ async function helmDeploy() {
console.log("compressed_pg_spec", compressed_pg_spec);

// append graph to session on engine
const append_graph_url = manager_url + "/api/sessions/" + sessionId + "/graph/append";
const append_graph = await fetch(append_graph_url, {
credentials: 'include',
method: 'POST',
Expand All @@ -613,6 +607,7 @@ async function helmDeploy() {
console.log("append graph response", append_graph);
// deploy graph
// NOTE: URLSearchParams here turns the object into a x-www-form-urlencoded form
const deploy_graph_url = manager_url + "/api/sessions/" + sessionId + "/deploy";
const deploy_graph = await fetch(deploy_graph_url, {
credentials: 'include',
method: 'POST',
Expand All @@ -627,13 +622,11 @@ async function helmDeploy() {
showMessageModal('Error', error + "\nUnable to continue!");
});
//showMessageModal("Chart deployed" , "Check the dashboard of your k8s cluster for status updates.");
const mgr_url = manager_url + "/session?sessionId=" + sessionId;
console.log("deploy graph response", deploy_graph);
// Open DIM session page in new tab
// Until we have somewhere else to re-direct helm deployments. This is probably for the best.
//window.open(mgr_url, '_blank').focus();
window.open(mgr_url, '_blank').focus();
}


async function restDeploy() {
// fetch manager host and port from local storage
murl = window.localStorage.getItem("manager_url");
Expand Down

0 comments on commit cea1699

Please sign in to comment.