Files
kemal.earth 70a64f8c00 feat(studio): query performance metrics chart (#39431)
* feat: setup chart area and tabs

This sets up the area where we can expect the insights chart as well as the tabs mechanism.

* feat: parse pg_stat_monitor logs as json

* feat: create query perf chart utils and move transfrom function

Created a utils file for our QueryPerformanceChart component. This moves the logs to JSON transform function there.

* feat: add timerange to chart

* feat: add date selector to query perf overview

This adds the selector to the top right of the page allowing the user to switch between last hour, 3 hours and 24 hours

* feat: modify chart component to accomodate hiding bits

* feat: add metrics to each tab

* chore: update to 60 min by default and some css

* feat: centralise data parsing for logs

* feat: clean up filters bar

This rewires the export to give you the aggregate pg_stat_monitor data. Also removes unused buttons and filters.

* feat: percentiles for query latency chart

* feat: filter out non evenets from pg_stat_monitor logs

* feat: utils for cache misses and hits

* feat: add selected query to chart on click

* feat: add click through to query panel

* chore: tidy up files

* chore: distinction between selected and open panel

* feat: move query performance fully into reports area

* fix: preserve query params on reports link

* fix: remove right icon syntax in report menu

* chore: remove cache misses from cache chart

* refactor: backwards compatibility for statements if right db version isnt available

* chore: delete randomly generated empty file

* chore: tidy up unused imports and vars

* chore: remove console logs

* chore: remove isMounted from query perf

* fix: cmd k query perf path

* feat: simplify query latency only p50 and p95

This seems to give us a more accurate reading as we can calculate these two

* fix: cache hit rate not showing inside query details

* chore: chart bg colour adjust

So it contrasts a little better on light mode.

* feat: show selected query on other verticals

* feat: bring back symlink in advisors
2025-10-15 13:39:29 +01:00

93 lines
2.9 KiB
TypeScript

import { useMemo } from 'react'
import { useParams } from 'common'
import { COMMAND_MENU_SECTIONS } from 'components/interfaces/App/CommandMenu/CommandMenu.utils'
import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled'
import type { CommandOptions, ICommand } from 'ui-patterns/CommandMenu'
import { orderSectionFirst, useQuery, useRegisterCommands } from 'ui-patterns/CommandMenu'
const QUERY_PERFORMANCE_COMMAND_ID = 'nav-reports-query-performance'
export function useReportsGotoCommands(options?: CommandOptions) {
let { ref } = useParams()
ref ||= '_'
const { reportsAll } = useIsFeatureEnabled(['reports:all'])
const commandQuery = useQuery()?.toLowerCase() ?? ''
const prioritizeQueryPerformance = commandQuery.includes('query')
const orderQueryPerformanceCommand = useMemo(() => {
if (!prioritizeQueryPerformance) return undefined
return (existingCommands: ICommand[], incomingCommands: ICommand[]) => {
const filteredExisting = existingCommands.filter(
(command) => command.id !== QUERY_PERFORMANCE_COMMAND_ID
)
return [...incomingCommands, ...filteredExisting]
}
}, [prioritizeQueryPerformance])
const orderNavigateSection = useMemo<CommandOptions['orderSection'] | undefined>(() => {
return prioritizeQueryPerformance ? orderSectionFirst : options?.orderSection
}, [options?.orderSection, prioritizeQueryPerformance])
useRegisterCommands(
COMMAND_MENU_SECTIONS.NAVIGATE,
reportsAll
? [
{
id: 'nav-reports',
name: 'Reports',
route: `/project/${ref}/reports`,
defaultHidden: true,
},
{
id: 'nav-reports-api',
name: 'API Reports',
route: `/project/${ref}/reports/api-overview`,
defaultHidden: true,
},
{
id: 'nav-reports-storage',
name: 'Storage Reports',
route: `/project/${ref}/reports/storage`,
defaultHidden: true,
},
{
id: 'nav-reports-database',
name: 'Database Reports',
route: `/project/${ref}/reports/database`,
defaultHidden: true,
},
]
: [],
{
...options,
orderSection: orderNavigateSection,
deps: [ref, orderNavigateSection, ...(options?.deps ?? [])],
}
)
useRegisterCommands(
COMMAND_MENU_SECTIONS.NAVIGATE,
reportsAll
? [
{
id: QUERY_PERFORMANCE_COMMAND_ID,
name: 'Query Performance Reports',
route: `/project/${ref}/reports/query-performance`,
defaultHidden: true,
},
]
: [],
{
...options,
orderCommands: orderQueryPerformanceCommand ?? options?.orderCommands,
orderSection: orderNavigateSection,
deps: [ref, orderQueryPerformanceCommand, orderNavigateSection, ...(options?.deps ?? [])],
}
)
}