Fix team vulnerability overview ordering

Replace with state instead of store
nais · Dec 17, 2024 · d954577 · d954577
1 parent a6078a9
commit d954577
Show file tree

Hide file tree

Showing 19 changed files with 68 additions and 59 deletions.
diff --git a/src/lib/amplitude.ts b/src/lib/amplitude.ts
@@ -1,7 +1,6 @@
 import { browser, dev } from '$app/environment';
-import { page } from '$app/stores';
+import { page } from '$app/state';
 import amplitude from 'amplitude-js';
-import { get } from 'svelte/store';
 
 const getApiKey = () => {
 	if (dev) {
@@ -18,7 +17,7 @@ export const logEvent = (event: Events, properties?: object) => {
 	if (!browser) return;
 
 	const eventDataDefault = {
-		routeID: get(page).route.id,
+		routeID: page.route.id,
 		domain: window.location.host,
 		service: 'nais-console'
 	};

diff --git a/src/lib/components/WorkloadsWithSBOM.svelte b/src/lib/components/WorkloadsWithSBOM.svelte
@@ -1,6 +1,13 @@
 <script lang="ts">
-	import { graphql, PendingValue, WorkloadOrderField } from '$houdini';
-	import { changeParams } from '$lib/utils/searchparams';
+	import { page } from '$app/state';
+	import {
+		graphql,
+		PendingValue,
+		WorkloadOrderField,
+		type OrderDirection$options,
+		type WorkloadOrderField$options
+	} from '$houdini';
+	import { changeParams } from '$lib/utils/searchparams.svelte';
 	import {
 		Button,
 		Skeleton,
@@ -18,35 +25,42 @@
 		ChevronRightIcon,
 		SandboxIcon
 	} from '@nais/ds-svelte-community/icons';
-	import { untrack } from 'svelte';
 	import type { WorkloadsWithSbomVariables } from './$houdini';
 	import Vulnerability from './Vulnerability.svelte';
 	import WorkloadLink from './WorkloadLink.svelte';
 
+	interface Props {
+		team: string;
+		environment: string;
+		[key: string]: unknown;
+	}
+
+	let { team, environment, ...rest }: Props = $props();
+
 	export const _WorkloadsWithSbomVariables: WorkloadsWithSbomVariables = () => {
-		return untrack(() => {
-			if (environment !== '') {
-				return {
-					team: team,
-					orderBy: {
-						field: tableSort.orderBy
-							? tableSort.orderBy
-							: WorkloadOrderField.VULNERABILITY_SEVERITY_CRITICAL,
-						direction: tableSort.direction ? tableSort.direction : 'DESC'
-					},
-					filter: { environments: [environment] }
-				};
-			}
+		const env = environment;
+		const field = tableSort.orderBy
+			? tableSort.orderBy
+			: WorkloadOrderField.VULNERABILITY_SEVERITY_CRITICAL;
+		const direction = tableSort.direction ? tableSort.direction : 'DESC';
+
+		if (env !== '') {
 			return {
 				team: team,
 				orderBy: {
-					field: tableSort.orderBy
-						? tableSort.orderBy
-						: WorkloadOrderField.VULNERABILITY_SEVERITY_CRITICAL,
-					direction: tableSort.direction ? tableSort.direction : 'DESC'
-				}
+					field,
+					direction
+				},
+				filter: { environments: [env] }
 			};
-		});
+		}
+		return {
+			team: team,
+			orderBy: {
+				field,
+				direction
+			}
+		};
 	};
 
 	const query = graphql(`
@@ -91,26 +105,25 @@
 		}
 	`);
 
-	interface Props {
-		team: string;
-		environment: string;
-		[key: string]: unknown;
-	}
-
-	let { team, environment, ...rest }: Props = $props();
-
 	let tableSort = $derived({
-		orderBy: $query.variables?.orderBy?.field,
-		direction: $query.variables?.orderBy?.direction
+		orderBy: page.url.searchParams.get('field') as WorkloadOrderField$options | null,
+		direction: page.url.searchParams.get('direction') as OrderDirection$options | null
 	});
 
 	const tableSortChange = (key: string) => {
 		if (key === tableSort.orderBy) {
 			const direction = tableSort.direction === 'ASC' ? 'DESC' : 'ASC';
 			tableSort.direction = direction;
 		} else {
-			tableSort.orderBy = WorkloadOrderField[key as keyof typeof WorkloadOrderField];
-			tableSort.direction = 'ASC';
+			tableSort.orderBy = WorkloadOrderField[key as WorkloadOrderField$options];
+			switch (tableSort.orderBy) {
+				case WorkloadOrderField.ENVIRONMENT:
+				case WorkloadOrderField.NAME:
+					tableSort.direction = 'ASC';
+					break;
+				default:
+					tableSort.direction = 'DESC';
+			}
 		}
 
 		changeParams({

diff --git a/src/lib/components/image/ImageVulnerabilities.svelte b/src/lib/components/image/ImageVulnerabilities.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { graphql, ImageVulnerabilityOrderField, PendingValue } from '$houdini';
-	import { changeParams } from '$lib/utils/searchparams';
+	import { changeParams } from '$lib/utils/searchparams.svelte';
 	import { severityToColor } from '$lib/utils/vulnerabilities';
 	import { Button, Skeleton, Table, Tbody, Td, Th, Thead, Tr } from '@nais/ds-svelte-community';
 	import {

diff --git a/src/lib/utils/searchparams.ts → src/lib/utils/searchparams.svelte.ts b/src/lib/utils/searchparams.ts → src/lib/utils/searchparams.svelte.ts
@@ -1,9 +1,8 @@
 import { goto } from '$app/navigation';
-import { page } from '$app/stores';
-import { get } from 'svelte/store';
+import { page } from '$app/state';
 
 export const changeParams = (params: Record<string, string>) => {
-	const query = new URLSearchParams(get(page).url.searchParams);
+	const query = new URLSearchParams(page.url.searchParams);
 	for (const [key, value] of Object.entries(params)) {
 		if (value === '') {
 			query.delete(key);

diff --git a/src/routes/team/[team]/(teamPages)/[env]/kafka/[kafka]/+page.svelte b/src/routes/team/[team]/(teamPages)/[env]/kafka/[kafka]/+page.svelte
@@ -5,7 +5,7 @@
 	import Kafka from '$lib/icons/Kafka.svelte';
 
 	import { KafkaTopicAclOrderField } from '$houdini';
-	import { changeParams } from '$lib/utils/searchparams';
+	import { changeParams } from '$lib/utils/searchparams.svelte';
 	import { Button, Table, Tbody, Td, Th, Thead, Tr } from '@nais/ds-svelte-community';
 	import {
 		ChevronLeftIcon,

diff --git a/src/routes/team/[team]/(teamPages)/[env]/opensearch/[opensearch]/+page.svelte b/src/routes/team/[team]/(teamPages)/[env]/opensearch/[opensearch]/+page.svelte
@@ -4,7 +4,7 @@
 	import GraphErrors from '$lib/GraphErrors.svelte';
 	import WorkloadLink from '$lib/components/WorkloadLink.svelte';
 	import Opensearch from '$lib/icons/Opensearch.svelte';
-	import { changeParams } from '$lib/utils/searchparams';
+	import { changeParams } from '$lib/utils/searchparams.svelte';
 	import { Button, Table, Tbody, Td, Th, Thead, Tr } from '@nais/ds-svelte-community';
 	import { ChevronLeftIcon, ChevronRightIcon } from '@nais/ds-svelte-community/icons';
 	import type { PageData } from './$houdini';

diff --git a/src/routes/team/[team]/(teamPages)/[env]/redis/[redis]/+page.svelte b/src/routes/team/[team]/(teamPages)/[env]/redis/[redis]/+page.svelte
@@ -4,7 +4,7 @@
 	import GraphErrors from '$lib/GraphErrors.svelte';
 	import WorkloadLink from '$lib/components/WorkloadLink.svelte';
 	import Redis from '$lib/icons/Redis.svelte';
-	import { changeParams } from '$lib/utils/searchparams';
+	import { changeParams } from '$lib/utils/searchparams.svelte';
 	import { Button, Table, Tbody, Td, Th, Thead, Tr } from '@nais/ds-svelte-community';
 	import { ChevronLeftIcon, ChevronRightIcon } from '@nais/ds-svelte-community/icons';
 	import type { PageData } from './$houdini';

diff --git a/src/routes/team/[team]/(teamPages)/applications/+page.svelte b/src/routes/team/[team]/(teamPages)/applications/+page.svelte
@@ -6,7 +6,7 @@
 	import StatusBadge from '$lib/components/StatusBadge.svelte';
 	import GraphErrors from '$lib/GraphErrors.svelte';
 	import Time from '$lib/Time.svelte';
-	import { changeParams } from '$lib/utils/searchparams';
+	import { changeParams } from '$lib/utils/searchparams.svelte';
 	import {
 		Button,
 		Skeleton,

diff --git a/src/routes/team/[team]/(teamPages)/bigquery/+page.svelte b/src/routes/team/[team]/(teamPages)/bigquery/+page.svelte
@@ -8,7 +8,7 @@
 	import GraphErrors from '$lib/GraphErrors.svelte';
 	import CostIcon from '$lib/icons/CostIcon.svelte';
 	import { resourceLink } from '$lib/utils/links';
-	import { changeParams } from '$lib/utils/searchparams';
+	import { changeParams } from '$lib/utils/searchparams.svelte';
 	import { Button, Skeleton, Table, Tbody, Td, Th, Thead, Tr } from '@nais/ds-svelte-community';
 	import { ChevronLeftIcon, ChevronRightIcon } from '@nais/ds-svelte-community/icons';
 	import type { PageData } from './$houdini';

diff --git a/src/routes/team/[team]/(teamPages)/buckets/+page.svelte b/src/routes/team/[team]/(teamPages)/buckets/+page.svelte
@@ -6,7 +6,7 @@
 	import WorkloadLink from '$lib/components/WorkloadLink.svelte';
 	import GraphErrors from '$lib/GraphErrors.svelte';
 	import CostIcon from '$lib/icons/CostIcon.svelte';
-	import { changeParams } from '$lib/utils/searchparams';
+	import { changeParams } from '$lib/utils/searchparams.svelte';
 	import { Button, Skeleton, Table, Tbody, Td, Th, Thead, Tr } from '@nais/ds-svelte-community';
 	import {
 		ChevronLeftIcon,

diff --git a/src/routes/team/[team]/(teamPages)/jobs/+page.svelte b/src/routes/team/[team]/(teamPages)/jobs/+page.svelte
@@ -5,7 +5,7 @@
 	import StatusBadge from '$lib/components/StatusBadge.svelte';
 	import GraphErrors from '$lib/GraphErrors.svelte';
 	import Time from '$lib/Time.svelte';
-	import { changeParams } from '$lib/utils/searchparams';
+	import { changeParams } from '$lib/utils/searchparams.svelte';
 	import {
 		Button,
 		Skeleton,

diff --git a/src/routes/team/[team]/(teamPages)/kafka/+page.svelte b/src/routes/team/[team]/(teamPages)/kafka/+page.svelte
@@ -3,7 +3,7 @@
 	import Card from '$lib/Card.svelte';
 
 	import GraphErrors from '$lib/GraphErrors.svelte';
-	import { changeParams } from '$lib/utils/searchparams';
+	import { changeParams } from '$lib/utils/searchparams.svelte';
 	import { Button, Skeleton, Table, Tbody, Td, Th, Thead, Tr } from '@nais/ds-svelte-community';
 	import { ChevronLeftIcon, ChevronRightIcon } from '@nais/ds-svelte-community/icons';
 	import type { PageData } from './$houdini';

diff --git a/src/routes/team/[team]/(teamPages)/members/+page.svelte b/src/routes/team/[team]/(teamPages)/members/+page.svelte
@@ -3,7 +3,7 @@
 	import Card from '$lib/Card.svelte';
 	import Confirm from '$lib/components/Confirm.svelte';
 	import GraphErrors from '$lib/GraphErrors.svelte';
-	import { changeParams } from '$lib/utils/searchparams';
+	import { changeParams } from '$lib/utils/searchparams.svelte';
 	import { Button, Heading, Table, Tbody, Td, Th, Thead, Tr } from '@nais/ds-svelte-community';
 	import {
 		ChevronLeftIcon,

diff --git a/src/routes/team/[team]/(teamPages)/opensearch/+page.svelte b/src/routes/team/[team]/(teamPages)/opensearch/+page.svelte
@@ -7,7 +7,7 @@
 	import GraphErrors from '$lib/GraphErrors.svelte';
 	import CostIcon from '$lib/icons/CostIcon.svelte';
 	import { resourceLink } from '$lib/utils/links';
-	import { changeParams } from '$lib/utils/searchparams';
+	import { changeParams } from '$lib/utils/searchparams.svelte';
 	import { Button, Skeleton, Table, Tbody, Td, Th, Thead, Tr } from '@nais/ds-svelte-community';
 	import { ChevronLeftIcon, ChevronRightIcon } from '@nais/ds-svelte-community/icons';
 	import type { PageData } from './$houdini';

diff --git a/src/routes/team/[team]/(teamPages)/postgres/+page.svelte b/src/routes/team/[team]/(teamPages)/postgres/+page.svelte
@@ -25,7 +25,7 @@
 	import SummaryCard from '$lib/components/SummaryCard.svelte';
 	import GraphErrors from '$lib/GraphErrors.svelte';
 	import CostIcon from '$lib/icons/CostIcon.svelte';
-	import { changeParams } from '$lib/utils/searchparams';
+	import { changeParams } from '$lib/utils/searchparams.svelte';
 	import prettyBytes from 'pretty-bytes';
 	import type { PageData } from './$houdini';
 

diff --git a/src/routes/team/[team]/(teamPages)/redis/+page.svelte b/src/routes/team/[team]/(teamPages)/redis/+page.svelte
@@ -7,7 +7,7 @@
 	import SummaryCard from '$lib/components/SummaryCard.svelte';
 	import WorkloadLink from '$lib/components/WorkloadLink.svelte';
 	import GraphErrors from '$lib/GraphErrors.svelte';
-	import { changeParams } from '$lib/utils/searchparams';
+	import { changeParams } from '$lib/utils/searchparams.svelte';
 	import { Button, Skeleton, Table, Tbody, Td, Th, Thead, Tr } from '@nais/ds-svelte-community';
 	import { ChevronLeftIcon, ChevronRightIcon } from '@nais/ds-svelte-community/icons';
 	import type { PageData } from './$houdini';

diff --git a/src/routes/team/[team]/(teamPages)/repositories/+page.svelte b/src/routes/team/[team]/(teamPages)/repositories/+page.svelte
@@ -2,7 +2,7 @@
 	import { page } from '$app/state';
 	import { graphql, PendingValue, RepositoryOrderField } from '$houdini';
 	import Card from '$lib/Card.svelte';
-	import { changeParams } from '$lib/utils/searchparams';
+	import { changeParams } from '$lib/utils/searchparams.svelte';
 	import {
 		Button,
 		Skeleton,

diff --git a/src/routes/team/[team]/(teamPages)/secrets/+page.svelte b/src/routes/team/[team]/(teamPages)/secrets/+page.svelte
@@ -4,7 +4,7 @@
 	import Card from '$lib/Card.svelte';
 	import GraphErrors from '$lib/GraphErrors.svelte';
 	import Time from '$lib/Time.svelte';
-	import { changeParams } from '$lib/utils/searchparams';
+	import { changeParams } from '$lib/utils/searchparams.svelte';
 	import {
 		Button,
 		Skeleton,

diff --git a/src/routes/team/[team]/(teamPages)/vulnerabilities/+page.svelte b/src/routes/team/[team]/(teamPages)/vulnerabilities/+page.svelte
@@ -10,7 +10,7 @@
 	import Vulnerability from '$lib/components/Vulnerability.svelte';
 	import WorkloadsWithSbom from '$lib/components/WorkloadsWithSBOM.svelte';
 	import GraphErrors from '$lib/GraphErrors.svelte';
-	import { changeParams } from '$lib/utils/searchparams';
+	import { changeParams } from '$lib/utils/searchparams.svelte';
 	import { Alert, HelpText, Select, Skeleton } from '@nais/ds-svelte-community';
 	import {
 		TrendDownIcon,
@@ -298,9 +298,7 @@
 					{/each}
 				</Select>
 			</div>
-			{#key selectedEnvironment}
-				<WorkloadsWithSbom team={teamSlug} environment={selectedEnvironment} />
-			{/key}
+			<WorkloadsWithSbom team={teamSlug} environment={selectedEnvironment} />
 		</Card>
 	</div>
 {/if}