konnosDashboard
QueryInsights.tsx95 lines · main
1import { useParams } from 'common'
2import dayjs from 'dayjs'
3import utc from 'dayjs/plugin/utc'
4import { useMemo, useState } from 'react'
5
6import { useSupamonitorIndexAdvisor } from './hooks/useSupamonitorIndexAdvisor'
7import { getSupamonitorLogsQuery } from './QueryInsights.constants'
8import { QueryInsightsChart } from './QueryInsightsChart/QueryInsightsChart'
9import { QueryInsightsHealth } from './QueryInsightsHealth/QueryInsightsHealth'
10import { QueryInsightsTable } from './QueryInsightsTable/QueryInsightsTable'
11import {
12 aggregateLogsByQuery,
13 filterSystemLogs,
14 parseSupamonitorLogs,
15 transformLogsToChartData,
16} from './utils/supamonitor.utils'
17import useLogsQuery from '@/hooks/analytics/useLogsQuery'
18
19dayjs.extend(utc)
20
21interface QueryInsightsProps {
22 dateRange?: {
23 period_start: { date: string; time_period: string }
24 period_end: { date: string; time_period: string }
25 interval: string
26 }
27}
28
29export const QueryInsights = ({ dateRange }: QueryInsightsProps) => {
30 const { ref } = useParams()
31
32 const effectiveDateRange = useMemo(() => {
33 if (dateRange) {
34 return {
35 iso_timestamp_start: dateRange.period_start.date,
36 iso_timestamp_end: dateRange.period_end.date,
37 }
38 }
39 const end = dayjs.utc()
40 const start = end.subtract(1, 'hour')
41 return {
42 iso_timestamp_start: start.toISOString(),
43 iso_timestamp_end: end.toISOString(),
44 }
45 }, [dateRange])
46
47 const sql = useMemo(
48 () =>
49 getSupamonitorLogsQuery(
50 effectiveDateRange.iso_timestamp_start,
51 effectiveDateRange.iso_timestamp_end
52 ),
53 [effectiveDateRange]
54 )
55
56 const { logData, isLoading } = useLogsQuery(ref as string, {
57 sql,
58 iso_timestamp_start: effectiveDateRange.iso_timestamp_start,
59 iso_timestamp_end: effectiveDateRange.iso_timestamp_end,
60 })
61
62 const [selectedQuery, setSelectedQuery] = useState<string | null>(null)
63
64 const parsedLogs = useMemo(() => parseSupamonitorLogs(logData || []), [logData])
65 const filteredLogs = useMemo(() => filterSystemLogs(parsedLogs), [parsedLogs])
66 const chartData = useMemo(() => transformLogsToChartData(filteredLogs), [filteredLogs])
67 const selectedChartData = useMemo(
68 () =>
69 selectedQuery
70 ? transformLogsToChartData(
71 filteredLogs.filter((log) => log.query?.replace(/\s+/g, ' ').trim() === selectedQuery)
72 )
73 : undefined,
74 [filteredLogs, selectedQuery]
75 )
76 const aggregatedData = useMemo(() => aggregateLogsByQuery(filteredLogs), [filteredLogs])
77 const enrichedData = useSupamonitorIndexAdvisor(aggregatedData)
78
79 return (
80 <div className="flex flex-col flex-1 min-h-0">
81 <QueryInsightsHealth data={enrichedData} isLoading={isLoading} />
82 <QueryInsightsChart
83 chartData={chartData}
84 selectedChartData={selectedChartData}
85 isLoading={isLoading}
86 />
87 <QueryInsightsTable
88 data={enrichedData}
89 isLoading={isLoading}
90 currentSelectedQuery={selectedQuery}
91 onCurrentSelectQuery={setSelectedQuery}
92 />
93 </div>
94 )
95}