import {useDiscoverQuery} from 'sentry/utils/discover/discoverQuery'; import EventView from 'sentry/utils/discover/eventView'; import {useLocation} from 'sentry/utils/useLocation'; import useOrganization from 'sentry/utils/useOrganization'; import usePageFilters from 'sentry/utils/usePageFilters'; import { BrowserStarfishFields, useBrowserModuleFilters, } from 'sentry/views/performance/browser/useBrowserFilters'; import type {ValidSort} from 'sentry/views/performance/browser/useBrowserSort'; export const useInteractionsQuery = ({sort}: {sort: ValidSort}) => { const pageFilters = usePageFilters(); const browserFilters = useBrowserModuleFilters(); const location = useLocation(); const {slug: orgSlug} = useOrganization(); const queryConditions = [ 'has:interactionElement', browserFilters.page ? `transaction:"${browserFilters.page}"` : '', browserFilters.component ? `interactionElement:"${browserFilters.component}"` : '', browserFilters['transaction.op'] ? `transaction.op:"${browserFilters[BrowserStarfishFields.TRANSACTION_OP]}"` : '', ]; // TODO - we should be using metrics data here const eventView = EventView.fromNewQueryWithPageFilters( { fields: [ 'interactionElement', 'transaction', 'transaction.op', 'p75(transaction.duration)', 'count()', ], name: 'Interaction module - interactions table', query: queryConditions.join(' '), orderby: '-count', version: 2, }, pageFilters.selection ); if (sort) { eventView.sorts = [sort]; } const result = useDiscoverQuery({eventView, limit: 50, location, orgSlug}); const data = result?.data?.data.map(row => ({ transaction: row.transaction.toString(), interactionElement: row.interactionElement.toString(), 'transaction.op': row['transaction.op'].toString(), 'p75(transaction.duration)': row['p75(transaction.duration)'] as number, 'count()': row['count()'] as number, })); return {...result, data: data || []}; };