diff --git a/packages/app/src/DOMPlayer.tsx b/packages/app/src/DOMPlayer.tsx index d19c44ad2..89111842c 100644 --- a/packages/app/src/DOMPlayer.tsx +++ b/packages/app/src/DOMPlayer.tsx @@ -513,17 +513,18 @@ export default function DOMPlayer({ No replay available for this session, most likely due to this session starting and ending in a background tab. - ) : null} -
0, - [styles.domPlayerWrapperPaused]: playerState === 'paused', - })} - > -
-
+ ) : ( +
0, + [styles.domPlayerWrapperPaused]: playerState === 'paused', + })} + > +
+
+ )}
); diff --git a/packages/app/src/Playbar.tsx b/packages/app/src/Playbar.tsx index 7225e853f..3413acf08 100644 --- a/packages/app/src/Playbar.tsx +++ b/packages/app/src/Playbar.tsx @@ -75,8 +75,11 @@ export default function Playbar({ const isError = event.severity_text?.toLowerCase() === 'error' || event.component === 'error' || + event.component === 'console' || statusCode >= 399; + const isSuccess = !isError && statusCode < 400 && statusCode > 99; + return { id: event.id, ts: event.startOffset, @@ -93,6 +96,7 @@ export default function Playbar({ ? 'Intercom Chat Opened' : event.body, isError, + isSuccess, }; }) ?? [], 'percentage', diff --git a/packages/app/src/PlaybarSlider.tsx b/packages/app/src/PlaybarSlider.tsx index 5627c5e7e..950324ad6 100644 --- a/packages/app/src/PlaybarSlider.tsx +++ b/packages/app/src/PlaybarSlider.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import { format } from 'date-fns'; import { Slider, Tooltip } from '@mantine/core'; import { useFormatTime } from './useFormatTime'; @@ -12,6 +11,7 @@ export type PlaybarMarker = { ts: number; description: string; isError: boolean; + isSuccess: boolean; }; type PlaybarSliderProps = { @@ -60,9 +60,11 @@ export const PlaybarSlider = ({
onChange(mark.ts)} diff --git a/packages/app/src/SessionSubpanel.tsx b/packages/app/src/SessionSubpanel.tsx index c38de50ea..1c320203a 100644 --- a/packages/app/src/SessionSubpanel.tsx +++ b/packages/app/src/SessionSubpanel.tsx @@ -314,7 +314,8 @@ export default function SessionSubpanel({ [traceSource], ); - const filteredEventsFilter = useMemo( + // Events shown in the highlighted tab + const highlightedEventsFilter = useMemo( () => ({ type: 'lucene' as const, condition: `${traceSource.resourceAttributesExpression}.rum.sessionId:"${rumSessionId}" @@ -363,7 +364,7 @@ export default function SessionSubpanel({ offset: 0, }, filters: [ - filteredEventsFilter, + tab === 'highlighted' ? highlightedEventsFilter : allEventsFilter, ...(where ? [{ type: whereLanguage, condition: where }] : []), ], }), @@ -377,7 +378,9 @@ export default function SessionSubpanel({ end, whereLanguage, searchedQuery, - filteredEventsFilter, + tab, + highlightedEventsFilter, + allEventsFilter, where, ], ); @@ -410,7 +413,7 @@ export default function SessionSubpanel({ offset: 0, }, filters: [ - tab === 'highlighted' ? filteredEventsFilter : allEventsFilter, + tab === 'highlighted' ? highlightedEventsFilter : allEventsFilter, ...(where ? [{ type: whereLanguage, condition: where }] : []), ], }), @@ -425,7 +428,7 @@ export default function SessionSubpanel({ whereLanguage, searchedQuery, tab, - filteredEventsFilter, + highlightedEventsFilter, allEventsFilter, where, ], diff --git a/packages/app/styles/PlaybarSlider.module.scss b/packages/app/styles/PlaybarSlider.module.scss index 947b09740..35e18555a 100644 --- a/packages/app/styles/PlaybarSlider.module.scss +++ b/packages/app/styles/PlaybarSlider.module.scss @@ -25,10 +25,11 @@ position: absolute; top: 0; margin-left: -1px; - width: 3px; + width: 2px; height: 8px; background-color: #333; border-radius: 1px; + opacity: 0.5; &:hover { opacity: 1 !important;