@postgres.ai/shared 4.0.2-pr-1149.1 → 4.0.2-pr-1200

package/pages/Instance/Configuration/connectionString.js

@@ -0,0 +1,129 @@
+// connectionString.ts — Expert-mode helper that converts between the
+// (host, port, username, dbname) shape stored in `server.yml` and the
+// single URL field the form exposes. The engine remains the source of
+// truth for actual probing (see engine/internal/retrieval/probe/parser.go);
+// this parser only powers the form's load/save round-trip.
+//
+// Accepts both URI form (postgres://user@host:5432/dbname) and DSN form
+// (host=db port=5432 user=app dbname=shop). Rejects any input that carries
+// a password — passwords belong in the masked field, never the URL field.
+export class ConnectionStringError extends Error {
+}
+export const ErrPasswordInConnectionString = 'Password must be entered in the Password field, not the connection string.';
+export const ErrMultiHost = 'Multi-host connection strings are not supported.';
+export const ErrInvalidConnectionString = 'Could not parse the connection string.';
+const URI_SCHEMES = ['postgres:', 'postgresql:'];
+const isUri = (s) => URI_SCHEMES.some((p) => s.toLowerCase().startsWith(p));
+const stripBrackets = (h) => (h.startsWith('[') && h.endsWith(']') ? h.slice(1, -1) : h);
+const parseUri = (s) => {
+    let url;
+    try {
+        url = new URL(s);
+    }
+    catch {
+        throw new ConnectionStringError(ErrInvalidConnectionString);
+    }
+    if (url.password)
+        throw new ConnectionStringError(ErrPasswordInConnectionString);
+    if (!url.hostname)
+        throw new ConnectionStringError(ErrInvalidConnectionString);
+    if (url.hostname.includes(','))
+        throw new ConnectionStringError(ErrMultiHost);
+    const portWasExplicit = url.port !== '';
+    const path = url.pathname.startsWith('/') ? url.pathname.slice(1) : url.pathname;
+    const dbname = path.includes(',') ? '' : decodeURIComponent(path);
+    return {
+        fields: {
+            host: stripBrackets(url.hostname),
+            port: portWasExplicit ? url.port : '5432',
+            username: url.username ? decodeURIComponent(url.username) : '',
+            dbname,
+        },
+        portWasExplicit,
+    };
+};
+// Tokenizer for libpq DSN form: key=value pairs, values may be single-quoted
+// when they contain spaces (libpq spec). Throws on malformed input.
+const tokenizeDsn = (s) => {
+    const out = {};
+    let i = 0;
+    while (i < s.length) {
+        // skip leading whitespace
+        while (i < s.length && /\s/.test(s[i]))
+            i++;
+        if (i >= s.length)
+            break;
+        // read key
+        const keyStart = i;
+        while (i < s.length && s[i] !== '=' && !/\s/.test(s[i]))
+            i++;
+        if (i >= s.length || s[i] !== '=')
+            throw new ConnectionStringError(ErrInvalidConnectionString);
+        const key = s.slice(keyStart, i);
+        i++; // skip '='
+        // read value (possibly quoted)
+        let value = '';
+        if (s[i] === "'") {
+            i++;
+            while (i < s.length && s[i] !== "'") {
+                if (s[i] === '\\' && i + 1 < s.length) {
+                    value += s[i + 1];
+                    i += 2;
+                    continue;
+                }
+                value += s[i];
+                i++;
+            }
+            if (i >= s.length)
+                throw new ConnectionStringError(ErrInvalidConnectionString);
+            i++; // skip closing quote
+        }
+        else {
+            while (i < s.length && !/\s/.test(s[i])) {
+                value += s[i];
+                i++;
+            }
+        }
+        out[key.toLowerCase()] = value;
+    }
+    return out;
+};
+const parseDsn = (s) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const tokens = tokenizeDsn(s);
+    if (tokens.password)
+        throw new ConnectionStringError(ErrPasswordInConnectionString);
+    const host = (_b = (_a = tokens.host) !== null && _a !== void 0 ? _a : tokens.hostaddr) !== null && _b !== void 0 ? _b : '';
+    if (host.includes(','))
+        throw new ConnectionStringError(ErrMultiHost);
+    const portRaw = (_c = tokens.port) !== null && _c !== void 0 ? _c : '';
+    const portWasExplicit = portRaw !== '';
+    return {
+        fields: {
+            host,
+            port: portWasExplicit ? portRaw : '5432',
+            username: (_e = (_d = tokens.user) !== null && _d !== void 0 ? _d : tokens.username) !== null && _e !== void 0 ? _e : '',
+            dbname: (_g = (_f = tokens.dbname) !== null && _f !== void 0 ? _f : tokens.database) !== null && _g !== void 0 ? _g : '',
+        },
+        portWasExplicit,
+    };
+};
+export const connectionStringToFields = (s) => {
+    const trimmed = s.trim();
+    if (!trimmed)
+        throw new ConnectionStringError(ErrInvalidConnectionString);
+    if (isUri(trimmed))
+        return parseUri(trimmed);
+    if (trimmed.includes('='))
+        return parseDsn(trimmed);
+    throw new ConnectionStringError(ErrInvalidConnectionString);
+};
+// formatHost wraps IPv6 literals in brackets so the resulting URI parses cleanly.
+const formatHost = (host) => (host.includes(':') ? `[${host}]` : host);
+export const connectionStringFromFields = (fields, opts = {}) => {
+    const userPart = fields.username ? `${encodeURIComponent(fields.username)}@` : '';
+    const showPort = fields.port && !(opts.omitDefaultPort && fields.port === '5432');
+    const portPart = showPort ? `:${fields.port}` : '';
+    const dbPart = fields.dbname ? `/${encodeURIComponent(fields.dbname)}` : '';
+    return `postgres://${userPart}${formatHost(fields.host)}${portPart}${dbPart}`;
+};

