From: Thomas Lamprecht <t.lamprecht@proxmox.com>
To: Proxmox Backup Server development discussion
<pbs-devel@lists.proxmox.com>,
Dominik Csapak <d.csapak@proxmox.com>
Subject: [pbs-devel] applied series: [PATCH proxmox-backup 00/10] add Datastore overview panel
Date: Mon, 9 Nov 2020 18:55:16 +0100 [thread overview]
Message-ID: <1813e06e-7244-3338-3dce-a9d84d7eb6e6@proxmox.com> (raw)
In-Reply-To: <20201109150130.4956-1-d.csapak@proxmox.com>
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
>
> 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
>
> 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
>
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 IOPS 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 summary
element could be better use of space? E.g., a POC here:
1080p: https://lamprecht.org/dump/scrots/pbs-ds-summary/poc-summary-1080p-2020-11-09_18.46.03.png
720p: https://lamprecht.org/dump/scrots/pbs-ds-summary/poc-summary-720p-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/DataStoreListSummary.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,
+ controller: {
+ xclass: 'Ext.app.ViewController',
+ },
viewModel: {
data: {
usage: "N/A",
@@ -31,7 +34,17 @@ Ext.define('PBS.datastore.DataStoreListSummary', {
let me = this;
let vm = me.getViewModel();
vm.set('usagetext', PBS.Utils.render_size_usage(statusData.used, statusData.total));
- vm.set('usage', statusData.used/statusData.total);
+
+ let usage = statusData.used/statusData.total;
+ vm.set('usage', usage);
+
+ let usagePanel = me.lookup('usage');
+ let usagetext = 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 = PBS.Utils.render_estimate(statusData['estimated-full-date']);
vm.set('full', estimate);
let last = 0;
@@ -60,26 +73,20 @@ Ext.define('PBS.datastore.DataStoreListSummary', {
},
defaults: {
- flex: 1,
padding: 5,
},
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}',
+ },
+ },
+ ],
+ },
+ ],
},
],
});
next prev parent reply other threads:[~2020-11-09 17:55 UTC|newest]
Thread overview: 13+ messages / expand[flat|nested] mbox.gz Atom feed top
2020-11-09 15:01 [pbs-devel] " Dominik Csapak
2020-11-09 15:01 ` [pbs-devel] [PATCH proxmox-backup 01/10] api2/node/tasks: add check_job_store and use it Dominik Csapak
2020-11-09 15:01 ` [pbs-devel] [PATCH proxmox-backup 02/10] ui: refactor render_estimate Dominik Csapak
2020-11-09 15:01 ` [pbs-devel] [PATCH proxmox-backup 03/10] ui: refactor render_size_usage to Utils Dominik Csapak
2020-11-09 15:01 ` [pbs-devel] [PATCH proxmox-backup 04/10] ui: Utils: add parse_datastore_worker_id Dominik Csapak
2020-11-09 15:01 ` [pbs-devel] [PATCH proxmox-backup 05/10] ui: make Sync/VerifyView and Edit usable without datastore Dominik Csapak
2020-11-09 15:01 ` [pbs-devel] [PATCH proxmox-backup 06/10] ui: TaskSummary: move state/types/titles out of the controller Dominik Csapak
2020-11-09 15:01 ` [pbs-devel] [PATCH proxmox-backup 07/10] ui: TaskSummary: add subPanelModal and datastore parameters Dominik Csapak
2020-11-09 15:01 ` [pbs-devel] [PATCH proxmox-backup 08/10] ui: TaskSummary: handle less defined parameters of tasks Dominik Csapak
2020-11-09 15:01 ` [pbs-devel] [PATCH proxmox-backup 09/10] ui: add Panels necessary for Datastores Overview Dominik Csapak
2020-11-09 15:01 ` [pbs-devel] [PATCH proxmox-backup 10/10] ui: make Datastore clickable again Dominik Csapak
2020-11-09 17:55 ` Thomas Lamprecht [this message]
2020-11-09 18:28 ` [pbs-devel] applied series: [PATCH proxmox-backup 00/10] add Datastore overview panel Thomas Lamprecht
Reply instructions:
You may reply publicly to this message via plain-text email
using any one of the following methods:
* Save the following mbox file, import it into your mail client,
and reply-to-all from there: mbox
Avoid top-posting and favor interleaved quoting:
https://en.wikipedia.org/wiki/Posting_style#Interleaved_style
* Reply using the --to, --cc, and --in-reply-to
switches of git-send-email(1):
git send-email \
--in-reply-to=1813e06e-7244-3338-3dce-a9d84d7eb6e6@proxmox.com \
--to=t.lamprecht@proxmox.com \
--cc=d.csapak@proxmox.com \
--cc=pbs-devel@lists.proxmox.com \
/path/to/YOUR_REPLY
https://kernel.org/pub/software/scm/git/docs/git-send-email.html
* If your mail client supports setting the In-Reply-To header
via mailto: links, try the mailto: link
Be sure your reply has a Subject: header at the top and a blank line
before the message body.
This is a public inbox, see mirroring instructions
for how to clone and mirror all data and code used for this inbox