@postgres.ai/shared 3.5.0-pr-1027.1 → 4.0.0-pr-1028.1

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { MainStoreApi } from './useCreatedStores';
 declare type Host = {
     instanceId: string;
@@ -10,7 +10,9 @@ declare type Host = {
         breadcrumbs: React.ReactNode;
     };
 };
-declare type Props = Host;
+declare type Props = Host & {
+    isPlatform?: boolean;
+};
 export declare const CreateClone: ((props: Props) => JSX.Element) & {
     displayName: string;
 };

package/pages/CreateClone/index.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import cn from 'classnames';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import { observer } from 'mobx-react-lite';
 import { useTimer } from 'use-timer';
@@ -12,20 +12,25 @@ 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 { 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;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     const history = useHistory();
     const stores = useCreatedStores(props.api);
-    const cloneError = stores.main.cloneError;
     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) {
@@ -35,56 +40,103 @@ export const CreateClone = observer((props) => {
         timer.start();
         const isSuccess = await stores.main.createClone(values);
         formik.setFieldError('dbPassword', '');
-        if (!isSuccess || cloneError) {
+        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(() => {
-        stores.main.load(props.instanceId);
-    }, []);
+        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)
-            return;
-        if (!stores.main.isCloneStable)
+        if (!stores.main.clone || !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" })] }));
+    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 || !stores.main.snapshots.data)
+    if (!stores.main.instance || isLoadingSnapshots)
         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 });
+    // 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.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"] }))] }) })] })] }));
+    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

@@ -3,24 +3,47 @@ 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;
+    readonly snapshots?: SnapshotsStore;
     constructor(api: MainStoreApi);
     get isCloneStable(): boolean | undefined;
-    load: (instanceId: string) => Promise<boolean>;
+    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;
 }

package/pages/CreateClone/stores/Main.js

@@ -7,12 +7,15 @@ export class MainStore {
     constructor(api) {
         this.instance = null;
         this.instanceError = null;
+        this.getBranchesError = null;
+        this.getSnapshotsError = null;
         this.clone = null;
         this.cloneError = null;
         this.load = async (instanceId) => {
+            var _a, _b;
             const [instance, isLoadedSnapshots] = await Promise.all([
                 this.api.getInstance({ instanceId }),
-                this.snapshots.load(instanceId),
+                (_b = (_a = this.snapshots) === null || _a === void 0 ? void 0 : _a.load(instanceId)) !== null && _b !== void 0 ? _b : true,
             ]);
             if (instance.response)
                 this.instance = instance.response;
@@ -38,6 +41,25 @@ export class MainStore {
                 this.cloneError = await error.json().then((err) => (err === null || err === void 0 ? void 0 : err.message) || err);
             return Boolean(response);
         };
+        this.getBranches = async (instanceId) => {
+            if (!this.api.getBranches)
+                return;
+            const { response, error } = await this.api.getBranches(instanceId);
+            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.getSnapshotsError = await error.json().then((err) => err);
+            return response;
+        };
         this.updateCloneUntilStable = async (args) => {
             window.clearTimeout(this.cloneUpdateTimeout);
             const { response, error } = await this.api.getClone(args);
@@ -51,7 +73,9 @@ export class MainStore {
         };
         makeAutoObservable(this);
         this.api = api;
-        this.snapshots = new SnapshotsStore(api);
+        if (!api.getSnapshots) {
+            this.snapshots = new SnapshotsStore(api);
+        }
     }
     get isCloneStable() {
         if (!this.clone)

package/pages/CreateClone/styles.module.scss

@@ -1,15 +1,41 @@
+.container {
+  display: flex;
+  gap: 60px;
+  margin-top: 20px;
+  max-width: 1200px;
+
+  @media (max-width: 1300px) {
+    flex-direction: column;
+    gap: 20px;
+  }
+}
+
 .title {
   margin-top: 16px;
 }
 
 .form {
-  max-width: 425px;
-  margin-top: 8px;
+  flex: 1 1 0;
+}
+
+.snippetContainer {
+  flex: 1 1 0;
+  min-width: 0;
+  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
+  padding: 0 20px 10px 20px;
+  height: max-content;
+  border-radius: 4px;
+}
+
+.snapshotItem {
+  display: flex;
+  flex-direction: column;
+  padding: 4px 0;
 }
 
 .section {
   & + .section {
-    margin-top: 32px;
+    margin-top: 24px;
   }
 }
 
@@ -22,6 +48,10 @@
   margin-top: 8px;
 }
 
+.marginBottom {
+  margin-bottom: 10px;
+}
+
 .remark {
   font-size: 12px;
 }
@@ -38,8 +68,10 @@
 .summary {
   display: flex;
   align-items: center;
-  background-color: rgba(#808080, 0.15) !important;
+  background-color: rgb(250, 250, 250) !important;
+  box-shadow: none !important;
   padding: 12px;
+  margin: 10px 0 15px 0;
 }
 
 .summaryIcon {
@@ -69,3 +101,14 @@
 .elapsedTime {
   margin-left: 24px;
 }
+
+.snapshotOverflow {
+  width: 100%;
+  word-wrap: break-word;
+  white-space: initial;
+}
+
+.pageTitle {
+  margin-top: 8px;
+  line-height: 26px;
+}

package/pages/CreateClone/useForm.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 export declare type FormValues = {
+    branch: string;
     cloneId: string;
     snapshotId: string;
     dbUser: string;

package/pages/CreateClone/useForm.js

@@ -10,6 +10,7 @@ const Schema = Yup.object().shape({
 export const useForm = (onSubmit) => {
     const formik = useFormik({
         initialValues: {
+            branch: '',
             cloneId: '',
             snapshotId: '',
             dbUser: '',

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

@@ -0,0 +1,3 @@
+import { FormValues } from '@postgres.ai/shared/pages/CreateClone/useForm';
+export declare const getCliCreateCloneCommand: (values: FormValues) => string;
+export declare const getCliCloneStatus: (cloneId: string) => string;

package/pages/CreateClone/utils/index.js

@@ -0,0 +1,17 @@
+export const getCliCreateCloneCommand = (values) => {
+    const { dbUser, dbPassword, branch, isProtected, cloneId } = values;
+    return `dblab clone create \
+
+  --username ${dbUser ? dbUser : `<USERNAME>`} \
+
+  --password ${dbPassword ? dbPassword.replace(/./g, '*') : `<PASSWORD>`} \
+
+  ${branch ? `--branch ${branch}` : ``} \
+
+  ${isProtected ? `--protected` : ''} \ 
+
+  --id ${cloneId ? cloneId : `<CLONE_ID>`} \ `;
+};
+export const getCliCloneStatus = (cloneId) => {
+    return `dblab clone status ${cloneId ? cloneId : `<CLONE_ID>`}`;
+};

package/pages/CreateSnapshot/index.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { MainStoreApi } from './stores/Main';
+interface CreateSnapshotProps {
+    instanceId: string;
+    api: MainStoreApi;
+    routes: {
+        snapshot: (snapshotId: string) => string;
+    };
+    elements: {
+        breadcrumbs: React.ReactNode;
+    };
+    isPlatform?: boolean;
+}
+export declare const CreateSnapshotPage: (({ instanceId, api, elements, routes, isPlatform }: CreateSnapshotProps) => JSX.Element) & {
+    displayName: string;
+};
+export {};