feat: add resource requests and limits display to Instances component

Author: rbjornstad

src/routes/team/[team]/[env]/app/[app]/Instances.svelte

@@ -3,7 +3,8 @@
 	import { fragment, graphql } from '$houdini';
 	import AppInstanceListItem from '$lib/components/list/AppInstanceListItem.svelte';
 	import List from '$lib/components/list/List.svelte';
-	import { BodyShort } from '@nais/ds-svelte-community';
+	import { BodyShort, Heading } from '@nais/ds-svelte-community';
+	import prettyBytes from 'pretty-bytes';
 
 	interface Props {
 		app: AppInstances;
@@ -40,6 +41,14 @@
 								}
 							}
 						}
+						requests {
+							cpu
+							memory
+						}
+						limits {
+							cpu
+							memory
+						}
 					}
 					instances {
 						edges {
@@ -79,11 +88,86 @@
 	const instances = $derived($data.instances.edges.map((edge) => edge.node));
 </script>
 
+<div>
+	<Heading level="4" size="small">Resources:</Heading>
+	<ul class="resource-list">
+		<li>
+			Requests:
+			<ul>
+				<li>
+					<div class="resource-list-item">
+						<div>CPU:</div>
+						<div class="data">
+							{#if $data.resources.requests.cpu}
+								{$data.resources.requests.cpu?.toFixed(2)} cores
+							{:else}
+								Not set
+							{/if}
+						</div>
+					</div>
+				</li>
+
+				<li>
+					<div class="resource-list-item">
+						<div>Memory:</div>
+						<div class="data">
+							{#if $data.resources.requests.memory}
+								{prettyBytes($data.resources.requests.memory, {
+									locale: 'en',
+									minimumFractionDigits: 2,
+									maximumFractionDigits: 2,
+									binary: true
+								})}
+							{:else}
+								Not set
+							{/if}
+						</div>
+					</div>
+				</li>
+			</ul>
+		</li>
+		<li>
+			Limits:
+			<ul>
+				<li>
+					<div class="resource-list-item">
+						<div>CPU:</div>
+						<div class="data">
+							{#if $data.resources.limits.cpu}{$data.resources.limits.cpu?.toFixed(2)} cores
+							{:else}
+								Not set
+							{/if}
+						</div>
+					</div>
+				</li>
+
+				<li>
+					<div class="resource-list-item">
+						<div>Memory:</div>
+						<div class="data">
+							{#if $data.resources.limits.memory}
+								{prettyBytes($data.resources.limits.memory, {
+									locale: 'en',
+									minimumFractionDigits: 2,
+									maximumFractionDigits: 2,
+									binary: true
+								})}
+							{:else}
+								Not set
+							{/if}
+						</div>
+					</div>
+				</li>
+			</ul>
+		</li>
+	</ul>
+</div>
+
 {#if $data.resources.scaling}
 	{@const scaling = $data.resources.scaling}
 	{#if scaling.minInstances !== scaling.maxInstances}
 		<div>
-			<strong>Scaling configuration:</strong>
+			<Heading level="4" size="small">Scaling configuration</Heading>
 			{scaling.minInstances} - {scaling.maxInstances} instances based on
 			{#if scaling.strategies && scaling.strategies.length > 0}
 				{#each scaling.strategies as strategy, i (strategy)}
@@ -115,3 +199,28 @@
 		{/each}
 	</List>
 {/if}
+
+<style>
+	ul {
+		list-style-type: none;
+		padding: 0;
+		margin: 0 0 0 1rem;
+	}
+
+	li ul {
+		margin-left: 1rem;
+	}
+
+	.resource-list {
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		gap: 1rem;
+	}
+	.resource-list-item {
+		display: grid;
+		grid-template-columns: 80px 100px;
+	}
+	.data {
+		text-align: right;
+	}
+</style>