new UI - implement account detail panel.

This commit is contained in:
Jessica Wang 2010-09-03 17:13:42 -07:00
parent 2886a6dd3a
commit 61dce9f31a
4 changed files with 121 additions and 6 deletions

View File

@ -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>

106
ui/new/jsp/tab_account.jsp Normal file
View File

@ -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) -->

View File

@ -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);
}

View File

@ -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);