Fix conversions realtime (#6456)

* realtime -> realtime_30m for conversions

* tests + render last 30min pill only for conversions

Author: RobertJoonas

assets/js/dashboard/stats/behaviours/conversions.tsx

@@ -10,14 +10,29 @@ import {
   BreakdownReportKey
 } from '../reports/reports-config'
 import { QueryApiResponse, QueryResultRow } from '../../api'
-import { NonTimeDimension } from '../../stats-query'
+import { NonTimeDimension, StatsQuery } from '../../stats-query'
 import { FilterInfo } from '../../components/drilldown-link'
 import {
   BEHAVIOURS_BAR_COLOR,
   BEHAVIOURS_METRIC_COLUMN_WIDTH,
   BEHAVIOURS_METRICS_HIDDEN_ON_MOBILE
 } from '.'
 import { useSiteContext } from '../../site-context'
+import {
+  defaultGetStatsQuery,
+  StatsReportQueryKey
+} from '../../hooks/use-query-api'
+import { DashboardPeriod } from '../../dashboard-time-periods'
+
+export function getConversionsStatsQuery(
+  queryKey: StatsReportQueryKey
+): StatsQuery {
+  const statsQuery = defaultGetStatsQuery(queryKey)
+  if (statsQuery.date_range === DashboardPeriod.realtime) {
+    return { ...statsQuery, date_range: DashboardPeriod.realtime_30m }
+  }
+  return statsQuery
+}
 
 type ConversionsProps = {
   onDataReady?: (data: QueryApiResponse) => void
@@ -63,6 +78,7 @@ export default function Conversions({
       hideMetricsIfAllNull={['total_revenue', 'average_revenue']}
       hideMetricsOnMobile={BEHAVIOURS_METRICS_HIDDEN_ON_MOBILE}
       metricColumnWidth={BEHAVIOURS_METRIC_COLUMN_WIDTH}
+      getStatsQuery={getConversionsStatsQuery}
     />
   )
 }

assets/js/dashboard/stats/behaviours/index.tsx

@@ -619,7 +619,9 @@ function Behaviours({
               </TabButton>
             )}
           </TabWrapper>
-          {isRealtime() && <Pill className="-mt-1">last 30min</Pill>}
+          {isRealtime() && mode === Mode.CONVERSIONS && (
+            <Pill className="-mt-1">last 30min</Pill>
+          )}
           {[Mode.CONVERSIONS, Mode.PROPS].includes(mode) ? (
             <ImportedWarningBubble
               queryApiResponse={currentQueryApiResponse}

assets/js/dashboard/stats/breakdowns.tsx

@@ -16,12 +16,14 @@ import {
 import { Filter } from '../dashboard-state'
 import classNames from 'classnames'
 import { DIRECT_NONE } from './sources'
+import { StatsReportQueryKey } from '../hooks/use-query-api'
 
 export type SharedBreakdownReportProps = {
   dimensionLabel: string
   dimensions: NonTimeDimension[]
   metrics: Metric[]
   alwaysOnFilters?: ApiFilter[]
+  getStatsQuery?: (queryKey: StatsReportQueryKey) => StatsQuery
   /**
    * When true, `percentage` is shown inline inside the Visitors
    * cell rather than as its own column. Set to false for reports that want

assets/js/dashboard/stats/modals/conversions.tsx

@@ -10,7 +10,10 @@ import {
   BREAKDOWN_REPORTS,
   BreakdownReportKey
 } from '../reports/reports-config'
-import { getGoalsFilterInfo } from '../behaviours/conversions'
+import {
+  getConversionsStatsQuery,
+  getGoalsFilterInfo
+} from '../behaviours/conversions'
 import { useSiteContext } from '../../site-context'
 
 function ConversionsModal() {
@@ -34,6 +37,7 @@ function ConversionsModal() {
         defaultOrderBy={[['visitors', 'desc']]}
         DimensionElement={GoalsDimensionCell}
         hideMetricsIfAllNull={['total_revenue', 'average_revenue']}
+        getStatsQuery={getConversionsStatsQuery}
       />
     </Modal>
   )

assets/js/dashboard/stats/modals/details-breakdown.tsx

@@ -94,7 +94,8 @@ export function DetailsBreakdown({
   searchEnabled = true,
   onDataReady,
   bundlePercentageWithVisitors = true,
-  hideMetricsIfAllNull
+  hideMetricsIfAllNull,
+  getStatsQuery
 }: DetailsBreakdownProps) {
   const site = useSiteContext()
   const { dashboardState } = useDashboardStateContext()
@@ -135,7 +136,9 @@ export function DetailsBreakdown({
     }
   ]
 
-  const apiState = useSearchAndPaginateQueryAPI(site, statsReportQueryKey)
+  const apiState = useSearchAndPaginateQueryAPI(site, statsReportQueryKey, {
+    getStatsQuery
+  })
 
   useEffect(() => {
     const pages = apiState.data?.pages

assets/js/dashboard/stats/reports/index-breakdown.tsx

@@ -68,7 +68,8 @@ export function IndexBreakdown({
   metricColumnWidth = DEFAULT_METRIC_COLUMN_WIDTH,
   bundlePercentageWithVisitors = true,
   hideMetricsIfAllNull,
-  hideMetricsOnMobile
+  hideMetricsOnMobile,
+  getStatsQuery
 }: IndexBreakdownProps) {
   const site = useSiteContext()
   const { dashboardState } = useDashboardStateContext()
@@ -91,7 +92,7 @@ export function IndexBreakdown({
   const { apiState, isRealtimeSilentUpdate } = useQueryApi(
     site,
     statsReportQueryKey,
-    { enabled: visible }
+    { enabled: visible, getStatsQuery }
   )
 
   useEffect(() => {

e2e/tests/dashboard/behaviours.spec.ts

@@ -25,6 +25,7 @@ import {
 } from '../test-utils'
 
 const getReport = (page: Page) => page.getByTestId('report-behaviours')
+const LAST_30MIN_PILL = 'last 30min'
 
 test('special goals', async ({ page, request }, testInfo) => {
   test.slow(
@@ -564,8 +565,8 @@ test('goals breakdown', async ({ page, request }) => {
         revenue_reporting_currency: 'EUR',
         timestamp: { minutesAgo: 59 }
       },
-      { user_id: 124, name: 'add_site', timestamp: { minutesAgo: 50 } },
-      { user_id: 125, name: 'add_site', timestamp: { minutesAgo: 50 } }
+      { user_id: 124, name: 'add_site', timestamp: { minutesAgo: 15 } },
+      { user_id: 125, name: 'add_site', timestamp: { minutesAgo: 2 } }
     ]
   })
 
@@ -709,6 +710,32 @@ test('goals breakdown', async ({ page, request }) => {
 
     await closeModalButton(page).click()
   })
+
+  await test.step('realtime goal index breakdown displays stats from last 30min', async () => {
+    await page.goto('/' + domain + '?period=realtime', { waitUntil: 'commit' })
+    await report.getByTestId('report-end').scrollIntoViewIfNeeded()
+
+    await expect(goalsTabButton).toHaveAttribute('data-active', 'true')
+    await expect(report.getByText(LAST_30MIN_PILL)).toBeVisible()
+
+    await expectHeaders(report, ['Goal', 'Uniques', 'Total', 'CR'])
+
+    await expectRows(report, ['Add a site'])
+    await expectMetricValues(report, 'Add a site', ['2', '2', '100%'])
+  })
+
+  await test.step('realtime goals modal displays stats from last 30min', async () => {
+    await detailsLink(report).click()
+
+    await expect(
+      modal(page).getByRole('heading', { name: 'Goal conversions' })
+    ).toBeVisible()
+
+    await expectRows(modal(page), ['Add a site'])
+    await expectMetricValues(modal(page), 'Add a site', ['2', '2', '100%'])
+
+    await closeModalButton(page).click()
+  })
 })
 
 test('props breakdown', async ({ page, request }) => {
@@ -722,6 +749,7 @@ test('props breakdown', async ({ page, request }) => {
       {
         name: 'pageview',
         pathname: '/page',
+        timestamp: { minutesAgo: 15 },
         'meta.key': [
           'logged_in',
           'browser_language',
@@ -752,12 +780,14 @@ test('props breakdown', async ({ page, request }) => {
       {
         name: 'pageview',
         pathname: '/page',
+        timestamp: { minutesAgo: 1 },
         'meta.key': ['logged_in', 'browser_language'],
         'meta.value': ['false', 'en_US']
       },
       {
         name: 'pageview',
         pathname: '/page',
+        timestamp: { minutesAgo: 2 },
         'meta.key': ['logged_in', 'browser_language'],
         'meta.value': ['true', 'es']
       }
@@ -768,7 +798,7 @@ test('props breakdown', async ({ page, request }) => {
 
   await addAllCustomProps({ page, domain })
 
-  await page.goto('/' + domain, { waitUntil: 'commit' })
+  await page.goto(`/${domain}?period=all`, { waitUntil: 'commit' })
 
   const propsTabButton = tabButtonWithDropdown(report, 'Properties')
 
@@ -854,6 +884,36 @@ test('props breakdown', async ({ page, request }) => {
     await expectMetricValues(report, 'en_US', ['2', '2', '66.7%'])
     await expectMetricValues(report, 'es', ['1', '1', '33.3%'])
   })
+
+  await page.goto('/' + domain + '?period=realtime', { waitUntil: 'commit' })
+  await report.getByTestId('report-end').scrollIntoViewIfNeeded()
+
+  await test.step('realtime props index breakdown displays stats from last 5min', async () => {
+    await propsTabButton.click()
+    await dropdown(report)
+      .getByRole('button', { name: 'browser_language' })
+      .click()
+
+    await expect(report.getByText(LAST_30MIN_PILL)).toBeHidden()
+
+    await expectHeaders(report, ['browser_language', 'Visitors', 'Events', '%'])
+
+    await expectRows(report, ['en_US', 'es'])
+    await expectMetricValues(report, 'en_US', ['1', '1', '50%'])
+  })
+
+  await test.step('realtime props details modal displays stats from last 5min', async () => {
+    await detailsLink(report).click()
+
+    await expect(
+      modal(page).getByRole('heading', { name: 'Custom property breakdown' })
+    ).toBeVisible()
+
+    await expectRows(modal(page), ['en_US', 'es'])
+    await expectMetricValues(modal(page), 'en_US', ['1', '1', '50%'])
+
+    await closeModalButton(page).click()
+  })
 })
 
 test('funnels', async ({ page, request }) => {