mirror of https://github.com/apache/cloudstack.git
bug 12211
Add system resources, users, alerts to project dashboard
This commit is contained in:
bfederle
parent
3169a54263
commit
134b38bb2d
|
|
@ -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 {
|
||||
|
|
|
|||
111
ui/index.jsp
111
ui/index.jsp
|
|
@ -772,13 +772,13 @@
|
|||
<div class="overview">
|
||||
<!-- Running -->
|
||||
<div class="overview-item running">
|
||||
<div class="total" data-item="virtualMachinesRunning">12</div>
|
||||
<div class="total" data-item="runningInstances">5</div>
|
||||
<div class="label">Running</div>
|
||||
</div>
|
||||
|
||||
<!-- Stopped -->
|
||||
<div class="overview-item stopped">
|
||||
<div class="total" data-item="virtualMachinesStopped">2</div>
|
||||
<div class="total" data-item="stoppedInstances">10</div>
|
||||
<div class="label">Stopped</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -789,27 +789,18 @@
|
|||
<span class="header">Storage</span>
|
||||
<div class="icon"></div>
|
||||
<div class="overview">
|
||||
<div class="total" data-item="storageCapacityTotal">171</div>
|
||||
<div class="label">GB/mo</div>
|
||||
<div class="total" data-item="totalVolumes">10</div>
|
||||
<div class="label">volumes</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- Bandwidth -->
|
||||
<li class="block bandwidth">
|
||||
<li class="block storage bandwidth">
|
||||
<span class="header">Bandwidth</span>
|
||||
<div class="icon"></div>
|
||||
<div class="overview">
|
||||
<!-- In -->
|
||||
<div class="overview-item in">
|
||||
<div class="total" data-item="virtualMachinesRunning">2.3</div>
|
||||
<div class="label">In GB</div>
|
||||
</div>
|
||||
|
||||
<!-- Out -->
|
||||
<div class="overview-item out">
|
||||
<div class="total" data-item="virtualMachinesRunning">1.5</div>
|
||||
<div class="label">Out GB</div>
|
||||
</div>
|
||||
<div class="total" data-item="totalBandwidth">200</div>
|
||||
<div class="label">mb/s</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -822,47 +813,9 @@
|
|||
<div class="head">
|
||||
<span>Users</span>
|
||||
</div>
|
||||
<ul class="status_box good">
|
||||
<ul class="status_box good" data-item="users">
|
||||
<li class="block user">
|
||||
<span class="header">Will</span>
|
||||
<div class="icon"></div>
|
||||
</li>
|
||||
|
||||
<li class="block user">
|
||||
<span class="header">Brian</span>
|
||||
<div class="icon"></div>
|
||||
</li>
|
||||
|
||||
<li class="block user">
|
||||
<span class="header">Sonny</span>
|
||||
<div class="icon"></div>
|
||||
</li>
|
||||
<li class="block user">
|
||||
<span class="header">Will</span>
|
||||
<div class="icon"></div>
|
||||
</li>
|
||||
|
||||
<li class="block user">
|
||||
<span class="header">Brian</span>
|
||||
<div class="icon"></div>
|
||||
</li>
|
||||
|
||||
<li class="block user">
|
||||
<span class="header">Sonny</span>
|
||||
<div class="icon"></div>
|
||||
</li>
|
||||
<li class="block user">
|
||||
<span class="header">Will</span>
|
||||
<div class="icon"></div>
|
||||
</li>
|
||||
|
||||
<li class="block user">
|
||||
<span class="header">Brian</span>
|
||||
<div class="icon"></div>
|
||||
</li>
|
||||
|
||||
<li class="block user">
|
||||
<span class="header">Sonny</span>
|
||||
<span class="header" data-list-item="account"></span>
|
||||
<div class="icon"></div>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -923,50 +876,10 @@
|
|||
<span class="arrow"></span>
|
||||
</div>
|
||||
</div>
|
||||
<ul>
|
||||
<ul data-item="events">
|
||||
<li class="odd">
|
||||
<div class="date"><span>12/01</span></div>
|
||||
<div class="desc">Event</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="date"><span>12/01</span></div>
|
||||
<div class="desc">Event</div>
|
||||
</li>
|
||||
<li class="odd">
|
||||
<div class="date"><span>12/01</span></div>
|
||||
<div class="desc">Event</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="date"><span>12/01</span></div>
|
||||
<div class="desc">Event</div>
|
||||
</li>
|
||||
<li class="odd">
|
||||
<div class="date"><span>12/01</span></div>
|
||||
<div class="desc">Event</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="date"><span>12/01</span></div>
|
||||
<div class="desc">Event</div>
|
||||
</li>
|
||||
<li class="odd">
|
||||
<div class="date"><span>12/01</span></div>
|
||||
<div class="desc">Event</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="date"><span>12/01</span></div>
|
||||
<div class="desc">Event</div>
|
||||
</li>
|
||||
<li class="odd">
|
||||
<div class="date"><span>12/01</span></div>
|
||||
<div class="desc">Event</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="date"><span>12/01</span></div>
|
||||
<div class="desc">Event</div>
|
||||
</li>
|
||||
<li class="odd">
|
||||
<div class="date"><span>12/01</span></div>
|
||||
<div class="desc">Event</div>
|
||||
<div class="date"><span data-list-item="date"></span></div>
|
||||
<div class="desc" data-list-item="desc"></div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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({
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue