diff --git a/apps/studio/components/interfaces/Settings/Logs/LogsPreviewer.tsx b/apps/studio/components/interfaces/Settings/Logs/LogsPreviewer.tsx index 12e6a7b7283..5531bba4621 100644 --- a/apps/studio/components/interfaces/Settings/Logs/LogsPreviewer.tsx +++ b/apps/studio/components/interfaces/Settings/Logs/LogsPreviewer.tsx @@ -22,6 +22,7 @@ import { useSelectedLog } from 'hooks/analytics/useSelectedLog' import useSingleLog from 'hooks/analytics/useSingleLog' import { LogsBarChart } from 'ui-patterns/LogsBarChart' import NoDataPlaceholder from 'components/ui/Charts/NoDataPlaceholder' +import dayjs from 'dayjs' /** * Acts as a container component for the entire log display @@ -154,14 +155,6 @@ export const LogsPreviewer = ({ iso_timestamp_start: nextStart, iso_timestamp_end: nextEnd, })) - router.push({ - pathname: router.pathname, - query: { - ...router.query, - its: nextStart, - ite: nextEnd, - }, - }) } else if (event === 'datepicker-change') { const shouldShowUpgradePrompt = maybeShowUpgradePrompt(from, subscription?.plan?.id) @@ -234,18 +227,25 @@ export const LogsPreviewer = ({ data={eventChartData} onBarClick={(datum) => { if (!datum?.timestamp) return + + const datumTimestamp = dayjs(datum.timestamp).toISOString() + + const start = dayjs(datumTimestamp).subtract(1, 'minute').toISOString() + const end = dayjs(datumTimestamp).add(1, 'minute').toISOString() + handleSearch('event-chart-bar-click', { - query: filters.search_query as string, - to: datum.timestamp.toString(), - from: null, + query: filters.search_query?.toString(), + to: end, + from: start, }) }} EmptyState={ - +
+

No data

+

+ It may take up to 24 hours for data to refresh +

+
} /> )} diff --git a/apps/studio/hooks/analytics/useLogsPreview.tsx b/apps/studio/hooks/analytics/useLogsPreview.tsx index cd98e62145f..babc968e005 100644 --- a/apps/studio/hooks/analytics/useLogsPreview.tsx +++ b/apps/studio/hooks/analytics/useLogsPreview.tsx @@ -161,15 +161,19 @@ function useLogsPreview({ const newCount = isResponseOk(countData) ? countData.result?.[0]?.count ?? 0 : 0 // chart data + const chartQuery = useMemo( + () => genChartQuery(table, params, filters), + [table, params.iso_timestamp_end, params.project, filters] + ) - const chartQuery = useMemo(() => genChartQuery(table, params, filters), [params, filters]) const chartUrl = useMemo(() => { return `${API_URL}/projects/${projectRef}/analytics/endpoints/logs.all?${genQueryParams({ - iso_timestamp_end: params.iso_timestamp_end, - project: params.project, + iso_timestamp_start: params.iso_timestamp_start ?? '', + iso_timestamp_end: params.iso_timestamp_end ?? '', + project: params.project ?? '', sql: chartQuery, - } as any)}` - }, [params, chartQuery]) + })}` + }, [projectRef, params.iso_timestamp_start, params.iso_timestamp_end, params.project, chartQuery]) const { data: eventChartResponse, refetch: refreshEventChart } = useQuery( [