proxmox-mirrors/pve-manager
1
0
Fork 0
mirror of https://git.proxmox.com/git/pve-manager synced 2025-05-30 23:15:11 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

ext6migrate: use new charts for node/lxc/qemu

Browse Source 
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@proxmox.com>
This commit is contained in:
Dominik Csapak 2016-03-31 10:30:20 +02:00 committed by Dietmar Maurer
parent 7b9c038d54
commit 13af4d510f
3 changed files with 149 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
www/manager6/lxc/Summary.js
View File

@ -2,10 +2,11 @@ Ext.define('PVE.lxc.Summary', {
extend: 'Ext.panel.Panel', extend: 'Ext.panel.Panel',
alias: 'widget.pveLxcSummary', alias: 'widget.pveLxcSummary',
tbar: [ '->' , { xtype: 'pveRRDTypeSelector' } ],
scrollable: true, scrollable: true,
bodyStyle: 'padding:10px', bodyStyle: 'padding:10px',
defaults: { defaults: {
style: 'padding-top:10px', style: {'padding-top':'10px'},
width: 800 width: 800
}, },
@ -39,20 +40,18 @@ Ext.define('PVE.lxc.Summary', {
rstore: rstore rstore: rstore
}); });
var rrdurl = "/api2/png/nodes/" + nodename + "/lxc/" + vmid + "/rrd";
var notesview = Ext.create('PVE.panel.NotesView', { var notesview = Ext.create('PVE.panel.NotesView', {
pveSelNode: me.pveSelNode, pveSelNode: me.pveSelNode,
flex: 1 flex: 1
}); });
var rrdstore = Ext.create('PVE.data.RRDStore', {
rrdurl: "/api2/json/nodes/" + nodename + "/lxc/" + vmid + "/rrddata"
});
Ext.apply(me, { Ext.apply(me, {
tbar: [ plugins: {
'->', ptype: 'lazyitems',
{
xtype: 'pveRRDTypeSelector'
}
],
items: [ items: [
{ {
style: 'padding-top:0px', style: 'padding-top:0px',
@ -64,38 +63,42 @@ Ext.define('PVE.lxc.Summary', {
items: [ statusview, notesview ] items: [ statusview, notesview ]
}, },
{ {
xtype: 'pveRRDView', xtype: 'pveRRDChart',
title: gettext('CPU usage'), title: gettext('CPU usage'),
pveSelNode: me.pveSelNode, pveSelNode: me.pveSelNode,
datasource: 'cpu', fields: ['cpu'],
rrdurl: rrdurl fieldTitles: [gettext('CPU usage')],
store: rrdstore
}, },
{ {
xtype: 'pveRRDView', xtype: 'pveRRDChart',
title: gettext('Memory usage'), title: gettext('Memory usage'),
pveSelNode: me.pveSelNode, pveSelNode: me.pveSelNode,
datasource: 'mem,maxmem', fields: ['maxmem', 'mem'],
rrdurl: rrdurl fieldTitles: [gettext('Total'), gettext('RAM usage')],
store: rrdstore
}, },
{ {
xtype: 'pveRRDView', xtype: 'pveRRDChart',
title: gettext('Network traffic'), title: gettext('Network traffic'),
pveSelNode: me.pveSelNode, pveSelNode: me.pveSelNode,
datasource: 'netin,netout', fields: ['netin','netout'],
rrdurl: rrdurl store: rrdstore
}, },
{ {
xtype: 'pveRRDView', xtype: 'pveRRDChart',
title: gettext('Disk IO'), title: gettext('Disk IO'),
pveSelNode: me.pveSelNode, pveSelNode: me.pveSelNode,
datasource: 'diskread,diskwrite', fields: ['diskread','diskwrite'],
rrdurl: rrdurl store: rrdstore
} }
] ]
}); },
listeners: {
me.on('activate', function() { activate: function() { notesview.load(); rrdstore.startUpdate(); },
notesview.load(); hide: rrdstore.stopUpdate,
destroy: rrdstore.stopUpdate,
}
}); });
me.callParent(); me.callParent();

46
www/manager6/node/Summary.js
View File

@ -91,48 +91,56 @@ Ext.define('PVE.node.Summary', {
rstore: rstore rstore: rstore
}); });
var rrdurl = "/api2/png/nodes/" + nodename + "/rrd";
var version_btn = new Ext.Button({ var version_btn = new Ext.Button({
text: gettext('Package versions'), text: gettext('Package versions'),
handler: function(){ 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, { Ext.apply(me, {
tbar: [version_btn, '->', { xtype: 'pveRRDTypeSelector' } ], tbar: [version_btn, '->', { xtype: 'pveRRDTypeSelector' } ],
plugins: {
ptype: 'lazyitems',
items: [ items: [
statusview, statusview,
{ {
xtype: 'pveRRDView', xtype: 'pveRRDChart',
title: gettext('CPU usage'), title: gettext('CPU usage'),
datasource: 'cpu,iowait', fields: ['cpu','iowait'],
rrdurl: rrdurl fieldTitles: [gettext('CPU usage'), gettext('IO delay')],
store: rrdstore
}, },
{ {
xtype: 'pveRRDView', xtype: 'pveRRDChart',
title: gettext('Server load'), title: gettext('Server load'),
datasource: 'loadavg', fields: ['loadavg'],
rrdurl: rrdurl fieldTitles: [gettext('Load average')],
store: rrdstore
}, },
{ {
xtype: 'pveRRDView', xtype: 'pveRRDChart',
title: gettext('Memory usage'), title: gettext('Memory usage'),
datasource: 'memtotal,memused', fields: ['memtotal','memused'],
rrdurl: rrdurl fieldTitles: [gettext('Total'), gettext('RAM usage')],
store: rrdstore
}, },
{ {
xtype: 'pveRRDView', xtype: 'pveRRDChart',
title: gettext('Network traffic'), title: gettext('Network traffic'),
datasource: 'netin,netout', fields: ['netin','netout'],
rrdurl: rrdurl store: rrdstore
} },
], ],
},
listeners: { listeners: {
show: rstore.startUpdate, activate: function() { rstore.startUpdate(); rrdstore.startUpdate(); },
hide: rstore.stopUpdate, hide: function() { rstore.stopUpdate(); rrdstore.stopUpdate(); },
destroy: rstore.stopUpdate destroy: function() { rstore.stopUpdate(); rrdstore.stopUpdate(); },
} }
}); });

53
www/manager6/qemu/Summary.js
View File

@ -4,12 +4,11 @@ Ext.define('PVE.qemu.Summary', {
tbar: [ '->', { xtype: 'pveRRDTypeSelector' } ], tbar: [ '->', { xtype: 'pveRRDTypeSelector' } ],
scrollable: true, scrollable: true,
bodyStyle: 'padding:10px', bodyPadding: 10,
defaults: { defaults: {
style: 'padding-top:10px', style: {'padding-top':'10px'},
width: 800 width: 800
}, },
initComponent: function() { initComponent: function() {
var me = this; var me = this;
@ -40,17 +39,21 @@ Ext.define('PVE.qemu.Summary', {
rstore: rstore rstore: rstore
}); });
var rrdurl = "/api2/png/nodes/" + nodename + "/qemu/" + vmid + "/rrd";
var notesview = Ext.create('PVE.panel.NotesView', { var notesview = Ext.create('PVE.panel.NotesView', {
pveSelNode: me.pveSelNode, pveSelNode: me.pveSelNode,
flex: 1 flex: 1
}); });
var rrdstore = Ext.create('PVE.data.RRDStore', {
rrdurl: "/api2/json/nodes/" + nodename + "/qemu/" + vmid + "/rrddata",
});
Ext.apply(me, { Ext.apply(me, {
plugins: {
ptype: 'lazyitems',
items: [ items: [
{ {
style: 'padding-top:0px', style: {'padding-top':'0px'},
layout: { layout: {
type: 'hbox', type: 'hbox',
align: 'stretchmax' align: 'stretchmax'
@ -59,38 +62,42 @@ Ext.define('PVE.qemu.Summary', {
items: [ statusview, notesview ] items: [ statusview, notesview ]
}, },
{ {
xtype: 'pveRRDView', xtype: 'pveRRDChart',
title: gettext('CPU usage'), title: gettext('CPU usage'),
pveSelNode: me.pveSelNode, pveSelNode: me.pveSelNode,
datasource: 'cpu', fields: ['cpu'],
rrdurl: rrdurl fieldTitles: [gettext('CPU usage')],
store: rrdstore
}, },
{ {
xtype: 'pveRRDView', xtype: 'pveRRDChart',
title: gettext('Memory usage'), title: gettext('Memory usage'),
pveSelNode: me.pveSelNode, pveSelNode: me.pveSelNode,
datasource: 'mem,maxmem', fields: ['maxmem', 'mem'],
rrdurl: rrdurl fieldTitles: [gettext('Total'), gettext('RAM usage')],
store: rrdstore
}, },
{ {
xtype: 'pveRRDView', xtype: 'pveRRDChart',
title: gettext('Network traffic'), title: gettext('Network traffic'),
pveSelNode: me.pveSelNode, pveSelNode: me.pveSelNode,
datasource: 'netin,netout', fields: ['netin','netout'],
rrdurl: rrdurl store: rrdstore
}, },
{ {
xtype: 'pveRRDView', xtype: 'pveRRDChart',
title: gettext('Disk IO'), title: gettext('Disk IO'),
pveSelNode: me.pveSelNode, pveSelNode: me.pveSelNode,
datasource: 'diskread,diskwrite', fields: ['diskread','diskwrite'],
rrdurl: rrdurl store: rrdstore
}
],
},
listeners: {
activate: function() {notesview.load(); rrdstore.startUpdate();},
hide: rrdstore.stopUpdate,
destroy: rrdstore.stopUpdate,
} }
]
});
me.on('activate', function() {
notesview.load();
}); });
me.callParent(); me.callParent();