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

F #1511: Better DashBoard for Sunstone (#1582)

Browse Source 
Simplifies widgets and improves response times on large deployments
This commit is contained in:
Abel Coronado 2017-12-14 12:00:12 +01:00 committed by Ruben S. Montero
parent 042e64bf1d
commit 277da84abd
24 changed files with 299 additions and 254 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/sunstone/etc/sunstone-views/admin.yaml
View File

@ -90,11 +90,11 @@ tabs:
Dashboard.refresh: false
Sunstone.toggle_top: false
widgets_one_per_row:
- vms
- hosts
- users
widgets_three_per_row:
widgets_two_per_row:
- vms
- users
- storage
- network
widgets_one_footer:

4
src/sunstone/etc/sunstone-views/admin_vcenter.yaml
View File

@ -90,11 +90,11 @@ tabs:
Dashboard.refresh: false
Sunstone.toggle_top: false
widgets_one_per_row:
- vms
- hosts
- users
widgets_three_per_row:
widgets_two_per_row:
- vms
- users
widgets_one_footer:
system-top-tab:
panel_tabs:

2
src/sunstone/etc/sunstone-views/cloud.yaml
View File

@ -17,7 +17,7 @@ features:
# will be set to the same value as VCPU, that will still be visible for the
# end users
instantiate_hide_cpu: false
# False to not scale the CPU. Number [0, 1] to scale from VCPU
instantiate_cpu_factor: false

4
src/sunstone/etc/sunstone-views/groupadmin.yaml
View File

@ -90,10 +90,10 @@ tabs:
Dashboard.refresh: false
Sunstone.toggle_top: false
widgets_one_per_row:
- vms
- users
widgets_three_per_row:
widgets_two_per_row:
- vms
- users
- groupquotas
- quotas
widgets_one_footer:

4
src/sunstone/etc/sunstone-views/groupadmin_vcenter.yaml
View File

@ -90,10 +90,10 @@ tabs:
Dashboard.refresh: false
Sunstone.toggle_top: false
widgets_one_per_row:
- vms
- users
widgets_three_per_row:
widgets_two_per_row:
- vms
- users
- groupquotas
- quotas
widgets_one_footer:

25
src/sunstone/public/app/tabs/dashboard-tab.js
View File

