From cc53822b7c58acceb48f6840a48562bf862be175 Mon Sep 17 00:00:00 2001 From: Shubh942 <93862397+Shubh942@users.noreply.github.com> Date: Thu, 8 Aug 2024 14:37:39 +0530 Subject: [PATCH 1/4] Feat: Connected adding breakpoints with server And also added toast functionality to infrom the user --- webapp/package-lock.json | 34 ++++++++++ webapp/package.json | 1 + .../src/components/Breakpoint/Breakpoint.css | 10 +++ .../src/components/Breakpoint/Breakpoint.jsx | 64 ++++++++++++++++++- webapp/src/context/DataContext.jsx | 3 - 5 files changed, 106 insertions(+), 6 deletions(-) diff --git a/webapp/package-lock.json b/webapp/package-lock.json index 06f6a8b..1dc71e5 100644 --- a/webapp/package-lock.json +++ b/webapp/package-lock.json @@ -14,6 +14,7 @@ "react-icons": "^5.2.1", "react-router-dom": "^6.23.1", "react-terminal": "^1.4.4", + "react-toastify": "^10.0.5", "react-toggle-dark-mode": "^1.1.1", "terminal-in-react": "^4.3.1" }, @@ -7022,6 +7023,14 @@ "node": ">=6" } }, + "node_modules/clsx": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", + "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==", + "engines": { + "node": ">=6" + } + }, "node_modules/color-convert": { "version": "1.9.3", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", @@ -12862,6 +12871,18 @@ "react-dom": "^18.2.0" } }, + "node_modules/react-toastify": { + "version": "10.0.5", + "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-10.0.5.tgz", + "integrity": "sha512-mNKt2jBXJg4O7pSdbNUfDdTsK9FIdikfsIE/yUCxbAEXl4HMyJaivrVFcn3Elvt5xvCQYhUZm+hqTIu1UXM3Pw==", + "dependencies": { + "clsx": "^2.1.0" + }, + "peerDependencies": { + "react": ">=18", + "react-dom": ">=18" + } + }, "node_modules/react-toggle-dark-mode": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/react-toggle-dark-mode/-/react-toggle-dark-mode-1.1.1.tgz", @@ -20042,6 +20063,11 @@ "shallow-clone": "^3.0.0" } }, + "clsx": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", + "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==" + }, "color-convert": { "version": "1.9.3", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", @@ -24416,6 +24442,14 @@ "react-device-detect": "2.1.2" } }, + "react-toastify": { + "version": "10.0.5", + "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-10.0.5.tgz", + "integrity": "sha512-mNKt2jBXJg4O7pSdbNUfDdTsK9FIdikfsIE/yUCxbAEXl4HMyJaivrVFcn3Elvt5xvCQYhUZm+hqTIu1UXM3Pw==", + "requires": { + "clsx": "^2.1.0" + } + }, "react-toggle-dark-mode": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/react-toggle-dark-mode/-/react-toggle-dark-mode-1.1.1.tgz", diff --git a/webapp/package.json b/webapp/package.json index 99b36d1..b9b5dd6 100644 --- a/webapp/package.json +++ b/webapp/package.json @@ -19,6 +19,7 @@ "react-icons": "^5.2.1", "react-router-dom": "^6.23.1", "react-terminal": "^1.4.4", + "react-toastify": "^10.0.5", "react-toggle-dark-mode": "^1.1.1", "terminal-in-react": "^4.3.1" }, diff --git a/webapp/src/components/Breakpoint/Breakpoint.css b/webapp/src/components/Breakpoint/Breakpoint.css index be6bc8e..0854cf5 100644 --- a/webapp/src/components/Breakpoint/Breakpoint.css +++ b/webapp/src/components/Breakpoint/Breakpoint.css @@ -28,3 +28,13 @@ align-items: center; gap: 28px; } + +.save-button { + display: flex; + padding: 4px 8px; + justify-content: center; + align-items: center; + gap: 10px; + border-radius: 2px; + background: var(--primary-orange, #e88f40); +} diff --git a/webapp/src/components/Breakpoint/Breakpoint.jsx b/webapp/src/components/Breakpoint/Breakpoint.jsx index 754785b..09fa198 100644 --- a/webapp/src/components/Breakpoint/Breakpoint.jsx +++ b/webapp/src/components/Breakpoint/Breakpoint.jsx @@ -1,20 +1,78 @@ -import React from "react"; +import React, { useState } from "react"; import "./Breakpoint.css"; +import { ToastContainer, toast } from "react-toastify"; +import "react-toastify/dist/ReactToastify.css"; +import axios from "axios"; + const Breakpoint = () => { + const [breakLine, setBreakLine] = useState(""); + const [breakFunction, setBreakFunction] = useState(""); + + const handleBreakSave = async (e) => { + e.preventDefault(); + console.log("click"); + if (!breakLine && !breakFunction) { + toast.error("Enter any of the field", { + autoClose: 1000, + }); + return; + } + try { + const data = await axios.post("http://127.0.0.1:10000/set_breakpoint", { + location: breakLine, + name: "program", + }); + console.log(data); + toast.success("Added breakpoint", { + autoClose: 1000, + }); + } catch (error) { + toast.error("Something went Wrong", { + autoClose: 1000, + }); + } + }; return (
Add Breakpoint
Line - + setBreakLine(e.target.value)} + />
Function - + setBreakFunction(e.target.value)} + />
+
+
); }; diff --git a/webapp/src/context/DataContext.jsx b/webapp/src/context/DataContext.jsx index 492ec9c..cb183ac 100644 --- a/webapp/src/context/DataContext.jsx +++ b/webapp/src/context/DataContext.jsx @@ -17,18 +17,15 @@ export const DataProvider = ({ children }) => { const fetchData = useCallback(async () => { if (refresh) { try { - // Your data fetching logic here const stackResponse = await axios.get("/api/stack"); const functionsResponse = await axios.get("/api/functions"); setStack(stackResponse.data); setFunctions(functionsResponse.data); - // Reset refresh after data is fetched setRefresh(false); } catch (error) { console.error("Error fetching data:", error); - // Optional: set refresh to false on error as well setRefresh(false); } } From 3fc45a360d8783f3e9bfe15e07c3496da8fedba8 Mon Sep 17 00:00:00 2001 From: Shubh942 <93862397+Shubh942@users.noreply.github.com> Date: Thu, 8 Aug 2024 17:19:25 +0530 Subject: [PATCH 2/4] feature: connected info breakpoints and memory map with server --- .../src/components/Breakpoint/Breakpoint.jsx | 1 - .../GdbComponents/BreakPoints/BreakPoints.jsx | 26 ++++++++++++++++--- .../GdbComponents/MemoryMap/MemoryMap.jsx | 24 +++++++++++++++-- webapp/src/context/DataContext.jsx | 15 ++++++++++- 4 files changed, 59 insertions(+), 7 deletions(-) diff --git a/webapp/src/components/Breakpoint/Breakpoint.jsx b/webapp/src/components/Breakpoint/Breakpoint.jsx index 09fa198..e556444 100644 --- a/webapp/src/components/Breakpoint/Breakpoint.jsx +++ b/webapp/src/components/Breakpoint/Breakpoint.jsx @@ -11,7 +11,6 @@ const Breakpoint = () => { const handleBreakSave = async (e) => { e.preventDefault(); - console.log("click"); if (!breakLine && !breakFunction) { toast.error("Enter any of the field", { autoClose: 1000, diff --git a/webapp/src/components/GdbComponents/BreakPoints/BreakPoints.jsx b/webapp/src/components/GdbComponents/BreakPoints/BreakPoints.jsx index 956c8bb..70aff64 100644 --- a/webapp/src/components/GdbComponents/BreakPoints/BreakPoints.jsx +++ b/webapp/src/components/GdbComponents/BreakPoints/BreakPoints.jsx @@ -1,5 +1,7 @@ -import React from "react"; +import React, { useEffect, useState } from "react"; +import { DataState } from "./../../../context/DataContext"; import "./BreakPoints.css"; +import axios from "axios"; const data = [ { @@ -21,11 +23,28 @@ const data = [ ]; const BreakPoints = () => { + const { refresh, setInfoBreakpointData, infoBreakpointData } = DataState(); + + const fetchInfoBreakpoints = async () => { + const data = await axios.post("http://127.0.0.1:10000/info_breakpoints", { + name: "program", + }); + console.log(data.data["result"]); + setInfoBreakpointData(data.data["result"]); + }; + useEffect(() => { + if (refresh) { + console.log("click from breakpoint in GdbComponents"); + fetchInfoBreakpoints(); + } + }, [refresh]); return (
{/* BreakPoints */}
- {data?.length > 0 + {infoBreakpointData + ? infoBreakpointData + : data?.length > 0 ? data.map((obj) => { return (
@@ -34,7 +53,8 @@ const BreakPoints = () => {
); }) - : ""} + : infoBreakpointData} + {}
); diff --git a/webapp/src/components/GdbComponents/MemoryMap/MemoryMap.jsx b/webapp/src/components/GdbComponents/MemoryMap/MemoryMap.jsx index 9a8b5a7..ef52249 100644 --- a/webapp/src/components/GdbComponents/MemoryMap/MemoryMap.jsx +++ b/webapp/src/components/GdbComponents/MemoryMap/MemoryMap.jsx @@ -1,5 +1,8 @@ -import React from "react"; +import React, { useEffect } from "react"; +import { DataState } from "./../../../context/DataContext"; + import "./MemoryMap.css"; +import axios from "axios"; const data = [ "0x7fffffffe270: 0x00 0x00 0x00 0x00 0x00 0x00 0x00 0x00", @@ -12,11 +15,28 @@ const data = [ "0x7fffffffe270: 0x00 0x00 0x00 0x00 0x00 0x00 0x00 0x00", ]; const MemoryMap = () => { + const { refresh, memoryMap, setMemoryMap } = DataState(); + + const fetchMemoryMap = async () => { + console.log("Click form memory map"); + const data = await axios.post("http://127.0.0.1:10000/memory_map", { + name: "program", + }); + console.log(data.data.result); + setMemoryMap(data.data.result); + }; + + useEffect(() => { + if (refresh) fetchMemoryMap(); + }, [refresh]); + return (
{/* MemoryMap */}
- {data?.length > 0 + {memoryMap + ? memoryMap + : data?.length > 0 ? data.map((obj) => { return {obj}; }) diff --git a/webapp/src/context/DataContext.jsx b/webapp/src/context/DataContext.jsx index cb183ac..39de92e 100644 --- a/webapp/src/context/DataContext.jsx +++ b/webapp/src/context/DataContext.jsx @@ -13,6 +13,8 @@ export const DataProvider = ({ children }) => { const [refresh, setRefresh] = useState(false); const [stack, setStack] = useState([]); const [functions, setFunctions] = useState([]); + const [infoBreakpointData, setInfoBreakpointData] = useState(""); + const [memoryMap, setMemoryMap] = useState(""); const fetchData = useCallback(async () => { if (refresh) { @@ -36,7 +38,18 @@ export const DataProvider = ({ children }) => { }, [fetchData]); return ( - + {children} ); From 9301a03af3d96b1b338eeb9f439e6b3c6ed922ed Mon Sep 17 00:00:00 2001 From: Shubh942 <93862397+Shubh942@users.noreply.github.com> Date: Thu, 8 Aug 2024 18:58:53 +0530 Subject: [PATCH 3/4] feat: Connected stack and functions with server. --- webapp/src/components/Functions/Functions.jsx | 60 +++++++++++++------ webapp/src/components/Stack/Stack.jsx | 26 ++++++-- webapp/src/context/DataContext.jsx | 8 +-- 3 files changed, 65 insertions(+), 29 deletions(-) diff --git a/webapp/src/components/Functions/Functions.jsx b/webapp/src/components/Functions/Functions.jsx index 8629d4e..308571b 100644 --- a/webapp/src/components/Functions/Functions.jsx +++ b/webapp/src/components/Functions/Functions.jsx @@ -1,29 +1,53 @@ -import React from "react"; +import React, { useEffect } from "react"; +import { DataState } from "./../../context/DataContext"; import "./Functions.css"; +import axios from "axios"; + +const data = [ + "sub.KERNEL32.dll_DeleteCritical_231", + "sub.KERNEL32.dll_DeleteCritical_231", + "sub.KERNEL32.dll_DeleteCritical_231", + "sub.KERNEL32.dll_DeleteCritical_231", + "sub.KERNEL32.dll_DeleteCritical_231", + "sub.KERNEL32.dll_DeleteCritical_231", + "sub.KERNEL32.dll_DeleteCritical_231", + "sub.KERNEL32.dll_DeleteCritical_231", + "sub.KERNEL32.dll_DeleteCritical_231", + "sub.KERNEL32.dll_DeleteCritical_231", +]; const Functions = () => { + const { refresh, functions, setFunctions } = DataState(); + + const fetchFunctionsData = async () => { + try { + console.log("click from functions"); + const data = await axios.post("http://127.0.0.1:10000/get_locals", { + name: "program", + }); + console.log(data.data.result); + setFunctions(data.data.result); + } catch (error) { + console.log(error); + } + }; + + useEffect(() => { + if (refresh) { + fetchFunctionsData(); + } + }, [refresh]); + return (
Functions offset
- sub.KERNEL32.dll_DeleteCritical_231 - sub.KERNEL32.dll_DeleteCritical_231 - sub.KERNEL32.dll_DeleteCritical_231 - sub.KERNEL32.dll_DeleteCritical_231 - sub.KERNEL32.dll_DeleteCritical_231 - sub.KERNEL32.dll_DeleteCritical_231 - sub.KERNEL32.dll_DeleteCritical_231 - sub.KERNEL32.dll_DeleteCritical_231 - sub.KERNEL32.dll_DeleteCritical_231 - sub.KERNEL32.dll_DeleteCritical_231 - sub.KERNEL32.dll_DeleteCritical_231 - sub.KERNEL32.dll_DeleteCritical_231 - sub.KERNEL32.dll_DeleteCritical_231 - sub.KERNEL32.dll_DeleteCritical_231 - sub.KERNEL32.dll_DeleteCritical_231 - sub.KERNEL32.dll_DeleteCritical_231 - sub.KERNEL32.dll_DeleteCritical_231 + {functions} + {data.map((obj) => { + return {obj}; + })} + {/* sub.KERNEL32.dll_DeleteCritical_231 */}
); diff --git a/webapp/src/components/Stack/Stack.jsx b/webapp/src/components/Stack/Stack.jsx index 78c966b..654f527 100644 --- a/webapp/src/components/Stack/Stack.jsx +++ b/webapp/src/components/Stack/Stack.jsx @@ -1,16 +1,32 @@ -import React from "react"; +import React, { useEffect } from "react"; +import { DataState } from "./../../context/DataContext"; import "./Stack.css"; +import axios from "axios"; const Stack = () => { + const { refresh, stack, setStack } = DataState(); + + const fetStackData = async () => { + try { + console.log("click from stack"); + const data = await axios.post("http://127.0.0.1:10000/stack_trace", { + name: "program", + }); + console.log(data.data.result); + setStack(data.data.result); + } catch (error) { + console.log(error); + } + }; + useEffect(() => { + if (refresh) fetStackData(); + }, [refresh]); return (
Stack
Offset
-
0x001780c8 0x001780c8 0x001780c8 0x001780c8
-
0x001780c8 0x001780c8 0x001780c8 0x001780c8
-
0x001780c8 0x001780c8 0x001780c8 0x001780c8
-
0x001780c8 0x001780c8 0x001780c8 0x001780c8
+
{stack}
0x001780c8 0x001780c8 0x001780c8 0x001780c8
0x001780c8 0x001780c8 0x001780c8 0x001780c8
0x001780c8 0x001780c8 0x001780c8 0x001780c8
diff --git a/webapp/src/context/DataContext.jsx b/webapp/src/context/DataContext.jsx index 39de92e..ae79b43 100644 --- a/webapp/src/context/DataContext.jsx +++ b/webapp/src/context/DataContext.jsx @@ -19,12 +19,6 @@ export const DataProvider = ({ children }) => { const fetchData = useCallback(async () => { if (refresh) { try { - const stackResponse = await axios.get("/api/stack"); - const functionsResponse = await axios.get("/api/functions"); - - setStack(stackResponse.data); - setFunctions(functionsResponse.data); - setRefresh(false); } catch (error) { console.error("Error fetching data:", error); @@ -43,7 +37,9 @@ export const DataProvider = ({ children }) => { refresh, setRefresh, stack, + setStack, functions, + setFunctions, infoBreakpointData, setInfoBreakpointData, memoryMap, From 429b901bd68aa76ac880339b09fdbd1a1c77928a Mon Sep 17 00:00:00 2001 From: Shubh942 <93862397+Shubh942@users.noreply.github.com> Date: Sat, 10 Aug 2024 14:20:19 +0530 Subject: [PATCH 4/4] chores: updated testcase --- .../Functions/__tests__/Functions.test.jsx | 17 ++++++++++++++--- .../components/Stack/__tests__/Stack.test.jsx | 8 ++++++++ 2 files changed, 22 insertions(+), 3 deletions(-) diff --git a/webapp/src/components/Functions/__tests__/Functions.test.jsx b/webapp/src/components/Functions/__tests__/Functions.test.jsx index 085ae57..85bef10 100644 --- a/webapp/src/components/Functions/__tests__/Functions.test.jsx +++ b/webapp/src/components/Functions/__tests__/Functions.test.jsx @@ -1,11 +1,22 @@ import React from "react"; import { render, screen } from "@testing-library/react"; -import Functions from "../Functions.jsx"; // Adjust the import path as per your project structure +import Functions from "../Functions.jsx"; +import { vi } from "vitest"; -test("renders Functions component with correct heading and function names", () => { +vi.mock("../../../context/DataContext.jsx", () => ({ + DataState: () => ({ + refresh: false, + functions: [], + setFunctions: vi.fn(), + }), +})); + +test("renders Functions component with correct heading", () => { render(); - // Assert the presence of the heading const headingElement = screen.getByText(/Functions/i); expect(headingElement).toBeInTheDocument(); + + const functionElements = screen.queryAllByRole("link"); + expect(functionElements).toHaveLength(0); }); diff --git a/webapp/src/components/Stack/__tests__/Stack.test.jsx b/webapp/src/components/Stack/__tests__/Stack.test.jsx index 41e4dd1..321513b 100644 --- a/webapp/src/components/Stack/__tests__/Stack.test.jsx +++ b/webapp/src/components/Stack/__tests__/Stack.test.jsx @@ -2,6 +2,14 @@ import React from "react"; import { render, screen } from "@testing-library/react"; import Stack from "../Stack.jsx"; +vi.mock("../../../context/DataContext.jsx", () => ({ + DataState: () => ({ + refresh: false, + stack: [], + setStack: vi.fn(), + }), +})); + test("renders Stack component with stack items", () => { render();