feat: show real time probe logs on the probe page

components/probe/TabLogs.vue

@@ -0,0 +1,141 @@
+<template>
+	<div
+		ref="logContainer"
+		class="relative flex flex-1 flex-col overflow-y-auto rounded-md border bg-surface-100 p-4 font-mono max-lg:p-2 max-md:gap-4 dark:bg-dark-950"
+		@scroll="autoScroll = false"
+		@scrollend="onScrollEnd"
+	>
+		<div
+			v-for="(log, index) in logs"
+			:key="index"
+			:class="{
+				'text-rose-600 dark:text-red-400': log.level?.toLowerCase() === 'error',
+				'text-orange-600 dark:text-yellow-300': log.level?.toLowerCase() === 'warn',
+				'text-gray-600 dark:text-gray-400': !['error','warn'].includes(log.level?.toLowerCase() || '')
+			}"
+		>
+			<span v-if="log.timestamp">[{{ log.timestamp.toUpperCase() }}] </span>
+			<span v-if="log.level">[{{ log.level.toUpperCase() }}] </span>
+			<span class="break-words">{{ log.message }}</span>
+		</div>
+		<span v-if="logs.length === 0" class="inset-0 m-auto text-gray-600 dark:text-gray-400">
+			<span v-if="pending && showLoader">
+				<span class="pi pi-spinner animate-spin text-2xl dark:text-gray-500"/>
+			</span>
+			<span v-else>
+				No logs available.
+			</span>
+		</span>
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { useErrorToast } from '~/composables/useErrorToast';
+
+	const { isActive } = defineProps({
+		isActive: {
+			type: Boolean,
+			default: true,
+		},
+	});
+
+	const MAX_LOGS = 5000;
+
+	const config = useRuntimeConfig();
+	const route = useRoute();
+	const probeId = route.params.id as string;
+	const refreshInterval = ref<NodeJS.Timeout>();
+	const logContainer = ref<HTMLDivElement | null>(null);
+	const autoScroll = ref(true);
+	const logs = ref<ProbeLog[]>([]);
+	const lastFetched = ref(0);
+	const showLoader = ref(true);
+
+	const { data, refresh, pending, error } = await useLazyAsyncData<ProbeLog[]>(
+		() => $fetch(`${config.public.gpApiUrl}/v1/probes/${probeId}/logs`, {
+			params: {
+				since: lastFetched.value,
+			},
+			credentials: 'include',
+		}),
+		{
+			default: () => [],
+			immediate: false,
+		},
+	);
+
+	useErrorToast(error);
+
+	const refreshLogs = async () => {
+		return refresh().then(() => {
+			if (!error.value) {
+				lastFetched.value = Date.now();
+			}
+		}).catch(() => {}) // errors are displayed via useErrorToast
+			.finally(() => { showLoader.value = !isActive; }); // do not show the loader on further refetches
+	};
+
+
+	const onScrollEnd = () => {
+		const scrollHeight = logContainer.value?.scrollHeight ?? 0;
+		const scrollTop = logContainer.value?.scrollTop ?? 0;
+		const containerHeight = logContainer.value?.clientHeight ?? 0;
+		const scrolledTo = scrollTop + containerHeight;
+
+		// if the user scrolled down enough, re-enable autoscroll
+		if (scrollHeight - scrolledTo < 30) {
+			autoScroll.value = true;
+		}
+	};
+
+	const scrollToBottom = () => {
+		nextTick(() => {
+			if (logContainer.value && autoScroll) {
+				logContainer.value.scrollTop = logContainer.value.scrollHeight;
+			}
+		});
+	};
+
+	const setRefreshInterval = (timeout = 10000) => {
+		if (refreshInterval.value) {
+			clearInterval(refreshInterval.value);
+		}
+
+		refreshInterval.value = setInterval(() => {
+			refreshLogs();
+		}, timeout);
+	};
+
+	// append new logs to the already stored ones
+	watch(() => data.value?.length, () => {
+		logs.value.push(...data.value);
+
+		if (logs.value.length > MAX_LOGS) {
+			logs.value = logs.value.slice(-MAX_LOGS);
+		}
+
+		scrollToBottom();
+	});
+
+	watch(() => isActive, (active) => {
+		if (active) {
+			// fetch data manually on the first tab load
+			if (lastFetched.value === 0) {
+				refreshLogs();
+			}
+
+			autoScroll.value = true;
+			scrollToBottom();
+			setRefreshInterval();
+		} else {
+			showLoader.value = true;
+			clearInterval(refreshInterval.value);
+		}
+	});
+
+	onUnmounted(() => {
+		if (refreshInterval.value) {
+			clearInterval(refreshInterval.value);
+		}
+	});
+</script>

