Frontend node logs loading indicator

frontend/src/app.d.ts

@@ -11,6 +11,17 @@ declare global {
   interface ImportMetaEnv {
     VITE_API_URL: string;
   }
+
+  interface MoneroNode {
+    id: number;
+    hostname: string;
+    ip: string;
+    port: number;
+    protocol: string;
+    is_tor: boolean;
+    is_available: boolean;
+    nettype: string;
+  }
 }
 
 export {};

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

@@ -127,7 +127,7 @@
 
 <MainNav />
 
-<div class="pt-10 md:pt-12">
+<div class="pt-10 md:pt-12 min-h-screen">
 	<slot />
 </div>
 

frontend/src/routes/(front)/remote-nodes/logs/+page.svelte

@@ -1,7 +1,7 @@
 <script>
 	import { DataHandler } from '@vincjo/datatables/remote';
 	import { format, formatDistance } from 'date-fns';
-	import { loadData, formatBytes } from './api-handler';
+	import { loadData, loadNodeInfo, formatBytes } from './api-handler';
 	import { onMount, onDestroy } from 'svelte';
 	import {
 		DtSrRowsPerPage,
@@ -45,6 +45,9 @@
 	let filterProberId = 0;
 	let filterStatus = -1;
 
+	/** @type {MoneroNode | null} */
+	let nodeInfo;
+
 	const handler = new DataHandler([], { rowsPerPage: 10, totalRows: 0 });
 	let rows = handler.getRows();
 
@@ -93,6 +96,9 @@
 	});
 	onMount(() => {
 		pageId = new URLSearchParams(window.location.search).get('node_id') || '0';
+		loadNodeInfo(pageId).then((data) => {
+			nodeInfo = data;
+		});
 		handler.filter(pageId, 'node_id');
 		handler.onChange((state) => loadData(state));
 		handler.invalidate();
@@ -109,34 +115,43 @@
 	</div>
 	<div class="section-container text-center">
 		<h1 class="h1 pb-2 font-extrabold">{data.meta.title}</h1>
-		<p class="mx-auto max-w-3xl">
-			<strong>Monero remote node</strong> is a device on the internet running the Monero software with
-			full copy of the Monero blockchain that doesn't run on the same local machine where the Monero
-			wallet is located.
-		</p>
 	</div>
 	<div class="mx-auto w-full max-w-3xl px-20">
 		<hr class="!border-primary-400-500-token !border-t-4 !border-double" />
 	</div>
 </header>
 
-<section id="introduction ">
-	<div class="section-container text-center !max-w-4xl">
-		<p>
-			Remote node can be used by people who, for their own reasons (usually because of hardware
-			requirements, disk space, or technical abilities), cannot/don't want to run their own node and
-			prefer to relay on one publicly available on the Monero network.
-		</p>
-		<p>
-			Using an open node will allow to make a transaction instantaneously, without the need to
-			download the blockchain and sync to the Monero network first, but at the cost of the control
-			over your privacy. the <strong>Monero community suggests to always run your own node</strong> to
-			obtain the maximum possible privacy and to help decentralize the network.
-		</p>
+{#if nodeInfo === undefined}
+	<div class="section-container mx-auto w-full max-w-3xl text-center">
+		<p>Loading...</p>
+	</div>
+{:else if nodeInfo === null}
+	<div class="section-container mx-auto w-full max-w-3xl text-center">
+		<p>Node ID does not exist</p>
+	</div>
+{:else}
+	<div class="section-container">
+		<div class="table-container mx-auto w-full max-w-3xl">
+			<table class="table">
+				<tbody>
+					<tr>
+						<td class="font-bold">Hostname:Port</td>
+						<td>{nodeInfo?.hostname}:{nodeInfo?.port}</td>
+					</tr>
+					<tr>
+						<td class="font-bold">Public IP</td>
+						<td>{nodeInfo?.ip}</td>
+					</tr>
+					<tr>
+						<td class="font-bold">Net Type</td>
+						<td>{nodeInfo?.nettype.toUpperCase()}</td>
+					</tr></tbody
+				>
+			</table>
+		</div>
 	</div>
-</section>
 
-<section id="monero-remote-node">
+	<section id="node-logs">
 		<div class="section-container">
 			<div class="space-y-2 overflow-x-auto">
 				<div class="flex justify-between">
@@ -249,6 +264,7 @@
 			</div>
 		</div>
 	</section>
+{/if}
 
 <style lang="postcss">
 	.section-container {

frontend/src/routes/(front)/remote-nodes/logs/api-handler.js

@@ -8,6 +8,12 @@ export const loadData = async (state) => {
 	return json.data.items ?? [];
 };
 
+export const loadNodeInfo = async (nodeId) => {
+	const response = await fetch(apiUri(`/api/v1/nodes/id/${nodeId}`));
+	const json = await response.json();
+	return json.data;
+};
+
 /**
  * @param {number} bytes
  * @param {number} decimals