shaba/one
1
0
Fork 0
mirror of https://github.com/OpenNebula/one.git synced 2025-03-20 10:50:08 +03:00
Code Releases Wiki Activity

feature #3748: Add provision dashboard templates

Browse Source
This commit is contained in:
Daniel Molina 2015-06-17 12:27:27 +02:00
parent a679e0785a
commit 2e9b44682c
11 changed files with 488 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/sunstone/public/app/sunstone-config.js
View File

@ -43,6 +43,10 @@ define(function(require) {
},
"tabTableColumns": function(tabName) {
if (!_config['view']['tabs'][tabName]) {
return [];
}
var columns = _config['view']['tabs'][tabName]['table_columns'];
if (columns) {
@ -62,6 +66,10 @@ define(function(require) {
},
"dashboardWidgets": function(perRow) {
if (!_config['view']['tabs']['dashboard-tab']) {
return []
}
var widgets = _config['view']['tabs']['dashboard-tab'][perRow];
if (widgets) {

4
src/sunstone/public/app/tabs/provision-tab/dashboard/empty-graphs.hbs Normal file
View File

@ -0,0 +1,4 @@
<span class="fa-stack fa-2x" style="color: #dfdfdf"> <i class="fa fa-cloud fa-stack-2x"></i>
</span>
<br>
<span style="color: #cfcfcf">{{tr "There is no information available"}}</span>

1
src/sunstone/public/app/tabs/provision-tab/dashboard/empty-quota.hbs Normal file
View File

@ -0,0 +1 @@
<span>0</span>

56
src/sunstone/public/app/tabs/provision-tab/dashboard/quotas.hbs Normal file
View File

@ -0,0 +1,56 @@
<div class="row">
<div class="large-11 large-centered columns">
<h2 class="subheader">{{tr "Quotas"}}</h2>
<br></div>
</div>
<div class="row">
<div class="large-10 large-centered columns">
<div class="row">
<div class="large-4 columns text-center">
<span id="provision_dashboard_rvms_percentage" style="font-size:50px">0</span>
<span style="font-size:20px; color: #999">%</span></div>
<div class="large-4 columns text-center">
<span id="provision_dashboard_cpu_percentage" style="font-size:50px">0</span>
<span style="font-size:20px; color: #999">%</span></div>
<div class="large-4 columns text-center">
<span id="provision_dashboard_memory_percentage" style="font-size:50px">0</span>
<span style="font-size:20px; color: #999">%</span></div>
</div>
<div class="row">
<div class="large-4 columns text-center">
<div class="progress large radius">
<span id="provision_dashboard_rvms_meter" class="meter"></span>
</div>
</div>
<div class="large-4 columns text-center">
<div class="progress large radius">
<span id="provision_dashboard_cpu_meter" class="meter"></span>
</div>
</div>
<div class="large-4 columns text-center">
<div class="progress large radius">
<span id="provision_dashboard_memory_meter" class="meter"></span>
</div>
</div>
</div>
<div class="row">
<div class="large-4 columns text-center">
<span>{{tr "RUNNING VMS"}}</span>
<br>
<span id="provision_dashboard_rvms_str" style="color: #999; font-size: 14px;"></span>
</div>
<div class="large-4 columns text-center">
<span>{{tr "CPU"}}</span>
<br>
<span id="provision_dashboard_cpu_str" style="color: #999; font-size: 14px;"></span>
</div>
<div class="large-4 columns text-center">
<span>{{tr "MEMORY"}}</span>
<br>
<span id="provision_dashboard_memory_str" style="color: #999; font-size: 14px;"></span>
</div>
</div>
</div>
</div>
<br>
<br>

64
src/sunstone/public/app/tabs/provision-tab/dashboard/users.hbs Normal file
View File

@ -0,0 +1,64 @@
<div class="row">
<div class="large-11 large-centered columns">
<h2 class="subheader">
{{tr "Users"}}
</h2>
<br>
</div>
</div>
<div class="row" id="provision_users_dashboard">
<div class="large-11 large-centered columns">
<div class="row">
<div class="large-4 columns text-center">
<br>
<div class="row">
<div class="large-12 columns">
<span id="provision_dashboard_users_total" style="font-size:80px">
<i class="fa fa-spinner fa-spin"></i>
</span>
<br>
<span style="color: #999;">{{tr "TOTAL"}}</span>
</div>
</div>
<br>
<br>
<div class="row">
<div class="large-12 columns">
<a href"#" class="medium button large success radius provision_create_user_button" style="margin-left: 5px; margin-right: 5px"><i class="fa fa-lg fa-plus-square"/></a>
<a href"#" class="medium button large radius provision_users_list_button" style="margin-left: 5px; margin-right: 5px"><i class="fa fa-lg fa-users"/></a>
</div>
</div>
<br>
<div class="row">
<div class="large-12 columns">
</div>
</div>
</div>
<div class="large-8 columns" id="dashboard_vdc_user_accounting">
<input style="display:none;" value="user" id="acct_group_by"/>
<div class="row">
<div class="large-12 columns graph_legend">
<h3 class="subheader"><small>{{tr "CPU hours"}}</small></h3>
</div>
<div class="large-12 columns">
<div class="large-12 columns centered graph text-center" id="acct_cpu_graph" style="height: 100px;">
{{> ./empty-graphs}}
</div>
</div>
</div>
<div class="row">
<div class="large-12 columns graph_legend">
<h3 class="subheader"><small>{{tr "Memory GB hours"}}</small></h3>
</div>
<div class="large-12 columns">
<div class="large-12 columns centered graph text-center" id="acct_mem_graph" style="height: 100px;">
{{> ./empty-graphs}}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<br>
<br>

59
src/sunstone/public/app/tabs/provision-tab/dashboard/vdc-quotas.hbs Normal file
View File

@ -0,0 +1,59 @@
<div class="row">
<div class="large-11 large-centered columns">
<h2 class="subheader">{{tr "Group Quotas"}}</h2>
<br></div>
</div>
<div class="row">
<div class="large-10 large-centered columns">
<div class="row">
<div class="large-4 columns text-center">
<span id="provision_dashboard_vdc_rvms_percentage" style="font-size:50px">0</span>
<span style="font-size:20px; color: #999">%</span>
</div>
<div class="large-4 columns text-center">
<span id="provision_dashboard_vdc_cpu_percentage" style="font-size:50px">0</span>
<span style="font-size:20px; color: #999">%</span>
</div>
<div class="large-4 columns text-center">
<span id="provision_dashboard_vdc_memory_percentage" style="font-size:50px">0</span>
<span style="font-size:20px; color: #999">%</span>
</div>
</div>
<div class="row">
<div class="large-4 columns text-center">
<div class="progress large radius">
<span id="provision_dashboard_vdc_rvms_meter" class="meter"></span>
</div>
</div>
<div class="large-4 columns text-center">
<div class="progress large radius">
<span id="provision_dashboard_vdc_cpu_meter" class="meter"></span>
</div>
</div>
<div class="large-4 columns text-center">
<div class="progress large radius">
<span id="provision_dashboard_vdc_memory_meter" class="meter"></span>
</div>
</div>
</div>
<div class="row">
<div class="large-4 columns text-center">
<span>{{tr "RUNNING VMS"}}</span>
<br>
<span id="provision_dashboard_vdc_rvms_str" style="color: #999; font-size: 14px;"></span>
</div>
<div class="large-4 columns text-center">
<span>{{tr "CPU"}}</span>
<br>
<span id="provision_dashboard_vdc_cpu_str" style="color: #999; font-size: 14px;"></span>
</div>
<div class="large-4 columns text-center">
<span>{{tr "MEMORY"}}</span>
<br>
<span id="provision_dashboard_vdc_memory_str" style="color: #999; font-size: 14px;"></span>
</div>
</div>
</div>
</div>
<br>
<br>

101
src/sunstone/public/app/tabs/provision-tab/dashboard/vdc-vms.hbs Normal file
View File

@ -0,0 +1,101 @@
<div class="row">
<div class="large-11 large-centered columns">
<h2 class="subheader">{{tr "Group Virtual Machines"}}</h2>
<br></div>
</div>
<div class="row" id="provision_vdc_vms_dashboard">
<div class="large-11 large-centered columns">
<div class="row">
<div class="large-4 columns text-center">
<br>
<div class="row">
<div class="large-12 columns">
<span id="provision_dashboard_vdc_total" style="font-size:80px"> <i class="fa fa-spinner fa-spin"></i>
</span>
<br>
<span style="color: #999;">{{tr "TOTAL"}}</span>
</div>
</div>
<br>
<br>
<div class="row">
<div class="large-12 columns text-center">
<a href"#" class="medium button success large radius provision_create_vm_button" style="margin-left: 5px; margin-right: 5px"> <i class="fa fa-lg fa-plus-square"/></a>
<a href"#" class="medium button large radius provision_vms_list_button" style="margin-left: 5px; margin-right: 5px">
<i class="fa fa-lg fa-th"/></a>
</div>
</div>
<br>
<div class="row">
<div class="large-12 columns"></div>
</div>
</div>
<div class="large-2 columns">
<div class="row">
<div class="large-12 columns text-center">
<span id="provision_dashboard_vdc_running" style="font-size:40px">
<i class="fa fa-spinner fa-spin"></i>
</span>
<br>
<span style="color: #999; font-size: 14px">{{tr "RUNNING"}}</span>
</div>
</div>
<br>
<div class="row">
<div class="large-12 columns text-center ">
<span id="provision_dashboard_vdc_deploying" style="font-size:40px">
<i class="fa fa-spinner fa-spin"></i>
</span>
<br>
<span style="color: #999; font-size: 14px">{{tr "DEPLOYING"}}</span>
</div>
</div>
<br>
<div class="row">
<div class="large-12 columns text-center">
<span id="provision_dashboard_vdc_off" style="font-size:40px">
<i class="fa fa-spinner fa-spin"></i>
</span>
<br>
<span style="color: #999; font-size: 14px">{{tr "OFF"}}</span>
</div>
</div>
<br>
<div class="row">
<div class="large-12 columns text-center ">
<span id="provision_dashboard_vdc_error" style="font-size:40px">
<i class="fa fa-spinner fa-spin"></i>
</span>
<br>
<span style="color: #999; font-size: 14px">{{tr "ERROR"}}</span>
</div>
</div>
</div>
<div class="large-6 columns" id="dashboard_vdc_vm_accounting">
<input style="display:none;" value="vm" id="acct_group_by"/>
<div class="row">
<div class="large-12 columns graph_legend">
<h3 class="subheader">
<small>{{tr "CPU hours"}}</small>
</h3>
</div>
<div class="large-12 columns">
<div class="large-12 columns centered graph text-center" id="acct_cpu_graph" style="height: 100px;">{{> ./empty-graphs}}</div>
</div>
</div>
<div class="row">
<div class="large-12 columns graph_legend">
<h3 class="subheader">
<small>{{tr "Memory GB hours"}}</small>
</h3>
</div>
<div class="large-12 columns">
<div class="large-12 columns centered graph text-center" id="acct_mem_graph" style="height: 100px;">{{> ./empty-graphs}}</div>
</div>
</div>
</div>
</div>
</div>
</div>
<br>
<br>

101
src/sunstone/public/app/tabs/provision-tab/dashboard/vms.hbs Normal file
View File

@ -0,0 +1,101 @@
<div class="row">
<div class="large-11 large-centered columns">
<h2 class="subheader">{{tr "Virtual Machines"}}</h2>
<br></div>
</div>
<div class="row" id="provision_vms_dashboard">
<div class="large-11 large-centered columns">
<div class="row">
<div class="large-4 columns text-center">
<br>
<div class="row">
<div class="large-12 columns">
<span id="provision_dashboard_total" style="font-size:80px"> <i class="fa fa-spinner fa-spin"></i>
</span>
<br>
<span style="color: #999;">{{tr "TOTAL"}}</span>
</div>
</div>
<br>
<br>
<div class="row">
<div class="large-12 columns text-center">
<a href"#" class="medium button success large radius provision_create_vm_button" style="margin-left: 5px; margin-right: 5px"> <i class="fa fa-lg fa-plus-square"/></a>
<a href"#" class="medium button large radius provision_vms_list_button" style="margin-left: 5px; margin-right: 5px">
<i class="fa fa-lg fa-th"/></a>
</div>
</div>
<br>
<div class="row">
<div class="large-12 columns"></div>
</div>
</div>
<div class="large-2 columns">
<div class="row">
<div class="large-12 columns text-center">
<span id="provision_dashboard_running" style="font-size:40px">
<i class="fa fa-spinner fa-spin"></i>
</span>
<br>
<span style="color: #999; font-size: 14px">{{tr "RUNNING"}}</span>
</div>
</div>
<br>
<div class="row">
<div class="large-12 columns text-center ">
<span id="provision_dashboard_deploying" style="font-size:40px">
<i class="fa fa-spinner fa-spin"></i>
</span>
<br>
<span style="color: #999; font-size: 14px">{{tr "DEPLOYING"}}</span>
</div>
</div>
<br>
<div class="row">
<div class="large-12 columns text-center">
<span id="provision_dashboard_off" style="font-size:40px">
<i class="fa fa-spinner fa-spin"></i>
</span>
<br>
<span style="color: #999; font-size: 14px">{{tr "OFF"}}</span>
</div>
</div>
<br>
<div class="row">
<div class="large-12 columns text-center ">
<span id="provision_dashboard_error" style="font-size:40px">
<i class="fa fa-spinner fa-spin"></i>
</span>
<br>
<span style="color: #999; font-size: 14px">{{tr "ERROR"}}</span>
</div>
</div>
</div>
<div class="large-6 columns" id="dashboard_vm_accounting">
<input style="display:none;" value="vm" id="acct_group_by"/>
<div class="row">
<div class="large-12 columns graph_legend">
<h3 class="subheader">
<small>{{tr "CPU hours"}}</small>
</h3>
</div>
<div class="large-12 columns">
<div class="large-12 columns centered graph text-center" id="acct_cpu_graph" style="height: 100px;">{{> ./empty-graphs}}</div>
</div>
</div>
<div class="row">
<div class="large-12 columns graph_legend">
<h3 class="subheader">
<small>{{tr "Memory GB hours"}}</small>
</h3>
</div>
<div class="large-12 columns">
<div class="large-12 columns centered graph text-center" id="acct_mem_graph" style="height: 100px;">{{> ./empty-graphs}}</div>
</div>
</div>
</div>
</div>
</div>
</div>
<br>
<br>

22
src/sunstone/public/app/utils/accounting.js
View File

@ -299,44 +299,46 @@ define(function(require) {
//--------------------------------------------------------------------------
// TODO: Allow to change group by dynamically, instead of calling oned again
var group_by_fn;
var group_by_name;
var group_by_prefix;
switch ($("#acct_group_by", context).val()){
case "user":
var group_by_fn = function(history){
group_by_fn = function(history){
return history.VM.UID;
}
var group_by_name = function(history){
group_by_name = function(history){
return history.VM.UNAME;
}
var group_by_prefix = Locale.tr("User");
group_by_prefix = Locale.tr("User");
break;
case "group":
var group_by_fn = function(history){
group_by_fn = function(history){
return history.VM.GID;
}
var group_by_name = function(history){
group_by_name = function(history){
return history.VM.GNAME;
}
var group_by_prefix = Locale.tr("Group");
group_by_prefix = Locale.tr("Group");
break;
case "vm":
var group_by_fn = function(history){
group_by_fn = function(history){
return history.OID;
}
var group_by_name = function(history){
group_by_name = function(history){
return history.VM.NAME;
}
var group_by_prefix = Locale.tr("VM");
group_by_prefix = Locale.tr("VM");
break;
}

72
src/sunstone/public/app/utils/humanize.js
View File

@ -1,10 +1,5 @@
define(function(require) {
var EXTERNAL_IPS_ATTRS = [
'GUEST_IP',
'AWS_IP_ADDRESS',
'AZ_IPADDRESS',
'SL_PRIMARYIPADDRESS'
]
var Locale = require('utils/locale');
/*
CONSTRUCTOR
@ -19,7 +14,7 @@ define(function(require) {
'prettyTime': _prettyTime,
'prettyTimeAxis': _prettyTimeAxis,
'prettyPrintJSON': _prettyPrintJSON,
'ipsStr': _ipsStr
'prettyTimeAgo': _format_date
}
/*
@ -214,45 +209,36 @@ define(function(require) {
return str;
}
// Return the IP or several IPs of a VM
function _ipsStr(vm, divider) {
var divider = divider || "<br>"
var nic = vm.TEMPLATE.NIC;
var ips = [];
function _format_date(unix_timestamp) {
var difference_in_seconds = (Math.round((new Date()).getTime() / 1000)) - unix_timestamp,
current_date = new Date(unix_timestamp * 1000), minutes, hours;
if (nic != undefined) {
if (!$.isArray(nic)) {
nic = [nic];
if(difference_in_seconds < 60) {
return difference_in_seconds + "s" + " ago";
} else if (difference_in_seconds < 60*60) {
minutes = Math.floor(difference_in_seconds/60);
return minutes + "m" + " ago";
} else if (difference_in_seconds < 60*60*24) {
hours = Math.floor(difference_in_seconds/60/60);
return hours + "h" + " ago";
} else if (difference_in_seconds > 60*60*24){
if(current_date.getYear() !== new Date().getYear())
return current_date.getDay() + " " + Locale.months[current_date.getMonth()].substr(0,3) + " " + _fourdigits(current_date.getYear());
else {
return current_date.getDay() + " " + Locale.months[current_date.getMonth()].substr(0,3);
}
$.each(nic, function(index, value) {
if (value.IP) {
ips.push(value.IP);
}
if (value.IP6_GLOBAL) {
ips.push(value.IP6_GLOBAL);
}
if (value.IP6_ULA) {
ips.push(value.IP6_ULA);
}
});
}
var template = vm.TEMPLATE;
var externalIP;
$.each(EXTERNAL_IPS_ATTRS, function(index, IPAttr) {
externalIP = template[IPAttr];
if (externalIP && ($.inArray(externalIP, ips) == -1)) {
ips.push(externalIP);
}
})
return difference_in_seconds;
if (ips.length > 0) {
return ips.join(divider);
} else {
return '--';
}
};
function _fourdigits(number) {
return (number < 1000) ? number + 1900 : number;}
//function _plural(number) {
// if(parseInt(number) === 1) {
// return "";
// }
// return "s";
//}
}
})

53
src/sunstone/public/app/utils/quotas/quota-widgets.js
View File

@ -1033,6 +1033,56 @@ define(function(require) {
return html;
}
function _quotaInfo(usage, limit, default_limit, not_html){
var int_usage = parseInt(usage, 10);
var int_limit = _quotaIntLimit(limit, default_limit);
return _quotaBaseInfo(int_usage, int_limit, null, not_html);
}
function _quotaMBInfo(usage, limit, default_limit, not_html){
var int_usage = parseInt(usage, 10);
var int_limit = _quotaIntLimit(limit, default_limit);
info_str = Humanize.size(int_usage * 1024)+' / '
+((int_limit >= 0) ? Humanize.size(int_limit * 1024) : '-')
return _quotaBaseInfo(int_usage, int_limit, info_str, not_html);
}
function _quotaFloatInfo(usage, limit, default_limit, not_html){
var float_usage = parseFloat(usage, 10);
var float_limit = _quotaFloatLimit(limit, default_limit);
return _quotaBaseInfo(float_usage, float_limit, null, not_html);
}
function _quotaBaseInfo(usage, limit, info_str, not_html){
percentage = 0;
if (limit > 0){
percentage = Math.floor((usage / limit) * 100);
if (percentage > 100){
percentage = 100;
}
} else if (limit == 0 && usage > 0){
percentage = 100;
}
info_str = info_str || ( usage+' / '+((limit >= 0) ? limit : '-') );
if (not_html) {
return {
"percentage": percentage,
"str": info_str
}
} else {
html = '<span class="progress-text right" style="font-size: 12px">'+info_str+'</span><br><div class="progress radius" style="height: 10px; margin-bottom:0px"><span class="meter" style="width: '
+percentage+'%"></div>';
return html;
}
}
function _quotaBar(usage, limit, default_limit){
var int_usage = parseInt(usage, 10);
var int_limit = _quotaIntLimit(limit, default_limit);
@ -1176,5 +1226,8 @@ define(function(require) {
'dialogHTML': _quotas_tmpl,
'setupQuotasDialog': _setupQuotasDialog,
'populateQuotasDialog': _populateQuotasDialog,
'quotaFloatInfo': _quotaFloatInfo,
'quotaMBInfo': _quotaMBInfo,
'quotaInfo': _quotaInfo
};
});