Skip to content

[Logs onboarding] Install steps for windows #163735

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
yngrdyn merged 12 commits into from
Aug 14, 2023
Merged

[Logs onboarding] Install steps for windows #163735

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
e6f359c
Enabling windows tab with docs link
yngrdyn Aug 11, 2023
6dba57e
[CI] Auto-commit changed files from 'node scripts/precommit_hook.js -…
kibanamachine Aug 11, 2023
0e28365
Returning proper path depending of selectedPlatform
yngrdyn Aug 11, 2023
8bdc0e3
Merge branch '162976-logs-onboarding-instructions-to-install-the-elas…
yngrdyn Aug 11, 2023
c4a370b
[CI] Auto-commit changed files from 'node scripts/precommit_hook.js -…
kibanamachine Aug 11, 2023
a450970
Passing docLink as parameter to WindowsInstallStep
yngrdyn Aug 14, 2023
908dfa1
Merge branch 'main' into 162976-logs-onboarding-instructions-to-insta…
yngrdyn Aug 14, 2023
4cfea7e
[CI] Auto-commit changed files from 'node scripts/eslint --no-cache -…
kibanamachine Aug 14, 2023
38b6526
Merge remote-tracking branch 'origin/main' into 162976-logs-onboardin…
yngrdyn Aug 14, 2023
f89cdf0
Adding a more specific link to documentation from starting system log…
yngrdyn Aug 14, 2023
8296d86
Merge remote-tracking branch 'origin/main' into 162976-logs-onboardin…
yngrdyn Aug 14, 2023
faec2f3
Merge branch 'main' into 162976-logs-onboarding-instructions-to-insta…
yngrdyn Aug 14, 2023
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
4 changes: 3 additions & 1 deletion ...servability_onboarding/public/components/app/custom_logs/wizard/install_elastic_agent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ import {
import { ApiKeyBanner } from './api_key_banner';
import { BackButton } from './back_button';
import { getDiscoverNavigationParams } from '../../utils';
import { WindowsInstallStep } from '../../../shared/windows_install_step';

export function InstallElasticAgent() {
const {
Expand Down Expand Up @@ -307,7 +308,8 @@ export function InstallElasticAgent() {
{ defaultMessage: 'Windows' }
),
id: 'windows',
isDisabled: true,
disableSteps: true,
children: <WindowsInstallStep />
},
]}
onSelectPlatform={(id) => setElasticAgentPlatform(id)}
Expand Down
27 changes: 24 additions & 3 deletions ...gins/observability_onboarding/public/components/app/system_logs/install_elastic_agent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,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';

