fix(studio): observability reports refresh time (supabase#40876)

kemaldotearth · web-flow · commit 866185df497b · 2025-12-01T14:54:41.000Z
* fix: realtime report refresh

* feat: add createRefreshHandler hook

* feat: add new refresh for storage

* feat: add new refresh for postgrest

* feat: add new refresh for edge functions

* fix: rename postgrest to data api

* feat: add db auth and api overview refresh

* fix: db refresh handler for time

* chore: change from or to nullish where required

* chore: db refresh func becomes flatmap

* chore: memoize helper function for report refresh

* chore: remove unused lines from realtime

* fix: be a bit more verbose apparently

* chore: remove unused imports
diff --git a/apps/studio/components/interfaces/Reports/ReportFilterBar.tsx b/apps/studio/components/interfaces/Reports/ReportFilterBar.tsx
@@ -171,6 +171,13 @@ const ReportFilterBar = ({
 
   const [selectedRange, setSelectedRange] = useState<DatePickerValue>(getInitialDatePickerValue())
 
+  // Sync selectedRange when initialDatePickerValue changes
+  useEffect(() => {
+    if (initialDatePickerValue) {
+      setSelectedRange(initialDatePickerValue)
+    }
+  }, [initialDatePickerValue])
+
   return (
     <div className={cn('flex items-center justify-between', className)}>
       <div className="flex flex-row justify-start items-center flex-wrap gap-2">
diff --git a/apps/studio/hooks/misc/useReportDateRange.ts b/apps/studio/hooks/misc/useReportDateRange.ts
@@ -272,3 +272,26 @@ export const useReportDateRange = (
     handleDatePickerChange,
   }
 }
+
+export function useRefreshHandler(
+  datePickerValue: DatePickerValue,
+  datePickerHelpers: ReportsDatetimeHelper[],
+  handleDatePickerChange: (value: DatePickerValue) => boolean | void,
+  refresh: () => void | Promise<void>
+): () => void | Promise<void> {
+  return useCallback(async () => {
+    if (datePickerValue.isHelper && datePickerValue.text) {
+      const selectedHelper = datePickerHelpers.find((h) => h.text === datePickerValue.text)
+      if (selectedHelper) {
+        handleDatePickerChange({
+          from: selectedHelper.calcFrom(),
+          to: selectedHelper.calcTo(),
+          isHelper: true,
+          text: selectedHelper.text,
+        })
+      }
+    }
+
+    await refresh()
+  }, [datePickerValue, datePickerHelpers, handleDatePickerChange, refresh])
+}
diff --git a/apps/studio/pages/project/[ref]/observability/api-overview.tsx b/apps/studio/pages/project/[ref]/observability/api-overview.tsx
@@ -17,6 +17,7 @@ import DefaultLayout from 'components/layouts/DefaultLayout'
 import ObservabilityLayout from 'components/layouts/ObservabilityLayout/ObservabilityLayout'
 import { useApiReport } from 'data/reports/api-report-query'
 import { useReportDateRange } from 'hooks/misc/useReportDateRange'
+import { useCallback } from 'react'
 import type { NextPageWithLayout } from 'types'
 
 export const ApiReport: NextPageWithLayout = () => {
@@ -42,15 +43,51 @@ export const ApiReport: NextPageWithLayout = () => {
     setShowUpgradePrompt,
   } = useReportDateRange(REPORT_DATERANGE_HELPER_LABELS.LAST_60_MINUTES)
 
-  const handleDatepickerChange = (vals: DatePickerValue) => {
-    const promptShown = handleDatePickerChangeFromHook(vals)
-    if (!promptShown) {
+  const handleDatepickerChange = useCallback(
+    (vals: DatePickerValue) => {
+      const promptShown = handleDatePickerChangeFromHook(vals)
+      if (!promptShown) {
+        mergeParams({
+          iso_timestamp_start: vals.from ?? '',
+          iso_timestamp_end: vals.to ?? '',
+        })
+      }
+    },
+    [handleDatePickerChangeFromHook, mergeParams]
+  )
+
+  const handleDatepickerChangeForRefresh = useCallback(
+    (vals: DatePickerValue) => {
+      handleDatePickerChangeFromHook(vals)
       mergeParams({
-        iso_timestamp_start: vals.from || '',
-        iso_timestamp_end: vals.to || '',
+        iso_timestamp_start: vals.from ?? '',
+        iso_timestamp_end: vals.to ?? '',
       })
+      handleDatepickerChange(vals)
+    },
+    [handleDatePickerChangeFromHook, mergeParams, handleDatepickerChange]
+  )
+
+  const refreshWithParams = useCallback(async () => {
+    await new Promise((resolve) => setTimeout(resolve, 0))
+    refresh()
+  }, [refresh])
+
+  const onRefreshReport = useCallback(async () => {
+    if (datePickerValue.isHelper && datePickerValue.text) {
+      const selectedHelper = datePickerHelpers.find((h) => h.text === datePickerValue.text)
+      if (selectedHelper) {
+        handleDatepickerChangeForRefresh({
+          from: selectedHelper.calcFrom(),
+          to: selectedHelper.calcTo(),
+          isHelper: true,
+          text: selectedHelper.text,
+        })
+      }
     }
-  }
+
+    await refreshWithParams()
+  }, [datePickerValue, datePickerHelpers, handleDatepickerChangeForRefresh, refreshWithParams])
 
   return (
     <ReportPadding>
@@ -64,7 +101,7 @@ export const ApiReport: NextPageWithLayout = () => {
               datepickerFrom={params.totalRequests.iso_timestamp_start}
               datepickerTo={params.totalRequests.iso_timestamp_end}
               onAddFilter={addFilter}
-              onRefresh={refresh}
+              onRefresh={onRefreshReport}
               isLoading={isLoading}
               filters={filters}
               datepickerHelpers={datePickerHelpers}
diff --git a/apps/studio/pages/project/[ref]/observability/auth.tsx b/apps/studio/pages/project/[ref]/observability/auth.tsx
@@ -34,7 +34,7 @@ import {
   createLatencyReportConfig,
   createUsageReportConfig,
 } from 'data/reports/v2/auth.config'
-import { useReportDateRange } from 'hooks/misc/useReportDateRange'
+import { useReportDateRange, useRefreshHandler } from 'hooks/misc/useReportDateRange'
 import { useRouter } from 'next/router'
 import { parseAsJson, useQueryState } from 'nuqs'
 import type { NextPageWithLayout } from 'types'
@@ -155,14 +155,18 @@ const AuthUsage = () => {
     filters: {},
   })
 
-  const onRefreshReport = async () => {
-    if (!selectedDateRange) return
-
-    setIsRefreshing(true)
+  const onRefreshReport = useRefreshHandler(
+    datePickerValue,
+    datePickerHelpers,
+    handleDatePickerChange,
+    async () => {
+      if (!selectedDateRange) return
 
-    refetch()
-    setTimeout(() => setIsRefreshing(false), 1000)
-  }
+      setIsRefreshing(true)
+      refetch()
+      setTimeout(() => setIsRefreshing(false), 1000)
+    }
+  )
 
   const router = useRouter()
 
diff --git a/apps/studio/pages/project/[ref]/observability/database.tsx b/apps/studio/pages/project/[ref]/observability/database.tsx
@@ -37,7 +37,7 @@ import { getReportAttributesV2 } from 'data/reports/database-charts'
 import { useDatabaseReport } from 'data/reports/database-report-query'
 import { useProjectAddonsQuery } from 'data/subscriptions/project-addons-query'
 import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions'
-import { useReportDateRange } from 'hooks/misc/useReportDateRange'
+import { useReportDateRange, useRefreshHandler } from 'hooks/misc/useReportDateRange'
 import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization'
 import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
 import { DOCS_URL } from 'lib/constants'
@@ -140,38 +140,45 @@ const DatabaseUsage = () => {
     },
   })
 
-  const onRefreshReport = async () => {
-    if (!selectedDateRange) return
+  const onRefreshReport = useRefreshHandler(
+    datePickerValue,
+    datePickerHelpers,
+    handleDatePickerChange,
+    async () => {
+      if (!selectedDateRange) return
+
+      setIsRefreshing(true)
+      refresh()
+      const { period_start, period_end, interval } = selectedDateRange
 
-    setIsRefreshing(true)
-    refresh()
-    const { period_start, period_end, interval } = selectedDateRange
-    REPORT_ATTRIBUTES.forEach((chart: any) => {
-      chart.attributes.forEach((attr: any) => {
+      REPORT_ATTRIBUTES.flatMap((chart) => chart.attributes || [])
+        .filter((attr): attr is MultiAttribute => attr !== false)
+        .forEach((attr) => {
+          queryClient.invalidateQueries({
+            queryKey: analyticsKeys.infraMonitoring(ref, {
+              attribute: attr.attribute,
+              startDate: period_start.date,
+              endDate: period_end.date,
+              interval,
+              databaseIdentifier: state.selectedDatabaseId,
+            }),
+          })
+        })
+
+      if (isReplicaSelected) {
         queryClient.invalidateQueries({
           queryKey: analyticsKeys.infraMonitoring(ref, {
-            attribute: attr.attribute,
+            attribute: 'physical_replication_lag_physical_replica_lag_seconds',
             startDate: period_start.date,
             endDate: period_end.date,
             interval,
             databaseIdentifier: state.selectedDatabaseId,
           }),
         })
-      })
-    })
-    if (isReplicaSelected) {
-      queryClient.invalidateQueries({
-        queryKey: analyticsKeys.infraMonitoring(ref, {
-          attribute: 'physical_replication_lag_physical_replica_lag_seconds',
-          startDate: period_start.date,
-          endDate: period_end.date,
-          interval,
-          databaseIdentifier: state.selectedDatabaseId,
-        }),
-      })
+      }
+      setTimeout(() => setIsRefreshing(false), 1000)
     }
-    setTimeout(() => setIsRefreshing(false), 1000)
-  }
+  )
 
   const stateSyncedFromUrlRef = useRef(false)
   useEffect(() => {
diff --git a/apps/studio/pages/project/[ref]/observability/edge-functions.tsx b/apps/studio/pages/project/[ref]/observability/edge-functions.tsx
@@ -27,7 +27,7 @@ import { edgeFunctionReports } from 'data/reports/v2/edge-functions.config'
 
 import { REPORT_DATERANGE_HELPER_LABELS } from 'components/interfaces/Reports/Reports.constants'
 import UpgradePrompt from 'components/interfaces/Settings/Logs/UpgradePrompt'
-import { useReportDateRange } from 'hooks/misc/useReportDateRange'
+import { useReportDateRange, useRefreshHandler } from 'hooks/misc/useReportDateRange'
 
 import { EDGE_FUNCTION_REGIONS } from 'components/interfaces/Reports/Reports.constants'
 import { ReportSettings } from 'components/ui/Charts/ReportSettings'
@@ -117,13 +117,18 @@ const EdgeFunctionsUsage = () => {
     executionTimeFilter,
   ])
 
-  const onRefreshReport = async () => {
-    if (!selectedDateRange) return
+  const onRefreshReport = useRefreshHandler(
+    datePickerValue,
+    datePickerHelpers,
+    handleDatePickerChange,
+    async () => {
+      if (!selectedDateRange) return
 
-    setIsRefreshing(true)
-    queryClient.invalidateQueries({ queryKey: ['projects', ref, 'report-v2'] })
-    setTimeout(() => setIsRefreshing(false), 1000)
-  }
+      setIsRefreshing(true)
+      queryClient.invalidateQueries({ queryKey: ['projects', ref, 'report-v2'] })
+      setTimeout(() => setIsRefreshing(false), 1000)
+    }
+  )
 
   return (
     <>
diff --git a/apps/studio/pages/project/[ref]/observability/postgrest.tsx b/apps/studio/pages/project/[ref]/observability/postgrest.tsx
@@ -15,7 +15,7 @@ import UpgradePrompt from 'components/interfaces/Settings/Logs/UpgradePrompt'
 import DefaultLayout from 'components/layouts/DefaultLayout'
 import ObservabilityLayout from 'components/layouts/ObservabilityLayout/ObservabilityLayout'
 import { ButtonTooltip } from 'components/ui/ButtonTooltip'
-import { useReportDateRange } from 'hooks/misc/useReportDateRange'
+import { useReportDateRange, useRefreshHandler } from 'hooks/misc/useReportDateRange'
 import { useDatabaseSelectorStateSnapshot } from 'state/database-selector'
 
 import ReportFilterBar from 'components/interfaces/Reports/ReportFilterBar'
@@ -95,9 +95,16 @@ const PostgrestReport = () => {
     handleDatePickerChangeFromHook(values)
   }
 
+  const onRefreshReport = useRefreshHandler(
+    datePickerValue,
+    datePickerHelpers,
+    handleDatePickerChange,
+    refetch
+  )
+
   return (
     <>
-      <ReportHeader showDatabaseSelector={false} title="PostgREST" />
+      <ReportHeader showDatabaseSelector={false} title="Data API" />
       <ReportStickyNav
         content={
           <div className="flex flex-col gap-2">
@@ -108,7 +115,7 @@ const PostgrestReport = () => {
                 icon={<RefreshCw className={isRefetching ? 'animate-spin' : ''} />}
                 className="w-7"
                 tooltip={{ content: { side: 'bottom', text: 'Refresh report' } }}
-                onClick={() => refetch()}
+                onClick={onRefreshReport}
               />
               <LogsDatePicker
                 onSubmit={handleDatePickerChange}
diff --git a/apps/studio/pages/project/[ref]/observability/realtime.tsx b/apps/studio/pages/project/[ref]/observability/realtime.tsx
@@ -17,7 +17,7 @@ import { useDatabaseSelectorStateSnapshot } from 'state/database-selector'
 import { REPORT_DATERANGE_HELPER_LABELS } from 'components/interfaces/Reports/Reports.constants'
 import ReportStickyNav from 'components/interfaces/Reports/ReportStickyNav'
 import UpgradePrompt from 'components/interfaces/Settings/Logs/UpgradePrompt'
-import { useReportDateRange } from 'hooks/misc/useReportDateRange'
+import { useRefreshHandler, useReportDateRange } from 'hooks/misc/useReportDateRange'
 
 import { SharedAPIReport } from 'components/interfaces/Reports/SharedAPIReport/SharedAPIReport'
 import { useSharedAPIReport } from 'components/interfaces/Reports/SharedAPIReport/SharedAPIReport.constants'
@@ -86,16 +86,22 @@ const RealtimeUsage = () => {
     })
   }, [ref, selectedDateRange, state.selectedDatabaseId])
 
-  const onRefreshReport = async () => {
-    if (!selectedDateRange) return
+  const onRefreshReport = useRefreshHandler(
+    datePickerValue,
+    datePickerHelpers,
+    handleDatePickerChange,
+    async () => {
+      if (!selectedDateRange) return
 
-    setIsRefreshing(true)
-    queryClient.invalidateQueries({
-      queryKey: ['projects', ref, 'report-v2', { queryGroup: 'realtime' }],
-    })
-    refetch()
-    setTimeout(() => setIsRefreshing(false), 1000)
-  }
+      setIsRefreshing(true)
+
+      queryClient.invalidateQueries({
+        queryKey: ['projects', ref, 'report-v2', { queryGroup: 'realtime' }],
+      })
+      refetch()
+      setTimeout(() => setIsRefreshing(false), 1000)
+    }
+  )
 
   const urlStateHasSyncedRef = useRef(false)
   useEffect(() => {
diff --git a/apps/studio/pages/project/[ref]/observability/storage.tsx b/apps/studio/pages/project/[ref]/observability/storage.tsx
@@ -27,7 +27,7 @@ import DefaultLayout from 'components/layouts/DefaultLayout'
 import ObservabilityLayout from 'components/layouts/ObservabilityLayout/ObservabilityLayout'
 import { ButtonTooltip } from 'components/ui/ButtonTooltip'
 import { useStorageReport } from 'data/reports/storage-report-query'
-import { useReportDateRange } from 'hooks/misc/useReportDateRange'
+import { useReportDateRange, useRefreshHandler } from 'hooks/misc/useReportDateRange'
 import { DOCS_URL } from 'lib/constants'
 import type { NextPageWithLayout } from 'types'
 
@@ -58,14 +58,20 @@ export const StorageReport: NextPageWithLayout = () => {
   const handleDatepickerChange = (vals: DatePickerValue) => {
     const promptShown = handleDatePickerChangeFromHook(vals)
     if (!promptShown) {
-      // Update query params for the report
       mergeParams({
-        iso_timestamp_start: vals.from || '',
-        iso_timestamp_end: vals.to || '',
+        iso_timestamp_start: vals.from ?? '',
+        iso_timestamp_end: vals.to ?? '',
       })
     }
   }
 
+  const onRefreshReport = useRefreshHandler(
+    datePickerValue,
+    datePickerHelpers,
+    handleDatepickerChange,
+    refresh
+  )
+
   return (
     <ReportPadding>
       <ReportHeader title="Storage" showDatabaseSelector={false} />
@@ -79,7 +85,7 @@ export const StorageReport: NextPageWithLayout = () => {
                 icon={<RefreshCw className={report.isLoading ? 'animate-spin' : ''} />}
                 className="w-7"
                 tooltip={{ content: { side: 'bottom', text: 'Refresh report' } }}
-                onClick={() => report.refresh()}
+                onClick={onRefreshReport}
               />
               <LogsDatePicker
                 onSubmit={handleDatepickerChange}