layouts/default.vue

@@ -201,7 +201,7 @@
 		</aside>
 
 		<div class="overflow-auto">
-			<div class="mx-auto max-w-[1664px]">
+			<div class="mx-auto h-full max-w-[1664px]">
 				<slot/>
 			</div>
 		</div>

nuxt.config.ts

@@ -3,17 +3,19 @@ export default defineNuxtConfig({
 	runtimeConfig: {
 		serverUrl: process.env.DASH_URL || 'https://dash.globalping.io',
 		public: {
-			gpAuthUrl: process.env.GP_API_URL || 'https://auth.globalping.io',
+			gpAuthUrl: process.env.GP_AUTH_URL || 'https://auth.globalping.io',
 			directusUrl: process.env.DIRECTUS_URL || 'https://dash-directus.globalping.io',
+			gpApiUrl: process.env.GP_API_URL || 'https://api.globalping.io',
 			itemsPerTablePage: 10,
 		},
 	},
 	$development: {
 		runtimeConfig: {
 			serverUrl: process.env.DASH_URL || 'http://localhost:13010',
 			public: {
-				gpAuthUrl: process.env.GP_API_URL || 'http://localhost:13110',
+				gpAuthUrl: process.env.GP_AUTH_URL || 'http://localhost:13110',
 				directusUrl: process.env.DIRECTUS_URL || 'http://localhost:18055',
+				gpApiUrl: process.env.GP_API_URL || 'http://localhost:3000',
 			},
 		},
 		devtools: { enabled: true },

pages/probes/[id].vue

@@ -1,6 +1,6 @@
 <template>
-	<div class="min-h-full p-6">
-		<div class="flex flex-col gap-4">
+	<div class="flex h-full flex-col p-6">
+		<div class="flex min-h-0 flex-1 flex-col gap-4">
 			<div class="flex gap-2">
 				<NuxtLink
 					:to="getBackToProbesHref()"
@@ -96,23 +96,23 @@
 				Your probe container is running an outdated software and we couldn't update it automatically. Please follow <NuxtLink class="font-semibold" to="#" @click="updateProbeDialog = true">our guide</NuxtLink> to update it manually.
 			</Message>
 
-			<Tabs value="0">
+			<Tabs v-model:value="activeTab" class="flex min-h-0 flex-1 flex-col">
 				<TabList ref="tabListRef" class="!border-b !border-surface-300 dark:!border-dark-600 [&_[data-pc-section='tablist']]:!border-none">
 					<Tab value="0" tabindex="0" class="!w-1/2 border-none !px-6 !py-2 !text-[14px] !font-bold sm:!w-auto">Details</Tab>
-					<!-- temporarily hide Logs tab while it's under construction -->
-					<!-- <Tab value="1" tabindex="0" class="!w-1/2 border-none !px-6 !py-2 !text-[14px] !font-bold sm:!w-auto">Logs</Tab> -->
+					<Tab value="1" tabindex="0" class="!w-1/2 border-none !px-6 !py-2 !text-[14px] !font-bold sm:!w-auto">Logs</Tab>
 				</TabList>
 
-				<TabPanels class="mt-6 !bg-transparent !p-0">
+				<TabPanels class="mt-6 flex min-h-0 flex-1 flex-col !bg-transparent !p-0">
 					<TabPanel v-if="probeDetails" value="0" tabindex="-1">
 						<ProbeTabDetails v-model:probe-details-updating="probeDetailsUpdating" v-model:probe="probeDetails"/>
 					</TabPanel>
 
-					<TabPanel value="1" tabindex="-1">
-						NO LOGS FOR NOW
+					<TabPanel class="flex min-h-0 flex-1 flex-col" value="1" tabindex="-1">
+						<ProbeTabLogs :is-active="activeTab === '1'"/>
 					</TabPanel>
 				</TabPanels>
 			</Tabs>
+
 		</div>
 
 		<GPDialog
@@ -145,6 +145,7 @@
 	const showMoreIps = ref(false);
 	const windowSize = useWindowSize();
 	const tabListRef = useTemplateRef('tabListRef');
+	const activeTab = ref('0');
 
 	const { data: probeDetails, error: probeDetailsError } = await useAsyncData<Probe>(() => $directus.request(readItem('gp_probes', probeId)));
 

types.ts

@@ -201,4 +201,11 @@ declare global {
 		creditsPerDollar: number;
 		creditsPerAdoptedProbe: number;
 	};
+
+	type ProbeLog = {
+		message: string;
+		scope?: string;
+		level?: string;
+		timestamp?: string;
+	};
 }