fix realtime logs for mobile

src/app/(main)/App.tsx

@@ -16,7 +16,7 @@ export function App({ children }) {
   }
 
   if (error) {
-    window.location.href = '/login';
+    window.location.href = `${process.env.basePath || ''}/login`;
     return null;
   }
 

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

@@ -1,11 +1,24 @@
-import { DataTable, DataColumn, Row, Text, DataTableProps, IconLabel } from '@umami/react-zen';
+import {
+  DataTable,
+  DataColumn,
+  Row,
+  Text,
+  DataTableProps,
+  IconLabel,
+  Button,
+  Dialog,
+  DialogTrigger,
+  Icon,
+  Popover,
+} from '@umami/react-zen';
 import { useFormat, useMessages, useNavigation } from '@/components/hooks';
 import { Avatar } from '@/components/common/Avatar';
 import Link from 'next/link';
-import { Eye } from '@/components/icons';
+import { Eye, FileText } from '@/components/icons';
 import { Lightning } from '@/components/svg';
 import { DateDistance } from '@/components/common/DateDistance';
 import { TypeIcon } from '@/components/common/TypeIcon';
+import { EventData } from '@/components/metrics/EventData';
 
 export function EventsTable(props: DataTableProps) {
   const { formatMessage, labels } = useMessages();
@@ -32,6 +45,7 @@ export function EventsTable(props: DataTableProps) {
               >
                 {row.eventName || row.urlPath}
               </Text>
+              {row.hasData > 0 && <PropertiesButton websiteId={row.websiteId} eventId={row.id} />}
             </Row>
           );
         }}
@@ -72,3 +86,22 @@ export function EventsTable(props: DataTableProps) {
     </DataTable>
   );
 }
+
+const PropertiesButton = props => {
+  return (
+    <DialogTrigger>
+      <Button variant="quiet">
+        <Row alignItems="center" gap>
+          <Icon>
+            <FileText />
+          </Icon>
+        </Row>
+      </Button>
+      <Popover placement="right">
+        <Dialog>
+          <EventData {...props} />
+        </Dialog>
+      </Popover>
+    </DialogTrigger>
+  );
+};

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

