From fb774e2e450eae303ce551a3e26665718c4ea28e Mon Sep 17 00:00:00 2001
From: Pablo Vazquez <pablo@blender.org>
Date: Wed, 4 May 2022 18:51:20 +0200
Subject: [PATCH] Web: Replace status with indicator

---
 web/app/src/assets/base.css          | 67 ++++++++++++++++++++++++++++
 web/app/src/components/JobsTable.vue |  9 +++-
 2 files changed, 75 insertions(+), 1 deletion(-)

diff --git a/web/app/src/assets/base.css b/web/app/src/assets/base.css
index 99fa034c..0d13d671 100644
--- a/web/app/src/assets/base.css
+++ b/web/app/src/assets/base.css
@@ -36,6 +36,21 @@
 
   --transition-speed: 240ms;
   --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-fail-requested: 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%);
 }
 
 html,
@@ -257,3 +272,55 @@ footer {
   justify-content: center;
   margin: auto;
 }
+
+.indicator {
+  background-color: var(--color-background);
+  border: var(--border-width) solid var(--color-background-column);
+  border-radius: 50%;
+  display: block;
+  height: 10px;
+  width: 10px;
+}
+
+.status-active {
+  background-color: hsl(86, 81%, 44%);
+}
+.status-canceled {
+  background-color: hsl(0 0% 50%);
+}
+.status-completed {
+  background-color: hsl(0 50% 50%);
+}
+.status-construction-failed {
+  background-color: hsl(0 50% 50%);
+}
+.status-failed {
+  background-color: hsl(0 50% 50%);
+}
+.status-paused {
+  background-color: hsl(0 50% 50%);
+}
+.status-queued {
+  background-color: hsl(207, 67%, 51%);
+}
+.status-archived {
+  background-color: hsl(0 50% 50%);
+}
+.status-archiving {
+  background-color: hsl(0 50% 50%);
+}
+.status-cancel-requested {
+  background-color: hsl(0 50% 50%);
+}
+.status-fail-requested {
+  background-color: hsl(0 50% 50%);
+}
+.status-requeued {
+  background-color: hsl(0 50% 50%);
+}
+.status-under-construction {
+  background-color: hsl(0 50% 50%);
+}
+.status-waiting-for-files {
+  background-color: hsl(0 50% 50%);
+}
diff --git a/web/app/src/components/JobsTable.vue b/web/app/src/components/JobsTable.vue
index 221517e6..0e265e47 100644
--- a/web/app/src/components/JobsTable.vue
+++ b/web/app/src/components/JobsTable.vue
@@ -25,9 +25,16 @@ export default {
       // See pkg/api/flamenco-manager.yaml, schemas Job and JobUpdate.
       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: 'ID', field: 'id', sorter: 'string', width: "13ch" },
         { title: 'Name', field: 'name', sorter: 'string' },
-        { title: 'Status', field: 'status', sorter: 'string' },
         { title: 'Type', field: 'type', sorter: 'string' },
         { title: 'Prio', field: 'priority', sorter: 'number' },
         {