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

Feature #992: Add dashboard to Self-Service

Browse Source 
Preliminary version of dashboard added. Added and improved icons of the UI.
This commit is contained in:
Hector Sanjuan 2011-12-29 19:40:30 +01:00
parent 91732de746
commit b5ccbb2c8f
13 changed files with 96 additions and 228 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/cloud/occi/lib/ui/public/css/application.css
View File

@ -572,12 +572,6 @@ ul.action_list li a:hover{
background: #EEE;
}
.dashboard_img {
padding-left:10px;
border:0;
height:40px;
}
.dashboard_p {
color: #353735;
text-align:justify;
@ -585,4 +579,11 @@ ul.action_list li a:hover{
.dashboard_p p{
padding-top:5px;
}
}
.dashboard_p img {
padding-left:10px;
padding-right: 10px;
border:0;
}

BIN
src/cloud/occi/lib/ui/public/images/network_icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
src/cloud/occi/lib/ui/public/images/one-compute.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.8 KiB

After

Width:  |  Height:  |  Size: 7.9 KiB

BIN
src/cloud/occi/lib/ui/public/images/one-network.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.2 KiB

After

Width:  |  Height:  |  Size: 7.3 KiB

BIN
src/cloud/occi/lib/ui/public/images/one-storage.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.2 KiB

After

Width:  |  Height:  |  Size: 8.4 KiB

BIN
src/cloud/occi/lib/ui/public/images/opennebula-selfservice-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.5 KiB

BIN
src/cloud/occi/lib/ui/public/images/server_icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.7 KiB

BIN
src/cloud/occi/lib/ui/public/images/storage_icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

4
src/cloud/occi/lib/ui/public/js/plugins/compute.js
View File

@ -101,7 +101,7 @@ var create_vm_tmpl ='<form id="create_vm_form" action="">\
</form>';
var vm_dashboard = '<div class="dashboard_p">\
<img class="dashboard_img" src="images/one-compute.png" alt="one-compute" />\
<img src="images/one-compute.png" alt="one-compute" />\
<p>'+tr("This is a list of your current compute resources. Virtual Machines use previously defined images and networks. You can easily create a new compute element by cliking \"new\" and filling-in an easy wizard.")+'</p>\
<p>'+tr("You can also manage compute resources and perform actions such as stop, resume, shutdown or cancel.")+'</p>\
<p>'+tr("Additionally, you can take a \"snapshot\" of the storage attached to these resources. They will be saved as new resources, visible from the Storage view and re-usable.")+'</p>\
@ -460,7 +460,7 @@ function updateVMachinesView(request, vmachine_list){
});
updateView(vmachine_list_array,dataTable_vMachines);
//updateDashboard("vms",vmachine_list);
updateDashboard("vms",vmachine_list);
}

294
src/cloud/occi/lib/ui/public/js/plugins/dashboard.js
View File

