WIP: added error handling to project and dry run pages

frontend/src/lib/refresh_runs.ts

@@ -36,7 +36,6 @@ export default async function refreshProjectDetails(): Promise<void> {
 				refreshActiveRunsPromise = undefined;
 				return;
 			}
-			console.log('refresh', activeDryRuns);
 		} while (activeDryRuns);
 	})();
 }

frontend/src/routes/projects/dryruns/[dry_run]/[resource]/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
-	import { ProgressBar } from '@skeletonlabs/skeleton';
+	import { Modal, ProgressBar } from '@skeletonlabs/skeleton';
 	import type { DryRunMetrics, DryRun, metricsWithTimeStamps } from '../../../../../types';
 	import getDryRunMetricsQuery from '../../../../../queries/get_dry_run_metrics.js';
 	import getProjectQuery from '../../../../../queries/get_project';
@@ -145,12 +145,16 @@
 	function buildDiagram() {
 		mermaidCode = []; // clear mermaidCode
 		mermaidCode.push(`graph ${graphOrientation};`);
-		workflow.workflowTemplates[0]?.argoWorkflowTemplate.spec.templates.forEach((template) => {
+		workflow.workflowTemplates[0]?.argoWorkflowTemplate.spec.templates.forEach(async (template) => {
 			try {
 				if (template.dag) argoDAGtoMermaid(template.dag);
 				else if (template.steps) argoStepsToMermaid(template.steps);
 			} catch (error) {
 				console.log(error);
+				const title = 'Error displaying dry run step diagram❌!';
+				const body = `${(error as Error).message}`;
+				await displayAlert(title, body, 5000);
+				goto(`/projects/dryruns/${selectedProject?.id}`);
 			}
 		});
 		diagram = mermaidCode.join('\n');
@@ -478,6 +482,8 @@
 	</div>
 </div>
 
+<Modal />
+
 <style>
 	.card {
 		min-height: 10rem;

frontend/src/routes/projects/dryruns/[dry_run]/[resource]/[plot]/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { ProgressBar } from '@skeletonlabs/skeleton';
+	import { Modal, ProgressBar } from '@skeletonlabs/skeleton';
 	import {
 		selectedProjectName,
 		selectedDryRunName,
@@ -10,6 +10,7 @@
 	import { requestGraphQLClient } from '$lib/graphqlUtils';
 	import Plot from '../Plot.svelte';
 	import { gql } from 'graphql-request';
+	import { displayAlert } from '../../../../../../utils/alerts_utils';
 
 	const datefmt = 'yyyy-MM-dd HH:mm:ss';
 	const defaultMetricsType = 'All';
@@ -190,8 +191,12 @@
 				}
 			);
 		})
-		.catch((error) => {
+		.catch(async (error) => {
 			console.log(error);
+			const title = 'Error reading resource consumption of dry run❌!';
+			const body = `${(error as Error).message}`;
+			await displayAlert(title, body, 10000);
+			goto(`/projects/dryruns/${$selectedProjectName}/${$selectedDryRunName}`);
 		});
 
 	// TODO: These functions are the same as in [resource].svelte
@@ -287,3 +292,5 @@
 		{/await}
 	</div>
 </div>
+
+<Modal />

frontend/src/routes/projects/dryruns/[dry_run]/modal-submit-new-dry-run.svelte

@@ -7,6 +7,7 @@
 	import type { Project, Template, Task, Templates } from '../../../../types.js';
 	import refreshProjectDetails from '../../../../lib/refresh_runs.js';
 	import { requestGraphQLClient } from '$lib/graphqlUtils.js';
+	import { displayAlert } from '../../../../utils/alerts_utils.js';
 
 	export let parent: any;
 
@@ -138,38 +139,17 @@
 				projectId: $selectedProject?.id
 			});
 			$selectedProject = response.project;
-			const createDryRunMessageModal: ModalSettings = {
-				type: 'alert',
-				title: 'New dry run created✨!',
-				body: `New dry run ID: ${responseCreateDryRun?.createDryRun?.id}`
-			};
-			modalStore.trigger(createDryRunMessageModal);
+			const title = 'New dry run created✨!';
+			const body = `New dry run ID: ${responseCreateDryRun?.createDryRun?.id}`;
 			alertModal = true;
-			await new Promise((resolve) => setTimeout(resolve, 1500));
-			modalStore.close();
+			await displayAlert(title, body, 2000);
 			await refreshProjectDetails();
-			modalStore.clear();
 		} catch (error) {
 			console.log(error);
-			const message = (error as Error).message;
-			let createDryRunMessageModal: ModalSettings;
-			if (message.includes('PayloadTooLargeError')) {
-				createDryRunMessageModal = {
-					type: 'alert',
-					title: 'Failed!',
-					body: 'Input file size exceeded limit (90KB)!'
-				};
-			} else {
-				createDryRunMessageModal = {
-					type: 'alert',
-					title: 'Failed to create dry run!',
-					body: `${message}`
-				};
-			}
-			modalStore.trigger(createDryRunMessageModal);
+			const title = 'Error creating dry run❌!';
+			const body = `${(error as Error).message}`;
 			alertModal = true;
-			await new Promise((resolve) => setTimeout(resolve, 2500));
-			modalStore.close();
+			await displayAlert(title, body, 10000);
 		}
 	}
 </script>

