mirror of https://github.com/apache/cloudstack.git
new UI - implement account detail panel.
This commit is contained in:
parent
2886a6dd3a
commit
61dce9f31a
|
|
@ -34,6 +34,8 @@
|
|||
|
||||
<script type="text/javascript" src="scripts/cloud.core.event.js"></script>
|
||||
|
||||
<script type="text/javascript" src="scripts/cloud.core.account.js"></script>
|
||||
|
||||
<title>Cloud.com CloudStack</title>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,106 @@
|
|||
<!--
|
||||
<script type="text/javascript" src="scripts/cloud.core.account.js"></script>
|
||||
-->
|
||||
|
||||
<%@ page import="java.util.*" %>
|
||||
<%@ page import="com.cloud.utils.*" %>
|
||||
|
||||
<%
|
||||
|
||||
Locale browserLocale = request.getLocale();
|
||||
CloudResourceBundle t = CloudResourceBundle.getBundle("resources/resource", browserLocale);
|
||||
%>
|
||||
|
||||
<!-- account detail panel (begin) -->
|
||||
<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 class="grid_container">
|
||||
<div class="grid_rows odd">
|
||||
<div class="grid_row_cell" style="width: 20%;">
|
||||
<div class="row_celltitles">
|
||||
<%=t.t("Role")%>:</div>
|
||||
</div>
|
||||
<div class="grid_row_cell" style="width: 79%;">
|
||||
<div class="row_celltitles" id="role">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid_rows even">
|
||||
<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 class="grid_rows odd">
|
||||
<div class="grid_row_cell" style="width: 20%;">
|
||||
<div class="row_celltitles">
|
||||
<%=t.t("Domain")%>:</div>
|
||||
</div>
|
||||
<div class="grid_row_cell" style="width: 79%;">
|
||||
<div class="row_celltitles" id="domain">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid_rows even">
|
||||
<div class="grid_row_cell" style="width: 20%;">
|
||||
<div class="row_celltitles">
|
||||
<%=t.t("VMs")%>:</div>
|
||||
</div>
|
||||
<div class="grid_row_cell" style="width: 79%;">
|
||||
<div class="row_celltitles" id="vm_total">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid_rows odd">
|
||||
<div class="grid_row_cell" style="width: 20%;">
|
||||
<div class="row_celltitles">
|
||||
<%=t.t("IPs")%>:</div>
|
||||
</div>
|
||||
<div class="grid_row_cell" style="width: 79%;">
|
||||
<div class="row_celltitles" id="ip_total">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid_rows even">
|
||||
<div class="grid_row_cell" style="width: 20%;">
|
||||
<div class="row_celltitles">
|
||||
<%=t.t("Bytes.Received")%>:</div>
|
||||
</div>
|
||||
<div class="grid_row_cell" style="width: 79%;">
|
||||
<div class="row_celltitles" id="bytes_received">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid_rows odd">
|
||||
<div class="grid_row_cell" style="width: 20%;">
|
||||
<div class="row_celltitles">
|
||||
<%=t.t("Bytes.Sent")%>:</div>
|
||||
</div>
|
||||
<div class="grid_row_cell" style="width: 79%;">
|
||||
<div class="row_celltitles" id="bytes_sent">
|
||||
</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>
|
||||
</div>
|
||||
<!-- account detail panel (end) -->
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
function loadAccountToRigntPanelFn($rightPanelContent) {
|
||||
var jsonObj = $rightPanelContent.data("jsonObj");
|
||||
var $rightPanelContent = $("#right_panel_content");
|
||||
$rightPanelContent.find("#role").text(toRole(jsonObj.accounttype));
|
||||
$rightPanelContent.find("#account").text(jsonObj.name);
|
||||
$rightPanelContent.find("#domain").text(jsonObj.domain);
|
||||
$rightPanelContent.find("#vm_total").text(jsonObj.vmtotal);
|
||||
$rightPanelContent.find("#ip_total").text(jsonObj.iptotal);
|
||||
$rightPanelContent.find("#bytes_received").text(jsonObj.receivedbytes);
|
||||
$rightPanelContent.find("#bytes_sent").text(jsonObj.sentbytes);
|
||||
$rightPanelContent.find("#state").text(jsonObj.state);
|
||||
}
|
||||
|
|
@ -60,12 +60,6 @@ $(document).ready(function() {
|
|||
$midmenuItem1.data("id", jsonObj.id);
|
||||
$midmenuItem1.data("jsonObj", jsonObj);
|
||||
$midmenuItem1.data("toRightPanelFn", toRightPanelFn);
|
||||
|
||||
// $midmenuItem1.bind("click", function(event) {
|
||||
// var $t = $(this);
|
||||
// toRightPanelFn($t);
|
||||
// return false;
|
||||
// });
|
||||
}
|
||||
|
||||
var $midmenuItem = $("#midmenu_item");
|
||||
|
|
@ -98,6 +92,7 @@ $(document).ready(function() {
|
|||
}
|
||||
listMidMenuItems("leftmenu_event", "listEvents", "listeventsresponse", "event", "description", "jsp/tab_event.jsp", loadEventToRigntPanelFn);
|
||||
//listMidMenuItems("leftmenu_alert", "listAlerts", "listalertsresponse", "alert", "description", loadAlertToRightPanel);
|
||||
listMidMenuItems("leftmenu_account", "listAccounts", "listaccountsresponse", "account", "name", "jsp/tab_account.jsp", loadAccountToRigntPanelFn);
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue