Skip to content

Commit 0bf822c

Browse files
ryan953ryan953
committed
ref(insights): Update the Session Health layout for Mobile & Web
1 parent fd5ca38 commit 0bf822c

File tree

1 file changed

+94
-63
lines changed

1 file changed

+94
-63
lines changed

‎static/app/views/insights/sessions/views/overview.tsx

+94-63
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, {Fragment, useState} from 'react';
1+
import {Fragment, useState} from 'react';
22
import styled from '@emotion/styled';
33

44
import * as Layout from 'sentry/components/layouts/thirds';
@@ -9,13 +9,14 @@ import {ModulePageProviders} from 'sentry/views/insights/common/components/modul
99
import {ModulesOnboardingPanel} from 'sentry/views/insights/common/components/modulesOnboarding';
1010
import {ToolRibbon} from 'sentry/views/insights/common/components/ribbon';
1111
import SubregionSelector from 'sentry/views/insights/common/views/spans/selectors/subregionSelector';
12-
import {BackendHeader} from 'sentry/views/insights/pages/backend/backendPageHeader';
13-
import {BACKEND_LANDING_SUB_PATH} from 'sentry/views/insights/pages/backend/settings';
1412
import {FrontendHeader} from 'sentry/views/insights/pages/frontend/frontendPageHeader';
1513
import {FRONTEND_LANDING_SUB_PATH} from 'sentry/views/insights/pages/frontend/settings';
1614
import {MobileHeader} from 'sentry/views/insights/pages/mobile/mobilePageHeader';
1715
import {MOBILE_LANDING_SUB_PATH} from 'sentry/views/insights/pages/mobile/settings';
18-
import {useDomainViewFilters} from 'sentry/views/insights/pages/useFilters';
16+
import {
17+
type DomainView,
18+
useDomainViewFilters,
19+
} from 'sentry/views/insights/pages/useFilters';
1920
import CrashFreeSessionsChart from 'sentry/views/insights/sessions/charts/crashFreeSessionsChart';
2021
import ErrorFreeSessionsChart from 'sentry/views/insights/sessions/charts/errorFreeSessionsChart';
2122
import ReleaseSessionCountChart from 'sentry/views/insights/sessions/charts/releaseSessionCountChart';
@@ -30,10 +31,6 @@ import useProjectHasSessions from 'sentry/views/insights/sessions/queries/usePro
3031
import {ModuleName} from 'sentry/views/insights/types';
3132

3233
export function SessionsOverview() {
33-
const headerProps = {
34-
module: ModuleName.SESSIONS,
35-
};
36-
3734
const {view = ''} = useDomainViewFilters();
3835

3936
const [filters, setFilters] = useState<string[]>(['']);
@@ -42,38 +39,9 @@ export function SessionsOverview() {
4239
const hasSessionData = useProjectHasSessions();
4340
const showOnboarding = !hasSessionData;
4441

45-
const SESSION_HEALTH_CHARTS = (
46-
<Fragment>
47-
{view === FRONTEND_LANDING_SUB_PATH ? (
48-
<ModuleLayout.Third>
49-
<ErrorFreeSessionsChart />
50-
</ModuleLayout.Third>
51-
) : view === MOBILE_LANDING_SUB_PATH ? (
52-
<ModuleLayout.Third>
53-
<CrashFreeSessionsChart />
54-
</ModuleLayout.Third>
55-
) : undefined}
56-
<ModuleLayout.Third>
57-
<SessionHealthCountChart view={view} />
58-
</ModuleLayout.Third>
59-
<ModuleLayout.Third>
60-
<UserHealthCountChart view={view} />
61-
</ModuleLayout.Third>
62-
<ModuleLayout.Third />
63-
<ModuleLayout.Third>
64-
<SessionHealthRateChart view={view} />
65-
</ModuleLayout.Third>
66-
<ModuleLayout.Third>
67-
<UserHealthRateChart view={view} />
68-
</ModuleLayout.Third>
69-
</Fragment>
70-
);
71-
7242
return (
73-
<React.Fragment>
74-
{view === FRONTEND_LANDING_SUB_PATH && <FrontendHeader {...headerProps} />}
75-
{view === BACKEND_LANDING_SUB_PATH && <BackendHeader {...headerProps} />}
76-
{view === MOBILE_LANDING_SUB_PATH && <MobileHeader {...headerProps} />}
43+
<Fragment>
44+
<ViewSpecificHeader view={view} />
7745
<Layout.Body>
7846
<Layout.Main fullWidth>
7947
<ModuleLayout.Layout>
@@ -93,37 +61,100 @@ export function SessionsOverview() {
9361
<ModulesOnboardingPanel moduleName={ModuleName.SESSIONS} />
9462
</ModuleLayout.Full>
9563
) : (
96-
<Fragment>
97-
{view === MOBILE_LANDING_SUB_PATH && (
98-
<Fragment>
99-
{SESSION_HEALTH_CHARTS}
100-
<ModuleLayout.Half>
101-
<ReleaseSessionCountChart />
102-
</ModuleLayout.Half>
103-
<ModuleLayout.Half>
104-
<ReleaseSessionPercentageChart />
105-
</ModuleLayout.Half>
106-
<ModuleLayout.Full>
107-
<FilterWrapper>
108-
<FilterReleaseDropdown
109-
filters={filters}
110-
setFilters={setFilters}
111-
/>
112-
</FilterWrapper>
113-
<ReleaseHealth filters={filters} />
114-
</ModuleLayout.Full>
115-
</Fragment>
116-
)}
117-
{view === FRONTEND_LANDING_SUB_PATH && SESSION_HEALTH_CHARTS}
118-
</Fragment>
64+
<ViewSpecificCharts view={view} filters={filters} setFilters={setFilters} />
11965
)}
12066
</ModuleLayout.Layout>
12167
</Layout.Main>
12268
</Layout.Body>
123-
</React.Fragment>
69+
</Fragment>
12470
);
12571
}
12672

