feature(dashboard): customize event columns

2025-05-09 20:59:24 +02:00
parent 584a6d21f1
commit dd39ff70a9
10 changed files with 408 additions and 230 deletions
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/events/conversions.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/events/conversions.tsx
@@ -1,7 +1,10 @@
 'use client';

+import { TableButtons } from '@/components/data-table';
 import { EventsTable } from '@/components/events/table';
+import { EventsTableColumns } from '@/components/events/table/events-table-columns';
 import { api } from '@/trpc/client';
+import { Loader2Icon } from 'lucide-react';

 type Props = {
  projectId: string;
@@ -19,7 +22,22 @@ const Conversions = ({ projectId }: Props) => {
    },
  );

-  return <EventsTable query={query} />;
+  return (
+    <div>
+      <TableButtons>
+        <EventsTableColumns />
+        {query.isRefetching && (
+          <div className="center-center size-8 rounded border bg-background">
+            <Loader2Icon
+              size={12}
+              className="size-4 shrink-0 animate-spin text-black text-highlight"
+            />
+          </div>
+        )}
+      </TableButtons>
+      <EventsTable query={query} />
+    </div>
+  );
 };

 export default Conversions;
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/events/events.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/events/events.tsx
@@ -3,6 +3,7 @@
 import { TableButtons } from '@/components/data-table';
 import EventListener from '@/components/events/event-listener';
 import { EventsTable } from '@/components/events/table';
+import { EventsTableColumns } from '@/components/events/table/events-table-columns';
 import { OverviewFiltersButtons } from '@/components/overview/filters/overview-filters-buttons';
 import { OverviewFiltersDrawer } from '@/components/overview/filters/overview-filters-drawer';
 import { Button } from '@/components/ui/button';
