@postgres.ai/shared 4.1.2 → 4.2.0

package/pages/Instance/Configuration/PhysicalMode/EnvsEditor/index.tsx

@@ -0,0 +1,129 @@
+import { Button, IconButton, TextField, Typography } from '@material-ui/core'
+import Box from '@mui/material/Box'
+
+import { PhysicalEnv } from '../../useForm'
+
+type Props = {
+  envs: PhysicalEnv[]
+  onChange: (envs: PhysicalEnv[]) => void
+  suggestions?: string[]
+  disabled?: boolean
+  keyErrors?: (string | undefined)[]
+}
+
+// EnvsEditor renders a rows-of-key/value editor with add/remove and a
+// click-to-add suggestion list. Engine consumes envs as a free-form map
+// (physical.go:76, CopyOptions.Envs map[string]string); the UI is a thin
+// surface over that map.
+export const EnvsEditor = ({
+  envs,
+  onChange,
+  suggestions = [],
+  disabled,
+  keyErrors = [],
+}: Props) => {
+  const updateRow = (i: number, patch: Partial<PhysicalEnv>) => {
+    const next = envs.slice()
+    next[i] = { ...next[i], ...patch }
+    onChange(next)
+  }
+
+  const removeRow = (i: number) => {
+    const next = envs.slice()
+    next.splice(i, 1)
+    onChange(next)
+  }
+
+  const addRow = (key = '') => {
+    onChange([...envs, { key, value: '' }])
+  }
+
+  const usedKeys = new Set(envs.map((e) => e.key))
+
+  return (
+    <Box mt={1} data-testid="envs-editor">
+      <Typography variant="subtitle2">Environment variables</Typography>
+      {envs.length === 0 ? (
+        <Box mt={1} mb={1}>
+          <Typography variant="caption" color="textSecondary">
+            No environment variables set. Use suggestions below or click "Add".
+          </Typography>
+        </Box>
+      ) : (
+        envs.map((env, i) => (
+          <Box
+            key={i}
+            display="flex"
+            alignItems="center"
+            mt={1}
+            data-testid={`envs-row-${i}`}
+          >
+            <TextField
+              size="small"
+              label="Name"
+              value={env.key}
+              disabled={disabled}
+              error={Boolean(keyErrors[i])}
+              helperText={keyErrors[i]}
+              onChange={(e) => updateRow(i, { key: e.target.value })}
+              inputProps={{ 'data-testid': `envs-key-${i}` }}
+            />
+            <Box mx={1}>
+              <TextField
+                size="small"
+                label="Value"
+                value={env.value}
+                disabled={disabled}
+                onChange={(e) => updateRow(i, { value: e.target.value })}
+                inputProps={{ 'data-testid': `envs-value-${i}` }}
+              />
+            </Box>
+            <IconButton
+              size="small"
+              aria-label="remove env"
+              disabled={disabled}
+              onClick={() => removeRow(i)}
+              data-testid={`envs-remove-${i}`}
+            >
+              ×
+            </IconButton>
+          </Box>
+        ))
+      )}
+
+      <Box mt={1}>
+        <Button
+          size="small"
+          variant="outlined"
+          disabled={disabled}
+          onClick={() => addRow()}
+          data-testid="envs-add"
+        >
+          + Add
+        </Button>
+      </Box>
+
+      {suggestions.length > 0 && (
+        <Box mt={1}>
+          <Typography variant="caption" color="textSecondary">
+            Suggestions:
+          </Typography>
+          <Box mt={0.5}>
+            {suggestions.map((s) => (
+              <Button
+                key={s}
+                size="small"
+                variant="text"
+                disabled={disabled || usedKeys.has(s)}
+                onClick={() => addRow(s)}
+                data-testid={`envs-suggest-${s}`}
+              >
+                {s}
+              </Button>
+            ))}
+          </Box>
+        </Box>
+      )}
+    </Box>
+  )
+}

package/pages/Instance/Configuration/PhysicalMode/PgBackRest/index.tsx

