feat: add start and end to overview (#26874)

frontend/src/scenes/session-recordings/components/OverviewGrid.tsx

@@ -1,6 +1,26 @@
 import { Tooltip } from '@posthog/lemon-ui'
+import { ReactNode } from 'react'
 
-export function OverviewGrid({ children }: { children: React.ReactNode }): JSX.Element {
+interface OverviewItemBase {
+    icon?: ReactNode
+    label: string
+    tooltipTitle?: string
+}
+
+type TextOverviewItem = OverviewItemBase & {
+    type: 'text'
+    value: ReactNode
+}
+
+type PropertyOverviewItem = OverviewItemBase & {
+    type: 'property'
+    property: string
+    value?: string | undefined
+}
+
+export type OverviewItem = TextOverviewItem | PropertyOverviewItem
+
+export function OverviewGrid({ children }: { children: ReactNode }): JSX.Element {
     return (
         <div className="@container/og">
             <div className="grid grid-cols-1 place-items-center gap-4 p-2 @xs/og:grid-cols-2 @md/og:grid-cols-3 ">
@@ -14,16 +34,20 @@ export function OverviewGridItem({
     children,
     description,
     label,
+    icon,
 }: {
-    children: React.ReactNode
-    description: React.ReactNode
-    label: React.ReactNode
+    children?: ReactNode
+    description: ReactNode
+    label: ReactNode
+    icon?: ReactNode
 }): JSX.Element {
     return (
         <Tooltip title={description}>
             <div className="flex flex-1 w-full justify-between items-center ">
-                <div className="text-sm">{label}</div>
-                <div className="text-lg font-semibold">{children}</div>
+                <div className="text-sm">
+                    {icon} {label}
+                </div>
+                <div>{children}</div>
             </div>
         </Tooltip>
     )

frontend/src/scenes/session-recordings/components/SimpleTimeLabel.tsx

@@ -1,3 +1,4 @@
+import clsx from 'clsx'
 import { Dayjs, dayjs } from 'lib/dayjs'
 import { shortTimeZone } from 'lib/utils'
 
@@ -9,14 +10,31 @@ function formatStringFor(d: Dayjs): string {
     return 'DD/MM/YYYY HH:mm:ss'
 }
 
-export function SimpleTimeLabel({ startTime, isUTC }: { startTime: string | number; isUTC: boolean }): JSX.Element {
+export function SimpleTimeLabel({
+    startTime,
+    isUTC,
+    muted = true,
+    size = 'xsmall',
+}: {
+    startTime: string | number | Dayjs
+    isUTC: boolean
+    muted?: boolean
+    size?: 'small' | 'xsmall'
+}): JSX.Element {
     let d = dayjs(startTime)
     if (isUTC) {
         d = d.tz('UTC')
     }
 
     return (
-        <div className="overflow-hidden text-ellipsis text-xs text-muted shrink-0">
+        <div
+            className={clsx(
+                'overflow-hidden text-ellipsis shrink-0',
+                muted && 'text-muted',
+                size === 'xsmall' && 'text-xs',
+                size === 'small' && 'text-sm'
+            )}
+        >
             {d.format(formatStringFor(d))} {isUTC ? 'UTC' : shortTimeZone(undefined, dayjs(d).toDate())}
         </div>
     )

frontend/src/scenes/session-recordings/player/playerMetaLogic.ts → frontend/src/scenes/session-recordings/player/playerMetaLogic.tsx

@@ -1,3 +1,4 @@
+import { IconCursorClick, IconKeyboard, IconWarning } from '@posthog/icons'
 import { eventWithTime } from '@rrweb/types'
 import { actions, connect, kea, key, listeners, path, props, reducers, selectors } from 'kea'
 import { loaders } from 'kea-loaders'
@@ -8,6 +9,7 @@ import { getCoreFilterDefinition } from 'lib/taxonomy'
 import { ceilMsToClosestSecond, findLastIndex, objectsEqual } from 'lib/utils'
 import posthog from 'posthog-js'
 import { countryCodeToName } from 'scenes/insights/views/WorldMap'
+import { OverviewItem } from 'scenes/session-recordings/components/OverviewGrid'
 import { sessionRecordingDataLogic } from 'scenes/session-recordings/player/sessionRecordingDataLogic'
 import {
     sessionRecordingPlayerLogic,
@@ -16,17 +18,10 @@ import {
 
 import { PersonType } from '~/types'
 
+import { SimpleTimeLabel } from '../components/SimpleTimeLabel'
 import { sessionRecordingsListPropertiesLogic } from '../playlist/sessionRecordingsListPropertiesLogic'
 import type { playerMetaLogicType } from './playerMetaLogicType'
 
-export interface OverviewItem {
-    property: string
-    label: string
-    value: string
-    type: 'text' | 'icon'
-    tooltipTitle?: string
-}
-
 const browserPropertyKeys = ['$geoip_country_code', '$browser', '$device_type', '$os']
 const mobilePropertyKeys = ['$geoip_country_code', '$device_type', '$os_name']
 const recordingPropertyKeys = ['click_count', 'keypress_count', 'console_error_count'] as const
@@ -133,6 +128,14 @@ export const playerMetaLogic = kea<playerMetaLogicType>([
                 return sessionPlayerData.start ?? null
             },
         ],
+
+        endTime: [
+            (s) => [s.sessionPlayerData],
+            (sessionPlayerData) => {
+                return sessionPlayerData.end ?? null
+            },
+        ],
+
         currentWindowIndex: [
             (s) => [s.windowIds, s.currentSegment],
             (windowIds, currentSegment) => {
@@ -186,19 +189,39 @@ export const playerMetaLogic = kea<playerMetaLogicType>([
             },
         ],
         overviewItems: [
-            (s) => [s.sessionPlayerMetaData],
-            (sessionPlayerMetaData) => {
+            (s) => [s.sessionPlayerMetaData, s.startTime, s.endTime],
+            (sessionPlayerMetaData, startTime, endTime) => {
                 const items: OverviewItem[] = []
+                if (startTime) {
+                    items.push({
+                        label: 'Session start',
+                        value: <SimpleTimeLabel muted={false} size="small" isUTC={true} startTime={startTime} />,
+                        type: 'text',
+                    })
+                }
+                if (endTime) {
+                    items.push({
+                        label: 'Session end',
+                        value: <SimpleTimeLabel muted={false} size="small" isUTC={true} startTime={endTime} />,
+                        type: 'text',
+                    })
+                }
 
                 recordingPropertyKeys.forEach((property) => {
                     if (sessionPlayerMetaData?.[property]) {
                         items.push({
-                            label: `${sessionPlayerMetaData[property]} ${
-                                getCoreFilterDefinition(property, TaxonomicFilterGroupType.Replay)?.label ?? property
-                            }`,
-                            value: '',
+                            icon:
+                                property === 'click_count' ? (
+                                    <IconCursorClick />
+                                ) : property === 'keypress_count' ? (
+                                    <IconKeyboard />
+                                ) : property === 'console_error_count' ? (
+                                    <IconWarning />
+                                ) : undefined,
+                            label:
+                                getCoreFilterDefinition(property, TaxonomicFilterGroupType.Replay)?.label ?? property,
+                            value: `${sessionPlayerMetaData[property]}`,
                             type: 'text',
-                            property,
                         })
                     }
                 })
@@ -223,7 +246,7 @@ export const playerMetaLogic = kea<playerMetaLogicType>([
                                 property,
                             value,
                             tooltipTitle,
-                            type: 'icon',
+                            type: 'property',
                             property,
                         })
                     }

frontend/src/scenes/session-recordings/player/sidebar/PlayerSidebarOverviewGrid.tsx

@@ -13,8 +13,13 @@ export function PlayerSidebarOverviewGrid(): JSX.Element {
         <div className="rounded border bg-bg-light m-2">
             <OverviewGrid>
                 {overviewItems.map((item) => (
-                    <OverviewGridItem key={item.label} description={item.tooltipTitle} label={item.label}>
-                        {item.type === 'icon' ? (
+                    <OverviewGridItem
+                        key={item.label}
+                        description={item.tooltipTitle}
+                        label={item.label}
+                        icon={item.icon}
+                    >
+                        {item.type === 'property' ? (
                             <PropertyIcon property={item.property} value={item.value} />
                         ) : (
                             item.value