improve node/lxc/qemu summary pages

let them use a one/two column layout depending on browser width
optimize stylings/padding values
get rid of the (now long) unecessary lazyitems plugin
(this was necessary for performance when we still used tabpanels instead
of our own configpanel with treelist)

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>

www/manager6/lxc/Summary.js

@@ -3,7 +3,7 @@ Ext.define('PVE.lxc.Summary', {
     alias: 'widget.pveLxcSummary',
 
     scrollable: true,
-    bodyPadding: '10 0 0 0',
+    bodyPadding: 5,
 
     initComponent: function() {
         var me = this;
@@ -29,123 +29,112 @@ Ext.define('PVE.lxc.Summary', {
 	var template = !!me.pveSelNode.data.template;
 	var rstore = me.statusStore;
 
-	var notesview = Ext.create('PVE.panel.NotesView', {
+	var width = template ? 1 : 0.5;
-	    pveSelNode: me.pveSelNode,
+	var items = [
-	    padding: '0 0 0 10',
+	    {
-	    flex: 1
+		xtype: template ? 'pveTemplateStatusView' : 'pveGuestStatusView',
-	});
+		responsiveConfig: {
-
+		    'width < 1900': {
-	if (template) {
+			columnWidth: width
-	    Ext.apply(me, {
+		    },
-		plugins: {
+		    'width >= 1900': {
-		    ptype: 'lazyitems',
+			columnWidth: width / 2
-		    items: [{
+		    }
-			xtype: 'container',
-			layout: {
-			    type: 'column'
-			},
-			items: [{
-			    width: 800,
-			    layout: {
-				type: 'vbox',
-				align: 'stretch'
-			    },
-			    border: false,
-			    items: [
-				{
-				    xtype: 'pveTemplateStatusView',
-				    pveSelNode: me.pveSelNode,
-				    padding: '0 0 10 10',
-				    rstore: rstore
-				},
-				notesview
-			    ]
-			}]
-		    }]
 		},
-		listeners: {
+		itemId: 'gueststatus',
-		    activate: function() { notesview.load(); }
+		pveSelNode: me.pveSelNode,
+		rstore: rstore
+	    },
+	    {
+		xtype: 'pveNotesView',
+		maxHeight: 320,
+		itemId: 'notesview',
+		pveSelNode: me.pveSelNode,
+		responsiveConfig: {
+		    'width < 1900': {
+			columnWidth: width
+		    },
+		    'width >= 1900': {
+			columnWidth: width / 2
+		    }
 		}
-	    });
+	    }
-	} else {
+	];
-	    var rrdstore = Ext.create('Proxmox.data.RRDStore', {
+
+	var rrdstore;
+	if (!template) {
+
+	    rrdstore = Ext.create('Proxmox.data.RRDStore', {
 		rrdurl: "/api2/json/nodes/" + nodename + "/lxc/" + vmid + "/rrddata",
 		model: 'pve-rrd-guest'
 	    });
 
-	    Ext.apply(me, {
+	    items.push(
-		tbar: [ '->' , { xtype: 'proxmoxRRDTypeSelector' } ],
+		{
-		plugins: {
+		    xtype: 'proxmoxRRDChart',
-		    ptype: 'lazyitems',
+		    title: gettext('CPU usage'),
-		    items: [
+		    pveSelNode: me.pveSelNode,
-			{
+		    fields: ['cpu'],
-			    xtype: 'container',
+		    fieldTitles: [gettext('CPU usage')],
-			    layout: {
+		    store: rrdstore
-				type: 'column'
-			    },
-			    defaults: {
-				padding: '0 0 10 10'
-			    },
-			    items: [
-				{
-				    width: 770,
-				    height: 300,
-				    layout: {
-					type: 'hbox',
-					align: 'stretch'
-				    },
-				    border: false,
-				    items: [
-					{
-					    xtype: 'pveGuestStatusView',
-					    pveSelNode: me.pveSelNode,
-					    width: 400,
-					    rstore: rstore
-					},
-					notesview
-				    ]
-				},
-				{
-				    xtype: 'proxmoxRRDChart',
-				    title: gettext('CPU usage'),
-				    pveSelNode: me.pveSelNode,
-				    fields: ['cpu'],
-				    fieldTitles: [gettext('CPU usage')],
-				    store: rrdstore
-				},
-				{
-				    xtype: 'proxmoxRRDChart',
-				    title: gettext('Memory usage'),
-				    pveSelNode: me.pveSelNode,
-				    fields: ['maxmem', 'mem'],
-				    fieldTitles: [gettext('Total'), gettext('RAM usage')],
-				    store: rrdstore
-				},
-				{
-				    xtype: 'proxmoxRRDChart',
-				    title: gettext('Network traffic'),
-				    pveSelNode: me.pveSelNode,
-				    fields: ['netin','netout'],
-				    store: rrdstore
-				},
-				{
-				    xtype: 'proxmoxRRDChart',
-				    title: gettext('Disk IO'),
-				    pveSelNode: me.pveSelNode,
-				    fields: ['diskread','diskwrite'],
-				    store: rrdstore
-				}
-			    ]
-			}
-		    ]
 		},
-		listeners: {
+		{
-		    activate: function() { notesview.load(); rrdstore.startUpdate(); },
+		    xtype: 'proxmoxRRDChart',
-		    destroy: rrdstore.stopUpdate
+		    title: gettext('Memory usage'),
+		    pveSelNode: me.pveSelNode,
+		    fields: ['maxmem', 'mem'],
+		    fieldTitles: [gettext('Total'), gettext('RAM usage')],
+		    store: rrdstore
+		},
+		{
+		    xtype: 'proxmoxRRDChart',
+		    title: gettext('Network traffic'),
+		    pveSelNode: me.pveSelNode,
+		    fields: ['netin','netout'],
+		    store: rrdstore
+		},
+		{
+		    xtype: 'proxmoxRRDChart',
+		    title: gettext('Disk IO'),
+		    pveSelNode: me.pveSelNode,
+		    fields: ['diskread','diskwrite'],
+		    store: rrdstore
 		}
-	    });
+	    );
+
 	}
 
+	Ext.apply(me, {
+	    tbar: [ '->', { xtype: 'proxmoxRRDTypeSelector' } ],
+	    items: [
+		{
+		    xtype: 'container',
+		    layout: {
+			type: 'column'
+		    },
+		    defaults: {
+			minHeight: 320,
+			padding: 5,
+			plugins: 'responsive',
+			responsiveConfig: {
+			    'width < 1900': {
+				columnWidth: 1
+			    },
+			    'width >= 1900': {
+				columnWidth: 0.5
+			    }
+			}
+		    },
+		    items: items
+		}
+	    ]
+	});
+
 	me.callParent();
+	me.down('#notesview').load();
+	if (!template) {
+	    rrdstore.startUpdate();
+	    me.on('destroy', rrdstore.stopUpdate);
+	}
     }
 });

www/manager6/node/Summary.js

@@ -3,7 +3,7 @@ Ext.define('PVE.node.Summary', {
     alias: 'widget.pveNodeSummary',
 
     scrollable: true,
-    bodyPadding: '10 0 0 0',
+    bodyPadding: 5,
 
     showVersions: function() {
 	var me = this;
@@ -15,11 +15,11 @@ Ext.define('PVE.node.Summary', {
 
 	var view = Ext.createWidget('component', {
 	    autoScroll: true,
+	    padding: 5,
 	    style: {
 		'background-color': 'white',
 		'white-space': 'pre',
-		'font-family': 'monospace',
+		'font-family': 'monospace'
-		padding: '5px'
 	    }
 	});
 
@@ -94,53 +94,60 @@ Ext.define('PVE.node.Summary', {
 
 	Ext.apply(me, {
 	    tbar: [version_btn, '->', { xtype: 'proxmoxRRDTypeSelector' } ],
-	    plugins: {
+	    items: [
-		ptype: 'lazyitems',
+		{
-		items: [
+		    xtype: 'container',
-		    {
+		    layout: 'column',
-			xtype: 'container',
+		    defaults: {
-			layout: 'column',
+			minHeight: 320,
-			defaults: {
+			padding: 5,
-			    padding: '0 0 10 10'
+			plugins: 'responsive',
-			},
+			responsiveConfig: {
-			items: [
+			    'width < 1900': {
-			    {
+				columnWidth: 1
-				xtype: 'pveNodeStatus',
-				rstore: rstore,
-				width: 770,
-				pveSelNode: me.pveSelNode
 			    },
-			    {
+			    'width >= 1900': {
-				xtype: 'proxmoxRRDChart',
+				columnWidth: 0.5
-				title: gettext('CPU usage'),
-				fields: ['cpu','iowait'],
-				fieldTitles: [gettext('CPU usage'), gettext('IO delay')],
-				store: rrdstore
-			    },
-			    {
-				xtype: 'proxmoxRRDChart',
-				title: gettext('Server load'),
-				fields: ['loadavg'],
-				fieldTitles: [gettext('Load average')],
-				store: rrdstore
-			    },
-			    {
-				xtype: 'proxmoxRRDChart',
-				title: gettext('Memory usage'),
-				fields: ['memtotal','memused'],
-				fieldTitles: [gettext('Total'), gettext('RAM usage')],
-				store: rrdstore
-			    },
-			    {
-				xtype: 'proxmoxRRDChart',
-				title: gettext('Network traffic'),
-				fields: ['netin','netout'],
-				store: rrdstore
 			    }
-			]
+			}
-		    }
+		    },
-		]
+		    items: [
-	    },
+			{
+			    xtype: 'pveNodeStatus',
+			    rstore: rstore,
+			    width: 770,
+			    pveSelNode: me.pveSelNode
+			},
+			{
+			    xtype: 'proxmoxRRDChart',
+			    title: gettext('CPU usage'),
+			    fields: ['cpu','iowait'],
+			    fieldTitles: [gettext('CPU usage'), gettext('IO delay')],
+			    store: rrdstore
+			},
+			{
+			    xtype: 'proxmoxRRDChart',
+			    title: gettext('Server load'),
+			    fields: ['loadavg'],
+			    fieldTitles: [gettext('Load average')],
+			    store: rrdstore
+			},
+			{
+			    xtype: 'proxmoxRRDChart',
+			    title: gettext('Memory usage'),
+			    fields: ['memtotal','memused'],
+			    fieldTitles: [gettext('Total'), gettext('RAM usage')],
+			    store: rrdstore
+			},
+			{
+			    xtype: 'proxmoxRRDChart',
+			    title: gettext('Network traffic'),
+			    fields: ['netin','netout'],
+			    store: rrdstore
+			}
+		    ]
+		}
+	    ],
 	    listeners: {
 		activate: function() { rstore.startUpdate(); rrdstore.startUpdate(); },
 		destroy: function() { rstore.stopUpdate(); rrdstore.stopUpdate(); }

www/manager6/qemu/Summary.js

@@ -3,7 +3,7 @@ Ext.define('PVE.qemu.Summary', {
     alias: 'widget.pveQemuSummary',
 
     scrollable: true,
-    bodyPadding: '10 0 0 0',
+    bodyPadding: 5,
 
     initComponent: function() {
         var me = this;
@@ -29,130 +29,112 @@ Ext.define('PVE.qemu.Summary', {
 	var template = !!me.pveSelNode.data.template;
 	var rstore = me.statusStore;
 
-	var notesview = Ext.create('PVE.panel.NotesView', {
+	var width = template ? 1 : 0.5;
-	    pveSelNode: me.pveSelNode,
+	var items = [
-	    padding: '0 0 0 10',
+	    {
-	    flex: 1
+		xtype: template ? 'pveTemplateStatusView' : 'pveGuestStatusView',
-	});
+		responsiveConfig: {
-
+		    'width < 1900': {
-	if (template) {
+			columnWidth: width
-
+		    },
-	    Ext.apply(me, {
+		    'width >= 1900': {
-		plugins: {
+			columnWidth: width / 2
-		    ptype: 'lazyitems',
+		    }
-		    items: [
-			{
-			    xtype: 'container',
-			    layout: {
-				type: 'column'
-			    },
-			    defaults: {
-				padding: '0 0 10 0'
-			    },
-			    items: [{
-				width: 770,
-				layout: {
-				    type: 'vbox',
-				    align: 'stretch'
-				},
-				border: false,
-				items: [
-				    {
-					xtype: 'pveTemplateStatusView',
-					pveSelNode: me.pveSelNode,
-					padding: '0 0 10 10',
-					rstore: rstore
-				    },
-				    notesview
-				]
-			    }]
-			}
-		    ]
 		},
-		listeners: {
+		itemId: 'gueststatus',
-		    activate: function() { notesview.load(); }
+		pveSelNode: me.pveSelNode,
+		rstore: rstore
+	    },
+	    {
+		xtype: 'pveNotesView',
+		maxHeight: 330,
+		itemId: 'notesview',
+		pveSelNode: me.pveSelNode,
+		responsiveConfig: {
+		    'width < 1900': {
+			columnWidth: width
+		    },
+		    'width >= 1900': {
+			columnWidth: width / 2
+		    }
 		}
-	    });
+	    }
+	];
 
-	} else {
+	var rrdstore;
-	    var rrdstore = Ext.create('Proxmox.data.RRDStore', {
+	if (!template) {
+
+	    rrdstore = Ext.create('Proxmox.data.RRDStore', {
 		rrdurl: "/api2/json/nodes/" + nodename + "/qemu/" + vmid + "/rrddata",
 		model: 'pve-rrd-guest'
 	    });
 
-	    Ext.apply(me, {
+	    items.push(
-		tbar: [ '->', { xtype: 'proxmoxRRDTypeSelector' } ],
+		{
-		plugins: {
+		    xtype: 'proxmoxRRDChart',
-		    ptype: 'lazyitems',
+		    title: gettext('CPU usage'),
-		    items: [
+		    pveSelNode: me.pveSelNode,
-			{
+		    fields: ['cpu'],
-			    xtype: 'container',
+		    fieldTitles: [gettext('CPU usage')],
-			    layout: {
+		    store: rrdstore
-				type: 'column'
-			    },
-			    defaults: {
-				padding: '0 0 10 10'
-			    },
-			    items: [
-				{
-				    width: 770,
-				    height: 330,
-				    layout: {
-					type: 'hbox',
-					align: 'stretch'
-				    },
-				    border: false,
-				    items: [
-					{
-					    xtype: 'pveGuestStatusView',
-					    pveSelNode: me.pveSelNode,
-					    width: 400,
-					    rstore: rstore
-					},
-					notesview
-				    ]
-				},
-				{
-				    xtype: 'proxmoxRRDChart',
-				    title: gettext('CPU usage'),
-				    pveSelNode: me.pveSelNode,
-				    fields: ['cpu'],
-				    fieldTitles: [gettext('CPU usage')],
-				    store: rrdstore
-				},
-				{
-				    xtype: 'proxmoxRRDChart',
-				    title: gettext('Memory usage'),
-				    pveSelNode: me.pveSelNode,
-				    fields: ['maxmem', 'mem'],
-				    fieldTitles: [gettext('Total'), gettext('RAM usage')],
-				    store: rrdstore
-				},
-				{
-				    xtype: 'proxmoxRRDChart',
-				    title: gettext('Network traffic'),
-				    pveSelNode: me.pveSelNode,
-				    fields: ['netin','netout'],
-				    store: rrdstore
-				},
-				{
-				    xtype: 'proxmoxRRDChart',
-				    title: gettext('Disk IO'),
-				    pveSelNode: me.pveSelNode,
-				    fields: ['diskread','diskwrite'],
-				    store: rrdstore
-				}
-			    ]
-			}
-		    ]
 		},
-		listeners: {
+		{
-		    activate: function() {notesview.load(); rrdstore.startUpdate();},
+		    xtype: 'proxmoxRRDChart',
-		    destroy: rrdstore.stopUpdate
+		    title: gettext('Memory usage'),
+		    pveSelNode: me.pveSelNode,
+		    fields: ['maxmem', 'mem'],
+		    fieldTitles: [gettext('Total'), gettext('RAM usage')],
+		    store: rrdstore
+		},
+		{
+		    xtype: 'proxmoxRRDChart',
+		    title: gettext('Network traffic'),
+		    pveSelNode: me.pveSelNode,
+		    fields: ['netin','netout'],
+		    store: rrdstore
+		},
+		{
+		    xtype: 'proxmoxRRDChart',
+		    title: gettext('Disk IO'),
+		    pveSelNode: me.pveSelNode,
+		    fields: ['diskread','diskwrite'],
+		    store: rrdstore
 		}
-	    });
+	    );
+
 	}
 
+	Ext.apply(me, {
+	    tbar: [ '->', { xtype: 'proxmoxRRDTypeSelector' } ],
+	    items: [
+		{
+		    xtype: 'container',
+		    layout: {
+			type: 'column'
+		    },
+		    defaults: {
+			minHeight: 330,
+			padding: 5,
+			plugins: 'responsive',
+			responsiveConfig: {
+			    'width < 1900': {
+				columnWidth: 1
+			    },
+			    'width >= 1900': {
+				columnWidth: 0.5
+			    }
+			}
+		    },
+		    items: items
+		}
+	    ]
+	});
+
 	me.callParent();
+	me.down('#notesview').load();
+	if (!template) {
+	    rrdstore.startUpdate();
+	    me.on('destroy', rrdstore.stopUpdate);
+	}
     }
 });