zias/stats
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

final fixes

Browse Source
This commit is contained in:
Carl-Gerhard Lindesvärd
2026-02-26 10:19:29 +01:00
parent b193ccb7d0
commit d5513d8a47
21 changed files with 388 additions and 370 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
apps/start/src/components/sessions/replay/index.tsx
View File

@@ -4,6 +4,7 @@ import { Maximize2, Minimize2 } from 'lucide-react';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { BrowserChrome } from './browser-chrome';
import { ReplayTime } from './replay-controls';
import { ReplayTimeline } from './replay-timeline';
import { getEventOffsetMs } from './replay-utils';
import {
ReplayProvider,
@@ -12,7 +13,6 @@ import {
} from '@/components/sessions/replay/replay-context';
import { ReplayEventFeed } from '@/components/sessions/replay/replay-event-feed';
import { ReplayPlayer } from '@/components/sessions/replay/replay-player';
import { ReplayTimeline } from '@/components/sessions/replay/replay-timeline';
import { useTRPC } from '@/integrations/trpc/react';
function BrowserUrlBar({ events }: { events: IServiceEvent[] }) {
@@ -32,7 +32,7 @@ function BrowserUrlBar({ events }: { events: IServiceEvent[] }) {
.filter(({ offsetMs }) => offsetMs >= -10_000 && offsetMs <= currentTime)
.sort((a, b) => a.offsetMs - b.offsetMs);
const latest = withOffset[withOffset.length - 1];
const latest = withOffset.at(-1);
if (!latest) {
return '';
}
@@ -74,7 +74,7 @@ function ReplayChunkLoader({
)
.then((res) => {
res.data.forEach((row) => {
row.events.forEach((event) => {
row?.events?.forEach((event) => {
addEvent(event);
});
});
@@ -82,6 +82,9 @@ function ReplayChunkLoader({
if (res.hasMore) {
recursive(fromIndex + res.data.length);
}
})
.catch(() => {
// chunk loading failed — replay may be incomplete
});
}
@@ -160,10 +163,30 @@ function ReplayContent({
);
const events = eventsData?.data ?? [];
const playerEvents = firstBatch?.data.flatMap((row) => row.events) ?? [];
const playerEvents =
firstBatch?.data.flatMap((row) => row?.events ?? []) ?? [];
const hasMore = firstBatch?.hasMore ?? false;
const hasReplay = playerEvents.length !== 0;
function renderReplay() {
if (replayLoading) {
return (
<div className="col h-[320px] items-center justify-center gap-4 bg-background">
<div className="h-8 w-8 animate-pulse rounded-full bg-muted" />
<div>Loading session replay</div>
</div>
);
}
if (hasReplay) {
return <ReplayPlayer events={playerEvents} />;
}
return (
<div className="flex h-[320px] items-center justify-center bg-background text-muted-foreground text-sm">
No replay data available for this session.
</div>
);
}
return (
<ReplayProvider>
<div
@@ -187,18 +210,7 @@ function ReplayContent({
)
}
>
{replayLoading ? (
<div className="col h-[320px] items-center justify-center gap-4 bg-background">
<div className="h-8 w-8 animate-pulse rounded-full bg-muted" />
<div>Loading session replay</div>
</div>
) : hasReplay ? (
<ReplayPlayer events={playerEvents} />
) : (
<div className="flex h-[320px] items-center justify-center bg-background text-muted-foreground text-sm">
No replay data available for this session.
</div>
)}
{renderReplay()}
{hasReplay && <ReplayTimeline events={events} />}
</BrowserChrome>
</div>

30
apps/start/src/components/sessions/table/columns.tsx
View File

@@ -1,14 +1,12 @@
import { ProjectLink } from '@/components/links';
import { SerieIcon } from '@/components/report-chart/common/serie-icon';
import { formatDateTime, formatTimeAgoOrDateTime } from '@/utils/date';
import type { ColumnDef } from '@tanstack/react-table';
import { Video } from 'lucide-react';
import { ColumnCreatedAt } from '@/components/column-created-at';
import { ProfileAvatar } from '@/components/profiles/profile-avatar';
import { getProfileName } from '@/utils/getters';
import { round } from '@openpanel/common';
import type { IServiceSession } from '@openpanel/db';
import type { ColumnDef } from '@tanstack/react-table';
import { Video } from 'lucide-react';
import { ColumnCreatedAt } from '@/components/column-created-at';
import { ProjectLink } from '@/components/links';
import { ProfileAvatar } from '@/components/profiles/profile-avatar';
import { SerieIcon } from '@/components/report-chart/common/serie-icon';
import { getProfileName } from '@/utils/getters';
function formatDuration(milliseconds: number): string {
const seconds = milliseconds / 1000;
@@ -45,20 +43,20 @@ export function useColumns() {
cell: ({ row }) => {
const session = row.original;
return (
<div className="row gap-2 items-center">
<div className="row items-center gap-2">
<ProjectLink
href={`/sessions/${session.id}`}
className="font-medium"
href={`/sessions/${session.id}`}
title={session.id}
>
{session.id.slice(0, 8)}...
</ProjectLink>
{session.hasReplay && (
<ProjectLink
href={`/sessions/${session.id}#replay`}
className="text-muted-foreground hover:text-foreground"
title="View replay"
aria-label="View replay"
className="text-muted-foreground hover:text-foreground"
href={`/sessions/${session.id}#replay`}
title="View replay"
>
<Video className="size-4" />
</ProjectLink>
@@ -76,8 +74,8 @@ export function useColumns() {
if (session.profile) {
return (
<ProjectLink
className="row items-center gap-2 font-medium"
href={`/profiles/${encodeURIComponent(session.profile.id)}`}
className="font-medium row gap-2 items-center"
>
<ProfileAvatar size="sm" {...session.profile} />
{getProfileName(session.profile)}
@@ -86,8 +84,8 @@ export function useColumns() {
}
return (
<ProjectLink
className="font-medium font-mono"
href={`/profiles/${encodeURIComponent(session.profileId)}`}
className="font-mono font-medium"
>
{session.profileId}
</ProjectLink>

177
apps/start/src/modals/event-details.tsx
View File

@@ -1,22 +1,3 @@
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';
@@ -24,6 +5,24 @@ import { omit } from 'ramda';
import { Suspense, useState } from 'react';
import { popModal } from '.';
import { ModalContent } from './Modal/Container';
import { ProjectLink } from '@/components/links';
import {
WidgetButtons,
WidgetHead,
} from '@/components/overview/overview-widget';
import { SerieIcon } from '@/components/report-chart/common/serie-icon';
import { ReportChartShortcut } from '@/components/report-chart/shortcut';
import { Button } from '@/components/ui/button';
import { FieldValue, KeyValueGrid } from '@/components/ui/key-value-grid';
import { Widget, WidgetBody } from '@/components/widget';
import {
useEventQueryFilters,
useEventQueryNamesFilter,
} from '@/hooks/use-event-query-filters';
import { fancyMinutes } from '@/hooks/use-numer-formatter';
import { useTRPC } from '@/integrations/trpc/react';
import { cn } from '@/utils/cn';
import { getProfileName } from '@/utils/getters';
interface Props {
id: string;
@@ -55,7 +54,7 @@ const filterable: Partial<Record<keyof IServiceEvent, keyof IClickhouseEvent>> =
export default function EventDetails(props: Props) {
return (
<ModalContent className="!p-0">
<Widget className="bg-transparent border-0 min-w-0">
<Widget className="min-w-0 border-0 bg-transparent">
<Suspense fallback={<EventDetailsSkeleton />}>
<EventDetailsContent {...props} />
</Suspense>
@@ -84,7 +83,7 @@ function EventDetailsContent({ id, createdAt, projectId }: Props) {
id,
projectId,
createdAt,
}),
})
);
const { event, session } = query.data;
@@ -158,7 +157,7 @@ function EventDetailsContent({ id, createdAt, projectId }: Props) {
event,
});
}
},
}
);
}
@@ -209,7 +208,7 @@ function EventDetailsContent({ id, createdAt, projectId }: Props) {
>
<ArrowRightIcon className="size-4" />
</Button> */}
<Button size="icon" variant={'ghost'} onClick={() => popModal()}>
<Button onClick={() => popModal()} size="icon" variant={'ghost'}>
<XIcon className="size-4" />
</Button>
</div>
@@ -218,10 +217,10 @@ function EventDetailsContent({ id, createdAt, projectId }: Props) {
<WidgetButtons>
{Object.entries(TABS).map(([, tab]) => (
<button
key={tab.id}
type="button"
onClick={() => setWidget(tab)}
className={cn(tab.id === widget.id && 'active')}
key={tab.id}
onClick={() => setWidget(tab)}
type="button"
>
{tab.title}
</button>
@@ -231,29 +230,29 @@ function EventDetailsContent({ id, createdAt, projectId }: Props) {
<WidgetBody className="col gap-4 bg-def-100">
{profile && (
<ProjectLink
onClick={() => popModal()}
className="card col gap-2 p-4 py-2 hover:bg-def-100"
href={`/profiles/${encodeURIComponent(profile.id)}`}
className="card p-4 py-2 col gap-2 hover:bg-def-100"
onClick={() => popModal()}
>
<div className="row items-center gap-2 justify-between">
<div className="row items-center gap-2 min-w-0">
<div className="row items-center justify-between gap-2">
<div className="row min-w-0 items-center gap-2">
{profile.avatar && (
<img
className="size-4 bg-border rounded-full"
className="size-4 rounded-full bg-border"
src={profile.avatar}
/>
)}
<div className="font-medium truncate">
<div className="truncate font-medium">
{getProfileName(profile, false)}
</div>
</div>
<div className="row items-center gap-2 shrink-0">
<div className="row gap-1 items-center">
<div className="row shrink-0 items-center gap-2">
<div className="row items-center gap-1">
<SerieIcon name={event.country} />
<SerieIcon name={event.os} />
<SerieIcon name={event.browser} />
</div>
<div className="text-muted-foreground truncate max-w-40">
<div className="max-w-40 truncate text-muted-foreground">
{event.referrerName || event.referrer}
</div>
</div>
@@ -276,16 +275,16 @@ function EventDetailsContent({ id, createdAt, projectId }: Props) {
<KeyValueGrid
columns={1}
data={properties}
onItemClick={(item) => {
popModal();
setFilter(`properties.${item.name}`, item.value as any);
}}
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>
)}
@@ -296,25 +295,6 @@ function EventDetailsContent({ id, createdAt, projectId }: Props) {
<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) {
@@ -322,26 +302,45 @@ function EventDetailsContent({ id, createdAt, projectId }: Props) {
setFilter(item.name as keyof IServiceEvent, item.value);
}
}}
renderValue={(item) => {
const isFilterable = item.value && (filterable as any)[item.name];
if (isFilterable) {
return (
<div className="flex items-center gap-2">
<FieldValue
event={event}
name={item.name}
value={item.value}
/>
<FilterIcon className="size-3 shrink-0" />
</div>
);
}
return (
<FieldValue event={event} name={item.name} value={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();
}}
type="button"
>
Show all
</button>
</div>
<div className="card p-4">
<ReportChartShortcut
projectId={event.projectId}
chartType="linear"
projectId={event.projectId}
series={[
{
id: 'A',
@@ -365,52 +364,52 @@ function EventDetailsSkeleton() {
<>
<WidgetHead>
<div className="row items-center justify-between">
<div className="h-6 w-32 bg-muted animate-pulse rounded" />
<div className="h-6 w-32 animate-pulse rounded bg-muted" />
<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 className="h-8 w-8 animate-pulse rounded bg-muted" />
<div className="h-8 w-8 animate-pulse rounded bg-muted" />
<div className="h-8 w-8 animate-pulse rounded bg-muted" />
</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" />
<div className="h-8 w-20 animate-pulse rounded bg-muted" />
<div className="h-8 w-20 animate-pulse rounded bg-muted" />
</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 className="card col gap-2 p-4 py-2">
<div className="row items-center justify-between gap-2">
<div className="row min-w-0 items-center gap-2">
<div className="size-4 animate-pulse rounded-full bg-muted" />
<div className="h-4 w-24 animate-pulse rounded bg-muted" />
</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 className="row shrink-0 items-center gap-2">
<div className="row items-center gap-1">
<div className="size-4 animate-pulse rounded bg-muted" />
<div className="size-4 animate-pulse rounded bg-muted" />
<div className="size-4 animate-pulse rounded bg-muted" />
</div>
<div className="h-4 w-32 bg-muted animate-pulse rounded" />
<div className="h-4 w-32 animate-pulse rounded bg-muted" />
</div>
</div>
<div className="h-4 w-64 bg-muted animate-pulse rounded" />
<div className="h-4 w-64 animate-pulse rounded bg-muted" />
</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 className="h-5 w-20 animate-pulse rounded bg-muted" />
</div>
<div className="space-y-2">
{Array.from({ length: 3 }).map((_, i) => (
<div
className="flex items-center justify-between rounded bg-muted/50 p-3"
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 className="h-4 w-24 animate-pulse rounded bg-muted" />
<div className="h-4 w-32 animate-pulse rounded bg-muted" />
</div>
))}
</div>
@@ -419,16 +418,16 @@ function EventDetailsSkeleton() {
{/* Information skeleton */}
<section>
<div className="mb-2 flex justify-between font-medium">
<div className="h-5 w-24 bg-muted animate-pulse rounded" />
<div className="h-5 w-24 animate-pulse rounded bg-muted" />
</div>
<div className="space-y-2">
{Array.from({ length: 6 }).map((_, i) => (
<div
className="flex items-center justify-between rounded bg-muted/50 p-3"
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 className="h-4 w-20 animate-pulse rounded bg-muted" />
<div className="h-4 w-28 animate-pulse rounded bg-muted" />
</div>
))}
</div>
@@ -437,11 +436,11 @@ function EventDetailsSkeleton() {
{/* 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 className="h-5 w-40 animate-pulse rounded bg-muted" />
<div className="h-4 w-16 animate-pulse rounded bg-muted" />
</div>
<div className="card p-4">
<div className="h-32 w-full bg-muted animate-pulse rounded" />
<div className="h-32 w-full animate-pulse rounded bg-muted" />
</div>
</section>
</WidgetBody>

187
apps/start/src/routes/_app.$organizationId.$projectId.sessions_.$sessionId.tsx
View File

@@ -1,3 +1,6 @@
import type { IServiceEvent, IServiceSession } from '@openpanel/db';
import { useSuspenseQuery } from '@tanstack/react-query';
import { createFileRoute, Link } from '@tanstack/react-router';
import { EventIcon } from '@/components/events/event-icon';
import FullPageLoadingState from '@/components/full-page-loading-state';
import { PageContainer } from '@/components/page-container';
@@ -6,18 +9,20 @@ import { ProfileAvatar } from '@/components/profiles/profile-avatar';
import { SerieIcon } from '@/components/report-chart/common/serie-icon';
import { ReplayShell } from '@/components/sessions/replay';
import { KeyValueGrid } from '@/components/ui/key-value-grid';
import { Widget, WidgetBody, WidgetHead, WidgetTitle } from '@/components/widget';
import {
Widget,
WidgetBody,
WidgetHead,
WidgetTitle,
} from '@/components/widget';
import { useNumber } from '@/hooks/use-numer-formatter';
import { useTRPC } from '@/integrations/trpc/react';
import { formatDateTime } from '@/utils/date';
import { getProfileName } from '@/utils/getters';
import { useNumber } from '@/hooks/use-numer-formatter';
import { createProjectTitle } from '@/utils/title';
import { useSuspenseQuery } from '@tanstack/react-query';
import { Link, createFileRoute } from '@tanstack/react-router';
import type { IServiceEvent, IServiceSession } from '@openpanel/db';
export const Route = createFileRoute(
'/_app/$organizationId/$projectId/sessions_/$sessionId',
'/_app/$organizationId/$projectId/sessions_/$sessionId'
)({
component: Component,
loader: async ({ context, params }) => {
@@ -26,7 +31,7 @@ export const Route = createFileRoute(
context.trpc.session.byId.queryOptions({
sessionId: params.sessionId,
projectId: params.projectId,
}),
})
),
context.queryClient.prefetchQuery(
context.trpc.event.events.queryOptions({
@@ -34,7 +39,7 @@ export const Route = createFileRoute(
sessionId: params.sessionId,
filters: [],
columnVisibility: {},
}),
})
),
]);
},
@@ -45,7 +50,19 @@ export const Route = createFileRoute(
});
function sessionToFakeEvent(session: IServiceSession): IServiceEvent {
return session as unknown as IServiceEvent;
return {
...session,
name: 'screen_view',
sessionId: session.id,
properties: {},
path: session.exitPath,
origin: session.exitOrigin,
importedAt: undefined,
meta: undefined,
sdkName: undefined,
sdkVersion: undefined,
profile: undefined,
};
}
function VisitedRoutes({ paths }: { paths: string[] }) {
@@ -56,7 +73,9 @@ function VisitedRoutes({ paths }: { paths: string[] }) {
const sorted = Object.entries(counted).sort((a, b) => b[1] - a[1]);
const max = sorted[0]?.[1] ?? 1;
if (sorted.length === 0) return null;
if (sorted.length === 0) {
return null;
}
return (
<Widget className="w-full">
@@ -65,14 +84,14 @@ function VisitedRoutes({ paths }: { paths: string[] }) {
</WidgetHead>
<div className="flex flex-col gap-1 p-1">
{sorted.map(([path, count]) => (
<div key={path} className="relative px-3 py-2 group">
<div className="group relative px-3 py-2" key={path}>
<div
className="absolute bottom-0 left-0 top-0 rounded bg-def-200 group-hover:bg-def-300"
className="absolute top-0 bottom-0 left-0 rounded bg-def-200 group-hover:bg-def-300"
style={{ width: `${(count / max) * 100}%` }}
/>
<div className="relative flex justify-between gap-2 min-w-0">
<div className="relative flex min-w-0 justify-between gap-2">
<span className="truncate text-sm">{path}</span>
<span className="shrink-0 text-sm font-medium">{count}</span>
<span className="shrink-0 font-medium text-sm">{count}</span>
</div>
</div>
))}
@@ -89,7 +108,9 @@ function EventDistribution({ events }: { events: IServiceEvent[] }) {
const sorted = Object.entries(counted).sort((a, b) => b[1] - a[1]);
const max = sorted[0]?.[1] ?? 1;
if (sorted.length === 0) return null;
if (sorted.length === 0) {
return null;
}
return (
<Widget className="w-full">
@@ -98,14 +119,14 @@ function EventDistribution({ events }: { events: IServiceEvent[] }) {
</WidgetHead>
<div className="flex flex-col gap-1 p-1">
{sorted.map(([name, count]) => (
<div key={name} className="relative px-3 py-2 group">
<div className="group relative px-3 py-2" key={name}>
<div
className="absolute bottom-0 left-0 top-0 rounded bg-def-200 group-hover:bg-def-300"
className="absolute top-0 bottom-0 left-0 rounded bg-def-200 group-hover:bg-def-300"
style={{ width: `${(count / max) * 100}%` }}
/>
<div className="relative flex justify-between gap-2">
<span className="text-sm">{name.replace(/_/g, ' ')}</span>
<span className="shrink-0 text-sm font-medium">{count}</span>
<span className="shrink-0 font-medium text-sm">{count}</span>
</div>
</div>
))}
@@ -117,10 +138,10 @@ function EventDistribution({ events }: { events: IServiceEvent[] }) {
function Component() {
const { projectId, sessionId, organizationId } = Route.useParams();
const trpc = useTRPC();
const number = useNumber()
const number = useNumber();
const { data: session } = useSuspenseQuery(
trpc.session.byId.queryOptions({ sessionId, projectId }),
trpc.session.byId.queryOptions({ sessionId, projectId })
);
const { data: eventsData } = useSuspenseQuery(
@@ -129,7 +150,7 @@ function Component() {
sessionId,
filters: [],
columnVisibility: {},
}),
})
);
const events = eventsData?.data ?? [];
@@ -141,83 +162,54 @@ function Component() {
trpc.profile.byId.queryOptions({
profileId: session.profileId,
projectId,
}),
})
);
const fakeEvent = sessionToFakeEvent(session);
return (
<PageContainer className="col gap-8">
<PageHeader
title={`Session: ${session.id}`}
>
<div className="row gap-4 mb-6">
{session.country && (
<div className="row gap-2 items-center">
<SerieIcon name={session.country} />
<span>
{session.country}
{session.city && ` / ${session.city}`}
</span>
</div>
)}
{session.device && (
<div className="row gap-2 items-center">
<SerieIcon name={session.device} />
<span className="capitalize">{session.device}</span>
</div>
)}
{session.os && (
<div className="row gap-2 items-center">
<SerieIcon name={session.os} />
<span>{session.os}</span>
</div>
)}
{session.model && (
<div className="row gap-2 items-center">
<SerieIcon name={session.model} />
<span>{session.model}</span>
</div>
)}
{session.browser && (
<div className="row gap-2 items-center">
<SerieIcon name={session.browser} />
<span>{session.browser}</span>
<PageHeader title={`Session: ${session.id}`}>
<div className="row mb-6 gap-4">
{session.country && (
<div className="row items-center gap-2">
<SerieIcon name={session.country} />
<span>
{session.country}
{session.city && ` / ${session.city}`}
</span>
</div>
)}
{session.device && (
<div className="row items-center gap-2">
<SerieIcon name={session.device} />
<span className="capitalize">{session.device}</span>
</div>
)}
{session.os && (
<div className="row items-center gap-2">
<SerieIcon name={session.os} />
<span>{session.os}</span>
</div>
)}
{session.model && (
<div className="row items-center gap-2">
<SerieIcon name={session.model} />
<span>{session.model}</span>
</div>
)}
{session.browser && (
<div className="row items-center gap-2">
<SerieIcon name={session.browser} />
<span>{session.browser}</span>
</div>
)}
</div>
</PageHeader>
{session.hasReplay && <ReplayShell sessionId={sessionId} projectId={projectId} />}
{session.hasReplay && (
<ReplayShell projectId={projectId} sessionId={sessionId} />
)}
<div className="grid grid-cols-1 gap-6 lg:grid-cols-[340px_minmax(0,1fr)]">
{/* Left column */}
@@ -232,7 +224,10 @@ function Component() {
columns={1}
copyable
data={[
{ name: 'duration', value: number.formatWithUnit(session.duration/1000, 'min') },
{
name: 'duration',
value: number.formatWithUnit(session.duration / 1000, 'min'),
},
{ name: 'createdAt', value: session.createdAt },
{ name: 'endedAt', value: session.endedAt },
{ name: 'screenViews', value: session.screenViewCount },
@@ -305,13 +300,13 @@ function Component() {
</WidgetHead>
<WidgetBody className="p-0">
<Link
to="/$organizationId/$projectId/profiles/$profileId"
className="row items-center gap-3 p-4 transition-colors hover:bg-accent"
params={{
organizationId,
projectId,
profileId: session.profileId,
}}
className="row items-center gap-3 p-4 transition-colors hover:bg-accent"
to="/$organizationId/$projectId/profiles/$profileId"
>
<ProfileAvatar {...profile} size="lg" />
<div className="col min-w-0 gap-0.5">
@@ -319,7 +314,7 @@ function Component() {
{getProfileName(profile, false) ?? session.profileId}
</span>
{profile.email && (
<span className="truncate text-sm text-muted-foreground">
<span className="truncate text-muted-foreground text-sm">
{profile.email}
</span>
)}
@@ -350,24 +345,24 @@ function Component() {
<div className="divide-y">
{events.map((event) => (
<div
key={event.id}
className="row items-center gap-3 px-4 py-2"
key={event.id}
>
<EventIcon name={event.name} meta={event.meta} size="sm" />
<EventIcon meta={event.meta} name={event.name} size="sm" />
<div className="col min-w-0 flex-1">
<span className="truncate text-sm font-medium">
<span className="truncate font-medium text-sm">
{event.name === 'screen_view' && event.path
? event.path
: event.name.replace(/_/g, ' ')}
</span>
</div>
<span className="shrink-0 text-xs tabular-nums text-muted-foreground">
<span className="shrink-0 text-muted-foreground text-xs tabular-nums">
{formatDateTime(event.createdAt)}
</span>
</div>
))}
{events.length === 0 && (
<div className="py-8 text-center text-sm text-muted-foreground">
<div className="py-8 text-center text-muted-foreground text-sm">
No events found
</div>
)}