apache/cloudstack
1
0
Fork 0
mirror of https://github.com/apache/cloudstack.git synced 2025-10-26 08:42:29 +01:00
Code Issues Packages Projects Releases Wiki Activity

new UI - dashboard of user - implement Recent Errors section.

Browse Source
This commit is contained in:
Jessica Wang 2010-10-02 15:10:01 -07:00
parent 58a850c374
commit ac82ee7dc2
2 changed files with 69 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

104
ui/new/jsp/dashboard.jsp
View File

@ -14,7 +14,7 @@
</h1> </h1>
</div> </div>
<!--Dashboard Admin (start)--> <!--Dashboard Admin (begin)-->
<div id="dashboard_admin" style="display: none"> <div id="dashboard_admin" style="display: none">
<div class="contentbox"> <div class="contentbox">
<div class="grid_container" id="system_wide_capacity_container"> <div class="grid_container" id="system_wide_capacity_container">
@ -220,32 +220,16 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="grid_rows" id="alert_template" style="display: none">
<div class="grid_row_cell" style="width: 10%;">
<div class="row_celltitles">
<img src="images/alert_icon.png" /></div>
</div>
<div class="grid_row_cell" style="width: 70%;">
<div class="row_celltitles alert" id="type">
</div>
<div class="row_celltitles alertdetails" id="description">
</div>
</div>
<div class="grid_row_cell" style="width: 19%;">
<div class="row_celltitles" id="date">
</div>
</div>
</div>
</div> </div>
<!--Dashboard Admin (end)--> <!--Dashboard Admin (end)-->
<!--Dashboard DomainAdmin (start)--> <!--Dashboard DomainAdmin (begin)-->
<div id="dashboard_domainadmin" style="display: none"> <div id="dashboard_domainadmin" style="display: none">
</div> </div>
<!--Dashboard DomainAdmin (end) here--> <!--Dashboard DomainAdmin (end) here-->
<!--Dashboard User (start)--> <!--Dashboard User (begin)-->
<div id="dashboard_user" style="display: none"> <div id="dashboard_user" style="display: none">
<div class="grid_container"> <div class="grid_container">
<div class="grid_header"> <div class="grid_header">
@ -312,7 +296,7 @@
</div> </div>
</div> </div>
<!--Public Ips--> <!--Public Ips-->
<div class="grid_container" style="margin-top: 15px;" style="display: none; ""> <div class="grid_container" style="margin-top: 15px;">
<div class="grid_header"> <div class="grid_header">
<div class="grid_header_cell" style="width: 60%; border: none;"> <div class="grid_header_cell" style="width: 60%; border: none;">
<div class="grid_header_title"> <div class="grid_header_title">
@ -341,10 +325,9 @@
<strong id="db_owned_public_ips"></strong></div> <strong id="db_owned_public_ips"></strong></div>
</div> </div>
</div> </div>
</div> </div>
<!--Recent errors--> <!--Recent errors-->
<div class="grid_container" style="width: 49%; margin-top: 15px;" style="display: none; <div class="grid_container" style="width: 49%; margin-top: 15px;">
"">
<div class="grid_header"> <div class="grid_header">
<div class="grid_header_cell" style="width: 60%; border: none;"> <div class="grid_header_cell" style="width: 60%; border: none;">
<div class="grid_header_title"> <div class="grid_header_title">
@ -353,58 +336,14 @@
<div class="grid_header_cell" style="width: 40%; border: none;"> <div class="grid_header_cell" style="width: 40%; border: none;">
</div> </div>
</div> </div>
<div class="grid_rows even"> <div id="alert_grid_content">
<div class="grid_row_cell" style="width: 10%;"> <div style="height: 310px; text-align: center;">
<div class="row_celltitles"> <i>No Recent Alerts</i>
<img src="images/alert_icon.png" /></div>
</div>
<div class="grid_row_cell" style="width: 70%;">
<div class="row_celltitles alert" id="type">
Error's Name</div>
<div class="row_celltitles alertdetails" id="description">
Error Description will appear here</div>
</div>
<div class="grid_row_cell" style="width: 19%;">
<div class="row_celltitles" id="date">
09/29/2010 15:20:10</div>
</div> </div>
</div> </div>
<div class="grid_rows odd"> </div>
<div class="grid_row_cell" style="width: 10%;">
<div class="row_celltitles">
<img src="images/alert_icon.png" /></div>
</div>
<div class="grid_row_cell" style="width: 70%;">
<div class="row_celltitles alert" id="type">
Error's Name</div>
<div class="row_celltitles alertdetails" id="description">
Error Description will appear here</div>
</div>
<div class="grid_row_cell" style="width: 19%;">
<div class="row_celltitles" id="date">
09/29/2010 15:20:10</div>
</div>
</div>
<div class="grid_rows even">
<div class="grid_row_cell" style="width: 10%;">
<div class="row_celltitles">
<img src="images/alert_icon.png" /></div>
</div>
<div class="grid_row_cell" style="width: 70%;">
<div class="row_celltitles alert" id="type">
Error's Name</div>
<div class="row_celltitles alertdetails" id="description">
Error Description will appear here</div>
</div>
<div class="grid_row_cell" style="width: 19%;">
<div class="row_celltitles" id="date">
09/29/2010 15:20:10</div>
</div>
</div>
</div>
<!--Accounts--> <!--Accounts-->
<div class="grid_container" style="width: 49%; margin-top: 15px; float: right; background: #fff8c8 repeat top left;" <div class="grid_container" style="width: 49%; margin-top: 15px; float: right; background: #fff8c8 repeat top left;">
style="display: none; "">
<div class="grid_header" style="background: url(images/dbaccounts_headerbg.gif) repeat-x top left;"> <div class="grid_header" style="background: url(images/dbaccounts_headerbg.gif) repeat-x top left;">
<div class="grid_header_cell" style="width: 5%; border: none;"> <div class="grid_header_cell" style="width: 5%; border: none;">
<div class="grid_header_title"> <div class="grid_header_title">
@ -458,3 +397,22 @@
</div> </div>
</div> </div>
<!--Dashboard User (end)--> <!--Dashboard User (end)-->
<!-- alert template (begin) -->
<div class="grid_rows" id="alert_template" style="display: none">
<div class="grid_row_cell" style="width: 10%;">
<div class="row_celltitles">
<img src="images/alert_icon.png" /></div>
</div>
<div class="grid_row_cell" style="width: 70%;">
<div class="row_celltitles alert" id="type">
</div>
<div class="row_celltitles alertdetails" id="description">
</div>
</div>
<div class="grid_row_cell" style="width: 19%;">
<div class="row_celltitles" id="date">
</div>
</div>
</div>
<!-- alert template (end) -->