export function InstallElasticAgent() {
const {
Expand Down Expand Up @@ -244,9 +245,29 @@ 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 />
},
]}
onSelectPlatform={(id) => setElasticAgentPlatform(id)}
selectedPlatform={elasticAgentPlatform}
Expand Down
244 changes: 129 additions & 115 deletions ...plugins/observability_onboarding/public/components/shared/install_elastic_agent_steps.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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;
Expand Down Expand Up @@ -78,6 +80,127 @@ export function InstallElasticAgentSteps<PlatformId extends string>({
Object.keys(PROGRESS_STEP_TITLES)
).length > 0;
const autoDownloadConfigStep = getStep('ea-config', installProgressSteps);

const customInstallStep = installAgentPlatformOptions.find((step) => step.id === selectedPlatform)?.children;
const disableSteps = installAgentPlatformOptions.find((step) => step.id === selectedPlatform)?.disableSteps;

const installStepDefault = (
<>
<EuiCodeBlock language="bash" isCopyable>
{installAgentCommand}
</EuiCodeBlock>
<EuiSpacer size="m" />
{showInstallProgressSteps && (
<>
<EuiSpacer size="m" />
<EuiFlexGroup direction="column" gutterSize="m">
{(
[
'ea-download',
'ea-extract',
'ea-install',
'ea-status',
] as const
).map((stepId) => {
const { title, status, message } = getStep(
stepId,
installProgressSteps
);
return (
<StepStatus
key={stepId}
status={status}
title={title}
message={message}
/>
);
})}
</EuiFlexGroup>
</>
)}
</>
)

const configureStep = (
<>
<EuiText color="subdued">
<p>
{autoDownloadConfig
? i18n.translate(
'xpack.observability_onboarding.installElasticAgent.configStep.auto.description',
{
defaultMessage:
'The agent config below will be downloaded by the install script and written to ({configPath}). This will overwrite any existing agent configuration.',
values: {
configPath: '/opt/Elastic/Agent/elastic-agent.yml',
},
}
)
: i18n.translate(
'xpack.observability_onboarding.installElasticAgent.configStep.manual.description',
{
defaultMessage:
'Add the following configuration to {configPath} on the host where you installed the Elastic agent.',
values: {
configPath: '/opt/Elastic/Agent/elastic-agent.yml',
},
}
)}
</p>
</EuiText>
<EuiSpacer size="m" />
<EuiSkeletonRectangle
isLoading={false}
contentAriaLabel={i18n.translate(
'xpack.observability_onboarding.installElasticAgent.configStep.yamlCodeBlockdescription',
{ defaultMessage: 'Elastic agent yaml configuration' }
)}
width="100%"
height={300}
borderRadius="s"
>
<EuiCodeBlock
language="yaml"
isCopyable
style={{
opacity: autoDownloadConfig ? '.5' : '1',
}}
>
{configureAgentYaml}
</EuiCodeBlock>
</EuiSkeletonRectangle>
<EuiSpacer size="m" />
<EuiButton
iconType="download"
color="primary"
href={`data:application/yaml;base64,${Buffer.from(
configureAgentYaml,
'utf8'
).toString('base64')}`}
download="elastic-agent.yml"
target="_blank"
isDisabled={autoDownloadConfig}
>
{i18n.translate(
'xpack.observability_onboarding.installElasticAgent.configStep.downloadConfigButton',
{ defaultMessage: 'Download config file' }
)}
</EuiButton>
{showInstallProgressSteps && autoDownloadConfig ? (
<>
<EuiSpacer size="m" />
<EuiFlexGroup direction="column">
<StepStatus
status={autoDownloadConfigStep.status}
title={autoDownloadConfigStep.title}
message={autoDownloadConfigStep.message}
/>
</EuiFlexGroup>
</>
) : null}
</>
);

return (
<EuiSteps
steps={[
Expand Down Expand Up @@ -146,7 +269,7 @@ export function InstallElasticAgentSteps<PlatformId extends string>({
}
checked={autoDownloadConfig}
onChange={onToggleAutoDownloadConfig}
disabled={isInstallStarted}
disabled={disableSteps || isInstallStarted}
/>
<EuiSpacer size="l" />
{autoDownloadConfig && (
Expand Down Expand Up @@ -186,38 +309,7 @@ export function InstallElasticAgentSteps<PlatformId extends string>({
isDisabled={isInstallStarted}
/>
<EuiSpacer size="m" />
<EuiCodeBlock language="bash" isCopyable>
{installAgentCommand}
</EuiCodeBlock>
<EuiSpacer size="m" />
{showInstallProgressSteps && (
<>
<EuiSpacer size="m" />
<EuiFlexGroup direction="column" gutterSize="m">
{(
[
'ea-download',
'ea-extract',
'ea-install',
'ea-status',
] as const
).map((stepId) => {
const { title, status, message } = getStep(
stepId,
installProgressSteps
);
return (
<StepStatus
key={stepId}
status={status}
title={title}
message={message}
/>
);
})}
</EuiFlexGroup>
</>
)}
{customInstallStep || installStepDefault}
</>
),
},
Expand All @@ -226,88 +318,10 @@ export function InstallElasticAgentSteps<PlatformId extends string>({
'xpack.observability_onboarding.installElasticAgent.configureStep.title',
{ defaultMessage: 'Configure the Elastic agent' }
),
status: configureAgentStatus,
children: (
<>
<EuiText color="subdued">
<p>
{autoDownloadConfig
? i18n.translate(
'xpack.observability_onboarding.installElasticAgent.configStep.auto.description',
{
defaultMessage:
'The agent config below will be downloaded by the install script and written to ({configPath}). This will overwrite any existing agent configuration.',
values: {
configPath: '/opt/Elastic/Agent/elastic-agent.yml',
},
}
)
: i18n.translate(
'xpack.observability_onboarding.installElasticAgent.configStep.manual.description',
{
defaultMessage:
'Add the following configuration to {configPath} on the host where you installed the Elastic agent.',
values: {
configPath: '/opt/Elastic/Agent/elastic-agent.yml',
},
}
)}
</p>
</EuiText>
<EuiSpacer size="m" />
<EuiSkeletonRectangle
isLoading={false}
contentAriaLabel={i18n.translate(
'xpack.observability_onboarding.installElasticAgent.configStep.yamlCodeBlockdescription',
{ defaultMessage: 'Elastic agent yaml configuration' }
)}
width="100%"
height={300}
borderRadius="s"
>
<EuiCodeBlock
language="yaml"
isCopyable
style={{
opacity: autoDownloadConfig ? '.5' : '1',
}}
>
{configureAgentYaml}
</EuiCodeBlock>
</EuiSkeletonRectangle>
<EuiSpacer size="m" />
<EuiButton
iconType="download"
color="primary"
href={`data:application/yaml;base64,${Buffer.from(
configureAgentYaml,
'utf8'
).toString('base64')}`}
download="elastic-agent.yml"
target="_blank"
isDisabled={autoDownloadConfig}
>
{i18n.translate(
'xpack.observability_onboarding.installElasticAgent.configStep.downloadConfigButton',
{ defaultMessage: 'Download config file' }
)}
</EuiButton>
{showInstallProgressSteps && autoDownloadConfig ? (
<>
<EuiSpacer size="m" />
<EuiFlexGroup direction="column">
<StepStatus
status={autoDownloadConfigStep.status}
title={autoDownloadConfigStep.title}
message={autoDownloadConfigStep.message}
/>
</EuiFlexGroup>
</>
) : null}
</>
),
status: disableSteps ? 'disabled' : configureAgentStatus,
children: disableSteps ? <></> : configureStep,
},
...appendedSteps.map((euiStep) => ({ children: null, ...euiStep })),
...appendedSteps.map((euiStep) => ({ children: null, ...euiStep, status: disableSteps ? 'disabled' : euiStep.status })),
]}
/>
);
Expand Down
42 changes: 42 additions & 0 deletions x-pack/plugins/observability_onboarding/public/components/shared/windows_install_step.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
/*
* 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, EuiLink, EuiText } from "@elastic/eui";
import { i18n } from "@kbn/i18n";
import React from "react";

export function WindowsInstallStep() {
return (
<EuiFlexGroup direction="column">
<EuiFlexItem grow={false}>
<EuiText color="subdued">
<p>
{i18n.translate(
'xpack.observability_onboarding.windows.installStep.description',
{ defaultMessage: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.' }
Comment thread
yngrdyn marked this conversation as resolved.
Outdated
)}
</p>
</EuiText>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButton
iconSide="right"
iconType="popout"
color="primary"
href="https://www.elastic.co/guide/en/fleet/current/install-standalone-elastic-agent.html"

@yngrdyn yngrdyn Aug 11, 2023 •
edited
Loading

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

@mdbirnstiehl is this the right link?

@mdbirnstiehl mdbirnstiehl Aug 11, 2023

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

I think we could send them to the Stream a log file docs: https://www.elastic.co/guide/en/observability/current/logs-stream.html

I think this will work better as long as we are ok with them manually configuring their agent without integrations and they want to use a standalone agent.

@mdbirnstiehl mdbirnstiehl Aug 11, 2023

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

I just realized this is for the system logs and not the stream logs onboarding like in the example we looked at in Slack. Will this message be used for both? If this is just about installing the agent, we can use the link you put originally.

@yngrdyn yngrdyn Aug 14, 2023

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

I placed the component in both flows: system and custom. For custom I will pass the link you referred to above.
We don't have any specific for system onboarding though

@mdbirnstiehl mdbirnstiehl Aug 14, 2023

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Makes sense. That is probably the best link we have at this point for installing the agent then. I wonder if it would make sense to also point to the System integration?

@yngrdyn yngrdyn Aug 14, 2023

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

I found https://www.elastic.co/guide/en/welcome-to-elastic/current/getting-started-observability.html, would that be a good entry point for documentation? We can replace the generic about installing standalone agent with this one if that one is too generic

@mdbirnstiehl mdbirnstiehl Aug 14, 2023

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Ah yes! that is probably a much better place for them to get started for the system logs.

@yngrdyn yngrdyn Aug 14, 2023

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Addressed in f89cdf0.

target="_blank"
style={{ width: 'fit-content' }}
>
{i18n.translate(
'xpack.observability_onboarding.windows.installStep.link.label',
{ defaultMessage: 'Read docs' }
)}
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
);
}
Loading