feat: enhance SummaryCard component with improved heading and body structure; update utilization display formatting

Author: rbjornstad

Diff for: src/lib/components/SummaryCard.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { HelpText } from '@nais/ds-svelte-community';
+	import { BodyShort, Heading, HelpText } from '@nais/ds-svelte-community';
 	import type { Snippet } from 'svelte';
 
 	const colors = {
@@ -40,15 +40,17 @@
 		{@render icon({ color })}
 	</div>
 	<div class="summary">
-		<h4>
-			{title}
+		<div class="heading">
+			<Heading level="2" size="xsmall">
+				{title}
+			</Heading>
 			{#if helpText}
 				<HelpText title={helpTextTitle ? helpTextTitle : ''}>{helpText}</HelpText>
 			{/if}
-		</h4>
-		<p class="metric">
+		</div>
+		<BodyShort>
 			{@render children()}
-		</p>
+		</BodyShort>
 	</div>
 </div>
 
@@ -76,15 +78,11 @@
 	.summary {
 		width: 100%;
 	}
-	.summary > h4 {
+	.heading {
 		display: flex;
 		justify-content: space-between;
 		margin: 0;
 		font-size: 1rem;
 		color: var(--color-text-secondary);
 	}
-	.metric {
-		font-size: 1.5rem;
-		margin: 0;
-	}
 </style>

Diff for: src/lib/utils/resources.ts

@@ -259,7 +259,6 @@ export function cpuUtilization(cpuRequest: number | undefined, totalUsage: numbe
 	if (!cpuRequest) return 0;
 	const totalCores = cpuRequest;
 	const utilization = (totalUsage / totalCores) * 100;
-	console.log('cpu utilization', utilization);
 	return Math.round(utilization * 10 ** 2) / 10 ** 2;
 }
 

Diff for: src/routes/team/[team]/[env]/app/[app]/Utilization.svelte

@@ -48,13 +48,23 @@
 		<Heading level="3" size="small">Utilization</Heading>
 		<BodyShort>
 			<CpuIcon class="text-aligned-icon" />
-			{cpuUtil}% of {$data.utilization.cpuRequests.toLocaleString('en-GB', {
-				maximumFractionDigits: 2
-			})}CPUs
+			{cpuUtilization($data.utilization.cpuRequests, $data.utilization.cpuUsage)}% of {$data.utilization.cpuRequests.toLocaleString(
+				'en-GB',
+				{
+					minimumFractionDigits: 2,
+					maximumFractionDigits: 2
+				}
+			)} CPUs
 		</BodyShort>
 		<BodyShort>
 			<FileIcon class="text-aligned-icon" />
-			{memUtil}% of {prettyBytes($data.utilization.memoryRequests)} of memory
+			{(
+				memoryUtilization($data.utilization.memoryRequests, $data.utilization.memoryUsage) * 100
+			).toFixed(0)}% of {prettyBytes($data.utilization.memoryRequests, {
+				locale: 'en',
+				minimumFractionDigits: 2,
+				maximumFractionDigits: 2
+			})}
 		</BodyShort>
 		<Link href="/team/{$data.team.slug}/{$data.environment.name}/app/{$data.name}/utilization">
 			View details

Diff for: src/routes/team/[team]/[env]/app/[app]/utilization/+page.svelte

@@ -101,7 +101,7 @@
 						minimumFractionDigits: 2,
 						maximumFractionDigits: 2
 					}
-				)} cores
+				)} CPUs
 			</SummaryCard>
 		</Card>
 		<Card columns={3} borderColor="#91dc75">
@@ -145,7 +145,7 @@
 		</Card>
 		<Card columns={3} borderColor="#91dc75">
 			<SummaryCard
-				title="Unused memory cost"
+				title="Unused mem cost"
 				helpTextTitle="Annual cost of unused memory"
 				helpText="Estimate of annual cost of unused memory calculated based on current utilization."
 				color="green"

Diff for: src/routes/team/[team]/utilization/+page.svelte

@@ -211,7 +211,7 @@
 
 <div class="grid">
 	{#if resourceUtilization}
-		<Card columns={3} borderColor="#83bff6">
+		<Card columns={4} borderColor="#83bff6">
 			<SummaryCard
 				color="blue"
 				title="Unused CPU cost"
@@ -235,7 +235,7 @@
 				{/if}
 			</SummaryCard>
 		</Card>
-		<Card columns={3} borderColor="#91dc75">
+		<Card columns={4} borderColor="#91dc75">
 			<SummaryCard
 				color="green"
 				title="Unused memory cost"