[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>

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)}

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: i18n.translate(
-            { label: 'Windows', id: 'windows', isDisabled: true },
+                '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}

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>
+              {customInstallStep || installStepDefault}
-                {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>
-                </>
-              )}
             </>
           ),
         },
@@ -226,88 +322,14 @@ export function InstallElasticAgentSteps<PlatformId extends string>({
             'xpack.observability_onboarding.installElasticAgent.configureStep.title',
             { defaultMessage: 'Configure the Elastic agent' }
           ),
-          status: configureAgentStatus,
+          status: disableSteps ? 'disabled' : configureAgentStatus,
-          children: (
+          children: disableSteps ? <></> : 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}
-            </>
-          ),
         },
-        ...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',
+        },
       }
     ),
   },
-};
+});

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>
+  );
+}

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>