package/pages/Instance/Configuration/dockerCatalog.d.ts

@@ -0,0 +1,2 @@
+export declare const genericImagePrefix = "postgresai/extended-postgres";
+export declare const dockerImagesConfig: Record<string, string[]>;

package/pages/Instance/Configuration/dockerCatalog.js

@@ -0,0 +1,19 @@
+// Shared image-catalog constants. Kept in its own module so both
+// `configOptions.ts` and `utils/index.ts` can read them without creating
+// an import cycle (utils → configOptions today).
+export const genericImagePrefix = 'postgresai/extended-postgres';
+// Predefined Docker image catalog for the Generic Postgres image. If a
+// user's config references a tag not listed here, createEnhancedDockerImages
+// in utils/index.ts appends it at runtime.
+export 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'],
+};

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

@@ -1,9 +1,8 @@
 /// <reference types="react" />
-export declare const Configuration: (({ instanceId, switchActiveTab, reload, isConfigurationActive, disableConfigModification, }: {
+export declare const Configuration: (({ instanceId, switchActiveTab, reload, disableConfigModification, }: {
     instanceId: string;
     switchActiveTab: (_: null, activeTab: number) => void;
     reload: () => void;
-    isConfigurationActive: boolean;
     disableConfigModification?: boolean | undefined;
 }) => JSX.Element) & {
     displayName: string;

package/pages/Instance/Configuration/index.js

@@ -5,10 +5,10 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * Unauthorized copying of this file, via any small is strictly prohibited
  *--------------------------------------------------------------------------
  */
-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 { Checkbox, FormControlLabel, Typography, Snackbar, makeStyles, Button, } from '@material-ui/core';
+import { Checkbox, FormControlLabel, Typography, Snackbar, makeStyles, Button, Tab, Tabs, Radio, RadioGroup, } from '@material-ui/core';
 import Box from '@mui/material/Box';
 import { Modal } from '@postgres.ai/shared/components/Modal';
 import { StubSpinner } from '@postgres.ai/shared/components/StubSpinner';
@@ -22,9 +22,11 @@ import { ConfigSectionTitle, Header, ModalTitle } from './Header';
 import { dockerImageOptions, imagePgOptions } from './configOptions';
 import { uniqueChipValue, customOrGenericImage, createEnhancedDockerImages, } from './utils';
 import { SelectWithTooltip, InputWithChip, InputWithTooltip, } from './InputWithTooltip';
+import { SimpleMode, buildProjectionFromProposed } from './SimpleMode';
+import { getInitialConfigMode } from './configMode';
+import { PhysicalMode } from './PhysicalMode';
 import styles from './styles.module.scss';
 import { formatTuningParams, formatTuningParamsToObj, } from '@postgres.ai/shared/types/api/endpoints/testDbSource';
-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({
     checkboxRoot: {
@@ -35,17 +37,31 @@ const useStyles = makeStyles({
         fontSize: '12px',
     },
 }, { index: 1 });
-export const Configuration = observer(({ instanceId, switchActiveTab, reload, isConfigurationActive, disableConfigModification, }) => {
+export const Configuration = observer(({ instanceId, switchActiveTab, reload, disableConfigModification, }) => {
+    var _a, _b;
     const classes = useStyles();
     const stores = useStores();
     const { config, isConfigurationLoading, updateConfig, getSeImages, fullConfig, testDbSource, configError, getFullConfig, getFullConfigError, getEngine, } = stores.main;
     const configData = config && JSON.parse(JSON.stringify(config));
-    const isConfigurationDisabled = !isConfigurationActive || disableConfigModification;
+    const isConfigurationDisabled = disableConfigModification;
     const [dleEdition, setDledition] = useState('');
     const isCeEdition = dleEdition === 'community';
     const filteredDockerImageOptions = isCeEdition
         ? dockerImageOptions.filter((option) => option.type === 'custom' || option.type === 'Generic Postgres')
         : dockerImageOptions;
+    const [userPickedMode, setUserPickedMode] = useState(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(null);
+    useEffect(() => {
+        if (initialMode === null && configData) {
+            setInitialMode(getInitialConfigMode(configData.host, configData.retrievalMode));
+        }
+    }, [configData, initialMode]);
+    const configMode = (_a = userPickedMode !== null && userPickedMode !== void 0 ? userPickedMode : initialMode) !== null && _a !== void 0 ? _a : 'simple';
+    const setConfigMode = setUserPickedMode;
+    const portInitFromConfig = useRef(false);
     const [isModalOpen, setIsModalOpen] = useState(false);
     const [submitState, setSubmitState] = useState({
         status: '',
@@ -97,6 +113,8 @@ export const Configuration = observer(({ instanceId, switchActiveTab, reload, is
         });
         await updateConfig({
             ...values,
+            // Preserve configs that originally had no port: key.
+            ...(omitPortOnSubmit && { port: '' }),
             tuningParams: formatTuningParamsToObj(values.tuningParams),
         }, instanceId).then((response) => {
             if (response === null || response === void 0 ? void 0 : response.ok) {
@@ -107,7 +125,7 @@ export const Configuration = observer(({ instanceId, switchActiveTab, reload, is
             }
         });
     };
-    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
     const enhancedDockerImages = useMemo(() => {
@@ -413,6 +431,10 @@ export const Configuration = observer(({ instanceId, switchActiveTab, reload, is
     // 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);
@@ -494,91 +516,98 @@ export const Configuration = observer(({ instanceId, switchActiveTab, reload, is
                 }, anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, open: (isConfigurationDisabled || Boolean(dockerState.error)) &&
                     !isModalOpen, message: Boolean(dockerState.error)
                     ? dockerState.error
-                    : disableConfigModification
-                        ? PREVENT_MODIFYING_MESSAGE
-                        : NON_LOGICAL_RETRIEVAL_MESSAGE, className: styles.snackbar }), !config && isConfigurationLoading ? (_jsx("div", { className: styles.spinnerContainer, children: _jsx(Spinner, { size: "lg", className: styles.spinner }) })) : (_jsxs(Box, { children: [_jsx(Header, { retrievalMode: "logical", setOpen: handleModalClick }), _jsxs(Box, { children: [_jsx(Box, { children: _jsx(FormControlLabel, { control: _jsx(Checkbox, { name: "debug", checked: formik.values.debug, disabled: isConfigurationDisabled, onChange: (e) => formik.setFieldValue('debug', e.target.checked), classes: {
-                                            root: classes.checkboxRoot,
-                                        } }), label: 'Debug mode' }) }), _jsxs(Box, { mb: 1, mt: 1, children: [_jsx(ConfigSectionTitle, { tag: "retrieval" }), _jsxs(Box, { mt: 1, children: [_jsx(Typography, { className: styles.subsection, children: "Subsection \"retrieval.spec.logicalDump\"" }), _jsx("span", { className: classes.grayText, children: "Source database credentials and dumping options." }), _jsx(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) }), _jsx(InputWithTooltip, { label: "source.connection.port *", value: formik.values.port, error: formik.errors.port, tooltipText: tooltipText.port, disabled: isConfigurationDisabled, onChange: (e) => formik.setFieldValue('port', e.target.value) }), _jsx(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) }), _jsx(InputWithTooltip, { type: "password", value: formik.values.password, label: "source.connection.password", tooltipText: tooltipText.password, disabled: isConfigurationDisabled, onChange: (e) => formik.setFieldValue('password', e.target.value) }), _jsx(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) }), _jsx(InputWithChip, { id: "databases", value: formik.values.databases, label: "Databases to copy", tooltipText: tooltipText.databases, handleDeleteChip: handleDeleteChip, disabled: isConfigurationDisabled, onChange: (e) => formik.setFieldValue('databases', e.target.value) }), _jsxs(Box, { mt: 3, mb: 3, children: [_jsxs(Button, { variant: "outlined", color: "secondary", onClick: () => {
-                                                            onTestConnectionClick({
-                                                                type: 'default',
-                                                            });
-                                                        }, disabled: testConnectionState.default.loading ||
-                                                            isConfigurationDisabled, children: ["Test connection", testConnectionState.default.loading && (_jsx(Spinner, { size: "sm", className: styles.spinner }))] }), testConnectionState.default.message.status ||
-                                                        testConnectionState.default.error ? (_jsx(ResponseMessage, { type: testConnectionState.default.error
-                                                            ? 'error'
-                                                            : testConnectionState.default.message.status
-                                                                ? testConnectionState.default.message.status
-                                                                : '', message: testConnectionState.default.error ||
-                                                            testConnectionState.default.message.message })) : null] }), _jsx(InputWithTooltip, { label: "pg_dump jobs", value: formik.values.dumpParallelJobs, tooltipText: tooltipText.dumpParallelJobs, disabled: isConfigurationDisabled, onChange: (e) => formik.setFieldValue('dumpParallelJobs', e.target.value) }), _jsx(InputWithChip, { value: formik.values.pgDumpCustomOptions, label: "pg_dump customOptions", id: "pgDumpCustomOptions", tooltipText: tooltipText.pgDumpCustomOptions, handleDeleteChip: handleDeleteChip, disabled: isConfigurationDisabled, onChange: (e) => formik.setFieldValue('pgDumpCustomOptions', e.target.value) }), _jsx(FormControlLabel, { style: { maxWidth: 'max-content' }, control: _jsx(Checkbox, { name: "dumpIgnoreErrors", checked: formik.values.dumpIgnoreErrors, disabled: isConfigurationDisabled, onChange: (e) => formik.setFieldValue('dumpIgnoreErrors', e.target.checked), classes: {
-                                                        root: classes.checkboxRoot,
-                                                    } }), label: 'Ignore errors during logical data dump' })] })] }), _jsxs(Box, { mb: 2, mt: 1, children: [_jsx(ConfigSectionTitle, { tag: "databaseContainer" }), _jsx("span", { className: classes.grayText, style: { margin: '0.5rem 0 1rem 0', display: 'block' }, children: "DBLab manages various database containers, such as clones. This section defines default container settings." }), _jsxs("div", { children: [_jsx(SelectWithTooltip, { label: "dockerImage - choose from the list *", value: formik.values.dockerImageType, error: Boolean(formik.errors.dockerImageType), tooltipText: tooltipText.dockerImageType, disabled: isConfigurationDisabled || dockerState.loading, items: filteredDockerImageOptions.map((image) => {
-                                                    return {
-                                                        value: image.type,
-                                                        children: image.name,
-                                                    };
-                                                }), onChange: handleDockerImageSelect }), formik.values.dockerImageType === 'custom' ? (_jsx(InputWithTooltip, { label: "dockerImage *", value: formik.values.dockerImage, error: formik.errors.dockerImage, tooltipText: tooltipText.dockerImage, disabled: isConfigurationDisabled, onChange: (e) => {
-                                                    formik.setValues({
-                                                        ...formik.values,
-                                                        dockerImage: e.target.value,
-                                                        dockerPath: e.target.value,
-                                                    });
-                                                } })) : (_jsxs(_Fragment, { children: [_jsx(SelectWithTooltip, { label: "dockerImage - Postgres major version *", value: formik.values.dockerImage, error: Boolean(formik.errors.dockerImage), tooltipText: tooltipText.dockerImage, disabled: isConfigurationDisabled ||
-                                                            dockerState.loading ||
-                                                            !dockerState.images.length, loading: dockerState.loading, items: dockerState.images
-                                                            .slice()
-                                                            .reverse()
-                                                            .map((image) => {
-                                                            return {
-                                                                value: image,
-                                                                children: image,
-                                                            };
-                                                        }), onChange: handleDockerVersionSelect }), _jsxs(Box, { mt: 0.5, mb: 2, children: [_jsxs(Button, { variant: "outlined", color: "secondary", onClick: () => {
+                    : PREVENT_MODIFYING_MESSAGE, className: styles.snackbar }), !config && isConfigurationLoading ? (_jsx("div", { className: styles.spinnerContainer, children: _jsx(Spinner, { size: "lg", className: styles.spinner }) })) : (_jsxs(Box, { children: [_jsx(Header, { retrievalMode: formik.values.retrievalMode, setOpen: handleModalClick }), _jsxs(Tabs, { value: configMode, onChange: (_, value) => setConfigMode(value), indicatorColor: "primary", textColor: "primary", "aria-label": "Configuration mode", children: [_jsx(Tab, { value: "simple", label: "Simple" }), _jsx(Tab, { value: "expert", label: "Expert" })] }), configMode === 'simple' ? (_jsx(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' ? (_jsxs(_Fragment, { children: [_jsxs(Box, { children: [_jsx(Box, { children: _jsx(FormControlLabel, { control: _jsx(Checkbox, { name: "debug", checked: formik.values.debug, disabled: isConfigurationDisabled, onChange: (e) => formik.setFieldValue('debug', e.target.checked), classes: {
+                                                    root: classes.checkboxRoot,
+                                                } }), label: 'Debug mode' }) }), _jsxs(Box, { mb: 1, mt: 1, children: [_jsx(ConfigSectionTitle, { tag: "retrieval" }), _jsxs(Box, { mt: 1, mb: 1, children: [_jsx(Typography, { className: styles.subsection, children: "Retrieval mode" }), _jsxs(RadioGroup, { row: true, "aria-label": "retrieval mode", value: formik.values.retrievalMode, onChange: (_, value) => {
+                                                            formik.setFieldValue('retrievalMode', value);
+                                                        }, children: [_jsx(FormControlLabel, { value: "logical", control: _jsx(Radio, { disabled: isConfigurationDisabled }), label: "Logical (dump/restore)" }), _jsx(FormControlLabel, { value: "physical", control: _jsx(Radio, { disabled: isConfigurationDisabled }), label: "Physical (WAL-G / pgBackRest)" })] })] }), formik.values.retrievalMode === 'physical' && (_jsx(PhysicalMode, { values: formik.values, onChange: (key, value) => formik.setFieldValue(key, value, key === 'physicalEnvs'), disabled: isConfigurationDisabled, envsKeyErrors: (_b = formik.errors.physicalEnvs) === null || _b === void 0 ? void 0 : _b.map((row) => row === null || row === void 0 ? void 0 : row.key) })), formik.values.retrievalMode === 'logical' && (_jsxs(Box, { mt: 1, children: [_jsx(Typography, { className: styles.subsection, children: "Subsection \"retrieval.spec.logicalDump\"" }), _jsx("span", { className: classes.grayText, children: "Source database credentials and dumping options." }), _jsx(InputWithTooltip, { label: "Connection string *", value: connectionString, error: connectionStringError ||
+                                                            formik.errors.host ||
+                                                            formik.errors.username ||
+                                                            formik.errors.dbname, tooltipText: () => (_jsxs(_Fragment, { children: ["URI form: ", _jsx("code", { children: "postgres://user@host:5432/dbname" }), ". DSN form is also accepted. Do not include the password here \u2014 use the Password field below."] })), disabled: isConfigurationDisabled, onChange: (e) => onConnectionStringChange(e.target.value) }), _jsx(Box, { mt: 0.5, mb: 1, children: _jsxs("span", { className: classes.grayText, "data-testid": "connection-string-parsed", children: ["host: ", formik.values.host || '—', " | port:", ' ', formik.values.port || '5432 (default)', " | user:", ' ', formik.values.username || '—', " | dbname:", ' ', formik.values.dbname || '—'] }) }), _jsx(InputWithTooltip, { type: "password", value: formik.values.password, label: "source.connection.password", tooltipText: tooltipText.password, disabled: isConfigurationDisabled, onChange: (e) => formik.setFieldValue('password', e.target.value) }), _jsx(InputWithChip, { id: "databases", value: formik.values.databases, label: "Databases to copy", tooltipText: tooltipText.databases, handleDeleteChip: handleDeleteChip, disabled: isConfigurationDisabled, onChange: (e) => formik.setFieldValue('databases', e.target.value) }), _jsxs(Box, { mt: 3, mb: 3, children: [_jsxs(Button, { variant: "outlined", color: "secondary", onClick: () => {
                                                                     onTestConnectionClick({
-                                                                        type: 'dockerImage',
+                                                                        type: 'default',
                                                                     });
-                                                                }, disabled: testConnectionState.dockerImage.loading ||
-                                                                    isConfigurationDisabled, children: ["Get version from source", testConnectionState.dockerImage.loading && (_jsx(Spinner, { size: "sm", className: styles.spinner }))] }), testConnectionState.dockerImage.message.status ===
-                                                                'error' || testConnectionState.dockerImage.error ? (_jsx(ResponseMessage, { type: testConnectionState.dockerImage.error ||
-                                                                    testConnectionState.dockerImage.message
+                                                                }, disabled: testConnectionState.default.loading ||
+                                                                    isConfigurationDisabled, children: ["Test connection", testConnectionState.default.loading && (_jsx(Spinner, { size: "sm", className: styles.spinner }))] }), testConnectionState.default.message.status ||
+                                                                testConnectionState.default.error ? (_jsx(ResponseMessage, { type: testConnectionState.default.error
                                                                     ? 'error'
-                                                                    : '', message: testConnectionState.dockerImage.error ||
-                                                                    testConnectionState.dockerImage.message.message })) : null] }), _jsx(SelectWithTooltip, { label: "dockerImage - tag *", value: formik.values.dockerTag, error: Boolean(formik.errors.dockerTag), tooltipText: tooltipText.dockerTag, disabled: isConfigurationDisabled ||
-                                                            dockerState.loading ||
-                                                            !dockerState.tags.length, loading: dockerState.loading, onChange: (e) => {
-                                                            var _a;
-                                                            const currentLocation = (_a = dockerState.data.find((image) => image.tag === e.target.value)) === null || _a === void 0 ? void 0 : _a.location;
+                                                                    : testConnectionState.default.message.status
+                                                                        ? testConnectionState.default.message.status
+                                                                        : '', message: testConnectionState.default.error ||
+                                                                    testConnectionState.default.message.message })) : null] }), _jsx(InputWithTooltip, { label: "pg_dump jobs", value: formik.values.dumpParallelJobs, tooltipText: tooltipText.dumpParallelJobs, disabled: isConfigurationDisabled, onChange: (e) => formik.setFieldValue('dumpParallelJobs', e.target.value) }), _jsx(InputWithChip, { value: formik.values.pgDumpCustomOptions, label: "pg_dump customOptions", id: "pgDumpCustomOptions", tooltipText: tooltipText.pgDumpCustomOptions, handleDeleteChip: handleDeleteChip, disabled: isConfigurationDisabled, onChange: (e) => formik.setFieldValue('pgDumpCustomOptions', e.target.value) }), _jsx(FormControlLabel, { style: { maxWidth: 'max-content' }, control: _jsx(Checkbox, { name: "dumpIgnoreErrors", checked: formik.values.dumpIgnoreErrors, disabled: isConfigurationDisabled, onChange: (e) => formik.setFieldValue('dumpIgnoreErrors', e.target.checked), classes: {
+                                                                root: classes.checkboxRoot,
+                                                            } }), label: 'Ignore errors during logical data dump' })] }))] }), _jsxs(Box, { mb: 2, mt: 1, children: [_jsx(ConfigSectionTitle, { tag: "databaseContainer" }), _jsx("span", { className: classes.grayText, style: { margin: '0.5rem 0 1rem 0', display: 'block' }, children: "DBLab manages various database containers, such as clones. This section defines default container settings." }), _jsxs("div", { children: [_jsx(SelectWithTooltip, { label: "dockerImage - choose from the list *", value: formik.values.dockerImageType, error: Boolean(formik.errors.dockerImageType), tooltipText: tooltipText.dockerImageType, disabled: isConfigurationDisabled || dockerState.loading, items: filteredDockerImageOptions.map((image) => {
+                                                            return {
+                                                                value: image.type,
+                                                                children: image.name,
+                                                            };
+                                                        }), onChange: handleDockerImageSelect }), formik.values.dockerImageType === 'custom' ? (_jsx(InputWithTooltip, { label: "dockerImage *", value: formik.values.dockerImage, error: formik.errors.dockerImage, tooltipText: tooltipText.dockerImage, disabled: isConfigurationDisabled, onChange: (e) => {
                                                             formik.setValues({
                                                                 ...formik.values,
-                                                                dockerTag: e.target.value,
-                                                                dockerPath: currentLocation,
+                                                                dockerImage: e.target.value,
+                                                                dockerPath: e.target.value,
                                                             });
-                                                        }, items: dockerState.tags.map((image) => {
-                                                            return {
-                                                                value: image,
-                                                                children: image,
-                                                            };
-                                                        }) })] })), _jsxs(Typography, { paragraph: true, children: ["Cannot find your image? Reach out to support:", ' ', _jsxs("a", { href: 'https://postgres.ai/contact', target: "_blank", className: styles.externalLink, children: ["https://postgres.ai/contact", _jsx(ExternalIcon, { className: styles.externalIcon })] })] })] })] }), _jsxs(Box, { mb: 3, children: [_jsx(ConfigSectionTitle, { tag: "databaseConfigs" }), _jsx("span", { className: classes.grayText, style: { marginTop: '0.5rem', display: 'block' }, children: "Default PostgreSQL configuration used for all PostgreSQL instances running in containers managed by DBLab." }), _jsx(InputWithTooltip, { type: "textarea", label: "shared_buffers parameter", value: formik.values.sharedBuffers, tooltipText: tooltipText.sharedBuffers, disabled: isConfigurationDisabled, onChange: (e) => formik.setFieldValue('sharedBuffers', e.target.value) }), _jsx(InputWithTooltip, { type: "textarea", label: "shared_preload_libraries", value: formik.values.sharedPreloadLibraries, tooltipText: tooltipText.sharedPreloadLibraries, disabled: isConfigurationDisabled, onChange: (e) => formik.setFieldValue('sharedPreloadLibraries', e.target.value) }), _jsx(InputWithTooltip, { type: "textarea", label: "Query tuning parameters", value: typeof formik.values.tuningParams === 'object'
-                                            ? Object.entries(formik.values.tuningParams)
-                                                .map(([key, value]) => `${key}=${value}`)
-                                                .join('\n')
-                                            : formik.values.tuningParams, tooltipText: tooltipText.tuningParams, disabled: isConfigurationDisabled, onChange: (e) => formik.setFieldValue('tuningParams', e.target.value) }), _jsxs(Button, { variant: "outlined", color: "secondary", onClick: () => {
-                                            onTestConnectionClick({
-                                                type: 'fetchTuning',
+                                                        } })) : (_jsxs(_Fragment, { children: [_jsx(SelectWithTooltip, { label: "dockerImage - Postgres major version *", value: formik.values.dockerImage, error: Boolean(formik.errors.dockerImage), tooltipText: tooltipText.dockerImage, disabled: isConfigurationDisabled ||
+                                                                    dockerState.loading ||
+                                                                    !dockerState.images.length, loading: dockerState.loading, items: dockerState.images
+                                                                    .slice()
+                                                                    .reverse()
+                                                                    .map((image) => {
+                                                                    return {
+                                                                        value: image,
+                                                                        children: image,
+                                                                    };
+                                                                }), onChange: handleDockerVersionSelect }), _jsxs(Box, { mt: 0.5, mb: 2, children: [_jsxs(Button, { variant: "outlined", color: "secondary", onClick: () => {
+                                                                            onTestConnectionClick({
+                                                                                type: 'dockerImage',
+                                                                            });
+                                                                        }, disabled: testConnectionState.dockerImage.loading ||
+                                                                            isConfigurationDisabled, children: ["Get version from source", testConnectionState.dockerImage.loading && (_jsx(Spinner, { size: "sm", className: styles.spinner }))] }), testConnectionState.dockerImage.message.status ===
+                                                                        'error' || testConnectionState.dockerImage.error ? (_jsx(ResponseMessage, { type: testConnectionState.dockerImage.error ||
+                                                                            testConnectionState.dockerImage.message
+                                                                            ? 'error'
+                                                                            : '', message: testConnectionState.dockerImage.error ||
+                                                                            testConnectionState.dockerImage.message.message })) : null] }), _jsx(SelectWithTooltip, { label: "dockerImage - tag *", value: formik.values.dockerTag, error: Boolean(formik.errors.dockerTag), tooltipText: tooltipText.dockerTag, disabled: isConfigurationDisabled ||
+                                                                    dockerState.loading ||
+                                                                    !dockerState.tags.length, loading: dockerState.loading, onChange: (e) => {
+                                                                    var _a;
+                                                                    const currentLocation = (_a = dockerState.data.find((image) => image.tag === e.target.value)) === null || _a === void 0 ? void 0 : _a.location;
+                                                                    formik.setValues({
+                                                                        ...formik.values,
+                                                                        dockerTag: e.target.value,
+                                                                        dockerPath: currentLocation,
+                                                                    });
+                                                                }, items: dockerState.tags.map((image) => {
+                                                                    return {
+                                                                        value: image,
+                                                                        children: image,
+                                                                    };
+                                                                }) })] })), _jsxs(Typography, { paragraph: true, children: ["Cannot find your image? Reach out to support:", ' ', _jsxs("a", { href: 'https://postgres.ai/contact', target: "_blank", className: styles.externalLink, children: ["https://postgres.ai/contact", _jsx(ExternalIcon, { className: styles.externalIcon })] })] })] })] }), _jsxs(Box, { mb: 3, children: [_jsx(ConfigSectionTitle, { tag: "databaseConfigs" }), _jsx("span", { className: classes.grayText, style: { marginTop: '0.5rem', display: 'block' }, children: "Default PostgreSQL configuration used for all PostgreSQL instances running in containers managed by DBLab." }), _jsx(InputWithTooltip, { type: "textarea", label: "shared_buffers parameter", value: formik.values.sharedBuffers, tooltipText: tooltipText.sharedBuffers, disabled: isConfigurationDisabled, onChange: (e) => formik.setFieldValue('sharedBuffers', e.target.value) }), _jsx(InputWithTooltip, { type: "textarea", label: "shared_preload_libraries", value: formik.values.sharedPreloadLibraries, tooltipText: tooltipText.sharedPreloadLibraries, disabled: isConfigurationDisabled, onChange: (e) => formik.setFieldValue('sharedPreloadLibraries', e.target.value) }), _jsx(InputWithTooltip, { type: "textarea", label: "Query tuning parameters", value: typeof formik.values.tuningParams === 'object'
+                                                    ? Object.entries(formik.values.tuningParams)
+                                                        .map(([key, value]) => `${key}=${value}`)
+                                                        .join('\n')
+                                                    : formik.values.tuningParams, tooltipText: tooltipText.tuningParams, disabled: isConfigurationDisabled, onChange: (e) => formik.setFieldValue('tuningParams', e.target.value) }), _jsxs(Button, { variant: "outlined", color: "secondary", onClick: () => {
+                                                    onTestConnectionClick({
+                                                        type: 'fetchTuning',
+                                                    });
+                                                }, disabled: testConnectionState.fetchTuning.loading ||
+                                                    isConfigurationDisabled, children: ["Get from source database", testConnectionState.fetchTuning.loading && (_jsx(Spinner, { size: "sm", className: styles.spinner }))] }), testConnectionState.fetchTuning.message.status === 'error' ||
+                                                testConnectionState.fetchTuning.error ? (_jsx(ResponseMessage, { type: testConnectionState.fetchTuning.error ||
+                                                    testConnectionState.fetchTuning.message
+                                                    ? 'error'
+                                                    : '', message: testConnectionState.fetchTuning.error ||
+                                                    testConnectionState.fetchTuning.message.message })) : null] }), formik.values.retrievalMode === 'logical' && (_jsxs(Box, { children: [_jsxs(Box, { children: [_jsx(Typography, { className: styles.subsection, children: "Subsection \"retrieval.spec.logicalRestore\"" }), _jsx("span", { className: classes.grayText, children: "Restoring options." })] }), _jsx(InputWithTooltip, { label: "pg_restore jobs", value: formik.values.restoreParallelJobs, tooltipText: tooltipText.restoreParallelJobs, disabled: isConfigurationDisabled, onChange: (e) => formik.setFieldValue('restoreParallelJobs', e.target.value) }), _jsx(InputWithChip, { value: formik.values.pgRestoreCustomOptions, label: "pg_restore customOptions", id: "pgRestoreCustomOptions", tooltipText: tooltipText.pgRestoreCustomOptions, handleDeleteChip: handleDeleteChip, disabled: isConfigurationDisabled, onChange: (e) => formik.setFieldValue('pgRestoreCustomOptions', e.target.value) }), _jsx(InputWithTooltip, { type: "textarea", label: "Restore PostgreSQL configs", value: formik.values.restoreConfigs, tooltipText: tooltipText.restoreConfigs, disabled: isConfigurationDisabled, onChange: (e) => formik.setFieldValue('restoreConfigs', e.target.value) }), _jsx(FormControlLabel, { style: { maxWidth: 'max-content' }, control: _jsx(Checkbox, { name: "restoreIgnoreErrors", checked: formik.values.restoreIgnoreErrors, disabled: isConfigurationDisabled, onChange: (e) => formik.setFieldValue('restoreIgnoreErrors', e.target.checked), classes: {
+                                                        root: classes.checkboxRoot,
+                                                    } }), label: 'Ignore errors during logical data restore' })] })), _jsx(Box, { mt: 1, children: _jsx(Typography, { className: styles.subsection, children: "Subsection \"retrieval.refresh\"" }) }), _jsxs("span", { className: classes.grayText, children: ["Define full data refresh on schedule. The process requires at least one additional filesystem mount point. The schedule is to be specified using", ' ', _jsxs("a", { href: "https://en.wikipedia.org/wiki/Cron#Overview", target: "_blank", className: styles.externalLink, children: ["crontab format", _jsx(ExternalIcon, { className: styles.externalIcon })] }), "."] }), _jsx(InputWithTooltip, { label: "timetable", value: formik.values.timetable, tooltipText: tooltipText.timetable, disabled: isConfigurationDisabled, onChange: (e) => formik.setFieldValue('timetable', e.target.value) })] }), _jsxs(Box, { mt: 2, mb: 2, sx: {
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                }, children: [_jsxs(Button, { variant: "contained", color: "secondary", onClick: () => {
+                                            formik.submitForm().then(() => {
+                                                scrollToField();
                                             });
-                                        }, disabled: testConnectionState.fetchTuning.loading ||
-                                            isConfigurationDisabled, children: ["Get from source database", testConnectionState.fetchTuning.loading && (_jsx(Spinner, { size: "sm", className: styles.spinner }))] }), testConnectionState.fetchTuning.message.status === 'error' ||
-                                        testConnectionState.fetchTuning.error ? (_jsx(ResponseMessage, { type: testConnectionState.fetchTuning.error ||
-                                            testConnectionState.fetchTuning.message
-                                            ? 'error'
-                                            : '', message: testConnectionState.fetchTuning.error ||
-                                            testConnectionState.fetchTuning.message.message })) : null] }), _jsxs(Box, { children: [_jsxs(Box, { children: [_jsx(Typography, { className: styles.subsection, children: "Subsection \"retrieval.spec.logicalRestore\"" }), _jsx("span", { className: classes.grayText, children: "Restoring options." })] }), _jsx(InputWithTooltip, { label: "pg_restore jobs", value: formik.values.restoreParallelJobs, tooltipText: tooltipText.restoreParallelJobs, disabled: isConfigurationDisabled, onChange: (e) => formik.setFieldValue('restoreParallelJobs', e.target.value) }), _jsx(InputWithChip, { value: formik.values.pgRestoreCustomOptions, label: "pg_restore customOptions", id: "pgRestoreCustomOptions", tooltipText: tooltipText.pgRestoreCustomOptions, handleDeleteChip: handleDeleteChip, disabled: isConfigurationDisabled, onChange: (e) => formik.setFieldValue('pgRestoreCustomOptions', e.target.value) }), _jsx(InputWithTooltip, { type: "textarea", label: "Restore PostgreSQL configs", value: formik.values.restoreConfigs, tooltipText: tooltipText.restoreConfigs, disabled: isConfigurationDisabled, onChange: (e) => formik.setFieldValue('restoreConfigs', e.target.value) }), _jsx(FormControlLabel, { style: { maxWidth: 'max-content' }, control: _jsx(Checkbox, { name: "restoreIgnoreErrors", checked: formik.values.restoreIgnoreErrors, disabled: isConfigurationDisabled, onChange: (e) => formik.setFieldValue('restoreIgnoreErrors', e.target.checked), classes: {
-                                                root: classes.checkboxRoot,
-                                            } }), label: 'Ignore errors during logical data restore' })] }), _jsx(Box, { mt: 1, children: _jsx(Typography, { className: styles.subsection, children: "Subsection \"retrieval.refresh\"" }) }), _jsxs("span", { className: classes.grayText, children: ["Define full data refresh on schedule. The process requires at least one additional filesystem mount point. The schedule is to be specified using", ' ', _jsxs("a", { href: "https://en.wikipedia.org/wiki/Cron#Overview", target: "_blank", className: styles.externalLink, children: ["crontab format", _jsx(ExternalIcon, { className: styles.externalIcon })] }), "."] }), _jsx(InputWithTooltip, { label: "timetable", value: formik.values.timetable, tooltipText: tooltipText.timetable, disabled: isConfigurationDisabled, onChange: (e) => formik.setFieldValue('timetable', e.target.value) })] }), _jsxs(Box, { mt: 2, mb: 2, sx: {
-                            display: 'flex',
-                            alignItems: 'center',
-                        }, children: [_jsxs(Button, { variant: "contained", color: "secondary", onClick: () => {
-                                    formik.submitForm().then(() => {
-                                        scrollToField();
-                                    });
-                                }, disabled: formik.isSubmitting || isConfigurationDisabled, children: ["Apply changes", formik.isSubmitting && (_jsx(Spinner, { size: "sm", className: styles.spinner }))] }), _jsx(Box, { sx: { px: 2 }, children: _jsx(Button, { variant: "outlined", color: "secondary", onClick: switchTab, children: "Cancel" }) })] }), (submitState.status && submitState.response) || configError ? (_jsx(ResponseMessage, { type: configError ? 'error' : submitState.status, message: configError || submitState.response })) : null] })), _jsx(Modal, { title: _jsx(ModalTitle, {}), onClose: () => setIsModalOpen(false), isOpen: isModalOpen, size: "xl", children: _jsx(Editor, { height: "70vh", width: "100%", defaultLanguage: "yaml", value: getFullConfigError ? getFullConfigError : fullConfig, loading: _jsx(StubSpinner, {}), theme: "vs-light", options: { domReadOnly: true, readOnly: true } }) })] }));
+                                        }, disabled: formik.isSubmitting || isConfigurationDisabled, children: ["Apply changes", formik.isSubmitting && (_jsx(Spinner, { size: "sm", className: styles.spinner }))] }), _jsx(Box, { sx: { px: 2 }, children: _jsx(Button, { variant: "outlined", color: "secondary", onClick: switchTab, children: "Cancel" }) })] }), (submitState.status && submitState.response) || configError ? (_jsx(ResponseMessage, { type: configError ? 'error' : submitState.status, message: configError || submitState.response })) : null] })) : null] })), _jsx(Modal, { title: _jsx(ModalTitle, {}), onClose: () => setIsModalOpen(false), isOpen: isModalOpen, size: "xl", children: _jsx(Editor, { height: "70vh", width: "100%", defaultLanguage: "yaml", value: getFullConfigError ? getFullConfigError : fullConfig, loading: _jsx(StubSpinner, {}), theme: "vs-light", options: { domReadOnly: true, readOnly: true } }) })] }));
 });

