Merge pull request #205 from dgageot/fix-load-image-progress

Pull if not found

Author: trungutt

src/extension/ui/src/components/LoadingState.tsx

@@ -1,17 +1,10 @@
-import { LinearProgress, Box, Typography, Paper, Stack, Fade, CircularProgress } from "@mui/material";
-import { useEffect, useState } from "react";
 import { createDockerDesktopClient } from '@docker/extension-api-client';
+import { Box, CircularProgress, Fade, LinearProgress, Paper, Stack, Typography } from "@mui/material";
+import { useEffect, useState } from "react";
 
 // Initialize the Docker Desktop client
 const client = createDockerDesktopClient();
 
-// Type definition for image state
-interface ImageState {
-    status: 'idle' | 'loading' | 'success' | 'error';
-    result?: any;
-    error?: unknown;
-}
-
 interface LoadingStateProps {
     appProps: any; // We'll use this to pass all our hook data
 }
@@ -28,14 +21,7 @@ const LoadingState: React.FC<LoadingStateProps> = ({ appProps }) => {
     const [progress, setProgress] = useState(0);
 
     useEffect(() => {
-        const imageProgressTotal = (() => {
-            const total = 5;
-            // Type assertion to Record<string, ImageState>
-            const imageStatesMap = imageStates as Record<string, ImageState> || {};
-            const loaded = Object.values(imageStatesMap).filter(state => state.status === 'success').length;
-            return Math.round((loaded / total) * 100);
-        })()
-
+        const imageProgressTotal = imagesLoading ? 100 : 0;
         const configProgressTotal = configLoading ? 100 : 0;
         const secretsProgressTotal = secretsLoading ? 100 : 0;
         const catalogProgressTotal = catalogLoading ? 100 : 0;
@@ -57,15 +43,6 @@ const LoadingState: React.FC<LoadingStateProps> = ({ appProps }) => {
         return 'Loading...';
     }
 
-    const getStatusColor = (status: string) => {
-        switch (status) {
-            case 'loading': return '#3498db';
-            case 'success': return '#2ecc71';
-            case 'error': return '#e74c3c';
-            default: return '#95a5a6';
-        }
-    };
-
     return (
         <Fade in={isLoading}>
             <Box sx={{

src/extension/ui/src/queries/useRequiredImages.ts

@@ -1,84 +1,34 @@
 import { v1 } from "@docker/extension-api-client-types";
-import { ExecResult } from '@docker/extension-api-client-types/dist/v0';
-import { useQuery } from '@tanstack/react-query';
+import { useEffect, useState } from "react";
 import { BUSYBOX } from "../Constants";
 
-// List of required images for the extension
-const REQUIRED_IMAGES = [BUSYBOX];
-
-// Image loading state interface
-interface ImageState {
-    status: 'idle' | 'loading' | 'success' | 'error';
-    result?: ExecResult;
-    error?: unknown;
-}
-
 export function useRequiredImages(client: v1.DockerDesktopClient) {
-    // Create queries for each required image
-    const imageQueries = REQUIRED_IMAGES.map(imageName => {
-        return useQuery({
-            queryKey: ['image', imageName],
-            queryFn: async () => {
-                try {
-                    return await client.docker.cli.exec('pull', [imageName]);
-                } catch (error) {
-                    client.desktopUI.toast.error(`Failed to pull image ${imageName}: ${error}`);
-                    throw error;
-                }
-            },
-            staleTime: Infinity,
-            refetchOnWindowFocus: false,
-            refetchOnMount: false,
-        });
-    });
-
-    // Construct the image states map
-    const imageStates: Record<string, ImageState> = {};
-
-    REQUIRED_IMAGES.forEach((imageName, index) => {
-        const query = imageQueries[index];
-        imageStates[imageName] = {
-            status: query.isLoading ? 'loading' :
-                query.isError ? 'error' :
-                    query.isSuccess ? 'success' : 'idle',
-            result: query.data,
-            error: query.error
-        };
-    });
-
-    // Calculate overall loading state
-    const isLoading = imageQueries.some(query => query.isLoading);
-    const isFetching = imageQueries.some(query => query.isFetching);
-
-    // Load a specific image
-    const loadImage = async (imageName: string) => {
-        const index = REQUIRED_IMAGES.indexOf(imageName);
-        if (index === -1) {
-            client.desktopUI.toast.error(`Unknown image: ${imageName}`);
-            return;
-        }
+    const [isLoading, setIsLoading] = useState(false);
 
+    const imageName = BUSYBOX;
+    const fetchRequiredImage = async () => {
         try {
-            await imageQueries[index].refetch();
+            await client.docker.cli.exec('inspect', [imageName]);
         } catch (error) {
-            client.desktopUI.toast.error(`Failed to load image ${imageName}: ${error}`);
+            // Ignore
         }
-    };
 
-    // Load all required images
-    const loadAllImages = async () => {
         try {
-            await Promise.all(imageQueries.map(query => query.refetch()));
+            await client.docker.cli.exec('pull', [imageName]);
         } catch (error) {
-            client.desktopUI.toast.error(`Failed to load one or more images: ${error}`);
+            client.desktopUI.toast.error(`Failed to pull image ${imageName}: ${error}`);
+            throw error;
         }
-    };
+    }
+
+    useEffect(() => {
+        setIsLoading(true);
+        fetchRequiredImage().then(() => {
+            setIsLoading(false);
+        });
+    }, []);
 
     return {
-        imageStates,
         isLoading,
-        isFetching,
-        loadAllImages,
-        loadImage
     };
 }