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

package/pages/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: () => _jsx("div", { children: "Test" }),
+};

package/pages/Configuration/useForm.d.ts

@@ -0,0 +1,82 @@
+/// <reference types="react" />
+export declare type FormValues = {
+    debug: boolean;
+    dockerImage: string;
+    dockerTag: string;
+    dockerPath: string;
+    dockerImageType: string;
+    sharedBuffers: string;
+    sharedPreloadLibraries: string;
+    tuningParams: string;
+    timetable: string;
+    dbname: string;
+    host: string;
+    port: string;
+    username: string;
+    password: string;
+    databases: string;
+    dumpParallelJobs: string;
+    dumpIgnoreErrors: boolean;
+    restoreParallelJobs: string;
+    restoreIgnoreErrors: boolean;
+    pgDumpCustomOptions: string;
+    pgRestoreCustomOptions: string;
+};
+export declare const useForm: (onSubmit: (values: FormValues) => void) => {
+    formik: {
+        initialValues: FormValues;
+        initialErrors: import("formik").FormikErrors<unknown>;
+        initialTouched: import("formik").FormikTouched<unknown>;
+        initialStatus: any;
+        handleBlur: {
+            (e: import("react").FocusEvent<any, Element>): void;
+            <T = any>(fieldOrEvent: T): T extends string ? (e: any) => void : void;
+        };
+        handleChange: {
+            (e: import("react").ChangeEvent<any>): void;
+            <T_1 = string | import("react").ChangeEvent<any>>(field: T_1): T_1 extends import("react").ChangeEvent<any> ? void : (e: string | import("react").ChangeEvent<any>) => void;
+        };
+        handleReset: (e: any) => void;
+        handleSubmit: (e?: import("react").FormEvent<HTMLFormElement> | undefined) => void;
+        resetForm: (nextState?: Partial<import("formik").FormikState<FormValues>> | undefined) => void;
+        setErrors: (errors: import("formik").FormikErrors<FormValues>) => void;
+        setFormikState: (stateOrCb: import("formik").FormikState<FormValues> | ((state: import("formik").FormikState<FormValues>) => import("formik").FormikState<FormValues>)) => void;
+        setFieldTouched: (field: string, touched?: boolean | undefined, shouldValidate?: boolean | undefined) => Promise<void> | Promise<import("formik").FormikErrors<FormValues>>;
+        setFieldValue: (field: string, value: any, shouldValidate?: boolean | undefined) => Promise<void> | Promise<import("formik").FormikErrors<FormValues>>;
+        setFieldError: (field: string, value: string | undefined) => void;
+        setStatus: (status: any) => void;
+        setSubmitting: (isSubmitting: boolean) => void;
+        setTouched: (touched: import("formik").FormikTouched<FormValues>, shouldValidate?: boolean | undefined) => Promise<void> | Promise<import("formik").FormikErrors<FormValues>>;
+        setValues: (values: import("react").SetStateAction<FormValues>, shouldValidate?: boolean | undefined) => Promise<void> | Promise<import("formik").FormikErrors<FormValues>>;
+        submitForm: () => Promise<any>;
+        validateForm: (values?: FormValues | undefined) => Promise<import("formik").FormikErrors<FormValues>>;
+        validateField: (name: string) => Promise<void> | Promise<string | undefined>;
+        isValid: boolean;
+        dirty: boolean;
+        unregisterField: (name: string) => void;
+        registerField: (name: string, { validate }: any) => void;
+        getFieldProps: (nameOrOptions: any) => import("formik").FieldInputProps<any>;
+        getFieldMeta: (name: string) => import("formik").FieldMetaProps<any>;
+        getFieldHelpers: (name: string) => import("formik").FieldHelperProps<any>;
+        validateOnBlur: boolean;
+        validateOnChange: boolean;
+        validateOnMount: boolean;
+        values: FormValues;
+        errors: import("formik").FormikErrors<FormValues>;
+        touched: import("formik").FormikTouched<FormValues>;
+        isSubmitting: boolean;
+        isValidating: boolean;
+        status?: any;
+        submitCount: number;
+    };
+    connectionData: {
+        dockerImage?: string | undefined;
+        db_list?: string[] | undefined;
+        host: string;
+        port: string;
+        username: string;
+        password: string;
+        dbname: string;
+    };
+    isConnectionDataValid: string;
+}[];

