Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Ingest Manager] Better display of Fleet requirements #71686

Merged
merged 5 commits into from
Jul 15, 2020
Merged

[Ingest Manager] Better display of Fleet requirements #71686

Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ea97568
[Ingest Manager] Better display of Fleet requirements
nchaulet Jul 14, 2020
ef4d0ec
Apply suggestions from code review
nchaulet Jul 14, 2020
2c28e46
Add missing links
nchaulet Jul 14, 2020
7a15efd
add external links
nchaulet Jul 14, 2020
a52bd1a
Fix translations
nchaulet Jul 14, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
239 changes: 169 additions & 70 deletions ...ins/ingest_manager/public/applications/ingest_manager/sections/fleet/setup_page/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
* you may not use this file except in compliance with the Elastic License.
*/
import React, { useState } from 'react';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
import {
EuiPageBody,
Expand All @@ -14,11 +15,39 @@ import {
EuiTitle,
EuiSpacer,
EuiIcon,
EuiCallOut,
EuiFlexItem,
EuiFlexGroup,
EuiCode,
EuiCodeBlock,
EuiLink,
} from '@elastic/eui';
import { useCore, sendPostFleetSetup } from '../../../hooks';
import { WithoutHeaderLayout } from '../../../layouts';
import { GetFleetStatusResponse } from '../../../types';

export const RequirementItem: React.FunctionComponent<{ isMissing: boolean }> = ({
isMissing,
children,
}) => {
return (
<EuiFlexGroup gutterSize="s" alignItems="flexStart">
<EuiFlexItem grow={false}>
<EuiText>
{isMissing ? (
<EuiIcon type="crossInACircleFilled" color="danger" />
nchaulet marked this conversation as resolved.
Show resolved Hide resolved
) : (
<EuiIcon type="checkInCircleFilled" color="success" />
)}
</EuiText>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiText>{children}</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
);
};

export const SetupPage: React.FunctionComponent<{
refresh: () => Promise<void>;
missingRequirements: GetFleetStatusResponse['missing_requirements'];
Expand All @@ -38,84 +67,154 @@ export const SetupPage: React.FunctionComponent<{
}
};

const content =
missingRequirements.includes('tls_required') ||
missingRequirements.includes('api_keys') ||
missingRequirements.includes('encrypted_saved_object_encryption_key_required') ? (
<>
<EuiSpacer size="m" />
<EuiIcon type="lock" color="subdued" size="xl" />
<EuiSpacer size="m" />
<EuiTitle size="l">
<h2>
if (
!missingRequirements.includes('tls_required') &&
!missingRequirements.includes('api_keys') &&
!missingRequirements.includes('encrypted_saved_object_encryption_key_required')
) {
return (
<WithoutHeaderLayout>
<EuiPageBody restrictWidth={548}>
<EuiPageContent
verticalPosition="center"
horizontalPosition="center"
className="eui-textCenter"
paddingSize="l"
>
<EuiSpacer size="m" />
<EuiIcon type="lock" color="subdued" size="xl" />
<EuiSpacer size="m" />
<EuiTitle size="l">
<h2>
<FormattedMessage
id="xpack.ingestManager.setupPage.enableTitle"
defaultMessage="Enable Fleet"
/>
</h2>
</EuiTitle>
<EuiSpacer size="xl" />
<EuiText color="subdued">
<FormattedMessage
id="xpack.ingestManager.setupPage.enableText"
defaultMessage="In order to use Fleet, you must create an Elastic user. This user can create API keys
and write to logs-* and metrics-*."
/>
</EuiText>
<EuiSpacer size="l" />
<EuiForm>
<form onSubmit={onSubmit}>
<EuiButton fill isLoading={isFormLoading} type="submit">
nchaulet marked this conversation as resolved.
Show resolved Hide resolved
<FormattedMessage
id="xpack.ingestManager.setupPage.enableFleet"
defaultMessage="Create user and enable Fleet"
/>
</EuiButton>
</form>
</EuiForm>
<EuiSpacer size="m" />
</EuiPageContent>
</EuiPageBody>
</WithoutHeaderLayout>
);
}

return (
<WithoutHeaderLayout>
<EuiPageBody restrictWidth={820}>
<EuiPageContent>
<EuiCallOut
title={i18n.translate('xpack.ingestManager.setupPage.missingRequirementsCalloutTitle', {
defaultMessage: 'Missing security requirements',
})}
color="warning"
iconType="alert"
>
<FormattedMessage
id="xpack.ingestManager.setupPage.missingRequirementsTitle"
defaultMessage="Missing requirements"
id="xpack.ingestManager.setupPage.missingRequirementsCalloutDescription"
defaultMessage="In order to use Fleet, you must enable the following Elasticsearch and Kibana security features."
/>
</h2>
</EuiTitle>
<EuiSpacer size="xl" />
<EuiText color="subdued" textAlign={'left'}>
</EuiCallOut>
<EuiSpacer size="m" />
<FormattedMessage
id="xpack.ingestManager.setupPage.missingRequirementsDescription"
defaultMessage="To use Fleet, you must enable the following features:
{space}- Enable Elasticsearch API keys.
{space}- Enable TLS to secure the communication between Agents and Kibana.
{space}- Set the encryption key for encrypted saved objects.
"
values={{
space: <EuiSpacer size="m" />,
}}
id="xpack.ingestManager.setupPage.missingRequirementsElasticsearchTitle"
defaultMessage="In your Elasticsearch configuration, enable:"
/>
</EuiText>
<EuiSpacer size="l" />
</>
) : (
<>
<EuiSpacer size="m" />
<EuiIcon type="lock" color="subdued" size="xl" />
<EuiSpacer size="m" />
<EuiTitle size="l">
<h2>
<EuiSpacer size="l" />
<RequirementItem isMissing={false}>
<FormattedMessage
id="xpack.ingestManager.setupPage.elasticsearchSecurityFlagText"
defaultMessage="Elasticsearch security. Set {securityFlag} to {true} ."
nchaulet marked this conversation as resolved.
Show resolved Hide resolved
values={{
securityFlag: <EuiCode>xpack.security.enabled</EuiCode>,
true: <EuiCode>true</EuiCode>,
}}
/>
</RequirementItem>
<EuiSpacer size="s" />
<RequirementItem isMissing={missingRequirements.includes('api_keys')}>
<FormattedMessage
id="xpack.ingestManager.setupPage.enableTitle"
defaultMessage="Enable Fleet"
id="xpack.ingestManager.setupPage.elasticsearchApiKeyFlagText"
defaultMessage="API key service. Set {apiKeyFlag} to {true} ."
nchaulet marked this conversation as resolved.
Show resolved Hide resolved
values={{
apiKeyFlag: <EuiCode>xpack.security.authc.api_key.enabled</EuiCode>,
true: <EuiCode>true</EuiCode>,
}}
/>
</h2>
</EuiTitle>
<EuiSpacer size="xl" />
<EuiText color="subdued">
</RequirementItem>
<EuiSpacer size="m" />
<EuiCodeBlock isCopyable={true}>
{`xpack.security.enabled: true
xpack.security.authc.api_key.enabled: true`}
</EuiCodeBlock>
<EuiSpacer size="l" />
<FormattedMessage
id="xpack.ingestManager.setupPage.enableText"
defaultMessage="In order to use Fleet, you must create an Elastic user. This user can create API keys
and write to logs-* and metrics-*."
id="xpack.ingestManager.setupPage.missingRequirementsKibanaTitle"
defaultMessage="In your Kibana configuration, enable:"
/>
<EuiSpacer size="l" />
<RequirementItem isMissing={missingRequirements.includes('tls_required')}>
<FormattedMessage
id="xpack.ingestManager.setupPage.tlsFlagText"
defaultMessage="Kibana security. Set. Set {securityFlag} to {true}. For development purposes, you can disable TLS by setting {tlsFlag} to {true} as an unsafe alternative."
nchaulet marked this conversation as resolved.
Show resolved Hide resolved
nchaulet marked this conversation as resolved.
Show resolved Hide resolved
nchaulet marked this conversation as resolved.
Show resolved Hide resolved
values={{
securityFlag: <EuiCode>xpack.security.enabled</EuiCode>,
tlsFlag: <EuiCode>xpack.ingestManager.fleet.tlsCheckDisabled</EuiCode>,
true: <EuiCode>true</EuiCode>,
}}
/>
</RequirementItem>
<EuiSpacer size="m" />
<RequirementItem
isMissing={missingRequirements.includes(
'encrypted_saved_object_encryption_key_required'
)}
>
<FormattedMessage
id="xpack.ingestManager.setupPage.encryptionKeyFlagText"
defaultMessage="Encryption key. Set {keyFlag} to use a secret key."
values={{
keyFlag: <EuiCode>xpack.reporting.encryptionKey</EuiCode>,
}}
/>
</RequirementItem>
<EuiSpacer size="l" />
<FormattedMessage
id="xpack.ingestManager.setupPage.gettingStartedText"
defaultMessage="For more information, read our {link}."
nchaulet marked this conversation as resolved.
Show resolved Hide resolved
values={{
link: (
<EuiLink
href="https://www.elastic.co/guide/en/ingest-management/current/index.html"
target="_blank"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

cc @hbharding what do you think of using external={true} for this EuiLink instead of target="_blank"? this will add an icon next to it too

image

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah good call thanks Jen. @nchaulet can you add that prop?

>
<FormattedMessage
id="xpack.ingestManager.setupPage.gettingStartedLink"
defaultMessage="Getting Started"
/>
</EuiLink>
),
}}
/>
</EuiText>
<EuiSpacer size="l" />
<EuiForm>
<form onSubmit={onSubmit}>
<EuiButton fill isLoading={isFormLoading} type="submit">
<FormattedMessage
id="xpack.ingestManager.setupPage.enableFleet"
defaultMessage="Create user and enable Fleet"
/>
</EuiButton>
</form>
</EuiForm>
<EuiSpacer size="m" />
</>
);

return (
<WithoutHeaderLayout>
<EuiPageBody restrictWidth={548}>
<EuiPageContent
verticalPosition="center"
horizontalPosition="center"
className="eui-textCenter"
paddingSize="l"
>
{content}
</EuiPageContent>
</EuiPageBody>
</WithoutHeaderLayout>
Expand Down