Skip to content

Commit

Permalink
[Ingest Manager] Better display of Fleet requirements (elastic#71686)
Browse files Browse the repository at this point in the history
  • Loading branch information
@nchaulet
nchaulet authored Jul 15, 2020
1 parent 18dcd24 commit a885f8a
Show file tree
Hide file tree
Showing 3 changed files with 234 additions and 76 deletions.
306 changes: 234 additions & 72 deletions ...ins/ingest_manager/public/applications/ingest_manager/sections/fleet/setup_page/index.tsx
View file
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,20 +15,47 @@ 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" />
) : (
<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'];
}> = ({ refresh, missingRequirements }) => {
const [isFormLoading, setIsFormLoading] = useState<boolean>(false);
const core = useCore();

const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
const onSubmit = async () => {
setIsFormLoading(true);
try {
await sendPostFleetSetup({ forceRecreate: true });
Expand All @@ -38,84 +66,218 @@ 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>
<EuiButton onClick={onSubmit} fill isLoading={isFormLoading} type="submit">
<FormattedMessage
id="xpack.ingestManager.setupPage.enableFleet"
defaultMessage="Create user and enable Fleet"
/>
</EuiButton>
</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="{esSecurityLink}. Set {securityFlag} to {true} ."
values={{
esSecurityLink: (
<EuiLink
href="https://www.elastic.co/guide/en/elasticsearch/reference/current/configuring-security.html"
target="_blank"
external
>
<FormattedMessage
id="xpack.ingestManager.setupPage.elasticsearchSecurityLink"
defaultMessage="Elasticsearch security"
/>
</EuiLink>
),
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="{apiKeyLink}. Set {apiKeyFlag} to {true} ."
values={{
apiKeyFlag: <EuiCode>xpack.security.authc.api_key.enabled</EuiCode>,
true: <EuiCode>true</EuiCode>,
apiKeyLink: (
<EuiLink
href="https://www.elastic.co/guide/en/elasticsearch/reference/current/security-settings.html#api-key-service-settings"
target="_blank"
external
>
<FormattedMessage
id="xpack.ingestManager.setupPage.apiKeyServiceLink"
defaultMessage="API key service"
/>
</EuiLink>
),
}}
/>
</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="{kibanaSecurityLink}. Set {securityFlag} to {true}. For development purposes, you can disable {tlsLink} by setting {tlsFlag} to {true} as an unsafe alternative."
values={{
kibanaSecurityLink: (
<EuiLink
href="https://www.elastic.co/guide/en/kibana/current/using-kibana-with-security.html"
target="_blank"
external
>
<FormattedMessage
id="xpack.ingestManager.setupPage.kibanaSecurityLink"
defaultMessage="Kibana security"
/>
</EuiLink>
),
securityFlag: <EuiCode>xpack.security.enabled</EuiCode>,
tlsLink: (
<EuiLink
href="https://www.elastic.co/guide/en/kibana/current/configuring-tls.html"
target="_blank"
external
>
<FormattedMessage
id="xpack.ingestManager.setupPage.tlsLink"
defaultMessage="TLS"
/>
</EuiLink>
),
tlsFlag: <EuiCode>xpack.ingestManager.fleet.tlsCheckDisabled</EuiCode>,
true: <EuiCode>true</EuiCode>,
}}
/>
</RequirementItem>
<EuiSpacer size="s" />
<RequirementItem
isMissing={missingRequirements.includes(
'encrypted_saved_object_encryption_key_required'
)}
>
<FormattedMessage
id="xpack.ingestManager.setupPage.encryptionKeyFlagText"
defaultMessage="{encryptionKeyLink}. Set {keyFlag} to any alphanumeric value of at least 32 characters."
values={{
encryptionKeyLink: (
<EuiLink
href="https://www.elastic.co/guide/en/kibana/current/ingest-manager-settings-kb.html"
target="_blank"
external
>
<FormattedMessage
id="xpack.ingestManager.setupPage.kibanaEncryptionLink"
defaultMessage="Kibana encryption key"
/>
</EuiLink>
),
keyFlag: <EuiCode>xpack.encryptedSavedObjects.encryptionKey</EuiCode>,
}}
/>
</RequirementItem>
<EuiSpacer size="m" />
<EuiCodeBlock isCopyable={true}>
{`xpack.security.enabled: true
xpack.encryptedSavedObjects.encryptionKey: "something_at_least_32_characters"`}
</EuiCodeBlock>
<EuiSpacer size="l" />
<FormattedMessage
id="xpack.ingestManager.setupPage.gettingStartedText"
defaultMessage="For more information, read our {link} guide."
values={{
link: (
<EuiLink
href="https://www.elastic.co/guide/en/ingest-management/current/index.html"
target="_blank"
external
>
<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
2 changes: 0 additions & 2 deletions x-pack/plugins/translations/translations/ja-JP.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8367,8 +8367,6 @@
"xpack.ingestManager.setupPage.enableFleet": "ユーザーを作成してフリートを有効にます",
"xpack.ingestManager.setupPage.enableText": "フリートを使用するには、Elasticユーザーを作成する必要があります。このユーザーは、APIキーを作成して、logs-*およびmetrics-*に書き込むことができます。",
"xpack.ingestManager.setupPage.enableTitle": "フリートを有効にする",
"xpack.ingestManager.setupPage.missingRequirementsDescription": "Fleetを使用するには、次の機能を有効にする必要があります。{space}- Elasticsearch APIキーを有効にします。{space}- TLSを有効にして、エージェントKibanaの間の通信を保護します。 ",
"xpack.ingestManager.setupPage.missingRequirementsTitle": "見つからない要件",
"xpack.ingestManager.unenrollAgents.confirmModal.cancelButtonLabel": "キャンセル",
"xpack.ingestManager.unenrollAgents.confirmModal.confirmButtonLabel": "登録解除",
"xpack.ingestManager.unenrollAgents.confirmModal.deleteMultipleTitle": "{count, plural, one {# エージェント} other {# エージェント}}の登録を解除しますか？",
Expand Down
2 changes: 0 additions & 2 deletions x-pack/plugins/translations/translations/zh-CN.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8372,8 +8372,6 @@
"xpack.ingestManager.setupPage.enableFleet": "创建用户并启用 Fleet",
"xpack.ingestManager.setupPage.enableText": "要使用 Fleet，必须创建 Elastic 用户。此用户可以创建 API 密钥并写入到 logs-* and metrics-*。",
"xpack.ingestManager.setupPage.enableTitle": "启用 Fleet",
"xpack.ingestManager.setupPage.missingRequirementsDescription": "要使用 Fleet，必须启用以下功能：{space}- 启用 Elasticsearch API 密钥。{space}- 启用 TLS 以保护代理和 Kibana 之间的通信。 ",
"xpack.ingestManager.setupPage.missingRequirementsTitle": "缺失的要求",
"xpack.ingestManager.unenrollAgents.confirmModal.cancelButtonLabel": "取消",
"xpack.ingestManager.unenrollAgents.confirmModal.confirmButtonLabel": "取消注册",
"xpack.ingestManager.unenrollAgents.confirmModal.deleteMultipleTitle": "取消注册 {count, plural, one {# 个代理} other {# 个代理}}？",
Expand Down

0 comments on commit a885f8a

Please sign in to comment.