[DESIGN-301] Project Homepage: refactor to logflare endpoint (supabase#40124)

jordienr · web-flow · commit ece02759d755 · 2025-11-10T10:30:45.000+01:00
diff --git a/apps/studio/components/interfaces/HomeNew/ProjectUsageSection.tsx b/apps/studio/components/interfaces/HomeNew/ProjectUsageSection.tsx
@@ -8,7 +8,6 @@ import { useParams } from 'common'
 import NoDataPlaceholder from 'components/ui/Charts/NoDataPlaceholder'
 import { InlineLink } from 'components/ui/InlineLink'
 import { useSendEventMutation } from 'data/telemetry/send-event-mutation'
-import useProjectUsageStats from 'hooks/analytics/useProjectUsageStats'
 import { useCurrentOrgPlan } from 'hooks/misc/useCurrentOrgPlan'
 import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled'
 import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization'
@@ -33,9 +32,9 @@ import {
 import { Row } from 'ui-patterns'
 import { LogsBarChart } from 'ui-patterns/LogsBarChart'
 import { useServiceStats } from './ProjectUsageSection.utils'
+import type { StatsLike } from './ProjectUsageSection.utils'
 import type { LogsBarChartDatum } from './ProjectUsage.metrics'
 import {
-  toLogsBarChartData,
   sumTotal,
   sumWarnings,
   sumErrors,
@@ -68,7 +67,7 @@ const CHART_INTERVALS: ChartIntervals[] = [
     label: 'Last 7 days',
     startValue: 7,
     startUnit: 'day',
-    format: 'MMM D',
+    format: 'MMM D, ha',
     availableIn: ['pro', 'team', 'enterprise'],
   },
 ]
@@ -90,7 +89,7 @@ type ServiceComputed = ServiceEntry & {
   total: number
   warn: number
   err: number
-  stats: ReturnType<typeof useProjectUsageStats>
+  stats: StatsLike
 }
 
 export const ProjectUsageSection = () => {
@@ -109,37 +108,12 @@ export const ProjectUsageSection = () => {
 
   const selectedInterval = CHART_INTERVALS.find((i) => i.key === interval) || CHART_INTERVALS[1]
 
-  const { timestampStart, timestampEnd, datetimeFormat } = useMemo(() => {
-    const startDateLocal = dayjs().subtract(
-      selectedInterval.startValue,
-      selectedInterval.startUnit as dayjs.ManipulateType
-    )
-    const endDateLocal = dayjs()
+  const { datetimeFormat } = useMemo(() => {
     const format = selectedInterval.format || 'MMM D, ha'
+    return { datetimeFormat: format }
+  }, [selectedInterval])
 
-    return {
-      timestampStart: startDateLocal.toISOString(),
-      timestampEnd: endDateLocal.toISOString(),
-      datetimeFormat: format,
-    }
-  }, [selectedInterval]) // Only recalculate when interval changes
-
-  const { previousStart, previousEnd } = useMemo(() => {
-    const currentStart = dayjs(timestampStart)
-    const currentEnd = dayjs(timestampEnd)
-    const durationMs = currentEnd.diff(currentStart)
-    const prevEnd = currentStart
-    const prevStart = currentStart.subtract(durationMs, 'millisecond')
-    return { previousStart: prevStart.toISOString(), previousEnd: prevEnd.toISOString() }
-  }, [timestampStart, timestampEnd])
-
-  const statsByService = useServiceStats(
-    projectRef as string,
-    timestampStart,
-    timestampEnd,
-    previousStart,
-    previousEnd
-  )
+  const statsByService = useServiceStats(projectRef!, interval)
 
   const serviceBase: ServiceEntry[] = useMemo(
     () => [
@@ -185,7 +159,7 @@ export const ProjectUsageSection = () => {
     () =>
       serviceBase.map((s) => {
         const currentStats = statsByService[s.key].current
-        const data = toLogsBarChartData(currentStats.eventChartData)
+        const data = currentStats.eventChartData
         const total = sumTotal(data)
         const warn = sumWarnings(data)
         const err = sumErrors(data)
@@ -239,7 +213,7 @@ export const ProjectUsageSection = () => {
     () =>
       serviceBase.map((s) => {
         const previousStats = statsByService[s.key].previous
-        const data = toLogsBarChartData(previousStats.eventChartData)
+        const data = previousStats.eventChartData
         return {
           enabled: s.enabled,
           total: sumTotal(data),
diff --git a/apps/studio/components/interfaces/HomeNew/ProjectUsageSection.utils.test.ts b/apps/studio/components/interfaces/HomeNew/ProjectUsageSection.utils.test.ts
@@ -0,0 +1,70 @@
+import { describe, it, expect, vi } from 'vitest'
+
+import { toServiceStatsMap } from './ProjectUsageSection.utils'
+import type { ProjectMetricsRow } from 'data/analytics/project-metrics-query'
+
+const mkRow = (
+  n: number,
+  service: ProjectMetricsRow['service'],
+  time_window: ProjectMetricsRow['time_window']
+): ProjectMetricsRow => ({
+  timestamp: (1700000000000 + n * 60000) * 1000, // microseconds
+  service,
+  time_window,
+  ok_count: n,
+  warning_count: 0,
+  error_count: 0,
+})
+
+const emptyRows: ProjectMetricsRow[] = []
+
+describe('toServiceStatsMap', () => {
+  it('returns empty arrays when no data', () => {
+    const onRefresh = vi.fn()
+    const map = toServiceStatsMap({
+      data: emptyRows,
+      isLoading: false,
+      error: undefined,
+      onRefresh,
+    })
+
+    expect(map.db.current.eventChartData).toEqual([])
+    expect(map.functions.previous.eventChartData).toEqual([])
+    expect(map.auth.current.isLoading).toBe(false)
+    expect(map.storage.current.error).toBeNull()
+
+    map.realtime.current.refresh()
+    expect(onRefresh).toHaveBeenCalledTimes(1)
+  })
+
+  it('maps data rows through for each service', () => {
+    const rows: ProjectMetricsRow[] = [
+      mkRow(1, 'db', 'current'),
+      mkRow(2, 'db', 'current'),
+      mkRow(0, 'db', 'previous'),
+    ]
+    const map = toServiceStatsMap({
+      data: rows,
+      isLoading: true,
+      error: undefined,
+      onRefresh: () => {},
+    })
+
+    expect(map.db.current.eventChartData.length).toBe(2)
+    expect(map.db.previous.eventChartData.length).toBe(1)
+    expect(map.db.current.isLoading).toBe(true)
+  })
+
+  it('propagates errors to all services', () => {
+    const err = new Error('boom')
+    const map = toServiceStatsMap({
+      data: emptyRows,
+      isLoading: false,
+      error: err,
+      onRefresh: () => {},
+    })
+
+    expect(map.db.current.error).toBe(err)
+    expect(map.functions.previous.error).toBe(err)
+  })
+})
diff --git a/apps/studio/components/interfaces/HomeNew/ProjectUsageSection.utils.ts b/apps/studio/components/interfaces/HomeNew/ProjectUsageSection.utils.ts
@@ -1,92 +1,121 @@
-import useProjectUsageStats from 'hooks/analytics/useProjectUsageStats'
-import { LogsTableName } from '../Settings/Logs/Logs.constants'
+import { useProjectMetricsQuery } from 'data/analytics/project-metrics-query'
+import type { ProjectMetricsRow } from 'data/analytics/project-metrics-query'
 
 type ServiceKey = 'db' | 'functions' | 'auth' | 'storage' | 'realtime'
+
+export type StatsLike = {
+  error: unknown | null
+  isLoading: boolean
+  eventChartData: Array<{
+    timestamp: string
+    ok_count: number
+    warning_count: number
+    error_count: number
+  }>
+  refresh: () => void
+}
+
 type ServiceStatsMap = Record<
   ServiceKey,
   {
-    current: ReturnType<typeof useProjectUsageStats>
-    previous: ReturnType<typeof useProjectUsageStats>
+    current: StatsLike
+    previous: StatsLike
   }
 >
 
-export const useServiceStats = (
-  projectRef: string,
-  timestampStart: string,
-  timestampEnd: string,
-  previousStart: string,
-  previousEnd: string
-): ServiceStatsMap => {
-  const dbCurrent = useProjectUsageStats({
-    projectRef,
-    table: LogsTableName.POSTGRES,
-    timestampStart,
-    timestampEnd,
-  })
-  const dbPrevious = useProjectUsageStats({
-    projectRef,
-    table: LogsTableName.POSTGRES,
-    timestampStart: previousStart,
-    timestampEnd: previousEnd,
-  })
+/**
+ * Transform backend project metrics into a UI-friendly structure with consistent
+ * loading/error/refresh state per service.
+ *
+ * Why this exists
+ *  - Backend returns flat rows: one record per (time_window, service, bucket_ts).
+ *  - UI needs per-service objects with two series (current/previous) to drive 5 cards and compute per-service totals.
+ *  - Charts expect ISO string timestamps; backend gives TIMESTAMP (coming to client as microseconds). We convert to ISO.
+ *  - We also need stable sorting and consistent empty arrays when a series has no points.
+ *  - We attach loading/error/refresh per service to keep UI simple.
+ */
+export const toServiceStatsMap = (args: {
+  data?: ProjectMetricsRow[]
+  isLoading: boolean
+  error?: unknown
+  onRefresh: () => void
+}): ServiceStatsMap => {
+  const { data, isLoading, error, onRefresh } = args
 
-  const fnCurrent = useProjectUsageStats({
-    projectRef,
-    table: LogsTableName.FN_EDGE,
-    timestampStart,
-    timestampEnd,
-  })
-  const fnPrevious = useProjectUsageStats({
-    projectRef,
-    table: LogsTableName.FN_EDGE,
-    timestampStart: previousStart,
-    timestampEnd: previousEnd,
-  })
+  const base = {
+    error: error ?? null,
+    isLoading,
+    refresh: () => {
+      onRefresh()
+    },
+  }
 
-  const authCurrent = useProjectUsageStats({
-    projectRef,
-    table: LogsTableName.AUTH,
-    timestampStart,
-    timestampEnd,
-  })
-  const authPrevious = useProjectUsageStats({
-    projectRef,
-    table: LogsTableName.AUTH,
-    timestampStart: previousStart,
-    timestampEnd: previousEnd,
-  })
+  const empty: StatsLike = { ...base, eventChartData: [] }
 
-  const storageCurrent = useProjectUsageStats({
-    projectRef,
-    table: LogsTableName.STORAGE,
-    timestampStart,
-    timestampEnd,
-  })
-  const storagePrevious = useProjectUsageStats({
-    projectRef,
-    table: LogsTableName.STORAGE,
-    timestampStart: previousStart,
-    timestampEnd: previousEnd,
-  })
+  const grouped: Record<
+    ServiceKey,
+    { current: StatsLike['eventChartData']; previous: StatsLike['eventChartData'] }
+  > = {
+    db: { current: [], previous: [] },
+    functions: { current: [], previous: [] },
+    auth: { current: [], previous: [] },
+    storage: { current: [], previous: [] },
+    realtime: { current: [], previous: [] },
+  }
 
-  const realtimeCurrent = useProjectUsageStats({
-    projectRef,
-    table: LogsTableName.REALTIME,
-    timestampStart,
-    timestampEnd,
-  })
-  const realtimePrevious = useProjectUsageStats({
-    projectRef,
-    table: LogsTableName.REALTIME,
-    timestampStart: previousStart,
-    timestampEnd: previousEnd,
-  })
+  const toIso = (microseconds: number) => new Date(microseconds / 1000).toISOString()
+
+  for (const r of data ?? []) {
+    const bucket = grouped[r.service as ServiceKey]
+    const target = r.time_window === 'current' ? bucket.current : bucket.previous
+    target.push({
+      timestamp: toIso(r.timestamp),
+      ok_count: r.ok_count,
+      warning_count: r.warning_count,
+      error_count: r.error_count,
+    })
+  }
+
+  const byTime = (a: { timestamp: string }, b: { timestamp: string }) =>
+    Date.parse(a.timestamp) - Date.parse(b.timestamp)
+  for (const key of Object.keys(grouped) as ServiceKey[]) {
+    grouped[key].current.sort(byTime)
+    grouped[key].previous.sort(byTime)
+  }
+
+  const toStats = (rows: StatsLike['eventChartData'] | undefined): StatsLike =>
+    rows ? { ...base, eventChartData: rows } : empty
 
   return {
-    db: { current: dbCurrent, previous: dbPrevious },
-    functions: { current: fnCurrent, previous: fnPrevious },
-    auth: { current: authCurrent, previous: authPrevious },
-    storage: { current: storageCurrent, previous: storagePrevious },
-    realtime: { current: realtimeCurrent, previous: realtimePrevious },
+    db: { current: toStats(grouped.db.current), previous: toStats(grouped.db.previous) },
+    functions: {
+      current: toStats(grouped.functions.current),
+      previous: toStats(grouped.functions.previous),
+    },
+    auth: { current: toStats(grouped.auth.current), previous: toStats(grouped.auth.previous) },
+    storage: {
+      current: toStats(grouped.storage.current),
+      previous: toStats(grouped.storage.previous),
+    },
+    realtime: {
+      current: toStats(grouped.realtime.current),
+      previous: toStats(grouped.realtime.previous),
+    },
   }
 }
+
+export const useServiceStats = (
+  projectRef: string,
+  interval: '1hr' | '1day' | '7day'
+): ServiceStatsMap => {
+  const { data, isLoading, error, refetch } = useProjectMetricsQuery({ projectRef, interval })
+
+  return toServiceStatsMap({
+    data,
+    isLoading,
+    error,
+    onRefresh: () => {
+      void refetch()
+    },
+  })
+}
diff --git a/apps/studio/data/analytics/keys.ts b/apps/studio/data/analytics/keys.ts
@@ -121,6 +121,8 @@ export const analyticsKeys = {
       'infra-monitoring',
       { attribute, startDate, endDate, interval, databaseIdentifier },
     ] as const,
+  projectMetrics: (projectRef: string | undefined, { interval }: { interval?: string }) =>
+    ['projects', projectRef, 'project.metrics', { interval }] as const,
   usageApiCounts: (projectRef: string | undefined, interval: string | undefined) =>
     ['projects', projectRef, 'usage.api-counts', interval] as const,
 
diff --git a/apps/studio/data/analytics/project-metrics-query.ts b/apps/studio/data/analytics/project-metrics-query.ts
