@postgres.ai/shared 4.0.2-pr-1148.1 → 4.0.2-pr-1200

package/components/UpgradeCloneModal/index.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { Clone } from '@postgres.ai/shared/types/api/entities/clone';
+declare type Props = {
+    isOpen: boolean;
+    onClose: () => void;
+    clone: Clone;
+    targetVersion: number;
+    onUpgradeClone: (dockerImage?: string) => void;
+};
+export declare const UpgradeCloneModal: (props: Props) => JSX.Element;
+export {};

package/components/UpgradeCloneModal/index.js

@@ -0,0 +1,75 @@
+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 { useEffect, useState } from 'react';
+import { makeStyles, TextField } from '@material-ui/core';
+import { Text } from '@postgres.ai/shared/components/Text';
+import { Modal } from '@postgres.ai/shared/components/Modal';
+import { ImportantText } from '@postgres.ai/shared/components/ImportantText';
+import { SimpleModalControls } from '@postgres.ai/shared/components/SimpleModalControls';
+import { colors } from '@postgres.ai/shared/styles/vars';
+// The upgrade image ships binaries for the four majors preceding its own, which is the same
+// bound the engine enforces on the request.
+const MAX_MAJOR_JUMP = 4;
+const useStyles = makeStyles({
+    field: {
+        margin: '16px 0 0 0',
+    },
+    hint: {
+        margin: '8px 0 0 0',
+    },
+    error: {
+        margin: '8px 0 0 0',
+        color: colors.status.error,
+    },
+}, { index: 1 });
+export const UpgradeCloneModal = (props) => {
+    const { isOpen, onClose, clone, targetVersion, onUpgradeClone } = props;
+    const classes = useStyles();
+    const [dockerImage, setDockerImage] = useState('');
+    // The modal stays mounted while the clone page is open, so without this it reopens holding the
+    // previous attempt's image, which would ride along unnoticed.
+    useEffect(() => {
+        if (isOpen)
+            setDockerImage('');
+    }, [isOpen]);
+    const currentVersion = clone.dbVersion ? parseInt(clone.dbVersion, 10) : NaN;
+    // Nothing here is decidable without the current version, so the engine has the last word: it
+    // reads the major out of the data directory once the upgrade starts.
+    const getBlockingReason = () => {
+        if (Number.isNaN(currentVersion))
+            return null;
+        if (targetVersion <= currentVersion) {
+            return `This clone already runs PostgreSQL ${currentVersion}, and the instance upgrades to ${targetVersion}.`;
+        }
+        if (targetVersion - currentVersion > MAX_MAJOR_JUMP) {
+            return `The upgrade image covers at most ${MAX_MAJOR_JUMP} preceding majors, and this clone runs PostgreSQL ${currentVersion}.`;
+        }
+        return null;
+    };
+    const blockingReason = getBlockingReason();
+    const handleClickUpgrade = () => {
+        if (blockingReason)
+            return;
+        onUpgradeClone(dockerImage || undefined);
+        onClose();
+    };
+    return (_jsxs(Modal, { title: `Upgrade clone ${clone.id}`, isOpen: isOpen, onClose: onClose, children: [_jsxs(Text, { children: ["Clone ", _jsx(ImportantText, { children: clone.id }), clone.dbVersion
+                        ? ` currently runs PostgreSQL ${clone.dbVersion}. `
+                        : ' has no recorded PostgreSQL version. ', "This instance upgrades clones to", ' ', _jsxs(ImportantText, { children: ["PostgreSQL ", targetVersion] }), ", the major its configured upgrade image is built on."] }), blockingReason ? (_jsx("div", { className: classes.error, children: _jsx(Text, { children: blockingReason }) })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: classes.hint, children: _jsx(Text, { children: "The data directory is upgraded in place, and the clone restarts on the target version. Resetting the clone afterwards returns it to the version the instance is configured with." }) }), _jsx("div", { className: classes.hint, children: _jsx(Text, { children: "If the upgrade fails before any data is converted, the clone keeps running on its current version. If it fails afterwards, the clone is restored from its snapshot and changes made since it was created are lost." }) })] })), _jsx(TextField, { label: "Docker image (optional)", value: dockerImage, onChange: (e) => setDockerImage(e.target.value), helperText: "Leave empty to keep the current image and change only its major version", fullWidth: true, className: classes.field }), _jsx(SimpleModalControls, { items: [
+                    {
+                        text: 'Cancel',
+                        onClick: onClose,
+                    },
+                    {
+                        text: 'Upgrade',
+                        onClick: handleClickUpgrade,
+                        variant: 'primary',
+                        isDisabled: Boolean(blockingReason),
+                    },
+                ] })] }));
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@postgres.ai/shared",
-  "version": "4.0.2-pr-1148.1",
+  "version": "4.0.2-pr-1200",
   "main": "index.js",
   "types": "index.d.ts",
   "peerDependencies": {

package/pages/Branches/Branch/index.js

@@ -13,8 +13,11 @@ import { makeStyles, Button, TextField, IconButton, Table, TableHead, TableRow,
 import { ErrorStub } from '@postgres.ai/shared/components/ErrorStub';
 import { PageSpinner } from '@postgres.ai/shared/components/PageSpinner';
 import { SectionTitle } from '@postgres.ai/shared/components/SectionTitle';
+import { Select } from '@postgres.ai/shared/components/Select';
 import { Spinner } from '@postgres.ai/shared/components/Spinner';
 import { Tooltip } from '@postgres.ai/shared/components/Tooltip';
+import { parseDate } from '@postgres.ai/shared/utils/date';
+import { protectionOptions, getProtectionSelectValue, } from '@postgres.ai/shared/utils/protection';
 import { icons } from '@postgres.ai/shared/styles/icons';
 import { styles } from '@postgres.ai/shared/styles/styles';
 import { DeleteBranchModal } from '@postgres.ai/shared/pages/Branches/components/Modals/DeleteBranchModal';
@@ -73,6 +76,13 @@ const useStyles = makeStyles(() => ({
     summary: {
         marginTop: 20,
     },
+    protectionControl: {
+        display: 'flex',
+        alignItems: 'center',
+        marginTop: '8px',
+        marginBottom: '8px',
+        maxWidth: 525,
+    },
     text: {
         marginTop: '4px',
     },
@@ -120,8 +130,15 @@ export const BranchesPage = observer((props) => {
     const history = useHistory();
     const stores = useCreatedStores(props);
     const [isOpenDestroyModal, setIsOpenDestroyModal] = useState(false);
-    const { branch, snapshotList, deleteBranch, reload, load, isReloading, isBranchesLoading, getBranchesError, snapshotListError, getBranchError, } = stores.main;
+    const { branch, snapshotList, deleteBranch, reload, load, isReloading, isBranchesLoading, isUpdatingBranch, updateBranchProtection, updateBranchError, getBranchesError, snapshotListError, getBranchError, } = stores.main;
     const hasBranchError = getBranchesError || getBranchError || snapshotListError;
+    const protectedTillDate = (branch === null || branch === void 0 ? void 0 : branch.protectedTill)
+        ? parseDate(branch.protectedTill)
+        : null;
+    const handleProtectionChange = (e) => {
+        const value = e.target.value;
+        updateBranchProtection(props.branchId, props.instanceId, value === 'none' ? null : parseInt(value, 10));
+    };
     const branchLogLength = snapshotList === null || snapshotList === void 0 ? void 0 : snapshotList.reduce((acc, snapshot) => {
         var _a;
         if ((snapshot === null || snapshot === void 0 ? void 0 : snapshot.branch) !== null) {
@@ -144,7 +161,15 @@ export const BranchesPage = observer((props) => {
                         (getBranchError === null || getBranchError === void 0 ? void 0 : getBranchError.message) ||
                         (snapshotListError === null || snapshotListError === void 0 ? void 0 : snapshotListError.message), className: classes.marginTop })] }));
     }
-    return (_jsxs(_Fragment, { children: [headRendered, _jsxs("div", { className: classes.wrapper, children: [_jsxs("div", { className: classes.container, children: [_jsxs("div", { className: classes.actions, children: [_jsx(Button, { variant: "contained", color: "primary", onClick: () => history.push(props.routes.createClone(props.branchId)), disabled: isReloading, title: 'Create clone', className: classes.actionButton, children: "Create clone" }), _jsx(Button, { variant: "contained", color: "primary", onClick: () => setIsOpenDestroyModal(true), disabled: isReloading, title: 'Delete this branch', className: classes.actionButton, children: "Delete branch" }), _jsxs(Button, { variant: "outlined", color: "secondary", onClick: () => reload(props.branchId, props.instanceId), disabled: isReloading, title: 'Refresh branch information', className: classes.actionButton, children: ["Reload info", isReloading && _jsx(Spinner, { size: "sm", className: classes.spinner })] })] }), _jsx("br", {}), _jsxs("div", { children: [_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 branch."] }), children: icons.infoIcon })] }), _jsx("p", { className: classes.text, children: (branch === null || branch === void 0 ? void 0 : branch.dataStateAt) || '-' })] }), _jsxs("div", { className: classes.summary, children: [_jsxs("p", { children: [_jsx("strong", { children: "Summary" }), "\u00A0"] }), _jsxs("p", { className: classes.text, children: [_jsx("span", { className: classes.paramTitle, children: "Branch name:" }), branch === null || branch === void 0 ? void 0 : branch.name] }), _jsxs("p", { className: classes.text, children: [_jsx("span", { className: classes.paramTitle, children: "Parent branch:" }), branch === null || branch === void 0 ? void 0 : branch.parent] })] }), _jsx("br", {}), _jsx("p", { children: _jsx("strong", { children: "Snapshot info" }) }), _jsxs("div", { className: classes.copyFieldContainer, children: [_jsx(TextField, { variant: "outlined", label: "Snapshot ID", value: branch === null || branch === void 0 ? void 0 : branch.snapshotID, className: classes.textField, margin: "normal", fullWidth: true, InputLabelProps: {
+    return (_jsxs(_Fragment, { children: [headRendered, _jsxs("div", { className: classes.wrapper, children: [_jsxs("div", { className: classes.container, children: [_jsxs("div", { className: classes.actions, children: [_jsx(Button, { variant: "contained", color: "primary", onClick: () => history.push(props.routes.createClone(props.branchId)), disabled: isReloading, title: 'Create clone', className: classes.actionButton, children: "Create clone" }), _jsx(Button, { variant: "contained", color: "primary", onClick: () => setIsOpenDestroyModal(true), disabled: isReloading, title: 'Delete this branch', className: classes.actionButton, children: "Delete branch" }), _jsxs(Button, { variant: "outlined", color: "secondary", onClick: () => reload(props.branchId, props.instanceId), disabled: isReloading, title: 'Refresh branch information', className: classes.actionButton, children: ["Reload info", isReloading && _jsx(Spinner, { size: "sm", className: classes.spinner })] })] }), _jsx("br", {}), _jsxs("div", { children: [_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 branch."] }), children: icons.infoIcon })] }), _jsx("p", { className: classes.text, children: (branch === null || branch === void 0 ? void 0 : branch.dataStateAt) || '-' })] }), _jsxs("div", { className: classes.summary, children: [_jsxs("p", { children: [_jsx("strong", { children: "Summary" }), "\u00A0"] }), _jsxs("p", { className: classes.text, children: [_jsx("span", { className: classes.paramTitle, children: "Branch name:" }), branch === null || branch === void 0 ? void 0 : branch.name] }), _jsxs("p", { className: classes.text, children: [_jsx("span", { className: classes.paramTitle, children: "Parent branch:" }), branch === null || branch === void 0 ? void 0 : branch.parent] })] }), _jsxs("div", { className: classes.summary, children: [_jsx("p", { children: _jsx("strong", { children: "Deletion protection" }) }), _jsxs("div", { className: classes.protectionControl, children: [_jsx(Select, { label: "Deletion protection", items: (branch === null || branch === void 0 ? void 0 : branch.protected) && protectedTillDate
+                                                            ? [
+                                                                {
+                                                                    value: 'current',
+                                                                    children: `Protected until ${protectedTillDate.toLocaleString()}`,
+                                                                },
+                                                                ...protectionOptions,
+                                                            ]
+                                                            : protectionOptions, value: getProtectionSelectValue(Boolean(branch === null || branch === void 0 ? void 0 : branch.protected), protectedTillDate), onChange: handleProtectionChange, disabled: isReloading || isUpdatingBranch, fullWidth: true }), isUpdatingBranch && (_jsx(Spinner, { size: "sm", className: classes.spinner }))] }), _jsx("p", { className: classes.text, children: "Protected branches cannot be deleted manually or automatically." }), updateBranchError && (_jsx(ErrorStub, { title: "Update error", message: updateBranchError, className: classes.marginTop }))] }), _jsx("br", {}), _jsx("p", { children: _jsx("strong", { children: "Snapshot info" }) }), _jsxs("div", { className: classes.copyFieldContainer, children: [_jsx(TextField, { variant: "outlined", label: "Snapshot ID", value: branch === null || branch === void 0 ? void 0 : branch.snapshotID, className: classes.textField, margin: "normal", fullWidth: true, InputLabelProps: {
                                                     shrink: true,
                                                     style: styles.inputFieldLabel,
                                                 }, FormHelperTextProps: {

package/pages/Branches/Branch/stores/Main.d.ts

@@ -1,6 +1,7 @@
 import { GetBranches } from '@postgres.ai/shared/types/api/endpoints/getBranches';
 import { Branch } from '@postgres.ai/shared/types/api/endpoints/getBranches';
 import { DeleteBranch } from '@postgres.ai/shared/types/api/endpoints/deleteBranch';
+import { UpdateBranch } from '@postgres.ai/shared/types/api/endpoints/updateBranch';
 import { SnapshotList, GetSnapshotList } from '@postgres.ai/shared/types/api/endpoints/getSnapshotList';
 import { InitWS } from '@postgres.ai/shared/types/api/endpoints/initWS';
 declare type Error = {
@@ -11,6 +12,7 @@ export declare type Api = {
     getBranches: GetBranches;
     deleteBranch: DeleteBranch;
     getSnapshotList: GetSnapshotList;
+    updateBranch?: UpdateBranch;
     initWS?: InitWS;
 };
 export declare class MainStore {
@@ -19,6 +21,8 @@ export declare class MainStore {
     getBranchesError: Error | null;
     isReloading: boolean;
     isBranchesLoading: boolean;
+    isUpdatingBranch: boolean;
+    updateBranchError: string | null;
     branches: Branch[] | null;
     branch: Branch | null;
     snapshotList: SnapshotList[] | null;
@@ -28,6 +32,7 @@ export declare class MainStore {
     reload: (branchId: string, instanceId: string) => Promise<void>;
     getBranches: (branchId: string, instanceId: string) => Promise<Branch[] | null | undefined>;
     getBranch: (branchId: string, instanceId: string) => Promise<boolean>;
+    updateBranchProtection: (branchName: string, instanceId: string, durationMinutes: number | null) => Promise<void>;
     deleteBranch: (branchName: string, instanceId: string) => Promise<{
         response: Response | null;
         error: globalThis.Error | null;

package/pages/Branches/Branch/stores/Main.js

@@ -5,6 +5,7 @@
  *--------------------------------------------------------------------------
  */
 import { makeAutoObservable } from 'mobx';
+import { getTextFromUnknownApiError } from '@postgres.ai/shared/utils/api';
 export class MainStore {
     constructor(api) {
         this.getBranchError = null;
@@ -12,6 +13,8 @@ export class MainStore {
         this.getBranchesError = null;
         this.isReloading = false;
         this.isBranchesLoading = false;
+        this.isUpdatingBranch = false;
+        this.updateBranchError = null;
         this.branches = null;
         this.branch = null;
         this.snapshotList = null;
@@ -60,6 +63,32 @@ export class MainStore {
             }
             return !!currentBranch;
         };
+        this.updateBranchProtection = async (branchName, instanceId, durationMinutes) => {
+            if (!this.api.updateBranch || !this.branch)
+                return;
+            this.isUpdatingBranch = true;
+            this.updateBranchError = null;
+            const prevProtected = this.branch.protected;
+            const isProtected = durationMinutes !== null;
+            this.branch.protected = isProtected;
+            const { response, error } = await this.api.updateBranch({
+                instanceId,
+                branchName,
+                branch: {
+                    isProtected,
+                    protectionDurationMinutes: durationMinutes !== null && durationMinutes !== void 0 ? durationMinutes : undefined,
+                },
+            });
+            if (response) {
+                await this.reload(branchName, instanceId);
+            }
+            else if (this.branch) {
+                this.branch.protected = prevProtected;
+            }
+            if (error)
+                this.updateBranchError = await getTextFromUnknownApiError(error);
+            this.isUpdatingBranch = false;
+        };
         this.deleteBranch = async (branchName, instanceId) => {
             var _a;
             if (!branchName)

package/pages/Branches/components/BranchesTable/index.js

@@ -77,7 +77,7 @@ export const BranchesTable = ({ branches, emptyTableText, deleteBranch, branches
     if (!state.branches.length) {
         return _jsx("p", { className: classes.marginTop, children: emptyTableText });
     }
-    return (_jsx(HorizontalScrollContainer, { children: _jsxs(Table, { children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableHeaderCell, {}), _jsx(TableHeaderCell, { children: "Branch" }), _jsx(TableHeaderCell, { children: _jsxs("div", { onClick: handlesortByParent, className: cn(classes.interactiveRow, classes.verticalCentered), children: ["Parent", _jsx(ArrowDropDownIcon, { className: cn(state.sortByParent === 'asc' && classes.sortIconUp, classes.sortIcon) })] }) }), _jsx(TableHeaderCell, { children: "Data state time" }), _jsx(TableHeaderCell, { children: "Latest Snapshot ID" }), _jsx(TableHeaderCell, { children: "Number of snapshots" })] }) }), _jsx(TableBody, { children: (_a = state.branches) === null || _a === void 0 ? void 0 : _a.map((branch) => {
+    return (_jsx(HorizontalScrollContainer, { children: _jsxs(Table, { children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableHeaderCell, {}), _jsx(TableHeaderCell, { children: "Branch" }), _jsx(TableHeaderCell, { children: _jsxs("div", { onClick: handlesortByParent, className: cn(classes.interactiveRow, classes.verticalCentered), children: ["Parent", _jsx(ArrowDropDownIcon, { className: cn(state.sortByParent === 'asc' && classes.sortIconUp, classes.sortIcon) })] }) }), _jsx(TableHeaderCell, { children: "Data state time" }), _jsx(TableHeaderCell, { children: "Latest Snapshot ID" }), _jsx(TableHeaderCell, { children: "Number of snapshots" }), _jsx(TableHeaderCell, { children: "Protected" })] }) }), _jsx(TableBody, { children: (_a = state.branches) === null || _a === void 0 ? void 0 : _a.map((branch) => {
                         const branchPagePath = host.routes.branch(branch.name);
                         return (_jsxs(TableRow, { hover: true, onClick: () => history.push(branchPagePath), className: classes.pointerCursor, children: [_jsx(TableBodyCellMenu, { actions: [
                                         {
@@ -91,7 +91,7 @@ export const BranchesTable = ({ branches, emptyTableText, deleteBranch, branches
                                                 setIsOpenDestroyModal(true);
                                             },
                                         },
-                                    ] }), _jsx(TableBodyCell, { children: branch.name }), _jsx(TableBodyCell, { children: branch.parent }), _jsx(TableBodyCell, { children: formatDateWithDistance(branch.dataStateAt, new Date(branch.dataStateAt)) }), _jsx(TableBodyCell, { children: branch.snapshotID }), _jsx(TableBodyCell, { children: branch.numSnapshots })] }, branch.name));
+                                    ] }), _jsx(TableBodyCell, { children: branch.name }), _jsx(TableBodyCell, { children: branch.parent }), _jsx(TableBodyCell, { children: formatDateWithDistance(branch.dataStateAt, new Date(branch.dataStateAt)) }), _jsx(TableBodyCell, { children: branch.snapshotID }), _jsx(TableBodyCell, { children: branch.numSnapshots }), _jsx(TableBodyCell, { children: branch.protected ? 'Yes' : '—' })] }, branch.name));
                     }) }), _jsx(DeleteBranchModal, { isOpen: isOpenDestroyModal, onClose: () => {
                         setIsOpenDestroyModal(false);
                         setBranchId('');

package/pages/Branches/index.js

@@ -33,6 +33,9 @@ const useStyles = makeStyles({
         transform: 'translate(-50%, -50%)',
     },
 }, { index: 1 });
+// listRefreshIntervalMs is how often the branch list is silently refreshed so background
+// auto-deletion does not leave stale rows in the table.
+const listRefreshIntervalMs = 30000;
 export const Branches = observer(({ instanceId }) => {
     const host = useHost();
     const stores = useStores();
@@ -51,7 +54,13 @@ export const Branches = observer(({ instanceId }) => {
     };
     useEffect(() => {
         loadBranches();
-    }, []);
+        const intervalId = setInterval(() => {
+            getBranches(instanceId, true).then((response) => {
+                response && setBranches(response);
+            });
+        }, listRefreshIntervalMs);
+        return () => clearInterval(intervalId);
+    }, [instanceId]);
     if (!instance && !isBranchesLoading)
         return _jsx(_Fragment, {});
     if (getBranchesError)

package/pages/Clone/Status/index.js

@@ -21,6 +21,9 @@ const useStyles = makeStyles({
     },
     message: {
         margin: '4px 0 0 0',
+        // A failed upgrade appends up to 20 lines of pg_upgrade log to the WARNING message, and
+        // HTML would otherwise collapse them into one unreadable run of text.
+        whiteSpace: 'pre-wrap',
     },
     errorMessage: {
         marginTop: '8px',

package/pages/Clone/index.js

@@ -18,6 +18,7 @@ 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 { UpgradeCloneModal } from '@postgres.ai/shared/components/UpgradeCloneModal';
 import { Spinner } from '@postgres.ai/shared/components/Spinner';
 import { round } from '@postgres.ai/shared/utils/numbers';
 import { Tooltip } from '@postgres.ai/shared/components/Tooltip';
@@ -172,11 +173,14 @@ export const Clone = observer((props) => {
     const [isOpenRestrictionModal, setIsOpenRestrictionModal] = useState(false);
     const [isOpenDestroyModal, setIsOpenDestroyModal] = useState(false);
     const [isOpenResetModal, setIsOpenResetModal] = useState(false);
+    const [isOpenUpgradeModal, setIsOpenUpgradeModal] = useState(false);
     // Initial loading data.
     useEffect(() => {
         stores.main.load(props.instanceId, props.cloneId);
     }, []);
-    const { instance, snapshots, clone, isResettingClone, isDestroyingClone, isReloading, isUpdatingClone, isCloneStable, } = stores.main;
+    // Stop clone status polling on unmount.
+    useEffect(() => () => stores.main.stopPolling(), []);
+    const { instance, snapshots, clone, isResettingClone, isUpgradingClone, isDestroyingClone, isReloading, isUpdatingClone, isCloneStable, isUpgradeSupported, upgradeTargetVersion, } = 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, hideInstanceTabs: props.hideBranchingFeatures }) })] }));
     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);
@@ -189,6 +193,9 @@ export const Clone = observer((props) => {
     // Clone reset.
     const requestResetClone = () => setIsOpenResetModal(true);
     const resetClone = (snapshotId) => stores.main.resetClone(snapshotId);
+    // Clone major upgrade.
+    const requestUpgradeClone = () => setIsOpenUpgradeModal(true);
+    const upgradeClone = (dockerImage) => stores.main.upgradeClone(dockerImage);
     // Clone destroy.
     const requestDestroyClone = () => {
         if (clone.protected) {
@@ -254,12 +261,13 @@ export const Clone = observer((props) => {
     const hasConnectionInfo = sshPortForwardingUrl || jdbcConnectionStr || psqlConnectionStr;
     // Controls.
     const isDisabledControls = isResettingClone ||
+        isUpgradingClone ||
         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 }))] }), !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: (_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)
+    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 }))] }), isUpgradeSupported && (_jsxs(Button, { variant: "contained", color: "primary", onClick: requestUpgradeClone, disabled: isDisabledControls, title: 'Upgrade clone to a newer PostgreSQL major version', className: classes.actionButton, children: ["Upgrade clone", isUpgradingClone && (_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 }))), stores.main.upgradeCloneError && (_jsx(ErrorStub, { title: 'Upgrade error', message: stores.main.upgradeCloneError, 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 })] }), clone.dbVersion && (_jsxs(_Fragment, { children: [_jsx("br", {}), _jsxs("div", { children: [_jsx("p", { children: _jsx("strong", { children: "PostgreSQL version" }) }), _jsx("p", { className: classes.text, children: clone.dbVersion })] })] })), _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)
@@ -291,5 +299,5 @@ export const Clone = observer((props) => {
                                                 { value: 'current', children: `Protected until ${clone.protectedTillDate.toLocaleString()}` },
                                                 ...protectionOptions,
                                             ]
-                                            : protectionOptions, value: getCurrentProtectionValue(), onChange: handleProtectionChange, disabled: isDisabledControls, style: { minWidth: 200 } }), 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 })] })] })] }));
+                                            : protectionOptions, value: getCurrentProtectionValue(), onChange: handleProtectionChange, disabled: isDisabledControls, style: { minWidth: 200 } }), 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 }), isUpgradeSupported && upgradeTargetVersion && (_jsx(UpgradeCloneModal, { isOpen: isOpenUpgradeModal, onClose: () => setIsOpenUpgradeModal(false), clone: clone, targetVersion: upgradeTargetVersion, onUpgradeClone: upgradeClone }))] })] })] }));
 });

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

