[pve-devel] [PATCH manager v2 10/22] use RRDChart and RRDStore from widget toolkit

Dominik Csapak d.csapak at proxmox.com
Mon Jan 15 15:17:58 CET 2018


also remove old unused RRDView

Signed-off-by: Dominik Csapak <d.csapak at proxmox.com>
---
 www/manager6/Makefile           |   3 -
 www/manager6/data/RRDStore.js   | 119 -------------------------
 www/manager6/lxc/Summary.js     |  13 +--
 www/manager6/node/Summary.js    |  13 +--
 www/manager6/panel/RRDChart.js  | 187 ----------------------------------------
 www/manager6/panel/RRDView.js   | 112 ------------------------
 www/manager6/qemu/Summary.js    |  13 +--
 www/manager6/storage/Summary.js |   7 +-
 8 files changed, 25 insertions(+), 442 deletions(-)
 delete mode 100644 www/manager6/data/RRDStore.js
 delete mode 100644 www/manager6/panel/RRDChart.js
 delete mode 100644 www/manager6/panel/RRDView.js

diff --git a/www/manager6/Makefile b/www/manager6/Makefile
index 13ab2e88..a52ebdfb 100644
--- a/www/manager6/Makefile
+++ b/www/manager6/Makefile
@@ -25,7 +25,6 @@ JSSRC= 				                 	\
 	data/DiffStore.js				\
 	data/ObjectStore.js				\
 	data/ResourceStore.js				\
-	data/RRDStore.js				\
 	data/model/RRDModels.js				\
 	form/VLanField.js				\
 	form/Checkbox.js				\
@@ -79,8 +78,6 @@ JSSRC= 				                 	\
 	panel/StatusPanel.js				\
 	panel/StatusView.js				\
 	panel/GuestStatusView.js			\
-	panel/RRDView.js				\
-	panel/RRDChart.js				\
 	panel/RunningChart.js				\
 	panel/InfoWidget.js				\
 	panel/TemplateStatusView.js			\
