From 7553ad8b4508a530c81ea44774075c290e379db1 Mon Sep 17 00:00:00 2001
From: Christian Ditaputratama <ditatompel@gmail.com>
Date: Thu, 12 Sep 2024 03:11:17 +0700
Subject: [PATCH] feat: Display node IP addresses #84

---
 frontend/src/app.d.ts                             |  1 +
 .../components/datatables/xmr/HostPortCell.svelte | 15 +++++++++++----
 frontend/src/routes/remote-nodes/+page.svelte     |  1 +
 .../src/routes/remote-nodes/logs/+page.svelte     |  2 +-
 4 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/frontend/src/app.d.ts b/frontend/src/app.d.ts
index b8cff3e..6c321e2 100644
--- a/frontend/src/app.d.ts
+++ b/frontend/src/app.d.ts
@@ -21,6 +21,7 @@ declare global {
 		is_tor: boolean;
 		is_available: boolean;
 		nettype: string;
+		ip_addresses: string;
 	}
 
 	interface ApiResponse {
diff --git a/frontend/src/lib/components/datatables/xmr/HostPortCell.svelte b/frontend/src/lib/components/datatables/xmr/HostPortCell.svelte
index 9a230cd..28e2732 100644
--- a/frontend/src/lib/components/datatables/xmr/HostPortCell.svelte
+++ b/frontend/src/lib/components/datatables/xmr/HostPortCell.svelte
@@ -16,6 +16,8 @@
 	export let hostname;
 	export let port;
 	export let ipv6_only;
+	/** @type {string} */
+	export let ip_addresses;
 
 	/**
 	 * @param {string} onionAddr
@@ -35,7 +37,7 @@
 
 {#if is_tor}
 	<button
-		class="max-w-32 truncate text-orange-800 dark:text-orange-300"
+		class="max-w-40 truncate text-orange-800 dark:text-orange-300"
 		on:click={() => modalAlert(hostname, port)}
 	>
 		👁 {hostname}
@@ -43,7 +45,12 @@
 	<span class="text-gray-700 dark:text-gray-400">(TOR)</span>
 {:else}
 	{formatHostname(hostname)}:<span class="text-indigo-800 dark:text-indigo-400">{port}</span><br />
-	{#if ipv6_only}
-		<span class="text-rose-800 dark:text-rose-400">(IPv6 only)</span>
-	{/if}
+	<div class="max-w-40 text-ellipsis overflow-x-auto md:overflow-hidden hover:overflow-visible">
+		<span class="whitespace-break-spaces text-gray-700 dark:text-gray-400"
+			>{ip_addresses.replace(/,/g, ', ')}</span
+		>
+		{#if ipv6_only}
+			<span class="text-rose-800 dark:text-rose-400">(IPv6 only)</span>
+		{/if}
+	</div>
 {/if}
diff --git a/frontend/src/routes/remote-nodes/+page.svelte b/frontend/src/routes/remote-nodes/+page.svelte
index d4f06b5..497de8c 100644
--- a/frontend/src/routes/remote-nodes/+page.svelte
+++ b/frontend/src/routes/remote-nodes/+page.svelte
@@ -211,6 +211,7 @@
 						<tr>
 							<td
 								><HostPortCell
+									ip_addresses={row.ip_addresses}
 									is_tor={row.is_tor}
 									hostname={row.hostname}
 									port={row.port}
diff --git a/frontend/src/routes/remote-nodes/logs/+page.svelte b/frontend/src/routes/remote-nodes/logs/+page.svelte
index 9bddd42..6b4b21b 100644
--- a/frontend/src/routes/remote-nodes/logs/+page.svelte
+++ b/frontend/src/routes/remote-nodes/logs/+page.svelte
@@ -75,7 +75,7 @@
 					</tr>
 					<tr>
 						<td class="font-bold">Public IP</td>
-						<td>{nodeInfo?.ip}</td>
+						<td>{nodeInfo?.ip_addresses}</td>
 					</tr>
 					<tr>
 						<td class="font-bold">Net Type</td>