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 B8FEE67518 for ; Mon, 9 Nov 2020 18:55:50 +0100 (CET) Received: from firstgate.proxmox.com (localhost [127.0.0.1]) by firstgate.proxmox.com (Proxmox) with ESMTP id A34FA196D0 for ; Mon, 9 Nov 2020 18:55:20 +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) server-digest SHA256) (No client certificate requested) by firstgate.proxmox.com (Proxmox) with ESMTPS id A47E8196C3 for ; Mon, 9 Nov 2020 18:55:18 +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 69D8446046 for ; Mon, 9 Nov 2020 18:55:18 +0100 (CET) To: Proxmox Backup Server development discussion , Dominik Csapak References: <20201109150130.4956-1-d.csapak@proxmox.com> From: Thomas Lamprecht Message-ID: <1813e06e-7244-3338-3dce-a9d84d7eb6e6@proxmox.com> Date: Mon, 9 Nov 2020 18:55:16 +0100 User-Agent: Mozilla/5.0 (X11; Linux x86_64; rv:83.0) Gecko/20100101 Thunderbird/83.0 MIME-Version: 1.0 In-Reply-To: <20201109150130.4956-1-d.csapak@proxmox.com> Content-Type: text/plain; charset=UTF-8 Content-Language: en-US Content-Transfer-Encoding: quoted-printable X-SPAM-LEVEL: Spam detection results: 0 AWL -1.258 Adjusted score from AWL reputation of From: address KAM_DMARC_STATUS 0.01 Test Rule for DKIM or SPF Failure with Strict Alignment 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] applied series: [PATCH proxmox-backup 00/10] add Datastore overview panel 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: Mon, 09 Nov 2020 17:55:50 -0000 On 09.11.20 16:01, Dominik Csapak wrote: > this make 'Datastore' clickable again, and shows an overview > for all datastores, as well as a global sync/verify/acl view >=20 > Dominik Csapak (10): > api2/node/tasks: add check_job_store and use it > ui: refactor render_estimate > ui: refactor render_size_usage to Utils > ui: Utils: add parse_datastore_worker_id > ui: make Sync/VerifyView and Edit usable without datastore > ui: TaskSummary: move state/types/titles out of the controller > ui: TaskSummary: add subPanelModal and datastore parameters > ui: TaskSummary: handle less defined parameters of tasks > ui: add Panels necessary for Datastores Overview > ui: make Datastore clickable again >=20 > src/api2/node/tasks.rs | 47 ++++-- > www/Makefile | 2 + > www/NavigationTree.js | 4 +- > www/Utils.js | 63 +++++++ > www/config/SyncView.js | 8 +- > www/config/VerifyView.js | 8 +- > www/dashboard/DataStoreStatistics.js | 20 +-- > www/dashboard/TaskSummary.js | 90 ++++++---- > www/datastore/DataStoreList.js | 229 ++++++++++++++++++++++++++= > www/datastore/DataStoreListSummary.js | 138 ++++++++++++++++ > www/datastore/Summary.js | 13 +- > www/window/SyncJobEdit.js | 11 +- > www/window/VerifyJobEdit.js | 11 +- > 13 files changed, 552 insertions(+), 92 deletions(-) > create mode 100644 www/datastore/DataStoreList.js > create mode 100644 www/datastore/DataStoreListSummary.js >=20 applied series, thanks! Some observations: * we do not see the datastore in the "all datastore" wide sync/verify job= view, would be helpful to have here. * we could use similar graphs like we have for Ceph reads, writes and IOP= S in PVE? They are IMO quite a bit better looking. * I'd enable "trackOver" for the task summary element, it makes it easier= to relate to different rows, especially if the distance between columns is= such wide. * Maybe using a gauge for the usage and putting it besides the task summa= ry element could be better use of space? E.g., a POC here: 1080p: https://lamprecht.org/dump/scrots/pbs-ds-summary/poc-summary-108= 0p-2020-11-09_18.46.03.png 720p: https://lamprecht.org/dump/scrots/pbs-ds-summary/poc-summary-720= p-2020-11-09_18.46.03.png changes of my hacky, not cleaned up, POC below. ----8<---- diff --git a/www/dashboard/TaskSummary.js b/www/dashboard/TaskSummary.js index 15db49cd..09ee9fd0 100644 --- a/www/dashboard/TaskSummary.js +++ b/www/dashboard/TaskSummary.js @@ -246,7 +246,7 @@ Ext.define('PBS.TaskSummary', { rowLines: false, viewConfig: { stripeRows: false, - trackOver: false, + trackOver: true, }, scrollable: false, disableSelection: true, diff --git a/www/datastore/DataStoreListSummary.js b/www/datastore/DataSt= oreListSummary.js index 2322e62b..8724d220 100644 --- a/www/datastore/DataStoreListSummary.js +++ b/www/datastore/DataStoreListSummary.js @@ -9,6 +9,9 @@ Ext.define('PBS.datastore.DataStoreListSummary', { }, bodyPadding: 10, =20 + controller: { + xclass: 'Ext.app.ViewController', + }, viewModel: { data: { usage: "N/A", @@ -31,7 +34,17 @@ Ext.define('PBS.datastore.DataStoreListSummary', { let me =3D this; let vm =3D me.getViewModel(); vm.set('usagetext', PBS.Utils.render_size_usage(statusData.used, status= Data.total)); - vm.set('usage', statusData.used/statusData.total); + + let usage =3D statusData.used/statusData.total; + vm.set('usage', usage); + + let usagePanel =3D me.lookup('usage'); + let usagetext =3D Ext.String.format(gettext('{0} of {1}'), + Proxmox.Utils.format_size(statusData.used), + Proxmox.Utils.format_size(statusData.total) + ); + usagePanel.updateValue(usage, usagetext); + let estimate =3D PBS.Utils.render_estimate(statusData['estimated-full-d= ate']); vm.set('full', estimate); let last =3D 0; @@ -60,26 +73,20 @@ Ext.define('PBS.datastore.DataStoreListSummary', { }, =20 defaults: { - flex: 1, padding: 5, }, =20 items: [ { - xtype: 'pmxInfoWidget', - iconCls: 'fa fa-fw fa-hdd-o', - title: gettext('Usage'), - bind: { - data: { - usage: '{usage}', - text: '{usagetext}', - }, - }, + xtype: 'panel', + border: false, + flex: 1, }, { xtype: 'pmxInfoWidget', iconCls: 'fa fa-fw fa-line-chart', title: gettext('Estimated Full'), + width: 230, printBar: false, bind: { data: { @@ -125,15 +132,54 @@ Ext.define('PBS.datastore.DataStoreListSummary', { }], }, { - xtype: 'pbsTaskSummary', - border: false, - header: false, - subPanelModal: true, - bodyPadding: 0, - minHeight: 0, - cbind: { - datastore: '{datastore}', + xtype: 'container', + layout: { + type: 'hbox', + align: 'stretch', }, + + defaults: { + padding: 5, + }, + + items: [ + { + xtype: 'proxmoxGauge', + flex: 1, + reference: 'usage', + }, + { + xtype: 'container', + flex: 2, + layout: { + type: 'vbox', + align: 'stretch', + }, + + defaults: { + padding: 5, + }, + + items: [ + { + xtype: 'label', + text: 'Task Summary (last 30 days)', + }, + { + xtype: 'pbsTaskSummary', + border: false, + header: false, + subPanelModal: true, + flex: 2, + bodyPadding: 0, + minHeight: 0, + cbind: { + datastore: '{datastore}', + }, + }, + ], + }, + ], }, ], });