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

package/pages/Branches/components/Modals/DeleteBranchModal/index.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { ModalProps } from '@postgres.ai/shared/pages/Branches/components/Modals/types';
+import { DeleteBranch } from '@postgres.ai/shared/types/api/endpoints/deleteBranch';
+interface DeleteBranchModalProps extends ModalProps {
+    deleteBranch: DeleteBranch;
+    branchName: string;
+    instanceId: string;
+    afterSubmitClick: () => void;
+}
+export declare const DeleteBranchModal: ({ isOpen, onClose, deleteBranch, branchName, instanceId, afterSubmitClick, }: DeleteBranchModalProps) => JSX.Element;
+export {};

package/pages/Branches/components/Modals/DeleteBranchModal/index.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, 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 { useState } from 'react';
+import { makeStyles } from '@material-ui/core';
+import { Modal } from '@postgres.ai/shared/components/Modal';
+import { SimpleModalControls } from '@postgres.ai/shared/components/SimpleModalControls';
+import { ImportantText } from '@postgres.ai/shared/components/ImportantText';
+import { Text } from '@postgres.ai/shared/components/Text';
+const useStyles = makeStyles({
+    errorMessage: {
+        color: 'red',
+        marginTop: '10px',
+    },
+}, { index: 1 });
+export const DeleteBranchModal = ({ isOpen, onClose, deleteBranch, branchName, instanceId, afterSubmitClick, }) => {
+    const classes = useStyles();
+    const [deleteError, setDeleteError] = useState(null);
+    const handleDelete = async () => {
+        var _a;
+        const deleteRes = await deleteBranch(branchName, instanceId);
+        if (deleteRes === null || deleteRes === void 0 ? void 0 : deleteRes.error) {
+            setDeleteError((_a = deleteRes.error) === null || _a === void 0 ? void 0 : _a.message);
+        }
+        else {
+            afterSubmitClick();
+        }
+    };
+    const handleClose = () => {
+        setDeleteError(null);
+        onClose();
+    };
+    return (_jsxs(Modal, { title: "Confirmation", onClose: handleClose, isOpen: isOpen, size: "xs", children: [_jsxs(Text, { children: ["Are you sure you want to delete branch", ' ', _jsx(ImportantText, { children: branchName }), "? This action cannot be undone."] }), deleteError && _jsx("p", { className: classes.errorMessage, children: deleteError }), _jsx(SimpleModalControls, { items: [
+                    {
+                        text: 'Cancel',
+                        onClick: handleClose,
+                    },
+                    {
+                        text: 'Delete branch',
+                        variant: 'primary',
+                        onClick: handleDelete,
+                        isDisabled: branchName === 'main',
+                    },
+                ] })] }));
+};

package/pages/Branches/components/Modals/types.d.ts

@@ -0,0 +1,4 @@
+export interface ModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+}

package/pages/Branches/components/Modals/types.js

@@ -0,0 +1 @@
+export {};

package/pages/Branches/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface BranchesProps {
+    instanceId: string;
+}
+export declare const Branches: React.FC<BranchesProps>;
+export {};

package/pages/Branches/index.js

