From 6d113883e052def7d6e02896e8fda38c8371e48a Mon Sep 17 00:00:00 2001
From: AleenaThomas_gh <aleena.thomas@sintef.no>
Date: Mon, 24 Jul 2023 11:33:39 +0200
Subject: [PATCH] Added show workflowtemplate in projects page

---
 frontend-dev/src/queries/get_all_projects.ts  |  3 ++
 frontend-dev/src/routes/+layout.svelte        |  1 -
 frontend-dev/src/routes/projects/+page.svelte | 14 ++++++++--
 .../src/routes/templates/[template]/+page.js  |  4 +++
 .../dag => templates/[template]}/+page.svelte | 28 +++++++++++++------
 5 files changed, 39 insertions(+), 11 deletions(-)
 create mode 100644 frontend-dev/src/routes/templates/[template]/+page.js
 rename frontend-dev/src/routes/{visualizations/dag => templates/[template]}/+page.svelte (74%)

diff --git a/frontend-dev/src/queries/get_all_projects.ts b/frontend-dev/src/queries/get_all_projects.ts
index 0a959e93..f636f40e 100644
--- a/frontend-dev/src/queries/get_all_projects.ts
+++ b/frontend-dev/src/queries/get_all_projects.ts
@@ -10,6 +10,9 @@ const allProjectsQuery = gql`
       dryRuns {
         id
       }
+      workflowTemplates {
+        argoWorkflowTemplate 
+      }
     }
   }
 `;
diff --git a/frontend-dev/src/routes/+layout.svelte b/frontend-dev/src/routes/+layout.svelte
index f689312d..163cd82c 100644
--- a/frontend-dev/src/routes/+layout.svelte
+++ b/frontend-dev/src/routes/+layout.svelte
@@ -61,7 +61,6 @@
 		<AppRail>
 			<AppRailTile label="Projects" href="/projects"><BookOpenIcon size="1.5x" /></AppRailTile>
 			<AppRailTile label="Registry Key Vault" href="/secrets"><LockIcon size="1.5x" /></AppRailTile>
-			<AppRailTile label="DAG" href="/visualizations/dag"><Share2Icon size="1.5x" /></AppRailTile>
 			<AppRailTile label="dDAG" href="/visualizations/ddag"><Share2Icon size="1.5x" /></AppRailTile>
 		</AppRail>
 	</svelte:fragment>
diff --git a/frontend-dev/src/routes/projects/+page.svelte b/frontend-dev/src/routes/projects/+page.svelte
index 393513b5..5ca608f5 100644
--- a/frontend-dev/src/routes/projects/+page.svelte
+++ b/frontend-dev/src/routes/projects/+page.svelte
@@ -81,6 +81,12 @@
 		goto(`/projects/[project_id]/${dry_run}`);
 	}
 
+	function showTemplate(event:any, project:Project) {
+		$clickedProjectId = project.id;
+		event.stopPropagation();
+		const template = project.workflowTemplates[0].argoWorkflowTemplate?.metadata.name;
+		goto(`/templates/${template}`);
+	}
 	$: reactiveProjectsList = $projectsList;
 	$: dryRunCounts = getDryRunCounts(reactiveProjectsList);
 </script>
@@ -117,7 +123,8 @@
 						<th>Name</th>
 						<th>Created date</th>
 						<th>Dry runs</th>
-						<th>Simulation runs</th>
+						<!-- <th>Simulation runs</th> -->
+						<th>Template</th>
 					</tr>
 				</thead>
 				<tbody>
@@ -139,7 +146,10 @@
 							<td>{project.createdAt}</td>
 							<td>{dryRunCounts[project.id]}</td>
 							<!-- TODO: Aleena add number of dry runs and number of simulation runs-->
-							<td>NaN</td>
+							<!-- <td>NaN</td> -->
+							<td on:click={(event) => showTemplate(event, project)}>
+								<p class="no-underline hover:underline">show</p>
+							</td>
 						</tr>
 					{/each}
 				</tbody>
diff --git a/frontend-dev/src/routes/templates/[template]/+page.js b/frontend-dev/src/routes/templates/[template]/+page.js
new file mode 100644
index 00000000..a6228188
--- /dev/null
+++ b/frontend-dev/src/routes/templates/[template]/+page.js
@@ -0,0 +1,4 @@
+export async function load({ params }) {
+    let { template } = params;
+    return { template };
+}
\ No newline at end of file
diff --git a/frontend-dev/src/routes/visualizations/dag/+page.svelte b/frontend-dev/src/routes/templates/[template]/+page.svelte
similarity index 74%
rename from frontend-dev/src/routes/visualizations/dag/+page.svelte
rename to frontend-dev/src/routes/templates/[template]/+page.svelte
index f0214d6a..6221058b 100644
--- a/frontend-dev/src/routes/visualizations/dag/+page.svelte
+++ b/frontend-dev/src/routes/templates/[template]/+page.svelte
@@ -1,21 +1,22 @@
 <script lang="ts">
     import { ProgressBar } from '@skeletonlabs/skeleton';
     import { get } from 'svelte/store';
-    import { graphQLClient } from '../../../stores/stores';
+    import { graphQLClient, clickedProjectId } from '../../../stores/stores';
     import getWorkflowQuery from '../../../queries/get_workflow_template';
     import { CodeBlock } from '@skeletonlabs/skeleton';
     import YAML from 'json-to-pretty-yaml';
 	import initKeycloak from '$lib/keycloak.js';
 	import { GraphQL_API_URL } from '$lib/config.js';
 	import { GraphQLClient } from 'graphql-request';
+	import { goto } from '$app/navigation';
+
+    export let data;
 
-    //const workflowtemplatename = 'helloworld';
-    const workflowtemplatename = 'dag-project';
     $: language = 'yaml';
 
     const getWorkflowTemplate = async (): Promise<{}> => {
         const variables = {
-            name: workflowtemplatename,
+            name: data.template,
         }
         if (!$graphQLClient) {
 			try {
@@ -26,7 +27,6 @@
 			}
 		}
 		const response: {} = await get(graphQLClient).request(getWorkflowQuery, variables);
-        //console.log(response);
 		return response;
 	};
 	
@@ -49,9 +49,19 @@
 
 </script>
 
-<!-- Page Header -->
 <div class="container p-5">
-    <h1>DAG</h1>
+    <h1><a href="/projects" >Projects</a> 
+		<span STYLE="font-size:14px">/ </span>{data.template}
+		<!-- <span STYLE="font-size:14px">/ </span> -->
+    </h1>
+    <br/>
+    <h1>
+        <!-- TODO: adjust position and style -->
+        <button class="btn variant-filled" on:click={() => goto(`/projects/[project_id]/${$clickedProjectId}`)} >
+            Dry Runs ->
+        </button>
+    </h1>
+	<div class="table-container p-5">
     {#await workflowPromise}
         <ProgressBar />
     {:then workflow}
@@ -60,7 +70,8 @@
                 <span>Switch to {language === 'yaml' ? 'JSON' : 'YAML'}</span>
             </button>
         </div>
-        <div class="code">
+        <br/>
+        <div class="code overflow-y-auto h-96">
             {#if language === 'json'}
                 <CodeBlock language={language} code={JSON.stringify(workflow, null, 2)} text="text-xs" />
             {:else if language === 'yaml'}
@@ -69,3 +80,4 @@
         </div>
     {/await}
 </div>
+</div>