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

This commit is contained in:
Francis Cao 2025-11-09 23:58:20 -08:00
parent 9230f3cb7b
commit f3e246c64b
5 changed files with 60 additions and 24 deletions

View file

@ -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>
);
};

View file

@ -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} />}