@postgres.ai/shared 3.5.1-pr-1027.0 → 4.0.0-pr-1028

package/pages/Instance/Configuration/index.js

@@ -0,0 +1,547 @@
+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(({ instanceId, 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),
+        }, instanceId).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,
+                instanceId,
+            })
+                .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(instanceId);
+        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(instanceId).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(instanceId).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/Instance/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;
+};

package/pages/Instance/Configuration/tooltipText.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from './styles.module.scss';
+export const tooltipText = {
+    dockerTag: () => (_jsx("div", { children: "Docker image version - latest ones listed first. If unsure, pick the top one" })),
+    dockerImage: () => (_jsxs("div", { children: ["Major PostgreSQL version (e.g., \"9.6\", \"15\"). For logical provisioning mode, the version used by DBLab doesn't need to match the version used on the source (although, it's recommended). ", _jsx("br", {}), "If you need a version that is not listed here, contact support."] })),
+    dockerImageType: () => (_jsxs("div", { children: ["Docker image used to run all database containers \u2013 clones, snapshot preparation containers, sync containers. Although such images are based on traditional Docker images for Postgres, DBLab expects slightly different behavior: e.g., Postgres is not the first process used to start container, so Postgres restarts are possible, they do not trigger container state change. For details, see", ' ', _jsx("a", { target: '_blank', href: 'https://postgres.ai/docs/database-lab/supported-databases', className: styles.externalLink, children: "the docs" }), "."] })),
+    sharedBuffers: () => (_jsxs("div", { children: ["Defines default buffer pool size of each Postgres instance managed by DBLab. Note, that this amount of RAM is immediately allocated at Postgres startup time. For example, if the machine running DBLab has 32 GiB of RAM, and the value used here is '1GB', then the theoretical limit of the number of clones is 32. Practically, this limit is even lower because some memory is consumed by various other processes. If you need more clones, reduce the value of", ' ', _jsx("span", { className: styles.firaCodeFont, children: "configs.shared_buffers" }), "."] })),
+    sharedPreloadLibraries: () => (_jsxs("div", { children: ["Specifies one or more shared libraries (comma-separated list) to be preloaded at Postgres server start (", _jsx("a", { target: '_blank', href: 'https://postgresqlco.nf/doc/en/param/shared_preload_libraries/', className: styles.externalLink, children: "details" }), "). If some libraries/extensions are missing, Postgres fails to start, so make sure that ", _jsx("span", { className: styles.firaCodeFont, children: "dockerImage" }), ' ', "used above contains all the needed extensions."] })),
+    host: () => (_jsx("div", { children: "Hostname/IP of database that will be used as source for data retrieval (full data refresh)." })),
+    port: () => (_jsx("div", { children: "Port of database that will be used as source for data retrieval (full data refresh)." })),
+    username: () => (_jsx("div", { children: "Username used to connect to database that will be used as source for data retrieval (full data refresh)." })),
+    password: () => (_jsx("div", { children: "Password used to connect to database that will be used as source for data retrieval (full data refresh)." })),
+    dbname: () => (_jsxs("div", { children: ["Database name used to connect to the source to run diagnostics queries. This database is not necesserarily to be copied (another field,", ' ', _jsx("span", { className: styles.firaCodeFont, children: "databases" }), ", defines which database to copy)."] })),
+    databases: () => (_jsx("div", { children: "Specifies list of databases Postgres server to copy at data retrieval (full data refresh). To specify multiple database names, provide each value in a separte line or use space as a divider. To copy all available databases, leave this value empty." })),
+    dumpParallelJobs: () => (_jsx("div", { children: "Number of parallel workers used to dump the source databases to disk. If the source is production server under load, it is not recommended to use more than 50% of its number of vCPUs. The higher number, the faster dumping is, but the higher risks of performance issues on the source (e.g., due to CPU or disk IO saturation)." })),
+    pgDumpCustomOptions: () => (_jsx("div", { children: "pg_dump options to be used to create a database dump, for example: '--exclude-schema=repack --exclude-schema=\"camelStyleSchemaName\"'. Note that due to security reasons, the current implementation supports only letters, numbers, hyphen, underscore, equal sign, and double quotes." })),
+    restoreParallelJobs: () => (_jsx("div", { children: "Number of parallel workers used to restore databases from dump to Postgres managed by DBLab. For initial data retrieval (very first data refresh), it is recommended to use the number of vCPUs available on machine running DBLab. With this approach, we have faster restore time, but we need to keep in mind that we can also have higher usage of CPU and disk IO on this machine (up to temporary saturation of resources). For subsequent refreshes, if DBLab is constantly used, it is recommended to reduce this value by 50% to keep some room for normal use of DBLab (such as work with clones)." })),
+    pgRestoreCustomOptions: () => (_jsx("div", { children: "pg_restore options to be used to restore from a database dump, for example: '--exclude-schema=repack --exclude-schema=\"camelStyleSchemaName\"'. Note that due to security reasons, the current implementation supports only letters, numbers, hyphen, underscore, equal sign, and double quotes." })),
+    timetable: () => (_jsxs("div", { children: ["Schedule for full data refreshes, in", ' ', _jsx("a", { target: '_blank', href: 'https://en.wikipedia.org/wiki/Cron#Overview', className: styles.externalLink, children: "crontab format" }), "."] })),
+    tuningParams: () => (_jsxs("div", { children: ["Query tuning parameters. This is essential to ensure that cloned PostgreSQL most likely generates the same plans as on the source (specifically, it is crutial for query performance troubleshooting and optimization, including working with EXPLAIN plans). For details, see the", ' ', _jsx("a", { target: '_blank', href: 'https://postgres.ai/docs/how-to-guides/administration/postgresql-configuration#postgresql-configuration-in-clones', className: styles.externalLink, children: "docs" }), "."] })),
+};