Code cleanup frontend

frontend-dev/src/lib/keycloak.ts

@@ -2,23 +2,21 @@ import { GraphQLClient } from 'graphql-request';
 import { graphQLClient, username } from '../stores/stores.js';
 import { GraphQL_API_URL } from '../lib/config.js';
 import Keycloak from 'keycloak-js';
-import { keycloakHandler } from '../stores/stores.js';
 import { browser } from '$app/environment';
-import { get } from 'svelte/store';
 
 let initKeycloakPromise: Promise<void> | undefined;
 
 async function internalInitKeycloak(): Promise<void> {
     // TODO: call keycloak only if there is no token or current token is expired
-    keycloakHandler.set(new Keycloak({
+    const keyCloak = new Keycloak({
         url: 'https://datacloud-auth.euprojects.net/auth', // TODO - add env var
         realm: 'user-authentication',
         clientId: 'sim-pipe-web', // TODO - add env var
         // 'enable-cors': 'true', // TODO it seems to be ignored
-    }));
-    await get(keycloakHandler).init({ onLoad: 'login-required', flow: 'implicit' }); //  Implicit flow.
+    });
+    await keyCloak.init({ onLoad: 'login-required', flow: 'implicit' }); //  Implicit flow.
 
-    if (!get(keycloakHandler).token) {
+    if (keyCloak.token) {
         throw new Error("Keycloak didn't return a valid token");
     }
     console.log('User is authenticated');
@@ -27,16 +25,12 @@ async function internalInitKeycloak(): Promise<void> {
     //     authorization: `Bearer ${get(keycloakHandler).token}`,
     //     mode: 'cors',
     // };
-    if (!get(keycloakHandler).idTokenParsed) {
+    if (!keyCloak.idTokenParsed) {
         throw new Error("Keycloak didn't return a valid idTokenParsed");
     }
-    // TODO: Aleena check uncaught (in promise) cannot read properties of endefined (reading 'preferred_username')
-    // if (typeof get(keycloakHandler)?.idTokenParsed.preferred_username !== 'string') {
-    //     throw new TypeError("Keycloak didn't return a valid preferred_username");
-    //}
-    // TODO: Aleena initialize graphqlclient and save in store
-    // username.set((keycloakHandler as unknown as Keycloak).idTokenParsed.preferred_username);
-    username.set("testuser");
+    // TODO: Aleena change to authenticated when api is ready
+
+    username.set(keyCloak.idTokenParsed.preferred_username);
     //   if (config.SIM_PIPE_CONTROLLER_URL) {
     //     graphqlUrl = config.SIM_PIPE_CONTROLLER_URL;
     //   } else if (/^localhost(:\d+)?$/.test(window.location.host)) {

frontend-dev/src/routes/projects/+page.svelte

@@ -110,7 +110,6 @@
 	</div>
 
 	<div class="p-5 table-container overflow-y-auto max-h-3/4">
-		<!-- TODO: add margin/padding for table elements -->
 		{#await projectsPromise}
 			<p style="font-size:20px;">Loading projects...</p>
 			<ProgressBar />

frontend-dev/src/routes/projects/[project_id]/[dry_run]/+page.svelte

@@ -1,20 +1,21 @@
 <script lang="ts">
-	import { selectedProject, graphQLClient, clickedProjectId } from '../../../../stores/stores.js';
+	import { selectedProject, clickedProjectId } from '../../../../stores/stores.js';
 	import SymbolForRunResult from './symbol-for-run-result.svelte';
 	import SymbolForAction from './symbol-for-action.svelte';
 	import { Modal, modalStore } from '@skeletonlabs/skeleton';
 	import type { ModalSettings } from '@skeletonlabs/skeleton';
 	import ModalSubmitNewDryRun from './modal-submit-new-dry-run.svelte';
 	import type { DryRun, Project } from '../../../../types.js';
 	import allDryRunsQuery from '../../../../queries/get_all_dryruns.js'
-    import { get } from 'svelte/store';
 	import deleteDryRunMutation from '../../../../queries/delete_dry_run.js';
 	import { goto } from '$app/navigation';
 	import Timestamp from './timestamp.svelte';
 	import { requestGraphQLClient } from '$lib/graphqlUtils.js';
 
+	export let data;
+
 	const getProjectDetails = async (): Promise<Project> => {
-		const variables = {projectId: get(clickedProjectId)};
+		const variables = {projectId: data.dry_run};
 		const response: { project: Project } = await requestGraphQLClient(allDryRunsQuery, variables);
 		return response.project;
 	};
@@ -77,11 +78,11 @@
 			return 'rerun';
 		else if(status == 'Running')
 			return 'stop';
-		else if(status == 'Pending')
+		else if(status == 'Pending'|| status == 'Skipped' || status == 'Omitted')
 			return 'run';
-		else if(status == 'Failed' || status == 'Error')
-			return 'retry';
-		return 'rerun';
+		else if(status == 'Failed' || status == 'Error' )
+			return 'alert';
+		return 'unknown';
 	}
 
 	function dryRunOnClick(dryRunId:string) {

frontend-dev/src/routes/projects/[project_id]/[dry_run]/[resource]/+page.svelte

@@ -406,7 +406,6 @@
                     {/await}
                 </div>
 
-                <!-- TODO: adjust scroll https://tailwindcss.com/docs/overflow -->
                 <div class="overflow-y-auto card p-5 basis-1/3">
                     <div>
                         <h1>Logs</h1>

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

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { HelpCircleIcon, StopCircleIcon, PauseIcon, PlayIcon, 
-		RepeatIcon } from 'svelte-feather-icons';
+		RepeatIcon, 
+		AlertCircleIcon} from 'svelte-feather-icons';
 	import stopDryRunMutation from '../../../../queries/stop_dry_run.js';
 	import suspendDryRunMutation from '../../../../queries/suspend_dry_run.js';
 	import resumeDryRunMutation from '../../../../queries/resume_dry_run.js';
@@ -62,7 +63,7 @@
 {#if action == 'rerun'}
 	<div class="relative">
 		<div class="absolute left-5 bottom-2 font-bold">+</div>
-		<PlayIcon size="20" />
+		<RepeatIcon size="20" />
 	</div>
 {:else if action == 'run'}
 	<PlayIcon size="20" />
@@ -74,7 +75,11 @@
 	{/if}
 	<button on:click="{stopRun}"><StopCircleIcon size="20" /></button>
 {:else if action == 'retry'}
-	<RepeatIcon size="20" />
+	<PlayIcon size="20" />
+{:else if action == 'alert'}
+	<AlertCircleIcon size="20" />
+{:else if action == 'unknown'}
+	<AlertCircleIcon size="20" />
 {:else}
 	<HelpCircleIcon size="20" />
 {/if}

frontend-dev/src/routes/secrets/+page.svelte

@@ -90,8 +90,6 @@
 		{#await credentialsPromise}
 			<p style="font-size:20px;">Loading credentials...</p>
 			{:then credentialsList}
-			<!-- Native Table Element -->
-			<!-- TODO: add margin/padding for table elements -->
 			<table class="w-half table table-interactive">
 				<thead>
 					<tr>

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

@@ -41,7 +41,6 @@
 <div class="container p-5">
     <h1><a href="/projects" >Projects</a> 
 		<span STYLE="font-size:14px">/ </span>{data.template}
-		<!-- <span STYLE="font-size:14px">/ </span> -->
     </h1>
     <br/>
     <h1>

frontend-dev/src/stores/stores.ts

@@ -5,7 +5,6 @@ import type { Project, DockerRegistryCredential, DryRun } from '../types.js';
 
 export const graphQLClient = writable<GraphQLClient>();
 
-export const keycloakHandler = writable<Keycloak>();;
 export const projectsList = writable<Project[]|undefined>();
 export const selectedProject = writable<Project|undefined>();
 export const dryRunsList = writable<DryRun[]|undefined>();

frontend-dev/src/types.d.ts

@@ -85,6 +85,8 @@ enum DryRunPhase {
   Succeeded,
   Failed,
   Error,
+  Skipped,
+  Omitted
 }
 
 export type DockerRegistryCredential = {