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..e556444 100644 --- a/webapp/src/components/Breakpoint/Breakpoint.jsx +++ b/webapp/src/components/Breakpoint/Breakpoint.jsx @@ -1,20 +1,77 @@ -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(); + 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/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/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/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/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/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(); diff --git a/webapp/src/context/DataContext.jsx b/webapp/src/context/DataContext.jsx index 492ec9c..ae79b43 100644 --- a/webapp/src/context/DataContext.jsx +++ b/webapp/src/context/DataContext.jsx @@ -13,22 +13,15 @@ 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) { 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); } } @@ -39,7 +32,20 @@ export const DataProvider = ({ children }) => { }, [fetchData]); return ( - + {children} );