451 lines
14 KiB
TypeScript
451 lines
14 KiB
TypeScript
import { ReportChartShortcut } from '@/components/report-chart/shortcut';
|
|
import {
|
|
useEventQueryFilters,
|
|
useEventQueryNamesFilter,
|
|
} from '@/hooks/use-event-query-filters';
|
|
|
|
import { ProjectLink } from '@/components/links';
|
|
import {
|
|
WidgetButtons,
|
|
WidgetHead,
|
|
} from '@/components/overview/overview-widget';
|
|
import { SerieIcon } from '@/components/report-chart/common/serie-icon';
|
|
import { Button } from '@/components/ui/button';
|
|
import { FieldValue, KeyValueGrid } from '@/components/ui/key-value-grid';
|
|
import { Widget, WidgetBody } from '@/components/widget';
|
|
import { fancyMinutes } from '@/hooks/use-numer-formatter';
|
|
import { useTRPC } from '@/integrations/trpc/react';
|
|
import { cn } from '@/utils/cn';
|
|
import { getProfileName } from '@/utils/getters';
|
|
import type { IClickhouseEvent, IServiceEvent } from '@openpanel/db';
|
|
import { useSuspenseQuery } from '@tanstack/react-query';
|
|
import { FilterIcon, XIcon } from 'lucide-react';
|
|
import { omit } from 'ramda';
|
|
import { Suspense, useState } from 'react';
|
|
import { popModal } from '.';
|
|
import { ModalContent } from './Modal/Container';
|
|
|
|
interface Props {
|
|
id: string;
|
|
createdAt?: Date;
|
|
projectId: string;
|
|
}
|
|
|
|
const filterable: Partial<Record<keyof IServiceEvent, keyof IClickhouseEvent>> =
|
|
{
|
|
name: 'name',
|
|
referrer: 'referrer',
|
|
referrerName: 'referrer_name',
|
|
referrerType: 'referrer_type',
|
|
brand: 'brand',
|
|
model: 'model',
|
|
browser: 'browser',
|
|
browserVersion: 'browser_version',
|
|
os: 'os',
|
|
osVersion: 'os_version',
|
|
city: 'city',
|
|
region: 'region',
|
|
country: 'country',
|
|
device: 'device',
|
|
properties: 'properties',
|
|
path: 'path',
|
|
origin: 'origin',
|
|
};
|
|
|
|
export default function EventDetails(props: Props) {
|
|
return (
|
|
<ModalContent className="!p-0">
|
|
<Widget className="bg-transparent border-0 min-w-0">
|
|
<Suspense fallback={<EventDetailsSkeleton />}>
|
|
<EventDetailsContent {...props} />
|
|
</Suspense>
|
|
</Widget>
|
|
</ModalContent>
|
|
);
|
|
}
|
|
|
|
function EventDetailsContent({ id, createdAt, projectId }: Props) {
|
|
const [, setEvents] = useEventQueryNamesFilter();
|
|
const [, setFilter] = useEventQueryFilters();
|
|
const TABS = {
|
|
essentials: {
|
|
id: 'essentials',
|
|
title: 'Essentials',
|
|
},
|
|
detailed: {
|
|
id: 'detailed',
|
|
title: 'Detailed',
|
|
},
|
|
};
|
|
const [widget, setWidget] = useState(TABS.essentials);
|
|
const trpc = useTRPC();
|
|
const query = useSuspenseQuery(
|
|
trpc.event.details.queryOptions({
|
|
id,
|
|
projectId,
|
|
createdAt,
|
|
}),
|
|
);
|
|
|
|
const { event, session } = query.data;
|
|
|
|
const profile = event.profile;
|
|
|
|
const data = (() => {
|
|
const data: {
|
|
name: keyof IServiceEvent | string;
|
|
value: any;
|
|
event: IServiceEvent;
|
|
}[] = [
|
|
{
|
|
name: 'createdAt',
|
|
value: event.createdAt,
|
|
},
|
|
{
|
|
name: 'name',
|
|
value: event.name,
|
|
},
|
|
{
|
|
name: 'origin',
|
|
value: event.origin,
|
|
},
|
|
{
|
|
name: 'path',
|
|
value: event.path,
|
|
},
|
|
{
|
|
name: 'country',
|
|
value: event.country,
|
|
},
|
|
{
|
|
name: 'region',
|
|
value: event.region,
|
|
},
|
|
{
|
|
name: 'city',
|
|
value: event.city,
|
|
},
|
|
{
|
|
name: 'referrer',
|
|
value: event.referrer,
|
|
},
|
|
{
|
|
name: 'referrerName',
|
|
value: event.referrerName,
|
|
},
|
|
{
|
|
name: 'referrerType',
|
|
value: event.referrerType,
|
|
},
|
|
{
|
|
name: 'brand',
|
|
value: event.brand,
|
|
},
|
|
{
|
|
name: 'model',
|
|
value: event.model,
|
|
},
|
|
].map((item) => ({ ...item, event }));
|
|
|
|
if (widget.id === TABS.detailed.id) {
|
|
data.length = 0;
|
|
Object.entries(omit(['properties', 'profile', 'meta'], event)).forEach(
|
|
([name, value]) => {
|
|
if (!name.startsWith('__')) {
|
|
data.push({
|
|
name: name as keyof IServiceEvent,
|
|
value: value as any,
|
|
event,
|
|
});
|
|
}
|
|
},
|
|
);
|
|
}
|
|
|
|
return data.filter((item) => {
|
|
if (widget.id === TABS.essentials.id) {
|
|
return !!item.value;
|
|
}
|
|
|
|
return true;
|
|
});
|
|
})();
|
|
|
|
const properties = Object.entries(event.properties)
|
|
.filter(([name]) => !name.startsWith('__'))
|
|
.map(([name, value]) => ({
|
|
name,
|
|
value,
|
|
event,
|
|
}));
|
|
|
|
return (
|
|
<>
|
|
<WidgetHead>
|
|
<div className="row items-center justify-between">
|
|
<div className="title">{event.name}</div>
|
|
<div className="row items-center gap-2 pr-2">
|
|
{/* <Button
|
|
size="icon"
|
|
variant={'ghost'}
|
|
onClick={() => {
|
|
const event = new KeyboardEvent('keydown', {
|
|
key: 'ArrowLeft',
|
|
});
|
|
dispatchEvent(event);
|
|
}}
|
|
>
|
|
<ArrowLeftIcon className="size-4" />
|
|
</Button>
|
|
<Button
|
|
size="icon"
|
|
variant={'ghost'}
|
|
onClick={() => {
|
|
const event = new KeyboardEvent('keydown', {
|
|
key: 'ArrowRight',
|
|
});
|
|
dispatchEvent(event);
|
|
}}
|
|
>
|
|
<ArrowRightIcon className="size-4" />
|
|
</Button> */}
|
|
<Button size="icon" variant={'ghost'} onClick={() => popModal()}>
|
|
<XIcon className="size-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<WidgetButtons>
|
|
{Object.entries(TABS).map(([, tab]) => (
|
|
<button
|
|
key={tab.id}
|
|
type="button"
|
|
onClick={() => setWidget(tab)}
|
|
className={cn(tab.id === widget.id && 'active')}
|
|
>
|
|
{tab.title}
|
|
</button>
|
|
))}
|
|
</WidgetButtons>
|
|
</WidgetHead>
|
|
<WidgetBody className="col gap-4 bg-def-100">
|
|
{profile && (
|
|
<ProjectLink
|
|
onClick={() => popModal()}
|
|
href={`/profiles/${profile.id}`}
|
|
className="card p-4 py-2 col gap-2 hover:bg-def-100"
|
|
>
|
|
<div className="row items-center gap-2 justify-between">
|
|
<div className="row items-center gap-2 min-w-0">
|
|
{profile.avatar && (
|
|
<img
|
|
className="size-4 bg-border rounded-full"
|
|
src={profile.avatar}
|
|
/>
|
|
)}
|
|
<div className="font-medium truncate">
|
|
{getProfileName(profile, false)}
|
|
</div>
|
|
</div>
|
|
<div className="row items-center gap-2 shrink-0">
|
|
<div className="row gap-1 items-center">
|
|
<SerieIcon name={event.country} />
|
|
<SerieIcon name={event.os} />
|
|
<SerieIcon name={event.browser} />
|
|
</div>
|
|
<div className="text-muted-foreground truncate max-w-40">
|
|
{event.referrerName || event.referrer}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{!!session && (
|
|
<div className="text-sm">
|
|
This session has {session.screenViewCount} screen views and{' '}
|
|
{session.eventCount} events. Visit duration is{' '}
|
|
{fancyMinutes(session.duration / 1000)}.
|
|
</div>
|
|
)}
|
|
</ProjectLink>
|
|
)}
|
|
|
|
{properties.length > 0 && (
|
|
<section>
|
|
<div className="mb-2 flex justify-between font-medium">
|
|
<div>Properties</div>
|
|
</div>
|
|
<KeyValueGrid
|
|
columns={1}
|
|
data={properties}
|
|
renderValue={(item) => (
|
|
<div className="flex items-center gap-2">
|
|
<span className="font-mono">{String(item.value)}</span>
|
|
<FilterIcon className="size-3 shrink-0" />
|
|
</div>
|
|
)}
|
|
onItemClick={(item) => {
|
|
popModal();
|
|
setFilter(`properties.${item.name}`, item.value as any);
|
|
}}
|
|
/>
|
|
</section>
|
|
)}
|
|
<section>
|
|
<div className="mb-2 flex justify-between font-medium">
|
|
<div>Information</div>
|
|
</div>
|
|
<KeyValueGrid
|
|
columns={1}
|
|
data={data}
|
|
renderValue={(item) => {
|
|
const isFilterable = item.value && (filterable as any)[item.name];
|
|
if (isFilterable) {
|
|
return (
|
|
<div className="flex items-center gap-2">
|
|
<FieldValue
|
|
name={item.name}
|
|
value={item.value}
|
|
event={event}
|
|
/>
|
|
<FilterIcon className="size-3 shrink-0" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<FieldValue name={item.name} value={item.value} event={event} />
|
|
);
|
|
}}
|
|
onItemClick={(item) => {
|
|
const isFilterable = item.value && (filterable as any)[item.name];
|
|
if (isFilterable) {
|
|
popModal();
|
|
setFilter(item.name as keyof IServiceEvent, item.value);
|
|
}
|
|
}}
|
|
/>
|
|
</section>
|
|
<section>
|
|
<div className="mb-2 flex justify-between font-medium">
|
|
<div>All events for {event.name}</div>
|
|
<button
|
|
type="button"
|
|
className="text-muted-foreground hover:underline"
|
|
onClick={() => {
|
|
setEvents([event.name]);
|
|
popModal();
|
|
}}
|
|
>
|
|
Show all
|
|
</button>
|
|
</div>
|
|
<div className="card p-4">
|
|
<ReportChartShortcut
|
|
projectId={event.projectId}
|
|
chartType="linear"
|
|
series={[
|
|
{
|
|
id: 'A',
|
|
name: event.name,
|
|
displayName: 'Similar events',
|
|
segment: 'event',
|
|
filters: [],
|
|
type: 'event',
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
</section>
|
|
</WidgetBody>
|
|
</>
|
|
);
|
|
}
|
|
|
|
function EventDetailsSkeleton() {
|
|
return (
|
|
<>
|
|
<WidgetHead>
|
|
<div className="row items-center justify-between">
|
|
<div className="h-6 w-32 bg-muted animate-pulse rounded" />
|
|
<div className="row items-center gap-2 pr-2">
|
|
<div className="h-8 w-8 bg-muted animate-pulse rounded" />
|
|
<div className="h-8 w-8 bg-muted animate-pulse rounded" />
|
|
<div className="h-8 w-8 bg-muted animate-pulse rounded" />
|
|
</div>
|
|
</div>
|
|
|
|
<WidgetButtons>
|
|
<div className="h-8 w-20 bg-muted animate-pulse rounded" />
|
|
<div className="h-8 w-20 bg-muted animate-pulse rounded" />
|
|
</WidgetButtons>
|
|
</WidgetHead>
|
|
<WidgetBody className="col gap-4 bg-def-100">
|
|
{/* Profile skeleton */}
|
|
<div className="card p-4 py-2 col gap-2">
|
|
<div className="row items-center gap-2 justify-between">
|
|
<div className="row items-center gap-2 min-w-0">
|
|
<div className="size-4 bg-muted animate-pulse rounded-full" />
|
|
<div className="h-4 w-24 bg-muted animate-pulse rounded" />
|
|
</div>
|
|
<div className="row items-center gap-2 shrink-0">
|
|
<div className="row gap-1 items-center">
|
|
<div className="size-4 bg-muted animate-pulse rounded" />
|
|
<div className="size-4 bg-muted animate-pulse rounded" />
|
|
<div className="size-4 bg-muted animate-pulse rounded" />
|
|
</div>
|
|
<div className="h-4 w-32 bg-muted animate-pulse rounded" />
|
|
</div>
|
|
</div>
|
|
<div className="h-4 w-64 bg-muted animate-pulse rounded" />
|
|
</div>
|
|
|
|
{/* Properties skeleton */}
|
|
<section>
|
|
<div className="mb-2 flex justify-between font-medium">
|
|
<div className="h-5 w-20 bg-muted animate-pulse rounded" />
|
|
</div>
|
|
<div className="space-y-2">
|
|
{Array.from({ length: 3 }).map((_, i) => (
|
|
<div
|
|
key={i.toString()}
|
|
className="flex items-center justify-between p-3 bg-muted/50 rounded"
|
|
>
|
|
<div className="h-4 w-24 bg-muted animate-pulse rounded" />
|
|
<div className="h-4 w-32 bg-muted animate-pulse rounded" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
{/* Information skeleton */}
|
|
<section>
|
|
<div className="mb-2 flex justify-between font-medium">
|
|
<div className="h-5 w-24 bg-muted animate-pulse rounded" />
|
|
</div>
|
|
<div className="space-y-2">
|
|
{Array.from({ length: 6 }).map((_, i) => (
|
|
<div
|
|
key={i.toString()}
|
|
className="flex items-center justify-between p-3 bg-muted/50 rounded"
|
|
>
|
|
<div className="h-4 w-20 bg-muted animate-pulse rounded" />
|
|
<div className="h-4 w-28 bg-muted animate-pulse rounded" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
{/* Chart skeleton */}
|
|
<section>
|
|
<div className="mb-2 flex justify-between font-medium">
|
|
<div className="h-5 w-40 bg-muted animate-pulse rounded" />
|
|
<div className="h-4 w-16 bg-muted animate-pulse rounded" />
|
|
</div>
|
|
<div className="card p-4">
|
|
<div className="h-32 w-full bg-muted animate-pulse rounded" />
|
|
</div>
|
|
</section>
|
|
</WidgetBody>
|
|
</>
|
|
);
|
|
}
|