IP Address page - Port Forwarding tab - (1) add "state" column. (2) change "delete" link to "revoke" link.

This commit is contained in:
Jessica Wang 2010-12-07 11:17:21 -08:00
parent e3e34be36d
commit 64e6f41015
2 changed files with 43 additions and 31 deletions

View File

@ -176,48 +176,55 @@
<div id="tab_container"> <div id="tab_container">
<div class="grid_container" id="grid_container"> <div class="grid_container" id="grid_container">
<div class="grid_header"> <div class="grid_header">
<div class="grid_header_cell" style="width: 15%"> <div class="grid_header_cell" style="width: 15%; padding: 1px;">
<div class="grid_header_title"> <div class="grid_header_title">
Public Port</div> Public Port</div>
</div> </div>
<div class="grid_header_cell" style="width: 15%"> <div class="grid_header_cell" style="width: 15%; padding: 1px;">
<div class="grid_header_title"> <div class="grid_header_title">
Private Port</div> Private Port</div>
</div> </div>
<div class="grid_header_cell" style="width: 15%"> <div class="grid_header_cell" style="width: 15%; padding: 1px;">
<div class="grid_header_title"> <div class="grid_header_title">
Protocol</div> Protocol</div>
</div> </div>
<div class="grid_header_cell" style="width: 39%; border: none;"> <div class="grid_header_cell" style="width: 25%; border: none; padding: 1px;">
<div class="grid_header_title"> <div class="grid_header_title">
Instance</div> Instance</div>
</div> </div>
<div class="grid_header_cell" style="width: 15%"> <div class="grid_header_cell" style="width: 10%; padding: 1px;">
<div class="grid_header_title">
State</div>
</div>
<div class="grid_header_cell" style="width: 15%; padding: 1px;">
<div class="grid_header_title"> <div class="grid_header_title">
Action</div> Action</div>
</div> </div>
</div> </div>
<div class="grid_rows even" id="create_port_forwarding_row"> <div class="grid_rows even" id="create_port_forwarding_row">
<div class="grid_row_cell" style="width: 15%;"> <div class="grid_row_cell" style="width: 15%; padding: 1px;">
<input id="public_port" class="text" style="width: 70%;" type="text" /> <input id="public_port" class="text" style="width: 70%;" type="text" />
<div id="public_port_errormsg" class="errormsg" style="display: none;">Error msg will appear here</div> <div id="public_port_errormsg" class="errormsg" style="display: none;">Error msg will appear here</div>
</div> </div>
<div class="grid_row_cell" style="width: 15%;"> <div class="grid_row_cell" style="width: 15%; padding: 1px;">
<input id="private_port" class="text" style="width: 70%;" type="text" /> <input id="private_port" class="text" style="width: 70%;" type="text" />
<div id="private_port_errormsg" class="errormsg" style="display: none;">Error msg will appear here</div> <div id="private_port_errormsg" class="errormsg" style="display: none;">Error msg will appear here</div>
</div> </div>
<div class="grid_row_cell" style="width: 15%;"> <div class="grid_row_cell" style="width: 15%; padding: 1px;">
<select class="select" id="protocol" style="width:70%;"> <select class="select" id="protocol" style="width:70%;">
<option value="TCP">TCP</option> <option value="TCP">TCP</option>
<option value="UDP">UDP</option> <option value="UDP">UDP</option>
</select> </select>
</div> </div>
<div class="grid_row_cell" style="width: 39%;"> <div class="grid_row_cell" style="width: 25%; padding: 1px;">
<select class="select" id="vm"> <select class="select" id="vm">
</select> </select>
<div id="vm_errormsg" class="errormsg" style="display: none;"></div> <div id="vm_errormsg" class="errormsg" style="display: none;"></div>
</div> </div>
<div class="grid_row_cell" style="width: 15%;"> <div class="grid_row_cell" style="width: 10%; padding: 1px;">
<div class="row_celltitles" id="state"></div>
</div>
<div class="grid_row_cell" style="width: 15%; padding: 1px;">
<div class="row_celltitles"> <div class="row_celltitles">
<a id="add_link" href="#">Add</a></div> <a id="add_link" href="#">Add</a></div>
</div> </div>
@ -464,22 +471,25 @@
<!-- Port Forwarding template (begin) --> <!-- Port Forwarding template (begin) -->
<div class="grid_rows odd" id="port_forwarding_template" style="display: none"> <div class="grid_rows odd" id="port_forwarding_template" style="display: none">
<div id="row_container"> <div id="row_container">
<div class="grid_row_cell" style="width: 15%;"> <div class="grid_row_cell" style="width: 15%; padding: 1px;">
<div class="row_celltitles" id="public_port"></div> <div class="row_celltitles" id="public_port"></div>
</div> </div>
<div class="grid_row_cell" style="width: 15%;"> <div class="grid_row_cell" style="width: 15%; padding: 1px;">
<div class="row_celltitles" id="private_port"></div> <div class="row_celltitles" id="private_port"></div>
</div> </div>
<div class="grid_row_cell" style="width: 15%;"> <div class="grid_row_cell" style="width: 15%; padding: 1px;">
<div class="row_celltitles" id="protocol"></div> <div class="row_celltitles" id="protocol"></div>
</div> </div>
<div class="grid_row_cell" style="width: 39%;"> <div class="grid_row_cell" style="width: 25%; padding: 1px;">
<div class="row_celltitles" id="vm_name"></div> <div class="row_celltitles" id="vm_name"></div>
</div> </div>
<div class="grid_row_cell" style="width: 15%;"> <div class="grid_row_cell" style="width: 10%; padding: 1px;">
<div class="row_celltitles" id="state"></div>
</div>
<div class="grid_row_cell" style="width: 15%; padding: 1px;">
<div class="row_celltitles"> <div class="row_celltitles">
<a id="edit_link" href="#" style="float:left;">Edit</a> <a id="edit_link" href="#" style="float:left;">Edit</a>
<a id="delete_link" href="#" style="float:left; margin-left:15px;">Delete</a> <a id="revoke_link" href="#" style="float:left; margin-left:15px;">Revoke</a>
</div> </div>
</div> </div>
<div class="gridrow_loaderbox" style="display: none;" id="spinning_wheel"> <div class="gridrow_loaderbox" style="display: none;" id="spinning_wheel">
@ -491,22 +501,25 @@
</div> </div>
</div> </div>
<div id="row_container_edit" style="display:none"> <div id="row_container_edit" style="display:none">
<div class="grid_row_cell" style="width: 15%;"> <div class="grid_row_cell" style="width: 15%; padding: 1px;">
<div class="row_celltitles" id="public_port"></div> <div class="row_celltitles" id="public_port"></div>
</div> </div>
<div class="grid_row_cell" style="width: 15%;"> <div class="grid_row_cell" style="width: 15%; padding: 1px;">
<input id="private_port" class="text" style="width: 70%;" type="text" /> <input id="private_port" class="text" style="width: 70%;" type="text" />
<div id="private_port_errormsg" class="errormsg" style="display: none;"> <div id="private_port_errormsg" class="errormsg" style="display: none;">
Error msg will appear here</div> Error msg will appear here</div>
</div> </div>
<div class="grid_row_cell" style="width: 15%;"> <div class="grid_row_cell" style="width: 15%; padding: 1px;">
<div class="row_celltitles" id="protocol"></div> <div class="row_celltitles" id="protocol"></div>
</div> </div>
<div class="grid_row_cell" style="width: 39%;"> <div class="grid_row_cell" style="width: 25%; padding: 1px;">
<select class="select" id="vm"> <select class="select" id="vm">
</select> </select>
</div> </div>
<div class="grid_row_cell" style="width: 15%;"> <div class="grid_row_cell" style="width: 10%; padding: 1px;">
<div class="row_celltitles" id="state"></div>
</div>
<div class="grid_row_cell" style="width: 15%; padding: 1px;">
<div class="row_celltitles"> <div class="row_celltitles">
<a id="save_link" href="#" style="float:left;">Save</a> <a id="save_link" href="#" style="float:left;">Save</a>
<a id="cancel_link" href="#" style="float:left; margin-left:15px;">Cancel</a> <a id="cancel_link" href="#" style="float:left; margin-left:15px;">Cancel</a>

