feat(event-explorer): expose event metadata (#26375)

frontend/src/lib/components/PropertiesTable/PropertiesTable.tsx

@@ -241,6 +241,7 @@ export function PropertiesTable({
                     [PropertyDefinitionType.Group]: TaxonomicFilterGroupType.GroupsPrefix,
                     [PropertyDefinitionType.Session]: TaxonomicFilterGroupType.SessionProperties,
                     [PropertyDefinitionType.LogEntry]: TaxonomicFilterGroupType.LogEntries,
+                    [PropertyDefinitionType.Meta]: TaxonomicFilterGroupType.Metadata,
                 }
 
                 const propertyType = propertyTypeMap[type] || TaxonomicFilterGroupType.EventProperties

frontend/src/lib/taxonomy.tsx

@@ -219,9 +219,21 @@ export const CORE_FILTER_DEFINITIONS_BY_GROUP = {
     metadata: {
         distinct_id: {
             label: 'Distinct ID',
-            description: 'The current distinct ID of the user',
+            description: 'The current distinct ID of the user.',
             examples: ['16ff262c4301e5-0aa346c03894bc-39667c0e-1aeaa0-16ff262c431767'],
         },
+        timestamp: {
+            label: 'Timestamp',
+            description: 'Time the event happened.',
+            examples: ['2023-05-20T15:30:00Z'],
+            system: true,
+        },
+        event: {
+            label: 'Event',
+            description: 'The name of the event.',
+            examples: ['$pageview'],
+            system: true,
+        },
     },
     event_properties: {
         distinct_id: {} as CoreFilterDefinition, // Copied from `metadata` down below
@@ -750,9 +762,11 @@ export const CORE_FILTER_DEFINITIONS_BY_GROUP = {
             system: true,
         },
         $timestamp: {
-            label: 'Timestamp',
-            description: 'Time the event happened.',
-            examples: [new Date().toISOString()],
+            label: 'Timestamp (deprecated)',
+            description:
+                'Use the HogQL field `timestamp` instead. This field was previously set on some client side events.',
+            examples: ['2023-05-20T15:30:00Z'],
+            system: true,
         },
         $sent_at: {
             label: 'Sent At',

frontend/src/scenes/activity/explore/EventDetails.tsx

@@ -45,6 +45,33 @@ export function EventDetails({ event, tableProps }: EventDetailsProps): JSX.Elem
     }
 
     const tabs = [
+        {
+            key: 'raw',
+            label: 'Raw',
+            content: (
+                <div className="-mt-3 px-4 py-2">
+                    <JSONViewer src={event} name="event" collapsed={1} collapseStringsAfterLength={80} sortKeys />
+                </div>
+            ),
+        },
+        {
+            key: 'metadata',
+            label: 'Metadata',
+            content: (
+                <div className="-mt-3">
+                    <PropertiesTable
+                        type={PropertyDefinitionType.Meta}
+                        properties={{
+                            event: event.event,
+                            distinct_id: event.distinct_id,
+                            timestamp: event.timestamp,
+                        }}
+                        sortProperties
+                        tableProps={tableProps}
+                    />
+                </div>
+            ),
+        },
         {
             key: 'properties',
             label: 'Properties',
@@ -72,15 +99,6 @@ export function EventDetails({ event, tableProps }: EventDetailsProps): JSX.Elem
                 </div>
             ),
         },
-        {
-            key: 'json',
-            label: 'JSON',
-            content: (
-                <div className="px-4 py-4">
-                    <JSONViewer src={event} name="event" collapsed={1} collapseStringsAfterLength={80} sortKeys />
-                </div>
-            ),
-        },
     ]
 
     if (event.elements && event.elements.length > 0) {

frontend/src/types.ts

@@ -3214,6 +3214,7 @@ export enum PropertyDefinitionType {
     Group = 'group',
     Session = 'session',
     LogEntry = 'log_entry',
+    Meta = 'meta',
 }
 
 export interface PropertyDefinition {