@ -87,29 +87,7 @@ define(function(require) {
'vms': {
'html': require('hbs!./dashboard-tab/vms'),
'onShow': function() {
var end_time = -1; // today
var start_time = Math.floor(new Date().getTime() / 1000);
start_time = start_time - 604800; // 604800 = 7 days = 7*24*60*60
var options = {
"start_time": start_time,
"end_time": end_time
}
var no_table = true;
$("#acct_cpu_graph, #acct_mem_graph, #acct_disk_graph", "#dashboard_vm_accounting").html('<span id="provision_dashboard_total" style="font-size:80px">'+
'<i class="fa fa-spinner fa-spin"></i>'+
'</span>')
OpenNebulaVM.accounting({
success: function(req, response) {
Accounting.fillAccounting($("#dashboard_vm_accounting"), req, response, no_table);
Accounting.fillAccounting($("#dashboard_user_accounting"), req, response, no_table);
Sunstone.runAction("VM.list");
},
error: Notifier.onError,
data: options
});
Sunstone.runAction("VM.list");
}
},
'groupquotas': {
@ -278,7 +256,6 @@ define(function(require) {
function _setup() {
_initialized = true;
$(document).on("click", ".show_vms_tab", function(){
Sunstone.showTab(VMS_TAB_ID);
return false;

37
src/sunstone/public/app/tabs/dashboard-tab/hosts.hbs
View File

@ -15,35 +15,28 @@
{{! -------------------------------------------------------------------------- }}
<div>
<fieldset class="large-font">
<legend>
<ul class="menu simple">
<li>
{{tr "Hosts"}} <span class=" total_hosts"></span>
</li>
<li></li>
<li><span>{{tr "ON"}}</span> <span class=" on_hosts success-color"></span></li>
<li><span>{{tr "OFF"}}</span> <span class=" off_hosts"></span></li>
<li><span>{{tr "ERROR"}}</span> <span class=" error_hosts alert-color"></span></li>
<li></li>
<li>
<button class="button radius tiny show_hosts_tab"> <i class="fa fa-lg fa-list fa-fw"></i></button>
<button class="button success radius tiny show_create_host"> <i class="fa fa-lg fa-plus fa-fw"></i></button>
</li>
</ul>
</legend>
<fieldset class="large-font dashboard-fieldset">
<div class="row small-12 medium-12 columns">
<div class="small-6 medium-8 columns dashboard-div-titles">
<h5>{{tr "Hosts"}}</h5>
</div>
<div class="small-6 medium-4 columns dashboard-div-buttons">
<button class="button radius tiny show_hosts_tab"> <i class="fa fa-lg fa-list fa-fw"></i></button>
<button class="button success radius tiny show_create_host"> <i class="fa fa-lg fa-plus fa-fw"></i></button>
</div>
</div>
<div class="row">
<input style="display:none;" value="vm" id="acct_group_by"/>
<div class="small-12 medium-3 columns">
<div class="row"></div>
<div class="small-12 medium-6 columns">
<div id="dashboard_host_allocated_cpu"></div>
</div>
<div class="small-12 medium-3 columns">
<div class="small-12 medium-6 columns">
<div id="dashboard_host_allocated_mem"></div>
</div>
<div class="small-12 medium-3 columns">
<div class="small-12 medium-6 columns">
<div id="dashboard_host_real_cpu"></div>
</div>
<div class="small-12 medium-3 columns">
<div class="small-12 medium-6 columns">
<div id="dashboard_host_real_mem"></div>
</div>
</div>

14
src/sunstone/public/app/tabs/dashboard-tab/html.hbs
View File

@ -15,6 +15,13 @@
{{! -------------------------------------------------------------------------- }}
<div>
<div id="two_per_row">
{{#each twoPerRow}}
<div class="small-12 medium-6 columns">
{{{this}}}
</div>
{{/each}}
</div>
<div id="one_per_row">
{{#each onePerRow}}
<div class="small-12 large-12 columns">
@ -29,13 +36,6 @@
</div>
{{/each}}
</div>
<div id="two_per_row">
{{#each twoPerRow}}
<div class="small-12 medium-6 columns">
{{{this}}}
</div>
{{/each}}
</div>
<div id="one_footer">
{{#each oneFooter}}
<div class="small-12 large-12 columns">

35
src/sunstone/public/app/tabs/dashboard-tab/network.hbs
View File

@ -14,20 +14,25 @@
{{! limitations under the License. }}
{{! -------------------------------------------------------------------------- }}
<div>
<fieldset class="large-font">
<legend>
<ul class="menu simple">
<li>
{{tr "Virtual Networks"}} <span class=" total_vnets"></span>
</li>
<li></li>
<li><span>{{tr "USED IPs"}}</span> <span class="addresses_vnets"></span></li>
<li></li>
<li>
<button class="button radius tiny show_vnets_tab"> <i class="fa fa-lg fa-list fa-fw"></i></button>
<button class="button success radius tiny show_create_vnet"> <i class="fa fa-lg fa-plus fa-fw"></i></button>
</li>
</ul>
</legend>
<fieldset class="large-font dashboard-fieldset">
<div class="row small-12 medium-12 columns">
<div class="small-6 medium-8 columns dashboard-div-titles">
<h5>{{tr "Virtual Networks"}}</h5>
</div>
<div class="small-6 medium-4 columns dashboard-div-buttons">
<button class="button radius tiny show_vnets_tab"> <i class="fa fa-lg fa-list fa-fw"></i></button>
<button class="button success radius tiny show_create_vnet"> <i class="fa fa-lg fa-plus fa-fw"></i></button>
</div>
</div>
<div class="row">
<div class="card small-12 medium-6 columns">
<h3 class="total_vnets fadeinout number-title">0</h3>
<span class="small-12 medium-12 columns label-card">{{tr "VNETS"}}</span>
</div>
<div class="card small-12 medium-6 columns">
<h3 class="addresses_vnets fadeinout number-title">0</h3>
<span class="small-12 medium-12 columns label-card">{{tr "USED IPs"}}</span>
</div>
</div>
</fieldset>
</div>

35
src/sunstone/public/app/tabs/dashboard-tab/storage.hbs
View File

@ -14,20 +14,25 @@
{{! limitations under the License. }}
{{! -------------------------------------------------------------------------- }}
<div>
<fieldset class="large-font">
<legend>
<ul class="menu simple">
<li>
{{tr "Images"}} <span class=" total_images"></span>
</li>
<li></li>
<li><span>{{tr "USED"}}</span> <span class="size_images"></span></li>
<li></li>
<li>
<button class="button radius tiny show_images_tab"> <i class="fa fa-lg fa-list fa-fw"></i></button>
<button class="button success radius tiny show_create_image"> <i class="fa fa-lg fa-plus fa-fw"></i></button>
</li>
</ul>
</legend>
<fieldset class="large-font dashboard-fieldset">
<div class="row small-12 medium-12 columns">
<div class="small-6 medium-8 columns dashboard-div-titles">
<h5>{{tr "Images"}}</h5>
</div>
<div class="small-6 medium-4 columns dashboard-div-buttons">
<button class="button radius tiny show_images_tab"> <i class="fa fa-lg fa-list fa-fw"></i></button>
<button class="button success radius tiny show_create_image"> <i class="fa fa-lg fa-plus fa-fw"></i></button>
</div>
</div>
<div class="row">
<div class="card small-12 medium-6 columns">
<h3 class="total_images fadeinout number-title">0</h3>
<span class="small-12 medium-12 columns label-card">{{tr "IMAGES"}}</span>
</div>
<div class="card small-12 medium-6 columns">
<h3 class="size_images fadeinout number-title">0</h3>
<span class="small-12 medium-12 columns label-card">{{tr "USED"}}</span>
</div>
</div>
</fieldset>
</div>

46
src/sunstone/public/app/tabs/dashboard-tab/users.hbs
View File

@ -15,38 +15,24 @@
{{! -------------------------------------------------------------------------- }}
<div>
<fieldset class="large-font">
<legend>
<ul class="menu simple">
<li>
{{tr "Users"}} <span class=" total_users"></span>
</li>
<li></li>
<li>
<button class="button radius tiny show_users_tab"> <i class="fa fa-lg fa-list fa-fw"></i></button>
<button class="button success radius tiny show_create_user"> <i class="fa fa-lg fa-plus fa-fw"></i></button>
</li>
</ul>
</legend>
<div class="row" id="dashboard_user_accounting">
<input style="display:none;" value="user" id="acct_group_by"/>
<div class="small-12 medium-4 columns">
<span>
{{tr "CPU hours"}}
</span>
<div class="large-12 columns centered graph text-center" id="acct_cpu_graph">{{> ./empty-graph}}</div>
<fieldset class="large-font dashboard-fieldset">
<div class="row small-12 medium-12 columns">
<div class="small-6 medium-8 columns dashboard-div-titles">
<h5>{{tr "System"}}</h5>
</div>
<div class="small-12 medium-4 columns">
<span>
{{tr "Memory GB hours"}}
</span>
<div class="large-12 columns centered graph text-center" id="acct_mem_graph">{{> ./empty-graph}}</div>
<div class="small-6 medium-4 columns dashboard-div-buttons">
<button class="button radius tiny show_usess_tab"> <i class="fa fa-lg fa-list fa-fw"></i></button>
<button class="button success radius tiny show_create_user"> <i class="fa fa-lg fa-plus fa-fw"></i></button>
</div>
<div class="small-12 medium-4 columns">
<span>
{{tr "Disk MB hours"}}
</span>
<div class="large-12 columns centered graph text-center" id="acct_disk_graph">{{> ./empty-graph}}</div>
</div>
<div class="row">
<div class="card small-12 medium-6 columns">
<h3 class="total_users fadeinout number-title">0</h3>
<span class="small-12 medium-12 columns label-card">{{tr "USERS"}}</span>
</div>
<div class="card small-12 medium-6 columns">
<h3 class="total_groups fadeinout number-title">0</h3>
<span class="small-12 medium-12 columns label-card">{{tr "GROUPS"}}</span>
</div>
</div>
</fieldset>

52
src/sunstone/public/app/tabs/dashboard-tab/vms.hbs
View File

@ -15,44 +15,30 @@
{{! -------------------------------------------------------------------------- }}
<div>
<fieldset class="large-font">
<legend>
<ul class="menu simple">
<li>
{{tr "VMs"}} <span class=" total_vms"></span>
</li>
<li></li>
<li><span>{{tr "ACTIVE"}}</span> <span class=" active_vms success-color"></span></li>
<li><span>{{tr "PENDING"}}</span> <span class=" pending_vms"></span></li>
<li><span>{{tr "FAILED"}}</span> <span class=" failed_vms alert-color"></span></li>
<li></li>
<li>
<button class="button radius tiny show_vms_tab"> <i class="fa fa-lg fa-list fa-fw"></i></button>
<fieldset class="large-font dashboard-fieldset">
<div class="row small-12 medium-12 columns">
<div class="small-6 medium-8 columns dashboard-div-titles">
<h5>{{tr "Virtual Machines"}}</h5>
</div>
<div class="small-6 medium-4 columns dashboard-div-buttons">
<button class="button radius tiny show_vms_tab"> <i class="fa fa-lg fa-list fa-fw"></i></button>
{{#isTabActionEnabled "vms-tab" "VM.create_dialog"}}
<button class="button success radius tiny show_create_vm"> <i class="fa fa-lg fa-plus fa-fw"></i></button>
{{/isTabActionEnabled}}
</li>
</ul>
</legend>
<div class="row" id="dashboard_vm_accounting">
<input style="display:none;" value="vm" id="acct_group_by"/>
<div class="small-12 medium-4 columns">
<span>
{{tr "CPU hours"}}
</span>
<div class="large-12 columns centered graph text-center" id="acct_cpu_graph" style="height: 100px;">{{> ./empty-graph}}</div>
</div>
<div class="small-12 medium-4 columns">
<span>
{{tr "Memory GB hours"}}
</span>
<div class="large-12 columns centered graph text-center" id="acct_mem_graph" style="height: 100px;">{{> ./empty-graph}}</div>
</div>
<div class="row">
<div class="card small-12 medium-4 columns">
<h3 class="active_vms fadeinout success-color number-title">0</h3>
<span class="small-12 medium-12 columns label-card">{{tr "ACTIVE"}}</span>
</div>
<div class="small-12 medium-4 columns">
<span>
{{tr "Disk MB hours"}}
</span>
<div class="large-12 columns centered graph text-center" id="acct_disk_graph" style="height: 100px;">{{> ./empty-graph}}</div>
<div class="card small-12 medium-4 columns">
<h3 class="pending_vms fadeinout number-title">0</h3>
<span class="small-12 medium-12 columns label-card">{{tr "PENDING"}}</span>
</div>
<div class="card small-12 medium-4 columns">
<h3 class="failed_vms fadeinout alert-color number-title">0</h3>
<span class="small-12 medium-12 columns label-card">{{tr "FAILED"}}</span>
</div>
</div>
</fieldset>

4
src/sunstone/public/app/tabs/groups-tab/datatable.js
View File

@ -25,6 +25,7 @@ define(function(require) {
var QuotaDefaults = require('utils/quotas/quota-defaults');
var QuotaWidgets = require('utils/quotas/quota-widgets');
var LabelsUtils = require('utils/labels/utils');
var DashboardUtils = require('utils/dashboard');
/*
CONSTANTS
@ -157,6 +158,7 @@ define(function(require) {
}
function _postUpdateView() {
$(".total_groups").text(this.totalGroups);
$(".total_groups").removeClass("fadeinout");
DashboardUtils.counterAnimation(".total_groups", this.totalGroups);
}
});

26
src/sunstone/public/app/tabs/hosts-tab/datatable.js
View File

@ -222,9 +222,6 @@ define(function(require) {
} else {
info_str = "- / -";
}
//$("#dash_host_allocated_cpu").html(usageBarHtml(allocated_cpu, max_cpu, info_str, true));
$("#dashboard_host_allocated_cpu").html(quotaDashboard(
"dashboard_host_allocated_cpu",
Locale.tr("Allocated CPU"),
@ -232,6 +229,10 @@ define(function(require) {
"1rem",
{"percentage": ratio_allocated_cpu, "str": info_str})
);
var percentage = ratio_allocated_cpu > 100 ? 100 : ratio_allocated_cpu;
$("#dashboard_host_allocated_cpu_meter").animate({
value: percentage,
}, 2000, "swing");
var ratio_real_cpu = 0;
if (this.maxCPU > 0) {
@ -240,7 +241,6 @@ define(function(require) {
} else {
info_str = "- / -";
}
$("#dashboard_host_real_cpu").html(quotaDashboard(
"dashboard_host_real_cpu",
Locale.tr("Real CPU"),
@ -248,6 +248,10 @@ define(function(require) {
"1rem",
{"percentage": ratio_real_cpu, "str": info_str})
);
var percentage = ratio_real_cpu > 100 ? 100 : ratio_real_cpu;
$("#dashboard_host_real_cpu_meter").animate({
value: percentage,
}, 2000, "swing");
var ratio_allocated_mem = 0;
if (this.maxMemory > 0) {
@ -256,7 +260,6 @@ define(function(require) {
} else {
info_str = Humanize.size(this.allocatedMemory) + " / -";
}
$("#dashboard_host_allocated_mem").html(quotaDashboard(
"dashboard_host_allocated_mem",
Locale.tr("Allocated Memory"),
@ -264,6 +267,10 @@ define(function(require) {
"1rem",
{"percentage": ratio_allocated_mem, "str": info_str})
);
var percentage = ratio_allocated_mem > 100 ? 100 : ratio_allocated_mem;
$("#dashboard_host_allocated_mem_meter").animate({
value: percentage,
}, 2000, "swing");
var ratio_real_mem = 0;
if (this.maxMemory > 0) {
@ -272,7 +279,6 @@ define(function(require) {
} else {
info_str = Humanize.size(this.realMemory) + " / -";
}
$("#dashboard_host_real_mem").html(quotaDashboard(
"dashboard_host_real_mem",
Locale.tr("Real Memory"),
@ -280,12 +286,14 @@ define(function(require) {
"1rem",
{"percentage": ratio_real_mem, "str": info_str})
);
var percentage = ratio_real_mem > 100 ? 100 : ratio_real_mem;
$("#dashboard_host_real_mem_meter").animate({
value: percentage,
}, 2000, "swing");
}
function quotaDashboard(html_tag, legend, font_large_size, font_small_size, quota) {
var percentage = quota.percentage > 100 ? 100 : quota.percentage;
return "<div class=\"row\">" +
"<div class=\"large-12 columns\">" +
"<span>" + legend + "</span>" +
@ -293,7 +301,7 @@ define(function(require) {
"</div>" +
"<div class=\"row\">" +
"<div class=\"large-12 columns\">" +
" <meter id=\"" + html_tag + "_meter\" min=\"0\" low=\"33\" high=\"66\" optimum=\"0\" max=\"100\" value=\"" + percentage + "\"></meter>" +
" <meter id=\"" + html_tag + "_meter\" min=\"0\" low=\"33\" high=\"66\" optimum=\"0\" max=\"100\" value=\"0\"></meter>" +
"</div>" +
"</div>" +
"<div class=\"row\">" +

10
src/sunstone/public/app/tabs/images-tab/datatable.js
View File

@ -23,6 +23,7 @@ define(function(require) {
var Locale = require('utils/locale');
var Humanize = require('utils/humanize');
var DashboardUtils = require('utils/dashboard');
var OpenNebulaImage = require('opennebula/image');
/*
@ -83,9 +84,12 @@ define(function(require) {
}
function _postUpdateView() {
var size = Humanize.sizeFromMB(this.sizeImages);
var size = Humanize.sizeFromMBArray(this.sizeImages);
$(".total_images").text(this.totalImages);
$(".size_images").text(size);
$(".total_images").removeClass("fadeinout");
DashboardUtils.counterAnimation(".total_images", this.totalImages);
$(".size_images").removeClass("fadeinout");
DashboardUtils.counterAnimationDecimal(".size_images", size[0], size[1]);
}
});

23
src/sunstone/public/app/tabs/provision-tab.js
View File

@ -30,7 +30,6 @@ define(function(require) {
var Showback = require('utils/showback');
var Humanize = require('utils/humanize');
var QuotaLimits = require('utils/quotas/quota-limits');
var Graphs = require('utils/graphs');
var RangeSlider = require('utils/range-slider');
var DisksResize = require('utils/disks-resize');
var NicsSection = require('utils/nics-section');
@ -304,7 +303,7 @@ define(function(require) {
if (Config.provision.dashboard.isEnabled("vms")) {
$("#provision_dashboard").append(TemplateDashboardVms());
if(!Config.isFeatureEnabled("cloud_vm_create")){
$('.provision_create_vm_button').hide();
}
@ -324,15 +323,6 @@ define(function(require) {
"userfilter": config["user_id"]
}
var no_table = true;
OpenNebula.VM.accounting({
success: function(req, response){
Accounting.fillAccounting($("#dashboard_vm_accounting"), req, response, no_table);
},
error: Notifier.onError,
data: options
});
OpenNebula.VM.list({
timeout: true,
@ -402,17 +392,6 @@ define(function(require) {
"end_time": end_time
}
var no_table = true;
OpenNebula.VM.accounting({
success: function(req, response){
Accounting.fillAccounting($("#dashboard_group_vm_accounting"), req, response, no_table);
},
error: Notifier.onError,
data: options
});
OpenNebula.VM.list({
timeout: true,
success: function (request, item_list){

10
src/sunstone/public/app/tabs/provision-tab/dashboard/group-quotas.hbs
View File

@ -14,9 +14,12 @@
{{! limitations under the License. }}
{{! -------------------------------------------------------------------------- }}
<fieldset class="large-12 columns dashboard-fieldset">
<div class="row">
<div class="large-12 columns">
<h4>{{tr "Group Quotas"}}</h2>
<div class="large-12 columns dashboard-div-titles">
<div class="small-6 medium-8 columns">
<h5>{{tr "Group Quotas"}}</h5>
</div>
</div>
</div>
<div class="row">
@ -60,4 +63,5 @@
</div>
</div>
</div>
</div>
</div>
</fieldset>

76
src/sunstone/public/app/tabs/provision-tab/dashboard/vms.hbs
View File

@ -13,27 +13,32 @@
{{! See the License for the specific language governing permissions and }}
{{! limitations under the License. }}
{{! -------------------------------------------------------------------------- }}
<div class="row" id="provision_vms_dashboard">
<div class="large-12 columns">
<h4>{{tr "Virtual Machines"}}</h4>
<fieldset class="large-12 columns dashboard-fieldset" id="provision_vms_dashboard">
<div class="row">
<div class="large-12 columns dashboard-div-titles">
<div class="small-6 medium-8 columns">
<h5>{{tr "Virtual Machines"}}</h5>
</div>
</div>
</div>
<div class="row">
<div class="large-3 medium-4 columns text-center">
<div class="row">
<div class="large-6 columns">
<h2>
<h3>
<span id="provision_dashboard_owner"> <i class="fa fa-spinner fa-spin"></i>
</span>
<br>
<small class="subheader">{{tr "Owner"}}</small>
</h2>
</h3>
</div>
<div class="large-6 columns">
<h2>
<h3>
<span id="provision_dashboard_group"> <i class="fa fa-spinner fa-spin"></i>
</span>
<br>
<small class="subheader">{{tr "Group"}}</small>
</h2>
</h3>
</div>
</div>
<div class="row">
@ -47,78 +52,39 @@
<div class="large-9 medium-8 columns text-center">
<div class="large-10 medium-12 large-centered columns">
<div class="large-3 medium-3 small-6 columns">
<h4>
<h3>
<span id="provision_dashboard_running">
<i class="fa fa-spinner fa-spin"></i>
</span><br>
<small class="subheader">{{tr "RUNNING"}}</small>
</h4>
</h3>
</div>
<div class="large-3 medium-3 small-6 columns ">
<h4>
<h3>
<span id="provision_dashboard_deploying" >
<i class="fa fa-spinner fa-spin"></i>
</span><br>
<small class="subheader">{{tr "DEPLOYING"}}</small>
</h4>
</h3>
</div>
<div class="large-3 medium-3 small-6 columns">
<h4>
<h3>
<span id="provision_dashboard_off">
<i class="fa fa-spinner fa-spin"></i>
</span><br>
<small class="subheader">{{tr "OFF"}}</small>
</h4>
</h3>
</div>
<div class="large-3 medium-3 small-6 columns ">
<h4>
<h3>
<span id="provision_dashboard_error">
<i class="fa fa-spinner fa-spin"></i>
</span><br>
<small class="subheader">{{tr "ERROR"}}</small>
</h4>
</h3>
</div>
<br>
</div>
<div class="large-12 columns" id="dashboard_vm_accounting">
<div class="large-4 medium-12 columns text-center">
<input style="display:none;" value="vm" id="acct_group_by"/>
<div class="row">
<div class="large-12 columns graph_legend">
<span class="subheader">
<span>{{tr "CPU hours"}}</span>
</span>
</div>
<div class="large-12 columns">
<div class="large-12 columns centered graph" id="acct_cpu_graph" style="height: 100px;">{{> ./empty-graphs}}</div>
</div>
</div>
</div>
<div class="large-4 medium-12 columns text-center">
<div class="row">
<div class="large-12 columns graph_legend">
<span class="subheader">
<span>{{tr "Memory GB hours"}}</span>
</span>
</div>
<div class="large-12 columns">
<div class="large-12 columns centered graph" id="acct_mem_graph" style="height: 100px;">{{> ./empty-graphs}}</div>
</div>
</div>
</div>
<div class="large-4 medium-12 columns text-center">
<div class="row">
<div class="large-12 columns graph_legend">
<span class="subheader">
<span>{{tr "Disk MB hours"}}</span>
</span>
</div>
<div class="large-12 columns">
<div class="large-12 columns centered graph" id="acct_disk_graph" style="height: 100px;">{{> ./empty-graphs}}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</fieldset>

4
src/sunstone/public/app/tabs/users-tab/datatable.js
View File

@ -27,6 +27,7 @@ define(function(require) {
var TemplateUtils = require('utils/template-utils');
var LabelsUtils = require('utils/labels/utils');
var SearchDropdown = require('hbs!./datatable/search');
var DashboardUtils = require('utils/dashboard');
/*
CONSTANTS
@ -173,6 +174,7 @@ define(function(require) {
}
function _postUpdateView() {
$(".total_users").text(this.totalUsers);
$(".total_users").removeClass("fadeinout");
DashboardUtils.counterAnimation(".total_users", this.totalUsers);
}
});

17
src/sunstone/public/app/tabs/vms-tab/datatable.js
View File

@ -29,6 +29,7 @@ define(function(require) {
var Vnc = require('utils/vnc');
var Spice = require('utils/spice');
var Notifier = require('utils/notifier');
var DashboardUtils = require('utils/dashboard');
var SearchDropdown = require('hbs!./datatable/search');
/*
@ -150,9 +151,17 @@ define(function(require) {
function _postUpdateView() {
$(".total_vms").text(this.totalVms);
$(".active_vms").text(this.activeVms);
$(".pending_vms").text(this.pendingVms);
$(".failed_vms").text(this.failedVms);
DashboardUtils.counterAnimation(".total_vms", this.totalVms);
$(".active_vms").removeClass("fadeinout");
DashboardUtils.counterAnimation(".active_vms", this.activeVms);
$(".pending_vms").removeClass("fadeinout");
DashboardUtils.counterAnimation(".pending_vms", this.pendingVms);
$(".failed_vms").removeClass("fadeinout");
DashboardUtils.counterAnimation(".failed_vms", this.failedVms);
$(".off_vms").text(this.offVms);
}
@ -206,4 +215,6 @@ define(function(require) {
});
}
});

7
src/sunstone/public/app/tabs/vnets-tab/datatable.js
View File

@ -27,6 +27,7 @@ define(function(require) {
var LabelsUtils = require('utils/labels/utils');
var SearchDropdown = require('hbs!./datatable/search');
var OpenNebulaNetwork = require('opennebula/network');
var DashboardUtils = require('utils/dashboard');
/*
CONSTANTS
@ -166,7 +167,9 @@ define(function(require) {
}
function _postUpdateView() {
$(".total_vnets").text(this.totalVNets);
$(".addresses_vnets").text(this.usedLeases);
$(".total_vnets").removeClass("fadeinout");
DashboardUtils.counterAnimation(".total_vnets", this.totalVNets);
$(".addresses_vnets").removeClass("fadeinout");
DashboardUtils.counterAnimation(".addresses_vnets", this.usedLeases);
}
});

57
src/sunstone/public/app/utils/dashboard.js Normal file
View File

@ -0,0 +1,57 @@
/* -------------------------------------------------------------------------- */
/* Copyright 2002-2017, OpenNebula Project, OpenNebula Systems */
/* */
/* Licensed under the Apache License, Version 2.0 (the "License"); you may */
/* not use this file except in compliance with the License. You may obtain */
/* a copy of the License at */
/* */
/* http://www.apache.org/licenses/LICENSE-2.0 */
/* */
/* Unless required by applicable law or agreed to in writing, software */
/* distributed under the License is distributed on an "AS IS" BASIS, */
/* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. */
/* See the License for the specific language governing permissions and */
/* limitations under the License. */
/* -------------------------------------------------------------------------- */
define(function(require) {
function _counterAnimation(domClass, value, extra) {
if(!extra){
extra = "";
}
$(domClass).each(function () {
$(this).prop('Counter', 0).animate({
Counter: value
}, {
duration: 1500,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now) + " " + extra);
}
});
});
}
function _counterAnimationDecimal(domClass, value, extra) {
if(!extra){
extra = "";
}
$(domClass).each(function () {
$(this).prop('Counter', 0).animate({
Counter: value
}, {
duration: 1500,
easing: 'swing',
step: function (now) {
$(this).text(Math.round(now*10)/10 + " " + extra);
}
});
});
}
return {
"counterAnimation": _counterAnimation,
"counterAnimationDecimal": _counterAnimationDecimal
};
});

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

@ -27,6 +27,7 @@ define(function(require) {
'sizeFromB': _sizeFromB,
'sizeFromKB': _sizeFromKB,
'sizeFromMB': _sizeFromMB,
'sizeFromMBArray': _sizeFromMBArray,
'sizeToMB': _sizeToMB,
'prettyDuration': _prettyDuration,
'prettyTime': _prettyTime,
@ -97,6 +98,26 @@ define(function(require) {
return st;
}
function _sizeFromMBArray(value) {
if (typeof(value) === "undefined") {
value = 0;
}
var binarySufix = ["MB", "GB", "TB"];
var i = 0;
while (value >= 1024 && i < 2) {
value = value / 1024;
i++;
}
value = Math.round(value * 10) / 10;
if (value - Math.round(value) == 0) {
value = Math.round(value);
}
var st = [value, binarySufix[i]];
return st;
}
function _sizeToMB(value){
var split = value.split("B");
var factor = split[0].slice(-1);

36
src/sunstone/public/css/custom.css
View File

@ -143,4 +143,40 @@ table thead th{
table .markrow,table .markrowchecked{
background-color:#f4f4f4;
font-weight:normal;
}
.fadeinout{
opacity: 1;
animation: fade 1s ease-in-out infinite;
}
@keyframes fade {
0%,100% { opacity: 1 }
50% { opacity: 0 }
}
.card{
background-color: #ffffff;
text-align: center;
border: 3px solid #f8f8f8;
}
meter{
height: .9rem !important;
}
.dashboard-div-titles{
text-align: left;
margin-top: -20px;
}
.dashboard-div-buttons{
text-align: right;
}
.number-title{
margin-top: -15px;
}
.label-card{
margin-top: -25px;
}
.dashboard-fieldset{
background-color: #f8f8f8;
border: 1px solid #eaeaea;
}