package/pages/Configuration/useForm.js

@@ -0,0 +1,74 @@
+/*--------------------------------------------------------------------------
+ * Copyright (c) 2019-2021, Postgres.ai, Nikolay Samokhvalov nik@postgres.ai
+ * All Rights Reserved. Proprietary and confidential.
+ * Unauthorized copying of this file, via any medium is strictly prohibited
+ *--------------------------------------------------------------------------
+ */
+import { useFormik } from 'formik';
+import * as Yup from 'yup';
+const Schema = Yup.object().shape({
+    dockerImage: Yup.string().required('Docker image is required'),
+    dbname: Yup.string().required('Dbname is required'),
+    host: Yup.string().required('Host is required'),
+    port: Yup.string().required('Port is required'),
+    username: Yup.string().required('Username is required'),
+});
+export const useForm = (onSubmit) => {
+    const formik = useFormik({
+        initialValues: {
+            debug: false,
+            dockerImage: '',
+            dockerTag: '',
+            dockerPath: '',
+            dockerImageType: '',
+            sharedBuffers: '',
+            sharedPreloadLibraries: '',
+            tuningParams: '',
+            timetable: '',
+            dbname: '',
+            host: '',
+            port: '',
+            username: '',
+            password: '',
+            databases: '',
+            dumpParallelJobs: '',
+            restoreParallelJobs: '',
+            pgDumpCustomOptions: '',
+            pgRestoreCustomOptions: '',
+            dumpIgnoreErrors: false,
+            restoreIgnoreErrors: false,
+        },
+        validationSchema: Schema,
+        onSubmit,
+        validateOnBlur: false,
+        validateOnChange: false,
+    });
+    const formatDatabaseArray = (database) => {
+        let databases = [];
+        const splitDatabaseArray = database.split(/[,(\s)(\n)(\r)(\t)(\r\n)]/);
+        for (let i = 0; i < splitDatabaseArray.length; i++) {
+            if (splitDatabaseArray[i] !== '') {
+                databases.push(splitDatabaseArray[i]);
+            }
+        }
+        return databases;
+    };
+    const connectionData = {
+        host: formik.values.host,
+        port: formik.values.port,
+        username: formik.values.username,
+        password: formik.values.password,
+        dbname: formik.values.dbname,
+        ...(formik.values.databases && {
+            db_list: formatDatabaseArray(formik.values.databases),
+        }),
+        ...(formik.values.dockerImageType === 'custom' && {
+            dockerImage: formik.values.dockerImage,
+        }),
+    };
+    const isConnectionDataValid = formik.values.host &&
+        formik.values.port &&
+        formik.values.username &&
+        formik.values.dbname;
+    return [{ formik, connectionData, isConnectionDataValid }];
+};

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

@@ -0,0 +1,22 @@
+import { DatabaseType } from '@postgres.ai/shared/types/api/entities/config';
+import { FormValues } from '../useForm';
+export declare type FormValuesKey = keyof FormValues;
+interface DockerImage {
+    package_group: string;
+    pg_major_version: string;
+    tag: string;
+    location: string;
+}
+export declare const uniqueChipValue: (values: string) => string;
+export declare const postUniqueDatabases: (values: string) => {
+    [k: string]: string | Object;
+} | null;
+export declare const genericDockerImages: DockerImage[];
+export declare const isSeDockerImage: (dockerImage: string | undefined) => boolean;
+export declare const getImageType: (imageUrl: string) => string;
+export declare const getImageMajorVersion: (pgImage: string | undefined) => string | undefined;
+export declare const formatDatabases: (databases: DatabaseType | null) => string;
+export declare const formatDumpCustomOptions: (options: string[] | null) => string;
+export declare const postUniqueCustomOptions: (options: string) => string[];
+export declare const customOrGenericImage: (dockerImage: string | undefined) => boolean;
+export {};

