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>

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, {
+	var rrdstore = Ext.create('PVE.data.RRDStore', {
-	    tbar: [
+	    rrdurl: "/api2/json/nodes/" + nodename + "/lxc/" + vmid + "/rrddata"
-		'->',
-		{
-		    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
-		}
-	    ]
 	});
 
-	me.on('activate', function() {
+	Ext.apply(me, {
-	    notesview.load();
+	    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();

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: [
+	    plugins: {
-		statusview,
+		ptype: 'lazyitems',
-		{
+		items: [
-		    xtype: 'pveRRDView',
+		    statusview,
-		    title: gettext('CPU usage'),
+		    {
-		    datasource: 'cpu,iowait',
+			xtype: 'pveRRDChart',
-		    rrdurl: rrdurl
+			title: gettext('CPU usage'),
-		},
+			fields: ['cpu','iowait'],
-		{
+			fieldTitles: [gettext('CPU usage'), gettext('IO delay')],
-		    xtype: 'pveRRDView',
+			store: rrdstore
-		    title: gettext('Server load'),
+		    },
-		    datasource: 'loadavg',
+		    {
-		    rrdurl: rrdurl
+			xtype: 'pveRRDChart',
-		},
+			title: gettext('Server load'),
-		{
+			fields: ['loadavg'],
-		    xtype: 'pveRRDView',
+			fieldTitles: [gettext('Load average')],
-		    title: gettext('Memory usage'),
+			store: rrdstore
-		    datasource: 'memtotal,memused',
+		    },
-		    rrdurl: rrdurl
+		    {
-		},
+			xtype: 'pveRRDChart',
-		{
+			title: gettext('Memory usage'),
-		    xtype: 'pveRRDView',
+			fields: ['memtotal','memused'],
-		    title: gettext('Network traffic'),
+			fieldTitles: [gettext('Total'), gettext('RAM usage')],
-		    datasource: 'netin,netout',
+			store: rrdstore
-		    rrdurl: rrdurl
+		    },
-		}
+		    {
-	    ],
+			xtype: 'pveRRDChart',
+			title: gettext('Network traffic'),
+			fields: ['netin','netout'],
+			store: rrdstore
+		    },
+		],
+	    },
 	    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(); },
 	    }
 	});
 

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, {
+	var rrdstore = Ext.create('PVE.data.RRDStore', {
-	    items: [
+	    rrdurl: "/api2/json/nodes/" + nodename + "/qemu/" + vmid + "/rrddata",
-		{
-		    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
-		}
-	    ]
 	});
 
-	me.on('activate', function() {
+	Ext.apply(me, {
-	    notesview.load();
+	    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();