dima/supabase
1
0 Fork 0
mirror of https://github.com/supabase/supabase.git synced 2026-10-05 17:35:10 +03:00
Code Issues Packages Projects Releases Wiki Activity

chore: refactor useDbQuery and useLogsQuery

Browse Source
This commit is contained in:
TzeYiing committed 2023-05-17 12:03:57 +08:00
1 parent 09896ceaf1
commit a18bca75ef
7 files changed
+78 -97
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

studio/components/interfaces/Reports/Reports.types.ts
-14
View File
@@ -7,20 +7,6 @@ export enum Presets {
QUERY_PERFORMANCE = 'query_performance',
}
export interface QueryDataBase {
isLoading: boolean
error: string
}
export interface DbQueryData<T = any> extends QueryDataBase {
data: T[]
params: BaseReportParams
logData?: never
}
export interface DbQueryHandler {
runQuery: () => void
setParams?: never
changeQuery?: never
}
export type MetaQueryResponse = any & { error: ResponseError }
export type BaseReportParams = typeof DEFAULT_QUERY_PARAMS & { sql?: string } & unknown
studio/components/interfaces/Reports/Reports.utils.tsx
+4 -10
View File
@@ -1,12 +1,6 @@
import useDbQuery from 'hooks/analytics/useDbQuery'
import useLogsQuery, { LogsQueryData, LogsQueryHandlers } from 'hooks/analytics/useLogsQuery'
import {
BaseQueries,
DbQueryData,
DbQueryHandler,
PresetConfig,
ReportQuery,
} from './Reports.types'
import useDbQuery, { DbQueryHook } from 'hooks/analytics/useDbQuery'
import useLogsQuery, { LogsQueryHook } from 'hooks/analytics/useLogsQuery'
import { BaseQueries, PresetConfig, ReportQuery } from './Reports.types'
/**
* Converts a query params string to an object
@@ -16,7 +10,7 @@ export const queryParamsToObject = (params: string) => {
}
// generate hooks based on preset config
type PresetHookResult = [LogsQueryData | DbQueryData, LogsQueryHandlers | DbQueryHandler]
type PresetHookResult = LogsQueryHook | DbQueryHook
type PresetHooks = Record<keyof PresetConfig['queries'], () => PresetHookResult>
export const queriesFactory = <T extends string>(
studio/hooks/analytics/useDbQuery.tsx
+15 -10
View File
@@ -2,19 +2,27 @@ import { useQuery } from '@tanstack/react-query'
import { DEFAULT_QUERY_PARAMS } from 'components/interfaces/Reports/Reports.constants'
import {
BaseReportParams,
DbQueryData,
DbQueryHandler,
MetaQueryResponse,
ReportQuery,
} from 'components/interfaces/Reports/Reports.types'
import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
import { executeSql } from 'data/sql/execute-sql-query'
type UseDbQuery = (
export interface DbQueryHook<T = any> {
isLoading: boolean
error: string
data: T[]
params: BaseReportParams
logData?: never
runQuery: () => void
setParams?: never
changeQuery?: never
}
const useDbQuery = (
sql: ReportQuery['sql'],
params?: BaseReportParams
) => [DbQueryData, DbQueryHandler]
const useDbQuery: UseDbQuery = (sql, params = DEFAULT_QUERY_PARAMS) => {
params: BaseReportParams = DEFAULT_QUERY_PARAMS
): DbQueryHook => {
const { project } = useProjectContext()
const resolvedSql = typeof sql === 'function' ? sql([]) : sql
@@ -45,10 +53,7 @@ const useDbQuery: UseDbQuery = (sql, params = DEFAULT_QUERY_PARAMS) => {
)
const error = rqError || (typeof data === 'object' ? data?.error : '')
return [
{ error, data, isLoading: isLoading || isRefetching, params },
{ runQuery: () => refetch() },
]
return { error, data, isLoading: isLoading || isRefetching, params, runQuery: refetch }
}
export default useDbQuery
studio/hooks/analytics/useLogsQuery.tsx
+11 -13
View File
@@ -8,14 +8,12 @@ import { Dispatch, SetStateAction, useState } from 'react'
import { LogsEndpointParams, Logs, LogData } from 'components/interfaces/Settings/Logs/Logs.types'
import { API_URL } from 'lib/constants'
import { get } from 'lib/common/fetch'
export interface LogsQueryData {
export interface LogsQueryHook {
params: LogsEndpointParams
isLoading: boolean
logData: LogData[]
data?: never
error: string | Object | null
}
export interface LogsQueryHandlers {
changeQuery: (newQuery?: string) => void
runQuery: () => void
setParams: Dispatch<SetStateAction<LogsEndpointParams>>
@@ -24,7 +22,7 @@ export interface LogsQueryHandlers {
const useLogsQuery = (
projectRef: string,
initialParams: Partial<LogsEndpointParams> = {}
): [LogsQueryData, LogsQueryHandlers] => {
): LogsQueryHook => {
const defaultHelper = getDefaultHelper(EXPLORER_DATEPICKER_HELPERS)
const [params, setParams] = useState<LogsEndpointParams>({
sql: initialParams?.sql || '',
@@ -67,14 +65,14 @@ const useLogsQuery = (
setParams((prev) => ({ ...prev, sql: newQuery }))
}
return [
{
params,
isLoading: (enabled && isLoading) || isRefetching,
logData: data?.result ? data?.result : [],
error,
},
{ changeQuery, runQuery: () => refetch(), setParams },
]
return {
params,
isLoading: (enabled && isLoading) || isRefetching,
logData: data?.result ? data?.result : [],
error,
changeQuery,
runQuery: () => refetch(),
setParams,
}
}
export default useLogsQuery
studio/pages/project/[ref]/logs/explorer/index.tsx
+1 -1
View File
@@ -43,7 +43,7 @@ export const LogsExplorerPage: NextPageWithLayout = () => {
const [warnings, setWarnings] = useState<LogsWarning[]>([])
const { data: subscription } = useProjectSubscriptionQuery({ projectRef })
const tier = subscription?.tier
const [{ params, logData, error, isLoading }, { changeQuery, runQuery, setParams }] =
const { params, logData, error, isLoading, changeQuery, runQuery, setParams } =
useLogsQuery(projectRef as string, {
iso_timestamp_start: its ? (its as string) : undefined,
iso_timestamp_end: ite ? (ite as string) : undefined,
studio/pages/project/[ref]/reports/api-overview.tsx
+28 -30
View File
@@ -141,55 +141,53 @@ const useApiReport = () => {
useEffect(() => {
// update sql for each query
if (totalRequests[1].changeQuery) {
totalRequests[1].changeQuery(PRESET_CONFIG.api.queries.totalRequests.sql(filters))
if (totalRequests.changeQuery) {
totalRequests.changeQuery(PRESET_CONFIG.api.queries.totalRequests.sql(filters))
}
if (topRoutes[1].changeQuery) {
topRoutes[1].changeQuery(PRESET_CONFIG.api.queries.topRoutes.sql(filters))
if (topRoutes.changeQuery) {
topRoutes.changeQuery(PRESET_CONFIG.api.queries.topRoutes.sql(filters))
}
if (errorCounts[1].changeQuery) {
errorCounts[1].changeQuery(PRESET_CONFIG.api.queries.errorCounts.sql(filters))
if (errorCounts.changeQuery) {
errorCounts.changeQuery(PRESET_CONFIG.api.queries.errorCounts.sql(filters))
}
if (topErrorRoutes[1].changeQuery) {
topErrorRoutes[1].changeQuery(PRESET_CONFIG.api.queries.topErrorRoutes.sql(filters))
if (topErrorRoutes.changeQuery) {
topErrorRoutes.changeQuery(PRESET_CONFIG.api.queries.topErrorRoutes.sql(filters))
}
if (responseSpeed[1].changeQuery) {
responseSpeed[1].changeQuery(PRESET_CONFIG.api.queries.responseSpeed.sql(filters))
if (responseSpeed.changeQuery) {
responseSpeed.changeQuery(PRESET_CONFIG.api.queries.responseSpeed.sql(filters))
}
if (topSlowRoutes[1].changeQuery) {
topSlowRoutes[1].changeQuery(PRESET_CONFIG.api.queries.topSlowRoutes.sql(filters))
if (topSlowRoutes.changeQuery) {
topSlowRoutes.changeQuery(PRESET_CONFIG.api.queries.topSlowRoutes.sql(filters))
}
}, [JSON.stringify(filters)])
const handleRefresh = async () => {
activeHooks.forEach(([_hookData, hookHandler]) => {
hookHandler.runQuery()
})
activeHooks.forEach(hook => hook.runQuery())
}
const handleSetParams = (params: Partial<LogsEndpointParams>) => {
activeHooks.forEach(([_hookData, hookHandler]) => {
hookHandler.setParams?.((prev: LogsEndpointParams) => ({ ...prev, ...params }))
activeHooks.forEach(hook => {
hook.setParams?.((prev: LogsEndpointParams) => ({ ...prev, ...params }))
})
}
const isLoading = activeHooks.some(([hookData]) => hookData.isLoading)
const isLoading = activeHooks.some(hook => hook.isLoading)
return {
data: {
totalRequests: totalRequests[0].logData,
errorCounts: errorCounts[0].logData,
responseSpeed: responseSpeed[0].logData,
topRoutes: topRoutes[0].logData,
topErrorRoutes: topErrorRoutes[0].logData,
topSlowRoutes: topSlowRoutes[0].logData,
totalRequests: totalRequests.logData,
errorCounts: errorCounts.logData,
responseSpeed: responseSpeed.logData,
topRoutes: topRoutes.logData,
topErrorRoutes: topErrorRoutes.logData,
topSlowRoutes: topSlowRoutes.logData,
},
params: {
totalRequests: totalRequests[0].params,
errorCounts: errorCounts[0].params,
responseSpeed: responseSpeed[0].params,
topRoutes: topRoutes[0].params,
topErrorRoutes: topErrorRoutes[0].params,
topSlowRoutes: topSlowRoutes[0].params,
totalRequests: totalRequests.params,
errorCounts: errorCounts.params,
responseSpeed: responseSpeed.params,
topRoutes: topRoutes.params,
topErrorRoutes: topErrorRoutes.params,
topSlowRoutes: topSlowRoutes.params,
},
mergeParams: handleSetParams,
filters,
studio/pages/project/[ref]/reports/query-performance.tsx
+19 -19
View File
@@ -31,17 +31,17 @@ const QueryPerformanceReport: NextPageWithLayout = () => {
const queryHitRate = hooks.queryHitRate()
const isLoading = [
mostFrequentlyInvoked[0].isLoading,
mostTimeConsuming[0].isLoading,
slowestExecutionTime[0].isLoading,
queryHitRate[0].isLoading,
mostFrequentlyInvoked.isLoading,
mostTimeConsuming.isLoading,
slowestExecutionTime.isLoading,
queryHitRate.isLoading,
].every((value) => value)
const handleRefresh = async () => {
mostFrequentlyInvoked[1].runQuery()
mostTimeConsuming[1].runQuery()
slowestExecutionTime[1].runQuery()
queryHitRate[1].runQuery()
mostFrequentlyInvoked.runQuery()
mostTimeConsuming.runQuery()
slowestExecutionTime.runQuery()
queryHitRate.runQuery()
}
const checkAlert = (
@@ -60,8 +60,8 @@ const QueryPerformanceReport: NextPageWithLayout = () => {
</div>
)
const indexHitRate = queryHitRate[0]?.data?.[0]?.ratio
const tableHitRate = queryHitRate[0]?.data?.[1]?.ratio
const indexHitRate = queryHitRate.data?.[0]?.ratio
const tableHitRate = queryHitRate.data?.[1]?.ratio
const showIndexWarning =
indexHitRate && tableHitRate && (indexHitRate <= 0.99 || tableHitRate <= 0.99)
@@ -130,7 +130,7 @@ const QueryPerformanceReport: NextPageWithLayout = () => {
: dangerAlert}
<div className="flex items-baseline">
<span className="text-3xl">
{(queryHitRate[0]?.data![0]?.ratio * 100).toFixed(2)}
{(queryHitRate?.data![0]?.ratio * 100).toFixed(2)}
</span>
<span className="text-xl">%</span>
</div>
@@ -138,7 +138,7 @@ const QueryPerformanceReport: NextPageWithLayout = () => {
</div>
<div className="w-1/2 bg-slate-200 rounded-md p-4">
{queryHitRate[0]?.data![1]?.name == 'table hit rate' && 'Table Hit Rate'}
{queryHitRate?.data![1]?.name == 'table hit rate' && 'Table Hit Rate'}
<div className="flex items-center gap-2">
{tableHitRate >= 0.99
? checkAlert
@@ -147,7 +147,7 @@ const QueryPerformanceReport: NextPageWithLayout = () => {
: dangerAlert}
<div className="flex items-baseline">
<span className="text-3xl">
{(queryHitRate[0]?.data![1]?.ratio * 100).toFixed(2)}
{(queryHitRate?.data![1]?.ratio * 100).toFixed(2)}
</span>
<span className="text-xl">%</span>
</div>
@@ -218,8 +218,8 @@ const QueryPerformanceReport: NextPageWithLayout = () => {
</>
}
body={
!isLoading && mostTimeConsuming && mostTimeConsuming[0]?.data ? (
mostTimeConsuming[0].data!.map((item, i) => {
!isLoading && mostTimeConsuming && mostTimeConsuming?.data ? (
mostTimeConsuming?.data!.map((item, i) => {
return (
<Table.tr key={i} hoverable className="relative">
<Table.td className="table-cell whitespace-nowrap w-36">
@@ -273,8 +273,8 @@ const QueryPerformanceReport: NextPageWithLayout = () => {
</>
}
body={
!isLoading && mostFrequentlyInvoked && mostFrequentlyInvoked[0]?.data ? (
mostFrequentlyInvoked[0].data!.map((item, i) => {
!isLoading && mostFrequentlyInvoked && mostFrequentlyInvoked?.data ? (
mostFrequentlyInvoked.data!.map((item, i) => {
return (
<Table.tr key={i} hoverable className="relative">
<Table.td className="table-cell whitespace-nowrap w-28">
@@ -336,8 +336,8 @@ const QueryPerformanceReport: NextPageWithLayout = () => {
</>
}
body={
!isLoading && slowestExecutionTime && slowestExecutionTime[0]?.data ? (
slowestExecutionTime[0].data!.map((item, i) => {
!isLoading && slowestExecutionTime && slowestExecutionTime?.data ? (
slowestExecutionTime.data!.map((item, i) => {
return (
<Table.tr key={i} hoverable className="relative">
<Table.td className="table-cell whitespace-nowrap w-24">