From f010ce29d7f2b4fdd0293fa5c75e746b814a7748 Mon Sep 17 00:00:00 2001 From: Hector Sanjuan Date: Mon, 11 Jul 2011 15:54:58 +0200 Subject: [PATCH] Make Sunstone prettier * 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 --- src/sunstone/etc/sunstone-plugins.yaml | 14 +++--- src/sunstone/public/css/application.css | 18 +++---- .../public/js/plugins/dashboard-tab.js | 48 +++++-------------- .../public/js/plugins/dashboard-users-tab.js | 34 +++++-------- src/sunstone/public/js/plugins/hosts-tab.js | 14 +++++- src/sunstone/public/js/plugins/images-tab.js | 4 +- .../public/js/plugins/templates-tab.js | 16 +++---- src/sunstone/public/js/plugins/vms-tab.js | 13 ++++- src/sunstone/public/js/plugins/vnets-tab.js | 4 +- src/sunstone/public/js/sunstone-util.js | 5 +- 10 files changed, 80 insertions(+), 90 deletions(-) diff --git a/src/sunstone/etc/sunstone-plugins.yaml b/src/sunstone/etc/sunstone-plugins.yaml index 74f6122935..3b4c997c4d 100644 --- a/src/sunstone/etc/sunstone-plugins.yaml +++ b/src/sunstone/etc/sunstone-plugins.yaml @@ -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 diff --git a/src/sunstone/public/css/application.css b/src/sunstone/public/css/application.css index badc5de365..6e170d9f4d 100644 --- a/src/sunstone/public/css/application.css +++ b/src/sunstone/public/css/application.css @@ -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 { diff --git a/src/sunstone/public/js/plugins/dashboard-tab.js b/src/sunstone/public/js/plugins/dashboard-tab.js index 72270168be..2218cd3710 100644 --- a/src/sunstone/public/js/plugins/dashboard-tab.js +++ b/src/sunstone/public/js/plugins/dashboard-tab.js @@ -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 = \ \ \ - \ - \ -
\ -

Sunstone documentation

\ - \ -
\ - \ - \ \ \ \ @@ -133,21 +115,18 @@ var dashboard_tab_content =

Historical monitoring information

\
\ \ - \ + \ \ \ - \ + \ \ \ - \ + \ \ \ - \ + \ \ \ - \ - \ - \
Total host count
Hosts CPU
'+spinner+'
Hosts CPU
Hosts memory
'+spinner+'
Hosts memory
Total VM count
'+spinner+'
Total VM count
VM Network stats
'+spinner+'
VM Network stats
'+spinner+'
\
\ \ @@ -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('
'); + $('#'+id).html('
'); 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(){ diff --git a/src/sunstone/public/js/plugins/dashboard-users-tab.js b/src/sunstone/public/js/plugins/dashboard-users-tab.js index e54ce3f8e0..5126eef4eb 100644 --- a/src/sunstone/public/js/plugins/dashboard-users-tab.js +++ b/src/sunstone/public/js/plugins/dashboard-users-tab.js @@ -90,18 +90,6 @@ var dashboard_tab_content =
\ \ \ - \ - \ -
\ -

Sunstone documentation

\ - \ -
\ - \ - \ \ \ \ @@ -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('
'); + $('#'+id).html('
'); - 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); diff --git a/src/sunstone/public/js/plugins/hosts-tab.js b/src/sunstone/public/js/plugins/hosts-tab.js index 35674a5c71..333388c144 100644 --- a/src/sunstone/public/js/plugins/hosts-tab.js +++ b/src/sunstone/public/js/plugins/hosts-tab.js @@ -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 : - '\ + '
\ '+ prettyPrintJSON(host_info.TEMPLATE)+ '
Host template
' @@ -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('
'+message+'
'); +} + + //This is executed after the sunstone.js ready() is run. //Here we can basicly init the host datatable, preload it //and add specific listeners diff --git a/src/sunstone/public/js/plugins/images-tab.js b/src/sunstone/public/js/plugins/images-tab.js index 88726fcb37..e0a675456a 100644 --- a/src/sunstone/public/js/plugins/images-tab.js +++ b/src/sunstone/public/js/plugins/images-tab.js @@ -518,7 +518,7 @@ function updateImageInfo(request,img){ var info_tab = { title: "Image information", content: - '\ + '
\ \ \ \ @@ -567,7 +567,7 @@ function updateImageInfo(request,img){ var template_tab = { title: "Image template", - content: '
Image "'+img_info.NAME+'" information
\ + content: '
\ '+ prettyPrintJSON(img_info.TEMPLATE)+ '
Image template
' diff --git a/src/sunstone/public/js/plugins/templates-tab.js b/src/sunstone/public/js/plugins/templates-tab.js index 48661607e2..0b5b572cb4 100644 --- a/src/sunstone/public/js/plugins/templates-tab.js +++ b/src/sunstone/public/js/plugins/templates-tab.js @@ -267,7 +267,7 @@ var create_template_tmpl = '
\ \
\ \ - \ \
\
\ @@ -331,7 +331,7 @@ var create_template_tmpl = '
\ \
\ \ - \ \
\ \ @@ -366,7 +366,7 @@ var create_template_tmpl = '
\ \
\ \ - \ \
\ \ @@ -433,7 +433,7 @@ var create_template_tmpl = '
\ \
\ \ - \ \
\ \ @@ -498,7 +498,7 @@ var create_template_tmpl = '
\ \
\ \ - \ \
\ \ @@ -840,7 +840,7 @@ function updateTemplateInfo(request,template){ var info_tab = { title: "Information", content: - '\ + '
\ \ \ \ @@ -872,7 +872,7 @@ function updateTemplateInfo(request,template){ }; var template_tab = { title: "Template", - content: '
Template "'+template_info.NAME+'" information
\ + content: '
\ '+ prettyPrintJSON(template_info.TEMPLATE)+ '
Template
' @@ -1656,7 +1656,7 @@ filled in"); $('#create_template_dialog').dialog({ autoOpen: false, modal: true, - width: 700, + width: 600, height: height }); diff --git a/src/sunstone/public/js/plugins/vms-tab.js b/src/sunstone/public/js/plugins/vms-tab.js index 6d9089ff04..1ff74ae257 100644 --- a/src/sunstone/public/js/plugins/vms-tab.js +++ b/src/sunstone/public/js/plugins/vms-tab.js @@ -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: - '\ + '
\ '+ prettyPrintJSON(vm_info.TEMPLATE)+ '
VM template
' @@ -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('
'+message+'
'); +} + // At this point the DOM is ready and the sunstone.js ready() has been run. $(document).ready(function(){ diff --git a/src/sunstone/public/js/plugins/vnets-tab.js b/src/sunstone/public/js/plugins/vnets-tab.js index be5e3f96f2..09c88afc80 100644 --- a/src/sunstone/public/js/plugins/vnets-tab.js +++ b/src/sunstone/public/js/plugins/vnets-tab.js @@ -76,7 +76,7 @@ var create_vn_tmpl = Remove selected\ \ \ - \ \
\ \ @@ -434,7 +434,7 @@ function updateVNetworkInfo(request,vn){ var template_tab = { title: "Virtual Network template", content: - '\ + '
\ '+ prettyPrintJSON(vn_info.TEMPLATE)+ '
Virtual Network template
' diff --git a/src/sunstone/public/js/sunstone-util.js b/src/sunstone/public/js/sunstone-util.js index 83acf85918..845ba1c647 100644 --- a/src/sunstone/public/js/sunstone-util.js +++ b/src/sunstone/public/js/sunstone-util.js @@ -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){ '+this.title+'\ \ \ -
'+ +
'+ spinner+ '
\ '; @@ -605,7 +605,6 @@ function setupTemplateUpdateDialog(){ \ - \
\ \ ');