mirror of
https://github.com/apache/cloudstack.git
synced 2025-11-03 04:12:31 +01:00
host page - add primary storage tab.
This commit is contained in:
Jessica Wang
parent
7385118528
commit
b0305e710d
168
ui/jsp/host.jsp
168
ui/jsp/host.jsp
@ -21,7 +21,9 @@
|
||||
</div>
|
||||
<div class="tabbox" style="margin-top: 15px;">
|
||||
<div class="content_tabs on" id="tab_details">
|
||||
<%=t.t("details")%></div>
|
||||
<%=t.t("details")%></div>
|
||||
<div class="content_tabs on" id="tab_primarystorage">
|
||||
Primary Storage</div>
|
||||
<div class="content_tabs off" id="tab_instance">
|
||||
<%=t.t("instance")%></div>
|
||||
<div class="content_tabs off" id="tab_router">
|
||||
@ -176,6 +178,19 @@
|
||||
</div>
|
||||
</div>
|
||||
<!-- Details tab (end)-->
|
||||
|
||||
<!--Primary Storage tab (start)-->
|
||||
<div style="display: none;" id="tab_content_primarystorage">
|
||||
<div id="tab_spinning_wheel" class="rightpanel_mainloader_panel" style="display:none;">
|
||||
<div class="rightpanel_mainloaderbox">
|
||||
<div class="rightpanel_mainloader_animatedicon"></div>
|
||||
<p>Loading …</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="tab_container">
|
||||
</div>
|
||||
</div>
|
||||
<!--Primary Storage tab (end)-->
|
||||
|
||||
<!--Instance tab (start)-->
|
||||
<div style="display: none;" id="tab_content_instance">
|
||||
@ -329,6 +344,157 @@
|
||||
<!--Statistics tab (end)-->
|
||||
</div>
|
||||
|
||||
<!-- Primary Storage tab template (begin) -->
|
||||
<div class="grid_container" id="primarystorage_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 …
|
||||
</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 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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid_rows even">
|
||||
<div class="grid_row_cell" style="width: 20%;">
|
||||
<div class="row_celltitles">
|
||||
<%=t.t("state")%>:</div>
|
||||
</div>
|
||||
<div class="grid_row_cell" style="width: 79%;">
|
||||
<div class="row_celltitles" id="state">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid_rows even">
|
||||
<div class="grid_row_cell" style="width: 20%;">
|
||||
<div class="row_celltitles">
|
||||
<%=t.t("zone")%>:</div>
|
||||
</div>
|
||||
<div class="grid_row_cell" style="width: 79%;">
|
||||
<div class="row_celltitles" id="zonename">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid_rows even">
|
||||
<div class="grid_row_cell" style="width: 20%;">
|
||||
<div class="row_celltitles">
|
||||
<%=t.t("pod")%>:</div>
|
||||
</div>
|
||||
<div class="grid_row_cell" style="width: 79%;">
|
||||
<div class="row_celltitles" id="podname">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid_rows even">
|
||||
<div class="grid_row_cell" style="width: 20%;">
|
||||
<div class="row_celltitles">
|
||||
<%=t.t("cluster")%>:</div>
|
||||
</div>
|
||||
<div class="grid_row_cell" style="width: 79%;">
|
||||
<div class="row_celltitles" id="clustername">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid_rows even">
|
||||
<div class="grid_row_cell" style="width: 20%;">
|
||||
<div class="row_celltitles">
|
||||
<%=t.t("type")%>:</div>
|
||||
</div>
|
||||
<div class="grid_row_cell" style="width: 79%;">
|
||||
<div class="row_celltitles" id="type">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid_rows even">
|
||||
<div class="grid_row_cell" style="width: 20%;">
|
||||
<div class="row_celltitles">
|
||||
<%=t.t("IP.or.FQDN")%>:</div>
|
||||
</div>
|
||||
<div class="grid_row_cell" style="width: 79%;">
|
||||
<div class="row_celltitles" id="ipaddress">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid_rows even">
|
||||
<div class="grid_row_cell" style="width: 20%;">
|
||||
<div class="row_celltitles">
|
||||
<%=t.t("path")%>:</div>
|
||||
</div>
|
||||
<div class="grid_row_cell" style="width: 79%;">
|
||||
<div class="row_celltitles" id="path">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid_rows even">
|
||||
<div class="grid_row_cell" style="width: 20%;">
|
||||
<div class="row_celltitles">
|
||||
<%=t.t("disk.total")%>:</div>
|
||||
</div>
|
||||
<div class="grid_row_cell" style="width: 79%;">
|
||||
<div class="row_celltitles" id="disksizetotal">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid_rows even">
|
||||
<div class="grid_row_cell" style="width: 20%;">
|
||||
<div class="row_celltitles">
|
||||
<%=t.t("disk.allocated")%>:</div>
|
||||
</div>
|
||||
<div class="grid_row_cell" style="width: 79%;">
|
||||
<div class="row_celltitles" id="disksizeallocated">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid_rows even">
|
||||
<div class="grid_row_cell" style="width: 20%;">
|
||||
<div class="row_celltitles">
|
||||
<%=t.t("tags")%>:</div>
|
||||
</div>
|
||||
<div class="grid_row_cell" style="width: 79%;">
|
||||
<div class="row_celltitles" id="tags">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Primary Storage tab template (end) -->
|
||||
|
||||
<!-- instance tab template (begin) -->
|
||||
<div class="grid_container" id="instance_tab_template" style="display: none">
|
||||
<div class="grid_header">
|
||||
|
||||
@ -52,9 +52,9 @@ function afterLoadHostJSP($midmenuItem1) {
|
||||
initDialog("dialog_update_os");
|
||||
|
||||
// switch between different tabs
|
||||
var tabArray = [$("#tab_details"), $("#tab_instance"), $("#tab_router"), $("#tab_systemvm"), $("#tab_statistics")];
|
||||
var tabContentArray = [$("#tab_content_details"), $("#tab_content_instance"), $("#tab_content_router"), $("#tab_content_systemvm"), $("#tab_content_statistics")];
|
||||
var afterSwitchFnArray = [hostJsonToDetailsTab, hostJsonToInstanceTab, hostJsonToRouterTab, hostJsonToSystemvmTab, hostJsonToStatisticsTab];
|
||||
var tabArray = [$("#tab_details"), $("#tab_primarystorage"), $("#tab_instance"), $("#tab_router"), $("#tab_systemvm"), $("#tab_statistics")];
|
||||
var tabContentArray = [$("#tab_content_details"), $("#tab_content_primarystorage"), $("#tab_content_instance"), $("#tab_content_router"), $("#tab_content_systemvm"), $("#tab_content_statistics")];
|
||||
var afterSwitchFnArray = [hostJsonToDetailsTab, hostJsonToPrimaryStorageTab, hostJsonToInstanceTab, hostJsonToRouterTab, hostJsonToSystemvmTab, hostJsonToStatisticsTab];
|
||||
switchBetweenDifferentTabs(tabArray, tabContentArray, afterSwitchFnArray);
|
||||
|
||||
$("#right_panel_content").data("$midmenuItem1", $midmenuItem1);
|
||||
@ -170,6 +170,64 @@ function hostJsonToDetailsTab() {
|
||||
$thisTab.find("#tab_container").show();
|
||||
}
|
||||
|
||||
function hostJsonToPrimaryStorageTab() {
|
||||
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_primarystorage");
|
||||
$thisTab.find("#tab_container").hide();
|
||||
$thisTab.find("#tab_spinning_wheel").show();
|
||||
|
||||
$.ajax({
|
||||
cache: false,
|
||||
data: createURL("command=listStoragePools&clusterid="+jsonObj.clusterid),
|
||||
dataType: "json",
|
||||
success: function(json) {
|
||||
var items = json.liststoragepoolsresponse.storagepool;
|
||||
if(items != null && items.length > 0) {
|
||||
var $container = $thisTab.find("#tab_container").empty();
|
||||
var $template = $("#primarystorage_tab_template");
|
||||
for(var i=0; i<items.length;i++) {
|
||||
var $newTemplate = $template.clone(true);
|
||||
hostPrimaryStorageJSONToTemplate(items[i], $newTemplate);
|
||||
$container.append($newTemplate.show());
|
||||
}
|
||||
}
|
||||
$thisTab.find("#tab_spinning_wheel").hide();
|
||||
$thisTab.find("#tab_container").show();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function hostPrimaryStorageJSONToTemplate(jsonObj, $template) {
|
||||
$template.data("jsonObj", jsonObj);
|
||||
$template.attr("id", "host_primarystorage_"+jsonObj.id).data("hostPrimarystorageId", jsonObj.id);
|
||||
$template.find("#grid_header_title").text(fromdb(jsonObj.name));
|
||||
$template.find("#id").text(fromdb(jsonObj.id));
|
||||
$template.find("#name").text(fromdb(jsonObj.name));
|
||||
|
||||
setHostStateInRightPanel(fromdb(jsonObj.state), $template.find("#state"));
|
||||
|
||||
$template.find("#zonename").text(fromdb(jsonObj.zonename));
|
||||
$template.find("#podname").text(fromdb(jsonObj.podname));
|
||||
$template.find("#clustername").text(fromdb(jsonObj.clustername));
|
||||
var storageType = "ISCSI Share";
|
||||
if (jsonObj.type == 'NetworkFilesystem')
|
||||
storageType = "NFS Share";
|
||||
$template.find("#type").text(fromdb(storageType));
|
||||
$template.find("#ipaddress").text(fromdb(jsonObj.ipaddress));
|
||||
$template.find("#path").text(fromdb(jsonObj.path));
|
||||
$template.find("#disksizetotal").text(convertBytes(jsonObj.disksizetotal));
|
||||
$template.find("#disksizeallocated").text(convertBytes(jsonObj.disksizeallocated));
|
||||
|
||||
$template.find("#tags").text(fromdb(jsonObj.tags));
|
||||
}
|
||||
|
||||
function hostJsonToInstanceTab() {
|
||||
var $midmenuItem1 = $("#right_panel_content").data("$midmenuItem1");
|
||||
if($midmenuItem1 == null)
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user