44 * you may not use this file except in compliance with the Elastic License.
55 */
66import React , { useState } from 'react' ;
7+ import { i18n } from '@kbn/i18n' ;
78import { FormattedMessage } from '@kbn/i18n/react' ;
89import {
910 EuiPageBody ,
@@ -14,20 +15,47 @@ import {
1415 EuiTitle ,
1516 EuiSpacer ,
1617 EuiIcon ,
18+ EuiCallOut ,
19+ EuiFlexItem ,
20+ EuiFlexGroup ,
21+ EuiCode ,
22+ EuiCodeBlock ,
23+ EuiLink ,
1724} from '@elastic/eui' ;
1825import { useCore , sendPostFleetSetup } from '../../../hooks' ;
1926import { WithoutHeaderLayout } from '../../../layouts' ;
2027import { 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+
2251export const SetupPage : React . FunctionComponent < {
2352 refresh : ( ) => Promise < void > ;
2453 missingRequirements : GetFleetStatusResponse [ 'missing_requirements' ] ;
2554} > = ( { refresh, missingRequirements } ) => {
2655 const [ isFormLoading , setIsFormLoading ] = useState < boolean > ( false ) ;
2756 const core = useCore ( ) ;
2857
29- const onSubmit = async ( e : React . FormEvent < HTMLFormElement > ) => {
30- e . preventDefault ( ) ;
58+ const onSubmit = async ( ) => {
3159 setIsFormLoading ( true ) ;
3260 try {
3361 await sendPostFleetSetup ( { forceRecreate : true } ) ;
@@ -38,84 +66,218 @@ export const SetupPage: React.FunctionComponent<{
3866 }
3967 } ;
4068
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 >
69+ if (
70+ ! missingRequirements . includes ( 'tls_required' ) &&
71+ ! missingRequirements . includes ( 'api_keys' ) &&
72+ ! missingRequirements . includes ( 'encrypted_saved_object_encryption_key_required' )
73+ ) {
74+ return (
75+ < WithoutHeaderLayout >
76+ < EuiPageBody restrictWidth = { 548 } >
77+ < EuiPageContent
78+ verticalPosition = "center"
79+ horizontalPosition = "center"
80+ className = "eui-textCenter"
81+ paddingSize = "l"
82+ >
83+ < EuiSpacer size = "m" />
84+ < EuiIcon type = "lock" color = "subdued" size = "xl" />
85+ < EuiSpacer size = "m" />
86+ < EuiTitle size = "l" >
87+ < h2 >
88+ < FormattedMessage
89+ id = "xpack.ingestManager.setupPage.enableTitle"
90+ defaultMessage = "Enable Fleet"
91+ />
92+ </ h2 >
93+ </ EuiTitle >
94+ < EuiSpacer size = "xl" />
95+ < EuiText color = "subdued" >
96+ < FormattedMessage
97+ id = "xpack.ingestManager.setupPage.enableText"
98+ defaultMessage = "In order to use Fleet, you must create an Elastic user. This user can create API keys
99+ and write to logs-* and metrics-*."
100+ />
101+ </ EuiText >
102+ < EuiSpacer size = "l" />
103+ < EuiForm >
104+ < EuiButton onClick = { onSubmit } fill isLoading = { isFormLoading } type = "submit" >
105+ < FormattedMessage
106+ id = "xpack.ingestManager.setupPage.enableFleet"
107+ defaultMessage = "Create user and enable Fleet"
108+ />
109+ </ EuiButton >
110+ </ EuiForm >
111+ < EuiSpacer size = "m" />
112+ </ EuiPageContent >
113+ </ EuiPageBody >
114+ </ WithoutHeaderLayout >
115+ ) ;
116+ }
117+
118+ return (
119+ < WithoutHeaderLayout >
120+ < EuiPageBody restrictWidth = { 820 } >
121+ < EuiPageContent >
122+ < EuiCallOut
123+ title = { i18n . translate ( 'xpack.ingestManager.setupPage.missingRequirementsCalloutTitle' , {
124+ defaultMessage : 'Missing security requirements' ,
125+ } ) }
126+ color = "warning"
127+ iconType = "alert"
128+ >
51129 < FormattedMessage
52- id = "xpack.ingestManager.setupPage.missingRequirementsTitle "
53- defaultMessage = "Missing requirements "
130+ id = "xpack.ingestManager.setupPage.missingRequirementsCalloutDescription "
131+ defaultMessage = "In order to use Fleet, you must enable the following Elasticsearch and Kibana security features. "
54132 />
55- </ h2 >
56- </ EuiTitle >
57- < EuiSpacer size = "xl" />
58- < EuiText color = "subdued" textAlign = { 'left' } >
133+ </ EuiCallOut >
134+ < EuiSpacer size = "m" />
59135 < 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- } }
136+ id = "xpack.ingestManager.setupPage.missingRequirementsElasticsearchTitle"
137+ defaultMessage = "In your Elasticsearch configuration, enable:"
69138 />
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 >
139+ < EuiSpacer size = "l" />
140+ < RequirementItem isMissing = { false } >
141+ < FormattedMessage
142+ id = "xpack.ingestManager.setupPage.elasticsearchSecurityFlagText"
143+ defaultMessage = "{esSecurityLink}. Set {securityFlag} to {true} ."
144+ values = { {
145+ esSecurityLink : (
146+ < EuiLink
147+ href = "https://www.elastic.co/guide/en/elasticsearch/reference/current/configuring-security.html"
148+ target = "_blank"
149+ external
150+ >
151+ < FormattedMessage
152+ id = "xpack.ingestManager.setupPage.elasticsearchSecurityLink"
153+ defaultMessage = "Elasticsearch security"
154+ />
155+ </ EuiLink >
156+ ) ,
157+ securityFlag : < EuiCode > xpack.security.enabled</ EuiCode > ,
158+ true : < EuiCode > true</ EuiCode > ,
159+ } }
160+ />
161+ </ RequirementItem >
162+ < EuiSpacer size = "s" />
163+ < RequirementItem isMissing = { missingRequirements . includes ( 'api_keys' ) } >
80164 < FormattedMessage
81- id = "xpack.ingestManager.setupPage.enableTitle"
82- defaultMessage = "Enable Fleet"
165+ id = "xpack.ingestManager.setupPage.elasticsearchApiKeyFlagText"
166+ defaultMessage = "{apiKeyLink}. Set {apiKeyFlag} to {true} ."
167+ values = { {
168+ apiKeyFlag : < EuiCode > xpack.security.authc.api_key.enabled</ EuiCode > ,
169+ true : < EuiCode > true</ EuiCode > ,
170+ apiKeyLink : (
171+ < EuiLink
172+ href = "https://www.elastic.co/guide/en/elasticsearch/reference/current/security-settings.html#api-key-service-settings"
173+ target = "_blank"
174+ external
175+ >
176+ < FormattedMessage
177+ id = "xpack.ingestManager.setupPage.apiKeyServiceLink"
178+ defaultMessage = "API key service"
179+ />
180+ </ EuiLink >
181+ ) ,
182+ } }
83183 />
84- </ h2 >
85- </ EuiTitle >
86- < EuiSpacer size = "xl" />
87- < EuiText color = "subdued" >
184+ </ RequirementItem >
185+ < EuiSpacer size = "m" />
186+ < EuiCodeBlock isCopyable = { true } >
187+ { `xpack.security.enabled: true
188+ xpack.security.authc.api_key.enabled: true` }
189+ </ EuiCodeBlock >
190+ < EuiSpacer size = "l" />
88191 < 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-*."
192+ id = "xpack.ingestManager.setupPage.missingRequirementsKibanaTitle"
193+ defaultMessage = "In your Kibana configuration, enable:"
194+ />
195+ < EuiSpacer size = "l" />
196+ < RequirementItem isMissing = { missingRequirements . includes ( 'tls_required' ) } >
197+ < FormattedMessage
198+ id = "xpack.ingestManager.setupPage.tlsFlagText"
199+ defaultMessage = "{kibanaSecurityLink}. Set {securityFlag} to {true}. For development purposes, you can disable {tlsLink} by setting {tlsFlag} to {true} as an unsafe alternative."
200+ values = { {
201+ kibanaSecurityLink : (
202+ < EuiLink
203+ href = "https://www.elastic.co/guide/en/kibana/current/using-kibana-with-security.html"
204+ target = "_blank"
205+ external
206+ >
207+ < FormattedMessage
208+ id = "xpack.ingestManager.setupPage.kibanaSecurityLink"
209+ defaultMessage = "Kibana security"
210+ />
211+ </ EuiLink >
212+ ) ,
213+ securityFlag : < EuiCode > xpack.security.enabled</ EuiCode > ,
214+ tlsLink : (
215+ < EuiLink
216+ href = "https://www.elastic.co/guide/en/kibana/current/configuring-tls.html"
217+ target = "_blank"
218+ external
219+ >
220+ < FormattedMessage
221+ id = "xpack.ingestManager.setupPage.tlsLink"
222+ defaultMessage = "TLS"
223+ />
224+ </ EuiLink >
225+ ) ,
226+ tlsFlag : < EuiCode > xpack.ingestManager.fleet.tlsCheckDisabled</ EuiCode > ,
227+ true : < EuiCode > true</ EuiCode > ,
228+ } }
229+ />
230+ </ RequirementItem >
231+ < EuiSpacer size = "s" />
232+ < RequirementItem
233+ isMissing = { missingRequirements . includes (
234+ 'encrypted_saved_object_encryption_key_required'
235+ ) }
236+ >
237+ < FormattedMessage
238+ id = "xpack.ingestManager.setupPage.encryptionKeyFlagText"
239+ defaultMessage = "{encryptionKeyLink}. Set {keyFlag} to any alphanumeric value of at least 32 characters."
240+ values = { {
241+ encryptionKeyLink : (
242+ < EuiLink
243+ href = "https://www.elastic.co/guide/en/kibana/current/ingest-manager-settings-kb.html"
244+ target = "_blank"
245+ external
246+ >
247+ < FormattedMessage
248+ id = "xpack.ingestManager.setupPage.kibanaEncryptionLink"
249+ defaultMessage = "Kibana encryption key"
250+ />
251+ </ EuiLink >
252+ ) ,
253+ keyFlag : < EuiCode > xpack.encryptedSavedObjects.encryptionKey</ EuiCode > ,
254+ } }
255+ />
256+ </ RequirementItem >
257+ < EuiSpacer size = "m" />
258+ < EuiCodeBlock isCopyable = { true } >
259+ { `xpack.security.enabled: true
260+ xpack.encryptedSavedObjects.encryptionKey: "something_at_least_32_characters"` }
261+ </ EuiCodeBlock >
262+ < EuiSpacer size = "l" />
263+ < FormattedMessage
264+ id = "xpack.ingestManager.setupPage.gettingStartedText"
265+ defaultMessage = "For more information, read our {link} guide."
266+ values = { {
267+ link : (
268+ < EuiLink
269+ href = "https://www.elastic.co/guide/en/ingest-management/current/index.html"
270+ target = "_blank"
271+ external
272+ >
273+ < FormattedMessage
274+ id = "xpack.ingestManager.setupPage.gettingStartedLink"
275+ defaultMessage = "Getting Started"
276+ />
277+ </ EuiLink >
278+ ) ,
279+ } }
92280 />
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 }
119281 </ EuiPageContent >
120282 </ EuiPageBody >
121283 </ WithoutHeaderLayout >
0 commit comments