Skip to content

Commit ea97568

Browse files
nchauletnchaulet
committed
[Ingest Manager] Better display of Fleet requirements
1 parent d8823d8 commit ea97568

File tree

1 file changed

+169
-70
lines changed
  • x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/setup_page

1 file changed

+169
-70
lines changed

‎x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/setup_page/index.tsx‎

Lines changed: 169 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
* you may not use this file except in compliance with the Elastic License.
55
*/
66
import React, { useState } from 'react';
7+
import { i18n } from '@kbn/i18n';
78
import { FormattedMessage } from '@kbn/i18n/react';
89
import {
910
EuiPageBody,
@@ -14,11 +15,39 @@ import {
1415
EuiTitle,
1516
EuiSpacer,
1617
EuiIcon,
18+
EuiCallOut,
19+
EuiFlexItem,
20+
EuiFlexGroup,
21+
EuiCode,
22+
EuiCodeBlock,
23+
EuiLink,
1724
} from '@elastic/eui';
1825
import { useCore, sendPostFleetSetup } from '../../../hooks';
1926
import { WithoutHeaderLayout } from '../../../layouts';
2027
import { GetFleetStatusResponse } from '../../../types';
2128

29+
export const RequirementItem: React.FunctionComponent<{ isMissing: boolean }> = ({
30+
isMissing,
31+
children,
32+
}) => {
33+
return (
34+
<EuiFlexGroup gutterSize="s" alignItems="flexStart">
35+
<EuiFlexItem grow={false}>
36+
<EuiText>
37+
{isMissing ? (
38+
<EuiIcon type="crossInACircleFilled" color="danger" />
39+
) : (
40+
<EuiIcon type="checkInCircleFilled" color="success" />
41+
)}
42+
</EuiText>
43+
</EuiFlexItem>
44+
<EuiFlexItem grow={false}>
45+
<EuiText>{children}</EuiText>
46+
</EuiFlexItem>
47+
</EuiFlexGroup>
48+
);
49+
};
50+
2251
export const SetupPage: React.FunctionComponent<{
2352
refresh: () => Promise<void>;
2453
missingRequirements: GetFleetStatusResponse['missing_requirements'];
@@ -38,84 +67,154 @@ export const SetupPage: React.FunctionComponent<{
3867
}
3968
};
4069

41-
const content =
42-
missingRequirements.includes('tls_required') ||
43-
missingRequirements.includes('api_keys') ||
44-
missingRequirements.includes('encrypted_saved_object_encryption_key_required') ? (
45-
<>
46-
<EuiSpacer size="m" />
47-
<EuiIcon type="lock" color="subdued" size="xl" />
48-
<EuiSpacer size="m" />
49-
<EuiTitle size="l">
50-
<h2>
70+
if (
71+
!missingRequirements.includes('tls_required') &&
72+
!missingRequirements.includes('api_keys') &&
73+
!missingRequirements.includes('encrypted_saved_object_encryption_key_required')
74+
) {
75+
return (
76+
<WithoutHeaderLayout>
77+
<EuiPageBody restrictWidth={548}>
78+
<EuiPageContent
79+
verticalPosition="center"
80+
horizontalPosition="center"
81+
className="eui-textCenter"
82+
paddingSize="l"
83+
>
84+
<EuiSpacer size="m" />
85+
<EuiIcon type="lock" color="subdued" size="xl" />
86+
<EuiSpacer size="m" />
87+
<EuiTitle size="l">
88+
<h2>
89+
<FormattedMessage
90+
id="xpack.ingestManager.setupPage.enableTitle"
91+
defaultMessage="Enable Fleet"
92+
/>
93+
</h2>
94+
</EuiTitle>
95+
<EuiSpacer size="xl" />
96+
<EuiText color="subdued">
97+
<FormattedMessage
98+
id="xpack.ingestManager.setupPage.enableText"
99+
defaultMessage="In order to use Fleet, you must create an Elastic user. This user can create API keys
100+
and write to logs-* and metrics-*."
101+
/>
102+
</EuiText>
103+
<EuiSpacer size="l" />
104+
<EuiForm>
105+
<form onSubmit={onSubmit}>
106+
<EuiButton fill isLoading={isFormLoading} type="submit">
107+
<FormattedMessage
108+
id="xpack.ingestManager.setupPage.enableFleet"
109+
defaultMessage="Create user and enable Fleet"
110+
/>
111+
</EuiButton>
112+
</form>
113+
</EuiForm>
114+
<EuiSpacer size="m" />
115+
</EuiPageContent>
116+
</EuiPageBody>
117+
</WithoutHeaderLayout>
118+
);
119+
}
120+
121+
return (
122+
<WithoutHeaderLayout>
123+
<EuiPageBody restrictWidth={820}>
124+
<EuiPageContent>
125+
<EuiCallOut
126+
title={i18n.translate('xpack.ingestManager.setupPage.missingRequirementsCalloutTitle', {
127+
defaultMessage: 'Missing security requirements',
128+
})}
129+
color="warning"
130+
iconType="alert"
131+
>
51132
<FormattedMessage
52-
id="xpack.ingestManager.setupPage.missingRequirementsTitle"
53-
defaultMessage="Missing requirements"
133+
id="xpack.ingestManager.setupPage.missingRequirementsCalloutDescription"
134+
defaultMessage="In order to use Fleet, you must enable the following Elasticsearch and Kibana security features."
54135
/>
55-
</h2>
56-
</EuiTitle>
57-
<EuiSpacer size="xl" />
58-
<EuiText color="subdued" textAlign={'left'}>
136+
</EuiCallOut>
137+
<EuiSpacer size="m" />
59138
<FormattedMessage
60-
id="xpack.ingestManager.setupPage.missingRequirementsDescription"
61-
defaultMessage="To use Fleet, you must enable the following features:
62-
{space}- Enable Elasticsearch API keys.
63-
{space}- Enable TLS to secure the communication between Agents and Kibana.
64-
{space}- Set the encryption key for encrypted saved objects.
65-
"
66-
values={{
67-
space: <EuiSpacer size="m" />,
68-
}}
139+
id="xpack.ingestManager.setupPage.missingRequirementsElasticsearchTitle"
140+
defaultMessage="In your Elasticsearch configuration, enable:"
69141
/>
70-
</EuiText>
71-
<EuiSpacer size="l" />
72-
</>
73-
) : (
74-
<>
75-
<EuiSpacer size="m" />
76-
<EuiIcon type="lock" color="subdued" size="xl" />
77-
<EuiSpacer size="m" />
78-
<EuiTitle size="l">
79-
<h2>
142+
<EuiSpacer size="l" />
143+
<RequirementItem isMissing={false}>
144+
<FormattedMessage
145+
id="xpack.ingestManager.setupPage.elasticsearchSecurityFlagText"
146+
defaultMessage="Elasticsearch security. Set {securityFlag} to {true} ."
147+
values={{
148+
securityFlag: <EuiCode>xpack.security.enabled</EuiCode>,
149+
true: <EuiCode>true</EuiCode>,
150+
}}
151+
/>
152+
</RequirementItem>
153+
<EuiSpacer size="s" />
154+
<RequirementItem isMissing={missingRequirements.includes('api_keys')}>
80155
<FormattedMessage
81-
id="xpack.ingestManager.setupPage.enableTitle"
82-
defaultMessage="Enable Fleet"
156+
id="xpack.ingestManager.setupPage.elasticsearchApiKeyFlagText"
157+
defaultMessage="API key service. Set {apiKeyFlag} to {true} ."
158+
values={{
159+
apiKeyFlag: <EuiCode>xpack.security.authc.api_key.enabled</EuiCode>,
160+
true: <EuiCode>true</EuiCode>,
161+
}}
83162
/>
84-
</h2>
85-
</EuiTitle>
86-
<EuiSpacer size="xl" />
87-
<EuiText color="subdued">
163+
</RequirementItem>
164+
<EuiSpacer size="m" />
165+
<EuiCodeBlock isCopyable={true}>
166+
{`xpack.security.enabled: true
167+
xpack.security.authc.api_key.enabled: true`}
168+
</EuiCodeBlock>
169+
<EuiSpacer size="l" />
88170
<FormattedMessage
89-
id="xpack.ingestManager.setupPage.enableText"
90-
defaultMessage="In order to use Fleet, you must create an Elastic user. This user can create API keys
91-
and write to logs-* and metrics-*."
171+
id="xpack.ingestManager.setupPage.missingRequirementsKibanaTitle"
172+
defaultMessage="In your Kibana configuration, enable:"
173+
/>
174+
<EuiSpacer size="l" />
175+
<RequirementItem isMissing={missingRequirements.includes('tls_required')}>
176+
<FormattedMessage
177+
id="xpack.ingestManager.setupPage.tlsFlagText"
178+
defaultMessage="Kibana security. Set. Set {securityFlag} to {true}. For development purposes, you can disable TLS by setting {tlsFlag} to {true} as an unsafe alternative."
179+
values={{
180+
securityFlag: <EuiCode>xpack.security.enabled</EuiCode>,
181+
tlsFlag: <EuiCode>xpack.ingestManager.fleet.tlsCheckDisabled</EuiCode>,
182+
true: <EuiCode>true</EuiCode>,
183+
}}
184+
/>
185+
</RequirementItem>
186+
<EuiSpacer size="m" />
187+
<RequirementItem
188+
isMissing={missingRequirements.includes(
189+
'encrypted_saved_object_encryption_key_required'
190+
)}
191+
>
192+
<FormattedMessage
193+
id="xpack.ingestManager.setupPage.encryptionKeyFlagText"
194+
defaultMessage="Encryption key. Set {keyFlag} to use a secret key."
195+
values={{
196+
keyFlag: <EuiCode>xpack.reporting.encryptionKey</EuiCode>,
197+
}}
198+
/>
199+
</RequirementItem>
200+
<EuiSpacer size="l" />
201+
<FormattedMessage
202+
id="xpack.ingestManager.setupPage.gettingStartedText"
203+
defaultMessage="For more information, read our {link}."
204+
values={{
205+
link: (
206+
<EuiLink
207+
href="https://www.elastic.co/guide/en/ingest-management/current/index.html"
208+
target="_blank"
209+
>
210+
<FormattedMessage
211+
id="xpack.ingestManager.setupPage.gettingStartedLink"
212+
defaultMessage="Getting Started"
213+
/>
214+
</EuiLink>
215+
),
216+
}}
92217
/>
93-
</EuiText>
94-
<EuiSpacer size="l" />
95-
<EuiForm>
96-
<form onSubmit={onSubmit}>
97-
<EuiButton fill isLoading={isFormLoading} type="submit">
98-
<FormattedMessage
99-
id="xpack.ingestManager.setupPage.enableFleet"
100-
defaultMessage="Create user and enable Fleet"
101-
/>
102-
</EuiButton>
103-
</form>
104-
</EuiForm>
105-
<EuiSpacer size="m" />
106-
</>
107-
);
108-
109-
return (
110-
<WithoutHeaderLayout>
111-
<EuiPageBody restrictWidth={548}>
112-
<EuiPageContent
113-
verticalPosition="center"
114-
horizontalPosition="center"
115-
className="eui-textCenter"
116-
paddingSize="l"
117-
>
118-
{content}
119218
</EuiPageContent>
120219
</EuiPageBody>
121220
</WithoutHeaderLayout>

0 commit comments

Comments
 (0)