From 5536d678cb0956bb7e41ad4cf0bc92287fc4c95e Mon Sep 17 00:00:00 2001 From: Dominik Csapak Date: Mon, 15 Jan 2018 15:17:58 +0100 Subject: [PATCH] use RRDChart and RRDStore from widget toolkit also remove old unused RRDView Signed-off-by: Dominik Csapak Reviewed-by: Thomas Lamprecht --- 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 + - '
' + 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.39.2