mirror of
https://git.proxmox.com/git/pve-manager
synced 2025-05-28 03:02:36 +00:00
ext6migrate: use new charts for node/lxc/qemu
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
Dietmar Maurer
parent
7b9c038d54
commit
13af4d510f
@ -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();
|
||||
|
||||
@ -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(); },
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@ -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();
|
||||
|
||||
Loading…
Reference in New Issue
Block a user