diff --git a/ui/jsp/network.jsp b/ui/jsp/network.jsp index e044776ae99..ce76a370309 100644 --- a/ui/jsp/network.jsp +++ b/ui/jsp/network.jsp @@ -18,7 +18,185 @@ + + + + + + diff --git a/ui/scripts/cloud.core.network.js b/ui/scripts/cloud.core.network.js index df26b29874c..351afd2d04a 100644 --- a/ui/scripts/cloud.core.network.js +++ b/ui/scripts/cloud.core.network.js @@ -24,23 +24,24 @@ function afterLoadNetworkJSP($leftmenuItem1) { showMiddleMenu(); disableMultipleSelectionInMidMenu(); + //switch between different tabs - Public Network page + var $publicNetworkPage = $("#public_network_page"); + var tabArray = [$publicNetworkPage.find("#tab_details"), $publicNetworkPage.find("#tab_ipallocation"), $publicNetworkPage.find("#tab_firewall"), $publicNetworkPage.find("#tab_loadbalancer")]; + var tabContentArray = [$publicNetworkPage.find("#tab_content_details"), $publicNetworkPage.find("#tab_content_ipallocation"), $publicNetworkPage.find("#tab_content_firewall"), $publicNetworkPage.find("#tab_content_loadbalancer")]; + var afterSwitchFnArray = [publicNetworkJsonToDetailsTab, publicNetworkJsonToIpAllocationTab, publicNetworkJsonToFirewallTab, publicNetworkJsonToLoadBalancerTab]; + switchBetweenDifferentTabs(tabArray, tabContentArray, afterSwitchFnArray); + //switch between different tabs - Direct Network page var $directNetworkPage = $("#direct_network_page"); var tabArray = [$directNetworkPage.find("#tab_details"), $directNetworkPage.find("#tab_ipallocation")]; var tabContentArray = [$directNetworkPage.find("#tab_content_details"), $directNetworkPage.find("#tab_content_ipallocation")]; var afterSwitchFnArray = [directNetworkJsonToDetailsTab, directNetworkJsonToIpAllocationTab]; - switchBetweenDifferentTabs(tabArray, tabContentArray, afterSwitchFnArray); - - //switch between different tabs - Public Network page - var $publicNetworkPage = $("#public_network_page"); - var tabArray = [$publicNetworkPage.find("#tab_details"), $publicNetworkPage.find("#tab_ipallocation")]; - var tabContentArray = [$publicNetworkPage.find("#tab_content_details"), $publicNetworkPage.find("#tab_content_ipallocation")]; - var afterSwitchFnArray = [publicNetworkJsonToDetailsTab, publicNetworkJsonToIpAllocationTab]; - switchBetweenDifferentTabs(tabArray, tabContentArray, afterSwitchFnArray); + switchBetweenDifferentTabs(tabArray, tabContentArray, afterSwitchFnArray); //populate items into middle menu var $midmenuContainer = $("#midmenu_container").empty(); - + + //public network if(zoneObj.networktype == "Advanced") { $.ajax({ data: createURL("command=listNetworks&isSystem=true&zoneId="+zoneObj.id), @@ -61,6 +62,7 @@ function afterLoadNetworkJSP($leftmenuItem1) { }); } + //direct network $.ajax({ data: createURL("command=listNetworks&type=Direct&zoneId="+zoneObj.id), dataType: "json", @@ -79,6 +81,150 @@ function afterLoadNetworkJSP($leftmenuItem1) { }); } +//***** Public Network (begin) ****************************************************************************************************** +function publicNetworkGetMidmenuId(jsonObj) { + return "midmenuItem_publicnetework_" + jsonObj.id; +} + +function publicNetworkToMidmenu(jsonObj, $midmenuItem1) { + $midmenuItem1.attr("id", publicNetworkGetMidmenuId(jsonObj)); + $midmenuItem1.data("jsonObj", jsonObj); + + /* + var $iconContainer = $midmenuItem1.find("#icon_container").show(); + $iconContainer.find("#icon").attr("src", "images/midmenuicon_storage_snapshots.png"); + */ + + $midmenuItem1.find("#first_row").text("Public Network"); + $midmenuItem1.find("#second_row").text("Network ID: " + fromdb(jsonObj.id)); +} + +function publicNetworkToRightPanel($midmenuItem1) { + copyActionInfoFromMidMenuToRightPanel($midmenuItem1); + $("#right_panel_content").data("$midmenuItem1", $midmenuItem1); + + $("#public_network_page").show(); + $("#direct_network_page").hide(); + + $("#public_network_page").find("#tab_details").click(); +} + +function publicNetworkJsonToDetailsTab() { + var $midmenuItem1 = $("#right_panel_content").data("$midmenuItem1"); + if($midmenuItem1 == null) + return; + + var jsonObj = $midmenuItem1.data("jsonObj"); + if(jsonObj == null) + return; + + var $thisTab = $("#right_panel_content #public_network_page #tab_content_details"); + $thisTab.find("#tab_container").hide(); + $thisTab.find("#tab_spinning_wheel").show(); + + $thisTab.find("#grid_header_title").text(fromdb(jsonObj.name)); + + $thisTab.find("#id").text(fromdb(jsonObj.id)); + $thisTab.find("#name").text(fromdb(jsonObj.name)); + $thisTab.find("#displaytext").text(fromdb(jsonObj.displaytext)); + + $thisTab.find("#vlan").text(fromdb(jsonObj.vlan)); + $thisTab.find("#gateway").text(fromdb(jsonObj.gateway)); + $thisTab.find("#netmask").text(fromdb(jsonObj.netmask)); + var ipRange = getIpRange(fromdb(jsonObj.startip), fromdb(jsonObj.endip)); + $thisTab.find("#iprange").text(ipRange); + + $thisTab.find("#domain").text(fromdb(jsonObj.domain)); //might be null + $thisTab.find("#account").text(fromdb(jsonObj.account)); //might be null + + $thisTab.find("#tab_container").show(); + $thisTab.find("#tab_spinning_wheel").hide(); +} + +function publicNetworkJsonToIpAllocationTab() { + var $midmenuItem1 = $("#right_panel_content").data("$midmenuItem1"); + if($midmenuItem1 == null) + return; + + var jsonObj = $midmenuItem1.data("jsonObj"); + if(jsonObj == null) + return; + + var $thisTab = $("#right_panel_content #public_network_page #tab_content_ipallocation"); + $thisTab.find("#tab_container").hide(); + $thisTab.find("#tab_spinning_wheel").show(); + + $.ajax({ + data: createURL("command=listVlanIpRanges&zoneid="+ jsonObj.zoneid + "&networkid="+jsonObj.id), + dataType: "json", + success: function(json) { + var items = json.listvlaniprangesresponse.vlaniprange; + var $container = $thisTab.find("#tab_container").empty(); + var $template = $("#directnetwork_iprange_template"); + if(items != null && items.length > 0) { + for(var i=0; i 0) { - for(var i=0; i