@@ -1,6 +1,7 @@
 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 { UpgradeClone } from '@postgres.ai/shared/types/api/endpoints/upgradeClone';
 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';
@@ -11,6 +12,7 @@ export declare type Api = SnapshotsApi & {
     getInstance: GetInstance;
     getClone: GetClone;
     resetClone: ResetClone;
+    upgradeClone?: UpgradeClone;
     destroyClone: DestroyClone;
     updateClone: UpdateClone;
     initWS?: InitWS;
@@ -27,20 +29,26 @@ export declare class MainStore {
     readonly snapshots: SnapshotsStore;
     isResettingClone: boolean;
     resetCloneError: string | null;
+    isUpgradingClone: boolean;
+    upgradeCloneError: string | null;
     isDestroyingClone: boolean;
     destroyCloneError: string | null;
     isUpdatingClone: boolean;
     updateCloneError: string | null;
     isReloading: boolean;
-    private cloneUpdateTimeout?;
+    private readonly poller;
     private readonly api;
     constructor(api: Api);
+    get isUpgradeSupported(): boolean;
+    get upgradeTargetVersion(): number | undefined;
     get isCloneStable(): boolean;
     load: (instanceId: string, cloneId: string) => Promise<boolean | undefined>;
     reload: () => Promise<boolean | undefined>;
+    stopPolling: () => void;
     private loadInstance;
     private loadClone;
     resetClone: (snapshotId: string) => Promise<boolean>;
+    upgradeClone: (dockerImage?: string) => Promise<boolean>;
     destroyClone: () => Promise<boolean>;
     updateCloneProtection: (durationMinutes: number | null) => Promise<void>;
 }

package/pages/Clone/stores/Main.js

@@ -7,8 +7,8 @@
 import { makeAutoObservable } from 'mobx';
 import { SnapshotsStore, } from '@postgres.ai/shared/stores/Snapshots';
 import { checkIsCloneStable } from '@postgres.ai/shared/utils/clone';
+import { ClonePoller } from '@postgres.ai/shared/utils/clonePoller';
 import { getTextFromUnknownApiError } from '@postgres.ai/shared/utils/api';
-const UNSTABLE_CLONE_UPDATE_TIMEOUT = 1000;
 export class MainStore {
     constructor(api) {
         this.instance = null;
@@ -17,12 +17,16 @@ export class MainStore {
         this.cloneError = null;
         this.isResettingClone = false;
         this.resetCloneError = null;
+        this.isUpgradingClone = false;
+        this.upgradeCloneError = null;
         this.isDestroyingClone = false;
         this.destroyCloneError = null;
         this.isUpdatingClone = false;
         this.updateCloneError = null;
         this.isReloading = false;
+        this.poller = new ClonePoller();
         this.load = async (instanceId, cloneId) => {
+            this.poller.start();
             const [isInstanceOk, isCloneOk, isSnapshotsLoaded] = await Promise.all([
                 this.loadInstance(instanceId),
                 this.loadClone(instanceId, cloneId),
@@ -38,6 +42,7 @@ export class MainStore {
             this.isReloading = false;
             return isSuccess;
         };
+        this.stopPolling = () => this.poller.stop();
         this.loadInstance = async (instanceId) => {
             const { response, error } = await this.api.getInstance({
                 instanceId,
@@ -59,12 +64,14 @@ export class MainStore {
             return Boolean(response);
         };
         this.loadClone = async (instanceId, cloneId) => {
-            window.clearTimeout(this.cloneUpdateTimeout);
+            if (this.poller.isStopped)
+                return false;
+            this.poller.cancel();
             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);
+                    this.poller.scheduleNext(() => this.loadClone(instanceId, cloneId));
             }
             if (error) {
                 if (error.status === 404) {
@@ -97,6 +104,23 @@ export class MainStore {
             this.isResettingClone = false;
             return Boolean(response);
         };
+        this.upgradeClone = async (dockerImage) => {
+            if (!this.instance || !this.clone || !this.api.upgradeClone)
+                return false;
+            this.isUpgradingClone = true;
+            this.upgradeCloneError = null;
+            const { response, error } = await this.api.upgradeClone({
+                instanceId: this.instance.id,
+                cloneId: this.clone.id,
+                dockerImage,
+            });
+            if (response)
+                await this.loadClone(this.instance.id, this.clone.id);
+            if (error)
+                this.upgradeCloneError = await getTextFromUnknownApiError(error);
+            this.isUpgradingClone = false;
+            return Boolean(response);
+        };
         this.destroyClone = async () => {
             if (!this.instance || !this.clone)
                 return false;
@@ -139,6 +163,19 @@ export class MainStore {
         this.api = api;
         makeAutoObservable(this);
     }
+    // The closed Platform app implements the same Api and may not provide the endpoint, and the
+    // engine only accepts an upgrade once one is configured, so the action is hidden rather than
+    // offered and then refused.
+    get isUpgradeSupported() {
+        return Boolean(this.api.upgradeClone) && Boolean(this.upgradeTargetVersion);
+    }
+    // The major an upgrade lands on. It follows from the instance's upgrade image, so the UI reads
+    // it instead of asking for one.
+    get upgradeTargetVersion() {
+        var _a, _b;
+        const cloneUpgrade = (_b = (_a = this.instance) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.cloneUpgrade;
+        return (cloneUpgrade === null || cloneUpgrade === void 0 ? void 0 : cloneUpgrade.available) ? cloneUpgrade.targetVersion : undefined;
+    }
     get isCloneStable() {
         if (!this.clone)
             return false;

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

@@ -38,6 +38,9 @@ export declare class MainStore {
         logicalSize: number;
         message: string;
         branch: string;
+        protected: boolean;
+        protectedTill?: string | undefined;
+        deleteAt?: string | undefined;
     }[] | null | undefined>;
 }
 export {};

package/pages/CreateClone/index.js

@@ -122,6 +122,8 @@ export const CreateClone = observer((props) => {
             return;
         history.push(props.routes.clone(stores.main.clone.id));
     }, [stores.main.clone, stores.main.isCloneStable]);
+    // Stop clone status polling on unmount.
+    useEffect(() => () => stores.main.stopPolling(), []);
     const headRendered = (_jsxs(_Fragment, { children: [_jsx("style", { children: 'p { margin: 0; }' }), props.elements.breadcrumbs, _jsx(SectionTitle, { tag: "h1", level: 1, text: "Create clone", className: styles.pageTitle, children: _jsx(InstanceTabs, { tab: TABS_INDEX.CLONES, isPlatform: props.isPlatform, instanceId: props.instanceId, hasLogs: props.api.initWS !== undefined, hideInstanceTabs: props.hideBranchingFeatures }) })] }));
     // Initial loading spinner.
     if (!stores.main.instance || isLoadingSnapshots)

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

@@ -23,7 +23,7 @@ export declare class MainStore {
     getSnapshotsError: Error | null;
     clone: Clone | null;
     cloneError: string | null;
-    private cloneUpdateTimeout?;
+    private readonly poller;
     private readonly api;
     readonly snapshots?: SnapshotsStore;
     constructor(api: MainStoreApi);
@@ -44,6 +44,10 @@ export declare class MainStore {
         logicalSize: number;
         message: string;
         branch: string;
+        protected: boolean;
+        protectedTill?: string | undefined;
+        deleteAt?: string | undefined;
     }[] | null | undefined>;
+    stopPolling: () => void;
     private updateCloneUntilStable;
 }

package/pages/CreateClone/stores/Main.js

@@ -2,7 +2,7 @@ import { makeAutoObservable } from 'mobx';
 import { SnapshotsStore, } from '@postgres.ai/shared/stores/Snapshots';
 import { getTextFromUnknownApiError } from '@postgres.ai/shared/utils/api';
 import { checkIsCloneStable } from '@postgres.ai/shared/utils/clone';
-const UNSTABLE_CLONE_UPDATE_TIMEOUT = 1000;
+import { ClonePoller } from '@postgres.ai/shared/utils/clonePoller';
 export class MainStore {
     constructor(api) {
         this.instance = null;
@@ -11,6 +11,7 @@ export class MainStore {
         this.getSnapshotsError = null;
         this.clone = null;
         this.cloneError = null;
+        this.poller = new ClonePoller();
         this.load = async (instanceId) => {
             var _a, _b;
             const [instance, isLoadedSnapshots] = await Promise.all([
@@ -26,6 +27,7 @@ export class MainStore {
         this.createClone = async (data) => {
             if (!this.instance)
                 return false;
+            this.poller.start();
             const { response, error } = await this.api.createClone({
                 ...data,
                 instanceId: this.instance.id,
@@ -61,13 +63,16 @@ export class MainStore {
                 this.getSnapshotsError = await error.json().then((err) => err);
             return response;
         };
+        this.stopPolling = () => this.poller.stop();
         this.updateCloneUntilStable = async (args) => {
-            window.clearTimeout(this.cloneUpdateTimeout);
+            if (this.poller.isStopped)
+                return;
+            this.poller.cancel();
             const { response, error } = await this.api.getClone(args);
             if (response) {
                 this.clone = response;
                 if (!this.isCloneStable)
-                    this.cloneUpdateTimeout = window.setTimeout(() => this.updateCloneUntilStable(args), UNSTABLE_CLONE_UPDATE_TIMEOUT);
+                    this.poller.scheduleNext(() => this.updateCloneUntilStable(args));
             }
             if (error)
                 this.cloneError = await error.json().then((err) => (err === null || err === void 0 ? void 0 : err.message) || err);

package/pages/Instance/Configuration/PhysicalMode/EnvsEditor/index.d.ts

@@ -7,5 +7,7 @@ declare type Props = {
     disabled?: boolean;
     keyErrors?: (string | undefined)[];
 };
+export declare const MASKED_ENV_VALUE = "****";
+export declare const isMaskedEnvValue: (value: string) => boolean;
 export declare const EnvsEditor: ({ envs, onChange, suggestions, disabled, keyErrors, }: Props) => JSX.Element;
 export {};