feat(frontend): out-of-sync support for UFOs (#2778)

* feat(frontend): sync ufos with mission control

* chore: lint

Author: peterpeterparker

src/frontend/src/lib/components/app/notifications/Notifications.svelte

@@ -34,6 +34,9 @@
 	let satelliteCanisterData = $state<CanisterData | undefined>(undefined);
 	let satelliteWarnings = $state<CanisterWarning | undefined>(undefined);
 
+	let ufoCanisterData = $state<CanisterData | undefined>(undefined);
+	let ufoWarnings = $state<CanisterWarning | undefined>(undefined);
+
 	let upgradeWarning = $state(false);
 	let canisterWarnings = $state(false);
 	let canisterNotifications = $state(false);
@@ -98,6 +101,8 @@
 	{orbiterWarnings}
 	{satelliteCanisterData}
 	{satelliteWarnings}
+	{ufoCanisterData}
+	{ufoWarnings}
 	bind:alerts={hasAlerts}
 	bind:upgradeWarning
 	bind:canisterWarnings
@@ -121,6 +126,8 @@
 					{outOfSyncWarnings}
 					{satelliteCanisterData}
 					{satelliteWarnings}
+					{ufoCanisterData}
+					{ufoWarnings}
 					{upgradeWarning}
 				/>
 			{:else if $store.tabId === $store.tabs[1].id}

src/frontend/src/lib/components/app/notifications/NotificationsAlerts.svelte

@@ -5,10 +5,12 @@
 	import IconAnalytics from '$lib/components/icons/IconAnalytics.svelte';
 	import IconMissionControl from '$lib/components/icons/IconMissionControl.svelte';
 	import IconSatellite from '$lib/components/icons/IconSatellite.svelte';
+	import IconUfo from '$lib/components/icons/IconUfo.svelte';
 	import { satellite } from '$lib/derived/satellite.derived';
+	import { ufo } from '$lib/derived/ufo.derived';
 	import { i18n } from '$lib/stores/app/i18n.store';
 	import type { CanisterData, CanisterWarning } from '$lib/types/canister';
-	import { overviewLink } from '$lib/utils/nav.utils';
+	import { overviewLink, ufoLink } from '$lib/utils/nav.utils';
 
 	interface Props {
 		missionControlCanisterData: CanisterData | undefined;
@@ -17,6 +19,8 @@
 		orbiterWarnings: CanisterWarning | undefined;
 		satelliteCanisterData: CanisterData | undefined;
 		satelliteWarnings: CanisterWarning | undefined;
+		ufoCanisterData: CanisterData | undefined;
+		ufoWarnings: CanisterWarning | undefined;
 		close: () => void;
 		alerts: boolean;
 		upgradeWarning: boolean;
@@ -31,6 +35,8 @@
 		orbiterWarnings,
 		satelliteCanisterData,
 		satelliteWarnings,
+		ufoCanisterData,
+		ufoWarnings,
 		close,
 		alerts,
 		upgradeWarning,
@@ -69,6 +75,15 @@
 			segment="satellite"
 			warnings={satelliteWarnings}
 		/>
+
+		<NotificationsCanisterAlert
+			{close}
+			cyclesIcon={IconUfo}
+			data={ufoCanisterData}
+			href={ufoLink($ufo?.ufo_id)}
+			segment="ufo"
+			warnings={ufoWarnings}
+		/>
 	{/if}
 
 	{#if outOfSyncWarnings}

src/frontend/src/lib/components/app/notifications/NotificationsAlertsLoader.svelte

@@ -2,8 +2,13 @@
 	import NotificationsCanisterLoader from '$lib/components/app/notifications/NotificationsCanisterLoader.svelte';
 	import { missionControlId } from '$lib/derived/console/account.mission-control.derived';
 	import { orbiter } from '$lib/derived/orbiter.derived';
-	import { outOfSyncOrbiters, outOfSyncSatellites } from '$lib/derived/out-of-sync.derived';
+	import {
+		outOfSyncOrbiters,
+		outOfSyncUfos,
+		outOfSyncSatellites
+	} from '$lib/derived/out-of-sync.derived';
 	import { satellite } from '$lib/derived/satellite.derived';
+	import { ufo } from '$lib/derived/ufo.derived';
 	import { versionsLoaded, versionsUpgradeWarning } from '$lib/derived/version.derived';
 	import type { CanisterData, CanisterWarning } from '$lib/types/canister';
 
@@ -14,6 +19,8 @@
 		orbiterWarnings: CanisterWarning | undefined;
 		satelliteCanisterData: CanisterData | undefined;
 		satelliteWarnings: CanisterWarning | undefined;
+		ufoCanisterData: CanisterData | undefined;
+		ufoWarnings: CanisterWarning | undefined;
 		alerts: boolean;
 		upgradeWarning: boolean;
 		canisterWarnings: boolean;
@@ -27,6 +34,8 @@
 		orbiterWarnings = $bindable(undefined),
 		satelliteCanisterData = $bindable(undefined),
 		satelliteWarnings = $bindable(undefined),
+		ufoCanisterData = $bindable(undefined),
+		ufoWarnings = $bindable(undefined),
 		alerts = $bindable(false),
 		upgradeWarning = $bindable(false),
 		canisterWarnings = $bindable(false),
@@ -39,12 +48,15 @@
 	let hasCanisterWarnings = $derived(
 		hasWarnings(missionControlWarnings) ||
 			hasWarnings(orbiterWarnings) ||
-			hasWarnings(satelliteWarnings)
+			hasWarnings(satelliteWarnings) ||
+			hasWarnings(ufoWarnings)
 	);
 
 	let hasUpgradeWarning = $derived($versionsLoaded && $versionsUpgradeWarning);
 
-	let hasOutOfSyncWarning = $derived($outOfSyncSatellites === true || $outOfSyncOrbiters === true);
+	let hasOutOfSyncWarning = $derived(
+		$outOfSyncSatellites === true || $outOfSyncOrbiters === true || $outOfSyncUfos === true
+	);
 
 	let hasNotifications = $derived(hasCanisterWarnings || hasUpgradeWarning || hasOutOfSyncWarning);
 
@@ -73,3 +85,9 @@
 	bind:warnings={satelliteWarnings}
 	bind:data={satelliteCanisterData}
 />
+
+<NotificationsCanisterLoader
+	canisterId={$ufo?.ufo_id}
+	bind:warnings={ufoWarnings}
+	bind:data={ufoCanisterData}
+/>

src/frontend/src/lib/components/app/notifications/NotificationsCanisterAlert.svelte

@@ -13,7 +13,7 @@
 		data: CanisterData | undefined;
 		close: () => void;
 		href: string;
-		segment: 'satellite' | 'mission_control' | 'orbiter';
+		segment: 'satellite' | 'mission_control' | 'orbiter' | 'ufo';
 	}
 
 	let { warnings, close, data, href, cyclesIcon, segment }: Props = $props();

src/frontend/src/lib/components/modals/out-of-sync/OutOfSyncSegmentsModal.svelte

@@ -28,8 +28,6 @@
 	const onsubmit = async ($event: SubmitEvent) => {
 		$event.preventDefault();
 
-		$event.preventDefault();
-
 		onProgress(undefined);
 
 		wizardBusy.start();

src/frontend/src/lib/components/modules/out-of-sync/OutOfSyncForm.svelte

@@ -1,9 +1,14 @@
 <script lang="ts">
 	import OutOfSyncSegments from '$lib/components/modules/out-of-sync/OutOfSyncSegments.svelte';
 	import GridEqualNot from '$lib/components/ui/GridEqualNot.svelte';
-	import { consoleOrbiter, consoleSortedSatellites } from '$lib/derived/console/segments.derived';
+	import {
+		consoleOrbiter,
+		consoleSortedSatellites,
+		consoleSortedUfos
+	} from '$lib/derived/console/segments.derived';
 	import { mctrlOrbiter } from '$lib/derived/mission-control/mission-control-orbiters.derived';
 	import { mctrlSortedSatellites } from '$lib/derived/mission-control/mission-control-satellites.derived';
+	import { mctrlSortedUfos } from '$lib/derived/mission-control/mission-control-ufos.derived';
 	import { i18n } from '$lib/stores/app/i18n.store';
 
 	interface Props {
@@ -19,15 +24,23 @@
 
 <form {onsubmit}>
 	<div class="columns">
-		<OutOfSyncSegments orbiter={$consoleOrbiter} satellites={$consoleSortedSatellites}>
+		<OutOfSyncSegments
+			orbiter={$consoleOrbiter}
+			satellites={$consoleSortedSatellites}
+			ufos={$consoleSortedUfos}
+		>
 			{#snippet label()}
 				{$i18n.out_of_sync.console}
 			{/snippet}
 		</OutOfSyncSegments>
 
 		<GridEqualNot small />
 
-		<OutOfSyncSegments orbiter={$mctrlOrbiter} satellites={$mctrlSortedSatellites}>
+		<OutOfSyncSegments
+			orbiter={$mctrlOrbiter}
+			satellites={$mctrlSortedSatellites}
+			ufos={$mctrlSortedUfos}
+		>
 			{#snippet label()}
 				{$i18n.mission_control.title}
 			{/snippet}

src/frontend/src/lib/components/modules/out-of-sync/OutOfSyncSegments.svelte

@@ -6,20 +6,32 @@
 	import { i18n } from '$lib/stores/app/i18n.store';
 	import type { Orbiter } from '$lib/types/orbiter';
 	import type { Satellite } from '$lib/types/satellite';
+	import type { Ufo } from '$lib/types/ufo';
 	import { metadataUiName } from '$lib/utils/metadata-ui.utils';
 	import { orbiterName } from '$lib/utils/orbiter.utils';
 
 	interface Props {
 		label: Snippet;
 		satellites: Satellite[];
+		ufos: Ufo[];
 		orbiter: Nullish<Orbiter>;
 	}
 
-	let { label, satellites, orbiter }: Props = $props();
+	let { label, satellites, ufos, orbiter }: Props = $props();
 </script>
 
 {#snippet withSegments()}
 	<ul class="content">
+		{#if nonNullish(orbiter)}
+			{@const orbName = orbiterName(orbiter)}
+
+			<li>
+				<Segment id={orbiter.orbiter_id}>
+					{isEmptyString(orbName) ? $i18n.analytics.orbiter : orbName}
+				</Segment>
+			</li>
+		{/if}
+
 		{#each satellites as satellite (satellite.satellite_id.toText())}
 			<li>
 				<Segment id={satellite.satellite_id}>
@@ -28,15 +40,13 @@
 			</li>
 		{/each}
 
-		{#if nonNullish(orbiter)}
-			{@const orbName = orbiterName(orbiter)}
-
+		{#each ufos as ufo (ufo.ufo_id.toText())}
 			<li>
-				<Segment id={orbiter.orbiter_id}>
-					{isEmptyString(orbName) ? $i18n.analytics.orbiter : orbName}
+				<Segment id={ufo.ufo_id}>
+					{metadataUiName(ufo)}
 				</Segment>
 			</li>
-		{/if}
+		{/each}
 	</ul>
 {/snippet}
 

src/frontend/src/lib/derived/mission-control/mission-control-ufos.derived.ts

@@ -1,7 +1,12 @@
 import { ufosUncertifiedStore } from '$lib/stores/mission-control/ufos.store';
+import { sortUfos } from '$lib/utils/ufo.utils';
 import { derived } from 'svelte/store';
 
 export const mctrlUfos = derived(
 	[ufosUncertifiedStore],
 	([$ufosUncertifiedStore]) => $ufosUncertifiedStore?.data
 );
+
+export const mctrlSortedUfos = derived([mctrlUfos], ([$mctrlUfosStore]) =>
+	($mctrlUfosStore ?? []).sort(sortUfos)
+);

src/frontend/src/lib/derived/out-of-sync.derived.ts

@@ -1,6 +1,11 @@
-import { consoleOrbiters, consoleSatellites } from '$lib/derived/console/segments.derived';
+import {
+	consoleOrbiters,
+	consoleSatellites,
+	consoleUfos
+} from '$lib/derived/console/segments.derived';
 import { mctrlOrbiters } from '$lib/derived/mission-control/mission-control-orbiters.derived';
 import { mctrlSatellites } from '$lib/derived/mission-control/mission-control-satellites.derived';
+import { mctrlUfos } from '$lib/derived/mission-control/mission-control-ufos.derived';
 import { derived } from 'svelte/store';
 
 export const outOfSyncSatellites = derived(
@@ -61,3 +66,31 @@ export const outOfSyncOrbiters = derived(
 		return !inSync;
 	}
 );
+
+export const outOfSyncUfos = derived(
+	[consoleUfos, mctrlUfos],
+	([$consoleUfos, $mctrlUfos]): boolean | undefined => {
+		// Not yet fully loaded
+		if ($consoleUfos === undefined || $mctrlUfos === undefined) {
+			return undefined;
+		}
+
+		// No mission control
+		if ($mctrlUfos === null) {
+			return false;
+		}
+
+		if ($consoleUfos?.length === 0 && $mctrlUfos.length === 0) {
+			return false;
+		}
+
+		const inSync =
+			$consoleUfos?.length === $mctrlUfos.length &&
+			($consoleUfos ?? []).every(
+				({ ufo_id: segment_id }) =>
+					$mctrlUfos.find(({ ufo_id }) => ufo_id.toText() === segment_id.toText()) !== undefined
+			);
+
+		return !inSync;
+	}
+);

src/frontend/src/lib/i18n/en.json

@@ -1100,7 +1100,7 @@
 		"upgrade_available": "New upgrades available. Visit the Upgrade Dock to check them out.",
 		"short_freezing_threshold": "Short freezing threshold detected. We recommend a longer grace period to give you more time if cycles run out.",
 		"learn_more": "Learn more",
-		"out_of_sync": "Your satellites and orbiters are out of sync. Reconcile them now."
+		"out_of_sync": "Your modules are out of sync. Reconcile them now."
 	},
 	"not_found": {
 		"title": "Oops! You got lost in space.",
@@ -1124,7 +1124,9 @@
 		"syncing_satellites_to_console": "Syncing Satellites to Console...",
 		"syncing_satellites_to_mctrl": "Syncing Satellites to Mission Control... ({0})",
 		"syncing_orbiters_to_console": "Syncing Orbiters to Console...",
-		"syncing_orbiters_to_mctrl": "Syncing Orbiters to Mission Control... ({0})"
+		"syncing_orbiters_to_mctrl": "Syncing Orbiters to Mission Control... ({0})",
+		"syncing_ufos_to_console": "Syncing UFOs to Console...",
+		"syncing_ufos_to_mctrl": "Syncing UFOs to Mission Control... ({0})"
 	},
 	"automation": {
 		"title": "Deployments",