[pbs-devel] applied series: [PATCH proxmox-backup 00/10] add Datastore overview panel

[Thomas Lamprecht <t.lamprecht@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}',
+			    },
+			},
+		    ],
+		},
+	    ],
 	},
     ],
 });