new UI - implement snapshot detail panel.

This commit is contained in:
Jessica Wang 2010-09-03 18:50:46 -07:00
parent c050d0717b
commit 39cd43ff58
5 changed files with 114 additions and 1 deletions

View File

@ -39,6 +39,8 @@
<script type="text/javascript" src="scripts/cloud.core.account.js"></script>
<script type="text/javascript" src="scripts/cloud.core.volume.js"></script>
<script type="text/javascript" src="scripts/cloud.core.snapshot.js"></script>
<title>Cloud.com CloudStack</title>
</head>

View File

@ -1,5 +1,5 @@
<!--
<script type="text/javascript" src="scripts/cloud.core.event.js"></script>
<script type="text/javascript" src="scripts/cloud.core.alert.js"></script>
-->
<%@ page import="java.util.*" %>

View File

@ -0,0 +1,96 @@
<!--
<script type="text/javascript" src="scripts/cloud.core.snapshot.js"></script>
-->
<%@ page import="java.util.*" %>
<%@ page import="com.cloud.utils.*" %>
<%
Locale browserLocale = request.getLocale();
CloudResourceBundle t = CloudResourceBundle.getBundle("resources/resource", browserLocale);
%>
<!-- snapshot 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("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("Volume")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="volume_name">
</div>
</div>
</div>
<div class="grid_rows even">
<div class="grid_row_cell" style="width: 20%;">
<div class="row_celltitles">
<%=t.t("Interval.Type")%>:</div>
</div>
<div class="grid_row_cell" style="width: 79%;">
<div class="row_celltitles" id="interval_type">
</div>
</div>
</div>
<div class="grid_rows odd">
<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 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>
</div>
<!-- snapshot detail panel (end) -->

View File

@ -94,6 +94,7 @@ $(document).ready(function() {
listMidMenuItems("leftmenu_alert", "listAlerts", "listalertsresponse", "alert", "description", "jsp/tab_alert.jsp", loadAlertToRigntPanelFn);
listMidMenuItems("leftmenu_account", "listAccounts", "listaccountsresponse", "account", "name", "jsp/tab_account.jsp", loadAccountToRigntPanelFn);
listMidMenuItems("leftmenu_volume", "listVolumes", "listvolumesresponse", "volume", "name", "jsp/tab_volume.jsp", loadVolumeToRigntPanelFn);
listMidMenuItems("leftmenu_snapshot", "listSnapshots", "listsnapshotsresponse", "snapshot", "name", "jsp/tab_snapshot.jsp", loadSnapshotToRigntPanelFn);

View File

@ -0,0 +1,14 @@
function loadSnapshotToRigntPanelFn($rightPanelContent) {
var jsonObj = $rightPanelContent.data("jsonObj");
var $rightPanelContent = $("#right_panel_content");
$rightPanelContent.find("#id").text(jsonObj.id);
$rightPanelContent.find("#name").text(jsonObj.name);
$rightPanelContent.find("#volume_name").text(jsonObj.volumename);
$rightPanelContent.find("#interval_type").text(jsonObj.intervaltype);
$rightPanelContent.find("#account").text(jsonObj.account);
$rightPanelContent.find("#domain").text(jsonObj.domain);
setDateField(jsonObj.created, $rightPanelContent.find("#created"));
}