@postgres.ai/shared 4.0.3 → 4.1.0

package/{pages → dist/pages}/Clone/index.js

@@ -9,7 +9,8 @@ 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 { makeStyles, Button, TextField, IconButton, } from '@material-ui/core';
+import { Select } from '@postgres.ai/shared/components/Select';
 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';
@@ -163,7 +164,7 @@ const useStyles = makeStyles((theme) => ({
     },
 }), { index: 1 });
 export const Clone = observer((props) => {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     const classes = useStyles();
     const history = useHistory();
     const stores = useCreatedStores(props);
@@ -207,8 +208,45 @@ export const Clone = observer((props) => {
     };
     // Clone reload.
     const reloadClone = () => stores.main.reload();
-    // Data protection.
-    const toggleDataProtection = () => stores.main.updateClone(!clone.protected);
+    // Data protection - build options based on admin config.
+    const maxDurationMinutes = (_g = (_f = (_e = instance.state) === null || _e === void 0 ? void 0 : _e.cloning) === null || _f === void 0 ? void 0 : _f.protectionMaxDurationMinutes) !== null && _g !== void 0 ? _g : 0;
+    const allowForever = maxDurationMinutes === 0;
+    const allDurationOptions = [
+        { value: '60', minutes: 60, children: '1 hour' },
+        { value: '720', minutes: 720, children: '12 hours' },
+        { value: '1440', minutes: 1440, children: '1 day' },
+        { value: '2880', minutes: 2880, children: '2 days' },
+        { value: '4320', minutes: 4320, children: '3 days' },
+        { value: '5760', minutes: 5760, children: '4 days' },
+        { value: '7200', minutes: 7200, children: '5 days' },
+        { value: '8640', minutes: 8640, children: '6 days' },
+        { value: '10080', minutes: 10080, children: '7 days' },
+        { value: '20160', minutes: 20160, children: '14 days' },
+        { value: '43200', minutes: 43200, children: '30 days' },
+    ];
+    const protectionOptions = [
+        { value: 'none', children: 'No protection' },
+        ...allDurationOptions
+            .filter((opt) => maxDurationMinutes === 0 || opt.minutes <= maxDurationMinutes)
+            .map(({ value, children }) => ({ value, children })),
+        ...(allowForever ? [{ value: '0', children: 'Forever' }] : []),
+    ];
+    const handleProtectionChange = (e) => {
+        const value = e.target.value;
+        if (value === 'none') {
+            stores.main.updateCloneProtection(null);
+        }
+        else {
+            stores.main.updateCloneProtection(parseInt(value, 10));
+        }
+    };
+    const getCurrentProtectionValue = () => {
+        if (!clone.protected)
+            return 'none';
+        if (!clone.protectedTillDate)
+            return '0';
+        return 'current';
+    };
     // Commands.
     const sshPortForwardingUrl = getSshPortForwardingCommand(instance, clone);
     const jdbcConnectionStr = getJdbcConnectionStr(clone);
@@ -221,7 +259,7 @@ export const Clone = observer((props) => {
         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 }))] }), !props.hideBranchingFeatures && _jsxs(Button, { variant: "contained", color: "primary", onClick: createSnapshot, disabled: isDisabledControls, title: 'Create snapshot', 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 }))), !props.hideBranchingFeatures && _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)
