From d8e8e063e5fe82cbbc478300d634d9b16b260fcd Mon Sep 17 00:00:00 2001
From: Dmytro Vovk <vovk.dimon@gmail.com>
Date: Wed, 2 Oct 2024 20:07:23 +0100
Subject: [PATCH] display peername, small fixes

---
 .../PeersStatistics/PeerDetailsPopup.tsx      |  5 +++--
 .../PeersStatistics/PeerDetailsTable.tsx      | 20 ++++++++++++++++++-
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/app/components/PeersStatistics/PeerDetailsPopup.tsx b/src/app/components/PeersStatistics/PeerDetailsPopup.tsx
index 394468d..f1adfab 100644
--- a/src/app/components/PeersStatistics/PeerDetailsPopup.tsx
+++ b/src/app/components/PeersStatistics/PeerDetailsPopup.tsx
@@ -97,6 +97,7 @@ export const PeerDetailsPopup = ({ peerId, onClose, ...props }: PeerDetailsPopup
 				<thead></thead>
 				<tbody>
 					{renderMainInfoRow("ID", peer.id)}
+					{renderMainInfoRow("Name", peer.name)}
 					{renderMainInfoRow("protocols", peer.protocols)}
 					{renderMainInfoRow("enr", peer.enr)}
 					{renderMainInfoRow("Enode", peer.enode)}
@@ -128,9 +129,9 @@ export const PeerDetailsPopup = ({ peerId, onClose, ...props }: PeerDetailsPopup
 	return (
 		<>
 			<div className="justify-center items-center flex overflow-x-hidden overflow-y-auto inset-0 z-50 outline-none focus:outline-none absolute bg-black/[.4]">
-				<div className="relative w-auto my-6 mx-auto max-w-3xl">
+				<div className="">
 					{/*content*/}
-					<div className="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none items-center">
+					<div className="border-0 rounded-lg shadow-lg relative flex flex-col w-max bg-white outline-none focus:outline-none items-center">
 						{/*header*/}
 						<h3 className="text-3xl font-semibold mt-5">Peer Details</h3>
 						{/*body*/}
diff --git a/src/app/components/PeersStatistics/PeerDetailsTable.tsx b/src/app/components/PeersStatistics/PeerDetailsTable.tsx
index 535a73f..25695e7 100644
--- a/src/app/components/PeersStatistics/PeerDetailsTable.tsx
+++ b/src/app/components/PeersStatistics/PeerDetailsTable.tsx
@@ -7,6 +7,7 @@ import SortIcon from "@mui/icons-material/Sort";
 
 enum SortColumn {
 	Id = "Id",
+	Name = "Name",
 	Type = "Type",
 	Status = "Status",
 	TotalIn = "TotalIn",
@@ -41,6 +42,8 @@ export const PeersDetailsTable = ({ peers, onPeerClicked }: PeersDetailsTablePro
 		let sortedPeers = prs.sort((a, b) => {
 			if (sotOpt.column === SortColumn.Id) {
 				return compareStrings(a.id, b.id, sotOpt.descending);
+			} else if (sotOpt.column === SortColumn.Name) {
+				return compareStrings(a.name, b.name, sotOpt.descending);
 			} else if (sotOpt.column === SortColumn.Type) {
 				return compareStrings(a.type, b.type, sotOpt.descending);
 			} else if (sotOpt.column === SortColumn.Status) {
@@ -100,7 +103,7 @@ export const PeersDetailsTable = ({ peers, onPeerClicked }: PeersDetailsTablePro
 
 	return (
 		<div className="flex flex-col shadow-lg rounded-md p-2 bg-white min-h-[40px] max-h-[83vh] w-full overflow-auto">
-			<table className="table-fixed text-left w-full">
+			<table className="table-auto text-left w-full">
 				<thead>
 					<tr className="border-b">
 						<th
@@ -117,6 +120,20 @@ export const PeersDetailsTable = ({ peers, onPeerClicked }: PeersDetailsTablePro
 								{getArrowIcon(SortColumn.Id)}
 							</div>
 						</th>
+						<th
+							className="px-4 py-2 cursor-pointer"
+							onClick={() => {
+								sortPeers(visiblePeers, {
+									column: SortColumn.Name,
+									descending: !currentSortState.descending
+								});
+							}}
+						>
+							<div className="flex flex-row">
+								peer Name
+								{getArrowIcon(SortColumn.Name)}
+							</div>
+						</th>
 						<th
 							className="px-4 py-2 cursor-pointer"
 							onClick={() => {
@@ -214,6 +231,7 @@ export const PeersDetailsTable = ({ peers, onPeerClicked }: PeersDetailsTablePro
 								}}
 							>
 								<td className="px-4 py-2 overflow-hidden text-ellipsis">{peer.id}</td>
+								<td className="px-4 py-2 overflow-hidden text-ellipsis">{peer.name}</td>
 								<td className="px-4 py-2 overflow-hidden text-ellipsis">{getPeerType(peer)}</td>
 								<td className="px-4 py-2 overflow-hidden text-ellipsis">{peer.active ? "active" : ""}</td>
 								<td className="px-4 py-2 overflow-hidden text-ellipsis">{multipleBytes(peer.network.bytesIn)}</td>