package/pages/Configuration/utils/index.js

@@ -0,0 +1,105 @@
+import { dockerImageOptions } from '../configOptions';
+const seContainerRegistry = 'se-images';
+const genericImagePrefix = 'postgresai/extended-postgres';
+// since some tags are rc, we need to specify the exact tags to use
+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'],
+};
+export const uniqueChipValue = (values) => {
+    const splitChipArray = values.split(/[,(\s)(\n)(\r)(\t)(\r\n)]/);
+    let databaseArray = [];
+    for (let i in splitChipArray) {
+        if (splitChipArray[i] !== '' &&
+            databaseArray.indexOf(splitChipArray[i]) === -1) {
+            databaseArray.push(splitChipArray[i]);
+        }
+    }
+    return databaseArray.join(' ');
+};
+export const postUniqueDatabases = (values) => {
+    const splitDatabaseArray = values.split(/[,(\s)(\n)(\r)(\t)(\r\n)]/);
+    const databases = splitDatabaseArray.reduce((acc, curr) => {
+        acc[curr] = {};
+        return acc;
+    }, {});
+    const nonEmptyDatabase = Object.fromEntries(Object.entries(databases).filter(([name]) => name != ''));
+    return values.length !== 0 ? nonEmptyDatabase : null;
+};
+const createDockerImages = (dockerImagesConfig) => {
+    const dockerImages = [];
+    for (const pg_major_version in dockerImagesConfig) {
+        if (dockerImagesConfig.hasOwnProperty(pg_major_version)) {
+            const customTags = dockerImagesConfig[pg_major_version];
+            customTags.forEach((tag) => {
+                const image = {
+                    package_group: 'postgresai',
+                    pg_major_version,
+                    tag: `${pg_major_version}-${tag}`,
+                    location: `${genericImagePrefix}:${pg_major_version}-${tag}`,
+                };
+                dockerImages.push(image);
+            });
+        }
+    }
+    return dockerImages;
+};
+export const genericDockerImages = createDockerImages(dockerImagesConfig);
+export const isSeDockerImage = (dockerImage) => {
+    var _a;
+    const dockerImageType = (dockerImage === null || dockerImage === void 0 ? void 0 : dockerImage.includes(seContainerRegistry)) &&
+        ((_a = dockerImage.split(`${seContainerRegistry}/`)[1]) === null || _a === void 0 ? void 0 : _a.split(':')[0]);
+    return dockerImageOptions.some((element) => element.type === dockerImageType);
+};
+export const getImageType = (imageUrl) => {
+    var _a;
+    const postgresCustomImageType = imageUrl.includes(seContainerRegistry) &&
+        ((_a = imageUrl.split(`${seContainerRegistry}/`)[1]) === null || _a === void 0 ? void 0 : _a.split(':')[0]);
+    if (imageUrl.includes(genericImagePrefix)) {
+        return 'Generic Postgres';
+    }
+    else if (postgresCustomImageType && isSeDockerImage(imageUrl)) {
+        return postgresCustomImageType;
+    }
+    else {
+        return 'custom';
+    }
+};
+export const getImageMajorVersion = (pgImage) => {
+    const pgImageVersion = pgImage === null || pgImage === void 0 ? void 0 : pgImage.split(':')[1];
+    const pgServerVersion = pgImageVersion === null || pgImageVersion === void 0 ? void 0 : pgImageVersion.split('-')[0];
+    return (pgServerVersion === null || pgServerVersion === void 0 ? void 0 : pgServerVersion.includes('.'))
+        ? pgServerVersion === null || pgServerVersion === void 0 ? void 0 : pgServerVersion.split('.')[0]
+        : pgServerVersion;
+};
+export const formatDatabases = (databases) => {
+    let formattedDatabases = '';
+    if (databases !== null) {
+        Object.keys(databases).forEach(function (key) {
+            formattedDatabases += key + ' ';
+        });
+    }
+    return formattedDatabases;
+};
+export const formatDumpCustomOptions = (options) => {
+    let formattedOptions = '';
+    if (options !== null) {
+        options.forEach(function (key) {
+            formattedOptions += key + ' ';
+        });
+    }
+    return formattedOptions;
+};
+export const postUniqueCustomOptions = (options) => {
+    const splitOptionsArray = options.split(/[,(\s)(\n)(\r)(\t)(\r\n)]/);
+    const uniqueOptions = splitOptionsArray.filter((item, index) => splitOptionsArray.indexOf(item) === index && item !== '');
+    return uniqueOptions;
+};
+export const customOrGenericImage = (dockerImage) => dockerImage === 'Generic Postgres' || dockerImage === 'custom';

package/pages/CreateClone/index.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { MainStoreApi } from './useCreatedStores';
+declare type Host = {
+    instanceId: string;
+    routes: {
+        clone: (cloneId: string) => string;
+    };
+    api: MainStoreApi;
+    elements: {
+        breadcrumbs: React.ReactNode;
+    };
+};
+declare type Props = Host;
+export declare const CreateClone: ((props: Props) => JSX.Element) & {
+    displayName: string;
+};
+export {};

package/pages/CreateClone/index.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'classnames';
+import { useEffect } from 'react';
+import { useHistory } from 'react-router-dom';
+import { observer } from 'mobx-react-lite';
+import { useTimer } from 'use-timer';
+import { Paper, FormControlLabel, Checkbox } from '@material-ui/core';
+import { Info as InfoIcon } from '@material-ui/icons';
+import { StubSpinner } from '@postgres.ai/shared/components/StubSpinnerFlex';
+import { TextField } from '@postgres.ai/shared/components/TextField';
+import { Select } from '@postgres.ai/shared/components/Select';
+import { Button } from '@postgres.ai/shared/components/Button';
+import { Spinner } from '@postgres.ai/shared/components/Spinner';
+import { ErrorStub } from '@postgres.ai/shared/components/ErrorStub';
+import { compareSnapshotsDesc } from '@postgres.ai/shared/utils/snapshot';
+import { round } from '@postgres.ai/shared/utils/numbers';
+import { formatBytesIEC } from '@postgres.ai/shared/utils/units';
+import { SectionTitle } from '@postgres.ai/shared/components/SectionTitle';
+import { MIN_ENTROPY, getEntropy, validatePassword, } from '@postgres.ai/shared/helpers/getEntropy';
+import { useCreatedStores } from './useCreatedStores';
+import { useForm } from './useForm';
+import styles from './styles.module.scss';
+export const CreateClone = observer((props) => {
+    var _a, _b, _c, _d;
+    const history = useHistory();
+    const stores = useCreatedStores(props.api);
+    const cloneError = stores.main.cloneError;
+    const timer = useTimer();
+    // Form.
+    const onSubmit = async (values) => {
+        if (!values.dbPassword || getEntropy(values.dbPassword) < MIN_ENTROPY) {
+            formik.setFieldError('dbPassword', validatePassword(values.dbPassword, MIN_ENTROPY));
+            return;
+        }
+        timer.start();
+        const isSuccess = await stores.main.createClone(values);
+        formik.setFieldError('dbPassword', '');
+        if (!isSuccess || cloneError) {
+            timer.pause();
+            timer.reset();
+        }
+    };
+    const formik = useForm(onSubmit);
+    // Initial loading data.
+    useEffect(() => {
+        stores.main.load(props.instanceId);
+    }, []);
+    // Redirect when clone is created and stable.
+    useEffect(() => {
+        if (!stores.main.clone)
+            return;
+        if (!stores.main.isCloneStable)
+            return;
+        history.push(props.routes.clone(stores.main.clone.id));
+    }, [stores.main.clone, stores.main.isCloneStable]);
+    // Snapshots.
+    const sortedSnapshots = (_a = stores.main.snapshots.data) === null || _a === void 0 ? void 0 : _a.slice().sort(compareSnapshotsDesc);
+    useEffect(() => {
+        const [firstSnapshot] = sortedSnapshots !== null && sortedSnapshots !== void 0 ? sortedSnapshots : [];
+        if (!firstSnapshot)
+            return;
+        formik.setFieldValue('snapshotId', firstSnapshot.id);
+    }, [Boolean(sortedSnapshots)]);
+    const headRendered = (_jsxs(_Fragment, { children: [_jsx("style", { children: 'p { margin: 0; }' }), props.elements.breadcrumbs, _jsx(SectionTitle, { className: styles.title, tag: "h1", level: 1, text: "Create clone" })] }));
+    // Initial loading spinner.
+    if (!stores.main.instance || !stores.main.snapshots.data)
+        return (_jsxs(_Fragment, { children: [headRendered, _jsx(StubSpinner, {})] }));
+    // Instance getting error.
+    if (stores.main.instanceError)
+        return (_jsxs(_Fragment, { children: [headRendered, _jsx(ErrorStub, { message: stores.main.instanceError })] }));
+    // Snapshots getting error.
+    if (stores.main.snapshots.error)
+        return _jsx(ErrorStub, { message: stores.main.snapshots.error });
+    const isCloneUnstable = Boolean(stores.main.clone && !stores.main.isCloneStable);
+    const isCreatingClone = formik.isSubmitting || isCloneUnstable;
+    return (_jsxs(_Fragment, { children: [headRendered, _jsxs("div", { className: styles.form, children: [stores.main.cloneError && (_jsx("div", { className: styles.section, children: _jsx(ErrorStub, { message: stores.main.cloneError }) })), _jsxs("div", { className: styles.section, children: [_jsx(TextField, { fullWidth: true, label: "Clone ID", value: formik.values.cloneId, onChange: (e) => formik.setFieldValue('cloneId', e.target.value), error: Boolean(formik.errors.cloneId), disabled: isCreatingClone }), _jsx(Select, { fullWidth: true, label: "Data state time *", value: formik.values.snapshotId, disabled: !sortedSnapshots || isCreatingClone, onChange: (e) => formik.setFieldValue('snapshotId', e.target.value), error: Boolean(formik.errors.snapshotId), items: (_b = sortedSnapshots === null || sortedSnapshots === void 0 ? void 0 : sortedSnapshots.map((snapshot, i) => {
+                                    const isLatest = i === 0;
+                                    return {
+                                        value: snapshot.id,
+                                        children: (_jsxs(_Fragment, { children: [snapshot.dataStateAt, isLatest && (_jsx("span", { className: styles.snapshotTag, children: "Latest" }))] })),
+                                    };
+                                })) !== null && _b !== void 0 ? _b : [] }), _jsx("p", { className: styles.remark, children: "By default latest snapshot of database is used. You can select\u00A0 different snapshots if earlier database state is needed" })] }), _jsxs("div", { className: styles.section, children: [_jsx("h2", { className: styles.title, children: "Database credentials *" }), _jsx("p", { className: styles.text, children: "Set custom credentials for the new clone. Save the password in reliable place, it can\u2019t be read later." }), _jsx(TextField, { fullWidth: true, label: "Database username *", value: formik.values.dbUser, onChange: (e) => formik.setFieldValue('dbUser', e.target.value), error: Boolean(formik.errors.dbUser), disabled: isCreatingClone }), _jsx(TextField, { fullWidth: true, label: "Database password *", type: "password", value: formik.values.dbPassword, onChange: (e) => {
+                                    formik.setFieldValue('dbPassword', e.target.value);
+                                    if (formik.errors.dbPassword) {
+                                        formik.setFieldError('dbPassword', '');
+                                    }
+                                }, error: Boolean(formik.errors.dbPassword), disabled: isCreatingClone }), _jsx("p", { className: cn(formik.errors.dbPassword && styles.error, styles.remark), children: formik.errors.dbPassword })] }), _jsx("div", { className: styles.section, children: _jsxs(Paper, { className: styles.summary, children: [_jsx(InfoIcon, { className: styles.summaryIcon }), _jsxs("div", { className: styles.params, children: [_jsxs("p", { className: styles.param, children: [_jsx("span", { children: "Data size:" }), _jsx("strong", { children: ((_c = stores.main.instance.state) === null || _c === void 0 ? void 0 : _c.dataSize)
+                                                        ? formatBytesIEC(stores.main.instance.state.dataSize)
+                                                        : '-' })] }), _jsxs("p", { className: styles.param, children: [_jsx("span", { children: "Expected cloning time:" }), _jsxs("strong", { children: [round((_d = stores.main.instance.state) === null || _d === void 0 ? void 0 : _d.cloning.expectedCloningTime, 2), ' ', "s"] })] })] })] }) }), _jsxs("div", { className: styles.section, children: [_jsx(FormControlLabel, { label: "Enable deletion protection", control: _jsx(Checkbox, { checked: formik.values.isProtected, onChange: (e) => formik.setFieldValue('isProtected', e.target.checked), name: "protected", disabled: isCreatingClone }) }), _jsxs("p", { className: styles.remark, children: ["When enabled no one can delete this clone and automated deletion is also disabled.", _jsx("br", {}), "Please be careful: abandoned clones with this checkbox enabled may cause out-of-disk-space events. Check disk space on daily basis and delete this clone once the work is done."] })] }), _jsx("div", { className: styles.section, children: _jsxs("div", { className: styles.controls, children: [_jsxs(Button, { onClick: formik.submitForm, variant: "primary", size: "medium", isDisabled: isCreatingClone, children: ["Create clone", isCreatingClone && (_jsx(Spinner, { size: "sm", className: styles.spinner }))] }), isCreatingClone && (_jsxs("p", { className: styles.elapsedTime, children: ["Elapsed time: ", timer.time, " s"] }))] }) })] })] }));
+});

package/pages/CreateClone/stores/Main.d.ts

@@ -0,0 +1,26 @@
+import { Instance } from '@postgres.ai/shared/types/api/entities/instance';
+import { Clone } from '@postgres.ai/shared/types/api/entities/clone';
+import { GetInstance } from '@postgres.ai/shared/types/api/endpoints/getInstance';
+import { CreateClone } from '@postgres.ai/shared/types/api/endpoints/createClone';
+import { GetClone } from '@postgres.ai/shared/types/api/endpoints/getClone';
+import { SnapshotsStore, SnapshotsApi } from '@postgres.ai/shared/stores/Snapshots';
+import { FormValues } from '../useForm';
+export declare type MainStoreApi = SnapshotsApi & {
+    getInstance: GetInstance;
+    createClone: CreateClone;
+    getClone: GetClone;
+};
+export declare class MainStore {
+    instance: Instance | null;
+    instanceError: string | null;
+    clone: Clone | null;
+    cloneError: string | null;
+    private cloneUpdateTimeout?;
+    private readonly api;
+    readonly snapshots: SnapshotsStore;
+    constructor(api: MainStoreApi);
+    get isCloneStable(): boolean | undefined;
+    load: (instanceId: string) => Promise<boolean>;
+    createClone: (data: FormValues) => Promise<boolean>;
+    private updateCloneUntilStable;
+}

package/pages/CreateClone/stores/Main.js

@@ -0,0 +1,61 @@
+import { makeAutoObservable } from 'mobx';
+import { SnapshotsStore, } from '@postgres.ai/shared/stores/Snapshots';
+import { getTextFromUnknownApiError } from '@postgres.ai/shared/utils/api';
+import { checkIsCloneStable } from '@postgres.ai/shared/utils/clone';
+const UNSTABLE_CLONE_UPDATE_TIMEOUT = 1000;
+export class MainStore {
+    constructor(api) {
+        this.instance = null;
+        this.instanceError = null;
+        this.clone = null;
+        this.cloneError = null;
+        this.load = async (instanceId) => {
+            const [instance, isLoadedSnapshots] = await Promise.all([
+                this.api.getInstance({ instanceId }),
+                this.snapshots.load(instanceId),
+            ]);
+            if (instance.response)
+                this.instance = instance.response;
+            if (instance.error)
+                this.instanceError = await getTextFromUnknownApiError(instance.error);
+            return Boolean(instance.response) && isLoadedSnapshots;
+        };
+        this.createClone = async (data) => {
+            if (!this.instance)
+                return false;
+            const { response, error } = await this.api.createClone({
+                ...data,
+                instanceId: this.instance.id,
+            });
+            if (response) {
+                this.clone = response;
+                this.updateCloneUntilStable({
+                    instanceId: this.instance.id,
+                    cloneId: this.clone.id,
+                });
+            }
+            if (error)
+                this.cloneError = await error.json().then((err) => (err === null || err === void 0 ? void 0 : err.message) || err);
+            return Boolean(response);
+        };
+        this.updateCloneUntilStable = async (args) => {
+            window.clearTimeout(this.cloneUpdateTimeout);
+            const { response, error } = await this.api.getClone(args);
+            if (response) {
+                this.clone = response;
+                if (!this.isCloneStable)
+                    this.cloneUpdateTimeout = window.setTimeout(() => this.updateCloneUntilStable(args), UNSTABLE_CLONE_UPDATE_TIMEOUT);
+            }
+            if (error)
+                this.cloneError = await error.json().then((err) => (err === null || err === void 0 ? void 0 : err.message) || err);
+        };
+        makeAutoObservable(this);
+        this.api = api;
+        this.snapshots = new SnapshotsStore(api);
+    }
+    get isCloneStable() {
+        if (!this.clone)
+            return;
+        return checkIsCloneStable(this.clone);
+    }
+}

package/pages/CreateClone/useCreatedStores.d.ts

@@ -0,0 +1,6 @@
+import { MainStore, MainStoreApi } from './stores/Main';
+export declare const useCreatedStores: (api: MainStoreApi) => {
+    main: MainStore;
+};
+export declare type Stores = ReturnType<typeof useCreatedStores>;
+export type { MainStoreApi };

package/pages/CreateClone/useCreatedStores.js

@@ -0,0 +1,5 @@
+import { useMemo } from 'react';
+import { MainStore } from './stores/Main';
+export const useCreatedStores = (api) => ({
+    main: useMemo(() => new MainStore(api), []),
+});

package/pages/CreateClone/useForm.d.ts

@@ -0,0 +1,54 @@
+/// <reference types="react" />
+export declare type FormValues = {
+    cloneId: string;
+    snapshotId: string;
+    dbUser: string;
+    dbPassword: string;
+    isProtected: boolean;
+};
+export declare const useForm: (onSubmit: (values: FormValues) => void) => {
+    initialValues: FormValues;
+    initialErrors: import("formik").FormikErrors<unknown>;
+    initialTouched: import("formik").FormikTouched<unknown>;
+    initialStatus: any;
+    handleBlur: {
+        (e: import("react").FocusEvent<any, Element>): void;
+        <T = any>(fieldOrEvent: T): T extends string ? (e: any) => void : void;
+    };
+    handleChange: {
+        (e: import("react").ChangeEvent<any>): void;
+        <T_1 = string | import("react").ChangeEvent<any>>(field: T_1): T_1 extends import("react").ChangeEvent<any> ? void : (e: string | import("react").ChangeEvent<any>) => void;
+    };
+    handleReset: (e: any) => void;
+    handleSubmit: (e?: import("react").FormEvent<HTMLFormElement> | undefined) => void;
+    resetForm: (nextState?: Partial<import("formik").FormikState<FormValues>> | undefined) => void;
+    setErrors: (errors: import("formik").FormikErrors<FormValues>) => void;
+    setFormikState: (stateOrCb: import("formik").FormikState<FormValues> | ((state: import("formik").FormikState<FormValues>) => import("formik").FormikState<FormValues>)) => void;
+    setFieldTouched: (field: string, touched?: boolean | undefined, shouldValidate?: boolean | undefined) => Promise<void> | Promise<import("formik").FormikErrors<FormValues>>;
+    setFieldValue: (field: string, value: any, shouldValidate?: boolean | undefined) => Promise<void> | Promise<import("formik").FormikErrors<FormValues>>;
+    setFieldError: (field: string, value: string | undefined) => void;
+    setStatus: (status: any) => void;
+    setSubmitting: (isSubmitting: boolean) => void;
+    setTouched: (touched: import("formik").FormikTouched<FormValues>, shouldValidate?: boolean | undefined) => Promise<void> | Promise<import("formik").FormikErrors<FormValues>>;
+    setValues: (values: import("react").SetStateAction<FormValues>, shouldValidate?: boolean | undefined) => Promise<void> | Promise<import("formik").FormikErrors<FormValues>>;
+    submitForm: () => Promise<any>;
+    validateForm: (values?: FormValues | undefined) => Promise<import("formik").FormikErrors<FormValues>>;
+    validateField: (name: string) => Promise<void> | Promise<string | undefined>;
+    isValid: boolean;
+    dirty: boolean;
+    unregisterField: (name: string) => void;
+    registerField: (name: string, { validate }: any) => void;
+    getFieldProps: (nameOrOptions: any) => import("formik").FieldInputProps<any>;
+    getFieldMeta: (name: string) => import("formik").FieldMetaProps<any>;
+    getFieldHelpers: (name: string) => import("formik").FieldHelperProps<any>;
+    validateOnBlur: boolean;
+    validateOnChange: boolean;
+    validateOnMount: boolean;
+    values: FormValues;
+    errors: import("formik").FormikErrors<FormValues>;
+    touched: import("formik").FormikTouched<FormValues>;
+    isSubmitting: boolean;
+    isValidating: boolean;
+    status?: any;
+    submitCount: number;
+};

package/pages/CreateClone/useForm.js

@@ -0,0 +1,25 @@
+import { useFormik } from 'formik';
+import * as Yup from 'yup';
+const Schema = Yup.object().shape({
+    cloneId: Yup.string(),
+    snapshotId: Yup.string().required('Date state time is required'),
+    dbUser: Yup.string().required('Database username is required'),
+    dbPassword: Yup.string().required('Database password is required'),
+    isProtected: Yup.boolean(),
+});
+export const useForm = (onSubmit) => {
+    const formik = useFormik({
+        initialValues: {
+            cloneId: '',
+            snapshotId: '',
+            dbUser: '',
+            dbPassword: '',
+            isProtected: false,
+        },
+        validationSchema: Schema,
+        onSubmit,
+        validateOnBlur: false,
+        validateOnChange: false,
+    });
+    return formik;
+};

package/pages/Instance/Clones/Header/Item/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+declare type Props = {
+    value: React.ReactNode;
+    children: React.ReactNode;
+};
+export declare const Item: (props: Props) => JSX.Element;
+export {};

package/pages/Instance/Clones/Header/Item/index.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from './styles.module.scss';
+export const Item = (props) => {
+    return (_jsxs("div", { className: styles.root, children: [_jsx("div", { className: styles.value, children: props.value }), _jsx("div", { className: styles.description, children: props.children })] }));
+};

package/pages/Instance/Clones/Header/index.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+declare type Props = {
+    expectedCloningTimeS: number;
+    logicalSize: number | null;
+    clonesCount: number;
+    clonesCountLastMonth?: number;
+};
+export declare const Header: (props: Props) => JSX.Element;
+export {};