feat: enhance deployment status display with error handling and additional data

Author: rbjornstad

src/lib/components/WorkloadDeploy.svelte

@@ -2,7 +2,7 @@
 	import { fragment, graphql, type WorkloadDeploy } from '$houdini';
 	import Time from '$lib/Time.svelte';
 	import { isValidSha } from '$lib/utils/isValidSha';
-	import { BodyShort, Heading, Link } from '@nais/ds-svelte-community';
+	import { BodyShort, Heading, Link, Tag } from '@nais/ds-svelte-community';
 	import { ExternalLinkIcon } from '@nais/ds-svelte-community/icons';
 
 	interface Props {
@@ -25,6 +25,11 @@
 							triggerUrl
 							commitSha
 							repository
+							statuses {
+								nodes {
+									state
+								}
+							}
 						}
 					}
 				}
@@ -38,7 +43,14 @@
 </script>
 
 <div class="wrapper">
-	<Heading level="3" size="small">Deploy</Heading>
+	<Heading level="3" size="small">
+		<div style="display: flex; gap: var(--a-spacing-2);">
+			Deployment
+			{#if deploymentInfo?.statuses.nodes[0].state === 'FAILURE'}
+				<Tag variant="error" size="small">Failed</Tag>
+			{/if}
+		</div>
+	</Heading>
 	{#if deploymentInfo}
 		{#if deploymentInfo.createdAt}
 			<BodyShort>Last deployed <Time time={deploymentInfo.createdAt} distance={true} />.</BodyShort>

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

@@ -8,7 +8,31 @@ query App($app: String!, $team: Slug!, $env: String!) {
 				team {
 					slug
 				}
+				image {
+					tag
+				}
+				instances {
+					nodes {
+						image {
+							name
+							tag
+						}
+					}
+				}
 				deletionStartedAt
+				deployments(first: 1) {
+					nodes {
+						triggerUrl
+						statuses {
+							nodes {
+								state
+								message
+
+								createdAt
+							}
+						}
+					}
+				}
 
 				...AppInstances
 				...AppStatus

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

@@ -11,8 +11,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 { ArrowCirclepathIcon } from '@nais/ds-svelte-community/icons';
+	import { Alert, BodyShort, Button, Heading } from '@nais/ds-svelte-community';
+	import { ArrowCirclepathIcon, ExternalLinkIcon } from '@nais/ds-svelte-community/icons';
 	import type { PageData } from './$houdini';
 	import Ingresses from './Ingresses.svelte';
 	import Instances from './Instances.svelte';
@@ -56,6 +56,11 @@
 			team: teamSlug
 		});
 	};
+
+	let deployFailed = $derived(
+		$App.data?.team.environment.application.deployments.nodes[0].statuses.nodes[0].state ===
+			'FAILURE'
+	);
 </script>
 
 <GraphErrors errors={$App.errors} />
@@ -73,6 +78,22 @@
 						/>. If the deletion is taking too long, please contact the Nais team.
 					</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>
+							{$App.data?.team.environment.application.deployments.nodes[0].statuses.nodes[0]
+								.message}
+						</BodyShort>
+						{#if $App.data?.team.environment.application.deployments.nodes[0].triggerUrl}
+							<a href={$App.data?.team.environment.application.deployments.nodes[0].triggerUrl}
+								>Github action <ExternalLinkIcon /></a
+							>
+						{/if}
+					</Alert>
+				{/if}
+
 				<div style="display:flex; flex-direction: column; gap: var(--a-spacing-4);">
 					<div class="instances-header">
 						<Heading level="3" size="medium">Instances</Heading>