diff --git a/apps/studio/components/interfaces/DataWarehouse/WarehouseCollectionDetail.tsx b/apps/studio/components/interfaces/DataWarehouse/WarehouseCollectionDetail.tsx index 3311e761247..a879f063df5 100644 --- a/apps/studio/components/interfaces/DataWarehouse/WarehouseCollectionDetail.tsx +++ b/apps/studio/components/interfaces/DataWarehouse/WarehouseCollectionDetail.tsx @@ -20,28 +20,27 @@ import { DatetimeHelper } from '../Settings/Logs/Logs.types' import dayjs from 'dayjs' import { useKeyboardShortcuts } from 'components/grid/components/common/Hooks' -const djs = dayjs() const INTERVALS: DatetimeHelper[] = [ { text: 'Last hour', - calcFrom: () => djs.subtract(1, 'hour').toISOString(), - calcTo: () => djs.toISOString(), + calcFrom: () => dayjs().subtract(1, 'hour').toISOString(), + calcTo: () => dayjs().toISOString(), default: true, }, { text: 'Last 12 hours', - calcFrom: () => djs.subtract(12, 'hour').toISOString(), - calcTo: () => djs.toISOString(), + calcFrom: () => dayjs().subtract(12, 'hour').toISOString(), + calcTo: () => dayjs().toISOString(), }, { text: 'Last day', - calcFrom: () => djs.subtract(1, 'day').toISOString(), - calcTo: () => djs.toISOString(), + calcFrom: () => dayjs().subtract(1, 'day').toISOString(), + calcTo: () => dayjs().toISOString(), }, { text: 'Last 7 days', - calcFrom: () => djs.subtract(7, 'day').toISOString(), - calcTo: () => djs.toISOString(), + calcFrom: () => dayjs().subtract(7, 'day').toISOString(), + calcTo: () => dayjs().toISOString(), }, ] @@ -57,51 +56,43 @@ export const WarehouseCollectionDetail = () => { { projectRef }, { enabled: hasWarehouse } ) - const collection = (collections || []).find((c) => c.token === collectionToken) - const [params, setParams] = useState({ - sql: ``, - }) + const collection = collections?.find((c) => c.token === collectionToken) const [search, setSearch] = useState('') - const [filters, setFilters] = useState({ limit: 100, offset: 0, search: '', interval: { - to: INTERVALS[0].calcTo(), - from: INTERVALS[0].calcFrom(), + to: INTERVALS[0].calcTo, + from: INTERVALS[0].calcFrom, }, }) + const [sql, setSQL] = useState('') useEffect(() => { if (collection) { - const from = filters.interval?.from - const to = filters.interval?.to + const from = filters.interval.from() + const to = filters.interval.to() - const sql = `select id, timestamp, event_message from \`${collection.name}\` + const sql = `select id, timestamp from \`${collection.name}\` where timestamp >= TIMESTAMP('${from}') -${to ? `and timestamp <= TIMESTAMP('${to}')` : ''} -and event_message like '%${filters.search}%' +and timestamp <= TIMESTAMP('${to}') order by timestamp desc limit ${filters.limit} offset ${filters.offset} ` - setParams((prevParams) => ({ - ...prevParams, - sql, - })) + setSQL(sql) } - }, [collection, filters]) + }, [filters.interval, filters.limit, filters.offset, collection]) const { isLoading: queryLoading, data: queryData, - refetch, isError, isRefetching, } = useWarehouseQueryQuery( - { ref: projectRef, sql: params.sql }, + { ref: projectRef, sql }, { - enabled: !!params.sql && hasWarehouse, + enabled: !!sql && hasWarehouse, } ) @@ -128,14 +119,20 @@ order by timestamp desc limit ${filters.limit} offset ${filters.offset} const isLoading = queryLoading || collectionsLoading || isRefetching - function handleSubmit(e: React.FormEvent) { - e.preventDefault() - setFilters({ ...filters, search }) - refetch() + function refreshResults(e?: React.FormEvent) { + e?.preventDefault() + setFilters({ + ...filters, + search, + interval: { + to: () => dayjs().toISOString(), + from: () => filters.interval.from() || dayjs().subtract(1, 'hour').toISOString(), + }, + }) } const queryUrl = `/project/${projectRef}/logs/explorer?q=${encodeURIComponent( - params.sql || '' + sql || '' )}&source=warehouse` useKeyboardShortcuts( @@ -163,7 +160,7 @@ order by timestamp desc limit ${filters.limit} offset ${filters.offset}
-
+

{collection?.name}

@@ -183,7 +180,7 @@ order by timestamp desc limit ${filters.limit} offset ${filters.offset} Refresh R - setSearch(e.target.value)} - /> + /> */} setFilters({ ...filters, interval: { - to: e.to || '', - from: e.from || '', + to: () => e.to || '', + from: () => e.from || '', }, }) } @@ -231,7 +228,7 @@ order by timestamp desc limit ${filters.limit} offset ${filters.offset} open={testDialogOpen} onOpenChange={setTestDialogOpen} onSubmit={() => { - refetch() + refreshResults() setTestDialogOpen(false) }} /> @@ -252,22 +249,26 @@ order by timestamp desc limit ${filters.limit} offset ${filters.offset} projectRef={projectRef} isLoading={isLoading} data={results} - params={params} + params={{ sql }} maxHeight="calc(100vh - 139px)" showHeader={false} emptyState={ - setTestDialogOpen(true)} - > - <> -

- No events match your current search criteria.
- Try adjusting your filters or send a test event to populate this collection. -

- + +
+

Try adjusting your filters, send a test event or refresh the results.

+
+ + +
+
} /> diff --git a/apps/studio/components/interfaces/DataWarehouse/WarehouseMenuItem.tsx b/apps/studio/components/interfaces/DataWarehouse/WarehouseMenuItem.tsx index ad8bbf2e638..1b72cc4fc68 100644 --- a/apps/studio/components/interfaces/DataWarehouse/WarehouseMenuItem.tsx +++ b/apps/studio/components/interfaces/DataWarehouse/WarehouseMenuItem.tsx @@ -99,6 +99,9 @@ export const WarehouseMenuItem = ({ item }: Props) => {