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>
This commit is contained in:
Thomas Lamprecht 2020-10-31 10:30:23 +01:00
parent 0656344ae4
commit aae4c30ceb

View File

@ -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,
},
],