Added modal for editing job status

Author: zonia3000

playwright.config.js

@@ -38,7 +38,7 @@ export default defineConfig({
 
 	webServer: [
 		{
-			command: './tests/start-test-server.sh 1.4.0a9',
+			command: './tests/start-test-server.sh 1.4.0a10',
 			port: 8000,
 			waitForPort: true,
 			stdout: 'pipe',

src/lib/components/jobs/JobsList.svelte

@@ -15,9 +15,7 @@
 	/** @type {('project'|'workflow'|'user_email')[]} */
 	export let columnsToHide = [];
 	/** @type {boolean} */
-	export let showFilters = true;
-	/** @type {boolean} */
-	export let hideCancelJobButton = false;
+	export let admin = false;
 
 	/** @type {JobInfoModal} */
 	let jobInfoModal;
@@ -148,7 +146,7 @@
 {#if tableHandler}
 	<div class="d-flex justify-content-end align-items-center my-3">
 		<div>
-			{#if showFilters}
+			{#if !admin}
 				<button
 					class="btn btn-warning"
 					on:click={() => {
@@ -169,7 +167,7 @@
 	<div id="jobUpdatesError" />
 	<table class="table jobs-table">
 		<colgroup>
-			<col width="90" />
+			<col width="100" />
 			<col width="110" />
 			<col width="100" />
 			<col width="100" />
@@ -203,7 +201,7 @@
 					<Th handler={tableHandler} key="user_email" label="User" />
 				{/if}
 			</tr>
-			{#if showFilters}
+			{#if !admin}
 				<tr>
 					<th>
 						<select class="form-control" bind:value={statusFilter}>
@@ -271,7 +269,12 @@
 				{#each $rows as row}
 					<tr class="align-middle">
 						<td>
-							<StatusBadge status={row.status} />
+							<span>
+								<StatusBadge status={row.status} />
+								{#if admin}
+									<slot name="edit-status" {row} />
+								{/if}
+							</span>
 						</td>
 						<td>
 							<button
@@ -300,7 +303,7 @@
 									</a>
 								{/if}
 							{/if}
-							{#if row.status === 'running' && !hideCancelJobButton}
+							{#if row.status === 'running' && !admin}
 								<button class="btn btn-danger" on:click={() => handleJobCancel(row)}>
 									<i class="bi-x-circle" /> Cancel
 								</button>

src/routes/admin/jobs/+page.svelte

@@ -1,6 +1,7 @@
 <script>
 	import { page } from '$app/stores';
-	import { displayStandardErrorAlert } from '$lib/common/errors';
+	import { AlertError, displayStandardErrorAlert } from '$lib/common/errors';
+	import Modal from '$lib/components/common/Modal.svelte';
 	import JobsList from '$lib/components/jobs/JobsList.svelte';
 
 	let searched = false;
@@ -48,6 +49,10 @@
 			}
 		}
 		jobs = jobs.map((j) => {
+			if (j.status === 'failed') {
+				// The admin has manually updated the job status while the AJAX call was in progress
+				return j;
+			}
 			const updatedJob = updatedJobs.find((uj) => uj.id === j.id);
 			return updatedJob ?? j;
 		});
@@ -218,6 +223,49 @@
 		downloader.setAttribute('download', filename);
 		downloader.click();
 	}
+
+	/** @type {Modal} */
+	let statusModal;
+	/** @type {import('$lib/types').ApplyWorkflow|undefined} */
+	let jobInEditing;
+
+	/**
+	 * @param {import('$lib/types').ApplyWorkflow} row
+	 */
+	function openEditStatusModal(row) {
+		jobInEditing = row;
+		statusModal.show();
+	}
+
+	let updatingStatus = false;
+
+	async function updateJobStatus() {
+		statusModal.confirmAndHide(async () => {
+			updatingStatus = true;
+			try {
+				const jobId = /** @type {import('$lib/types').ApplyWorkflow} */ (jobInEditing).id;
+
+				const headers = new Headers();
+				headers.append('Content-Type', 'application/json');
+
+				const response = await fetch(`/api/admin/job/${jobId}`, {
+					method: 'PATCH',
+					credentials: 'include',
+					headers,
+					body: JSON.stringify({ status: 'failed' })
+				});
+
+				if (!response.ok) {
+					throw new AlertError(await response.json());
+				}
+
+				jobs = jobs.map((j) => (j.id === jobId ? { ...j, status: 'failed' } : j));
+				jobsListComponent.setJobs(jobs);
+			} finally {
+				updatingStatus = false;
+			}
+		});
+	}
 </script>
 
 <div class="container">
@@ -367,16 +415,47 @@
 	<div id="searchError" class="mt-3" />
 
 	<div class:d-none={!searched}>
-		<JobsList {jobUpdater} bind:this={jobsListComponent} showFilters={false} hideCancelJobButton={true}>
+		<JobsList {jobUpdater} bind:this={jobsListComponent} admin={true}>
 			<svelte:fragment slot="buttons">
 				<button class="btn btn-outline-secondary" on:click={downloadCSV}>
 					<i class="bi-download" /> Download CSV
 				</button>
 			</svelte:fragment>
+			<svelte:fragment slot="edit-status" let:row>
+				{#if row.status !== 'failed'}
+					&nbsp;
+					<button class="btn btn-link p-0" on:click={() => openEditStatusModal(row)}>
+						<i class="bi bi-pencil" />
+					</button>
+				{/if}
+			</svelte:fragment>
 		</JobsList>
 	</div>
 </div>
 
+<Modal id="editJobStatusModal" bind:this={statusModal} centered={true} size="md">
+	<svelte:fragment slot="header">
+		{#if jobInEditing}
+			<h1 class="h5 modal-title flex-grow-1">Editing job #{jobInEditing.id}</h1>
+		{/if}
+	</svelte:fragment>
+	<svelte:fragment slot="body">
+		<div id="errorAlert-editJobStatusModal" />
+		<div class="alert alert-warning">
+			<i class="bi bi-exclamation-triangle" />
+			<strong>Warning</strong>: this operation will not cancel job execution but only modify its
+			status in the database
+		</div>
+		<div class="d-flex justify-content-center">
+			<button class="btn btn-danger" on:click={updateJobStatus} disabled={updatingStatus}>
+				Set status to failed
+			</button>
+			&nbsp;
+			<button class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+		</div>
+	</svelte:fragment>
+</Modal>
+
 <style>
 	input[type='date'] {
 		min-width: 190px;