View File

@ -155,8 +155,6 @@ function afterLoadIpJSP() {
array1.push("&protocol="+protocol); array1.push("&protocol="+protocol);
array1.push("&virtualmachineid=" + virtualMachineId); array1.push("&virtualmachineid=" + virtualMachineId);
//???
$.ajax({ $.ajax({
data: createURL("command=createPortForwardingRule"+array1.join("")), data: createURL("command=createPortForwardingRule"+array1.join("")),
dataType: "json", dataType: "json",
@ -215,8 +213,7 @@ function afterLoadIpJSP() {
$("#dialog_error").text(fromdb(errorMsg)).dialog("open"); $("#dialog_error").text(fromdb(errorMsg)).dialog("open");
}); });
} }
}); });
return false; return false;
}); });
@ -1085,6 +1082,9 @@ function portForwardingJsonToTemplate(jsonObj, $template) {
$template.find("#row_container #vm_name").text(vmName); $template.find("#row_container #vm_name").text(vmName);
var virtualMachineId = fromdb(jsonObj.virtualmachineid); var virtualMachineId = fromdb(jsonObj.virtualmachineid);
$template.find("#row_container #state").text(fromdb(jsonObj.state));
$template.find("#row_container_edit #state").text(fromdb(jsonObj.state));
var $midmenuItem1 = $("#right_panel_content").data("$midmenuItem1"); var $midmenuItem1 = $("#right_panel_content").data("$midmenuItem1");
if($midmenuItem1 == null) if($midmenuItem1 == null)
return; return;
@ -1102,17 +1102,16 @@ function portForwardingJsonToTemplate(jsonObj, $template) {
var $rowContainer = $template.find("#row_container"); var $rowContainer = $template.find("#row_container");
var $rowContainerEdit = $template.find("#row_container_edit"); var $rowContainerEdit = $template.find("#row_container_edit");
$template.find("#delete_link").unbind("click").bind("click", function(event){ $template.find("#revoke_link").unbind("click").bind("click", function(event){
var $spinningWheel = $rowContainer.find("#spinning_wheel"); var $spinningWheel = $rowContainer.find("#spinning_wheel");
$spinningWheel.find("#description").text("Deleting...."); $spinningWheel.find("#description").text("Revoking....");
$spinningWheel.show(); $spinningWheel.show();
$.ajax({ $.ajax({
data: createURL("command=deletePortForwardingRule&id="+fromdb(jsonObj.id)), data: createURL("command=deletePortForwardingRule&id="+fromdb(jsonObj.id)),
dataType: "json", dataType: "json",
success: function(json) { success: function(json) {
$template.slideUp("slow", function(){ $template.find("#state").text("Revoked");
$(this).remove(); $spinningWheel.hide();
});
}, },
error: function(XMLHttpResponse) { error: function(XMLHttpResponse) {
handleError(XMLHttpResponse); handleError(XMLHttpResponse);