feat: prevent stop, detach and delete if monitoring is enabled (#1141)

* feat: prevent stop, detach and delete if monitoring is enabled

* chore: fmt

src/frontend/src/lib/components/canister/CanisterStop.svelte

@@ -15,11 +15,12 @@
 
 	interface Props {
 		canister: CanisterSyncData;
+		monitoringEnabled: boolean;
 		segment: 'satellite' | 'orbiter';
 		onstop: () => void;
 	}
 
-	let { canister, segment, onstop }: Props = $props();
+	let { canister, monitoringEnabled, segment, onstop }: Props = $props();
 
 	let visible = $state(false);
 
@@ -33,6 +34,11 @@
 			return;
 		}
 
+		if (monitoringEnabled) {
+			toasts.warn($i18n.monitoring.warn_monitoring_enabled);
+			return;
+		}
+
 		busy.start();
 
 		try {

src/frontend/src/lib/components/canister/CanisterStopStart.svelte

@@ -7,12 +7,13 @@
 
 	interface Props {
 		canister?: CanisterSyncData | undefined;
+		monitoringEnabled: boolean;
 		segment: 'satellite' | 'orbiter';
 		onstart: () => void;
 		onstop: () => void;
 	}
 
-	let { canister = undefined, segment, onstart, onstop }: Props = $props();
+	let { canister = undefined, monitoringEnabled, segment, onstart, onstop }: Props = $props();
 
 	let status = $derived<CanisterStatus | undefined>(canister?.data?.canister.status);
 	let sync = $derived<CanisterSyncStatus | undefined>(canister?.sync);
@@ -21,7 +22,7 @@
 {#if nonNullish(canister) && status === 'stopped' && sync === 'synced'}
 	<div in:fade><CanisterStart {canister} {segment} {onstart} /></div>
 {:else if nonNullish(canister) && status === 'running' && sync === 'synced'}
-	<div in:fade><CanisterStop {canister} {segment} {onstop} /></div>
+	<div in:fade><CanisterStop {canister} {monitoringEnabled} {segment} {onstop} /></div>
 {/if}
 
 <style lang="scss">

src/frontend/src/lib/components/canister/SegmentDetach.svelte

@@ -15,11 +15,12 @@
 
 	interface Props {
 		segment: 'satellite' | 'orbiter';
+		monitoringEnabled: boolean;
 		segmentId: Principal;
 		ondetach: () => void;
 	}
 
-	let { segment, segmentId, ondetach }: Props = $props();
+	let { segment, monitoringEnabled, segmentId, ondetach }: Props = $props();
 
 	let visible = $state(false);
 
@@ -40,6 +41,12 @@
 			return;
 		}
 
+		// TODO: can be removed once the mission control is patched to disable monitoring on detach
+		if (monitoringEnabled) {
+			toasts.warn($i18n.monitoring.warn_monitoring_enabled);
+			return;
+		}
+
 		busy.start();
 
 		try {

src/frontend/src/lib/components/orbiter/OrbiterActions.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { fromNullishNullable } from '@dfinity/utils';
 	import type { Orbiter } from '$declarations/mission_control/mission_control.did';
 	import CanisterBuyCycleExpress from '$lib/components/canister/CanisterBuyCycleExpress.svelte';
 	import CanisterDelete from '$lib/components/canister/CanisterDelete.svelte';
@@ -8,6 +9,8 @@
 	import SegmentDetach from '$lib/components/canister/SegmentDetach.svelte';
 	import TopUp from '$lib/components/canister/TopUp.svelte';
 	import SegmentActions from '$lib/components/segments/SegmentActions.svelte';
+	import { i18n } from '$lib/stores/i18n.store';
+	import { toasts } from '$lib/stores/toasts.store';
 	import type { CanisterSyncData as CanisterSyncDataType } from '$lib/types/canister';
 	import { emit } from '$lib/utils/events.utils';
 
@@ -17,6 +20,10 @@
 
 	let { orbiter }: Props = $props();
 
+	let monitoring = $derived(fromNullishNullable(fromNullishNullable(orbiter.settings)?.monitoring));
+
+	let monitoringEnabled = $derived(fromNullishNullable(monitoring?.cycles)?.enabled === true);
+
 	let canister = $state<CanisterSyncDataType | undefined>(undefined);
 
 	let visible: boolean = $state(false);
@@ -26,6 +33,12 @@
 	const onCanisterAction = async (type: 'delete_orbiter' | 'transfer_cycles_orbiter') => {
 		close();
 
+		// TODO: can be removed once the mission control is patched to disable monitoring on delete
+		if (type === 'delete_orbiter' && monitoringEnabled) {
+			toasts.warn($i18n.monitoring.warn_monitoring_enabled);
+			return;
+		}
+
 		emit({
 			message: 'junoModal',
 			detail: {
@@ -53,9 +66,20 @@
 	{/snippet}
 
 	{#snippet canisterActions()}
-		<CanisterStopStart {canister} segment="orbiter" onstop={close} onstart={close} />
+		<CanisterStopStart
+			{canister}
+			{monitoringEnabled}
+			segment="orbiter"
+			onstop={close}
+			onstart={close}
+		/>
 
-		<SegmentDetach segment="orbiter" segmentId={orbiter.orbiter_id} ondetach={close} />
+		<SegmentDetach
+			segment="orbiter"
+			segmentId={orbiter.orbiter_id}
+			{monitoringEnabled}
+			ondetach={close}
+		/>
 
 		<CanisterDelete {canister} onclick={async () => await onCanisterAction('delete_orbiter')} />
 	{/snippet}

src/frontend/src/lib/components/satellites/SatelliteActions.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { fromNullishNullable } from '@dfinity/utils';
 	import type { Satellite } from '$declarations/mission_control/mission_control.did';
 	import CanisterBuyCycleExpress from '$lib/components/canister/CanisterBuyCycleExpress.svelte';
 	import CanisterDelete from '$lib/components/canister/CanisterDelete.svelte';
@@ -10,6 +11,8 @@
 	import SegmentActions from '$lib/components/segments/SegmentActions.svelte';
 	import { listCustomDomains } from '$lib/services/hosting.services';
 	import { busy } from '$lib/stores/busy.store';
+	import { i18n } from '$lib/stores/i18n.store';
+	import { toasts } from '$lib/stores/toasts.store';
 	import type { CanisterSyncData as CanisterSyncDataType } from '$lib/types/canister';
 	import { emit } from '$lib/utils/events.utils';
 
@@ -19,6 +22,12 @@
 
 	let { satellite }: Props = $props();
 
+	let monitoring = $derived(
+		fromNullishNullable(fromNullishNullable(satellite.settings)?.monitoring)
+	);
+
+	let monitoringEnabled = $derived(fromNullishNullable(monitoring?.cycles)?.enabled === true);
+
 	let detail = { satellite };
 
 	let canister = $state<CanisterSyncDataType | undefined>(undefined);
@@ -45,6 +54,12 @@
 	const onDeleteSatellite = async () => {
 		close();
 
+		// TODO: can be removed once the mission control is patched to disable monitoring on delete
+		if (monitoringEnabled) {
+			toasts.warn($i18n.monitoring.warn_monitoring_enabled);
+			return;
+		}
+
 		busy.start();
 
 		const { success } = await listCustomDomains({
@@ -83,9 +98,20 @@
 	{/snippet}
 
 	{#snippet canisterActions()}
-		<CanisterStopStart {canister} segment="satellite" onstop={close} onstart={close} />
-
-		<SegmentDetach segment="satellite" segmentId={satellite.satellite_id} ondetach={close} />
+		<CanisterStopStart
+			{canister}
+			{monitoringEnabled}
+			segment="satellite"
+			onstop={close}
+			onstart={close}
+		/>
+
+		<SegmentDetach
+			segment="satellite"
+			segmentId={satellite.satellite_id}
+			{monitoringEnabled}
+			ondetach={close}
+		/>
 
 		<CanisterDelete {canister} onclick={onDeleteSatellite} />
 	{/snippet}

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

@@ -740,7 +740,8 @@
 		"custom": "Custom",
 		"custom_description": "Define your own thresholds and top-up amounts.",
 		"default": "Your strategy",
-		"default_description": "Use your previously saved default strategy."
+		"default_description": "Use your previously saved default strategy.",
+		"warn_monitoring_enabled": "Please disable monitoring before proceeding."
 	},
 	"preferences": {
 		"title": "Preferences",

src/frontend/src/lib/i18n/zh-cn.json

@@ -740,7 +740,8 @@
 		"custom": "Custom",
 		"custom_description": "Define your own thresholds and top-up amounts.",
 		"default": "Your strategy",
-		"default_description": "Use your previously saved default strategy."
+		"default_description": "Use your previously saved default strategy.",
+		"warn_monitoring_enabled": "Please disable monitoring before proceeding."
 	},
 	"preferences": {
 		"title": "偏好设置",

src/frontend/src/lib/types/i18n.d.ts

@@ -766,6 +766,7 @@ interface I18nMonitoring {
 	custom_description: string;
 	default: string;
 	default_description: string;
+	warn_monitoring_enabled: string;
 }
 
 interface I18nPreferences {