[pve-devel] [PATCH manager 10/19] use RRDChart and RRDStore from widget toolkit
Dominik Csapak
d.csapak at proxmox.com
Thu Dec 21 13:36:13 CET 2017
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 90f56c3c..e456aae4 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/models/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