Skip to content

Commit c80d770

Browse files
smithsmith
authored
APM header changes (#82870) (#83390)
- Make APM and UX headers size medium instead of large - Remove margin around APM main container - Make APM tabs condensed - Switch environment filter and date picker positions - Move search bar (kuery + date picker) below the tabs - Wrap pages in `EuiPage` components - Set a minimum width on the enironment selector so it doesn't collapse when loading - Don't show search bar on service map Fixes #81954.
1 parent 73685c7 commit c80d770

40 files changed

Lines changed: 927 additions & 815 deletions

File tree

‎x-pack/plugins/apm/public/application/index.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,11 +33,9 @@ import { ApmPluginSetupDeps } from '../plugin';
3333
import { createCallApmApi } from '../services/rest/createCallApmApi';
3434
import { createStaticIndexPattern } from '../services/rest/index_pattern';
3535
import { setHelpExtension } from '../setHelpExtension';
36-
import { px, units } from '../style/variables';
3736
import { setReadonlyBadge } from '../updateBadge';
3837

3938
const MainContainer = styled.div`
40-
padding: ${px(units.plus)};
4139
height: 100%;
4240
`;
4341

‎x-pack/plugins/apm/public/components/app/Correlations/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ export function Correlations() {
7575

7676
return (
7777
<>
78-
<EuiTitle size="m">
78+
<EuiTitle>
7979
<h2>Correlations</h2>
8080
</EuiTitle>
8181

‎x-pack/plugins/apm/public/components/app/ErrorGroupDetails/index.tsx‎

Lines changed: 58 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ import {
88
EuiBadge,
99
EuiFlexGroup,
1010
EuiFlexItem,
11+
EuiPage,
12+
EuiPageBody,
1113
EuiPanel,
1214
EuiSpacer,
1315
EuiText,
@@ -24,6 +26,7 @@ import { useUrlParams } from '../../../hooks/useUrlParams';
2426
import { callApmApi } from '../../../services/rest/createCallApmApi';
2527
import { fontFamilyCode, fontSizes, px, units } from '../../../style/variables';
2628
import { ApmHeader } from '../../shared/ApmHeader';
29+
import { SearchBar } from '../../shared/search_bar';
2730
import { DetailView } from './DetailView';
2831
import { ErrorDistribution } from './Distribution';
2932

@@ -120,7 +123,7 @@ export function ErrorGroupDetails({ location, match }: ErrorGroupDetailsProps) {
120123
errorGroupData.error?.error.exception?.[0].handled === false;
121124

122125
return (
123-
<div>
126+
<>
124127
<ApmHeader>
125128
<EuiFlexGroup alignItems="center">
126129
<EuiFlexItem grow={false}>
@@ -146,62 +149,67 @@ export function ErrorGroupDetails({ location, match }: ErrorGroupDetailsProps) {
146149
)}
147150
</EuiFlexGroup>
148151
</ApmHeader>
149-
150-
<EuiSpacer size="s" />
151-
152-
<EuiPanel>
153-
{showDetails && (
154-
<Titles>
155-
<EuiText>
156-
{logMessage && (
157-
<Fragment>
152+
<SearchBar />
153+
<EuiPage>
154+
<EuiPageBody>
155+
<EuiPanel>
156+
{showDetails && (
157+
<Titles>
158+
<EuiText>
159+
{logMessage && (
160+
<Fragment>
161+
<Label>
162+
{i18n.translate(
163+
'xpack.apm.errorGroupDetails.logMessageLabel',
164+
{
165+
defaultMessage: 'Log message',
166+
}
167+
)}
168+
</Label>
169+
<Message>{logMessage}</Message>
170+
</Fragment>
171+
)}
158172
<Label>
159173
{i18n.translate(
160-
'xpack.apm.errorGroupDetails.logMessageLabel',
174+
'xpack.apm.errorGroupDetails.exceptionMessageLabel',
161175
{
162-
defaultMessage: 'Log message',
176+
defaultMessage: 'Exception message',
163177
}
164178
)}
165179
</Label>
166-
<Message>{logMessage}</Message>
167-
</Fragment>
180+
<Message>{excMessage || NOT_AVAILABLE_LABEL}</Message>
181+
<Label>
182+
{i18n.translate(
183+
'xpack.apm.errorGroupDetails.culpritLabel',
184+
{
185+
defaultMessage: 'Culprit',
186+
}
187+
)}
188+
</Label>
189+
<Culprit>{culprit || NOT_AVAILABLE_LABEL}</Culprit>
190+
</EuiText>
191+
</Titles>
192+
)}
193+
<ErrorDistribution
194+
distribution={errorDistributionData}
195+
title={i18n.translate(
196+
'xpack.apm.errorGroupDetails.occurrencesChartLabel',
197+
{
198+
defaultMessage: 'Occurrences',
199+
}
168200
)}
169-
<Label>
170-
{i18n.translate(
171-
'xpack.apm.errorGroupDetails.exceptionMessageLabel',
172-
{
173-
defaultMessage: 'Exception message',
174-
}
175-
)}
176-
</Label>
177-
<Message>{excMessage || NOT_AVAILABLE_LABEL}</Message>
178-
<Label>
179-
{i18n.translate('xpack.apm.errorGroupDetails.culpritLabel', {
180-
defaultMessage: 'Culprit',
181-
})}
182-
</Label>
183-
<Culprit>{culprit || NOT_AVAILABLE_LABEL}</Culprit>
184-
</EuiText>
185-
</Titles>
186-
)}
187-
<ErrorDistribution
188-
distribution={errorDistributionData}
189-
title={i18n.translate(
190-
'xpack.apm.errorGroupDetails.occurrencesChartLabel',
191-
{
192-
defaultMessage: 'Occurrences',
193-
}
201+
/>
202+
</EuiPanel>
203+
<EuiSpacer size="s" />
204+
{showDetails && (
205+
<DetailView
206+
errorGroup={errorGroupData}
207+
urlParams={urlParams}
208+
location={location}
209+
/>
194210
)}
195-
/>
196-
</EuiPanel>
197-
<EuiSpacer size="s" />
198-
{showDetails && (
199-
<DetailView
200-
errorGroup={errorGroupData}
201-
urlParams={urlParams}
202-
location={location}
203-
/>
204-
)}
205-
</div>
211+
</EuiPageBody>
212+
</EuiPage>
213+
</>
206214
);
207215
}

‎x-pack/plugins/apm/public/components/app/ErrorGroupOverview/index.tsx‎

Lines changed: 35 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
import {
88
EuiFlexGroup,
99
EuiFlexItem,
10+
EuiPage,
1011
EuiPanel,
1112
EuiSpacer,
1213
EuiTitle,
@@ -19,6 +20,7 @@ import { useFetcher } from '../../../hooks/useFetcher';
1920
import { useUrlParams } from '../../../hooks/useUrlParams';
2021
import { callApmApi } from '../../../services/rest/createCallApmApi';
2122
import { LocalUIFilters } from '../../shared/LocalUIFilters';
23+
import { SearchBar } from '../../shared/search_bar';
2224
import { ErrorDistribution } from '../ErrorGroupDetails/Distribution';
2325
import { ErrorGroupList } from './List';
2426

@@ -95,39 +97,41 @@ function ErrorGroupOverview({ serviceName }: ErrorGroupOverviewProps) {
9597

9698
return (
9799
<>
98-
<EuiSpacer />
99-
<EuiFlexGroup>
100-
<EuiFlexItem grow={1}>
101-
<LocalUIFilters {...localUIFiltersConfig} />
102-
</EuiFlexItem>
103-
<EuiFlexItem grow={7}>
104-
<EuiPanel>
105-
<ErrorDistribution
106-
distribution={errorDistributionData}
107-
title={i18n.translate(
108-
'xpack.apm.serviceDetails.metrics.errorOccurrencesChartTitle',
109-
{
110-
defaultMessage: 'Error occurrences',
111-
}
112-
)}
113-
/>
114-
</EuiPanel>
115-
116-
<EuiSpacer size="s" />
117-
118-
<EuiPanel>
119-
<EuiTitle size="xs">
120-
<h3>Errors</h3>
121-
</EuiTitle>
100+
<SearchBar />
101+
<EuiPage>
102+
<EuiFlexGroup>
103+
<EuiFlexItem grow={1}>
104+
<LocalUIFilters {...localUIFiltersConfig} />
105+
</EuiFlexItem>
106+
<EuiFlexItem grow={7}>
107+
<EuiPanel>
108+
<ErrorDistribution
109+
distribution={errorDistributionData}
110+
title={i18n.translate(
111+
'xpack.apm.serviceDetails.metrics.errorOccurrencesChartTitle',
112+
{
113+
defaultMessage: 'Error occurrences',
114+
}
115+
)}
116+
/>
117+
</EuiPanel>
118+
122119
<EuiSpacer size="s" />
123120

124-
<ErrorGroupList
125-
items={errorGroupListData}
126-
serviceName={serviceName}
127-
/>
128-
</EuiPanel>
129-
</EuiFlexItem>
130-
</EuiFlexGroup>
121+
<EuiPanel>
122+
<EuiTitle size="xs">
123+
<h3>Errors</h3>
124+
</EuiTitle>
125+
<EuiSpacer size="s" />
126+
127+
<ErrorGroupList
128+
items={errorGroupListData}
129+
serviceName={serviceName}
130+
/>
131+
</EuiPanel>
132+
</EuiFlexItem>
133+
</EuiFlexGroup>
134+
</EuiPage>
131135
</>
132136
);
133137
}

‎x-pack/plugins/apm/public/components/app/Home/index.tsx‎

Lines changed: 49 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -4,79 +4,76 @@
44
* you may not use this file except in compliance with the Elastic License.
55
*/
66

7-
import { EuiTabs, EuiTitle } from '@elastic/eui';
7+
import { EuiTab, EuiTitle } from '@elastic/eui';
88
import { i18n } from '@kbn/i18n';
9-
import React from 'react';
9+
import React, { ComponentType } from 'react';
1010
import { $ElementType } from 'utility-types';
1111
import { ApmHeader } from '../../shared/ApmHeader';
12-
import { EuiTabLink } from '../../shared/EuiTabLink';
13-
import { ServiceMapLink } from '../../shared/Links/apm/ServiceMapLink';
14-
import { ServiceInventoryLink } from '../../shared/Links/apm/service_inventory_link';
15-
import { TraceOverviewLink } from '../../shared/Links/apm/TraceOverviewLink';
12+
import { useServiceMapHref } from '../../shared/Links/apm/ServiceMapLink';
13+
import { useServiceInventoryHref } from '../../shared/Links/apm/service_inventory_link';
14+
import { useTraceOverviewHref } from '../../shared/Links/apm/TraceOverviewLink';
15+
import { MainTabs } from '../../shared/main_tabs';
1616
import { ServiceMap } from '../ServiceMap';
1717
import { ServiceInventory } from '../service_inventory';
1818
import { TraceOverview } from '../TraceOverview';
1919

20-
const homeTabs = [
21-
{
22-
link: (
23-
<ServiceInventoryLink>
24-
{i18n.translate('xpack.apm.home.servicesTabLabel', {
25-
defaultMessage: 'Services',
26-
})}
27-
</ServiceInventoryLink>
28-
),
29-
render: () => <ServiceInventory />,
30-
name: 'services',
31-
},
32-
{
33-
link: (
34-
<TraceOverviewLink>
35-
{i18n.translate('xpack.apm.home.tracesTabLabel', {
36-
defaultMessage: 'Traces',
37-
})}
38-
</TraceOverviewLink>
39-
),
40-
render: () => <TraceOverview />,
41-
name: 'traces',
42-
},
43-
{
44-
link: (
45-
<ServiceMapLink>
46-
{i18n.translate('xpack.apm.home.serviceMapTabLabel', {
47-
defaultMessage: 'Service Map',
48-
})}
49-
</ServiceMapLink>
50-
),
51-
render: () => <ServiceMap />,
52-
name: 'service-map',
53-
},
54-
];
20+
interface Tab {
21+
key: string;
22+
href: string;
23+
text: string;
24+
Component: ComponentType;
25+
}
5526

5627
interface Props {
5728
tab: 'traces' | 'services' | 'service-map';
5829
}
5930

6031
export function Home({ tab }: Props) {
32+
const homeTabs: Tab[] = [
33+
{
34+
key: 'services',
35+
href: useServiceInventoryHref(),
36+
text: i18n.translate('xpack.apm.home.servicesTabLabel', {
37+
defaultMessage: 'Services',
38+
}),
39+
Component: ServiceInventory,
40+
},
41+
{
42+
key: 'traces',
43+
href: useTraceOverviewHref(),
44+
text: i18n.translate('xpack.apm.home.tracesTabLabel', {
45+
defaultMessage: 'Traces',
46+
}),
47+
Component: TraceOverview,
48+
},
49+
{
50+
key: 'service-map',
51+
href: useServiceMapHref(),
52+
text: i18n.translate('xpack.apm.home.serviceMapTabLabel', {
53+
defaultMessage: 'Service Map',
54+
}),
55+
Component: ServiceMap,
56+
},
57+
];
6158
const selectedTab = homeTabs.find(
62-
(homeTab) => homeTab.name === tab
59+
(homeTab) => homeTab.key === tab
6360
) as $ElementType<typeof homeTabs, number>;
6461

6562
return (
66-
<div>
63+
<>
6764
<ApmHeader>
68-
<EuiTitle size="l">
65+
<EuiTitle>
6966
<h1>APM</h1>
7067
</EuiTitle>
7168
</ApmHeader>
72-
<EuiTabs>
73-
{homeTabs.map((homeTab) => (
74-
<EuiTabLink isSelected={homeTab === selectedTab} key={homeTab.name}>
75-
{homeTab.link}
76-
</EuiTabLink>
69+
<MainTabs>
70+
{homeTabs.map(({ href, key, text }) => (
71+
<EuiTab href={href} isSelected={key === selectedTab.key} key={key}>
72+
{text}
73+
</EuiTab>
7774
))}
78-
</EuiTabs>
79-
{selectedTab.render()}
80-
</div>
75+
</MainTabs>
76+
<selectedTab.Component />
77+
</>
8178
);
8279
}

‎x-pack/plugins/apm/public/components/app/RumDashboard/RumHome.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ export function RumHome() {
2121
<CsmSharedContextProvider>
2222
<EuiFlexGroup>
2323
<EuiFlexItem>
24-
<EuiTitle size="l">
24+
<EuiTitle>
2525
<h1 className="eui-textNoWrap">{UX_LABEL}</h1>
2626
</EuiTitle>
2727
</EuiFlexItem>

0 commit comments

Comments
 (0)