bug 6983 - host page - add Instance tab that list all instances under this host.

This commit is contained in:
Jessica Wang 2010-11-09 15:52:31 -08:00
parent 424400d2b9
commit f9cedd56ad
5 changed files with 158 additions and 22 deletions

View File

@ -23,7 +23,9 @@
<div class="content_tabs on" id="tab_details">
<%=t.t("details")%></div>
<div class="content_tabs off" id="tab_statistics">
<%=t.t("Statistics")%></div>
<%=t.t("statistics")%></div>
<div class="content_tabs off" id="tab_instance">
<%=t.t("instance")%></div>
</div>
<!-- Details tab (start)-->
<div id="tab_content_details">
@ -278,10 +280,112 @@
</div>
</div>
</div>
<!--Statistics tab (end)-->
<!--Statistics tab (end)-->
<!--Instance tab (start)-->
<div style="display: none;" id="tab_content_instance">
<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>
</div>
<!--Instance tab (end)-->
</div>
<!-- instance tab template (begin) -->
<div class="grid_container" id="instance_tab_template" style="display: none">
<div class="grid_header">
<div class="grid_header_title" id="grid_header_title">
</div>
<div class="grid_actionbox" id="snapshot_action_link">
<div class="grid_actionsdropdown_box" id="snapshot_action_menu" style="display: none;">
<ul class="actionsdropdown_boxlist" id="action_list">
</ul>
</div>
</div>
<div class="gridheader_loaderbox" id="spinning_wheel" style="display: none; height: 18px;">
<div class="gridheader_loader" id="icon">
</div>
<p id="description">
Waiting &hellip;
</p>
</div>
</div>
<div class="grid_rows" id="after_action_info_container" style="display:none">
<div class="grid_row_cell" style="width: 90%; border: none;">
<div class="row_celltitles">
<strong id="after_action_info">Message will appear here</strong></div>
</div>
</div>
<div class="grid_rows even">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
ID:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="id">
</div>
</div>
</div>
<div class="grid_rows odd">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
Name:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="name">
</div>
</div>
</div>
<div class="grid_rows even">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
IP:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="ipaddress">
</div>
</div>
</div>
<div class="grid_rows odd">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
Service Offering:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="serviceOfferingName">
</div>
</div>
</div>
<div class="grid_rows even">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
Created:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="created">
</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>
<!-- instance tab template (end) -->
<!-- Add Host Dialog -->
<div id="dialog_add_host" title="Add Host" style="display: none">
<p>

View File

@ -183,6 +183,7 @@
<div id="tab_container">
</div>
</div>
<!--Snapshot tab (end)-->
</div>
<!-- volume detail panel (end) -->
<!-- Create Template Dialog -->
@ -616,7 +617,7 @@
<!-- Snapshot tab template (begin) -->
<div class="grid_container" id="snapshot_tab_template" style="display: none">
<div class="grid_header">
<div class="grid_header_title" id="title">
<div class="grid_header_title" id="grid_header_title">
</div>
<div class="grid_actionbox" id="snapshot_action_link">
<div class="grid_actionsdropdown_box" id="snapshot_action_menu" style="display: none;">

View File

