Merge pull request #22 from erigontech/nbu

first phase of pprof finished
erigontech · Sep 27, 2024 · 68ae16e · 68ae16e
2 parents 68321cd + 6a6bc95
commit 68ae16e
Show file tree

Hide file tree

Showing 9 changed files with 1,115 additions and 876 deletions.
diff --git a/build/assets/index-a49ffd6a.js b/build/assets/index-a49ffd6a.js
diff --git a/build/assets/index-c18fa29d.js b/build/assets/index-c18fa29d.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-a49ffd6a.js"></script>
+    <script type="module" crossorigin src="/assets/index-c18fa29d.js"></script>
     <link rel="stylesheet" href="/assets/index-88ada089.css">
   </head>
   <body>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,13 +10,16 @@
     "lint": "yarn lint:format && yarn lint:fix ",
     "type-check": "tsc",
     "test": "vitest",
-    "test-cov": "vitest --coverage"
+    "test-cov": "vitest --coverage",
+    "start": "react-scripts --max_old_space_size=4096 start",
+    "predeploy": "react-scripts --max_old_space_size=4096 build"
   },
   "dependencies": {
     "@mui/icons-material": "^5.14.3",
     "@mui/material": "^5.14.5",
     "@reduxjs/toolkit": "^1.9.5",
     "axios": "^1.7.4",
+    "graphviz-react": "^1.2.5",
     "react": "^18.2.0",
     "react-csv": "^2.2.2",
     "react-dom": "^18.2.0",
@@ -56,4 +59,4 @@
   },
   "pre-commit": "lint",
   "license": "MIT"
-}
+}
diff --git a/src/app/pages/ProfilePage.tsx b/src/app/pages/ProfilePage.tsx
@@ -1,7 +1,6 @@
 import { useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
 import { Button, CircularProgress } from "@mui/material";
-import axios from "axios";
-import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";
 import {
 	allocsProfileUrl,
 	blockProfileUrl,
@@ -10,38 +9,42 @@ import {
 	mutexProfileUrl,
 	threadCreateProfileUrl
 } from "../../Network/APIHandler";
+import { Graphviz } from "graphviz-react";
+import { addProfile, selectAllProfileDataForNode } from "../store/profileSlice";
+import { selectActiveNodeId } from "../store/appSlice";
 
 export interface ProfilePageProps {
 	profile: string;
 }
 
 export const ProfilePage = ({ profile }: ProfilePageProps) => {
+	const dispatch = useDispatch();
+
 	const [imagesMap, setImagesMap] = useState<Map<string, string>>(new Map());
 	const [loading, setLoading] = useState<boolean>(false);
+	const activeNodeId = useSelector(selectActiveNodeId);
+	const profileData = useSelector(selectAllProfileDataForNode);
+	const [selectedProfile, setSelectedProfile] = useState<string>("");
 
 	const getFunction = async () => {
 		try {
-			const resp = await axios.get(getFetchUrl(), {
-				onDownloadProgress: (progressEvent) => {
-					let eventObj: XMLHttpRequest | undefined = undefined;
-					if (progressEvent.event?.currentTarget) {
-						eventObj = progressEvent.event?.currentTarget;
-					} else if (progressEvent.event?.srcElement) {
-						eventObj = progressEvent.event?.srcElement;
-					} else if (progressEvent.event?.target) {
-						eventObj = progressEvent.event?.target;
-					}
-					if (!eventObj) return;
+			var xhr = new XMLHttpRequest();
+			xhr.open("GET", getFetchUrl(), true);
+			xhr.onreadystatechange = function () {
+				if (xhr.readyState === 4 && xhr.status === 200) {
+					setLoading(false);
+					imagesMap.set(profile, xhr.responseText);
+
+					dispatch(addProfile({ nodeId: activeNodeId, profileName: profile, data: xhr.responseText }));
 				}
-			});
-			setLoading(false);
-			imagesMap.set(profile, resp.data);
+			};
+			xhr.send();
 		} catch (error) {
 			setLoading(false);
 			console.error(error);
 		}
 	};
-
+	``;
 	const getFetchUrl = () => {
 		switch (profile) {
 			case "heap":
@@ -68,10 +71,54 @@ export const ProfilePage = ({ profile }: ProfilePageProps) => {
 		return str[0].toUpperCase() + str.slice(1);
 	};
 
+	const decodeBase64 = (base64: string): string => {
+		return atob(base64);
+	};
+
+	const graphHeight = window.innerHeight * 0.8;
+	const graphWidth = window.innerWidth * 0.8;
+
+	const profileDataForProfile = profileData.find((pdata) => pdata.name === profile);
+
+	const renderHistory = () => {
+		return (
+			<div>
+				<table className="table-auto bg-white text-left">
+					<tr className="border-b border-gray-200">
+						<th>Profile snapshot</th>
+					</tr>
+					{profileDataForProfile?.profile.map((data) => {
+						return (
+							<tr
+								className="border-b border-gray-200 cursor-pointer"
+								onClick={() => {
+									selectProfile(profileDataForProfile.profile.indexOf(data));
+								}}
+							>
+								<td>{data.date}</td>
+							</tr>
+						);
+					})}
+				</table>
+			</div>
+		);
+	};
+
+	const selectProfile = (idx: number) => {
+		if (profileDataForProfile?.profile.length === 0) {
+			return setSelectedProfile("");
+		}
+		return setSelectedProfile(profileDataForProfile?.profile[idx]?.data || "");
+	};
+
 	return (
 		<div className="flex flex-col h-full">
+			<div className="flex justify-center">
+				<h3 className="text-xl font-semibold">{capitalizeFirstLetter(profile) + " Profile"}</h3>
+			</div>
 			<div className="flex flex-row justify-between">
 				<div className="w-[15%]">
+					{renderHistory()}
 					{loading ? (
 						<CircularProgress />
 					) : (
@@ -87,22 +134,14 @@ export const ProfilePage = ({ profile }: ProfilePageProps) => {
 						</Button>
 					)}
 				</div>
-				<div className="w-[15%]">
-					<h3 className="text-xl font-semibold">{capitalizeFirstLetter(profile) + " Profile"}</h3>
+				<div className="mt-5 mr-5 mb-5">
+					{selectedProfile != "" && (
+						<Graphviz
+							dot={decodeBase64(selectedProfile)}
+							options={{ fit: true, zoom: true, height: graphHeight, width: graphWidth }}
+						/>
+					)}
 				</div>
-				<div className="w-[15%]" />
-			</div>
-			<div className="mt-5 mr-5 mb-5">
-				{imagesMap.get(profile) && (
-					<TransformWrapper>
-						<TransformComponent>
-							<img
-								src={`data:image/png;base64,${imagesMap.get(profile)}`}
-								alt="test"
-							/>
-						</TransformComponent>
-					</TransformWrapper>
-				)}
 			</div>
 		</div>
 	);

diff --git a/src/app/store/SystemInfoSlice.ts b/src/app/store/SystemInfoSlice.ts
@@ -115,6 +115,10 @@ export const systemInfoSlice = createSlice({
 			}
 		},
 		addOrUpdateCPUInfo: (state, action: PayloadAction<{ info: CPUInfo[]; nodeId: string }>) => {
+			if (!state.cpuInfo) {
+				state.cpuInfo = [];
+			}
+
 			let nodeIdx = state.cpuInfo.findIndex((issue) => issue.nodeId === action.payload.nodeId);
 			if (nodeIdx !== -1) {
 				state.cpuInfo[nodeIdx].info = action.payload.info;