feat: add CDNBucket component and integrate it into PersistencePage with conditional rendering

Author: rbjornstad

src/lib/components/persistence/CDNBucket.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Heading } from '@nais/ds-svelte-community';
+
+	interface Props {
+		cdnBucket: string;
+	}
+
+	let { cdnBucket }: Props = $props();
+</script>
+
+<div>
+	<Heading size="small" level="3">Team CDN Bucket</Heading>
+
+	<a href="https://console.cloud.google.com/storage/browser/{cdnBucket}">
+		{cdnBucket}
+	</a>
+</div>

src/lib/components/persistence/PersistenceCost.svelte

@@ -27,15 +27,12 @@
 			height: '230px',
 			width: '300px',
 			tooltip: {
-				// axisPointer: {
-				// 	type: 'shadow'
-				// },
 				trigger: 'axis',
 				formatter: (params: CallbackDataParams[]) =>
 					`${params[0].name}: <b>${euroValueFormatter(params[0].value as number)}</b>`
 			},
 			grid: {
-				top: '50',
+				top: '20',
 				left: '0',
 				containLabel: true
 			},
@@ -170,8 +167,9 @@
 			</Detail>
 		</div>
 	</div>
-
-	<EChart options={costTransform(costData.daily.series)} />
+	<div style="height: 270px;">
+		<EChart options={costTransform(costData.daily.series)} />
+	</div>
 
 	<a href="/team/{teamSlug}/cost">See cost details</a>
 </div>

src/lib/components/persistence/PersistencePage.svelte

@@ -13,10 +13,12 @@
 	import { Tag } from '@nais/ds-svelte-community';
 	import { endOfYesterday, startOfMonth, subMonths } from 'date-fns';
 	import type { Snippet } from 'svelte';
+	import CdnBucket from './CDNBucket.svelte';
 
 	let {
 		description,
 		notFound,
+		cdnBucket,
 		cost,
 		list,
 		pageInfo,
@@ -25,6 +27,7 @@
 	}: {
 		description: Snippet;
 		notFound: Snippet;
+		cdnBucket?: string;
 		cost?: {
 			costData: CostData;
 			teamSlug: string;
@@ -101,16 +104,34 @@
 				}}
 			/>
 		</div>
-		{#if cost}
-			<PersistenceCost
-				{...cost}
-				from={startOfMonth(subMonths(new Date(), 1))}
-				to={endOfYesterday()}
-			/>
-		{/if}
+		<div class="right-column">
+			{#if cost}
+				<div>
+					<PersistenceCost
+						{...cost}
+						from={startOfMonth(subMonths(new Date(), 1))}
+						to={endOfYesterday()}
+					/>
+				</div>
+			{/if}
+			{#if cdnBucket}
+				<div>
+					<CdnBucket {cdnBucket} />
+				</div>
+			{/if}
+		</div>
 	</div>
 {:else}
-	{@render notFound()}
+	<div class="content-wrapper">
+		{@render notFound()}
+		<div class="right-column">
+			{#if cdnBucket}
+				<div>
+					<CdnBucket {cdnBucket} />
+				</div>
+			{/if}
+		</div>
+	</div>
 {/if}
 
 <style>
@@ -124,4 +145,9 @@
 		gap: var(--a-spacing-1-alt);
 		align-items: center;
 	}
+
+	.right-column {
+		display: grid;
+		gap: var(--a-spacing-6);
+	}
 </style>

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

@@ -56,5 +56,11 @@ query Buckets(
 				}
 			}
 		}
+
+		externalResources {
+			cdn {
+				bucket
+			}
+		}
 	}
 }

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

@@ -13,6 +13,7 @@
 
 {#if $Buckets.data}
 	<PersistencePage
+		cdnBucket={$Buckets.data.team.externalResources.cdn?.bucket}
 		cost={{
 			costData: $Buckets.data.team.cost,
 			teamSlug: $Buckets.data.team.slug,
@@ -32,13 +33,15 @@
 			</BodyLong>
 		{/snippet}
 		{#snippet notFound()}
-			<BodyLong>
-				<strong>No Buckets found.</strong> Storage buckets are containers for storing and managing
-				data in the cloud.
-				<a href="https://docs.nais.io/persistence/buckets">
-					Learn more about Buckets and how to get started.
-				</a>
-			</BodyLong>
+			<div>
+				<BodyLong>
+					<strong>No Buckets found.</strong> Storage buckets are containers for storing and managing
+					data in the cloud.
+					<a href="https://docs.nais.io/persistence/buckets">
+						Learn more about Buckets and how to get started.
+					</a>
+				</BodyLong>
+			</div>
 		{/snippet}
 	</PersistencePage>
 {/if}