updated downloader page

erigontech · dvovk · Oct 23, 2024 · Oct 23, 2024 · Oct 23, 2024 · 9af68cb67b7989e1dc0782350498ad4e74030cdb
commit 9af68cb67b7989e1dc0782350498ad4e74030cdb
diff --git a/build/assets/index-b2ebc55e.js b/build/assets/index-b2ebc55e.js
diff --git a/build/index.html b/build/index.html
@@ -5,7 +5,7 @@
     <link rel="icon" type="image/svg+xml" href="/assets/favicon-d3efd231.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>ErigonWatch</title>
-    <script type="module" crossorigin src="/assets/index-b2ebc55e.js"></script>
+    <script type="module" crossorigin src="/assets/index-a6c8980e.js"></script>
     <link rel="stylesheet" href="/assets/index-2dc825ae.css">
   </head>
   <body>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
   "dependencies": {
     "@mui/icons-material": "^5.14.3",
     "@mui/material": "^5.14.5",
+    "@mui/x-charts": "^7.21.0",
     "@reduxjs/toolkit": "^1.9.5",
     "axios": "^1.7.4",
     "graphviz-react": "^1.2.5",
@@ -34,6 +35,7 @@
     "@testing-library/jest-dom": "^6.1.1",
     "@testing-library/react": "^14.0.0",
     "@types/react": "^18.2.18",
+    "@types/react-csv": "^1.1.10",
     "@types/react-dom": "^18.2.7",
     "@types/react-lazylog": "^4.5.1",
     "@types/testing-library__jest-dom": "^6.0.0",
@@ -59,4 +61,4 @@
   },
   "pre-commit": "lint",
   "license": "MIT"
-}
+}
diff --git a/src/App.tsx b/src/App.tsx
@@ -43,7 +43,11 @@ import { PeerNetworkPage } from "./app/pages/PeerNetworkPage";
 import { PerformancePage } from "./app/pages/PerformancePage";
 //import raw from "./erigon.txt";
 //import statsjson from "./syncStats.json";
-import { resetSyncStagesState, selectShouldFetchSnapshotFilesListForActiveNode } from "./app/store/syncStagesSlice";
+import {
+	resetSyncStagesState,
+	selectSegmentPeersDiagDataForNode,
+	selectShouldFetchSnapshotFilesListForActiveNode
+} from "./app/store/syncStagesSlice";
 import { IssuesPage } from "./app/pages/IssuesPage";
 import { resetIssueState } from "./app/store/issuesSlice";
 import { isLocalVersion } from "./helpers/env";
@@ -199,6 +203,51 @@ function Layout() {
 		getBackendUrl();
 	}, []);
 
