EnableIndexAdvisorButton() — supabase Function Reference

Architecture documentation for the EnableIndexAdvisorButton() function in EnableIndexAdvisorButton.tsx from the supabase codebase.

Function tsx ContentManagement MediaManagement calls 1

Entity Profile

ContentManagement→ MediaManagement→ EnableIndexAdvisorButton() — supabase Function Reference

Dependency Diagram

graph TD
  26b64807_cc32_2faf_c94c_2f2401cc23d5["EnableIndexAdvisorButton()"]
  fa397570_a2a8_abec_6e48_9a1e12bb2bd1["getIndexAdvisorExtensions()"]
  26b64807_cc32_2faf_c94c_2f2401cc23d5 -->|calls| fa397570_a2a8_abec_6e48_9a1e12bb2bd1
  style 26b64807_cc32_2faf_c94c_2f2401cc23d5 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/studio/components/interfaces/QueryPerformance/IndexAdvisor/EnableIndexAdvisorButton.tsx lines 22–102

export const EnableIndexAdvisorButton = () => {
  const track = useTrack()
  const { data: project } = useSelectedProjectQuery()

  const [isDialogOpen, setIsDialogOpen] = useState(false)

  const { data: extensions } = useDatabaseExtensionsQuery({
    projectRef: project?.ref,
    connectionString: project?.connectionString,
  })
  const { hypopg, indexAdvisor } = getIndexAdvisorExtensions(extensions)

  const { mutateAsync: enableExtension, isPending: isEnablingExtension } =
    useDatabaseExtensionEnableMutation()

  const onEnableIndexAdvisor = async () => {
    if (project === undefined) return toast.error('Project is required')

    try {
      // Enable hypopg extension if not already installed
      if (hypopg?.installed_version === null) {
        await enableExtension({
          projectRef: project?.ref,
          connectionString: project?.connectionString,
          name: hypopg.name,
          schema: hypopg?.schema ?? 'extensions',
          version: hypopg.default_version,
        })
      }

      // Enable index_advisor extension if not already installed
      if (indexAdvisor?.installed_version === null) {
        await enableExtension({
          projectRef: project?.ref,
          connectionString: project?.connectionString,
          name: indexAdvisor.name,
          schema: indexAdvisor?.schema ?? 'extensions',
          version: indexAdvisor.default_version,
        })
      }
      toast.success('Successfully enabled Index Advisor!')
      setIsDialogOpen(false)
    } catch (error: any) {
      toast.error(`Failed to enable Index Advisor: ${error.message}`)
    }
  }

  return (
    <AlertDialog open={isDialogOpen} onOpenChange={() => setIsDialogOpen(!isDialogOpen)}>
      <AlertDialogTrigger asChild>
        <Button type="primary" onClick={() => track('index_advisor_banner_enable_button_clicked')}>
          Enable
        </Button>
      </AlertDialogTrigger>

      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Enable Index Advisor</AlertDialogTitle>
          <AlertDialogDescription>
            This will enable the <code className="text-code-inline">index_advisor</code> and{' '}
            <code className="text-code-inline">hypopg</code> Postgres extensions so Index Advisor
            can analyse queries and suggest performance-improving indexes.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialogAction
            onClick={(e) => {
              e.preventDefault()
              onEnableIndexAdvisor()
              track('index_advisor_dialog_enable_button_clicked')
            }}
            disabled={isEnablingExtension}
          >
            {isEnablingExtension ? 'Enabling...' : 'Enable'}
          </AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
}