feat: show real time probe logs on the probe page

assets/css/global.css

@@ -44,10 +44,6 @@ html {
 	background: linear-gradient(to left, var(--dark-800), transparent);
 }
 
-.nuxt-icon svg {
-	margin-bottom: 0 !important;
-}
-
 .no-scrollbar::-webkit-scrollbar {
 	display: none;
 }

components/AdminPanel.vue

@@ -91,7 +91,7 @@
 			impersonationList.value = users as (User & { github_username: string })[];
 
 			if (impersonationList.value.length === 1) {
-				applyImpersonation(impersonationList.value[0]);
+				applyImpersonation(impersonationList.value[0]!);
 			}
 		} catch (error) {
 			console.error('Error during impersonation:', error instanceof Error ? error.message : 'Unknown error');

components/AdoptProbe.vue

@@ -81,7 +81,7 @@
 						<div class="w-80 p-4 text-left sm:p-6">
 							<p class="font-bold">Software probe</p>
 							<p class="mt-2">A Docker container that runs on your own hardware.</p>
-							<nuxt-icon class="mt-2 inline-block text-6xl text-[#099CEC]" name="docker"/>
+							<NuxtIcon class="mt-2 inline-block text-6xl text-[#099CEC]" name="docker" aria-hidden="true"/>
 						</div>
 					</button>
 					<button class="group relative flex flex-row items-stretch overflow-hidden rounded-xl border hover:border-[#17d4a7] dark:bg-dark-900" @click="() => { probeType = 'hardware'; activateCallback('3'); }">
@@ -186,7 +186,7 @@
 					</div>
 					<div class="mt-6 text-right">
 						<Button class="mr-2" label="Back" severity="secondary" text @click="probeType === 'software' ? activateCallback('0') : activateCallback('3')"/>
-						<Button label="Send adoption code" :loading="sendAdoptionCodeLoading" :disabled="!ip.length" @click="sendAdoptionCode(activateCallback)"/>
+						<Button :label="isResendingCode ? 'Resend code' : 'Send adoption code'" :loading="sendAdoptionCodeLoading" :disabled="!ip.length" @click="sendAdoptionCode(activateCallback)"/>
 					</div>
 				</div>
 			</StepPanel>
@@ -273,54 +273,49 @@
 
 	// STEP 2
 
-	const { data: initialProbes } = await useLazyAsyncData(
+	const { data: initialIds } = await useLazyAsyncData(
 		'initial_user_probes',
 		() => $directus.request(readItems('gp_probes', {
 			filter: getUserFilter('userId'),
 		})),
-		{ default: () => [] },
+		{ default: () => new Set(), transform: probes => new Set(probes.map(probe => probe.id)) },
 	);
 
+	const searchCanceled = ref(false);
+
+	onBeforeUnmount(() => { searchCanceled.value = true; });
+
 	const searchNewProbes = async (activateCallback: (step: string | number) => void) => {
 		activateCallback('2');
 		const startTime = Date.now();
 
-		try {
-			await new Promise<void>((resolve) => {
-				const checkProbes = async () => {
-					const currentProbes = await $directus.request(readItems('gp_probes', {
-						filter: getUserFilter('userId'),
-					}));
-
-					if (currentProbes.length > initialProbes.value.length) {
-						newProbesFound(currentProbes);
-						resolve();
-						return;
-					}
-
-					if (Date.now() - startTime > 10_000) {
-						newProbesNotFound();
-						resolve();
-						return;
-					}
-
-					setTimeout(checkProbes, 1000);
-				};
-
-				checkProbes();
-			});
-		} catch (e: any) {
-			const detail = e.errors ?? 'Request failed';
-			isIpValid.value = false;
-			invalidIpMessage.value = detail;
+		while (Date.now() - startTime <= 10_000) {
+			if (searchCanceled.value) {
+				return;
+			}
+
+			try {
+				const currentProbes = await $directus.request(readItems('gp_probes', {
+					filter: getUserFilter('userId'),
+				}));
+
+				const newProbes = currentProbes.filter(probe => !initialIds.value.has(probe.id));
+
+				if (newProbes.length) { newProbesFound(newProbes); return; }
+
+				await new Promise(resolve => setTimeout(resolve, 1000));
+			} catch (e: any) {
+				sendErrorToast(e);
+				newProbesNotFound();
+				return;
+			}
 		}
 
-		sendAdoptionCodeLoading.value = false;
+		newProbesNotFound();
 	};
 
-	const newProbesFound = (currentProbes: Probe[]) => {
-		const initialProbesIds = new Set(initialProbes.value.map(probe => probe.id));
-		newProbes.value = currentProbes.filter(probe => !initialProbesIds.has(probe.id));
+	const newProbesFound = (freshProbes: Probe[]) => {
+		newProbes.value = freshProbes;
 		isSuccess.value = true;
 
 		const wrapper = stepPanels.value.$el;
@@ -341,6 +336,7 @@
 	const ip = ref('');
 	const isIpValid = ref(true);
 	const invalidIpMessage = ref('');
+	const isResendingCode = ref(false);
 
 	const resetIsIpValid = () => {
 		isIpValid.value = true;
@@ -372,9 +368,11 @@
 
 			activateCallback('5');
 		} catch (e: any) {
+			console.error(e);
 			const detail = e.errors ?? 'Request failed';
 			isIpValid.value = false;
 			invalidIpMessage.value = detail;
+			isResendingCode.value = true;
 		}
 
 		sendAdoptionCodeLoading.value = false;
@@ -407,9 +405,6 @@
 
 			sendToast('info', 'The code has been resent', 'Paste it to the input to adopt the probe');
 		} catch (e: any) {
-			const detail = e.errors ?? 'Request failed';
-			isIpValid.value = false;
-			invalidIpMessage.value = detail;
 			sendErrorToast(e);
 		}
 	};
@@ -436,6 +431,7 @@
 
 			emit('adopted');
 		} catch (e: any) {
+			console.error(e);
 			const detail = e.errors ?? 'Request failed';
 			isCodeValid.value = false;
 			invalidCodeMessage.value = detail;

components/BigIcon.vue

@@ -1,6 +1,6 @@
 <template>
 	<div :class="{'flex size-10 shrink-0 items-center justify-center rounded-full border bg-surface-0 dark:bg-dark-900': border}" class="relative">
-		<nuxt-icon class="text-base text-primary" :class="{'text-xl': border}" :name="name" :filled="filled"/>
+		<NuxtIcon class="text-base text-primary" :class="{'text-xl': border}" :name="name" :filled="filled"/>
 		<slot/>
 	</div>
 </template>

components/CreditsChart.vue

@@ -56,15 +56,15 @@
 		}[] = [];
 
 		for (let i = 0; i < last30Days.length; i++) {
-			const day = last30Days[i];
+			const day = last30Days[i]!;
 			const addition = dayToAddition.get(day) ?? 0;
 			const deduction = dayToDeduction.get(day) ?? 0;
 			let total;
 
 			if (i === 0) {
 				total = props.start + addition - deduction;
 			} else {
-				total = data[i - 1].total + addition - deduction;
+				total = data[i - 1]!.total + addition - deduction;
 			}
 
 			data.push({
@@ -135,9 +135,18 @@
 				callbacks: {
 					title: () => null,
 					label: () => null,
-					afterBody: (ctx: any) => `Total credits: ${changes.value[ctx[0].dataIndex].total.toLocaleString('en-US')}
-Generated: ${changes.value[ctx[0].dataIndex].generated.toLocaleString('en-US')}
-Spent: ${changes.value[ctx[0].dataIndex].spent.toLocaleString('en-US')}`,
+					afterBody: (ctx: any) => {
+						const dataIndex = ctx[0]?.dataIndex;
+						const change = changes.value[dataIndex];
+
+						if (change) {
+							return `Total credits: ${change.total.toLocaleString('en-US')}
+Generated: ${change.generated.toLocaleString('en-US')}
+Spent: ${change.spent.toLocaleString('en-US')}`;
+						}
+
+						return '';
+					},
 				},
 				bodyFont: {
 					weight: 400,

components/DeleteProbes.vue

@@ -14,7 +14,7 @@
 				<p>Are you sure you want to delete these probes? You will not be able to undo this action.</p>
 			</div>
 			<div v-else class="flex flex-col">
-				<p>You are about to delete the probe <span class="font-bold">{{ probes[0].name || probes[0].city }}</span> ({{ probes[0].ip }}).</p>
+				<p>You are about to delete the probe <span class="font-bold">{{ probes[0]!.name || probes[0]!.city }}</span> ({{ probes[0]!.ip }}).</p>
 				<p>Are you sure you want to delete this probe? You will not be able to undo this action.</p>
 			</div>
 		</div>

components/NuxtIcon.vue

@@ -0,0 +1,59 @@
+<!-- This component is a copy of nuxt-icons lib, but with fixed "noUncheckedIndexedAccess" errors. Source: https://github.com/gitFoxCode/nuxt-icons/issues/60 -->
+
+<template>
+	<!-- eslint-disable-next-line vue/no-v-html -->
+	<span class="nuxt-icon" :class="{ 'nuxt-icon--fill': !filled, 'nuxt-icon--stroke': hasStroke && !filled }" v-html="icon"/>
+</template>
+
+  <script setup lang="ts">
+	import { ref, watchEffect } from '#imports';
+
+	const props = withDefaults(defineProps<{
+		name: string;
+		filled?: boolean;
+	}>(), { filled: false });
+
+
+	const icon = ref<string | Record<string, any>>('');
+	let hasStroke = false;
+
+	async function getIcon () {
+		try {
+			const iconsImport = import.meta.glob('assets/icons/**/**.svg', {
+				eager: false,
+				query: '?raw',
+				import: 'default',
+			});
+			const iconPath = `/assets/icons/${props.name}.svg`;
+			const rawIcon = await iconsImport[iconPath]!() as string;
+
+			if (rawIcon.includes('stroke')) { hasStroke = true; }
+
+			icon.value = rawIcon;
+		} catch {
+			console.error(`[nuxt-icons] Icon '${props.name}' doesn't exist in 'assets/icons'`);
+		}
+	}
+
+	await getIcon();
+
+	watchEffect(getIcon);
+  </script>
+
+  <style>
+	.nuxt-icon svg {
+		width: 1em;
+		height: 1em;
+		vertical-align: middle;
+	}
+
+	.nuxt-icon.nuxt-icon--fill,
+	.nuxt-icon.nuxt-icon--fill * {
+		fill: currentColor !important;
+	}
+
+	.nuxt-icon.nuxt-icon--stroke,
+	.nuxt-icon.nuxt-icon--stroke * {
+		stroke: currentColor !important;
+	}
+  </style>

components/TagsList.vue

@@ -34,11 +34,11 @@
 			let length = 0;
 
 			for (let i = 0; i < props.tags.length; i++) {
-				if (length + props.tags[i].length > maxChars) {
+				if (length + props.tags[i]!.length > maxChars) {
 					return Math.max(1, i);
 				}
 
-				length += props.tags[i].length;
+				length += props.tags[i]!.length;
 			}
 
 			return props.tags.length;

components/probe/LogLoader.vue

@@ -0,0 +1,7 @@
+<template>
+	<span class="flex flex-nowrap gap-1">
+		<span class="size-1.5 animate-dot-pulse rounded-full bg-gray-500 opacity-50"/>
+		<span class="size-1.5 animate-dot-pulse rounded-full bg-gray-500 opacity-50 animate-delay-200"/>
+		<span class="size-1.5 animate-dot-pulse rounded-full bg-gray-500 opacity-50 animate-delay-400"/>
+	</span>
+</template>