diff --git a/www/manager6/lxc/Summary.js b/www/manager6/lxc/Summary.js index 878f5465..35cd10b6 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 b01f8483..5bc032d6 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 a71b4fd0..189e6bec 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();