@@ -0,0 +1,60 @@
+import { Fragment as _Fragment, jsx as _jsx, 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 { observer } from 'mobx-react-lite';
+import { useHistory } from 'react-router';
+import { makeStyles } from '@material-ui/core';
+import { useEffect, useState } from 'react';
+import { useStores, useHost } from '@postgres.ai/shared/pages/Instance/context';
+import { Button } from '@postgres.ai/shared/components/Button2';
+import { Spinner } from '@postgres.ai/shared/components/Spinner';
+import { ErrorStub } from '@postgres.ai/shared/components/ErrorStub';
+import { BranchesTable } from '@postgres.ai/shared/pages/Branches/components/BranchesTable';
+import { SectionTitle } from '@postgres.ai/shared/components/SectionTitle';
+import { Tooltip } from '@postgres.ai/shared/components/Tooltip';
+import { InfoIcon } from '@postgres.ai/shared/icons/Info';
+const useStyles = makeStyles({
+    container: {
+        marginTop: '16px',
+    },
+    infoIcon: {
+        height: '12px',
+        width: '12px',
+        marginLeft: '8px',
+        color: '#808080',
+    },
+    spinner: {
+        position: 'absolute',
+        right: '50%',
+        transform: 'translate(-50%, -50%)',
+    },
+}, { index: 1 });
+export const Branches = observer(({ instanceId }) => {
+    const host = useHost();
+    const stores = useStores();
+    const classes = useStyles();
+    const history = useHistory();
+    const [branches, setBranches] = useState([]);
+    const [isLoading, setIsLoading] = useState(true);
+    const { instance, getBranches, isBranchesLoading, getBranchesError, deleteBranch, } = stores.main;
+    const goToBranchAddPage = () => history.push(host.routes.createBranch());
+    const loadBranches = () => {
+        getBranches(instanceId)
+            .then((response) => {
+            response && setBranches(response);
+        })
+            .finally(() => setIsLoading(false));
+    };
+    useEffect(() => {
+        loadBranches();
+    }, []);
+    if (!instance && !isBranchesLoading)
+        return _jsx(_Fragment, {});
+    if (getBranchesError)
+        return (_jsx(ErrorStub, { title: getBranchesError === null || getBranchesError === void 0 ? void 0 : getBranchesError.title, message: getBranchesError === null || getBranchesError === void 0 ? void 0 : getBranchesError.message }));
+    return (_jsx("div", { className: classes.container, children: isBranchesLoading || isLoading ? (_jsx(Spinner, { size: "lg", className: classes.spinner })) : (_jsxs(_Fragment, { children: [_jsx(SectionTitle, { level: 2, tag: "h2", text: `Branches (${(branches === null || branches === void 0 ? void 0 : branches.length) || 0})`, rightContent: _jsxs(_Fragment, { children: [_jsx(Button, { theme: "primary", isDisabled: !branches.length, onClick: goToBranchAddPage, children: "Create branch" }), !branches.length && (_jsx(Tooltip, { content: "No existing branch", children: _jsx("div", { style: { display: 'flex' }, children: _jsx(InfoIcon, { className: classes.infoIcon }) }) }))] }) }), _jsx(BranchesTable, { branches: branches, branchesRoute: host.routes.branches(), reloadBranches: loadBranches, deleteBranch: deleteBranch, emptyTableText: "This instance has no active branches." })] })) }));
+});

package/pages/Clone/context.d.ts

@@ -5,6 +5,8 @@ export declare type Host = {
     cloneId: string;
     routes: {
         instance: () => string;
+        snapshot: (snapshotId: string) => string;
+        createSnapshot: (cloneId: string) => string;
     };
     api: Api;
     elements: {

package/pages/Clone/index.d.ts

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

package/pages/Clone/index.js

@@ -6,10 +6,10 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  *--------------------------------------------------------------------------
  */
 import { useEffect, useState } from 'react';
-import copyToClipboard from 'copy-to-clipboard';
 import { observer } from 'mobx-react-lite';
 import { useHistory } from 'react-router-dom';
-import { makeStyles, TextField, Button, FormControlLabel, Checkbox, IconButton, } from '@material-ui/core';
+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';
@@ -23,28 +23,55 @@ 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';
-const textFieldWidth = 400;
+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: '16px',
+        marginTop: '8px',
+        lineHeight: '26px'
+    },
+    tooltip: {
+        marginTop: '8px',
     },
     container: {
-        maxWidth: '425px',
+        maxWidth: textFieldWidth + 25,
         marginTop: '16px',
     },
     text: {
         marginTop: '4px',
     },
     errorStub: {
-        marginTop: '24px',
+        margin: '24px 0',
     },
     spinner: {
         marginLeft: '8px',
     },
     summary: {
-        marginTop: 20,
+        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',
@@ -71,10 +98,12 @@ const useStyles = makeStyles((theme) => ({
     },
     actions: {
         display: 'flex',
-        marginRight: '-16px',
+        flexWrap: 'wrap',
+        rowGap: '16px',
+        marginBottom: '20px',
     },
     actionButton: {
-        marginRight: '16px',
+        marginRight: '10px',
     },
     remark: {
         fontSize: '12px',
@@ -120,6 +149,9 @@ const useStyles = makeStyles((theme) => ({
         maxWidth: textFieldWidth,
         width: '100%',
     },
+    status: {
+        maxWidth: `${textFieldWidth}px`,
+    },
     copyButton: {
         position: 'absolute',
         top: 16,
@@ -129,12 +161,9 @@ const useStyles = makeStyles((theme) => ({
         height: 32,
         padding: 8,
     },
-    status: {
-        maxWidth: `${textFieldWidth}px`,
-    },
 }), { index: 1 });
 export const Clone = observer((props) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e, _f, _g;
     const classes = useStyles();
     const history = useHistory();
     const stores = useCreatedStores(props);
@@ -146,14 +175,12 @@ export const Clone = observer((props) => {
     useEffect(() => {
         stores.main.load(props.instanceId, props.cloneId);
     }, []);
-    const { instance, 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}` })] }));
-    // Getting instance error.
-    if (stores.main.instanceError)
-        return (_jsxs(_Fragment, { children: [headRendered, _jsx(ErrorStub, { title: stores.main.instanceError.title, message: stores.main.instanceError.message })] }));
-    // Getting clone error.
-    if (stores.main.cloneError)
-        return (_jsxs(_Fragment, { children: [headRendered, _jsx(ErrorStub, { ...stores.main.cloneError })] }));
+    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, {})] }));
@@ -175,6 +202,9 @@ export const Clone = observer((props) => {
         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.
@@ -190,7 +220,8 @@ export const Clone = observer((props) => {
         isReloading ||
         isUpdatingClone ||
         !isCloneStable;
-    return (_jsxs(_Fragment, { children: [headRendered, _jsxs("div", { className: classes.container, 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: 'Destroy this clone', className: classes.actionButton, children: ["Destroy clone", isDestroyingClone && (_jsx(Spinner, { size: "sm", className: classes.spinner }))] }), _jsxs(Button, { variant: "outlined", color: "secondary", onClick: reloadClone, disabled: isDisabledControls || isReloading, title: 'Refresh clone information', className: classes.actionButton, children: ["Reload info", isReloading && _jsx(Spinner, { size: "sm", className: classes.spinner })] })] }), stores.main.resetCloneError && (_jsx(ErrorStub, { title: "Resetting error", message: stores.main.resetCloneError, className: classes.errorStub })), stores.main.destroyCloneError && (_jsx(ErrorStub, { title: "Destroying error", message: stores.main.destroyCloneError, className: classes.errorStub })), _jsxs("div", { className: classes.summary, children: [_jsxs("div", { 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: (_a = clone.snapshot) === null || _a === void 0 ? void 0 : _a.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:" }), ((_b = instance.state) === null || _b === void 0 ? void 0 : _b.dataSize)
+    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)
@@ -217,5 +248,5 @@ export const Clone = observer((props) => {
                                                             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(_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: stores.main.snapshots.data, onResetClone: resetClone, version: (_c = instance.state) === null || _c === void 0 ? void 0 : _c.engine.version })] })] })] }));
+                                                        } }), _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

@@ -6,12 +6,14 @@ 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;
@@ -34,8 +36,8 @@ export declare class MainStore {
     private readonly api;
     constructor(api: Api);
     get isCloneStable(): boolean;
-    load: (instanceId: string, cloneId: string) => Promise<boolean>;
-    reload: () => Promise<boolean>;
+    load: (instanceId: string, cloneId: string) => Promise<boolean | undefined>;
+    reload: () => Promise<boolean | undefined>;
     private loadInstance;
     private loadClone;
     resetClone: (snapshotId: string) => Promise<boolean>;

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 {};

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 {};