From a18bca75ef8e272643a9100e82ff3f6f5fae2dab Mon Sep 17 00:00:00 2001 From: TzeYiing Date: Tue, 9 May 2023 19:59:51 +0900 Subject: [PATCH] chore: refactor useDbQuery and useLogsQuery --- .../interfaces/Reports/Reports.types.ts | 14 ----- .../interfaces/Reports/Reports.utils.tsx | 14 ++--- studio/hooks/analytics/useDbQuery.tsx | 25 ++++---- studio/hooks/analytics/useLogsQuery.tsx | 24 ++++---- .../project/[ref]/logs/explorer/index.tsx | 2 +- .../project/[ref]/reports/api-overview.tsx | 58 +++++++++---------- .../[ref]/reports/query-performance.tsx | 38 ++++++------ 7 files changed, 78 insertions(+), 97 deletions(-) diff --git a/studio/components/interfaces/Reports/Reports.types.ts b/studio/components/interfaces/Reports/Reports.types.ts index 201f62f712b..a13240a5125 100644 --- a/studio/components/interfaces/Reports/Reports.types.ts +++ b/studio/components/interfaces/Reports/Reports.types.ts @@ -7,20 +7,6 @@ export enum Presets { QUERY_PERFORMANCE = 'query_performance', } -export interface QueryDataBase { - isLoading: boolean - error: string -} -export interface DbQueryData 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 diff --git a/studio/components/interfaces/Reports/Reports.utils.tsx b/studio/components/interfaces/Reports/Reports.utils.tsx index 668031dd552..3182492f658 100644 --- a/studio/components/interfaces/Reports/Reports.utils.tsx +++ b/studio/components/interfaces/Reports/Reports.utils.tsx @@ -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 PresetHookResult> export const queriesFactory = ( diff --git a/studio/hooks/analytics/useDbQuery.tsx b/studio/hooks/analytics/useDbQuery.tsx index 1fab5b86eea..38a0e45a9dd 100644 --- a/studio/hooks/analytics/useDbQuery.tsx +++ b/studio/hooks/analytics/useDbQuery.tsx @@ -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 { + 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 diff --git a/studio/hooks/analytics/useLogsQuery.tsx b/studio/hooks/analytics/useLogsQuery.tsx index 99fc2c41713..22553558efd 100644 --- a/studio/hooks/analytics/useLogsQuery.tsx +++ b/studio/hooks/analytics/useLogsQuery.tsx @@ -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> @@ -24,7 +22,7 @@ export interface LogsQueryHandlers { const useLogsQuery = ( projectRef: string, initialParams: Partial = {} -): [LogsQueryData, LogsQueryHandlers] => { +): LogsQueryHook => { const defaultHelper = getDefaultHelper(EXPLORER_DATEPICKER_HELPERS) const [params, setParams] = useState({ 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 diff --git a/studio/pages/project/[ref]/logs/explorer/index.tsx b/studio/pages/project/[ref]/logs/explorer/index.tsx index a294f1d64b3..3b9a7d09f82 100644 --- a/studio/pages/project/[ref]/logs/explorer/index.tsx +++ b/studio/pages/project/[ref]/logs/explorer/index.tsx @@ -43,7 +43,7 @@ export const LogsExplorerPage: NextPageWithLayout = () => { const [warnings, setWarnings] = useState([]) 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, diff --git a/studio/pages/project/[ref]/reports/api-overview.tsx b/studio/pages/project/[ref]/reports/api-overview.tsx index a1742dbd7ea..2bf633a05b1 100644 --- a/studio/pages/project/[ref]/reports/api-overview.tsx +++ b/studio/pages/project/[ref]/reports/api-overview.tsx @@ -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) => { - 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, diff --git a/studio/pages/project/[ref]/reports/query-performance.tsx b/studio/pages/project/[ref]/reports/query-performance.tsx index 615b8b016b3..e23ede36487 100644 --- a/studio/pages/project/[ref]/reports/query-performance.tsx +++ b/studio/pages/project/[ref]/reports/query-performance.tsx @@ -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 = () => { ) - 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}
- {(queryHitRate[0]?.data![0]?.ratio * 100).toFixed(2)} + {(queryHitRate?.data![0]?.ratio * 100).toFixed(2)} %
@@ -138,7 +138,7 @@ const QueryPerformanceReport: NextPageWithLayout = () => {
- {queryHitRate[0]?.data![1]?.name == 'table hit rate' && 'Table Hit Rate'} + {queryHitRate?.data![1]?.name == 'table hit rate' && 'Table Hit Rate'}
{tableHitRate >= 0.99 ? checkAlert @@ -147,7 +147,7 @@ const QueryPerformanceReport: NextPageWithLayout = () => { : dangerAlert}
- {(queryHitRate[0]?.data![1]?.ratio * 100).toFixed(2)} + {(queryHitRate?.data![1]?.ratio * 100).toFixed(2)} %
@@ -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 ( @@ -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 ( @@ -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 (