fix: white screen crash for custom Docker tags

Author: Bogdan Tsechoev

ui/packages/shared/pages/Instance/Configuration/index.tsx

@@ -5,7 +5,7 @@
  *--------------------------------------------------------------------------
  */
 
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useMemo } from 'react'
 import { observer } from 'mobx-react-lite'
 import Editor from '@monaco-editor/react'
 import {
@@ -35,6 +35,9 @@ import {
   uniqueChipValue,
   customOrGenericImage,
   genericDockerImages,
+  getImageMajorVersion,
+  createFallbackDockerImage,
+  createEnhancedDockerImages,
 } from './utils'
 import {
   SelectWithTooltip,
@@ -194,6 +197,32 @@ export const Configuration = observer(
     const [{ formik, connectionData, isConnectionDataValid }] =
       useForm(onSubmit)
 
+    // Memoized enhanced Docker images to avoid recreation on every render
+    // This combines predefined images with any custom image from configuration
+    const enhancedDockerImages = useMemo(() => {
+      return createEnhancedDockerImages(
+        configData?.dockerImageType === 'Generic Postgres' ? configData?.dockerPath : undefined,
+        configData?.dockerImageType === 'Generic Postgres' ? configData?.dockerTag : undefined
+      )
+    }, [configData?.dockerPath, configData?.dockerTag, configData?.dockerImageType])
+
+    // Memoized computed values from enhanced images
+    const dockerImageVersions = useMemo(() => {
+      return enhancedDockerImages
+        .map((image) => image.pg_major_version)
+        .filter((value, index, self) => self.indexOf(value) === index)
+        .sort((a, b) => Number(a) - Number(b))
+    }, [enhancedDockerImages])
+
+    // Memoized tags and locations for performance
+    const dockerTags = useMemo(() => {
+      return enhancedDockerImages.map((image) => image.tag)
+    }, [enhancedDockerImages])
+
+    const dockerLocations = useMemo(() => {
+      return enhancedDockerImages.map((image) => image.location)
+    }, [enhancedDockerImages])
+
     const scrollToField = () => {
       const errorElement = document.querySelector('.Mui-error')
       if (errorElement) {
@@ -457,30 +486,23 @@ export const Configuration = observer(
       e: React.ChangeEvent<HTMLInputElement>,
     ) => {
       if (e.target.value === 'Generic Postgres') {
-        const genericImageVersions = genericDockerImages
-          .map((image) => image.pg_major_version)
-          .filter((value, index, self) => self.indexOf(value) === index)
-          .sort((a, b) => Number(a) - Number(b))
-        const currentDockerImage = genericImageVersions.slice(-1)[0]
+        // Use memoized enhanced list for better performance
+        const currentDockerImage = dockerImageVersions.slice(-1)[0]
 
         setDockerState({
           ...dockerState,
-          tags: genericDockerImages
-            .map((image) => image.tag)
-            .filter((tag) => tag.startsWith(currentDockerImage)),
-          locations: genericDockerImages
-            .map((image) => image.location)
-            .filter((location) => location?.includes(currentDockerImage)),
-          images: genericImageVersions,
-          data: genericDockerImages,
+          tags: dockerTags.filter((tag) => tag.startsWith(currentDockerImage)),
+          locations: dockerLocations.filter((location) => location?.includes(currentDockerImage)),
+          images: dockerImageVersions,
+          data: enhancedDockerImages,
         })
 
         formik.setValues({
           ...formik.values,
           dockerImage: currentDockerImage,
           dockerImageType: e.target.value,
-          dockerTag: genericDockerImages.map((image) => image.tag)[0],
-          dockerPath: genericDockerImages.map((image) => image.location)[0],
+          dockerTag: dockerTags[0],
+          dockerPath: dockerLocations[0],
           sharedPreloadLibraries:
             'pg_stat_statements,pg_stat_kcache,pg_cron,pgaudit,anon',
         })
@@ -520,16 +542,28 @@ export const Configuration = observer(
           tags: updatedDockerTags,
         })
 
-        const currentLocation = dockerState.data.find(
-          (image) => image.tag === updatedDockerTags[0],
-        )?.location as string
+        // Add safety check for empty array
+        const firstTag = updatedDockerTags[0]
+        if (firstTag) {
+          const currentLocation = dockerState.data.find(
+            (image) => image.tag === firstTag,
+          )?.location
 
-        formik.setValues({
-          ...formik.values,
-          dockerTag: updatedDockerTags[0],
-          dockerImage: e.target.value,
-          dockerPath: currentLocation,
-        })
+          formik.setValues({
+            ...formik.values,
+            dockerTag: firstTag,
+            dockerImage: e.target.value,
+            dockerPath: currentLocation || '',
+          })
+        } else {
+          // Fallback when no matching tags found
+          formik.setValues({
+            ...formik.values,
+            dockerImage: e.target.value,
+            dockerTag: '',
+            dockerPath: '',
+          })
+        }
       } else {
         formik.setValues({
           ...formik.values,
@@ -553,41 +587,46 @@ export const Configuration = observer(
 
           if (customOrGenericImage(configData?.dockerImageType)) {
             if (configData?.dockerImageType === 'Generic Postgres') {
-              const genericImageVersions = genericDockerImages
-                .map((image) => image.pg_major_version)
-                .filter((value, index, self) => self.indexOf(value) === index)
-                .sort((a, b) => Number(a) - Number(b))
-              const currentDockerImage =
-                genericDockerImages.filter(
-                  (image) => image.location === configData?.dockerPath,
-                )[0] ||
-                genericDockerImages.filter((image) =>
-                  configData?.dockerPath?.includes(image.pg_major_version),
-                )[0]
+              // Use memoized enhanced list for better performance
+              const currentDockerImage = enhancedDockerImages.find(
+                (image) => image.location === configData?.dockerPath || image.tag === configData?.dockerTag
+              )
 
-              setDockerState({
-                ...dockerState,
-                tags: genericDockerImages
-                  .map((image) => image.tag)
-                  .filter((tag) =>
+              if (currentDockerImage) {
+                setDockerState({
+                  ...dockerState,
+                  tags: dockerTags.filter((tag) =>
                     tag.startsWith(currentDockerImage.pg_major_version),
                   ),
-                images: genericImageVersions,
-                data: genericDockerImages,
-              })
+                  images: dockerImageVersions,
+                  data: enhancedDockerImages,
+                })
 
-              formik.setFieldValue('dockerTag', currentDockerImage?.tag)
-              formik.setFieldValue(
-                'dockerImage',
-                currentDockerImage.pg_major_version,
-              )
+                formik.setFieldValue('dockerTag', currentDockerImage.tag)
+                formik.setFieldValue('dockerImage', currentDockerImage.pg_major_version)
+                formik.setFieldValue('dockerPath', currentDockerImage.location)
+              } else {
+                // Fallback: shouldn't happen with enhancedDockerImages, but keep for safety
+                const fallbackVersion = dockerImageVersions.slice(-1)[0]
+                
+                setDockerState({
+                  ...dockerState,
+                  tags: dockerTags.filter((tag) => tag.startsWith(fallbackVersion)),
+                  images: dockerImageVersions,
+                  data: enhancedDockerImages,
+                })
+
+                formik.setFieldValue('dockerTag', configData?.dockerTag || '')
+                formik.setFieldValue('dockerImage', fallbackVersion)
+                formik.setFieldValue('dockerPath', configData?.dockerPath || '')
+              }
             } else {
               formik.setFieldValue('dockerImage', configData?.dockerPath)
             }
           }
         }
       }
-    }, [config])
+    }, [config, configData?.dockerPath, configData?.dockerTag, configData?.dockerImageType])
 
     useEffect(() => {
       getEngine(instanceId).then((res) => {

ui/packages/shared/pages/Instance/Configuration/utils/index.ts

@@ -5,7 +5,10 @@ import { FormValues } from '../useForm'
 
 const seContainerRegistry = 'se-images'
 const genericImagePrefix = 'postgresai/extended-postgres'
-// since some tags are rc, we need to specify the exact tags to use
+// Predefined list of Docker images for UI display
+// This list is shown to users for convenient selection
+// IMPORTANT: if user specified an image in config that's not in this list,
+// it will be automatically added via createEnhancedDockerImages()
 const dockerImagesConfig = {
   '9.6': ['0.5.3', '0.5.2', '0.5.1'],
   '10': ['0.5.3', '0.5.2', '0.5.1'],
@@ -110,11 +113,22 @@ export const getImageType = (imageUrl: string) => {
 }
 
 export const getImageMajorVersion = (pgImage: string | undefined) => {
-  const pgImageVersion = pgImage?.split(':')[1]
-  const pgServerVersion = pgImageVersion?.split('-')[0]
-  return pgServerVersion?.includes('.')
-    ? pgServerVersion?.split('.')[0]
-    : pgServerVersion
+  if (!pgImage) return undefined
+  
+  try {
+    const pgImageVersion = pgImage.split(':')[1]
+    if (!pgImageVersion) return undefined
+    
+    const pgServerVersion = pgImageVersion.split('-')[0]
+    if (!pgServerVersion) return undefined
+    
+    return pgServerVersion.includes('.')
+      ? pgServerVersion.split('.')[0]
+      : pgServerVersion
+  } catch (error) {
+    // Return undefined for malformed image strings
+    return undefined
+  }
 }
 
 export const formatDatabases = (databases: DatabaseType | null) => {
@@ -151,3 +165,71 @@ export const postUniqueCustomOptions = (options: string) => {
 
 export const customOrGenericImage = (dockerImage: string | undefined) =>
   dockerImage === 'Generic Postgres' || dockerImage === 'custom'
+
+export const createFallbackDockerImage = (
+  dockerPath: string,
+  dockerTag: string,
+): DockerImage => {
+  const majorVersion = getImageMajorVersion(dockerPath) || '17' // Default to 17 if version can't be extracted
+  
+  return {
+    package_group: 'postgresai',
+    pg_major_version: majorVersion,
+    tag: dockerTag || `${majorVersion}-custom`,
+    location: dockerPath,
+  }
+}
+
+// Creates enhanced list of Docker images, including image from configuration
+export const createEnhancedDockerImages = (
+  configDockerPath?: string,
+  configDockerTag?: string,
+): DockerImage[] => {
+  let enhancedImages = [...genericDockerImages]
+
+  // If there's an image in config, check if we need to add it
+  if (configDockerPath && configDockerTag) {
+    const existingImage = genericDockerImages.find(
+      (image) => image.location === configDockerPath || image.tag === configDockerTag
+    )
+
+    // If image not found in predefined list, add it
+    if (!existingImage) {
+      // Check if this is a Generic Postgres image
+      if (configDockerPath.includes(genericImagePrefix)) {
+        // For Generic Postgres images create proper structure
+        const majorVersion = getImageMajorVersion(configDockerPath)
+        if (majorVersion) {
+          const configImage: DockerImage = {
+            package_group: 'postgresai',
+            pg_major_version: majorVersion,
+            tag: configDockerTag,
+            location: configDockerPath,
+          }
+          enhancedImages.push(configImage)
+        } else {
+          // Fallback if version extraction failed
+          const configImage = createFallbackDockerImage(configDockerPath, configDockerTag)
+          enhancedImages.push(configImage)
+        }
+      } else {
+        // For custom images use fallback
+        const configImage = createFallbackDockerImage(configDockerPath, configDockerTag)
+        enhancedImages.push(configImage)
+      }
+    }
+  }
+
+  return enhancedImages
+}
+
+// Checks if image is loaded from configuration (not from predefined list)
+export const isConfigLoadedImage = (
+  dockerPath: string,
+  dockerTag: string,
+): boolean => {
+  const existingImage = genericDockerImages.find(
+    (image) => image.location === dockerPath || image.tag === dockerTag
+  )
+  return !existingImage
+}

ui/packages/shared/types/api/entities/config.ts

@@ -63,12 +63,15 @@ export const formatConfig = (config: configTypes) => {
     debug: config.global?.debug,
     dockerImage: isSeDockerImage(dockerImage)
       ? getImageMajorVersion(dockerImage)
+      : dockerImage && getImageType(dockerImage) === 'Generic Postgres'
+      ? getImageMajorVersion(dockerImage) || dockerImage
       : dockerImage,
     ...(dockerImage && {
       dockerImageType: getImageType(dockerImage),
     }),
-    ...(isSeDockerImage(dockerImage) && {
-      dockerTag: dockerImage?.split(':')[1],
+    // Extract dockerTag for both SE images and Generic Postgres images
+    ...(dockerImage && dockerImage.includes(':') && {
+      dockerTag: dockerImage.split(':')[1],
     }),
     dockerPath: dockerImage,
     tuningParams: formatTuningParams(config.databaseConfigs?.configs),