From aae4c30ceb6d10f1d6c6e4c44563033b1a205710 Mon Sep 17 00:00:00 2001
From: Thomas Lamprecht <t.lamprecht@proxmox.com>
Date: Sat, 31 Oct 2020 10:30:23 +0100
Subject: [PATCH] ui: improve verify job view layout, show job-id

Avoid overuse of flex, that is as bad as having all to fixed widths.

* Set date-time fields to 150 px as they are fixed width text.
* Duration is maximal 3 units, so it can be made fixed too.
* Schedule is flex with lower and upper limits, this is useful as
  it's a field which can be both, quite short (daily) or long
  (mon..fri *-10..12-1..7 02:00/30:30)
* Status and comment is flex, this way we always get a filled grid

Move status after last verify date and duration field, increases
information density at the left of the grid - reducing need for eye
movement, also, it groups together the "information about last job"
nicer.

Show job-id by default even if they are auto generated when adding
over the gui, as it can help finding the respective job faster when
getting a mail with an error.

Reported-by: Dietmar Maurer <dietmar@proxmox.com>
Signed-off-by: Thomas Lamprecht <t.lamprecht@proxmox.com>
---
 www/config/VerifyView.js | 35 +++++++++++++++++++----------------
 1 file changed, 19 insertions(+), 16 deletions(-)

diff --git a/www/config/VerifyView.js b/www/config/VerifyView.js
index ba8456aa..c67ccc7f 100644
--- a/www/config/VerifyView.js
+++ b/www/config/VerifyView.js
@@ -227,61 +227,64 @@ Ext.define('PBS.config.VerifyJobView', {
 	    header: gettext('Job ID'),
 	    dataIndex: 'id',
 	    renderer: Ext.String.htmlEncode,
-	    flex: 2,
+	    maxWidth: 220,
+	    minWidth: 75,
+	    flex: 1,
 	    sortable: true,
-	    hidden: true,
 	},
 	{
 	    header: gettext('Skip Verified'),
 	    dataIndex: 'ignore-verified',
 	    renderer: Proxmox.Utils.format_boolean,
-	    flex: 2,
+	    width: 100,
 	    sortable: true,
 	},
 	{
-	    header: gettext('Re-Verfiy Age'),
+	    header: gettext('Re-Verify After'),
 	    dataIndex: 'outdated-after',
 	    renderer: v => v ? v +' '+ gettext('Days') : gettext('Never'),
-	    flex: 2,
+	    width: 125,
 	    sortable: true,
 	},
 	{
 	    header: gettext('Schedule'),
 	    dataIndex: 'schedule',
 	    sortable: true,
-	    flex: 2,
-	},
-	{
-	    header: gettext('Status'),
-	    dataIndex: 'last-run-state',
-	    renderer: 'render_verify_status',
-	    flex: 4,
+	    maxWidth: 220,
+	    minWidth: 80,
+	    flex: 1,
 	},
 	{
 	    header: gettext('Last Verification'),
 	    dataIndex: 'last-run-endtime',
 	    renderer: 'render_optional_timestamp',
-	    flex: 3,
+	    width: 150,
 	    sortable: true,
 	},
 	{
 	    text: gettext('Duration'),
 	    dataIndex: 'duration',
 	    renderer: Proxmox.Utils.render_duration,
-	    flex: 2,
+	    width: 80,
+	},
+	{
+	    header: gettext('Status'),
+	    dataIndex: 'last-run-state',
+	    renderer: 'render_verify_status',
+	    flex: 3,
 	},
 	{
 	    header: gettext('Next Run'),
 	    dataIndex: 'next-run',
 	    renderer: 'render_next_run',
-	    flex: 3,
+	    width: 150,
 	    sortable: true,
 	},
 	{
 	    header: gettext('Comment'),
 	    dataIndex: 'comment',
 	    renderer: Ext.String.htmlEncode,
-	    flex: 4,
+	    flex: 2,
 	    sortable: true,
 	},
     ],