Updated session and events queries. Added sessions page.

src/app/(main)/websites/[websiteId]/WebsiteHeader.tsx

@@ -46,9 +46,14 @@ export function WebsiteHeader({
       path: '/reports',
     },
     {
-      label: formatMessage(labels.eventData),
+      label: formatMessage(labels.sessions),
+      icon: <Icons.User />,
+      path: '/sessions',
+    },
+    {
+      label: formatMessage(labels.events),
       icon: <Icons.Nodes />,
-      path: '/event-data',
+      path: '/events',
     },
   ];
 

src/app/(main)/websites/[websiteId]/realtime/RealtimeLog.tsx

@@ -144,7 +144,10 @@ export function RealtimeLog({ data }: { data: RealtimeData }) {
     const { events, visitors } = data;
 
     let logs = [
-      ...events.map(e => ({ __type: e.eventName ? TYPE_EVENT : TYPE_PAGEVIEW, ...e })),
+      ...events.map(e => ({
+        __type: e.eventName ? TYPE_EVENT : TYPE_PAGEVIEW,
+        ...e,
+      })),
       ...visitors.map(v => ({ __type: TYPE_SESSION, ...v })),
     ].sort(thenby.firstBy('timestamp', -1));
 

src/app/(main)/websites/[websiteId]/sessions/SessionsDataTable.tsx

@@ -0,0 +1,25 @@
+import { useSessions } from 'components/hooks';
+import SessionsTable from './SessionsTable';
+import DataTable from 'components/common/DataTable';
+import { ReactNode } from 'react';
+
+export default function SessionsDataTable({
+  websiteId,
+  children,
+}: {
+  websiteId?: string;
+  teamId?: string;
+  children?: ReactNode;
+}) {
+  const queryResult = useSessions(websiteId);
+
+  if (queryResult?.result?.data?.length === 0) {
+    return children;
+  }
+
+  return (
+    <DataTable queryResult={queryResult} allowSearch={false}>
+      {({ data }) => <SessionsTable data={data} showDomain={!websiteId} />}
+    </DataTable>
+  );
+}

src/app/(main)/websites/[websiteId]/sessions/SessionsPage.tsx

@@ -0,0 +1,14 @@
+'use client';
+import WebsiteHeader from '../WebsiteHeader';
+import SessionsDataTable from './SessionsDataTable';
+
+export function SessionsPage({ websiteId }) {
+  return (
+    <>
+      <WebsiteHeader websiteId={websiteId} />
+      <SessionsDataTable websiteId={websiteId} />
+    </>
+  );
+}
+
+export default SessionsPage;

src/app/(main)/websites/[websiteId]/sessions/SessionsTable.tsx

@@ -0,0 +1,21 @@
+import { GridColumn, GridTable, useBreakpoint } from 'react-basics';
+import { useMessages } from 'components/hooks';
+
+export function SessionsTable({ data = [] }: { data: any[]; showDomain?: boolean }) {
+  const { formatMessage, labels } = useMessages();
+  const breakpoint = useBreakpoint();
+
+  return (
+    <GridTable data={data} cardMode={['xs', 'sm', 'md'].includes(breakpoint)}>
+      <GridColumn name="id" label="ID" />
+      <GridColumn name="country" label={formatMessage(labels.country)} />
+      <GridColumn name="city" label={formatMessage(labels.city)} />
+      <GridColumn name="browser" label={formatMessage(labels.browser)} />
+      <GridColumn name="os" label={formatMessage(labels.os)} />
+      <GridColumn name="device" label={formatMessage(labels.device)} />
+      <GridColumn name="createdAt" label={formatMessage(labels.created)} />
+    </GridTable>
+  );
+}
+
+export default SessionsTable;

src/app/(main)/websites/[websiteId]/sessions/page.tsx

@@ -0,0 +1,10 @@
+import SessionsPage from './SessionsPage';
+import { Metadata } from 'next';
+
+export default function ({ params: { websiteId } }) {
+  return <SessionsPage websiteId={websiteId} />;
+}
+
+export const metadata: Metadata = {
+  title: 'Sessions',
+};

src/app/api/scripts/telemetry/route.ts

@@ -0,0 +1,28 @@
+import { CURRENT_VERSION, TELEMETRY_PIXEL } from 'lib/constants';
+
+export async function GET() {
+  if (
+    process.env.NODE_ENV !== 'production' &&
+    process.env.DISABLE_TELEMETRY &&
+    process.env.PRIVATE_MODE
+  ) {
+    const script = `
+    (()=>{const i=document.createElement('img');
+      i.setAttribute('src','${TELEMETRY_PIXEL}?v=${CURRENT_VERSION}');
+      i.setAttribute('style','width:0;height:0;position:absolute;pointer-events:none;');
+      document.body.appendChild(i);})();
+  `;
+
+    return new Response(script.replace(/\s\s+/g, ''), {
+      headers: {
+        'content-type': 'text/javascript',
+      },
+    });
+  }
+
+  return new Response('/* telemetry disabled */', {
+    headers: {
+      'content-type': 'text/javascript',
+    },
+  });
+}