Merge branch 'stage' of github.com:DataCloud-project/SIM-PIPE into stage

DataCloud-project · Jul 14, 2023 · 432cb8e · 432cb8e
2 parents 33fcefd + a15d68c
commit 432cb8e
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 40 deletions.
diff --git a/frontend-dev/package-lock.json b/frontend-dev/package-lock.json
diff --git a/frontend-dev/package.json b/frontend-dev/package.json
@@ -46,6 +46,7 @@
 		"date-fns": "^2.30.0",
 		"graphql-request": "^6.1.0",
 		"highlight.js": "^11.8.0",
+		"js-yaml": "^4.1.0",
 		"json-to-pretty-yaml": "^1.2.2",
 		"keycloak-js": "^21.1.1",
 		"mermaid": "^10.2.4",

diff --git a/frontend-dev/src/routes/projects/[project_id]/[dry_run]/+page.svelte b/frontend-dev/src/routes/projects/[project_id]/[dry_run]/+page.svelte
@@ -15,7 +15,6 @@
 	// 	let { project_id } = params;
 	// }
 
-
 	const getProjectDetails = async (): Promise<Project> => {
 		const variables = {projectId: get(clickedProjectId)};
 		const response: { project: Project } = await get(graphQLClient).request(allDryRunsQuery, variables);
@@ -34,14 +33,7 @@
 		    reactiveProjectDetails = undefined;
 		});
 	
-	const modal: ModalSettings = {
-		type: 'component',
-		component: { ref: ModalSubmitNewDryRun	},
-		title: 'Add new dry run',
-		body: 'Enter details of dry run',
-	};
-	
-	let checkboxes: Record<string, boolean> = {};	
+	let checkboxes: Record<string, boolean> = {};
 
 	function transformSecondsToHoursMinutesSeconds(seconds_string: string) {
 		let seconds = Number(seconds_string);
@@ -71,6 +63,15 @@
         let responseProjectDetails: { project: Project } = await get(graphQLClient).request(allDryRunsQuery, { projectId: $clickedProjectId });
         $selectedProject = responseProjectDetails.project;
 	}
