add status icon to pds table and detail

backend/plc-crawler.js

@@ -17,7 +17,7 @@ async function crawl(ats) {
 }
 
 if (Deno.args[0] === "daemon") {
-  const wait = 30;
+  const wait = 15;
 
   console.log("Initializing ATScan ..");
   const ats = new ATScan();

frontend/src/lib/components/PDSTable.svelte

@@ -1,7 +1,13 @@
 <script>
 	import Table from '$lib/components/Table.svelte';
 	import { tableMapperValues, tableSourceValues } from '@skeletonlabs/skeleton';
-	import { dateDistance, identicon, formatNumber, customTableMapper } from '$lib/utils.js';
+	import {
+		dateDistance,
+		identicon,
+		formatNumber,
+		customTableMapper,
+		getPDSStatus
+	} from '$lib/utils.js';
 	export let sourceData;
 	export let data;
 
@@ -23,7 +29,7 @@
 			const fed = data.ecosystem.data.federations.find((f) => f.id === val);
 			if (fed) {
 				arr.push(
-					`<span class="badge variant-filled bg-ats-fed-${fed.id} dark:bg-ats-fed-${fed.id} opacity-70 text-white dark:text-black">${fed.id}</span>`
+					`<span class="mt-0.5 badge variant-filled bg-ats-fed-${fed.id} dark:bg-ats-fed-${fed.id} opacity-70 text-white dark:text-black">${fed.id}</span>`
 				);
 			}
 			val = arr.reverse().join(' ');
@@ -76,11 +82,19 @@
 		if (key === 'url') {
 			val = `/pds/${row.host}`;
 		}
+		if (key === 'status') {
+			const { color, ico, text } = getPDSStatus(row);
+			val = `<i class="mt-1.5 mr-1.5 ${
+				ico || 'fa-solid fa-circle'
+			} ${color}" alt="${text}" title="${text}"></i>`;
+			//(row.inspect.current?.ms ? `<span class="text-xs opacity-50">${row.inspect.current?.ms}ms</span>` : '')
+		}
 		return val;
 	}
 	$: tableSimple = {
 		head: [
 			'Federation',
+			'',
 			'Host',
 			'DIDs',
 			'Location',
@@ -90,7 +104,7 @@
 		],
 		body: customTableMapper(
 			sourceData,
-			['fed', 'host', 'didsCount', 'location', 'plcs', 'ms', 'lastOnline'],
+			['fed', 'status', 'host', 'didsCount', 'location', 'plcs', 'ms', 'lastOnline'],
 			tableMap
 		),
 		meta: customTableMapper(sourceData, ['host_raw', 'url'], tableMap)

frontend/src/lib/utils.js

@@ -58,3 +58,13 @@ export function isDarkMode(document) {
 	const elemHtmlClasses = document.documentElement.classList;
 	return elemHtmlClasses.contains('dark');
 }
+
+export function getPDSStatus(row) {
+	const [color, ico, text] = !row.inspect
+		? ['text-gray-500', null, 'Status unknown']
+		: row.inspect?.current.err
+		? ['text-red-500', null, 'Offline']
+		: ['text-green-500', null, 'Online'];
+
+	return { color, ico, text };
+}

frontend/src/routes/pds/[host]/+page.svelte

@@ -1,7 +1,13 @@
 <script>
 	import Breadcrumb from '$lib/components/Breadcrumb.svelte';
 	import DIDTable from '$lib/components/DIDTable.svelte';
-	import { formatNumber, dateDistance, getFlagEmoji, isDarkMode } from '$lib/utils.js';
+	import {
+		formatNumber,
+		dateDistance,
+		getFlagEmoji,
+		isDarkMode,
+		getPDSStatus
+	} from '$lib/utils.js';
 	import SourceSection from '$lib/components/SourceSection.svelte';
 	import BasicPage from '$lib/components/BasicPage.svelte';
 	import Chart from '$lib/components/Chart.svelte';
@@ -10,6 +16,7 @@
 	export let data;
 
 	const item = data.item;
+	const status = getPDSStatus(item);
 
 	const infoMaps = [];
 	infoMaps.push({
@@ -90,60 +97,63 @@
 		});
 	}
 
-	$: chartResponseTimes = {};
-	let darkMode = null;
-	onMount(() => {
-		darkMode = isDarkMode(document);
-		chartResponseTimes = {
-			animationDuration: 500,
-			title: {
-				text: `${item.host} response times in last 24 hours`
-			},
-			tooltip: {
-				trigger: 'axis',
-				formatter: '{b}: {c} ms'
-			},
-			legend: {
-				data: [chartHost]
-			},
-			grid: {
-				left: '3%',
-				right: '4%',
-				bottom: '3%',
-				containLabel: true
-			},
-			toolbox: {
-				feature: {
-					saveAsImage: {}
-				}
-			},
-			xAxis: {
-				type: 'category',
-				boundaryGap: false,
-				data: item.responseTimesDay?.map((r) => r._time) || []
-			},
-			yAxis: {
-				type: 'value',
-				axisLabel: {
-					formatter: '{value} ms'
-				}
-			},
-			series: [
-				{
-					name: chartHost,
-					type: 'line',
-					stack: 'ms',
-					data: item.responseTimesDay?.map((r) => r._value) || []
-				}
-			]
-		};
-	});
-	console.log(darkMode);
-
-	const chartHost = 'Central Europe (CZ)';
+	$: chartResponseTimes = {
+		animationDuration: 500,
+		title: {
+			text: `${item.host} response times in last 24 hours`
+		},
+		tooltip: {
+			trigger: 'axis',
+			formatter: '{b}: {c} ms'
+		},
+		legend: {
+			data: [chartHost]
+		},
+		grid: {
+			left: '2%',
+			right: '2%',
+			bottom: '3%',
+			containLabel: true
+		},
+		toolbox: {
+			feature: {
+				saveAsImage: {}
+			}
+		},
+		xAxis: {
+			type: 'category',
+			boundaryGap: false,
+			data: item.responseTimesDay?.map((r) => r._time) || []
+		},
+		yAxis: {
+			type: 'value',
+			axisLabel: {
+				formatter: '{value} ms'
+			}
+		},
+		series: [
+			{
+				name: chartHost,
+				type: 'line',
+				stack: 'ms',
+				data: item.responseTimesDay?.map((r) => r._value) || []
+			}
+		]
+	};
+	const chartHost = 'Central Europe (Prague, CZ)';
 </script>
 
-<BasicPage {data} title={item.host} {breadcrumb}>
+<BasicPage {data} title={item.host} {breadcrumb} noHeader="true">
+	<h1 class="h1">
+		{item.host}
+		<i
+			class="text-base md:text-xl align-[0.2em] md:align-[0.3em] mt-1.5 mr-1.5 {status.ico ||
+				'fa-solid fa-circle'} {status.color}"
+			alt={status.text}
+			title={status.text}
+		/>
+	</h1>
+
 	<div class="lg:grid grid-cols-2 gap-4">
 		{#each infoMaps as map}
 			<div class="card bg-white/20 p-4 lg:mb-0 mb-2">
@@ -163,9 +173,11 @@
 	</div>
 
 	<h2 class="h2">Response times</h2>
-	<div class="w-full h-64">
-		<Chart options={chartResponseTimes} />
-	</div>
+	{#if chartResponseTimes}
+		<div class="w-full h-64">
+			<Chart options={chartResponseTimes} />
+		</div>
+	{/if}
 
 	<h2 class="h2">
 		<a href="/dids?q=pds:{item.host}">DIDs</a>