[pve-devel] [PATCH manager 6/7] improve node/lxc/qemu summary pages
Dominik Csapak
d.csapak at proxmox.com
Tue Feb 20 13:41:48 CET 2018
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 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);
+ }
}
});
--
2.11.0
More information about the pve-devel
mailing list