@postgres.ai/shared 3.5.0-pr-1027 → 3.5.0-pr-1035.1

package/pages/Configuration/configOptions.js

@@ -0,0 +1,59 @@
+export const dockerImageOptions = [
+    {
+        name: 'Generic Postgres (postgresai/extended-postgres)',
+        type: 'Generic Postgres',
+    },
+    { name: 'Generic Postgres with PostGIS', type: 'postgis' },
+    { name: 'Amazon RDS for Postgres', type: 'rds' },
+    { name: 'Amazon RDS Aurora for Postgres', type: 'aurora' },
+    { name: 'Heroku Postgres', type: 'heroku' },
+    { name: 'Supabase Postgres', type: 'supabase' },
+    { name: 'Google Cloud SQL for PostgreSQL', type: 'google-cloud-sql' },
+    {
+        name: 'Timescale Cloud',
+        type: 'timescale-cloud',
+    },
+    { name: 'Custom image', type: 'custom' },
+];
+export const imagePgOptions = [
+    {
+        optionType: 'Generic Postgres',
+        pgDumpOptions: [],
+        pgRestoreOptions: [],
+    },
+    {
+        optionType: 'postgis',
+        pgDumpOptions: [],
+        pgRestoreOptions: [],
+    },
+    {
+        optionType: 'rds',
+        pgDumpOptions: ['--exclude-schema=awsdms'],
+        pgRestoreOptions: [],
+    },
+    {
+        optionType: 'aurora',
+        pgDumpOptions: ['--exclude-schema=awsdms'],
+        pgRestoreOptions: [],
+    },
+    {
+        optionType: 'heroku',
+        pgDumpOptions: [],
+        pgRestoreOptions: [],
+    },
+    {
+        optionType: 'supabase',
+        pgDumpOptions: [],
+        pgRestoreOptions: [],
+    },
+    {
+        optionType: 'google-cloud-sql',
+        pgDumpOptions: [],
+        pgRestoreOptions: [],
+    },
+    {
+        optionType: 'timescale-cloud',
+        pgDumpOptions: [],
+        pgRestoreOptions: [],
+    },
+];

package/pages/Configuration/index.d.ts

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

package/pages/Configuration/index.js

