Merge branch 'PRANJALRANA11:master' into master

package.json

@@ -14,6 +14,7 @@
     "react": "^18.2.0",
     "react-circular-progressbar": "^2.1.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.18.0",
     "react-scripts": "5.0.1",
     "socket.io-client": "^4.7.2",
     "typescript": "^4.9.5",

server/main.py

@@ -35,7 +35,7 @@ async def root():
 async def model(dockerFile : str):
     return {"model": "Currently working on it", "dockerFile": dockerFile}
 
-    
+
 
 # @app.get("/containers")
 # async def list_containers():
@@ -45,7 +45,7 @@ async def model(dockerFile : str):
 #     return [{ "arrtributes": c.attrs  } for c in containers]
 
 
-@app.get("/containers/{id}")
+@app.get("/inspect_image/{id}")
 async def list_containers(id : str):
     client = docker.DockerClient(base_url='tcp://localhost:2375')
     try:

src/App.tsx

@@ -4,12 +4,76 @@ import Navbar from './Components/Navbar';
 import Containers from './Components/Containers';
 import Images from './Components/Images';
 
+import { useEffect, useState } from 'react';
+import { Connection_Api } from './helpers/api';
+import { BrowserRouter as Router } from 'react-router-dom';
+import { Route, Routes } from 'react-router-dom';
+
+
+
+interface ContainerStats {
+  containerID: string;
+  containerName: string;
+  cpuUsagePercentage: number;
+  memoryUsageInMebibytes: number;
+  memoryLimitInBytes: number;
+  network: number;
+  pids: number;
+}
+
+
 function App() {
+
+  const [containerData, setContainerData] = useState<ContainerStats[] | null>(null);
+  const [ID,setID]=useState("");
+
+  useEffect(() => {
+    async function fetchData() {
+      try {
+        const response:any = await Connection_Api();
+        const containerStatsArray: ContainerStats[] = response.map((container:any) => {
+          const previousTotalUsage:number = container.stats.precpu_stats.cpu_usage.total_usage;
+          const currentTotalUsage:number = container.stats.cpu_stats.cpu_usage.total_usage;
+          const numberOfCPUs:number = container.stats.precpu_stats.online_cpus;
+          const cpuUsagePercentage:number = ((currentTotalUsage - previousTotalUsage) / numberOfCPUs) * 100;
+          const memoryUsageInBytes:number = container.stats.memory_stats.usage;
+          const memoryLimitInBytes:number = container.stats.memory_stats.limit;
+          const memoryUsageInMebibytes:number = memoryUsageInBytes / 1024 / 1024;
+          const rxBytes:number = container.stats.networks.eth0.rx_bytes;
+          const txBytes:number = container.stats.networks.eth0.tx_bytes;
+          const network:number = rxBytes / txBytes;
+          const containerName:string = container.stats.name;
+          const containerID:string = container.stats.id;
+          const pids:number = container.stats.pids_stats.current;
+
+          return {
+            containerID,
+            containerName,
+            cpuUsagePercentage,
+            memoryUsageInMebibytes,
+            memoryLimitInBytes,
+            network,
+            pids,
+          };
+        });
+
+        setContainerData(containerStatsArray);
+      } catch (error) {
+        console.error('Error fetching data:', error);
+      }
+    }
+
+    fetchData();
+  }, []);
+
   return (
     <div className=" App">
        <Navbar/>
-       {/* <Containers/> */}
-       <Images/>
+       <Routes>
+        <Route path="/" element={<Containers containers={containerData} ID={setID} />}/>
+        <Route path="/inspect_image" element={<Images ID={ID}/>}/>
+       </Routes>
+
     </div>
   );
 }

src/Components/Containers.tsx

@@ -1,16 +1,26 @@
-import React,{useEffect,useState} from 'react'
-import { Connection_Api, Inspect_Image_Api } from '../helpers/api' 
 
+import React,{SetStateAction} from 'react'
+import {useNavigate } from 'react-router-dom';
 
