Merge remote-tracking branch 'origin/dev' into dev

src/app/(main)/teams/[teamId]/reports/utm/page.tsx

@@ -0,0 +1,3 @@
+import Page from 'app/(main)/reports/utm/page';
+
+export default Page;

src/app/(main)/teams/[teamId]/websites/[websiteId]/event-data/page.tsx

@@ -0,0 +1,3 @@
+import Page from 'app/(main)/websites/[websiteId]/event-data/page';
+
+export default Page;

src/app/(main)/teams/[teamId]/websites/[websiteId]/realtime/page.tsx

@@ -0,0 +1,3 @@
+import Page from 'app/(main)/websites/[websiteId]/realtime/page';
+
+export default Page;

src/app/(main)/teams/[teamId]/websites/[websiteId]/reports/page.tsx

@@ -0,0 +1,3 @@
+import Page from 'app/(main)/websites/[websiteId]/reports/page';
+
+export default Page;

src/app/(main)/websites/[websiteId]/WebsiteHeader.tsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import Favicon from 'components/common/Favicon';
-import { useMessages, useWebsite } from 'components/hooks';
+import { useMessages, useTeamUrl, useWebsite } from 'components/hooks';
 import Icons from 'components/icons';
 import ActiveUsers from 'components/metrics/ActiveUsers';
 import Link from 'next/link';