75
ui/new/scripts/cloud.core2.dashboard.js
View File

@ -1,6 +1,9 @@
function afterLoadDashboardJSP() { function afterLoadDashboardJSP() {
var $alertTemplate = $("#alert_template");
if (isAdmin()) { if (isAdmin()) {
showDashboard("dashboard_admin"); showDashboard("dashboard_admin");
$thisSection = $("#dashboard_admin");
var sessionExpired = false; var sessionExpired = false;
var zones = null; var zones = null;
@ -14,7 +17,7 @@ function afterLoadDashboardJSP() {
async: false, async: false,
success: function(json) { success: function(json) {
zones = json.listzonesresponse.zone; zones = json.listzonesresponse.zone;
var zoneSelect = $("#capacity_zone_select").empty(); var zoneSelect = $thisSection.find("#capacity_zone_select").empty();
if (zones != null && zones.length > 0) { if (zones != null && zones.length > 0) {
for (var i = 0; i < zones.length; i++) { for (var i = 0; i < zones.length; i++) {
zoneSelect.append("<option value='" + zones[i].id + "'>" + fromdb(zones[i].name) + "</option>"); zoneSelect.append("<option value='" + zones[i].id + "'>" + fromdb(zones[i].name) + "</option>");
@ -61,13 +64,13 @@ function afterLoadDashboardJSP() {
} }
}); });
$("#capacity_pod_select").bind("change", function(event) { $thisSection.find("#capacity_pod_select").bind("change", function(event) {
event.stopPropagation(); event.stopPropagation();
var selectedZone = $("#capacity_zone_select option:selected").text(); var selectedZone = $thisSection.find("#capacity_zone_select option:selected").text();
var selectedPod = $("#capacity_pod_select").val(); var selectedPod = $thisSection.find("#capacity_pod_select").val();
// Reset to Defaults // Reset to Defaults
var $capacityContainer = $("#system_wide_capacity_container"); var $capacityContainer = $thisSection.find("#system_wide_capacity_container");
$capacityContainer.find("#capacityused").text("N"); $capacityContainer.find("#capacityused").text("N");
$capacityContainer.find("#capacitytotal").text("A"); $capacityContainer.find("#capacitytotal").text("A");
$capacityContainer.find("#percentused").text(""); $capacityContainer.find("#percentused").text("");
@ -141,7 +144,7 @@ function afterLoadDashboardJSP() {
} }
}); });
$("#capacity_zone_select").bind("change", function(event) { $thisSection.find("#capacity_zone_select").bind("change", function(event) {
var zoneId = $(this).val(); var zoneId = $(this).val();
$.ajax({ $.ajax({
data: createURL("command=listPods&zoneId="+zoneId+maxPageSize), data: createURL("command=listPods&zoneId="+zoneId+maxPageSize),
@ -149,29 +152,26 @@ function afterLoadDashboardJSP() {
async: false, async: false,
success: function(json) { success: function(json) {
var pods = json.listpodsresponse.pod; var pods = json.listpodsresponse.pod;
var podSelect = $("#capacity_pod_select").empty(); var podSelect = $thisSection.find("#capacity_pod_select").empty();
if (pods != null && pods.length > 0) { if (pods != null && pods.length > 0) {
podSelect.append("<option value='All'>All pods</option>"); podSelect.append("<option value='All'>All pods</option>");
for (var i = 0; i < pods.length; i++) { for (var i = 0; i < pods.length; i++) {
podSelect.append("<option value='" + pods[i].name + "'>" + fromdb(pods[i].name) + "</option>"); podSelect.append("<option value='" + pods[i].name + "'>" + fromdb(pods[i].name) + "</option>");
} }
} }
$("#capacity_pod_select").change(); $thisSection.find("#capacity_pod_select").change();
} }
}); });
}); });
$("#capacity_zone_select").change(); $thisSection.find("#capacity_zone_select").change();
// General Alerts
var $alertTemplate = $("#alert_template");
$.ajax({ $.ajax({
data: createURL("command=listAlerts"), data: createURL("command=listAlerts"),
dataType: "json", dataType: "json",
success: function(json) { success: function(json) {
var alerts = json.listalertsresponse.alert; var alerts = json.listalertsresponse.alert;
if (alerts != null && alerts.length > 0) { if (alerts != null && alerts.length > 0) {
var alertGrid = $("#alert_grid_content").empty(); var alertGrid = $thisSection.find("#alert_grid_content").empty();
var length = (alerts.length>=5) ? 5 : alerts.length; var length = (alerts.length>=5) ? 5 : alerts.length;
for (var i = 0; i < length; i++) { for (var i = 0; i < length; i++) {
var template = $alertTemplate.clone(true); var template = $alertTemplate.clone(true);
@ -191,7 +191,7 @@ function afterLoadDashboardJSP() {
success: function(json) { success: function(json) {
var alerts = json.listhostsresponse.host; var alerts = json.listhostsresponse.host;
if (alerts != null && alerts.length > 0) { if (alerts != null && alerts.length > 0) {
var alertGrid = $("#host_alert_grid_content").empty(); var alertGrid = $thisSection.find("#host_alert_grid_content").empty();
var length = (alerts.length>=4) ? 4 : alerts.length; var length = (alerts.length>=4) ? 4 : alerts.length;
for (var i = 0; i < length; i++) { for (var i = 0; i < length; i++) {
var template = $alertTemplate.clone(true); var template = $alertTemplate.clone(true);
@ -210,8 +210,9 @@ function afterLoadDashboardJSP() {
} }
else if(isUser()) { else if(isUser()) {
showDashboard("dashboard_user"); showDashboard("dashboard_user");
$thisSection = $("#dashboard_user");
//$("#launch_test").hide(); //$thisSection.find("#launch_test").hide();
$.ajax({ $.ajax({
cache: false, cache: false,
data: createURL("command=listAccounts"), data: createURL("command=listAccounts"),
@ -225,9 +226,9 @@ function afterLoadDashboardJSP() {
var rec = parseInt(statJSON.receivedbytes); var rec = parseInt(statJSON.receivedbytes);
if(sent==0 && rec==0) if(sent==0 && rec==0)
$("#network_bandwidth_panel").hide(); $thisSection.find("#network_bandwidth_panel").hide();
else else
$("#network_bandwidth_panel").show(); $thisSection.find("#network_bandwidth_panel").show();
$("#menutab_role_user").show(); $("#menutab_role_user").show();
$("#menutab_role_root").hide(); $("#menutab_role_root").hide();
@ -238,19 +239,19 @@ function afterLoadDashboardJSP() {
// This is in bytes, so let's change to KB // This is in bytes, so let's change to KB
sent = Math.round(sent / 1024); sent = Math.round(sent / 1024);
rec = Math.round(rec / 1024); rec = Math.round(rec / 1024);
$("#db_sent").text(sent + "KB"); $thisSection.find("#db_sent").text(sent + "KB");
$("#db_received").text(rec + "KB"); $thisSection.find("#db_received").text(rec + "KB");
*/ */
$("#db_available_public_ips").text(statJSON.ipavailable); $thisSection.find("#db_available_public_ips").text(statJSON.ipavailable);
$("#db_owned_public_ips").text(statJSON.iptotal); $thisSection.find("#db_owned_public_ips").text(statJSON.iptotal);
$("#db_running_vms").text(statJSON.vmrunning); $thisSection.find("#db_running_vms").text(statJSON.vmrunning);
$("#db_stopped_vms").text(statJSON.vmstopped); $thisSection.find("#db_stopped_vms").text(statJSON.vmstopped);
$("#db_total_vms").text(statJSON.vmtotal); $thisSection.find("#db_total_vms").text(statJSON.vmtotal);
//$("#db_avail_vms").text(statJSON.vmavailable); //$thisSection.find("#db_avail_vms").text(statJSON.vmavailable);
$("#db_account_id").text(statJSON.id); $thisSection.find("#db_account_id").text(statJSON.id);
$("#db_account").text(statJSON.name); $thisSection.find("#db_account").text(statJSON.name);
$("#db_type").text(toRole(statJSON.accounttype)); $thisSection.find("#db_type").text(toRole(statJSON.accounttype));
$("#db_domain").text(statJSON.domain); $thisSection.find("#db_domain").text(statJSON.domain);
} }
// Events // Events
@ -260,14 +261,14 @@ function afterLoadDashboardJSP() {
success: function(json) { success: function(json) {
var events = json.listeventsresponse.event; var events = json.listeventsresponse.event;
if (events != null && events.length > 0) { if (events != null && events.length > 0) {
var errorGrid = $("#error_grid_content").empty(); var errorGrid = $thisSection.find("#error_grid_content").empty();
var length = (events.length>=3) ? 3 : events.length; var length = (events.length>=3) ? 3 : events.length;
for (var i = 0; i < length; i++) { for (var i = 0; i < length; i++) {
var errorTemplate = $("#recent_error_template").clone(true); var template = $alertTemplate.clone(true);
errorTemplate.find("#db_error_type").text(events[i].type); template.find("#type").text(alerts[i].type);
errorTemplate.find("#db_error_msg").text(fromdb(events[i].description)); template.find("#description").append(fromdb(alerts[i].description));
setDateField(events[i].created, errorTemplate.find("#db_error_date")); setDateField(alerts[i].created, template.find("#date"));
errorGrid.append(errorTemplate.show()); alertGrid.append(template.show());
} }
} }
} }