feat: add headers with icons to various application and job pages for…

… improved UI clarity
nais · Feb 6, 2025 · f43c062 · f43c062
1 parent dc4f052
commit f43c062
Show file tree

Hide file tree

Showing 11 changed files with 169 additions and 137 deletions.
diff --git a/src/lib/components/Deployments.svelte b/src/lib/components/Deployments.svelte
@@ -3,8 +3,6 @@
 	import DeploymentStatus from '$lib/DeploymentStatus.svelte';
 	import Time from '$lib/Time.svelte';
 	import { Table, Tbody, Td, Th, Thead, Tr } from '@nais/ds-svelte-community';
-	import { RocketIcon } from '@nais/ds-svelte-community/icons';
-	import IconWithText from './IconWithText.svelte';
 
 	interface Props {
 		workload: WorkloadDeployments;
@@ -55,9 +53,6 @@
 	);
 </script>
 
-<div class="header">
-	<IconWithText icon={RocketIcon} text="Deployments" size="large" />
-</div>
 {#if $data !== null}
 	<Table size="small" zebraStripes>
 		<Thead>

diff --git a/src/routes/team/[team]/[env]/app/[app]/cost/+page.svelte b/src/routes/team/[team]/[env]/app/[app]/cost/+page.svelte
@@ -10,7 +10,9 @@
 		getMinToDate,
 		type DailCostType
 	} from '$lib/chart/cost_transformer';
+	import IconWithText from '$lib/components/IconWithText.svelte';
 	import { Alert } from '@nais/ds-svelte-community';
+	import { WalletIcon } from '@nais/ds-svelte-community/icons';
 	import type { PageData } from './$houdini';
 	interface Props {
 		data: PageData;
@@ -41,6 +43,10 @@
 	const todayMinusTwoDays = today.toISOString().split('T')[0];
 </script>
 
+<div class="header">
+	<IconWithText icon={WalletIcon} text="Cost" size="large" />
+</div>
+
 <GraphErrors errors={$AppCost.errors} />
 
 <Alert variant="info">Work in progress. Some cost types might not be available.</Alert>
@@ -68,6 +74,13 @@
 {/if}
 
 <style>
+	.header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		align-self: stretch;
+		margin-bottom: var(--a-spacing-3);
+	}
 	.grid {
 		margin-top: 1rem;
 		display: grid;

diff --git a/src/routes/team/[team]/[env]/app/[app]/delete/+page.svelte b/src/routes/team/[team]/[env]/app/[app]/delete/+page.svelte
@@ -2,9 +2,11 @@
 	import { goto } from '$app/navigation';
 	import { type DeleteAppPage$result, graphql } from '$houdini';
 	import Card from '$lib/Card.svelte';
+	import IconWithText from '$lib/components/IconWithText.svelte';
 	import PersistenceList from '$lib/components/PersistenceList.svelte';
 	import GraphErrors from '$lib/GraphErrors.svelte';
 	import { Alert, Button, HelpText, TextField } from '@nais/ds-svelte-community';
+	import { TrashIcon } from '@nais/ds-svelte-community/icons';
 	import { get } from 'svelte/store';
 	import type { PageData } from './$houdini';
 
@@ -64,9 +66,11 @@
 
 {#if $DeleteAppPage?.data?.team.environment.application}
 	{@const app = $DeleteAppPage?.data?.team.environment.application}
-	<Card borderColor="var(--a-border-danger)">
-		<h3>Delete {app.name}</h3>
+	<div class="header">
+		<IconWithText icon={TrashIcon} text="Delete {app.name}" size="large" />
+	</div>
 
+	<Card borderColor="var(--a-border-danger)">
 		{#if hasResourcesToDelete(app)}
 			<p>
 				In addition to the application the following resources
@@ -165,6 +169,13 @@
 {/if}
 
 <style>
+	.header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		align-self: stretch;
+		margin-bottom: var(--a-spacing-3);
+	}
 	code {
 		font-size: 1rem;
 	}

diff --git a/src/routes/team/[team]/[env]/app/[app]/deploys/+page.svelte b/src/routes/team/[team]/[env]/app/[app]/deploys/+page.svelte
@@ -1,7 +1,9 @@
 <script lang="ts">
 	import Card from '$lib/Card.svelte';
 	import Deployments from '$lib/components/Deployments.svelte';
+	import IconWithText from '$lib/components/IconWithText.svelte';
 	import GraphErrors from '$lib/GraphErrors.svelte';
+	import { RocketIcon } from '@nais/ds-svelte-community/icons';
 	import type { PageData } from './$houdini';
 	interface Props {
 		data: PageData;
@@ -13,9 +15,21 @@
 </script>
 
 <GraphErrors errors={$AppDeploys.errors} />
-
+<div class="header">
+	<IconWithText icon={RocketIcon} text="Deployments" size="large" />
+</div>
 {#if $AppDeploys.data}
 	<Card>
 		<Deployments workload={$AppDeploys.data.team.environment.workload} />
 	</Card>
 {/if}
+
+<style>
+	.header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		align-self: stretch;
+		margin-bottom: var(--a-spacing-3);
+	}
+</style>
diff --git a/src/routes/team/[team]/[env]/app/[app]/image/+page.gql b/src/routes/team/[team]/[env]/app/[app]/image/+page.gql
@@ -1,18 +1,18 @@
 query ApplicationImageDetails($team: Slug!, $env: String!, $app: String!)
 @cache(policy: NetworkOnly) {
-	team(slug: $team) @loading {
-		slug @loading
-		environment(name: $env) @loading {
-			name @loading
-			workload(name: $app) @loading {
+	team(slug: $team) {
+		slug
+		environment(name: $env) {
+			name
+			workload(name: $app) {
 				__typename
-				name @loading
-				image @loading {
-					name @loading
+				name
+				image {
+					name
 					tag
 					hasSBOM
 
-					vulnerabilitySummary @loading {
+					vulnerabilitySummary {
 						critical
 						high
 						medium
@@ -25,6 +25,6 @@ query ApplicationImageDetails($team: Slug!, $env: String!, $app: String!)
 				}
 			}
 		}
-		viewerIsMember @loading
+		viewerIsMember
 	}
 }