Skip to content

Commit 14b2b59

Browse files
svc-shorposvc-shorpo
committed
feat: Give more space to Session Player when expanded
1 parent 226a00d commit 14b2b59

File tree

2 files changed

+118
-97
lines changed

2 files changed

+118
-97
lines changed

‎packages/app/src/LogSidePanel.tsx

+99-89
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { useRouter } from 'next/router';
44
import cx from 'classnames';
55
import { add, format } from 'date-fns';
66
import Fuse from 'fuse.js';
7+
import { useAtomValue } from 'jotai';
78
import get from 'lodash/get';
89
import isPlainObject from 'lodash/isPlainObject';
910
import pickBy from 'lodash/pickBy';
@@ -45,6 +46,7 @@ import {
4546
useShowMoreRows,
4647
} from './LogSidePanelElements';
4748
import SearchInput from './SearchInput';
49+
import { playerExpandedAtom } from './SessionSubpanel';
4850
import SessionSubpanel from './SessionSubpanel';
4951
import TabBar from './TabBar';
5052
import TimelineChart from './TimelineChart';
@@ -1978,6 +1980,8 @@ function SidePanelHeader({
19781980
parsedProperties?.['process.tag.rum.sessionId'] ??
19791981
sessionId;
19801982

1983+
const playerExpanded = useAtomValue(playerExpandedAtom);
1984+
19811985
return (
19821986
<div>
19831987
<div className={styles.panelHeader}>
@@ -2054,58 +2058,60 @@ function SidePanelHeader({
20542058
</Button>
20552059
</div>
20562060
</div>
2057-
<div className={styles.panelDetails}>
2058-
<div>
2059-
<div
2060-
className="bg-hdx-dark p-3 overflow-auto"
2061-
style={{ maxHeight: 300 }}
2062-
>
2063-
{stripAnsi(logData.body)}
2061+
{!playerExpanded && (
2062+
<div className={styles.panelDetails}>
2063+
<div>
2064+
<div
2065+
className="bg-hdx-dark p-3 overflow-auto"
2066+
style={{ maxHeight: 300 }}
2067+
>
2068+
{stripAnsi(logData.body)}
2069+
</div>
2070+
</div>
2071+
<div className="d-flex flex-wrap">
2072+
{logData._service ? (
2073+
<EventTag
2074+
onPropertyAddClick={onPropertyAddClick}
2075+
generateSearchUrl={generateSearchUrl}
2076+
name="service"
2077+
value={logData._service}
2078+
/>
2079+
) : null}
2080+
{logData._host ? (
2081+
<EventTag
2082+
onPropertyAddClick={onPropertyAddClick}
2083+
generateSearchUrl={generateSearchUrl}
2084+
name="host"
2085+
value={logData._host}
2086+
/>
2087+
) : null}
2088+
{userEmail ? (
2089+
<EventTag
2090+
onPropertyAddClick={onPropertyAddClick}
2091+
generateSearchUrl={generateSearchUrl}
2092+
name="userEmail"
2093+
value={userEmail}
2094+
/>
2095+
) : null}
2096+
{userName ? (
2097+
<EventTag
2098+
onPropertyAddClick={onPropertyAddClick}
2099+
generateSearchUrl={generateSearchUrl}
2100+
name="userName"
2101+
value={userName}
2102+
/>
2103+
) : null}
2104+
{teamName ? (
2105+
<EventTag
2106+
onPropertyAddClick={onPropertyAddClick}
2107+
generateSearchUrl={generateSearchUrl}
2108+
name="teamName"
2109+
value={teamName}
2110+
/>
2111+
) : null}
20642112
</div>
20652113
</div>
2066-
<div className="d-flex flex-wrap">
2067-
{logData._service ? (
2068-
<EventTag
2069-
onPropertyAddClick={onPropertyAddClick}
2070-
generateSearchUrl={generateSearchUrl}
2071-
name="service"
2072-
value={logData._service}
2073-
/>
2074-
) : null}
2075-
{logData._host ? (
2076-
<EventTag
2077-
onPropertyAddClick={onPropertyAddClick}
2078-
generateSearchUrl={generateSearchUrl}
2079-
name="host"
2080-
value={logData._host}
2081-
/>
2082-
) : null}
2083-
{userEmail ? (
2084-
<EventTag
2085-
onPropertyAddClick={onPropertyAddClick}
2086-
generateSearchUrl={generateSearchUrl}
2087-
name="userEmail"
2088-
value={userEmail}
2089-
/>
2090-
) : null}
2091-
{userName ? (
2092-
<EventTag
2093-
onPropertyAddClick={onPropertyAddClick}
2094-
generateSearchUrl={generateSearchUrl}
2095-
name="userName"
2096-
value={userName}
2097-
/>
2098-
) : null}
2099-
{teamName ? (
2100-
<EventTag
2101-
onPropertyAddClick={onPropertyAddClick}
2102-
generateSearchUrl={generateSearchUrl}
2103-
name="teamName"
2104-
value={teamName}
2105-
/>
2106-
) : null}
2107-
</div>
2108-
</div>
2114+
)}
21092115
</div>
21102116
);
21112117
}
@@ -2406,6 +2412,8 @@ export default function LogSidePanel({
24062412

24072413
const drawerZIndex = contextZIndex + 1;
24082414

2415+
const playerExpanded = useAtomValue(playerExpandedAtom);
2416+
24092417
return (
24102418
<Drawer
24112419
enableOverlay
@@ -2434,45 +2442,47 @@ export default function LogSidePanel({
24342442
generateSearchUrl={generateSearchUrl}
24352443
onClose={_onClose}
24362444
/>
2437-
<TabBar
2438-
className="fs-8 mt-2"
2439-
items={[
2440-
{
2441-
text: 'Parsed Properties',
2442-
value: 'parsed',
2443-
},
2444-
...(logData.trace_id != ''
2445-
? ([
2446-
{
2447-
text: 'Trace',
2448-
value: 'trace',
2449-
},
2450-
] as const)
2451-
: []),
2452-
{
2453-
text: 'Original Line',
2454-
value: 'original',
2455-
},
2456-
// {
2457-
// text: 'Surrounding Context',
2458-
// value: 'context',
2459-
// },
2460-
// {
2461-
// text: 'Debug',
2462-
// value: 'debug',
2463-
// },
2464-
...(rumSessionId != null
2465-
? ([
2466-
{
2467-
text: 'Session Replay',
2468-
value: 'replay',
2469-
},
2470-
] as const)
2471-
: []),
2472-
]}
2473-
activeItem={displayedTab}
2474-
onClick={(v: any) => setTab(v)}
2475-
/>
2445+
{displayedTab === 'replay' && playerExpanded ? null : (
2446+
<TabBar
2447+
className="fs-8 mt-2"
2448+
items={[
2449+
{
2450+
text: 'Parsed Properties',
2451+
value: 'parsed',
2452+
},
2453+
...(logData.trace_id != ''
2454+
? ([
2455+
{
2456+
text: 'Trace',
2457+
value: 'trace',
2458+
},
2459+
] as const)
2460+
: []),
2461+
{
2462+
text: 'Original Line',
2463+
value: 'original',
2464+
},
2465+
// {
2466+
// text: 'Surrounding Context',
2467+
// value: 'context',
2468+
// },
2469+
// {
2470+
// text: 'Debug',
2471+
// value: 'debug',
2472+
// },
2473+
...(rumSessionId != null
2474+
? ([
2475+
{
2476+
text: 'Session Replay',
2477+
value: 'replay',
2478+
},
2479+
] as const)
2480+
: []),
2481+
]}
2482+
activeItem={displayedTab}
2483+
onClick={(v: any) => setTab(v)}
2484+
/>
2485+
)}
24762486
<ErrorBoundary
24772487
onError={err => {
24782488
console.error(err);

‎packages/app/src/SessionSubpanel.tsx

+19-8
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
22
import { format } from 'date-fns';
3+
import { atom, useAtom } from 'jotai';
34
import throttle from 'lodash/throttle';
45
import ReactDOM from 'react-dom';
56
import { NumberParam, StringParam, withDefault } from 'serialize-query-params';
@@ -14,6 +15,8 @@ import { useSessionEvents } from './sessionUtils';
1415
import TabBar from './TabBar';
1516
import { getShortUrl, usePrevious } from './utils';
1617

18+
export const playerExpandedAtom = atom(false);
19+
1720
function SessionEventList({
1821
config: { where, dateRange },
1922
onClick,
@@ -426,7 +429,15 @@ export default function SessionSubpanel({
426429
}),
427430
[rumSessionId, start, end, searchedQuery],
428431
);
429-
const [playerFullWidth, setPlayerFullWidth] = useState(false);
432+
433+
const [playerExpanded, setPlayerExpanded] = useAtom(playerExpandedAtom);
434+
// Clean up player expanded state when panel is closed
435+
useEffect(() => {
436+
setPlayerExpanded(false);
437+
return () => {
438+
setPlayerExpanded(false);
439+
};
440+
}, []);
430441

431442
const sessionEventListConfig = useMemo(
432443
() => ({
@@ -444,15 +455,15 @@ export default function SessionSubpanel({
444455
{selectedLog != null && portaledPanel}
445456
<div
446457
className={`bg-hdx-dark rounded ${
447-
playerFullWidth ? '' : 'pt-3 me-3 mb-7'
458+
playerExpanded ? '' : 'p-3 pb-0 my-3'
448459
} flex-column`}
449460
style={{
450461
width: '50%',
451462
minWidth: 300,
452463
display: 'flex',
453464
// d-none will cause too many layout changes for the infinite scroll
454465
// inside the event list, so we'll just hide it with opacity/width
455-
...(playerFullWidth
466+
...(playerExpanded
456467
? {
457468
width: 0,
458469
minWidth: 0,
@@ -524,8 +535,8 @@ export default function SessionSubpanel({
524535
</div>
525536
</div>
526537
<div
527-
style={{ width: playerFullWidth ? '100%' : '50%' }}
528-
className="d-flex flex-column"
538+
style={{ width: playerExpanded ? '100%' : '50%' }}
539+
className={`d-flex flex-column ${playerExpanded ? '' : 'ms-3'}`}
529540
>
530541
<div className="fs-8 text-muted mt-4 mb-2">Session Player</div>
531542
<div
@@ -544,8 +555,8 @@ export default function SessionSubpanel({
544555
setPlayerSpeed={setPlayerSpeed}
545556
skipInactive={skipInactive}
546557
setSkipInactive={setSkipInactive}
547-
setPlayerFullWidth={setPlayerFullWidth}
548-
playerFullWidth={playerFullWidth}
558+
setPlayerFullWidth={setPlayerExpanded}
559+
playerFullWidth={playerExpanded}
549560
/>
550561
</div>
551562
<DOMPlayer
@@ -568,7 +579,7 @@ export default function SessionSubpanel({
568579
skipInactive={skipInactive}
569580
setPlayerStartTimestamp={setPlayerStartTs}
570581
setPlayerEndTimestamp={setPlayerEndTs}
571-
resizeKey={`${playerFullWidth}`}
582+
resizeKey={`${playerExpanded}`}
572583
/>
573584
</div>
574585
</div>

0 commit comments

Comments
 (0)