fix hasdata queries, add hasData to website events, fix sessionactivity truncation,

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]/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/queries/sql/events/getEventData.ts

@@ -19,20 +19,20 @@ async function relationalQuery(websiteId: string, eventId: string) {
 
   return rawQuery(
     `
-    select website_id as "websiteId",
+    select event_data.website_id as "websiteId",
-       session_id as "sessionId",
+       event_data.website_event_id as "eventId",
-       event_id as "eventId",
+       website_event.event_name as "eventName",
-       url_path as "urlPath",
+       event_data.data_key as "dataKey",
-       event_name as "eventName",
+       event_data.string_value as "stringValue",
-       data_key as "dataKey",
+       event_data.number_value as "numberValue",
-       string_value as "stringValue",
+       event_data.date_value as "dateValue",
-       number_value as "numberValue",
+       event_data.data_type as "dataType",
-       date_value as "dateValue",
+       event_data.created_at as "createdAt"
-       data_type as "dataType",
-       created_at as "createdAt"
     from event_data
-    website_id = {{websiteId::uuid}}
+    join website_event on website_event.event_id = event_data.website_event_id
-      event_id = {{eventId::uuid}}
+      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/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}}