@ -14,81 +14,41 @@
/* limitations under the License. */
/* -------------------------------------------------------------------------- */
/** HISTORY_LENGTH currently ignored on server, but it doesn't harm to have it**/
var HISTORY_LENGTH=40;
var GRAPH_AUTOREFRESH_INTERVAL=60000; //60 secs
var graph1 = {
title : "graph1",
monitor_resources : "cpu_usage,used_cpu,max_cpu",
history_length : HISTORY_LENGTH
};
var graph2 = {
title : "graph2",
monitor_resources : "mem_usage,used_mem,max_mem",
history_length : HISTORY_LENGTH
};
var graph3 = {
title : "graph3",
monitor_resources : "total,active,error",
history_length : HISTORY_LENGTH
};
var graph4 = {
title : "graph4",
monitor_resources : "net_tx,net_rx",
history_length : HISTORY_LENGTH
};
var dashboard_tab_content =
'<table id="dashboard_table">\
<tr>\
<td style="width:40%">\
<td style="width:50%">\
<table id="information_table" style="width:100%">\
<tr>\
<td>\
<div class="panel">\
<h3>' + tr("Summary of resources") + '</h3>\
<h3>' + tr("Welcome to OpenNebula Self-Service") + '</h3>\
<div class="panel_info dashboard_p">\
<p><img style="float:left;width:100px;" src="images/opennebula-selfservice-icon.png" />'+tr("OpenNebula Self-Service is a simplified user interface to manage OpenNebula compute, storage and network resources. It is focused on easiness and usability and features a limited set of operations directed towards end-users.")+'</p>\
<p>'+tr("Additionally, OpenNebula Self-Service allows easy customization of the interface (e.g. this text) and brings multi-language support.")+'</p>\
<p>'+tr("Have a cloudy experience!")+'</p>\
</div>\
</div>\
</td>\
</tr>\
<tr>\
<td>\
<div class="panel">\
<h3>' + tr("Current resources") + '</h3>\
<div class="panel_info">\
\
<table class="info_table">\
<tr>\
<td class="key_td">' + tr("Hosts (total/active)") + '</td>\
<td class="value_td"><span id="total_hosts"></span><span id="active_hosts" class="green"></span></td>\
<td class="key_td">'+tr("Compute")+'</td>\
<td class="value_td"><span id="total_vms"></span></td>\
</tr>\
<tr>\
<td class="key_td">' + tr("Groups") + '</td>\
<td class="value_td"><span id="total_groups"></span></td>\
<td class="key_td">' + tr("Network") + '</td>\
<td class="value_td"><span id="total_vnets"></span></td>\
</tr>\
<tr>\
<td class="key_td">' + tr("VM Templates (total/public)") + '</td>\
<td class="value_td"><span id="total_templates"></span><span id="public_templates"></span></td>\
</tr>\
<tr>\
<td class="key_td">' +
tr("VM Instances")+ ' (' +
tr("total") + '/<span class="green">' +
tr("running") + '</span>/<span class="red">' +
tr("failed") + '</span>)</td>\
<td class="value_td"><span id="total_vms"></span><span id="running_vms" class="green"></span><span id="failed_vms" class="red"></span></td>\
</tr>\
<tr>\
<td class="key_td">' + tr("Virtual Networks (total/public)") + '</td>\
<td class="value_td"><span id="total_vnets"></span><span id="public_vnets"></span></td>\
</tr>\
<tr>\
<td class="key_td">' + tr("Images (total/public)") + '</td>\
<td class="value_td"><span id="total_images"></span><span id="public_images"></span></td>\
</tr>\
<tr>\
<td class="key_td">' + tr("Users")+'</td>\
<td class="value_td"><span id="total_users"></span></td>\
</tr>\
<tr>\
<td class="key_td">' + tr("ACL Rules") + '</td>\
<td class="value_td"><span id="total_acls"></span></td>\
<td class="key_td">' + tr("Storage") + '</td>\
<td class="value_td"><span id="total_images"></span></td>\
</tr>\
</table>\
\
@ -99,45 +59,51 @@ var dashboard_tab_content =
<tr>\
<td>\
<div class="panel">\
<h3>' + tr("Quickstart") + '</h3>\
<form id="quickstart_form"><fieldset>\
<table style="width:100%;"><tr style="vertical-align:middle;"><td style="width:70%">\
<label style="font-weight:bold;width:40px;height:10em;">' + tr("New")+': </label>\
<input type="radio" name="quickstart" value="Host.create_dialog">' + tr("Host") + '</input><br />\
<input type="radio" name="quickstart" value="VM.create_dialog">' + tr("VM Instance") + '</input><br />\
<input type="radio" name="quickstart" value="Template.create_dialog">' + tr("VM Template") + '</input><br />\
<input type="radio" name="quickstart" value="Network.create_dialog">' + tr("Virtual Network") + '</input><br />\
<input type="radio" name="quickstart" value="Image.create_dialog">' + tr("Image") + '</input><br />\
<input type="radio" name="quickstart" value="User.create_dialog">' + tr("User") + '</input><br />\
<input type="radio" name="quickstart" value="Group.create_dialog">' + tr("Group") + '</input><br />\
<input type="radio" name="quickstart" value="Acl.create_dialog">' + tr("Acl") + '</input><br />\
</td></tr></table>\
<h3>' + tr("Useful links") + '</h3>\
<div class="panel_info dashboard_p">\
<ul><li><a href="http://opennebula.org/documentation:documentation" target="_blank">Documentation</a></li>\
<li><a href="http://opennebula.org/support:support" target="_blank">Support</a></li>\
<li><a href="http://opennebula.org/community:community" target="_blank">Community</a></li></ul>\
</div>\
</div>\
</td>\
</tr>\
</table>\
</td>\
<td style="width:60%">\
<table id="historical_table" style="width:100%">\
<td style="width:50%">\
<table id="hosts" style="width:100%">\
<tr>\
<td>\
<div class="panel">\
<h3>' + tr("Historical monitoring information") + '</h3>\
<div class="panel_info">\
<table class="info_table">\
<tr><td class="key_td graph_td">' + tr("Hosts CPU") + '</td>\
<td class="graph_td" id="graph1_legend"></td></tr>\
<tr><td id="graph1" colspan="2">'+spinner+'</td></tr>\
<tr><td class="key_td graph_td">' + tr("Hosts memory") + '</td>\
<td class="graph_td" id="graph2_legend"></td></tr>\
<tr><td id="graph2" colspan="2">'+spinner+'</td></tr>\
<tr><td class="key_td graph_td">' + tr("Total VM count") + '</td>\
<td class="graph_td" id="graph3_legend"></td></tr>\
<tr><td id="graph3" colspan="2">'+spinner+'</td></tr>\
<tr><td class="key_td graph_td">' + tr("VM Network stats") + '</td>\
<td class="graph_td" id="graph4_legend"></td></tr>\
<tr><td id="graph4" colspan="2">'+spinner+'</td></tr>\
</table>\
<h3>' + tr("Compute") + '</h3>\
<div class="panel_info dashboard_p">\
<p><img style="float:right;width:100px;" src="images/server_icon.png" />'+tr("Compute resources are Virtual Machines attached to storage and network resources. OpenNebula Self-Service allows you to easily create, remove and manage them, including the possibility of pausing a Virtual Machine or taking a snapshot of one of their disks.")+'</p>\
<p><span class="ui-icon ui-icon-arrowreturnthick-1-e" style="display:inline-block;vertical-align:middle;"/><a class="action_link" href="#vms_tab" action="VM.create_dialog">Create new compute resource</a><br />\
<span class="ui-icon ui-icon-arrowreturnthick-1-e" style="display:inline-block;vertical-align:middle;"/><a class="tab_link" href="#vms_tab">See more</a></p>\
</div>\
</div>\
</td>\
</tr>\
<tr>\
<td>\
<div class="panel">\
<h3>' + tr("Storage") + '</h3>\
<div class="panel_info dashboard_p">\
<p><img style="float:right;width:100px;" src="images/storage_icon.png" />'+tr("Storage pool is formed by several images. These images can contain from full operating systems to be used as base for compute resources, to simple data. OpenNebula Self-Service offers you the possibility to create or upload your own images.")+'</p>\
<p><span class="ui-icon ui-icon-arrowreturnthick-1-e" style="display:inline-block;vertical-align:middle;"/><a class="action_link" href="#images_tab" action="Image.create_dialog">Create new storage resource</a><br />\
<span class="ui-icon ui-icon-arrowreturnthick-1-e" style="display:inline-block;vertical-align:middle;"/><a class="tab_link" href="#images_tab">See more</a></p>\
</div>\
</div>\
</td>\
</tr>\
<tr>\
<td>\
<div class="panel">\
<h3>' + tr("Network") + '</h3>\
<div class="panel_info dashboard_p">\
<p><img style="float:right;width:100px;" src="images/network_icon.png" />'+tr("Your compute resources connectivity is performed using pre-defined virtual networks. You can create and manage these networks using OpenNebula Self-Service.")+'</p>\
<p><span class="ui-icon ui-icon-arrowreturnthick-1-e" style="display:inline-block;vertical-align:middle;"/><a class="action_link" href="#vnets_tab" action="Network.create_dialog">Create new network resource</a><br />\
<span class="ui-icon ui-icon-arrowreturnthick-1-e" style="display:inline-block;vertical-align:middle;"/><a class="tab_link" href="#vnets_tab">See more</a><br /></p>\
</div>\
</div>\
</td>\
@ -153,52 +119,6 @@ var dashboard_tab = {
Sunstone.addMainTab('dashboard_tab',dashboard_tab);
function plot_global_graph(data,info){
var context = $('#historical_table',main_tabs_context);
var id = info.title;
var monitoring = data.monitoring;
var serie;
var series = [];
var width = ($(window).width()-129)*48/100;
var mon_count = 0;
var labels_array = info.monitor_resources.split(',');
$('#'+id,context).html('<div id="'+id+'_graph" style="height:70px;width:'+width+'px;margin-bottom:10px;"><div>');
for (var i=0; i<labels_array.length; i++) {
serie = {
label: tr(labels_array[i]),
data: monitoring[labels_array[i]]
};
series.push(serie);
mon_count++;
};
var options = {
legend : {
show : true,
noColumns: mon_count,
container: $('#'+id+'_legend')
},
xaxis : {
tickFormatter: function(val,axis){
return pretty_time_axis(val);
},
},
yaxis : { labelWidth: 20 }
}
switch (id){
case "graph2":
case "graph4":
options["yaxis"]["tickFormatter"] = function(val,axis) {
return humanize_size(val);
}
}
$.plot($('#'+id+'_graph',context),series,options);
}
function quickstart_setup(){
$('#dashboard_table #quickstart_form input',main_tabs_context).click(function(){
@ -206,20 +126,6 @@ function quickstart_setup(){
});
}
function graph_autorefresh(){
setInterval(function(){
refresh_graphs();
},GRAPH_AUTOREFRESH_INTERVAL+someTime());
}
function refresh_graphs(){
Sunstone.runAction("Host.monitor_all", graph1);
Sunstone.runAction("Host.monitor_all", graph2);
Sunstone.runAction("VM.monitor_all", graph3);
Sunstone.runAction("VM.monitor_all", graph4);
}
$(document).ready(function(){
//Dashboard link listener
$("#dashboard_table h3 a",main_tabs_context).live("click", function (){
@ -228,12 +134,30 @@ $(document).ready(function(){
return false;
});
$('.tab_link').click(function(){
var to= $(this).attr('href');
$('.outer-west ul li.topTab a[href="'+to+'"]').trigger("click");
return false;
});
$('.action_link').click(function(){
var to= $(this).attr('href');
$('.outer-west ul li.topTab a[href="'+to+'"]').trigger("click");
var action = $(this).attr('action');
Sunstone.runAction(action);
//var to= $(this).attr('href');
//$('.outer-west ul li.topTab a[href="'+to+'"]').trigger("click");
return false;
});
emptyDashboard();
quickstart_setup();
refresh_graphs();
graph_autorefresh();
$('#li_dashboard_tab a').click(function(){
hideDialog();
});
});
@ -246,75 +170,17 @@ function emptyDashboard(){
function updateDashboard(what,json_info){
var db = $('#dashboard_tab',main_tabs_context);
switch (what){
case "hosts":
var total_hosts=json_info.length;
var active_hosts=0;
$.each(json_info,function(){
if (parseInt(this.HOST.STATE) < 3){
active_hosts++;}
});
$('#total_hosts',db).html(total_hosts+'&nbsp;/&nbsp;');
$('#active_hosts',db).html(active_hosts);
break;
case "groups":
var total_groups=json_info.length;
$('#total_groups',db).html(total_groups);
break;
case "vms":
var total_vms=json_info.length;
var running_vms=0;
failed_vms=0;
$.each(json_info,function(){
vm_state = parseInt(this.VM.STATE);
if (vm_state == 3){
running_vms++;
}
else if (vm_state == 7) {
failed_vms++;
}
});
$('#total_vms',db).html(total_vms+'&nbsp;/&nbsp;');
$('#running_vms',db).html(running_vms+'&nbsp;/&nbsp;');
$('#failed_vms',db).html(failed_vms);
$('#total_vms',db).html(total_vms);
break;
case "vnets":
var public_vnets=0;
var total_vnets=json_info.length;
$.each(json_info,function(){
if (parseInt(this.VNET.PUBLIC)){
public_vnets++;}
});
$('#total_vnets',db).html(total_vnets+'&nbsp;/&nbsp;');
$('#public_vnets',db).html(public_vnets);
break;
case "users":
var total_users=json_info.length;
$('#total_users',db).html(total_users);
$('#total_vnets',db).html(total_vnets);
break;
case "images":
var total_images=json_info.length;
var public_images=0;
$.each(json_info,function(){
if (parseInt(this.IMAGE.PUBLIC)){
public_images++;}
});
$('#total_images',db).html(total_images+'&nbsp;/&nbsp;');
$('#public_images',db).html(public_images);
break;
case "templates":
var total_templates=json_info.length;
var public_templates=0;
$.each(json_info,function(){
if (parseInt(this.VMTEMPLATE.PUBLIC)){
public_templates++;
}
});
$('#total_templates',db).html(total_templates+'&nbsp;/&nbsp;');
$('#public_templates',db).html(public_templates);
break;
case "acls":
var total_acls=json_info.length;
$('#total_acls',db).html(total_acls);
$('#total_images',db).html(total_images);
break;
}
}

4
src/cloud/occi/lib/ui/public/js/plugins/network.js
View File

@ -63,7 +63,7 @@ var create_vn_tmpl =
var vnet_dashboard = '<div class="dashboard_p">\
<img class="dashboard_img" src="images/one-network.png" alt="one-network" />\
<img src="images/one-network.png" alt="one-network" />\
<p>'+tr("In this view you can easily manage OpenNebula Network resources. You can add, remove, publish or unpublish virtual networks.")+'</p>\
<p>'+tr("Compute resources can be attached to these networks at creation time. Virtual machines will be provided with an IP and the correct parameters to ensure connectivity.")+'</p>\
<p>'+tr("There are currently")+' <b><span id="vnet_dashboard_count" /></b> '+tr("networks")+'.</p>\
@ -276,7 +276,7 @@ function updateVNetworksView(request, network_list){
updateView(network_list_array,dataTable_vNetworks);
//dependency with dashboard
//updateDashboard("vnets",network_list);
updateDashboard("vnets",network_list);
}

4
src/cloud/occi/lib/ui/public/js/plugins/storage.js
View File

@ -102,7 +102,7 @@ var create_image_tmpl =
</div>';
var image_dashboard = '<div class="dashboard_p">\
<img class="dashboard_img" src="images/one-storage.png" alt="one-storage" />\
<img src="images/one-storage.png" alt="one-storage" />\
<p>'+tr("The Storage view offers you an overview of your current images. Storage elements are attached to compute resources at creation time. They can also be extracted from running virtual machines by taking an snapshot.")+'</p>\
<p>'+tr("You can add new storages by clicking \"new\". Image files will be uploaded to OpenNebula and set ready to be used.")+'</p>\
<p>'+tr("Additionally, you can run several operations on defined storages, such as defining their persistance. Persistent images can only be used by 1 virtual machine, and the changes made by it have effect on the base image. Non-persistent images are cloned before being used in a Virtual Machine, therefore changes are lost unless a snapshot is taken prior to Virtual Machine shutdown.")+'</p>\
@ -347,7 +347,7 @@ function updateImagesView(request, images_list){
});
updateView(image_list_array,dataTable_images);
//updateDashboard("images",images_list);
updateDashboard("images",images_list);
}
// Callback to update the information panel tabs and pop it up

3
src/cloud/occi/lib/ui/views/index.erb
View File

@ -3,7 +3,7 @@
<head>
<title>OpenNebula Self-Service</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<!-- Vendor Libraries -->
<link rel="stylesheet" type="text/css" href="vendor/dataTables/demo_table_jui.css" />
<link rel="stylesheet" type="text/css" href="vendor/jQueryUI/jquery-ui-1.8.16.custom.css" />
@ -37,6 +37,7 @@
<!--Base plugins-->
<script type="text/javascript" src="js/plugins/dashboard.js"></script>
<script type="text/javascript" src="js/plugins/compute.js"></script>
<script type="text/javascript" src="js/plugins/storage.js"></script>
<script type="text/javascript" src="js/plugins/network.js"></script>