73+
function ViewSpecificHeader({view}: {view: DomainView | ''}) {
74+
switch (view) {
75+
case FRONTEND_LANDING_SUB_PATH:
76+
return <FrontendHeader module={ModuleName.SESSIONS} />;
77+
case MOBILE_LANDING_SUB_PATH:
78+
return <MobileHeader module={ModuleName.SESSIONS} />;
79+
default:
80+
return null;
81+
}
82+
}
83+
84+
function ViewSpecificCharts({
85+
view,
86+
filters,
87+
setFilters,
88+
}: {
89+
filters: string[];
90+
setFilters: (filter: string[]) => void;
91+
view: DomainView | '';
92+
}) {
93+
switch (view) {
94+
case FRONTEND_LANDING_SUB_PATH:
95+
return (
96+
<Fragment>
97+
<ModuleLayout.Third>
98+
<ErrorFreeSessionsChart />
99+
</ModuleLayout.Third>
100+
<ModuleLayout.Third>
101+
<SessionHealthCountChart view={view} />
102+
</ModuleLayout.Third>
103+
<ModuleLayout.Third>
104+
<UserHealthCountChart view={view} />
105+
</ModuleLayout.Third>
106+
107+
<ModuleLayout.Third>Coming soon: New Issues over time</ModuleLayout.Third>
108+
<ModuleLayout.Third>
109+
<SessionHealthRateChart view={view} />
110+
</ModuleLayout.Third>
111+
<ModuleLayout.Third>
112+
<UserHealthRateChart view={view} />
113+
</ModuleLayout.Third>
114+
</Fragment>
115+
);
116+
case MOBILE_LANDING_SUB_PATH:
117+
return (
118+
<Fragment>
119+
<ModuleLayout.Third>
120+
<CrashFreeSessionsChart />
121+
</ModuleLayout.Third>
122+
<ModuleLayout.Third>Coming soon: New Issues over time</ModuleLayout.Third>
123+
<ModuleLayout.Third>Coming soon: New Issues Per release</ModuleLayout.Third>
124+
125+
<ModuleLayout.Third>
126+
<ReleaseSessionCountChart />
127+
</ModuleLayout.Third>
128+
<ModuleLayout.Third>
129+
<SessionHealthCountChart view={view} />
130+
</ModuleLayout.Third>
131+
<ModuleLayout.Third>
132+
<UserHealthCountChart view={view} />
133+
</ModuleLayout.Third>
134+
135+
<ModuleLayout.Third>
136+
<ReleaseSessionPercentageChart />
137+
</ModuleLayout.Third>
138+
<ModuleLayout.Third>
139+
<SessionHealthRateChart view={view} />
140+
</ModuleLayout.Third>
141+
<ModuleLayout.Third>
142+
<UserHealthRateChart view={view} />
143+
</ModuleLayout.Third>
144+
145+
<ModuleLayout.Full>
146+
<FilterWrapper>
147+
<FilterReleaseDropdown filters={filters} setFilters={setFilters} />
148+
</FilterWrapper>
149+
<ReleaseHealth filters={filters} />
150+
</ModuleLayout.Full>
151+
</Fragment>
152+
);
153+
default:
154+
return null;
155+
}
156+
}
157+
127158
function PageWithProviders() {
128159
return (
129160
<ModulePageProviders

0 commit comments

Comments
 (0)