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

bug 9687: CloudStack UI - Instance page - add "Security Group" tab.

This commit is contained in:
Jessica Wang 2011-05-02 20:01:56 -07:00
parent 96043d4326
commit 2bb3d0d695
2 changed files with 99 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
ui/jsp/instance.jsp
View File

@ -71,10 +71,12 @@ dictionary = {
<fmt:message key="label.details" /></div>
<div class="content_tabs off" id="tab_nic">
<fmt:message key="label.nics"/></div>
<div class="content_tabs off" id="tab_securitygroup" style="display:none;">
<fmt:message key="label.security.group"/></div>
<div class="content_tabs off" id="tab_volume">
<fmt:message key="label.volumes"/></div>
<div class="content_tabs off" id="tab_statistics">
<fmt:message key="label.statistics"/></div>
<fmt:message key="label.statistics"/></div>
</div>
<!--Details tab (start)-->
<div id="tab_content_details">
@ -287,6 +289,20 @@ dictionary = {
</div>
</div>
<!--Nic tab (end)-->
<!--Security Group tab (start)-->
<div style="display: none;" id="tab_content_securitygroup">
<div id="tab_spinning_wheel" class="rightpanel_mainloader_panel" style="display:none;">
<div class="rightpanel_mainloaderbox">
<div class="rightpanel_mainloader_animatedicon"></div>
<p><fmt:message key="label.loading"/> &hellip;</p>
</div>
</div>
<div id="tab_container">
</div>
</div>
<!--Security Group tab (end)-->
<!--Volume tab (start)-->
<div style="display: none;" id="tab_content_volume">
<div id="tab_spinning_wheel" class="rightpanel_mainloader_panel" style="display:none;">
@ -392,7 +408,8 @@ dictionary = {
</div>
</div>
</div>
<!--Statistics tab (end)-->
<!--Statistics tab (end)-->
</div>
<!-- VM detail panel (end) -->
@ -1042,6 +1059,35 @@ dictionary = {
</div>
<!-- nic tab template (end) -->
<!-- Security Group tab template (begin) -->
<div class="grid_container" id="securitygroup_tab_template" style="display: none">
<div class="grid_header">
<div class="grid_header_title" id="title">
</div>
</div>
<div class="grid_rows even">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<fmt:message key="label.name"/>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="name">
</div>
</div>
</div>
<div class="grid_rows odd">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<fmt:message key="label.description"/>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="description">
</div>
</div>
</div>
</div>
<!-- Security Group tab template (end) -->
<!-- volume tab template (begin) -->
<div class="grid_container" id="volume_tab_template" style="display: none">
<div class="grid_header">

55
ui/scripts/cloud.core.instance.js
View File

@ -122,11 +122,18 @@ function afterLoadInstanceJSP() {
bindDestroyVMButton();
// switch between different tabs
var tabArray = [$("#tab_details"), $("#tab_nic"), $("#tab_volume"), $("#tab_statistics")];
var tabContentArray = [$("#tab_content_details"), $("#tab_content_nic"), $("#tab_content_volume"), $("#tab_content_statistics")];
var afterSwitchFnArray = [vmJsonToDetailsTab, vmJsonToNicTab, vmJsonToVolumeTab, vmJsonToStatisticsTab];
var tabArray = [$("#tab_details"), $("#tab_nic"), $("#tab_securitygroup"), $("#tab_volume"), $("#tab_statistics")];
var tabContentArray = [$("#tab_content_details"), $("#tab_content_nic"), $("#tab_content_securitygroup"), $("#tab_content_volume"), $("#tab_content_statistics")];
var afterSwitchFnArray = [vmJsonToDetailsTab, vmJsonToNicTab, vmJsonToSecurityGroupTab, vmJsonToVolumeTab, vmJsonToStatisticsTab];
switchBetweenDifferentTabs(tabArray, tabContentArray, afterSwitchFnArray);
if(getDirectAttachSecurityGroupsEnabled() == "true") {
$("#tab_securitygroup").show();
}
else {
$("#tab_securitygroup").hide();
}
// dialogs
initDialog("dialog_detach_iso_from_vm");
initDialog("dialog_attach_iso");
@ -2067,6 +2074,38 @@ function vmJsonClearNicTab() {
$thisTab.find("#tab_container").empty();
}
function vmJsonToSecurityGroupTab() {
var $midmenuItem1 = $("#right_panel_content").data("$midmenuItem1");
if ($midmenuItem1 == null) {
vmJsonClearSecurityGroupTab();
return;
}
var jsonObj = $midmenuItem1.data("jsonObj");
if(jsonObj == null) {
vmJsonClearSecurityGroupTab();
return;
}
var $thisTab = $("#right_panel_content").find("#tab_content_securitygroup");
var items = jsonObj.securitygroup;
var template = $("#securitygroup_tab_template");
var $container = $thisTab.find("#tab_container").empty();
if(items != null && items.length > 0) {
for (var i = 0; i < items.length; i++) {
var newTemplate = template.clone(true);
vmSecurityGroupJSONToTemplate(items[i], newTemplate);
$container.append(newTemplate.show());
}
}
}
function vmJsonClearSecurityGroupTab() {
var $thisTab = $("#right_panel_content").find("#tab_content_securitygroup");
$thisTab.find("#tab_container").empty();
}
function vmJsonToVolumeTab() {
var $midmenuItem1 = $("#right_panel_content").data("$midmenuItem1");
if ($midmenuItem1 == null) {
@ -2169,6 +2208,7 @@ function vmJsonClearStatisticsTab() {
function vmClearRightPanel(jsonObj) {
vmJsonClearDetailsTab();
vmJsonClearNicTab();
vmJsonClearSecurityGroupTab();
vmJsonClearVolumeTab();
vmJsonClearStatisticsTab();
$("#tab_details").click();
@ -2243,6 +2283,13 @@ function vmNicJSONToTemplate(json, $template, index) {
$template.find("#netmask").text(fromdb(json.netmask));
}
function vmSecurityGroupJSONToTemplate(json, $template) {
$template.attr("id","vm_securitygroup_"+fromdb(json.id));
$template.find("#title").text(fromdb(json.name));
$template.find("#name").text(fromdb(json.name));
$template.find("#description").text(fromdb(json.description));
}
function vmVolumeJSONToTemplate(json, $template) {
$template.attr("id","vm_volume_"+fromdb(json.id));
$template.data("jsonObj", json);