feat: support for restarting and resizing statuses (supabase#29881)

* start using restarting and resizing statuses * pretty 1 * Minor updates * Small revert, to prevent conflicts * PRETTY --------- Co-authored-by: Joshen Lim <joshenlimek@gmail.com>

Author: delgado3d

apps/studio/components/interfaces/Home/ProjectList/ProjectCard.utils.ts

@@ -20,6 +20,9 @@ export const inferProjectStatus = (project: ProjectInfo) => {
  case PROJECT_STATUS.RESTARTING:
  status = 'isRestarting'
  break
+ case PROJECT_STATUS.RESIZING:
+ status = 'isResizing'
+ break
  case PROJECT_STATUS.RESTORING:
  status = 'isRestoring'
  break
@@ -43,6 +46,7 @@ export type InferredProjectStatus =
  | 'isPaused'
  | 'isPauseFailed'
  | 'isRestarting'
+ | 'isResizing'
  | 'isRestoring'
  | 'isRestoreFailed'
  | 'isComingUp'

apps/studio/components/interfaces/Home/ProjectList/ProjectCardStatus.tsx

@@ -1,9 +1,16 @@
-import * as Tooltip from '@radix-ui/react-tooltip'
+import { AlertTriangle, Info, PauseCircle, RefreshCcw } from 'lucide-react'
+
 import { RESOURCE_WARNING_MESSAGES } from 'components/ui/ResourceExhaustionWarningBanner/ResourceExhaustionWarningBanner.constants'
 import { getWarningContent } from 'components/ui/ResourceExhaustionWarningBanner/ResourceExhaustionWarningBanner.utils'
 import type { ResourceWarning } from 'data/usage/resource-warnings-query'
-import { AlertTriangle, Info, PauseCircle, RefreshCcw } from 'lucide-react'
-import { Alert_Shadcn_, AlertTitle_Shadcn_, cn } from 'ui'
+import {
+ Alert_Shadcn_,
+ AlertTitle_Shadcn_,
+ cn,
+ Tooltip_Shadcn_,
+ TooltipContent_Shadcn_,
+ TooltipTrigger_Shadcn_,
+} from 'ui'
 import { InferredProjectStatus } from './ProjectCard.utils'
 
 export interface ProjectCardWarningsProps {
@@ -50,6 +57,7 @@ export const ProjectCardStatus = ({
  if (projectStatus === 'isPaused') return 'Project is paused'
  if (projectStatus === 'isPausing') return 'Project is pausing'
  if (projectStatus === 'isRestarting') return 'Project is restarting'
+ if (projectStatus === 'isResizing') return 'Project is resizing'
  if (projectStatus === 'isComingUp') return 'Project is coming up'
  if (projectStatus === 'isRestoring') return 'Project is restoring'
  if (projectStatus === 'isUpgrading') return 'Project is upgrading'
@@ -67,14 +75,21 @@ export const ProjectCardStatus = ({
  }
 
  const getDescription = () => {
- if (projectStatus === 'isPaused') return 'This project will not accept requests until resumed'
- if (projectStatus === 'isPausing') return 'The pause process will complete in a few minutes'
- if (projectStatus === 'isRestarting') return 'Your project will be ready in a few minutes'
- if (projectStatus === 'isComingUp') return 'Your project will be ready in a few minutes'
- if (projectStatus === 'isRestoring') return 'Your project will be ready in a few minutes'
- if (projectStatus === 'isUpgrading') return 'Your project will be ready in a few minutes'
- if (projectStatus === 'isRestoreFailed') return 'Please contact support for assistance'
- if (projectStatus === 'isPauseFailed') return 'Please contact support for assistance'
+ switch (projectStatus) {
+ case 'isPaused':
+ return 'This project will not accept requests until resumed'
+ case 'isPausing':
+ return 'The pause process will complete in a few minutes'
+ case 'isRestarting':
+ case 'isResizing':
+ case 'isComingUp':
+ case 'isRestoring':
+ case 'isUpgrading':
+ return 'Your project will be ready in a few minutes'
+ case 'isRestoreFailed':
+ case 'isPauseFailed':
+ return 'Please contact support for assistance'
+ }
 
  if (!resourceWarnings) return undefined
 
@@ -111,35 +126,23 @@ export const ProjectCardStatus = ({
  !isCritical ? '[&>svg]:text-foreground [&>svg]:bg-surface-100' : ''
  )}
  >
- {projectStatus === 'isPaused' || projectStatus === 'isPausing' ? (
+ {['isPaused', 'isPausing'].includes(projectStatus ?? '') ? (
  <PauseCircle strokeWidth={1.5} size={12} />
- ) : projectStatus === 'isRestoring' ||
- projectStatus === 'isComingUp' ||
- projectStatus === 'isRestarting' ? (
+ ) : ['isRestoring', 'isComingUp', 'isRestarting', 'isResizing'].includes(
+  projectStatus ?? ''
+ ) ? (
  <RefreshCcw strokeWidth={1.5} size={12} />
  ) : (
  <AlertTriangle strokeWidth={1.5} size={12} />
  )}
  <div className="flex justify-between items-center w-full gap-x-1">
  <AlertTitle_Shadcn_ className="text-xs mb-0">{alertTitle}</AlertTitle_Shadcn_>
- <Tooltip.Root delayDuration={0}>
- <Tooltip.Trigger>
+ <Tooltip_Shadcn_>
+ <TooltipTrigger_Shadcn_>
  <Info size={14} className="text-foreground-light hover:text-foreground" />
- </Tooltip.Trigger>
- <Tooltip.Portal>
- <Tooltip.Content side="bottom">
- <Tooltip.Arrow className="radix-tooltip-arrow" />
- <div
- className={[
- 'rounded bg-alternative py-1 px-2 leading-none shadow',
- 'border bg-studio w-[280px]',
- ].join(' ')}
- >
- <span className="text-xs text-foreground">{alertDescription}</span>
- </div>
- </Tooltip.Content>
- </Tooltip.Portal>
- </Tooltip.Root>
+ </TooltipTrigger_Shadcn_>
+ <TooltipContent_Shadcn_ side="bottom">{alertDescription}</TooltipContent_Shadcn_>
+ </Tooltip_Shadcn_>
  </div>
  </Alert_Shadcn_>
  )

apps/studio/components/interfaces/Settings/Addons/ComputeInstanceSidePanel.tsx

@@ -5,6 +5,7 @@ import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useEffect, useMemo, useState } from 'react'
 import { toast } from 'sonner'
+import { ExternalLink, Info } from 'lucide-react'
 
 import { useParams } from 'common'
 import {
@@ -37,7 +38,6 @@ import {
  SidePanel,
  WarningIcon,
 } from 'ui'
-import { ExternalLink, Info } from 'lucide-react'
 
 const ComputeInstanceSidePanel = () => {
  const queryClient = useQueryClient()
@@ -68,7 +68,7 @@ const ComputeInstanceSidePanel = () => {
  `Successfully updated compute instance to ${selectedCompute?.name}. Your project is currently being restarted to update its instance`,
  { duration: 8000 }
  )
- setProjectStatus(queryClient, projectRef!, PROJECT_STATUS.RESTORING)
+ setProjectStatus(queryClient, projectRef!, PROJECT_STATUS.RESIZING)
  closePanel()
  router.push(`/project/${projectRef}`)
  },
@@ -82,7 +82,7 @@ const ComputeInstanceSidePanel = () => {
  `Successfully updated compute instance. Your project is currently being restarted to update its instance`,
  { duration: 8000 }
  )
- setProjectStatus(queryClient, projectRef!, PROJECT_STATUS.RESTORING)
+ setProjectStatus(queryClient, projectRef!, PROJECT_STATUS.RESIZING)
  closePanel()
  router.push(`/project/${projectRef}`)
  },

apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/InstanceNode.tsx

@@ -207,6 +207,8 @@ export const ReplicaNode = ({ data }: NodeProps<ReplicaNodeData>) => {
  REPLICA_STATUS.COMING_UP,
  REPLICA_STATUS.GOING_DOWN,
  REPLICA_STATUS.RESTORING,
+ REPLICA_STATUS.RESTARTING,
+ REPLICA_STATUS.RESIZING,
  REPLICA_STATUS.INIT_READ_REPLICA,
  ] as string[]
  ).includes(status) || initStatus === ReplicaInitializationStatus.InProgress
@@ -266,6 +268,10 @@ export const ReplicaNode = ({ data }: NodeProps<ReplicaNodeData>) => {
  <Badge>Going down</Badge>
  ) : status === REPLICA_STATUS.RESTORING ? (
  <Badge>Restarting</Badge>
+ ) : status === REPLICA_STATUS.RESTARTING ? (
+ <Badge>Restarting</Badge>
+ ) : status === REPLICA_STATUS.RESIZING ? (
+ <Badge>Resizing</Badge>
  ) : initStatus === ReplicaInitializationStatus.Completed &&
  status === REPLICA_STATUS.ACTIVE_HEALTHY ? (
  <Badge variant="brand">Healthy</Badge>

apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/MapView.tsx

@@ -273,6 +273,10 @@ const MapView = ({
  <Badge>Coming up</Badge>
  ) : database.status === REPLICA_STATUS.RESTORING ? (
  <Badge>Restarting</Badge>
+ ) : database.status === REPLICA_STATUS.RESTARTING ? (
+ <Badge>Restarting</Badge>
+ ) : database.status === REPLICA_STATUS.RESIZING ? (
+ <Badge>Resizing</Badge>
  ) : (
  <Badge variant="warning">Unhealthy</Badge>
  )}

apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/RestartReplicaConfirmationModal.tsx

@@ -32,7 +32,7 @@ export const RestartReplicaConfirmationModal = ({
  queryClient.setQueriesData<any>(replicaKeys.list(ref), (old: Database[]) => {
  const updatedReplicas = old.map((x) => {
  if (x.identifier === selectedReplica?.identifier) {
- return { ...x, status: REPLICA_STATUS.RESTORING }
+ return { ...x, status: REPLICA_STATUS.RESTARTING }
  } else {
  return x
  }

apps/studio/components/layouts/ProjectLayout/ProjectLayout.tsx

@@ -30,6 +30,7 @@ import RestartingState from './RestartingState'
 import RestoreFailedState from './RestoreFailedState'
 import RestoringState from './RestoringState'
 import { UpgradingState } from './UpgradingState'
+import { ResizingState } from './ResizingState'
 
 // [Joshen] This is temporary while we unblock users from managing their project
 // if their project is not responding well for any reason. Eventually needs a bit of an overhaul
@@ -239,6 +240,7 @@ const ContentWrapper = ({ isLoading, isBlocking = true, children }: ContentWrapp
  const requiresProjectDetails = !routesToIgnoreProjectDetailsRequest.includes(router.pathname)
 
  const isRestarting = selectedProject?.status === PROJECT_STATUS.RESTARTING
+ const isResizing = selectedProject?.status === PROJECT_STATUS.RESIZING
  const isProjectUpgrading = selectedProject?.status === PROJECT_STATUS.UPGRADING
  const isProjectRestoring = selectedProject?.status === PROJECT_STATUS.RESTORING
  const isProjectRestoreFailed = selectedProject?.status === PROJECT_STATUS.RESTORE_FAILED
@@ -263,6 +265,10 @@ const ContentWrapper = ({ isLoading, isBlocking = true, children }: ContentWrapp
  return <RestartingState />
  }
 
+ if (isResizing && !isBackupsPage) {
+ return <ResizingState />
+ }
+
  if (isProjectUpgrading && !isBackupsPage) {
  return <UpgradingState />
  }

apps/studio/components/layouts/ProjectLayout/ResizingState.tsx

@@ -0,0 +1,41 @@
+import { useParams } from 'common'
+import { Loader2 } from 'lucide-react'
+
+import { useProjectDetailQuery } from 'data/projects/project-detail-query'
+import { PROJECT_STATUS } from 'lib/constants'
+
+export const ResizingState = () => {
+ const { ref } = useParams()
+ useProjectDetailQuery(
+ { ref },
+ {
+ // setting a refetch interval here will cause the `useSelectedProject()` in `ProjectLayout.tsx` to
+ // rerender every 4 seconds while the project is resizing. Once resizing is complete, it will
+ // no longer show this state.
+ refetchInterval(data) {
+ return data?.status !== PROJECT_STATUS.ACTIVE_HEALTHY ? 4000 : false
+ },
+ }
+ )
+
+ return (
+ <div className="flex items-center justify-center h-full">
+ <div className="bg-surface-100 border border-overlay rounded-md w-3/4 lg:w-1/2">
+ <div className="space-y-6 py-6">
+ <div className="flex px-8 space-x-8">
+ <div className="mt-1">
+ <Loader2 className="animate-spin" size={18} />
+ </div>
+ <div className="space-y-1">
+ <p>Resizing project...</p>
+ <p className="text-sm text-foreground-light">
+ Your project is being restarted to apply compute size changes. It can take a few
+ minutes. Your project will be offline while it is being restarted.
+ </p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ )
+}

apps/studio/data/organizations/organization-billing-subscription-preview.ts

@@ -35,6 +35,8 @@ export type OrganizationBillingSubscriptionPreviewResponse = {
  | 'INIT_FAILED'
  | 'REMOVED'
  | 'RESTORING'
+ | 'RESTARTING'
+ | 'RESIZING'
  | 'UPGRADING'
  instance_size: string
  name: string

apps/studio/lib/constants/infrastructure.ts

@@ -58,6 +58,7 @@ export const PROJECT_STATUS: {
  UPGRADING: 'UPGRADING',
  PAUSING: 'PAUSING',
  PAUSE_FAILED: 'PAUSE_FAILED',
+ RESIZING: 'RESIZING',
 }
 
 export const DEFAULT_MINIMUM_PASSWORD_STRENGTH = 4