[pve-devel] [PATCH manager 4/4] ext6migrate: use new charts for node/lxc/qemu
Dominik Csapak
d.csapak at proxmox.com
Thu Mar 31 10:30:20 CEST 2016
uses the new charts for the rrd graphs in the summary pages
and make them lazy (for minimal performance impact)
also correct some styling errors and move static fields
to the class definition
Signed-off-by: Dominik Csapak <d.csapak at proxmox.com>
---
www/manager6/lxc/Summary.js | 105 ++++++++++++++++++++++---------------------
www/manager6/node/Summary.js | 74 ++++++++++++++++--------------
www/manager6/qemu/Summary.js | 101 ++++++++++++++++++++++-------------------
3 files changed, 149 insertions(+), 131 deletions(-)
diff --git a/www/manager6/lxc/Summary.js b/www/manager6/lxc/Summary.js
index 878f546..35cd10b 100644
--- a/www/manager6/lxc/Summary.js
+++ b/www/manager6/lxc/Summary.js
@@ -2,10 +2,11 @@ Ext.define('PVE.lxc.Summary', {
extend: 'Ext.panel.Panel',
alias: 'widget.pveLxcSummary',
+ tbar: [ '->' , { xtype: 'pveRRDTypeSelector' } ],
scrollable: true,
bodyStyle: 'padding:10px',
defaults: {
- style: 'padding-top:10px',
+ style: {'padding-top':'10px'},
width: 800
},
@@ -39,63 +40,65 @@ Ext.define('PVE.lxc.Summary', {
rstore: rstore
});
- var rrdurl = "/api2/png/nodes/" + nodename + "/lxc/" + vmid + "/rrd";
-
var notesview = Ext.create('PVE.panel.NotesView', {
pveSelNode: me.pveSelNode,
flex: 1
});
- Ext.apply(me, {
- tbar: [
- '->',
- {
- xtype: 'pveRRDTypeSelector'
- }
- ],
- items: [
- {
- style: 'padding-top:0px',
- layout: {
- type: 'hbox',
- align: 'stretchmax'
- },
- border: false,
- items: [ statusview, notesview ]
- },
- {
- xtype: 'pveRRDView',
- title: gettext('CPU usage'),
- pveSelNode: me.pveSelNode,
- datasource: 'cpu',
- rrdurl: rrdurl
- },
- {
- xtype: 'pveRRDView',
- title: gettext('Memory usage'),
- pveSelNode: me.pveSelNode,
- datasource: 'mem,maxmem',
- rrdurl: rrdurl
- },
- {
- xtype: 'pveRRDView',
- title: gettext('Network traffic'),
- pveSelNode: me.pveSelNode,
- datasource: 'netin,netout',
- rrdurl: rrdurl
- },
- {
- xtype: 'pveRRDView',
- title: gettext('Disk IO'),
- pveSelNode: me.pveSelNode,
- datasource: 'diskread,diskwrite',
- rrdurl: rrdurl
- }
- ]
+ var rrdstore = Ext.create('PVE.data.RRDStore', {
+ rrdurl: "/api2/json/nodes/" + nodename + "/lxc/" + vmid + "/rrddata"
});
- me.on('activate', function() {
- notesview.load();
+ Ext.apply(me, {
+ plugins: {
+ ptype: 'lazyitems',
+ items: [
+ {
+ style: 'padding-top:0px',
+ layout: {
+ type: 'hbox',
+ align: 'stretchmax'
+ },
+ border: false,
+ 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
+ }
+ ]
+ },
+ listeners: {
+ activate: function() { notesview.load(); rrdstore.startUpdate(); },
+ hide: rrdstore.stopUpdate,
+ destroy: rrdstore.stopUpdate,
+ }
});
me.callParent();
diff --git a/www/manager6/node/Summary.js b/www/manager6/node/Summary.js
index b01f848..5bc032d 100644
--- a/www/manager6/node/Summary.js
+++ b/www/manager6/node/Summary.js
@@ -91,48 +91,56 @@ Ext.define('PVE.node.Summary', {
rstore: rstore
});
- var rrdurl = "/api2/png/nodes/" + nodename + "/rrd";
-
var version_btn = new Ext.Button({
text: gettext('Package versions'),
handler: function(){
- PVE.Utils.checked_command(function() { me.showVersions(); });
+ PVE.Utils.checked_command(function() { d675f09dme.showVersions(); });
}
});
+ var rrdstore = Ext.create('PVE.data.RRDStore', {
+ rrdurl: "/api2/json/nodes/" + nodename + "/rrddata",
+ });
+
Ext.apply(me, {
tbar: [version_btn, '->', { xtype: 'pveRRDTypeSelector' } ],
- items: [
- statusview,
- {
- xtype: 'pveRRDView',
- title: gettext('CPU usage'),
- datasource: 'cpu,iowait',
- rrdurl: rrdurl
- },
- {
- xtype: 'pveRRDView',
- title: gettext('Server load'),
- datasource: 'loadavg',
- rrdurl: rrdurl
- },
- {
- xtype: 'pveRRDView',
- title: gettext('Memory usage'),
- datasource: 'memtotal,memused',
- rrdurl: rrdurl
- },
- {
- xtype: 'pveRRDView',
- title: gettext('Network traffic'),
- datasource: 'netin,netout',
- rrdurl: rrdurl
- }
- ],
+ plugins: {
+ ptype: 'lazyitems',
+ 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
+ },
+ ],
+ },
listeners: {
- show: rstore.startUpdate,
- hide: rstore.stopUpdate,
- destroy: rstore.stopUpdate
+ activate: function() { rstore.startUpdate(); rrdstore.startUpdate(); },
+ hide: function() { rstore.stopUpdate(); rrdstore.stopUpdate(); },
+ destroy: function() { rstore.stopUpdate(); rrdstore.stopUpdate(); },
}
});
diff --git a/www/manager6/qemu/Summary.js b/www/manager6/qemu/Summary.js
index a71b4fd..189e6be 100644
--- a/www/manager6/qemu/Summary.js
+++ b/www/manager6/qemu/Summary.js
@@ -4,12 +4,11 @@ Ext.define('PVE.qemu.Summary', {
tbar: [ '->', { xtype: 'pveRRDTypeSelector' } ],
scrollable: true,
- bodyStyle: 'padding:10px',
+ bodyPadding: 10,
defaults: {
- style: 'padding-top:10px',
+ style: {'padding-top':'10px'},
width: 800
},
-
initComponent: function() {
var me = this;
@@ -40,57 +39,65 @@ Ext.define('PVE.qemu.Summary', {
rstore: rstore
});
- var rrdurl = "/api2/png/nodes/" + nodename + "/qemu/" + vmid + "/rrd";
-
var notesview = Ext.create('PVE.panel.NotesView', {
pveSelNode: me.pveSelNode,
flex: 1
});
- Ext.apply(me, {
- items: [
- {
- style: 'padding-top:0px',
- layout: {
- type: 'hbox',
- align: 'stretchmax'
- },
- border: false,
- items: [ statusview, notesview ]
- },
- {
- xtype: 'pveRRDView',
- title: gettext('CPU usage'),
- pveSelNode: me.pveSelNode,
- datasource: 'cpu',
- rrdurl: rrdurl
- },
- {
- xtype: 'pveRRDView',
- title: gettext('Memory usage'),
- pveSelNode: me.pveSelNode,
- datasource: 'mem,maxmem',
- rrdurl: rrdurl
- },
- {
- xtype: 'pveRRDView',
- title: gettext('Network traffic'),
- pveSelNode: me.pveSelNode,
- datasource: 'netin,netout',
- rrdurl: rrdurl
- },
- {
- xtype: 'pveRRDView',
- title: gettext('Disk IO'),
- pveSelNode: me.pveSelNode,
- datasource: 'diskread,diskwrite',
- rrdurl: rrdurl
- }
- ]
+ var rrdstore = Ext.create('PVE.data.RRDStore', {
+ rrdurl: "/api2/json/nodes/" + nodename + "/qemu/" + vmid + "/rrddata",
});
- me.on('activate', function() {
- notesview.load();
+ Ext.apply(me, {
+ plugins: {
+ ptype: 'lazyitems',
+ items: [
+ {
+ style: {'padding-top':'0px'},
+ layout: {
+ type: 'hbox',
+ align: 'stretchmax'
+ },
+ border: false,
+ 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
+ }
+ ],
+ },
+ listeners: {
+ activate: function() {notesview.load(); rrdstore.startUpdate();},
+ hide: rrdstore.stopUpdate,
+ destroy: rrdstore.stopUpdate,
+ }
});
me.callParent();
--
2.1.4
More information about the pve-devel
mailing list