package/pages/Instance/Configuration/useForm.d.ts

@@ -1,4 +1,10 @@
 /// <reference types="react" />
+export declare type RetrievalMode = 'logical' | 'physical';
+export declare type PhysicalTool = 'walg' | 'pgbackrest' | 'customTool' | '';
+export declare type PhysicalEnv = {
+    key: string;
+    value: string;
+};
 export declare type FormValues = {
     debug: boolean;
     dockerImage: string;
@@ -22,6 +28,14 @@ export declare type FormValues = {
     restoreConfigs: string;
     pgDumpCustomOptions: string;
     pgRestoreCustomOptions: string;
+    retrievalMode: RetrievalMode;
+    physicalTool: PhysicalTool;
+    physicalDockerImage: string;
+    physicalSyncEnabled: boolean;
+    physicalWalgBackupName: string;
+    physicalPgbackrestStanza: string;
+    physicalPgbackrestDelta: boolean;
+    physicalEnvs: PhysicalEnv[];
 };
 export declare const useForm: (onSubmit: (values: FormValues) => void) => {
     formik: {
@@ -80,4 +94,10 @@ export declare const useForm: (onSubmit: (values: FormValues) => void) => {
         dbname: string;
     };
     isConnectionDataValid: string;
+    connectionString: string;
+    connectionStringError: string | null;
+    onConnectionStringChange: (s: string) => void;
+    markPortInitialState: (wasUnset: boolean) => void;
+    markPortDirty: () => void;
+    omitPortOnSubmit: boolean;
 }[];