Removed highlighting for jobs that completed successfully

Author: zonia3000

__tests__/JobLogsModal.test.js

@@ -13,16 +13,18 @@ global.window.bootstrap = {
 import JobLogsModal from '../src/lib/components/jobs/JobLogsModal.svelte';
 
 describe('JobLogsModal', async () => {
-	it('display log without highlighting', async () => {
+	it('display error log fully highlighted', async () => {
 		const result = render(JobLogsModal);
 		const error = `TASK ERROR:Task id: 20 (Create OME-Zarr structure), e.workflow_task_order=0
 TRACEBACK:
 Command "/tmp/FRACTAL_TASKS_DIR/.fractal/fractal-tasks-core0.14.1/venv/bin/python" is not valid. Hint: make sure that it is executable.`;
-		await result.component.show(error);
-		expect(result.container.querySelector('pre').innerHTML).eq(error);
+		await result.component.show({ status: 'failed', log: error });
+		const pre = result.container.querySelector('pre');
+		expect(pre.classList.contains('highlight')).eq(true);
+		expect(pre.innerHTML).eq(error);
 	});
 
-	it('display log with highlighting', async () => {
+	it('display log with highlighting and hidden details', async () => {
 		const result = render(JobLogsModal);
 		const error = `TASK ERROR:Task id: 15 (Create OME-Zarr structure), e.workflow_task_order=0
 TRACEBACK:
@@ -37,13 +39,15 @@ Traceback (most recent call last):
 pydantic.error_wrappers.ValidationError: 1 validation error for CreateOmeZarr
 allowed_channels
   field required (type=value_error.missing)`;
-		await result.component.show(error);
+		await result.component.show({ status: 'failed', log: error });
 		const pre = result.container.querySelector('pre');
 		let divs = pre.querySelectorAll('div');
 		expect(divs.length).eq(2);
+		expect(divs[0].classList.contains('highlight')).eq(true);
 		expect(divs[0].innerHTML).eq(
 			'TASK ERROR:Task id: 15 (Create OME-Zarr structure), e.workflow_task_order=0\n'
 		);
+		expect(divs[1].classList.contains('highlight')).eq(true);
 		expect(divs[1].innerHTML)
 			.eq(`pydantic.error_wrappers.ValidationError: 1 validation error for CreateOmeZarr
 allowed_channels
@@ -52,7 +56,19 @@ allowed_channels
 		await fireEvent.click(result.getByRole('button', { name: /details hidden/ }));
 		divs = pre.querySelectorAll('div');
 		expect(divs.length).eq(3);
+		expect(divs[0].classList.contains('highlight')).eq(true);
+		expect(divs[1].classList.contains('highlight')).eq(false);
+		expect(divs[2].classList.contains('highlight')).eq(true);
 		expect(divs[1].innerHTML.startsWith('TRACEBACK')).eq(true);
 		expect(pre.querySelectorAll('button').length).eq(0);
 	});
+
+	it('display successful log', async () => {
+		const result = render(JobLogsModal);
+		const log = 'Successful log...';
+		await result.component.show({ status: 'done', log });
+		const pre = result.container.querySelector('pre');
+		expect(pre.classList.contains('highlight')).eq(false);
+		expect(pre.innerHTML).eq(log);
+	});
 });

src/lib/components/jobs/JobLogsModal.svelte

@@ -9,16 +9,23 @@
 	let modal;
 	/** Show/hide complete stack trace */
 	let showDetails = false;
+	/** @type {import('$lib/types').JobStatus} */
+	let jobStatus;
 
 	/**
-	 * @param logs {string|null}
+	 * @param {import('$lib/types').ApplyWorkflow} job
 	 */
-	export async function show(logs) {
+	export async function show(job) {
 		// remove previous error
 		if (errorAlert) {
 			errorAlert.hide();
 		}
-		logParts = extractJobErrorParts(logs, true);
+		jobStatus = job.status;
+		if (job.status === 'failed') {
+			logParts = extractJobErrorParts(job.log, true);
+		} else {
+			logParts = [{ text: job.log || '', highlight: false }];
+		}
 		modal.show();
 	}
 
@@ -56,7 +63,7 @@
 								on:click={expandDetails}>... (details hidden, click here to expand)</button
 							>{/if}{/each}</pre>
 			{:else}
-				<pre class="highlight">{logParts.map((p) => p.text).join('\n')}</pre>
+				<pre class:highlight={jobStatus === 'failed'}>{logParts.map((p) => p.text).join('\n')}</pre>
 			{/if}
 		</div>
 	</svelte:fragment>

src/lib/components/jobs/JobsList.svelte

@@ -305,7 +305,7 @@
 							{#if row.status === 'failed' || row.status === 'done'}
 								<button
 									class="btn btn-light"
-									on:click|preventDefault={() => jobLogsModal.show(row.log)}
+									on:click|preventDefault={() => jobLogsModal.show(row)}
 								>
 									<i class="bi-list-columns-reverse" />
 									Logs

src/routes/projects/[projectId]/workflows/experimental/[workflowId]/+page.svelte

@@ -583,7 +583,7 @@
 		if (!failedJob) {
 			return;
 		}
-		jobLogsModal.show(failedJob.log);
+		jobLogsModal.show(failedJob);
 	}
 
 	/**