new UI - IP address page - implement details tab.

This commit is contained in:
Jessica Wang 2010-09-17 16:25:17 -07:00
parent 6b22e51221
commit 263bfe13bd
3 changed files with 62 additions and 35 deletions

View File

@ -61,7 +61,7 @@
IP:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles">
<div class="row_celltitles" id="ipaddress">
</div>
</div>
</div>
@ -71,7 +71,7 @@
Zone:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles">
<div class="row_celltitles" id="zonename">
</div>
</div>
</div>
@ -81,67 +81,57 @@
VLAN:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles">
<div class="row_celltitles" id="vlanname">
</div>
</div>
</div>
</div>
<div class="grid_rows even">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("Level")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="level">
</div>
</div>
</div>
<div class="grid_rows odd">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
Source NAT:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles">
<div class="row_celltitles" id="source_nat">
</div>
</div>
</div>
<div class="grid_rows even">
<div class="grid_rows odd">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
Network Type:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles">
</div>
</div>
</div>
<div class="grid_rows odd">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
Domain:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles">
<div class="row_celltitles" id="network_type">
</div>
</div>
</div>
<div class="grid_rows even">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
Account:</div>
Domain:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles">
<div class="row_celltitles" id="domain">
</div>
</div>
</div>
<div class="grid_rows odd">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
Account:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="account">
</div>
</div>
</div>
<div class="grid_rows even">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
Allocated:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles">
<div class="row_celltitles" id="allocated">
</div>
</div>
</div>

View File

@ -75,7 +75,7 @@ $(document).ready(function() {
listMidMenuItems("leftmenu_account", "listAccounts", "listaccountsresponse", "account", "jsp/account.jsp", afterLoadAccountJSP, accountToMidmenu, accountToRigntPanel);
listMidMenuItems("leftmenu_volume", "listVolumes", "listvolumesresponse", "volume", "jsp/volume.jsp", afterLoadVolumeJSP, volumeToMidmenu, volumeToRigntPanel);
listMidMenuItems("leftmenu_snapshot", "listSnapshots", "listsnapshotsresponse", "snapshot", "jsp/snapshot.jsp", afterLoadSnapshotJSP, snapshotToMidmenu, snapshotToRigntPanel);
listMidMenuItems("leftmenu_ip", "listPublicIpAddresses", "listpublicipaddressesresponse", "publicipaddress", "jsp/ip_address.jsp", afterLoadIpJSP, ipToMidmenu, ipToRigntPanel);
listMidMenuItems("leftmenu_ip", "listPublicIpAddresses", "listpublicipaddressesresponse", "publicipaddress", "jsp/ip_address.jsp", afterLoadIpJSP, ipToMidmenu, ipToRigntPanel, ipGetMidmenuId);
listMidMenuItems("leftmenu_router", "listRouters", "listroutersresponse", "router", "jsp/router.jsp", afterLoadRouterJSP, routerToMidmenu, routerToRigntPanel);
listMidMenuItems("leftmenu_submenu_my_template", "listTemplates&templatefilter=self", "listtemplatesresponse", "template", "jsp/template.jsp", afterLoadTemplateJSP, templateToMidmenu, templateToRigntPanel, templateGetMidmenuId);

View File

@ -2,8 +2,13 @@ function afterLoadIpJSP() {
}
function ipGetMidmenuId(jsonObj) {
return "midmenuItem_" + jsonObj.ipaddress.replace(/\./g, "_"); //e.g. "192.168.33.108" => "192_168_33_108"
}
function ipToMidmenu(jsonObj, $midmenuItem1) {
$midmenuItem1.attr("id", ("midmenuItem_"+jsonObj.id));
var id = ipGetMidmenuId(jsonObj);
$midmenuItem1.attr("id", id);
$midmenuItem1.data("jsonObj", jsonObj);
var $iconContainer = $midmenuItem1.find("#icon_container").show();
@ -13,8 +18,40 @@ function ipToMidmenu(jsonObj, $midmenuItem1) {
$midmenuItem1.find("#second_row").text(fromdb(jsonObj.account).substring(0,25));
}
function ipToRigntPanel($midmenuItem) {
var jsonObj = $midmenuItem.data("jsonObj");
function ipToRigntPanel($midmenuItem1) {
var jsonObj = $midmenuItem1.data("jsonObj");
ipJsonToDetailsTab(jsonObj);
}
function ipJsonToDetailsTab(jsonObj) {
var $detailsTab = $("#right_panel_content #tab_content_details");
$detailsTab.data("jsonObj", jsonObj);
var $rightPanelContent = $("#right_panel_content");
$detailsTab.find("#ipaddress").text(fromdb(jsonObj.ipaddress));
$detailsTab.find("#zonename").text(fromdb(jsonObj.zonename));
$detailsTab.find("#vlanname").text(fromdb(jsonObj.vlanname));
setSourceNatField(jsonObj.issourcenat, $detailsTab.find("#source_nat"));
setNetworkTypeField(jsonObj.forvirtualnetwork, $detailsTab.find("#network_type"));
$detailsTab.find("#domain").text(fromdb(jsonObj.domain));
$detailsTab.find("#account").text(fromdb(jsonObj.account));
$detailsTab.find("#allocated").text(fromdb(jsonObj.allocated));
}
function setSourceNatField(value, $field) {
if(value == "true")
$field.text("Yes");
else if(value == "false")
$field.text("No");
else
$field.text("");
}
function setNetworkTypeField(value, $field) {
if(value == "true")
$field.text("Public");
else if(value == "false")
$field.text("Direct");
else
$field.text("");
}