downgrade deprecation to warning and remove Nais reference in workload health

Author: andnorda

src/lib/components/Badge.svelte

@@ -0,0 +1,63 @@
+<script module lang="ts">
+	export const badgeLevel = (
+		errors: { level: WorkloadStatusErrorLevel$options }[]
+	): WorkloadStatusErrorLevel$options => {
+		if (errors.some((error) => error.level === 'ERROR')) {
+			return 'ERROR';
+		} else if (errors.some((error) => error.level === 'WARNING')) {
+			return 'WARNING';
+		} else {
+			return 'TODO';
+		}
+	};
+</script>
+
+<script lang="ts">
+	import { type WorkloadStatusErrorLevel$options } from '$houdini';
+
+	export type BadgeProps = {
+		count: number;
+		level: WorkloadStatusErrorLevel$options;
+	};
+
+	const { count, level }: BadgeProps = $props();
+</script>
+
+{#if count}
+	<div class={['badge', `badge--${level}`, { 'badge--long': `${count}`.length > 2 }]}>
+		{count}
+	</div>
+{/if}
+
+<style>
+	.badge {
+		height: 2rem;
+		width: 2rem;
+		border-radius: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+
+		&.badge--WARNING {
+			background-color: var(--a-surface-warning);
+			color: var(--a-text-on-warning);
+			border: 1px solid var(--a-border-warning);
+		}
+
+		&.badge--ERROR {
+			background-color: var(--a-surface-danger);
+			color: var(--a-text-on-danger);
+			border: 1px solid var(--a-border-danger);
+		}
+
+		&.badge--TODO {
+			background-color: var(--a-surface-info);
+			color: var(--a-text-on-info);
+			border: 1px solid var(--a-border-info);
+		}
+
+		&.badge--long {
+			font-size: var(--a-font-size-medium);
+		}
+	}
+</style>

src/lib/components/list/AppListItem.svelte

@@ -17,7 +17,13 @@
 			name: string;
 			environment: { name: string };
 			team: { slug: string };
-			status: { state: string };
+			status: {
+				state: string;
+				errors: {
+					__typename: string | null;
+					level: 'ERROR' | 'WARNING' | 'TODO';
+				}[];
+			};
 			deployments: { nodes: { createdAt: Date }[] };
 			instances: {
 				pageInfo: { totalCount: number };
@@ -39,11 +45,12 @@
 		}}
 	>
 		{#snippet icon()}
+			<!-- <Badge count={app.status.errors.length} level={badgeLevel(app.status.errors)} /> -->
 			<TooltipAlignHack
 				content={{
-					NAIS: 'Application is Nais',
+					NAIS: 'Application is healthy',
 					FAILING: 'Application is failing',
-					NOT_NAIS: 'Application is not Nais',
+					NOT_NAIS: 'Application has issues',
 					UNKNOWN: 'Application status is unknown'
 				}[app.status.state] ?? ''}
 			>

src/lib/components/list/JobListItem.svelte

@@ -46,9 +46,9 @@
 		{#snippet icon()}
 			<TooltipAlignHack
 				content={{
-					NAIS: 'Job is Nais',
+					NAIS: 'Job is healthy',
 					FAILING: 'Job is failing',
-					NOT_NAIS: 'Job is not Nais',
+					NOT_NAIS: 'Job has issues',
 					UNKNOWN: 'Job status is unknown'
 				}[job.status.state] ?? ''}
 			>

src/lib/components/list/ListItem.svelte

@@ -12,7 +12,8 @@
 	.list-item {
 		background-color: #f7f8f9;
 		display: grid;
-		grid-template-columns: 1fr auto;
+		grid-template-columns: 1fr;
+		grid-auto-flow: column;
 		align-items: center;
 		column-gap: var(--a-spacing-4);
 		padding: var(--a-spacing-4) var(--a-spacing-6);

src/lib/components/list/TeamListItem.svelte

@@ -1,9 +1,16 @@
 <script lang="ts">
 	import { PersonGroupIcon } from '@nais/ds-svelte-community/icons';
+	import Badge, { type BadgeProps } from '../Badge.svelte';
 	import IconLabel from '../IconLabel.svelte';
 	import ListItem from './ListItem.svelte';
 
-	const { team, errors }: { team: { slug: string; purpose: string }; errors: number } = $props();
+	const {
+		team,
+		badge
+	}: {
+		team: { slug: string; purpose: string };
+		badge?: BadgeProps;
+	} = $props();
 </script>
 
 <ListItem>
@@ -15,27 +22,7 @@
 		level="3"
 		href="/team/{team.slug}"
 	/>
-	{#if errors}
-		<div class={['errors', { 'errors--long': `${errors}`.length > 2 }]}>
-			{errors}
-		</div>
+	{#if badge}
+		<Badge {...badge} />
 	{/if}
 </ListItem>
-
-<style>
-	.errors {
-		height: 2rem;
-		width: 2rem;
-		border-radius: 100%;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		font-weight: var(--a-font-weight-bold);
-		background-color: var(--a-surface-danger);
-		color: var(--a-text-on-danger);
-
-		&.errors--long {
-			font-size: var(--a-font-size-medium);
-		}
-	}
-</style>

src/routes/+page.gql

@@ -22,6 +22,7 @@ query UserTeams @cache(policy: CacheAndNetwork) {
 								status {
 									errors {
 										__typename
+										level
 									}
 								}
 							}

src/routes/+page.svelte

@@ -43,12 +43,11 @@
 				{#if $UserTeams.data.me.__typename == 'User'}
 					<List>
 						{#each $UserTeams.data.me.teams.nodes as node (node.team.id)}
-							<TeamListItem
-								team={node.team}
-								errors={node.team.workloads.nodes.filter((w) =>
-									w.status.errors.some((e) => e.__typename === 'WorkloadStatusDeprecatedRegistry')
-								).length}
-							/>
+							<TeamListItem team={node.team} />
+							<!-- badge={{
+									count: node.team.workloads.nodes.length,
+									level: badgeLevel(node.team.workloads.nodes.flatMap((w) => w.status.errors))
+								}} -->
 						{:else}
 							<BodyLong>
 								You don't seem to belong to any teams at the moment. You can create a new team or

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

@@ -32,7 +32,7 @@
 {/if}
 
 {#if deprecatedImages?.length}
-	<Alert variant="error">
+	<Alert variant="warning">
 		Starting April 1st, applications and jobs on Nais must use images from Google Artifact Registry
 		(GAR). The easiest way to ensure that images are stored in GAR is to use Nais' GitHub Actions in
 		the workflow. <a

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

@@ -36,6 +36,7 @@ query App($app: String!, $team: Slug!, $env: String!) {
 				status {
 					errors {
 						__typename
+						level
 						... on WorkloadStatusDeprecatedRegistry {
 							registry
 						}

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

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { onNavigate } from '$app/navigation';
 	import { page } from '$app/state';
-	import { graphql } from '$houdini';
+	import { graphql, type WorkloadStatusErrorLevel$options } from '$houdini';
 	import AggregatedCostForWorkload from '$lib/components/AggregatedCostForWorkload.svelte';
 	import Confirm from '$lib/components/Confirm.svelte';
 	import Image from '$lib/components/Image.svelte';
@@ -60,6 +60,18 @@
 		$App.data?.team.environment.application.deployments.nodes.at(0)?.statuses.nodes.at(0)?.state ===
 			'FAILURE'
 	);
+
+	const levelVariant = (level?: WorkloadStatusErrorLevel$options) => {
+		switch (level) {
+			case 'ERROR':
+				return 'error';
+			case 'WARNING':
+				return 'warning';
+			case 'TODO':
+			default:
+				return 'info';
+		}
+	};
 </script>
 
 <GraphErrors errors={$App.errors} />
@@ -71,7 +83,13 @@
 		<div class="app-content">
 			<div class="main-section">
 				{#if app.status.errors.some((error) => error.__typename === 'WorkloadStatusDeprecatedRegistry')}
-					<Alert variant="error">
+					<Alert
+						variant={levelVariant(
+							app.status.errors.find(
+								(error) => error.__typename === 'WorkloadStatusDeprecatedRegistry'
+							)?.level
+						)}
+					>
 						<BodyShort spacing
 							>This application is using a deprecated image registry ({app.status.errors.find(
 								(error) => error.__typename === 'WorkloadStatusDeprecatedRegistry'

src/routes/team/[team]/applications/+page.gql

@@ -47,6 +47,10 @@ query Applications(
 				}
 				status {
 					state
+					errors {
+						__typename
+						level
+					}
 				}
 				deployments(first: 1) {
 					nodes {