@@ -74,6 +75,7 @@ const Events = ({ projectId, profileId }: Props) => {
          enableEventsFilter
        />
        <OverviewFiltersButtons className="justify-end p-0" />
+        <EventsTableColumns />
        {query.isRefetching && (
          <div className="center-center size-8 rounded border bg-background">
            <Loader2Icon
--- a/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/profiles/[profileId]/profile-events.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationSlug]/[projectId]/profiles/[profileId]/profile-events.tsx
@@ -2,6 +2,7 @@

 import { TableButtons } from '@/components/data-table';
 import { EventsTable } from '@/components/events/table';
+import { EventsTableColumns } from '@/components/events/table/events-table-columns';
 import { OverviewFiltersButtons } from '@/components/overview/filters/overview-filters-buttons';
 import { OverviewFiltersDrawer } from '@/components/overview/filters/overview-filters-drawer';
 import { useEventQueryFilters } from '@/hooks/useEventQueryFilters';
@@ -36,6 +37,7 @@ const Events = ({ projectId, profileId }: Props) => {
          enableEventsFilter
        />
        <OverviewFiltersButtons className="justify-end p-0" />
+        <EventsTableColumns />
        {query.isRefetching && (
          <div className="center-center size-8 rounded border bg-background">
            <Loader2Icon
--- a/apps/dashboard/src/components/events/table/columns.tsx
+++ b/apps/dashboard/src/components/events/table/columns.tsx
@@ -9,7 +9,9 @@ import { getProfileName } from '@/utils/getters';
 import type { ColumnDef } from '@tanstack/react-table';
 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();
@@ -101,20 +103,53 @@ export function useColumns() {
      accessorKey: 'profileId',
      header: 'Profile',
      cell({ row }) {
-        const { profile } = row.original;
-        if (!profile) {
-          return null;
+        const { profile, profileId, deviceId } = row.original;
+        if (profile) {
+          return (
+            <ProjectLink
+              href={`/profiles/${profile.id}`}
+              className="whitespace-nowrap font-medium hover:underline"
+            >
+              {getProfileName(profile)}
+            </ProjectLink>
+          );
        }
-        return (
-          <ProjectLink
-            href={`/profiles/${profile.id}`}
-            className="whitespace-nowrap font-medium hover:underline"
-          >
-            {getProfileName(profile)}
-          </ProjectLink>
-        );
+
+        if (profileId && profileId !== deviceId) {
+          return (
+            <ProjectLink
+              href={`/profiles/${profileId}`}
+              className="whitespace-nowrap font-medium hover:underline"
+            >
+              Unknown
+            </ProjectLink>
+          );
+        }
+
+        if (deviceId) {
+          return (
+            <ProjectLink
+              href={`/profiles/${deviceId}`}
+              className="whitespace-nowrap font-medium hover:underline"
+            >
+              Anonymous
+            </ProjectLink>
+          );
+        }
+
+        return null;
      },
    },
+    {
+      accessorKey: 'sessionId',
+      header: 'Session ID',
+      size: 320,
+    },
+    {
+      accessorKey: 'deviceId',
+      header: 'Device ID',
+      size: 320,
+    },
    {
      accessorKey: 'country',
      header: 'Country',
@@ -157,6 +192,24 @@ export function useColumns() {
        );
      },
    },
+    {
+      accessorKey: 'properties',
+      header: 'Properties',
+      size: 400,
+      cell({ row }) {
+        const { properties } = row.original;
+        const filteredProperties = Object.fromEntries(
+          Object.entries(properties || {}).filter(
+            ([key]) => !key.startsWith('__'),
+          ),
+        );
+        return (
+          <ScrollArea orientation="horizontal">
+            <pre>{JSON.stringify(filteredProperties)}</pre>
+          </ScrollArea>
+        );
+      },
+    },
  ];

  return columns;
--- a/apps/dashboard/src/components/events/table/events-data-table.tsx
+++ b/apps/dashboard/src/components/events/table/events-data-table.tsx
@@ -8,9 +8,10 @@ import {
  useReactTable,
 } from '@tanstack/react-table';
 import type { ColumnDef } from '@tanstack/react-table';
-import { useVirtualizer, useWindowVirtualizer } from '@tanstack/react-virtual';
+import { useWindowVirtualizer } from '@tanstack/react-virtual';
 import throttle from 'lodash.throttle';
 import { useEffect, useRef, useState } from 'react';
+import { useEventsTableColumns } from './events-table-columns';

 interface DataTableProps<TData> {
  columns: ColumnDef<TData, any>[];
@@ -21,6 +22,7 @@ export function EventsDataTable<TData>({
  columns,
  data,
 }: DataTableProps<TData>) {
+  const [visibleColumns] = useEventsTableColumns();
  const table = useReactTable({
    data,
    columns,
@@ -74,27 +76,29 @@ export function EventsDataTable<TData>({
        >
          {table.getHeaderGroups().map((headerGroup) => (
            <div className="thead row h-12 sticky top-0" key={headerGroup.id}>
-              {headerGroup.headers.map((header) => {
-                return (
-                  <GridCell
-                    key={header.id}
-                    isHeader
-                    style={{
-                      minWidth: header.column.getSize(),
-                      flexShrink: 1,
-                      overflow: 'hidden',
-                      flex: 1,
-                    }}
-                  >
-                    {header.isPlaceholder
-                      ? null
-                      : flexRender(
-                          header.column.columnDef.header,
-                          header.getContext(),
-                        )}
-                  </GridCell>
-                );
-              })}
+              {headerGroup.headers
+                .filter((header) => visibleColumns.includes(header.id))
+                .map((header) => {
+                  return (
+                    <GridCell
+                      key={header.id}
+                      isHeader
+                      style={{
+                        minWidth: header.column.getSize(),
+                        flexShrink: 1,
+                        overflow: 'hidden',
+                        flex: 1,
+                      }}
+                    >
+                      {header.isPlaceholder
+                        ? null
+                        : flexRender(
+                            header.column.columnDef.header,
+                            header.getContext(),
+                          )}
+                    </GridCell>
+                  );
+                })}
            </div>
          ))}
          <div ref={parentRef} className="w-full">
@@ -122,24 +126,27 @@ export function EventsDataTable<TData>({
                      }px)`,
                    }}
                  >
-                    {row.getVisibleCells().map((cell) => {
-                      return (
-                        <GridCell
-                          key={cell.id}
-                          style={{
-                            minWidth: cell.column.getSize(),
-                            flexShrink: 1,
-                            overflow: 'hidden',
-                            flex: 1,
-                          }}
-                        >
-                          {flexRender(
-                            cell.column.columnDef.cell,
-                            cell.getContext(),
-                          )}
-                        </GridCell>
-                      );
-                    })}
+                    {row
+                      .getVisibleCells()
+                      .filter((cell) => visibleColumns.includes(cell.column.id))
+                      .map((cell) => {
+                        return (
+                          <GridCell
+                            key={cell.id}
+                            style={{
+                              minWidth: cell.column.getSize(),
+                              flexShrink: 1,
+                              overflow: 'hidden',
+                              flex: 1,
+                            }}
+                          >
+                            {flexRender(
+                              cell.column.columnDef.cell,
+                              cell.getContext(),
+                            )}
+                          </GridCell>
+                        );
+                      })}
                  </div>
                );
              })}
--- a/apps/dashboard/src/components/events/table/events-table-columns.tsx
+++ b/apps/dashboard/src/components/events/table/events-table-columns.tsx
@@ -0,0 +1,70 @@
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { ColumnsIcon } from 'lucide-react';
+import { useQueryState } from 'nuqs';
+import { useLocalStorage } from 'usehooks-ts';
+
+// Define available columns
+const AVAILABLE_COLUMNS = [
+  { id: 'name', label: 'Name' },
+  { id: 'createdAt', label: 'Created at' },
+  { id: 'profileId', label: 'Profile' },
+  { id: 'country', label: 'Country' },
+  { id: 'os', label: 'OS' },
+  { id: 'browser', label: 'Browser' },
+  { id: 'properties', label: 'Properties' },
+  { id: 'sessionId', label: 'Session ID' },
+  { id: 'deviceId', label: 'Device ID' },
+] as const;
+
+export function useEventsTableColumns() {
+  return useLocalStorage<string[]>('@op:events-table-columns', [
+    'name',
+    'createdAt',
+    'profileId',
+    'country',
+    'os',
+    'browser',
+  ]);
+}
+
+export function EventsTableColumns() {
+  const [visibleColumns, setVisibleColumns] = useEventsTableColumns();
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="sm">
+          <ColumnsIcon className="h-4 w-4 mr-2" />
+          Columns
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-[200px]">
+        <DropdownMenuLabel>Toggle columns</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        {AVAILABLE_COLUMNS.map((column) => (
+          <DropdownMenuCheckboxItem
+            key={column.id}
+            checked={visibleColumns.includes(column.id)}
+            onCheckedChange={(checked) => {
+              setVisibleColumns(
+                checked
+                  ? [...visibleColumns, column.id]
+                  : visibleColumns.filter((id) => id !== column.id),
+              );
+            }}
+          >
+            {column.label}
+          </DropdownMenuCheckboxItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
--- a/apps/dashboard/src/components/ui/dialog.tsx
+++ b/apps/dashboard/src/components/ui/dialog.tsx
@@ -39,14 +39,16 @@ const DialogContent = React.forwardRef<
    <DialogPrimitive.Content
      ref={ref}
      className={cn(
-        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] border bg-background p-6 shadow-lg 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%] sm:rounded-lg md:w-full',
+        '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
      )}
      {...props}
    >
-      {children}
+      <div className="border bg-background p-6 shadow-lg sm:rounded-lg">
+        {children}
+      </div>
    </DialogPrimitive.Content>
  </DialogPortal>
 ));
--- a/apps/dashboard/src/modals/Modal/Container.tsx
+++ b/apps/dashboard/src/modals/Modal/Container.tsx
@@ -32,7 +32,7 @@ export function ModalHeader({
  return (
    <div
      className={cn(
-        'relative -m-6 mb-4 flex justify-between rounded-t-lg bg-gradient-to-b from-def-300 to-background p-6 pb-0',
+        'relative -m-6 mb-4 flex justify-between rounded-t-lg p-6 pb-0',
        className,
      )}
      style={{}}
--- a/apps/dashboard/src/modals/event-details.tsx
+++ b/apps/dashboard/src/modals/event-details.tsx
@@ -8,6 +8,15 @@ import {
 import { api } from '@/trpc/client';
 import { round } from 'mathjs';

+import { SerieName } from '@/components/report-chart/common/serie-name';
+import { Button } from '@/components/ui/button';
+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 { popModal } from '.';
 import { ModalContent, ModalHeader } from './Modal/Container';

@@ -17,9 +26,32 @@ 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',
+};
+
 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 });

  if (query.isLoading || query.isFetching) {
@@ -32,189 +64,175 @@ export default function EventDetails({ id, createdAt, projectId }: Props) {

  const event = query.data;

-  const common = [
-    {
-      name: 'Path',
-      value: event.path,
-    },
-    {
-      name: 'Origin',
-      value: event.origin,
-    },
-    {
-      name: 'Duration',
-      value: event.duration ? round(event.duration / 1000, 1) : undefined,
-    },
-    {
-      name: 'Referrer',
-      value: event.referrer,
-      onClick() {
-        setFilter('referrer', event.referrer ?? '');
-      },
-    },
-    {
-      name: 'Referrer name',
-      value: event.referrerName,
-      onClick() {
-        setFilter('referrer_name', event.referrerName ?? '');
-      },
-    },
-    {
-      name: 'Referrer type',
-      value: event.referrerType,
-      onClick() {
-        setFilter('referrer_type', event.referrerType ?? '');
-      },
-    },
-    {
-      name: 'Brand',
-      value: event.brand,
-      onClick() {
-        setFilter('brand', event.brand ?? '');
-      },
-    },
-    {
-      name: 'Model',
-      value: event.model,
-      onClick() {
-        setFilter('model', event.model ?? '');
-      },
-    },
-    {
-      name: 'Browser',
-      value: event.browser,
-      onClick() {
-        setFilter('browser', event.browser ?? '');
-      },
-    },
-    {
-      name: 'Browser version',
-      value: event.browserVersion,
-      onClick() {
-        setFilter('browser_version', event.browserVersion ?? '');
-      },
-    },
-    {
-      name: 'OS',
-      value: event.os,
-      onClick() {
-        setFilter('os', event.os ?? '');
-      },
-    },
-    {
-      name: 'OS version',
-      value: event.osVersion,
-      onClick() {
-        setFilter('os_version', event.osVersion ?? '');
-      },
-    },
-    {
-      name: 'City',
-      value: event.city,
-      onClick() {
-        setFilter('city', event.city ?? '');
-      },
-    },
-    {
-      name: 'Region',
-      value: event.region,
-      onClick() {
-        setFilter('region', event.region ?? '');
-      },
-    },
-    {
-      name: 'Country',
-      value: event.country,
-      onClick() {
-        setFilter('country', event.country ?? '');
-      },
-    },
-    {
-      name: 'Device',
-      value: event.device,
-      onClick() {
-        setFilter('device', event.device ?? '');
-      },
-    },
-  ].filter((item) => typeof item.value === 'string' && item.value);
+  const data = (() => {
+    const data = Object.entries(omit(['properties'], event)).map(
+      ([name, value]) => ({
+        name: [name],
+        value: value as string | number | undefined,
+      }),
+    );

-  const properties = Object.entries(event.properties)
-    .map(([name, value]) => ({
-      name,
-      value: value as string | number | undefined,
-    }))
-    .filter((item) => typeof item.value === 'string' && item.value);
+    Object.entries(event.properties).forEach(([name, value]) => {
+      data.push({
+        name: ['properties', ...name.split('.')],
+        value: value as string | number | undefined,
+      });
+    });
+
+    return data.filter((item) => {
+      if (showNullable) {
+        return true;
+      }
+
+      return !!item.value;
+    });
+  })();

  return (
    <ModalContent>
      <ModalHeader title={event.name} />
-      <div>
-        <div className="flex flex-col gap-8">
-          {properties.length > 0 && (
-            <div>
-              <div className="mb-2  font-medium">Params</div>
-              <div className="flex flex-wrap gap-2">
-                {properties.map((item) => (
-                  <KeyValue
-                    key={item.name}
-                    name={item.name.replace(/^__/, '')}
-                    value={item.value}
-                    onClick={() => {
-                      setFilter(
-                        `properties.${item.name}`,
-                        item.value ? String(item.value) : '',
-                        'is',
-                      );
-                    }}
-                  />
-                ))}
-              </div>
-            </div>
-          )}
-          <div>
-            <div className="mb-2  font-medium">Common</div>
-            <div className="flex flex-wrap gap-2">
-              {common.map((item) => (
-                <KeyValue
-                  key={item.name}
-                  name={item.name}
-                  value={item.value}
-                  onClick={() => item.onClick?.()}
-                />
-              ))}
-            </div>
-          </div>
+      <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>
+                    ))}
+                  </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'
+                  ) {
+                    return (
+                      <div className="text-right">
+                        <span className="text-muted-foreground">
+                          ({item.value}ms)
+                        </span>{' '}
+                        {number.formatWithUnit(item.value / 1000, 'min')}
+                      </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="histogram"
-              events={[
-                {
-                  id: 'A',
-                  name: event.name,
-                  displayName: 'Similar events',
-                  segment: 'event',
-                  filters: [],
-                },
-              ]}
-            />
-          </div>
+                  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>
+                    );
+                  }
+
+                  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>
    </ModalContent>
  );
 }