[APM] Fixes isntructions for the APM integration tutorial (#118256) (#…

…118645) Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
elastic · Nov 16, 2021 · 809bdad · 809bdad
1 parent 8873a48
commit 809bdad
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 45 deletions.
diff --git a/src/plugins/home/common/instruction_variant.ts b/src/plugins/home/common/instruction_variant.ts
@@ -32,8 +32,8 @@ export const INSTRUCTION_VARIANT = {
 const DISPLAY_MAP = {
   [INSTRUCTION_VARIANT.ESC]: 'Elastic Cloud',
   [INSTRUCTION_VARIANT.OSX]: 'macOS',
-  [INSTRUCTION_VARIANT.DEB]: 'DEB',
-  [INSTRUCTION_VARIANT.RPM]: 'RPM',
+  [INSTRUCTION_VARIANT.DEB]: 'Linux DEB',
+  [INSTRUCTION_VARIANT.RPM]: 'Linux RPM',
   [INSTRUCTION_VARIANT.DOCKER]: 'Docker',
   [INSTRUCTION_VARIANT.WINDOWS]: 'Windows',
   [INSTRUCTION_VARIANT.NODE]: 'Node.js',

diff --git a/x-pack/plugins/apm/public/tutorial/tutorial_fleet_instructions/index.tsx b/x-pack/plugins/apm/public/tutorial/tutorial_fleet_instructions/index.tsx
@@ -4,13 +4,17 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-import { EuiButton } from '@elastic/eui';
-import { EuiFlexItem } from '@elastic/eui';
-import { EuiFlexGroup } from '@elastic/eui';
-import { EuiPanel } from '@elastic/eui';
-import { EuiCard } from '@elastic/eui';
-import { EuiImage } from '@elastic/eui';
-import { EuiLoadingSpinner } from '@elastic/eui';
+import {
+  EuiButton,
+  EuiFlexItem,
+  EuiFlexGroup,
+  EuiPanel,
+  EuiCard,
+  EuiImage,
+  EuiLoadingSpinner,
+  EuiText,
+  EuiSpacer,
+} from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { HttpStart } from 'kibana/public';
 import React, { useEffect, useState } from 'react';
@@ -90,18 +94,32 @@ function TutorialFleetInstructions({ http, basePath, isDarkTheme }: Props) {
               }
             )}
             footer={
-              <EuiButton
-                iconType="analyzeEvent"
-                color="secondary"
-                href={`${basePath}/app/integrations#/detail/apm-0.4.0/overview`}
-              >
-                {i18n.translate(
-                  'xpack.apm.tutorial.apmServer.fleet.apmIntegration.button',
-                  {
-                    defaultMessage: 'APM integration',
-                  }
-                )}
-              </EuiButton>
+              <>
+                <EuiButton
+                  iconType="analyzeEvent"
+                  color="secondary"
+                  href={`${basePath}/app/integrations#/detail/apm-0.4.0/overview`}
+                >
+                  {i18n.translate(
+                    'xpack.apm.tutorial.apmServer.fleet.apmIntegration.button',
+                    {
+                      defaultMessage: 'APM integration',
+                    }
+                  )}
+                </EuiButton>
+                <EuiSpacer size="m" />
+                <EuiText size="s">
+                  <p>
+                    {i18n.translate(
+                      'xpack.apm.tutorial.apmServer.fleet.apmIntegration.description',
+                      {
+                        defaultMessage:
+                          'Fleet allows you to centrally manage Elastic Agents running the APM integration. The default option is to install a Fleet Server on a dedicated host. For setups without a dedicated host, we recommend following the instructions to install the standalone APM Server for your operating system by selecting the respective tab above.',
+                      }
+                    )}
+                  </p>
+                </EuiText>
+              </>
             }
           />
         </EuiFlexItem>

diff --git a/x-pack/plugins/apm/server/tutorial/envs/on_prem.ts b/x-pack/plugins/apm/server/tutorial/envs/on_prem.ts
@@ -64,30 +64,6 @@ export function onPremInstructions({
           iconType: 'alert',
         },
         instructionVariants: [
-          // hides fleet section when plugin is disabled
-          ...(isFleetPluginEnabled
-            ? [
-                {
-                  id: INSTRUCTION_VARIANT.FLEET,
-                  instructions: [
-                    {
-                      title: i18n.translate('xpack.apm.tutorial.fleet.title', {
-                        defaultMessage: 'Fleet',
-                      }),
-                      customComponentName: 'TutorialFleetInstructions',
-                    },
-                  ],
-                },
-              ]
-            : []),
-          {
-            id: INSTRUCTION_VARIANT.OSX,
-            instructions: [
-              createDownloadServerOsx(),
-              EDIT_CONFIG,
-              START_SERVER_UNIX,
-            ],
-          },
           {
             id: INSTRUCTION_VARIANT.DEB,
             instructions: [
@@ -104,10 +80,34 @@ export function onPremInstructions({
               START_SERVER_UNIX_SYSV,
             ],
           },
+          {
+            id: INSTRUCTION_VARIANT.OSX,
+            instructions: [
+              createDownloadServerOsx(),
+              EDIT_CONFIG,
+              START_SERVER_UNIX,
+            ],
+          },
           {
             id: INSTRUCTION_VARIANT.WINDOWS,
             instructions: createWindowsServerInstructions(),
           },
+          // hides fleet section when plugin is disabled
+          ...(isFleetPluginEnabled
+            ? [
+                {
+                  id: INSTRUCTION_VARIANT.FLEET,
+                  instructions: [
+                    {
+                      title: i18n.translate('xpack.apm.tutorial.fleet.title', {
+                        defaultMessage: 'Fleet',
+                      }),
+                      customComponentName: 'TutorialFleetInstructions',
+                    },
+                  ],
+                },
+              ]
+            : []),
         ],
         statusCheck: {
           title: i18n.translate(