Skip to content

Commit

Permalink
chore: use a single timestamp format (#21653)
Browse files Browse the repository at this point in the history
  • Loading branch information
@daibhin
daibhin authored Apr 23, 2024
1 parent a68e2b8 commit 78e4f66
Show file tree
Hide file tree
Showing 4 changed files with 51 additions and 92 deletions.
1 change: 1 addition & 0 deletions frontend/src/lib/lemon-ui/LemonSelect/LemonSelect.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,7 @@ export interface LemonSelectPropsBase<T>
| 'onClick'
| 'tabIndex'
| 'type'
| 'tooltip'
> {
options: LemonSelectOptions<T>
/** Callback fired when a value is selected, even if it already is set. */
Expand Down
127 changes: 47 additions & 80 deletions frontend/src/scenes/session-recordings/player/inspector/PlayerInspectorControls.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { IconBug, IconClock, IconDashboard, IconInfo, IconTerminal, IconX } from '@posthog/icons'
import { IconBug, IconDashboard, IconInfo, IconTerminal, IconX } from '@posthog/icons'
import { LemonButton, LemonCheckbox, LemonInput, LemonSelect, LemonTabs, Tooltip } from '@posthog/lemon-ui'
import { useActions, useValues } from 'kea'
import { FEATURE_FLAGS } from 'lib/constants'
Expand Down Expand Up @@ -71,8 +71,8 @@ export function PlayerInspectorControls({ onClose }: { onClose: () => void }): J
const inspectorLogic = playerInspectorLogic(logicProps)
const { tab, windowIdFilter, windowIds, showMatchingEventsFilter } = useValues(inspectorLogic)
const { setWindowIdFilter, setTab } = useActions(inspectorLogic)
const { showOnlyMatching, timestampMode, miniFilters, searchQuery } = useValues(playerSettingsLogic)
const { setShowOnlyMatching, setTimestampMode, setMiniFilter, setSearchQuery } = useActions(playerSettingsLogic)
const { showOnlyMatching, miniFilters, searchQuery } = useValues(playerSettingsLogic)
const { setShowOnlyMatching, setMiniFilter, setSearchQuery } = useActions(playerSettingsLogic)

const mode = logicProps.mode ?? SessionRecordingPlayerMode.Standard

Expand Down Expand Up @@ -101,7 +101,7 @@ export function PlayerInspectorControls({ onClose }: { onClose: () => void }): J
}

return (
<div className="bg-side border-b">
<div className="bg-side border-b pb-2">
<div className="flex justify-between flex-nowrap">
<div className="w-2.5 mb-2 border-b shrink-0" />
<TabButtons tabs={tabs} logicProps={logicProps} />
Expand All @@ -110,7 +110,24 @@ export function PlayerInspectorControls({ onClose }: { onClose: () => void }): J
</div>
</div>

<div className="px-2">
<div className="flex px-2 gap-x-3 flex-wrap gap-y-1">
<div className="flex flex-1 items-center">
<LemonInput
size="xsmall"
onChange={(e) => setSearchQuery(e)}
placeholder="Search..."
type="search"
value={searchQuery}
fullWidth
className="min-w-60"
suffix={
<Tooltip title={<InspectorSearchInfo />}>
<IconInfo />
</Tooltip>
}
/>
</div>

<div
className="flex items-center gap-1 flex-wrap font-medium text-primary-alt"
data-attr="mini-filters"
Expand All @@ -132,77 +149,34 @@ export function PlayerInspectorControls({ onClose }: { onClose: () => void }): J
))}
</div>

<div className="flex items-center py-1 gap-8 justify-between">
<div className="flex items-center gap-2 flex-1">
<div className="flex flex-1">
<LemonInput
size="small"
onChange={(e) => setSearchQuery(e)}
placeholder="Search..."
type="search"
value={searchQuery}
fullWidth
suffix={
<Tooltip title={<InspectorSearchInfo />}>
<IconInfo />
</Tooltip>
}
/>
</div>

{windowIds.length > 1 ? (
<div className="flex items-center gap-2 flex-wrap">
<LemonSelect
size="small"
data-attr="player-window-select"
value={windowIdFilter}
onChange={(val) => setWindowIdFilter(val || null)}
options={[
{
value: null,
label: 'All windows',
icon: <IconWindow size="small" value="A" className="text-muted" />,
},
...windowIds.map((windowId, index) => ({
value: windowId,
label: `Window ${index + 1}`,
icon: <IconWindow size="small" value={index + 1} className="text-muted" />,
})),
]}
/>
<Tooltip
title="Each recording window translates to a distinct browser tab or window."
className="text-base text-muted-alt"
>
<IconInfo />
</Tooltip>
</div>
) : null}
{windowIds.length > 1 ? (
<div className="flex items-center gap-2">
<LemonSelect
size="xsmall"
data-attr="player-window-select"
value={windowIdFilter}
onChange={(val) => setWindowIdFilter(val || null)}
options={[
{
value: null,
label: 'All windows',
icon: <IconWindow size="small" value="A" className="text-muted" />,
},
...windowIds.map((windowId, index) => ({
value: windowId,
label: `Window ${index + 1}`,
icon: <IconWindow size="small" value={index + 1} className="text-muted" />,
})),
]}
tooltip="Each recording window translates to a distinct browser tab or window."
/>
</div>
) : null}

