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

Make Sunstone prettier

Browse Source 
* Removed documentation box from dashboards
* Fixed user dashboard graph plotting function
* Show monitoring error in the place where the plot would go, not with a pop-up message
* Improve the margins and position of plots
* Rearrange the position of plugins in the menu
* Reduce the size of labels, increase the size of input fields.
* Remove reset button from update template dialog
* Set extended info tables to 80% width when they're alone in the tab
This commit is contained in:
Hector Sanjuan 2011-07-11 15:54:58 +02:00 committed by Ruben S. Montero
parent 6ca933e7e7
commit f010ce29d7
10 changed files with 80 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/sunstone/etc/sunstone-plugins.yaml
View File

@ -14,16 +14,11 @@
:user:
:group:
oneadmin: true
- plugins/groups-tab.js:
:ALL: false
:user:
:group:
oneadmin: true
- plugins/templates-tab.js:
- plugins/vms-tab.js:
:ALL: true
:user:
:group:
- plugins/vms-tab.js:
- plugins/templates-tab.js:
:ALL: true
:user:
:group:
@ -40,3 +35,8 @@
:user:
:group:
oneadmin: true
- plugins/groups-tab.js:
:ALL: false
:user:
:group:
oneadmin: true

18
src/sunstone/public/css/application.css
View File