+	/*useEffect(() => {
+		fetch(raw)
+			.then((r) => r.text())
+			.then((text) => {
+				let arr = stringToArrayBySeparator(text, "\n");
+				let bbbb = filterStringsByPrefix(arr, "SyncStatistics");
+				let arrdddd: any[] = [];
+				bbbb.forEach((str) => {
+					let str2 = getStringByKeyFromString(str, "stats=");
+					let obj = JSON.parse(str2);
+					let obj2 = JSON.parse(obj);
+					arrdddd.push(obj2);
+					console.log(obj2);
+				});
+				saveObjectToFile(arrdddd, "syncStats");
+			});
+	}, []);
+
+	function saveObjectToFile(obj: any, filename: string) {
+		let dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(obj));
+		let downloadAnchorNode = document.createElement("a");
+		downloadAnchorNode.setAttribute("href", dataStr);
+		downloadAnchorNode.setAttribute("download", filename + ".json");
+		document.body.appendChild(downloadAnchorNode); // required for firefox
+		downloadAnchorNode.click();
+		downloadAnchorNode.remove();
+	}
+
+	function getStringByKeyFromString(str: string, key: string): string {
+		let result = "";
+		if (str.includes(key)) {
+			let arr = str.split(key);
+			result = arr[1];
+		}
+		return result;
+	}
+
+	function stringToArrayBySeparator(str: string, separator: string): string[] {
+		return str.split(separator);
+	}
+
+	function filterStringsByPrefix(arr: string[], prefix: string): string[] {
+		return arr.filter((str) => str.includes(prefix));
+	}*/
+
 	useEffect(() => {
 		if (conectionType !== NodeConnectionType.Unknown) {
 			if (isLocalVersion()) {
@@ -227,6 +276,8 @@ function Layout() {
 		}
 	}, [activeNodeId]);
 
+	const perrsdiagData = useSelector(selectSegmentPeersDiagDataForNode);
+
 	const queryData = () => {
 		getHardwareInfo();
 		getNodeCmdLineArgs();
@@ -244,7 +295,7 @@ function Layout() {
 		getSnapshotDownloadStatus();
 		setInterval(() => {
 			getSnapshotDownloadStatus();
-		}, 20 * Time.second);
+		}, 5 * Time.second);
 
 		setInterval(() => {
 			//checkForNoPeersForSnapshotSegment();

diff --git a/src/Network/APIHandler.tsx b/src/Network/APIHandler.tsx
@@ -17,11 +17,12 @@ import {
 	getHeadersMock,
 	getNetworkSpeedMock,
 	nodeInfoMock,
-	syncStatsMock,
 	snpDLmock
 } from "./../../tests/mocks";
 
 import { cpuUsageMock, hardwareInfoMock, memoryInfoMock, processesInfoMock } from "../../tests/sysinfo_mock";
+import { getSyncData } from "./mockData/SnapshotDownloadMock";
+import { setTestSnpSyncMsgIdx } from "../app/store/syncStagesSlice";
 
 const sessionVarName = "sessions";
 const nodeVarName = "nodes";
@@ -371,17 +372,17 @@ export const fetchBootnodes = () => {
 
 export const fetchSnapshotSync = () => {
 	if (import.meta.env.VITE_SERVER_RESPONSE_TYPE === "MOCK") {
+		//return new Promise((resolve, reject) => {
+		//	resolve(syncStatsMock);
+		//});
 		return new Promise((resolve, reject) => {
-			resolve(syncStatsMock);
-		});
-		/*return new Promise((resolve, reject) => {
 			let idx = store.getState().syncStages.testSnpSyncMsgIdx;
 			let resp = getSyncData(idx);
 			store.dispatch(setTestSnpSyncMsgIdx(idx + 1));
 			if (resp !== null) {
 				resolve(resp);
 			}
-		});*/
+		});
 	} else {
 		const request = createRequest(snapshotSyncUrl(), "GET");
 		return fetchRequest(request);

diff --git a/src/app/components/Flags/FlagsDetailsTable.tsx b/src/app/components/Flags/FlagsDetailsTable.tsx
@@ -7,7 +7,7 @@ interface FlagsDetailsTableProps {
 
 export const FlagsDetailsTable = ({ flags }: FlagsDetailsTableProps) => {
 	return (
-		<div className="flex flex-col shadow-lg rounded-md p-2 bg-white min-h-[40px] max-h-[500px] max-w-[1400px] min-w-[30vw] overflow-auto">
+		<div className="flex flex-col shadow-lg rounded-md p-2 bg-white min-h-[40px] max-h-[500px] min-w-[30vw] overflow-auto">
 			<table
 				className="table-auto rounded-lg bg-white text-left"
 				data-testid="details_section_flags_table"

diff --git a/src/app/components/SyncStages/TorrentPeersDetailsPopup.tsx b/src/app/components/SyncStages/TorrentPeersDetailsPopup.tsx
@@ -1,22 +1,41 @@
 import { useSelector } from "react-redux";
-import { useEffect } from "react";
-import { selectTorrrentPeersForNode } from "../../store/syncStagesSlice";
+import { useEffect, useState } from "react";
+import { SegmentPeerDiagData, selectSegmentPeersDiagDataForNode, selectTorrrentPeersForNode } from "../../store/syncStagesSlice";
 import CloseIcon from "@mui/icons-material/Close";
 import { TorrentPeersTable } from "./TorrentPeersTable";
+import { TorrentPeersHistory } from "./TorrentPeerHistory";
+import { PeerIdToString } from "../../../helpers/converters";
+import ArrowBackIcon from "@mui/icons-material/ArrowBack";
 
 interface TorrentPeersDetailsPopupProps {
 	onClose: () => void;
 }
 
 export const TorrentPeersDetailsPopup = ({ onClose }: TorrentPeersDetailsPopupProps) => {
 	const peers = useSelector(selectTorrrentPeersForNode);
+	const perrsdiagData = useSelector(selectSegmentPeersDiagDataForNode);
+
+	const [selectedPeer, setSelectedPeer] = useState<SegmentPeerDiagData | undefined>(undefined);
 
 	const handleKeyPress = (event: KeyboardEvent) => {
 		if (event.key === "Escape") {
-			onClose();
+			console.log("selectedPeer", selectedPeer);
+
+			if (selectedPeer !== undefined) {
+				console.log("setSelectedPeer");
+				setSelectedPeer(undefined);
+			} else {
+				onClose();
+			}
 		}
 	};
 
+	const findPeerById = (peerId: string): SegmentPeerDiagData | undefined => {
+		return perrsdiagData.find((peer) => {
+			return peer.peerId === peerId;
+		});
+	};
+
 	useEffect(() => {
 		window.addEventListener("keydown", handleKeyPress);
 
@@ -25,12 +44,35 @@ export const TorrentPeersDetailsPopup = ({ onClose }: TorrentPeersDetailsPopupPr
 		};
 	}, []);
 
+	useEffect(() => {
+		console.log("peers changed");
+		selectedPeer && setSelectedPeer(findPeerById(selectedPeer.peerId));
+	}, [peers]);
+
+	const convertPid = (pid: string): string => {
+		let arr = pid.split(",");
+		let nums = arr.map((num) => parseInt(num));
+
+		let res = PeerIdToString(nums);
+		return res;
+	};
+
 	const renderHeader = () => {
 		return (
 			<div className="flex flex-row w-full pt-10 pr-10 pl-10">
-				<div className="flex-[1]"></div>
+				<div className="flex-[1]">
+					{selectedPeer && (
+						<ArrowBackIcon
+							onClick={() => {
+								console.log("setSelectedPeer 1");
+								setSelectedPeer(undefined);
+							}}
+							className="cursor-pointer"
+						/>
+					)}
+				</div>
 				<div className="flex flex-[2] justify-center">
-					<h3 className="text-3xl font-semibold">Peers list</h3>
+					<h3 className="text-3xl font-semibold">{selectedPeer ? convertPid(selectedPeer.peerId) : "Peers list"}</h3>
 				</div>
 				<div className="flex flex-[1] justify-end">
 					<CloseIcon
@@ -42,37 +84,6 @@ export const TorrentPeersDetailsPopup = ({ onClose }: TorrentPeersDetailsPopupPr
 		);
 	};
 
-	const bytesToString = (bts: number[]): string => {
-		//let s = bytes.map((byte) => String.fromCharCode(byte)).join("");
-		const bytes = new Uint8Array(bts);
-		let res = toString(bytes);
-		return res;
-	};
-
-	function toString(id: Uint8Array): string {
-		// Equivalent of the Go code checking `me[0] == '-' && me[7] == '-'`
-		if (id[0] === 45 && id[7] === 45) {
-			// 45 is the ASCII code for '-'
-			//return byteArrayToString(id.slice(0, 8)) + byteArrayToHex(id.slice(8));
-			return byteArrayToHex(id.slice(8));
-		}
-
-		// Hex encoding of the entire array if no condition is met
-		return byteArrayToHex(id);
-	}
-
-	// Helper function to convert byte array to string
-	function byteArrayToString(bytes: Uint8Array): string {
-		return new TextDecoder().decode(bytes);
-	}
-
-	// Helper function to convert byte array to hex string
-	function byteArrayToHex(bytes: Uint8Array): string {
-		return Array.from(bytes)
-			.map((b) => b.toString(16).padStart(2, "0"))
-			.join("");
-	}
-
 	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]">
@@ -83,11 +94,19 @@ export const TorrentPeersDetailsPopup = ({ onClose }: TorrentPeersDetailsPopupPr
 						{renderHeader()}
 						{/*body*/}
 						<div className="flex flex-col relative p-6 flex-auto justify-start items-center h-[75vh] overflow-scroll">
-							<TorrentPeersTable
-								peers={peers}
-								peerSelected={false}
-								onPeerClicked={() => {}}
-							/>
+							{selectedPeer ? (
+								<TorrentPeersHistory peer={selectedPeer} />
+							) : (
+								<TorrentPeersTable
+									peers={peers}
+									peerSelected={false}
+									onPeerClicked={(peer) => {
+										let res = findPeerById(peer.peerId.toString());
+										console.log("res", res);
+										setSelectedPeer(res);
+									}}
+								/>
+							)}
 						</div>
 						{/*footer*/}
 					</div>