Add Network Offering page.

This commit is contained in:
Jessica Wang 2010-12-14 14:02:27 -08:00
parent b79cc43a6e
commit 6e8a64d38a
4 changed files with 392 additions and 0 deletions

View File

@ -41,6 +41,7 @@
<script type="text/javascript" src="scripts/cloud.core.domain.js?t=<%=now%>"></script>
<script type="text/javascript" src="scripts/cloud.core.serviceoffering.js?t=<%=now%>"></script>
<script type="text/javascript" src="scripts/cloud.core.diskoffering.js?t=<%=now%>"></script>
<script type="text/javascript" src="scripts/cloud.core.networkoffering.js?t=<%=now%>"></script>
<script type="text/javascript" src="scripts/cloud.core.globalsetting.js?t=<%=now%>"></script>
<script type="text/javascript" src="scripts/cloud.core.resource.js?t=<%=now%>"></script>
<script type="text/javascript" src="scripts/cloud.core.zone.js?t=<%=now%>"></script>
@ -846,6 +847,17 @@
</div>
</div>
</div>
<div class="leftmenu_expandedlist">
<div class="leftmenu_content" id="leftmenu_network_offering">
<div class="leftmenu_secondindent">
<div class="leftmenu_arrows white_nonexpanded_close" id="arrowIcon">
</div>
Network Offering
</div>
</div>
</div>
<div class="leftmenu_expandedlist">
<div class="leftmenu_content" id="leftmenu_global_setting">
<div class="leftmenu_secondindent">

174
ui/jsp/networkoffering.jsp Normal file
View File

@ -0,0 +1,174 @@
<%@ page import="java.util.*" %>
<%@ page import="com.cloud.utils.*" %>
<%
Locale browserLocale = request.getLocale();
CloudResourceBundle t = CloudResourceBundle.getBundle("resources/resource", browserLocale);
%>
<div class="main_title" id="right_panel_header">
<div class="main_titleicon">
<img src="images/title_diskofferingicon.gif" alt="Disk Offering" /></div>
<h1>
Network Offering
</h1>
</div>
<div class="contentbox" id="right_panel_content">
<div class="info_detailbox errorbox" id="after_action_info_container_on_top" style="display: none">
<p id="after_action_info">
</p>
</div>
<div class="tabbox" style="margin-top: 15px;">
<div class="content_tabs on">
<%=t.t("details")%></div>
</div>
<div id="tab_content_details">
<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">
<div class="grid_container">
<div class="grid_header">
<div id="grid_header_title" class="grid_header_title">(title)</div>
<div id="action_link" class="grid_actionbox" id="account_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="Div1">
</div>
<p id="description">
Waiting &hellip;</p>
</div>
</div>
<div class="grid_rows odd">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("ID")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="id">
</div>
</div>
</div>
<div class="grid_rows even">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("name")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="name">
</div>
<input class="text" id="name_edit" style="width: 200px; display: none;" type="text" />
<div id="name_edit_errormsg" style="display:none"></div>
</div>
</div>
<div class="grid_rows odd">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("display.text")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="displaytext">
</div>
<input class="text" id="displaytext_edit" style="width: 200px; display: none;" type="text" />
<div id="displaytext_edit_errormsg" style="display:none"></div>
</div>
</div>
<div class="grid_rows odd">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
Type:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="type">
</div>
</div>
</div>
<div class="grid_rows odd">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
Traffic Type:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="traffictype">
</div>
</div>
</div>
<div class="grid_rows odd">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
Is Default:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="isdefault">
</div>
</div>
</div>
<div class="grid_rows odd">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
Specify VLAN:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="specifyvlan">
</div>
</div>
</div>
</div>
<div class="grid_botactionpanel">
<div class="gridbot_buttons" id="save_button" style="display:none;">Save</div>
<div class="gridbot_buttons" id="cancel_button" style="display:none;">Cancel</div>
</div>
</div>
</div>
</div>
<!-- advanced search template (begin) -->
<div id="advanced_search_template" class="adv_searchpopup" style="display: none;">
<div class="adv_searchformbox">
<h3>
Advance Search</h3>
<a id="advanced_search_close" href="#">Close </a>
<form action="#" method="post">
<ol>
<li>
<label>
Name:</label>
<input class="text" type="text" id="adv_search_name" />
</li>
<li id="adv_search_domain_li" style="display: none;">
<label>
Domain:</label>
<select class="select" id="adv_search_domain">
</select>
</li>
</ol>
</form>
<div class="adv_search_actionbox">
<div class="adv_searchpopup_button" id="adv_search_button">
</div>
</div>
</div>
</div>
<!-- advanced search template (end) -->

