Web: Replace status with indicator

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%);
+}

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' },
         {