Web: move status indicator code into its own function

Status indicators are used in Tabulator cells, and it's unknown whether
we can use Vue components there. Moving the code to a central place makes
it a bit easier to reuse the function in various places.

web/app/src/assets/base.css

@@ -351,3 +351,11 @@ footer {
 .tabulator-row.active-row.tabulator-row-even {
   background-color: var(--table-color-background-row-active-even);
 }
+
+ul.status-filter-bar {
+  align-items: center;
+  display: flex;
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}

web/app/src/components/JobsTable.vue

@@ -41,11 +41,7 @@ export default {
         // { title: "ID", field: "id", headerSort: false, formatter: (cell) => cell.getData().id.substr(0, 8), },
         {
           title: 'Status', field: 'status', sorter: 'string',
-          formatter(cell) {
+          formatter: (cell) => indicator(cell.getData().status),
-            const cellValue = cell.getData();
-            const label = toTitleCase(cellValue.status);
-            return `<span title="${label}" class="indicator status-${cellValue.status}"></span>`;
-          },
         },
         { title: 'Name', field: 'name', sorter: 'string' },
         { title: 'Type', field: 'type', sorter: 'string' },

web/app/src/components/TasksTable.vue

@@ -9,7 +9,7 @@
 import { TabulatorFull as Tabulator } from 'tabulator-tables';
 import * as datetime from "@/datetime";
 import * as API from '@/manager-api'
-import { toTitleCase } from '@/strings';
+import { indicator } from '@/statusindicator';
 import { apiClient } from '@/stores/api-query-count';
 import { useTasks } from '@/stores/tasks';
 
@@ -32,11 +32,7 @@ export default {
         // { title: "ID", field: "id", headerSort: false, formatter: (cell) => cell.getData().id.substr(0, 8), },
         {
           title: 'Status', field: 'status', sorter: 'string',
-          formatter(cell, formatterParams) { // eslint-disable-line no-unused-vars
+          formatter: (cell) => indicator(cell.getData().status),
-            const cellValue = cell.getData();
-            const label = toTitleCase(cellValue.status);
-            return `<span title="${label}" class="indicator status-${cellValue.status}"></span>`;
-          }
         },
         { title: 'Name', field: 'name', sorter: 'string' },
         {

web/app/src/statusindicator.js

@@ -0,0 +1,16 @@
+import { toTitleCase } from '@/strings';
+
+/**
+ * Construct HTML for a certain job/task status.
+ *
+ * This function is implemented here as JavaScript, because we don't know how to
+ * get Tabulator to use Vue components in cells.
+ *
+ * @param {string} status The job/task status. Assumed to only consist of
+ *     letters and dashes, HTML-safe, and valid as a CSS class name.
+ * @returns the HTML for the status indicator.
+ */
+export function indicator(status) {
+  const label = toTitleCase(status);
+  return `<span title="${label}" class="indicator status-${status}"></span>`;
+}