github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-25 02:09:32 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Logs onboarding] Install steps for windows (#163735)

Browse source 
Closes https://github.com/elastic/kibana/issues/162976.

### Changes:
- `installAgentPlatformOptions` now have options for disabling the steps
and rendering a custom children.
- `WindowsInstallStep` component was created and used in customLogs and
systemLogs.
- Small fix where systemLogs was occupying the whole screen instead of
the content space.
- Return proper path depending on the platform selected.

#### Before changes 
##### system onboarding
<img width="2063" alt="image"
src="52c4b842-f70a-4328-87b3-88f6bf6f959a">

##### customLogs onboarding
<img width="2052" alt="image"
src="68c4cb28-cd10-44b2-bcc4-bb10e0f19e47">


#### After changes 
##### system onboarding


6e566618-a790-4ffd-ac39-041678f8d362

##### customLogs onboarding


bf908caf-e1d7-4273-8944-2923b9d0ec42

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Yngrid Coello 2023-08-14 20:18:43 +02:00 • committed by GitHub
parent bd6d65591a
commit a488732161
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 244 additions and 128 deletions
Download patch file Download diff file Expand all files Collapse all files

6
x-pack/plugins/observability_onboarding/public/components/app/custom_logs/wizard/install_elastic_agent.tsx
View file

@ -38,6 +38,7 @@ import {
import { ApiKeyBanner } from './api_key_banner';
import { BackButton } from './back_button';
import { getDiscoverNavigationParams } from '../../utils';
import { WindowsInstallStep } from '../../../shared/windows_install_step';
import { TroubleshootingLink } from '../../../shared/troubleshooting_link';
export function InstallElasticAgent() {
@ -328,7 +329,10 @@ export function InstallElasticAgent() {
{ defaultMessage: 'Windows' }
),
id: 'windows',
isDisabled: true,
disableSteps: true,
children: (
<WindowsInstallStep docsLink="https://www.elastic.co/guide/en/observability/current/logs-stream.html" />
),
},
]}
onSelectPlatform={(id) => setElasticAgentPlatform(id)}

29
x-pack/plugins/observability_onboarding/public/components/app/system_logs/install_elastic_agent.tsx
View file

