watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-24 06:25:43 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Unified loading states.

Browse source
This commit is contained in:
Mike Cao 2025-06-13 21:13:11 -07:00
parent 7b5591a3ce
commit da8c7e99c5
52 changed files with 506 additions and 364 deletions
Download patch file Download diff file Expand all files Collapse all files

45
src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionActivity.tsx
View file

@ -1,8 +1,20 @@
import { isSameDay } from 'date-fns';
import { Icon, StatusLight, Column, Row, Heading, Text, Button } from '@umami/react-zen';
import {
Icon,
StatusLight,
Column,
Row,
Heading,
Text,
Button,
DialogTrigger,
Popover,
Dialog,
} from '@umami/react-zen';
import { LoadingPanel } from '@/components/common/LoadingPanel';
import { Bolt, Eye, FileText } from '@/components/icons';
import { useSessionActivityQuery, useTimezone } from '@/components/hooks';
import { EventData } from '@/components/metrics/EventData';
export function SessionActivity({
websiteId,
@ -25,7 +37,7 @@ export function SessionActivity({
let lastDay = null;
return (
<LoadingPanel isEmpty={!data?.length} isLoading={isLoading} error={error}>
<LoadingPanel data={data} isLoading={isLoading} error={error}>
<Column gap>
{data?.map(({ eventId, createdAt, urlPath, eventName, visitId, hasData }) => {
const showHeader = !lastDay || !isSameDay(new Date(lastDay), new Date(createdAt));
@ -41,15 +53,7 @@ export function SessionActivity({
<Row alignItems="center" gap>
<Icon>{eventName ? <Bolt /> : <Eye />}</Icon>
<Text>{eventName || urlPath}</Text>
{hasData > 0 && (
<Button variant="quiet">
<Row alignItems="center" gap>
<Icon>
<FileText />
</Icon>
</Row>
</Button>
)}
{hasData > 0 && <PropertiesButton websiteId={websiteId} eventId={eventId} />}
</Row>
</Row>
</Column>
@ -59,3 +63,22 @@ export function SessionActivity({
</LoadingPanel>
);
}
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>
);
};