@@ -19,6 +19,7 @@ export function WebsiteHeader({
   children?: ReactNode;
 }) {
   const { formatMessage, labels } = useMessages();
+  const { renderTeamUrl } = useTeamUrl();
   const pathname = usePathname();
   const { data: website } = useWebsite(websiteId);
   const { name, domain } = website || {};
@@ -62,7 +63,11 @@ export function WebsiteHeader({
                 : pathname.match(/^\/websites\/[\w-]+$/);
 
               return (
-                <Link key={label} href={`/websites/${websiteId}${path}`} shallow={true}>
+                <Link
+                  key={label}
+                  href={renderTeamUrl(`/websites/${websiteId}${path}`)}
+                  shallow={true}
+                >
                   <Button
                     variant="quiet"
                     className={classNames({

src/app/(main)/websites/[websiteId]/reports/WebsiteReportsPage.tsx

@@ -1,18 +1,19 @@
 'use client';
 import Link from 'next/link';
 import { Button, Flexbox, Icon, Icons, Text } from 'react-basics';
-import { useMessages } from 'components/hooks';
+import { useMessages, useTeamUrl } from 'components/hooks';
 import WebsiteHeader from '../WebsiteHeader';
 import ReportsDataTable from 'app/(main)/reports/ReportsDataTable';
 
 export function WebsiteReportsPage({ websiteId }) {
   const { formatMessage, labels } = useMessages();
+  const { renderTeamUrl } = useTeamUrl();
 
   return (
     <>
       <WebsiteHeader websiteId={websiteId} />
       <Flexbox alignItems="center" justifyContent="end">
-        <Link href={`/reports/create`}>
+        <Link href={renderTeamUrl('/reports/create')}>
           <Button variant="primary">
             <Icon>
               <Icons.Plus />

src/components/hooks/queries/useWebsiteEvents.ts

@@ -1,18 +1,14 @@
-import useApi from './useApi';
-import { UseQueryOptions } from '@tanstack/react-query';
 import { useDateRange, useNavigation, useTimezone } from 'components/hooks';
 import { zonedTimeToUtc } from 'date-fns-tz';
+import useApi from './useApi';
 
-export function useWebsiteEvents(
+export function useWebsiteEvents(websiteId: string, options?: { [key: string]: string }) {
-  websiteId: string,
-  options?: Omit<UseQueryOptions, 'queryKey' | 'queryFn'>,
-) {
   const { get, useQuery } = useApi();
   const [dateRange] = useDateRange(websiteId);
   const { startDate, endDate, unit, offset } = dateRange;
   const { timezone } = useTimezone();
   const {
-    query: { url, event },
+    query: { url, referrer, os, browser, device, country, region, city, title, event },
   } = useNavigation();
 
   const params = {
@@ -20,14 +16,22 @@ export function useWebsiteEvents(
     endAt: +zonedTimeToUtc(endDate, timezone),
     unit,
     offset,
-    timezone,
     url,
+    referrer,
+    os,
+    browser,
+    device,
+    country,
+    region,
+    city,
+    title,
+    timezone,
     event,
   };
 
   return useQuery({
-    queryKey: ['events', { ...params }],
+    queryKey: ['events', { websiteId, ...params }],
-    queryFn: () => get(`/websites/${websiteId}/events`, { ...params }),
+    queryFn: () => get(`/websites/${websiteId}/events`, params),
     enabled: !!websiteId,
     ...options,
   });

src/lib/constants.ts

@@ -30,7 +30,7 @@ export const FILTER_DAY = 'filter-day';
 export const FILTER_RANGE = 'filter-range';
 export const FILTER_REFERRERS = 'filter-referrers';
 export const FILTER_PAGES = 'filter-pages';
-export const UNIT_TYPES = ['year', 'month', 'hour', 'day'];
+export const UNIT_TYPES = ['year', 'month', 'hour', 'day', 'minute'];
 export const EVENT_COLUMNS = ['url', 'referrer', 'title', 'query', 'event'];
 
 export const SESSION_COLUMNS = [

src/lib/schema.ts

@@ -2,7 +2,7 @@ import * as yup from 'yup';
 
 export const dateRange = {
   startAt: yup.number().integer().required(),
-  endAt: yup.number().integer().moreThan(yup.ref('startAt')).required(),
+  endAt: yup.number().integer().min(yup.ref('startAt')).required(),
 };
 
 export const pageInfo = {

src/pages/api/event-data/events.ts

@@ -17,7 +17,7 @@ const schema = {
   GET: yup.object().shape({
     websiteId: yup.string().uuid().required(),
     startAt: yup.number().integer().required(),
-    endAt: yup.number().integer().moreThan(yup.ref('startAt')).required(),
+    endAt: yup.number().integer().min(yup.ref('startAt')).required(),
     event: yup.string(),
   }),
 };

src/pages/api/event-data/fields.ts

@@ -17,7 +17,7 @@ const schema = {
   GET: yup.object().shape({
     websiteId: yup.string().uuid().required(),
     startAt: yup.number().integer().required(),
-    endAt: yup.number().integer().moreThan(yup.ref('startAt')).required(),
+    endAt: yup.number().integer().min(yup.ref('startAt')).required(),
     field: yup.string(),
   }),
 };

src/pages/api/event-data/stats.ts

@@ -16,7 +16,7 @@ const schema = {
   GET: yup.object().shape({
     websiteId: yup.string().uuid().required(),
     startAt: yup.number().integer().required(),
-    endAt: yup.number().integer().moreThan(yup.ref('startAt')).required(),
+    endAt: yup.number().integer().min(yup.ref('startAt')).required(),
   }),
 };
 

src/pages/api/users/[userId]/usage.ts

@@ -26,7 +26,7 @@ const schema = {
   GET: yup.object().shape({
     id: yup.string().uuid().required(),
     startAt: yup.number().integer().required(),
-    endAt: yup.number().integer().moreThan(yup.ref<number>('startAt')).required(),
+    endAt: yup.number().integer().min(yup.ref<number>('startAt')).required(),
   }),
 };
 

src/pages/api/websites/[websiteId]/events.ts

@@ -1,6 +1,6 @@
 import { canViewWebsite } from 'lib/auth';
 import { useAuth, useCors, useValidate } from 'lib/middleware';
-import { getRequestDateRange } from 'lib/request';
+import { getRequestFilters, getRequestDateRange } from 'lib/request';
 import { NextApiRequestQueryBody, WebsiteMetric } from 'lib/types';
 import { TimezoneTest, UnitTypeTest } from 'lib/yup';
 import { NextApiResponse } from 'next';
@@ -15,16 +15,32 @@ export interface WebsiteEventsRequestQuery {
   unit?: string;
   timezone?: string;
   url: string;
+  referrer?: string;
+  title?: string;
+  os?: string;
+  browser?: string;
+  device?: string;
+  country?: string;
+  region: string;
+  city?: string;
 }
 
 const schema = {
   GET: yup.object().shape({
     websiteId: yup.string().uuid().required(),
     startAt: yup.number().integer().required(),
-    endAt: yup.number().integer().moreThan(yup.ref('startAt')).required(),
+    endAt: yup.number().integer().min(yup.ref('startAt')).required(),
     unit: UnitTypeTest,
     timezone: TimezoneTest,
     url: yup.string(),
+    referrer: yup.string(),
+    title: yup.string(),
+    os: yup.string(),
+    browser: yup.string(),
+    device: yup.string(),
+    country: yup.string(),
+    region: yup.string(),
+    city: yup.string(),
   }),
 };
 
@@ -36,7 +52,7 @@ export default async (
   await useAuth(req, res);
   await useValidate(schema, req, res);
 
-  const { websiteId, timezone, url } = req.query;
+  const { websiteId, timezone } = req.query;
   const { startDate, endDate, unit } = await getRequestDateRange(req);
 
   if (req.method === 'GET') {
@@ -44,13 +60,15 @@ export default async (
       return unauthorized(res);
     }
 
-    const events = await getEventMetrics(websiteId, {
+    const filters = {
+      ...getRequestFilters(req),
       startDate,
       endDate,
       timezone,
       unit,
-      url,
+    };
-    });
+
+    const events = await getEventMetrics(websiteId, filters);
 
     return ok(res, events);
   }

src/queries/analytics/events/getEventMetrics.ts

@@ -25,12 +25,12 @@ async function relationalQuery(websiteId: string, filters: QueryFilters) {
     `
     select
       event_name x,
-      ${getDateQuery('created_at', unit, timezone)} t,
+      ${getDateQuery('website_event.created_at', unit, timezone)} t,
       count(*) y
     from website_event
     ${joinSession}
-    where website_id = {{websiteId::uuid}}
+    where website_event.website_id = {{websiteId::uuid}}
-      and created_at between {{startDate}} and {{endDate}}
+      and website_event.created_at between {{startDate}} and {{endDate}}
       and event_type = {{eventType}}
       ${filterQuery}
     group by 1, 2