Merge pull request #401 from fractal-analytics-platform/timestamps

Alignment with fractal-server 1.4.3

Author: zonia3000

.github/workflows/unit_tests.yaml

@@ -31,3 +31,5 @@ jobs:
 
       - name: Run vitest tests
         run: npx vitest run
+        env:
+          TZ: Europe/Rome

CHANGELOG.md

@@ -2,6 +2,9 @@
 
 # Unreleased
 
+* Removed `running` job status (\#401).
+* Aligned timestamp definitions with fractal-server 1.4.3 (\#401).
+* Sorted projects by descending creation timestamp (\#401).
 * Removed coverage setup from Playwright tests and CI (\#399).
 
 # 0.8.2

__tests__/JobsList.test.js

@@ -40,7 +40,7 @@ describe('JobsList', () => {
 		const filters = result.getAllByRole('combobox');
 
 		const statusFilter = filters[0];
-		verifyOptions(statusFilter, ['', 'running', 'done', 'failed', 'submitted']);
+		verifyOptions(statusFilter, ['', 'submitted', 'done', 'failed']);
 		const projectFilter = filters[1];
 		verifyOptions(projectFilter, ['', '1', '2']);
 		const workflowFilter = filters[2];
@@ -80,7 +80,7 @@ describe('JobsList', () => {
 		await clearFilters(result);
 
 		// Filter by job status
-		await fireEvent.change(statusFilter, { target: { value: 'running' } });
+		await fireEvent.change(statusFilter, { target: { value: 'submitted' } });
 		table = result.getByRole('table');
 		expect(table.querySelectorAll('tbody tr').length).eq(1);
 		expect(table.querySelectorAll('tbody tr td')[6].textContent).eq('input3');
@@ -89,27 +89,27 @@ describe('JobsList', () => {
 		// Verify default sorting
 		table = result.getByRole('table');
 		expect(table.querySelectorAll('tbody tr:nth-child(1) td')[2].textContent).eq(
-			'10/30/2023, 9:30:38 AM'
+			'10/30/2023, 10:30:38 AM'
 		);
 		expect(table.querySelectorAll('tbody tr:nth-child(2) td')[2].textContent).eq(
-			'10/30/2023, 9:15:38 AM'
+			'10/30/2023, 10:15:38 AM'
 		);
 		expect(table.querySelectorAll('tbody tr:nth-child(3) td')[2].textContent).eq(
-			'10/30/2023, 9:00:38 AM'
+			'10/30/2023, 10:00:38 AM'
 		);
 
 		// Sort by start date
 		const startDateSorter = table.querySelector('thead th:nth-child(3)');
 		await fireEvent.click(startDateSorter);
 		table = result.getByRole('table');
 		expect(table.querySelectorAll('tbody tr:nth-child(1) td')[2].textContent).eq(
-			'10/30/2023, 9:00:38 AM'
+			'10/30/2023, 10:00:38 AM'
 		);
 		expect(table.querySelectorAll('tbody tr:nth-child(2) td')[2].textContent).eq(
-			'10/30/2023, 9:15:38 AM'
+			'10/30/2023, 10:15:38 AM'
 		);
 		expect(table.querySelectorAll('tbody tr:nth-child(3) td')[2].textContent).eq(
-			'10/30/2023, 9:30:38 AM'
+			'10/30/2023, 10:30:38 AM'
 		);
 	});
 
@@ -162,14 +162,14 @@ describe('JobsList', () => {
 		vi.useFakeTimers();
 		try {
 			const jobUpdater = function () {
-				return data.jobs.map((j) => (j.status === 'running' ? { ...j, status: 'done' } : j));
+				return data.jobs.map((j) => (j.status === 'submitted' ? { ...j, status: 'done' } : j));
 			};
 			const result = render(JobsList, {
 				props: { jobUpdater }
 			});
 			let table = result.getByRole('table');
 			expect(table.querySelectorAll('tbody tr').length).eq(3);
-			expect(table.querySelectorAll('tbody tr:nth-child(1) td')[0].textContent).contain('running');
+			expect(table.querySelectorAll('tbody tr:nth-child(1) td')[0].textContent).contain('submitted');
 			expect(table.querySelectorAll('tbody tr:nth-child(2) td')[0].textContent).contain('failed');
 			expect(table.querySelectorAll('tbody tr:nth-child(3) td')[0].textContent).contain('done');
 

__tests__/component_utilities.test.js

@@ -1,7 +1,8 @@
 import { it, expect } from 'vitest';
 import {
 	orderTasksByOwnerThenByNameThenByVersion,
-	removeDuplicatedItems
+	removeDuplicatedItems,
+	sortProjectsByTimestampCreatedDesc
 } from '$lib/common/component_utilities.js';
 
 it('should order tasks by owner, then by name, then by version', () => {
@@ -63,3 +64,17 @@ it('removes duplicated datasets and sort by name', () => {
 	expect(datasets[2].id).toEqual(3);
 	expect(datasets[2].name).toEqual('test');
 });
+
+it('sort projects by timestamp_created DESC', () => {
+	const projects = [
+		{ name: 'p1', read_only: false, id: 2, timestamp_created: '2024-01-29T09:34:40.687256+00:00' },
+		{ name: 'p3', read_only: false, id: 5, timestamp_created: '2024-01-29T09:36:40.380260+00:00' },
+		{ name: 'p2', read_only: false, id: 4, timestamp_created: '2024-01-29T09:35:20.571999+00:00' }
+	];
+
+	sortProjectsByTimestampCreatedDesc(projects);
+
+	expect(projects[0].name).eq('p3');
+	expect(projects[1].name).eq('p2');
+	expect(projects[2].name).eq('p1');
+});

__tests__/mock/jobs-list.js

@@ -39,8 +39,9 @@ export const data = {
 			workflow_id: 1,
 			input_dataset_id: 1,
 			output_dataset_id: 2,
-			start_timestamp: '2023-10-30T09:00:38.442196',
-			end_timestamp: '2023-10-30T09:10:38.442196',
+			start_timestamp: '2023-10-30T09:00:38.442196+00:00',
+			end_timestamp: '2023-10-30T09:10:38.442196+00:00',
+			project_dump: { id: 1, name: 'project 1' },
 			workflow_dump: { id: 1, name: 'workflow 1' },
 			input_dataset_dump: { id: 1, name: 'input1' },
 			output_dataset_dump: { id: 2, name: 'output1' },
@@ -53,8 +54,9 @@ export const data = {
 			workflow_id: 2,
 			input_dataset_id: 3,
 			output_dataset_id: 4,
-			start_timestamp: '2023-10-30T09:15:38.442196',
-			end_timestamp: '2023-10-30T09:20:38.442196',
+			start_timestamp: '2023-10-30T09:15:38.442196+00:00',
+			end_timestamp: '2023-10-30T09:20:38.442196+00:00',
+			project_dump: { id: 2, name: 'project 2' },
 			workflow_dump: { id: 2, name: 'workflow 2' },
 			input_dataset_dump: { id: 3, name: 'input2' },
 			output_dataset_dump: { id: 4, name: 'output2' },
@@ -67,11 +69,13 @@ export const data = {
 			workflow_id: 2,
 			input_dataset_id: 5,
 			output_dataset_id: 6,
-			start_timestamp: '2023-10-30T09:30:38.442196',
+			start_timestamp: '2023-10-30T09:30:38.442196+00:00',
+			project_dump: { id: 2, name: 'project 2' },
+			workflow_dump: { id: 2, name: 'workflow 2' },
 			input_dataset_dump: { id: 5, name: 'input3' },
 			output_dataset_dump: { id: 6, name: 'output3' },
 			end_timestamp: null,
-			status: 'running',
+			status: 'submitted',
 			user_email: '[email protected]'
 		}
 	]

package.json

@@ -11,7 +11,7 @@
 		"lint": "prettier --check . && eslint .",
 		"format": "prettier --write .",
 		"pre-commit": "lint-staged",
-		"test": "vitest"
+		"test": "TZ=Europe/Rome vitest"
 	},
 	"devDependencies": {
 		"@playwright/test": "^1.40.0",

playwright.config.js

@@ -39,7 +39,7 @@ export default defineConfig({
 
 	webServer: [
 		{
-			command: './tests/start-test-server.sh 1.4.2',
+			command: './tests/start-test-server.sh 1.4.3a2',
 			port: 8000,
 			waitForPort: true,
 			stdout: 'pipe',

src/lib/common/component_utilities.js

@@ -212,3 +212,16 @@ export function removeDuplicatedItems(allItems) {
 	}
 	return items.sort((a, b) => (a.name < b.name ? -1 : a.name === b.name ? 0 : 1));
 }
+
+/**
+ * @param {import('$lib/types').Project[]} projects
+ */
+export function sortProjectsByTimestampCreatedDesc(projects) {
+	projects.sort((p1, p2) =>
+		p1.timestamp_created < p2.timestamp_created
+			? 1
+			: p1.timestamp_created > p2.timestamp_created
+			? -1
+			: 0
+	);
+}

src/lib/components/jobs/JobInfoModal.svelte

@@ -4,31 +4,18 @@
 	import { page } from '$app/stores';
 	import Modal from '../common/Modal.svelte';
 
-	/** @type {number|undefined} */
-	let workflowJobId = undefined;
 	/** @type {import('$lib/types').ApplyWorkflow|undefined} */
 	let job = undefined;
-	/** @type {number|undefined} */
-	let projectId = undefined;
-	/** @type {string|undefined} */
-	let projectName = undefined;
-	let jobStatus = undefined;
 
 	let errorAlert = undefined;
 	/** @type {Modal} */
 	let modal;
 
 	/**
 	 * @param jobToDisplay {import('$lib/types').ApplyWorkflow}
-	 * @param projectNameToDisplay {string}
 	 */
-	export async function show(jobToDisplay, projectNameToDisplay) {
+	export async function show(jobToDisplay) {
 		job = jobToDisplay;
-		workflowJobId = job.id;
-		projectId = job.project_id;
-		projectName = projectNameToDisplay;
-		jobStatus = job.status;
-
 		modal.show();
 	}
 
@@ -37,8 +24,11 @@
 		if (errorAlert) {
 			errorAlert.hide();
 		}
+		if (!job) {
+			return;
+		}
 
-		const response = await fetch(`/api/v1/project/${projectId}/job/${workflowJobId}`, {
+		const response = await fetch(`/api/v1/project/${job.project_dump.id}/job/${job.id}`, {
 			method: 'GET',
 			credentials: 'include'
 		});
@@ -54,7 +44,7 @@
 
 <Modal id="workflowJobInfoModal" bind:this={modal} size="lg">
 	<svelte:fragment slot="header">
-		<h1 class="h5 modal-title flex-grow-1">Workflow Job #{workflowJobId}</h1>
+		<h1 class="h5 modal-title flex-grow-1">Workflow Job #{job?.id}</h1>
 		{#if job && job.user_email === $page.data.userInfo.email && job.project_id !== null}
 			<button class="btn btn-light me-3" on:click={fetchJob}>
 				<i class="bi-arrow-clockwise" />
@@ -71,16 +61,16 @@
 						<li class="list-group-item list-group-item-light fw-bold">Id</li>
 						<li class="list-group-item">{job.id}</li>
 						<li class="list-group-item list-group-item-light fw-bold">Workflow</li>
-						<li class="list-group-item">{job.workflow_dump?.name || '-'}</li>
+						<li class="list-group-item">{job.workflow_dump.name}</li>
 						<li class="list-group-item list-group-item-light fw-bold">Project</li>
-						<li class="list-group-item">{projectName || '-'}</li>
+						<li class="list-group-item">{job.project_dump.name}</li>
 						<li class="list-group-item list-group-item-light fw-bold">Input dataset</li>
-						<li class="list-group-item">{job.input_dataset_dump?.name || '-'}</li>
+						<li class="list-group-item">{job.input_dataset_dump.name}</li>
 						<li class="list-group-item list-group-item-light fw-bold">Output dataset</li>
-						<li class="list-group-item">{job.output_dataset_dump?.name || '-'}</li>
+						<li class="list-group-item">{job.output_dataset_dump.name}</li>
 						<li class="list-group-item list-group-item-light fw-bold">Status</li>
-						{#key jobStatus}
-							<li class="list-group-item"><StatusBadge status={jobStatus} /></li>
+						{#key job.status}
+							<li class="list-group-item"><StatusBadge status={job.status} /></li>
 						{/key}
 						<li class="list-group-item list-group-item-light fw-bold">Working directory</li>
 						<li class="list-group-item"><code>{job.working_dir}</code></li>

src/lib/components/jobs/JobStatusIcon.svelte

@@ -6,9 +6,7 @@
 {#if status}
 	<span title={status}>
 		{#if status === 'submitted'}
-    <i class="bi bi-hourglass text-secondary job-status-submitted" />
-		{:else if status === 'running'}
-    <div class="spinner-border spinner-border-sm text-primary job-status-icon-running" role="status">
+    <div class="spinner-border spinner-border-sm text-primary job-status-icon-submitted" role="status">
       <span class="visually-hidden">Loading...</span>
     </div>
 		{:else if status === 'done'}
@@ -33,7 +31,7 @@
 		border-radius: 50%;
 	}
 
-	:global(.active .job-status-icon-running, .active .job-status-submitted) {
+	:global(.active .job-status-submitted) {
 		color: #fff !important;
 	}
 </style>