add close button on session modal

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

@@ -29,9 +29,11 @@ export function SessionModal({ websiteId, ...props }: SessionModalProps) {
     >
       <Column height="100%" maxWidth="1320px" style={{ margin: '0 auto' }}>
         <Dialog variant="sheet">
+          {({ close }) => (
             <Column padding="6">
-            <SessionProfile websiteId={websiteId} sessionId={session} />
+              <SessionProfile websiteId={websiteId} sessionId={session} onClose={() => close()} />
             </Column>
+          )}
         </Dialog>
       </Column>
     </Modal>

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

@@ -1,4 +1,14 @@
-import { TextField, Row, Column, Tabs, TabList, Tab, TabPanel } from '@umami/react-zen';
+import {
+  TextField,
+  Row,
+  Column,
+  Tabs,
+  TabList,
+  Tab,
+  TabPanel,
+  Button,
+  Icon,
+} from '@umami/react-zen';
 import { Avatar } from '@/components/common/Avatar';
 import { LoadingPanel } from '@/components/common/LoadingPanel';
 import { useMessages, useWebsiteSessionQuery } from '@/components/hooks';
@@ -6,8 +16,17 @@ import { SessionActivity } from './SessionActivity';
 import { SessionData } from './SessionData';
 import { SessionInfo } from './SessionInfo';
 import { SessionStats } from './SessionStats';
+import { X } from 'lucide-react';
 
-export function SessionProfile({ websiteId, sessionId }: { websiteId: string; sessionId: string }) {
+export function SessionProfile({
+  websiteId,
+  sessionId,
+  onClose,
+}: {
+  websiteId: string;
+  sessionId: string;
+  onClose?: () => void;
+}) {
   const { data, isLoading, error } = useWebsiteSessionQuery(websiteId, sessionId);
   const { formatMessage, labels } = useMessages();
 
@@ -21,6 +40,15 @@ export function SessionProfile({ websiteId, sessionId }: { websiteId: string; se
     >
       {data && (
         <Column gap>
+          {onClose && (
+            <Row justifyContent="flex-end">
+              <Button onPress={onClose} variant="quiet">
+                <Icon>
+                  <X />
+                </Icon>
+              </Button>
+            </Row>
+          )}
           <Column gap="6">
             <Row justifyContent="center" alignItems="center" gap="6">
               <Avatar seed={data?.id} size={128} />

src/app/api/realtime/[websiteId]/route.ts

@@ -1,15 +1,21 @@
-import { json, unauthorized } from '@/lib/response';
-import { getRealtimeData } from '@/queries/sql';
-import { canViewWebsite } from '@/permissions';
-import { startOfMinute, subMinutes } from 'date-fns';
 import { REALTIME_RANGE } from '@/lib/constants';
-import { parseRequest, getQueryFilters } from '@/lib/request';
+import { getQueryFilters, parseRequest } from '@/lib/request';
+import { json, unauthorized } from '@/lib/response';
+import { timezoneParam } from '@/lib/schema';
+import { canViewWebsite } from '@/permissions';
+import { getRealtimeData } from '@/queries/sql';
+import { startOfMinute, subMinutes } from 'date-fns';
+import z from 'zod';
 
 export async function GET(
   request: Request,
   { params }: { params: Promise<{ websiteId: string }> },
 ) {
-  const { auth, query, error } = await parseRequest(request);
+  const schema = z.object({
+    timezone: timezoneParam,
+  });
+
+  const { auth, query, error } = await parseRequest(request, schema);
 
   if (error) {
     return error();

src/app/api/websites/[websiteId]/session-data/properties/route.ts

@@ -3,6 +3,7 @@ import { getQueryFilters, parseRequest } from '@/lib/request';
 import { unauthorized, json } from '@/lib/response';
 import { canViewWebsite } from '@/permissions';
 import { getSessionDataProperties } from '@/queries/sql';
+import { filterParams } from '@/lib/schema';
 
 export async function GET(
   request: Request,
@@ -11,7 +12,7 @@ export async function GET(
   const schema = z.object({
     startAt: z.coerce.number().int(),
     endAt: z.coerce.number().int(),
-    propertyName: z.string().optional(),
+    ...filterParams,
   });
 
   const { auth, query, error } = await parseRequest(request, schema);
@@ -26,10 +27,9 @@ export async function GET(
     return unauthorized();
   }
 
-  const { propertyName } = query;
   const filters = await getQueryFilters(query, websiteId);
 
-  const data = await getSessionDataProperties(websiteId, { ...filters, propertyName });
+  const data = await getSessionDataProperties(websiteId, filters);
 
   return json(data);
 }

src/app/api/websites/[websiteId]/session-data/values/route.ts

@@ -3,6 +3,7 @@ import { getQueryFilters, parseRequest } from '@/lib/request';
 import { json, unauthorized } from '@/lib/response';
 import { getSessionDataValues } from '@/queries/sql';
 import { z } from 'zod';
+import { filterParams } from '@/lib/schema';
 
 export async function GET(
   request: Request,
@@ -12,6 +13,7 @@ export async function GET(
     startAt: z.coerce.number().int(),
     endAt: z.coerce.number().int(),
     propertyName: z.string().optional(),
+    ...filterParams,
   });
 
   const { auth, query, error } = await parseRequest(request, schema);

src/app/api/websites/[websiteId]/sessions/weekly/route.ts

@@ -1,9 +1,9 @@
-import { z } from 'zod';
 import { getQueryFilters, parseRequest } from '@/lib/request';
-import { unauthorized, json } from '@/lib/response';
+import { json, unauthorized } from '@/lib/response';
+import { filterParams, timezoneParam } from '@/lib/schema';
 import { canViewWebsite } from '@/permissions';
-import { filterParams, pagingParams, timezoneParam } from '@/lib/schema';
 import { getWeeklyTraffic } from '@/queries/sql';
+import { z } from 'zod';
 
 export async function GET(
   request: Request,
@@ -14,7 +14,6 @@ export async function GET(
     endAt: z.coerce.number().int(),
     timezone: timezoneParam,
     ...filterParams,
-    ...pagingParams,
   });
 
   const { auth, query, error } = await parseRequest(request, schema);

src/components/hooks/queries/useSessionDataPropertiesQuery.ts

@@ -5,12 +5,22 @@ import { ReactQueryOptions } from '@/lib/types';
 
 export function useSessionDataPropertiesQuery(websiteId: string, options?: ReactQueryOptions) {
   const { get, useQuery } = useApi();
-  const date = useDateParameters();
+  const { startAt, endAt, unit, timezone } = useDateParameters();
   const filters = useFilterParameters();
 
   return useQuery<any>({
-    queryKey: ['websites:session-data:properties', { websiteId, ...date, ...filters }],
-    queryFn: () => get(`/websites/${websiteId}/session-data/properties`, { ...date, ...filters }),
+    queryKey: [
+      'websites:session-data:properties',
+      { websiteId, startAt, endAt, unit, timezone, ...filters },
+    ],
+    queryFn: () =>
+      get(`/websites/${websiteId}/session-data/properties`, {
+        startAt,
+        endAt,
+        unit,
+        timezone,
+        ...filters,
+      }),
     enabled: !!websiteId,
     ...options,
   });

src/components/hooks/queries/useSessionDataValuesQuery.ts

@@ -9,13 +9,23 @@ export function useSessionDataValuesQuery(
   options?: ReactQueryOptions,
 ) {
   const { get, useQuery } = useApi();
-  const date = useDateParameters();
+  const { startAt, endAt, unit, timezone } = useDateParameters();
   const filters = useFilterParameters();
 
   return useQuery<any>({
-    queryKey: ['websites:session-data:values', { websiteId, propertyName, ...date, ...filters }],
+    queryKey: [
+      'websites:session-data:values',
+      { websiteId, propertyName, startAt, endAt, unit, timezone, ...filters },
+    ],
     queryFn: () =>
-      get(`/websites/${websiteId}/session-data/values`, { ...date, ...filters, propertyName }),
+      get(`/websites/${websiteId}/session-data/values`, {
+        startAt,
+        endAt,
+        unit,
+        timezone,
+        ...filters,
+        propertyName,
+      }),
     enabled: !!(websiteId && propertyName),
     ...options,
   });

src/components/hooks/queries/useWebsiteSessionStatsQuery.ts

@@ -4,12 +4,13 @@ import { useDateParameters } from '../useDateParameters';
 
 export function useWebsiteSessionStatsQuery(websiteId: string, options?: Record<string, string>) {
   const { get, useQuery } = useApi();
-  const date = useDateParameters();
+  const { startAt, endAt, unit, timezone } = useDateParameters();
   const filters = useFilterParameters();
 
   return useQuery({
-    queryKey: ['sessions:stats', { websiteId, ...date, ...filters }],
-    queryFn: () => get(`/websites/${websiteId}/sessions/stats`, { ...date, ...filters }),
+    queryKey: ['sessions:stats', { websiteId, startAt, endAt, unit, timezone, ...filters }],
+    queryFn: () =>
+      get(`/websites/${websiteId}/sessions/stats`, { startAt, endAt, unit, timezone, ...filters }),
     enabled: !!websiteId,
     ...options,
   });

src/components/hooks/queries/useWebsiteSessionsQuery.ts

@@ -1,8 +1,8 @@
 import { useApi } from '../useApi';
-import { usePagedQuery } from '../usePagedQuery';
-import { useModified } from '../useModified';
-import { useFilterParameters } from '../useFilterParameters';
 import { useDateParameters } from '../useDateParameters';
+import { useFilterParameters } from '../useFilterParameters';
+import { useModified } from '../useModified';
+import { usePagedQuery } from '../usePagedQuery';
 
 export function useWebsiteSessionsQuery(
   websiteId: string,
@@ -10,14 +10,20 @@ export function useWebsiteSessionsQuery(
 ) {
   const { get } = useApi();
   const { modified } = useModified(`sessions`);
-  const date = useDateParameters();
+  const { startAt, endAt, unit, timezone } = useDateParameters();
   const filters = useFilterParameters();
 
   return usePagedQuery({
-    queryKey: ['sessions', { websiteId, modified, ...params, ...date, ...filters }],
+    queryKey: [
+      'sessions',
+      { websiteId, modified, startAt, endAt, unit, timezone, ...params, ...filters },
+    ],
     queryFn: pageParams => {
       return get(`/websites/${websiteId}/sessions`, {
-        ...date,
+        startAt,
+        endAt,
+        unit,
+        timezone,
         ...filters,
         ...pageParams,
         ...params,

src/queries/sql/events/getWebsiteEvents.ts

@@ -96,7 +96,10 @@ async function clickhouseQuery(websiteId: string, filters: QueryFilters) {
       page_title as pageTitle,
       event_type as eventType,
       event_name as eventName,
-      event_id IN (SELECT event_id FROM event_data where website_id = {websiteId:UUID}) as hasData
+      event_id IN (select event_id 
+                   from event_data 
+                   where website_id = {websiteId:UUID}
+                   ${dateQuery}) as hasData
     from website_event
     ${cohortQuery}
     where website_id = {websiteId:UUID}

src/queries/sql/reports/getRevenue.ts

@@ -134,6 +134,15 @@ async function clickhouseQuery(
     currency,
   });
 
+  const joinQuery = filterQuery
+    ? `join website_event
+   on website_event.website_id = website_revenue.website_id
+    and website_event.session_id = website_revenue.session_id
+    and website_event.event_id = website_revenue.event_id
+    and website_event.website_id = {websiteId:UUID}
+    and website_event.created_at between {startDate:DateTime64} and {endDate:DateTime64}`
+    : '';
+
   const chart = await rawQuery<
     {
       x: string;
@@ -147,12 +156,7 @@ async function clickhouseQuery(
       ${getDateSQL('website_revenue.created_at', unit, timezone)} t,
       sum(website_revenue.revenue) y
     from website_revenue
-    join website_event
-          on website_event.website_id = website_revenue.website_id
-            and website_event.session_id = website_revenue.session_id
-            and website_event.event_id = website_revenue.event_id
-            and website_event.website_id = {websiteId:UUID}
-            and website_event.created_at between {startDate:DateTime64} and {endDate:DateTime64}
+    ${joinQuery}
     ${cohortQuery}
     where website_revenue.website_id = {websiteId:UUID}
       and website_revenue.created_at between {startDate:DateTime64} and {endDate:DateTime64}
@@ -203,12 +207,7 @@ async function clickhouseQuery(
       uniqExact(website_revenue.event_id) as count,
       uniqExact(website_revenue.session_id) as unique_count
     from website_revenue
-    join website_event
-          on website_event.website_id = website_revenue.website_id
-            and website_event.session_id = website_revenue.session_id
-            and website_event.event_id = website_revenue.event_id
-            and website_event.website_id = {websiteId:UUID}
-            and website_event.created_at between {startDate:DateTime64} and {endDate:DateTime64}
+    ${joinQuery}
     ${cohortQuery}
     where website_revenue.website_id = {websiteId:UUID}
       and website_revenue.created_at between {startDate:DateTime64} and {endDate:DateTime64}

src/queries/sql/sessions/getSessionActivity.ts

@@ -57,12 +57,16 @@ async function clickhouseQuery(websiteId: string, sessionId: string, filters: Qu
       event_type as eventType,
       event_name as eventName,
       visit_id as visitId,
-      event_id IN (SELECT event_id FROM event_data where website_id = {websiteId:UUID} and session_id = {sessionId:UUID}) AS hasData
-    from website_event e 
-    where e.website_id = {websiteId:UUID}
-      and e.session_id = {sessionId:UUID} 
-      and e.created_at between {startDate:DateTime64} and {endDate:DateTime64}
-    order by e.created_at desc
+      event_id IN (select event_id 
+                   from event_data 
+                   where website_id = {websiteId:UUID} 
+                    and session_id = {sessionId:UUID}
+                    and created_at between {startDate:DateTime64} and {endDate:DateTime64}) AS hasData
+    from website_event
+    where website_id = {websiteId:UUID}
+      and session_id = {sessionId:UUID} 
+      and created_at between {startDate:DateTime64} and {endDate:DateTime64}
+    order by created_at desc
     limit 500
     `,
     { websiteId, sessionId, startDate, endDate },

src/queries/sql/sessions/getSessionDataProperties.ts

@@ -1,12 +1,12 @@
-import prisma from '@/lib/prisma';
 import clickhouse from '@/lib/clickhouse';
 import { CLICKHOUSE, PRISMA, runQuery } from '@/lib/db';
+import prisma from '@/lib/prisma';
 import { QueryFilters } from '@/lib/types';
 
 const FUNCTION_NAME = 'getSessionDataProperties';
 
 export async function getSessionDataProperties(
-  ...args: [websiteId: string, filters: QueryFilters & { propertyName?: string }]
+  ...args: [websiteId: string, filters: QueryFilters]
 ) {
   return runQuery({
     [PRISMA]: () => relationalQuery(...args),
@@ -14,17 +14,12 @@ export async function getSessionDataProperties(
   });
 }
 
-async function relationalQuery(
-  websiteId: string,
-  filters: QueryFilters & { propertyName?: string },
-) {
+async function relationalQuery(websiteId: string, filters: QueryFilters) {
   const { rawQuery, parseFilters } = prisma;
-  const { filterQuery, joinSessionQuery, cohortQuery, queryParams } = parseFilters(
-    { ...filters, websiteId },
-    {
-      columns: { propertyName: 'data_key' },
-    },
-  );
+  const { filterQuery, joinSessionQuery, cohortQuery, queryParams } = parseFilters({
+    ...filters,
+    websiteId,
+  });
 
   return rawQuery(
     `
@@ -50,15 +45,10 @@ async function relationalQuery(
 
 async function clickhouseQuery(
   websiteId: string,
-  filters: QueryFilters & { propertyName?: string },
+  filters: QueryFilters,
 ): Promise<{ propertyName: string; total: number }[]> {
   const { rawQuery, parseFilters } = clickhouse;
-  const { filterQuery, cohortQuery, queryParams } = parseFilters(
-    { ...filters, websiteId },
-    {
-      columns: { propertyName: 'data_key' },
-    },
-  );
+  const { filterQuery, cohortQuery, queryParams } = parseFilters({ ...filters, websiteId });
 
   return rawQuery(
     `
@@ -69,6 +59,7 @@ async function clickhouseQuery(
     ${cohortQuery}
     join session_data final
       on session_data.session_id = website_event.session_id
+        and session_data.website_id = {websiteId:UUID}
     where website_event.website_id = {websiteId:UUID}
       and website_event.created_at between {startDate:DateTime64} and {endDate:DateTime64}
       and session_data.data_key != ''

src/queries/sql/sessions/getSessionDataValues.ts

@@ -69,6 +69,7 @@ async function clickhouseQuery(
     ${cohortQuery}
     join session_data final
       on session_data.session_id = website_event.session_id
+        and session_data.website_id = {websiteId:UUID}
     where website_event.website_id = {websiteId:UUID}
       and website_event.created_at between {startDate:DateTime64} and {endDate:DateTime64}
       and session_data.data_key = {propertyName:String}

src/queries/sql/sessions/getWebsiteSessions.ts

@@ -98,6 +98,7 @@ async function clickhouseQuery(websiteId: string, filters: QueryFilters) {
     select
       session_id as id,
       website_id as websiteId,
+      hostname,
       browser,
       os,
       device,
@@ -117,7 +118,7 @@ async function clickhouseQuery(websiteId: string, filters: QueryFilters) {
     ${dateQuery}
     ${filterQuery}
     ${searchQuery}
-    group by session_id, website_id, browser, os, device, screen, language, country, region, city
+    group by session_id, website_id, hostname, browser, os, device, screen, language, country, region, city
     order by lastAt desc
     `;
   } else {
@@ -125,7 +126,7 @@ async function clickhouseQuery(websiteId: string, filters: QueryFilters) {
     select
       session_id as id,
       website_id as websiteId,
-      hostname,
+      arrayFirst(x -> 1, hostname) hostname,
       browser,
       os,
       device,