@@ -0,0 +1,89 @@
+import {
+  Checkbox,
+  FormControlLabel,
+  TextField,
+  Typography,
+} from '@material-ui/core'
+import Box from '@mui/material/Box'
+
+import { FormValues, PhysicalEnv } from '../../useForm'
+import { EnvsEditor } from '../EnvsEditor'
+
+type Props = {
+  values: FormValues
+  onChange: <K extends keyof FormValues>(key: K, value: FormValues[K]) => void
+  disabled?: boolean
+  envsKeyErrors?: (string | undefined)[]
+}
+
+// pgBackRest exposes two structured fields (stanza, delta); repo paths, S3
+// keys, archive options all live in the envs map. See
+// engine/internal/retrieval/engine/postgres/physical/pgbackrest.go:23-26 and
+// the example envs in config.example.physical_pgbackrest.yml:84-99.
+const PGBACKREST_ENV_SUGGESTIONS = [
+  'PGBACKREST_REPO',
+  'PGBACKREST_REPO1_TYPE',
+  'PGBACKREST_REPO1_PATH',
+  'PGBACKREST_REPO1_HOST',
+  'PGBACKREST_REPO1_HOST_USER',
+  'PGBACKREST_REPO1_S3_BUCKET',
+  'PGBACKREST_REPO1_S3_ENDPOINT',
+  'PGBACKREST_REPO1_S3_KEY',
+  'PGBACKREST_REPO1_S3_KEY_SECRET',
+  'PGBACKREST_REPO1_S3_REGION',
+  'PGBACKREST_LOG_LEVEL_CONSOLE',
+  'PGBACKREST_PROCESS_MAX',
+]
+
+export const PgBackRest = ({
+  values,
+  onChange,
+  disabled,
+  envsKeyErrors,
+}: Props) => {
+  const onEnvsChange = (envs: PhysicalEnv[]) => onChange('physicalEnvs', envs)
+
+  return (
+    <Box mt={2} data-testid="pgbackrest-form">
+      <Typography variant="subtitle1">pgBackRest</Typography>
+      <Box mt={1}>
+        <TextField
+          fullWidth
+          label="Stanza"
+          placeholder="my-stanza"
+          value={values.physicalPgbackrestStanza}
+          disabled={disabled}
+          onChange={(e) => onChange('physicalPgbackrestStanza', e.target.value)}
+          helperText="Stanza name (must match the stanza configured in your pgBackRest setup)."
+          inputProps={{ 'data-testid': 'pgbackrest-stanza' }}
+        />
+      </Box>
+      <Box mt={1}>
+        <FormControlLabel
+          control={
+            <Checkbox
+              checked={values.physicalPgbackrestDelta}
+              disabled={disabled}
+              onChange={(e) =>
+                onChange('physicalPgbackrestDelta', e.target.checked)
+              }
+              inputProps={{
+                'aria-label': 'delta',
+                'data-testid': 'pgbackrest-delta',
+              } as React.InputHTMLAttributes<HTMLInputElement>}
+            />
+          }
+          label="Delta restore"
+        />
+      </Box>
+
+      <EnvsEditor
+        envs={values.physicalEnvs}
+        onChange={onEnvsChange}
+        suggestions={PGBACKREST_ENV_SUGGESTIONS}
+        disabled={disabled}
+        keyErrors={envsKeyErrors}
+      />
+    </Box>
+  )
+}

package/pages/Instance/Configuration/PhysicalMode/Sync/index.tsx

