From mboxrd@z Thu Jan 1 00:00:00 1970
Return-Path: <t.lamprecht@proxmox.com>
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 <pbs-devel@lists.proxmox.com>; 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 <pbs-devel@lists.proxmox.com>; 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 <pbs-devel@lists.proxmox.com>; 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 <pbs-devel@lists.proxmox.com>; Mon, 9 Nov 2020 18:55:18 +0100 (CET)
To: Proxmox Backup Server development discussion
<pbs-devel@lists.proxmox.com>, Dominik Csapak <d.csapak@proxmox.com>
References: <20201109150130.4956-1-d.csapak@proxmox.com>
From: Thomas Lamprecht <t.lamprecht@proxmox.com>
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
<pbs-devel.lists.proxmox.com>
List-Unsubscribe: <https://lists.proxmox.com/cgi-bin/mailman/options/pbs-devel>,
<mailto:pbs-devel-request@lists.proxmox.com?subject=unsubscribe>
List-Archive: <http://lists.proxmox.com/pipermail/pbs-devel/>
List-Post: <mailto:pbs-devel@lists.proxmox.com>
List-Help: <mailto:pbs-devel-request@lists.proxmox.com?subject=help>
List-Subscribe: <https://lists.proxmox.com/cgi-bin/mailman/listinfo/pbs-devel>,
<mailto:pbs-devel-request@lists.proxmox.com?subject=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}',
+ },
+ },
+ ],
+ },
+ ],
},
],
});