Skip to content

Commit 0d8190e

Browse files
colin-sentrycolin-sentry
committed
feat(logs): Add a better empty state for a trace with only logs
1 parent cc312e7 commit 0d8190e

File tree

5 files changed

+138
-146
lines changed

5 files changed

+138
-146
lines changed

‎static/app/views/performance/newTraceDetails/traceContextPanel.tsx

+12-125
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
1-
import {useCallback, useEffect, useMemo, useRef, useState} from 'react';
1+
import {useCallback} from 'react';
22
import styled from '@emotion/styled';
33

44
import Feature from 'sentry/components/acl/feature';
55
import EventTagsTree from 'sentry/components/events/eventTags/eventTagsTree';
6-
import {IconGrabbable} from 'sentry/icons';
76
import {t} from 'sentry/locale';
87
import {space} from 'sentry/styles/space';
98
import type {EventTransaction} from 'sentry/types/event';
@@ -14,90 +13,13 @@ import {FoldSection} from 'sentry/views/issueDetails/streamline/foldSection';
1413
import {TraceContextVitals} from 'sentry/views/performance/newTraceDetails/traceContextVitals';
1514
import type {TraceTree} from 'sentry/views/performance/newTraceDetails/traceModels/traceTree';
1615
import {TraceViewLogsSection} from 'sentry/views/performance/newTraceDetails/traceOurlogs';
17-
import {
18-
DEFAULT_TRACE_VIEW_PREFERENCES,
19-
loadTraceViewPreferences,
20-
} from 'sentry/views/performance/newTraceDetails/traceState/tracePreferences';
21-
import {useTraceStateDispatch} from 'sentry/views/performance/newTraceDetails/traceState/traceStateProvider';
22-
23-
const MIN_HEIGHT = 0;
24-
const DEFAULT_HEIGHT = 150;
25-
const MAX_HEIGHT = 700;
2616

2717
type Props = {
2818
rootEvent: UseApiQueryResult<EventTransaction, RequestError>;
2919
tree: TraceTree;
3020
};
3121

