mirror of https://github.com/apache/cloudstack.git
new UI - domain page - implement details panel.
This commit is contained in:
Jessica Wang
parent
2abfedce47
commit
3857dd359a
|
|
@ -6,6 +6,103 @@
|
|||
CloudResourceBundle t = CloudResourceBundle.getBundle("resources/resource", browserLocale);
|
||||
%>
|
||||
|
||||
<!-- domain detail panel (begin) -->
|
||||
<div class="main_title" id="right_panel_header">
|
||||
<!--
|
||||
<div class="main_titleicon">
|
||||
<img src="images/title_snapshoticon.gif" alt="Instance" /></div>
|
||||
-->
|
||||
<h1>
|
||||
Domain
|
||||
</h1>
|
||||
</div>
|
||||
<div class="contentbox" id="right_panel_content">
|
||||
<div class="info_detailbox errorbox" id="after_action_info_container" 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 class="grid_actionpanel">
|
||||
<div class="grid_actionbox" id="action_link">
|
||||
<div class="grid_actionsdropdown_box" id="action_menu" style="display: none;">
|
||||
<ul class="actionsdropdown_boxlist" id="action_list">
|
||||
<!--
|
||||
<li> <a href="#"> Delete </a> </li>
|
||||
<li> <a href="#"> Attach Disk </a> </li>
|
||||
-->
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid_editbox">
|
||||
</div>
|
||||
<div class="gridheader_loaderbox" id="spinning_wheel" style="border: 1px solid #999;
|
||||
display: none;">
|
||||
<div class="gridheader_loader" id="icon">
|
||||
</div>
|
||||
<p id="description">
|
||||
Detaching Disk …</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid_container">
|
||||
<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 odd">
|
||||
<div class="grid_row_cell" style="width: 20%;">
|
||||
<div class="row_celltitles">
|
||||
<%=t.t("Accounts")%>:</div>
|
||||
</div>
|
||||
<div class="grid_row_cell" style="width: 79%;">
|
||||
<div class="row_celltitles" id="redirect_to_account_page">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid_rows even">
|
||||
<div class="grid_row_cell" style="width: 20%;">
|
||||
<div class="row_celltitles">
|
||||
<%=t.t("Instances")%>:</div>
|
||||
</div>
|
||||
<div class="grid_row_cell" style="width: 79%;">
|
||||
<div class="row_celltitles" id="redirect_to_instance_page">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid_rows even">
|
||||
<div class="grid_row_cell" style="width: 20%;">
|
||||
<div class="row_celltitles">
|
||||
<%=t.t("Volume")%>:</div>
|
||||
</div>
|
||||
<div class="grid_row_cell" style="width: 79%;">
|
||||
<div class="row_celltitles" id="redirect_to_volume_page">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- domain detail panel (end) -->
|
||||
|
||||
<!-- treenode template (begin) -->
|
||||
<div id="treenode_template" class="tree_levelspanel" style="display:none">
|
||||
<div class="tree_levelsbox" style="margin-left:20px;">
|
||||
|
|
|
|||
|
|
@ -1,11 +1,8 @@
|
|||
function afterLoadDomainJSP() {
|
||||
var defaultRootDomainId = g_domainid;
|
||||
var defaultRootLevel = 0;
|
||||
var index = 1;
|
||||
|
||||
//var treeContentBox = $("#tree_contentbox"); //???
|
||||
var treeContentBox = $("#midmenu_container");
|
||||
|
||||
var index = 1;
|
||||
var treeContentBox = $("#midmenu_container");
|
||||
var treenodeTemplate = $("#treenode_template");
|
||||
var grid = $("#right_panel_grid");
|
||||
var gridRowTemplate = $("#grid_row_template");
|
||||
|
|
@ -40,7 +37,8 @@ function afterLoadDomainJSP() {
|
|||
|
||||
var template = treenodeTemplate.clone(true);
|
||||
template.attr("id", "domain_"+json.id);
|
||||
template.data("domainId", json.id).data("domainName", fromdb(json.name)).data("domainLevel", level);
|
||||
//template.data("domainId", json.id).data("domainName", fromdb(json.name)).data("domainLevel", level);
|
||||
template.data("jsonObj", json).data("domainLevel", level);
|
||||
template.find("#domain_title_container").attr("id", "domain_title_container_"+json.id);
|
||||
template.find("#domain_expand_icon").attr("id", "domain_expand_icon_"+json.id);
|
||||
template.find("#domain_name").attr("id", "domain_name_"+json.id).text(json.name);
|
||||
|
|
@ -129,15 +127,19 @@ function afterLoadDomainJSP() {
|
|||
var template = $(this);
|
||||
var target = $(event.target);
|
||||
var action = target.attr("id");
|
||||
var id = template.attr("id");
|
||||
var domainId = template.data("domainId");
|
||||
var domainName = template.data("domainName");
|
||||
var id = template.attr("id");
|
||||
var jsonObj = template.data("jsonObj");
|
||||
var domainId = jsonObj.id;
|
||||
var domainName = jsonObj.name;
|
||||
if (action.indexOf("domain_expand_icon")!=-1) {
|
||||
clickExpandIcon(domainId);
|
||||
}
|
||||
else if(action.indexOf("domain_name")!=-1) {
|
||||
domainDetail.find("#domain_name").text(domainName);
|
||||
domainDetail.find("#domain_id").text(domainId);
|
||||
else if(action.indexOf("domain_name")!=-1) {
|
||||
var $detailsTab = $("#right_panel_content #tab_content_details");
|
||||
$detailsTab.data("jsonObj", jsonObj);
|
||||
$detailsTab.find("#id").text(domainId);
|
||||
$detailsTab.find("#name").text(domainName);
|
||||
|
||||
$.ajax({
|
||||
cache: false,
|
||||
data: createURL("command=listAccounts&domainid="+domainId+maxPageSize),
|
||||
|
|
@ -145,14 +147,16 @@ function afterLoadDomainJSP() {
|
|||
success: function(json) {
|
||||
var accounts = json.listaccountsresponse.account;
|
||||
if (accounts != null) {
|
||||
domainDetail.find("#redirect_to_account_page").text(accounts.length);
|
||||
domainDetail.find("#redirect_to_account_page").bind("click", function() {
|
||||
$detailsTab.find("#redirect_to_account_page").text(accounts.length);
|
||||
/*
|
||||
$detailsTab.find("#redirect_to_account_page").bind("click", function() {
|
||||
$("#menutab_role_root #menutab_accounts").data("domainId", domainId).click();
|
||||
});
|
||||
*/
|
||||
}
|
||||
else {
|
||||
domainDetail.find("#redirect_to_account_page").text("");
|
||||
domainDetail.find("#redirect_to_account_page").unbind("click");
|
||||
$detailsTab.find("#redirect_to_account_page").text("");
|
||||
//$detailsTab.find("#redirect_to_account_page").unbind("click");
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -164,14 +168,16 @@ function afterLoadDomainJSP() {
|
|||
success: function(json) {
|
||||
var instances = json.listvirtualmachinesresponse.virtualmachine;
|
||||
if (instances != null) {
|
||||
domainDetail.find("#redirect_to_instance_page").text(instances.length);
|
||||
domainDetail.find("#redirect_to_instance_page").bind("click", function() {
|
||||
$detailsTab.find("#redirect_to_instance_page").text(instances.length);
|
||||
/*
|
||||
$detailsTab.find("#redirect_to_instance_page").bind("click", function() {
|
||||
$("#menutab_role_root #menutab_vm").data("domainId", domainId).click();
|
||||
});
|
||||
*/
|
||||
}
|
||||
else {
|
||||
domainDetail.find("#redirect_to_instance_page").text("");
|
||||
domainDetail.find("#redirect_to_instance_page").unbind("click");
|
||||
$detailsTab.find("#redirect_to_instance_page").text("");
|
||||
//$detailsTab.find("#redirect_to_instance_page").unbind("click");
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -183,14 +189,16 @@ function afterLoadDomainJSP() {
|
|||
success: function(json) {
|
||||
var volumes = json.listvolumesresponse.volume;
|
||||
if (volumes != null) {
|
||||
domainDetail.find("#redirect_to_volume_page").text(volumes.length);
|
||||
domainDetail.find("#redirect_to_volume_page").bind("click", function() {
|
||||
$detailsTab.find("#redirect_to_volume_page").text(volumes.length);
|
||||
/*
|
||||
$detailsTab.find("#redirect_to_volume_page").bind("click", function() {
|
||||
$("#menutab_role_root #menutab_storage").data("domainId", domainId).data("targetTab", "submenu_volume").click();
|
||||
});
|
||||
*/
|
||||
}
|
||||
else {
|
||||
domainDetail.find("#redirect_to_volume_page").text("");
|
||||
domainDetail.find("#redirect_to_volume_page").unbind("click");
|
||||
$detailsTab.find("#redirect_to_volume_page").text("");
|
||||
//$detailsTab.find("#redirect_to_volume_page").unbind("click");
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue