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

package/pages/CreateBranch/index.js

@@ -0,0 +1,135 @@
+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 medium is strictly prohibited
+ *--------------------------------------------------------------------------
+ */
+import cn from 'classnames';
+import { useHistory } from 'react-router';
+import { observer } from 'mobx-react-lite';
+import { useEffect, useState } from 'react';
+import { TextField, makeStyles } from '@material-ui/core';
+import { Button } from '@postgres.ai/shared/components/Button';
+import { ResponseMessage } from '@postgres.ai/shared/pages/Instance/Configuration/ResponseMessage';
+import { Select } from '@postgres.ai/shared/components/Select';
+import { SectionTitle } from '@postgres.ai/shared/components/SectionTitle';
+import { ErrorStub } from '@postgres.ai/shared/components/ErrorStub';
+import { SyntaxHighlight } from '@postgres.ai/shared/components/SyntaxHighlight';
+import { StubSpinner } from '@postgres.ai/shared/components/StubSpinnerFlex';
+import { Spinner } from '@postgres.ai/shared/components/Spinner';
+import { useForm } from './useForm';
+import { useCreatedStores } from './useCreatedStores';
+import { getCliBranchListCommand, getCliCreateBranchCommand } from './utils';
+import { InstanceTabs, TABS_INDEX } from "../Instance/Tabs";
+const useStyles = makeStyles({
+    wrapper: {
+        display: 'flex',
+        gap: '60px',
+        maxWidth: '1200px',
+        fontSize: '14px',
+        marginTop: '20px',
+        '@media (max-width: 1300px)': {
+            flexDirection: 'column',
+            gap: '20px',
+        },
+    },
+    container: {
+        maxWidth: '100%',
+        flex: '1 1 0',
+        minWidth: 0,
+        '&  p,span': {
+            fontSize: 14,
+        },
+    },
+    snippetContainer: {
+        flex: '1 1 0',
+        minWidth: 0,
+        boxShadow: 'rgba(0, 0, 0, 0.1) 0px 4px 12px',
+        padding: '10px 20px 10px 20px',
+        height: 'max-content',
+        borderRadius: '4px',
+    },
+    marginBottom: {
+        marginBottom: '8px',
+    },
+    marginBottom2x: {
+        marginBottom: '16px',
+    },
+    marginTop: {
+        marginTop: '8px',
+    },
+    title: {
+        marginTop: '8px',
+        lineHeight: '26px'
+    },
+    form: {
+        marginTop: '16px',
+    },
+    spinner: {
+        marginLeft: '8px',
+        color: '#fff',
+    },
+    snapshotOverflow: {
+        width: '100%',
+        wordWrap: 'break-word',
+        whiteSpace: 'initial',
+    },
+}, { index: 1 });
+export const CreateBranchPage = observer(({ instanceId, api, elements, routes, isPlatform }) => {
+    const stores = useCreatedStores(api);
+    const classes = useStyles();
+    const history = useHistory();
+    const [branchSnapshots, setBranchSnapshots] = useState([]);
+    const { load, branchesList, getBranchesError, createBranch, createBranchError, isBranchesLoading, isCreatingBranch, getSnapshots, snapshotsError, } = stores.main;
+    const handleSubmit = async (values) => {
+        await createBranch({
+            ...values,
+            instanceId,
+        }).then((branch) => {
+            if (branch && (branch === null || branch === void 0 ? void 0 : branch.name)) {
+                history.push(routes.branch(branch.name));
+            }
+        });
+    };
+    const fetchSnapshots = async (branchName) => {
+        await getSnapshots(instanceId, branchName).then((response) => {
+            var _a;
+            if (response) {
+                setBranchSnapshots(response);
+                formik.setFieldValue('snapshotID', (_a = response[0]) === null || _a === void 0 ? void 0 : _a.id);
+            }
+        });
+    };
+    const handleParentBranchChange = async (e) => {
+        const branchName = e.target.value;
+        formik.setFieldValue('baseBranch', branchName);
+        await fetchSnapshots(branchName);
+    };
+    const [{ formik }] = useForm(handleSubmit);
+    useEffect(() => {
+        load(instanceId);
+        fetchSnapshots(formik.values.baseBranch);
+    }, [formik.values.baseBranch]);
+    if (isBranchesLoading) {
+        return _jsx(StubSpinner, {});
+    }
+    return (_jsxs(_Fragment, { children: [elements.breadcrumbs, _jsx(SectionTitle, { tag: "h1", level: 1, text: "Create branch", className: classes.title, children: _jsx(InstanceTabs, { tab: TABS_INDEX.BRANCHES, isPlatform: isPlatform, instanceId: instanceId, hasLogs: api.initWS !== undefined }) }), _jsxs("div", { className: classes.wrapper, children: [_jsxs("div", { className: classes.container, children: [(snapshotsError || getBranchesError) && (_jsx("div", { className: classes.marginTop, children: _jsx(ErrorStub, { message: (snapshotsError === null || snapshotsError === void 0 ? void 0 : snapshotsError.message) || (getBranchesError === null || getBranchesError === void 0 ? void 0 : getBranchesError.message) }) })), _jsxs("div", { className: classes.form, children: [_jsx(TextField, { label: "Branch name", variant: "outlined", required: true, fullWidth: true, size: "small", InputLabelProps: {
+                                            shrink: true,
+                                        }, value: formik.values.branchName, error: Boolean(formik.errors.branchName), className: classes.marginBottom, onChange: (e) => formik.setFieldValue('branchName', e.target.value) }), _jsx("p", { className: cn(classes.marginTop, classes.marginBottom), children: "Choose an existing branch. The new branch will initially point at the same snapshot as the parent branch but going further, their evolution paths will be independent - new snapshots can be created for both branches." }), _jsx(Select, { fullWidth: true, label: "Parent branch", value: formik.values.baseBranch, disabled: !branchesList || formik.isSubmitting, onChange: handleParentBranchChange, error: Boolean(formik.errors.baseBranch), items: branchesList
+                                            ? branchesList.map((branch) => {
+                                                return {
+                                                    value: branch.name,
+                                                    children: branch.name,
+                                                };
+                                            })
+                                            : [] }), _jsx("strong", { children: "Snapshot ID" }), _jsx("p", { className: cn(classes.marginTop, classes.marginBottom), children: "Choose an existing snapshot. This snapshot will be memorized as a forking point for the new branch; it cannot be deleted while the branch exists." }), _jsx(Select, { fullWidth: true, className: classes.marginBottom2x, label: "Snapshot ID", value: formik.values.snapshotID, disabled: !branchesList || formik.isSubmitting, onChange: (e) => formik.setFieldValue('snapshotID', e.target.value), error: Boolean(formik.errors.baseBranch), items: branchSnapshots
+                                            ? branchSnapshots.map((snapshot, i) => {
+                                                const isLatest = i === 0;
+                                                return {
+                                                    value: snapshot.id,
+                                                    children: (_jsxs("div", { children: [_jsxs("strong", { className: classes.snapshotOverflow, children: [snapshot === null || snapshot === void 0 ? void 0 : snapshot.id, " ", isLatest && _jsx("span", { children: "Latest" })] }), (snapshot === null || snapshot === void 0 ? void 0 : snapshot.dataStateAt) && (_jsxs("p", { children: ["Data state at: ", snapshot === null || snapshot === void 0 ? void 0 : snapshot.dataStateAt] }))] })),
+                                                };
+                                            })
+                                            : [] }), _jsxs(Button, { variant: "primary", size: "medium", className: classes.marginTop, onClick: formik.submitForm, children: ["Create branch", isCreatingBranch && (_jsx(Spinner, { size: "sm", className: classes.spinner }))] }), createBranchError && (_jsx(ResponseMessage, { type: 'error', message: createBranchError }))] })] }), ' ', _jsxs("div", { className: classes.snippetContainer, children: [_jsx(SectionTitle, { tag: "h1", level: 1, text: "The same using CLI" }), _jsx("p", { className: classes.marginTop, children: "Alternatively, you can create a new branch using CLI. Fill the form, copy the command below and paste it into your terminal." }), _jsx(SyntaxHighlight, { content: getCliCreateBranchCommand(formik.values.branchName, formik.values.baseBranch) }), _jsx(SectionTitle, { className: classes.marginTop, tag: "h2", level: 2, text: 'Get branches using CLI' }), _jsx("p", { className: classes.marginTop, children: "You can get a list of all branches using CLI. Copy the command below and paste it into your terminal." }), _jsx(SyntaxHighlight, { content: getCliBranchListCommand() })] })] })] }));
+});

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

@@ -0,0 +1,43 @@
+import { GetBranches } from '@postgres.ai/shared/types/api/endpoints/getBranches';
+import { CreateBranch, CreateBranchFormValues } from '@postgres.ai/shared/types/api/endpoints/createBranch';
+import { Branch } from '@postgres.ai/shared/types/api/endpoints/getBranches';
+import { GetSnapshots } from '@postgres.ai/shared/types/api/endpoints/getSnapshots';
+import { InitWS } from '@postgres.ai/shared/types/api/endpoints/initWS';
+declare type Error = {
+    title?: string;
+    message: string;
+};
+export declare type MainStoreApi = {
+    getBranches: GetBranches;
+    createBranch: CreateBranch;
+    getSnapshots: GetSnapshots;
+    initWS?: InitWS;
+};
+export declare class MainStore {
+    snapshotsError: Error | null;
+    getBranchesError: Error | null;
+    createBranchError: string | null;
+    isBranchesLoading: boolean;
+    isCreatingBranch: boolean;
+    branchesList: Branch[];
+    private readonly api;
+    constructor(api: MainStoreApi);
+    load: (instanceId: string) => Promise<void>;
+    createBranch: (values: CreateBranchFormValues) => Promise<import("../../../types/api/entities/createBranch").CreateBranchDTO | null | undefined>;
+    getBranches: (instanceId: string) => Promise<Branch[] | null | undefined>;
+    getSnapshots: (instanceId: string, branchName?: string) => Promise<{
+        createdAtDate: Date;
+        dataStateAtDate: Date;
+        numClones: string | number;
+        clones: string[];
+        createdAt: string;
+        dataStateAt: string;
+        id: string;
+        pool: string;
+        physicalSize: number;
+        logicalSize: number;
+        message: string;
+        branch: string;
+    }[] | null | undefined>;
+}
+export {};

package/pages/CreateBranch/stores/Main.js

@@ -0,0 +1,59 @@
+/*--------------------------------------------------------------------------
+ * 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 { makeAutoObservable } from 'mobx';
+export class MainStore {
+    constructor(api) {
+        this.snapshotsError = null;
+        this.getBranchesError = null;
+        this.createBranchError = null;
+        this.isBranchesLoading = false;
+        this.isCreatingBranch = false;
+        this.branchesList = [];
+        this.load = async (instanceId) => {
+            await this.getBranches(instanceId).then((response) => {
+                if (response) {
+                    this.branchesList = response;
+                }
+            });
+        };
+        this.createBranch = async (values) => {
+            if (!this.api.createBranch)
+                return;
+            this.isCreatingBranch = true;
+            this.createBranchError = null;
+            const { response, error } = await this.api.createBranch(values);
+            this.isCreatingBranch = false;
+            if (error)
+                this.createBranchError = await error.json().then((err) => err.details);
+            return response;
+        };
+        this.getBranches = async (instanceId) => {
+            if (!this.api.getBranches)
+                return;
+            this.isBranchesLoading = true;
+            const { response, error } = await this.api.getBranches(instanceId);
+            this.isBranchesLoading = false;
+            if (error)
+                this.getBranchesError = await error.json().then((err) => err);
+            return response;
+        };
+        this.getSnapshots = async (instanceId, branchName) => {
+            if (!this.api.getSnapshots)
+                return;
+            const { response, error } = await this.api.getSnapshots({
+                instanceId,
+                branchName,
+            });
+            if (error) {
+                this.snapshotsError = await error.json().then((err) => err);
+            }
+            return response;
+        };
+        this.api = api;
+        makeAutoObservable(this);
+    }
+}

package/pages/CreateBranch/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/CreateBranch/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/CreateBranch/useForm.d.ts

@@ -0,0 +1,51 @@
+/// <reference types="react" />
+import { CreateBranchFormValues } from '@postgres.ai/shared/types/api/endpoints/createBranch';
+export declare const useForm: (onSubmit: (values: CreateBranchFormValues) => void) => {
+    formik: {
+        initialValues: CreateBranchFormValues;
+        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<CreateBranchFormValues>> | undefined) => void;
+        setErrors: (errors: import("formik").FormikErrors<CreateBranchFormValues>) => void;
+        setFormikState: (stateOrCb: import("formik").FormikState<CreateBranchFormValues> | ((state: import("formik").FormikState<CreateBranchFormValues>) => import("formik").FormikState<CreateBranchFormValues>)) => void;
+        setFieldTouched: (field: string, touched?: boolean | undefined, shouldValidate?: boolean | undefined) => Promise<void> | Promise<import("formik").FormikErrors<CreateBranchFormValues>>;
+        setFieldValue: (field: string, value: any, shouldValidate?: boolean | undefined) => Promise<void> | Promise<import("formik").FormikErrors<CreateBranchFormValues>>;
+        setFieldError: (field: string, value: string | undefined) => void;
+        setStatus: (status: any) => void;
+        setSubmitting: (isSubmitting: boolean) => void;
+        setTouched: (touched: import("formik").FormikTouched<CreateBranchFormValues>, shouldValidate?: boolean | undefined) => Promise<void> | Promise<import("formik").FormikErrors<CreateBranchFormValues>>;
+        setValues: (values: import("react").SetStateAction<CreateBranchFormValues>, shouldValidate?: boolean | undefined) => Promise<void> | Promise<import("formik").FormikErrors<CreateBranchFormValues>>;
+        submitForm: () => Promise<any>;
+        validateForm: (values?: CreateBranchFormValues | undefined) => Promise<import("formik").FormikErrors<CreateBranchFormValues>>;
+        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: CreateBranchFormValues;
+        errors: import("formik").FormikErrors<CreateBranchFormValues>;
+        touched: import("formik").FormikTouched<CreateBranchFormValues>;
+        isSubmitting: boolean;
+        isValidating: boolean;
+        status?: any;
+        submitCount: number;
+    };
+    isFormDisabled: boolean;
+}[];

package/pages/CreateBranch/useForm.js

@@ -0,0 +1,30 @@
+/*--------------------------------------------------------------------------
+ * 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({
+    branchName: Yup.string().required('Branch name is required'),
+});
+export const useForm = (onSubmit) => {
+    const formik = useFormik({
+        initialValues: {
+            instanceId: '',
+            branchName: '',
+            baseBranch: 'main',
+            snapshotID: '',
+            creationType: 'branch',
+        },
+        validationSchema: Schema,
+        onSubmit,
+        validateOnBlur: false,
+        validateOnChange: false,
+    });
+    const isFormDisabled = formik.isSubmitting ||
+        !formik.values.branchName ||
+        (!formik.values.snapshotID && !formik.values.baseBranch);
+    return [{ formik, isFormDisabled }];
+};

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

@@ -0,0 +1,2 @@
+export declare const getCliCreateBranchCommand: (branchName: string, parentBranchName: string) => string;
+export declare const getCliBranchListCommand: () => string;

package/pages/CreateBranch/utils/index.js

@@ -0,0 +1,10 @@
+export const getCliCreateBranchCommand = (branchName, parentBranchName) => {
+    const branchArg = branchName || `<BRANCH_NAME>`;
+    const parentBranchArg = parentBranchName && parentBranchName !== `main`
+        ? `--parent-branch ${parentBranchName}`
+        : ``;
+    return `dblab branch ${branchArg} ${parentBranchArg}`.trim();
+};
+export const getCliBranchListCommand = () => {
+    return `dblab branch`;
+};

package/pages/CreateClone/index.d.ts

@@ -0,0 +1,19 @@
+import React from '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 & {
+    isPlatform?: boolean;
+};
+export declare const CreateClone: ((props: Props) => JSX.Element) & {
+    displayName: string;
+};
+export {};

package/pages/CreateClone/index.js

@@ -0,0 +1,142 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'classnames';
+import { useEffect, useState } 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 { round } from '@postgres.ai/shared/utils/numbers';
+import { formatBytesIEC } from '@postgres.ai/shared/utils/units';
+import { SectionTitle } from '@postgres.ai/shared/components/SectionTitle';
+import { SyntaxHighlight } from '@postgres.ai/shared/components/SyntaxHighlight';
+import { MIN_ENTROPY, getEntropy, validatePassword, } from '@postgres.ai/shared/helpers/getEntropy';
+import { useCreatedStores } from './useCreatedStores';
+import { useForm } from './useForm';
+import { getCliCloneStatus, getCliCreateCloneCommand } from './utils';
+import { compareSnapshotsDesc } from '@postgres.ai/shared/utils/snapshot';
+import styles from './styles.module.scss';
+import { InstanceTabs, TABS_INDEX } from "../Instance/Tabs";
+export const CreateClone = observer((props) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    const history = useHistory();
+    const stores = useCreatedStores(props.api);
+    const timer = useTimer();
+    const [branchesList, setBranchesList] = useState([]);
+    const [snapshots, setSnapshots] = useState([]);
+    const [isLoadingSnapshots, setIsLoadingSnapshots] = useState(false);
+    // 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 || stores.main.cloneError) {
+            timer.pause();
+            timer.reset();
+        }
+    };
+    const fetchBranchSnapshotsData = async (branchName, initialSnapshotId) => {
+        var _a;
+        const snapshotsRes = (_a = (await stores.main.getSnapshots(props.instanceId, branchName))) !== null && _a !== void 0 ? _a : [];
+        setSnapshots(snapshotsRes);
+        const selectedSnapshot = snapshotsRes.find(s => s.id === initialSnapshotId) || snapshotsRes[0];
+        formik.setFieldValue('snapshotId', selectedSnapshot === null || selectedSnapshot === void 0 ? void 0 : selectedSnapshot.id);
+    };
+    const handleSelectBranch = async (e) => {
+        const selectedBranch = e.target.value;
+        formik.setFieldValue('branch', selectedBranch);
+        if (props.api.getSnapshots) {
+            await fetchBranchSnapshotsData(selectedBranch);
+        }
+    };
+    const formik = useForm(onSubmit);
+    const fetchData = async (initialBranch, initialSnapshotId) => {
+        var _a, _b, _c, _d, _e;
+        try {
+            setIsLoadingSnapshots(true);
+            await stores.main.load(props.instanceId);
+            const branches = (_a = (await stores.main.getBranches(props.instanceId))) !== null && _a !== void 0 ? _a : [];
+            let initiallySelectedBranch = (_b = branches[0]) === null || _b === void 0 ? void 0 : _b.name;
+            if (initialBranch && branches.find((branch) => branch.name === initialBranch)) {
+                initiallySelectedBranch = initialBranch;
+            }
+            setBranchesList(branches.map((branch) => branch.name));
+            formik.setFieldValue('branch', initiallySelectedBranch);
+            if (props.api.getSnapshots) {
+                await fetchBranchSnapshotsData(initiallySelectedBranch, initialSnapshotId);
+            }
+            else {
+                const allSnapshots = (_e = (_d = (_c = stores.main) === null || _c === void 0 ? void 0 : _c.snapshots) === null || _d === void 0 ? void 0 : _d.data) !== null && _e !== void 0 ? _e : [];
+                const sortedSnapshots = allSnapshots.slice().sort(compareSnapshotsDesc);
+                setSnapshots(sortedSnapshots);
+                let selectedSnapshot = allSnapshots.find(s => s.id === initialSnapshotId) || allSnapshots[0];
+                formik.setFieldValue('snapshotId', selectedSnapshot === null || selectedSnapshot === void 0 ? void 0 : selectedSnapshot.id);
+            }
+        }
+        catch (error) {
+            console.error('Error fetching data:', error);
+        }
+        finally {
+            setIsLoadingSnapshots(false);
+        }
+    };
+    // Initial loading data.
+    useEffect(() => {
+        var _a, _b;
+        const queryString = history.location.search.split('?')[1];
+        const params = new URLSearchParams(queryString);
+        const branchId = (_a = params.get('branch_id')) !== null && _a !== void 0 ? _a : undefined;
+        const snapshotId = (_b = params.get('snapshot_id')) !== null && _b !== void 0 ? _b : undefined;
+        fetchData(branchId, snapshotId);
+    }, [history.location.search, formik.initialValues]);
+    // Redirect when clone is created and stable.
+    useEffect(() => {
+        if (!stores.main.clone || !stores.main.isCloneStable)
+            return;
+        history.push(props.routes.clone(stores.main.clone.id));
+    }, [stores.main.clone, stores.main.isCloneStable]);
+    const headRendered = (_jsxs(_Fragment, { children: [_jsx("style", { children: 'p { margin: 0; }' }), props.elements.breadcrumbs, _jsx(SectionTitle, { tag: "h1", level: 1, text: "Create clone", className: styles.pageTitle, children: _jsx(InstanceTabs, { tab: TABS_INDEX.CLONES, isPlatform: props.isPlatform, instanceId: props.instanceId, hasLogs: props.api.initWS !== undefined }) })] }));
+    // Initial loading spinner.
+    if (!stores.main.instance || isLoadingSnapshots)
+        return (_jsxs(_Fragment, { children: [headRendered, _jsx(StubSpinner, {})] }));
+    // Instance/branches getting error.
+    if (stores.main.instanceError ||
+        stores.main.getBranchesError ||
+        stores.main.getSnapshotsError ||
+        ((_b = (_a = stores.main) === null || _a === void 0 ? void 0 : _a.snapshots) === null || _b === void 0 ? void 0 : _b.error))
+        return (_jsxs(_Fragment, { children: [headRendered, _jsx(ErrorStub, { message: stores.main.instanceError ||
+                        ((_c = stores.main.getBranchesError) === null || _c === void 0 ? void 0 : _c.message) ||
+                        ((_d = stores.main.getSnapshotsError) === null || _d === void 0 ? void 0 : _d.message) ||
+                        ((_f = (_e = stores.main) === null || _e === void 0 ? void 0 : _e.snapshots) === null || _f === void 0 ? void 0 : _f.error) })] }));
+    const isCloneUnstable = Boolean(stores.main.clone && !stores.main.isCloneStable);
+    const isCreatingClone = formik.isSubmitting || isCloneUnstable;
+    return (_jsxs(_Fragment, { children: [headRendered, _jsxs("div", { className: styles.container, children: [_jsxs("div", { className: styles.form, children: [_jsxs("div", { className: styles.section, children: [branchesList && branchesList.length > 0 && (_jsx(Select, { fullWidth: true, label: "Branch", value: formik.values.branch, disabled: !branchesList || isCreatingClone, onChange: handleSelectBranch, error: Boolean(formik.errors.branch), items: (_g = branchesList === null || branchesList === void 0 ? void 0 : branchesList.map((snapshot) => {
+                                            return {
+                                                value: snapshot,
+                                                children: snapshot,
+                                            };
+                                        })) !== null && _g !== void 0 ? _g : [] })), _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: "Snapshot *", value: formik.values.snapshotId, disabled: !snapshots || isCreatingClone, onChange: (e) => formik.setFieldValue('snapshotId', e.target.value), error: Boolean(formik.errors.snapshotId), items: (_h = snapshots.map((snapshot, i) => {
+                                            const isLatest = i === 0;
+                                            return {
+                                                value: snapshot.id,
+                                                children: (_jsxs("div", { className: styles.snapshotItem, children: [_jsxs("strong", { className: styles.snapshotOverflow, children: [snapshot === null || snapshot === void 0 ? void 0 : snapshot.id, " ", isLatest && _jsx("span", { children: "Latest" })] }), (snapshot === null || snapshot === void 0 ? void 0 : snapshot.dataStateAt) && (_jsxs("p", { children: ["Data state at: ", snapshot === null || snapshot === void 0 ? void 0 : snapshot.dataStateAt] })), snapshot.message && (_jsxs("span", { children: ["Message: ", snapshot.message] }))] })),
+                                            };
+                                        })) !== null && _h !== void 0 ? _h : [] }), _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 })] }), _jsxs("div", { className: styles.form, 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 a daily basis and delete this clone once the work is done."] })] }), _jsxs("div", { className: cn(styles.marginBottom, 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: ((_j = stores.main.instance.state) === null || _j === void 0 ? void 0 : _j.dataSize)
+                                                                    ? formatBytesIEC(stores.main.instance.state.dataSize)
+                                                                    : '-' })] }), _jsxs("p", { className: styles.param, children: [_jsx("span", { children: "Expected cloning time:" }), _jsxs("strong", { children: [round((_k = stores.main.instance.state) === null || _k === void 0 ? void 0 : _k.cloning.expectedCloningTime, 2), ' ', "s"] })] })] })] }), stores.main.cloneError && (_jsx("div", { className: cn(styles.marginBottom, styles.section), children: _jsx(ErrorStub, { message: stores.main.cloneError }) })), _jsx("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 }))] }) })] })] }), _jsx("div", { className: styles.form, children: _jsxs("div", { className: styles.snippetContainer, children: [_jsx(SectionTitle, { className: styles.title, tag: "h1", level: 1, text: "The same using CLI" }), _jsx("p", { className: styles.text, children: "Alternatively, you can create a new clone using CLI. Fill the form, copy the command below and paste it into your terminal." }), _jsx(SyntaxHighlight, { wrapLines: true, content: getCliCreateCloneCommand(formik.values) }), _jsx(SectionTitle, { className: styles.title, tag: "h2", level: 2, text: "Check clone status" }), _jsx("p", { className: styles.text, children: "To check the status of your newly created clone, use the command below." }), _jsx(SyntaxHighlight, { content: getCliCloneStatus(formik.values.cloneId) })] }) })] })] }));
+});

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

@@ -0,0 +1,49 @@
+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 { GetBranches } from '@postgres.ai/shared/types/api/endpoints/getBranches';
+import { GetSnapshots } from '@postgres.ai/shared/types/api/endpoints/getSnapshots';
+import { SnapshotsStore, SnapshotsApi } from '@postgres.ai/shared/stores/Snapshots';
+import { FormValues } from '../useForm';
+import { InitWS } from '@postgres.ai/shared/types/api/endpoints/initWS';
+export declare type MainStoreApi = SnapshotsApi & {
+    getInstance: GetInstance;
+    createClone: CreateClone;
+    getClone: GetClone;
+    getBranches?: GetBranches;
+    getSnapshots?: GetSnapshots;
+    initWS?: InitWS;
+};
+export declare class MainStore {
+    instance: Instance | null;
+    instanceError: string | null;
+    getBranchesError: Error | null;
+    getSnapshotsError: Error | 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 | undefined>;
+    createClone: (data: FormValues) => Promise<boolean>;
+    getBranches: (instanceId: string) => Promise<import("@postgres.ai/shared/types/api/endpoints/getBranches").Branch[] | null | undefined>;
+    getSnapshots: (instanceId: string, branchName?: string) => Promise<{
+        createdAtDate: Date;
+        dataStateAtDate: Date;
+        numClones: string | number;
+        clones: string[];
+        createdAt: string;
+        dataStateAt: string;
+        id: string;
+        pool: string;
+        physicalSize: number;
+        logicalSize: number;
+        message: string;
+        branch: string;
+    }[] | null | undefined>;
+    private updateCloneUntilStable;
+}