etan39
/
cloudstack
mirror of https://github.com/apache/cloudstack.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Adding New UI support for VPN. Missing component include the listing of the users that have access to the VPN.

This commit is contained in:
will 2010-11-02 20:59:43 -07:00
parent ebdc1f069d
commit 4072fb2554
2 changed files with 162 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
ui/jsp/ipaddress.jsp
View File

@ -28,6 +28,8 @@
<%=t.t("Port Forwarding")%></div>
<div class="content_tabs off" id="tab_load_balancer">
<%=t.t("Load Balancer")%></div>
<div class="content_tabs off" id="tab_vpn">
<%=t.t("VPN")%></div>
</div>
<div id="tab_content_details">
<div id="tab_spinning_wheel" class="rightpanel_mainloader_panel" style="display: none;">
@ -270,6 +272,51 @@
</div>
</div>
<!-- Load Balancer ends here-->
<!-- VPN start here-->
<div id="tab_content_vpn" style="display:none">
<div id="tab_spinning_wheel" class="rightpanel_mainloader_panel" style="display: none;">
<div class="rightpanel_mainloaderbox">
<div class="rightpanel_mainloader_animatedicon">
</div>
<p>
Loading &hellip;</p>
</div>
</div>
<div id="tab_container" style="display:none">
<div class="grid_container">
<div class="grid_header">
<div id="grid_header_title" class="grid_header_title">VPN Users</div>
<div class="grid_actionbox" id="action_link">
<div class="grid_actionsdropdown_box" id="action_menu" style="display: none;">
<ul class="actionsdropdown_boxlist" id="action_list">
<li><%=t.t("no.available.actions")%></li>
</ul>
</div>
</div>
<div class="gridheader_loaderbox" id="spinning_wheel" style="border: 1px solid #999;
display: none;">
<div class="gridheader_loader" id="icon">
</div>
<p id="description">
Adding User &hellip;</p>
</div>
</div>
<div class="grid_rows odd">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
Username:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="username">
</div>
</div>
</div>
</div>
</div>
<div id="vpn_disabled_msg" style="display:none"> <p>VPN access is currently not enabled. Please <a href="#" id="enable_vpn_link">click here</a> to enable VPN.</p></div>
</div>
<!-- VPN ends here-->
</div>
<!-- IP Address detail panel (end) -->
@ -474,6 +521,24 @@
</p>
</div>
<div id="dialog_enable_vpn" title="Enable VPN" style="display:none">
<p>
VPN is currently disabled for this IP Address. Would you like to enable VPN access?
</p>
<!--Loading box-->
<div id="spinning_wheel" class="ui_dialog_loaderbox" style="display:none;">
<div class="ui_dialog_loader"></div>
<p>Enabling VPN Access....</p>
</div>
<!--Confirmation msg box-->
<!--Note: for error msg, just have to add error besides everything for eg. add error(class) next to ui_dialog_messagebox error, ui_dialog_msgicon error, ui_dialog_messagebox_text error. -->
<div id="info_container" class="ui_dialog_messagebox error" style="display:none;">
<div id="icon" class="ui_dialog_msgicon error"></div>
<div id="info" class="ui_dialog_messagebox_text error">(info)</div>
</div>
</div>
<div id="dialog_acquire_public_ip" title="Acquire New IP" style="display: none">
<p>
<%=t.t("please.select.an.available.zone.to.associate.your.new.ip.with..acquiring.additional.ip.may.cost.you.an.additional.dollars.per.month.")%>

103
ui/scripts/cloud.core.ipaddress.js
View File