View File

@ -118,6 +118,7 @@ $(document).ready(function() {
bindAndListMidMenuItems($("#leftmenu_service_offering"), "listServiceOfferings", serviceOfferingGetSearchParams, "listserviceofferingsresponse", "serviceoffering", "jsp/serviceoffering.jsp", afterLoadServiceOfferingJSP, serviceOfferingToMidmenu, serviceOfferingToRightPanel, getMidmenuId, false);
bindAndListMidMenuItems($("#leftmenu_disk_offering"), "listDiskOfferings", diskOfferingGetSearchParams, "listdiskofferingsresponse", "diskoffering", "jsp/diskoffering.jsp", afterLoadDiskOfferingJSP, diskOfferingToMidmenu, diskOfferingToRightPanel, getMidmenuId, false);
bindAndListMidMenuItems($("#leftmenu_network_offering"), "listNetworkOfferings", networkOfferingGetSearchParams, "listnetworkofferingsresponse", "networkoffering", "jsp/networkoffering.jsp", afterLoadNetworkOfferingJSP, networkOfferingToMidmenu, networkOfferingToRightPanel, getMidmenuId, false);
bindAndListMidMenuItems($("#leftmenu_submenu_virtual_router"), "listRouters", routerGetSearchParams, "listroutersresponse", "router", "jsp/router.jsp", afterLoadRouterJSP, routerToMidmenu, routerToRightPanel, getMidmenuId, false);
bindAndListMidMenuItems($("#leftmenu_submenu_systemvm"), "listSystemVms", systemVmGetSearchParams, "listsystemvmsresponse", "systemvm", "jsp/systemvm.jsp", afterLoadSystemVmJSP, systemvmToMidmenu, systemvmToRightPanel, getMidmenuId, false);

View File

@ -0,0 +1,205 @@
/**
* Copyright (C) 2010 Cloud.com, Inc. All rights reserved.
*
* This software is licensed under the GNU General Public License v3 or later.
*
* It is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or any later version.
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
function networkOfferingGetSearchParams() {
var moreCriteria = [];
var $advancedSearchPopup = $("#advanced_search_popup");
if (lastSearchType == "advanced_search" && $advancedSearchPopup.length > 0) {
var name = $advancedSearchPopup.find("#adv_search_name").val();
if (name!=null && trim(name).length > 0)
moreCriteria.push("&name="+todb(name));
if ($advancedSearchPopup.find("#adv_search_domain_li").css("display") != "none") {
var domainId = $advancedSearchPopup.find("#adv_search_domain").val();
if (domainId!=null && domainId.length > 0)
moreCriteria.push("&domainid="+domainId);
}
}
else {
var searchInput = $("#basic_search").find("#search_input").val();
if (lastSearchType == "basic_search" && searchInput != null && searchInput.length > 0) {
moreCriteria.push("&keyword="+todb(searchInput));
}
}
return moreCriteria.join("");
}
function afterLoadNetworkOfferingJSP() {
}
function doEditNetworkOffering($actionLink, $detailsTab, $midmenuItem1) {
var $readonlyFields = $detailsTab.find("#name, #displaytext, #tags, #domain");
var $editFields = $detailsTab.find("#name_edit, #displaytext_edit, #domain_edit");
$readonlyFields.hide();
$editFields.show();
$detailsTab.find("#cancel_button, #save_button").show();
$detailsTab.find("#cancel_button").unbind("click").bind("click", function(event){
$editFields.hide();
$readonlyFields.show();
$("#save_button, #cancel_button").hide();
return false;
});
$detailsTab.find("#save_button").unbind("click").bind("click", function(event){
doEditNetworkOffering2($actionLink, $detailsTab, $midmenuItem1, $readonlyFields, $editFields);
return false;
});
}
function doEditNetworkOffering2($actionLink, $detailsTab, $midmenuItem1, $readonlyFields, $editFields) {
var jsonObj = $midmenuItem1.data("jsonObj");
var id = jsonObj.id;
// validate values
var isValid = true;
isValid &= validateString("Name", $detailsTab.find("#name_edit"), $detailsTab.find("#name_edit_errormsg"), true);
isValid &= validateString("Display Text", $detailsTab.find("#displaytext_edit"), $detailsTab.find("#displaytext_edit_errormsg"), true);
if (!isValid)
return;
var array1 = [];
var name = $detailsTab.find("#name_edit").val();
array1.push("&name="+todb(name));
var displaytext = $detailsTab.find("#displaytext_edit").val();
array1.push("&displayText="+todb(displaytext));
var tags = $detailsTab.find("#tags_edit").val();
array1.push("&tags="+todb(tags));
var domainid = $detailsTab.find("#domain_edit").val();
array1.push("&domainid="+todb(domainid));
$.ajax({
data: createURL("command=updateNetworkOffering&id="+id+array1.join("")),
dataType: "json",
success: function(json) {
var jsonObj = json.updateNetworkOfferingresponse.NetworkOffering;
networkOfferingToMidmenu(jsonObj, $midmenuItem1);
networkOfferingToRightPanel($midmenuItem1);
$editFields.hide();
$readonlyFields.show();
$("#save_button, #cancel_button").hide();
}
});
}
function networkOfferingToMidmenu(jsonObj, $midmenuItem1) {
$midmenuItem1.attr("id", getMidmenuId(jsonObj));
$midmenuItem1.data("jsonObj", jsonObj);
/*
var $iconContainer = $midmenuItem1.find("#icon_container").show();
$iconContainer.find("#icon").attr("src", "images/midmenuicon_system_networkOffering.png");
*/
$midmenuItem1.find("#first_row").text(fromdb(jsonObj.name).substring(0,25));
$midmenuItem1.find("#second_row").text(fromdb(jsonObj.type).substring(0,25));
}
function networkOfferingToRightPanel($midmenuItem1) {
copyActionInfoFromMidMenuToRightPanel($midmenuItem1);
$("#right_panel_content").data("$midmenuItem1", $midmenuItem1);
networkOfferingJsonToDetailsTab();
}
function networkOfferingJsonToDetailsTab() {
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 #tab_content_details");
$thisTab.find("#tab_container").hide();
$thisTab.find("#tab_spinning_wheel").show();
var id = jsonObj.id;
var jsonObj;
$.ajax({
data: createURL("command=listNetworkOfferings&id="+id),
dataType: "json",
async: false,
success: function(json) {
var items = json.listNetworkOfferingsresponse.NetworkOffering;
if(items != null && items.length > 0) {
jsonObj = items[0];
$midmenuItem1.data("jsonObj", jsonObj);
}
}
});
$thisTab.find("#id").text(fromdb(jsonObj.id));
$thisTab.find("#grid_header_title").text(fromdb(jsonObj.name));
$thisTab.find("#name").text(fromdb(jsonObj.name));
//$thisTab.find("#name_edit").val(fromdb(jsonObj.name));
$thisTab.find("#displaytext").text(fromdb(jsonObj.displaytext));
//$thisTab.find("#displaytext_edit").val(fromdb(jsonObj.displaytext));
$thisTab.find("#type").text(fromdb(jsonObj.type));
$thisTab.find("#traffictype").text(fromdb(jsonObj.traffictype));
setBooleanReadField(jsonObj.isdefault, $thisTab.find("#isdefault"));
setBooleanReadField(jsonObj.specifyvlan, $thisTab.find("#specifyvlan"));
//actions ***
var $actionMenu = $("#right_panel_content #tab_content_details #action_link #action_menu");
$actionMenu.find("#action_list").empty();
buildActionLinkForTab("Edit Network Offering", networkOfferingActionMap, $actionMenu, $midmenuItem1, $thisTab);
$thisTab.find("#tab_spinning_wheel").hide();
$thisTab.find("#tab_container").show();
}
function networkOfferingClearRightPanel() {
networkOfferingClearDetailsTab();
}
function networkOfferingClearDetailsTab() {
var $thisTab = $("#right_panel_content").find("#tab_content_details");
$thisTab.find("#id").text("");
$thisTab.find("#grid_header_title").text("");
$thisTab.find("#name").text("");
$thisTab.find("#name_edit").val("");
$thisTab.find("#displaytext").text("");
$thisTab.find("#displaytext_edit").val("");
$thisTab.find("#disksize").text("");
$thisTab.find("#tags").text("");
$thisTab.find("#domain").text("");
var $actionMenu = $("#right_panel_content #tab_content_details #action_link #action_menu");
$actionMenu.find("#action_list").empty();
$actionMenu.find("#action_list").append($("#no_available_actions").clone().show());
}
var networkOfferingActionMap = {
"Edit Network Offering": {
dialogBeforeActionFn: doEditNetworkOffering
}
}