@@ -0,0 +1,64 @@
+import {
+  Checkbox,
+  FormControlLabel,
+  TextField,
+  Typography,
+} from '@material-ui/core'
+import Box from '@mui/material/Box'
+
+import { FormValues } from '../../useForm'
+
+type Props = {
+  values: FormValues
+  onChange: <K extends keyof FormValues>(key: K, value: FormValues[K]) => void
+  disabled?: boolean
+}
+
+// Shared section rendered below WAL-G / pgBackRest with the structured fields
+// that apply across all physical sub-tools (sync.enabled and dockerImage). The
+// engine surfaces more knobs (sync.healthCheck, sync.configs, recovery target,
+// custom restore command), but they remain YAML-only for 4.2 to keep the
+// projection footprint flat.
+export const Sync = ({ values, onChange, disabled }: Props) => {
+  return (
+    <Box mt={2} data-testid="physical-sync">
+      <Typography variant="subtitle1">Sync container & image</Typography>
+      <Box mt={1}>
+        <TextField
+          fullWidth
+          label="Docker image"
+          placeholder="postgresai/extended-postgres:18-0.6.2"
+          value={values.physicalDockerImage}
+          disabled={disabled}
+          onChange={(e) => onChange('physicalDockerImage', e.target.value)}
+          helperText="Postgres image for restore/sync containers. Major version must match the source."
+          inputProps={{ 'data-testid': 'physical-docker-image' }}
+        />
+      </Box>
+      <Box mt={1}>
+        <FormControlLabel
+          control={
+            <Checkbox
+              checked={values.physicalSyncEnabled}
+              disabled={disabled}
+              onChange={(e) =>
+                onChange('physicalSyncEnabled', e.target.checked)
+              }
+              inputProps={{
+                'aria-label': 'sync enabled',
+                'data-testid': 'physical-sync-enabled',
+              } as React.InputHTMLAttributes<HTMLInputElement>}
+            />
+          }
+          label="Run sync container"
+        />
+      </Box>
+      <Box mt={1}>
+        <Typography variant="caption" color="textSecondary">
+          For advanced sync settings (health check, sync postgres configs,
+          recovery target), edit the YAML config directly.
+        </Typography>
+      </Box>
+    </Box>
+  )
+}

package/pages/Instance/Configuration/PhysicalMode/Walg/index.tsx

@@ -0,0 +1,63 @@
+import { TextField, Typography } from '@material-ui/core'
+import Box from '@mui/material/Box'
+
+import { FormValues, PhysicalEnv } from '../../useForm'
+import { EnvsEditor } from '../EnvsEditor'
+
+type Props = {
+  values: FormValues
+  onChange: <K extends keyof FormValues>(key: K, value: FormValues[K]) => void
+  disabled?: boolean
+  envsKeyErrors?: (string | undefined)[]
+}
+
+// WAL-G has one structured field (BackupName, defaulting to "LATEST"); storage
+// backend, bucket, prefix, and credentials all live in the envs map. See
+// engine/internal/retrieval/engine/postgres/physical/wal_g.go:36-38 and the
+// example envs in config.example.physical_walg.yml:84-86.
+const WALG_ENV_SUGGESTIONS = [
+  'WALG_GS_PREFIX',
+  'WALG_S3_PREFIX',
+  'WALG_FILE_PREFIX',
+  'GOOGLE_APPLICATION_CREDENTIALS',
+  'AWS_ACCESS_KEY_ID',
+  'AWS_SECRET_ACCESS_KEY',
+  'AWS_REGION',
+]
+
+export const Walg = ({ values, onChange, disabled, envsKeyErrors }: Props) => {
+  const onEnvsChange = (envs: PhysicalEnv[]) => onChange('physicalEnvs', envs)
+
+  return (
+    <Box mt={2} data-testid="walg-form">
+      <Typography variant="subtitle1">WAL-G</Typography>
+      <Box mt={1}>
+        <TextField
+          fullWidth
+          label="Backup name"
+          placeholder="LATEST"
+          value={values.physicalWalgBackupName}
+          disabled={disabled}
+          onChange={(e) => onChange('physicalWalgBackupName', e.target.value)}
+          helperText='Which backup to restore. "LATEST" picks the most recent.'
+          inputProps={{ 'data-testid': 'walg-backup-name' }}
+        />
+      </Box>
+
+      <Box mt={2}>
+        <Typography variant="caption" color="textSecondary">
+          Storage backend, bucket, prefix, and credentials all live in the envs
+          map. Do not paste credentials into the backup name field or any URL.
+        </Typography>
+      </Box>
+
+      <EnvsEditor
+        envs={values.physicalEnvs}
+        onChange={onEnvsChange}
+        suggestions={WALG_ENV_SUGGESTIONS}
+        disabled={disabled}
+        keyErrors={envsKeyErrors}
+      />
+    </Box>
+  )
+}

package/pages/Instance/Configuration/PhysicalMode/index.tsx

