useProjectUsageStats.tsx 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  1. import { useQuery } from '@tanstack/react-query'
  2. import { useMemo } from 'react'
  3. import { useFillTimeseriesSorted } from './useFillTimeseriesSorted'
  4. import useTimeseriesUnixToIso from './useTimeseriesUnixToIso'
  5. import { LogsTableName } from '@/components/interfaces/Settings/Logs/Logs.constants'
  6. import type {
  7. EventChart,
  8. EventChartData,
  9. Filters,
  10. LogsEndpointParams,
  11. } from '@/components/interfaces/Settings/Logs/Logs.types'
  12. import { genChartQuery } from '@/components/interfaces/Settings/Logs/Logs.utils'
  13. import { get } from '@/data/fetchers'
  14. interface ProjectUsageStatsHookResult {
  15. error: string | Object | null
  16. isLoading: boolean
  17. filters: Filters
  18. params: LogsEndpointParams
  19. eventChartData: EventChartData[]
  20. refresh: () => void
  21. }
  22. function useProjectUsageStats({
  23. projectRef,
  24. table,
  25. timestampStart,
  26. timestampEnd,
  27. filterOverride,
  28. }: {
  29. projectRef: string
  30. table: LogsTableName
  31. timestampStart: string
  32. timestampEnd: string
  33. filterOverride?: Filters
  34. }): ProjectUsageStatsHookResult {
  35. const filterOverrideString = JSON.stringify(filterOverride)
  36. const mergedFilters = useMemo(
  37. () => ({
  38. ...filterOverride,
  39. }),
  40. [filterOverrideString]
  41. )
  42. const params: LogsEndpointParams = useMemo(() => {
  43. return { iso_timestamp_start: timestampStart, iso_timestamp_end: timestampEnd }
  44. }, [timestampStart, timestampEnd])
  45. const chartQuery = useMemo(
  46. () => genChartQuery(table, params, mergedFilters),
  47. [table, params, mergedFilters]
  48. )
  49. const chartQueryKey = useMemo(
  50. () => [
  51. 'projects',
  52. projectRef,
  53. 'logs-chart',
  54. table,
  55. {
  56. projectRef,
  57. sql: chartQuery,
  58. iso_timestamp_start: timestampStart,
  59. iso_timestamp_end: timestampEnd,
  60. },
  61. ],
  62. [projectRef, chartQuery, timestampStart, timestampEnd, table]
  63. )
  64. const { data: eventChartResponse, refetch: refreshEventChart } = useQuery({
  65. queryKey: chartQueryKey,
  66. queryFn: async ({ signal }) => {
  67. const { data, error } = await get(`/platform/projects/{ref}/analytics/endpoints/logs.all`, {
  68. params: {
  69. path: { ref: projectRef },
  70. query: {
  71. iso_timestamp_start: timestampStart,
  72. iso_timestamp_end: timestampEnd,
  73. sql: chartQuery,
  74. },
  75. },
  76. signal,
  77. })
  78. if (error) {
  79. throw error
  80. }
  81. return data as unknown as EventChart
  82. },
  83. refetchOnWindowFocus: false,
  84. enabled: typeof projectRef !== 'undefined',
  85. })
  86. const normalizedEventChartData = useTimeseriesUnixToIso(
  87. eventChartResponse?.result ?? [],
  88. 'timestamp'
  89. )
  90. const { data: eventChartData, error: eventChartError } = useFillTimeseriesSorted({
  91. data: normalizedEventChartData,
  92. timestampKey: 'timestamp',
  93. valueKey: 'count',
  94. defaultValue: 0,
  95. startDate: timestampStart,
  96. endDate: timestampEnd ?? new Date().toISOString(),
  97. })
  98. return {
  99. isLoading: !eventChartResponse,
  100. error: eventChartError,
  101. filters: mergedFilters,
  102. params,
  103. eventChartData,
  104. refresh: refreshEventChart,
  105. }
  106. }
  107. export default useProjectUsageStats