Skip to content

[Fleet] Show Fleet Server instructions when user wants to add another Fleet Server after the first #97681

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

Merged
jen-huang merged 3 commits into from
Apr 20, 2021
Merged

[Fleet] Show Fleet Server instructions when user wants to add another Fleet Server after the first #97681

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ba7fb71
In add agent flyout, when selected policy contains fleet server, show…
jen-huang Apr 20, 2021
f20fbbe
Fix types
jen-huang Apr 20, 2021
7167022
Move policy change handler to useCallback
jen-huang Apr 20, 2021
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
268 changes: 161 additions & 107 deletions ...lications/fleet/sections/agents/agent_requirements_page/fleet_server_requirement_page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import {
EuiCallOut,
EuiSelect,
} from '@elastic/eui';
import type { EuiStepProps } from '@elastic/eui/src/components/steps/step';
import styled from 'styled-components';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
Expand Down Expand Up @@ -51,7 +52,144 @@ const PLATFORM_OPTIONS: Array<{ text: string; value: PLATFORM_TYPE }> = [
{ text: 'RPM / DEB', value: 'rpm-deb' },
];

const OnPremInstructions: React.FC = () => {
export const ServiceTokenStep = ({
serviceToken,
getServiceToken,
isLoadingServiceToken,
}: {
serviceToken?: string;
getServiceToken: () => void;
isLoadingServiceToken: boolean;
}): EuiStepProps => {
return {
title: i18n.translate('xpack.fleet.fleetServerSetup.stepGenerateServiceTokenTitle', {
defaultMessage: 'Generate a service token',
}),
children: (
<>
<EuiText>
<FormattedMessage
id="xpack.fleet.fleetServerSetup.generateServiceTokenDescription"
defaultMessage="A service token grants Fleet Server permissions to write to Elasticsearch."
/>
</EuiText>
<EuiSpacer size="m" />
{!serviceToken ? (
<EuiFlexGroup>
<EuiFlexItem grow={false}>
<EuiButton
fill
isLoading={isLoadingServiceToken}
isDisabled={isLoadingServiceToken}
onClick={() => {
getServiceToken();
}}
>
<FormattedMessage
id="xpack.fleet.fleetServerSetup.generateServiceTokenButton"
defaultMessage="Generate service token"
/>
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
) : (
<>
<EuiCallOut size="s">
<FormattedMessage
id="xpack.fleet.fleetServerSetup.saveServiceTokenDescription"
defaultMessage="Save your service token information. This will be shown only once."
/>
</EuiCallOut>
<EuiSpacer size="m" />
<EuiFlexGroup gutterSize="s" alignItems="center">
<EuiFlexItem grow={false}>
<strong>
<FormattedMessage
id="xpack.fleet.fleetServerSetup.serviceTokenLabel"
defaultMessage="Service token"
/>
</strong>
</EuiFlexItem>
<FlexItemWithMinWidth>
<EuiCodeBlock paddingSize="m" isCopyable>
<CommandCode>{serviceToken}</CommandCode>
</EuiCodeBlock>
</FlexItemWithMinWidth>
</EuiFlexGroup>
</>
)}
</>
),
};
};

export const FleetServerCommandStep = ({
serviceToken,
installCommand,
platform,
setPlatform,
}: {
serviceToken?: string;
installCommand: string;
platform: string;
setPlatform: (platform: PLATFORM_TYPE) => void;
}): EuiStepProps => {
return {
title: i18n.translate('xpack.fleet.fleetServerSetup.stepInstallAgentTitle', {
defaultMessage: 'Start Fleet Server',
}),
status: !serviceToken ? 'disabled' : undefined,
children: serviceToken ? (
<>
<EuiText>
<FormattedMessage
id="xpack.fleet.fleetServerSetup.installAgentDescription"
defaultMessage="From the agent directory, copy and run the appropriate quick start command to start an Elastic Agent as a Fleet Server using the generated token and a self-signed certificate. See the {userGuideLink} for instructions on using your own certificates for production deployment. All commands require administrator privileges."
values={{
userGuideLink: (
<EuiLink href="https://ela.st/add-fleet-server" external>
<FormattedMessage
id="xpack.fleet.fleetServerSetup.setupGuideLink"
defaultMessage="Fleet User Guide"
/>
</EuiLink>
),
}}
/>
</EuiText>
<EuiSpacer size="l" />
<EuiSelect
prepend={
<EuiText>
<FormattedMessage
id="xpack.fleet.fleetServerSetup.platformSelectLabel"
defaultMessage="Platform"
/>
</EuiText>
}
options={PLATFORM_OPTIONS}
value={platform}
onChange={(e) => setPlatform(e.target.value as PLATFORM_TYPE)}
aria-label={i18n.translate('xpack.fleet.fleetServerSetup.platformSelectAriaLabel', {
defaultMessage: 'Platform',
})}
/>
<EuiSpacer size="s" />
<EuiCodeBlock
fontSize="m"
isCopyable={true}
paddingSize="m"
language="console"
whiteSpace="pre"
>
<CommandCode>{installCommand}</CommandCode>
</EuiCodeBlock>
</>
) : null,
};
};

export const useFleetServerInstructions = () => {
const outputsRequest = useGetOutputs();
const { notifications } = useStartServices();
const [serviceToken, setServiceToken] = useState<string>();
Expand Down Expand Up @@ -95,6 +233,26 @@ const OnPremInstructions: React.FC = () => {
setIsLoadingServiceToken(false);
}, [notifications]);

return {
serviceToken,
getServiceToken,
isLoadingServiceToken,
installCommand,
platform,
setPlatform,
};
};

