konnosquery-insights.tsx67 lines · main
| 1 | import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from 'ui' |
| 2 | |
| 3 | import { QueryInsights } from '@/components/interfaces/QueryInsights/QueryInsights' |
| 4 | import { REPORT_DATERANGE_HELPER_LABELS } from '@/components/interfaces/Reports/Reports.constants' |
| 5 | import { DefaultLayout } from '@/components/layouts/DefaultLayout' |
| 6 | import ObservabilityLayout from '@/components/layouts/ObservabilityLayout/ObservabilityLayout' |
| 7 | import { DatabaseSelector } from '@/components/ui/DatabaseSelector' |
| 8 | import { DocsButton } from '@/components/ui/DocsButton' |
| 9 | import { useReportDateRange } from '@/hooks/misc/useReportDateRange' |
| 10 | import { DOCS_URL } from '@/lib/constants' |
| 11 | import type { NextPageWithLayout } from '@/types' |
| 12 | |
| 13 | const PRESETS = [ |
| 14 | REPORT_DATERANGE_HELPER_LABELS.LAST_60_MINUTES, |
| 15 | REPORT_DATERANGE_HELPER_LABELS.LAST_3_HOURS, |
| 16 | REPORT_DATERANGE_HELPER_LABELS.LAST_24_HOURS, |
| 17 | ] |
| 18 | |
| 19 | const QueryInsightsReport: NextPageWithLayout = () => { |
| 20 | const { selectedDateRange, datePickerValue, datePickerHelpers, handleDatePickerChange } = |
| 21 | useReportDateRange(REPORT_DATERANGE_HELPER_LABELS.LAST_60_MINUTES) |
| 22 | |
| 23 | const handleSelect = (text: string) => { |
| 24 | const helper = datePickerHelpers.find((h) => h.text === text) |
| 25 | if (helper) { |
| 26 | handleDatePickerChange({ from: helper.calcFrom(), to: helper.calcTo(), isHelper: true, text }) |
| 27 | } |
| 28 | } |
| 29 | |
| 30 | return ( |
| 31 | <div className="h-full flex flex-col"> |
| 32 | <div className="w-full mb-0 flex lg:items-center justify-between gap-4 py-2 px-6 lg:flex-row flex-col border-b lg:h-[48px]"> |
| 33 | <h3 className="text-foreground text-xl prose">Query Insights</h3> |
| 34 | <div className="flex items-center gap-2 flex-wrap"> |
| 35 | <DocsButton |
| 36 | href={`${DOCS_URL}/guides/platform/performance#examining-query-performance`} |
| 37 | /> |
| 38 | <DatabaseSelector /> |
| 39 | <Select |
| 40 | value={datePickerValue.isHelper ? datePickerValue.text : undefined} |
| 41 | onValueChange={handleSelect} |
| 42 | > |
| 43 | <SelectTrigger size="tiny" className="w-[150px]"> |
| 44 | <SelectValue /> |
| 45 | </SelectTrigger> |
| 46 | <SelectContent align="end"> |
| 47 | {PRESETS.map((label) => ( |
| 48 | <SelectItem key={label} value={label}> |
| 49 | {label} |
| 50 | </SelectItem> |
| 51 | ))} |
| 52 | </SelectContent> |
| 53 | </Select> |
| 54 | </div> |
| 55 | </div> |
| 56 | <QueryInsights dateRange={selectedDateRange} /> |
| 57 | </div> |
| 58 | ) |
| 59 | } |
| 60 | |
| 61 | QueryInsightsReport.getLayout = (page) => ( |
| 62 | <DefaultLayout> |
| 63 | <ObservabilityLayout title="Query insights">{page}</ObservabilityLayout> |
| 64 | </DefaultLayout> |
| 65 | ) |
| 66 | |
| 67 | export default QueryInsightsReport |