Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(new-trace): Aligning trace flyout with issues flyout panel #82333

Merged
merged 6 commits into from
Dec 19, 2024
Merged

feat(new-trace): Aligning trace flyout with issues flyout panel #82333

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
2cbe21f
feat(new-trace) Aligning trace view drawer interactions with issue de…
Dec 18, 2024
94f30d6
feat(new-trace) Handling bottom drawer interactions
Dec 18, 2024
eb0c596
feat(new-trace) Updating tabs container styles
Dec 18, 2024
c27fdda
feat(new-trace) Updating tabs container styles
Dec 18, 2024
8d44ff6
feat(new-trace) Updating tabs container styles
Dec 18, 2024
fabba57
feat(new-trace) Updating tabs container styles
Dec 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 17 additions & 15 deletions static/app/views/performance/newTraceDetails/traceDrawer/details/autogroup/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export function AutogroupNodeDetails(
}

return (
<TraceDrawerComponents.DetailContainer hasNewTraceUi={hasTraceNewUi}>
<TraceDrawerComponents.DetailContainer>
<TraceDrawerComponents.HeaderContainer>
<TraceDrawerComponents.Title>
<TraceDrawerComponents.LegacyTitleText>
Expand All @@ -54,20 +54,22 @@ export function AutogroupNodeDetails(
onTabScrollToNode={onTabScrollToNode}
/>
</TraceDrawerComponents.HeaderContainer>
<TextBlock>
{t(
'This block represents autogrouped spans. We do this to reduce noise whenever it fits one of the following criteria:'
)}
</TextBlock>
<BulletList>
<li>{t('5 or more siblings with the same operation and description')}</li>
<li>{t('2 or more descendants with the same operation')}</li>
</BulletList>
<TextBlock>
{t(
'You can either open this autogroup using the chevron on the span or turn this functionality off using the settings dropdown above.'
)}
</TextBlock>
<TraceDrawerComponents.BodyContainer hasNewTraceUi={hasTraceNewUi}>
<TextBlock>
{t(
'This block represents autogrouped spans. We do this to reduce noise whenever it fits one of the following criteria:'
)}
</TextBlock>
<BulletList>
<li>{t('5 or more siblings with the same operation and description')}</li>
<li>{t('2 or more descendants with the same operation')}</li>
</BulletList>
<TextBlock>
{t(
'You can either open this autogroup using the chevron on the span or turn this functionality off using the settings dropdown above.'
)}
</TextBlock>
</TraceDrawerComponents.BodyContainer>
</TraceDrawerComponents.DetailContainer>
);
}
Expand Down
7 changes: 4 additions & 3 deletions ...c/app/views/performance/newTraceDetails/traceDrawer/details/autogroup/parentAutogroup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,10 +76,11 @@ export function ParentAutogroupNodeDetails({
onTabScrollToNode={onTabScrollToNode}
/>
</TraceDrawerComponents.LegacyHeaderContainer>
<TraceDrawerComponents.BodyContainer>
<IssueList issues={issues} node={node} organization={organization} />

<IssueList issues={issues} node={node} organization={organization} />

<TraceDrawerComponents.SectionCard items={items} title={t('General')} />
<TraceDrawerComponents.SectionCard items={items} title={t('General')} />
</TraceDrawerComponents.BodyContainer>
</TraceDrawerComponents.DetailContainer>
);
}
7 changes: 4 additions & 3 deletions .../app/views/performance/newTraceDetails/traceDrawer/details/autogroup/siblingAutogroup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,10 +77,11 @@ export function SiblingAutogroupNodeDetails({
onTabScrollToNode={onTabScrollToNode}
/>
</TraceDrawerComponents.LegacyHeaderContainer>
<TraceDrawerComponents.BodyContainer>
<IssueList issues={issues} node={node} organization={organization} />

<IssueList issues={issues} node={node} organization={organization} />

<TraceDrawerComponents.SectionCard items={items} title={t('General')} />
<TraceDrawerComponents.SectionCard items={items} title={t('General')} />
</TraceDrawerComponents.BodyContainer>
</TraceDrawerComponents.DetailContainer>
);
}
71 changes: 37 additions & 34 deletions static/app/views/performance/newTraceDetails/traceDrawer/details/error.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ export function ErrorNodeDetails(
}

