mirror of https://github.com/apache/cloudstack.git
WIP: Implement user dashboard
** Still missing projects, IP address stats
This commit is contained in:
Brian Federle
parent
3d00c1e33f
commit
61d8678031
28
ui/index.jsp
28
ui/index.jsp
|
|
@ -1008,15 +1008,15 @@
|
|||
<ul>
|
||||
<li class="running">
|
||||
<div class="name">Running VMs</div>
|
||||
<div class="value">110</div>
|
||||
<div class="value" data-item="runningInstances"></div>
|
||||
</li>
|
||||
<li class="stopped">
|
||||
<div class="name">Stopped VMs</div>
|
||||
<div class="value">10</div>
|
||||
<div class="value" data-item="stoppedInstances"></div>
|
||||
</li>
|
||||
<li class="total">
|
||||
<div class="name">Total VMs</div>
|
||||
<div class="value">120</div>
|
||||
<div class="value" data-item="totalInstances"></div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -1028,22 +1028,14 @@
|
|||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Recent Errors</th>
|
||||
<th>My Projects</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
<div class="content">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr><td class="desc">Error 1</td><td class="value">Desc</td></tr>
|
||||
<tr class="odd"><td>Error 2</td><td class="value">Desc</td></tr>
|
||||
<tr><td class="desc">Error 3</td><td class="value">Desc</td></tr>
|
||||
<tr class="odd"><td>Error 4</td><td class="value">Desc</td></tr>
|
||||
<tr><td class="desc">Error 5</td><td class="value">Desc</td></tr>
|
||||
<tr class="odd"><td>Error 6</td><td class="value">Desc</td></tr>
|
||||
<tr><td class="desc">Error 7</td><td class="value">Desc</td></tr>
|
||||
<tr class="odd"><td>Error 7</td><td class="value">Desc</td></tr>
|
||||
<tr><td class="desc">Error 9</td><td class="value">Desc</td></tr>
|
||||
<tr><td class="desc"></td><td class="value"></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
|
@ -1059,11 +1051,11 @@
|
|||
<div class="content">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr><td class="desc">Account ID</td><td class="value">Desc</td></tr>
|
||||
<tr class="odd"><td>Account</td><td class="value">Desc</td></tr>
|
||||
<tr><td>Type</td><td class="value">Desc</td></tr>
|
||||
<tr class="odd"><td class="desc">Domain</td><td class="value">Desc</td></tr>
|
||||
<tr><td class="desc">Some other value</td><td class="value">Desc</td></tr>
|
||||
<tr class="odd"><td class="desc">Account</td><td class="value" data-item="accountName"></td></tr>
|
||||
<tr><td class="desc">User</td><td class="value" data-item="userName"></td></tr>
|
||||
<tr class="odd"><td class="desc">Role</td><td class="value" data-item="accountType"></td></tr>
|
||||
<tr><td class="desc">Account ID</td><td class="value" data-item="accountID"></td></tr>
|
||||
<tr class="odd"><td class="desc">Domain ID</td><td class="value" data-item="accountDomainID"></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,114 +4,167 @@
|
|||
title: 'Dashboard',
|
||||
show: cloudStack.uiCustom.dashboard,
|
||||
|
||||
dataProvider: function(args) {
|
||||
var dataFns = {
|
||||
zones: function(data) {
|
||||
$.ajax({
|
||||
url: createURL('listZones'),
|
||||
success: function(json) {
|
||||
dataFns.capacity({
|
||||
zones: json.listzonesresponse.zone
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
capacity: function(data) {
|
||||
if (data.zones) {
|
||||
adminCheck: function(args) {
|
||||
return isAdmin() ? true : false;
|
||||
},
|
||||
|
||||
// User dashboard
|
||||
user: {
|
||||
dataProvider: function(args) {
|
||||
var dataFns = {
|
||||
instances: function(data) {
|
||||
$.ajax({
|
||||
url: createURL('listCapacity'),
|
||||
url: createURL('listVirtualMachines'),
|
||||
success: function(json) {
|
||||
var capacities = json.listcapacityresponse.capacity;
|
||||
|
||||
var capacity = function(id, converter) {
|
||||
return $.grep(capacities, function(capacity) {
|
||||
return capacity.type == id;
|
||||
})[0];
|
||||
};
|
||||
|
||||
dataFns.alerts($.extend(data, {
|
||||
publicIPAllocated: capacity(8).capacityused,
|
||||
publicIPTotal: capacity(8).capacitytotal,
|
||||
publicIPPercentage: parseInt(capacity(8).percentused),
|
||||
privateIPAllocated: capacity(5).capacityused,
|
||||
privateIPTotal: capacity(5).capacitytotal,
|
||||
privateIPPercentage: parseInt(capacity(8).percentused),
|
||||
memoryAllocated: cloudStack.converters.convertBytes(capacity(0).capacityused),
|
||||
memoryTotal: cloudStack.converters.convertBytes(capacity(0).capacitytotal),
|
||||
memoryPercentage: parseInt(capacity(0).percentused),
|
||||
cpuAllocated: cloudStack.converters.convertHz(capacity(1).capacityused),
|
||||
cpuTotal: cloudStack.converters.convertHz(capacity(1).capacitytotal),
|
||||
cpuPercentage: parseInt(capacity(1).percentused)
|
||||
var instances = json.listvirtualmachinesresponse.virtualmachine ?
|
||||
json.listvirtualmachinesresponse.virtualmachine : [];
|
||||
|
||||
dataFns.account($.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
|
||||
}));
|
||||
}
|
||||
});
|
||||
} else {
|
||||
dataFns.alerts($.extend(data, {
|
||||
publicIPAllocated: 0,
|
||||
publicIPTotal: 0,
|
||||
publicIPPercentage: 0,
|
||||
privateIPAllocated: 0,
|
||||
privateIPTotal: 0,
|
||||
privateIPPercentage: 0,
|
||||
memoryAllocated: 0,
|
||||
memoryTotal: 0,
|
||||
memoryPercentage: 0,
|
||||
cpuAllocated: 0,
|
||||
cpuTotal: 0,
|
||||
cpuPercentage: 0
|
||||
},
|
||||
|
||||
account: function(data) {
|
||||
var user = cloudStack.context.users[0];
|
||||
complete($.extend(data, {
|
||||
accountID: user.userid,
|
||||
accountName: user.account,
|
||||
userName: user.username,
|
||||
accountType: cloudStack.converters.toRole(user.type),
|
||||
accountDomainID: user.domainid
|
||||
}));
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
var complete = function(data) {
|
||||
args.response.success({
|
||||
data: data
|
||||
});
|
||||
};
|
||||
|
||||
alerts: function(data) {
|
||||
$.ajax({
|
||||
url: createURL('listAlerts'),
|
||||
data: {
|
||||
page: 1,
|
||||
pageSize: 4
|
||||
},
|
||||
success: function(json) {
|
||||
dataFns.hostAlerts($.extend(data, {
|
||||
alerts: $.map(json.listalertsresponse.alert, function(alert) {
|
||||
return {
|
||||
name: cloudStack.converters.toAlertType(alert.type),
|
||||
description: alert.description
|
||||
dataFns.instances({});
|
||||
}
|
||||
},
|
||||
|
||||
// Admin dashboard
|
||||
admin: {
|
||||
dataProvider: function(args) {
|
||||
var dataFns = {
|
||||
zones: function(data) {
|
||||
$.ajax({
|
||||
url: createURL('listZones'),
|
||||
success: function(json) {
|
||||
dataFns.capacity({
|
||||
zones: json.listzonesresponse.zone
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
capacity: function(data) {
|
||||
if (data.zones) {
|
||||
$.ajax({
|
||||
url: createURL('listCapacity'),
|
||||
success: function(json) {
|
||||
var capacities = json.listcapacityresponse.capacity;
|
||||
|
||||
var capacity = function(id, converter) {
|
||||
return $.grep(capacities, function(capacity) {
|
||||
return capacity.type == id;
|
||||
})[0];
|
||||
};
|
||||
})
|
||||
|
||||
dataFns.alerts($.extend(data, {
|
||||
publicIPAllocated: capacity(8).capacityused,
|
||||
publicIPTotal: capacity(8).capacitytotal,
|
||||
publicIPPercentage: parseInt(capacity(8).percentused),
|
||||
privateIPAllocated: capacity(5).capacityused,
|
||||
privateIPTotal: capacity(5).capacitytotal,
|
||||
privateIPPercentage: parseInt(capacity(8).percentused),
|
||||
memoryAllocated: cloudStack.converters.convertBytes(capacity(0).capacityused),
|
||||
memoryTotal: cloudStack.converters.convertBytes(capacity(0).capacitytotal),
|
||||
memoryPercentage: parseInt(capacity(0).percentused),
|
||||
cpuAllocated: cloudStack.converters.convertHz(capacity(1).capacityused),
|
||||
cpuTotal: cloudStack.converters.convertHz(capacity(1).capacitytotal),
|
||||
cpuPercentage: parseInt(capacity(1).percentused)
|
||||
}));
|
||||
}
|
||||
});
|
||||
} else {
|
||||
dataFns.alerts($.extend(data, {
|
||||
publicIPAllocated: 0,
|
||||
publicIPTotal: 0,
|
||||
publicIPPercentage: 0,
|
||||
privateIPAllocated: 0,
|
||||
privateIPTotal: 0,
|
||||
privateIPPercentage: 0,
|
||||
memoryAllocated: 0,
|
||||
memoryTotal: 0,
|
||||
memoryPercentage: 0,
|
||||
cpuAllocated: 0,
|
||||
cpuTotal: 0,
|
||||
cpuPercentage: 0
|
||||
}));
|
||||
}
|
||||
},
|
||||
|
||||
alerts: function(data) {
|
||||
$.ajax({
|
||||
url: createURL('listAlerts'),
|
||||
data: {
|
||||
page: 1,
|
||||
pageSize: 4
|
||||
},
|
||||
success: function(json) {
|
||||
dataFns.hostAlerts($.extend(data, {
|
||||
alerts: $.map(json.listalertsresponse.alert, function(alert) {
|
||||
return {
|
||||
name: cloudStack.converters.toAlertType(alert.type),
|
||||
description: alert.description
|
||||
};
|
||||
})
|
||||
}));
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
hostAlerts: function(data) {
|
||||
$.ajax({
|
||||
url: createURL('listHosts'),
|
||||
data: {
|
||||
state: 'Alert',
|
||||
page: 1,
|
||||
pageSize: 4
|
||||
},
|
||||
success: function(json) {
|
||||
complete($.extend(data, {
|
||||
hostAlerts: $.map(json.listhostsresponse.host, function(host) {
|
||||
return {
|
||||
name: host.name,
|
||||
description: 'Alert state detected for ' + host.name
|
||||
};
|
||||
})
|
||||
}));
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
var complete = function(data) {
|
||||
args.response.success({
|
||||
data: data
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
hostAlerts: function(data) {
|
||||
$.ajax({
|
||||
url: createURL('listHosts'),
|
||||
data: {
|
||||
state: 'Alert',
|
||||
page: 1,
|
||||
pageSize: 4
|
||||
},
|
||||
success: function(json) {
|
||||
complete($.extend(data, {
|
||||
hostAlerts: $.map(json.listhostsresponse.host, function(host) {
|
||||
return {
|
||||
name: host.name,
|
||||
description: 'Alert state detected for ' + host.name
|
||||
};
|
||||
})
|
||||
}));
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
var complete = function(data) {
|
||||
args.response.success({
|
||||
data: data
|
||||
});
|
||||
};
|
||||
|
||||
dataFns.zones({});
|
||||
dataFns.zones({});
|
||||
}
|
||||
}
|
||||
};
|
||||
})(jQuery, cloudStack, testData);
|
||||
|
|
|
|||
|
|
@ -1,22 +1,32 @@
|
|||
(function($, cloudStack) {
|
||||
cloudStack.uiCustom.dashboard = function() {
|
||||
var $dashboard = $('#template').find('div.dashboard.admin').clone();
|
||||
// Determine if user or admin dashboard should be shown
|
||||
var dashboardType = cloudStack.sections.dashboard.adminCheck({
|
||||
context: cloudStack.context
|
||||
}) ? 'admin' : 'user';
|
||||
|
||||
// Get dashboard layout
|
||||
var $dashboard = $('#template').find('div.dashboard.' + dashboardType).clone();
|
||||
|
||||
// View all action
|
||||
$dashboard.find('.view-all').click(function() {
|
||||
$('#navigation li.events').click();
|
||||
});
|
||||
|
||||
// Retrieve data
|
||||
var getData = function() {
|
||||
// Populate data
|
||||
$dashboard.find('[data-item]').hide();
|
||||
cloudStack.sections.dashboard.dataProvider({
|
||||
cloudStack.sections.dashboard[dashboardType].dataProvider({
|
||||
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();
|
||||
|
|
@ -53,5 +63,5 @@
|
|||
getData();
|
||||
|
||||
return $dashboard;
|
||||
}
|
||||
};
|
||||
}(jQuery, cloudStack));
|
||||
Loading…
Reference in New Issue