feat: add log destinations for applications and jobs with Grafana links

Author: rbjornstad

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

@@ -17,13 +17,7 @@
 			graphql(`
 				fragment AppStatus on Application {
 					name
-					logDestinations {
-						id
-						__typename
-						... on LogDestinationLoki {
-							grafanaURL
-						}
-					}
+
 					team {
 						slug
 					}
@@ -61,13 +55,7 @@
 				/> Application status unknown.
 			{/if}
 		</BodyShort>
-		{#if $data.logDestinations}
-			{#each $data.logDestinations as logDestination (logDestination.id)}
-				{#if logDestination.__typename === 'LogDestinationLoki'}
-					<Link href={logDestination.grafanaURL}>View logs in Grafana</Link>
-				{/if}
-			{/each}
-		{/if}
+
 		{#if nErrors > 0}
 			<Link href="/team/{$data.team.slug}/{$data.environment.name}/app/{$data.name}/status">
 				View {nErrors} issue{nErrors > 1 ? 's' : ''}

src/routes/team/[team]/[env]/app/[app]/logs/+page.gql

@@ -10,6 +10,13 @@ query Instances($app: String!, $team: Slug!, $env: String!) {
 						name
 					}
 				}
+				logDestinations {
+					id
+					__typename
+					... on LogDestinationLoki {
+						grafanaURL
+					}
+				}
 			}
 		}
 	}

src/routes/team/[team]/[env]/app/[app]/logs/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import LogViewer from '$lib/LogViewer.svelte';
 	import { Button, Chips, Fieldset, ToggleChip } from '@nais/ds-svelte-community';
+	import { ExternalLinkIcon } from '@nais/ds-svelte-community/icons';
 	import { SvelteSet } from 'svelte/reactivity';
 	import type { PageData } from './$houdini';
 
@@ -43,8 +44,12 @@
 	}
 </script>
 
+<!--
+{
+-->
 {#if $Instances.data}
 	{@const instances = $Instances.data.team.environment.application.instances.nodes}
+
 	<div class="topbar">
 		<div class="instances">
 			{#if $Instances.data}
@@ -120,6 +125,16 @@
 			{/each}
 		</Chips>
 	</div>
+	<div>
+		{#if $Instances.data.team.environment.application.logDestinations}
+			{#each $Instances.data.team.environment.application.logDestinations as logDestination (logDestination.id)}
+				{#if logDestination.__typename === 'LogDestinationLoki'}
+					<a href={logDestination.grafanaURL}>View logs in Grafana <ExternalLinkIcon /></a>
+				{/if}
+			{/each}
+		{/if}
+	</div>
+
 	<LogViewer
 		{app}
 		{env}
@@ -159,7 +174,7 @@
 		display: flex;
 		flex-direction: row;
 		gap: 0.5rem;
-		padding-top: 0.8rem;
+		padding: var(--a-spacing-3) 0;
 	}
 
 	.instance-button {

src/routes/team/[team]/[env]/job/[job]/Status.svelte

@@ -3,7 +3,7 @@
 	import ErrorIcon from '$lib/icons/ErrorIcon.svelte';
 	import SuccessIcon from '$lib/icons/SuccessIcon.svelte';
 	import WarningIcon from '$lib/icons/WarningIcon.svelte';
-	import { Detail, Heading, Link } from '@nais/ds-svelte-community';
+	import { Detail, Heading } from '@nais/ds-svelte-community';
 	import { QuestionmarkDiamondFillIcon } from '@nais/ds-svelte-community/icons';
 
 	interface Props {
@@ -22,13 +22,7 @@
 					environment {
 						name
 					}
-					logDestinations {
-						id
-						__typename
-						... on LogDestinationLoki {
-							grafanaURL
-						}
-					}
+
 					name
 					status {
 						state
@@ -62,13 +56,7 @@
 				Job status unknown.
 			{/if}
 		</div>
-		{#if $data.logDestinations}
-			{#each $data.logDestinations as logDestination (logDestination.id)}
-				{#if logDestination.__typename === 'LogDestinationLoki'}
-					<Link href={logDestination.grafanaURL}>View logs in Grafana</Link>
-				{/if}
-			{/each}
-		{/if}
+
 		{#if nErrors > 0}
 			<div style="margin-top: var(--a-spacing-2)">
 				<a href="/team/{$data.team.slug}/{$data.environment.name}/job/{$data.name}/status">

src/routes/team/[team]/[env]/job/[job]/logs/+page.gql

@@ -5,6 +5,13 @@ query RunsWithPodNames($job: String!, $team: Slug!, $env: String!) {
 			name
 			job(name: $job) {
 				name
+				logDestinations {
+					id
+					__typename
+					... on LogDestinationLoki {
+						grafanaURL
+					}
+				}
 				runs {
 					nodes {
 						id

src/routes/team/[team]/[env]/job/[job]/logs/+page.svelte

@@ -7,6 +7,7 @@
 		ToggleGroup,
 		ToggleGroupItem
 	} from '@nais/ds-svelte-community';
+	import { ExternalLinkIcon } from '@nais/ds-svelte-community/icons';
 	import { SvelteSet } from 'svelte/reactivity';
 	import type { PageData } from './$houdini';
 
@@ -97,15 +98,27 @@
 	{#if fetching}
 		<div style:font-size="12px" style:text-align="right" style:width="100%">Streaming logs...</div>
 	{/if}
-	<Chips size="small">
-		{#each viewOptions as option (option)}
-			<ToggleChip
-				value={option}
-				selected={selectedViewOptions.has(option)}
-				onclick={() => toggleSelectedViewOptions(option)}
-			/>
-		{/each}
-	</Chips>
+	<div class="chips">
+		Columns:
+		<Chips size="small">
+			{#each viewOptions as option (option)}
+				<ToggleChip
+					value={option}
+					selected={selectedViewOptions.has(option)}
+					onclick={() => toggleSelectedViewOptions(option)}
+				/>
+			{/each}
+		</Chips>
+	</div>
+	<div>
+		{#if $RunsWithPodNames.data?.team.environment.job.logDestinations}
+			{#each $RunsWithPodNames.data?.team.environment.job.logDestinations as logDestination (logDestination.id)}
+				{#if logDestination.__typename === 'LogDestinationLoki'}
+					<a href={logDestination.grafanaURL}>View logs in Grafana <ExternalLinkIcon /></a>
+				{/if}
+			{/each}
+		{/if}
+	</div>
 	<LogViewer
 		job={result.team.environment.job.name}
 		env={result.team.environment.name}
@@ -136,4 +149,10 @@
 		align-items: center;
 		gap: 0.5rem;
 	}
+	.chips {
+		display: flex;
+		flex-direction: row;
+		gap: 0.5rem;
+		padding: var(--a-spacing-3) 0;
+	}
 </style>