@postgres.ai/shared 4.1.2 → 4.2.0

package/pages/Instance/Configuration/index.tsx

@@ -5,7 +5,7 @@
  *--------------------------------------------------------------------------
  */
 
-import { useState, useEffect, useMemo } from 'react'
+import { useState, useEffect, useMemo, useRef } from 'react'
 import { observer } from 'mobx-react-lite'
 import Editor from '@monaco-editor/react'
 import {
@@ -15,6 +15,10 @@ import {
   Snackbar,
   makeStyles,
   Button,
+  Tab,
+  Tabs,
+  Radio,
+  RadioGroup,
 } from '@material-ui/core'
 import Box from '@mui/material/Box'
 
@@ -45,6 +49,10 @@ import {
   InputWithTooltip,
 } from './InputWithTooltip'
 
+import { SimpleMode, buildProjectionFromProposed } from './SimpleMode'
+import { ConfigMode, getInitialConfigMode } from './configMode'
+import { PhysicalMode } from './PhysicalMode'
+
 import styles from './styles.module.scss'
 import { SeImages } from '@postgres.ai/shared/types/api/endpoints/getSeImages'
 import {
@@ -58,8 +66,6 @@ type PgOptionsType = {
   pgRestoreOptions: string[]
 }
 
-const NON_LOGICAL_RETRIEVAL_MESSAGE =
-  'Configuration editing is only available in logical mode'
 const PREVENT_MODIFYING_MESSAGE = 'Editing is disabled by admin'
 
 const useStyles = makeStyles(
@@ -80,13 +86,11 @@ export const Configuration = observer(
     instanceId,
     switchActiveTab,
     reload,
-    isConfigurationActive,
     disableConfigModification,
   }: {
     instanceId: string
     switchActiveTab: (_: null, activeTab: number) => void
     reload: () => void
-    isConfigurationActive: boolean
     disableConfigModification?: boolean
   }) => {
     const classes = useStyles()
@@ -106,8 +110,7 @@ export const Configuration = observer(
 
     const configData: MainStore['config'] =
       config && JSON.parse(JSON.stringify(config))
-    const isConfigurationDisabled =
-      !isConfigurationActive || disableConfigModification
+    const isConfigurationDisabled = disableConfigModification
 
     const [dleEdition, setDledition] = useState('')
     const isCeEdition = dleEdition === 'community'
@@ -118,6 +121,25 @@ export const Configuration = observer(
         )
       : dockerImageOptions
 
+    const [userPickedMode, setUserPickedMode] = useState<ConfigMode | null>(
+      null,
+    )
+    // Seeded lazily — only once configData transitions from null to non-null.
+    // Prevents the Simple/Expert default from flipping mid-session when an
+    // Apply triggers a refetch and the recomputed default would differ.
+    const [initialMode, setInitialMode] = useState<ConfigMode | null>(null)
+    useEffect(() => {
+      if (initialMode === null && configData) {
+        setInitialMode(
+          getInitialConfigMode(configData.host, configData.retrievalMode),
+        )
+      }
+    }, [configData, initialMode])
+    const configMode: ConfigMode =
+      userPickedMode ?? initialMode ?? 'simple'
+    const setConfigMode = setUserPickedMode
+    const portInitFromConfig = useRef(false)
+
     const [isModalOpen, setIsModalOpen] = useState(false)
     const [submitState, setSubmitState] = useState({
       status: '',
@@ -172,6 +194,8 @@ export const Configuration = observer(
       await updateConfig(
         {
           ...values,
+          // Preserve configs that originally had no port: key.
+          ...(omitPortOnSubmit && { port: '' }),
           tuningParams: formatTuningParamsToObj(
             values.tuningParams,
           ) as unknown as string,
@@ -194,8 +218,18 @@ export const Configuration = observer(
         }
       })
     }
-    const [{ formik, connectionData, isConnectionDataValid }] =
-      useForm(onSubmit)
+    const [
+      {
+        formik,
+        connectionData,
+        isConnectionDataValid,
+        connectionString,
+        connectionStringError,
+        onConnectionStringChange,
+        markPortInitialState,
+        omitPortOnSubmit,
+      },
+    ] = useForm(onSubmit)
 
     // Memoized enhanced Docker images to avoid recreation on every render
     // This combines predefined images with any custom image from configuration
@@ -578,6 +612,12 @@ export const Configuration = observer(
     // Set initial data, empty string for password
     useEffect(() => {
       if (configData) {
+        if (!portInitFromConfig.current) {
+          markPortInitialState(
+            configData.port == null || configData.port === '',
+          )
+          portInitFromConfig.current = true
+        }
         for (const [key, value] of Object.entries(configData)) {
           if (key !== 'password') {
             formik.setFieldValue(key, value)
@@ -681,9 +721,7 @@ export const Configuration = observer(
           message={
             Boolean(dockerState.error)
               ? dockerState.error
-              : disableConfigModification
-              ? PREVENT_MODIFYING_MESSAGE
-              : NON_LOGICAL_RETRIEVAL_MESSAGE
+              : PREVENT_MODIFYING_MESSAGE
           }
           className={styles.snackbar}
         />
@@ -693,7 +731,37 @@ export const Configuration = observer(
           </div>
         ) : (
           <Box>
-            <Header retrievalMode="logical" setOpen={handleModalClick} />
+            <Header
+              retrievalMode={formik.values.retrievalMode}
+              setOpen={handleModalClick}
+            />
+            <Tabs
+              value={configMode}
+              onChange={(_, value: ConfigMode) => setConfigMode(value)}
+              indicatorColor="primary"
+              textColor="primary"
+              aria-label="Configuration mode"
+            >
+              <Tab value="simple" label="Simple" />
+              <Tab value="expert" label="Expert" />
+            </Tabs>
+            {configMode === 'simple' ? (
+              <SimpleMode
+                instanceId={instanceId}
+                disabled={isConfigurationDisabled}
+                onApplied={switchTab}
+                onEdit={(proposed, password) => {
+                  const projection = buildProjectionFromProposed(
+                    proposed,
+                    password,
+                  )
+                  formik.setValues({ ...formik.values, ...projection })
+                  setConfigMode('expert')
+                }}
+              />
+            ) : null}
+            {configMode === 'expert' ? (
+            <>
             <Box>
               <Box>
                 <FormControlLabel
@@ -715,6 +783,45 @@ export const Configuration = observer(
               </Box>
               <Box mb={1} mt={1}>
                 <ConfigSectionTitle tag="retrieval" />
+                <Box mt={1} mb={1}>
+                  <Typography className={styles.subsection}>
+                    Retrieval mode
+                  </Typography>
+                  <RadioGroup
+                    row
+                    aria-label="retrieval mode"
+                    value={formik.values.retrievalMode}
+                    onChange={(_, value) => {
+                      formik.setFieldValue('retrievalMode', value)
+                    }}
+                  >
+                    <FormControlLabel
+                      value="logical"
+                      control={<Radio disabled={isConfigurationDisabled} />}
+                      label="Logical (dump/restore)"
+                    />
+                    <FormControlLabel
+                      value="physical"
+                      control={<Radio disabled={isConfigurationDisabled} />}
+                      label="Physical (WAL-G / pgBackRest)"
+                    />
+                  </RadioGroup>
+                </Box>
+                {formik.values.retrievalMode === 'physical' && (
+                  <PhysicalMode
+                    values={formik.values}
+                    onChange={(key, value) =>
+                      formik.setFieldValue(key, value, key === 'physicalEnvs')
+                    }
+                    disabled={isConfigurationDisabled}
+                    envsKeyErrors={(
+                      formik.errors.physicalEnvs as
+                        | Array<{ key?: string } | undefined>
+                        | undefined
+                    )?.map((row) => row?.key)}
+                  />
+                )}
+                {formik.values.retrievalMode === 'logical' && (
                 <Box mt={1}>
                   <Typography className={styles.subsection}>
                     Subsection "retrieval.spec.logicalDump"
@@ -723,35 +830,35 @@ export const Configuration = observer(
                     Source database credentials and dumping options.
                   </span>
                   <InputWithTooltip
-                    label="source.connection.host *"
-                    value={formik.values.host}
-                    error={formik.errors.host}
-                    tooltipText={tooltipText.host}
-                    disabled={isConfigurationDisabled}
-                    onChange={(e) =>
-                      formik.setFieldValue('host', e.target.value)
+                    label="Connection string *"
+                    value={connectionString}
+                    error={
+                      connectionStringError ||
+                      formik.errors.host ||
+                      formik.errors.username ||
+                      formik.errors.dbname
                     }
-                  />
-                  <InputWithTooltip
-                    label="source.connection.port *"
-                    value={formik.values.port}
-                    error={formik.errors.port}
-                    tooltipText={tooltipText.port}
+                    tooltipText={() => (
+                      <>
+                        URI form: <code>postgres://user@host:5432/dbname</code>
+                        . DSN form is also accepted. Do not include the
+                        password here — use the Password field below.
+                      </>
+                    )}
                     disabled={isConfigurationDisabled}
-                    onChange={(e) =>
-                      formik.setFieldValue('port', e.target.value)
-                    }
-                  />
-                  <InputWithTooltip
-                    label="source.connection.username *"
-                    value={formik.values.username}
-                    error={formik.errors.username}
-                    tooltipText={tooltipText.username}
-                    disabled={isConfigurationDisabled}
-                    onChange={(e) =>
-                      formik.setFieldValue('username', e.target.value)
-                    }
+                    onChange={(e) => onConnectionStringChange(e.target.value)}
                   />
+                  <Box mt={0.5} mb={1}>
+                    <span
+                      className={classes.grayText}
+                      data-testid="connection-string-parsed"
+                    >
+                      host: {formik.values.host || '—'} | port:{' '}
+                      {formik.values.port || '5432 (default)'} | user:{' '}
+                      {formik.values.username || '—'} | dbname:{' '}
+                      {formik.values.dbname || '—'}
+                    </span>
+                  </Box>
                   <InputWithTooltip
                     type="password"
                     value={formik.values.password}
@@ -762,16 +869,6 @@ export const Configuration = observer(
                       formik.setFieldValue('password', e.target.value)
                     }
                   />
-                  <InputWithTooltip
-                    label="source.connection.dbname *"
-                    value={formik.values.dbname}
-                    error={formik.errors.dbname}
-                    tooltipText={tooltipText.dbname}
-                    disabled={isConfigurationDisabled}
-                    onChange={(e) =>
-                      formik.setFieldValue('dbname', e.target.value)
-                    }
-                  />
                   <InputWithChip
                     id="databases"
                     value={formik.values.databases}
@@ -863,6 +960,7 @@ export const Configuration = observer(
                     label={'Ignore errors during logical data dump'}
                   />
                 </Box>
+                )}
               </Box>
               <Box mb={2} mt={1}>
                 <ConfigSectionTitle tag="databaseContainer" />
@@ -1090,6 +1188,7 @@ export const Configuration = observer(
                   />
                 ) : null}
               </Box>
+              {formik.values.retrievalMode === 'logical' && (
               <Box>
                 <Box>
                   <Typography className={styles.subsection}>
@@ -1151,6 +1250,7 @@ export const Configuration = observer(
                   label={'Ignore errors during logical data restore'}
                 />
               </Box>
+              )}
               <Box mt={1}>
                 <Typography className={styles.subsection}>
                   Subsection "retrieval.refresh"
@@ -1219,6 +1319,8 @@ export const Configuration = observer(
                 message={configError || submitState.response}
               />
             ) : null}
+            </>
+            ) : null}
           </Box>
         )}
         <Modal

package/pages/Instance/Configuration/useForm.ts

@@ -5,9 +5,20 @@
  *--------------------------------------------------------------------------
  */
 
+import { useMemo, useState } from 'react'
 import { useFormik } from 'formik'
 import * as Yup from 'yup'
 
+import {
+  ConnectionStringError,
+  connectionStringFromFields,
+  connectionStringToFields,
+} from './connectionString'
+
+export type RetrievalMode = 'logical' | 'physical'
+export type PhysicalTool = 'walg' | 'pgbackrest' | 'customTool' | ''
+export type PhysicalEnv = { key: string; value: string }
+
 export type FormValues = {
   debug: boolean
   dockerImage: string
@@ -31,14 +42,72 @@ export type FormValues = {
   restoreConfigs: string
   pgDumpCustomOptions: string
   pgRestoreCustomOptions: string
+  retrievalMode: RetrievalMode
+  physicalTool: PhysicalTool
+  physicalDockerImage: string
+  physicalSyncEnabled: boolean
+  physicalWalgBackupName: string
+  physicalPgbackrestStanza: string
+  physicalPgbackrestDelta: boolean
+  physicalEnvs: PhysicalEnv[]
 }
 
+// Logical-mode required fields. Validation skips the source-connection block
+// when retrievalMode is "physical" — that branch uses tool-specific inputs
+// instead of a connection URL.
 const Schema = Yup.object().shape({
   dockerImage: Yup.string().required('Docker image is required'),
-  dbname: Yup.string().required('Dbname is required'),
-  host: Yup.string().required('Host is required'),
-  port: Yup.string().required('Port is required'),
-  username: Yup.string().required('Username is required'),
+  dbname: Yup.string().when('retrievalMode', {
+    is: 'logical',
+    then: (s) => s.required('Dbname is required'),
+  }),
+  host: Yup.string().when('retrievalMode', {
+    is: 'logical',
+    then: (s) => s.required('Host is required'),
+  }),
+  port: Yup.string().when('retrievalMode', {
+    is: 'logical',
+    then: (s) => s.required('Port is required'),
+  }),
+  username: Yup.string().when('retrievalMode', {
+    is: 'logical',
+    then: (s) => s.required('Username is required'),
+  }),
+  physicalEnvs: Yup.array()
+    .of(
+      Yup.object().shape({
+        key: Yup.string(),
+        value: Yup.string(),
+      }),
+    )
+    .test('unique-keys', '', function (envs) {
+      if (!envs) return true
+
+      const positions = new Map<string, number[]>()
+      envs.forEach((row, i) => {
+        const trimmed = (row?.key ?? '').trim()
+        if (!trimmed) return
+        const list = positions.get(trimmed) ?? []
+        list.push(i)
+        positions.set(trimmed, list)
+      })
+
+      const dupes: Yup.ValidationError[] = []
+      for (const indices of positions.values()) {
+        if (indices.length < 2) continue
+        for (const i of indices) {
+          dupes.push(
+            this.createError({
+              path: `${this.path}[${i}].key`,
+              message: 'Duplicate key',
+            }),
+          )
+        }
+      }
+
+      if (dupes.length === 0) return true
+      return new Yup.ValidationError(dupes)
+    }),
 })
 
 export const useForm = (onSubmit: (values: FormValues) => void) => {
@@ -66,6 +135,14 @@ export const useForm = (onSubmit: (values: FormValues) => void) => {
       pgRestoreCustomOptions: '',
       dumpIgnoreErrors: false,
       restoreIgnoreErrors: false,
+      retrievalMode: 'logical',
+      physicalTool: '',
+      physicalDockerImage: '',
+      physicalSyncEnabled: false,
+      physicalWalgBackupName: '',
+      physicalPgbackrestStanza: '',
+      physicalPgbackrestDelta: false,
+      physicalEnvs: [],
     },
     validationSchema: Schema,
     onSubmit,
@@ -73,6 +150,67 @@ export const useForm = (onSubmit: (values: FormValues) => void) => {
     validateOnChange: false,
   })
 
+  const [originalPortWasUnset, setOriginalPortWasUnset] = useState(false)
+  const [portDirty, setPortDirty] = useState(false)
+  const [connectionStringError, setConnectionStringError] = useState<string | null>(null)
+
+  const connectionString = useMemo(
+    () =>
+      connectionStringFromFields(
+        {
+          host: formik.values.host,
+          port: formik.values.port || '5432',
+          username: formik.values.username,
+          dbname: formik.values.dbname,
+        },
+        { omitDefaultPort: originalPortWasUnset && !portDirty },
+      ),
+    [
+      formik.values.host,
+      formik.values.port,
+      formik.values.username,
+      formik.values.dbname,
+      originalPortWasUnset,
+      portDirty,
+    ],
+  )
+
+  const onConnectionStringChange = (s: string) => {
+    if (!s.trim()) {
+      setConnectionStringError(null)
+      formik.setValues({
+        ...formik.values,
+        host: '',
+        port: '',
+        username: '',
+        dbname: '',
+      })
+      return
+    }
+
+    try {
+      const parsed = connectionStringToFields(s)
+      setConnectionStringError(null)
+
+      if (parsed.portWasExplicit) setPortDirty(true)
+
+      formik.setValues({
+        ...formik.values,
+        host: parsed.fields.host,
+        port: parsed.fields.port,
+        username: parsed.fields.username,
+        dbname: parsed.fields.dbname,
+      })
+    } catch (err) {
+      if (err instanceof ConnectionStringError) setConnectionStringError(err.message)
+      else throw err
+    }
+  }
+
+  const markPortInitialState = (wasUnset: boolean) => setOriginalPortWasUnset(wasUnset)
+  const markPortDirty = () => setPortDirty(true)
+  const omitPortOnSubmit = originalPortWasUnset && !portDirty
+
   const formatDatabaseArray = (database: string) => {
     let databases = []
     const splitDatabaseArray = database.split(/[,(\s)(\n)(\r)(\t)(\r\n)]/)
@@ -106,5 +244,17 @@ export const useForm = (onSubmit: (values: FormValues) => void) => {
     formik.values.username &&
     formik.values.dbname
 
-  return [{ formik, connectionData, isConnectionDataValid }]
+  return [
+    {
+      formik,
+      connectionData,
+      isConnectionDataValid,
+      connectionString,
+      connectionStringError,
+      onConnectionStringChange,
+      markPortInitialState,
+      markPortDirty,
+      omitPortOnSubmit,
+    },
+  ]
 }

package/pages/Instance/Configuration/utils/index.ts

@@ -1,26 +1,10 @@
 import { DatabaseType } from '@postgres.ai/shared/types/api/entities/config'
 
 import { dockerImageOptions } from '../configOptions'
+import { dockerImagesConfig, genericImagePrefix } from '../dockerCatalog'
 import { FormValues } from '../useForm'
 
 const seContainerRegistry = 'se-images'
-const genericImagePrefix = 'postgresai/extended-postgres'
-// 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'],
-  '11': ['0.5.3', '0.5.2', '0.5.1'],
-  '12': ['0.5.3', '0.5.2', '0.5.1'],
-  '13': ['0.5.3', '0.5.2', '0.5.1'],
-  '14': ['0.5.3', '0.5.2', '0.5.1'],
-  '15': ['0.5.3', '0.5.2', '0.5.1'],
-  '16': ['0.5.3', '0.5.2', '0.5.1'],
-  '17': ['0.5.3', '0.5.2', '0.5.1'],
-  '18': ['0.6.1'],
-}
 
 export type FormValuesKey = keyof FormValues
 

package/pages/Instance/Info/Snapshots/Calendar/Day/index.tsx

@@ -21,7 +21,7 @@ const useStyles = makeStyles(
       position: 'relative',
       cursor: 'default',
       flex: `0 0 ${CELL_SIZE}px`,
-      background: '#f4f4f4',
+      background: 'rgba(128, 128, 128, 0.1)',
       height: `${CELL_SIZE}px`,
       display: 'flex',
       borderRadius: `${CELL_SIZE / 2}px`,
@@ -31,7 +31,7 @@ const useStyles = makeStyles(
       fontSize: '12px',
     },
     rootHasSnapshots: {
-      background: colors.secondary2.lightLight,
+      background: 'rgba(15, 135, 157, 0.32)',
       cursor: 'pointer',
     },
     rootCurrent: {
@@ -46,7 +46,7 @@ const useStyles = makeStyles(
       right: '-6px',
       position: 'absolute',
       fontSize: '8px',
-      backgroundColor: colors.white,
+      backgroundColor: 'inherit',
       border: `1px solid ${colors.secondary2.lightLight}`,
       borderRadius: '8px',
       height: '16px',

package/pages/Instance/Snapshots/components/SnapshotsList/index.tsx

@@ -50,6 +50,16 @@ const useStyles = makeStyles(
     header: {
       fontWeight: 500,
     },
+    protectedBadge: {
+      marginLeft: '8px',
+      padding: '1px 6px',
+      fontSize: '11px',
+      fontWeight: 400,
+      color: '#1a7f37',
+      border: '1px solid #1a7f37',
+      borderRadius: '4px',
+      whiteSpace: 'nowrap',
+    },
     infoContent: {
       fontSize: '12px',
       color: '#808080',
@@ -139,7 +149,17 @@ const SnapshotListItem = ({
     <div className={classes.commitItem}>
       <div className={classes.gridContainer}>
         <div className={classes.infoBlock}>
-          <div className={classes.header}>{snapshot.message || '-'}</div>
+          <div className={classes.header}>
+            {snapshot.message || '-'}
+            {snapshot.protected && (
+              <span
+                className={classes.protectedBadge}
+                title="Protected from deletion"
+              >
+                Protected
+              </span>
+            )}
+          </div>
           <div className={classes.infoContent} title={snapshot.dataStateAt}>
             {timeAgo}
           </div>

package/pages/Instance/Snapshots/index.tsx

@@ -44,6 +44,10 @@ const useStyles = makeStyles(
   { index: 1 },
 )
 
+// listRefreshIntervalMs is how often the snapshot list is silently refreshed so background
+// auto-deletion does not leave stale rows in the list.
+const listRefreshIntervalMs = 30_000
+
 interface SnapshotsProps {
   instanceId: string
 }
@@ -97,11 +101,17 @@ export const Snapshots: React.FC<SnapshotsProps> = observer(
     }, [])
 
     useEffect(() => {
-      if (selectedBranch) {
-        stores.main.reloadSnapshots(
-          selectedBranch === 'All branches' ? '' : selectedBranch,
-        )
-      }
+      if (!selectedBranch) return
+
+      const branchName = selectedBranch === 'All branches' ? '' : selectedBranch
+
+      stores.main.reloadSnapshots(branchName)
+
+      const intervalId = setInterval(() => {
+        stores.main.reloadSnapshots(branchName, true)
+      }, listRefreshIntervalMs)
+
+      return () => clearInterval(intervalId)
     }, [selectedBranch])
 
     if (!instance && !snapshots.isLoading) return <></>