@ -18,15 +18,16 @@
function afterLoadIpJSP() {
//***** switch between different tabs (begin) ********************************************************************
var tabArray = [$("#tab_details"), $("#tab_port_forwarding"), $("#tab_load_balancer")];
var tabContentArray = [$("#tab_content_details"), $("#tab_content_port_forwarding"), $("#tab_content_load_balancer")];
var afterSwitchFnArray = [ipJsonToDetailsTab, ipJsonToPortForwardingTab, ipJsonToLoadBalancerTab];
var tabArray = [$("#tab_details"), $("#tab_port_forwarding"), $("#tab_load_balancer"), $("#tab_vpn")];
var tabContentArray = [$("#tab_content_details"), $("#tab_content_port_forwarding"), $("#tab_content_load_balancer"), $("#tab_content_vpn")];
var afterSwitchFnArray = [ipJsonToDetailsTab, ipJsonToPortForwardingTab, ipJsonToLoadBalancerTab, ipJsonToVPNTab];
switchBetweenDifferentTabs(tabArray, tabContentArray, afterSwitchFnArray);
//***** switch between different tabs (end) **********************************************************************
//dialogs
initDialog("dialog_acquire_public_ip", 325);
initDialog("dialog_confirmation_release_ip");
initDialog("dialog_enable_vpn");
//*** Acquire New IP (begin) ***
$.ajax({
@ -225,12 +226,16 @@ function ipToRightPanel($midmenuItem1) {
//Port Forwarding tab, Load Balancer tab
if(isIpManageable(ipObj.domainid, ipObj.account) == true) {
$("#tab_port_forwarding, #tab_load_balancer").show();
$("#tab_port_forwarding, #tab_load_balancer").show();
// Only show VPN tab if the IP is the source nat IP
if (ipObj.issourcenat == true) {
$("#tab_vpn").show();
}
//ipJsonToPortForwardingTab();
//ipJsonToLoadBalancerTab();
}
else {
$("#tab_port_forwarding, #tab_load_balancer").hide();
$("#tab_port_forwarding, #tab_load_balancer, #tab_vpn").hide();
//ipClearPortForwardingTab();
//ipClearLoadBalancerTab();
//$("#tab_details").click();
@ -301,7 +306,93 @@ function ipJsonToLoadBalancerTab() {
$thisTab.find("#tab_container").show();
}
});
}
}
function showEnableVPNDialog($thisTab) {
$("#dialog_enable_vpn")
.dialog('option', 'buttons', {
"Enable": function() {
var $midmenuItem1 = $("#right_panel_content").data("$midmenuItem1");
var ipObj = $midmenuItem1.data("jsonObj");
var $thisDialog = $(this);
$spinningWheel = $thisDialog.find("#spinning_wheel").show();
$.ajax({
data: createURL("command=createRemoteAccessVpn&account="+ipObj.account+"&domainid="+ipObj.domainid+"&zoneid="+ipObj.zoneid),
dataType: "json",
success: function(json) {
var jobId = json.createremoteaccessvpnresponse.jobid;
var timerKey = "asyncJob_" + jobId;
$("body").everyTime(
5000,
timerKey,
function() {
$.ajax({
data: createURL("command=queryAsyncJobResult&jobId="+jobId),
dataType: "json",
success: function(json) {
var result = json.queryasyncjobresultresponse;
if (result.jobstatus == 0) {
return; //Job has not completed
} else {
$("body").stopTime(timerKey);
$spinningWheel.hide();
if (result.jobstatus == 1) { // Succeeded
$thisDialog.dialog("close");
$thisTab.find("#tab_container").show();
$thisTab.find("#vpn_disabled_msg").hide();
} else if (result.jobstatus == 2) { // Failed
var errorMsg = "We were unable to enable VPN access. Please contact support.";
$thisDialog.find("#info_container").text(errorMsg).show();
}
}
},
error: function(XMLHttpResponse) {
$("body").stopTime(timerKey);
handleErrorInDialog(XMLHttpResponse, $thisDialog);
}
});
},
0
);
},
error: function(XMLHttpResponse) {
handleErrorInDialog(XMLHttpResponse, $thisDialog);
}
});
},
"Cancel": function() {
$thisTab.find("#tab_container").hide();
$thisTab.find("#vpn_disabled_msg").show();
$(this).dialog("close");
$thisTab.find("#enable_vpn_link").unbind("click").bind("click", function(event) {
showEnableVPNDialog($thisTab);
});
}
}).dialog("open");
}
function ipJsonToVPNTab() {
var $midmenuItem1 = $("#right_panel_content").data("$midmenuItem1");
var ipObj = $midmenuItem1.data("jsonObj");
var $thisTab = $("#right_panel_content #tab_content_vpn");
var ipAddress = ipObj.ipaddress;
$.ajax({
data: createURL("command=listRemoteAccessVpns&publicip="+ipAddress),
dataType: "json",
success: function(json) {
var items = json.listremoteaccessvpnsresponse.remoteaccessvpn;
if (items != null && items.length > 0) {
// List the VPN users
} else {
showEnableVPNDialog($thisTab);
}
$thisTab.find("#tab_spinning_wheel").hide();
$thisTab.find("#tab_container").show();
$thisTab.find("#vpn_disabled_msg").hide();
}
});
}
function ipClearRightPanel() {
ipClearDetailsTab();