From 1ce6328567a4396a14ff287d228af8f96fa3bdc2 Mon Sep 17 00:00:00 2001 From: Paul D'Ambra Date: Wed, 15 Nov 2023 12:08:53 +0000 Subject: [PATCH 1/4] feat: allow switching timing view --- .../Timing/NetworkRequestTiming.tsx | 52 ++++++++++++++++--- 1 file changed, 46 insertions(+), 6 deletions(-) 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..3a256a3658f0d 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 (['_start', '_end', '_time'].some((suffix) => key.endsWith(suffix))) { + 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 ? ( + + ) : ( + + )} +
+ ) } From 456f46011cd4417f727b3b17bed1fde0d377702e Mon Sep 17 00:00:00 2001 From: Paul D'Ambra Date: Wed, 15 Nov 2023 12:10:55 +0000 Subject: [PATCH 2/4] sentence case --- .../player/inspector/components/ItemPerformanceEvent.tsx | 2 +- .../player/inspector/components/Timing/NetworkRequestTiming.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) 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 3a256a3658f0d..82bb311b3b538 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 @@ -306,7 +306,7 @@ export const NetworkRequestTiming = ({ onClick={() => setTimelineMode(!timelineMode)} data-attr={`switch-timing-to-${timelineMode ? 'table' : 'timeline'}-view`} > - {timelineMode ? 'table view' : 'timeline view'} + {timelineMode ? 'Table view' : 'Timeline view'} From b33137ec995daceee993fc04204dfa8ee07ece22 Mon Sep 17 00:00:00 2001 From: github-actions <41898282+github-actions[bot]@users.noreply.github.com> Date: Wed, 15 Nov 2023 12:19:36 +0000 Subject: [PATCH 3/4] Update UI snapshots for `chromium` (2) --- ...components-networkrequesttiming--basic.png | Bin 9145 -> 10800 bytes 1 file changed, 0 insertions(+), 0 deletions(-) diff --git a/frontend/__snapshots__/components-networkrequesttiming--basic.png b/frontend/__snapshots__/components-networkrequesttiming--basic.png index abff737987dfec5506630342d64c819d049f14bc..ff34c2d27d47919d5bd910dd27e553ee7f2233e5 100644 GIT binary patch literal 10800 zcma)i2|QH)-v1d2C26wnnu;PM$xbq&A6eprWXaefdzQg4?PLEyF%0AY_m%)4M!`k-fUI? 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 literal 9145 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 From 3ccc926e2aa80bef65c253ba9bdb71088b90718f Mon Sep 17 00:00:00 2001 From: Paul D'Ambra Date: Wed, 15 Nov 2023 12:19:52 +0000 Subject: [PATCH 4/4] reverse of the sanitize props processing --- .../player/inspector/components/Timing/NetworkRequestTiming.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 82bb311b3b538..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 @@ -282,7 +282,7 @@ const TimeLineView = ({ performanceEvent }: { performanceEvent: PerformanceEvent const TableView = ({ performanceEvent }: { performanceEvent: PerformanceEvent }): JSX.Element => { const timingProperties = Object.entries(performanceEvent).reduce((acc, [key, val]) => { - if (['_start', '_end', '_time'].some((suffix) => key.endsWith(suffix))) { + if (key.includes('time') || key.includes('end') || key.includes('start')) { acc[key] = val } return acc