-interface ContainerStats {
-  containerID: string;
-  containerName: string;
-  cpuUsagePercentage: number;
-  memoryUsageInMebibytes: number;
-  memoryLimitInBytes: number;
-  network: number;
-  pids: number;
+
+
+interface ContainersProps {
+  containers: ContainerStats[] | null;
+  ID:(set: SetStateAction<string>) => void;
 }
+
+const Containers: React.FC<ContainersProps> = ({containers,ID}) => {
+
+  let navigate = useNavigate();
+
+  const handleInspectImage = async(containerID:string) => {
+    try{
+      ID(containerID);
+      navigate('/inspect_image');
+      console.log(containerID)
+    }catch(error){
+      console.log(error);
+    }
 const Containers = () => {
   const [containerData, setContainerData] = useState<ContainerStats[] | null>(null);
 
@@ -89,8 +99,9 @@ const Containers = () => {
     </div>
   </div>
   <div className='w-4/5 h-0.5 ml-44 bg-slate-400'></div>
-  {containerData &&
-    containerData.map((container, index) => (
+  {containers &&
+    containers.map((container, index) => (
+
       <div>
       <div key={index} className='flex ml-44 mt-8'>
         <div className='w-40'>
@@ -109,7 +120,7 @@ const Containers = () => {
           <p className='text-white text-lg'>{container.network} B</p>
         </div>
         <div className='w-40'>
-          <button  className='text-black text-md ml-2 bg-white rounded-md w-24 h-8 hover:shadow-[5px_5px_0px_0px_rgba(109,40,217)] transition-all '>
+          <button onClick={()=>handleInspectImage(container.containerID)} className='text-black text-md ml-2 bg-white rounded-md w-24 h-8 hover:shadow-[5px_5px_0px_0px_rgba(109,40,217)] transition-all '>
             Inspect
           </button>
         </div>

src/Components/Images.tsx

@@ -1,16 +1,29 @@
-import React from 'react'
+
+import React, { useEffect } from 'react'
 import { CircularProgressbar, buildStyles } from 'react-circular-progressbar';
+import {  Inspect_Image_Api } from '../helpers/api' 
 import 'react-circular-progressbar/dist/styles.css';
-export default function Images() {
-    const Effeciency_score:number=75;
-    const offset:number=Effeciency_score === 100 ? 0 : ((100 - Effeciency_score) / 100) * 2 * 3.14 ;
 
-  return (
-    <div className="ml-5 space-y-4">
-
-
 
 
+export default function Images({ID}:any){
+  useEffect(() => {
+    const handleInspectImage = async(ID:string) => {
+      try{
+        console.log(ID)
+        const response =  await Inspect_Image_Api(ID);
+        if(response.status === 200){
+        console.log(response);
+        }
+      }catch(error){
+        console.log(error);
+      }
+    }
+    handleInspectImage(ID);
+
+    },[ID]);
+  return (
+    <div className="ml-5 space-y-4">
       <h3 className="text-3xl ml-80 mt-10 text-white">Analyzing:</h3>
       <div className="flex ml-80 space-x-4">
         <div>

src/helpers/api.ts

@@ -1,8 +1,5 @@
 // Purpose: API helper functions.
 import axios from 'axios'
-
-
-
 export function Connection_Api() {
   return new Promise((resolve, reject) => {
     const ws = new WebSocket("ws://localhost:8000/stats");
@@ -22,7 +19,7 @@ export function Connection_Api() {
   });
 }
 export async function Inspect_Image_Api(id:string) {
-  const response= await axios.get(`'http://localhost:8000/inspect_image/${id}'`);
+  const response= await axios.get(`http://localhost:8000/inspect_image/${id}`);
   return response;
 }
 

src/index.tsx

@@ -1,5 +1,6 @@
 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';
@@ -9,7 +10,9 @@ const root = ReactDOM.createRoot(
 );
 root.render(
   <React.StrictMode>
-    <App />
+     <BrowserRouter>
+      <App />
+    </BrowserRouter>
   </React.StrictMode>
 );