@postgres.ai/shared 4.1.2 → 4.2.0

package/dist/utils/date.js

@@ -5,23 +5,23 @@
  *--------------------------------------------------------------------------
  */
 import { parse, startOfDay, isSameDay, startOfMonth, startOfWeek, endOfMonth, endOfWeek, differenceInDays, addDays, addMonths, isSameMonth, format, formatDistanceToNowStrict, } from 'date-fns';
+const compactDatePattern = /^(\d{4})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})$/;
+// formatDateToISO converts a compact UTC timestamp ('20060102150405') to RFC3339 ('2006-01-02T15:04:05Z').
+// The value is a UTC wall-clock, so it must never be interpreted in the browser timezone.
 export const formatDateToISO = (dateString) => {
-    // Handle empty or invalid date strings
-    if (!dateString || dateString.trim() === '') {
+    var _a;
+    const parts = compactDatePattern.exec((_a = dateString === null || dateString === void 0 ? void 0 : dateString.trim()) !== null && _a !== void 0 ? _a : '');
+    if (!parts) {
         return '';
     }
-    try {
-        const parsedDate = parse(dateString, 'yyyyMMddHHmmss', new Date());
-        // Additional validation of parsed date
-        if (!isValidDate(parsedDate) || isNaN(parsedDate.getTime())) {
-            return '';
-        }
-        return format(parsedDate, "yyyy-MM-dd'T'HH:mm:ssXXX");
-    }
-    catch (error) {
-        // Return empty string for invalid date formats
+    const [compact, year, month, day, hours, minutes, seconds] = parts;
+    const parsedDate = new Date(Date.UTC(+year, +month - 1, +day, +hours, +minutes, +seconds));
+    if (!isValidDate(parsedDate)) {
         return '';
     }
+    const isoDate = parsedDate.toISOString().replace(/\.\d+Z$/, 'Z');
+    // reject values rolled over by Date.UTC, e.g. month 13 or hour 25.
+    return isoDate.replace(/[-:TZ]/g, '') === compact ? isoDate : '';
 };
 // parseDate parses date of both format: '2006-01-02 15:04:05 UTC' and `2006-01-02T15:04:05Z` (RFC3339).
 export const parseDate = (dateStr) => parse(dateStr.replace(' UTC', 'Z').replace('T', ' '), 'yyyy-MM-dd HH:mm:ssX', new Date());

package/dist/utils/protection.d.ts

@@ -0,0 +1,5 @@
+export declare const protectionOptions: {
+    value: string;
+    children: string;
+}[];
+export declare const getProtectionSelectValue: (isProtected: boolean, protectedTillDate: Date | null) => string;

package/dist/utils/protection.js

@@ -0,0 +1,23 @@
+// protectionOptions lists the deletion-protection choices shared by the branch and snapshot
+// detail pages: no protection, a set of bounded durations, and forever. The values are the
+// protectionDurationMinutes passed to the update endpoints ('0' means forever, 'none' clears
+// protection).
+export const protectionOptions = [
+    { value: 'none', children: 'No protection' },
+    { value: '60', children: '1 hour' },
+    { value: '720', children: '12 hours' },
+    { value: '1440', children: '1 day' },
+    { value: '4320', children: '3 days' },
+    { value: '10080', children: '7 days' },
+    { value: '43200', children: '30 days' },
+    { value: '0', children: 'Forever' },
+];
+// getProtectionSelectValue maps an entity's protection state to the Select value: 'none' when
+// unprotected, 'current' when protected until a specific time, '0' when protected forever.
+export const getProtectionSelectValue = (isProtected, protectedTillDate) => {
+    if (!isProtected)
+        return 'none';
+    if (!protectedTillDate)
+        return '0';
+    return 'current';
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@postgres.ai/shared",
-  "version": "4.1.2",
+  "version": "4.2.0",
   "scripts": {
     "build": "tsc -p tsconfig.build.json && node scripts/copy-assets.js",
     "pack": "node scripts/pack.js"
@@ -17,7 +17,7 @@
     "@material-ui/styles": "^4.11.4",
     "@monaco-editor/react": "^4.4.5",
     "@mui/material": "^5.10.12",
-    "@types/node": "^12.20.33",
+    "@types/node": "^22.0.0",
     "@types/react": "^17.0.30",
     "@types/react-dom": "^17.0.10",
     "@types/react-router": "^5.1.17",

package/pages/Branches/Branch/index.tsx

@@ -23,8 +23,14 @@ import {
 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'
@@ -96,6 +102,13 @@ const useStyles = makeStyles(
     summary: {
       marginTop: 20,
     },
+    protectionControl: {
+      display: 'flex',
+      alignItems: 'center',
+      marginTop: '8px',
+      marginBottom: '8px',
+      maxWidth: 525,
+    },
     text: {
       marginTop: '4px',
     },
@@ -156,6 +169,9 @@ export const BranchesPage = observer((props: Props) => {
     load,
     isReloading,
     isBranchesLoading,
+    isUpdatingBranch,
+    updateBranchProtection,
+    updateBranchError,
     getBranchesError,
     snapshotListError,
     getBranchError,
@@ -163,6 +179,19 @@ export const BranchesPage = observer((props: Props) => {
 
   const hasBranchError = getBranchesError || getBranchError || snapshotListError
 
+  const protectedTillDate = branch?.protectedTill
+    ? parseDate(branch.protectedTill)
+    : null
+
+  const handleProtectionChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value
+    updateBranchProtection(
+      props.branchId,
+      props.instanceId,
+      value === 'none' ? null : parseInt(value, 10),
+    )
+  }
+
   const branchLogLength = snapshotList?.reduce((acc, snapshot) => {
     if (snapshot?.branch !== null) {
       return acc + snapshot.branch?.length
@@ -290,6 +319,47 @@ export const BranchesPage = observer((props: Props) => {
                 {branch?.parent}
               </p>
             </div>
+            <div className={classes.summary}>
+              <p>
+                <strong>Deletion protection</strong>
+              </p>
+              <div className={classes.protectionControl}>
+                <Select
+                  label="Deletion protection"
+                  items={
+                    branch?.protected && protectedTillDate
+                      ? [
+                          {
+                            value: 'current',
+                            children: `Protected until ${protectedTillDate.toLocaleString()}`,
+                          },
+                          ...protectionOptions,
+                        ]
+                      : protectionOptions
+                  }
+                  value={getProtectionSelectValue(
+                    Boolean(branch?.protected),
+                    protectedTillDate,
+                  )}
+                  onChange={handleProtectionChange}
+                  disabled={isReloading || isUpdatingBranch}
+                  fullWidth
+                />
+                {isUpdatingBranch && (
+                  <Spinner size="sm" className={classes.spinner} />
+                )}
+              </div>
+              <p className={classes.text}>
+                Protected branches cannot be deleted manually or automatically.
+              </p>
+              {updateBranchError && (
+                <ErrorStub
+                  title="Update error"
+                  message={updateBranchError}
+                  className={classes.marginTop}
+                />
+              )}
+            </div>
             <br />
             <p>
               <strong>Snapshot info</strong>

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

@@ -10,11 +10,13 @@ import { makeAutoObservable } from 'mobx'
 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'
+import { getTextFromUnknownApiError } from '@postgres.ai/shared/utils/api'
 
 type Error = {
   title?: string
@@ -25,6 +27,7 @@ export type Api = {
   getBranches: GetBranches
   deleteBranch: DeleteBranch
   getSnapshotList: GetSnapshotList
+  updateBranch?: UpdateBranch
   initWS?: InitWS
 }
 
@@ -35,6 +38,8 @@ export class MainStore {
 
   isReloading = false
   isBranchesLoading = false
+  isUpdatingBranch = false
+  updateBranchError: string | null = null
 
   branches: Branch[] | null = null
   branch: Branch | null = null
@@ -99,6 +104,41 @@ export class MainStore {
     return !!currentBranch
   }
 
+  updateBranchProtection = async (
+    branchName: string,
+    instanceId: string,
+    durationMinutes: number | null,
+  ) => {
+    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 ?? 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
+  }
+
   deleteBranch = async (branchName: string, instanceId: string) => {
     if (!branchName) return
 

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

@@ -134,6 +134,7 @@ export const BranchesTable = ({
             <TableHeaderCell>Data state time</TableHeaderCell>
             <TableHeaderCell>Latest Snapshot ID</TableHeaderCell>
             <TableHeaderCell>Number of snapshots</TableHeaderCell>
+            <TableHeaderCell>Protected</TableHeaderCell>
           </TableRow>
         </TableHead>
         <TableBody>
@@ -170,6 +171,7 @@ export const BranchesTable = ({
                 </TableBodyCell>
                 <TableBodyCell>{branch.snapshotID}</TableBodyCell>
                 <TableBodyCell>{branch.numSnapshots}</TableBodyCell>
+                <TableBodyCell>{branch.protected ? 'Yes' : '—'}</TableBodyCell>
               </TableRow>
             )
           })}

package/pages/Branches/index.tsx

@@ -41,6 +41,10 @@ const useStyles = makeStyles(
   { 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 = 30_000
+
 interface BranchesProps {
   instanceId: string
 }
@@ -72,7 +76,15 @@ export const Branches: React.FC<BranchesProps> = observer(({ instanceId }) => {
 
   useEffect(() => {
     loadBranches()
-  }, [])
+
+    const intervalId = setInterval(() => {
+      getBranches(instanceId, true).then((response) => {
+        response && setBranches(response)
+      })
+    }, listRefreshIntervalMs)
+
+    return () => clearInterval(intervalId)
+  }, [instanceId])
 
   if (!instance && !isBranchesLoading) return <></>
 

package/pages/Clone/Status/index.tsx

@@ -35,6 +35,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.tsx

@@ -29,6 +29,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'
@@ -199,21 +200,28 @@ export const Clone = observer((props: 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)
   }, [])
 
+  // 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 = (
@@ -270,6 +278,12 @@ export const Clone = observer((props: Props) => {
 
   const resetClone = (snapshotId: string) => stores.main.resetClone(snapshotId)
 
+  // Clone major upgrade.
+  const requestUpgradeClone = () => setIsOpenUpgradeModal(true)
+
+  const upgradeClone = (dockerImage?: string) =>
+    stores.main.upgradeClone(dockerImage)
+
   // Clone destroy.
   const requestDestroyClone = () => {
     if (clone.protected) {
@@ -343,6 +357,7 @@ export const Clone = observer((props: Props) => {
   // Controls.
   const isDisabledControls =
     isResettingClone ||
+    isUpgradingClone ||
     isDestroyingClone ||
     isReloading ||
     isUpdatingClone ||
@@ -367,6 +382,21 @@ export const Clone = observer((props: Props) => {
                 <Spinner size="sm" className={classes.spinner} />
               )}
             </Button>
+            {isUpgradeSupported && (
+              <Button
+                variant="contained"
+                color="primary"
+                onClick={requestUpgradeClone}
+                disabled={isDisabledControls}
+                title={'Upgrade clone to a newer PostgreSQL major version'}
+                className={classes.actionButton}
+              >
+                Upgrade clone
+                {isUpgradingClone && (
+                  <Spinner size="sm" className={classes.spinner} />
+                )}
+              </Button>
+            )}
             <Button
               variant="contained"
               color="primary"
@@ -413,6 +443,13 @@ export const Clone = observer((props: Props) => {
                 className={classes.errorStub}
               />
             ))}
+          {stores.main.upgradeCloneError && (
+            <ErrorStub
+              title={'Upgrade error'}
+              message={stores.main.upgradeCloneError}
+              className={classes.errorStub}
+            />
+          )}
           {!props.hideBranchingFeatures && <div>
             <p>
               <strong>Branch</strong>
@@ -451,6 +488,17 @@ export const Clone = observer((props: Props) => {
 
             <Status rawClone={clone} className={classes.status} />
           </div>
+          {clone.dbVersion && (
+            <>
+              <br />
+              <div>
+                <p>
+                  <strong>PostgreSQL version</strong>
+                </p>
+                <p className={classes.text}>{clone.dbVersion}</p>
+              </div>
+            </>
+          )}
           <br />
           <div>
             <p>
@@ -749,6 +797,16 @@ export const Clone = observer((props: Props) => {
             onResetClone={resetClone}
             version={instance.state?.engine.version}
           />
+
+          {isUpgradeSupported && upgradeTargetVersion && (
+            <UpgradeCloneModal
+              isOpen={isOpenUpgradeModal}
+              onClose={() => setIsOpenUpgradeModal(false)}
+              clone={clone}
+              targetVersion={upgradeTargetVersion}
+              onUpgradeClone={upgradeClone}
+            />
+          )}
         </>
       </div>
     </>

package/pages/Clone/stores/Main.ts

@@ -10,6 +10,7 @@ import { makeAutoObservable } from 'mobx'
 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 {
@@ -19,15 +20,15 @@ import {
 import { Clone } from '@postgres.ai/shared/types/api/entities/clone'
 import { Instance } from '@postgres.ai/shared/types/api/entities/instance'
 import { checkIsCloneStable } from '@postgres.ai/shared/utils/clone'
+import { ClonePoller } from '@postgres.ai/shared/utils/clonePoller'
 import { getTextFromUnknownApiError } from '@postgres.ai/shared/utils/api'
 import { InitWS } from '@postgres.ai/shared/types/api/endpoints/initWS'
 
-const UNSTABLE_CLONE_UPDATE_TIMEOUT = 1000
-
 export type Api = SnapshotsApi & {
   getInstance: GetInstance
   getClone: GetClone
   resetClone: ResetClone
+  upgradeClone?: UpgradeClone
   destroyClone: DestroyClone
   updateClone: UpdateClone
   initWS?: InitWS
@@ -50,6 +51,9 @@ export class MainStore {
   isResettingClone = false
   resetCloneError: string | null = null
 
+  isUpgradingClone = false
+  upgradeCloneError: string | null = null
+
   isDestroyingClone = false
   destroyCloneError: string | null = null
 
@@ -58,7 +62,7 @@ export class MainStore {
 
   isReloading = false
 
-  private cloneUpdateTimeout?: number
+  private readonly poller = new ClonePoller()
 
   private readonly api: Api
 
@@ -69,12 +73,29 @@ export class MainStore {
     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() {
+    const cloneUpgrade = this.instance?.state?.cloneUpgrade
+
+    return cloneUpgrade?.available ? cloneUpgrade.targetVersion : undefined
+  }
+
   get isCloneStable() {
     if (!this.clone) return false
     return checkIsCloneStable(this.clone)
   }
 
   load = async (instanceId: string, cloneId: string) => {
+    this.poller.start()
+
     const [isInstanceOk, isCloneOk, isSnapshotsLoaded] = await Promise.all([
       this.loadInstance(instanceId),
       this.loadClone(instanceId, cloneId),
@@ -92,6 +113,8 @@ export class MainStore {
     return isSuccess
   }
 
+  stopPolling = () => this.poller.stop()
+
   private loadInstance = async (instanceId: string) => {
     const { response, error } = await this.api.getInstance({
       instanceId,
@@ -116,7 +139,9 @@ export class MainStore {
   }
 
   private loadClone = async (instanceId: string, cloneId: string) => {
-    window.clearTimeout(this.cloneUpdateTimeout)
+    if (this.poller.isStopped) return false
+
+    this.poller.cancel()
 
     const { response, error } = await this.api.getClone({ instanceId, cloneId })
 
@@ -124,10 +149,7 @@ export class MainStore {
       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) {
@@ -166,6 +188,27 @@ export class MainStore {
     return Boolean(response)
   }
 
+  upgradeClone = async (dockerImage?: string) => {
+    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)
+  }
+
   destroyClone = async () => {
     if (!this.instance || !this.clone) return false
 

package/pages/CreateClone/index.tsx

@@ -166,6 +166,9 @@ export const CreateClone = observer((props: Props) => {
     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 = (
     <>
       {/* //TODO: make global reset styles. */}

package/pages/CreateClone/stores/Main.ts

@@ -13,12 +13,11 @@ import {
 } from '@postgres.ai/shared/stores/Snapshots'
 import { getTextFromUnknownApiError } from '@postgres.ai/shared/utils/api'
 import { checkIsCloneStable } from '@postgres.ai/shared/utils/clone'
+import { ClonePoller } from '@postgres.ai/shared/utils/clonePoller'
 
 import { FormValues } from '../useForm'
 import { InitWS } from '@postgres.ai/shared/types/api/endpoints/initWS'
 
-const UNSTABLE_CLONE_UPDATE_TIMEOUT = 1000
-
 export type MainStoreApi = SnapshotsApi & {
   getInstance: GetInstance
   createClone: CreateClone
@@ -37,7 +36,7 @@ export class MainStore {
   clone: Clone | null = null
   cloneError: string | null = null
 
-  private cloneUpdateTimeout?: number
+  private readonly poller = new ClonePoller()
 
   private readonly api: MainStoreApi
 
@@ -73,6 +72,8 @@ export class MainStore {
   createClone = async (data: FormValues) => {
     if (!this.instance) return false
 
+    this.poller.start()
+
     const { response, error } = await this.api.createClone({
       ...data,
       instanceId: this.instance.id,
@@ -115,11 +116,15 @@ export class MainStore {
     return response
   }
 
+  stopPolling = () => this.poller.stop()
+
   private updateCloneUntilStable = async (args: {
     instanceId: string
     cloneId: string
   }) => {
-    window.clearTimeout(this.cloneUpdateTimeout)
+    if (this.poller.isStopped) return
+
+    this.poller.cancel()
 
     const { response, error } = await this.api.getClone(args)
 
@@ -127,10 +132,7 @@ export class MainStore {
       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)