From 8488d792bfaf81cd3dad4f974f8c444108996a91 Mon Sep 17 00:00:00 2001
From: Pablo Vazquez <pablo@blender.org>
Date: Wed, 4 May 2022 19:28:39 +0200
Subject: [PATCH] Web: Add stauts indicator to Tasks table

---
 web/app/src/assets/base.css           | 22 +++++++++++++---------
 web/app/src/components/TasksTable.vue |  9 ++++++++-
 2 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/web/app/src/assets/base.css b/web/app/src/assets/base.css
index 0d13d671..fd5cc553 100644
--- a/web/app/src/assets/base.css
+++ b/web/app/src/assets/base.css
@@ -38,16 +38,17 @@
   --transition-speed-fast: 60ms;
 
   --color-status-active: hsl(0 50% 50%);
-  --color-status-canceled: hsl(0 50% 50%);
-  --color-status-completed: hsl(0 50% 50%);
-  --color-status-construction-failed: hsl(0 50% 50%);
-  --color-status-failed: hsl(0 50% 50%);
-  --color-status-paused: hsl(0 50% 50%);
-  --color-status-queued: hsl(0 50% 50%);
   --color-status-archived: hsl(0 50% 50%);
   --color-status-archiving: hsl(0 50% 50%);
   --color-status-cancel-requested: hsl(0 50% 50%);
+  --color-status-canceled: hsl(0 50% 50%);
+  --color-status-completed: hsl(0 50% 50%);
+  --color-status-construction-failed: hsl(0 50% 50%);
   --color-status-fail-requested: hsl(0 50% 50%);
+  --color-status-failed: hsl(0 50% 50%);
+  --color-status-soft-failed: hsl(0 50% 50%);
+  --color-status-paused: hsl(0 50% 50%);
+  --color-status-queued: hsl(0 50% 50%);
   --color-status-requeued: hsl(0 50% 50%);
   --color-status-under-construction: hsl(0 50% 50%);
   --color-status-waiting-for-files: hsl(0 50% 50%);
@@ -275,11 +276,11 @@ footer {
 
 .indicator {
   background-color: var(--color-background);
-  border: var(--border-width) solid var(--color-background-column);
+  box-shadow: 0 0 3px black;
   border-radius: 50%;
   display: block;
-  height: 10px;
-  width: 10px;
+  height: 12px;
+  width: 12px;
 }
 
 .status-active {
@@ -297,6 +298,9 @@ footer {
 .status-failed {
   background-color: hsl(0 50% 50%);
 }
+.status-soft-failed {
+  background-color: hsl(0 50% 50%);
+}
 .status-paused {
   background-color: hsl(0 50% 50%);
 }
diff --git a/web/app/src/components/TasksTable.vue b/web/app/src/components/TasksTable.vue
index a2feb697..dc1695e2 100644
--- a/web/app/src/components/TasksTable.vue
+++ b/web/app/src/components/TasksTable.vue
@@ -27,8 +27,15 @@ export default {
       // See pkg/api/flamenco-manager.yaml, schemas Task and TaskUpdate.
       columns: [
         { formatter: "rowSelection", titleFormatter: "rowSelection", hozAlign: "center", headerHozAlign: "center", headerSort: false },
+        {
+          title: 'Status', field: 'status', sorter: 'string',
+          formatter(cell, formatterParams) { // eslint-disable-line no-unused-vars
+            const cellValue = cell.getData();
+            console.log(cellValue);
+            return '<span title="' + cellValue.status + '" class="indicator status-' + cellValue.status + '"></span>';
+          }
+        },
         { title: 'Name', field: 'name', sorter: 'string' },
-        { title: 'Status', field: 'status', sorter: 'string' },
         {
           title: 'Updated', field: 'updated',
           sorter: 'alphanum', sorterParams: { alignEmptyValues: "top" },