feat: observatory dashboard

src/declarations/observatory/observatory.did.d.ts

@@ -1,6 +1,10 @@
 import type { ActorMethod } from '@dfinity/agent';
 import type { Principal } from '@dfinity/principal';
 
+export interface ArchiveStatuses {
+	statuses: Result_1;
+	timestamp: bigint;
+}
 export interface CanisterStatusResponse {
 	status: CanisterStatusType;
 	memory_size: bigint;
@@ -79,6 +83,7 @@ export interface SetCronTab {
 export interface _SERVICE {
 	del_controllers: ActorMethod<[DeleteControllersArgs], undefined>;
 	get_cron_tab: ActorMethod<[], [] | [CronTab]>;
+	get_statuses: ActorMethod<[], [] | [ArchiveStatuses]>;
 	list_statuses: ActorMethod<[ListStatusesArgs], Array<ListStatuses>>;
 	set_controllers: ActorMethod<[SetControllersArgs], undefined>;
 	set_cron_tab: ActorMethod<[SetCronTab], CronTab>;

src/declarations/observatory/observatory.factory.did.js

@@ -24,7 +24,6 @@ export const idlFactory = ({ IDL }) => {
 		mission_control_id: IDL.Principal,
 		created_at: IDL.Nat64
 	});
-	const ListStatusesArgs = IDL.Record({ time_delta: IDL.Opt(IDL.Nat64) });
 	const CanisterStatusType = IDL.Variant({
 		stopped: IDL.Null,
 		stopping: IDL.Null,
@@ -57,6 +56,11 @@ export const idlFactory = ({ IDL }) => {
 		mission_control: Result
 	});
 	const Result_1 = IDL.Variant({ Ok: SegmentsStatuses, Err: IDL.Text });
+	const ArchiveStatuses = IDL.Record({
+		statuses: Result_1,
+		timestamp: IDL.Nat64
+	});
+	const ListStatusesArgs = IDL.Record({ time_delta: IDL.Opt(IDL.Nat64) });
 	const ListStatuses = IDL.Record({
 		cron_jobs: CronJobs,
 		statuses: Result_1,
@@ -83,6 +87,7 @@ export const idlFactory = ({ IDL }) => {
 	return IDL.Service({
 		del_controllers: IDL.Func([DeleteControllersArgs], [], []),
 		get_cron_tab: IDL.Func([], [IDL.Opt(CronTab)], ['query']),
+		get_statuses: IDL.Func([], [IDL.Opt(ArchiveStatuses)], ['query']),
 		list_statuses: IDL.Func([ListStatusesArgs], [IDL.Vec(ListStatuses)], ['query']),
 		set_controllers: IDL.Func([SetControllersArgs], [], []),
 		set_cron_tab: IDL.Func([SetCronTab], [CronTab], []),

src/declarations/observatory/observatory.factory.did.mjs

@@ -24,7 +24,6 @@ export const idlFactory = ({ IDL }) => {
 		mission_control_id: IDL.Principal,
 		created_at: IDL.Nat64
 	});
-	const ListStatusesArgs = IDL.Record({ time_delta: IDL.Opt(IDL.Nat64) });
 	const CanisterStatusType = IDL.Variant({
 		stopped: IDL.Null,
 		stopping: IDL.Null,
@@ -57,6 +56,11 @@ export const idlFactory = ({ IDL }) => {
 		mission_control: Result
 	});
 	const Result_1 = IDL.Variant({ Ok: SegmentsStatuses, Err: IDL.Text });
+	const ArchiveStatuses = IDL.Record({
+		statuses: Result_1,
+		timestamp: IDL.Nat64
+	});
+	const ListStatusesArgs = IDL.Record({ time_delta: IDL.Opt(IDL.Nat64) });
 	const ListStatuses = IDL.Record({
 		cron_jobs: CronJobs,
 		statuses: Result_1,
@@ -83,6 +87,7 @@ export const idlFactory = ({ IDL }) => {
 	return IDL.Service({
 		del_controllers: IDL.Func([DeleteControllersArgs], [], []),
 		get_cron_tab: IDL.Func([], [IDL.Opt(CronTab)], ['query']),
+		get_statuses: IDL.Func([], [IDL.Opt(ArchiveStatuses)], ['query']),
 		list_statuses: IDL.Func([ListStatusesArgs], [IDL.Vec(ListStatuses)], ['query']),
 		set_controllers: IDL.Func([SetControllersArgs], [], []),
 		set_cron_tab: IDL.Func([SetCronTab], [CronTab], []),

src/frontend/src/lib/api/observatory.api.ts

@@ -1,11 +1,16 @@
-import type { CronJobs, CronTab } from '$declarations/observatory/observatory.did';
+import type { ArchiveStatuses, CronJobs, CronTab } from '$declarations/observatory/observatory.did';
 import { getObservatoryActor } from '$lib/utils/actor.juno.utils';
 import type { Principal } from '@dfinity/principal';
 import { toNullable } from '@dfinity/utils';
 
 export const getCronTab = async (): Promise<[] | [CronTab]> => {
-	const actor = await getObservatoryActor();
-	return actor.get_cron_tab();
+	const { get_cron_tab } = await getObservatoryActor();
+	return get_cron_tab();
+};
+
+export const getStatuses = async (): Promise<[] | [ArchiveStatuses]> => {
+	const { get_statuses } = await getObservatoryActor();
+	return get_statuses();
 };
 
 export const setCronTab = async ({

src/frontend/src/lib/components/observatory/ObservatoryDashboard.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+	import { i18n } from '$lib/stores/i18n.store';
+	import SpinnerParagraph from '$lib/components/ui/SpinnerParagraph.svelte';
+	import { getContext, onMount } from 'svelte';
+	import { fromNullable, isNullish } from '@dfinity/utils';
+	import { getStatuses } from '$lib/api/observatory.api';
+	import { toasts } from '$lib/stores/toasts.store';
+	import Value from '$lib/components/ui/Value.svelte';
+	import { fade } from 'svelte/transition';
+	import { formatToDate } from '$lib/utils/date.utils';
+	import { TABS_CONTEXT_KEY, type TabsContext } from '$lib/types/tabs.context';
+	import type { Statuses } from '$lib/types/observatory';
+	import ObservatoryData from '$lib/components/observatory/ObservatoryData.svelte';
+
+	let loading = true;
+
+	let timestamp: bigint | undefined;
+	let statuses: Statuses | undefined;
+
+	const loadStatuses = async () => {
+		try {
+			const results = fromNullable(await getStatuses());
+
+			timestamp = results?.timestamp;
+			statuses = results?.statuses;
+
+			loading = false;
+		} catch (err: unknown) {
+			toasts.error({
+				text: $i18n.errors.observatory_get_unexpected_error,
+				detail: err
+			});
+		}
+	};
+
+	onMount(async () => await loadStatuses());
+
+	const { store } = getContext<TabsContext>(TABS_CONTEXT_KEY);
+</script>
+
+{#if loading}
+	<SpinnerParagraph>{$i18n.core.loading}</SpinnerParagraph>
+{:else if isNullish(timestamp) || isNullish(statuses)}
+	<div class="card-container" in:fade>
+		<p>
+			{$i18n.observatory.disabled_go_settings}
+			<button on:click={() => store.update((state) => ({ ...state, tabId: state.tabs[1].id }))}
+				>{$i18n.core.settings}</button
+			>
+		</p>
+	</div>
+{:else}
+	<div in:fade>
+		<div class="card-container">
+			<Value>
+				<svelte:fragment slot="label">{$i18n.observatory.last_data_collection}</svelte:fragment>
+				<p>{formatToDate(timestamp)}</p>
+			</Value>
+		</div>
+
+		<ObservatoryData {statuses} />
+	</div>
+{/if}

src/frontend/src/lib/components/observatory/ObservatoryData.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+	import type { Status, Statuses } from '$lib/types/observatory';
+	import { fromNullable, isNullish, nonNullish } from '@dfinity/utils';
+	import ObservatoryError from '$lib/components/observatory/ObservatoryError.svelte';
+	import ObservatoryStatus from '$lib/components/observatory/ObservatoryStatus.svelte';
+	import { i18n } from '$lib/stores/i18n.store';
+
+	export let statuses: Statuses | undefined;
+
+	let orbiters: Status[];
+	$: orbiters =
+		nonNullish(statuses) && 'Ok' in statuses ? fromNullable(statuses.Ok.orbiters) ?? [] : [];
+
+	let satellites: Status[];
+	$: satellites =
+		nonNullish(statuses) && 'Ok' in statuses ? fromNullable(statuses.Ok.satellites) ?? [] : [];
+</script>
+
+{#if isNullish(statuses)}
+	<div class="card-container">{$i18n.observatory.no_data_collected}</div>
+{:else if 'Err' in statuses}
+	<div class="card-container">
+		<ObservatoryError err={statuses.Err} />
+	</div>
+{:else}
+	<div class="table-container">
+		<table>
+			<thead>
+				<tr>
+					<th>{$i18n.observatory.segment}</th>
+					<th>{$i18n.observatory.id}</th>
+					<th class="status">{$i18n.observatory.cycles_collected}</th>
+				</tr>
+			</thead>
+
+			<tbody>
+				<ObservatoryStatus status={statuses.Ok.mission_control} segment="Mission control" />
+
+				{#each orbiters as orbiter}
+					<ObservatoryStatus status={orbiter} segment="Orbiter" />
+				{/each}
+
+				{#each satellites as satellite}
+					<ObservatoryStatus status={satellite} segment="Satellite" />
+				{/each}
+			</tbody>
+		</table>
+	</div>
+{/if}
+
+<style lang="scss">
+	.card-container {
+		margin: var(--padding-4x) 0 0;
+	}
+
+	.table-container {
+		margin: var(--padding-6x) 0 0;
+	}
+</style>

src/frontend/src/lib/components/observatory/ObservatoryError.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import IconWarning from '$lib/components/icons/IconWarning.svelte';
+	import { onMount } from 'svelte';
+	import { i18n } from '$lib/stores/i18n.store';
+
+	export let err: string;
+
+	onMount(() => console.error(err));
+</script>
+
+<span><IconWarning /> {$i18n.observatory.error_collecting_data}</span>

src/frontend/src/lib/components/mission-control/MissionControlObservatory.svelte → src/frontend/src/lib/components/observatory/ObservatorySettings.svelte

@@ -98,7 +98,7 @@
 
 <div class="card-container">
 	{#if loading}
-		<SpinnerParagraph>{$i18n.observatory.loading}</SpinnerParagraph>
+		<SpinnerParagraph>{$i18n.core.loading}</SpinnerParagraph>
 	{:else}
 		<form on:submit|preventDefault={onSubmit} in:fade>
 			<div>

src/frontend/src/lib/components/observatory/ObservatoryStatus.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import type { Status } from '$lib/types/observatory';
+	import ObservatoryError from '$lib/components/observatory/ObservatoryError.svelte';
+	import { formatTCycles } from '$lib/utils/cycles.utils';
+
+	export let status: Status;
+	export let segment: 'Mission control' | 'Satellite' | 'Orbiter';
+</script>
+
+<tr>
+	{#if 'Err' in status}
+		<td colspan="3">
+			<ObservatoryError err={status.Err} />
+		</td>
+	{:else}
+		{@const data = status.Ok}
+
+		<td>
+			{segment}
+		</td>
+		<td>
+			{data.id.toText()}
+		</td>
+		<td>
+			{formatTCycles(data.status.cycles)}
+		</td>
+	{/if}
+</tr>

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

@@ -385,8 +385,7 @@
 	},
 	"observatory": {
 		"title": "Monitoring",
-		"overview": "Overview",
-		"loading": "Loading your settings",
+		"dashboard": "Dashboard",
 		"monitoring": "Monitoring",
 		"enabled": "Enabled",
 		"disabled": "Disabled",
@@ -395,7 +394,14 @@
 		"email_notifications": "Email notifications",
 		"email_notifications_placeholder": "Enter an email to receive notifications",
 		"cycles_threshold": "TCycles threshold (min 0.5)",
-		"cycles_threshold_placeholder": "A threshold to limit the notifications"
+		"cycles_threshold_placeholder": "A threshold to limit the notifications",
+		"last_data_collection": "Last data collection",
+		"disabled_go_settings": "The monitoring feature appears to be disabled. You can enable it by going to the",
+		"no_data_collected": "No data has been collected yet. The job runs every hour.",
+		"id": "ID",
+		"segment": "Segment",
+		"cycles_collected": "T Cycles collected",
+		"error_collecting_data": "There was an error collecting the data."
 	},
 	"settings": {
 		"title": "Settings",

src/frontend/src/lib/i18n/it.json

@@ -385,8 +385,7 @@
 	},
 	"observatory": {
 		"title": "Osservatorio",
-		"overview": "Panoramica",
-		"loading": "Carica le tue impostazioni",
+		"dashboard": "Dashboard",
 		"monitoring": "Monitoraggio",
 		"enabled": "Abilitato",
 		"disabled": "Disabilitato",
@@ -395,7 +394,14 @@
 		"email_notifications": "Notifiche email",
 		"email_notifications_placeholder": "Inserisci la tua email per ricevere notifiche",
 		"cycles_threshold": "Soglia TCycles (min 0.5)",
-		"cycles_threshold_placeholder": "Una soglia per limitare le notifiche"
+		"cycles_threshold_placeholder": "Una soglia per limitare le notifiche",
+		"last_data_collection": "Last data collection",
+		"disabled_go_settings": "The monitoring feature appears to be disabled. You can enable it by going to the",
+		"no_data_collected": "No data has been collected yet. The job runs every hour.",
+		"id": "ID",
+		"segment": "Segment",
+		"cycles_collected": "T Cycles collected",
+		"error_collecting_data": "There was an error collecting the data."
 	},
 	"settings": {
 		"title": "Impostazioni",

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

@@ -385,8 +385,7 @@
 	},
 	"observatory": {
 		"title": "Observatory",
-		"overview": "开要",
-		"loading": "加载设置",
+		"dashboard": "Dashboard",
 		"monitoring": "监控",
 		"enabled": "已启用",
 		"disabled": "已禁用",
@@ -395,7 +394,14 @@
 		"email_notifications": "邮件提醒",
 		"email_notifications_placeholder": "输入用于接受提醒的邮箱",
 		"cycles_threshold": "TCycles 阈值 (最小 0.5)",
-		"cycles_threshold_placeholder": "阈值设置提醒"
+		"cycles_threshold_placeholder": "阈值设置提醒",
+		"last_data_collection": "Last data collection",
+		"disabled_go_settings": "The monitoring feature appears to be disabled. You can enable it by going to the",
+		"no_data_collected": "No data has been collected yet. The job runs every hour.",
+		"id": "ID",
+		"segment": "Segment",
+		"cycles_collected": "T Cycles collected",
+		"error_collecting_data": "There was an error collecting the data."
 	},
 	"settings": {
 		"title": "设置",

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

@@ -410,8 +410,7 @@ interface I18nUsers {
 
 interface I18nObservatory {
 	title: string;
-	overview: string;
-	loading: string;
+	dashboard: string;
 	monitoring: string;
 	enabled: string;
 	disabled: string;
@@ -421,6 +420,13 @@ interface I18nObservatory {
 	email_notifications_placeholder: string;
 	cycles_threshold: string;
 	cycles_threshold_placeholder: string;
+	last_data_collection: string;
+	disabled_go_settings: string;
+	no_data_collected: string;
+	id: string;
+	segment: string;
+	cycles_collected: string;
+	error_collecting_data: string;
 }
 
 interface I18nSettings {

src/frontend/src/lib/types/observatory.ts

@@ -0,0 +1,4 @@
+import type { Result, Result_1 } from '$declarations/observatory/observatory.did';
+
+export type Statuses = Result_1;
+export type Status = Result;

src/frontend/src/routes/(monitor)/+layout.svelte

@@ -2,11 +2,6 @@
 	import Layout from '$lib/components/ui/Layout.svelte';
 	import Footer from '$lib/components/ui/Footer.svelte';
 	import Navbar from '$lib/components/core/Navbar.svelte';
-	import { missionControlStore } from '$lib/stores/mission-control.store';
-	import { loadSatellites } from '$lib/services/satellites.services';
-
-	$: $missionControlStore,
-		(async () => await loadSatellites({ missionControl: $missionControlStore }))();
 </script>
 
 <Layout>