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)) (No client certificate requested) by lists.proxmox.com (Postfix) with ESMTPS id 9C86B676E5 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 98CF41DAC9 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 951E61DABA 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 540F446024 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:08 +0100 Message-Id: <20201110091808.4476-4-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.380 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 4/4] ui: Datastores Summary: change layout and chart 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 changes the layout to look i little bit more like the statistics panel we have for ceph in pve, while changing to the UsageChart and adding some more datastore infos (from last garbage collect) Signed-off-by: Dominik Csapak --- www/datastore/DataStoreListSummary.js | 128 ++++++++++++-------------- 1 file changed, 61 insertions(+), 67 deletions(-) diff --git a/www/datastore/DataStoreListSummary.js b/www/datastore/DataStoreListSummary.js index 67d01e16..778bbac8 100644 --- a/www/datastore/DataStoreListSummary.js +++ b/www/datastore/DataStoreListSummary.js @@ -7,21 +7,20 @@ Ext.define('PBS.datastore.DataStoreListSummary', { cbind: { title: '{datastore}', }, + + referenceHolder: true, bodyPadding: 10, - controller: { - xclass: 'Ext.app.ViewController', + layout: { + type: 'hbox', + align: 'stretch', }, + viewModel: { data: { full: "N/A", - history: [], - }, - - stores: { - historystore: { - data: [], - }, + stillbad: 0, + deduplication: 1.0, }, }, setTasks: function(taskdata, since) { @@ -44,46 +43,53 @@ Ext.define('PBS.datastore.DataStoreListSummary', { let estimate = PBS.Utils.render_estimate(statusData['estimated-full-date']); vm.set('full', estimate); + vm.set('deduplication', PBS.Utils.calculate_dedup_factor(statusData['gc-status']).toFixed(2)); + vm.set('stillbad', statusData['gc-status']['still-bad']); + let last = 0; + let time = statusData['history-start']; + let delta = statusData['history-delta']; let data = statusData.history.map((val) => { if (val === null) { val = last; } else { last = val; } - return val; + let entry = { + time: time*1000, // js Dates are ms since epoch + val, + }; + + time += delta; + return entry; }); - let historyStore = vm.getStore('historystore'); - historyStore.setData([ - { - history: data, - }, - ]); + + me.lookup('historychart').setData(data); }, items: [ { xtype: 'container', layout: { - type: 'hbox', + type: 'vbox', align: 'stretch', }, - defaults: { - padding: 5, - }, + width: 350, + padding: 10, items: [ { - xtype: 'panel', - border: false, + xtype: 'proxmoxGauge', + warningThreshold: 0.8, + criticalThreshold: 0.95, flex: 1, + reference: 'usage', }, { xtype: 'pmxInfoWidget', iconCls: 'fa fa-fw fa-line-chart', title: gettext('Estimated Full'), - width: 230, printBar: false, bind: { data: { @@ -91,64 +97,52 @@ Ext.define('PBS.datastore.DataStoreListSummary', { }, }, }, - ], - }, - { - // we cannot autosize a sparklineline widget, - // abuse a grid with a single column/row to do it for us - xtype: 'grid', - hideHeaders: true, - minHeight: 70, - border: false, - bodyBorder: false, - rowLines: false, - disableSelection: true, - viewConfig: { - trackOver: false, - }, - bind: { - store: '{historystore}', - }, - columns: [{ - xtype: 'widgetcolumn', - flex: 1, - dataIndex: 'history', - widget: { - xtype: 'sparklineline', - bind: '{record.history}', - spotRadius: 0, - fillColor: '#ddd', - lineColor: '#555', - lineWidth: 0, - chartRangeMin: 0, - chartRangeMax: 1, - tipTpl: '{y:number("0.00")*100}%', - height: 60, + { + xtype: 'pmxInfoWidget', + iconCls: 'fa fa-fw fa-compress', + title: gettext('Deduplication Factor'), + printBar: false, + bind: { + data: { + text: '{deduplication}', + }, + }, }, - }], + { + xtype: 'pmxInfoWidget', + iconCls: 'fa critical fa-fw fa-exclamation-triangle', + title: gettext('Bad Chunks'), + printBar: false, + hidden: true, + bind: { + data: { + text: '{stillbad}', + }, + visible: '{stillbad}', + }, + }, + ], }, { xtype: 'container', layout: { - type: 'hbox', + type: 'vbox', align: 'stretch', }, - defaults: { - padding: 5, - }, + flex: 1, items: [ { - xtype: 'proxmoxGauge', - warningThreshold: 0.8, - criticalThreshold: 0.95, - flex: 1, - reference: 'usage', + padding: 5, + xtype: 'pbsUsageChart', + reference: 'historychart', + title: gettext('Usage History'), + height: 100, }, { xtype: 'container', - flex: 2, + flex: 1, layout: { type: 'vbox', align: 'stretch', -- 2.20.1