Skip to content

Commit

Permalink
split button for deploy options
Browse files Browse the repository at this point in the history
  • Loading branch information
Moritz Wicenec authored and Moritz Wicenec committed Feb 28, 2022
1 parent 4653caf commit 600297b
Show file tree
Hide file tree
Showing 3 changed files with 87 additions and 25 deletions.
45 changes: 32 additions & 13 deletions daliuge-translator/dlg/dropmake/web/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,19 +6,21 @@ $(document).ready(function () {
$(".dropdown-menu").dropdown('hide')
})

$('#rest_deploy_button').click(restDeploy);

$('#helm_deploy_button').click(function(){
$("#gen_helm_button").val("Generate & Deploy Physical Graph")
$("#dlg_helm_deploy").prop("checked", true)
$("#pg_helm_form").submit()
})

//deploy physical graph button listener
$("#deploy_button").click(function () {
$("#gen_pg_button").val("Generate & Deploy Physical Graph")
$("#dlg_mgr_deploy").prop("checked", true)
$("#pg_form").submit();
//handles switching of the dynamic deploy split button
$("#deployDropdowns .dropdown-menu .dropdown-item").click(function(){
//take note of previous main button and the one that was just pressed
var oldActive = $("#deployDropdowns").children()[0];
var oldActiveId = $(oldActive).attr("id")
var newActive = event.target
var newActiveId = $(newActive).attr("id")

//replaces main button
$("#deployDropdowns").children()[0].remove()
$(newActive).clone().prependTo($("#deployDropdowns"))

//toggles dropdown options
$("#deployDropdowns .dropdown-menu #"+newActiveId).hide()
$("#deployDropdowns .dropdown-menu #"+oldActiveId).show()
})

//export physical graph button listener
Expand All @@ -36,6 +38,23 @@ $(document).ready(function () {
});
});

function deployAction(){
console.log("click")
$("#gen_pg_button").val("Generate & Deploy Physical Graph")
$("#dlg_mgr_deploy").prop("checked", true)
$("#pg_form").submit();
}

function helmDeployAction(){
$("#gen_helm_button").val("Generate & Deploy Physical Graph")
$("#dlg_helm_deploy").prop("checked", true)
$("#pg_helm_form").submit()
}

function restDeployAction(){
restDeploy()
}

function saveSettings() {
var newUrl = new URL($("#managerUrlInput").val());
var newPort = newUrl.port;
Expand Down
21 changes: 13 additions & 8 deletions daliuge-translator/dlg/dropmake/web/pg_viewer.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,15 +78,20 @@
</div>
</ul>
<ul class="nav navbar-nav ml-auto">
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link tooltip tooltipBottom" data-text="Deploy Physical Graph via HELM" id="helm_deploy_button" value="Deploy Physical Graph via HELM">HELM Deploy</a>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link tooltip tooltipBottom" data-text="Deploy Physical Graph via REST" id="rest_deploy_button" value="Deploy Physical Graph via REST">REST Deploy</a>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link tooltip tooltipBottom" data-text="Generate and deploy physical graph" id="deploy_button" value="Generate &amp; Deploy Physical Graph">Deploy</a>
<li class="nav-item dropdown">
<div class="btn-group" id="deployDropdowns">
<a href="javascript:void(0)" onclick="deployAction()" class="dropdown-item tooltip tooltipBottom" data-text="Generate and deploy physical graph" id="deploy_button" value="Generate &amp; Deploy Physical Graph">Deploy</a>
<button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a href="javascript:void(0)" onclick="deployAction()" class="dropdown-item tooltip tooltipLeft" style="display: none;" data-text="Generate and deploy physical graph" id="deploy_button" value="Generate &amp; Deploy Physical Graph">Deploy</a>
<a href="javascript:void(0)" onclick="helmDeployAction()" class="dropdown-item tooltip tooltipLeft" data-text="Deploy Physical Graph via HELM" id="helm_deploy_button" value="Deploy Physical Graph via HELM">HELM Deploy</a>
<a href="javascript:void(0)" onclick="restDeployAction()" class="dropdown-item tooltip tooltipLeft" data-text="Deploy Physical Graph via REST" id="rest_deploy_button" value="Deploy Physical Graph via REST">REST Deploy</a>
</div>
</div>
</li>

<li class="nav-item dropdown">
<a href="javascript:void(0)" class="nav-link dropdown-toggle" id="navbarExportDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Export
Expand Down
46 changes: 42 additions & 4 deletions daliuge-translator/dlg/dropmake/web/src/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -400,6 +400,48 @@
color:white;
}


#deployDropdowns{
padding: 0.35rem 1rem;
}

#deployDropdowns button:focus{
color: #001d3b;
background-color: white !important;
border-color: white;
}

#deployDropdowns button:active{
color: #001d3b;
background-color: white !important;
border-color: white;
}

#deployDropdowns button :hover{
color: #001d3b;
background-color: rgb(216, 216, 216);
border-color: rgb(216, 216, 216);
}

#deployDropdowns a:not(.dropdown-menu a){
border: 1px white solid;
border-radius: 0.2rem;
box-shadow: none !important;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
padding: 2px 5px;
}

#deployDropdowns a:hover:not(.dropdown-menu a) {
background-color: rgb(216, 216, 216);
color: #001d3b;
}

#deployDropdowns a:active:not(.dropdown-menu a) {
background-color: white;
color: #001d3b;
}

#exportJsonBtn{
display: inline-block;
}
Expand Down Expand Up @@ -440,10 +482,6 @@
color:white;
}

#deploy_button, #rest_deploy_button, #helm_deploy_button{
color: white;
}

#settingsModal .modal-header{
background: rgb(0,64,133);
background: linear-gradient(90deg, rgba(0,64,133,1) 0%, rgba(0,52,107,1) 20%, rgba(0,35,73,1) 100%);
Expand Down

0 comments on commit 600297b

Please sign in to comment.