Files
supabase/apps/studio/data/reports/api-report-query.ts
Alaister Young 70da0f1d1d chore: cleanup packages (#27770)
* chore: cleanup packages

- Avoid circular imports
- Export API-types as types
- pg-format without depending on Node internal Buffer (not browser-compatible)
- Avoid importing from barrel files in ui dir

* chore: avoid barrel file imports in studio (#27771)

* chore: avoid barrel file imports

- Removes some unused imports
- Avoids barrel file import for faster builds + less memory

* add eslint rule

* type fixes

* delete layouts barrel

* delete components/grid barrel file

* delete components/grid/utils barrel file

* delete components/grid/components/common barrel file

* delete components/grid/components/editor barrel file

* delete components/grid/components/formatter barrel file

* delete components/grid/components/grid barrel file

* delete components/grid/components/header/filter barrel file

* remote components/grid/store barrel file

* remove components/interfaces/Auth/Policies barrel file

* delete components/interfaces/Settings/Logs barrel file

* delete components/ui/CodeEditor barrel file

* delete components/ui/Forms barrel file

* delete components/ui/Shimmers barrel file

* delete data/analytics barrel file

* delete hooks barrel file

* cleanup lib/common/fetch barrel file

* final * barral files cleanup

* global react-data-grid styles

* remove console.log

---------

Co-authored-by: Kevin Grüneberg <k.grueneberg1994@gmail.com>

* fix build

---------

Co-authored-by: Kevin Grüneberg <k.grueneberg1994@gmail.com>
2024-07-04 14:48:10 +08:00

150 lines
5.0 KiB
TypeScript

import { isEqual } from 'lodash'
import { useEffect, useState } from 'react'
import { useParams } from 'common'
import { PRESET_CONFIG } from 'components/interfaces/Reports/Reports.constants'
import { ReportFilterItem } from 'components/interfaces/Reports/Reports.types'
import { queriesFactory } from 'components/interfaces/Reports/Reports.utils'
import type { LogsEndpointParams } from 'components/interfaces/Settings/Logs/Logs.types'
import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext'
import { useDatabaseSelectorStateSnapshot } from 'state/database-selector'
export const useApiReport = () => {
const { project } = useProjectContext()
const { ref: projectRef } = useParams()
const state = useDatabaseSelectorStateSnapshot()
const identifier = state.selectedDatabaseId
const [filters, setFilters] = useState<ReportFilterItem[]>([])
const queryHooks = queriesFactory<keyof typeof PRESET_CONFIG.api.queries>(
PRESET_CONFIG.api.queries,
projectRef ?? 'default'
)
const totalRequests = queryHooks.totalRequests()
const topRoutes = queryHooks.topRoutes()
const errorCounts = queryHooks.errorCounts()
const topErrorRoutes = queryHooks.topErrorRoutes()
const responseSpeed = queryHooks.responseSpeed()
const topSlowRoutes = queryHooks.topSlowRoutes()
const networkTraffic = queryHooks.networkTraffic()
const activeHooks = [
totalRequests,
topRoutes,
errorCounts,
topErrorRoutes,
responseSpeed,
topSlowRoutes,
networkTraffic,
]
const addFilter = (filter: ReportFilterItem) => {
// use a deep equal when comparing objects.
if (filters.some((f) => isEqual(f, filter))) return
setFilters((prev) =>
[...prev, filter].sort((a, b) => {
const keyA = a.key.toLowerCase()
const keyB = b.key.toLowerCase()
if (keyA < keyB) {
return -1
}
if (keyA > keyB) {
return 1
}
return 0
})
)
}
const removeFilter = (filter: ReportFilterItem) => removeFilters([filter])
const removeFilters = (toRemove: ReportFilterItem[]) => {
setFilters((prev) => {
return prev.filter((f) => !toRemove.find((r) => isEqual(f, r)))
})
}
// [Joshen] Keeping database selector separate from filter state, and merging them here for simplicity
const formattedFilters: ReportFilterItem[] = [
...filters,
...(identifier !== undefined && identifier !== project?.ref
? [{ key: 'identifier', value: `'${identifier}'`, compare: 'is' } as ReportFilterItem]
: []),
]
useEffect(() => {
// update sql for each query
if (totalRequests.changeQuery) {
totalRequests.changeQuery(PRESET_CONFIG.api.queries.totalRequests.sql(formattedFilters))
}
if (topRoutes.changeQuery) {
topRoutes.changeQuery(PRESET_CONFIG.api.queries.topRoutes.sql(formattedFilters))
}
if (errorCounts.changeQuery) {
errorCounts.changeQuery(PRESET_CONFIG.api.queries.errorCounts.sql(formattedFilters))
}
if (topErrorRoutes.changeQuery) {
topErrorRoutes.changeQuery(PRESET_CONFIG.api.queries.topErrorRoutes.sql(formattedFilters))
}
if (responseSpeed.changeQuery) {
responseSpeed.changeQuery(PRESET_CONFIG.api.queries.responseSpeed.sql(formattedFilters))
}
if (topSlowRoutes.changeQuery) {
topSlowRoutes.changeQuery(PRESET_CONFIG.api.queries.topSlowRoutes.sql(formattedFilters))
}
if (networkTraffic.changeQuery) {
networkTraffic.changeQuery(PRESET_CONFIG.api.queries.networkTraffic.sql(formattedFilters))
}
}, [JSON.stringify(formattedFilters)])
const handleRefresh = async () => {
activeHooks.forEach((hook) => hook.runQuery())
}
const handleSetParams = (params: Partial<LogsEndpointParams>) => {
activeHooks.forEach((hook) => {
hook.setParams?.((prev: LogsEndpointParams) => ({ ...prev, ...params }))
})
}
const isLoading = activeHooks.some((hook) => hook.isLoading)
return {
data: {
totalRequests: totalRequests.logData,
errorCounts: errorCounts.logData,
responseSpeed: responseSpeed.logData,
topRoutes: topRoutes.logData,
topErrorRoutes: topErrorRoutes.logData,
topSlowRoutes: topSlowRoutes.logData,
networkTraffic: networkTraffic.logData,
},
params: {
totalRequests: totalRequests.params,
errorCounts: errorCounts.params,
responseSpeed: responseSpeed.params,
topRoutes: topRoutes.params,
topErrorRoutes: topErrorRoutes.params,
topSlowRoutes: topSlowRoutes.params,
networkTraffic: networkTraffic.params,
},
error: {
totalRequest: totalRequests.error,
errorCounts: errorCounts.error,
responseSpeed: responseSpeed.error,
topRoutes: topRoutes.error,
topErrorRoute: topErrorRoutes.error,
topSlowRoutes: topSlowRoutes.error,
networkTraffic: networkTraffic.error,
},
mergeParams: handleSetParams,
filters,
addFilter,
removeFilter,
removeFilters,
isLoading,
refresh: handleRefresh,
}
}