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.csa...@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);
> + }
> }
> });
>
_______________________________________________
pve-devel mailing list
pve-devel@pve.proxmox.com
https://pve.proxmox.com/cgi-bin/mailman/listinfo/pve-devel
