Skip to content

Commit

Permalink
Simplify a lot the instructions to only display manual instructions
Browse files Browse the repository at this point in the history
  • Loading branch information
@nchaulet
nchaulet committed May 4, 2020
1 parent 57c1c18 commit 18189c1
Show file tree
Hide file tree
Showing 4 changed files with 65 additions and 234 deletions.
1 change: 0 additions & 1 deletion ...t_manager/public/applications/ingest_manager/components/enrollment_instructions/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,4 @@
* you may not use this file except in compliance with the Elastic License.
*/

export { QuickSetupInstructions } from './shell';
export { ManualInstructions } from './manual';
26 changes: 22 additions & 4 deletions ...er/public/applications/ingest_manager/components/enrollment_instructions/manual/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,24 +5,31 @@
*/

import React from 'react';
import { EuiText, EuiSpacer, EuiCode, EuiCodeBlock } from '@elastic/eui';
import { EuiText, EuiSpacer, EuiCode, EuiCodeBlock, EuiCopy, EuiButton } from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n/react';
import { EnrollmentAPIKey } from '../../../types';

interface Props {
kibanaUrl: string;
apiKey: EnrollmentAPIKey;
kibanaCASha256?: string;
}

export const ManualInstructions: React.FunctionComponent<Props> = ({ kibanaUrl, apiKey }) => {
export const ManualInstructions: React.FunctionComponent<Props> = ({
kibanaUrl,
apiKey,
kibanaCASha256,
}) => {
const command = `
./elastic-agent enroll ${kibanaUrl} ${apiKey.api_key}
./elastic-agent enroll ${kibanaUrl} ${apiKey.api_key}${
kibanaCASha256 ? ` --ca_sha256=${kibanaCASha256}` : ''
}
./elastic-agent run`;
return (
<>
<EuiText>
<FormattedMessage
id="todo"
id="xpack.ingestManager.enrollmentInstructions.descriptionText"
defaultMessage="From the agent’s directory, run these commands to enroll and start the Elastic Agent. {enrollCommand} will write to your agent’s configuration file so that it has the correct settings. You can use this command to setup agents on more than one host."
values={{
enrollCommand: <EuiCode>agent enroll</EuiCode>,
Expand All @@ -33,6 +40,17 @@ export const ManualInstructions: React.FunctionComponent<Props> = ({ kibanaUrl,
<EuiCodeBlock fontSize="m">
<pre>{command}</pre>
</EuiCodeBlock>
<EuiSpacer size="m" />
<EuiCopy textToCopy={command}>
{copy => (
<EuiButton iconType="copy" fill onClick={copy}>
<FormattedMessage
id="xpack.ingestManager.enrollmentInstructions.copyButton"
defaultMessage="Copy command"
/>
</EuiButton>
)}
</EuiCopy>
</>
);
};
96 changes: 0 additions & 96 deletions ...ger/public/applications/ingest_manager/components/enrollment_instructions/shell/index.tsx
View file

This file was deleted.

176 changes: 43 additions & 133 deletions ...c/applications/ingest_manager/sections/fleet/components/agent_enrollment_flyout/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,23 +14,17 @@ import {
EuiButtonEmpty,
EuiButton,
EuiFlyoutFooter,
EuiTabs,
EuiTab,
EuiSteps,
EuiText,
EuiSelect,
EuiLink,
} from '@elastic/eui';
import { EuiContainedStepProps } from '@elastic/eui/src/components/steps/steps';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
import { AgentConfig } from '../../../../types';
import { EnrollmentStepAgentConfig } from './config_selection';
import { useGetOneEnrollmentAPIKey, useCore } from '../../../../hooks';
import {
QuickSetupInstructions,
ManualInstructions,
} from '../../../../components/enrollment_instructions';
import { useGetOneEnrollmentAPIKey, useCore, useGetSettings } from '../../../../hooks';
import { ManualInstructions } from '../../../../components/enrollment_instructions';

interface Props {
onClose: () => void;
Expand All @@ -43,39 +37,38 @@ export const AgentEnrollmentFlyout: React.FunctionComponent<Props> = ({
}) => {
const core = useCore();
const [selectedAPIKeyId, setSelectedAPIKeyId] = useState<string | undefined>();
const [selectedPlatform, setSelectedPlatform] = useState<string>('macos');
const [selectedTab, setSelectedTab] = useState<'quick_setup' | 'manual'>('quick_setup');

const settings = useGetSettings();
const apiKey = useGetOneEnrollmentAPIKey(selectedAPIKeyId);

const kibanaUrl =
settings.data?.item?.kibana_url ?? `${window.location.origin}${core.http.basePath.get()}`;
const kibanaCASha256 = settings.data?.item?.kibana_ca_sha256;

const steps: EuiContainedStepProps[] = [
...(selectedTab === 'manual'
? [
{
title: i18n.translate('xpack.ingestManager.agentEnrollment.stepDownloadAgentTitle', {
defaultMessage: 'Download the Elastic Agent',
}),
children: (
<EuiText>
<FormattedMessage
id="xpack.ingestManager.agentEnrollment.downloadDescription"
defaultMessage="Download the Elastic agent on your host’s machine. You can download the agent binary and it’s verification signature from Elastic’s {downloadLink}."
values={{
downloadLink: (
<EuiLink href="https://ela.st/download-elastic-agent" target="_blank">
<FormattedMessage
id="xpack.ingestManager.agentEnrollment.downloadLink"
defaultMessage="download page"
/>
</EuiLink>
),
}}
/>
</EuiText>
),
},
]
: []),
{
title: i18n.translate('xpack.ingestManager.agentEnrollment.stepDownloadAgentTitle', {
defaultMessage: 'Download the Elastic Agent',
}),
children: (
<EuiText>
<FormattedMessage
id="xpack.ingestManager.agentEnrollment.downloadDescription"
defaultMessage="Download the Elastic agent on your host’s machine. You can download the agent binary and it’s verification signature from Elastic’s {downloadLink}."
values={{
downloadLink: (
<EuiLink href="https://ela.st/download-elastic-agent" target="_blank">
<FormattedMessage
id="xpack.ingestManager.agentEnrollment.downloadLink"
defaultMessage="download page"
/>
</EuiLink>
),
}}
/>
</EuiText>
),
},
{
title: i18n.translate('xpack.ingestManager.agentEnrollment.stepChooseAgentConfigTitle', {
defaultMessage: 'Choose an agent configuration',
Expand All @@ -84,85 +77,23 @@ export const AgentEnrollmentFlyout: React.FunctionComponent<Props> = ({
<EnrollmentStepAgentConfig agentConfigs={agentConfigs} onKeyChange={setSelectedAPIKeyId} />
),
},
...(selectedTab === 'manual'
? [
{
title: i18n.translate('xpack.ingestManager.agentEnrollment.stepRunAgentTitle', {
defaultMessage: 'Enroll and run the Elastic Agent',
}),
children: apiKey.data && (
<ManualInstructions
apiKey={apiKey.data.item}
kibanaUrl={`${window.location.origin}${core.http.basePath.get()}`}
/>
),
},
]
: [
{
title: i18n.translate('xpack.ingestManager.agentEnrollment.stepChoosePlatformTitle', {
defaultMessage: 'Select your agent platform',
}),
children: (
<EuiSelect
fullWidth
prepend={
<EuiText>
<FormattedMessage
id="xpack.ingestManager.agentEnrollment.selectPlatformLabel"
defaultMessage="Agent platform"
/>
</EuiText>
}
value={selectedPlatform}
onChange={e => setSelectedPlatform(e.target.value)}
options={[
{
text: i18n.translate(
'xpack.ingestManager.agentEnrollment.platformDarwinLabel',
{
defaultMessage: 'Macos',
}
),
value: 'macos',
},
{
text: i18n.translate('xpack.ingestManager.agentEnrollment.platformLinuxLabel', {
defaultMessage: 'Linux 64-bit',
}),
value: 'linux',
},
{
text: i18n.translate(
'xpack.ingestManager.agentEnrollment.platformWindowsLabel',
{
defaultMessage: 'Windows',
}
),
value: 'windows',
},
]}
/>
),
},
{
title: i18n.translate('xpack.ingestManager.agentEnrollment.stepQuickSetupTitle', {
defaultMessage: 'Download and enroll the Elastic Agent',
}),
children: apiKey.data && (
<QuickSetupInstructions
apiKey={apiKey.data.item}
kibanaUrl={`${window.location.origin}${core.http.basePath.get()}`}
platform={selectedPlatform}
/>
),
},
]),
{
title: i18n.translate('xpack.ingestManager.agentEnrollment.stepRunAgentTitle', {
defaultMessage: 'Enroll and run the Elastic Agent',
}),
children: apiKey.data && (
<ManualInstructions
apiKey={apiKey.data.item}
kibanaUrl={kibanaUrl}
kibanaCASha256={kibanaCASha256}
/>
),
},
];

return (
<EuiFlyout onClose={onClose} size="l" maxWidth={860}>
<EuiFlyoutHeader aria-labelledby="FleetAgentEnrollmentFlyoutTitle">
<EuiFlyoutHeader hasBorder aria-labelledby="FleetAgentEnrollmentFlyoutTitle">
<EuiTitle size="m">
<h2 id="FleetAgentEnrollmentFlyoutTitle">
<FormattedMessage
Expand All @@ -172,27 +103,6 @@ export const AgentEnrollmentFlyout: React.FunctionComponent<Props> = ({
</h2>
</EuiTitle>
</EuiFlyoutHeader>
<div>
<EuiTabs>
{/* TODO check if we can do better */}
&nbsp; &nbsp;
<EuiTab
onClick={() => setSelectedTab('quick_setup')}
isSelected={selectedTab === 'quick_setup'}
>
<FormattedMessage
id="xpack.ingestManager.agentEnrollment.tabQuickSetupTitle"
defaultMessage="Quick setup"
/>
</EuiTab>
<EuiTab onClick={() => setSelectedTab('manual')} isSelected={selectedTab === 'manual'}>
<FormattedMessage
id="xpack.ingestManager.agentEnrollment.manualInstructionsTitle"
defaultMessage="Manual instructions"
/>
</EuiTab>
</EuiTabs>
</div>
<EuiFlyoutBody>
<EuiSteps steps={steps} />
</EuiFlyoutBody>
Expand Down

0 comments on commit 18189c1

Please sign in to comment.