Skip to content

Commit 4fe24a1

Browse files
priscilawebdevpriscilawebdev
committed
fix(layout): move Layout.Page to profiling providers
Move Layout.Page from flamegraph child pages to the provider components (continuousProfileProvider, transactionProfileProvider) so it wraps both the header and the outlet content.
1 parent 7416527 commit 4fe24a1

File tree

4 files changed

+72
-70
lines changed

4 files changed

+72
-70
lines changed

‎static/app/views/profiling/continuousProfileFlamegraph.tsx‎

Lines changed: 19 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import * as qs from 'query-string';
44

55
import {Stack} from '@sentry/scraps/layout';
66

7-
import * as Layout from 'sentry/components/layouts/thirds';
87
import {LoadingIndicator} from 'sentry/components/loadingIndicator';
98
import {ContinuousFlamegraph} from 'sentry/components/profiling/flamegraph/continuousFlamegraph';
109
import {SentryDocumentTitle} from 'sentry/components/sentryDocumentTitle';
@@ -104,27 +103,25 @@ export default function ContinuousProfileFlamegraphWrapper() {
104103
title={t('Profiling \u2014 Flamechart')}
105104
orgSlug={organization.slug}
106105
>
107-
<LayoutPageWithHiddenFooter>
108-
<FlamegraphStateProvider initialState={initialFlamegraphPreferencesState}>
109-
<ProfileGroupTypeProvider
110-
input={profiles.type === 'resolved' ? profiles.data : null}
111-
traceID={params.eventId!}
112-
>
113-
<FlamegraphThemeProvider>
114-
<FlamegraphStateQueryParamSync />
115-
<FlamegraphStateLocalStorageSync />
116-
<FlamegraphContainer>
117-
{profiles.type === 'loading' ? (
118-
<Stack justify="center" width="100%" height="100%" position="absolute">
119-
<LoadingIndicator />
120-
</Stack>
121-
) : null}
122-
<ContinuousProfileFlamegraph />
123-
</FlamegraphContainer>
124-
</FlamegraphThemeProvider>
125-
</ProfileGroupTypeProvider>
126-
</FlamegraphStateProvider>
127-
</LayoutPageWithHiddenFooter>
106+
<FlamegraphStateProvider initialState={initialFlamegraphPreferencesState}>
107+
<ProfileGroupTypeProvider
108+
input={profiles.type === 'resolved' ? profiles.data : null}
109+
traceID={params.eventId!}
110+
>
111+
<FlamegraphThemeProvider>
112+
<FlamegraphStateQueryParamSync />
113+
<FlamegraphStateLocalStorageSync />
114+
<FlamegraphContainer>
115+
{profiles.type === 'loading' ? (
116+
<Stack justify="center" width="100%" height="100%" position="absolute">
117+
<LoadingIndicator />
118+
</Stack>
119+
) : null}
120+
<ContinuousProfileFlamegraph />
121+
</FlamegraphContainer>
122+
</FlamegraphThemeProvider>
123+
</ProfileGroupTypeProvider>
124+
</FlamegraphStateProvider>
128125
</SentryDocumentTitle>
129126
);
130127
}
@@ -159,9 +156,3 @@ const FlamegraphContainer = styled('div')`
159156
flex-direction: column;
160157
flex: 1 1 100%;
161158
`;
162-
163-
const LayoutPageWithHiddenFooter = styled(Layout.Page)`
164-
~ footer {
165-
display: none;
166-
}
167-
`;

‎static/app/views/profiling/continuousProfileProvider.tsx‎

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import {useMemo, useState} from 'react';
22
import {Outlet} from 'react-router-dom';
3+
import styled from '@emotion/styled';
34

5+
import * as Layout from 'sentry/components/layouts/thirds';
46
import {ContinuousProfileHeader} from 'sentry/components/profiling/continuousProfileHeader';
57
import type {RequestState} from 'sentry/types/core';
68
import type {EventTransaction} from 'sentry/types/event';
@@ -65,13 +67,21 @@ export default function ProfileAndTransactionProvider(): React.ReactElement {
6567
setProfile={setProfile}
6668
>
6769
<ProfileTransactionContext value={profileTransaction}>
68-
<ContinuousProfileHeader
69-
transaction={
70-
profileTransaction.type === 'resolved' ? profileTransaction.data : null
71-
}
72-
/>
73-
<Outlet />
70+
<LayoutPageWithHiddenFooter>
71+
<ContinuousProfileHeader
72+
transaction={
73+
profileTransaction.type === 'resolved' ? profileTransaction.data : null
74+
}
75+
/>
76+
<Outlet />
77+
</LayoutPageWithHiddenFooter>
7478
</ProfileTransactionContext>
7579
</ContinuousProfileProvider>
7680
);
7781
}
82+
83+
const LayoutPageWithHiddenFooter = styled(Layout.Page)`
84+
~ footer {
85+
display: none;
86+
}
87+
`;

