[pve-devel] [PATCH manager 6/7] improve node/lxc/qemu summary pages

[Thomas Lamprecht]

On 2/20/18 1:41 PM, Dominik Csapak wrote:
> 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)
> 

This one doesn't applies here (note: I have the you mention in the cover
letter infoWidget series applied).

[...]
patching file www/manager6/qemu/Summary.js
Hunk #2 FAILED at 29.

Did not looked which exact line poses a problem...

> Signed-off-by: Dominik Csapak <d.csapak at proxmox.com>
> ---
>  www/manager6/lxc/Summary.js  | 205 ++++++++++++++++++++----------------------
>  www/manager6/node/Summary.js | 103 +++++++++++----------
>  www/manager6/qemu/Summary.js | 210 ++++++++++++++++++++-----------------------
>  3 files changed, 248 insertions(+), 270 deletions(-)
> 
> diff --git a/www/manager6/lxc/Summary.js b/www/manager6/lxc/Summary.js
> index ad1a4ec4..47fb5b29 100644
> --- a/www/manager6/lxc/Summary.js
> +++ b/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', {
> -	    pveSelNode: me.pveSelNode,
> -	    padding: '0 0 0 10',
> -	    flex: 1
> -	});
> -
> -	if (template) {
> -	    Ext.apply(me, {
> -		plugins: {
> -		    ptype: 'lazyitems',
> -		    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
> -			    ]
> -			}]
> -		    }]
> +	var width = template ? 1 : 0.5;
> +	var items = [
> +	    {
> +		xtype: template ? 'pveTemplateStatusView' : 'pveGuestStatusView',
> +		responsiveConfig: {
> +		    'width < 1900': {
> +			columnWidth: width
> +		    },
> +		    'width >= 1900': {
> +			columnWidth: width / 2
> +		    }
>  		},
> -		listeners: {
> -		    activate: function() { notesview.load(); }
> +		itemId: 'gueststatus',
> +		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, {
> -		tbar: [ '->' , { xtype: 'proxmoxRRDTypeSelector' } ],
> -		plugins: {
> -		    ptype: 'lazyitems',
> -		    items: [
> -			{
> -			    xtype: 'container',
> -			    layout: {
> -				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
> -				}
> -			    ]
> -			}
> -		    ]
> +	    items.push(
> +		{
> +		    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
>  		},
> -		listeners: {
> -		    activate: function() { notesview.load(); rrdstore.startUpdate(); },
> -		    destroy: rrdstore.stopUpdate
> +		{
> +		    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);
> +	}
>      }
>  });
> diff --git a/www/manager6/node/Summary.js b/www/manager6/node/Summary.js
> index 3392c8ad..eaa3e6ac 100644
> --- a/www/manager6/node/Summary.js
> +++ b/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',
> -		padding: '5px'
> +		'font-family': 'monospace'
>  	    }
>  	});
>  
> @@ -94,53 +94,60 @@ Ext.define('PVE.node.Summary', {
>  
>  	Ext.apply(me, {
>  	    tbar: [version_btn, '->', { xtype: 'proxmoxRRDTypeSelector' } ],
> -	    plugins: {
> -		ptype: 'lazyitems',
> -		items: [
> -		    {
> -			xtype: 'container',
> -			layout: 'column',
> -			defaults: {
> -			    padding: '0 0 10 10'
> -			},
> -			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
> +	    items: [
> +		{
> +		    xtype: 'container',
> +		    layout: 'column',
> +		    defaults: {
> +			minHeight: 320,
> +			padding: 5,
> +			plugins: 'responsive',
> +			responsiveConfig: {
> +			    'width < 1900': {
> +				columnWidth: 1
>  			    },
> -			    {
> -				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
> +			    'width >= 1900': {
> +				columnWidth: 0.5
>  			    }
> -			]
> -		    }
> -		]
> -	    },
> +			}
> +		    },
> +		    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(); }
> diff --git a/www/manager6/qemu/Summary.js b/www/manager6/qemu/Summary.js
> index 18977bf4..65787461 100644
> --- a/www/manager6/qemu/Summary.js
> +++ b/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', {
> -	    pveSelNode: me.pveSelNode,
> -	    padding: '0 0 0 10',
> -	    flex: 1
> -	});
> -
> -	if (template) {
> -
> -	    Ext.apply(me, {
> -		plugins: {
> -		    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
> -				]
> -			    }]
> -			}
> -		    ]
> +	var width = template ? 1 : 0.5;
> +	var items = [
> +	    {
> +		xtype: template ? 'pveTemplateStatusView' : 'pveGuestStatusView',
> +		responsiveConfig: {
> +		    'width < 1900': {
> +			columnWidth: width
> +		    },
> +		    'width >= 1900': {
> +			columnWidth: width / 2
> +		    }
>  		},
> -		listeners: {
> -		    activate: function() { notesview.load(); }
> +		itemId: 'gueststatus',
> +		pveSelNode: me.pveSelNode,
> +		rstore: rstore
> +	    },
> +	    {
> +		xtype: 'pveNotesView',
> +		maxHeight: 330,
> +		itemId: 'notesview',
> +		pveSelNode: me.pveSelNode,
> +		responsiveConfig: {
> +		    'width < 1900': {
> +			columnWidth: width
> +		    },
> +		    'width >= 1900': {
> +			columnWidth: width / 2
> +		    }
>  		}
> -	    });
> +	    }
> +	];
> +
> +	var rrdstore;
> +	if (!template) {
>  
> -	} else {
> -	    var rrdstore = Ext.create('Proxmox.data.RRDStore', {
> +	    rrdstore = Ext.create('Proxmox.data.RRDStore', {
>  		rrdurl: "/api2/json/nodes/" + nodename + "/qemu/" + vmid + "/rrddata",
>  		model: 'pve-rrd-guest'
>  	    });
>  
> -	    Ext.apply(me, {
> -		tbar: [ '->', { xtype: 'proxmoxRRDTypeSelector' } ],
> -		plugins: {
> -		    ptype: 'lazyitems',
> -		    items: [
> -			{
> -			    xtype: 'container',
> -			    layout: {
> -				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
> -				}
> -			    ]
> -			}
> -		    ]
> +	    items.push(
> +		{
> +		    xtype: 'proxmoxRRDChart',
> +		    title: gettext('CPU usage'),
> +		    pveSelNode: me.pveSelNode,
> +		    fields: ['cpu'],
> +		    fieldTitles: [gettext('CPU usage')],
> +		    store: rrdstore
>  		},
> -		listeners: {
> -		    activate: function() {notesview.load(); rrdstore.startUpdate();},
> -		    destroy: rrdstore.stopUpdate
> +		{
> +		    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
>  		}
> -	    });
> +	    );
> +
>  	}
>  
> +	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);
> +	}
>      }
>  });
>