feat: update headings to small size and add cost summary for BigQuery and bucket components

Author: rbjornstad

src/lib/components/AggregatedCostForApplications.svelte

@@ -43,7 +43,7 @@
 <GraphErrors errors={$costQuery.errors} />
 <div class="wrapper">
 	<div class="heading">
-		<Heading level="3">Applications cost</Heading>
+		<Heading level="3" size="small">Applications cost</Heading>
 
 		<HelpText title="Aggregated workloads cost"
 			>Aggregated cost for workloads. Current month is estimated.</HelpText

src/lib/components/AggregatedCostForJobs.svelte

@@ -40,7 +40,7 @@
 <GraphErrors errors={$costQuery.errors} />
 <div class="wrapper">
 	<div class="heading">
-		<Heading level="3">Jobs cost</Heading>
+		<Heading level="3" size="small">Jobs cost</Heading>
 
 		<HelpText title="Aggregated jobs cost"
 			>Aggregated cost for jobs. Current month is estimated.</HelpText

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

@@ -17,6 +17,9 @@ query BigQueryDataset($environment: String!, $team: Slug!, $name: String!) {
 				environment {
 					name
 				}
+				cost {
+					sum
+				}
 				workload {
 					name
 					__typename

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

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import GraphErrors from '$lib/GraphErrors.svelte';
 	import Time from '$lib/Time.svelte';
+	import { euroValueFormatter } from '$lib/chart/cost_transformer';
 	import IconLabel from '$lib/components/IconLabel.svelte';
 	import TooltipAlignHack from '$lib/components/TooltipAlignHack.svelte';
 	import WorkloadLink from '$lib/components/WorkloadLink.svelte';
@@ -99,7 +100,7 @@
 		</div>
 		<div class="sidebar">
 			<div>
-				<Heading level="3">Owner</Heading>
+				<Heading level="3" size="small">Owner</Heading>
 				{#if bq.workload}
 					<WorkloadLink workload={bq.workload} />
 				{:else}
@@ -109,6 +110,12 @@
 					</div>
 				{/if}
 			</div>
+			<div>
+				<Heading level="3" size="small">Cost last 30 days</Heading>
+				<BodyShort>
+					{bq.cost.sum ? euroValueFormatter(bq.cost.sum) : 'No cost data available'}
+				</BodyShort>
+			</div>
 		</div>
 	</div>
 {/if}

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

@@ -89,7 +89,7 @@
 		</div>
 		<div class="sidebar">
 			<div>
-				<Heading level="3">Owner</Heading>
+				<Heading level="3" size="small">Owner</Heading>
 				{#if bucket.workload}
 					<WorkloadLink workload={bucket.workload} />
 				{:else}