From 13af4d510f95ea2d7bf6fdca143373b96908afbb Mon Sep 17 00:00:00 2001 From: Dominik Csapak Date: Thu, 31 Mar 2016 10:30:20 +0200 Subject: [PATCH] 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 --- 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 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();