@ -37,6 +37,7 @@ import {
} from '../../shared/step_panel';
import { ApiKeyBanner } from '../custom_logs/wizard/api_key_banner';
import { getDiscoverNavigationParams } from '../utils';
import { WindowsInstallStep } from '../../shared/windows_install_step';
import { SystemIntegrationBanner } from './system_integration_banner';
import { TroubleshootingLink } from '../../shared/troubleshooting_link';
@ -249,9 +250,31 @@ export function InstallElasticAgent() {
<EuiSpacer size="m" />
<InstallElasticAgentSteps
installAgentPlatformOptions={[
{ label: 'Linux', id: 'linux-tar', isDisabled: false },
{ label: 'MacOS', id: 'macos', isDisabled: false },
{ label: 'Windows', id: 'windows', isDisabled: true },
{
label: i18n.translate(
'xpack.observability_onboarding.installElasticAgent.installStep.choosePlatform.linux',
{ defaultMessage: 'Linux' }
),
id: 'linux-tar',
},
{
label: i18n.translate(
'xpack.observability_onboarding.installElasticAgent.installStep.choosePlatform.macOS',
{ defaultMessage: 'MacOS' }
),
id: 'macos',
},
{
label: i18n.translate(
'xpack.observability_onboarding.installElasticAgent.installStep.choosePlatform.windows',
{ defaultMessage: 'Windows' }
),
id: 'windows',
disableSteps: true,
children: (
<WindowsInstallStep docsLink="https://www.elastic.co/guide/en/welcome-to-elastic/current/getting-started-observability.html" />
),
},
]}
onSelectPlatform={(id) => setElasticAgentPlatform(id)}
selectedPlatform={elasticAgentPlatform}

296
x-pack/plugins/observability_onboarding/public/components/shared/install_elastic_agent_steps.tsx
View file

@ -23,7 +23,7 @@ import {
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { Buffer } from 'buffer';
import React from 'react';
import React, { ReactNode } from 'react';
import { intersection } from 'lodash';
import { FormattedMessage } from '@kbn/i18n-react';
import { StepStatus } from './step_status';
@ -42,6 +42,8 @@ interface Props<PlatformId extends string> {
label: string;
id: PlatformId;
isDisabled?: boolean;
disableSteps?: boolean;
children?: ReactNode;
}>;
onSelectPlatform: (id: PlatformId) => void;
selectedPlatform: PlatformId;
@ -75,117 +77,23 @@ export function InstallElasticAgentSteps<PlatformId extends string>({
const isInstallStarted =
intersection(
Object.keys(installProgressSteps),
Object.keys(PROGRESS_STEP_TITLES)
Object.keys(PROGRESS_STEP_TITLES(selectedPlatform))
).length > 0;
const autoDownloadConfigStep = getStep('ea-config', installProgressSteps);
return (
<EuiSteps
steps={[
{
title: i18n.translate(
'xpack.observability_onboarding.installElasticAgent.installStep.title',
{ defaultMessage: 'Install the Elastic Agent' }
),
status: installAgentStatus,
children: (
const autoDownloadConfigStep = getStep(
'ea-config',
installProgressSteps,
selectedPlatform
);
const customInstallStep = installAgentPlatformOptions.find(
(step) => step.id === selectedPlatform
)?.children;
const disableSteps = installAgentPlatformOptions.find(
(step) => step.id === selectedPlatform
)?.disableSteps;
const installStepDefault = (
<>
<EuiText color="subdued">
<p>
<FormattedMessage
id="xpack.observability_onboarding.installElasticAgent.installStep.description"
defaultMessage="Select your platform, and run the install command in your terminal to enroll and start the Elastic Agent. Do this for each host. Review {hostRequirementsLink} before installing."
values={{
hostRequirementsLink: (
<EuiLink
external
href="https://www.elastic.co/guide/en/fleet/8.7/elastic-agent-installation.html"
>
{i18n.translate(
'xpack.observability_onboarding.installElasticAgent.installStep.hostRequirements',
{
defaultMessage:
'host requirements and other installation options',
}
)}
</EuiLink>
),
}}
/>
</p>
</EuiText>
<EuiSpacer size="l" />
<EuiSwitch
label={
<EuiFlexGroup
alignItems="center"
gutterSize="xs"
responsive={false}
>
<EuiFlexItem grow={false}>
{i18n.translate(
'xpack.observability_onboarding.installElasticAgent.installStep.autoDownloadConfig',
{
defaultMessage:
"Automatically download the agent's config",
}
)}
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiIconTip
content={i18n.translate(
'xpack.observability_onboarding.installElasticAgent.installStep.autoDownloadConfig.tooltip',
{
defaultMessage:
"Turn on to add a string to the following code block that downloads the agent's standard configuration to your host during installation. Turn off to manually configure the agent in the next step.",
}
)}
position="right"
/>
</EuiFlexItem>
</EuiFlexGroup>
}
checked={autoDownloadConfig}
onChange={onToggleAutoDownloadConfig}
disabled={isInstallStarted}
/>
<EuiSpacer size="l" />
{autoDownloadConfig && (
<>
<EuiCallOut
title={i18n.translate(
'xpack.observability_onboarding.installElasticAgent.installStep.autoDownloadConfig.overwriteWarning',
{
defaultMessage:
'Automatically downloading the agent config will overwrite any existing agent config on your host.',
}
)}
color="warning"
iconType="warning"
/>
<EuiSpacer size="l" />
</>
)}
<EuiButtonGroup
isFullWidth
legend={i18n.translate(
'xpack.observability_onboarding.installElasticAgent.installStep.choosePlatform',
{ defaultMessage: 'Choose platform' }
)}
options={installAgentPlatformOptions.map(
({ id, label, isDisabled }) => ({
id,
label,
isDisabled,
})
)}
type="single"
idSelected={selectedPlatform}
onChange={(id: string) => {
onSelectPlatform(id as PlatformId);
}}
isDisabled={isInstallStarted}
/>
<EuiSpacer size="m" />
<EuiCodeBlock language="bash" isCopyable>
{installAgentCommand}
</EuiCodeBlock>
@ -195,16 +103,12 @@ export function InstallElasticAgentSteps<PlatformId extends string>({
<EuiSpacer size="m" />
<EuiFlexGroup direction="column" gutterSize="m">
{(
[
'ea-download',
'ea-extract',
'ea-install',
'ea-status',
] as const
['ea-download', 'ea-extract', 'ea-install', 'ea-status'] as const
).map((stepId) => {
const { title, status, message } = getStep(
stepId,
installProgressSteps
installProgressSteps,
selectedPlatform
);
return (
<StepStatus
@ -219,15 +123,9 @@ export function InstallElasticAgentSteps<PlatformId extends string>({
</>
)}
</>
),
},
{
title: i18n.translate(
'xpack.observability_onboarding.installElasticAgent.configureStep.title',
{ defaultMessage: 'Configure the Elastic agent' }
),
status: configureAgentStatus,
children: (
);
const configureStep = (
<>
<EuiText color="subdued">
<p>
@ -305,9 +203,133 @@ export function InstallElasticAgentSteps<PlatformId extends string>({
</>
) : null}
</>
);
return (
<EuiSteps
steps={[
{
title: i18n.translate(
'xpack.observability_onboarding.installElasticAgent.installStep.title',
{ defaultMessage: 'Install the Elastic Agent' }
),
status: installAgentStatus,
children: (
<>
<EuiText color="subdued">
<p>
<FormattedMessage
id="xpack.observability_onboarding.installElasticAgent.installStep.description"
defaultMessage="Select your platform, and run the install command in your terminal to enroll and start the Elastic Agent. Do this for each host. Review {hostRequirementsLink} before installing."
values={{
hostRequirementsLink: (
<EuiLink
external
href="https://www.elastic.co/guide/en/fleet/8.7/elastic-agent-installation.html"
>
{i18n.translate(
'xpack.observability_onboarding.installElasticAgent.installStep.hostRequirements',
{
defaultMessage:
'host requirements and other installation options',
}
)}
</EuiLink>
),
}}
/>
</p>
</EuiText>
<EuiSpacer size="l" />
<EuiSwitch
label={
<EuiFlexGroup
alignItems="center"
gutterSize="xs"
responsive={false}
>
<EuiFlexItem grow={false}>
{i18n.translate(
'xpack.observability_onboarding.installElasticAgent.installStep.autoDownloadConfig',
{
defaultMessage:
"Automatically download the agent's config",
}
)}
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiIconTip
content={i18n.translate(
'xpack.observability_onboarding.installElasticAgent.installStep.autoDownloadConfig.tooltip',
{
defaultMessage:
"Turn on to add a string to the following code block that downloads the agent's standard configuration to your host during installation. Turn off to manually configure the agent in the next step.",
}
)}
position="right"
/>
</EuiFlexItem>
</EuiFlexGroup>
}
checked={autoDownloadConfig}
onChange={onToggleAutoDownloadConfig}
disabled={disableSteps || isInstallStarted}
/>
<EuiSpacer size="l" />
{autoDownloadConfig && (
<>
<EuiCallOut
title={i18n.translate(
'xpack.observability_onboarding.installElasticAgent.installStep.autoDownloadConfig.overwriteWarning',
{
defaultMessage:
'Automatically downloading the agent config will overwrite any existing agent config on your host.',
}
)}
color="warning"
iconType="warning"
/>
<EuiSpacer size="l" />
</>
)}
<EuiButtonGroup
isFullWidth
legend={i18n.translate(
'xpack.observability_onboarding.installElasticAgent.installStep.choosePlatform',
{ defaultMessage: 'Choose platform' }
)}
options={installAgentPlatformOptions.map(
({ id, label, isDisabled }) => ({
id,
label,
isDisabled,
})
)}
type="single"
idSelected={selectedPlatform}
onChange={(id: string) => {
onSelectPlatform(id as PlatformId);
}}
isDisabled={isInstallStarted}
/>
<EuiSpacer size="m" />
{customInstallStep || installStepDefault}
</>
),
},
...appendedSteps.map((euiStep) => ({ children: null, ...euiStep })),
{
title: i18n.translate(
'xpack.observability_onboarding.installElasticAgent.configureStep.title',
{ defaultMessage: 'Configure the Elastic agent' }
),
status: disableSteps ? 'disabled' : configureAgentStatus,
children: disableSteps ? <></> : configureStep,
},
...appendedSteps.map((euiStep) => ({
children: null,
...euiStep,
status: disableSteps ? 'disabled' : euiStep.status,
})),
]}
/>
);
@ -315,10 +337,11 @@ export function InstallElasticAgentSteps<PlatformId extends string>({
function getStep(
id: ProgressStepId,
installProgressSteps: Props<string>['installProgressSteps']
installProgressSteps: Props<string>['installProgressSteps'],
selectedPlatform: string
): { title: string; status: EuiStepStatus; message?: string } {
const { loadingTitle, completedTitle, incompleteTitle } =
PROGRESS_STEP_TITLES[id];
PROGRESS_STEP_TITLES(selectedPlatform)[id];
const stepProgress = installProgressSteps[id];
if (stepProgress) {
const { status, message } = stepProgress;
@ -341,10 +364,12 @@ function getStep(
};
}
const PROGRESS_STEP_TITLES: Record<
const PROGRESS_STEP_TITLES: (
selectedPlatform: string
) => Record<
ProgressStepId,
Record<'incompleteTitle' | 'loadingTitle' | 'completedTitle', string>
> = {
> = (selectedPlatform: string) => ({
'ea-download': {
incompleteTitle: i18n.translate(
'xpack.observability_onboarding.installElasticAgent.progress.eaDownload.incompleteTitle',
@ -418,8 +443,13 @@ const PROGRESS_STEP_TITLES: Record<
'xpack.observability_onboarding.installElasticAgent.progress.eaConfig.completedTitle',
{
defaultMessage: 'Elastic Agent config written to {configPath}',
values: { configPath: '/opt/Elastic/Agent/elastic-agent.yml' },
values: {
configPath:
selectedPlatform === 'macos'
? '/Library/Elastic/Agent/elastic-agent.yml'
: '/opt/Elastic/Agent/elastic-agent.yml',
},
}
),
},
};
});

52
x-pack/plugins/observability_onboarding/public/components/shared/windows_install_step.tsx Normal file
View file

@ -0,0 +1,52 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/
import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import React from 'react';
const DEFAULT_STANDALONE_ELASTIC_AGENT_DOCS =
'https://www.elastic.co/guide/en/fleet/current/install-standalone-elastic-agent.html';
export function WindowsInstallStep({
docsLink = DEFAULT_STANDALONE_ELASTIC_AGENT_DOCS,
}: {
docsLink?: string;
}) {
return (
<EuiFlexGroup direction="column">
<EuiFlexItem grow={false}>
<EuiText color="subdued">
<p>
{i18n.translate(
'xpack.observability_onboarding.windows.installStep.description',
{
defaultMessage:
'This onboarding is currently only available for Linux and MacOS systems. See our documentation for information on streaming log files to Elastic from a Windows system.',
}
)}
</p>
</EuiText>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButton
iconSide="right"
iconType="popout"
color="primary"
href={docsLink}
target="_blank"
style={{ width: 'fit-content' }}
>
{i18n.translate(
'xpack.observability_onboarding.windows.installStep.link.label',
{ defaultMessage: 'Read docs' }
)}
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
);
}

7
x-pack/plugins/observability_onboarding/public/routes/templates/system_logs.tsx
View file

@ -46,7 +46,14 @@ export function SystemLogs({ children }: Props) {
</EuiTitle>
</EuiFlexItem>
<EuiFlexItem grow={1} style={{ width: '50%' }}>
<div
style={{
display: 'flex',
flexFlow: 'column nowrap',
}}
>
{children}
</div>
</EuiFlexItem>
</EuiFlexGroup>
</WizardProvider>