frontend/src/routes/projects/dryruns/[dry_run]/symbol-for-action.svelte

@@ -11,33 +11,23 @@
 	import suspendDryRunMutation from '../../../../queries/suspend_dry_run.js';
 	import resumeDryRunMutation from '../../../../queries/resume_dry_run.js';
 	import { pausedDryRuns } from '../../../../stores/stores.js';
-	import { modalStore, type ModalSettings } from '@skeletonlabs/skeleton';
 	import { requestGraphQLClient } from '$lib/graphqlUtils.js';
+	import { displayAlert } from '../../../../utils/alerts_utils.js';
 
 	export let action: string, dryRunId: string;
 	$: paused = $pausedDryRuns?.includes(dryRunId);
 
-	async function displayAlert(title: string, body: string) {
-		const alertModal: ModalSettings = {
-			type: 'alert',
-			title: title,
-			body: body
-		};
-		modalStore.trigger(alertModal);
-		await new Promise((resolve) => setTimeout(resolve, 1000));
-		modalStore.close();
-		modalStore.clear();
-	}
-
 	async function stopRun(event: any) {
 		try {
 			event.stopPropagation();
 			await requestGraphQLClient(stopDryRunMutation, { dryRunId: dryRunId, terminate: false });
-			displayAlert('Stopping dry run..', `ID: ${dryRunId}`);
+			const title = 'Stopping dry run..';
+			const body = `ID: ${dryRunId}`;
+			await displayAlert(title, body);
 		} catch (error) {
-			// TODO: handle error
-			console.log('Error! to be handled');
-			console.log(error);
+			const title = 'Error stopping dry run❌!';
+			const body = `${(error as Error).message}`;
+			await displayAlert(title, body, 10000);
 		}
 	}
 	async function pauseRun(event: any) {
@@ -46,11 +36,13 @@
 			await requestGraphQLClient(suspendDryRunMutation, { dryRunId: dryRunId, terminate: false });
 			paused = true;
 			$pausedDryRuns.push(dryRunId);
-			displayAlert('Pausing dry run..', `ID: ${dryRunId}`);
+			const title = 'Pausing dry run..';
+			const body = `ID: ${dryRunId}`;
+			await displayAlert(title, body);
 		} catch (error) {
-			// TODO: handle error
-			console.log('Error! to be handled');
-			console.log(error);
+			const title = 'Error pausing dry run❌!';
+			const body = `${(error as Error).message}`;
+			await displayAlert(title, body, 10000);
 		}
 	}
 	async function resumeRun(event: any) {
@@ -59,11 +51,13 @@
 			await requestGraphQLClient(resumeDryRunMutation, { dryRunId: dryRunId, terminate: false });
 			paused = false;
 			$pausedDryRuns.filter((item) => item !== dryRunId);
-			displayAlert('Resuming dry run..', `ID: ${dryRunId}`);
+			const title = 'Resuming dry run..';
+			const body = `ID: ${dryRunId}`;
+			await displayAlert(title, body);
 		} catch (error) {
-			// TODO: handle error
-			console.log('Error! to be handled');
-			console.log(error);
+			const title = 'Error resuming dry run❌!';
+			const body = `${(error as Error).message}`;
+			await displayAlert(title, body, 10000);
 		}
 	}
 </script>

frontend/src/routes/templates/[template]/+page.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">
-	import { ProgressBar } from '@skeletonlabs/skeleton';
+	import { Modal, ProgressBar } from '@skeletonlabs/skeleton';
 	import { clickedProjectId } from '../../../stores/stores';
 	import getWorkflowQuery from '../../../queries/get_workflow_template';
 	import { CodeBlock } from '@skeletonlabs/skeleton';
 	import YAML from 'json-to-pretty-yaml';
 	import { goto } from '$app/navigation';
 	import { requestGraphQLClient } from '$lib/graphqlUtils';
 	import { ArrowRightIcon } from 'svelte-feather-icons';
+	import { displayAlert } from '../../../utils/alerts_utils';
 
 	export let data;
 
@@ -27,8 +28,11 @@
 		.then((data) => {
 			workflow = data;
 		})
-		.catch((error) => {
-			console.log(error);
+		.catch(async (error) => {
+			const title = 'Error displaying workflow template❌!';
+			const body = `${(error as Error).message}`;
+			await displayAlert(title, body, 10000);
+			goto('/projects/');
 		});
 
 	function switchLanguage() {
@@ -77,6 +81,8 @@
 	</div>
 </div>
 
+<Modal />
+
 <style>
 	.code {
 		max-height: 80vh;