From 11a052d8549247a0868fe4480c49ba9b4973a43a Mon Sep 17 00:00:00 2001
From: Vivian Leung <vivz753@gmail.com>
Date: Fri, 4 Jul 2025 11:18:48 +0200
Subject: [PATCH] Web app: Add multi-select of jobs (#104391)

Add the following features:

- `Ctrl + Click` or `Cmd + Click` to toggle selection of additional jobs
- `Shift + Click` to select a range of additional jobs
- Ability to perform `Pause`, `Cancel`, `Requeue`, and `Delete` actions on multiple jobs concurrently
- Notifications on how many jobs successfully/failed to have an action performed

Reviewed-on: https://projects.blender.org/studio/flamenco/pulls/104391
---
 web/app/src/components/jobs/JobActionsBar.vue | 104 ++++----
 web/app/src/components/jobs/JobsTable.vue     | 229 ++++++++++++++----
 web/app/src/stores/jobs.js                    | 117 ++++++---
 web/app/src/views/JobsView.vue                |  66 +----
 4 files changed, 329 insertions(+), 187 deletions(-)

diff --git a/web/app/src/components/jobs/JobActionsBar.vue b/web/app/src/components/jobs/JobActionsBar.vue
index d69deff6..397739a5 100644
--- a/web/app/src/components/jobs/JobActionsBar.vue
+++ b/web/app/src/components/jobs/JobActionsBar.vue
@@ -1,8 +1,10 @@
 <template>
   <div class="btn-bar jobs">
-    <div class="btn-bar-popover" v-if="deleteInfo != null">
-      <p v-if="deleteInfo.shaman_checkout">Delete job, including Shaman checkout?</p>
-      <p v-else>Delete job? The job files will be kept.</p>
+    <div class="btn-bar-popover" v-if="showDeleteJobPopup">
+      <p v-if="shamanEnv">
+        Delete {{ jobs.selectedJobs.length }} job(s), including Shaman checkout?
+      </p>
+      <p v-else>Delete {{ jobs.selectedJobs.length }} job(s)?</p>
       <div class="inner-btn-bar">
         <button class="btn cancel" v-on:click="_hideDeleteJobPopup">Cancel</button>
         <button class="btn delete dangerous" v-on:click="onButtonDeleteConfirmed">Delete</button>
@@ -30,10 +32,13 @@
 <script>
 import { useJobs } from '@/stores/jobs';
 import { useNotifs } from '@/stores/notifications';
-import { getAPIClient } from '@/api-client';
-import { JobsApi } from '@/manager-api';
-import { JobDeletionInfo } from '@/manager-api';
+import { getAPIClient, newBareAPIClient } from '@/api-client';
+import { JobsApi, MetaApi } from '@/manager-api';
 
+const cancelDescription = 'marked for cancellation';
+const requeueDescription = 'marked for requeueing';
+const pauseDescription = 'marked for pausing';
+const deleteDescription = 'marked for deleting';
 export default {
   name: 'JobActionsBar',
   props: ['activeJobID'],
@@ -41,8 +46,10 @@ export default {
     jobs: useJobs(),
     notifs: useNotifs(),
     jobsAPI: new JobsApi(getAPIClient()),
+    metaAPI: new MetaApi(newBareAPIClient()),
 
-    deleteInfo: null,
+    shamanEnv: null,
+    showDeleteJobPopup: false,
   }),
   computed: {},
   watch: {
@@ -55,62 +62,77 @@ export default {
       this._startJobDeletionFlow();
     },
     onButtonDeleteConfirmed() {
-      return this.jobs
-        .deleteJobs()
-        .then(() => {
-          this.notifs.add('job marked for deletion');
-        })
-        .catch((error) => {
-          const errorMsg = JSON.stringify(error); // TODO: handle API errors better.
-          this.notifs.add(`Error: ${errorMsg}`);
-        })
-        .finally(this._hideDeleteJobPopup);
+      return this._handleJobActionPromise(this.jobs.deleteJobs(), deleteDescription);
     },
     onButtonCancel() {
-      return this._handleJobActionPromise(this.jobs.cancelJobs(), 'marked for cancellation');
+      return this._handleJobActionPromise(this.jobs.cancelJobs(), cancelDescription);
     },
     onButtonRequeue() {
-      return this._handleJobActionPromise(this.jobs.requeueJobs(), 'requeueing');
+      return this._handleJobActionPromise(this.jobs.requeueJobs(), requeueDescription);
     },
     onButtonPause() {
-      return this._handleJobActionPromise(this.jobs.pauseJobs(), 'marked for pausing');
+      return this._handleJobActionPromise(this.jobs.pauseJobs(), pauseDescription);
     },
 
     _handleJobActionPromise(promise, description) {
-      return promise.then(() => {
-        // There used to be a call to `this.notifs.add(message)` here, but now
-        // that job status changes are logged in the notifications anyway,
-        // it's no longer necessary.
-        // This function is still kept, in case we want to bring back the
-        // notifications when multiple jobs can be selected. Then a summary
-        // ("N jobs requeued") could be logged here.btn-bar-popover
-      });
-    },
+      return promise
+        .then((values) => {
+          const { incompatibleJobs, compatibleJobs, totalJobCount } = values;
 
-    _startJobDeletionFlow() {
-      if (!this.activeJobID) {
-        this.notifs.add('No active job, unable to delete anything');
-        return;
-      }
+          // TODO: messages could be improved to specify the names of jobs that failed
+          const failedMessage = `Could not apply ${description} status to ${incompatibleJobs.length} out of ${totalJobCount} job(s).`;
+          const successMessage = `${compatibleJobs.length} job(s) successfully ${description}.`;
 
-      this.jobsAPI
-        .deleteJobWhatWouldItDo(this.activeJobID)
-        .then(this._showDeleteJobPopup)
+          this.notifs.add(
+            `${compatibleJobs.length > 0 ? successMessage : ''}
+             ${incompatibleJobs.length > 0 ? failedMessage : ''}`
+          );
+        })
         .catch((error) => {
           const errorMsg = JSON.stringify(error); // TODO: handle API errors better.
           this.notifs.add(`Error: ${errorMsg}`);
+        })
+        .finally(() => {
+          this._hideDeleteJobPopup();
         });
     },
 
+    _startJobDeletionFlow() {
+      if (!this.jobs.selectedJobs.length) {
+        this.notifs.add('No selected job(s), unable to delete anything');
+        return;
+      }
+
+      this._showDeleteJobPopup();
+    },
+
     /**
-     * @param { JobDeletionInfo } deleteInfo
+     * Shows the delete popup, and checks for Shaman to render the correct delete confirmation message.
      */
-    _showDeleteJobPopup(deleteInfo) {
-      this.deleteInfo = deleteInfo;
+    _showDeleteJobPopup() {
+      // Concurrently fetch:
+      // 1) the first job's deletion info
+      // 2) the environment configuration
+      Promise.allSettled([
+        this.jobsAPI
+          .deleteJobWhatWouldItDo(this.jobs.selectedJobs[0].id)
+          .catch((error) => console.error('Error fetching deleteJobWhatWouldItDo:', error)),
+        this.metaAPI
+          .getConfiguration()
+          .catch((error) => console.error('Error getting configuration:', error)),
+      ]).then((results) => {
+        const [jobDeletionInfo, managerConfig] = results.map((result) => result.value);
+
+        // If either have Shaman, render the message relevant to an enabled Shaman environment
+        this.shamanEnv = jobDeletionInfo.shaman_checkout || managerConfig.shamanEnabled;
+      });
+
+      this.showDeleteJobPopup = true;
     },
 
     _hideDeleteJobPopup() {
-      this.deleteInfo = null;
+      this.shamanEnv = null;
+      this.showDeleteJobPopup = false;
     },
   },
 };
diff --git a/web/app/src/components/jobs/JobsTable.vue b/web/app/src/components/jobs/JobsTable.vue
index d5dc9b55..66220621 100644
--- a/web/app/src/components/jobs/JobsTable.vue
+++ b/web/app/src/components/jobs/JobsTable.vue
@@ -28,7 +28,6 @@ import StatusFilterBar from '@/components/StatusFilterBar.vue';
 export default {
   name: 'JobsTable',
   props: ['activeJobID'],
-  emits: ['tableRowClicked', 'activeJobDeleted', 'jobDeleted'],
   components: {
     JobActionsBar,
     StatusFilterBar,
@@ -37,8 +36,8 @@ export default {
     return {
       shownStatuses: [],
       availableStatuses: [], // Will be filled after data is loaded from the backend.
-
       jobs: useJobs(),
+      lastSelectedJobPosition: null,
     };
   },
   mounted() {
@@ -115,80 +114,210 @@ export default {
       this.$nextTick(this.recalcTableHeight);
     },
   },
-  computed: {
-    selectedIDs() {
-      return this.tabulator.getSelectedData().map((job) => job.id);
-    },
-  },
   methods: {
-    onReconnected() {
+    /**
+     * Send to the job overview page, i.e. job view without active job.
+     */
+    _routeToJobOverview() {
+      const route = { name: 'jobs' };
+      this.$router.push(route);
+    },
+    /**
+     * @param {string} jobID job ID to navigate to, can be empty string for "no active job".
+     */
+    _routeToJob(jobID) {
+      const route = { name: 'jobs', params: { jobID: jobID } };
+      this.$router.push(route);
+    },
+    async onReconnected() {
       // If the connection to the backend was lost, we have likely missed some
       // updates. Just fetch the data and start from scratch.
-      this.fetchAllJobs();
+      await this.initAllJobs();
+      await this.initActiveJob();
     },
     sortData() {
       const tab = this.tabulator;
       tab.setSort(tab.getSorters()); // This triggers re-sorting.
     },
-    _onTableBuilt() {
+    async _onTableBuilt() {
       this.tabulator.setFilter(this._filterByStatus);
-      this.fetchAllJobs();
+      await this.initAllJobs();
+      await this.initActiveJob();
     },
-    fetchAllJobs() {
+    async fetchAllJobs() {
       const jobsApi = new API.JobsApi(getAPIClient());
-      this.jobs.isJobless = false;
-      jobsApi.fetchJobs().then(this.onJobsFetched, function (error) {
-        // TODO: error handling.
-        console.error(error);
-      });
+      return jobsApi
+        .fetchJobs()
+        .then((data) => data.jobs)
+        .catch((e) => {
+          throw new Error('Unable to fetch all jobs:', e);
+        });
     },
-    onJobsFetched(data) {
-      // "Down-cast" to JobUpdate to only get those fields, just for debugging things:
-      // data.jobs = data.jobs.map((j) => API.JobUpdate.constructFromObject(j));
-      const hasJobs = data && data.jobs && data.jobs.length > 0;
-      this.jobs.isJobless = !hasJobs;
-      this.tabulator.setData(data.jobs);
-      this._refreshAvailableStatuses();
+    /**
+     * Initializes all jobs and sets the Tabulator data. Updates pinia stores and state accordingly.
+     */
+    async initAllJobs() {
+      try {
+        this.jobs.isJobless = false;
+        const jobs = await this.fetchAllJobs();
 
-      this.recalcTableHeight();
+        // Update Tabulator
+        this.tabulator.setData(jobs);
+        this._refreshAvailableStatuses();
+        this.recalcTableHeight();
+
+        // Update  Pinia stores
+        const hasJobs = jobs && jobs.length > 0;
+        this.jobs.isJobless = !hasJobs;
+      } catch (e) {
+        console.error(e);
+      }
     },
-    processJobUpdate(jobUpdate) {
+    /**
+     * Initializes the active job. Updates pinia stores and state accordingly.
+     */
+    async initActiveJob() {
+      // If there's no active job, reset the state and Pinia stores
+      if (!this.activeJobID) {
+        this.jobs.clearActiveJob();
+        this.jobs.clearSelectedJobs();
+        this.lastSelectedJobPosition = null;
+        return;
+      }
+
+      // Otherwise, set the state and Pinia stores
+      try {
+        const job = await this.fetchJob(this.activeJobID);
+        this.jobs.setActiveJob(job);
+        this.processJobUpdate(job);
+        this.jobs.setSelectedJobs([job]);
+
+        const activeRow = this.tabulator.getRow(this.activeJobID);
+        // If the page is reloaded, re-initialize the last selected job (or active job) position, allowing the user to multi-select from that job.
+        this.lastSelectedJobPosition = activeRow.getPosition();
+        // Make sure the active row on tabulator has the selected status toggled as well
+        this.tabulator.selectRow(activeRow);
+      } catch (error) {
+        console.error(error);
+      }
+    },
+    /**
+     * Fetch a Job based on ID
+     */
+    fetchJob(jobID) {
+      const jobsApi = new API.JobsApi(getAPIClient());
+      return jobsApi
+        .fetchJob(jobID)
+        .then((job) => job)
+        .catch((err) => {
+          throw new Error(`Unable to fetch job with ID ${jobID}:`, err);
+        });
+    },
+    async processJobUpdate(jobUpdate) {
       // updateData() will only overwrite properties that are actually set on
       // jobUpdate, and leave the rest as-is.
       if (!this.tabulator.initialized) {
         return;
       }
-      const row = this.tabulator.rowManager.findRow(jobUpdate.id);
 
-      let promise = null;
-      if (jobUpdate.was_deleted) {
-        if (row) promise = row.delete();
-        else promise = Promise.resolve();
-        promise.finally(() => {
-          this.$emit('jobDeleted', jobUpdate.id);
-          if (jobUpdate.id == this.activeJobID) {
-            this.$emit('activeJobDeleted', jobUpdate.id);
-          }
-        });
-      } else {
-        if (row) promise = this.tabulator.updateData([jobUpdate]);
-        else promise = this.tabulator.addData([jobUpdate]);
+      try {
+        const row = this.tabulator.rowManager.findRow(jobUpdate.id);
+        // If the row update is for deletion, delete the row and route to /jobs
+        if (jobUpdate.was_deleted && row) {
+          // Prevents the issue where deleted rows persist on Tabulator's selectedData
+          // (this should technically not happen -- need to investigate more)
+          this.tabulator.deselectRow(jobUpdate.id);
+          row.delete().then(() => {
+            if (jobUpdate.id === this.activeJobID) {
+              this._routeToJobOverview();
+
+              // Update Pinia Stores
+              this.jobs.clearActiveJob();
+            }
+            // Update Pinia Stores
+            this.jobs.setSelectedJobs(this.getSelectedJobs());
+          });
+          return;
+        }
+
+        if (row) {
+          await this.tabulator.updateData([jobUpdate]); // Update existing row
+        } else {
+          await this.tabulator.addData([jobUpdate]); // Add new row
+        }
+        this.sortData();
+        await this.tabulator.redraw(); // Resize columns based on new data.
+        this._refreshAvailableStatuses();
+
+        if (jobUpdate.id === this.activeJobID && row) {
+          const job = await this.fetchJob(jobUpdate.id);
+          this.jobs.setActiveJob(job);
+        }
+        this.jobs.setSelectedJobs(this.tabulator.getSelectedData()); // Update Pinia stores
+      } catch (e) {
+        console.error(e);
       }
-
-      promise
-        .then(this.sortData)
-        .then(() => {
-          this.tabulator.redraw();
-        }) // Resize columns based on new data.
-        .then(this._refreshAvailableStatuses);
     },
+    handleMultiSelect(event, row, tabulator) {
+      const position = row.getPosition();
 
-    onRowClick(event, row) {
+      // Manage the click event and Tabulator row selection
+      if (event.shiftKey && this.lastSelectedJobPosition) {
+        // Shift + Click - selects a range of rows
+        let start = Math.min(position, this.lastSelectedJobPosition);
+        let end = Math.max(position, this.lastSelectedJobPosition);
+        const rowsToSelect = [];
+
+        for (let i = start; i <= end; i++) {
+          const currRow = this.tabulator.getRowFromPosition(i);
+          rowsToSelect.push(currRow);
+        }
+        tabulator.selectRow(rowsToSelect);
+
+        // Remove the text selection that occurs
+        document.getSelection().removeAllRanges();
+      } else if (event.ctrlKey || event.metaKey) {
+        // Supports Cmd key on MacOS
+        // Ctrl + Click - toggles additional rows
+        if (tabulator.getSelectedRows().includes(row)) {
+          tabulator.deselectRow(row);
+        } else {
+          tabulator.selectRow(row);
+        }
+      } else if (!event.ctrlKey && !event.metaKey) {
+        // Regular Click - resets the selection to one row
+        tabulator.deselectRow(); // De-select all rows
+        tabulator.selectRow(row);
+      }
+    },
+    async onRowClick(event, row) {
       // Take a copy of the data, so that it's decoupled from the tabulator data
       // store. There were some issues where navigating to another job would
       // overwrite the old job's ID, and this prevents that.
-      const rowData = plain(row.getData());
-      this.$emit('tableRowClicked', rowData);
+
+      // Handles Shift + Click, Ctrl + Click, and regular Click
+      this.handleMultiSelect(event, row, this.tabulator);
+
+      // Update the app route, Pinia store, and component state
+      if (row.isSelected()) {
+        // The row was toggled -> selected
+        const rowData = row.getData();
+        this._routeToJob(rowData.id);
+
+        const job = await this.fetchJob(rowData.id);
+        this.jobs.setActiveJob(job);
+        this.lastSelectedJobPosition = row.getPosition();
+      } else {
+        // The row was toggled -> de-selected
+        this._routeToJob('');
+        this.jobs.clearActiveJob();
+        this.lastSelectedJobPosition = null;
+      }
+
+      this.jobs.setSelectedJobs(this.getSelectedJobs()); // Set the selected jobs according to tabulator's selected rows
+    },
+    getSelectedJobs() {
+      return this.tabulator.getSelectedData();
     },
     toggleStatusFilter(status) {
       const asSet = new Set(this.shownStatuses);
diff --git a/web/app/src/stores/jobs.js b/web/app/src/stores/jobs.js
index 120cb5b6..2dd887ad 100644
--- a/web/app/src/stores/jobs.js
+++ b/web/app/src/stores/jobs.js
@@ -5,6 +5,25 @@ import { getAPIClient } from '@/api-client';
 
 const jobsAPI = new API.JobsApi(getAPIClient());
 
+const JOB_ACTIONS = Object.freeze({
+  CANCEL: {
+    status: 'cancel-requested',
+    prerequisiteStatuses: ['active', 'paused', 'failed', 'queued'],
+  },
+  PAUSE: {
+    status: 'pause-requested',
+    prerequisiteStatuses: ['active', 'canceled', 'queued'],
+  },
+  REQUEUE: {
+    status: 'requeueing',
+    prerequisiteStatuses: ['canceled', 'completed', 'failed', 'paused'],
+  },
+  DELETE: {
+    status: 'delete-requested',
+    prerequisiteStatuses: ['canceled', 'completed', 'failed', 'paused', 'queued'],
+  },
+});
+
 // 'use' prefix is idiomatic for Pinia stores.
 // See https://pinia.vuejs.org/core-concepts/
 export const useJobs = defineStore('jobs', {
@@ -16,25 +35,27 @@ export const useJobs = defineStore('jobs', {
      * @type {string}
      */
     activeJobID: '',
-
     /**
      * Set to true when it is known that there are no jobs at all in the system.
      * This is written by the JobsTable.vue component.
+     * @type {bool}
      */
     isJobless: false,
+    /** @type {API.Job[]} */
+    selectedJobs: [],
   }),
   getters: {
     canDelete() {
-      return this._anyJobWithStatus(['completed', 'canceled', 'failed', 'paused', 'queued']);
+      return this._anyJobWithStatus(JOB_ACTIONS.DELETE.prerequisiteStatuses);
     },
     canCancel() {
-      return this._anyJobWithStatus(['active', 'failed', 'queued']);
+      return this._anyJobWithStatus(JOB_ACTIONS.CANCEL.prerequisiteStatuses);
     },
     canRequeue() {
-      return this._anyJobWithStatus(['canceled', 'completed', 'failed', 'paused']);
+      return this._anyJobWithStatus(JOB_ACTIONS.REQUEUE.prerequisiteStatuses);
     },
     canPause() {
-      return this._anyJobWithStatus(['active', 'queued', 'canceled']);
+      return this._anyJobWithStatus(JOB_ACTIONS.PAUSE.prerequisiteStatuses);
     },
   },
   actions: {
@@ -59,39 +80,42 @@ export const useJobs = defineStore('jobs', {
         state.hasChanged = true;
       });
     },
-    deselectAllJobs() {
+    clearActiveJob() {
       this.$patch({
         activeJob: null,
         activeJobID: '',
       });
     },
+    setSelectedJobs(jobs) {
+      this.$patch({
+        selectedJobs: jobs,
+      });
+    },
+    clearSelectedJobs() {
+      this.$patch({
+        selectedJobs: [],
+      });
+    },
 
     /**
      * Actions on the selected jobs.
      *
      * All the action functions return a promise that resolves when the action has been performed.
-     *
-     * TODO: actually have these work on all selected jobs. For simplicity, the
-     * code now assumes that only the active job needs to be operated on.
      */
     cancelJobs() {
-      return this._setJobStatus('cancel-requested');
+      return this._setJobStatus(JOB_ACTIONS.CANCEL.status, JOB_ACTIONS.CANCEL.prerequisiteStatuses);
     },
     pauseJobs() {
-      return this._setJobStatus('pause-requested');
+      return this._setJobStatus(JOB_ACTIONS.PAUSE.status, JOB_ACTIONS.PAUSE.prerequisiteStatuses);
     },
     requeueJobs() {
-      return this._setJobStatus('requeueing');
+      return this._setJobStatus(
+        JOB_ACTIONS.REQUEUE.status,
+        JOB_ACTIONS.REQUEUE.prerequisiteStatuses
+      );
     },
     deleteJobs() {
-      if (!this.activeJobID) {
-        console.warn(`deleteJobs() impossible, no active job ID`);
-        return new Promise((resolve, reject) => {
-          reject('No job selected, unable to delete');
-        });
-      }
-
-      return jobsAPI.deleteJob(this.activeJobID);
+      return this._setJobStatus(JOB_ACTIONS.DELETE.status, JOB_ACTIONS.DELETE.prerequisiteStatuses);
     },
 
     // Internal methods.
@@ -101,25 +125,56 @@ export const useJobs = defineStore('jobs', {
      * @param {string[]} statuses
      * @returns bool indicating whether there is a selected job with any of the given statuses.
      */
-    _anyJobWithStatus(statuses) {
-      return (
-        !!this.activeJob && !!this.activeJob.status && statuses.includes(this.activeJob.status)
-      );
-      // return this.selectedJobs.reduce((foundJob, job) => (foundJob || statuses.includes(job.status)), false);
+    _anyJobWithStatus(job_statuses) {
+      if (this.selectedJobs.length) {
+        return this.selectedJobs.some((job) => job_statuses.includes(job.status));
+      }
+      return false;
     },
 
     /**
      * Transition the selected job(s) to the new status.
      * @param {string} newStatus
-     * @returns a Promise for the API request.
+     * @param {string[]} job_statuses The job statuses compatible with the transition to new status
+     * @returns a Promise for the API request(s).
      */
-    _setJobStatus(newStatus) {
-      if (!this.activeJobID) {
-        console.warn(`_setJobStatus(${newStatus}) impossible, no active job ID`);
+    _setJobStatus(newStatus, job_statuses) {
+      const totalJobCount = this.selectedJobs.length;
+
+      if (!totalJobCount) {
+        console.warn(`_setJobStatus(${newStatus}) impossible, no selected job(s).`);
         return;
       }
-      const statuschange = new API.JobStatusChange(newStatus, 'requested from web interface');
-      return jobsAPI.setJobStatus(this.activeJobID, statuschange);
+
+      const { compatibleJobs, incompatibleJobs } = this.selectedJobs.reduce(
+        (result, job) => {
+          if (job_statuses.includes(job.status)) {
+            result.compatibleJobs.push(job);
+          } else {
+            result.incompatibleJobs.push(job);
+          }
+          return result;
+        },
+        { compatibleJobs: [], incompatibleJobs: [] }
+      );
+
+      let setJobStatusPromises = [];
+
+      if (newStatus === JOB_ACTIONS.DELETE.status) {
+        setJobStatusPromises = compatibleJobs.map((job) => jobsAPI.deleteJob(job.id));
+      } else {
+        const statuschange = new API.JobStatusChange(newStatus, 'requested from web interface');
+
+        setJobStatusPromises = compatibleJobs.map((job) =>
+          jobsAPI.setJobStatus(job.id, statuschange)
+        );
+      }
+
+      return Promise.allSettled(setJobStatusPromises).then((results) => ({
+        compatibleJobs: results,
+        incompatibleJobs,
+        totalJobCount,
+      }));
     },
   },
 });
diff --git a/web/app/src/views/JobsView.vue b/web/app/src/views/JobsView.vue
index 9f1f0074..47298a55 100644
--- a/web/app/src/views/JobsView.vue
+++ b/web/app/src/views/JobsView.vue
@@ -1,10 +1,6 @@
 <template>
   <div class="col col-1">
-    <jobs-table
-      ref="jobsTable"
-      :activeJobID="jobID"
-      @tableRowClicked="onTableJobClicked"
-      @activeJobDeleted="onActiveJobDeleted" />
+    <jobs-table ref="jobsTable" :activeJobID="jobID" />
   </div>
   <div class="col col-2 job-details-column" id="col-job-details">
     <get-the-addon v-if="jobs.isJobless" />
@@ -57,12 +53,10 @@
 </template>
 
 <script>
-import * as API from '@/manager-api';
 import { useJobs } from '@/stores/jobs';
 import { useTasks } from '@/stores/tasks';
 import { useNotifs } from '@/stores/notifications';
 import { useTaskLog } from '@/stores/tasklog';
-import { getAPIClient } from '@/api-client';
 
 import FooterPopup from '@/components/footer/FooterPopup.vue';
 import GetTheAddon from '@/components/GetTheAddon.vue';
@@ -110,17 +104,12 @@ export default {
     //   console.log("Pinia state   :", state)
     // })
 
-    this._fetchJob(this.jobID);
-
     window.addEventListener('resize', this._recalcTasksTableHeight);
   },
   unmounted() {
     window.removeEventListener('resize', this._recalcTasksTableHeight);
   },
   watch: {
-    jobID(newJobID, oldJobID) {
-      this._fetchJob(newJobID);
-    },
     showFooterPopup(shown) {
       if (shown) localStorage.setItem('footer-popover-visible', 'true');
       else localStorage.removeItem('footer-popover-visible');
@@ -128,14 +117,6 @@ export default {
     },
   },
   methods: {
-    onTableJobClicked(rowData) {
-      // Don't route to the current job, as that'll deactivate the current task.
-      if (rowData.id === this.jobID) return;
-      this._routeToJob(rowData.id);
-    },
-    onActiveJobDeleted(deletedJobUUID) {
-      this._routeToJobOverview();
-    },
     showTaskLogTail() {
       this.showFooterPopup = true;
       this.$nextTick(() => {
@@ -155,7 +136,6 @@ export default {
         return;
       }
 
-      this._fetchJob(this.jobID);
       if (jobUpdate.refresh_tasks) {
         if (this.$refs.tasksTable) this.$refs.tasksTable.fetchTasks();
       }
@@ -187,50 +167,6 @@ export default {
       this.$refs.jobDetails.refreshLastRenderedImage(lastRenderedUpdate);
     },
 
-    /**
-     * Send to the job overview page, i.e. job view without active job.
-     */
-    _routeToJobOverview() {
-      const route = { name: 'jobs' };
-      this.$router.push(route);
-    },
-    /**
-     * @param {string} jobID job ID to navigate to, can be empty string for "no active job".
-     */
-    _routeToJob(jobID) {
-      const route = { name: 'jobs', params: { jobID: jobID } };
-      this.$router.push(route);
-    },
-
-    /**
-     * Fetch job info and set the active job once it's received.
-     * @param {string} jobID job ID, can be empty string for "no job".
-     */
-    _fetchJob(jobID) {
-      if (!jobID) {
-        this.jobs.deselectAllJobs();
-        return;
-      }
-
-      const jobsAPI = new API.JobsApi(getAPIClient());
-      return jobsAPI
-        .fetchJob(jobID)
-        .then((job) => {
-          this.jobs.setActiveJob(job);
-          // Forward the full job to Tabulator, so that that gets updated too.
-          this.$refs.jobsTable.processJobUpdate(job);
-          this._recalcTasksTableHeight();
-        })
-        .catch((err) => {
-          if (err.status == 404) {
-            // It can happen that a job cannot be found, for example when it was asynchronously deleted.
-            this.jobs.deselectAllJobs();
-            return;
-          }
-          console.log(`Unable to fetch job ${jobID}:`, err);
-        });
-    },
-
     onChatMessage(message) {
       console.log('chat message received:', message);
       this.messages.push(`${message.text}`);