new commit from CLI

client/src/App.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import { Route, Routes } from 'react-router-dom';
 import './App.css';
 import Navigation from './components/Navigation';
 import Home from './components/Home';
@@ -15,7 +15,7 @@ import Metric from './components/Metric';
 
 function App() {
   return (
-    <BrowserRouter>
+
       <div className="App">
         <Navigation />  
 
@@ -26,13 +26,10 @@ function App() {
           <Route path="/image" element={<Image />} />
           <Route path="/metric" element={<Metric />} />
           <Route path="/about" element={<About />} />
-          <Route path="/*" element={<Error />} /> {/* Replace Home with your actual home component */}
-          {/* Add routes for update and create if needed, with corresponding components: */}
-          {/* <Route path="/update" element={<UpdateUser />} /> */}
-          {/* <Route path="/create" element={<CreateUser />} /> */}
+          <Route path="/*" element={<Error />} /> 
         </Routes>
       </div>
-    </BrowserRouter>
+
   );
 }
 

client/src/components/Home.js

@@ -1,27 +1,41 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import '../style/home.css';
-import { Link } from 'react-router-dom';
+// import { Link } from 'react-router-dom';
 
 export default function Home() {
-  const execCMD = () => {
-    // Make a request to the server-side endpoint
-    fetch('/rundocker')
-      .then(response => {
-        if (!response.ok) {
-          throw new Error('Network response was not ok');
-        }
-        return response.text();
-      })
-      .then(data => {
-        console.log(data);
-        alert('Command executed successfully');
-      })
-      .catch(error => {
-        console.error('There was a problem with the fetch operation:', error);
-        alert('Failed to execute command');
-      });
-  };
+  const [data, setData] = useState([]);
+  const getDetails = () => {
+    console.log("Working")
 
+    fetch('/getdata')
+    .then((response) => {
+      return response.json();
+    })
+    .then((data) => {
+      console.log(data);
+      // Handle the fetched data as needed
+    })
+    .catch((error) => {
+      console.error('Error fetching data:', error);
+      // Handle the error appropriately
+    });
+
+  }
+
+//  const getDetails = (){
+//   console.log("button is working")
+//     useEffect(() => {
+//       fetch('/getdata')
+//       .then((data) => {
+//         return data.json()
+//       })
+//       .then((res) => {
+//         console.log(res);
+//         setData(res)
+
+//       })
+//     })
+//  }
   return (
     <div>
       <div className="content">
@@ -35,7 +49,28 @@ export default function Home() {
           <p>Docker is a platform designed to help developers build, share, and run container applications. We handle the tedious setup, so you can focus on the code.</p>
         </div>
 
-        <button onClick={execCMD}>Get Started</button>
+        <button onClick={getDetails}>Get Started</button>
+
+        <div className="information">
+          <div className="table-head">
+            <p>Container Id</p>
+            <p>Process name</p>
+          </div>
+
+          <div className="table-data">
+
+            {
+              data.map((item)=>{
+                return <div className="data">
+                <p>{item["Container Id"]}</p>
+                <p>{item["Process name"]}</p>
+              </div>
+
+              })
+            } 
+
+          </div>
+        </div>
         {/* <Link to="/container">Get Started</Link> */}
       </div>
     </div>

client/src/index.js

@@ -1,13 +1,16 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
+    <BrowserRouter>
     <App />
+    </BrowserRouter>
   </React.StrictMode>
 );
 

client/src/style/home.css

@@ -83,4 +83,21 @@
     button > *{
         text-decoration: none;
         color: black;
-    }
+    }
+
+    .information .table-head{
+        display: flex;
+        gap: 20px;
+        font-size: large;
+        color: aliceblue;
+    }
+    .information .table-data{
+        display: flex;
+        flex-direction: column;
+    }
+
+    .information .table-data .data{
+        display: flex;
+        gap: 25px;
+    }
+

pull_request_template.md

@@ -15,7 +15,7 @@
 ## Checklist
 <!--- Go over all the following points, and put an `x` in all the boxes that apply. -->
 <!--- If you're unsure about any of these, don't hesitate to ask. We're here to help! -->
-- [x] My code follows the code style of this project.
+- [ ] My code follows the code style of this project.
 - [ ] I have reviewed my code and ensured it's functioning as expected.
 - [ ] I have added appropriate comments to my code, particularly in hard-to-understand areas.
 - [ ] I have updated the documentation accordingly.

server/data/cpu_utilization.json

@@ -0,0 +1,82 @@
+[
+    {
+        "Container Id": "user.qwer1234",
+        "Process name": "process-1",
+        "CPU user": 34567890,
+        "CPU quota": 0,
+        "CPU throttling": 0,
+        "CPU kernel": 12345678
+    },
+    {
+        "Container Id": "user.asdf5678",
+        "Process name": "process-2",
+        "CPU user": 90876543,
+        "CPU quota": 0,
+        "CPU throttling": 0,
+        "CPU kernel": 87654321
+    },
+    {
+        "Container Id": "user.zxcv9012",
+        "Process name": "process-3",
+        "CPU user": 56789012,
+        "CPU quota": 0,
+        "CPU throttling": 0,
+        "CPU kernel": 21098765
+    },
+    {
+        "Container Id": "user.poiuy3456",
+        "Process name": "process-4",
+        "CPU user": 123456789,
+        "CPU quota": 0,
+        "CPU throttling": 0,
+        "CPU kernel": 98765432
+    },
+    {
+        "Container Id": "user.lkjh7890",
+        "Process name": "process-5",
+        "CPU user": 67890123,
+        "CPU quota": 0,
+        "CPU throttling": 0,
+        "CPU kernel": 32109876
+    },
+    {
+        "Container Id": "user.hjkl1234",
+        "Process name": "process-6",
+        "CPU user": 234567890,
+        "CPU quota": 0,
+        "CPU throttling": 0,
+        "CPU kernel": 10987654
+    },
+    {
+        "Container Id": "user.gfed5678",
+        "Process name": "process-7",
+        "CPU user": 78901234,
+        "CPU quota": 0,
+        "CPU throttling": 0,
+        "CPU kernel": 43210987
+    },
+    {
+        "Container Id": "user.tyuio9012",
+        "Process name": "process-8",
+        "CPU user": 345678901,
+        "CPU quota": 0,
+        "CPU throttling": 0,
+        "CPU kernel": 11098765
+    },
+    {
+        "Container Id": "user.rewq2345",
+        "Process name": "process-9",
+        "CPU user": 89012345,
+        "CPU quota": 0,
+        "CPU throttling": 0,
+        "CPU kernel": 54321098
+    },
+    {
+        "Container Id": "user.asdfg6789",
+        "Process name": "process-10",
+        "CPU user": 45678901,
+        "CPU quota": 0,
+        "CPU throttling": 0,
+        "CPU kernel": 12109876
+    }
+]

server/server.js

@@ -1,17 +1,19 @@
 const express = require('express');
-const cors = require('cors')
-const { exec } = require('child_process');
+const cors = require('cors');
+const cpuData = require('./data/cpu_utilization.json'); // Changed variable name for better readability
 
 const app = express();
-app.use(cors());
 const port = 3001;
 
-app.listen(port, () => {
-  console.log(`Server is running on port ${port}`);
-});
-
+// Middleware to enable CORS
+app.use(cors());
 
-app.get('/rundocker', (req, res) => {
+// Route handler for GET requests to /getdata endpoint
+app.get('/getdata', (req, res) => {
+  req.send("Hello from server"); // Sending JSON data as response
+});
 
-
+// Start the server
+app.listen(port, () => {
+  console.log(`Server is running on port ${port}`);
 });