+                                (stores.main.resetCloneError && (_jsx(ErrorStub, { title: 'Resetting error', message: stores.main.resetCloneError, className: classes.errorStub }))), !props.hideBranchingFeatures && _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: (_h = clone.snapshot) === null || _h === void 0 ? void 0 : _h.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:" }), ((_j = instance.state) === null || _j === void 0 ? void 0 : _j.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)
@@ -248,5 +286,10 @@ 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 PostgreSQL using JDBC. Change DBNAME to the name of the database you want to connect to, and change DBPASSWORD to the password you used when creating the clone." }), 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 a daily basis and delete this clone once your 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 })] })] })] }));
+                                                        } }), _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 PostgreSQL using JDBC. Change DBNAME to the name of the database you want to connect to, and change DBPASSWORD to the password you used when creating the clone." }), 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("div", { style: { marginTop: '8px', marginBottom: '16px' }, children: [_jsx(Select, { label: "Deletion protection", items: clone.protected && clone.protectedTillDate
+                                            ? [
+                                                { value: 'current', children: `Protected until ${clone.protectedTillDate.toLocaleString()}` },
+                                                ...protectionOptions,
+                                            ]
+                                            : protectionOptions, value: getCurrentProtectionValue(), onChange: handleProtectionChange, disabled: isDisabledControls, style: { minWidth: 100 } }), isUpdatingClone && _jsx(Spinner, { size: "sm", className: classes.spinner })] }), _jsxs("span", { className: classes.remark, children: ["Select how long this clone should be protected from deletion. Protected clones cannot be deleted manually or automatically.", _jsx("br", {}), "Check disk space regularly and delete this clone once your 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: (_k = instance.state) === null || _k === void 0 ? void 0 : _k.engine.version })] })] })] }));
 });

package/{pages → dist/pages}/Clone/stores/Main.d.ts

@@ -42,6 +42,6 @@ export declare class MainStore {
     private loadClone;
     resetClone: (snapshotId: string) => Promise<boolean>;
     destroyClone: () => Promise<boolean>;
-    updateClone: (isProtected: boolean) => Promise<void>;
+    updateCloneProtection: (durationMinutes: number | null) => Promise<void>;
 }
 export {};

package/{pages → dist/pages}/Clone/stores/Main.js

@@ -110,21 +110,27 @@ export class MainStore {
             this.isDestroyingClone = false;
             return Boolean(response);
         };
-        this.updateClone = async (isProtected) => {
+        this.updateCloneProtection = async (durationMinutes) => {
             if (!this.instance || !this.clone)
                 return;
             this.isUpdatingClone = true;
             const prevIsProtected = this.clone.protected;
+            const isProtected = durationMinutes !== null;
             this.clone.protected = isProtected;
             const { response, error } = await this.api.updateClone({
                 instanceId: this.instance.id,
                 cloneId: this.clone.id,
                 clone: {
                     isProtected,
+                    protectionDurationMinutes: durationMinutes !== null && durationMinutes !== void 0 ? durationMinutes : undefined,
                 },
             });
-            if (!response)
+            if (response) {
+                await this.loadClone(this.instance.id, this.clone.id);
+            }
+            else {
                 this.clone.protected = prevIsProtected;
+            }
             if (error)
                 this.updateCloneError = await getTextFromUnknownApiError(error);
             this.isUpdatingClone = false;

package/{pages → dist/pages}/CreateBranch/useForm.d.ts

@@ -33,7 +33,7 @@ export declare const useForm: (onSubmit: (values: CreateBranchFormValues) => voi
         dirty: boolean;
         unregisterField: (name: string) => void;
         registerField: (name: string, { validate }: any) => void;
-        getFieldProps: (nameOrOptions: any) => import("formik").FieldInputProps<any>;
+        getFieldProps: (nameOrOptions: string | import("formik").FieldConfig<any>) => import("formik").FieldInputProps<any>;
         getFieldMeta: (name: string) => import("formik").FieldMetaProps<any>;
         getFieldHelpers: (name: string) => import("formik").FieldHelperProps<any>;
         validateOnBlur: boolean;

package/{pages → dist/pages}/CreateClone/index.js

@@ -4,19 +4,21 @@ import { useEffect, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import { observer } from 'mobx-react-lite';
 import { useTimer } from 'use-timer';
-import { Paper, FormControlLabel, Checkbox } from '@material-ui/core';
-import { Info as InfoIcon } from '@material-ui/icons';
+import { Paper, IconButton, InputAdornment } from '@material-ui/core';
+import { Info as InfoIcon, Visibility, VisibilityOff } from '@material-ui/icons';
+import copy from 'copy-to-clipboard';
 import { StubSpinner } from '@postgres.ai/shared/components/StubSpinnerFlex';
 import { TextField } from '@postgres.ai/shared/components/TextField';
 import { Select } from '@postgres.ai/shared/components/Select';
 import { Button } from '@postgres.ai/shared/components/Button';
 import { Spinner } from '@postgres.ai/shared/components/Spinner';
 import { ErrorStub } from '@postgres.ai/shared/components/ErrorStub';
+import { Tooltip } from '@postgres.ai/shared/components/Tooltip';
 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 { MIN_ENTROPY, getEntropy, validatePassword, generatePassword, } from '@postgres.ai/shared/helpers/getEntropy';
 import { useCreatedStores } from './useCreatedStores';
 import { useForm } from './useForm';
 import { getCliCloneStatus, getCliCreateCloneCommand } from './utils';
@@ -31,6 +33,9 @@ export const CreateClone = observer((props) => {
     const [branchesList, setBranchesList] = useState([]);
     const [snapshots, setSnapshots] = useState([]);
     const [isLoadingSnapshots, setIsLoadingSnapshots] = useState(false);
+    const [selectedBranchKey, setSelectedBranchKey] = useState('');
+    const [showPassword, setShowPassword] = useState(false);
+    const [passwordGenerated, setPasswordGenerated] = useState(false);
     // Form.
     const onSubmit = async (values) => {
         if (!values.dbPassword || getEntropy(values.dbPassword) < MIN_ENTROPY) {
@@ -45,38 +50,50 @@ export const CreateClone = observer((props) => {
             timer.reset();
         }
     };
-    const fetchBranchSnapshotsData = async (branchName, initialSnapshotId) => {
+    const fetchBranchSnapshotsData = async (branchName, dataset, initialSnapshotId) => {
         var _a;
-        const snapshotsRes = (_a = (await stores.main.getSnapshots(props.instanceId, branchName))) !== null && _a !== void 0 ? _a : [];
+        const snapshotsRes = (_a = (await stores.main.getSnapshots(props.instanceId, branchName, dataset))) !== 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);
+        const compositeKey = e.target.value;
+        const [branchName, dataset] = compositeKey.split('|');
+        setSelectedBranchKey(compositeKey);
+        formik.setFieldValue('branch', branchName);
+        formik.setFieldValue('dataset', dataset);
         if (props.api.getSnapshots) {
-            await fetchBranchSnapshotsData(selectedBranch);
+            await fetchBranchSnapshotsData(branchName, dataset);
         }
     };
     const formik = useForm(onSubmit);
     const fetchData = async (initialBranch, initialSnapshotId) => {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f;
         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;
+            const mainBranch = branches.find((branch) => branch.name === 'main');
+            let initiallySelectedBranch = mainBranch !== null && mainBranch !== void 0 ? mainBranch : branches[0];
+            if (initialBranch) {
+                const foundBranch = branches.find((branch) => branch.name === initialBranch);
+                if (foundBranch) {
+                    initiallySelectedBranch = foundBranch;
+                }
             }
-            setBranchesList(branches.map((branch) => branch.name));
-            formik.setFieldValue('branch', initiallySelectedBranch);
-            if (props.api.getSnapshots) {
-                await fetchBranchSnapshotsData(initiallySelectedBranch, initialSnapshotId);
+            setBranchesList(branches);
+            formik.setFieldValue('branch', (_b = initiallySelectedBranch === null || initiallySelectedBranch === void 0 ? void 0 : initiallySelectedBranch.name) !== null && _b !== void 0 ? _b : '');
+            formik.setFieldValue('dataset', (_c = initiallySelectedBranch === null || initiallySelectedBranch === void 0 ? void 0 : initiallySelectedBranch.baseDataset) !== null && _c !== void 0 ? _c : '');
+            if (initiallySelectedBranch) {
+                const compositeKey = `${initiallySelectedBranch.name}|${initiallySelectedBranch.baseDataset}`;
+                setSelectedBranchKey(compositeKey);
             }
-            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 : [];
+            if (props.api.getSnapshots && initiallySelectedBranch) {
+                await fetchBranchSnapshotsData(initiallySelectedBranch.name, initiallySelectedBranch.baseDataset, initialSnapshotId);
+            }
+            else if (!props.api.getSnapshots) {
+                const allSnapshots = (_f = (_e = (_d = stores.main) === null || _d === void 0 ? void 0 : _d.snapshots) === null || _e === void 0 ? void 0 : _e.data) !== null && _f !== void 0 ? _f : [];
                 const sortedSnapshots = allSnapshots.slice().sort(compareSnapshotsDesc);
                 setSnapshots(sortedSnapshots);
                 let selectedSnapshot = allSnapshots.find(s => s.id === initialSnapshotId) || allSnapshots[0];
@@ -120,10 +137,10 @@ export const CreateClone = observer((props) => {
                         ((_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) && !stores.main.cloneError;
-    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 (_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: selectedBranchKey, disabled: !branchesList || isCreatingClone, onChange: handleSelectBranch, error: Boolean(formik.errors.branch), items: (_g = branchesList === null || branchesList === void 0 ? void 0 : branchesList.map((branch) => {
                                             return {
-                                                value: snapshot,
-                                                children: snapshot,
+                                                value: `${branch.name}|${branch.baseDataset}`,
+                                                children: `${branch.name} (${branch.baseDataset})`,
                                             };
                                         })) !== null && _g !== void 0 ? _g : [] })), _jsx(TextField, { fullWidth: true, label: "Clone ID", value: formik.values.cloneId, onChange: (e) => {
                                             const sanitizedCloneIdValue = e.target.value.replace(/\s/g, '');
@@ -134,12 +151,46 @@ export const CreateClone = observer((props) => {
                                                 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't 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) => {
+                                        })) !== 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't 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: showPassword ? 'text' : 'password', value: formik.values.dbPassword, onChange: (e) => {
                                             formik.setFieldValue('dbPassword', e.target.value);
+                                            setPasswordGenerated(false);
                                             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)
+                                        }, error: Boolean(formik.errors.dbPassword), disabled: isCreatingClone, InputProps: {
+                                            endAdornment: (_jsx(InputAdornment, { position: "end", children: _jsx(Tooltip, { content: showPassword ? 'Hide password' : 'Show password', children: _jsx(IconButton, { size: "small", onClick: () => setShowPassword(!showPassword), disabled: isCreatingClone, style: { marginRight: 4 }, children: showPassword ? _jsx(Visibility, { fontSize: "small" }) : _jsx(VisibilityOff, { fontSize: "small" }) }) }) })),
+                                        } }), _jsxs("div", { className: styles.passwordActions, children: [_jsx(Button, { variant: "secondary", size: "small", onClick: () => copy(formik.values.dbPassword), isDisabled: isCreatingClone || !formik.values.dbPassword, children: "Copy" }), _jsx(Button, { variant: "secondary", size: "small", onClick: () => {
+                                                    const newPassword = generatePassword(16);
+                                                    formik.setFieldValue('dbPassword', newPassword);
+                                                    setPasswordGenerated(true);
+                                                    if (formik.errors.dbPassword) {
+                                                        formik.setFieldError('dbPassword', '');
+                                                    }
+                                                }, isDisabled: isCreatingClone, children: "Generate" }), passwordGenerated && (_jsx("span", { className: styles.passwordHint, children: "New password created. Copy and save it securely." }))] }), _jsx("p", { className: cn(formik.errors.dbPassword && styles.error, styles.remark), children: formik.errors.dbPassword })] }), _jsxs("div", { className: styles.section, children: [_jsx("h2", { className: styles.title, children: "Clone protection" }), _jsx(Select, { label: "Deletion protection", items: (() => {
+                                            var _a, _b, _c, _d;
+                                            const maxDurationMinutes = (_d = (_c = (_b = (_a = stores.main.instance) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.cloning) === null || _c === void 0 ? void 0 : _c.protectionMaxDurationMinutes) !== null && _d !== void 0 ? _d : 0;
+                                            const allowForever = maxDurationMinutes === 0;
+                                            const allDurationOptions = [
+                                                { value: '60', minutes: 60, children: '1 hour' },
+                                                { value: '720', minutes: 720, children: '12 hours' },
+                                                { value: '1440', minutes: 1440, children: '1 day' },
+                                                { value: '2880', minutes: 2880, children: '2 days' },
+                                                { value: '4320', minutes: 4320, children: '3 days' },
+                                                { value: '5760', minutes: 5760, children: '4 days' },
+                                                { value: '7200', minutes: 7200, children: '5 days' },
+                                                { value: '8640', minutes: 8640, children: '6 days' },
+                                                { value: '10080', minutes: 10080, children: '7 days' },
+                                                { value: '20160', minutes: 20160, children: '14 days' },
+                                                { value: '43200', minutes: 43200, children: '30 days' },
+                                            ];
+                                            return [
+                                                { value: 'none', children: 'No protection' },
+                                                ...allDurationOptions
+                                                    .filter((opt) => maxDurationMinutes === 0 || opt.minutes <= maxDurationMinutes)
+                                                    .map(({ value, children }) => ({ value, children })),
+                                                ...(allowForever ? [{ value: '0', children: 'Forever' }] : []),
+                                            ];
+                                        })(), value: formik.values.protectionDurationMinutes, onChange: (e) => formik.setFieldValue('protectionDurationMinutes', e.target.value), disabled: isCreatingClone, style: { minWidth: 100 } }), _jsxs("p", { className: styles.remark, children: ["Select how long this clone should be protected from deletion. Protected clones cannot be deleted manually or automatically.", _jsx("br", {}), "Check disk space regularly 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) })] }) })] })] }));
+                                                                    : '-' })] }), _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, showPassword) }), _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 → dist/pages}/CreateClone/stores/Main.d.ts

@@ -31,7 +31,7 @@ export declare class MainStore {
     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<{
+    getSnapshots: (instanceId: string, branchName?: string, dataset?: string) => Promise<{
         createdAtDate: Date;
         dataStateAtDate: Date;
         numClones: string | number;

package/{pages → dist/pages}/CreateClone/stores/Main.js

@@ -49,12 +49,13 @@ export class MainStore {
                 this.getBranchesError = await error.json().then((err) => err);
             return response;
         };
-        this.getSnapshots = async (instanceId, branchName) => {
+        this.getSnapshots = async (instanceId, branchName, dataset) => {
             if (!this.api.getSnapshots)
                 return;
             const { response, error } = await this.api.getSnapshots({
                 instanceId,
                 branchName,
+                dataset,
             });
             if (error)
                 this.getSnapshotsError = await error.json().then((err) => err);

package/dist/pages/CreateClone/styles.module.scss

@@ -0,0 +1,128 @@
+.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 {
+  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: 24px;
+  }
+}
+
+.title {
+  font-size: inherit;
+  font-weight: 700;
+}
+
+.text {
+  margin-top: 8px;
+}
+
+.marginBottom {
+  margin-bottom: 10px;
+}
+
+.remark {
+  font-size: 12px;
+}
+
+.error {
+  color: red;
+}
+
+.snapshotTag {
+  font-weight: 700;
+  margin-left: 4px;
+}
+
+.summary {
+  display: flex;
+  align-items: center;
+  background-color: rgb(250, 250, 250) !important;
+  box-shadow: none !important;
+  padding: 12px;
+  margin: 10px 0 15px 0;
+}
+
+.summaryIcon {
+  width: 30px;
+  color: silver;
+  margin-right: 12px;
+}
+
+.params {
+  flex: 1 1 100%;
+}
+
+.param {
+  display: flex;
+  justify-content: space-between;
+}
+
+.controls {
+  display: flex;
+  align-items: center;
+}
+
+.spinner {
+  margin-left: 8px;
+}
+
+.elapsedTime {
+  margin-left: 24px;
+}
+
+.snapshotOverflow {
+  width: 100%;
+  word-wrap: break-word;
+  white-space: initial;
+}
+
+.pageTitle {
+  margin-top: 8px;
+  line-height: 26px;
+}
+
+.passwordActions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 8px;
+  margin-bottom: 16px;
+}
+
+.passwordHint {
+  font-size: 12px;
+  color: #f57c00;
+  font-weight: 500;
+}

package/{pages → dist/pages}/CreateClone/useForm.d.ts

@@ -1,11 +1,12 @@
 /// <reference types="react" />
 export declare type FormValues = {
     branch: string;
+    dataset: string;
     cloneId: string;
     snapshotId: string;
     dbUser: string;
     dbPassword: string;
-    isProtected: boolean;
+    protectionDurationMinutes: string;
 };
 export declare const useForm: (onSubmit: (values: FormValues) => void) => {
     initialValues: FormValues;
@@ -39,7 +40,7 @@ export declare const useForm: (onSubmit: (values: FormValues) => void) => {
     dirty: boolean;
     unregisterField: (name: string) => void;
     registerField: (name: string, { validate }: any) => void;
-    getFieldProps: (nameOrOptions: any) => import("formik").FieldInputProps<any>;
+    getFieldProps: (nameOrOptions: string | import("formik").FieldConfig<any>) => import("formik").FieldInputProps<any>;
     getFieldMeta: (name: string) => import("formik").FieldMetaProps<any>;
     getFieldHelpers: (name: string) => import("formik").FieldHelperProps<any>;
     validateOnBlur: boolean;

package/{pages → dist/pages}/CreateClone/useForm.js

@@ -13,17 +13,18 @@ const Schema = Yup.object().shape({
     snapshotId: Yup.string().required('Date state time is required'),
     dbUser: Yup.string().required('Database username is required'),
     dbPassword: Yup.string().required('Database password is required'),
-    isProtected: Yup.boolean(),
+    protectionDurationMinutes: Yup.string(),
 });
 export const useForm = (onSubmit) => {
     const formik = useFormik({
         initialValues: {
             branch: '',
+            dataset: '',
             cloneId: '',
             snapshotId: '',
             dbUser: '',
             dbPassword: '',
-            isProtected: false,
+            protectionDurationMinutes: 'none',
         },
         validationSchema: Schema,
         onSubmit,

package/{pages → dist/pages}/CreateClone/utils/index.d.ts

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

package/dist/pages/CreateClone/utils/index.js

@@ -0,0 +1,29 @@
+// escape string for use in single-quoted shell argument
+const shellEscape = (str) => {
+    // replace single quotes with: end quote, escaped quote, start quote
+    return "'" + str.replace(/'/g, "'\\''") + "'";
+};
+export const getCliCreateCloneCommand = (values, showPassword) => {
+    const { dbUser, dbPassword, snapshotId, protectionDurationMinutes, cloneId } = values;
+    const usernameDisplay = dbUser ? shellEscape(dbUser) : `<USERNAME>`;
+    const passwordDisplay = dbPassword
+        ? (showPassword ? shellEscape(dbPassword) : dbPassword.replace(/./g, '*'))
+        : `<PASSWORD>`;
+    const cloneIdDisplay = cloneId ? shellEscape(cloneId) : `<CLONE_ID>`;
+    const protectedFlag = protectionDurationMinutes !== 'none' ? `--protected ${protectionDurationMinutes}` : '';
+    return `dblab clone create \
+
+  --username ${usernameDisplay} \
+
+  --password ${passwordDisplay} \
+
+  ${snapshotId ? `--snapshot-id ${shellEscape(snapshotId)}` : ``} \
+
+  ${protectedFlag} \
+
+  --id ${cloneIdDisplay} \ `;
+};
+export const getCliCloneStatus = (cloneId) => {
+    const cloneIdDisplay = cloneId ? shellEscape(cloneId) : `<CLONE_ID>`;
+    return `dblab clone status ${cloneIdDisplay}`;
+};

package/{pages → dist/pages}/CreateSnapshot/useForm.d.ts

@@ -36,7 +36,7 @@ export declare const useForm: (onSubmit: (values: FormValues) => void) => {
         dirty: boolean;
         unregisterField: (name: string) => void;
         registerField: (name: string, { validate }: any) => void;
-        getFieldProps: (nameOrOptions: any) => import("formik").FieldInputProps<any>;
+        getFieldProps: (nameOrOptions: string | import("formik").FieldConfig<any>) => import("formik").FieldInputProps<any>;
         getFieldMeta: (name: string) => import("formik").FieldMetaProps<any>;
         getFieldHelpers: (name: string) => import("formik").FieldHelperProps<any>;
         validateOnBlur: boolean;

package/dist/pages/Instance/Clones/ClonesList/styles.module.scss

@@ -0,0 +1,42 @@
+@import '@postgres.ai/shared/styles/vars';
+
+.interactiveRow {
+  cursor: pointer;
+}
+
+.verticalCentered {
+  display: flex;
+  align-items: center;
+}
+
+.infoIcon {
+  margin-left: 4px;
+  height: 12px;
+  width: 12px;
+}
+
+.sortIcon {
+  margin-left: 8px;
+  width: 10px;
+  cursor: pointer;
+  transition: transform 0.15s ease-in-out;
+}
+
+.hideSortIcon {
+  opacity: 0;
+}
+
+.sortIconUp {
+  transform: rotate(180deg);
+}
+
+.protectionIcon {
+  display: block;
+  margin-left: 5px;
+  height: 1em;
+  color: $color-gray-semi-dark;
+}
+
+.emptyStub {
+  margin-top: 16px;
+}