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

package/pages/Clone/context.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { Api } from './stores/Main';
+export declare type Host = {
+    instanceId: string;
+    cloneId: string;
+    routes: {
+        instance: () => string;
+        snapshot: (snapshotId: string) => string;
+        createSnapshot: (cloneId: string) => string;
+    };
+    api: Api;
+    elements: {
+        breadcrumbs: React.ReactNode;
+    };
+};
+export declare const useHost: () => Host, HostProvider: import("react").Provider<Host>;
+export declare const useStores: () => {
+    main: import("./stores/Main").MainStore;
+}, StoresProvider: import("react").Provider<{
+    main: import("./stores/Main").MainStore;
+}>;

package/pages/Clone/context.js

@@ -0,0 +1,3 @@
+import { createStrictContext } from '@postgres.ai/shared/utils/react';
+export const { useStrictContext: useHost, Provider: HostProvider } = createStrictContext();
+export const { useStrictContext: useStores, Provider: StoresProvider } = createStrictContext();

package/pages/Clone/index.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { Host } from './context';
+declare type Props = Host & {
+    isPlatform?: boolean;
+};
+export declare const Clone: ((props: Props) => JSX.Element) & {
+    displayName: string;
+};
+export {};

package/pages/Clone/index.js

@@ -0,0 +1,252 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } 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 { useEffect, useState } from 'react';
+import { observer } from 'mobx-react-lite';
+import { useHistory } from 'react-router-dom';
+import copyToClipboard from 'copy-to-clipboard';
+import { makeStyles, Button, FormControlLabel, Checkbox, TextField, IconButton, } from '@material-ui/core';
+import { getSshPortForwardingCommand, getPsqlConnectionStr, getJdbcConnectionStr, } from '@postgres.ai/shared/utils/connection';
+import { formatBytesIEC } from '@postgres.ai/shared/utils/units';
+import { ErrorStub } from '@postgres.ai/shared/components/ErrorStub';
+import { PageSpinner } from '@postgres.ai/shared/components/PageSpinner';
+import { DestroyCloneRestrictionModal } from '@postgres.ai/shared/components/DestroyCloneRestrictionModal';
+import { DestroyCloneModal } from '@postgres.ai/shared/components/DestroyCloneModal';
+import { ResetCloneModal } from '@postgres.ai/shared/components/ResetCloneModal';
+import { Spinner } from '@postgres.ai/shared/components/Spinner';
+import { round } from '@postgres.ai/shared/utils/numbers';
+import { Tooltip } from '@postgres.ai/shared/components/Tooltip';
+import { SectionTitle } from '@postgres.ai/shared/components/SectionTitle';
+import { icons } from '@postgres.ai/shared/styles/icons';
+import { styles } from '@postgres.ai/shared/styles/styles';
+import { SyntaxHighlight } from '@postgres.ai/shared/components/SyntaxHighlight';
+import { Status } from './Status';
+import { useCreatedStores } from './useCreatedStores';
+import { getCliDestroyCloneCommand, getCliProtectedCloneCommand, getCliResetCloneCommand, getCreateSnapshotCommand, } from './utils';
+import { InstanceTabs, TABS_INDEX } from "../Instance/Tabs";
+const textFieldWidth = 525;
+const useStyles = makeStyles((theme) => ({
+    wrapper: {
+        display: 'flex',
+        gap: '40px',
+        maxWidth: '1200px',
+        fontSize: '14px !important',
+        marginTop: '20px',
+        '@media (max-width: 1300px)': {
+            flexDirection: 'column',
+            gap: '20px',
+        },
+    },
+    title: {
+        marginTop: '8px',
+        lineHeight: '26px'
+    },
+    tooltip: {
+        marginTop: '8px',
+    },
+    container: {
+        maxWidth: textFieldWidth + 25,
+        marginTop: '16px',
+    },
+    text: {
+        marginTop: '4px',
+    },
+    errorStub: {
+        margin: '24px 0',
+    },
+    spinner: {
+        marginLeft: '8px',
+    },
+    summary: {
+        flex: '1.5 1 0',
+        minWidth: 0,
+    },
+    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',
+    },
+    paramTitle: {
+        display: 'inline-block',
+        width: 200,
+    },
+    readyStatus: {
+        color: 'green',
+    },
+    failedStatus: {
+        color: 'red',
+    },
+    startingStatus: {
+        color: 'orange',
+    },
+    fieldBlock: {
+        width: '100%',
+        maxWidth: textFieldWidth + 25,
+        position: 'relative',
+    },
+    saveButton: {
+        padding: 8,
+        marginLeft: 10,
+        marginBottom: -56,
+    },
+    actions: {
+        display: 'flex',
+        flexWrap: 'wrap',
+        rowGap: '16px',
+        marginBottom: '20px',
+    },
+    actionButton: {
+        marginRight: '10px',
+    },
+    remark: {
+        fontSize: '12px',
+        lineHeight: '14px',
+        maxWidth: textFieldWidth,
+        display: 'inline-block',
+    },
+    textField: {
+        ...styles.inputField,
+        'max-width': textFieldWidth,
+        display: 'inline-block',
+        '& .MuiOutlinedInput-input': {
+            paddingRight: '32px!important',
+        },
+    },
+    errorMessage: {
+        color: 'red',
+        marginBottom: 10,
+    },
+    textFieldInfo: {
+        position: 'absolute',
+        top: '25px',
+        marginLeft: '5px',
+        display: 'inline-block',
+        [theme.breakpoints.down('sm')]: {
+            display: 'none',
+        },
+    },
+    checkBoxInfo: {
+        'margin-top': '0px',
+        'margin-left': '3px',
+        display: 'inline-block',
+        '& svg': {
+            verticalAlign: 'middle',
+        },
+    },
+    checkboxLabel: {
+        marginRight: '0px',
+    },
+    copyFieldContainer: {
+        position: 'relative',
+        display: 'inline-block',
+        maxWidth: textFieldWidth,
+        width: '100%',
+    },
+    status: {
+        maxWidth: `${textFieldWidth}px`,
+    },
+    copyButton: {
+        position: 'absolute',
+        top: 16,
+        right: 0,
+        zIndex: 100,
+        width: 32,
+        height: 32,
+        padding: 8,
+    },
+}), { index: 1 });
+export const Clone = observer((props) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const classes = useStyles();
+    const history = useHistory();
+    const stores = useCreatedStores(props);
+    // Clone modals.
+    const [isOpenRestrictionModal, setIsOpenRestrictionModal] = useState(false);
+    const [isOpenDestroyModal, setIsOpenDestroyModal] = useState(false);
+    const [isOpenResetModal, setIsOpenResetModal] = useState(false);
+    // Initial loading data.
+    useEffect(() => {
+        stores.main.load(props.instanceId, props.cloneId);
+    }, []);
+    const { instance, snapshots, clone, isResettingClone, isDestroyingClone, isReloading, isUpdatingClone, isCloneStable, } = stores.main;
+    const headRendered = (_jsxs(_Fragment, { children: [_jsx("style", { children: 'p { margin: 0;}' }), props.elements.breadcrumbs, _jsx(SectionTitle, { className: classes.title, tag: "h1", level: 1, text: `Clone ${props.cloneId}`, children: _jsx(InstanceTabs, { tab: TABS_INDEX.CLONES, isPlatform: props.isPlatform, instanceId: props.instanceId, hasLogs: props.api.initWS !== undefined }) })] }));
+    const cloneErrorMessage = ((_a = stores.main.instanceError) === null || _a === void 0 ? void 0 : _a.message) || ((_b = stores.main.cloneError) === null || _b === void 0 ? void 0 : _b.message);
+    const cloneErrorTitle = ((_c = stores.main.instanceError) === null || _c === void 0 ? void 0 : _c.title) || ((_d = stores.main.cloneError) === null || _d === void 0 ? void 0 : _d.title);
+    if (cloneErrorMessage && cloneErrorTitle)
+        return (_jsxs(_Fragment, { children: [headRendered, _jsx(ErrorStub, { title: cloneErrorTitle, message: cloneErrorMessage })] }));
+    // Initial getting data spinner.
+    if (!instance || !clone) {
+        return (_jsxs(_Fragment, { children: [headRendered, _jsx(PageSpinner, {})] }));
+    }
+    // Clone reset.
+    const requestResetClone = () => setIsOpenResetModal(true);
+    const resetClone = (snapshotId) => stores.main.resetClone(snapshotId);
+    // Clone destroy.
+    const requestDestroyClone = () => {
+        if (clone.protected) {
+            setIsOpenRestrictionModal(true);
+        }
+        else {
+            setIsOpenDestroyModal(true);
+        }
+    };
+    const destroyClone = async () => {
+        const isSuccess = await stores.main.destroyClone();
+        if (isSuccess)
+            history.push(props.routes.instance());
+    };
+    const createSnapshot = async () => {
+        history.push(props.routes.createSnapshot(props.cloneId));
+    };
+    // Clone reload.
+    const reloadClone = () => stores.main.reload();
+    // Data protection.
+    const toggleDataProtection = () => stores.main.updateClone(!clone.protected);
+    // Commands.
+    const sshPortForwardingUrl = getSshPortForwardingCommand(instance, clone);
+    const jdbcConnectionStr = getJdbcConnectionStr(clone);
+    const psqlConnectionStr = getPsqlConnectionStr(clone);
+    const hasConnectionInfo = sshPortForwardingUrl || jdbcConnectionStr || psqlConnectionStr;
+    // Controls.
+    const isDisabledControls = isResettingClone ||
+        isDestroyingClone ||
+        isReloading ||
+        isUpdatingClone ||
+        !isCloneStable;
+    return (_jsxs(_Fragment, { children: [headRendered, _jsxs("div", { className: classes.wrapper, children: [_jsxs("div", { className: classes.summary, children: [_jsxs("div", { className: classes.actions, children: [_jsxs(Button, { variant: "contained", color: "primary", onClick: requestResetClone, disabled: isDisabledControls, title: 'Reset clone', className: classes.actionButton, children: ["Reset clone", isResettingClone && (_jsx(Spinner, { size: "sm", className: classes.spinner }))] }), _jsxs(Button, { variant: "contained", color: "primary", onClick: requestDestroyClone, disabled: isDisabledControls, title: 'Delete this clone', className: classes.actionButton, children: ["Delete clone", isDestroyingClone && (_jsx(Spinner, { size: "sm", className: classes.spinner }))] }), _jsxs(Button, { variant: "contained", color: "primary", onClick: createSnapshot, disabled: isDisabledControls, title: 'Delete this clone', className: classes.actionButton, children: ["Create snapshot", snapshots.snapshotDataLoading && (_jsx(Spinner, { size: "sm", className: classes.spinner }))] }), _jsxs(Button, { variant: "outlined", color: "secondary", onClick: reloadClone, disabled: isDisabledControls, title: 'Refresh clone information', className: classes.actionButton, children: ["Reload info", isReloading && _jsx(Spinner, { size: "sm", className: classes.spinner })] })] }), stores.main.destroyCloneError ||
+                                (stores.main.resetCloneError && (_jsx(ErrorStub, { title: 'Resetting error', message: stores.main.resetCloneError, className: classes.errorStub }))), _jsxs("div", { children: [_jsx("p", { children: _jsx("strong", { children: "Branch" }) }), _jsx("p", { className: classes.text, children: clone.branch })] }), _jsxs("div", { className: classes.title, children: [_jsx("p", { children: _jsx("strong", { children: "Created" }) }), _jsx("p", { className: classes.text, children: clone.createdAt })] }), _jsx("br", {}), _jsxs("div", { children: [_jsxs("p", { children: [_jsx("strong", { children: "Data state at" }), "\u00A0", _jsx(Tooltip, { content: _jsxs(_Fragment, { children: [_jsx("strong", { children: "Data state time" }), " is a time at which data is\u00A0 recovered for this clone."] }), children: icons.infoIcon })] }), _jsx("p", { className: classes.text, children: (_e = clone.snapshot) === null || _e === void 0 ? void 0 : _e.dataStateAt })] }), _jsx("br", {}), _jsxs("div", { children: [_jsx("p", { children: _jsx("strong", { children: "Status" }) }), _jsx(Status, { rawClone: clone, className: classes.status })] }), _jsx("br", {}), _jsxs("div", { children: [_jsxs("p", { children: [_jsx("strong", { children: "Summary" }), "\u00A0", _jsx(Tooltip, { content: _jsxs(_Fragment, { children: [_jsx("strong", { children: "Logical data size" }), " is a logical size of files in PGDATA which is being thin-cloned.", _jsx("br", {}), _jsx("br", {}), _jsx("strong", { children: "Physical data diff size" }), " is an actual size of a\u00A0 thin clone. On creation there is no diff between clone\u2019s\u00A0 and initial data state, all data blocks match. During work\u00A0 with the clone data diverges and data diff size increases.", _jsx("br", {}), _jsx("br", {}), _jsx("strong", { children: "Clone creation time" }), " is time which was\u00A0 spent to provision the clone."] }), children: icons.infoIcon })] }), _jsxs("p", { className: classes.text, children: [_jsx("span", { className: classes.paramTitle, children: "Logical data size:" }), ((_f = instance.state) === null || _f === void 0 ? void 0 : _f.dataSize)
+                                                ? formatBytesIEC(instance.state.dataSize)
+                                                : '-'] }), _jsxs("p", { className: classes.text, children: [_jsx("span", { className: classes.paramTitle, children: "Physical data diff size:" }), clone.metadata.cloneDiffSize
+                                                ? formatBytesIEC(clone.metadata.cloneDiffSize)
+                                                : '-'] }), _jsxs("p", { className: classes.text, children: [_jsx("span", { className: classes.paramTitle, children: "Clone creation time:" }), clone.metadata.cloningTime
+                                                ? `${round(clone.metadata.cloningTime, 2)} s`
+                                                : '-'] })] }), _jsx("br", {}), hasConnectionInfo && (_jsxs(_Fragment, { children: [_jsx("p", { children: _jsx("strong", { children: "Connection info" }) }), sshPortForwardingUrl && (_jsxs("div", { className: classes.fieldBlock, children: ["In a separate console, set up SSH port forwarding (and keep it running):", _jsxs("div", { className: classes.copyFieldContainer, children: [_jsx(TextField, { variant: "outlined", label: "SSH port forwarding", value: sshPortForwardingUrl, className: classes.textField, margin: "normal", fullWidth: true, 
+                                                        // @ts-ignore
+                                                        readOnly: true, InputLabelProps: {
+                                                            shrink: true,
+                                                            style: styles.inputFieldLabel,
+                                                        }, FormHelperTextProps: {
+                                                            style: styles.inputFieldHelper,
+                                                        } }), _jsx(IconButton, { className: classes.copyButton, "aria-label": "Copy", onClick: () => copyToClipboard(sshPortForwardingUrl), children: icons.copyIcon })] })] })), psqlConnectionStr && (_jsxs("div", { className: classes.fieldBlock, children: [_jsxs("div", { className: classes.copyFieldContainer, children: [_jsx(TextField, { variant: "outlined", id: "psqlConnStr", label: "psql connection string", value: psqlConnectionStr, className: classes.textField, margin: "normal", fullWidth: true, 
+                                                        // @ts-ignore
+                                                        readOnly: true, InputLabelProps: {
+                                                            shrink: true,
+                                                            style: styles.inputFieldLabel,
+                                                        }, FormHelperTextProps: {
+                                                            style: styles.inputFieldHelper,
+                                                        } }), _jsx(IconButton, { className: classes.copyButton, "aria-label": "Copy", onClick: () => copyToClipboard(psqlConnectionStr), children: icons.copyIcon })] }), "\u00A0", _jsx(Tooltip, { content: _jsx(_Fragment, { children: "Used to connect to Postgres using psql. Change DBNAME to\u00A0 name of the database you want to connect. Use PGPASSWORD\u00A0 environment variable to set database password or type\u00A0 it when prompted." }), children: _jsx("span", { className: classes.textFieldInfo, children: icons.infoIcon }) })] })), jdbcConnectionStr && (_jsxs("div", { className: classes.fieldBlock, children: [_jsxs("div", { className: classes.copyFieldContainer, children: [_jsx(TextField, { variant: "outlined", label: "JDBC connection string", value: jdbcConnectionStr, className: classes.textField, margin: "normal", fullWidth: true, 
+                                                        // @ts-ignore
+                                                        readOnly: true, InputLabelProps: {
+                                                            shrink: true,
+                                                            style: styles.inputFieldLabel,
+                                                        }, FormHelperTextProps: {
+                                                            style: styles.inputFieldHelper,
+                                                        } }), _jsx(IconButton, { className: classes.copyButton, "aria-label": "Copy", onClick: () => copyToClipboard(jdbcConnectionStr), children: icons.copyIcon })] }), "\u00A0", _jsx(Tooltip, { content: _jsx(_Fragment, { children: "Used to connect to Postgres using JDBC. Change DBNAME to\u00A0 name of the database you want to connect, change DBPASSWORD\u00A0 to the password you\u2019ve used on clone creation." }), children: _jsx("span", { className: classes.textFieldInfo, children: icons.infoIcon }) })] }))] })), _jsx("br", {}), _jsx("div", { className: classes.fieldBlock, children: _jsxs("span", { className: classes.remark, children: ["Password was set during clone creation. It\u2019s not being stored.", _jsx("br", {}), "You would need to recreate a clone if the password is lost."] }) }), _jsx("br", {}), _jsx("p", { children: _jsx("strong", { children: "Protection" }) }), _jsxs("p", { children: [_jsx(FormControlLabel, { className: classes.checkboxLabel, control: _jsx(Checkbox, { checked: clone.protected, onChange: toggleDataProtection, name: "protected", disabled: isDisabledControls }), label: "Enable deletion protection" }), _jsx("br", {}), _jsxs("span", { className: classes.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."] })] }), stores.main.updateCloneError && (_jsx(ErrorStub, { title: "Updating error", message: stores.main.updateCloneError, className: classes.errorStub }))] }), _jsxs("div", { className: classes.snippetContainer, children: [_jsx(SectionTitle, { tag: "h2", level: 2, text: 'Reset clone using CLI' }), _jsx("p", { className: classes.tooltip, children: "You can reset the clone using CLI using the following command:" }), _jsx(SyntaxHighlight, { content: getCliResetCloneCommand(props.cloneId) }), _jsx(SectionTitle, { className: classes.title, tag: "h2", level: 2, text: 'Delete clone using CLI' }), _jsx("p", { className: classes.tooltip, children: "You can delete the clone using CLI using the following command:" }), _jsx(SyntaxHighlight, { content: getCliDestroyCloneCommand(props.cloneId) }), _jsx(SectionTitle, { className: classes.title, tag: "h2", level: 2, text: 'Toggle deletion protection using CLI' }), _jsx("p", { className: classes.tooltip, children: "You can toggle deletion protection using CLI for this clone using the following command:" }), _jsx(SyntaxHighlight, { content: getCliProtectedCloneCommand(true) }), _jsx(SyntaxHighlight, { content: getCliProtectedCloneCommand(false) }), _jsx(SectionTitle, { className: classes.title, tag: "h2", level: 2, text: 'Create snapshot for this clone using CLI' }), _jsx("p", { className: classes.tooltip, children: "You can create a snapshot for this clone using CLI using the following command:" }), _jsx(SyntaxHighlight, { content: getCreateSnapshotCommand(props.cloneId) })] }), _jsxs(_Fragment, { children: [_jsx(DestroyCloneRestrictionModal, { isOpen: isOpenRestrictionModal, onClose: () => setIsOpenRestrictionModal(false), cloneId: clone.id }), _jsx(DestroyCloneModal, { isOpen: isOpenDestroyModal, onClose: () => setIsOpenDestroyModal(false), cloneId: clone.id, onDestroyClone: destroyClone }), _jsx(ResetCloneModal, { isOpen: isOpenResetModal, onClose: () => setIsOpenResetModal(false), clone: clone, snapshots: snapshots.data, onResetClone: resetClone, version: (_g = instance.state) === null || _g === void 0 ? void 0 : _g.engine.version })] })] })] }));
+});

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

@@ -0,0 +1,47 @@
+import { GetInstance } from '@postgres.ai/shared/types/api/endpoints/getInstance';
+import { GetClone } from '@postgres.ai/shared/types/api/endpoints/getClone';
+import { ResetClone } from '@postgres.ai/shared/types/api/endpoints/resetClone';
+import { DestroyClone } from '@postgres.ai/shared/types/api/endpoints/destroyClone';
+import { UpdateClone } from '@postgres.ai/shared/types/api/endpoints/updateClone';
+import { SnapshotsStore, SnapshotsApi } from '@postgres.ai/shared/stores/Snapshots';
+import { Clone } from '@postgres.ai/shared/types/api/entities/clone';
+import { Instance } from '@postgres.ai/shared/types/api/entities/instance';
+import { InitWS } from '@postgres.ai/shared/types/api/endpoints/initWS';
+export declare type Api = SnapshotsApi & {
+    getInstance: GetInstance;
+    getClone: GetClone;
+    resetClone: ResetClone;
+    destroyClone: DestroyClone;
+    updateClone: UpdateClone;
+    initWS?: InitWS;
+};
+declare type Error = {
+    title?: string;
+    message: string;
+};
+export declare class MainStore {
+    instance: Instance | null;
+    instanceError: Error | null;
+    clone: Clone | null;
+    cloneError: Error | null;
+    readonly snapshots: SnapshotsStore;
+    isResettingClone: boolean;
+    resetCloneError: string | null;
+    isDestroyingClone: boolean;
+    destroyCloneError: string | null;
+    isUpdatingClone: boolean;
+    updateCloneError: string | null;
+    isReloading: boolean;
+    private cloneUpdateTimeout?;
+    private readonly api;
+    constructor(api: Api);
+    get isCloneStable(): boolean;
+    load: (instanceId: string, cloneId: string) => Promise<boolean | undefined>;
+    reload: () => Promise<boolean | undefined>;
+    private loadInstance;
+    private loadClone;
+    resetClone: (snapshotId: string) => Promise<boolean>;
+    destroyClone: () => Promise<boolean>;
+    updateClone: (isProtected: boolean) => Promise<void>;
+}
+export {};

package/pages/Clone/stores/Main.js

@@ -0,0 +1,141 @@
+/*--------------------------------------------------------------------------
+ * 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';
+import { SnapshotsStore, } from '@postgres.ai/shared/stores/Snapshots';
+import { checkIsCloneStable } from '@postgres.ai/shared/utils/clone';
+import { getTextFromUnknownApiError } from '@postgres.ai/shared/utils/api';
+const UNSTABLE_CLONE_UPDATE_TIMEOUT = 1000;
+export class MainStore {
+    constructor(api) {
+        this.instance = null;
+        this.instanceError = null;
+        this.clone = null;
+        this.cloneError = null;
+        this.isResettingClone = false;
+        this.resetCloneError = null;
+        this.isDestroyingClone = false;
+        this.destroyCloneError = null;
+        this.isUpdatingClone = false;
+        this.updateCloneError = null;
+        this.isReloading = false;
+        this.load = async (instanceId, cloneId) => {
+            const [isInstanceOk, isCloneOk, isSnapshotsLoaded] = await Promise.all([
+                this.loadInstance(instanceId),
+                this.loadClone(instanceId, cloneId),
+                this.snapshots.load(instanceId),
+            ]);
+            return isInstanceOk && isCloneOk && isSnapshotsLoaded;
+        };
+        this.reload = async () => {
+            if (!this.instance || !this.clone)
+                return false;
+            this.isReloading = true;
+            const isSuccess = await this.load(this.instance.id, this.clone.id);
+            this.isReloading = false;
+            return isSuccess;
+        };
+        this.loadInstance = async (instanceId) => {
+            const { response, error } = await this.api.getInstance({
+                instanceId,
+            });
+            if (response) {
+                this.instance = response;
+            }
+            else {
+                this.instanceError = {
+                    title: 'Error',
+                    message: `Instance "${instanceId}" not found`,
+                };
+            }
+            if (error) {
+                this.instanceError = {
+                    message: await getTextFromUnknownApiError(error),
+                };
+            }
+            return Boolean(response);
+        };
+        this.loadClone = async (instanceId, cloneId) => {
+            window.clearTimeout(this.cloneUpdateTimeout);
+            const { response, error } = await this.api.getClone({ instanceId, cloneId });
+            if (response) {
+                this.clone = response;
+                if (!this.isCloneStable)
+                    this.cloneUpdateTimeout = window.setTimeout(() => this.loadClone(instanceId, cloneId), UNSTABLE_CLONE_UPDATE_TIMEOUT);
+            }
+            if (error) {
+                if (error.status === 404) {
+                    this.cloneError = {
+                        title: 'Error',
+                        message: `Clone "${cloneId}" not found`,
+                    };
+                }
+                else {
+                    this.cloneError = {
+                        message: await getTextFromUnknownApiError(error),
+                    };
+                }
+            }
+            return Boolean(response);
+        };
+        this.resetClone = async (snapshotId) => {
+            if (!this.instance || !this.clone)
+                return false;
+            this.isResettingClone = true;
+            const { response, error } = await this.api.resetClone({
+                instanceId: this.instance.id,
+                cloneId: this.clone.id,
+                snapshotId,
+            });
+            if (response)
+                await this.loadClone(this.instance.id, this.clone.id);
+            if (error)
+                this.resetCloneError = await getTextFromUnknownApiError(error);
+            this.isResettingClone = false;
+            return Boolean(response);
+        };
+        this.destroyClone = async () => {
+            if (!this.instance || !this.clone)
+                return false;
+            this.isDestroyingClone = true;
+            const { response, error } = await this.api.destroyClone({
+                instanceId: this.instance.id,
+                cloneId: this.clone.id,
+            });
+            if (error)
+                this.destroyCloneError = await getTextFromUnknownApiError(error);
+            this.isDestroyingClone = false;
+            return Boolean(response);
+        };
+        this.updateClone = async (isProtected) => {
+            if (!this.instance || !this.clone)
+                return;
+            this.isUpdatingClone = true;
+            const prevIsProtected = this.clone.protected;
+            this.clone.protected = isProtected;
+            const { response, error } = await this.api.updateClone({
+                instanceId: this.instance.id,
+                cloneId: this.clone.id,
+                clone: {
+                    isProtected,
+                },
+            });
+            if (!response)
+                this.clone.protected = prevIsProtected;
+            if (error)
+                this.updateCloneError = await getTextFromUnknownApiError(error);
+            this.isUpdatingClone = false;
+        };
+        this.snapshots = new SnapshotsStore(api);
+        this.api = api;
+        makeAutoObservable(this);
+    }
+    get isCloneStable() {
+        if (!this.clone)
+            return false;
+        return checkIsCloneStable(this.clone);
+    }
+}

package/pages/Clone/useCreatedStores.d.ts

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

package/pages/Clone/useCreatedStores.js

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

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

@@ -0,0 +1,4 @@
+export declare const getCliResetCloneCommand: (cloneId: string) => string;
+export declare const getCliDestroyCloneCommand: (cloneId: string) => string;
+export declare const getCliProtectedCloneCommand: (enabled: boolean) => string;
+export declare const getCreateSnapshotCommand: (cloneId: string) => string;

package/pages/Clone/utils/index.js

@@ -0,0 +1,12 @@
+export const getCliResetCloneCommand = (cloneId) => {
+    return `dblab clone reset ${cloneId ? cloneId : `<CLONE_ID>`}`;
+};
+export const getCliDestroyCloneCommand = (cloneId) => {
+    return `dblab clone destroy ${cloneId ? cloneId : `<CLONE_ID>`}`;
+};
+export const getCliProtectedCloneCommand = (enabled) => {
+    return `dblab clone update --protected ${enabled ? '' : 'false'}`;
+};
+export const getCreateSnapshotCommand = (cloneId) => {
+    return `dblab branch snapshot --clone-id ${cloneId}`;
+};

package/pages/CreateBranch/index.d.ts

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