From 7a23a7ca5d318bcb85f28cc761425b6c08ed0e08 Mon Sep 17 00:00:00 2001
From: Dominik Csapak <d.csapak@proxmox.com>
Date: Mon, 22 Apr 2024 13:05:04 +0200
Subject: [PATCH] ui: prune/gc view: improve sizing & scrolling behaviour

before, this was only used where the top list was a fixed size and only
for one datastore (which limits the number of prune jobs a bit)

since now we show gc jobs for all datastores here too and all their
prune jobs, this panel can get much bigger.

To improve it's scrolling sizing behavior, make the prune jobs panel
`flex: 1`, so it fills out the rest of the view, and add a splitter
between them so one can resize them on the fly. To prevent making one of
the panels too small, set an appropriate minHeight for both and make the
surrounding panel scrollable.

To not save the height into it's state, we have to filter that out for
the GCView.

Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
 www/config/GCView.js     |  5 +++++
 www/config/PruneAndGC.js | 10 +++++++++-
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/www/config/GCView.js b/www/config/GCView.js
index de43bc25..76fb262e 100644
--- a/www/config/GCView.js
+++ b/www/config/GCView.js
@@ -107,6 +107,10 @@ Ext.define('PBS.config.GCJobView', {
 	stopStore: function() { this.getView().getStore().rstore.stopUpdate(); },
 	reload: function() { this.getView().getStore().rstore.load(); },
 
+
+	filterState: function(view, state) {
+	    delete state.height;
+	},
     },
 
     listeners: {
@@ -114,6 +118,7 @@ Ext.define('PBS.config.GCJobView', {
 	beforedestroy: 'stopStore',
 	deactivate: 'stopStore',
 	itemdblclick: 'editGCJob',
+	beforestatesave: 'filterState',
     },
 
     store: {
diff --git a/www/config/PruneAndGC.js b/www/config/PruneAndGC.js
index a1163402..b85c2961 100644
--- a/www/config/PruneAndGC.js
+++ b/www/config/PruneAndGC.js
@@ -14,6 +14,7 @@ Ext.define('PBS.config.PruneAndGC', {
 	collapsible: false,
 	margin: '7 10 3 10',
     },
+    scrollable: true,
     items: [
 	{
 	    xtype: 'pbsGCJobView',
@@ -22,6 +23,11 @@ Ext.define('PBS.config.PruneAndGC', {
 	    cbind: {
 		datastore: '{datastore}',
 	    },
+	    minHeight: 125, // shows at least one line of content
+	},
+	{
+	    xtype: 'splitter',
+	    performCollapse: false,
 	},
 	{
 	    xtype: 'pbsPruneJobView',
@@ -30,12 +36,14 @@ Ext.define('PBS.config.PruneAndGC', {
 	    cbind: {
 		datastore: '{datastore}',
 	    },
+	    flex: 1,
+	    minHeight: 160, // shows at least one line of content
 	},
     ],
     initComponent: function() {
 	let me = this;
 
-	let subPanelIds = me.items.map(el => el.itemId);
+	let subPanelIds = me.items.map(el => el.itemId).filter(id => !!id);
 
 	me.callParent();