Skip to content

Commit 2f72c72

Browse files
sorenlouvsorenlouv
committed
Add tabs to settings page
1 parent 1e3f916 commit 2f72c72

17 files changed

Lines changed: 267 additions & 310 deletions

File tree

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

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -71,10 +71,7 @@ describe('renderApp', () => {
7171
const pluginsStart = ({
7272
observability: {
7373
navigation: {
74-
registerSections: () => jest.fn(),
75-
PageTemplate: ({ children }: { children: React.ReactNode }) => (
76-
<div>hello worlds {children}</div>
77-
),
74+
PageTemplate: () => {},
7875
},
7976
},
8077
triggersActionsUi: {

‎x-pack/plugins/apm/public/components/app/Settings/AgentConfigurations/AgentConfigurationCreateEdit/ServicePage/ServicePage.tsx‎

Lines changed: 1 addition & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@
66
*/
77

88
import {
9-
EuiTitle,
109
EuiSpacer,
1110
EuiPanel,
1211
EuiFlexGroup,
@@ -100,17 +99,7 @@ export function ServicePage({ newConfig, setNewConfig, onClickNext }: Props) {
10099
);
101100

102101
return (
103-
<EuiPanel paddingSize="m">
104-
<EuiTitle size="xs">
105-
<h3>
106-
{i18n.translate('xpack.apm.agentConfig.servicePage.title', {
107-
defaultMessage: 'Choose service',
108-
})}
109-
</h3>
110-
</EuiTitle>
111-
112-
<EuiSpacer size="m" />
113-
102+
<EuiPanel hasShadow={false} paddingSize="none">
114103
{/* Service name options */}
115104
<FormRowSelect
116105
title={i18n.translate(

‎x-pack/plugins/apm/public/components/app/Settings/AgentConfigurations/AgentConfigurationCreateEdit/SettingsPage/SettingsPage.tsx‎

Lines changed: 4 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import {
2020
EuiStat,
2121
EuiText,
2222
EuiTitle,
23+
EuiHorizontalRule,
2324
} from '@elastic/eui';
2425
import { i18n } from '@kbn/i18n';
2526
import React, { useMemo, useState } from 'react';
@@ -136,17 +137,7 @@ export function SettingsPage({
136137
}}
137138
>
138139
{/* Selected Service panel */}
139-
<EuiPanel paddingSize="m">
140-
<EuiTitle size="s">
141-
<h3>
142-
{i18n.translate('xpack.apm.agentConfig.chooseService.title', {
143-
defaultMessage: 'Choose service',
144-
})}
145-
</h3>
146-
</EuiTitle>
147-
148-
<EuiSpacer size="m" />
149-
140+
<EuiPanel hasShadow={false} paddingSize="none">
150141
<EuiFlexGroup>
151142
<EuiFlexItem>
152143
<EuiStat
@@ -187,10 +178,10 @@ export function SettingsPage({
187178
</EuiFlexGroup>
188179
</EuiPanel>
189180

190-
<EuiSpacer size="m" />
181+
<EuiHorizontalRule />
191182

192183
{/* Settings panel */}
193-
<EuiPanel paddingSize="m">
184+
<EuiPanel hasShadow={false} paddingSize="none">
194185
<EuiTitle size="s">
195186
<h3>
196187
{i18n.translate('xpack.apm.agentConfig.settings.title', {

‎x-pack/plugins/apm/public/components/app/Settings/AgentConfigurations/AgentConfigurationCreateEdit/index.tsx‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,15 @@ export function AgentConfigurationCreateEdit({
109109

110110
return (
111111
<>
112-
<EuiTitle>
112+
<EuiText color="subdued">
113+
{i18n.translate('xpack.apm.agentConfig.newConfig.description', {
114+
defaultMessage: `Fine-tune your agent configuration from within the APM app. Changes are automatically propagated to your APM agents, so there’s no need to redeploy.`,
115+
})}
116+
</EuiText>
117+
118+
<EuiSpacer size="m" />
119+
120+
<EuiTitle size="s">
113121
<h2>
114122
{isEditMode
115123
? i18n.translate('xpack.apm.agentConfig.editConfigTitle', {
@@ -121,12 +129,6 @@ export function AgentConfigurationCreateEdit({
121129
</h2>
122130
</EuiTitle>
123131

124-
<EuiText size="s">
125-
{i18n.translate('xpack.apm.agentConfig.newConfig.description', {
126-
defaultMessage: `Fine-tune your agent configuration from within the APM app. Changes are automatically propagated to your APM agents, so there’s no need to redeploy.`,
127-
})}
128-
</EuiText>
129-
130132
<EuiSpacer size="m" />
131133

132134
{pageStep === 'choose-service-step' && (

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

Lines changed: 22 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ import {
1010
EuiButton,
1111
EuiFlexGroup,
1212
EuiFlexItem,
13-
EuiPanel,
1413
EuiSpacer,
1514
EuiTitle,
1615
EuiText,
@@ -42,44 +41,36 @@ export function AgentConfigurations() {
4241

4342
return (
4443
<>
45-
<EuiTitle>
46-
<h2>
47-
{i18n.translate('xpack.apm.agentConfig.titleText', {
48-
defaultMessage: 'Agent central configuration',
49-
})}
50-
</h2>
51-
</EuiTitle>
52-
<EuiSpacer size="s" />
5344
<EuiText color="subdued">
5445
{i18n.translate('xpack.apm.settings.agentConfig.descriptionText', {
5546
defaultMessage: `Fine-tune your agent configuration from within the APM app. Changes are automatically propagated to your APM agents, so there’s no need to redeploy.`,
5647
})}
5748
</EuiText>
58-
<EuiSpacer size="l" />
59-
<EuiPanel>
60-
<EuiFlexGroup alignItems="center">
61-
<EuiFlexItem grow={false}>
62-
<EuiTitle size="s">
63-
<h2>
64-
{i18n.translate(
65-
'xpack.apm.agentConfig.configurationsPanelTitle',
66-
{ defaultMessage: 'Configurations' }
67-
)}
68-
</h2>
69-
</EuiTitle>
70-
</EuiFlexItem>
7149

72-
{hasConfigurations ? <CreateConfigurationButton /> : null}
73-
</EuiFlexGroup>
50+
<EuiSpacer size="m" />
7451

75-
<EuiSpacer size="m" />
52+
<EuiFlexGroup alignItems="center">
53+
<EuiFlexItem grow={false}>
54+
<EuiTitle size="s">
55+
<h2>
56+
{i18n.translate(
57+
'xpack.apm.agentConfig.configurationsPanelTitle',
58+
{ defaultMessage: 'Configurations' }
59+
)}
60+
</h2>
61+
</EuiTitle>
62+
</EuiFlexItem>
63+
64+
{hasConfigurations ? <CreateConfigurationButton /> : null}
65+
</EuiFlexGroup>
66+
67+
<EuiSpacer size="m" />
7668

77-
<AgentConfigurationList
78-
status={status}
79-
configurations={data.configurations}
80-
refetch={refetch}
81-
/>
82-
</EuiPanel>
69+
<AgentConfigurationList
70+
status={status}
71+
configurations={data.configurations}
72+
refetch={refetch}
73+
/>
8374
</>
8475
);
8576
}

‎x-pack/plugins/apm/public/components/app/Settings/ApmIndices/index.test.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ describe('ApmIndices', () => {
2626

2727
expect(getByText('Indices')).toMatchInlineSnapshot(`
2828
<h2
29-
class="euiTitle euiTitle--medium"
29+
class="euiTitle euiTitle--small"
3030
>
3131
Indices
3232
</h2>

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

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -176,21 +176,25 @@ export function ApmIndices() {
176176

177177
return (
178178
<>
179-
<EuiTitle>
179+
<EuiText color="subdued">
180+
{i18n.translate('xpack.apm.settings.apmIndices.description', {
181+
defaultMessage: `The APM UI uses index patterns to query your APM indices. If you've customized the index names that APM Server writes events to, you may need to update these patterns for the APM UI to work. Settings here take precedence over those set in kibana.yml.`,
182+
})}
183+
</EuiText>
184+
185+
<EuiSpacer size="m" />
186+
187+
<EuiTitle size="s">
180188
<h2>
181189
{i18n.translate('xpack.apm.settings.apmIndices.title', {
182190
defaultMessage: 'Indices',
183191
})}
184192
</h2>
185193
</EuiTitle>
186-
<EuiSpacer size="s" />
187-
<EuiText color="subdued">
188-
{i18n.translate('xpack.apm.settings.apmIndices.description', {
189-
defaultMessage: `The APM UI uses index patterns to query your APM indices. If you've customized the index names that APM Server writes events to, you may need to update these patterns for the APM UI to work. Settings here take precedence over those set in kibana.yml.`,
190-
})}
191-
</EuiText>
192-
<EuiSpacer size="l" />
193-
<EuiPanel>
194+
195+
<EuiSpacer size="m" />
196+
197+
<EuiPanel hasShadow={false} paddingSize="none">
194198
<EuiFlexGroup alignItems="center">
195199
<EuiFlexItem grow={false}>
196200
<EuiForm>

‎x-pack/plugins/apm/public/components/app/Settings/CustomizeUI/CustomLink/index.tsx‎

Lines changed: 30 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -83,49 +83,40 @@ export function CustomLinkOverview() {
8383
}}
8484
/>
8585
)}
86-
<EuiPanel>
87-
<EuiFlexGroup gutterSize="none" alignItems="center">
88-
<EuiFlexItem grow={false}>
89-
<EuiFlexGroup alignItems="center" gutterSize="none">
86+
87+
<EuiText color="subdued">
88+
{i18n.translate('xpack.apm.settings.customizeUI.customLink.info', {
89+
defaultMessage:
90+
'These links will be shown in the Actions context menu in selected areas of the app, e.g. by the transactions detail.',
91+
})}
92+
</EuiText>
93+
94+
<EuiSpacer size="m" />
95+
96+
<EuiFlexGroup alignItems="center">
97+
<EuiFlexItem grow={false}>
98+
<EuiTitle size="s">
99+
<h2>
100+
{i18n.translate('xpack.apm.settings.customizeUI.customLink', {
101+
defaultMessage: 'Custom Links',
102+
})}
103+
</h2>
104+
</EuiTitle>
105+
</EuiFlexItem>
106+
{hasValidLicense && !showEmptyPrompt && (
107+
<EuiFlexItem>
108+
<EuiFlexGroup alignItems="center" justifyContent="flexEnd">
90109
<EuiFlexItem grow={false}>
91-
<EuiTitle size="s">
92-
<EuiFlexGroup
93-
alignItems="center"
94-
gutterSize="none"
95-
responsive={false}
96-
>
97-
<EuiFlexItem grow={false}>
98-
<h2>
99-
{i18n.translate(
100-
'xpack.apm.settings.customizeUI.customLink',
101-
{
102-
defaultMessage: 'Custom Links',
103-
}
104-
)}
105-
</h2>
106-
</EuiFlexItem>
107-
</EuiFlexGroup>
108-
</EuiTitle>
110+
<CreateCustomLinkButton onClick={onCreateCustomLinkClick} />
109111
</EuiFlexItem>
110112
</EuiFlexGroup>
111113
</EuiFlexItem>
112-
{hasValidLicense && !showEmptyPrompt && (
113-
<EuiFlexItem>
114-
<EuiFlexGroup alignItems="center" justifyContent="flexEnd">
115-
<EuiFlexItem grow={false}>
116-
<CreateCustomLinkButton onClick={onCreateCustomLinkClick} />
117-
</EuiFlexItem>
118-
</EuiFlexGroup>
119-
</EuiFlexItem>
120-
)}
121-
</EuiFlexGroup>
122-
<EuiSpacer size="xs" />
123-
<EuiText color="subdued" size="s">
124-
{i18n.translate('xpack.apm.settings.customizeUI.customLink.info', {
125-
defaultMessage:
126-
'These links will be shown in the Actions context menu in selected areas of the app, e.g. by the transactions detail.',
127-
})}
128-
</EuiText>
114+
)}
115+
</EuiFlexGroup>
116+
117+
<EuiSpacer size="m" />
118+
119+
<EuiPanel hasShadow={false} paddingSize="none">
129120
{hasValidLicense ? (
130121
showEmptyPrompt ? (
131122
<EmptyPrompt onCreateCustomLinkClick={onCreateCustomLinkClick} />

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

Lines changed: 1 addition & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -6,28 +6,8 @@
66
*/
77

88
import React from 'react';
9-
import { EuiTitle, EuiSpacer, EuiText } from '@elastic/eui';
10-
import { i18n } from '@kbn/i18n';
119
import { CustomLinkOverview } from './CustomLink';
1210

1311
export function CustomizeUI() {
14-
return (
15-
<>
16-
<EuiTitle>
17-
<h2>
18-
{i18n.translate('xpack.apm.settings.customizeApp.title', {
19-
defaultMessage: 'Customize app',
20-
})}
21-
</h2>
22-
</EuiTitle>
23-
<EuiSpacer size="s" />
24-
<EuiText color="subdued">
25-
{i18n.translate('xpack.apm.settings.customizeApp.description', {
26-
defaultMessage: `Extend the APM app experience with the following settings.`,
27-
})}
28-
</EuiText>
29-
<EuiSpacer size="l" />
30-
<CustomLinkOverview />
31-
</>
32-
);
12+
return <CustomLinkOverview />;
3313
}

‎x-pack/plugins/apm/public/components/app/Settings/anomaly_detection/add_environments.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -81,18 +81,18 @@ export function AddEnvironments({
8181

8282
const isLoading = status === FETCH_STATUS.LOADING;
8383
return (
84-
<EuiPanel>
85-
<EuiTitle>
84+
<EuiPanel hasShadow={false} paddingSize="none">
85+
<EuiTitle size="s">
8686
<h2>
8787
{i18n.translate(
8888
'xpack.apm.settings.anomalyDetection.addEnvironments.titleText',
89-
{
90-
defaultMessage: 'Select environments',
91-
}
89+
{ defaultMessage: 'Select environments' }
9290
)}
9391
</h2>
9492
</EuiTitle>
93+
9594
<EuiSpacer size="l" />
95+
9696
<EuiText>
9797
{i18n.translate(
9898
'xpack.apm.settings.anomalyDetection.addEnvironments.descriptionText',

0 commit comments

Comments
 (0)