@@ -0,0 +1,544 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*--------------------------------------------------------------------------
+ * Copyright (c) 2019-2021, Postgres.ai, Nikolay Samokhvalov nik@postgres.ai
+ * All Rights Reserved. Proprietary and confidential.
+ * Unauthorized copying of this file, via any small is strictly prohibited
+ *--------------------------------------------------------------------------
+ */
+import { useState, useEffect } 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 Box from '@mui/material/Box';
+import { Modal } from '@postgres.ai/shared/components/Modal';
+import { StubSpinner } from '@postgres.ai/shared/components/StubSpinner';
+import { ExternalIcon } from '@postgres.ai/shared/icons/External';
+import { Spinner } from '@postgres.ai/shared/components/Spinner';
+import { useStores } from '@postgres.ai/shared/pages/Instance/context';
+import { tooltipText } from './tooltipText';
+import { useForm } from './useForm';
+import { ResponseMessage } from './ResponseMessage';
+import { ConfigSectionTitle, Header, ModalTitle } from './Header';
+import { dockerImageOptions, imagePgOptions } from './configOptions';
+import { uniqueChipValue, customOrGenericImage, genericDockerImages, } from './utils';
+import { SelectWithTooltip, InputWithChip, InputWithTooltip, } from './InputWithTooltip';
+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: {
+        padding: '9px 10px',
+    },
+    grayText: {
+        color: '#8a8a8a',
+        fontSize: '12px',
+    },
+}, { index: 1 });
+export const Configuration = observer(({ switchActiveTab, reload, isConfigurationActive, disableConfigModification, }) => {
+    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 [dleEdition, setDledition] = useState('');
+    const isCeEdition = dleEdition === 'community';
+    const filteredDockerImageOptions = isCeEdition
+        ? dockerImageOptions.filter((option) => option.type === 'custom' || option.type === 'Generic Postgres')
+        : dockerImageOptions;
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const [submitState, setSubmitState] = useState({
+        status: '',
+        response: '',
+    });
+    const [dockerState, setDockerState] = useState({
+        loading: false,
+        error: '',
+        tags: [],
+        locations: [],
+        images: [],
+        preloadLibraries: '',
+        data: [],
+    });
+    const [testConnectionState, setTestConnectionState] = useState({
+        default: {
+            loading: false,
+            error: '',
+            message: {
+                status: '',
+                message: '',
+            },
+        },
+        dockerImage: {
+            loading: false,
+            error: '',
+            message: {
+                status: '',
+                message: '',
+            },
+        },
+        fetchTuning: {
+            loading: false,
+            error: '',
+            message: {
+                status: '',
+                message: '',
+            },
+        },
+    });
+    const switchTab = async () => {
+        reload();
+        switchActiveTab(null, 0);
+    };
+    const onSubmit = async (values) => {
+        setSubmitState({
+            ...submitState,
+            response: '',
+        });
+        await updateConfig({
+            ...values,
+            tuningParams: formatTuningParamsToObj(values.tuningParams),
+        }).then((response) => {
+            if (response === null || response === void 0 ? void 0 : response.ok) {
+                setSubmitState({
+                    status: 'success',
+                    response: (_jsxs("p", { children: ["Changes applied.", ' ', _jsx("span", { className: styles.underline, onClick: switchTab, children: "Switch to Overview" }), ' ', "to see details and to work with clones"] })),
+                });
+            }
+        });
+    };
+    const [{ formik, connectionData, isConnectionDataValid }] = useForm(onSubmit);
+    const scrollToField = () => {
+        const errorElement = document.querySelector('.Mui-error');
+        if (errorElement) {
+            errorElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            const inputElement = errorElement.querySelector('input');
+            if (inputElement) {
+                setTimeout(() => {
+                    inputElement.focus();
+                }, 1000);
+            }
+        }
+    };
+    const onTestConnectionClick = async ({ type, }) => {
+        Object.keys(connectionData).map(function (key) {
+            if (key !== 'password' && key !== 'db_list') {
+                formik.validateField(key).then(() => {
+                    scrollToField();
+                });
+            }
+        });
+        if (isConnectionDataValid) {
+            setTestConnectionState({
+                ...testConnectionState,
+                [type]: {
+                    ...testConnectionState[type],
+                    loading: true,
+                    error: '',
+                    message: {
+                        status: '',
+                        message: '',
+                    },
+                },
+            });
+            testDbSource(connectionData)
+                .then((res) => {
+                var _a;
+                if (res === null || res === void 0 ? void 0 : res.response) {
+                    setTestConnectionState({
+                        ...testConnectionState,
+                        [type]: {
+                            ...testConnectionState[type],
+                            message: {
+                                status: res.response.status,
+                                message: res.response.message,
+                            },
+                        },
+                    });
+                    if (type === 'fetchTuning') {
+                        formik.setFieldValue('tuningParams', formatTuningParams(res.response.tuningParams));
+                    }
+                    if (type === 'dockerImage' && ((_a = res.response) === null || _a === void 0 ? void 0 : _a.dbVersion)) {
+                        const currentDockerImage = dockerState.data.find((image) => { var _a; return Number(image.pg_major_version) === ((_a = res.response) === null || _a === void 0 ? void 0 : _a.dbVersion); });
+                        if (currentDockerImage) {
+                            formik.setValues({
+                                ...formik.values,
+                                dockerImage: currentDockerImage.pg_major_version,
+                                dockerPath: currentDockerImage.location,
+                                dockerTag: currentDockerImage.tag,
+                            });
+                            setDockerState({
+                                ...dockerState,
+                                tags: dockerState.data
+                                    .map((image) => image.tag)
+                                    .filter((tag) => tag.startsWith(currentDockerImage.pg_major_version)),
+                            });
+                        }
+                    }
+                }
+                else if (res === null || res === void 0 ? void 0 : res.error) {
+                    setTestConnectionState({
+                        ...testConnectionState,
+                        [type]: {
+                            ...testConnectionState[type],
+                            message: {
+                                status: 'error',
+                                message: res.error.message,
+                            },
+                        },
+                    });
+                }
+            })
+                .catch((err) => {
+                setTestConnectionState({
+                    ...testConnectionState,
+                    [type]: {
+                        ...testConnectionState[type],
+                        error: err.message,
+                        loading: false,
+                    },
+                });
+            });
+        }
+    };
+    const handleModalClick = async () => {
+        await getFullConfig();
+        setIsModalOpen(true);
+    };
+    const handleDeleteChip = (_, uniqueValue, id) => {
+        if (formik.values[id]) {
+            let newValues = '';
+            const currentValues = uniqueChipValue(String(formik.values[id]));
+            const splitValues = currentValues.split(' ');
+            const curDividers = String(formik.values[id]).match(/[,(\s)(\n)(\r)(\t)(\r\n)]/gm);
+            for (let i in splitValues) {
+                if (curDividers && splitValues[i] !== uniqueValue) {
+                    newValues =
+                        newValues +
+                            splitValues[i] +
+                            (curDividers[i] ? curDividers[i] : '');
+                }
+            }
+            formik.setFieldValue(id, newValues);
+        }
+    };
+    const handleSelectPgOptions = (e, formikName) => {
+        let pgValue = formik.values[formikName];
+        formik.setFieldValue(formikName, configData && configData[formikName]);
+        const selectedPgOptions = imagePgOptions.filter((pg) => e.target.value === pg.optionType);
+        const setFormikPgValue = (name) => {
+            if (selectedPgOptions.length === 0) {
+                formik.setFieldValue(formikName, '');
+            }
+            selectedPgOptions.forEach((pg) => {
+                return pg[name].forEach((addOption) => {
+                    var _a;
+                    if (!((_a = String(pgValue)) === null || _a === void 0 ? void 0 : _a.includes(addOption))) {
+                        const addOptionWithSpace = addOption + ' ';
+                        formik.setFieldValue(formikName, (pgValue += addOptionWithSpace));
+                    }
+                });
+            });
+        };
+        if (formikName === 'pgRestoreCustomOptions') {
+            setFormikPgValue('pgRestoreOptions');
+        }
+        else {
+            setFormikPgValue('pgDumpOptions');
+        }
+    };
+    const fetchSeImages = async ({ dockerTag, packageGroup, initialRender, }) => {
+        setDockerState({
+            ...dockerState,
+            loading: true,
+        });
+        await getSeImages({
+            packageGroup,
+        }).then((data) => {
+            var _a, _b, _c, _d;
+            if (data) {
+                const seImagesMajorVersions = data
+                    .map((image) => image.pg_major_version)
+                    .filter((value, index, self) => self.indexOf(value) === index)
+                    .sort((a, b) => Number(a) - Number(b));
+                const currentDockerImage = initialRender
+                    ? formik.values.dockerImage
+                    : seImagesMajorVersions.slice(-1)[0];
+                const currentPreloadLibraries = ((_b = (_a = data.find((image) => image.tag === dockerTag)) === null || _a === void 0 ? void 0 : _a.pg_config_presets) === null || _b === void 0 ? void 0 : _b.shared_preload_libraries) ||
+                    ((_d = (_c = data[0]) === null || _c === void 0 ? void 0 : _c.pg_config_presets) === null || _d === void 0 ? void 0 : _d.shared_preload_libraries);
+                setDockerState({
+                    ...(initialRender
+                        ? { images: seImagesMajorVersions }
+                        : {
+                            ...dockerState,
+                        }),
+                    error: '',
+                    tags: data
+                        .map((image) => image.tag)
+                        .filter((tag) => tag.startsWith(currentDockerImage)),
+                    locations: data
+                        .map((image) => image.location)
+                        .filter((location) => location === null || location === void 0 ? void 0 : location.includes(currentDockerImage)),
+                    loading: false,
+                    preloadLibraries: currentPreloadLibraries,
+                    images: seImagesMajorVersions,
+                    data,
+                });
+                formik.setValues({
+                    ...formik.values,
+                    dockerImage: currentDockerImage,
+                    dockerImageType: packageGroup,
+                    dockerTag: dockerTag
+                        ? dockerTag
+                        : data.map((image) => image.tag)[0],
+                    dockerPath: initialRender
+                        ? formik.values.dockerPath
+                        : data.map((image) => image.location)[0],
+                    sharedPreloadLibraries: currentPreloadLibraries || '',
+                });
+            }
+            else {
+                setDockerState({
+                    ...dockerState,
+                    loading: false,
+                });
+            }
+        });
+    };
+    const handleDockerImageSelect = (e) => {
+        if (e.target.value === 'Generic Postgres') {
+            const genericImageVersions = genericDockerImages
+                .map((image) => image.pg_major_version)
+                .filter((value, index, self) => self.indexOf(value) === index)
+                .sort((a, b) => Number(a) - Number(b));
+            const currentDockerImage = genericImageVersions.slice(-1)[0];
+            setDockerState({
+                ...dockerState,
+                tags: genericDockerImages
+                    .map((image) => image.tag)
+                    .filter((tag) => tag.startsWith(currentDockerImage)),
+                locations: genericDockerImages
+                    .map((image) => image.location)
+                    .filter((location) => location === null || location === void 0 ? void 0 : location.includes(currentDockerImage)),
+                images: genericImageVersions,
+                data: genericDockerImages,
+            });
+            formik.setValues({
+                ...formik.values,
+                dockerImage: currentDockerImage,
+                dockerImageType: e.target.value,
+                dockerTag: genericDockerImages.map((image) => image.tag)[0],
+                dockerPath: genericDockerImages.map((image) => image.location)[0],
+                sharedPreloadLibraries: 'pg_stat_statements,pg_stat_kcache,pg_cron,pgaudit,anon',
+            });
+        }
+        else if (e.target.value === 'custom') {
+            formik.setValues({
+                ...formik.values,
+                dockerImage: '',
+                dockerPath: '',
+                dockerTag: '',
+                sharedPreloadLibraries: '',
+                dockerImageType: e.target.value,
+            });
+        }
+        else {
+            formik.setValues({
+                ...formik.values,
+                dockerImageType: e.target.value,
+            });
+            fetchSeImages({
+                packageGroup: e.target.value,
+            });
+        }
+        handleSelectPgOptions(e, 'pgDumpCustomOptions');
+        handleSelectPgOptions(e, 'pgRestoreCustomOptions');
+    };
+    const handleDockerVersionSelect = (e) => {
+        var _a;
+        if (formik.values.dockerImageType !== 'custom') {
+            const updatedDockerTags = dockerState.data
+                .map((image) => image.tag)
+                .filter((tag) => tag.startsWith(e.target.value));
+            setDockerState({
+                ...dockerState,
+                tags: updatedDockerTags,
+            });
+            const currentLocation = (_a = dockerState.data.find((image) => image.tag === updatedDockerTags[0])) === null || _a === void 0 ? void 0 : _a.location;
+            formik.setValues({
+                ...formik.values,
+                dockerTag: updatedDockerTags[0],
+                dockerImage: e.target.value,
+                dockerPath: currentLocation,
+            });
+        }
+        else {
+            formik.setValues({
+                ...formik.values,
+                dockerImage: e.target.value,
+                dockerPath: e.target.value,
+            });
+        }
+    };
+    // Set initial data, empty string for password
+    useEffect(() => {
+        if (configData) {
+            for (const [key, value] of Object.entries(configData)) {
+                if (key !== 'password') {
+                    formik.setFieldValue(key, value);
+                }
+                if (key === 'tuningParams') {
+                    formik.setFieldValue(key, value);
+                }
+                if (customOrGenericImage(configData === null || configData === void 0 ? void 0 : configData.dockerImageType)) {
+                    if ((configData === null || configData === void 0 ? void 0 : configData.dockerImageType) === 'Generic Postgres') {
+                        const genericImageVersions = genericDockerImages
+                            .map((image) => image.pg_major_version)
+                            .filter((value, index, self) => self.indexOf(value) === index)
+                            .sort((a, b) => Number(a) - Number(b));
+                        const currentDockerImage = genericDockerImages.filter((image) => image.location === (configData === null || configData === void 0 ? void 0 : configData.dockerPath))[0] ||
+                            genericDockerImages.filter((image) => { var _a; return (_a = configData === null || configData === void 0 ? void 0 : configData.dockerPath) === null || _a === void 0 ? void 0 : _a.includes(image.pg_major_version); })[0];
+                        setDockerState({
+                            ...dockerState,
+                            tags: genericDockerImages
+                                .map((image) => image.tag)
+                                .filter((tag) => tag.startsWith(currentDockerImage.pg_major_version)),
+                            images: genericImageVersions,
+                            data: genericDockerImages,
+                        });
+                        formik.setFieldValue('dockerTag', currentDockerImage === null || currentDockerImage === void 0 ? void 0 : currentDockerImage.tag);
+                        formik.setFieldValue('dockerImage', currentDockerImage.pg_major_version);
+                    }
+                    else {
+                        formik.setFieldValue('dockerImage', configData === null || configData === void 0 ? void 0 : configData.dockerPath);
+                    }
+                }
+            }
+        }
+    }, [config]);
+    useEffect(() => {
+        getEngine().then((res) => {
+            setDledition(String(res === null || res === void 0 ? void 0 : res.edition));
+        });
+    }, []);
+    useEffect(() => {
+        const initialFetch = async () => {
+            if (formik.dirty &&
+                !isCeEdition &&
+                !customOrGenericImage(configData === null || configData === void 0 ? void 0 : configData.dockerImageType)) {
+                await getFullConfig().then(async (data) => {
+                    if (data) {
+                        await fetchSeImages({
+                            packageGroup: configData === null || configData === void 0 ? void 0 : configData.dockerImageType,
+                            dockerTag: configData === null || configData === void 0 ? void 0 : configData.dockerTag,
+                            initialRender: true,
+                        });
+                    }
+                });
+            }
+        };
+        initialFetch();
+    }, [
+        formik.dirty,
+        configData === null || configData === void 0 ? void 0 : configData.dockerImageType,
+        configData === null || configData === void 0 ? void 0 : configData.dockerTag,
+        isCeEdition,
+    ]);
+    return (_jsxs("div", { className: styles.root, children: [_jsx(Snackbar, { onClick: () => {
+                    Boolean(dockerState.error)
+                        ? setDockerState({
+                            ...dockerState,
+                            error: '',
+                        })
+                        : undefined;
+                }, 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: () => {
+                                                                    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 Postgres configuration used for all Postgres 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] }), _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(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: () => switchActiveTab(null, 0), 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 } }) })] }));
+});

package/pages/Configuration/tooltipText.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+export declare const tooltipText: {
+    dockerTag: () => JSX.Element;
+    dockerImage: () => JSX.Element;
+    dockerImageType: () => JSX.Element;
+    sharedBuffers: () => JSX.Element;
+    sharedPreloadLibraries: () => JSX.Element;
+    host: () => JSX.Element;
+    port: () => JSX.Element;
+    username: () => JSX.Element;
+    password: () => JSX.Element;
+    dbname: () => JSX.Element;
+    databases: () => JSX.Element;
+    dumpParallelJobs: () => JSX.Element;
+    pgDumpCustomOptions: () => JSX.Element;
+    restoreParallelJobs: () => JSX.Element;
+    pgRestoreCustomOptions: () => JSX.Element;
+    timetable: () => JSX.Element;
+    tuningParams: () => JSX.Element;
+};