const OnPremInstructions: React.FC = () => {
const {
serviceToken,
getServiceToken,
isLoadingServiceToken,
installCommand,
platform,
setPlatform,
} = useFleetServerInstructions();

return (
<EuiPanel paddingSize="l" grow={false} hasShadow={false} hasBorder={true}>
<EuiSpacer size="s" />
Expand Down Expand Up @@ -126,112 +284,8 @@ const OnPremInstructions: React.FC = () => {
className="eui-textLeft"
steps={[
DownloadStep(),
{
title: i18n.translate('xpack.fleet.fleetServerSetup.stepGenerateServiceTokenTitle', {
defaultMessage: 'Generate a service token',
}),
children: (
<>
<EuiText>
<FormattedMessage
id="xpack.fleet.fleetServerSetup.generateServiceTokenDescription"
defaultMessage="A service token grants Fleet Server permissions to write to Elasticsearch."
/>
</EuiText>
<EuiSpacer size="m" />
{!serviceToken ? (
<EuiFlexGroup>
<EuiFlexItem grow={false}>
<EuiButton
fill
isLoading={isLoadingServiceToken}
isDisabled={isLoadingServiceToken}
onClick={() => {
getServiceToken();
}}
>
<FormattedMessage
id="xpack.fleet.fleetServerSetup.generateServiceTokenButton"
defaultMessage="Generate service token"
/>
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
) : (
<>
<EuiCallOut size="s">
<FormattedMessage
id="xpack.fleet.fleetServerSetup.saveServiceTokenDescription"
defaultMessage="Save your service token information. This will be shown only once."
/>
</EuiCallOut>
<EuiSpacer size="m" />
<EuiFlexGroup gutterSize="s" alignItems="center">
<EuiFlexItem grow={false}>
<strong>
<FormattedMessage
id="xpack.fleet.fleetServerSetup.serviceTokenLabel"
defaultMessage="Service token"
/>
</strong>
</EuiFlexItem>
<FlexItemWithMinWidth>
<EuiCodeBlock paddingSize="m" isCopyable>
<CommandCode>{serviceToken}</CommandCode>
</EuiCodeBlock>
</FlexItemWithMinWidth>
</EuiFlexGroup>
</>
)}
</>
),
},
{
title: i18n.translate('xpack.fleet.fleetServerSetup.stepInstallAgentTitle', {
defaultMessage: 'Install the Elastic Agent as a Fleet Server',
}),
status: !serviceToken ? 'disabled' : undefined,
children: serviceToken ? (
<>
<EuiText>
<FormattedMessage
id="xpack.fleet.fleetServerSetup.installAgentDescription"
defaultMessage="From the agent directory, run the appropriate command to install, enroll, and start an Elastic Agent as a Fleet Server. Requires administrator privileges."
/>
</EuiText>
<EuiSpacer size="l" />
<EuiSelect
prepend={
<EuiText>
<FormattedMessage
id="xpack.fleet.fleetServerSetup.platformSelectLabel"
defaultMessage="Platform"
/>
</EuiText>
}
options={PLATFORM_OPTIONS}
value={platform}
onChange={(e) => setPlatform(e.target.value as PLATFORM_TYPE)}
aria-label={i18n.translate(
'xpack.fleet.fleetServerSetup.platformSelectAriaLabel',
{
defaultMessage: 'Platform',
}
)}
/>
<EuiSpacer size="s" />
<EuiCodeBlock
fontSize="m"
isCopyable={true}
paddingSize="m"
language="console"
whiteSpace="pre"
>
<CommandCode>{installCommand}</CommandCode>
</EuiCodeBlock>
</>
) : null,
},
ServiceTokenStep({ serviceToken, getServiceToken, isLoadingServiceToken }),
FleetServerCommandStep({ serviceToken, installCommand, platform, setPlatform }),
]}
/>
</EuiPanel>
Expand Down
7 changes: 6 additions & 1 deletion ...plugins/fleet/public/applications/fleet/sections/agents/agent_requirements_page/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,4 +6,9 @@
*/

export { MissingESRequirementsPage } from './es_requirements_page';
export { FleetServerRequirementPage } from './fleet_server_requirement_page';
export {
FleetServerRequirementPage,
ServiceTokenStep,
FleetServerCommandStep,
useFleetServerInstructions,
} from './fleet_server_requirement_page';
65 changes: 51 additions & 14 deletions ...cations/fleet/sections/agents/components/agent_enrollment_flyout/managed_instructions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
* 2.0.
*/

import React, { useState } from 'react';
import React, { useState, useMemo } from 'react';
import { EuiSteps, EuiLink, EuiText, EuiSpacer } from '@elastic/eui';
import type { EuiContainedStepProps } from '@elastic/eui/src/components/steps/steps';
import { i18n } from '@kbn/i18n';
Expand All @@ -19,7 +19,12 @@ import {
useFleetStatus,
} from '../../../../hooks';
import { ManualInstructions } from '../../../../components/enrollment_instructions';
import { FleetServerRequirementPage } from '../../agent_requirements_page';
import {
FleetServerRequirementPage,
ServiceTokenStep,
FleetServerCommandStep,
useFleetServerInstructions,
} from '../../agent_requirements_page';

import { DownloadStep, AgentPolicySelectionStep } from './steps';

Expand Down Expand Up @@ -58,23 +63,55 @@ export const ManagedInstructions = React.memo<Props>(({ agentPolicies }) => {
const fleetStatus = useFleetStatus();

const [selectedAPIKeyId, setSelectedAPIKeyId] = useState<string | undefined>();
const [isFleetServerPolicySelected, setIsFleetServerPolicySelected] = useState<boolean>(false);

const apiKey = useGetOneEnrollmentAPIKey(selectedAPIKeyId);
const settings = useGetSettings();
const fleetServerHosts = settings.data?.item?.fleet_server_hosts || [];
const fleetServerInstructions = useFleetServerInstructions();

const steps: EuiContainedStepProps[] = [
DownloadStep(),
AgentPolicySelectionStep({ agentPolicies, setSelectedAPIKeyId }),
{
title: i18n.translate('xpack.fleet.agentEnrollment.stepEnrollAndRunAgentTitle', {
defaultMessage: 'Enroll and start the Elastic Agent',
const steps = useMemo(() => {
const {
serviceToken,
getServiceToken,
isLoadingServiceToken,
installCommand,
platform,
setPlatform,
} = fleetServerInstructions;
const fleetServerHosts = settings.data?.item?.fleet_server_hosts || [];
const baseSteps: EuiContainedStepProps[] = [
DownloadStep(),
AgentPolicySelectionStep({
agentPolicies,
setSelectedAPIKeyId,
setIsFleetServerPolicySelected,
}),
children: apiKey.data && (
<ManualInstructions apiKey={apiKey.data.item} fleetServerHosts={fleetServerHosts} />
),
},
];
];
if (isFleetServerPolicySelected) {
baseSteps.push(
...[
ServiceTokenStep({ serviceToken, getServiceToken, isLoadingServiceToken }),
FleetServerCommandStep({ serviceToken, installCommand, platform, setPlatform }),
]
);
} else {
baseSteps.push({
title: i18n.translate('xpack.fleet.agentEnrollment.stepEnrollAndRunAgentTitle', {
defaultMessage: 'Enroll and start the Elastic Agent',
}),
children: apiKey.data && (
<ManualInstructions apiKey={apiKey.data.item} fleetServerHosts={fleetServerHosts} />
),
});
}
return baseSteps;
}, [
agentPolicies,
apiKey.data,
isFleetServerPolicySelected,
settings.data?.item?.fleet_server_hosts,
fleetServerInstructions,
]);

return (
<>
Expand Down
Loading