Merge pull request #420 from fractal-analytics-platform/trim-response-body

Added params to trim response body, loaded running jobs log, improved jobs table layout

Author: zonia3000

.github/workflows/unit_tests.yaml

@@ -33,3 +33,4 @@ jobs:
         run: npx vitest run
         env:
           TZ: Europe/Rome
+          LANG: it-IT

CHANGELOG.md

@@ -1,5 +1,14 @@
 *Note: Numbers like (\#123) point to closed Pull Requests on the fractal-web repository.*
 
+# Unreleased
+
+* Improved id and timestamp layout on jobs table (\#420).
+* Added query parameters to avoid loading unused fields on the following GET endpoints (\#420):
+    * `/api/v1/job/`, `/api/v1/{project.id}/job/`, `/admin/job/` (`log` param)
+    * `/api/v1/task/` (`args_schema` param)
+    * `/api/v1/dataset/`, `/api/v1/project/{project.id}/dataset/` (`history` param)
+* Added `show_tmp_logs=true` query parameter to display log of running jobs (\#420).
+
 # 0.9.2
 
 * Supported JSON Schema `allOf` feature in task arguments form (\#417).

__tests__/JobLogsModal.test.js

@@ -1,6 +1,12 @@
 import { describe, it, expect, vi } from 'vitest';
 import { fireEvent, render } from '@testing-library/svelte';
 
+// Mocking public variables
+vi.mock('$env/dynamic/public', () => {
+	return { env: {} };
+});
+
+// Mocking bootstrap.Modal
 class MockModal {
 	show = vi.fn();
 }
@@ -10,6 +16,9 @@ global.window.bootstrap = {
 	Modal: MockModal
 };
 
+// Mocking fetch
+global.fetch = vi.fn();
+
 import JobLogsModal from '../src/lib/components/jobs/JobLogsModal.svelte';
 
 describe('JobLogsModal', async () => {
@@ -18,7 +27,8 @@ describe('JobLogsModal', async () => {
 		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({ status: 'failed', log: error });
+		mockSuccesfulJobFetch({ id: 1, status: 'failed', log: error });
+		await result.component.show({ id: 1, status: 'failed', log: null }, false);
 		const pre = result.container.querySelector('pre');
 		expect(pre.classList.contains('highlight')).eq(true);
 		expect(pre.innerHTML).eq(error);
@@ -39,7 +49,8 @@ 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({ status: 'failed', log: error });
+		mockSuccesfulJobFetch({ id: 1, status: 'failed', log: error });
+		await result.component.show({ id: 1, status: 'failed', log: null }, true);
 		const pre = result.container.querySelector('pre');
 		let divs = pre.querySelectorAll('div');
 		expect(divs.length).eq(2);
@@ -66,9 +77,37 @@ allowed_channels
 	it('display successful log', async () => {
 		const result = render(JobLogsModal);
 		const log = 'Successful log...';
-		await result.component.show({ status: 'done', log });
+		mockSuccesfulJobFetch({ id: 1, status: 'done', log });
+		await result.component.show({ id: 1, status: 'done', log: null }, false);
 		const pre = result.container.querySelector('pre');
 		expect(pre.classList.contains('highlight')).eq(false);
 		expect(pre.innerHTML).eq(log);
 	});
+
+	it('error while loading job for user', async () => {
+		const result = render(JobLogsModal);
+		fetch.mockResolvedValue({
+			ok: false,
+			json: () => new Promise((resolve) => resolve({ error: 'Something happened' }))
+		});
+		await result.component.show({ id: 1, status: 'done', log: null }, false);
+		expect(result.queryByText(/Unable to fetch job/)).not.null;
+	});
+
+	it('error while loading job for admin', async () => {
+		const result = render(JobLogsModal);
+		fetch.mockResolvedValue({
+			ok: false,
+			json: () => new Promise((resolve) => resolve({ error: 'Something happened' }))
+		});
+		await result.component.show({ id: 1, status: 'done', log: null }, true);
+		expect(result.queryByText(/Unable to fetch job/)).not.null;
+	});
 });
+
+function mockSuccesfulJobFetch(job) {
+	fetch.mockResolvedValue({
+		ok: true,
+		json: () => new Promise((resolve) => resolve(job))
+	});
+}

__tests__/JobsList.test.js

@@ -89,27 +89,27 @@ describe('JobsList', () => {
 		// Verify default sorting
 		table = result.getByRole('table');
 		expect(table.querySelectorAll('tbody tr:nth-child(1) td')[3].textContent).eq(
-			'10/30/2023, 10:30:38 AM'
+			'30/10/2023 10:30:38'
 		);
 		expect(table.querySelectorAll('tbody tr:nth-child(2) td')[3].textContent).eq(
-			'10/30/2023, 10:15:38 AM'
+			'30/10/2023 10:15:38'
 		);
 		expect(table.querySelectorAll('tbody tr:nth-child(3) td')[3].textContent).eq(
-			'10/30/2023, 10:00:38 AM'
+			'30/10/2023 10:00:38'
 		);
 
 		// Sort by start date
 		const startDateSorter = table.querySelector('thead th:nth-child(4)');
 		await fireEvent.click(startDateSorter);
 		table = result.getByRole('table');
 		expect(table.querySelectorAll('tbody tr:nth-child(1) td')[3].textContent).eq(
-			'10/30/2023, 10:00:38 AM'
+			'30/10/2023 10:00:38'
 		);
 		expect(table.querySelectorAll('tbody tr:nth-child(2) td')[3].textContent).eq(
-			'10/30/2023, 10:15:38 AM'
+			'30/10/2023 10:15:38'
 		);
 		expect(table.querySelectorAll('tbody tr:nth-child(3) td')[3].textContent).eq(
-			'10/30/2023, 10:30:38 AM'
+			'30/10/2023 10:30:38'
 		);
 	});
 

__tests__/TimestampCell.test.js

@@ -0,0 +1,27 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/svelte';
+
+import TimestampCell from '../src/lib/components/jobs/TimestampCell.svelte';
+
+describe('TimestampCell', () => {
+	it('handles null timestamp', async () => {
+		const result = render(TimestampCell, {
+			props: { timestamp: null }
+		});
+		expect(result.container.textContent).eq('-');
+	});
+
+	it('handles empty timestamp', async () => {
+		const result = render(TimestampCell, {
+			props: { timestamp: '' }
+		});
+		expect(result.container.textContent).eq('-');
+	});
+
+	it('handles valid timestamp', async () => {
+		const result = render(TimestampCell, {
+			props: { timestamp: '2024-02-09T10:35:56.237579+00:00' }
+		});
+		expect(result.container.textContent).eq('9/2/2024 11:35:56');
+	});
+});

package-lock.json

@@ -11,10 +11,10 @@
 		"lint": "prettier --check . && eslint .",
 		"format": "prettier --write .",
 		"pre-commit": "lint-staged",
-		"test": "TZ=Europe/Rome vitest"
+		"test": "TZ=Europe/Rome LANG='it-IT' vitest"
 	},
 	"devDependencies": {
-		"@playwright/test": "^1.40.0",
+		"@playwright/test": "^1.41.2",
 		"@sveltejs/adapter-auto": "^2.0.0",
 		"@sveltejs/adapter-node": "^1.2.4",
 		"@sveltejs/kit": "^1.15.7",

package.json

@@ -19,32 +19,47 @@ export default defineConfig({
 			},
 			dependencies: ['auth']
 		},
+		{
+			name: 'create_fake_task',
+			testMatch: /create_fake_task\.setup\.js/,
+			use: {
+				storageState: 'tests/.auth/user.json'
+			},
+			dependencies: ['collect_core_tasks', 'auth']
+		},
 		{
 			name: 'chromium',
 			use: {
 				...devices['Desktop Chrome'],
 				storageState: 'tests/.auth/user.json'
 			},
-			dependencies: ['collect_core_tasks']
+			dependencies: ['create_fake_task']
 		},
 		{
 			name: 'firefox',
 			use: {
 				...devices['Desktop Firefox'],
 				storageState: 'tests/.auth/user.json'
 			},
-			dependencies: ['collect_core_tasks']
+			dependencies: ['create_fake_task']
 		}
 	],
 
 	webServer: [
 		{
-			command: './tests/start-test-server.sh 1.4.3',
+			command: './tests/start-test-server.sh 1.4.6',
 			port: 8000,
 			waitForPort: true,
 			stdout: 'pipe',
 			reuseExistingServer: !process.env.CI
 		},
+		{
+			command: 'node ./tests/fake-job-server.js',
+			port: 8080,
+			waitForPort: true,
+			stdout: 'pipe',
+			reuseExistingServer: !process.env.CI
+		},
 		{
 			command: 'npm run build && ORIGIN=http://localhost:5173 PORT=5173 node build',
 			port: 5173,