‎static/app/views/profiling/profileFlamechart.tsx‎

Lines changed: 19 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import * as qs from 'query-string';
44

55
import {Stack} from '@sentry/scraps/layout';
66

7-
import * as Layout from 'sentry/components/layouts/thirds';
87
import {LoadingIndicator} from 'sentry/components/loadingIndicator';
98
import {Flamegraph} from 'sentry/components/profiling/flamegraph/flamegraph';
109
import {SentryDocumentTitle} from 'sentry/components/sentryDocumentTitle';
@@ -105,27 +104,25 @@ export default function ProfileFlamegraphWrapper() {
105104
title={t('Profiling \u2014 Flamechart')}
106105
orgSlug={organization.slug}
107106
>
108-
<LayoutPageWithHiddenFooter>
109-
<FlamegraphStateProvider initialState={initialFlamegraphPreferencesState}>
110-
<ProfileGroupTypeProvider
111-
input={profiles.type === 'resolved' ? profiles.data : null}
112-
traceID={params.eventId!}
113-
>
114-
<FlamegraphThemeProvider>
115-
<FlamegraphStateQueryParamSync />
116-
<FlamegraphStateLocalStorageSync />
117-
<FlamegraphContainer>
118-
{profiles.type === 'loading' || profiledTransaction.type === 'loading' ? (
119-
<Stack justify="center" width="100%" height="100%" position="absolute">
120-
<LoadingIndicator />
121-
</Stack>
122-
) : null}
123-
<ProfileFlamegraph />
124-
</FlamegraphContainer>
125-
</FlamegraphThemeProvider>
126-
</ProfileGroupTypeProvider>
127-
</FlamegraphStateProvider>
128-
</LayoutPageWithHiddenFooter>
107+
<FlamegraphStateProvider initialState={initialFlamegraphPreferencesState}>
108+
<ProfileGroupTypeProvider
109+
input={profiles.type === 'resolved' ? profiles.data : null}
110+
traceID={params.eventId!}
111+
>
112+
<FlamegraphThemeProvider>
113+
<FlamegraphStateQueryParamSync />
114+
<FlamegraphStateLocalStorageSync />
115+
<FlamegraphContainer>
116+
{profiles.type === 'loading' || profiledTransaction.type === 'loading' ? (
117+
<Stack justify="center" width="100%" height="100%" position="absolute">
118+
<LoadingIndicator />
119+
</Stack>
120+
) : null}
121+
<ProfileFlamegraph />
122+
</FlamegraphContainer>
123+
</FlamegraphThemeProvider>
124+
</ProfileGroupTypeProvider>
125+
</FlamegraphStateProvider>
129126
</SentryDocumentTitle>
130127
);
131128
}
@@ -160,9 +157,3 @@ const FlamegraphContainer = styled('div')`
160157
flex-direction: column;
161158
flex: 1 1 100%;
162159
`;
163-
164-
const LayoutPageWithHiddenFooter = styled(Layout.Page)`
165-
~ footer {
166-
display: none;
167-
}
168-
`;

‎static/app/views/profiling/transactionProfileProvider.tsx‎

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import {useState} from 'react';
22
import {Outlet} from 'react-router-dom';
3+
import styled from '@emotion/styled';
34

5+
import * as Layout from 'sentry/components/layouts/thirds';
46
import {ProfileHeader} from 'sentry/components/profiling/profileHeader';
57
import type {RequestState} from 'sentry/types/core';
68
import type {EventTransaction} from 'sentry/types/event';
@@ -46,15 +48,23 @@ export default function ProfileAndTransactionProvider(): React.ReactElement {
4648
setProfile={setProfile}
4749
>
4850
<ProfileTransactionContext value={profileTransaction}>
49-
<ProfileHeader
50-
eventId={params.eventId!}
51-
projectId={projectSlug}
52-
transaction={
53-
profileTransaction.type === 'resolved' ? profileTransaction.data : null
54-
}
55-
/>
56-
<Outlet />
51+
<LayoutPageWithHiddenFooter>
52+
<ProfileHeader
53+
eventId={params.eventId!}
54+
projectId={projectSlug}
55+
transaction={
56+
profileTransaction.type === 'resolved' ? profileTransaction.data : null
57+
}
58+
/>
59+
<Outlet />
60+
</LayoutPageWithHiddenFooter>
5761
</ProfileTransactionContext>
5862
</TransactionProfileProvider>
5963
);
6064
}
65+
66+
const LayoutPageWithHiddenFooter = styled(Layout.Page)`
67+
~ footer {
68+
display: none;
69+
}
70+
`;

0 commit comments

Comments
 (0)