From 2ab51967a776605b99829b71752ed12345736733 Mon Sep 17 00:00:00 2001 From: Pranjal Rana <129268721+PRANJALRANA11@users.noreply.github.com> Date: Sat, 4 Nov 2023 10:22:50 +0530 Subject: [PATCH] Integ (#12) * integeration Signed-off-by: Pranjal Rana <129268721+PRANJALRANA11@users.noreply.github.com> * cors Signed-off-by: Pranjal Rana <129268721+PRANJALRANA11@users.noreply.github.com> * dive-inspect-images Signed-off-by: Pranjal Rana <129268721+PRANJALRANA11@users.noreply.github.com> * adding-inspect-image-ui Signed-off-by: Pranjal Rana <129268721+PRANJALRANA11@users.noreply.github.com> * adding_images_api_func Signed-off-by: Pranjal Rana <129268721+PRANJALRANA11@users.noreply.github.com> * completing-images-component Signed-off-by: Pranjal Rana <129268721+PRANJALRANA11@users.noreply.github.com> * adding-slim-functionality Signed-off-by: Pranjal Rana <129268721+PRANJALRANA11@users.noreply.github.com> * completing-project Signed-off-by: Pranjal Rana <129268721+PRANJALRANA11@users.noreply.github.com> --------- Signed-off-by: Pranjal Rana <129268721+PRANJALRANA11@users.noreply.github.com> --- server/file.json | 17 ---- server/main.py | 20 +++-- src/App.tsx | 8 ++ src/Components/Containers.tsx | 3 +- src/Components/Images.tsx | 60 ++++++++++++-- src/Components/Optimized.tsx | 143 ++++++++++++++++++++++++++++++++++ src/helpers/api.ts | 7 ++ 7 files changed, 225 insertions(+), 33 deletions(-) create mode 100644 src/Components/Optimized.tsx diff --git a/server/file.json b/server/file.json index 901ea2a..e69de29 100644 --- 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": [] - } -} \ No newline at end of file diff --git a/server/main.py b/server/main.py index 6b3bc64..7a07b6d 100644 --- 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 index af03cf5..8b3c904 100644 --- 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() { }/> }/> + + }/> diff --git a/src/Components/Containers.tsx b/src/Components/Containers.tsx index d1c60bd..f3328d8 100644 --- a/src/Components/Containers.tsx +++ b/src/Components/Containers.tsx @@ -23,14 +23,13 @@ const Containers: React.FC = ({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 index 6d45cb2..b70ee6e 100644 --- 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({}); const [details_layers,setdetails_layers] = React.useState([]); + 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,26 +44,48 @@ export default function Images({ID}:any){
Total Size
+ + {isLoading ? ( + // Display loading GIF while data is being fetched +
+ Loading +
+ ) : (

{details_image.sizeBytes} Bytes

+ )}
Inefficient Bytes
+ {isLoading ? ( + // Display loading GIF while data is being fetched +
+ Loading +
+ ) : (

{details_image.inefficientBytes} Bytes

+ )}
Efficiency Score
+ {isLoading ? ( + // Display loading GIF while data is being fetched +
+ Loading +
+ ) : (

{Math.floor(details_image.efficiencyScore*100)} %

- + )}
-
-
@@ -64,6 +93,13 @@ export default function Images({ID}:any){
+ + {isLoading ? ( + // Display loading GIF while data is being fetched +
+ Loading +
+ ) : ( ; + + /> + )}
-

Layers

-
+ {isLoading ? ( + // Display loading GIF while data is being fetched +
+ Loading +
+ ) : ( @@ -110,6 +152,8 @@ export default function Images({ID}:any){
+ )} +
diff --git a/src/Components/Optimized.tsx b/src/Components/Optimized.tsx new file mode 100644 index 0000000..aba9587 --- /dev/null +++ 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({}); + const [details_layers,setdetails_layers] = React.useState([]); + 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 ( +
+

Analyzing Optimized Image:

+
+
+
+
Total Size
+ {isLoading ? ( + // Display loading GIF while data is being fetched +
+ Loading +
+ ) : ( +

{details_image.sizeBytes} Bytes

+ )} +
+
+
Inefficient Bytes
+ {isLoading ? ( + // Display loading GIF while data is being fetched +
+ Loading +
+ ) : ( +

{details_image.inefficientBytes} Bytes

+ )} +
+
+
Efficiency Score
+ {isLoading ? ( + // Display loading GIF while data is being fetched +
+ Loading +
+ ) : ( +

{Math.floor(details_image.efficiencyScore*100)} %

+ )} +
+
+
+ +
+
+ +
+
+
+ {isLoading ? ( + // Display loading GIF while data is being fetched +
+ Loading +
+ ) : ( + + )} +
+
+
+
+

Layers

+
+
+
+ {isLoading ? ( + // Display loading GIF while data is being fetched +
+ Loading +
+ ) : ( + + + + + + + + + + + + {details_layers.map((layer:any, index:number) => ( + + + + + + + + ))} + + +
IndexDigest IDIDSizeCommand
{layer.index}{layer.digestId}{layer.id}{layer.sizeBytes} Bytes{layer.command}
+ )} +
+
+
+
+
+ ) +} diff --git a/src/helpers/api.ts b/src/helpers/api.ts index 974c597..60bad54 100644 --- 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; +} + +