@ -170,7 +170,7 @@ fieldset div{
fieldset input,
fieldset textarea{
width:150px;
width:180px;
/*border-top:1px solid #555;
border-left:1px solid #555;
border-bottom:1px solid #ccc;
@ -182,7 +182,7 @@ fieldset textarea{
}
fieldset select{
width:154px;
width:184px;
/*border-top:1px solid #555;
border-left:1px solid #555;
border-bottom:1px solid #ccc;
@ -211,10 +211,10 @@ legend{
label{
float: left;
width:150px;
padding:0 1em;
text-align:left;
}
width:120px;
padding:0 1em;
text-align:left;
}
div.tip {
@ -293,7 +293,8 @@ textarea:focus{
}
.add_button {
margin-left:177px;
margin-left:148px;
width:74px;
}
.remove_button {
@ -359,8 +360,9 @@ tr.even:hover{
margin: 20px;
text-align: left;
display: inline-block;
width:45%;
width:43%;
vertical-align:top;
overflow:hidden;
}
.info_table > thead th,h3 {

48
src/sunstone/public/js/plugins/dashboard-tab.js
View File

@ -19,30 +19,24 @@ var GRAPH_AUTOREFRESH_INTERVAL=60000; //60 secs
var graph1 = {
title : "graph1",
monitor_resources : "total,active,error",
monitor_resources : "cpu_usage,used_cpu,max_cpu",
history_length : HISTORY_LENGTH
};
var graph2 = {
title : "graph2",
monitor_resources : "cpu_usage,used_cpu,max_cpu",
monitor_resources : "mem_usage,used_mem,max_mem",
history_length : HISTORY_LENGTH
};
var graph3 = {
title : "graph3",
monitor_resources : "mem_usage,used_mem,max_mem",
monitor_resources : "total,active,error",
history_length : HISTORY_LENGTH
};
var graph4 = {
title : "graph4",
monitor_resources : "total,active,error",
history_length : HISTORY_LENGTH
};
var graph5 = {
title : "graph5",
monitor_resources : "net_tx,net_rx",
history_length : HISTORY_LENGTH
};
@ -111,18 +105,6 @@ var dashboard_tab_content =
</div>\
</td>\
</tr>\
<tr>\
<td>\
<div class="panel">\
<h3>Sunstone documentation</h3>\
<ul style="list-style-type:none;">\
<li><a href="http://opennebula.org/documentation:rel3.0:sunstone" target="_blank">Sunstone installation and setup</a></li>\
<li>Sunstone plugin guide</li>\
<li>Sunstone plugin reference</li>\
</ul>\
</div>\
</td>\
</tr>\
</table>\
</td>\
<td style="width:60%">\
@ -133,21 +115,18 @@ var dashboard_tab_content =
<h3>Historical monitoring information</h3>\
<div class="panel_info">\
<table class="info_table">\
<tr><td class="key_td graph_td">Total host count</td>\
<tr><td class="key_td graph_td">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">Hosts CPU</td>\
<tr><td class="key_td graph_td">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">Hosts memory</td>\
<tr><td class="key_td graph_td">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">Total VM count</td>\
<tr><td class="key_td graph_td">VM Network stats</td>\
<td class="graph_td" id="graph4_legend"></td></tr>\
<tr><td id="graph4" colspan="2">'+spinner+'</td></tr>\
<tr><td class="key_td graph_td">VM Network stats</td>\
<td class="graph_td" id="graph5_legend"></td></tr>\
<tr><td id="graph5" colspan="2">'+spinner+'</td></tr>\
</table>\
</div>\
</div>\
@ -170,10 +149,10 @@ function plot_global_graph(data,info){
var monitoring = data.monitoring;
var serie;
var series = [];
var width = ($(window).width()-129)*45/100;
var width = ($(window).width()-129)*48/100;
var mon_count = 0;
$('#'+id).html('<div id="'+id+'_graph" style="height:70px;width:'+width+'px"><div>');
$('#'+id).html('<div id="'+id+'_graph" style="height:70px;width:'+width+'px;margin-bottom:10px;"><div>');
for (var label in monitoring) {
serie = {
@ -195,12 +174,12 @@ function plot_global_graph(data,info){
return pretty_time_axis(val);
},
},
yaxis : { labelWidth: 40 }
yaxis : { labelWidth: 20 }
}
switch (id){
case "graph3":
case "graph5":
case "graph2":
case "graph4":
options["yaxis"]["tickFormatter"] = function(val,axis) {
return humanize_size(val);
}
@ -226,9 +205,8 @@ function graph_autorefresh(){
function refresh_graphs(){
Sunstone.runAction("Host.monitor_all", graph1);
Sunstone.runAction("Host.monitor_all", graph2);
Sunstone.runAction("Host.monitor_all", graph3);
Sunstone.runAction("VM.monitor_all", graph3);
Sunstone.runAction("VM.monitor_all", graph4);
Sunstone.runAction("VM.monitor_all", graph5);
}
$(document).ready(function(){

34
src/sunstone/public/js/plugins/dashboard-users-tab.js
View File

@ -90,18 +90,6 @@ var dashboard_tab_content =
</div>\
</td>\
</tr>\
<tr>\
<td>\
<div class="panel">\
<h3>Sunstone documentation</h3>\
<ul style="list-style-type:none;">\
<li><a href="http://opennebula.org/documentation:rel3.0:sunstone" target="_blank">Sunstone installation and setup</a></li>\
<li>Sunstone plugin guide</li>\
<li>Sunstone plugin reference</li>\
</ul>\
</div>\
</td>\
</tr>\
</table>\
</td>\
<td style="width:60%">\
@ -143,35 +131,39 @@ Sunstone.addMainTab('dashboard_tab',dashboard_tab);
function plot_global_graph(data,info){
var id = info.title;
var labels_arr = info.monitor_resources.split(',');
var monitoring = data.monitoring;
var serie;
var series = [];
var width = ($(window).width()-129)*45/100;
var width = ($(window).width()-129)*48/100;
var mon_count = 0;
$('#'+id).html('<div id="'+id+'_graph" style="height:70px;width:'+width+'px"><div>');
$('#'+id).html('<div id="'+id+'_graph" style="height:70px;width:'+width+'px;margin-bottom:10px;"><div>');
for (var i = 0; i< labels_arr.length; i++) {
for (var label in monitoring) {
serie = {
label: labels_arr[i],
data: data[i]
label: label,
data: monitoring[label]
};
series.push(serie);
mon_count++;
};
var options = {
legend : {
show : true,
noColumns: labels_arr.length,
noColumns: mon_count,
container: $('#'+id+'_legend')
},
xaxis : {
mode: "time",
timeformat: "%h:%M"
tickFormatter: function(val,axis){
return pretty_time_axis(val);
},
},
yaxis : { labelWidth: 40 }
}
switch (id){
case "graph3":
case "graph4":
options["yaxis"]["tickFormatter"] = function(val,axis) {
return humanize_size(val);

14
src/sunstone/public/js/plugins/hosts-tab.js
View File

@ -196,7 +196,7 @@ var host_actions = {
plot_graph(response,'#host_monitoring_tab',
'host_monitor_',info);
},
error: onError
error: hostMonitorError
},
"Host.monitor_all" : {
@ -484,7 +484,7 @@ function updateHostInfo(request,host){
var template_tab = {
title : "Host template",
content :
'<table id="host_template_table" class="info_table">\
'<table id="host_template_table" class="info_table" style="width:80%">\
<thead><tr><th colspan="2">Host template</th></tr></thead>'+
prettyPrintJSON(host_info.TEMPLATE)+
'</table>'
@ -561,6 +561,16 @@ function setHostAutorefresh() {
},INTERVAL+someTime());
}
function hostMonitorError(req,error_json){
var message = error_json.error.message;
var info = req.request.data[0].monitor;
var labels = info.monitor_resources;
var id_suffix = labels.replace(/,/g,'_');
var id = '#host_monitor_'+id_suffix;
$('#host_monitoring_tab '+id).html('<div style="padding-left:20px;">'+message+'</div>');
}
//This is executed after the sunstone.js ready() is run.
//Here we can basicly init the host datatable, preload it
//and add specific listeners

4
src/sunstone/public/js/plugins/images-tab.js
View File

@ -518,7 +518,7 @@ function updateImageInfo(request,img){
var info_tab = {
title: "Image information",
content:
'<table id="info_img_table" class="info_table">\
'<table id="info_img_table" class="info_table" style="width:80%;">\
<thead>\
<tr><th colspan="2">Image "'+img_info.NAME+'" information</th></tr>\
</thead>\
@ -567,7 +567,7 @@ function updateImageInfo(request,img){
var template_tab = {
title: "Image template",
content: '<table id="img_template_table" class="info_table">\
content: '<table id="img_template_table" class="info_table" style="width:80%;">\
<thead><tr><th colspan="2">Image template</th></tr></thead>'+
prettyPrintJSON(img_info.TEMPLATE)+
'</table>'

16
src/sunstone/public/js/plugins/templates-tab.js
View File

@ -267,7 +267,7 @@ var create_template_tmpl = '<div id="template_create_tabs">\
<button class="add_remove_button" id="remove_disk_button" value="remove_disk">Remove selected</button>\
<div class="clear"></div>\
<label style="" for="disks_box">Current disks:</label>\
<select id="disks_box" name="disks_box" style="width:150px;height:100px;" multiple>\
<select id="disks_box" name="disks_box" style="height:100px;" multiple>\
</select>\
<div class="clear"></div>\
</div>\
@ -331,7 +331,7 @@ var create_template_tmpl = '<div id="template_create_tabs">\
<button class="add_remove_button" id="remove_nic_button" value="remove_nic">Remove selected</button>\
<div class="clear"></div>\
<label for="nics_box">Current NICs:</label>\
<select id="nics_box" name="nics_box" style="width:150px;height:100px;" multiple>\
<select id="nics_box" name="nics_box" style="height:100px;" multiple>\
</select>\
</div>\
</fieldset>\
@ -366,7 +366,7 @@ var create_template_tmpl = '<div id="template_create_tabs">\
<button class="add_remove_button" id="remove_input_button" value="remove_input" class="kvm_opt">Remove selected</button>\
<div class="clear"></div>\
<label for="inputs_box">Current inputs:</label>\
<select id="inputs_box" name="inputs_box" style="width:150px;height:100px;" multiple>\
<select id="inputs_box" name="inputs_box" style="height:100px;" multiple>\
</select>\
</div>\
</fieldset>\
@ -433,7 +433,7 @@ var create_template_tmpl = '<div id="template_create_tabs">\
<button class="add_remove_button" id="remove_context_button" value="remove_input">Remove selected</button>\
<div class="clear"></div>\
<label for="context_box">Current variables:</label>\
<select id="context_box" name="context_box" style="width:150px;height:100px;" multiple>\
<select id="context_box" name="context_box" style="height:100px;" multiple>\
</select>\
</div>\
</fieldset>\
@ -498,7 +498,7 @@ var create_template_tmpl = '<div id="template_create_tabs">\
<button class="add_remove_button" id="remove_custom_var_button" value="remove_custom_var">Remove selected</button>\
<div class="clear"></div>\
<label for="custom_var_box">Current variables:</label>\
<select id="custom_var_box" name="custom_var_box" style="width:150px;height:100px;" multiple>\
<select id="custom_var_box" name="custom_var_box" style="height:100px;" multiple>\
</select>\
</div>\
</fieldset>\
@ -840,7 +840,7 @@ function updateTemplateInfo(request,template){
var info_tab = {
title: "Information",
content:
'<table id="info_template_table" class="info_table">\
'<table id="info_template_table" class="info_table" style="width:80%">\
<thead>\
<tr><th colspan="2">Template "'+template_info.NAME+'" information</th></tr>\
</thead>\
@ -872,7 +872,7 @@ function updateTemplateInfo(request,template){
};
var template_tab = {
title: "Template",
content: '<table id="template_template_table" class="info_table">\
content: '<table id="template_template_table" class="info_table" style="width:80%">\
<thead><tr><th colspan="2">Template</th></tr></thead>'+
prettyPrintJSON(template_info.TEMPLATE)+
'</table>'
@ -1656,7 +1656,7 @@ filled in");
$('#create_template_dialog').dialog({
autoOpen: false,
modal: true,
width: 700,
width: 600,
height: height
});

13
src/sunstone/public/js/plugins/vms-tab.js
View File

@ -363,7 +363,7 @@ var vm_actions = {
plot_graph(response,'#vm_monitoring_tab',
'vm_monitor_',info);
},
error: onError
error: vmMonitorError
},
"VM.monitor_all" : {
type: "monitor_global",
@ -716,7 +716,7 @@ function updateVMInfo(request,vm){
var template_tab = {
title: "VM Template",
content:
'<table id="vm_template_table" class="info_table">\
'<table id="vm_template_table" class="info_table" style="width:80%">\
<thead><tr><th colspan="2">VM template</th></tr></thead>'+
prettyPrintJSON(vm_info.TEMPLATE)+
'</table>'
@ -1053,6 +1053,15 @@ function vncIcon(vm){
}
function vmMonitorError(req,error_json){
var message = error_json.error.message;
var info = req.request.data[0].monitor;
var labels = info.monitor_resources;
var id_suffix = labels.replace(/,/g,'_');
var id = '#vm_monitor_'+id_suffix;
$('#vm_monitoring_tab '+id).html('<div style="padding-left:20px;">'+message+'</div>');
}
// At this point the DOM is ready and the sunstone.js ready() has been run.
$(document).ready(function(){

4
src/sunstone/public/js/plugins/vnets-tab.js
View File

@ -76,7 +76,7 @@ var create_vn_tmpl =
Remove selected\
</button>\
<label for="leases">Current leases:</label>\
<select id="leases" name="leases" size="10" style="width:150px" multiple>\
<select id="leases" name="leases" style="height:10em;" multiple>\
<!-- insert leases -->\
</select><br />\
</fieldset>\
@ -434,7 +434,7 @@ function updateVNetworkInfo(request,vn){
var template_tab = {
title: "Virtual Network template",
content:
'<table id="vn_template_table" class="info_table">\
'<table id="vn_template_table" class="info_table" style="width:80%">\
<thead><tr><th colspan="2">Virtual Network template</th></tr></thead>'+
prettyPrintJSON(vn_info.TEMPLATE)+
'</table>'

5
src/sunstone/public/js/sunstone-util.js
View File

@ -507,7 +507,7 @@ function generateMonitoringDivs(graphs, id_prefix){
var str = "";
//40% of the width of the screen minus
//129px (left menu size)
var width = ($(window).width()-129)*45/100;
var width = ($(window).width()-129)*42/100;
var id_suffix="";
var label="";
@ -519,7 +519,7 @@ function generateMonitoringDivs(graphs, id_prefix){
<thead><tr><th colspan="1">'+this.title+'</th></tr></thead>\
<tr><td id="legend_'+id_suffix+'"></td></tr>\
<tr><td style="border:0">\
<div id="'+id+'" style="width:'+width+'px; height:150px;">'+
<div id="'+id+'" style="width:'+width+'px; height:150px;margin-bottom:10px;position:relative;left:-20px;">'+
spinner+
'</div>\
</td></tr></table>';
@ -605,7 +605,6 @@ function setupTemplateUpdateDialog(){
<button class="button" id="template_update_button" value="">\
Update\
</button>\
<button class="button" type="reset" value="reset">Reset</button>\
</div>\
</fieldset>\
</form>');