improve(dashboard): better event details
This commit is contained in:
Carl-Gerhard Lindesvärd
77
apps/dashboard/src/components/events/event-field-value.tsx
Normal file
77
apps/dashboard/src/components/events/event-field-value.tsx
Normal file
@@ -0,0 +1,77 @@
|
||||
import { fancyMinutes } from '@/hooks/useNumerFormatter';
|
||||
import { formatDateTime, formatTime } from '@/utils/date';
|
||||
import type { IServiceEvent } from '@openpanel/db';
|
||||
import { isToday } from 'date-fns';
|
||||
import { SerieIcon } from '../report-chart/common/serie-icon';
|
||||
|
||||
export function EventFieldValue({
|
||||
key,
|
||||
value,
|
||||
event,
|
||||
}: {
|
||||
key: keyof IServiceEvent;
|
||||
value: any;
|
||||
event: IServiceEvent;
|
||||
}) {
|
||||
if (!value) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (value instanceof Date) {
|
||||
return isToday(value) ? formatTime(value) : formatDateTime(value);
|
||||
}
|
||||
|
||||
switch (key) {
|
||||
case 'osVersion':
|
||||
return (
|
||||
<div className="row gap-2 items-center">
|
||||
<SerieIcon name={event.os} />
|
||||
<span>{value}</span>
|
||||
</div>
|
||||
);
|
||||
case 'browserVersion':
|
||||
return (
|
||||
<div className="row gap-2 items-center">
|
||||
<SerieIcon name={event.browser} />
|
||||
<span>{value}</span>
|
||||
</div>
|
||||
);
|
||||
case 'city':
|
||||
return (
|
||||
<div className="row gap-2 items-center">
|
||||
<SerieIcon name={event.country} />
|
||||
<span>{value}</span>
|
||||
</div>
|
||||
);
|
||||
case 'region':
|
||||
return (
|
||||
<div className="row gap-2 items-center">
|
||||
<SerieIcon name={event.country} />
|
||||
<span>{value}</span>
|
||||
</div>
|
||||
);
|
||||
case 'properties':
|
||||
return JSON.stringify(value);
|
||||
case 'country':
|
||||
case 'browser':
|
||||
case 'os':
|
||||
case 'brand':
|
||||
case 'model':
|
||||
case 'device':
|
||||
return (
|
||||
<div className="row gap-2 items-center">
|
||||
<SerieIcon name={value} />
|
||||
<span>{value}</span>
|
||||
</div>
|
||||
);
|
||||
case 'duration':
|
||||
return (
|
||||
<div className="text-right">
|
||||
<span className="text-muted-foreground">({value}ms)</span>{' '}
|
||||
{fancyMinutes(value / 1000)}
|
||||
</div>
|
||||
);
|
||||
default:
|
||||
return value;
|
||||
}
|
||||
}
|
||||
@@ -1,7 +1,6 @@
|
||||
import { EventIcon } from '@/components/events/event-icon';
|
||||
import { ProjectLink } from '@/components/links';
|
||||
import { SerieIcon } from '@/components/report-chart/common/serie-icon';
|
||||
import { TooltipComplete } from '@/components/tooltip-complete';
|
||||
import { useNumber } from '@/hooks/useNumerFormatter';
|
||||
import { pushModal } from '@/modals';
|
||||
import { formatDateTime, formatTime } from '@/utils/date';
|
||||
@@ -11,7 +10,6 @@ import { isToday } from 'date-fns';
|
||||
|
||||
import { ScrollArea } from '@/components/ui/scroll-area';
|
||||
import type { IServiceEvent } from '@openpanel/db';
|
||||
import { omit } from 'ramda';
|
||||
|
||||
export function useColumns() {
|
||||
const number = useNumber();
|
||||
@@ -196,6 +194,9 @@ export function useColumns() {
|
||||
accessorKey: 'properties',
|
||||
header: 'Properties',
|
||||
size: 400,
|
||||
meta: {
|
||||
className: 'p-0 [&_pre]:p-4',
|
||||
},
|
||||
cell({ row }) {
|
||||
const { properties } = row.original;
|
||||
const filteredProperties = Object.fromEntries(
|
||||
|
||||
@@ -133,6 +133,7 @@ export function EventsDataTable<TData>({
|
||||
return (
|
||||
<GridCell
|
||||
key={cell.id}
|
||||
className={cell.column.columnDef.meta?.className}
|
||||
style={{
|
||||
minWidth: cell.column.getSize(),
|
||||
flexShrink: 1,
|
||||
|
||||
@@ -5,10 +5,13 @@ import type {
|
||||
UseQueryResult,
|
||||
} from '@tanstack/react-query';
|
||||
import { GanttChartIcon, Loader2Icon } from 'lucide-react';
|
||||
import { useEffect, useRef } from 'react';
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
|
||||
import { pushModal, replaceWithModal, useOnPushModal } from '@/modals';
|
||||
import type { RouterOutputs } from '@/trpc/client';
|
||||
import { cn } from '@/utils/cn';
|
||||
import { shouldIgnoreKeypress } from '@/utils/should-ignore-keypress';
|
||||
import { bind } from 'bind-event-listener';
|
||||
import { useInViewport } from 'react-in-viewport';
|
||||
import { useColumns } from './columns';
|
||||
import { EventsDataTable } from './events-data-table';
|
||||
@@ -38,6 +41,48 @@ export const EventsTable = ({ query, ...props }: Props) => {
|
||||
? query.data?.pages[query.data.pages.length - 1]?.meta.next
|
||||
: query.data?.meta.next;
|
||||
|
||||
const [eventId, setEventId] = useState<null | string>(null);
|
||||
useOnPushModal('EventDetails', (isOpen, props) => {
|
||||
setEventId(isOpen ? props.id : null);
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
return bind(window, {
|
||||
type: 'keydown',
|
||||
listener(event) {
|
||||
if (shouldIgnoreKeypress(event)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.key === 'ArrowLeft') {
|
||||
const index = data.findIndex((p) => p.id === eventId);
|
||||
if (index !== -1) {
|
||||
const match = data[index - 1];
|
||||
if (match) {
|
||||
replaceWithModal('EventDetails', match);
|
||||
}
|
||||
}
|
||||
}
|
||||
if (event.key === 'ArrowRight') {
|
||||
const index = data.findIndex((p) => p.id === eventId);
|
||||
if (index !== -1) {
|
||||
const match = data[index + 1];
|
||||
if (match) {
|
||||
replaceWithModal('EventDetails', match);
|
||||
} else if (
|
||||
hasNextPage &&
|
||||
isInfiniteQuery &&
|
||||
data.length > 0 &&
|
||||
query.isFetchingNextPage === false
|
||||
) {
|
||||
query.fetchNextPage();
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
}, [data, eventId]);
|
||||
|
||||
useEffect(() => {
|
||||
if (
|
||||
hasNextPage &&
|
||||
|
||||
@@ -29,6 +29,20 @@ export function useColumns(type?: 'profiles' | 'power-users') {
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'referrer',
|
||||
header: 'Referrer',
|
||||
cell({ row }) {
|
||||
const { referrer, referrer_name } = row.original.properties;
|
||||
const ref = referrer_name || referrer;
|
||||
return (
|
||||
<div className="flex min-w-0 items-center gap-2">
|
||||
<SerieIcon name={ref} />
|
||||
<span className="truncate">{ref}</span>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'country',
|
||||
header: 'Country',
|
||||
|
||||
@@ -15,19 +15,10 @@ import { bind } from 'bind-event-listener';
|
||||
import { CalendarIcon } from 'lucide-react';
|
||||
import { useCallback, useEffect, useRef } from 'react';
|
||||
|
||||
import { shouldIgnoreKeypress } from '@/utils/should-ignore-keypress';
|
||||
import { timeWindows } from '@openpanel/constants';
|
||||
import type { IChartRange } from '@openpanel/validation';
|
||||
|
||||
function shouldIgnoreKeypress(event: KeyboardEvent) {
|
||||
const tagName = (event?.target as HTMLElement)?.tagName;
|
||||
const modifierPressed =
|
||||
event.ctrlKey || event.metaKey || event.altKey || event.keyCode === 229;
|
||||
const isTyping =
|
||||
event.isComposing || tagName === 'INPUT' || tagName === 'TEXTAREA';
|
||||
|
||||
return modifierPressed || isTyping;
|
||||
}
|
||||
|
||||
type Props = {
|
||||
value: IChartRange;
|
||||
onChange: (value: IChartRange) => void;
|
||||
|
||||
@@ -40,13 +40,18 @@ const DialogContent = React.forwardRef<
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] md:w-full p-2 sm:p-6',
|
||||
className,
|
||||
'max-h-screen overflow-y-auto', // Ensure the dialog is scrollable if it exceeds the screen height
|
||||
'mt-auto', // Add margin-top: auto for all screen sizes
|
||||
'focus:outline-none focus:ring-0 transition-none',
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<div className="border bg-background p-6 shadow-lg sm:rounded-lg">
|
||||
<div
|
||||
className={cn(
|
||||
'border bg-background p-6 shadow-lg sm:rounded-lg',
|
||||
className,
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</DialogPrimitive.Content>
|
||||
|
||||
@@ -1,24 +1,30 @@
|
||||
import { ReportChartShortcut } from '@/components/report-chart/shortcut';
|
||||
import { KeyValue } from '@/components/ui/key-value';
|
||||
import { useAppParams } from '@/hooks/useAppParams';
|
||||
import {
|
||||
useEventQueryFilters,
|
||||
useEventQueryNamesFilter,
|
||||
} from '@/hooks/useEventQueryFilters';
|
||||
import { api } from '@/trpc/client';
|
||||
import { round } from 'mathjs';
|
||||
|
||||
import { SerieName } from '@/components/report-chart/common/serie-name';
|
||||
import { EventFieldValue } from '@/components/events/event-field-value';
|
||||
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 { Widget, WidgetBody } from '@/components/widget';
|
||||
import { WidgetTable } from '@/components/widget-table';
|
||||
import { useNumber } from '@/hooks/useNumerFormatter';
|
||||
import { formatDate, formatDateTime } from '@/utils/date';
|
||||
import { FilterIcon } from 'lucide-react';
|
||||
import { isNil, omit } from 'ramda';
|
||||
import { useMemo, useState } from 'react';
|
||||
import { useLocalStorage } from 'usehooks-ts';
|
||||
import { fancyMinutes } from '@/hooks/useNumerFormatter';
|
||||
import { camelCaseToWords } from '@/utils/casing';
|
||||
import { cn } from '@/utils/cn';
|
||||
import { getProfileName } from '@/utils/getters';
|
||||
import type { IClickhouseEvent, IServiceEvent } from '@openpanel/db';
|
||||
import { ArrowLeftIcon, ArrowRightIcon, FilterIcon, XIcon } from 'lucide-react';
|
||||
import { omit } from 'ramda';
|
||||
import { useState } from 'react';
|
||||
import { popModal } from '.';
|
||||
import { ModalContent, ModalHeader } from './Modal/Container';
|
||||
import { ModalContent } from './Modal/Container';
|
||||
|
||||
interface Props {
|
||||
id: string;
|
||||
@@ -26,213 +32,390 @@ interface Props {
|
||||
projectId: string;
|
||||
}
|
||||
|
||||
const filterable = {
|
||||
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',
|
||||
};
|
||||
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({ id, createdAt, projectId }: Props) {
|
||||
const [, setEvents] = useEventQueryNamesFilter();
|
||||
const [, setFilter] = useEventQueryFilters();
|
||||
const [showNullable, setShowNullable] = useLocalStorage(
|
||||
'@op:event-details-show-nullable',
|
||||
false,
|
||||
);
|
||||
const number = useNumber();
|
||||
const query = api.event.byId.useQuery({ id, projectId, createdAt });
|
||||
const TABS = {
|
||||
essentials: {
|
||||
id: 'essentials',
|
||||
title: 'Essentials',
|
||||
},
|
||||
detailed: {
|
||||
id: 'detailed',
|
||||
title: 'Detailed',
|
||||
},
|
||||
};
|
||||
const [widget, setWidget] = useState(TABS.essentials);
|
||||
const [{ event, session }] = api.event.details.useSuspenseQuery({
|
||||
id,
|
||||
projectId,
|
||||
createdAt,
|
||||
});
|
||||
|
||||
if (query.isLoading || query.isFetching) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (query.isError || !query.isSuccess) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const event = query.data;
|
||||
const profile = event.profile;
|
||||
|
||||
const data = (() => {
|
||||
const data = Object.entries(omit(['properties'], event)).map(
|
||||
([name, value]) => ({
|
||||
name: [name],
|
||||
value: value as string | number | undefined,
|
||||
}),
|
||||
);
|
||||
const data: { name: keyof IServiceEvent; value: any }[] = [
|
||||
{
|
||||
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,
|
||||
},
|
||||
];
|
||||
|
||||
Object.entries(event.properties).forEach(([name, value]) => {
|
||||
data.push({
|
||||
name: ['properties', ...name.split('.')],
|
||||
value: value as string | number | undefined,
|
||||
});
|
||||
});
|
||||
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,
|
||||
});
|
||||
}
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
return data.filter((item) => {
|
||||
if (showNullable) {
|
||||
return true;
|
||||
if (widget.id === TABS.essentials.id) {
|
||||
return !!item.value;
|
||||
}
|
||||
|
||||
return !!item.value;
|
||||
return true;
|
||||
});
|
||||
})();
|
||||
|
||||
const properties = Object.entries(event.properties)
|
||||
.filter(([name]) => !name.startsWith('__'))
|
||||
.map(([name, value]) => ({
|
||||
name: name as keyof IServiceEvent,
|
||||
value: value,
|
||||
}));
|
||||
|
||||
return (
|
||||
<ModalContent>
|
||||
<ModalHeader title={event.name} />
|
||||
<div className="-mx-2 mb-8">
|
||||
<WidgetTable
|
||||
className="w-full max-w-full"
|
||||
columnClassName="!h-auto group-hover:bg-black"
|
||||
data={data}
|
||||
keyExtractor={(item) => item.name.join('.')}
|
||||
columns={[
|
||||
{
|
||||
name: 'Name',
|
||||
className: 'text-left',
|
||||
width: 'auto',
|
||||
render(item) {
|
||||
return (
|
||||
<div className="row items-center gap-2">
|
||||
{item.name.map((name, index) => (
|
||||
<div
|
||||
key={name}
|
||||
className={
|
||||
index === item.name.length - 1
|
||||
? 'text-foreground font-medium'
|
||||
: 'text-muted-foreground'
|
||||
}
|
||||
>
|
||||
{name}
|
||||
</div>
|
||||
))}
|
||||
<ModalContent className="p-0">
|
||||
<Widget className="bg-transparent border-0">
|
||||
<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(([key, 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={(e) => 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">
|
||||
{profile.avatar && (
|
||||
<img
|
||||
className="size-4 bg-border rounded-full"
|
||||
src={profile.avatar}
|
||||
/>
|
||||
)}
|
||||
<div className="font-medium truncate">
|
||||
{getProfileName(profile, false)}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Value',
|
||||
className: 'text-right font-mono font-medium',
|
||||
width: 'auto',
|
||||
render(item) {
|
||||
const render = () => {
|
||||
if (
|
||||
item.name[0] === 'duration' &&
|
||||
typeof item.value === 'number'
|
||||
) {
|
||||
</div>
|
||||
<div className="row items-center gap-2">
|
||||
<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.screen_view_count} screen views and{' '}
|
||||
{session.event_count} 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>
|
||||
<WidgetTable
|
||||
className={'card [&>div:first-child]:hidden'}
|
||||
columnClassName="[&_.cell:first-child]:pl-4 [&_.cell:last-child]:pr-4 h-auto"
|
||||
data={properties}
|
||||
keyExtractor={(item) => item.name}
|
||||
columns={[
|
||||
{
|
||||
name: 'Name',
|
||||
className: 'text-left',
|
||||
width: 'auto',
|
||||
render(item) {
|
||||
const splitKey = item.name.split('.');
|
||||
return (
|
||||
<div className="row items-center gap-2">
|
||||
{splitKey.map((name, index) => (
|
||||
<div
|
||||
key={name}
|
||||
className={
|
||||
index === splitKey.length - 1
|
||||
? 'text-foreground'
|
||||
: 'text-muted-foreground'
|
||||
}
|
||||
>
|
||||
{camelCaseToWords(name)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Value',
|
||||
className: 'text-right font-mono font-medium',
|
||||
width: 'w-full',
|
||||
render(item) {
|
||||
return (
|
||||
<button
|
||||
className="row items-center gap-2 text-right"
|
||||
type="button"
|
||||
onClick={() => {
|
||||
popModal();
|
||||
setFilter(
|
||||
`properties.${item.name}`,
|
||||
item.value as any,
|
||||
);
|
||||
}}
|
||||
>
|
||||
<EventFieldValue
|
||||
key={item.name}
|
||||
value={item.value}
|
||||
event={event}
|
||||
/>
|
||||
<FilterIcon className="size-3 shrink-0" />
|
||||
</button>
|
||||
);
|
||||
},
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</section>
|
||||
)}
|
||||
<section>
|
||||
<div className="mb-2 flex justify-between font-medium">
|
||||
<div>Information</div>
|
||||
</div>
|
||||
<WidgetTable
|
||||
className={'card [&>div:first-child]:hidden'}
|
||||
columnClassName="[&_.cell:first-child]:pl-4 [&_.cell:last-child]:pr-4 h-auto"
|
||||
data={data}
|
||||
keyExtractor={(item) => item.name}
|
||||
columns={[
|
||||
{
|
||||
name: 'Name',
|
||||
className: 'text-left',
|
||||
width: 'auto',
|
||||
render(item) {
|
||||
const splitKey = item.name.split('.');
|
||||
return (
|
||||
<div className="text-right">
|
||||
<span className="text-muted-foreground">
|
||||
({item.value}ms)
|
||||
</span>{' '}
|
||||
{number.formatWithUnit(item.value / 1000, 'min')}
|
||||
<div className="row items-center gap-2">
|
||||
{splitKey.map((name, index) => (
|
||||
<div
|
||||
key={name}
|
||||
className={
|
||||
index === splitKey.length - 1
|
||||
? 'text-foreground'
|
||||
: 'text-muted-foreground'
|
||||
}
|
||||
>
|
||||
{camelCaseToWords(name)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Value',
|
||||
className: 'text-right font-mono font-medium',
|
||||
width: 'w-full',
|
||||
render(item) {
|
||||
if (item.value && filterable[item.name]) {
|
||||
return (
|
||||
<button
|
||||
className="row items-center gap-2 text-right"
|
||||
type="button"
|
||||
onClick={() => {
|
||||
popModal();
|
||||
setFilter(item.name, item.value);
|
||||
}}
|
||||
>
|
||||
<EventFieldValue
|
||||
key={item.name}
|
||||
value={item.value}
|
||||
event={event}
|
||||
/>
|
||||
<FilterIcon className="size-3 shrink-0" />
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
if (
|
||||
isNil(item.value) ||
|
||||
item.value === '' ||
|
||||
item.value === '\x00\x00'
|
||||
) {
|
||||
return <div className="text-right">-</div>;
|
||||
}
|
||||
|
||||
if (typeof item.value === 'string') {
|
||||
return <div className="text-right">{item.value}</div>;
|
||||
}
|
||||
|
||||
if ((item.value as unknown) instanceof Date) {
|
||||
return (
|
||||
<div className="text-right">
|
||||
{formatDateTime(item.value as unknown as Date)}
|
||||
</div>
|
||||
<EventFieldValue
|
||||
key={item.name}
|
||||
value={item.value}
|
||||
event={event}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="text-right">
|
||||
{JSON.stringify(item.value)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
if (
|
||||
item.name[0] &&
|
||||
item.value &&
|
||||
filterable[item.name[0] as keyof typeof filterable]
|
||||
) {
|
||||
return (
|
||||
<button
|
||||
className="row items-center gap-2"
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setFilter(
|
||||
item.name[0] === 'properties'
|
||||
? item.name.join('.')
|
||||
: filterable[
|
||||
item.name[0] as keyof typeof filterable
|
||||
],
|
||||
item.value,
|
||||
);
|
||||
}}
|
||||
>
|
||||
<FilterIcon className="size-3 shrink-0" />
|
||||
{render()}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
return render();
|
||||
},
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<div className="row justify-center">
|
||||
<Button variant="outline" onClick={() => setShowNullable((p) => !p)}>
|
||||
{showNullable ? 'Hide empty values' : 'Show empty values'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="mb-2 flex justify-between font-medium">
|
||||
<div>Similar events</div>
|
||||
<button
|
||||
type="button"
|
||||
className="text-muted-foreground hover:underline"
|
||||
onClick={() => {
|
||||
setEvents([event.name]);
|
||||
popModal();
|
||||
}}
|
||||
>
|
||||
Show all
|
||||
</button>
|
||||
</div>
|
||||
<ReportChartShortcut
|
||||
projectId={event.projectId}
|
||||
chartType="linear"
|
||||
events={[
|
||||
{
|
||||
id: 'A',
|
||||
name: event.name,
|
||||
displayName: 'Similar events',
|
||||
segment: 'event',
|
||||
filters: [],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
},
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</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"
|
||||
events={[
|
||||
{
|
||||
id: 'A',
|
||||
name: event.name,
|
||||
displayName: 'Similar events',
|
||||
segment: 'event',
|
||||
filters: [],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</WidgetBody>
|
||||
</Widget>
|
||||
</ModalContent>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -87,6 +87,7 @@ const modals = {
|
||||
export const {
|
||||
pushModal,
|
||||
popModal,
|
||||
replaceWithModal,
|
||||
popAllModals,
|
||||
ModalProvider,
|
||||
useOnPushModal,
|
||||
|
||||
5
apps/dashboard/src/utils/casing.ts
Normal file
5
apps/dashboard/src/utils/casing.ts
Normal file
@@ -0,0 +1,5 @@
|
||||
export const camelCaseToWords = (str: string) => {
|
||||
return str
|
||||
.replace(/([A-Z])/g, ' $1')
|
||||
.replace(/^./, (str) => str.toUpperCase());
|
||||
};
|
||||
@@ -8,6 +8,10 @@ export function getProfileName(
|
||||
return '';
|
||||
}
|
||||
|
||||
if (!profile.isExternal) {
|
||||
return 'Anonymous';
|
||||
}
|
||||
|
||||
const name =
|
||||
[profile.firstName, profile.lastName].filter(Boolean).join(' ') ||
|
||||
profile.email;
|
||||
|
||||
9
apps/dashboard/src/utils/should-ignore-keypress.ts
Normal file
9
apps/dashboard/src/utils/should-ignore-keypress.ts
Normal file
@@ -0,0 +1,9 @@
|
||||
export function shouldIgnoreKeypress(event: KeyboardEvent) {
|
||||
const tagName = (event?.target as HTMLElement)?.tagName;
|
||||
const modifierPressed =
|
||||
event.ctrlKey || event.metaKey || event.altKey || event.keyCode === 229;
|
||||
const isTyping =
|
||||
event.isComposing || tagName === 'INPUT' || tagName === 'TEXTAREA';
|
||||
|
||||
return modifierPressed || isTyping;
|
||||
}
|
||||
Reference in New Issue
Block a user