chore: have an update for when a post upgrade backup is in progress (#27591)

* chore: have an update for when a post upgrade backup is in progress

* chore: update wording

* fix: prettier
This commit is contained in:
angelico authored and GitHub committed 2024-07-01 14:29:46 +08:00
1 parent 603461545c
commit d47de9d0b9
1 file changed
+25 -6
@@ -1,5 +1,5 @@
import * as Tooltip from '@radix-ui/react-tooltip'
import { DatabaseUpgradeStatus } from '@supabase/shared-types/out/events'
import { DatabaseUpgradeProgress, DatabaseUpgradeStatus } from '@supabase/shared-types/out/events'
import dayjs from 'dayjs'
import Link from 'next/link'
import { useState } from 'react'
@@ -46,6 +46,10 @@ const UpgradingState = () => {
const isFailed = status === DatabaseUpgradeStatus.Failed
const isCompleted = status === DatabaseUpgradeStatus.Upgraded
const isPerformingFullPhysicalBackup =
status === DatabaseUpgradeStatus.Upgrading &&
progress === DatabaseUpgradeProgress.CompletedUpgrade
const initiatedAtUTC = dayjs.utc(initiated_at ?? 0).format('DD MMM YYYY HH:mm:ss')
const initiatedAt = dayjs
.utc(initiated_at ?? 0)
@@ -123,11 +127,26 @@ const UpgradingState = () => {
<IconCircle className="text-foreground-lighter" size={50} strokeWidth={1.5} />
</div>
<div className="space-y-2">
<p className="text-center">Upgrading in progress</p>
<p className="text-sm text-center text-foreground-light">
Upgrades can take from a few minutes up to several hours depending on the size
of your database. Your project will be offline while it is being upgraded.
</p>
{isPerformingFullPhysicalBackup ? (
<div>
<p className="text-center">Performing a full backup</p>
<p className="text-sm text-center text-foreground-light">
Upgrade is now complete, and your project is online. A full backup is now
being performed to ensure that there is a proper base backup available
post-upgrade. This can take from a few minutes up to several hours depending
on the size of your database.
</p>
</div>
) : (
<div>
<p className="text-center">Upgrading in progress</p>
<p className="text-sm text-center text-foreground-light">
Upgrades can take from a few minutes up to several hours depending on the
size of your database. Your project will be offline while it is being
upgraded.
</p>
</div>
)}
<div
className="!mt-4 !mb-2 py-3 px-4 transition-all overflow-hidden border rounded relative"