diff --git a/ui/css/cloudstack3.css b/ui/css/cloudstack3.css
index 156746c1bc2..07b0ecd17f0 100644
--- a/ui/css/cloudstack3.css
+++ b/ui/css/cloudstack3.css
@@ -6837,6 +6837,8 @@ div.panel.ui-dialog div.list-view div.fixed-header {
.info-boxes .info-box.events {
margin-top: 4px;
+ min-height: 100px;
+ width: 228px;
}
.info-boxes .info-box.events ul {
@@ -6854,7 +6856,7 @@ div.panel.ui-dialog div.list-view div.fixed-header {
.info-boxes .info-box ul li {
width: 224px;
margin: 0 2px 0 0;
- height: 36px;
+ display: inline-block;
border-bottom: 1px solid #BDD2DF;
border-top: 1px solid #FFFFFF;
}
@@ -6895,6 +6897,7 @@ div.panel.ui-dialog div.list-view div.fixed-header {
position: relative;
left: 0px;
top: 2px;
+ float: left;
}
.info-boxes .info-box .title .button {
diff --git a/ui/index.jsp b/ui/index.jsp
index 699f2522f94..e6a600d75c1 100644
--- a/ui/index.jsp
+++ b/ui/index.jsp
@@ -772,13 +772,13 @@
@@ -789,27 +789,18 @@
-
171
-
GB/mo
+
10
+
volumes
Users
-
+
-
-
-
-
-
- -
-
-
-
-
- -
-
-
-
- -
-
-
-
-
- -
-
-
-
-
- -
-
-
-
- -
-
-
-
-
- -
-
-
-
-
- -
-
+
@@ -923,50 +876,10 @@
-
+
-
-
12/01
- Event
-
- -
-
12/01
- Event
-
- -
-
12/01
- Event
-
- -
-
12/01
- Event
-
- -
-
12/01
- Event
-
- -
-
12/01
- Event
-
- -
-
12/01
- Event
-
- -
-
12/01
- Event
-
- -
-
12/01
- Event
-
- -
-
12/01
- Event
-
- -
-
12/01
- Event
+
+
diff --git a/ui/scripts/projects.js b/ui/scripts/projects.js
index 3947ba7b965..59f7e20b683 100644
--- a/ui/scripts/projects.js
+++ b/ui/scripts/projects.js
@@ -4,6 +4,114 @@
return window.g_projectsInviteRequired;
},
+ dashboard: function(args) {
+ var dataFns = {
+ instances: function(data) {
+ $.ajax({
+ url: createURL('listVirtualMachines'),
+ success: function(json) {
+ var instances = json.listvirtualmachinesresponse.virtualmachine ?
+ json.listvirtualmachinesresponse.virtualmachine : [];
+
+ dataFns.storage($.extend(data, {
+ runningInstances: $.grep(instances, function(instance) {
+ return instance.state == 'Running';
+ }).length,
+ stoppedInstances: $.grep(instances, function(instance) {
+ return instance.state == 'Stopped';
+ }).length,
+ totalInstances: instances.length
+ }));
+ }
+ });
+ },
+
+ storage: function(data) {
+ $.ajax({
+ url: createURL('listVolumes'),
+ success: function(json) {
+ dataFns.bandwidth($.extend(data, {
+ totalVolumes: json.listvolumesresponse.volume ?
+ json.listvolumesresponse.volume.count : 0
+ }));
+ }
+ });
+ },
+
+ bandwidth: function(data) {
+ var totalBandwidth = 0;
+ $.ajax({
+ url: createURL('listNetworks'),
+ success: function(json) {
+ var networks = json.listnetworksresponse.network ?
+ json.listnetworksresponse.network : [];
+ $(networks).each(function() {
+ var network = this;
+ $.ajax({
+ url: createURL('listNetworkOfferings'),
+ async: false,
+ data: {
+ id: network.networkofferingid
+ },
+ success: function(json) {
+ totalBandwidth +=
+ json.listnetworkofferingsresponse.networkoffering[0].networkrate;
+ }
+ });
+ });
+
+ dataFns.users($.extend(data, {
+ totalBandwidth: totalBandwidth
+ }));
+ }
+ });
+ },
+
+ users: function(data) {
+ $.ajax({
+ url: createURL('listProjectAccounts'),
+ success: function(json) {
+ var users = json.listprojectaccountsresponse.projectaccount;
+
+ dataFns.events($.extend(data, {
+ users: $.map(users, function(user) {
+ return {
+ account: user.account
+ };
+ })
+ }));
+ }
+ });
+ },
+
+ events: function(data) {
+ $.ajax({
+ url: createURL('listEvents', { ignoreProject: true }),
+ success: function(json) {
+ var events = json.listeventsresponse.event;
+
+ complete($.extend(data, {
+ events: $.map(events, function(event) {
+ return {
+ date: event.created.substr(5, 2) + '/' + event.created.substr(8, 2) + '/' + event.created.substr(2, 2),
+ desc: event.description
+ };
+ })
+ }));
+ }
+ });
+ }
+ };
+
+ var complete = function(data) {
+ args.response.success({
+ data: data
+ });
+ };
+
+ dataFns.instances();
+ },
+
add: function(args) {
setTimeout(function() {
$.ajax({
diff --git a/ui/scripts/ui-custom/projects.js b/ui/scripts/ui-custom/projects.js
index a5132411b76..91f9c0c0872 100644
--- a/ui/scripts/ui-custom/projects.js
+++ b/ui/scripts/ui-custom/projects.js
@@ -20,8 +20,55 @@
var tabs = {
overview: function() {
var $dashboard = $('#template').find('.project-dashboard-view').clone();
+ $dashboard.data('tab-title', 'Dashboard');
- $dashboard.data('tab-title', 'Dashboard')
+ var getData = function() {
+ // Populate data
+ $dashboard.find('[data-item]').hide();
+ cloudStack.projects.dashboard({
+ response: {
+ success: function(args) {
+ var data = args.data;
+
+ // Iterate over data; populate corresponding DOM elements
+ $.each(data, function(key, value) {
+ var $elem = $dashboard.find('[data-item=' + key + ']');
+
+ // This assumes an array of data
+ if ($elem.is('ul')) {
+ $elem.show();
+ var $liTmpl = $elem.find('li').remove();
+ $(value).each(function() {
+ var item = this;
+ var $li = $liTmpl.clone().appendTo($elem).hide();
+
+ $.each(item, function(arrayKey, arrayValue) {
+ var $arrayElem = $li.find('[data-list-item=' + arrayKey + ']');
+
+ $arrayElem.html(arrayValue);
+ });
+
+ $li.attr({ title: item.description });
+
+ $li.fadeIn();
+ });
+ } else {
+ $elem.each(function() {
+ var $item = $(this);
+ if ($item.hasClass('chart-line')) {
+ $item.show().animate({ width: value + '%' });
+ } else {
+ $item.hide().html(value).fadeIn();
+ }
+ });
+ }
+ });
+ }
+ }
+ });
+ };
+
+ getData();
return $dashboard;
}
@@ -397,7 +444,6 @@
dialogClass: 'project-selector-dialog',
width: 420
}).closest('.ui-dialog').overlay();
- showDashboard();
}
});
@@ -416,6 +462,8 @@
.filter(function() {
return $(this).data('json-obj').name == cloudStack.context.projects[0].name;
}).attr('selected', 'selected');
+ showDashboard();
+
////
// Hidden for now
@@ -473,7 +521,6 @@
*/
cloudStack.uiCustom.projects = function(args) {
var $dashboardNavItem = $('#navigation li.navigation-item.dashboard');
- var $projectSelect = args.$projectSelect;
// Use project dashboard
var event = function() {
@@ -494,15 +541,6 @@
};
$dashboardNavItem.bind('click', event);
- // Project selector event
- $projectSelect.change(function() {
- cloudStack.context.projects = [
- $projectSelect.find('option:selected').data('json-obj')
- ];
-
- $(window).trigger('cloudStack.fullRefresh');
- });
-
pageElems.selector(args);
};