+	async function onCreateSelected() {
+		const modal: ModalSettings = {
+			type: 'component',
+			component: { ref: ModalSubmitNewDryRun	},
+			title: 'Add new dry run',
+			body: 'Enter details of dry run',
+		};
+		modalStore.trigger(modal);
+	}
 	
 	// TODO: fill all possible phase values
 	function getDryRunAction(status:string):string {
@@ -100,7 +101,7 @@
 			<p class="text-xs">dry runs: {reactiveProjectDetails?.dryRuns.length}</p>
 		</div>
 		<div class="flex-row justify-content-end">	
-			<button type="button" class="btn btn-sm variant-filled" on:click={() => (modalStore.trigger(modal))}>
+			<button type="button" class="btn btn-sm variant-filled" on:click={onCreateSelected}>
 				<span>Create</span>
 			</button>			
 			<button type="button" class="btn btn-sm variant-filled-warning" on:click={onDeleteSelected}>
@@ -145,4 +146,6 @@
 {/await}
 </div>
 
-<Modal />
+{#if $modalStore[0]}
+	<Modal />
+{/if}
diff --git a/frontend-dev/src/routes/projects/[project_id]/[dry_run]/modal-submit-new-dry-run.svelte b/frontend-dev/src/routes/projects/[project_id]/[dry_run]/modal-submit-new-dry-run.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { cBase, cHeader, cForm, optional } from '../../../../styles/styles.js';
-	import { modalStore } from '@skeletonlabs/skeleton';
+	import { Modal, modalStore, type ModalSettings } from '@skeletonlabs/skeleton';
 	import { selectedProject, graphQLClient } from '../../../../stores/stores.js';
 	import createDryRunMutation from '../../../../queries/create_dry_run.js';
 	import allDryRunsQuery from '../../../../queries/get_all_dryruns.js';
@@ -33,6 +33,8 @@
 		return tasks;
 	}
 	const taskList = parseTaskList();
+	let hideModal = false;
+	let alertModal = false;
 
 	// modify workflow template from project to create a valid argoWorkflow input for create new dryrun
 	function newWorkflowTemplate(template: { metadata: any; spec: any }) {
@@ -46,6 +48,7 @@
 
 	async function onCreateDryRunSubmit(): Promise<void> {
 		modalStore.close();
+		hideModal = true;
 
 		const variables = {
 			input: {
@@ -56,29 +59,32 @@
 			}
 		};
 		try {
-			const responseCreateDryRun = await $graphQLClient.request(createDryRunMutation, variables);			
-			// const createDryRunErrorModal: ModalSettings = {
-			// 	type: 'alert',
-			// 	title: 'Create failed!',
-			// 	// body: error?.toString(),
-			// 	body: 'body..',
-			// };
-			// modalStore.trigger(createDryRunErrorModal);
-			// await new Promise((resolve) => setTimeout(resolve, 10000));
-			// modalStore.close();
-		} catch (error) {			
+			const responseCreateDryRun: {createDryRun : {id: string}} = await $graphQLClient.request(createDryRunMutation, variables);
+			// refresh dry runs list
+			const response: { project: Project } = await $graphQLClient.request(allDryRunsQuery, {
+				projectId: $selectedProject?.id
+			});
+			$selectedProject = response.project;
+			const createDryRunErrorModal: ModalSettings = {
+				type: 'alert',
+				title: 'New dry run created&#10024;!',
+				body: `New dry run ID: ${responseCreateDryRun?.createDryRun?.id}`,
+			};
+			modalStore.trigger(createDryRunErrorModal);
+			alertModal = true;
+			await new Promise((resolve) => setTimeout(resolve, 2000));
+			modalStore.close();
+			await refreshProjectDetails();			
+			modalStore.clear();
+		} catch (error) {	
+			// TODO: handle error 
 			console.log(error);
 		}
-		// refresh dry runs list
-		const response: { project: Project } = await $graphQLClient.request(allDryRunsQuery, {
-			projectId: $selectedProject?.id
-		});
-		$selectedProject = response.project;
-		await refreshProjectDetails();
+		
 	}
 </script>
 
-{#if $modalStore[0]}
+{#if !hideModal}
 	<div class="modal-example-form {cBase}">
 		<header class={cHeader}>{$modalStore[0].title ?? '(title missing)'}</header>
 		<article>{$modalStore[0].body ?? '(body missing)'}</article>
@@ -115,7 +121,7 @@
 						{/if}
 						{#each taskList[i].arguments.parameters as param, j}
 							<label>Enviroment parameters:</label>
-							<label
+							<label class="ml-5"
 								>{param.name}:
 								<span>
 									<input type="text" bind:value={taskList[i].arguments.parameters[j].value} />
@@ -135,4 +141,6 @@
 	</div>
 {/if}
 
-<!-- <Modal/> -->
+{#if alertModal}
+	<Modal/>
+{/if}
diff --git a/frontend-dev/src/routes/projects/[project_id]/[dry_run]/symbol-for-action.svelte b/frontend-dev/src/routes/projects/[project_id]/[dry_run]/symbol-for-action.svelte
@@ -2,11 +2,26 @@
 	import { HelpCircleIcon, PlayCircleIcon, StopCircleIcon, PlusIcon } from 'svelte-feather-icons';
 	import stopDryRunMutation from '../../../../queries/stop_dry_run.js';
 	import { graphQLClient } from '../../../../stores/stores.js';
+	import { modalStore, type ModalSettings } from '@skeletonlabs/skeleton';
 
 	export let action: string, dryRunId: string;
 
 	async function stopRun() {
-		const response = await $graphQLClient.request(stopDryRunMutation, { dryRunId: dryRunId, terminate: false });
+		try {
+			await $graphQLClient.request(stopDryRunMutation, { dryRunId: dryRunId, terminate: false });
+			const createDryRunErrorModal: ModalSettings = {
+				type: 'alert',
+				title: 'Stopping dry run..',
+				body: `ID: ${dryRunId}`,
+			};
+			modalStore.trigger(createDryRunErrorModal);
+			await new Promise((resolve) => setTimeout(resolve, 1000));
+			modalStore.close();
+			modalStore.clear();
+		} catch {
+			// TODO: handle error
+			console.log('Error! to be handled')
+		}
 	}
 </script>
 

diff --git a/frontend-dev/src/routes/projects/modal-submit-new-project.svelte b/frontend-dev/src/routes/projects/modal-submit-new-project.svelte
@@ -7,6 +7,7 @@
 	import createWorkflowTemplateMutation from '../../queries/create_workflow_template.js'
 	import type { Project } from '../../types.js';
 	import { modalStore } from '@skeletonlabs/skeleton';
+	import yaml from 'js-yaml';
 
 	export let parent: any;
 
@@ -22,9 +23,16 @@
 
 		const responseCreateProject : {createProject: Project}= await get(graphQLClient).request(createProjectMutation, variables1);
 		if (formData.template != '') {
+			let template:JSON ;
+			// check if template is in JSON/YAML format, if YAML convert to JSON
+			try { 
+				template = JSON.parse(formData.template);
+			} catch {
+				template  = yaml.load(formData.template);
+			}
 			const variables2 = {
 				input: {
-					argoWorkflowTemplate: JSON.parse(formData.template),
+					argoWorkflowTemplate: template,
 					name: formData.name,
 					projectId: responseCreateProject.createProject.id,
 				}
@@ -49,10 +57,10 @@
 				<input class="input" type="text" bind:value={formData.name} placeholder="Enter name..." />
 			</label>
 			<label class="label">
-				<span>Project template</span>
-				<input class="input" type="text" bind:value={formData.template} placeholder="Enter argo workflow template (JSON)..." />
+				Project template
+				<br/>
+				<textarea rows="8" cols="50" bind:value={formData.template} placeholder="Enter argo workflow template (JSON/YAML)..." ></textarea>
 			</label>
-			<!-- TODO: Fill the rest -->
 		</form>
 		<footer class="modal-footer {parent.regionFooter}">
         <button class="btn {parent.buttonNeutral}" on:click={parent.onClose}>{parent.buttonTextCancel}</button>