3222
export function TraceContextPanel({tree, rootEvent}: Props) {
33-
const [height, setHeight] = useState(DEFAULT_HEIGHT);
34-
const containerRef = useRef<HTMLDivElement>(null);
35-
const traceDispatch = useTraceStateDispatch();
36-
37-
const preferences = useMemo(
38-
() =>
39-
loadTraceViewPreferences('trace-view-preferences') ||
40-
DEFAULT_TRACE_VIEW_PREFERENCES,
41-
[]
42-
);
43-
44-
useEffect(() => {
45-
const loadedHeight = preferences.drawer.sizes['trace context height'];
46-
47-
if (containerRef.current && loadedHeight !== undefined) {
48-
setHeight(loadedHeight);
49-
containerRef.current.style.setProperty('--panel-height', `${loadedHeight}px`);
50-
}
51-
}, [preferences.drawer.sizes, containerRef]);
52-
53-
const handleMouseDown = useCallback(
54-
(event: React.MouseEvent) => {
55-
event.preventDefault();
56-
57-
if (!containerRef.current) {
58-
return;
59-
}
60-
61-
const startY = event.clientY;
62-
const startHeight = height;
63-
64-
function handleMouseMove(moveEvent: MouseEvent) {
65-
if (!containerRef.current) {
66-
return;
67-
}
68-
69-
const deltaY = moveEvent.clientY - startY;
70-
const newHeight = Math.max(
71-
MIN_HEIGHT,
72-
Math.min(startHeight - deltaY, MAX_HEIGHT)
73-
);
74-
75-
containerRef.current.style.setProperty('--panel-height', `${newHeight}px`);
76-
}
77-
78-
function handleMouseUp() {
79-
if (!containerRef.current) {
80-
return;
81-
}
82-
83-
const finalHeight = parseInt(
84-
getComputedStyle(containerRef.current).getPropertyValue('--panel-height'),
85-
10
86-
);
87-
88-
setHeight(finalHeight);
89-
traceDispatch({type: 'set trace context height', payload: finalHeight});
90-
91-
window.removeEventListener('mousemove', handleMouseMove);
92-
window.removeEventListener('mouseup', handleMouseUp);
93-
}
94-
95-
window.addEventListener('mousemove', handleMouseMove);
96-
window.addEventListener('mouseup', handleMouseUp);
97-
},
98-
[height, traceDispatch]
99-
);
100-
10123
const renderTags = useCallback(() => {
10224
if (!rootEvent.data) {
10325
return null;
@@ -115,25 +37,19 @@ export function TraceContextPanel({tree, rootEvent}: Props) {
11537

11638
return (
11739
<Container>
118-
<GrabberContainer onMouseDown={handleMouseDown}>
119-
<IconGrabbable color="gray500" />
120-
</GrabberContainer>
121-
122-
<TraceContextContainer ref={containerRef}>
123-
<VitalMetersContainer>
124-
<TraceContextVitals tree={tree} />
125-
</VitalMetersContainer>
40+
<VitalMetersContainer>
41+
<TraceContextVitals tree={tree} />
42+
</VitalMetersContainer>
43+
<TraceTagsContainer>
44+
<FoldSection sectionKey={'trace_tags' as SectionKey} title={t('Trace Tags')}>
45+
{renderTags()}
46+
</FoldSection>
47+
</TraceTagsContainer>
48+
<Feature features={['ourlogs-enabled']}>
12649
<TraceTagsContainer>
127-
<FoldSection sectionKey={'trace_tags' as SectionKey} title={t('Trace Tags')}>
128-
{renderTags()}
129-
</FoldSection>
50+
<TraceViewLogsSection />
13051
</TraceTagsContainer>
131-
<Feature features={['ourlogs-enabled']}>
132-
<TraceTagsContainer>
133-
<TraceViewLogsSection />
134-
</TraceTagsContainer>
135-
</Feature>
136-
</TraceContextContainer>
52+
</Feature>
13753
</Container>
13854
);
13955
}
@@ -146,35 +62,6 @@ const Container = styled('div')`
14662
gap: ${space(1)};
14763
`;
14864

149-
const TraceContextContainer = styled('div')`
150-
display: flex;
151-
flex-direction: column;
152-
align-items: center;
153-
width: 100%;
154-
--panel-height: ${DEFAULT_HEIGHT}px;
155-
height: var(--panel-height);
156-
157-
&[style*='--panel-height: 0px'] {
158-
display: none;
159-
}
160-
`;
161-
162-
const GrabberContainer = styled(Container)`
163-
align-items: center;
164-
background: ${p => p.theme.background};
165-
border: 1px solid ${p => p.theme.border};
166-
border-radius: 0 0 ${p => p.theme.borderRadius} ${p => p.theme.borderRadius};
167-
display: flex;
168-
169-
width: 100%;
170-
cursor: row-resize;
171-
padding: ${space(0.5)};
172-
173-
& > svg {
174-
transform: rotate(90deg);
175-
}
176-
`;
177-
17865
const VitalMetersContainer = styled('div')`
17966
display: flex;
18067
flex-direction: row;

‎static/app/views/performance/newTraceDetails/traceHeader/index.tsx

+19-17
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {useCallback, useMemo} from 'react';
1+
import {Fragment, useCallback, useMemo} from 'react';
22
import styled from '@emotion/styled';
33
import type {Location} from 'history';
44

@@ -286,7 +286,7 @@ export function TraceMetaDataHeader(props: TraceMetadataHeaderProps) {
286286

287287
const isLoading =
288288
props.metaResults.status === 'pending' ||
289-
props.rootEventResults.isPending ||
289+
props.rootEventResults.isLoading ||
290290
props.tree.type === 'loading';
291291

292292
if (isLoading) {
@@ -329,22 +329,24 @@ export function TraceMetaDataHeader(props: TraceMetadataHeaderProps) {
329329
representativeTransaction={representativeTransaction}
330330
/>
331331
</HeaderRow>
332-
<StyledBreak />
333332
{props.rootEventResults.data ? (
334-
<HeaderRow>
335-
<StyledWrapper>
336-
<HighlightsIconSummary event={props.rootEventResults.data} />
337-
</StyledWrapper>
338-
<ProjectsRendererWrapper>
339-
<ProjectsRenderer
340-
disableLink
341-
onProjectClick={onProjectClick}
342-
projectSlugs={projectSlugs}
343-
visibleAvatarSize={24}
344-
maxVisibleProjects={3}
345-
/>
346-
</ProjectsRendererWrapper>
347-
</HeaderRow>
333+
<Fragment>
334+
<StyledBreak />
335+
<HeaderRow>
336+
<StyledWrapper>
337+
<HighlightsIconSummary event={props.rootEventResults.data} />
338+
</StyledWrapper>
339+
<ProjectsRendererWrapper>
340+
<ProjectsRenderer
341+
disableLink
342+
onProjectClick={onProjectClick}
343+
projectSlugs={projectSlugs}
344+
visibleAvatarSize={24}
345+
maxVisibleProjects={3}
346+
/>
347+
</ProjectsRendererWrapper>
348+
</HeaderRow>
349+
</Fragment>
348350
) : null}
349351
</HeaderContent>
350352
</HeaderLayout>

‎static/app/views/performance/newTraceDetails/traceModels/traceTree.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1880,7 +1880,7 @@ export class TraceTree extends TraceTreeEventDispatcher {
18801880
roots: trace.value.filter(span => span.parent_span_id === null).length,
18811881
};
18821882
} else if (isTraceNode(trace)) {
1883-
traceStats = trace.value.transactions?.reduce<{
1883+
traceStats = trace.value.transactions.reduce<{
18841884
javascriptRootTransactions: TraceTree.Transaction[];
18851885
orphans: number;
18861886
roots: number;

‎static/app/views/performance/newTraceDetails/traceState/tracePreferences.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ type TracePreferencesAction =
1616
| {payload: boolean; type: 'minimize drawer'}
1717
| {payload: boolean; type: 'set missing instrumentation'}
1818
| {payload: boolean; type: 'set autogrouping'}
19-
| {payload: number; type: 'set trace context height'};
19+
| {payload: number; type: 'set trace grid height'};
2020

2121
type TraceDrawerPreferences = {
2222
layoutOptions: TraceLayoutPreferences[];
@@ -204,14 +204,14 @@ export function tracePreferencesReducer(
204204
width: clamp(action.payload, 0.1, 0.9),
205205
},
206206
};
207-
case 'set trace context height':
207+
case 'set trace grid height':
208208
return {
209209
...state,
210210
drawer: {
211211
...state.drawer,
212212
sizes: {
213213
...state.drawer.sizes,
214-
'trace context height': action.payload,
214+
'trace grid height': action.payload,
215215
},
216216
},
217217
};

0 commit comments

Comments
 (0)