@@ -0,0 +1,93 @@
+import {
+  FormControl,
+  FormControlLabel,
+  Radio,
+  RadioGroup,
+  Typography,
+} from '@material-ui/core'
+import Box from '@mui/material/Box'
+
+import { FormValues, PhysicalTool } from '../useForm'
+import { PgBackRest } from './PgBackRest'
+import { Sync } from './Sync'
+import { Walg } from './Walg'
+
+type Props = {
+  values: FormValues
+  onChange: <K extends keyof FormValues>(key: K, value: FormValues[K]) => void
+  disabled?: boolean
+  envsKeyErrors?: (string | undefined)[]
+}
+
+// Physical-mode restore tool selector + sub-form. Two values surface in the
+// UI: WAL-G and pgBackRest, the two tool values the engine accepts outside
+// customTool. pg_basebackup is invoked via the customTool path and remains
+// YAML-only; when the loaded projection has `tool: customTool` we render a
+// banner instead of the sub-form, keeping the user from accidentally wiping a
+// hand-edited customTool config.
+export const PhysicalMode = ({
+  values,
+  onChange,
+  disabled,
+  envsKeyErrors,
+}: Props) => {
+  const tool = values.physicalTool
+  const isCustomTool = tool === 'customTool'
+
+  return (
+    <Box mt={1} data-testid="physical-mode">
+      <Typography variant="subtitle2">Restore tool</Typography>
+      {isCustomTool ? (
+        <Box mt={1} data-testid="physical-custom-tool-banner">
+          <Typography variant="body2" color="textSecondary">
+            This config uses a custom restore tool (e.g. pg_basebackup). The UI
+            cannot edit customTool configurations — edit the YAML directly.
+          </Typography>
+        </Box>
+      ) : (
+        <FormControl>
+          <RadioGroup
+            row
+            value={tool}
+            onChange={(_, value) =>
+              onChange('physicalTool', value as PhysicalTool)
+            }
+            aria-label="physical restore tool"
+          >
+            <FormControlLabel
+              value="walg"
+              control={<Radio disabled={disabled} />}
+              label="WAL-G"
+            />
+            <FormControlLabel
+              value="pgbackrest"
+              control={<Radio disabled={disabled} />}
+              label="pgBackRest"
+            />
+          </RadioGroup>
+        </FormControl>
+      )}
+
+      {!isCustomTool && tool === 'walg' && (
+        <Walg
+          values={values}
+          onChange={onChange}
+          disabled={disabled}
+          envsKeyErrors={envsKeyErrors}
+        />
+      )}
+      {!isCustomTool && tool === 'pgbackrest' && (
+        <PgBackRest
+          values={values}
+          onChange={onChange}
+          disabled={disabled}
+          envsKeyErrors={envsKeyErrors}
+        />
+      )}
+
+      {!isCustomTool && tool && (
+        <Sync values={values} onChange={onChange} disabled={disabled} />
+      )}
+    </Box>
+  )
+}

package/pages/Instance/Configuration/SimpleMode/PreviewCard.tsx

