From 1add6bfc8a23c0e019a1b34535fc3cdc18651d20 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sybren=20A=2E=20St=C3=BCvel?= <sybren@blender.org>
Date: Tue, 21 Feb 2023 11:08:48 +0100
Subject: [PATCH] Webapp: avoid browser JS errors about forbidden 'User-Agent'
 header

Brave (and maybe other browseres) refuse to set the 'User-Agent' header
in XMLHTTPRequests, and are vocal about this in the debug log. Since the
OpenAPI code generator always outputs a custom 'User-Agent' header, I've
added some JS code to strip that off when constructing an API client.
---
 web/app/src/App.vue                           |   4 +-
 web/app/src/SetupAssistant.vue                |   4 +-
 web/app/src/api-client.js                     |  39 +++++
 .../components/PopoverEditableJobPriority.vue |   4 +-
 web/app/src/components/footer/TaskLog.vue     |   4 +-
 web/app/src/components/jobs/Blocklist.vue     |   4 +-
 web/app/src/components/jobs/JobActionsBar.vue |   4 +-
 web/app/src/components/jobs/JobDetails.vue    |   6 +-
 web/app/src/components/jobs/JobsTable.vue     |   4 +-
 .../src/components/jobs/LastRenderedImage.vue |   4 +-
 web/app/src/components/jobs/TaskDetails.vue   |   4 +-
 web/app/src/components/jobs/TasksTable.vue    |   4 +-
 .../components/workers/WorkerActionsBar.vue   |  80 +++++----
 .../src/components/workers/WorkerDetails.vue  |   4 +-
 .../src/components/workers/WorkersTable.vue   |   4 +-
 web/app/src/main.js                           |   5 +-
 web/app/src/stores/api-query-count.js         |   3 -
 web/app/src/stores/jobs.js                    |   4 +-
 web/app/src/stores/tasks.js                   |   4 +-
 web/app/src/views/JobsView.vue                |   8 +-
 web/app/src/views/SetupAssistantView.vue      | 160 ++++++------------
 web/app/src/views/WorkersView.vue             |   8 +-
 22 files changed, 171 insertions(+), 194 deletions(-)
 create mode 100644 web/app/src/api-client.js

diff --git a/web/app/src/App.vue b/web/app/src/App.vue
index 898fce05..6f9016d4 100644
--- a/web/app/src/App.vue
+++ b/web/app/src/App.vue
@@ -26,7 +26,7 @@
 
 <script>
 import * as API from '@/manager-api';
-import { apiClient } from '@/stores/api-query-count';
+import { getAPIClient } from "@/api-client";
 import { backendURL } from '@/urls';
 
 import ApiSpinner from '@/components/ApiSpinner.vue'
