fix: update each block keys for improved rendering performance

nais · Feb 13, 2025 · 43d70e4 · 43d70e4
1 parent 7dce249
commit 43d70e4
Show file tree

Hide file tree

Showing 18 changed files with 80 additions and 92 deletions.
diff --git a/src/lib/components/NetworkPolicy.svelte b/src/lib/components/NetworkPolicy.svelte
@@ -78,7 +78,7 @@
 			<Heading level="3" size="small" spacing>Inbound</Heading>
 			{#if $data.networkPolicy.inbound.rules.length > 0}
 				<ul>
-					{#each $data.networkPolicy.inbound.rules as rule (rule.targetWorkloadName + rule.targetTeamSlug)}
+					{#each $data.networkPolicy.inbound.rules as rule (rule)}
 						<li>
 							{#if rule.targetWorkloadName == '*'}
 								Any app
@@ -126,7 +126,7 @@
 				{#if $data.networkPolicy.outbound.external.length > 0}
 					<Heading level="4" size="xsmall" spacing>External</Heading>
 					<ul>
-						{#each $data.networkPolicy.outbound.external.filter((e) => e.__typename === 'ExternalNetworkPolicyHost') as external (external.__typename + external.target + external.ports)}
+						{#each $data.networkPolicy.outbound.external.filter((e) => e.__typename === 'ExternalNetworkPolicyHost') as external (external)}
 							{#each external.ports as port (port)}
 								<li>
 									<IconWithText
@@ -146,7 +146,7 @@
 							{/each}
 						{/each}
 
-						{#each $data.networkPolicy.outbound.external.filter((e) => e.__typename === 'ExternalNetworkPolicyIpv4') as external (external.__typename + external.target + external.ports)}
+						{#each $data.networkPolicy.outbound.external.filter((e) => e.__typename === 'ExternalNetworkPolicyIpv4') as external (external)}
 							{#each external.ports as port (port)}
 								<li>
 									<IconWithText
@@ -164,7 +164,7 @@
 				{#if $data.networkPolicy.outbound.rules.length > 0}
 					<Heading level="4" size="xsmall" spacing>Workloads</Heading>
 					<ul>
-						{#each $data.networkPolicy.outbound.rules as rule (rule.targetWorkloadName + rule.targetTeamSlug)}
+						{#each $data.networkPolicy.outbound.rules as rule (rule)}
 							<li>
 								{#if rule.targetWorkloadName == '*'}
 									Any app

diff --git a/src/lib/components/Persistence.svelte b/src/lib/components/Persistence.svelte
@@ -156,7 +156,7 @@
 			{/each}
 		{/if}
 		{#if $data.kafkaTopicAcls.edges.length > 0}
-			{#each $data.kafkaTopicAcls.edges as acl (acl.node.topic.name + acl.node.workloadName + acl.node.access + acl.node.teamName + acl.node.topic.environment.name)}
+			{#each $data.kafkaTopicAcls.edges as acl (acl)}
 				{#if acl.node.teamName !== '*'}
 					<a
 						href={`/team/${acl.node.topic.team.slug}/${acl.node.topic.environment.name === 'prod-fss' ? 'prod-gcp' : acl.node.topic.environment.name === 'dev-fss' ? 'dev-gcp' : acl.node.topic.environment.name}/kafka/${acl.node.topic.name}`}
@@ -181,7 +181,7 @@
 
 					{#snippet description()}
 						{#if $data.openSearch?.access.edges}
-							{#each $data.openSearch?.access.edges as access (access.node.access + access.node.workload.id)}
+							{#each $data.openSearch?.access.edges as access (access)}
 								{#if access.node.workload.name == $data.name}
 									<Detail style="font-weight: normal; color: var(--a-text-subtle);"
 										>{access.node.access}</Detail

diff --git a/src/lib/components/SideMenu.svelte b/src/lib/components/SideMenu.svelte
@@ -45,7 +45,7 @@
 
 <div class="sidemenu">
 	<ul>
-		{#each nav as { items }, i (i)}
+		{#each nav as { items }, i (items)}
 			{#if i > 0}
 				<hr />
 			{/if}

diff --git a/src/lib/components/image/ImageVulnerabilities.svelte b/src/lib/components/image/ImageVulnerabilities.svelte
@@ -3,7 +3,7 @@
 	import Pagination from '$lib/Pagination.svelte';
 	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 { Button, Table, Tbody, Td, Th, Thead, Tr } from '@nais/ds-svelte-community';
 	import { CheckmarkIcon } from '@nais/ds-svelte-community/icons';
 	import { untrack } from 'svelte';
 	import type { ImageVulnerabilitiesVariables } from './$houdini';
@@ -43,13 +43,13 @@
 			$workload: String!
 			$orderBy: ImageVulnerabilityOrder
 		) @load {
-			team(slug: $team) @loading {
-				environment(name: $environment) @loading {
-					workload(name: $workload) @loading {
+			team(slug: $team) {
+				environment(name: $environment) {
+					workload(name: $workload) {
 						__typename
-						image @loading {
-							vulnerabilities(first: 10, orderBy: $orderBy) @paginate(mode: SinglePage) @loading {
-								pageInfo @loading {
+						image {
+							vulnerabilities(first: 10, orderBy: $orderBy) @paginate(mode: SinglePage) {
+								pageInfo {
 									hasNextPage
 									hasPreviousPage
 									pageStart
@@ -58,7 +58,7 @@
 									startCursor
 									totalCount
 								}
-								nodes @loading(count: 10) {
+								nodes {
 									id
 									description
 									identifier
@@ -80,7 +80,7 @@
 									}
 								}
 							}
-							workloadReferences @loading {
+							workloadReferences {
 								nodes {
 									workload {
 										id
@@ -176,59 +176,49 @@
 	<Tbody>
 		{#if $vulnerabilities.data}
 			{@const vulnz = $vulnerabilities.data.team.environment.workload.image.vulnerabilities.nodes}
-			{#each vulnz as v (v.description)}
-				{#if v !== PendingValue}
-					<Tr>
-						<Td>
-							{#if authorized}
-								<Button
-									variant="tertiary"
-									size="xsmall"
-									onclick={() => {
-										findingToSuppress = v;
-										suppressOpen = true;
-									}}
-								>
-									<code>{v.identifier}</code>
-								</Button>
-							{:else}
-								<code>{v.identifier}</code>
-							{/if}
-						</Td>
-						<Td><code>{v.package}</code></Td>
-						<Td
-							><code style="color: {severityToColor(v.severity.toLocaleLowerCase())}"
-								>{v.severity}</code
-							></Td
-						>
-						<Td style="text-align: center">
-							{#if v.analysisTrail.suppressed}
-								<CheckmarkIcon width={'18px'} height={'18px'} />
-							{/if}
-						</Td>
-						<Td>
+			{#each vulnz as v (v)}
+				<Tr>
+					<Td>
+						{#if authorized}
 							<Button
-								variant="tertiary-neutral"
-								size="small"
-								disabled={v.analysisTrail?.state ? false : true}
+								variant="tertiary"
+								size="xsmall"
 								onclick={() => {
-									analysisTrail = v;
-									analysisOpen = true;
+									findingToSuppress = v;
+									suppressOpen = true;
 								}}
 							>
-								<code>{v.analysisTrail?.state ? v.analysisTrail?.state : 'N/A'} </code>
+								<code>{v.identifier}</code>
 							</Button>
-						</Td>
-					</Tr>
-				{:else}
-					<Tr>
-						<Td><Skeleton height="32px" variant="rectangle" /></Td>
-						<Td><Skeleton variant="text" /></Td>
-						<Td><Skeleton variant="text" /></Td>
-						<Td><Skeleton variant="text" /></Td>
-						<Td><Skeleton variant="rectangle" /></Td>
-					</Tr>
-				{/if}
+						{:else}
+							<code>{v.identifier}</code>
+						{/if}
+					</Td>
+					<Td><code>{v.package}</code></Td>
+					<Td
+						><code style="color: {severityToColor(v.severity.toLocaleLowerCase())}"
+							>{v.severity}</code
+						></Td
+					>
+					<Td style="text-align: center">
+						{#if v.analysisTrail.suppressed}
+							<CheckmarkIcon width={'18px'} height={'18px'} />
+						{/if}
+					</Td>
+					<Td>
+						<Button
+							variant="tertiary-neutral"
+							size="small"
+							disabled={v.analysisTrail?.state ? false : true}
+							onclick={() => {
+								analysisTrail = v;
+								analysisOpen = true;
+							}}
+						>
+							<code>{v.analysisTrail?.state ? v.analysisTrail?.state : 'N/A'} </code>
+						</Button>
+					</Td>
+				</Tr>
 			{:else}
 				<Tr>
 					<Td colspan={999}>No vulnerabilities</Td>
@@ -238,17 +228,15 @@
 	</Tbody>
 </Table>
 {#if image}
-	{#if image.vulnerabilities.pageInfo !== PendingValue}
-		<Pagination
-			page={image.vulnerabilities.pageInfo}
-			loaders={{
-				loadPreviousPage: async () => await vulnerabilities.loadPreviousPage(),
-				loadNextPage: async () => await vulnerabilities.loadNextPage()
-			}}
-		/>
-	{/if}
+	<Pagination
+		page={image.vulnerabilities.pageInfo}
+		loaders={{
+			loadPreviousPage: async () => await vulnerabilities.loadPreviousPage(),
+			loadNextPage: async () => await vulnerabilities.loadNextPage()
+		}}
+	/>
 
-	{#if findingToSuppress && authorized !== PendingValue && authorized && image.workloadReferences && image.workloadReferences !== PendingValue}
+	{#if findingToSuppress && authorized !== PendingValue && authorized && image.workloadReferences}
 		{#key findingToSuppress.id}
 			<SuppressFinding
 				bind:open={suppressOpen}
@@ -262,7 +250,7 @@
 		{/key}
 	{/if}
 
-	{#if analysisTrail && authorized !== PendingValue && authorized && image.workloadReferences && image.workloadReferences !== PendingValue}
+	{#if analysisTrail && authorized !== PendingValue && authorized && image.workloadReferences}
 		<TrailFinding
 			bind:open={analysisOpen}
 			finding={analysisTrail}

diff --git a/src/lib/components/image/SuppressFinding.svelte b/src/lib/components/image/SuppressFinding.svelte
@@ -240,7 +240,7 @@
 			audit log. Suppression will be in effect for all workloads using this image.
 		</p>
 		<Select size="small" label="Analysis" bind:value={selectedReason}>
-			{#each SUPPRESS_OPTIONS as option (option.value)}
+			{#each SUPPRESS_OPTIONS as option (option)}
 				{#if option.value === finding.state}
 					<option value={option.value}>{option.text} </option>
 				{:else}

diff --git a/src/lib/components/image/TrailFinding.svelte b/src/lib/components/image/TrailFinding.svelte
@@ -99,7 +99,7 @@
 				</Thead>
 				<Tbody>
 					{#if finding.analysisTrail.comments.nodes}
-						{#each finding.analysisTrail.comments.nodes as node (node.timestamp + node.onBehalfOf + node.state + node.suppressed + node.comment)}
+						{#each finding.analysisTrail.comments.nodes as node (node)}
 							{#if node}
 								<Tr>
 									<Td>{node.onBehalfOf}</Td>

diff --git a/src/lib/feedback/Feedback.svelte b/src/lib/feedback/Feedback.svelte
@@ -86,7 +86,7 @@
 		</p>
 		<div class="wrapper">
 			<Select size="small" label="Type" bind:value={type}>
-				{#each FEEDBACK_TYPE as option (option.value)}
+				{#each FEEDBACK_TYPE as option (option)}
 					<option value={option.value}>{option.text}</option>
 				{/each}
 			</Select>

diff --git a/src/routes/team/[team]/(teamPages)/[env]/bigquery/[bigquery]/+page.svelte b/src/routes/team/[team]/(teamPages)/[env]/bigquery/[bigquery]/+page.svelte
@@ -106,7 +106,7 @@
 						</Tr>
 					</Thead>
 					<Tbody>
-						{#each bq.access.edges as edge (edge.node.email + edge.node.role)}
+						{#each bq.access.edges as edge (edge)}
 							<Tr>
 								<Td>{edge.node.role}</Td>
 								<Td

diff --git a/src/routes/team/[team]/(teamPages)/[env]/bucket/[bucket]/+page.svelte b/src/routes/team/[team]/(teamPages)/[env]/bucket/[bucket]/+page.svelte
@@ -81,7 +81,7 @@
 			<Card columns={12}>
 				<h3>Errors</h3>
 				<div>
-					{#each bucket.status.errors as error (error.message + error.details)}
+					{#each bucket.status.errors as error (error)}
 						<details>
 							<summary>{error.message}</summary>
 							<p>{error.details}</p>

diff --git a/src/routes/team/[team]/(teamPages)/[env]/kafka/[kafka]/+page.svelte b/src/routes/team/[team]/(teamPages)/[env]/kafka/[kafka]/+page.svelte
@@ -71,7 +71,7 @@
 					</Tr>
 				</Thead>
 				<Tbody>
-					{#each topic.acl.nodes as a (a.access + a.teamName + a.workloadName)}
+					{#each topic.acl.nodes as a (a)}
 						<Tr>
 							<Td>
 								{#if a.teamName === '*'}

diff --git a/src/routes/team/[team]/(teamPages)/[env]/opensearch/[opensearch]/+page.svelte b/src/routes/team/[team]/(teamPages)/[env]/opensearch/[opensearch]/+page.svelte
@@ -81,7 +81,7 @@
 						</Tr>
 					</Thead>
 					<Tbody>
-						{#each instance.access.edges as edge (edge.node.access + edge.node.workload.id)}
+						{#each instance.access.edges as edge (edge)}
 							{@const access = edge.node}
 							<Tr>
 								<Td>

diff --git a/src/routes/team/[team]/(teamPages)/[env]/postgres/[postgres]/+page.svelte b/src/routes/team/[team]/(teamPages)/[env]/postgres/[postgres]/+page.svelte
@@ -421,7 +421,7 @@
 						</Tr>
 					</Thead>
 					<Tbody>
-						{#each instance.users.edges as edge (edge.node.name + edge.node.authentication)}
+						{#each instance.users.edges as edge (edge)}
 							<Tr>
 								<Td>{edge.node.name}</Td>
 								<Td>{edge.node.authentication}</Td>

diff --git a/src/routes/team/[team]/(teamPages)/[env]/redis/[redis]/+page.svelte b/src/routes/team/[team]/(teamPages)/[env]/redis/[redis]/+page.svelte
@@ -81,7 +81,7 @@
 					</Tr>
 				</Thead>
 				<Tbody>
-					{#each instance.access.edges as edge (edge.node.access + edge.node.workload.id)}
+					{#each instance.access.edges as edge (edge)}
 						{@const access = edge.node}
 						<Tr>
 							<Td>

diff --git a/src/routes/team/[team]/(teamPages)/[env]/valkey/[valkey]/+page.svelte b/src/routes/team/[team]/(teamPages)/[env]/valkey/[valkey]/+page.svelte
@@ -81,7 +81,7 @@
 					</Tr>
 				</Thead>
 				<Tbody>
-					{#each instance.access.edges as edge (edge.node.access + edge.node.workload.id)}
+					{#each instance.access.edges as edge (edge)}
 						{@const access = edge.node}
 						<Tr>
 							<Td>

diff --git a/src/routes/team/[team]/(teamPages)/activity-log/+page.svelte b/src/routes/team/[team]/(teamPages)/activity-log/+page.svelte
@@ -172,7 +172,7 @@
 									{:else if edge.node.__typename === 'TeamEnvironmentUpdatedActivityLogEntry'}
 										{edge.node.message}
 										{#if edge.node.teamEnvironmentUpdated.updatedFields.length > 0}
-											{#each edge.node.teamEnvironmentUpdated.updatedFields as field (field.field + field.oldValue + field.newValue)}
+											{#each edge.node.teamEnvironmentUpdated.updatedFields as field (field)}
 												{field.field}. Changed from {field.oldValue} to {field.newValue}.
 											{/each}
 										{/if}
@@ -199,7 +199,7 @@
 									{:else if edge.node.__typename === 'TeamUpdatedActivityLogEntry'}
 										{edge.node.message}
 										{#if edge.node.teamUpdated?.updatedFields.length}
-											{#each edge.node.teamUpdated?.updatedFields as field (field.field + field.oldValue + field.newValue)}
+											{#each edge.node.teamUpdated?.updatedFields as field (field)}
 												{field.field}. Changed from {field.oldValue} to {field.newValue}.
 											{/each}
 										{/if}

diff --git a/src/routes/team/[team]/(teamPages)/vulnerabilities/+page.svelte b/src/routes/team/[team]/(teamPages)/vulnerabilities/+page.svelte
@@ -71,7 +71,7 @@
 									<summary style="font-size: 1rem; var(--color-text-secondary);"
 										>Show details</summary
 									>
-									{#each team?.vulnerabilitySummary.status.filter((status) => status.state !== TeamVulnerabilityState.OK) as status (status.state + status.title)}
+									{#each team?.vulnerabilitySummary.status.filter((status) => status.state !== TeamVulnerabilityState.OK) as status (status)}
 										<div class="wrapper">
 											<Alert variant="error">
 												<h4>{status.title}</h4>

diff --git a/src/routes/team/[team]/[env]/app/[app]/Ingresses.svelte b/src/routes/team/[team]/[env]/app/[app]/Ingresses.svelte
@@ -64,7 +64,7 @@
 	<Heading level="2" size="medium" spacing>Ingresses</Heading>
 
 	<div class="content">
-		{#each externalIngresses($data.ingresses) as ingress (ingress.url + ingress.type)}
+		{#each externalIngresses($data.ingresses) as ingress (ingress)}
 			<Tooltip content="External ingress"
 				><a href={ingress.url}
 					><IconWithText icon={GlobeIcon} size="medium">
@@ -76,7 +76,7 @@
 			>
 		{/each}
 
-		{#each internalIngresses($data.ingresses) as ingress (ingress.url + ingress.type)}
+		{#each internalIngresses($data.ingresses) as ingress (ingress)}
 			<Tooltip content="Internal ingress"
 				><a href={ingress.url}
 					><IconWithText icon={HouseIcon} size="medium">
@@ -88,7 +88,7 @@
 			</Tooltip>
 		{/each}
 
-		{#each authenticatedIngresses($data.ingresses) as ingress (ingress.url + ingress.type)}
+		{#each authenticatedIngresses($data.ingresses) as ingress (ingress)}
 			<Tooltip content="Authenticated ingress">
 				<a href={ingress.url}
 					><IconWithText icon={PadlockLockedIcon} size="medium">

diff --git a/src/routes/team/[team]/[env]/app/[app]/Utilization.svelte b/src/routes/team/[team]/[env]/app/[app]/Utilization.svelte
@@ -98,7 +98,7 @@
 					<div>
 						{scaling.minInstances} - {scaling.maxInstances} instances based on
 						{#if scaling.strategies && scaling.strategies.length > 0}
-							{#each scaling.strategies as strategy, i (strategy.__typename + i)}
+							{#each scaling.strategies as strategy, i (strategy)}
 								{#if i > 0}
 									<br />and{/if}
 								<b>{renameStrategy(strategy.__typename)}</b>