diff --git a/www/manager6/data/RRDStore.js b/www/manager6/data/RRDStore.js
deleted file mode 100644
index f9f80685..00000000
--- a/www/manager6/data/RRDStore.js
+++ /dev/null
@@ -1,119 +0,0 @@
-/* Extends the PVE.data.UpdateStore type
- *
- *
- */
-Ext.define('PVE.data.RRDStore', {
-    extend: 'PVE.data.UpdateStore',
-    alias: 'store.pveRRDStore',
-
-    setRRDUrl: function(timeframe, cf) {
-	var me = this;
-	if (!timeframe) {
-	    timeframe = me.timeframe;
-	}
-
-	if (!cf) {
-	    cf = me.cf;
-	}
-
-	me.proxy.url = me.rrdurl + "?timeframe=" + timeframe + "&cf=" + cf;
-    },
-
-    proxy: {
-	type: 'pve'
-    },
-    fields: [
-	// node rrd fields
-	{
-	    name:'cpu',
-	    // percentage
-	    convert: function(value) {
-		return value*100;
-	    }
-	},
-	{
-	    name:'iowait',
-	    // percentage
-	    convert: function(value) {
-		return value*100;
-	    }
-	},
-	'loadavg',
-	'maxcpu',
-	'memtotal',
-	'memused',
-	'netin',
-	'netout',
-	'roottotal',
-	'rootused',
-	'swaptotal',
-	'swapused',
-	'time',
-
-	// missing qemu/lxc fields
-	'maxmem',
-	'mem',
-	'disk',
-	'diskread',
-	'diskwrite',
-	'maxdisk',
-
-	// missing storage fields
-	'used',
-	'total',
-
-	// for time we generate unix timestamps, javascript uses milliseconds instead of seconds
-	{ name:'time', convert: function(value) { return value*1000; }}
-    ],
-    sorters: 'time',
-    timeframe: 'hour',
-    cf: 'AVERAGE',
-
-    constructor: function(config) {
-	var me = this;
-
-	config = config || {};
-
-	// set default interval to 30seconds
-	if (!config.interval) {
-	    config.interval = 30000;
-	}
-
-	// set a new storeid
-	if (!config.storeid) {
-	    config.storeid = 'rrdstore-' + (++Ext.idSeed);
-	}
-
-	// rrdurl is required
-	if (!config.rrdurl) {
-	    throw "no rrdurl specified";
-	}
-
-	var stateid = 'pveRRDTypeSelection';
-	var sp = Ext.state.Manager.getProvider();
-	var stateinit = sp.get(stateid);
-
-        if (stateinit) {
-	    if(stateinit.timeframe !== me.timeframe || stateinit.cf !== me.rrdcffn){
-		me.timeframe = stateinit.timeframe;
-		me.rrdcffn = stateinit.cf;
-	    }
-	}
-
-	me.callParent([config]);
-
-	me.setRRDUrl();
-	me.mon(sp, 'statechange', function(prov, key, state){
-	    if (key === stateid) {
-		if (state && state.id) {
-		    if (state.timeframe !== me.timeframe || state.cf !== me.cf) {
-		        me.timeframe = state.timeframe;
-		        me.cf = state.cf;
-			me.setRRDUrl();
-			me.reload();
-		    }
-		}
-	    }
-	});
-    }
-});
diff --git a/www/manager6/lxc/Summary.js b/www/manager6/lxc/Summary.js
index e9292b2b..8d05fc0c 100644
--- a/www/manager6/lxc/Summary.js
+++ b/www/manager6/lxc/Summary.js
@@ -68,8 +68,9 @@ Ext.define('PVE.lxc.Summary', {
 		}
 	    });
 	} else {
-	    var rrdstore = Ext.create('PVE.data.RRDStore', {
-		rrdurl: "/api2/json/nodes/" + nodename + "/lxc/" + vmid + "/rrddata"
+	    var rrdstore = Ext.create('Proxmox.data.RRDStore', {
+		rrdurl: "/api2/json/nodes/" + nodename + "/lxc/" + vmid + "/rrddata",
+		model: 'pve-rrd-guest'
 	    });
 
 	    Ext.apply(me, {
@@ -105,7 +106,7 @@ Ext.define('PVE.lxc.Summary', {
 				    ]
 				},
 				{
-				    xtype: 'pveRRDChart',
+				    xtype: 'proxmoxRRDChart',
 				    title: gettext('CPU usage'),
 				    pveSelNode: me.pveSelNode,
 				    fields: ['cpu'],
@@ -113,7 +114,7 @@ Ext.define('PVE.lxc.Summary', {
 				    store: rrdstore
 				},
 				{
-				    xtype: 'pveRRDChart',
+				    xtype: 'proxmoxRRDChart',
 				    title: gettext('Memory usage'),
 				    pveSelNode: me.pveSelNode,
 				    fields: ['maxmem', 'mem'],
@@ -121,14 +122,14 @@ Ext.define('PVE.lxc.Summary', {
 				    store: rrdstore
 				},
 				{
-				    xtype: 'pveRRDChart',
+				    xtype: 'proxmoxRRDChart',
 				    title: gettext('Network traffic'),
 				    pveSelNode: me.pveSelNode,
 				    fields: ['netin','netout'],
 				    store: rrdstore
 				},
 				{
-				    xtype: 'pveRRDChart',
+				    xtype: 'proxmoxRRDChart',
 				    title: gettext('Disk IO'),
 				    pveSelNode: me.pveSelNode,
 				    fields: ['diskread','diskwrite'],
diff --git a/www/manager6/node/Summary.js b/www/manager6/node/Summary.js
index 6e67b74a..20600dfc 100644
--- a/www/manager6/node/Summary.js
+++ b/www/manager6/node/Summary.js
@@ -87,8 +87,9 @@ Ext.define('PVE.node.Summary', {
 	    }
 	});
 
-	var rrdstore = Ext.create('PVE.data.RRDStore', {
-	    rrdurl: "/api2/json/nodes/" + nodename + "/rrddata"
+	var rrdstore = Ext.create('Proxmox.data.RRDStore', {
+	    rrdurl: "/api2/json/nodes/" + nodename + "/rrddata",
+	    model: 'pve-rrd-node'
 	});
 
 	Ext.apply(me, {
@@ -110,28 +111,28 @@ Ext.define('PVE.node.Summary', {
 				pveSelNode: me.pveSelNode
 			    },
 			    {
-				xtype: 'pveRRDChart',
+				xtype: 'proxmoxRRDChart',
 				title: gettext('CPU usage'),
 				fields: ['cpu','iowait'],
 				fieldTitles: [gettext('CPU usage'), gettext('IO delay')],
 				store: rrdstore
 			    },
 			    {
-				xtype: 'pveRRDChart',
+				xtype: 'proxmoxRRDChart',
 				title: gettext('Server load'),
 				fields: ['loadavg'],
 				fieldTitles: [gettext('Load average')],
 				store: rrdstore
 			    },
 			    {
-				xtype: 'pveRRDChart',
+				xtype: 'proxmoxRRDChart',
 				title: gettext('Memory usage'),
 				fields: ['memtotal','memused'],
 				fieldTitles: [gettext('Total'), gettext('RAM usage')],
 				store: rrdstore
 			    },
 			    {
-				xtype: 'pveRRDChart',
+				xtype: 'proxmoxRRDChart',
 				title: gettext('Network traffic'),
 				fields: ['netin','netout'],
 				store: rrdstore
diff --git a/www/manager6/panel/RRDChart.js b/www/manager6/panel/RRDChart.js
deleted file mode 100644
index 4cb6dcda..00000000
--- a/www/manager6/panel/RRDChart.js
+++ /dev/null
@@ -1,187 +0,0 @@
-Ext.define('PVE.widget.RRDChart', {
-    extend: 'Ext.chart.CartesianChart',
-    alias: 'widget.pveRRDChart',
-
-
-    width: 770,
-    height: 300,
-    animation: false,
-    interactions: [{
-	type: 'crosszoom'
-    }],
-    axes: [{
-	type: 'numeric',
-	position: 'left',
-	grid: true,
-	renderer: 'leftAxisRenderer',
-	minimum: 0
-    }, {
-	type: 'time',
-	position: 'bottom',
-	grid: true,
-	fields: ['time']
-    }],
-    legend: {
-	docked: 'bottom'
-    },
-    listeners: {
-	animationend: 'onAfterAnimation'
-    },
-
-    bytesArr : [
-	'memtotal',
-	'memused',
-	'roottotal',
-	'rootused',
-	'swaptotal',
-	'swapused',
-	'maxmem',
-	'mem',
-	'disk',
-	'maxdisk',
-	'total',
-	'used'
-    ],
-    bytespersArr: [
-	'netin',
-	'netout',
-	'diskread',
-	'diskwrite'
-    ],
-
-    percentArr: [
-	'cpu',
-	'iowait'
-    ],
-
-    convertToUnits: function(value) {
-	var units = ['', 'k','M','G','T', 'P'];
-	var si = 0;
-	while(value >= 1000  && si < (units.length -1)){
-	    value = value / 1000;
-	    si++;
-	}
-	// javascript floating point weirdness
-	value = Ext.Number.correctFloat(value);
-
-	// limit to 2 decimal points
-	value = Ext.util.Format.number(value, "0.##");
-
-	return value.toString() + " " + units[si];
-    },
-
-    leftAxisRenderer: function(axis, label, layoutContext) {
-	var me = this;
-	return me.convertToUnits(label);
-    },
-
-    onSeriesTooltipRender: function (tooltip, record, item) {
-	var me = this;
-	var suffix = '';
-
-	if (me.percentArr.indexOf(item.field) != -1) {
-	    suffix = '%';
-	} else if (me.bytesArr.indexOf(item.field) != -1) {
-	    suffix = 'B';
-	} else if (me.bytespersArr.indexOf(item.field) != -1) {
-	    suffix = 'B/s';
-	}
-
-	var prefix = item.field;
-	if (me.fieldTitles && me.fieldTitles[me.fields.indexOf(item.field)]) {
-	    prefix = me.fieldTitles[me.fields.indexOf(item.field)];
-	}
-        tooltip.setHtml(prefix + ': ' + this.convertToUnits(record.get(item.field)) + suffix +
-	    '<br>' + new Date(record.get('time')));
-    },
-
-    onAfterAnimation: function(chart, eopts) {
-	// if the undobuton is disabled,
-	// disable our tool
-	var ourUndoZoomButton = chart.tools[0];
-	var undoButton = chart.interactions[0].getUndoButton();
-	ourUndoZoomButton.setDisabled(undoButton.isDisabled());
-    },
-
-    initComponent: function() {
-	var me = this;
-
-	if (!me.store) {
-	    throw "cannot work without store";
-	}
-
-	if (!me.fields) {
-	    throw "cannot work without fields";
-	}
-
-	me.callParent();
-
-	// add correct label for left axis
-	var axisTitle = "";
-	if (me.percentArr.indexOf(me.fields[0]) != -1) {
-	    axisTitle = "%";
-	} else if (me.bytesArr.indexOf(me.fields[0]) != -1) {
-	    axisTitle = "Bytes";
-	} else if (me.bytespersArr.indexOf(me.fields[0]) != -1) {
-	    axisTitle = "Bytes/s";
-	}
-	me.axes[0].setTitle(axisTitle);
-
-	me.addTool([{
-	    type: 'minus',
-	    disabled: true,
-	    tooltip: gettext('Undo Zoom'),
-	    handler: function(){
-		var undoButton = me.interactions[0].getUndoButton();
-		if (undoButton.handler) {
-		    undoButton.handler();
-		}
-	    }
-	},{
-	    type: 'restore',
-	    tooltip: gettext('Toggle Legend'),
-	    handler: function(){
-		me.legend.setVisible(!me.legend.isVisible());
-	    }
-	}]);
-	// add a series for each field we get
-	me.fields.forEach(function(item, index){
-	    var title = item;
-	    if (me.fieldTitles && me.fieldTitles[index]) {
-		title = me.fieldTitles[index];
-	    }
-	    me.addSeries({
-		type: 'line',
-		xField: 'time',
-		yField: item,
-		title: title,
-		fill: true,
-		style: {
-		    lineWidth: 1.5,
-		    opacity: 0.60
-		},
-		marker: {
-		    opacity: 0,
-		    scaling: 0.01,
-		    fx: {
-			duration: 200,
-			easing: 'easeOut'
-		    }
-		},
-		highlightCfg: {
-		    opacity: 1,
-		    scaling: 1.5
-		},
-		tooltip: {
-		    trackMouse: true,
-		    renderer: 'onSeriesTooltipRender'
-		}
-	    });
-	});
-
-	// enable animation after the store is loaded
-	me.store.onAfter('load', function() {
-	    me.setAnimation(true);
-	}, this, {single: true});
-    }
-});
diff --git a/www/manager6/panel/RRDView.js b/www/manager6/panel/RRDView.js
deleted file mode 100644
index 9fd3c47a..00000000
--- a/www/manager6/panel/RRDView.js
+++ /dev/null
@@ -1,112 +0,0 @@
-Ext.define('PVE.panel.RRDView', {
-    extend: 'Ext.panel.Panel',
-    alias: 'widget.pveRRDView',
-
-    initComponent : function() {
-	var me = this;
-
-	if (!me.datasource) {
-	    throw "no datasource specified";
-	}
-
-	if (!me.rrdurl) {
-	    throw "no rrdurl specified";
-	}
-
-	var stateid = 'pveRRDTypeSelection';
-	var sp = Ext.state.Manager.getProvider();
-	var stateinit = sp.get(stateid);
-
-        if (stateinit) {
-	    if(stateinit.timeframe !== me.timeframe || stateinit.cf !== me.rrdcffn){
-		me.timeframe = stateinit.timeframe;
-		me.rrdcffn = stateinit.cf;
-	    }
-	}
-
-	if (!me.timeframe) {
-	    if(stateinit && stateinit.timeframe){
-		me.timeframe = stateinit.timeframe;
-	    }else{
-		me.timeframe = 'hour';
-	    }
-	}
-
-	if (!me.rrdcffn) {
-	    if(stateinit && stateinit.rrdcffn){
-		me.rrdcffn = stateinit.cf;
-	    }else{
-		me.rrdcffn = 'AVERAGE';
-	    }
-	}
-
-
-	var datasource = me.datasource;
-
-	// fixme: dcindex??
-	var dcindex = 0;
-	var create_url = function() {
-	    var url = me.rrdurl + "?ds=" + datasource + 
-		"&timeframe=" + me.timeframe + "&cf=" + me.rrdcffn +
-		"&_dc=" + dcindex.toString();
-	    dcindex++;
-	    return url;
-	};
-
-
-	Ext.apply(me, {
-	    layout: 'fit',
-	    html: {
-		tag: 'img',
-		width: 800,
-		height: 200,
-		src:  create_url()
-	    },
-	    applyState : function(state) {
-		if (state && state.id) {
-		    if(state.timeframe !== me.timeframe || state.cf !== me.rrdcffn){
-		        me.timeframe = state.timeframe;
-		        me.rrdcffn = state.cf;
-		        me.reload_task.delay(10);
-		    }
-		}
-	    }
-	});
-	
-	me.callParent();
-   
-	me.reload_task = new Ext.util.DelayedTask(function() {
-	    if (me.rendered) {
-		try {
-		    var html = {
-			tag: 'img',
-			width: 800,
-			height: 200,
-			src:  create_url()
-		    };
-		    me.update(html);
-		} catch (e) {
-		    // fixme:
-		    console.log(e);
-		}
-		me.reload_task.delay(30000);
-	    } else {
-		me.reload_task.delay(1000);
-	    }
-	});
-
-	me.reload_task.delay(30000);
-
-	me.on('destroy', function() {
-	    me.reload_task.cancel();
-	});
-
-	var state_change_fn = function(prov, key, value) {
-	    if (key == stateid) {
-		me.applyState(value);
-	    }
-	};
-
-	me.mon(sp, 'statechange', state_change_fn);
-    }
-});
diff --git a/www/manager6/qemu/Summary.js b/www/manager6/qemu/Summary.js
index e0838b62..ff145815 100644
--- a/www/manager6/qemu/Summary.js
+++ b/www/manager6/qemu/Summary.js
@@ -75,8 +75,9 @@ Ext.define('PVE.qemu.Summary', {
 	    });
 
 	} else {
-	    var rrdstore = Ext.create('PVE.data.RRDStore', {
-		rrdurl: "/api2/json/nodes/" + nodename + "/qemu/" + vmid + "/rrddata"
+	    var rrdstore = Ext.create('Proxmox.data.RRDStore', {
+		rrdurl: "/api2/json/nodes/" + nodename + "/qemu/" + vmid + "/rrddata",
+		model: 'pve-rrd-guest'
 	    });
 
 	    Ext.apply(me, {
@@ -112,7 +113,7 @@ Ext.define('PVE.qemu.Summary', {
 				    ]
 				},
 				{
-				    xtype: 'pveRRDChart',
+				    xtype: 'proxmoxRRDChart',
 				    title: gettext('CPU usage'),
 				    pveSelNode: me.pveSelNode,
 				    fields: ['cpu'],
@@ -120,7 +121,7 @@ Ext.define('PVE.qemu.Summary', {
 				    store: rrdstore
 				},
 				{
-				    xtype: 'pveRRDChart',
+				    xtype: 'proxmoxRRDChart',
 				    title: gettext('Memory usage'),
 				    pveSelNode: me.pveSelNode,
 				    fields: ['maxmem', 'mem'],
@@ -128,14 +129,14 @@ Ext.define('PVE.qemu.Summary', {
 				    store: rrdstore
 				},
 				{
-				    xtype: 'pveRRDChart',
+				    xtype: 'proxmoxRRDChart',
 				    title: gettext('Network traffic'),
 				    pveSelNode: me.pveSelNode,
 				    fields: ['netin','netout'],
 				    store: rrdstore
 				},
 				{
-				    xtype: 'pveRRDChart',
+				    xtype: 'proxmoxRRDChart',
 				    title: gettext('Disk IO'),
 				    pveSelNode: me.pveSelNode,
 				    fields: ['diskread','diskwrite'],
diff --git a/www/manager6/storage/Summary.js b/www/manager6/storage/Summary.js
index 2101549c..a94d8170 100644
--- a/www/manager6/storage/Summary.js
+++ b/www/manager6/storage/Summary.js
@@ -37,15 +37,16 @@ Ext.define('PVE.storage.Summary', {
 	    style: {'padding-top':'0px'}
 	});
 
-	var rrdstore = Ext.create('PVE.data.RRDStore', {
-	    rrdurl:  "/api2/json/nodes/" + nodename + "/storage/" + storage + "/rrddata"
+	var rrdstore = Ext.create('Proxmox.data.RRDStore', {
+	    rrdurl:  "/api2/json/nodes/" + nodename + "/storage/" + storage + "/rrddata",
+	    model: 'pve-rrd-storage'
 	});
 
 	Ext.apply(me, {
 	    items: [
 		statusview,
 		{
-		    xtype: 'pveRRDChart',
+		    xtype: 'proxmoxRRDChart',
 		    title: gettext('Usage'),
 		    fields: ['total','used'],
 		    fieldTitles: ['Total Size', 'Used Size'],
-- 
2.11.0





More information about the pve-devel mailing list