webuipoc: layout of history panel

addOns/webuipoc/src/main/pocs/reactWebUI/src/App.js

@@ -4,8 +4,9 @@ import Sidebar from "./Components/Sidebar/Sidebar";
 import HeaderBase from "./Components/Header/HeaderBase";
 import SideTree from "./Components/SitesTree/SitesTree";
 import RequestBar from "./Components/Request-Response/Req-Resp-Bar";
-import { sendChildNode } from "./Utilities/requests";
 import SearchBar from "./Components/SearchBar/SearchBar";
+import History from "./Components/History/History";
+
 
 const App = () => {
   const [darkMode, setDarkMode] = useState(false);
@@ -26,28 +27,11 @@ const App = () => {
       <SideTree />
       <div className="w-full bg-gray-600 text-white dark:text-black">
         <SearchBar />
-        <div className="h-[400px]  mr-2 ml-2 bg-gray-800 dark:bg-gray-300 rounded-lg ">
-          <div className="flex flex-row text-center justify-center ">
-            <div className=" w-1/3 p-4 font-serif text-center ">
-              ID | Method | Host | Path | URI
-            </div>
-          </div>
-          <div className="flex flex-row  justify-center text-center">
-            <div className=" p-4">
-              <p className="font-mono "></p>
-              {/* {childNode &&
-                childNode.map((node) => (
-                  <p className="" key={childNode}>
-                    {node.hrefId}
-                  </p>
-                ))} */}
-            </div>
-          </div>
-        </div>
-
         <RequestBar />
-      </div>
-    </div>
+        <History />
+
+   </div>
+   </div>
   );
 };
 

addOns/webuipoc/src/main/pocs/reactWebUI/src/Components/History/History.jsx

@@ -0,0 +1,68 @@
+import React, { useState, useEffect } from "react";
+import {sendHistory} from "../../Utilities/history"
+
+
+const History = () => {
+  const [history, setHistory] = useState(null)
+
+
+  useEffect(() => {
+      const fetchData = async () => {
+        try {
+          const response = await sendHistory();
+          setHistory(response);
+        } catch (error) {
+          console.error("Error fetching data:", error);
+        }
+      };
+
+      fetchData();
+    }, []);
+
+return (
+  <div className="h-[496px]  mr-2 ml-2 mt-2 bg-gray-800 rounded-lg overflow-auto">
+  <div className="flex flex-row text-center justify-center ">
+    <div className=" w-1/3 p-4 font-serif text-center ">
+    History
+    </div>
+  </div>
+  <div className="w-full overflow-auto">
+  <div className="overflow-x-auto">
+    <table className="min-w-full bg-gray-700 text-white">
+      <thead className="bg-gray-800 text-white sticky top-0">
+
+
+          <tr>
+            <th className="py-3 px-4 border-b">ID</th>
+            <th className="py-3 px-4 border-b">Method</th>
+            <th className="py-3 px-4 border-b">Date & Time</th>
+            <th className="py-3 px-4 border-b">URL</th>
+            <th className="py-3 px-4 border-b">Code</th>
+            <th className="py-3 px-4 border-b">Reason</th>
+            <th className="py-3 px-4 border-b">Size</th>
+
+          </tr>
+        </thead>
+        <tbody>
+       {
+        history?.log?.entries?.map((historyElement) => (
+          <tr className="">
+          <td className="py-3 px-4">{historyElement._zapMessageId}</td>
+          <td className="py-3 px-4">{historyElement.request?.method}</td>
+          <td className="py-3 px-4">{historyElement.startedDateTime}</td>
+          <td className="py-3 px-4">{historyElement.request?.url}</td>
+          <td className="py-3 px-4">{historyElement.response?.status}</td>
+          <td className="py-3 px-4">{historyElement.response?.statusText}</td>
+          <td className="py-3 px-4">{historyElement.response?.bodySize} bytes</td>
+        </tr>
+                  )) }
+
+        </tbody>
+      </table>
+    </div>
+    </div>
+</div>
+  );
+};
+
+export default History;

addOns/webuipoc/src/main/pocs/reactWebUI/src/Components/Request-Response/Req-Resp-Bar.jsx

@@ -2,11 +2,13 @@ import React from 'react';
 
 function ResponseBar() {
   return (
-    <div className="w-full bg-gray-600 text-white dark:text-black mt-2">
+
+    <div className="w-full bg-gray-600 text-white">
 
       <div className="flex flex-row mr-2"> 
 
-        <div className='h-[594px] w-1/2 ml-2 bg-gray-700 dark:bg-gray-100 rounded-lg'>
+      <div className='h-[500px] w-1/2 ml-2 bg-gray-700 rounded-lg overflow-scroll'>
+
           <div className="flex flex-row text-center justify-center ">
             <div className="w-1/3 p-4 font-serif text-center">Request</div>
           </div>            
@@ -18,7 +20,8 @@ function ResponseBar() {
         </div>
 
 
-        <div className='h-[594px] w-1/2 ml-2 bg-gray-700 dark:bg-gray-100 rounded-lg'>
+
+        <div className='h-[500px] w-1/2 ml-2 bg-gray-700 rounded-lg overflow-scroll'>
           <div className="flex flex-row text-center justify-center">
             <div className="w-1/3 p-4 font-serif text-center">Response</div>
           </div>            

addOns/webuipoc/src/main/pocs/reactWebUI/src/Utilities/history.js

@@ -0,0 +1,15 @@
+import axios from 'axios';
+
+const sendHistory = async () => {
+    try {
+            const response = await axios.get('/OTHER/exim/other/exportHar/');
+            return response.data;
+        } 
+  catch (error) {
+        console.error('Error fetching data:', error);
+        throw error;
+    }
+
+};
+
+export { sendHistory };