[APM] Fixes navigation bugs in APM tutorial/onboarding (#119249) (#119370)

# Conflicts: # x-pack/plugins/apm/public/tutorial/tutorial_fleet_instructions/index.tsx Co-authored-by: Oliver Gupte <ogupte@users.noreply.github.com>
2025-04-23 17:28:26 -04:00 · 2021-11-22 15:23:58 -05:00 · 2021-11-22 15:23:58 -05:00 · a1f556104f
commit a1f556104f
parent 5345b4b68b
8 changed files with 198 additions and 136 deletions
--- a/src/plugins/home/public/application/components/tutorial/instruction_set.js
+++ b/src/plugins/home/public/application/components/tutorial/instruction_set.js
@ -37,6 +37,7 @@ class InstructionSetUi extends React.Component {
      return {
        id: variant.id,
        name: getDisplayText(variant.id),
+        initialSelected: variant.initialSelected,
      };
    });

@ -45,7 +46,8 @@ class InstructionSetUi extends React.Component {
    };

    if (this.tabs.length > 0) {
-      this.state.selectedTabId = this.tabs[0].id;
+      this.state.selectedTabId =
+        this.tabs.find(({ initialSelected }) => initialSelected)?.id ?? this.tabs[0].id;
    }
  }

@ -298,6 +300,7 @@ const instructionShape = PropTypes.shape({
 const instructionVariantShape = PropTypes.shape({
  id: PropTypes.string.isRequired,
  instructions: PropTypes.arrayOf(instructionShape).isRequired,
+  initialSelected: PropTypes.bool,
 });

 const statusCheckConfigShape = PropTypes.shape({
--- a/src/plugins/home/server/services/tutorials/lib/tutorial_schema.ts
+++ b/src/plugins/home/server/services/tutorials/lib/tutorial_schema.ts
@ -63,6 +63,7 @@ export type Instruction = TypeOf<typeof instructionSchema>;
 const instructionVariantSchema = schema.object({
  id: schema.string(),
  instructions: schema.arrayOf(instructionSchema),
+  initialSelected: schema.maybe(schema.boolean()),
 });

 export type InstructionVariant = TypeOf<typeof instructionVariantSchema>;
--- a/x-pack/plugins/apm/public/tutorial/tutorial_fleet_instructions/index.tsx
+++ b/x-pack/plugins/apm/public/tutorial/tutorial_fleet_instructions/index.tsx
@ -34,7 +34,7 @@ const CentralizedContainer = styled.div`
  align-items: center;
 `;

-type APIResponseType = APIReturnType<'GET /internal/apm/fleet/has_data'>;
+type APIResponseType = APIReturnType<'GET /internal/apm/fleet/migration_check'>;

 function TutorialFleetInstructions({ http, basePath, isDarkTheme }: Props) {
  const [data, setData] = useState<APIResponseType | undefined>();
@ -44,7 +44,7 @@ function TutorialFleetInstructions({ http, basePath, isDarkTheme }: Props) {
    async function fetchData() {
      setIsLoading(true);
      try {
-        const response = await http.get('/internal/apm/fleet/has_data');
+        const response = await http.get('/internal/apm/fleet/migration_check');
        setData(response as APIResponseType);
      } catch (e) {
        setIsLoading(false);
@ -55,6 +55,22 @@ function TutorialFleetInstructions({ http, basePath, isDarkTheme }: Props) {
    fetchData();
  }, [http]);

+  const hasApmIntegrations = !!data?.has_apm_integrations;
+  const cloudApmMigrationEnabled = !!data?.cloud_apm_migration_enabled;
+  const hasCloudAgentPolicy = !!data?.has_cloud_agent_policy;
+  const cloudApmPackagePolicy = data?.cloud_apm_package_policy;
+  const hasCloudApmPackagePolicy = !!cloudApmPackagePolicy;
+  const hasRequiredRole = !!data?.has_required_role;
+  const shouldLinkToMigration =
+    cloudApmMigrationEnabled &&
+    hasCloudAgentPolicy &&
+    !hasCloudApmPackagePolicy &&
+    hasRequiredRole;
+
+  const apmIntegrationHref = shouldLinkToMigration
+    ? `${basePath}/app/apm/settings/schema`
+    : `${basePath}/app/integrations/detail/apm-${SUPPORTED_APM_PACKAGE_VERSION}/overview`;
+
  if (isLoading) {
    return (
      <CentralizedContainer>
@ -64,9 +80,13 @@ function TutorialFleetInstructions({ http, basePath, isDarkTheme }: Props) {
  }

  // When APM integration is enable in Fleet
-  if (data?.hasData) {
+  if (hasApmIntegrations) {
    return (
-      <EuiButton iconType="gear" fill href={`${basePath}/app/fleet#/policies`}>
+      <EuiButton
+        iconType="gear"
+        fill
+        href={`${basePath}/app/integrations/detail/apm-${SUPPORTED_APM_PACKAGE_VERSION}/policies`}
+      >
        {i18n.translate(
          'xpack.apm.tutorial.apmServer.fleet.manageApmIntegration.button',
          {
@ -98,8 +118,8 @@ function TutorialFleetInstructions({ http, basePath, isDarkTheme }: Props) {
              <>
                <EuiButton
                  iconType="analyzeEvent"
-                  color="secondary"
-                  href={`${basePath}/app/integrations#/detail/apm-${SUPPORTED_APM_PACKAGE_VERSION}/overview`}
+                  color="success"
+                  href={apmIntegrationHref}
                >
                  {i18n.translate(
                    'xpack.apm.tutorial.apmServer.fleet.apmIntegration.button',
--- a/x-pack/plugins/apm/server/routes/fleet/route.ts
+++ b/x-pack/plugins/apm/server/routes/fleet/route.ts
@ -128,14 +128,16 @@ const getMigrationCheckRoute = createApmServerRoute({
  endpoint: 'GET /internal/apm/fleet/migration_check',
  options: { tags: ['access:apm'] },
  handler: async (resources) => {
-    const { plugins, context, config, request } = resources;
+    const { core, plugins, context, config, request } = resources;
    const cloudApmMigrationEnabled = config.agent.migrations.enabled;
    if (!plugins.fleet || !plugins.security) {
      throw Boom.internal(FLEET_SECURITY_REQUIRED_MESSAGE);
    }
    const savedObjectsClient = context.core.savedObjects.client;
-    const fleetPluginStart = await plugins.fleet.start();
-    const securityPluginStart = await plugins.security.start();
+    const [fleetPluginStart, securityPluginStart] = await Promise.all([
+      plugins.fleet.start(),
+      plugins.security.start(),
+    ]);
    const hasRequiredRole = isSuperuser({ securityPluginStart, request });
    const cloudAgentPolicy = hasRequiredRole
      ? await getCloudAgentPolicy({
@ -144,12 +146,17 @@ const getMigrationCheckRoute = createApmServerRoute({
        })
      : undefined;
    const apmPackagePolicy = getApmPackagePolicy(cloudAgentPolicy);
+    const packagePolicies = await getApmPackgePolicies({
+      core,
+      fleetPluginStart,
+    });
    return {
      has_cloud_agent_policy: !!cloudAgentPolicy,
      has_cloud_apm_package_policy: !!apmPackagePolicy,
      cloud_apm_migration_enabled: cloudApmMigrationEnabled,
      has_required_role: hasRequiredRole,
      cloud_apm_package_policy: apmPackagePolicy,
+      has_apm_integrations: packagePolicies.total > 0,
    };
  },
 });
--- a/x-pack/plugins/apm/server/tutorial/envs/elastic_cloud.ts
+++ b/x-pack/plugins/apm/server/tutorial/envs/elastic_cloud.ts
@ -25,10 +25,18 @@ import {
  createPhpAgentInstructions,
 } from '../../../common/tutorial/instructions/apm_agent_instructions';
 import { CloudSetup } from '../../../../cloud/server';
+import { APMConfig } from '../..';
+import { getOnPremApmServerInstructionSet } from './on_prem_apm_server_instruction_set';

-export function createElasticCloudInstructions(
-  cloudSetup?: CloudSetup
-): TutorialSchema['elasticCloud'] {
+export function createElasticCloudInstructions({
+  cloudSetup,
+  apmConfig,
+  isFleetPluginEnabled,
+}: {
+  cloudSetup?: CloudSetup;
+  apmConfig: APMConfig;
+  isFleetPluginEnabled: boolean;
+}): TutorialSchema['elasticCloud'] {
  const apmServerUrl = cloudSetup?.apm.url;
  const instructionSets = [];

@ -36,6 +44,9 @@ export function createElasticCloudInstructions(
    instructionSets.push(getApmServerInstructionSet(cloudSetup));
  }

+  instructionSets.push(
+    getOnPremApmServerInstructionSet({ apmConfig, isFleetPluginEnabled })
+  );
  instructionSets.push(getApmAgentInstructionSet(cloudSetup));

  return {
--- a/x-pack/plugins/apm/server/tutorial/envs/on_prem.ts
+++ b/x-pack/plugins/apm/server/tutorial/envs/on_prem.ts
@ -23,15 +23,7 @@ import {
  createRackAgentInstructions,
  createRailsAgentInstructions,
 } from '../../../common/tutorial/instructions/apm_agent_instructions';
-import {
-  createDownloadServerDeb,
-  createDownloadServerOsx,
-  createDownloadServerRpm,
-  createEditConfig,
-  createStartServerUnix,
-  createStartServerUnixSysv,
-  createWindowsServerInstructions,
-} from '../../../common/tutorial/instructions/apm_server_instructions';
+import { getOnPremApmServerInstructionSet } from './on_prem_apm_server_instruction_set';

 export function onPremInstructions({
  apmConfig,
@ -40,121 +32,9 @@ export function onPremInstructions({
  apmConfig: APMConfig;
  isFleetPluginEnabled: boolean;
 }): InstructionsSchema {
-  const EDIT_CONFIG = createEditConfig();
-  const START_SERVER_UNIX = createStartServerUnix();
-  const START_SERVER_UNIX_SYSV = createStartServerUnixSysv();
-
  return {
    instructionSets: [
-      {
-        title: i18n.translate('xpack.apm.tutorial.apmServer.title', {
-          defaultMessage: 'APM Server',
-        }),
-        callOut: {
-          title: i18n.translate('xpack.apm.tutorial.apmServer.callOut.title', {
-            defaultMessage: 'Important: Updating to 7.0 or higher',
-          }),
-          message: i18n.translate(
-            'xpack.apm.tutorial.apmServer.callOut.message',
-            {
-              defaultMessage: `Please make sure your APM Server is updated to 7.0 or higher. \
-            You can also migrate your 6.x data with the migration assistant found in Kibana's management section.`,
-            }
-          ),
-          iconType: 'alert',
-        },
-        instructionVariants: [
-          {
-            id: INSTRUCTION_VARIANT.DEB,
-            instructions: [
-              createDownloadServerDeb(),
-              EDIT_CONFIG,
-              START_SERVER_UNIX_SYSV,
-            ],
-          },
-          {
-            id: INSTRUCTION_VARIANT.RPM,
-            instructions: [
-              createDownloadServerRpm(),
-              EDIT_CONFIG,
-              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(
-            'xpack.apm.tutorial.apmServer.statusCheck.title',
-            {
-              defaultMessage: 'APM Server status',
-            }
-          ),
-          text: i18n.translate(
-            'xpack.apm.tutorial.apmServer.statusCheck.text',
-            {
-              defaultMessage:
-                'Make sure APM Server is running before you start implementing the APM agents.',
-            }
-          ),
-          btnLabel: i18n.translate(
-            'xpack.apm.tutorial.apmServer.statusCheck.btnLabel',
-            {
-              defaultMessage: 'Check APM Server status',
-            }
-          ),
-          success: i18n.translate(
-            'xpack.apm.tutorial.apmServer.statusCheck.successMessage',
-            {
-              defaultMessage: 'You have correctly setup APM Server',
-            }
-          ),
-          error: i18n.translate(
-            'xpack.apm.tutorial.apmServer.statusCheck.errorMessage',
-            {
-              defaultMessage:
-                'No APM Server detected. Please make sure it is running and you have updated to 7.0 or higher.',
-            }
-          ),
-          esHitsCheck: {
-            index: apmConfig.indices.onboarding,
-            query: {
-              bool: {
-                filter: [
-                  { term: { 'processor.event': 'onboarding' } },
-                  { range: { 'observer.version_major': { gte: 7 } } },
-                ],
-              },
-            },
-          },
-        },
-      },
+      getOnPremApmServerInstructionSet({ apmConfig, isFleetPluginEnabled }),
      {
        title: i18n.translate('xpack.apm.tutorial.apmAgents.title', {
          defaultMessage: 'APM Agents',
--- a/x-pack/plugins/apm/server/tutorial/envs/on_prem_apm_server_instruction_set.ts
+++ b/x-pack/plugins/apm/server/tutorial/envs/on_prem_apm_server_instruction_set.ts
@ -0,0 +1,136 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+import { APMConfig } from '../..';
+import {
+  InstructionsSchema,
+  INSTRUCTION_VARIANT,
+} from '../../../../../../src/plugins/home/server';
+import {
+  createDownloadServerDeb,
+  createDownloadServerOsx,
+  createDownloadServerRpm,
+  createEditConfig,
+  createStartServerUnix,
+  createStartServerUnixSysv,
+  createWindowsServerInstructions,
+} from '../../../common/tutorial/instructions/apm_server_instructions';
+
+const EDIT_CONFIG = createEditConfig();
+const START_SERVER_UNIX = createStartServerUnix();
+const START_SERVER_UNIX_SYSV = createStartServerUnixSysv();
+
+export function getOnPremApmServerInstructionSet({
+  apmConfig,
+  isFleetPluginEnabled,
+}: {
+  apmConfig: APMConfig;
+  isFleetPluginEnabled: boolean;
+}): InstructionsSchema['instructionSets'][0] {
+  return {
+    title: i18n.translate('xpack.apm.tutorial.apmServer.title', {
+      defaultMessage: 'APM Server',
+    }),
+    callOut: {
+      title: i18n.translate('xpack.apm.tutorial.apmServer.callOut.title', {
+        defaultMessage: 'Important: Updating to 7.0 or higher',
+      }),
+      message: i18n.translate('xpack.apm.tutorial.apmServer.callOut.message', {
+        defaultMessage: `Please make sure your APM Server is updated to 7.0 or higher. \
+            You can also migrate your 6.x data with the migration assistant found in Kibana's management section.`,
+      }),
+      iconType: 'alert',
+    },
+    instructionVariants: [
+      {
+        id: INSTRUCTION_VARIANT.DEB,
+        instructions: [
+          createDownloadServerDeb(),
+          EDIT_CONFIG,
+          START_SERVER_UNIX_SYSV,
+        ],
+      },
+      {
+        id: INSTRUCTION_VARIANT.RPM,
+        instructions: [
+          createDownloadServerRpm(),
+          EDIT_CONFIG,
+          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',
+                },
+              ],
+              initialSelected: true,
+            },
+          ]
+        : []),
+    ],
+    statusCheck: {
+      title: i18n.translate('xpack.apm.tutorial.apmServer.statusCheck.title', {
+        defaultMessage: 'APM Server status',
+      }),
+      text: i18n.translate('xpack.apm.tutorial.apmServer.statusCheck.text', {
+        defaultMessage:
+          'Make sure APM Server is running before you start implementing the APM agents.',
+      }),
+      btnLabel: i18n.translate(
+        'xpack.apm.tutorial.apmServer.statusCheck.btnLabel',
+        {
+          defaultMessage: 'Check APM Server status',
+        }
+      ),
+      success: i18n.translate(
+        'xpack.apm.tutorial.apmServer.statusCheck.successMessage',
+        {
+          defaultMessage: 'You have correctly setup APM Server',
+        }
+      ),
+      error: i18n.translate(
+        'xpack.apm.tutorial.apmServer.statusCheck.errorMessage',
+        {
+          defaultMessage:
+            'No APM Server detected. Please make sure it is running and you have updated to 7.0 or higher.',
+        }
+      ),
+      esHitsCheck: {
+        index: apmConfig.indices.onboarding,
+        query: {
+          bool: {
+            filter: [
+              { term: { 'processor.event': 'onboarding' } },
+              { range: { 'observer.version_major': { gte: 7 } } },
+            ],
+          },
+        },
+      },
+    },
+  };
+}
--- a/x-pack/plugins/apm/server/tutorial/index.ts
+++ b/x-pack/plugins/apm/server/tutorial/index.ts
@ -107,7 +107,11 @@ It allows you to monitor the performance of thousands of applications in real ti
      artifacts,
      customStatusCheckName: 'apm_fleet_server_status_check',
      onPrem: onPremInstructions({ apmConfig, isFleetPluginEnabled }),
-      elasticCloud: createElasticCloudInstructions(cloud),
+      elasticCloud: createElasticCloudInstructions({
+        apmConfig,
+        isFleetPluginEnabled,
+        cloudSetup: cloud,
+      }),
      previewImagePath: '/plugins/apm/assets/apm.png',
      savedObjects,
      savedObjectsInstallMsg: i18n.translate(