return (
<TraceDrawerComponents.DetailContainer hasNewTraceUi={hasTraceNewUi}>
<TraceDrawerComponents.DetailContainer>
<TraceDrawerComponents.HeaderContainer>
<TraceDrawerComponents.Title>
<TraceDrawerComponents.LegacyTitleText>
Expand All @@ -57,12 +57,14 @@ export function ErrorNodeDetails(
onTabScrollToNode={onTabScrollToNode}
/>
</TraceDrawerComponents.HeaderContainer>
<Description>
{t(
'This error is related to an ongoing issue. For details about how many users this affects and more, go to the issue below.'
)}
</Description>
<IssueList issues={issues} node={node} organization={organization} />
<TraceDrawerComponents.BodyContainer hasNewTraceUi={hasTraceNewUi}>
<Description>
{t(
'This error is related to an ongoing issue. For details about how many users this affects and more, go to the issue below.'
)}
</Description>
<IssueList issues={issues} node={node} organization={organization} />
</TraceDrawerComponents.BodyContainer>
</TraceDrawerComponents.DetailContainer>
);
}
Expand Down Expand Up @@ -153,34 +155,35 @@ function LegacyErrorNodeDetails({
</LinkButton>
</TraceDrawerComponents.Actions>
</TraceDrawerComponents.LegacyHeaderContainer>
<TraceDrawerComponents.BodyContainer>
<IssueList issues={issues} node={node} organization={organization} />

<TraceDrawerComponents.SectionCard
items={[
{
key: 'stack_trace',
subject: t('Stack Trace'),
subjectNode: null,
value:
stackTrace && data ? (
<StackTraceWrapper>
<StackTracePreviewContent event={data} stacktrace={stackTrace} />
</StackTraceWrapper>
) : (
t('No stack trace has been reported with this error')
),
},
]}
title={t('Stack Trace')}
/>

<IssueList issues={issues} node={node} organization={organization} />

<TraceDrawerComponents.SectionCard
items={[
{
key: 'stack_trace',
subject: t('Stack Trace'),
subjectNode: null,
value:
stackTrace && data ? (
<StackTraceWrapper>
<StackTracePreviewContent event={data} stacktrace={stackTrace} />
</StackTraceWrapper>
) : (
t('No stack trace has been reported with this error')
),
},
]}
title={t('Stack Trace')}
/>

<TraceDrawerComponents.SectionCard items={items} title={t('General')} />

<TraceDrawerComponents.EventTags
projectSlug={node.value.project_slug}
event={data}
/>
<TraceDrawerComponents.SectionCard items={items} title={t('General')} />

<TraceDrawerComponents.EventTags
projectSlug={node.value.project_slug}
event={data}
/>
</TraceDrawerComponents.BodyContainer>
</TraceDrawerComponents.DetailContainer>
) : null;
}
Expand Down
3 changes: 2 additions & 1 deletion static/app/views/performance/newTraceDetails/traceDrawer/details/issues/issues.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -630,7 +630,8 @@ const IssuesWrapper = styled('div')`
flex-direction: column;
gap: ${space(0.75)};
justify-content: left;
margin-bottom: ${space(2)};
margin-bottom: ${space(1.5)};
margin-top: ${space(2)};

${StyledPanel} {
margin-bottom: 0;
Expand Down
122 changes: 62 additions & 60 deletions static/app/views/performance/newTraceDetails/traceDrawer/details/missingInstrumentation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ export function MissingInstrumentationNodeDetails(
const profileId = event?.contexts?.profile?.profile_id ?? null;

return (
<TraceDrawerComponents.DetailContainer hasNewTraceUi={hasTraceNewUi}>
<TraceDrawerComponents.DetailContainer>
<TraceDrawerComponents.HeaderContainer>
<TraceDrawerComponents.Title>
<TraceDrawerComponents.LegacyTitleText>
Expand All @@ -57,43 +57,44 @@ export function MissingInstrumentationNodeDetails(
onTabScrollToNode={onTabScrollToNode}
/>
</TraceDrawerComponents.HeaderContainer>

<TextBlock>
{tct(
'It looks like there’s more than 100ms unaccounted for. This might be a missing service or just idle time. If you know there’s something going on, you can [customInstrumentationLink: add more spans using custom instrumentation].',
{
customInstrumentationLink: (
<ExternalLink href={getCustomInstrumentationLink(project)} />
),
}
)}
</TextBlock>

{event?.projectSlug ? (
<ProfilesProvider
orgSlug={organization.slug}
projectSlug={event?.projectSlug ?? ''}
profileId={profileId || ''}
>
<ProfileContext.Consumer>
{profiles => (
<ProfileGroupProvider
type="flamechart"
input={profiles?.type === 'resolved' ? profiles.data : null}
traceID={profileId || ''}
>
<ProfilePreview event={event!} node={node} />
</ProfileGroupProvider>
)}
</ProfileContext.Consumer>
</ProfilesProvider>
) : null}

<TextBlock>
{t(
"You can turn off the 'No Instrumentation' feature using the settings dropdown above."
)}
</TextBlock>
<TraceDrawerComponents.BodyContainer hasNewTraceUi={hasTraceNewUi}>
<TextBlock>
{tct(
'It looks like there’s more than 100ms unaccounted for. This might be a missing service or just idle time. If you know there’s something going on, you can [customInstrumentationLink: add more spans using custom instrumentation].',
{
customInstrumentationLink: (
<ExternalLink href={getCustomInstrumentationLink(project)} />
),
}
)}
</TextBlock>

{event?.projectSlug ? (
<ProfilesProvider
orgSlug={organization.slug}
projectSlug={event?.projectSlug ?? ''}
profileId={profileId || ''}
>
<ProfileContext.Consumer>
{profiles => (
<ProfileGroupProvider
type="flamechart"
input={profiles?.type === 'resolved' ? profiles.data : null}
traceID={profileId || ''}
>
<ProfilePreview event={event!} node={node} />
</ProfileGroupProvider>
)}
</ProfileContext.Consumer>
</ProfilesProvider>
) : null}

<TextBlock>
{t(
"You can turn off the 'No Instrumentation' feature using the settings dropdown above."
)}
</TextBlock>
</TraceDrawerComponents.BodyContainer>
</TraceDrawerComponents.DetailContainer>
);
}
Expand Down Expand Up @@ -185,28 +186,29 @@ function LegacyMissingInstrumentationNodeDetails({
onTabScrollToNode={onTabScrollToNode}
/>
</TraceDrawerComponents.LegacyHeaderContainer>

{node.event?.projectSlug ? (
<ProfilesProvider
orgSlug={organization.slug}
projectSlug={node.event?.projectSlug ?? ''}
profileId={profileId || ''}
>
<ProfileContext.Consumer>
{profiles => (
<ProfileGroupProvider
type="flamechart"
input={profiles?.type === 'resolved' ? profiles.data : null}
traceID={profileId || ''}
>
<ProfilePreview event={node.event!} node={node} />
</ProfileGroupProvider>
)}
</ProfileContext.Consumer>
</ProfilesProvider>
) : null}

<TraceDrawerComponents.SectionCard items={items} title={t('General')} />
<TraceDrawerComponents.BodyContainer>
{node.event?.projectSlug ? (
<ProfilesProvider
orgSlug={organization.slug}
projectSlug={node.event?.projectSlug ?? ''}
profileId={profileId || ''}
>
<ProfileContext.Consumer>
{profiles => (
<ProfileGroupProvider
type="flamechart"
input={profiles?.type === 'resolved' ? profiles.data : null}
traceID={profileId || ''}
>
<ProfilePreview event={node.event!} node={node} />
</ProfileGroupProvider>
)}
</ProfileContext.Consumer>
</ProfilesProvider>
) : null}

<TraceDrawerComponents.SectionCard items={items} title={t('General')} />
</TraceDrawerComponents.BodyContainer>
</TraceDrawerComponents.DetailContainer>
);
}
Loading
Loading