Integ (#12)

* integeration Signed-off-by: Pranjal Rana <[email protected]> * cors Signed-off-by: Pranjal Rana <[email protected]> * dive-inspect-images Signed-off-by: Pranjal Rana <[email protected]> * adding-inspect-image-ui Signed-off-by: Pranjal Rana <[email protected]> * adding_images_api_func Signed-off-by: Pranjal Rana <[email protected]> * completing-images-component Signed-off-by: Pranjal Rana <[email protected]> * adding-slim-functionality Signed-off-by: Pranjal Rana <[email protected]> * completing-project Signed-off-by: Pranjal Rana <[email protected]> --------- Signed-off-by: Pranjal Rana <[email protected]>
PRANJALRANA11 · Nov 4, 2023 · 2ab5196 · 2ab5196
1 parent 07e9ebf
commit 2ab5196
Show file tree

Hide file tree

Showing 7 changed files with 225 additions and 33 deletions.
diff --git a/server/file.json b/server/file.json
@@ -1,17 +0,0 @@
-{
-  "layer": [
-    {
-      "index": 0,
-      "id": "af10c63fa8e077a49490c4796c73a9c1e08575bc52bbbdf67cefb58112738683",
-      "digestId": "sha256:dd4d83ab39e37b7b32fd9c3c6ba97ab1f7421fad7d3d0e8c2c02ff0d624232bd",
-      "sizeBytes": 52387835,
-      "command": ""
-    }
-  ],
-  "image": {
-    "sizeBytes": 52387835,
-    "inefficientBytes": 0,
-    "efficiencyScore": 1,
-    "fileReference": []
-  }
-}

diff --git a/server/main.py b/server/main.py
@@ -56,22 +56,30 @@ async def list_containers(id : str):
         return {"message": "Container not found"}
 
 
-@app.get("/optimize_image/{image_name}")
-async def create_container(image_name: str):
+
+@app.get("/optimize_image/{container_id}")
+async def create_container(container_id : str):
     try:
         client = docker.DockerClient(base_url='tcp://localhost:2375')
-        process=subprocess.run(["powershell","docker run -it --rm -v /var/run/docker.sock:/var/run/docker.sock dslim/slim build --http-probe {image_name}"], shell=True, stdout=subprocess.PIPE)
+        id_container = client.containers.get(container_id=container_id)
+        image_id = id_container.attrs['Config']['Image']
+        image = client.images.get(image_id)
+        result = image.tags[0].split(':')[0]
+        process=subprocess.run(["powershell",f"docker run -it --rm -v /var/run/docker.sock:/var/run/docker.sock dslim/slim build --http-probe {result}"], shell=True, stdout=subprocess.PIPE)
         print(process.stdout)
-        print(image_name + '.slim')
+        print(result + '.slim')
         command=["wsl", "dive", "--json", "file.json"]
-        command.insert(2,image_name + '.slim')
+        command.insert(2,result + '.slim')
+
+
         process= subprocess.Popen(command, shell=True, stdout=subprocess.PIPE)
         filehandler=open("file.json","r")
         readFile = filehandler.read()  
         filehandler=open("file.json","w")
         filehandler.truncate(0)
         return json.loads(readFile)
-    except:
+    except docker.errors.NotFound:
+
         return {"message": "Error"}
 
 

diff --git a/src/App.tsx b/src/App.tsx
@@ -8,6 +8,9 @@ import { Connection_Api } from './helpers/api';
 import { BrowserRouter as Router } from 'react-router-dom';
 import { Route, Routes } from 'react-router-dom';
 
+import Optimized from './Components/Optimized';
+
+
 
 
 interface ContainerStats {
@@ -30,6 +33,9 @@ function App() {
     async function fetchData() {
       try {
         const response:any = await Connection_Api();
+
+        console.log(response);
+
         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;
@@ -71,6 +77,8 @@ function App() {
        <Routes>
         <Route path="/" element={<Containers containers={containerData} ID={setID} />}/>
         <Route path="/inspect_image" element={<Images ID={ID}/>}/>
+
+        <Route path="/optimized_image" element={<Optimized ID={ID}/>}/>
        </Routes>
 
     </div>

diff --git a/src/Components/Containers.tsx b/src/Components/Containers.tsx
@@ -23,14 +23,13 @@ const Containers: React.FC<ContainersProps> = ({containers,ID}) => {
   let navigate = useNavigate();
   const [isLoading, setIsLoading] = useState(true);
 
+
   useEffect(() => {
     if (containers) {
       setIsLoading(false);
     }
   }, [containers]);
 
-
-
   const handleInspectImage = async(containerID:string) => {
 
     try{

diff --git a/src/Components/Images.tsx b/src/Components/Images.tsx
@@ -4,12 +4,18 @@ import { CircularProgressbar, buildStyles } from 'react-circular-progressbar';
 import {  Inspect_Image_Api } from '../helpers/api' 
 import 'react-circular-progressbar/dist/styles.css';
 
+import { useNavigate } from 'react-router-dom';
+
+
 
 
 export default function Images({ID}:any){
 
+  const navigate = useNavigate();
   const [details_image,setdetails_image] = React.useState<any>({});
   const [details_layers,setdetails_layers] = React.useState<any[]>([]);
+  const [isLoading, setIsLoading] = React.useState(true);
+
 
   useEffect(() => {
     const handleInspectImage = async(ID:string) => {
@@ -21,6 +27,7 @@ export default function Images({ID}:any){
         console.log(response.data);
         setdetails_image(response.data.image);
         setdetails_layers(response.data.layer);
+        setIsLoading(false);
 
         }
       }catch(error){
@@ -37,33 +44,62 @@ export default function Images({ID}:any){
         <div>
         <div className=" rounded-md p-4">
           <div className="text-sm text-gray-400" style={{fontFamily:"poppins"}}>Total Size</div>
+
+          {isLoading ? (
+        // Display loading GIF while data is being fetched
+        <div className='mt-8'>
+          <img src="../../1488.gif" alt="Loading" />
+        </div>
+      ) : (
           <h2 className="text-2xl text-white" style={{fontFamily:"poppins"}}>{details_image.sizeBytes} Bytes</h2>
+      )}
         </div>
         <div className=" rounded-md p-4">
           <div className="text-sm text-gray-400" style={{fontFamily:"poppins"}}>Inefficient Bytes</div>
+          {isLoading ? (
+        // Display loading GIF while data is being fetched
+        <div className=' mt-8'>
+          <img src="../../1488.gif" alt="Loading" />
+        </div>
+      ) : (
           <h2 className="text-2xl text-white" style={{fontFamily:"poppins"}}>{details_image.inefficientBytes} Bytes</h2>
+      )}
         </div>
         <div className=" rounded-md p-4">
           <div className="text-sm text-gray-400" style={{fontFamily:"poppins"}}>Efficiency Score</div>
+          {isLoading ? (
+        // Display loading GIF while data is being fetched
+        <div className=' mt-8'>
+          <img src="../../1488.gif" alt="Loading" />
+        </div>
+      ) : (
           <h2 className="text-2xl text-white" style={{fontFamily:"poppins"}}>{Math.floor(details_image.efficiencyScore*100)} %</h2>
-          
+      )}
         </div>
         <div className='flex'>
         <div className='w-40 mt-5'>
-          <button className='text-black text-md bg-white rounded-md w-32 h-8 hover:shadow-[5px_5px_0px_0px_rgba(109,40,217)] transition-all' style={{fontFamily:"poppins"}}>
-            Optimize
+          <button onClick={()=> navigate("/")} className='text-black text-md bg-white rounded-md w-32 h-8 hover:shadow-[5px_5px_0px_0px_rgba(109,40,217)] transition-all' style={{fontFamily:"poppins"}}>
+            Containers
           </button>
         </div>
         <div className='w-40 mt-5'>
-          <button className='text-black text-md bg-white rounded-md w-32 h-8 hover:shadow-[5px_5px_0px_0px_rgba(109,40,217)] transition-all' style={{fontFamily:"poppins"}}>
-            Containers
+          <button onClick={()=> navigate("/optimized_image")}  className='text-black text-md bg-white rounded-md w-32 h-8 hover:shadow-[5px_5px_0px_0px_rgba(109,40,217)] transition-all' style={{fontFamily:"poppins"}}>
+            Optimize 
+
           </button>
         </div>
         </div>
 
         </div>
         <div >
         <div style={{ width: 200, height: 200, marginLeft:200 }}>
+
+        {isLoading ? (
+        // Display loading GIF while data is being fetched
+        <div className='flex justify-center mt-40'>
+          <img src="../../1488.gif" alt="Loading" />
+        </div>
+      ) : (
         <CircularProgressbar  strokeWidth={4} value={Math.floor(details_image.efficiencyScore*100)} text={`${Math.floor(details_image.efficiencyScore*100)}%`} styles={buildStyles({
 
                                     strokeLinecap: 'round',
@@ -74,17 +110,23 @@ export default function Images({ID}:any){
                                     pathColor:"#f06155",
 
                                 })}
-                            />;
+
+                            />
+                            )}
         </div>
         </div>
       </div>
-
       <div className="ml-20  space-y-2">
         <h3 className="text-3xl text-white" style={{fontFamily:"poppins"}}>Layers</h3>
-
         <div>
       <div className="mt-10 w-4/5">
       <div className="bg-white  shadow-md  rounded-lg">
+      {isLoading ? (
+        // Display loading GIF while data is being fetched
+        <div className='flex justify-center mt-8'>
+          <img src="../../1488.gif" alt="Loading" />
+        </div>
+      ) : (
         <table className="w-full table-fixed">
 
           <thead style={{backgroundColor:"rgb(29 50 80)"}}>
@@ -110,6 +152,8 @@ export default function Images({ID}:any){
 
 
         </table>
+      )}
+
       </div>
     </div>
     </div>

diff --git a/src/Components/Optimized.tsx b/src/Components/Optimized.tsx
@@ -0,0 +1,143 @@
+import React, { useEffect } from 'react'
+import { CircularProgressbar, buildStyles } from 'react-circular-progressbar';
+import {  Inspect_optimized_Image_Api } from '../helpers/api' 
+import 'react-circular-progressbar/dist/styles.css';
+import { useNavigate } from 'react-router-dom';
+
+
+
+export default function Optimized({ID}:any){
+  const navigate = useNavigate();
+  const [details_image,setdetails_image] = React.useState<any>({});
+  const [details_layers,setdetails_layers] = React.useState<any[]>([]);
+  const [isLoading, setIsLoading] = React.useState(true);
+
+  useEffect(() => {
+    const handleInspectImage = async(ID:string) => {
+      try{
+        console.log(ID)
+        const response =  await Inspect_optimized_Image_Api(ID);
+        if(response.status === 200){
+        console.log(response);
+        setdetails_image(response.data.image);
+        setdetails_layers(response.data.layer);
+        setIsLoading(false);
+        }
+      }catch(error){
+        console.log(error);
+      }
+    }
+    handleInspectImage(ID);
+
+    },[ID]);
+  return (
+    <div className="pl-5 space-y-4" style={{backgroundColor:"#0f1d32"}}>
+      <h3 className="text-3xl ml-80 mt-10 text-white" style={{fontFamily:"poppins"}}>Analyzing Optimized Image:</h3>
+      <div className="flex ml-80 space-x-4">
+        <div>
+        <div className=" rounded-md p-4">
+          <div className="text-sm text-gray-400" style={{fontFamily:"poppins"}}>Total Size</div>
+          {isLoading ? (
+        // Display loading GIF while data is being fetched
+        <div className='mt-8'>
+          <img src="../../1488.gif" alt="Loading" />
+        </div>
+      ) : (
+          <h2 className="text-2xl text-white" style={{fontFamily:"poppins"}}>{details_image.sizeBytes} Bytes</h2>
+      )}
+        </div>
+        <div className=" rounded-md p-4">
+          <div className="text-sm text-gray-400" style={{fontFamily:"poppins"}}>Inefficient Bytes</div>
+          {isLoading ? (
+        // Display loading GIF while data is being fetched
+        <div className=' mt-8'>
+          <img src="../../1488.gif" alt="Loading" />
+        </div>
+      ) : (
+          <h2 className="text-2xl text-white" style={{fontFamily:"poppins"}}>{details_image.inefficientBytes} Bytes</h2>
+      )}
+        </div>
+        <div className=" rounded-md p-4">
+          <div className="text-sm text-gray-400" style={{fontFamily:"poppins"}}>Efficiency Score</div>
+          {isLoading ? (
+        // Display loading GIF while data is being fetched
+        <div className=' mt-8'>
+          <img src="../../1488.gif" alt="Loading" />
+        </div>
+      ) : (
+          <h2 className="text-2xl text-white" style={{fontFamily:"poppins"}}>{Math.floor(details_image.efficiencyScore*100)} %</h2>
+      )}
+        </div>
+        <div className='flex'>
+        <div className='w-40 mt-5'>
+          <button onClick={()=> navigate("/")} className='text-black text-md bg-white rounded-md w-32 h-8 hover:shadow-[5px_5px_0px_0px_rgba(109,40,217)] transition-all' style={{fontFamily:"poppins"}}>
+            Containers
+          </button>
+        </div>
+        </div>
+
+        </div>
+        <div >
+        <div style={{ width: 200, height: 200, marginLeft:200 }}>
+        {isLoading ? (
+        // Display loading GIF while data is being fetched
+        <div className='flex justify-center mt-40'>
+          <img src="../../1488.gif" alt="Loading" />
+        </div>
+      ) : (
+        <CircularProgressbar  strokeWidth={4} value={Math.floor(details_image.efficiencyScore*100)} text={`${Math.floor(details_image.efficiencyScore*100)}%`} styles={buildStyles({
+                                    strokeLinecap: 'round',
+                                    textSize: '16px',
+                                    pathTransitionDuration: 0.5,
+                                    textColor: '#97feef',
+                                    trailColor: 'transparent',
+                                    pathColor:"#f06155",
+
+                                })}
+                            />
+                            )}
+        </div>
+        </div>
+      </div>
+      <div className="ml-20  space-y-2">
+        <h3 className="text-3xl text-white" style={{fontFamily:"poppins"}}>Layers</h3>
+        <div>
+      <div className="mt-10 w-4/5">
+      <div className="bg-white  shadow-md  rounded-lg">
+      {isLoading ? (
+        // Display loading GIF while data is being fetched
+        <div className='flex justify-center mt-8'>
+          <img src="../../1488.gif" alt="Loading" />
+        </div>
+      ) : (
+        <table className="w-full table-fixed">
+          <thead style={{backgroundColor:"rgb(29 50 80)"}}>
+            <tr>
+              <th className="px-4 py-2 text-left text-white font-semibold" style={{fontFamily:"poppins"}}>Index</th>
+              <th className="px-4 py-2 text-left text-white font-semibold" style={{fontFamily:"poppins"}}>Digest ID</th>
+              <th className="px-4 py-2 text-left text-white font-semibold" style={{fontFamily:"poppins"}}>ID</th>
+              <th className="px-4 py-2 text-left text-white font-semibold" style={{fontFamily:"poppins"}}>Size</th>
+              <th className="px-4 py-2 text-right text-white font-semibold" style={{fontFamily:"poppins"}}>Command</th>
+            </tr>
+          </thead>
+          <tbody>
+  {details_layers.map((layer:any, index:number) => (
+    <tr key={index}  style={{ backgroundColor: "rgb(36 64 105)", borderBottom: "1px solid #1d3250",cursor: "pointer" }}>
+      <td className="px-4 text-white py-2" style={{  maxWidth: "100px", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", fontFamily:"poppins" }}>{layer.index}</td>
+      <td className="px-4 text-white py-2" style={{  maxWidth: "200px", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", fontFamily:"poppins" }}>{layer.digestId}</td>
+      <td className="px-4 text-white py-2" style={{  maxWidth: "200px", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", fontFamily:"poppins" }}>{layer.id}</td>
+      <td className="px-4 text-white py-2" style={{ }}>{layer.sizeBytes} Bytes</td>
+      <td className="px-4 text-white py-2 text-right" style={{  maxWidth: "150px", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", fontFamily:"poppins" }}>{layer.command}</td>
+    </tr>
+  ))}
+</tbody>
+
+        </table>
+      )}
+      </div>
+    </div>
+    </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/helpers/api.ts b/src/helpers/api.ts
@@ -1,6 +1,7 @@
 // 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");
@@ -24,3 +25,9 @@ export async function Inspect_Image_Api(id:string) {
   return response;
 }
 
+export async function Inspect_optimized_Image_Api(id:string) {
+  const response= await axios.get(`http://localhost:8000/optimize_image/${id}`);
+  return response;
+}
+
+