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

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>
2025-04-24 17:59:23 -04:00 · 2023-08-14 20:18:43 +02:00 · 2023-08-14 20:18:43 +02:00 · a488732161
commit a488732161
parent bd6d65591a
5 changed files with 244 additions and 128 deletions
--- a/x-pack/plugins/observability_onboarding/public/components/app/custom_logs/wizard/install_elastic_agent.tsx
+++ b/x-pack/plugins/observability_onboarding/public/components/app/custom_logs/wizard/install_elastic_agent.tsx
@ -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)}
--- a/x-pack/plugins/observability_onboarding/public/components/app/system_logs/install_elastic_agent.tsx
+++ b/x-pack/plugins/observability_onboarding/public/components/app/system_logs/install_elastic_agent.tsx
@ -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}
--- a/x-pack/plugins/observability_onboarding/public/components/shared/install_elastic_agent_steps.tsx
+++ b/x-pack/plugins/observability_onboarding/public/components/shared/install_elastic_agent_steps.tsx
@ -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,9 +77,134 @@ 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);
+  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 = (
+    <>
+      <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,
+                selectedPlatform
+              );
+              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={[
@ -146,7 +273,7 @@ export function InstallElasticAgentSteps<PlatformId extends string>({
                }
                checked={autoDownloadConfig}
                onChange={onToggleAutoDownloadConfig}
-                disabled={isInstallStarted}
+                disabled={disableSteps || isInstallStarted}
              />
              <EuiSpacer size="l" />
              {autoDownloadConfig && (
@ -186,38 +313,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}
            </>
          ),
        },
@ -226,88 +322,14 @@ 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,
+        })),
      ]}
    />
  );
@ -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',
+        },
      }
    ),
  },
-};
+});
--- a/x-pack/plugins/observability_onboarding/public/components/shared/windows_install_step.tsx
+++ b/x-pack/plugins/observability_onboarding/public/components/shared/windows_install_step.tsx
@ -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>
+  );
+}
--- a/x-pack/plugins/observability_onboarding/public/routes/templates/system_logs.tsx
+++ b/x-pack/plugins/observability_onboarding/public/routes/templates/system_logs.tsx
@ -46,7 +46,14 @@ export function SystemLogs({ children }: Props) {
          </EuiTitle>
        </EuiFlexItem>
        <EuiFlexItem grow={1} style={{ width: '50%' }}>
-          {children}
+          <div
+            style={{
+              display: 'flex',
+              flexFlow: 'column nowrap',
+            }}
+          >
+            {children}
+          </div>
        </EuiFlexItem>
      </EuiFlexGroup>
    </WizardProvider>