@@ -0,0 +1,176 @@
+import { Button, Link, Typography } from '@material-ui/core'
+import Box from '@mui/material/Box'
+
+import { Spinner } from '@postgres.ai/shared/components/Spinner'
+import { ProposedConfig } from '@postgres.ai/shared/types/api/endpoints/probeSource'
+
+import { ResolvedImage, providerKeyToImage } from '../configOptions'
+
+type Props = {
+  proposed: ProposedConfig
+  resolved: ResolvedImage
+  applying: boolean
+  applyError: string | null
+  onApply: () => void
+  onEdit: () => void
+}
+
+const Field = ({ label, value }: { label: string; value: string }) => (
+  <Box display="flex" mb={0.5}>
+    <Box minWidth={220} fontWeight={600}>
+      {label}
+    </Box>
+    <Box minWidth={0} style={{ overflowWrap: 'anywhere' }}>
+      {value}
+    </Box>
+  </Box>
+)
+
+const Callout = ({ children }: { children: React.ReactNode }) => (
+  <Box
+    mt={1}
+    p={1}
+    bgcolor="#fff8e1"
+    borderLeft="4px solid #f5a623"
+    fontSize={13}
+    style={{ overflowWrap: 'anywhere' }}
+  >
+    {children}
+  </Box>
+)
+
+export const PreviewCard = ({
+  proposed,
+  resolved,
+  applying,
+  applyError,
+  onApply,
+  onEdit,
+}: Props) => {
+  const mapping = providerKeyToImage(
+    proposed.dockerImage,
+    proposed.pgMajorVersion,
+  )
+  const preloadLibraries =
+    resolved.sharedPreloadLibraries ?? proposed.sharedPreloadLibraries
+  const tuningEntries = Object.entries(proposed.queryTuning ?? {})
+
+  return (
+    <Box
+      mt={2}
+      p={2}
+      border="1px solid #e0e0e0"
+      borderRadius={4}
+      data-testid="preview-card"
+    >
+      <Typography variant="h6">Proposed configuration</Typography>
+
+      <Box mt={2}>
+        <Field
+          label="Detected provider"
+          value={proposed.detectedProvider || 'unknown'}
+        />
+        <Field
+          label="Docker image"
+          value={resolved.dockerPath || mapping.imageType}
+        />
+        <Field
+          label="Postgres major version"
+          value={String(proposed.pgMajorVersion || 'unknown')}
+        />
+        <Field
+          label="Databases"
+          value={proposed.databases?.join(', ') || '(none)'}
+        />
+        <Field label="shared_buffers" value={proposed.sharedBuffers || ''} />
+        <Field
+          label="shared_preload_libraries"
+          value={preloadLibraries || ''}
+        />
+      </Box>
+
+      {tuningEntries.length > 0 && (
+        <Box mt={2}>
+          <Typography variant="subtitle2">Query tuning</Typography>
+          <Box component="table" mt={1} style={{ borderCollapse: 'collapse' }}>
+            <tbody>
+              {tuningEntries.map(([k, v]) => (
+                <tr key={k}>
+                  <td style={{ padding: '2px 16px 2px 0', fontWeight: 600 }}>
+                    {k}
+                  </td>
+                  <td style={{ padding: '2px 0' }}>{v}</td>
+                </tr>
+              ))}
+            </tbody>
+          </Box>
+        </Box>
+      )}
+
+      <Box mt={2}>
+        {(mapping.fallback || proposed.detectedProvider === 'generic') && (
+          <Callout>
+            Could not detect a managed cloud provider; using the generic
+            Postgres image. Switch to Expert mode if your source runs on a
+            managed service and we missed it.
+          </Callout>
+        )}
+        {!proposed.memoryProbed && (
+          <Callout>
+            Could not detect host memory; <code>shared_buffers</code> is set
+            to a 1&nbsp;GB safe default. Adjust in Expert mode if your host
+            has more RAM.
+          </Callout>
+        )}
+        <Callout>
+          Query tuning is copied from your source. If you use the RDS refresh
+          tool, these values may not match production — review in Expert mode
+          after the first retrieval run.
+        </Callout>
+        {resolved.isSe ? (
+          <Callout>
+            Shipping the <code>{resolved.dockerPath}</code> image with its
+            curated <code>shared_preload_libraries</code> preset, so the
+            detected extensions are bundled.
+          </Callout>
+        ) : (
+          <Callout>
+            We'll ship <code>{preloadLibraries}</code>. If the chosen image
+            does not bundle one of these libraries, the clone container will
+            fail to start with a "could not load library" error — check{' '}
+            <code>docker logs dblab_server</code> after Apply.
+          </Callout>
+        )}
+      </Box>
+
+      <Box mt={2} display="flex" alignItems="center">
+        <Button
+          variant="contained"
+          color="secondary"
+          onClick={onApply}
+          disabled={applying}
+          data-testid="preview-apply"
+        >
+          Apply &amp; start retrieval
+          {applying && <Spinner size="sm" />}
+        </Button>
+        <Box ml={2}>
+          <Link
+            component="button"
+            type="button"
+            onClick={onEdit}
+            data-testid="preview-edit"
+          >
+            Edit before applying
+          </Link>
+        </Box>
+      </Box>
+
+      {applyError && (
+        <Box mt={1} color="#d32f2f" fontSize={13} data-testid="apply-error">
+          {applyError}
+        </Box>
+      )}
+    </Box>
+  )
+}