feat: add handling for deployment failure messages and enhance GraphQL queries for job and application statuses

Author: rbjornstad

src/routes/+page.svelte

@@ -23,6 +23,8 @@
 
 <svelte:head><title>Console</title></svelte:head>
 
+<!-- ?naisdevice=connected -->
+
 {#if userTeams === 0}
 	<div class="page">
 		<Onboarding {tenantName} />

src/routes/Login.svelte

@@ -18,6 +18,8 @@
 	</style>
 </svelte:head>
 
+<!-- ?naisdevice=connected -->
+
 <div class="wrapper">
 	<div class="login">
 		<h1>

src/routes/Onboarding.svelte

@@ -103,6 +103,8 @@
 	);
 </script>
 
+<!--- ?naisdevice=connected -->
+
 <div class="onboarding">
 	<Heading level="1" size="xlarge" spacing>Welcome to Nais Console! 🎉</Heading>
 	{#if $teamsQuery.fetching}

src/routes/team/[team]/[env]/app/[app]/+page.svelte

@@ -58,7 +58,7 @@
 	};
 
 	let deployFailed = $derived(
-		$App.data?.team.environment.application.deployments.nodes[0].statuses.nodes[0].state ===
+		$App.data?.team.environment.application.deployments.nodes.at(0)?.statuses.nodes.at(0)?.state ===
 			'FAILURE'
 	);
 </script>
@@ -83,11 +83,11 @@
 						<Heading level="2" size="small" spacing>Last deployment failed</Heading>
 						<BodyShort spacing>
 							<strong>Error message:</strong>
-							{$App.data?.team.environment.application.deployments.nodes[0].statuses.nodes[0]
-								.message}
+							{$App.data?.team.environment.application.deployments.nodes.at(0)?.statuses.nodes.at(0)
+								?.message}
 						</BodyShort>
-						{#if $App.data?.team.environment.application.deployments.nodes[0].triggerUrl}
-							<a href={$App.data?.team.environment.application.deployments.nodes[0].triggerUrl}
+						{#if $App.data?.team.environment.application.deployments.nodes.at(0)?.triggerUrl}
+							<a href={$App.data?.team.environment.application.deployments.nodes.at(0)?.triggerUrl}
 								>Github action <ExternalLinkIcon /></a
 							>
 						{/if}

src/routes/team/[team]/[env]/job/[job]/+page.gql

@@ -9,6 +9,18 @@ query Job($job: String!, $team: Slug!, $env: String!) @cache(policy: NetworkOnly
 					expression
 					timeZone
 				}
+				deployments(first: 1) {
+					nodes {
+						triggerUrl
+						statuses {
+							nodes {
+								state
+								message
+								createdAt
+							}
+						}
+					}
+				}
 				...JobRuns
 				...JobStatus
 				...Persistence

src/routes/team/[team]/[env]/job/[job]/+page.svelte

@@ -9,7 +9,8 @@
 	import WorkloadDeploy from '$lib/components/WorkloadDeploy.svelte';
 	import GraphErrors from '$lib/GraphErrors.svelte';
 	import Time from '$lib/Time.svelte';
-	import { Alert, Button, Heading } from '@nais/ds-svelte-community';
+	import { Alert, BodyShort, Button, Heading } from '@nais/ds-svelte-community';
+	import { ExternalLinkIcon } from '@nais/ds-svelte-community/icons';
 	import type { PageData } from './$houdini';
 	import Runs from './Runs.svelte';
 	import Schedule from './Schedule.svelte';
@@ -63,6 +64,11 @@
 			jobId: $Job.data!.team.environment.job.id
 		});
 	};
+
+	let deployFailed = $derived(
+		$Job.data?.team.environment.job.deployments.nodes.at(0)?.statuses.nodes.at(0)?.state ===
+			'FAILURE'
+	);
 </script>
 
 <GraphErrors errors={$Job.errors} />
@@ -80,6 +86,21 @@
 				</Alert>
 			{/if}
 
+			{#if deployFailed}
+				<Alert variant="error" fullWidth={false}>
+					<Heading level="2" size="small" spacing>Last deployment failed</Heading>
+					<BodyShort spacing>
+						<strong>Error message:</strong>
+						{$Job.data?.team.environment.job.deployments.nodes.at(0)?.statuses.nodes.at(0)?.message}
+					</BodyShort>
+					{#if $Job.data?.team.environment.job.deployments.nodes[0].triggerUrl}
+						<a href={$Job.data?.team.environment.job.deployments.nodes.at(0)?.triggerUrl}
+							>Github action <ExternalLinkIcon /></a
+						>
+					{/if}
+				</Alert>
+			{/if}
+
 			<div style="display:flex; flex-direction: column; gap:0.5rem;">
 				<div class="runs-header">
 					<Heading level="2" size="medium">Runs</Heading>