Support resetting query performance report on read replica (#33346)

apps/studio/components/interfaces/QueryPerformance/QueryPerformance.tsx

@@ -6,10 +6,12 @@ import { toast } from 'sonner'
 
 import { useParams } from 'common'
 import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
+import { useReadReplicasQuery } from 'data/read-replicas/replicas-query'
+import { formatDatabaseID } from 'data/read-replicas/replicas.utils'
 import { executeSql } from 'data/sql/execute-sql-query'
 import { DbQueryHook } from 'hooks/analytics/useDbQuery'
 import { useLocalStorageQuery } from 'hooks/misc/useLocalStorage'
-import { LOCAL_STORAGE_KEYS } from 'lib/constants'
+import { IS_PLATFORM, LOCAL_STORAGE_KEYS } from 'lib/constants'
 import { useDatabaseSelectorStateSnapshot } from 'state/database-selector'
 import {
   Button,
@@ -22,7 +24,7 @@ import {
   TooltipTrigger,
   cn,
 } from 'ui'
-import ConfirmModal from 'ui-patterns/Dialogs/ConfirmDialog'
+import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
 import ShimmeringLoader from 'ui-patterns/ShimmeringLoader'
 import { Markdown } from '../Markdown'
 import { useQueryPerformanceQuery } from '../Reports/Reports.queries'
@@ -46,6 +48,8 @@ export const QueryPerformance = ({
   const state = useDatabaseSelectorStateSnapshot()
 
   const { isLoading, isRefetching } = queryPerformanceQuery
+  const isPrimaryDatabase = state.selectedDatabaseId === ref
+  const formattedDatabaseId = formatDatabaseID(state.selectedDatabaseId ?? '')
 
   const [page, setPage] = useState<QUERY_PERFORMANCE_REPORT_TYPES>(
     (preset as QUERY_PERFORMANCE_REPORT_TYPES) ?? QUERY_PERFORMANCE_REPORT_TYPES.MOST_TIME_CONSUMING
@@ -62,6 +66,8 @@ export const QueryPerformance = ({
     queryHitRate.runQuery()
   }
 
+  const { data: databases } = useReadReplicasQuery({ projectRef: ref })
+
   const { data: mostTimeConsumingQueries, isLoading: isLoadingMTC } = useQueryPerformanceQuery({
     preset: 'mostTimeConsuming',
   })
@@ -246,21 +252,27 @@ export const QueryPerformance = ({
         </div>
       </div>
 
-      <ConfirmModal
-        danger
+      <ConfirmationModal
         visible={showResetgPgStatStatements}
+        size="medium"
+        variant="destructive"
         title="Reset query performance analysis"
-        description={
-          'This will reset the `extensions.pg_stat_statements` table that is used to calculate query performance. This data will repopulate immediately after.'
-        }
-        buttonLabel="Clear table"
-        buttonLoadingLabel="Deleting"
-        onSelectCancel={() => setShowResetgPgStatStatements(false)}
-        onSelectConfirm={async () => {
+        confirmLabel="Reset report"
+        confirmLabelLoading="Resetting report"
+        onCancel={() => setShowResetgPgStatStatements(false)}
+        onConfirm={async () => {
+          const connectionString = databases?.find(
+            (db) => db.identifier === state.selectedDatabaseId
+          )?.connectionString
+
+          if (IS_PLATFORM && !connectionString) {
+            return toast.error('Unable to run query: Connection string is missing')
+          }
+
           try {
             await executeSql({
               projectRef: project?.ref,
-              connectionString: project?.connectionString,
+              connectionString,
               sql: `SELECT pg_stat_statements_reset();`,
             })
             handleRefresh()
@@ -269,7 +281,16 @@ export const QueryPerformance = ({
             toast.error(`Failed to reset analysis: ${error.message}`)
           }
         }}
-      />
+      >
+        <p className="text-foreground-light text-sm">
+          This will reset the pg_stat_statements table in the extensions schema on your{' '}
+          <span className="text-foreground">
+            {isPrimaryDatabase ? 'primary database' : `read replica (ID: ${formattedDatabaseId})`}
+          </span>
+          , which is used to calculate query performance. This data will repopulate immediately
+          after.
+        </p>
+      </ConfirmationModal>
     </>
   )
 }