@@ -51,7 +51,7 @@ export default {
   methods: {
     // TODO: also call this when SocketIO reconnects.
     fetchManagerInfo() {
-      const metaAPI = new API.MetaApi(apiClient);
+      const metaAPI = new API.MetaApi(getAPIClient());
       metaAPI.getVersion().then((version) => {
         this.flamencoName = version.name;
         this.flamencoVersion = version.version;
diff --git a/web/app/src/SetupAssistant.vue b/web/app/src/SetupAssistant.vue
index aebca351..95d74f2e 100644
--- a/web/app/src/SetupAssistant.vue
+++ b/web/app/src/SetupAssistant.vue
@@ -17,7 +17,7 @@ const DEFAULT_FLAMENCO_NAME = "Flamenco";
 const DEFAULT_FLAMENCO_VERSION = "unknown";
 import ApiSpinner from '@/components/ApiSpinner.vue'
 import { MetaApi } from "@/manager-api";
-import { apiClient } from '@/stores/api-query-count';
+import { getAPIClient } from "@/api-client";
 
 export default {
   name: 'SetupAssistant',
@@ -35,7 +35,7 @@ export default {
   methods: {
     // TODO: also call this when SocketIO reconnects.
     fetchManagerInfo() {
-      const metaAPI = new MetaApi(apiClient);
+      const metaAPI = new MetaApi(getAPIClient());
       metaAPI.getVersion().then((version) => {
         this.flamencoName = version.name;
         this.flamencoVersion = version.version;
diff --git a/web/app/src/api-client.js b/web/app/src/api-client.js
new file mode 100644
index 00000000..4d8742de
--- /dev/null
+++ b/web/app/src/api-client.js
@@ -0,0 +1,39 @@
+import { ApiClient } from "@/manager-api";
+import { CountingApiClient } from "@/stores/api-query-count";
+import { api as apiURL } from '@/urls'
+
+/**
+ * Scrub the custom User-Agent header from the API client, for those webbrowsers
+ * who do not want to have it set.
+ *
+ * It's actually scrubbed for all webbrowsers, as those privacy-first
+ * webbrowsers also make it hard to fingerprint which browser you're using (for
+ * good reason).
+ *
+ * @param {ApiClient} apiClient
+ */
+export function scrubAPIClient(apiClient) {
+  delete apiClient.defaultHeaders['User-Agent'];
+}
+
+/**
+ * @returns {ApiClient} Bare API client that is not connected to the UI in any way.
+ */
+export function newBareAPIClient() {
+  const apiClient = new ApiClient(apiURL());
+  scrubAPIClient(apiClient);
+  return apiClient;
+}
+
+let apiClient = null;
+
+/**
+ * @returns {ApiClient} API client that updates the UI to show long-running queries.
+ */
+export function getAPIClient() {
+  if (apiClient == null) {
+    apiClient = new CountingApiClient(apiURL());
+    scrubAPIClient(apiClient);
+  }
+  return apiClient;
+}
diff --git a/web/app/src/components/PopoverEditableJobPriority.vue b/web/app/src/components/PopoverEditableJobPriority.vue
index 7fa73011..7281bc13 100644
--- a/web/app/src/components/PopoverEditableJobPriority.vue
+++ b/web/app/src/components/PopoverEditableJobPriority.vue
@@ -26,7 +26,7 @@
 import { ref } from 'vue';
 
 import { useNotifs } from '@/stores/notifications';
-import { apiClient } from '@/stores/api-query-count';
+import { getAPIClient } from "@/api-client";
 import { JobsApi, JobPriorityChange } from '@/manager-api';
 
 const props = defineProps({
@@ -45,7 +45,7 @@ const errorMessage = ref('');
 // Methods
 function updateJobPriority() {
   const jobPriorityChange = new JobPriorityChange(priorityState.value);
-  const jobsAPI = new JobsApi(apiClient);
+  const jobsAPI = new JobsApi(getAPIClient());
   return jobsAPI.setJobPriority(props.jobId, jobPriorityChange)
     .then(() => {
       notifs.add(`Updated job priority to ${priorityState.value}`)
diff --git a/web/app/src/components/footer/TaskLog.vue b/web/app/src/components/footer/TaskLog.vue
index c6324372..9280a621 100644
--- a/web/app/src/components/footer/TaskLog.vue
+++ b/web/app/src/components/footer/TaskLog.vue
@@ -3,7 +3,7 @@ import { onMounted, onUnmounted } from 'vue'
 import { TabulatorFull as Tabulator } from 'tabulator-tables';
 import { useTaskLog } from '@/stores/tasklog'
 import { useTasks } from '@/stores/tasks'
-import { apiClient } from '@/stores/api-query-count';
+import { getAPIClient } from "@/api-client";
 import { JobsApi } from '@/manager-api';
 
 const taskLog = useTaskLog();
@@ -59,7 +59,7 @@ function _fetchLogTail(taskID) {
 
   if (!taskID) return;
 
-  const jobsAPI = new JobsApi(apiClient);
+  const jobsAPI = new JobsApi(getAPIClient());
   return jobsAPI.fetchTaskLogTail(taskID)
     .then((logTail) => {
       taskLog.addChunk(logTail);
diff --git a/web/app/src/components/jobs/Blocklist.vue b/web/app/src/components/jobs/Blocklist.vue
index 4a39f1cd..ddd1bc3c 100644
--- a/web/app/src/components/jobs/Blocklist.vue
+++ b/web/app/src/components/jobs/Blocklist.vue
@@ -26,7 +26,7 @@
 </template>
 
 <script setup>
-import { apiClient } from '@/stores/api-query-count';
+import { getAPIClient } from "@/api-client";
 import { JobsApi } from '@/manager-api';
 import LinkWorker from '@/components/LinkWorker.vue';
 import { watch, onMounted, inject, ref, nextTick } from 'vue'
@@ -35,7 +35,7 @@ import { watch, onMounted, inject, ref, nextTick } from 'vue'
 const props = defineProps(['jobID']);
 const emit = defineEmits(['reshuffled'])
 
-const jobsApi = new JobsApi(apiClient);
+const jobsApi = new JobsApi(getAPIClient());
 const isVisible = inject("isVisible");
 const isFetching = ref(false);
 const errorMsg = ref("");
diff --git a/web/app/src/components/jobs/JobActionsBar.vue b/web/app/src/components/jobs/JobActionsBar.vue
index 8361c745..1823922d 100644
--- a/web/app/src/components/jobs/JobActionsBar.vue
+++ b/web/app/src/components/jobs/JobActionsBar.vue
@@ -18,7 +18,7 @@
 <script>
 import { useJobs } from '@/stores/jobs';
 import { useNotifs } from '@/stores/notifications';
-import { apiClient } from '@/stores/api-query-count';
+import { getAPIClient } from "@/api-client";
 import { JobsApi } from '@/manager-api';
 import { JobDeletionInfo } from '@/manager-api';
 
@@ -31,7 +31,7 @@ export default {
   data: () => ({
     jobs: useJobs(),
     notifs: useNotifs(),
-    jobsAPI: new JobsApi(apiClient),
+    jobsAPI: new JobsApi(getAPIClient()),
 
     deleteInfo: null,
   }),
diff --git a/web/app/src/components/jobs/JobDetails.vue b/web/app/src/components/jobs/JobDetails.vue
index 5cfe6ca9..4f0697b7 100644
--- a/web/app/src/components/jobs/JobDetails.vue
+++ b/web/app/src/components/jobs/JobDetails.vue
@@ -39,7 +39,7 @@
           <dd class="field-status-label" :class="'status-' + jobData.status">{{ jobData.status }}</dd>
 
           <dt class="field-type" title="Type">Type</dt>
-          <dd>{{ jobType? jobType.label : jobData.type }}</dd>
+          <dd>{{ jobType ? jobType.label : jobData.type }}</dd>
 
           <dt class="field-priority" title="Priority">Priority</dt>
           <dd>
@@ -76,7 +76,7 @@
 <script>
 import * as datetime from "@/datetime";
 import * as API from '@/manager-api';
-import { apiClient } from '@/stores/api-query-count';
+import { getAPIClient } from "@/api-client";
 import LastRenderedImage from '@/components/jobs/LastRenderedImage.vue'
 import Blocklist from './Blocklist.vue'
 import TabItem from '@/components/TabItem.vue'
@@ -103,7 +103,7 @@ export default {
       datetime: datetime, // So that the template can access it.
       copyElementText: copyElementText,
       simpleSettings: null, // Object with filtered job settings, or null if there is no job.
-      jobsApi: new API.JobsApi(apiClient),
+      jobsApi: new API.JobsApi(getAPIClient()),
       jobType: null, // API.AvailableJobType object for the current job type.
       jobTypeSettings: null, // Mapping from setting key to its definition in the job type.
       showAllSettings: false,
diff --git a/web/app/src/components/jobs/JobsTable.vue b/web/app/src/components/jobs/JobsTable.vue
index 8ceaa3c4..4b2a2b8a 100644
--- a/web/app/src/components/jobs/JobsTable.vue
+++ b/web/app/src/components/jobs/JobsTable.vue
@@ -17,7 +17,7 @@ import { TabulatorFull as Tabulator } from 'tabulator-tables';
 import * as datetime from "@/datetime";
 import * as API from '@/manager-api'
 import { indicator } from '@/statusindicator';
-import { apiClient } from '@/stores/api-query-count';
+import { getAPIClient } from "@/api-client";
 import { useJobs } from '@/stores/jobs';
 
 import JobActionsBar from '@/components/jobs/JobActionsBar.vue'
@@ -130,7 +130,7 @@ export default {
       this.fetchAllJobs();
     },
     fetchAllJobs() {
-      const jobsApi = new API.JobsApi(apiClient);
+      const jobsApi = new API.JobsApi(getAPIClient());
       const jobsQuery = {};
       this.jobs.isJobless = false;
       jobsApi.queryJobs(jobsQuery).then(this.onJobsFetched, function (error) {
diff --git a/web/app/src/components/jobs/LastRenderedImage.vue b/web/app/src/components/jobs/LastRenderedImage.vue
index 830c35eb..740b5f89 100644
--- a/web/app/src/components/jobs/LastRenderedImage.vue
+++ b/web/app/src/components/jobs/LastRenderedImage.vue
@@ -9,7 +9,7 @@
 import { reactive, ref, watch } from 'vue'
 import { api } from '@/urls';
 import { JobsApi, JobLastRenderedImageInfo, SocketIOLastRenderedUpdate } from '@/manager-api';
-import { apiClient } from '@/stores/api-query-count';
+import { getAPIClient } from "@/api-client";
 
 const props = defineProps([
   /* The job UUID to show renders for, or some false-y value if renders from all
@@ -27,7 +27,7 @@ const cssClasses = reactive({
   'nothing-rendered-yet': true,
 })
 
-const jobsApi = new JobsApi(apiClient);
+const jobsApi = new JobsApi(getAPIClient());
 
 /**
  * Fetches the last-rendered info for the given job, then updates the <img> tag for it.
diff --git a/web/app/src/components/jobs/TaskDetails.vue b/web/app/src/components/jobs/TaskDetails.vue
index 2089e6b5..41aa6ef4 100644
--- a/web/app/src/components/jobs/TaskDetails.vue
+++ b/web/app/src/components/jobs/TaskDetails.vue
@@ -73,7 +73,7 @@
 import * as datetime from "@/datetime";
 import { JobsApi } from '@/manager-api';
 import { backendURL } from '@/urls';
-import { apiClient } from '@/stores/api-query-count';
+import { getAPIClient } from "@/api-client";
 import { useNotifs } from "@/stores/notifications";
 import LinkWorker from '@/components/LinkWorker.vue';
 import { copyElementText } from '@/clipboard';
@@ -90,7 +90,7 @@ export default {
     return {
       datetime: datetime, // So that the template can access it.
       copyElementText: copyElementText,
-      jobsApi: new JobsApi(apiClient),
+      jobsApi: new JobsApi(getAPIClient()),
       notifs: useNotifs(),
     };
   },
diff --git a/web/app/src/components/jobs/TasksTable.vue b/web/app/src/components/jobs/TasksTable.vue
index 56d00991..4b063ef0 100644
--- a/web/app/src/components/jobs/TasksTable.vue
+++ b/web/app/src/components/jobs/TasksTable.vue
@@ -17,7 +17,7 @@ import { TabulatorFull as Tabulator } from 'tabulator-tables';
 import * as datetime from "@/datetime";
 import * as API from '@/manager-api'
 import { indicator } from '@/statusindicator';
-import { apiClient } from '@/stores/api-query-count';
+import { getAPIClient } from "@/api-client";
 import { useTasks } from '@/stores/tasks';
 
 import TaskActionsBar from '@/components/jobs/TaskActionsBar.vue'
@@ -132,7 +132,7 @@ export default {
         return;
       }
 
-      const jobsApi = new API.JobsApi(apiClient);
+      const jobsApi = new API.JobsApi(getAPIClient());
       jobsApi.fetchJobTasks(this.jobID)
         .then(this.onTasksFetched, function (error) {
           // TODO: error handling.
diff --git a/web/app/src/components/workers/WorkerActionsBar.vue b/web/app/src/components/workers/WorkerActionsBar.vue
index 334384f6..3b4c0880 100644
--- a/web/app/src/components/workers/WorkerActionsBar.vue
+++ b/web/app/src/components/workers/WorkerActionsBar.vue
@@ -6,11 +6,7 @@
     </option>
     <option v-for="(action, key) in WORKER_ACTIONS" :value="key">{{ action.label }}</option>
   </select>
-  <button
-      :disabled="!canPerformAction"
-      class="btn"
-      @click.prevent="performWorkerAction"
-      >Apply</button>
+  <button :disabled="!canPerformAction" class="btn" @click.prevent="performWorkerAction">Apply</button>
 </template>
 
 <script setup>
@@ -18,46 +14,46 @@ import { computed, ref } from 'vue'
 import { useWorkers } from '@/stores/workers';
 import { useNotifs } from '@/stores/notifications';
 import { WorkerMgtApi, WorkerStatusChangeRequest } from '@/manager-api';
-import { apiClient } from '@/stores/api-query-count';
+import { getAPIClient } from "@/api-client";
 
 /* Freeze to prevent Vue.js from creating getters & setters all over this object.
  * We don't need it to be tracked, as it won't be changed anyway. */
 const WORKER_ACTIONS = Object.freeze({
-    offline_lazy: {
-        label: 'Shut Down (after task is finished)',
-        icon: '✝',
-        title: 'Shut down the worker after the current task finishes. The worker may automatically restart.',
-        target_status: 'offline',
-        lazy: true,
-    },
-    offline_immediate: {
-        label: 'Shut Down (immediately)',
-        icon: '✝!',
-        title: 'Immediately shut down the worker. It may automatically restart.',
-        target_status: 'offline',
-        lazy: false,
-    },
-    asleep_lazy: {
-        label: 'Send to Sleep (after task is finished)',
-        icon: '😴',
-        title: 'Let the worker sleep after finishing this task.',
-        target_status: 'asleep',
-        lazy: true,
-    },
-    asleep_immediate: {
-        label: 'Send to Sleep (immediately)',
-        icon: '😴!',
-        title: 'Let the worker sleep immediately.',
-        target_status: 'asleep',
-        lazy: false,
-    },
-    wakeup: {
-        label: 'Wake Up',
-        icon: '😃',
-        title: 'Wake the worker up. A sleeping worker can take a minute to respond.',
-        target_status: 'awake',
-        lazy: false,
-    },
+  offline_lazy: {
+    label: 'Shut Down (after task is finished)',
+    icon: '✝',
+    title: 'Shut down the worker after the current task finishes. The worker may automatically restart.',
+    target_status: 'offline',
+    lazy: true,
+  },
+  offline_immediate: {
+    label: 'Shut Down (immediately)',
+    icon: '✝!',
+    title: 'Immediately shut down the worker. It may automatically restart.',
+    target_status: 'offline',
+    lazy: false,
+  },
+  asleep_lazy: {
+    label: 'Send to Sleep (after task is finished)',
+    icon: '😴',
+    title: 'Let the worker sleep after finishing this task.',
+    target_status: 'asleep',
+    lazy: true,
+  },
+  asleep_immediate: {
+    label: 'Send to Sleep (immediately)',
+    icon: '😴!',
+    title: 'Let the worker sleep immediately.',
+    target_status: 'asleep',
+    lazy: false,
+  },
+  wakeup: {
+    label: 'Wake Up',
+    icon: '😃',
+    title: 'Wake the worker up. A sleeping worker can take a minute to respond.',
+    target_status: 'awake',
+    lazy: false,
+  },
 });
 
 const selectedAction = ref('');
@@ -73,7 +69,7 @@ function performWorkerAction() {
     return;
   }
 
-  const api = new WorkerMgtApi(apiClient);
+  const api = new WorkerMgtApi(getAPIClient());
   const action = WORKER_ACTIONS[selectedAction.value];
   const statuschange = new WorkerStatusChangeRequest(action.target_status, action.lazy);
   console.log("Requesting worker status change", statuschange);
diff --git a/web/app/src/components/workers/WorkerDetails.vue b/web/app/src/components/workers/WorkerDetails.vue
index 65e6df42..2731cc77 100644
--- a/web/app/src/components/workers/WorkerDetails.vue
+++ b/web/app/src/components/workers/WorkerDetails.vue
@@ -123,7 +123,7 @@ import { useNotifs } from '@/stores/notifications'
 
 import * as datetime from "@/datetime";
 import { WorkerMgtApi, WorkerSleepSchedule } from '@/manager-api';
-import { apiClient } from '@/stores/api-query-count';
+import { getAPIClient } from "@/api-client";
 import { workerStatus } from "../../statusindicator";
 import LinkWorkerTask from '@/components/LinkWorkerTask.vue';
 import SwitchCheckbox from '@/components/SwitchCheckbox.vue';
@@ -140,7 +140,7 @@ export default {
   data() {
     return {
       datetime: datetime, // So that the template can access it.
-      api: new WorkerMgtApi(apiClient),
+      api: new WorkerMgtApi(getAPIClient()),
       workerStatusHTML: "",
       workerSleepSchedule: this.defaultWorkerSleepSchedule(),
       isScheduleEditing: false,
diff --git a/web/app/src/components/workers/WorkersTable.vue b/web/app/src/components/workers/WorkersTable.vue
index 923b94a1..d93b6f83 100644
--- a/web/app/src/components/workers/WorkersTable.vue
+++ b/web/app/src/components/workers/WorkersTable.vue
@@ -19,7 +19,7 @@
 import { TabulatorFull as Tabulator } from 'tabulator-tables';
 import { WorkerMgtApi } from '@/manager-api'
 import { indicator, workerStatus } from '@/statusindicator';
-import { apiClient } from '@/stores/api-query-count';
+import { getAPIClient } from "@/api-client";
 import { useWorkers } from '@/stores/workers';
 
 import StatusFilterBar from '@/components/StatusFilterBar.vue'
@@ -117,7 +117,7 @@ export default {
       this.fetchAllWorkers();
     },
     fetchAllWorkers() {
-      const api = new WorkerMgtApi(apiClient);
+      const api = new WorkerMgtApi(getAPIClient());
       api.fetchWorkers().then(this.onWorkersFetched, function (error) {
         // TODO: error handling.
         console.error(error);
diff --git a/web/app/src/main.js b/web/app/src/main.js
index 99635172..35f1c13e 100644
--- a/web/app/src/main.js
+++ b/web/app/src/main.js
@@ -7,7 +7,8 @@ import SetupAssistant from '@/SetupAssistant.vue'
 import autoreload from '@/autoreloader'
 import router from '@/router/index'
 import setupAssistantRouter from '@/router/setup-assistant'
-import { ApiClient, MetaApi } from "@/manager-api";
+import { MetaApi } from "@/manager-api";
+import { newBareAPIClient } from "@/api-client";
 import * as urls from '@/urls'
 
 // Ensure Tabulator can find `luxon`, which it needs for sorting by
@@ -42,7 +43,7 @@ function setupAssistantMode() {
 /* This cannot use the client from '@/stores/api-query-count', as that would
  * require Pinia, which is unavailable until the app is actually started. And to
  * know which app to start, this API call needs to return data. */
-const apiClient = new ApiClient(urls.api());;
+const apiClient = newBareAPIClient();
 const metaAPI = new MetaApi(apiClient);
 metaAPI.getConfiguration()
   .then((config) => {
diff --git a/web/app/src/stores/api-query-count.js b/web/app/src/stores/api-query-count.js
index 3b0c4200..661a1120 100644
--- a/web/app/src/stores/api-query-count.js
+++ b/web/app/src/stores/api-query-count.js
@@ -1,6 +1,5 @@
 import { defineStore } from "pinia";
 import { ApiClient } from "@/manager-api";
-import * as urls from '@/urls'
 
 /**
  * Keep track of running API queries.
@@ -42,5 +41,3 @@ export class CountingApiClient extends ApiClient {
       });
   }
 }
-
-export const apiClient = new CountingApiClient(urls.api());;
diff --git a/web/app/src/stores/jobs.js b/web/app/src/stores/jobs.js
index 671e7a62..93ee151b 100644
--- a/web/app/src/stores/jobs.js
+++ b/web/app/src/stores/jobs.js
@@ -1,10 +1,10 @@
 import { defineStore } from 'pinia'
 
 import * as API from '@/manager-api';
-import { apiClient } from '@/stores/api-query-count';
+import { getAPIClient } from "@/api-client";
 
 
-const jobsAPI = new API.JobsApi(apiClient);
+const jobsAPI = new API.JobsApi(getAPIClient());
 
 // 'use' prefix is idiomatic for Pinia stores.
 // See https://pinia.vuejs.org/core-concepts/
diff --git a/web/app/src/stores/tasks.js b/web/app/src/stores/tasks.js
index 311b6dd4..c2e53506 100644
--- a/web/app/src/stores/tasks.js
+++ b/web/app/src/stores/tasks.js
@@ -1,10 +1,10 @@
 import { defineStore } from 'pinia'
 
 import * as API from '@/manager-api';
-import { apiClient } from '@/stores/api-query-count';
+import { getAPIClient } from "@/api-client";
 
 
-const jobsAPI = new API.JobsApi(apiClient);
+const jobsAPI = new API.JobsApi(getAPIClient());
 
 // 'use' prefix is idiomatic for Pinia stores.
 // See https://pinia.vuejs.org/core-concepts/
diff --git a/web/app/src/views/JobsView.vue b/web/app/src/views/JobsView.vue
index fdde2a7c..ed04e62d 100644
--- a/web/app/src/views/JobsView.vue
+++ b/web/app/src/views/JobsView.vue
@@ -39,7 +39,7 @@ import { useJobs } from '@/stores/jobs';
 import { useTasks } from '@/stores/tasks';
 import { useNotifs } from '@/stores/notifications'
 import { useTaskLog } from '@/stores/tasklog'
-import { apiClient } from '@/stores/api-query-count';
+import { getAPIClient } from "@/api-client";
 
 import FooterPopup from '@/components/footer/FooterPopup.vue'
 import GetTheAddon from '@/components/GetTheAddon.vue'
@@ -127,7 +127,7 @@ export default {
         return;
       }
 
-      const jobsAPI = new API.JobsApi(apiClient);
+      const jobsAPI = new API.JobsApi(getAPIClient());
       jobsAPI.fetchTask(taskSummary.id)
         .then((task) => {
           this.tasks.setActiveTask(task);
@@ -225,7 +225,7 @@ export default {
         return;
       }
 
-      const jobsAPI = new API.JobsApi(apiClient);
+      const jobsAPI = new API.JobsApi(getAPIClient());
       return jobsAPI.fetchJob(jobID)
         .then((job) => {
           this.jobs.setActiveJob(job);
@@ -254,7 +254,7 @@ export default {
         return;
       }
 
-      const jobsAPI = new API.JobsApi(apiClient);
+      const jobsAPI = new API.JobsApi(getAPIClient());
       return jobsAPI.fetchTask(taskID)
         .then((task) => {
           this.tasks.setActiveTask(task);
diff --git a/web/app/src/views/SetupAssistantView.vue b/web/app/src/views/SetupAssistantView.vue
index 077f9394..db11ff54 100644
--- a/web/app/src/views/SetupAssistantView.vue
+++ b/web/app/src/views/SetupAssistantView.vue
@@ -2,38 +2,28 @@
   <div class="setup-container">
     <h1>Flamenco Setup Assistant</h1>
     <ul class="progress">
-      <li
-        v-for="step in totalSetupSteps" :key="step"
-        @click="jumpToStep(step)"
-        :class="{
-          current: step == currentSetupStep,
-          done: step < overallSetupStep,
-          done_previously: (step < overallSetupStep && currentSetupStep > step),
-          done_and_current: step == currentSetupStep && (step < overallSetupStep || step == 1),
-          disabled: step > overallSetupStep,
-        }"
-        >
+      <li v-for="step in totalSetupSteps" :key="step" @click="jumpToStep(step)" :class="{
+        current: step == currentSetupStep,
+        done: step < overallSetupStep,
+        done_previously: (step < overallSetupStep && currentSetupStep > step),
+        done_and_current: step == currentSetupStep && (step < overallSetupStep || step == 1),
+        disabled: step > overallSetupStep,
+      }">
         <span></span>
       </li>
       <div class="progress-bar"></div>
     </ul>
     <div class="setup-step step-welcome">
 
-      <step-item
-        v-show="currentSetupStep == 1"
-        @next-clicked="nextStep"
-        :is-next-clickable="true"
-        :is-back-visible="false"
-        title="Welcome!"
-        next-label="Let's go"
-      >
+      <step-item v-show="currentSetupStep == 1" @next-clicked="nextStep" :is-next-clickable="true"
+        :is-back-visible="false" title="Welcome!" next-label="Let's go">
         <p>
           This setup assistant will guide you through the initial configuration of Flamenco. You will be up
           and running in a few minutes!
         </p>
         <p>Before we start, here is a quick overview of the Flamenco architecture.</p>
 
-        <img src="@/assets/architecture.png" alt="Flamenco architecture"/>
+        <img src="@/assets/architecture.png" alt="Flamenco architecture" />
 
         <p>The illustration shows the key components and how they interact together:</p>
         <ul>
@@ -41,26 +31,24 @@
             <strong>Manager</strong>: This application. It coordinates all the activity.
           </li>
           <li>
-            <strong>Worker</strong>: A workstation or dedicated rendering machine. It executes the tasks assigned by the Manager.
+            <strong>Worker</strong>: A workstation or dedicated rendering machine. It executes the tasks assigned by the
+            Manager.
           </li>
           <li>
-            <strong>Shared Storage</strong>: A location accessible by the Manager and the Workers, where the files to be rendered should be saved.
+            <strong>Shared Storage</strong>: A location accessible by the Manager and the Workers, where the files to be
+            rendered should be saved.
           </li>
           <li>
             <strong>Blender Add-on</strong>: This is needed to connect to the Manager and submit a job from Blender.
           </li>
         </ul>
         <p>More information is available on the online documentation at
-          <a href="https://flamenco.blender.org">flamenco.blender.org</a>.</p>
+          <a href="https://flamenco.blender.org">flamenco.blender.org</a>.
+        </p>
       </step-item>
 
-      <step-item
-        v-show="currentSetupStep == 2"
-        @next-clicked="nextStepAfterCheckSharedStoragePath"
-        @back-clicked="prevStep"
-        :is-next-clickable="sharedStoragePath.length > 0"
-        title="Shared Storage"
-      >
+      <step-item v-show="currentSetupStep == 2" @next-clicked="nextStepAfterCheckSharedStoragePath"
+        @back-clicked="prevStep" :is-next-clickable="sharedStoragePath.length > 0" title="Shared Storage">
         <p>Specify a path (or drive) where you want to store your Flamenco data.</p>
         <p>
           The location of the shared storage should be accessible by Flamenco Manager and by the Workers.
@@ -79,37 +67,26 @@
           <a href="https://flamenco.blender.org/usage/shared-storage/">Learn more</a>.
         </p>
 
-        <input
-          v-model="sharedStoragePath"
-          @keyup.enter="nextStepAfterCheckSharedStoragePath"
-          type="text"
-          placeholder="Path to shared storage"
-          :class="{
+        <input v-model="sharedStoragePath" @keyup.enter="nextStepAfterCheckSharedStoragePath" type="text"
+          placeholder="Path to shared storage" :class="{
             'is-invalid': (sharedStorageCheckResult != null) && !sharedStorageCheckResult.is_usable
-          }"
-        >
-        <p v-if="sharedStorageCheckResult != null"
-          :class="{
-            'check-ok': sharedStorageCheckResult.is_usable,
-            'check-failed': !sharedStorageCheckResult.is_usable
           }">
+        <p v-if="sharedStorageCheckResult != null" :class="{
+          'check-ok': sharedStorageCheckResult.is_usable,
+          'check-failed': !sharedStorageCheckResult.is_usable
+        }">
           {{ sharedStorageCheckResult.cause }}
         </p>
       </step-item>
 
-      <step-item
-        v-show="currentSetupStep == 3"
-        @next-clicked="nextStepAfterCheckBlenderExePath"
-        @back-clicked="prevStep"
-        :is-next-clickable="selectedBlender != null || customBlenderExe != (null || '')"
-        title="Blender"
-      >
+      <step-item v-show="currentSetupStep == 3" @next-clicked="nextStepAfterCheckBlenderExePath" @back-clicked="prevStep"
+        :is-next-clickable="selectedBlender != null || customBlenderExe != (null || '')" title="Blender">
 
         <div v-if="isBlenderExeFinding" class="is-in-progress">Looking for Blender installs...</div>
 
         <p v-if="autoFoundBlenders.length === 0">
           Provide a path to a Blender executable accessible by all Workers.
-          <br/><br/>
+          <br /><br />
           If your rendering setup features operating systems different from the one you are currently using,
           you can manually set up the other paths later.
         </p>
@@ -119,23 +96,16 @@
         <fieldset v-if="autoFoundBlenders.length >= 1">
           <label v-if="autoFoundBlenderPathEnvvar" for="blender-path_envvar">
             <div>
-              <input
-                v-model="selectedBlender"
-                :value="autoFoundBlenderPathEnvvar"
-                id="blender-path_envvar"
-                name="blender"
+              <input v-model="selectedBlender" :value="autoFoundBlenderPathEnvvar" id="blender-path_envvar" name="blender"
                 type="radio">
-                {{ sourceLabels[autoFoundBlenderPathEnvvar.source] }}
+              {{ sourceLabels[autoFoundBlenderPathEnvvar.source] }}
             </div>
             <div class="setup-path-command">
               <span class="path">
-                {{autoFoundBlenderPathEnvvar.path}}
+                {{ autoFoundBlenderPathEnvvar.path }}
               </span>
-              <span
-                aria-label="Console output when running with --version"
-                class="command-preview"
-                data-microtip-position="top"
-                role="tooltip">
+              <span aria-label="Console output when running with --version" class="command-preview"
+                data-microtip-position="top" role="tooltip">
                 {{ autoFoundBlenderPathEnvvar.cause }}
               </span>
             </div>
@@ -143,23 +113,16 @@
 
           <label v-if="autoFoundBlenderFileAssociation" for="blender-file_association">
             <div>
-              <input
-                v-model="selectedBlender"
-                :value="autoFoundBlenderFileAssociation"
-                id="blender-file_association"
-                name="blender"
-                type="radio">
-                {{ sourceLabels[autoFoundBlenderFileAssociation.source] }}
+              <input v-model="selectedBlender" :value="autoFoundBlenderFileAssociation" id="blender-file_association"
+                name="blender" type="radio">
+              {{ sourceLabels[autoFoundBlenderFileAssociation.source] }}
             </div>
             <div class="setup-path-command">
               <span class="path">
-                {{autoFoundBlenderFileAssociation.path}}
+                {{ autoFoundBlenderFileAssociation.path }}
               </span>
-              <span
-                aria-label="Console output when running with --version"
-                class="command-preview"
-                data-microtip-position="top"
-                role="tooltip">
+              <span aria-label="Console output when running with --version" class="command-preview"
+                data-microtip-position="top" role="tooltip">
                 {{ autoFoundBlenderFileAssociation.cause }}
               </span>
             </div>
@@ -167,24 +130,15 @@
 
           <label for="blender-input_path">
             <div>
-              <input
-                type="radio"
-                v-model="selectedBlender"
-                name="blender"
-                :value="blenderFromInputPath"
-                id="blender-input_path"
-                >
+              <input type="radio" v-model="selectedBlender" name="blender" :value="blenderFromInputPath"
+                id="blender-input_path">
               {{ sourceLabels['input_path'] }}
             </div>
             <div>
-              <input
-                v-model="customBlenderExe"
-                @keyup.enter="nextStepAfterCheckBlenderExePath"
+              <input v-model="customBlenderExe" @keyup.enter="nextStepAfterCheckBlenderExePath"
                 @focus="selectedBlender = null"
-                :class="{'is-invalid': blenderExeCheckResult != null && !blenderExeCheckResult.is_usable}"
-                type="text"
-                placeholder="Path to Blender"
-              >
+                :class="{ 'is-invalid': blenderExeCheckResult != null && !blenderExeCheckResult.is_usable }" type="text"
+                placeholder="Path to Blender">
               <p v-if="isBlenderExeChecking" class="is-in-progress">Checking...</p>
               <p v-if="blenderExeCheckResult != null && !blenderExeCheckResult.is_usable" class="check-failed">
                 {{ blenderExeCheckResult.cause }}</p>
@@ -193,13 +147,9 @@
         </fieldset>
 
         <div v-if="autoFoundBlenders.length === 0">
-          <input
-            v-model="customBlenderExe"
-            @keyup.enter="nextStepAfterCheckBlenderExePath"
-            :class="{'is-invalid': blenderExeCheckResult != null && !blenderExeCheckResult.is_usable}"
-            type="text"
-            placeholder="Path to Blender executable"
-          >
+          <input v-model="customBlenderExe" @keyup.enter="nextStepAfterCheckBlenderExePath"
+            :class="{ 'is-invalid': blenderExeCheckResult != null && !blenderExeCheckResult.is_usable }" type="text"
+            placeholder="Path to Blender executable">
 
           <p v-if="isBlenderExeChecking" class="is-in-progress">Checking...</p>
           <p v-if="blenderExeCheckResult != null && !blenderExeCheckResult.is_usable" class="check-failed">
@@ -207,14 +157,8 @@
         </div>
       </step-item>
 
-      <step-item
-        v-show="currentSetupStep == 4"
-        @next-clicked="confirmSetupAssistant"
-        @back-clicked="prevStep"
-        next-label="Confirm"
-        title="Review"
-        :is-next-clickable="setupConfirmIsClickable"
-      >
+      <step-item v-show="currentSetupStep == 4" @next-clicked="confirmSetupAssistant" @back-clicked="prevStep"
+        next-label="Confirm" title="Review" :is-next-clickable="setupConfirmIsClickable">
         <div v-if="isConfigComplete">
           <p>This is the configuration that will be used by Flamenco:</p>
           <dl>
@@ -253,7 +197,7 @@ import NotificationBar from '@/components/footer/NotificationBar.vue'
 import UpdateListener from '@/components/UpdateListener.vue'
 import StepItem from '@/components/steps/StepItem.vue';
 import { MetaApi, PathCheckInput, SetupAssistantConfig } from "@/manager-api";
-import { apiClient } from '@/stores/api-query-count';
+import { getAPIClient } from "@/api-client";
 
 export default {
   name: 'SetupAssistantView',
@@ -265,7 +209,7 @@ export default {
   data: () => ({
     sharedStoragePath: "",
     sharedStorageCheckResult: null, // api.PathCheckResult
-    metaAPI: new MetaApi(apiClient),
+    metaAPI: new MetaApi(getAPIClient()),
 
     allBlenders: [], // combination of autoFoundBlenders and blenderExeCheckResult.
 
@@ -458,7 +402,6 @@ export default {
 }
 </script>
 <style>
-
 .step-welcome ul {
   padding-left: var(--spacer-xl);
   margin-bottom: var(--spacer-xl);
@@ -517,7 +460,8 @@ export default {
 }
 
 .progress-bar {
-  --width-each-segment: calc(100% / calc(v-bind('totalSetupSteps') - 1)); /* Substract 1 because the first step has no progress. */
+  --width-each-segment: calc(100% / calc(v-bind('totalSetupSteps') - 1));
+  /* Substract 1 because the first step has no progress. */
   --progress-bar-width-at-current-step: calc(var(--width-each-segment) * calc(v-bind('currentSetupStep') - 1));
 
   position: absolute;
diff --git a/web/app/src/views/WorkersView.vue b/web/app/src/views/WorkersView.vue
index fa7753e7..711a8aeb 100644
--- a/web/app/src/views/WorkersView.vue
+++ b/web/app/src/views/WorkersView.vue
@@ -7,8 +7,7 @@
   </div>
   <footer class="app-footer">
     <notification-bar />
-    <update-listener ref="updateListener" mainSubscription="allWorkers"
-      @workerUpdate="onSIOWorkerUpdate"
+    <update-listener ref="updateListener" mainSubscription="allWorkers" @workerUpdate="onSIOWorkerUpdate"
       @sioReconnected="onSIOReconnected" @sioDisconnected="onSIODisconnected" />
   </footer>
 </template>
@@ -17,6 +16,7 @@
 .col-workers-list {
   grid-area: col-1;
 }
+
 .col-workers-2 {
   grid-area: col-2;
 }
@@ -26,7 +26,7 @@
 import { WorkerMgtApi } from '@/manager-api';
 import { useNotifs } from '@/stores/notifications'
 import { useWorkers } from '@/stores/workers';
-import { apiClient } from '@/stores/api-query-count';
+import { getAPIClient } from "@/api-client";
 
 import NotificationBar from '@/components/footer/NotificationBar.vue'
 import UpdateListener from '@/components/UpdateListener.vue'
@@ -45,7 +45,7 @@ export default {
   data: () => ({
     workers: useWorkers(),
     notifs: useNotifs(),
-    api: new WorkerMgtApi(apiClient),
+    api: new WorkerMgtApi(getAPIClient()),
   }),
   mounted() {
     window.workersView = this;