diff --git a/frontend/__snapshots__/components-networkrequesttiming--basic.png b/frontend/__snapshots__/components-networkrequesttiming--basic.png index abff737987dfe..ff34c2d27d479 100644 Binary files a/frontend/__snapshots__/components-networkrequesttiming--basic.png and b/frontend/__snapshots__/components-networkrequesttiming--basic.png differ diff --git a/frontend/src/scenes/session-recordings/player/inspector/components/ItemPerformanceEvent.tsx b/frontend/src/scenes/session-recordings/player/inspector/components/ItemPerformanceEvent.tsx index cb1493077b010..4dbd3cd4b3f2c 100644 --- a/frontend/src/scenes/session-recordings/player/inspector/components/ItemPerformanceEvent.tsx +++ b/frontend/src/scenes/session-recordings/player/inspector/components/ItemPerformanceEvent.tsx @@ -349,7 +349,7 @@ export function ItemPerformanceEvent({ tabs={[ { key: 'timings', - label: 'timings', + label: 'Timings', content: ( <> diff --git a/frontend/src/scenes/session-recordings/player/inspector/components/Timing/NetworkRequestTiming.tsx b/frontend/src/scenes/session-recordings/player/inspector/components/Timing/NetworkRequestTiming.tsx index d9b97dac0f26f..df65c02326529 100644 --- a/frontend/src/scenes/session-recordings/player/inspector/components/Timing/NetworkRequestTiming.tsx +++ b/frontend/src/scenes/session-recordings/player/inspector/components/Timing/NetworkRequestTiming.tsx @@ -2,6 +2,11 @@ import { PerformanceEvent } from '~/types' import { getSeriesColor } from 'lib/colors' import { humanFriendlyMilliseconds } from 'lib/utils' import { Tooltip } from 'lib/lemon-ui/Tooltip' +import { useState } from 'react' +import { LemonBanner } from 'lib/lemon-ui/LemonBanner' +import { LemonDivider } from 'lib/lemon-ui/LemonDivider' +import { SimpleKeyValueList } from 'scenes/session-recordings/player/inspector/components/SimpleKeyValueList' +import { LemonButton } from 'lib/lemon-ui/LemonButton' function colorForEntry(entryType: string | undefined): string { switch (entryType) { @@ -217,11 +222,7 @@ function percentagesWithinEventRange({ return { startPercentage: `${partStartPercentage}%`, widthPercentage: `${partPercentage}%` } } -export const NetworkRequestTiming = ({ - performanceEvent, -}: { - performanceEvent: PerformanceEvent -}): JSX.Element | null => { +const TimeLineView = ({ performanceEvent }: { performanceEvent: PerformanceEvent }): JSX.Element => { const rangeStart = performanceEvent.start_time const rangeEnd = performanceEvent.response_end if (typeof rangeStart === 'number' && typeof rangeEnd === 'number') { @@ -276,5 +277,44 @@ export const NetworkRequestTiming = ({ ) } - return null + return Cannot render performance timeline for this request +} + +const TableView = ({ performanceEvent }: { performanceEvent: PerformanceEvent }): JSX.Element => { + const timingProperties = Object.entries(performanceEvent).reduce((acc, [key, val]) => { + if (key.includes('time') || key.includes('end') || key.includes('start')) { + acc[key] = val + } + return acc + }, {}) + return +} + +export const NetworkRequestTiming = ({ + performanceEvent, +}: { + performanceEvent: PerformanceEvent +}): JSX.Element | null => { + const [timelineMode, setTimelineMode] = useState(true) + + return ( + + + setTimelineMode(!timelineMode)} + data-attr={`switch-timing-to-${timelineMode ? 'table' : 'timeline'}-view`} + > + {timelineMode ? 'Table view' : 'Timeline view'} + + + + {timelineMode ? ( + + ) : ( + + )} + + ) }