@@ -9,6 +9,7 @@ import {
   useCountryNames,
   useLocale,
   useMessages,
+  useMobile,
   useNavigation,
   useTimezone,
   useWebsite,
@@ -40,6 +41,7 @@ export function RealtimeLog({ data }: { data: any }) {
   const { countryNames } = useCountryNames(locale);
   const [filter, setFilter] = useState(TYPE_ALL);
   const { updateParams } = useNavigation();
+  const { isPhone } = useMobile();
 
   const buttons = [
     {
@@ -123,12 +125,18 @@ export function RealtimeLog({ data }: { data: any }) {
     const row = logs[index];
     return (
       <Row alignItems="center" style={style} gap>
-        <Link href={updateParams({ session: row.sessionId })}>
-          <Avatar seed={row.sessionId} size={32} />
-        </Link>
-        <Row width="100px">{getTime(row)}</Row>
+        <Row minWidth="30px">
+          <Link href={updateParams({ session: row.sessionId })}>
+            <Avatar seed={row.sessionId} size={32} />
+          </Link>
+        </Row>
+        <Row minWidth="100px">
+          <Text wrap="nowrap">{getTime(row)}</Text>
+        </Row>
         <IconLabel icon={getIcon(row)}>
-          <Text>{getDetail(row)}</Text>
+          <Text style={{ maxWidth: isPhone ? '400px' : null }} truncate>
+            {getDetail(row)}
+          </Text>
         </IconLabel>
       </Row>
     );
@@ -168,10 +176,22 @@ export function RealtimeLog({ data }: { data: any }) {
   return (
     <Column gap>
       <Heading size="2">{formatMessage(labels.activity)}</Heading>
-      <Row alignItems="center" justifyContent="space-between">
-        <SearchField value={search} onSearch={setSearch} />
-        <FilterButtons items={buttons} value={filter} onChange={setFilter} />
-      </Row>
+      {isPhone ? (
+        <>
+          <Row>
+            <SearchField value={search} onSearch={setSearch} />
+          </Row>
+          <Row>
+            <FilterButtons items={buttons} value={filter} onChange={setFilter} />
+          </Row>
+        </>
+      ) : (
+        <Row alignItems="center" justifyContent="space-between">
+          <SearchField value={search} onSearch={setSearch} />
+          <FilterButtons items={buttons} value={filter} onChange={setFilter} />
+        </Row>
+      )}
+
       <Column>
         {logs?.length === 0 && <Empty />}
         {logs?.length > 0 && (

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

@@ -6,7 +6,7 @@ import { PageBody } from '@/components/common/PageBody';
 import { Panel } from '@/components/common/Panel';
 import { RealtimeChart } from '@/components/metrics/RealtimeChart';
 import { WorldMap } from '@/components/metrics/WorldMap';
-import { useRealtimeQuery } from '@/components/hooks';
+import { useMobile, useRealtimeQuery } from '@/components/hooks';
 import { RealtimeLog } from './RealtimeLog';
 import { RealtimeHeader } from './RealtimeHeader';
 import { RealtimePaths } from './RealtimePaths';
@@ -16,6 +16,7 @@ import { percentFilter } from '@/lib/filters';
 
 export function RealtimePage({ websiteId }: { websiteId: string }) {
   const { data, isLoading, error } = useRealtimeQuery(websiteId);
+  const { isMobile } = useMobile();
 
   if (isLoading || error) {
     return <PageBody isLoading={isLoading} error={error} />;
@@ -48,7 +49,7 @@ export function RealtimePage({ websiteId }: { websiteId: string }) {
         <Panel>
           <RealtimeCountries data={countries} />
         </Panel>
-        <Panel gridColumn="span 2" padding="0">
+        <Panel gridColumn={isMobile ? null : 'span 2'} padding="0">
           <WorldMap data={countries} />
         </Panel>
       </GridRow>

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

@@ -14,7 +14,7 @@ import {
 import { LoadingPanel } from '@/components/common/LoadingPanel';
 import { Eye, FileText } from '@/components/icons';
 import { Lightning } from '@/components/svg';
-import { useMessages, useSessionActivityQuery, useTimezone } from '@/components/hooks';
+import { useMessages, useMobile, useSessionActivityQuery, useTimezone } from '@/components/hooks';
 import { EventData } from '@/components/metrics/EventData';
 
 export function SessionActivity({
@@ -36,6 +36,7 @@ export function SessionActivity({
     startDate,
     endDate,
   );
+  const { isMobile } = useMobile();
   let lastDay = null;
 
   return (
@@ -50,16 +51,16 @@ export function SessionActivity({
               {showHeader && <Heading size="1">{formatTimezoneDate(createdAt, 'PPPP')}</Heading>}
               <Row alignItems="center" gap="6" height="40px">
                 <StatusLight color={`#${visitId?.substring(0, 6)}`}>
-                  {formatTimezoneDate(createdAt, 'pp')}
+                  <Text wrap="nowrap">{formatTimezoneDate(createdAt, 'pp')}</Text>
                 </StatusLight>
                 <Row alignItems="center" gap="2">
                   <Icon>{eventName ? <Lightning /> : <Eye />}</Icon>
-                  <Text>
+                  <Text wrap="nowrap">
                     {eventName
                       ? formatMessage(labels.triggeredEvent)
                       : formatMessage(labels.viewedPage)}
                   </Text>
-                  <Text weight="bold" style={{ maxWidth: '400px' }} truncate>
+                  <Text weight="bold" style={{ maxWidth: isMobile ? '400px' : null }} truncate>
                     {eventName || urlPath}
                   </Text>
                   {hasData > 0 && <PropertiesButton websiteId={websiteId} eventId={eventId} />}

src/app/logout/LogoutPage.tsx

@@ -13,7 +13,7 @@ export function LogoutPage() {
     async function logout() {
       await post('/auth/logout');
 
-      window.location.href = '/login';
+      window.location.href = `${process.env.basePath || ''}/login`;
     }
 
     removeClientAuthToken();

src/components/metrics/ListTable.tsx

@@ -57,7 +57,7 @@ export function ListTable({
         showPercentage={showPercentage}
         change={renderChange ? renderChange(row, index) : null}
         currency={currency}
-        isMobile={isPhone}
+        isPhone={isPhone}
       />
     );
   };
@@ -101,7 +101,7 @@ const AnimatedRow = ({
   animate,
   showPercentage = true,
   currency,
-  isMobile,
+  isPhone,
 }) => {
   const props = useSpring({
     width: percent,
@@ -120,7 +120,7 @@ const AnimatedRow = ({
       gap
     >
       <Row alignItems="center">
-        <Text truncate={true} style={{ maxWidth: isMobile ? '200px' : '400px' }}>
+        <Text truncate={true} style={{ maxWidth: isPhone ? '200px' : '400px' }}>
           {label}
         </Text>
       </Row>

src/queries/sql/events/getEventData.ts

@@ -19,20 +19,20 @@ async function relationalQuery(websiteId: string, eventId: string) {
 
   return rawQuery(
     `
-    select website_id as "websiteId",
-       session_id as "sessionId",
-       event_id as "eventId",
-       url_path as "urlPath",
-       event_name as "eventName",
-       data_key as "dataKey",
-       string_value as "stringValue",
-       number_value as "numberValue",
-       date_value as "dateValue",
-       data_type as "dataType",
-       created_at as "createdAt"
+    select event_data.website_id as "websiteId",
+       event_data.website_event_id as "eventId",
+       website_event.event_name as "eventName",
+       event_data.data_key as "dataKey",
+       event_data.string_value as "stringValue",
+       event_data.number_value as "numberValue",
+       event_data.date_value as "dateValue",
+       event_data.data_type as "dataType",
+       event_data.created_at as "createdAt"
     from event_data
-    website_id = {{websiteId::uuid}}
-      event_id = {{eventId::uuid}}
+    join website_event on website_event.event_id = event_data.website_event_id
+      and website_event.website_id = {{websiteId::uuid}}
+    where event_data.website_id = {{websiteId::uuid}}
+      and event_data.website_event_id = {{eventId::uuid}}
     `,
     { websiteId, eventId },
     FUNCTION_NAME,
@@ -45,9 +45,7 @@ async function clickhouseQuery(websiteId: string, eventId: string): Promise<Even
   return rawQuery(
     `
       select website_id as websiteId,
-        session_id as sessionId,
         event_id as eventId,
-        url_path as urlPath,
         event_name as eventName,
         data_key as dataKey,
         string_value as stringValue,

src/queries/sql/events/getWebsiteEvents.ts

@@ -45,7 +45,11 @@ async function relationalQuery(websiteId: string, filters: QueryFilters) {
       browser as browser,
       page_title as "pageTitle",
       website_event.event_type as "eventType",
-      website_event.event_name as "eventName"
+      website_event.event_name as "eventName",
+      event_id IN (select website_event_id 
+                   from event_data
+                   where website_id = {{websiteId::uuid}}
+                      and created_at between {{startDate}} and {{endDate}}) AS "hasData"
     from website_event
     ${cohortQuery}
     join session on session.session_id = website_event.session_id 

src/queries/sql/getWebsiteStats.ts

@@ -36,11 +36,11 @@ async function relationalQuery(
   return rawQuery(
     `
     select
-      sum(t.c) as "pageviews",
+      cast(coalesce(sum(t.c), 0) as bigint) as "pageviews",
       count(distinct t.session_id) as "visitors",
       count(distinct t.visit_id) as "visits",
-      sum(case when t.c = 1 then 1 else 0 end) as "bounces",
-      sum(${getTimestampDiffSQL('t.min_time', 't.max_time')}) as "totaltime"
+      coalesce(sum(case when t.c = 1 then 1 else 0 end), 0) as "bounces",
+      cast(coalesce(sum(${getTimestampDiffSQL('t.min_time', 't.max_time')}), 0) as bigint) as "totaltime"
     from (
       select
         website_event.session_id,

src/queries/sql/reports/getRevenue.ts

@@ -41,6 +41,15 @@ async function relationalQuery(
     currency,
   });
 
+  const joinQuery = filterQuery
+    ? `join website_event
+      on website_event.website_id = revenue.website_id
+        and website_event.session_id = revenue.session_id
+        and website_event.event_id = revenue.event_id
+        and website_event.website_id = {{websiteId::uuid}}
+        and website_event.created_at between {{startDate}} and {{endDate}}`
+    : '';
+
   const chart = await rawQuery(
     `
     select
@@ -48,17 +57,12 @@ async function relationalQuery(
       ${getDateSQL('revenue.created_at', unit, timezone)} t,
       sum(revenue.revenue) y
     from revenue
-    join website_event
-      on website_event.website_id = revenue.website_id
-        and website_event.session_id = revenue.session_id
-        and website_event.event_id = revenue.event_id
-        and website_event.website_id = {{websiteId::uuid}}
-        and website_event.created_at between {{startDate}} and {{endDate}}
+    ${joinQuery}
     ${cohortQuery}
     ${joinSessionQuery}
     where revenue.website_id = {{websiteId::uuid}}
       and revenue.created_at between {{startDate}} and {{endDate}}
-      and revenue.currency like {{currency}}
+      and revenue.currency ilike {{currency}}
       ${filterQuery}
     group by  x, t
     order by t
@@ -72,19 +76,14 @@ async function relationalQuery(
       session.country as name,
       sum(revenue) value
     from revenue 
-    join website_event
-      on website_event.website_id = revenue.website_id
-        and website_event.session_id = revenue.session_id
-        and website_event.event_id = revenue.event_id
-        and website_event.website_id = {{websiteId::uuid}}
-        and website_event.created_at between {{startDate}} and {{endDate}}
+    ${joinQuery}
     join session 
       on session.website_id = revenue.website_id
         and session.session_id = revenue.session_id
     ${cohortQuery}
     where revenue.website_id = {{websiteId::uuid}}
       and revenue.created_at between {{startDate}} and {{endDate}}
-      and revenue.currency = {{currency}}
+      and revenue.currency ilike {{currency}}
       ${filterQuery}
     group by session.country
     `,
@@ -98,23 +97,18 @@ async function relationalQuery(
       count(distinct revenue.event_id) as count,
       count(distinct revenue.session_id) as unique_count
     from revenue
-    join website_event
-      on website_event.website_id = revenue.website_id
-        and website_event.session_id = revenue.session_id
-        and website_event.event_id = revenue.event_id
-        and website_event.website_id = {{websiteId::uuid}}
-        and website_event.created_at between {{startDate}} and {{endDate}}
+    ${joinQuery}
     ${cohortQuery}
     ${joinSessionQuery}
     where revenue.website_id = {{websiteId::uuid}}
       and revenue.created_at between {{startDate}} and {{endDate}}
-      and revenue.currency = {{currency}}
+      and revenue.currency ilike {{currency}}
       ${filterQuery}
   `,
     queryParams,
   ).then(result => result?.[0]);
 
-  total.average = total.count > 0 ? total.sum / total.count : 0;
+  total.average = total.count > 0 ? Number(total.sum) / Number(total.count) : 0;
 
   return { chart, country, total };
 }

src/queries/sql/sessions/getSessionActivity.ts

@@ -29,10 +29,10 @@ async function relationalQuery(websiteId: string, sessionId: string, filters: Qu
       event_type as "eventType",
       event_name as "eventName",
       visit_id as "visitId",
-      event_id IN (select event_id 
+      event_id IN (select website_event_id 
                    from event_data
                    where website_id = {{websiteId::uuid}}
-                    and session_id = {{sessionId::uuid}}) AS "hasData"
+                      and created_at between {{startDate}} and {{endDate}}) AS "hasData"
     from website_event
     where website_id = {{websiteId::uuid}}
       and session_id = {{sessionId::uuid}}