fix: Download correct image (#35)

* Now download correct image if not present

* simplified if statement

* Applied review suggestions

Author: Pive01

ui/src/components/Feedback/DownloadProgress/DownloadProgress.tsx

@@ -2,7 +2,8 @@ import React, { ReactElement, useEffect, useState } from 'react';
 import { useDDClient } from '../../../services';
 import { CircularProgressWithLabel } from './CircularProgressWithLabel';
 
-const SKIPPING_KEYS = ['Digest', 'Status', 'latest'];
+const SKIPPING_KEY = 'latest';
+const END_KEYS = ['Digest', 'Status'];
 
 const statusValues = new Map([
   ['Waiting', 0],
@@ -38,16 +39,17 @@ export const DownloadProgress = ({ callback, imageName }: DownloadProgressProps)
 
           const [key, status] = data.stdout.split(':').map(item => item.trim());
 
-          if (SKIPPING_KEYS.includes(key) || status === 'latest') { // don't process lines that are not in the format hash: status
+          if ([key, status].includes(SKIPPING_KEY)) { // prevent inserting in the map non related info
             return;
           }
 
-          if (status.startsWith('Image is up to date')) { // otherwise if Image is up to date nothing is downloaded and the progress remains to 0
+          if (status.startsWith('Image is up to date') || END_KEYS.includes(key)) {
             setIsDone(true);
             return;
           }
-
-          setStatusMap(new Map(statusMap.set(key, status)));
+          if (!status.startsWith('Retrying in')) {
+            setStatusMap(new Map(statusMap.set(key, status)));
+          }
         },
         onError(error: unknown): void {
           ddClient.desktopUI.toast.error('An error occurred');

ui/src/components/Header/Controller.tsx

@@ -1,13 +1,21 @@
 import React, { ReactElement, useEffect, useState } from 'react';
 import { Chip, ButtonGroup, Select, MenuItem, FormControl, Box, Badge, Tooltip } from '@mui/material';
 import { PlayArrow, Stop } from '@mui/icons-material';
-import { isALocalStackContainer, useDDClient, useLocalStack, useMountPoint, useRunConfig } from '../../services';
+import { 
+  isALocalStackContainer,
+  removeTagFromImage,
+  useDDClient,
+  useLocalStack,
+  useMountPoint,
+  useRunConfigs,
+} from '../../services';
 import {
   DEFAULT_CONFIGURATION_ID,
   CORS_ALLOW_DEFAULT,
-  LATEST_IMAGE,
   START_ARGS,
   FLAGS,
+  IMAGE,
+  PRO_IMAGE,
 } from '../../constants';
 import { LongMenu } from './Menu';
 import { DockerContainer, DockerImage } from '../../types';
@@ -17,11 +25,11 @@ import { ProgressButton } from '../Feedback';
 const EXCLUDED_ERROR_TOAST = ['INFO', 'WARN', 'DEBUG'];
 
 export const Controller = (): ReactElement => {
-  const { runConfig, isLoading, createConfig } = useRunConfig();
+  const { runConfigs, isLoading, createConfig } = useRunConfigs();
   const { data, mutate } = useLocalStack();
   const { user, os, hasSkippedConfiguration } = useMountPoint();
   const [runningConfig, setRunningConfig] = useState<string>('Default');
-  const [downloadProps, setDownloadProps] = useState({ open: false, image: LATEST_IMAGE });
+  const [downloadProps, setDownloadProps] = useState({ open: false, image: IMAGE });
   const [isStarting, setIsStarting] = useState<boolean>(false);
   const [isStopping, setIsStopping] = useState<boolean>(false);
   const ddClient = useDDClient();
@@ -30,7 +38,7 @@ export const Controller = (): ReactElement => {
   const tooltipLabel = isUnhealthy ? 'Unhealthy' : 'Healthy';
 
   useEffect(() => {
-    if (!isLoading && (!runConfig || !runConfig.find(item => item.name === 'Default'))) {
+    if (!isLoading && (!runConfigs || !runConfigs.find(item => item.name === 'Default'))) {
       createConfig({
         name: 'Default', id: DEFAULT_CONFIGURATION_ID, vars: [],
       },
@@ -61,7 +69,7 @@ export const Controller = (): ReactElement => {
 
     const corsArg = ['-e', `EXTRA_CORS_ALLOWED_ORIGINS=${CORS_ALLOW_DEFAULT}`];
 
-    const addedArgs = runConfig.find(config => config.name === runningConfig)
+    const addedArgs = runConfigs.find(config => config.name === runningConfig)
       .vars.map(item => {
         if (item.variable === 'EXTRA_CORS_ALLOWED_ORIGINS') { // prevent overriding variable
           corsArg.slice(0, 0);
@@ -79,10 +87,15 @@ export const Controller = (): ReactElement => {
 
   const start = async () => {
     const images = await ddClient.docker.listImages() as [DockerImage];
-    const haveLocally = images.some(image => image.RepoTags?.at(0) === LATEST_IMAGE);
+
+    const isPro = runConfigs.find(config => config.name === runningConfig)
+      .vars.some(item => item.variable === 'LOCALSTACK_API_KEY');
+
+    const imageToUse = isPro ? PRO_IMAGE : IMAGE;
+    const haveLocally = images.some(image => removeTagFromImage(image) === imageToUse);
 
     if (!haveLocally) {
-      setDownloadProps({ open: true, image: LATEST_IMAGE });
+      setDownloadProps({ open: true, image: imageToUse });
       return;
     }
     const args = await normalizeArguments();
@@ -164,7 +177,7 @@ export const Controller = (): ReactElement => {
                 onChange={({ target }) => setRunningConfig(target.value)}
               >
                 {
-                  runConfig?.map(config => (
+                  runConfigs?.map(config => (
                     <MenuItem key={config.id} value={config.name}>{config.name}</MenuItem>
                   ))
                 }

ui/src/components/Views/Configs/ConfigPage.tsx

@@ -4,7 +4,7 @@ import React, { ReactElement, useState } from 'react';
 import { createStyles, makeStyles } from '@mui/styles';
 import { DataGrid, GridColDef, GridRenderCellParams } from '@mui/x-data-grid';
 import { v4 as uuid } from 'uuid';
-import { useMountPoint, useRunConfig } from '../../../services';
+import { useMountPoint, useRunConfigs } from '../../../services';
 import { DEFAULT_CONFIGURATION_ID } from '../../../constants';
 import { RunConfig, Optional } from '../../../types';
 import { ConfirmableButton } from '../../Feedback';
@@ -18,7 +18,7 @@ const useStyles = makeStyles((theme: Theme) => createStyles({
 
 export const ConfigPage = (): ReactElement => {
 
-  const { runConfig, deleteConfig } = useRunConfig();
+  const { runConfigs, deleteConfig } = useRunConfigs();
   const mountPoint = useMountPoint();
   const [openModal, setOpenModal] = useState<boolean>(false);
   const [targetConfig, setTargetConfig] = useState<RunConfig | null>(null);
@@ -89,7 +89,7 @@ export const ConfigPage = (): ReactElement => {
       <Box sx={{ marginTop: 3 }}>
         <DataGrid
           autoHeight
-          rows={runConfig.filter(config => config.id !== DEFAULT_CONFIGURATION_ID)}
+          rows={runConfigs.filter(config => config.id !== DEFAULT_CONFIGURATION_ID)}
           columns={columns}
           getRowId={(row) => (row).id as string || uuid()}
           disableSelectionOnClick

ui/src/components/Views/Configs/UpsertConfig.tsx

@@ -15,7 +15,7 @@ import { Add, Remove, Settings } from '@mui/icons-material';
 import React, { ReactElement, useState } from 'react';
 import { v4 as uuid } from 'uuid';
 import { createStyles, makeStyles } from '@mui/styles';
-import { useRunConfig } from '../../../services/hooks';
+import { useRunConfigs } from '../../../services/hooks';
 import { RunConfig } from '../../../types';
 
 const DEFAULT_COLUMN_WIDTH = 2000;
@@ -38,7 +38,7 @@ const useStyles = makeStyles((theme: Theme) => createStyles({
 
 export const UpsertConfig = ({ config, open, onClose }: Props): ReactElement => {
 
-  const { updateConfig } = useRunConfig();
+  const { updateConfig } = useRunConfigs();
   const [newVar, setNewVar] = useState<string>('');
   const [newValue, setNewValue] = useState<string>('');
   const [configName, setConfigName] = useState<string>(config?.name || '');

ui/src/constants/common.ts

@@ -1,3 +1,4 @@
 export const DEFAULT_CONFIGURATION_ID='00000000-0000-0000-0000-000000000000';
 export const CORS_ALLOW_DEFAULT='http://localhost:3000';
-export const LATEST_IMAGE = 'localstack/localstack:latest';
+export const IMAGE = 'localstack/localstack';
+export const PRO_IMAGE = 'localstack/localstack-pro';

ui/src/services/hooks/api.ts

@@ -4,8 +4,8 @@ import { DockerContainer, mountPointData, RunConfig } from '../../types';
 import { isALocalStackContainer, isJson } from '../util';
 import { useDDClient } from './utils';
 
-interface useRunConfigReturn {
-  runConfig: RunConfig[],
+interface useRunConfigsReturn {
+  runConfigs: RunConfig[],
   isLoading: boolean,
   createConfig: (data: RunConfig) => unknown;
   updateConfig: (data: RunConfig) => unknown;
@@ -16,7 +16,7 @@ interface HTTPMessageBody {
   Message: string,
 }
 
-export const useRunConfig = (): useRunConfigReturn => {
+export const useRunConfigs = (): useRunConfigsReturn => {
   const cacheKey = STORAGE_KEY_ENVVARS;
   const ddClient = useDDClient();
   const { data, mutate, isValidating, error } = useSWR(
@@ -40,7 +40,7 @@ export const useRunConfig = (): useRunConfigReturn => {
   };
 
   return {
-    runConfig: (!data || !data?.Message || error) ? [] : JSON.parse(data?.Message),
+    runConfigs: (!data || !data?.Message || error) ? [] : JSON.parse(data?.Message),
     isLoading: isValidating || (!error && !data),
     createConfig,
     updateConfig,

ui/src/services/util/containers.ts

@@ -1,4 +1,4 @@
-import { DockerContainer } from '../../types';
+import { DockerContainer, DockerImage } from '../../types';
 
 /**
  * Removes repo from image identifier 
@@ -10,6 +10,9 @@ export function removeRepoFromImage(repoTag: string) {
   return repoTag.split('/').at(-1);
 }
 
+export function removeTagFromImage(image: DockerImage){
+  return image.RepoTags[0].split(':').slice(0, -1).join(':');
+}
 
 export const isALocalStackContainer = (container: DockerContainer) =>
   (container.Image === 'localstack/localstack' || container.Image === 'localstack/localstack-pro');