From mboxrd@z Thu Jan 1 00:00:00 1970 Return-Path: Received: from firstgate.proxmox.com (firstgate.proxmox.com [212.224.123.68]) (using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits) key-exchange X25519 server-signature RSA-PSS (2048 bits) server-digest SHA256) (No client certificate requested) by lists.proxmox.com (Postfix) with ESMTPS id 815C3676E4 for ; Tue, 10 Nov 2020 10:18:10 +0100 (CET) Received: from firstgate.proxmox.com (localhost [127.0.0.1]) by firstgate.proxmox.com (Proxmox) with ESMTP id 726621DAC8 for ; Tue, 10 Nov 2020 10:18:10 +0100 (CET) Received: from proxmox-new.maurer-it.com (proxmox-new.maurer-it.com [212.186.127.180]) (using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits) key-exchange X25519 server-signature RSA-PSS (2048 bits)) (No client certificate requested) by firstgate.proxmox.com (Proxmox) with ESMTPS id 674071DAAD for ; Tue, 10 Nov 2020 10:18:09 +0100 (CET) Received: from proxmox-new.maurer-it.com (localhost.localdomain [127.0.0.1]) by proxmox-new.maurer-it.com (Proxmox) with ESMTP id 2E2C74605B for ; Tue, 10 Nov 2020 10:18:09 +0100 (CET) From: Dominik Csapak To: pbs-devel@lists.proxmox.com Date: Tue, 10 Nov 2020 10:18:06 +0100 Message-Id: <20201110091808.4476-2-d.csapak@proxmox.com> X-Mailer: git-send-email 2.20.1 In-Reply-To: <20201110091808.4476-1-d.csapak@proxmox.com> References: <20201110091808.4476-1-d.csapak@proxmox.com> MIME-Version: 1.0 Content-Transfer-Encoding: 8bit X-SPAM-LEVEL: Spam detection results: 0 AWL 0.381 Adjusted score from AWL reputation of From: address KAM_DMARC_STATUS 0.01 Test Rule for DKIM or SPF Failure with Strict Alignment RCVD_IN_DNSWL_MED -2.3 Sender listed at https://www.dnswl.org/, medium trust SPF_HELO_NONE 0.001 SPF: HELO does not publish an SPF Record SPF_PASS -0.001 SPF: sender matches SPF record Subject: [pbs-devel] [PATCH proxmox-backup 2/4] ui: add panel/UsageChart X-BeenThere: pbs-devel@lists.proxmox.com X-Mailman-Version: 2.1.29 Precedence: list List-Id: Proxmox Backup Server development discussion List-Unsubscribe: , List-Archive: List-Post: List-Help: List-Subscribe: , X-List-Received-Date: Tue, 10 Nov 2020 09:18:10 -0000 heavily inspired by pveRunningChart, without the dynamically adding of data and specific for the usage of datastores Signed-off-by: Dominik Csapak --- www/Makefile | 1 + www/panel/UsageChart.js | 115 ++++++++++++++++++++++++++++++++++++++++ 2 files changed, 116 insertions(+) create mode 100644 www/panel/UsageChart.js diff --git a/www/Makefile b/www/Makefile index bfea32fa..f64d2bba 100644 --- a/www/Makefile +++ b/www/Makefile @@ -44,6 +44,7 @@ JSSRC= \ panel/XtermJsConsole.js \ panel/AccessControl.js \ panel/StorageAndDisks.js \ + panel/UsageChart.js \ ZFSList.js \ DirectoryList.js \ LoginView.js \ diff --git a/www/panel/UsageChart.js b/www/panel/UsageChart.js new file mode 100644 index 00000000..87f1200d --- /dev/null +++ b/www/panel/UsageChart.js @@ -0,0 +1,115 @@ +Ext.define('PBS.widget.UsageChart', { + extend: 'Ext.container.Container', + alias: 'widget.pbsUsageChart', + + layout: { + type: 'hbox', + align: 'center', + }, + + items: [ + { + width: 80, + xtype: 'box', + itemId: 'title', + data: { + title: '', + }, + tpl: '

{title}:

', + }, + { + flex: 1, + xtype: 'cartesian', + height: '100%', + itemId: 'chart', + border: false, + axes: [ + { + type: 'numeric', + position: 'right', + hidden: true, + minimum: 0, + }, + { + type: 'time', + position: 'bottom', + hidden: true, + }, + ], + + store: { + trackRemoved: false, + data: {}, + }, + + series: [{ + type: 'line', + xField: 'time', + yField: 'val', + fill: 'true', + colors: ['#cfcfcf'], + tooltip: { + trackMouse: true, + renderer: function(tooltip, record, ctx) { + if (!record || !record.data) return; + let date = new Date(record.data.time); + let value = (100*record.data.val).toFixed(2); + tooltip.setHtml( + `${value} %
+ ${date}`, + ); + }, + }, + style: { + lineWidth: 1.5, + opacity: 0.60, + }, + marker: { + opacity: 0, + scaling: 0.01, + fx: { + duration: 200, + easing: 'easeOut', + }, + }, + highlightCfg: { + opacity: 1, + scaling: 1.5, + }, + }], + }, + ], + + setData: function(data) { + let me = this; + let chart = me.chart; + chart.store.setData(data); + chart.redraw(); + }, + + // the renderer for the tooltip and last value, default just the value + renderer: Ext.identityFn, + + setTitle: function(title) { + let me = this; + me.title = title; + me.getComponent('title').update({ title: title }); + }, + + initComponent: function() { + var me = this; + me.callParent(); + + if (me.title) { + me.getComponent('title').update({ title: me.title }); + } + me.chart = me.getComponent('chart'); + me.chart.timeaxis = me.chart.getAxes()[1]; + if (me.color) { + me.chart.series[0].setStyle({ + fill: me.color, + stroke: me.color, + }); + } + }, +}); -- 2.20.1