From 7c43b9e1bc8a6fae6dbecf3bbf52f96de3536486 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sybren=20A=2E=20St=C3=BCvel?= Date: Thu, 9 Jun 2022 11:01:03 +0200 Subject: [PATCH] Web: include status by name in job & task tables Having only the status dot was hard to read. It requires you to learn & remember the different colours, or to mouse-over and wait to see the tooltip. For accessibility, we shouldn't be using just the colour to convey information in the interface. --- web/app/src/components/jobs/JobsTable.vue | 6 +++++- web/app/src/components/jobs/TasksTable.vue | 6 +++++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/web/app/src/components/jobs/JobsTable.vue b/web/app/src/components/jobs/JobsTable.vue index ab1706c9..09cba2ff 100644 --- a/web/app/src/components/jobs/JobsTable.vue +++ b/web/app/src/components/jobs/JobsTable.vue @@ -48,7 +48,11 @@ export default { // { title: "ID", field: "id", headerSort: false, formatter: (cell) => cell.getData().id.substr(0, 8), }, { title: 'Status', field: 'status', sorter: 'string', - formatter: (cell) => indicator(cell.getData().status), + formatter: (cell) => { + const status = cell.getData().status; + const dot = indicator(status); + return `${dot} ${status}`; + }, }, { title: 'Name', field: 'name', sorter: 'string' }, { title: 'Type', field: 'type', sorter: 'string' }, diff --git a/web/app/src/components/jobs/TasksTable.vue b/web/app/src/components/jobs/TasksTable.vue index 989d8856..d0eaa64f 100644 --- a/web/app/src/components/jobs/TasksTable.vue +++ b/web/app/src/components/jobs/TasksTable.vue @@ -52,7 +52,11 @@ export default { // { title: "ID", field: "id", headerSort: false, formatter: (cell) => cell.getData().id.substr(0, 8), }, { title: 'Status', field: 'status', sorter: 'string', - formatter: (cell) => indicator(cell.getData().status), + formatter: (cell) => { + const status = cell.getData().status; + const dot = indicator(status); + return `${dot} ${status}`; + }, }, { title: 'Name', field: 'name', sorter: 'string' }, {