bug 6983 - host page - add Router tab that list all routers under this host.

This commit is contained in:
Jessica Wang 2010-11-09 16:16:25 -08:00
parent f9cedd56ad
commit 49f55f0a56
3 changed files with 162 additions and 4 deletions

View File

@ -30,6 +30,7 @@ service.offerings = Service Offerings
disk.offerings = Disk Offerings
details = Details
statistics = Statistics
network = Network
secondary.storage = Secondary Storage

View File

@ -26,6 +26,8 @@
<%=t.t("statistics")%></div>
<div class="content_tabs off" id="tab_instance">
<%=t.t("instance")%></div>
<div class="content_tabs off" id="tab_router">
<%=t.t("router")%></div>
</div>
<!-- Details tab (start)-->
<div id="tab_content_details">
@ -294,6 +296,19 @@
</div>
</div>
<!--Instance tab (end)-->
<!--router tab (start)-->
<div style="display: none;" id="tab_content_router">
<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>
<!--router tab (end)-->
</div>
<!-- instance tab template (begin) -->
@ -301,7 +316,7 @@
<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_actionbox" id="snapshot_action_link" style="display: none;">
<div class="grid_actionsdropdown_box" id="snapshot_action_menu" style="display: none;">
<ul class="actionsdropdown_boxlist" id="action_list">
</ul>
@ -386,6 +401,106 @@
</div>
<!-- instance tab template (end) -->
<!-- router tab template (begin) -->
<div class="grid_container" id="router_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" style="display: none;">
<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">
<%=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 odd">
<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>
</div>
</div>
<div class="grid_rows even">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("Public IP")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="publicip">
</div>
</div>
</div>
<div class="grid_rows even">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("Private IP")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="privateip">
</div>
</div>
</div>
<div class="grid_rows even">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("Guest IP")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="guestipaddress">
</div>
</div>
</div>
<div class="grid_rows even">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("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">
<%=t.t("Account")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="account">
</div>
</div>
</div>
</div>
<!-- router tab template (end) -->
<!-- Add Host Dialog -->
<div id="dialog_add_host" title="Add Host" style="display: none">
<p>

View File

@ -29,9 +29,9 @@ function afterLoadHostJSP($midmenuItem1) {
initDialog("dialog_update_os");
// switch between different tabs
var tabArray = [$("#tab_details"), $("#tab_statistics"), $("#tab_instance")];
var tabContentArray = [$("#tab_content_details"), $("#tab_content_statistics"), $("#tab_content_instance")];
var afterSwitchFnArray = [hostJsonToDetailsTab, hostJsonToStatisticsTab, hostJsonToInstanceTab];
var tabArray = [$("#tab_details"), $("#tab_statistics"), $("#tab_instance"), $("#tab_router")];
var tabContentArray = [$("#tab_content_details"), $("#tab_content_statistics"), $("#tab_content_instance"), $("#tab_content_router")];
var afterSwitchFnArray = [hostJsonToDetailsTab, hostJsonToStatisticsTab, hostJsonToInstanceTab, hostJsonToRouterTab];
switchBetweenDifferentTabs(tabArray, tabContentArray, afterSwitchFnArray);
}
@ -230,6 +230,48 @@ function hostInstanceJSONToTemplate(jsonObj, template) {
setDateField(jsonObj.created, template.find("#created"));
}
function hostJsonToRouterTab() {
var $thisTab = $("#right_panel_content #tab_content_router");
$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=listRouters&hostid="+jsonObj.id),
dataType: "json",
success: function(json) {
var items = json.listroutersresponse.router;
if (items != null && items.length > 0) {
var $container = $thisTab.find("#tab_container").empty();
var template = $("#router_tab_template");
for (var i = 0; i < items.length; i++) {
var newTemplate = template.clone(true);
hostRouterJSONToTemplate(items[i], newTemplate);
$container.append(newTemplate.show());
}
}
$thisTab.find("#tab_spinning_wheel").hide();
$thisTab.find("#tab_container").show();
}
});
}
function hostRouterJSONToTemplate(jsonObj, template) {
template.data("jsonObj", jsonObj);
template.attr("id", "host_router_"+jsonObj.id).data("hostRouterId", 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("#publicip").text(fromdb(jsonObj.publicip));
template.find("#privateip").text(fromdb(jsonObj.privateip));
template.find("#guestipaddress").text(fromdb(jsonObj.guestipaddress));
template.find("#account").text(fromdb(jsonObj.account));
setDateField(jsonObj.created, template.find("#created"));
}
function hostClearRightPanel() {
hostClearDetailsTab();
}