<div className="flex items-center gap-1">
<LemonButton
size="small"
type="secondary"
noPadding
onClick={() => setTimestampMode(timestampMode === 'absolute' ? 'relative' : 'absolute')}
tooltipPlacement="left"
tooltip={
timestampMode === 'absolute'
? 'Showing absolute timestamps'
: 'Showing timestamps relative to the start of the recording'
}
>
<span className="p-1 flex items-center gap-1">
<span className=" text-xs">{capitalizeFirstLetter(timestampMode)}</span>{' '}
<IconClock className="text-lg" />
</span>
</LemonButton>
</div>
</div>
{showMatchingEventsFilter ? (
<div className="flex items-center">
<span className="flex items-center whitespace-nowrap text-xs gap-1">
<div className="flex items-center gap-1">
<LemonCheckbox checked={showOnlyMatching} size="small" onChange={setShowOnlyMatching} />
<span className="flex whitespace-nowrap text-xs gap-1">
Only events matching filters
<Tooltip
title="Display only the events that match the global filter."
Expand All @@ -211,13 +185,6 @@ export function PlayerInspectorControls({ onClose }: { onClose: () => void }): J
<IconInfo />
</Tooltip>
</span>

<LemonCheckbox
className="mx-2"
checked={showOnlyMatching}
size="small"
onChange={setShowOnlyMatching}
/>
</div>
) : null}
</div>
Expand Down
6 changes: 3 additions & 3 deletions ...end/src/scenes/session-recordings/player/inspector/components/PlayerInspectorListItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import useResizeObserver from 'use-resize-observer'
import { SessionRecordingPlayerTab } from '~/types'

import { IconWindow } from '../../icons'
import { playerSettingsLogic } from '../../playerSettingsLogic'
import { playerSettingsLogic, TimestampFormat } from '../../playerSettingsLogic'
import { sessionRecordingPlayerLogic } from '../../sessionRecordingPlayerLogic'
import { InspectorListItem, playerInspectorLogic } from '../playerInspectorLogic'
import { ItemConsoleLog } from './ItemConsoleLog'
Expand Down Expand Up @@ -68,7 +68,7 @@ export function PlayerInspectorListItem({
}): JSX.Element {
const { logicProps } = useValues(sessionRecordingPlayerLogic)
const { tab, durationMs, end, expandedItems, windowIds } = useValues(playerInspectorLogic(logicProps))
const { timestampMode } = useValues(playerSettingsLogic)
const { timestampFormat } = useValues(playerSettingsLogic)

const { seekToTime } = useActions(sessionRecordingPlayerLogic)
const { setItemExpanded } = useActions(playerInspectorLogic(logicProps))
Expand Down Expand Up @@ -201,7 +201,7 @@ export function PlayerInspectorListItem({
{!isExpanded ? (
<LemonButton size="small" noPadding onClick={() => seekToEvent()}>
<span className="p-1 text-xs">
{timestampMode === 'absolute' ? (
{timestampFormat === TimestampFormat.Absolute ? (
<TZLabel time={item.timestamp} formatDate="DD, MMM" formatTime="HH:mm:ss" noStyles />
) : (
<>
Expand Down
9 changes: 0 additions & 9 deletions frontend/src/scenes/session-recordings/player/playerSettingsLogic.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -182,7 +182,6 @@ export const playerSettingsLogic = kea<playerSettingsLogicType>([
setHideViewedRecordings: (hideViewedRecordings: boolean) => ({ hideViewedRecordings }),
setAutoplayDirection: (autoplayDirection: AutoplayDirection) => ({ autoplayDirection }),
setTab: (tab: SessionRecordingPlayerTab) => ({ tab }),
setTimestampMode: (mode: 'absolute' | 'relative') => ({ mode }),
setMiniFilter: (key: string, enabled: boolean) => ({ key, enabled }),
setSearchQuery: (search: string) => ({ search }),
setDurationTypeToShow: (type: DurationType) => ({ type }),
Expand Down Expand Up @@ -278,14 +277,6 @@ export const playerSettingsLogic = kea<playerSettingsLogicType>([
},
],

timestampMode: [
'relative' as 'absolute' | 'relative',
{ persist: true },
{
setTimestampMode: (_, { mode }) => mode,
},
],

selectedMiniFilters: [
['all-automatic', 'console-all', 'events-all', 'performance-all'] as string[],
{ persist: true },
Expand Down

0 comments on commit 78e4f66

Please sign in to comment.