@ -29,9 +29,9 @@ function afterLoadHostJSP($midmenuItem1) {
initDialog("dialog_update_os");
// switch between different tabs
var tabArray = [$("#tab_details"), $("#tab_statistics")];
var tabContentArray = [$("#tab_content_details"), $("#tab_content_statistics")];
var afterSwitchFnArray = [hostJsonToDetailsTab, hostJsonToStatisticsTab];
var tabArray = [$("#tab_details"), $("#tab_statistics"), $("#tab_instance")];
var tabContentArray = [$("#tab_content_details"), $("#tab_content_statistics"), $("#tab_content_instance")];
var afterSwitchFnArray = [hostJsonToDetailsTab, hostJsonToStatisticsTab, hostJsonToInstanceTab];
switchBetweenDifferentTabs(tabArray, tabContentArray, afterSwitchFnArray);
}
@ -139,18 +139,7 @@ function hostJsonToDetailsTab() {
else {
alert("Unsupported Host State: " + jsonObj.state);
}
//temporary for testing (begin) *****
/*
buildActionLinkForTab("Enable Maintenance Mode", hostActionMap, $actionMenu, $midmenuItem1, $detailsTab);
buildActionLinkForTab("Cancel Maintenance Mode", hostActionMap, $actionMenu, $midmenuItem1, $detailsTab);
buildActionLinkForTab("Force Reconnect", hostActionMap, $actionMenu, $midmenuItem1, $detailsTab);
buildActionLinkForTab("Remove Host", hostActionMap, $actionMenu, $midmenuItem1, $detailsTab);
buildActionLinkForTab("Update OS Preference", hostActionMap, $actionMenu, $midmenuItem1, $detailsTab);
noAvailableActions = false;
*/
//temporary for testing (begin) *****
// no available actions
if(noAvailableActions == true) {
$actionMenu.find("#action_list").append($("#no_available_actions").clone().show());
@ -200,6 +189,47 @@ function hostJsonToStatisticsTab() {
$thisTab.find("#tab_container").show();
}
function hostJsonToInstanceTab() {
var $thisTab = $("#right_panel_content #tab_content_instance");
$thisTab.find("#tab_container").hide();
$thisTab.find("#tab_spinning_wheel").show();
var $midmenuItem1 = $("#right_panel_content").data("$midmenuItem1");
var jsonObj = $midmenuItem1.data("jsonObj");
$.ajax({
cache: false,
data: createURL("command=listVirtualMachines&hostid="+jsonObj.id),
dataType: "json",
success: function(json) {
var items = json.listvirtualmachinesresponse.virtualmachine;
if (items != null && items.length > 0) {
var $container = $thisTab.find("#tab_container").empty();
var template = $("#instance_tab_template");
for (var i = 0; i < items.length; i++) {
var newTemplate = template.clone(true);
hostInstanceJSONToTemplate(items[i], newTemplate);
$container.append(newTemplate.show());
}
}
$thisTab.find("#tab_spinning_wheel").hide();
$thisTab.find("#tab_container").show();
}
});
}
function hostInstanceJSONToTemplate(jsonObj, template) {
template.data("jsonObj", jsonObj);
template.attr("id", "host_instance_"+jsonObj.id).data("hostInstanceId", jsonObj.id);
template.find("#grid_header_title").text(fromdb(jsonObj.name));
template.find("#id").text(jsonObj.id);
template.find("#name").text(fromdb(jsonObj.name));
template.find("#ipaddress").text(fromdb(jsonObj.ipaddress));
template.find("#serviceOfferingName").text(fromdb(jsonObj.serviceofferingname));
template.find("#account").text(fromdb(jsonObj.account));
setDateField(jsonObj.created, template.find("#created"));
}
function hostClearRightPanel() {
hostClearDetailsTab();
}

View File

@ -1334,8 +1334,7 @@ function vmJsonToDetailsTab(){
$thisTab.find("#ipaddress").text(fromdb(jsonObj.ipaddress));
$thisTab.find("#templateName").text(fromdb(jsonObj.templatename));
$thisTab.find("#serviceOfferingName").text(fromdb(jsonObj.serviceofferingname));
$thisTab.find("#created").text(jsonObj.created);
$thisTab.find("#serviceOfferingName").text(fromdb(jsonObj.serviceofferingname));
$thisTab.find("#account").text(fromdb(jsonObj.account));
$thisTab.find("#domain").text(fromdb(jsonObj.domain));
$thisTab.find("#hostName").text(fromdb(jsonObj.hostname));
@ -1343,6 +1342,8 @@ function vmJsonToDetailsTab(){
$thisTab.find("#group").text(fromdb(jsonObj.group));
$thisTab.find("#group_edit").val(fromdb(jsonObj.group));
setDateField(jsonObj.created, $thisTab.find("#created"));
setBooleanReadField(jsonObj.haenable, $thisTab.find("#haenable"));
setBooleanEditField(jsonObj.haenable, $thisTab.find("#haenable_edit"));
//$thisTab.find("#haenable_edit").val(jsonObj.haenable);

View File

@ -484,7 +484,7 @@ function volumeJsonToSnapshotTab() {
function volumeSnapshotJSONToTemplate(jsonObj, template) {
template.data("jsonObj", jsonObj);
template.attr("id", "volume_snapshot_"+jsonObj.id).data("volumeSnapshotId", jsonObj.id);
template.find("#title").text(fromdb(jsonObj.name));
template.find("#grid_header_title").text(fromdb(jsonObj.name));
template.find("#id").text(jsonObj.id);
template.find("#name").text(fromdb(jsonObj.name));
template.find("#volumename").text(fromdb(jsonObj.volumename));