[pve-devel] [PATCH manager 4/4] make the graphs on the summary pages use empty space

[Dominik Csapak]

this patch lets the graphs flow if you have enough
horizontal space

Signed-off-by: Dominik Csapak <d.csapak at proxmox.com>
---
this looks a bit weird on nodes because of the
long status output, but some people requested this and
i want to redo the whole status/notes area anyway
 www/manager6/lxc/Summary.js  | 73 +++++++++++++++++++++++++-------------------
 www/manager6/node/Summary.js | 63 ++++++++++++++++++++++----------------
 www/manager6/qemu/Summary.js | 73 +++++++++++++++++++++++++-------------------
 3 files changed, 120 insertions(+), 89 deletions(-)

diff --git a/www/manager6/lxc/Summary.js b/www/manager6/lxc/Summary.js
index 3f13ee5..5ab14cd 100644
--- a/www/manager6/lxc/Summary.js
+++ b/www/manager6/lxc/Summary.js
@@ -6,8 +6,7 @@ Ext.define('PVE.lxc.Summary', {
     scrollable: true,
     bodyStyle: 'padding:10px',
     defaults: {
-	style: {'padding-top':'10px'},
-	width: 800
+	style: {'padding-top':'10px'}
     },
 
     initComponent: function() {
@@ -54,7 +53,8 @@ Ext.define('PVE.lxc.Summary', {
 		ptype: 'lazyitems',
 		items: [
 		    {
-			style: {'padding-top': '0px' },
+			width: 800,
+			padding: '0 5 0 0',
 			layout: {
 			    type: 'hbox',
 			    align: 'stretchmax'
@@ -63,34 +63,45 @@ Ext.define('PVE.lxc.Summary', {
 			items: [ statusview, notesview ]
 		    },
 		    {
-			xtype: 'pveRRDChart',
-			title: gettext('CPU usage'),
-			pveSelNode: me.pveSelNode,
-			fields: ['cpu'],
-			fieldTitles: [gettext('CPU usage')],
-			store: rrdstore
-		    },
-		    {
-			xtype: 'pveRRDChart',
-			title: gettext('Memory usage'),
-			pveSelNode: me.pveSelNode,
-			fields: ['maxmem', 'mem'],
-			fieldTitles: [gettext('Total'), gettext('RAM usage')],
-			store: rrdstore
-		    },
-		    {
-			xtype: 'pveRRDChart',
-			title: gettext('Network traffic'),
-			pveSelNode: me.pveSelNode,
-			fields: ['netin','netout'],
-			store: rrdstore
-		    },
-		    {
-			xtype: 'pveRRDChart',
-			title: gettext('Disk IO'),
-			pveSelNode: me.pveSelNode,
-			fields: ['diskread','diskwrite'],
-			store: rrdstore
+			xtype: 'container',
+			layout: {
+			    type: 'column'
+			},
+			defaults: {
+			    padding: '0 5 10 0'
+			},
+			items: [
+			    {
+				xtype: 'pveRRDChart',
+				title: gettext('CPU usage'),
+				pveSelNode: me.pveSelNode,
+				fields: ['cpu'],
+				fieldTitles: [gettext('CPU usage')],
+				store: rrdstore
+			    },
+			    {
+				xtype: 'pveRRDChart',
+				title: gettext('Memory usage'),
+				pveSelNode: me.pveSelNode,
+				fields: ['maxmem', 'mem'],
+				fieldTitles: [gettext('Total'), gettext('RAM usage')],
+				store: rrdstore
+			    },
+			    {
+				xtype: 'pveRRDChart',
+				title: gettext('Network traffic'),
+				pveSelNode: me.pveSelNode,
+				fields: ['netin','netout'],
+				store: rrdstore
+			    },
+			    {
+				xtype: 'pveRRDChart',
+				title: gettext('Disk IO'),
+				pveSelNode: me.pveSelNode,
+				fields: ['diskread','diskwrite'],
+				store: rrdstore
+			    }
+			]
 		    }
 		]
 	    },
diff --git a/www/manager6/node/Summary.js b/www/manager6/node/Summary.js
index 0c0483d..8128ec2 100644
--- a/www/manager6/node/Summary.js
+++ b/www/manager6/node/Summary.js
@@ -5,7 +5,6 @@ Ext.define('PVE.node.Summary', {
     scrollable: true,
     bodyStyle: 'padding:10px',
     defaults: {
-	width: 800,
 	style: { 'padding-top': '10px' }
     },
 
@@ -87,7 +86,8 @@ Ext.define('PVE.node.Summary', {
 	var statusview = Ext.create('PVE.node.StatusView', {
 	    title: gettext('Status'),
 	    pveSelNode: me.pveSelNode,
-	    style: { 'padding-top': '0px' },
+	    width: 800,
+	    padding: '0 5 0 0',
 	    rstore: rstore
 	});
 
@@ -109,31 +109,40 @@ Ext.define('PVE.node.Summary', {
 		items: [
 		    statusview,
 		    {
-			xtype: 'pveRRDChart',
-			title: gettext('CPU usage'),
-			fields: ['cpu','iowait'],
-			fieldTitles: [gettext('CPU usage'), gettext('IO delay')],
-			store: rrdstore
-		    },
-		    {
-			xtype: 'pveRRDChart',
-			title: gettext('Server load'),
-			fields: ['loadavg'],
-			fieldTitles: [gettext('Load average')],
-			store: rrdstore
-		    },
-		    {
-			xtype: 'pveRRDChart',
-			title: gettext('Memory usage'),
-			fields: ['memtotal','memused'],
-			fieldTitles: [gettext('Total'), gettext('RAM usage')],
-			store: rrdstore
-		    },
-		    {
-			xtype: 'pveRRDChart',
-			title: gettext('Network traffic'),
-			fields: ['netin','netout'],
-			store: rrdstore
+			xtype: 'container',
+			layout: 'column',
+			defaults: {
+			    padding: '0 5 10 0'
+			},
+			items: [
+			    {
+				xtype: 'pveRRDChart',
+				title: gettext('CPU usage'),
+				fields: ['cpu','iowait'],
+				fieldTitles: [gettext('CPU usage'), gettext('IO delay')],
+				store: rrdstore
+			    },
+			    {
+				xtype: 'pveRRDChart',
+				title: gettext('Server load'),
+				fields: ['loadavg'],
+				fieldTitles: [gettext('Load average')],
+				store: rrdstore
+			    },
+			    {
+				xtype: 'pveRRDChart',
+				title: gettext('Memory usage'),
+				fields: ['memtotal','memused'],
+				fieldTitles: [gettext('Total'), gettext('RAM usage')],
+				store: rrdstore
+			    },
+			    {
+				xtype: 'pveRRDChart',
+				title: gettext('Network traffic'),
+				fields: ['netin','netout'],
+				store: rrdstore
+			    }
+			]
 		    }
 		]
 	    },
diff --git a/www/manager6/qemu/Summary.js b/www/manager6/qemu/Summary.js
index 6115e02..26cba8b 100644
--- a/www/manager6/qemu/Summary.js
+++ b/www/manager6/qemu/Summary.js
@@ -6,8 +6,7 @@ Ext.define('PVE.qemu.Summary', {
     scrollable: true,
     bodyPadding: 10,
     defaults: {
-	style: {'padding-top':'10px'},
-	width: 800
+	style: {'padding-top':'10px'}
     },
     initComponent: function() {
         var me = this;
@@ -53,7 +52,8 @@ Ext.define('PVE.qemu.Summary', {
 		ptype: 'lazyitems',
 		items: [
 		    {
-			style: {'padding-top':'0px'},
+			width: 800,
+			padding: '0 5 0 0',
 			layout: {
 			    type: 'hbox',
 			    align: 'stretchmax'
@@ -62,34 +62,45 @@ Ext.define('PVE.qemu.Summary', {
 			items: [ statusview, notesview ]
 		    },
 		    {
-			xtype: 'pveRRDChart',
-			title: gettext('CPU usage'),
-			pveSelNode: me.pveSelNode,
-			fields: ['cpu'],
-			fieldTitles: [gettext('CPU usage')],
-			store: rrdstore
-		    },
-		    {
-			xtype: 'pveRRDChart',
-			title: gettext('Memory usage'),
-			pveSelNode: me.pveSelNode,
-			fields: ['maxmem', 'mem'],
-			fieldTitles: [gettext('Total'), gettext('RAM usage')],
-			store: rrdstore
-		    },
-		    {
-			xtype: 'pveRRDChart',
-			title: gettext('Network traffic'),
-			pveSelNode: me.pveSelNode,
-			fields: ['netin','netout'],
-			store: rrdstore
-		    },
-		    {
-			xtype: 'pveRRDChart',
-			title: gettext('Disk IO'),
-			pveSelNode: me.pveSelNode,
-			fields: ['diskread','diskwrite'],
-			store: rrdstore
+			xtype: 'container',
+			layout: {
+			    type: 'column'
+			},
+			defaults: {
+			    padding: '0 5 10 0'
+			},
+			items: [
+			    {
+				xtype: 'pveRRDChart',
+				title: gettext('CPU usage'),
+				pveSelNode: me.pveSelNode,
+				fields: ['cpu'],
+				fieldTitles: [gettext('CPU usage')],
+				store: rrdstore
+			    },
+			    {
+				xtype: 'pveRRDChart',
+				title: gettext('Memory usage'),
+				pveSelNode: me.pveSelNode,
+				fields: ['maxmem', 'mem'],
+				fieldTitles: [gettext('Total'), gettext('RAM usage')],
+				store: rrdstore
+			    },
+			    {
+				xtype: 'pveRRDChart',
+				title: gettext('Network traffic'),
+				pveSelNode: me.pveSelNode,
+				fields: ['netin','netout'],
+				store: rrdstore
+			    },
+			    {
+				xtype: 'pveRRDChart',
+				title: gettext('Disk IO'),
+				pveSelNode: me.pveSelNode,
+				fields: ['diskread','diskwrite'],
+				store: rrdstore
+			    }
+			]
 		    }
 		]
 	    },
-- 
2.1.4