Chore/read replicas fixes 040324 (supabase#21731)

* Remove size selection and add info on rr billing * Add prompt in SQL editor if trying to run mutation query in read replica * Fix * Fix dropping replica not optimistically updating, and support new replica statuses * Invalidate load balancers after read replicas are spun up * fix

Author: joshenlim

apps/studio/components/interfaces/SQLEditor/UtilityPanel/UtilityActions.tsx

@@ -28,6 +28,7 @@ import FavoriteButton from './FavoriteButton'
 import SavingIndicator from './SavingIndicator'
 import toast from 'react-hot-toast'
 import { FileCog, Keyboard, SlidersHorizontal } from 'lucide-react'
+import { useSqlEditorStateSnapshot } from 'state/sql-editor'
 
 export type UtilityActionsProps = {
  id: string
@@ -48,6 +49,7 @@ const UtilityActions = ({
 }: UtilityActionsProps) => {
  const os = detectOS()
  const project = useSelectedProject()
+ const snap = useSqlEditorStateSnapshot()
  const showReadReplicasUI = project?.is_read_replicas_enabled
 
  const [intellisenseEnabled, setIntellisenseEnabled] = useLocalStorageQuery(
@@ -97,7 +99,12 @@ const UtilityActions = ({
 
  <div className="flex items-center justify-between gap-x-2 mx-2">
  <div className="flex items-center">
- {showReadReplicasUI && <DatabaseSelector variant="connected-on-right" />}
+ {showReadReplicasUI && (
+ <DatabaseSelector
+ variant="connected-on-right"
+ onSelectId={() => snap.resetResult(id)}
+ />
+ )}
  <RoleImpersonationPopover
  serviceRoleLabel="postgres"
  variant={showReadReplicasUI ? 'connected-on-both' : 'connected-on-right'}

apps/studio/components/interfaces/SQLEditor/UtilityPanel/UtilityTabResults.tsx

@@ -1,3 +1,5 @@
+import { useParams } from 'common'
+import toast from 'react-hot-toast'
 import { format } from 'sql-formatter'
 import { AiIconAnimation, Button } from 'ui'
 
@@ -6,8 +8,9 @@ import { useSqlDebugMutation } from 'data/ai/sql-debug-mutation'
 import { useEntityDefinitionsQuery } from 'data/database/entity-definitions-query'
 import { useOrgSubscriptionQuery } from 'data/subscriptions/org-subscription-query'
 import { isError } from 'data/utils/error-check'
-import { useLocalStorageQuery, useSelectedOrganization, useSelectedProject, useStore } from 'hooks'
+import { useLocalStorageQuery, useSelectedOrganization, useSelectedProject } from 'hooks'
 import { IS_PLATFORM, LOCAL_STORAGE_KEYS, OPT_IN_TAGS } from 'lib/constants'
+import { useDatabaseSelectorStateSnapshot } from 'state/database-selector'
 import { useSqlEditorStateSnapshot } from 'state/sql-editor'
 import { useSqlEditor } from '../SQLEditor'
 import { sqlAiDisclaimerComment } from '../SQLEditor.constants'
@@ -20,16 +23,17 @@ export type UtilityTabResultsProps = {
 }
 
 const UtilityTabResults = ({ id, isExecuting }: UtilityTabResultsProps) => {
- const { ui } = useStore()
- const organization = useSelectedOrganization()
+ const { ref } = useParams()
  const snap = useSqlEditorStateSnapshot()
- const { mutateAsync: debugSql, isLoading: isDebugSqlLoading } = useSqlDebugMutation()
- const { setDebugSolution, setAiInput, setSqlDiff, sqlDiff, setSelectedDiffType } = useSqlEditor()
- const selectedOrganization = useSelectedOrganization()
+ const state = useDatabaseSelectorStateSnapshot()
  const selectedProject = useSelectedProject()
- const isOptedInToAI = selectedOrganization?.opt_in_tags?.includes(OPT_IN_TAGS.AI_SQL) ?? false
- const [hasEnabledAISchema] = useLocalStorageQuery(LOCAL_STORAGE_KEYS.SQL_EDITOR_AI_SCHEMA, true)
+ const organization = useSelectedOrganization()
+
+ const { sqlDiff, setDebugSolution, setAiInput, setSqlDiff, setSelectedDiffType } = useSqlEditor()
+ const { mutateAsync: debugSql, isLoading: isDebugSqlLoading } = useSqlDebugMutation()
 
+ const isOptedInToAI = organization?.opt_in_tags?.includes(OPT_IN_TAGS.AI_SQL) ?? false
+ const [hasEnabledAISchema] = useLocalStorageQuery(LOCAL_STORAGE_KEYS.SQL_EDITOR_AI_SCHEMA, true)
  const includeSchemaMetadata = (isOptedInToAI || !IS_PLATFORM) && hasEnabledAISchema
 
  const { data } = useEntityDefinitionsQuery(
@@ -67,6 +71,9 @@ const UtilityTabResults = ({ id, isExecuting }: UtilityTabResultsProps) => {
  const formattedError = (result.error?.formattedError?.split('\n') ?? []).filter(
  (x: string) => x.length > 0
  )
+ const readReplicaError =
+ state.selectedDatabaseId !== ref &&
+ result.error.message.includes('in a read-only transaction')
 
  return (
  <div className="bg-table-header-light [[data-theme*=dark]_&]:bg-table-header-dark">
@@ -105,50 +112,67 @@ const UtilityTabResults = ({ id, isExecuting }: UtilityTabResultsProps) => {
  </pre>
  ))
  ) : (
- <p className="font-mono text-sm">{result.error?.message}</p>
+ <>
+ <p className="font-mono text-sm">Error: {result.error?.message}</p>
+ {readReplicaError && (
+ <p className="text-sm text-foreground-light">
+ Note: Read replicas are for read only queries. Run write queries on the
+ primary database instead.
+ </p>
+ )}
+ </>
  )}
  </div>
  )}
- {!hasHipaaAddon && (
- <Button
- icon={
- <div className="scale-75">
- <AiIconAnimation className="w-3 h-3" loading={isDebugSqlLoading} />
- </div>
- }
- disabled={!!sqlDiff || isDebugSqlLoading}
- onClick={async () => {
- try {
- const { solution, sql } = await debugSql({
- sql: snippet.snippet.content.sql.replace(sqlAiDisclaimerComment, '').trim(),
- errorMessage: result.error.message,
- entityDefinitions,
- })
-
- const formattedSql = format(sql, {
- language: 'postgresql',
- keywordCase: 'lower',
- })
- setAiInput('')
- setDebugSolution(solution)
- setSqlDiff({
- original: snippet.snippet.content.sql,
- modified: formattedSql,
- })
- setSelectedDiffType(DiffType.Modification)
- } catch (error: unknown) {
- if (isError(error)) {
- ui.setNotification({
- category: 'error',
- message: `Failed to debug: ${error.message}`,
+
+ <div className="flex items-center gap-x-2">
+ {readReplicaError && (
+ <Button
+ className="py-2"
+ type="default"
+ onClick={() => {
+ state.setSelectedDatabaseId(ref)
+ snap.resetResult(id)
+ }}
+ >
+ Switch to primary database
+ </Button>
+ )}
+ {!hasHipaaAddon && (
+ <Button
+ icon={<AiIconAnimation className="scale-75 w-3 h-3" loading={isDebugSqlLoading} />}
+ disabled={!!sqlDiff || isDebugSqlLoading}
+ onClick={async () => {
+ try {
+ const { solution, sql } = await debugSql({
+ sql: snippet.snippet.content.sql.replace(sqlAiDisclaimerComment, '').trim(),
+ errorMessage: result.error.message,
+ entityDefinitions,
  })
+
+ const formattedSql =
+ sqlAiDisclaimerComment +
+ '\n\n' +
+ format(sql, {
+ language: 'postgresql',
+ keywordCase: 'lower',
+ })
+ setAiInput('')
+ setDebugSolution(solution)
+ setSqlDiff({
+ original: snippet.snippet.content.sql,
+ modified: formattedSql,
+ })
+ setSelectedDiffType(DiffType.Modification)
+ } catch (error: unknown) {
+ if (isError(error)) toast.error(`Failed to debug: ${error.message}`)
  }
- }
- }}
- >
- Debug with Supabase AI
- </Button>
- )}
+ }}
+ >
+  Debug with Supabase AI
+ </Button>
+ )}
+ </div>
  </div>
  </div>
  )

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

@@ -1,4 +1,5 @@
 import { useParams } from 'common'
+import Link from 'next/link'
 import { useEffect, useState } from 'react'
 import toast from 'react-hot-toast'
 import {
@@ -10,16 +11,14 @@ import {
  SidePanel,
 } from 'ui'
 
+import { WarningIcon } from 'components/ui/Icons'
 import { Region, useReadReplicaSetUpMutation } from 'data/read-replicas/replica-setup-mutation'
-import { useProjectAddonsQuery } from 'data/subscriptions/project-addons-query'
-import { AWS_REGIONS, AWS_REGIONS_DEFAULT, AWS_REGIONS_KEYS, BASE_PATH } from 'lib/constants'
-import { AVAILABLE_REPLICA_REGIONS, AWS_REGIONS_VALUES } from './InstanceConfiguration.constants'
 import { useReadReplicasQuery } from 'data/read-replicas/replicas-query'
-import Link from 'next/link'
 import { useOrgSubscriptionQuery } from 'data/subscriptions/org-subscription-query'
+import { useProjectAddonsQuery } from 'data/subscriptions/project-addons-query'
 import { useSelectedOrganization, useSelectedProject } from 'hooks'
-import { WarningIcon } from 'components/ui/Icons'
-import { getSemanticVersion } from 'lib/helpers'
+import { AWS_REGIONS, AWS_REGIONS_DEFAULT, AWS_REGIONS_KEYS, BASE_PATH } from 'lib/constants'
+import { AVAILABLE_REPLICA_REGIONS, AWS_REGIONS_VALUES } from './InstanceConfiguration.constants'
 
 // [Joshen] FYI this is purely for AWS only, need to update to support Fly eventually
 
@@ -81,7 +80,7 @@ const DeployNewReplicaPanel = ({
  // Will be following the primary's instance size for the time being
  const defaultCompute =
  addons?.selected_addons.find((addon) => addon.type === 'compute_instance')?.variant
- .identifier ?? 'ci_small'
+ .identifier ?? 'ci_micro'
 
  const [selectedRegion, setSelectedRegion] = useState<string>(defaultRegion)
  const [selectedCompute, setSelectedCompute] = useState(defaultCompute)
@@ -161,6 +160,7 @@ const DeployNewReplicaPanel = ({
  </AlertDescription_Shadcn_>
  </Alert_Shadcn_>
  )}
+
  {reachedMaxReplicas && (
  <Alert_Shadcn_>
  <WarningIcon />
@@ -172,6 +172,7 @@ const DeployNewReplicaPanel = ({
  </AlertDescription_Shadcn_>
  </Alert_Shadcn_>
  )}
+
  {/* [Joshen] Not particular about this warning as all users on prod are on AWS */}
  {project?.cloud_provider !== 'AWS' && (
  <Alert_Shadcn_>
@@ -185,6 +186,7 @@ const DeployNewReplicaPanel = ({
  </AlertDescription_Shadcn_>
  </Alert_Shadcn_>
  )}
+
  {currentPgVersion < 15 && (
  <Alert_Shadcn_>
  <WarningIcon />
@@ -207,6 +209,7 @@ const DeployNewReplicaPanel = ({
  </AlertDescription_Shadcn_>
  </Alert_Shadcn_>
  )}
+
  <Listbox
  size="small"
  id="region"
@@ -234,26 +237,27 @@ const DeployNewReplicaPanel = ({
  ))}
  </Listbox>
 
- <Listbox
- disabled
- size="small"
- id="compute"
- name="compute"
- value={selectedCompute}
- onChange={setSelectedCompute}
- label="Select the instance size for your read replica"
- descriptionText="Read replicas will be on the same instance size as your primary"
- >
- {computeAddons.map((option) => (
- <Listbox.Option key={option.identifier} label={option.name} value={option.identifier}>
- {option.name}
- </Listbox.Option>
- ))}
- </Listbox>
+ <div className="flex flex-col gap-y-2">
+ <p className="text-foreground-light text-sm">
+ Read replicas will be on the same compute size as your primary database. Deploying a
+ read replica incurs additional{' '}
+ <span className="text-foreground">{selectedComputeMeta?.name}</span> compute hours.
+ Pricing is still in early access and is subject to change.
+ </p>
 
- {/* <p className="text-xs text-foreground-light">
- Show some preview info on cost for deploying this replica here
- </p> */}
+ <p className="text-foreground-light text-sm">
+ Read more about{' '}
+ <Link
+ href="https://supabase.com/docs/guides/platform/org-based-billing#usage-based-billing-for-compute"
+ target="_blank"
+ rel="noreferrer"
+ className="underline"
+ >
+ Usage-based billing
+ </Link>{' '}
+ for compute.
+ </p>
+ </div>
  </SidePanel.Content>
  </SidePanel>
  )

apps/studio/components/interfaces/Settings/Infrastructure/InfrastructureConfiguration/InstanceConfiguration.constants.ts

@@ -1,4 +1,5 @@
-import { AWS_REGIONS, AWS_REGIONS_KEYS } from 'lib/constants'
+import { components } from 'data/api'
+import { AWS_REGIONS, AWS_REGIONS_KEYS, PROJECT_STATUS } from 'lib/constants'
 
 export interface Region {
  key: AWS_REGIONS_KEYS
@@ -12,6 +13,14 @@ export const NODE_WIDTH = 660
 export const NODE_ROW_HEIGHT = 50
 export const NODE_SEP = 20
 
+export const REPLICA_STATUS: {
+ [key: string]: components['schemas']['DatabaseStatusResponse']['status']
+} = {
+ ...PROJECT_STATUS,
+ INIT_READ_REPLICA: 'INIT_READ_REPLICA',
+ INIT_READ_REPLICA_FAILED: 'INIT_READ_REPLICA_FAILED',
+}
+
 // [Joshen] Coordinates from https://github.com/jsonmaur/aws-regions/issues/11
 // In the format of [lon, lat]
 export const AWS_REGIONS_COORDINATES: { [key: string]: [number, number] } = {

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

@@ -49,13 +49,17 @@ const InstanceConfigurationUI = () => {
  const [selectedReplicaToDrop, setSelectedReplicaToDrop] = useState<Database>()
  const [selectedReplicaToRestart, setSelectedReplicaToRestart] = useState<Database>()
 
- const { data: loadBalancers, isSuccess: isSuccessLoadBalancers } = useLoadBalancersQuery({
+ const {
+ data: loadBalancers,
+ refetch: refetchLoadBalancers,
+ isSuccess: isSuccessLoadBalancers,
+ } = useLoadBalancersQuery({
  projectRef,
  })
  const {
  data,
  error,
- refetch,
+ refetch: refetchReplicas,
  isLoading,
  isError,
  isSuccess: isSuccessReplicas,
@@ -79,7 +83,8 @@ const InstanceConfigurationUI = () => {
  // If any replica's status has changed, refetch databases
  if (numComingUp.current !== comingUpReplicas.length) {
  numComingUp.current = comingUpReplicas.length
- await refetch()
+ await refetchReplicas()
+ setTimeout(() => refetchLoadBalancers(), 2000)
  }
 
  // If all replicas are active healthy, stop fetching statuses