Skip to content

Commit

Permalink
Merge pull request #151 from ICRAR/liu-249
Browse files Browse the repository at this point in the history 
Liu 249
  • Loading branch information
@M-Wicenec
M-Wicenec committed May 16, 2022
2 parents a8844e1 + c1dea29 commit b09c1dd
Show file tree
Hide file tree
Showing 2 changed files with 108 additions and 4 deletions.
71 changes: 67 additions & 4 deletions daliuge-translator/dlg/dropmake/web/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,58 @@ function updateDeployOptionsDropdown() {

}

async function checkUrlStatus (url) {
return new Promise((resolve, reject) => {
$.ajax({url: url,
type: 'HEAD',
dataType: 'jsonp',
complete: function(jqXHR, textStatus){
if(jqXHR.status === 200){
resolve(true)
}else{
resolve(false)
}
},
timeout: 2000
});
})
}

async function manualCheckUrlStatus (clickPos) {
var badUrl = false
//if the event is triggered by click the check icon manually
if(clickPos === "icon"){
var url = $(event.target).parent().find($('.deployMethodUrl')).val()
var target = $(event.target)
}else{
//if the event is triggered by focus leave on the input
var url = $(event.target).parent().parent().find($('.deployMethodUrl')).val()
var target = $(event.target).parent().parent().find($('.urlStatusIcon'))
}


//check if jquery deems the url constructed properly
try {
new URL(url);
} catch (error) {
badUrl = true
}

if(badUrl){
$("#settingsModalErrorMessage").html('Please ensure deploy methods URLs are valid')
return
}else{
//if the url is deemed contructed well, here we use an ajax call to see if the url is reachable
var urlStatus = await checkUrlStatus(url)
$("#settingsModalErrorMessage").html('')
if(urlStatus){
target.replaceWith(`<div class="settingsInputTooltip tooltip tooltipBottom urlStatusIcon urlStatusReachable" data-text="Destination URL Is Reachable, click to re-check" onclick="manualCheckUrlStatus('icon')"><i class="material-icons md-24">done</i></div>`)
}else{
target.replaceWith(`<div class="settingsInputTooltip tooltip tooltipBottom urlStatusIcon urlStatusNotReachable" data-text="Destination URL Is Not Reachable, click to re-check" onclick="manualCheckUrlStatus('icon')"><i class="material-icons md-24">close</i></div>`)
}
}
}

function saveSettings() {
//need a check function to confirm settings have been filled out correctly

Expand All @@ -130,7 +182,6 @@ function saveSettings() {
new URL($(this).find(".deployMethodUrl").val());
} catch (error) {
console.log("faulty Url: ",$(this).find(".deployMethodUrl").val())
console.log(error)
badUrl = true
}

Expand Down Expand Up @@ -215,7 +266,17 @@ function fillOutSettings() {
//fill out settings list rom deploy methods array
var deployMethodManagerDiv = $("#DeployMethodManager")
deployMethodManagerDiv.empty()
deployMethodsArray.forEach(element => {
console.log("filling out settings, GET Errors and Cors warning from Url check")
deployMethodsArray.forEach(async element => {

var urlReachable = await checkUrlStatus(element.url)
var ReachableIcon = ""

if(urlReachable){
ReachableIcon = `<div class="settingsInputTooltip tooltip tooltipBottom urlStatusIcon urlStatusReachable" data-text="Destination URL Is Reachable, click to re-check" onclick="manualCheckUrlStatus('icon')"><i class="material-icons md-24">done</i></div>`
}else{
ReachableIcon = `<div class="settingsInputTooltip tooltip tooltipBottom urlStatusIcon urlStatusNotReachable" data-text="Destination URL Is Not Reachable, click to re-check" onclick="manualCheckUrlStatus('icon')"><i class="material-icons md-24">close</i></div>`
}

var directOption = '<option value="direct">Direct</option>'
var helmOption = '<option value="helm">Helm</option>'
Expand All @@ -231,7 +292,8 @@ function fillOutSettings() {

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="'+element.name+'"></div>'+
'<div class="settingsInputTooltip tooltip tooltipBottom form-control" data-text="Deploy Option Destination URL"><input type="text" placeholder="Destination Url" class="deployMethodUrl" value="'+element.url+'"></div>'+
`<div class="settingsInputTooltip tooltip tooltipBottom form-control urlInputField" data-text="Deploy Option Destination URL"><input type="text" onfocusout="manualCheckUrlStatus('focusOut')" placeholder="Destination Url" class="deployMethodUrl" value="`+element.url+`"></div>`+
ReachableIcon+
'<div class="settingsInputTooltip tooltip tooltipBottom form-control" data-text="Deploy Method"><select class="deployMethodMethod">'+
directOption+
helmOption+
Expand All @@ -253,7 +315,8 @@ function addDeployMethod(){

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>'+
'<div class="settingsInputTooltip tooltip tooltipBottom form-control" data-text="Deploy Option Destination URL"><input type="text" placeholder="Destination Url" class="deployMethodUrl"value=""></div>'+
`<div class="settingsInputTooltip tooltip tooltipBottom form-control" data-text="Deploy Option Destination URL"><input type="text" onfocusout="manualCheckUrlStatus('focusOut')" placeholder="Destination Url" class="deployMethodUrl"value=""></div>`+
`<div class="settingsInputTooltip tooltip tooltipBottom urlStatusIcon urlStatusUnknown" data-text="Destination URL status Unknown, click to check" onclick="manualCheckUrlStatus('icon')"><a class="urlStatusUnknownIcon">?</a></div>`+
'<div class="settingsInputTooltip tooltip tooltipBottom form-control" data-text="Deploy Method"><select class="deployMethodMethod" name="Deploy Method">'+
directOption+
helmOption+
Expand Down
41 changes: 41 additions & 0 deletions daliuge-translator/dlg/dropmake/web/src/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -647,6 +647,39 @@
padding: 0px;
}

#settingsModal .urlInputField{
border-right:none;
}

#settingsModal .urlStatusIcon{
width: 30px;
color: black;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-width:1px 0px 1px 0px;
}

#settingsModal .urlStatusReachable{
background-color: rgb(113, 190, 71);
}

#settingsModal .urlStatusNotReachable{
background-color: rgb(190, 79, 71);
}

#settingsModal .urlStatusUnknown{
background-color: rgb(109, 109, 109);
}

#settingsModal .urlStatusIcon i{
position: absolute;
margin-top: 60%;
margin-left: 50%;
transform: translate(-50%,-50%);
pointer-events: none;
}

#settingsModal .settingsInputTooltip input, #settingsModal .settingsInputTooltip select{
display: block;
width: 100%;
Expand Down Expand Up @@ -749,3 +782,11 @@
#oriantationDropdown{
padding: 2px 10px;
}

#settingsModal .modal-body .urlStatusUnknownIcon{
color: black;
font-size: 24;
margin-left: 50%;
transform: translateX(-50%);
pointer-events: none;
}

0 comments on commit b09c1dd

Please sign in to comment.