[APM] Link to Fleet APM Server Configuration when managed by Elastic Agent w/Fleet

src/plugins/home/common/instruction_variant.ts

@@ -24,6 +24,7 @@ export const INSTRUCTION_VARIANT = {
   DOTNET: 'dotnet',
   LINUX: 'linux',
   PHP: 'php',
+  FLEET: 'fleet',
 };
 
 const DISPLAY_MAP = {
@@ -44,6 +45,7 @@ const DISPLAY_MAP = {
   [INSTRUCTION_VARIANT.DOTNET]: '.NET',
   [INSTRUCTION_VARIANT.LINUX]: 'Linux',
   [INSTRUCTION_VARIANT.PHP]: 'PHP',
+  [INSTRUCTION_VARIANT.FLEET]: 'Elastic APM (beta) in Fleet',
 };
 
 /**

src/plugins/home/public/application/application.tsx

@@ -10,7 +10,7 @@ import React from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
 import { i18n } from '@kbn/i18n';
 import { ScopedHistory, CoreStart } from 'kibana/public';
-import { KibanaContextProvider } from '../../../kibana_react/public';
+import { KibanaContextProvider, RedirectAppLinks } from '../../../kibana_react/public';
 // @ts-ignore
 import { HomeApp } from './components/home_app';
 import { getServices } from './kibana_services';
@@ -44,9 +44,11 @@ export const renderApp = async (
   });
 
   render(
-    <KibanaContextProvider services={{ ...coreStart }}>
-      <HomeApp directories={directories} solutions={solutions} />
-    </KibanaContextProvider>,
+    <RedirectAppLinks application={coreStart.application}>
+      <KibanaContextProvider services={{ ...coreStart }}>
+        <HomeApp directories={directories} solutions={solutions} />
+      </KibanaContextProvider>
+    </RedirectAppLinks>,
     element
   );
 

src/plugins/home/public/application/components/apm_fleet/index.tsx

@@ -0,0 +1,112 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+import {
+  EuiButton,
+  EuiCard,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiImage,
+  EuiLoadingSpinner,
+  EuiPanel,
+} from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { getServices } from '../../kibana_services';
+
+const CentralizedContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+interface APIResponse {
+  hasData: boolean;
+}
+
+export function APMFleet() {
+  const { http, getBasePath, uiSettings } = getServices();
+  const isDarkTheme = uiSettings.get('theme:darkMode');
+  const basePath = getBasePath();
+  const [data, setData] = useState<APIResponse | undefined>();
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    async function fetchData() {
+      setIsLoading(true);
+      try {
+        const response = await http.get('/api/apm/fleet/has_data');
+        setData(response as APIResponse);
+      } catch (e) {
+        // eslint-disable-next-line no-console
+        console.error('Error while fetching fleet details.', e);
+      }
+      setIsLoading(false);
+    }
+    fetchData();
+  }, [http]);
+
+  if (isLoading) {
+    return (
+      <CentralizedContainer>
+        <EuiLoadingSpinner />
+      </CentralizedContainer>
+    );
+  }
+  // When APM integration is enable in Fleet
+  if (data?.hasData) {
+    return (
+      <EuiButton iconType="gear" fill href={`${basePath}/app/fleet#/policies`}>
+        {i18n.translate('home.apm.tutorial.apmServer.fleet.manageApmIntegration.button', {
+          defaultMessage: 'Manage APM integration in Fleet',
+        })}
+      </EuiButton>
+    );
+  }
+  // When APM integration is not installed in Fleet or for some reason the API didn't work out
+  return (
+    <EuiPanel>
+      <EuiFlexGroup>
+        <EuiFlexItem grow={7}>
+          <EuiCard
+            display="plain"
+            textAlign="left"
+            title={i18n.translate('home.apm.tutorial.apmServer.fleet.title', {
+              defaultMessage: 'Elastic APM (beta) now available in Fleet!',
+            })}
+            description={i18n.translate('home.apm.tutorial.apmServer.fleet.message', {
+              defaultMessage:
+                'The APM integration installs Elasticsearch templates and Ingest Node pipelines for APM data.',
+            })}
+            footer={
+              <EuiButton
+                iconType="analyzeEvent"
+                color="secondary"
+                href={`${basePath}/app/fleet#/integrations/detail/apm-0.2.0/overview`}
+              >
+                {i18n.translate('home.apm.tutorial.apmServer.fleet.apmIntegration.button', {
+                  defaultMessage: 'APM integration',
+                })}
+              </EuiButton>
+            }
+          />
+        </EuiFlexItem>
+        <EuiFlexItem grow={3}>
+          <EuiImage
+            src={`${basePath}/plugins/apm/assets/${
+              isDarkTheme
+                ? 'illustration_integrations_darkmode.svg'
+                : 'illustration_integrations_lightmode.svg'
+            }`}
+            alt="Illustration"
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiPanel>
+  );
+}

src/plugins/home/public/application/components/tutorial/instruction.js

@@ -21,7 +21,16 @@ import {
 
 import { FormattedMessage } from '@kbn/i18n/react';
 
-export function Instruction({ commands, paramValues, textPost, textPre, replaceTemplateStrings }) {
+import { APMFleet } from '../apm_fleet';
+
+export function Instruction({
+  commands,
+  paramValues,
+  textPost,
+  textPre,
+  replaceTemplateStrings,
+  customComponent,
+}) {
   let pre;
   if (textPre) {
     pre = <Content text={replaceTemplateStrings(textPre)} />;
@@ -36,6 +45,10 @@ export function Instruction({ commands, paramValues, textPost, textPre, replaceT
       </div>
     );
   }
+  let custom;
+  if (customComponent === 'apm_fleet') {
+    custom = <APMFleet />;
+  }
 
   let copyButton;
   let commandBlock;
@@ -79,6 +92,8 @@ export function Instruction({ commands, paramValues, textPost, textPre, replaceT
 
       {post}
 
+      {custom}
+
       <EuiSpacer />
     </div>
   );
@@ -90,4 +105,5 @@ Instruction.propTypes = {
   textPost: PropTypes.string,
   textPre: PropTypes.string,
   replaceTemplateStrings: PropTypes.func.isRequired,
+  customComponent: PropTypes.string,
 };

src/plugins/home/public/application/components/tutorial/instruction_set.js

@@ -186,6 +186,7 @@ class InstructionSetUi extends React.Component {
           textPre={instruction.textPre}
           textPost={instruction.textPost}
           replaceTemplateStrings={this.props.replaceTemplateStrings}
+          customComponent={instruction.customComponent}
         />
       );
       return {
@@ -298,6 +299,7 @@ const statusCheckConfigShape = PropTypes.shape({
   title: PropTypes.string,
   text: PropTypes.string,
   btnLabel: PropTypes.string,
+  customStatusCheck: PropTypes.string,
 });
 
 InstructionSetUi.propTypes = {

src/plugins/home/public/application/components/tutorial/tutorial.js

@@ -171,17 +171,31 @@ class TutorialUi extends React.Component {
   checkInstructionSetStatus = async (instructionSetIndex) => {
     const instructionSet = this.getInstructionSets()[instructionSetIndex];
     const esHitsCheckConfig = _.get(instructionSet, `statusCheck.esHitsCheck`);
+    const customStatusCheck = _.get(instructionSet, `statusCheck.customStatusCheck`);
 
-    if (esHitsCheckConfig) {
-      const statusCheckState = await this.fetchEsHitsStatus(esHitsCheckConfig);
+    const [esHitsStatusCheck, apmFleetStatusCheck] = await Promise.all([
+      ...(esHitsCheckConfig ? [this.fetchEsHitsStatus(esHitsCheckConfig)] : []),
+      ...(customStatusCheck === 'apm-fleet-check' ? [this.fetchApmFleetStatus()] : []),
+    ]);
 
-      this.setState((prevState) => ({
-        statusCheckStates: {
-          ...prevState.statusCheckStates,
-          [instructionSetIndex]: statusCheckState,
-        },
-      }));
-    }
+    const nextStatusCheckState =
+      esHitsStatusCheck === StatusCheckStates.HAS_DATA ||
+      apmFleetStatusCheck === StatusCheckStates.HAS_DATA
+        ? StatusCheckStates.HAS_DATA
+        : StatusCheckStates.NO_DATA;
+
+    this.setState((prevState) => ({
+      statusCheckStates: {
+        ...prevState.statusCheckStates,
+        [instructionSetIndex]: nextStatusCheckState,
+      },
+    }));
+  };
+
+  fetchApmFleetStatus = async () => {
+    const { http } = getServices();
+    const response = await http.get('/api/apm/fleet/has_data');
+    return response?.hasData === true ? StatusCheckStates.HAS_DATA : StatusCheckStates.NO_DATA;
   };
 
   /**

src/plugins/home/server/index.ts

@@ -27,4 +27,4 @@ export const plugin = (initContext: PluginInitializerContext) => new HomeServerP
 
 export { INSTRUCTION_VARIANT } from '../common/instruction_variant';
 export { TutorialsCategory } from './services/tutorials';
-export type { ArtifactsSchema } from './services/tutorials';
+export type { ArtifactsSchema, TutorialSchema, InstructionSetSchema } from './services/tutorials';

src/plugins/home/server/services/tutorials/lib/tutorial_schema.ts

@@ -49,13 +49,15 @@ const statusCheckSchema = schema.object({
     index: schema.oneOf([schema.string(), schema.arrayOf(schema.string())]),
     query: schema.recordOf(schema.string(), schema.any()),
   }),
+  customStatusCheck: schema.maybe(schema.string()),
 });
 
 const instructionSchema = schema.object({
   title: schema.maybe(schema.string()),
   textPre: schema.maybe(schema.string()),
   commands: schema.maybe(schema.arrayOf(schema.string())),
   textPost: schema.maybe(schema.string()),
+  customComponent: schema.maybe(schema.string()),
 });
 export type Instruction = TypeOf<typeof instructionSchema>;
 

x-pack/plugins/apm/kibana.json

@@ -11,7 +11,8 @@
     "embeddable",
     "infra",
     "observability",
-    "ruleRegistry"
+    "ruleRegistry",
+    "fleet"
   ],
   "optionalPlugins": [
     "spaces",
@@ -42,4 +43,4 @@
     "ml",
     "observability"
   ]
-}
+}

x-pack/plugins/apm/server/plugin.ts

@@ -102,6 +102,19 @@ export class APMPlugin
       });
     }
 
+    const resourcePlugins = mapValues(plugins, (value, key) => {
+      return {
+        setup: value,
+        start: () =>
+          core.getStartServices().then((services) => {
+            const [, pluginsStartContracts] = services;
+            return pluginsStartContracts[
+              key as keyof APMPluginStartDependencies
+            ];
+          }),
+      };
+    }) as APMRouteHandlerResources['plugins'];
+
     plugins.home?.tutorials.registerTutorial(
       tutorialProvider({
         isEnabled: this.currentConfig['xpack.apm.ui.enabled'],
@@ -195,18 +208,7 @@ export class APMPlugin
       config: currentConfig,
       repository: getGlobalApmServerRouteRepository(),
       ruleDataClient,
-      plugins: mapValues(plugins, (value, key) => {
-        return {
-          setup: value,
-          start: () =>
-            core.getStartServices().then((services) => {
-              const [, pluginsStartContracts] = services;
-              return pluginsStartContracts[
-                key as keyof APMPluginStartDependencies
-              ];
-            }),
-        };
-      }) as APMRouteHandlerResources['plugins'],
+      plugins: resourcePlugins,
     });
 
     const boundGetApmIndices = async () =>

x-pack/plugins/apm/server/routes/fleet.ts

@@ -0,0 +1,29 @@
+/*
+ * 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 { createApmServerRoute } from './create_apm_server_route';
+import { createApmServerRouteRepository } from './create_apm_server_route_repository';
+
+const hasFleetDataRoute = createApmServerRoute({
+  endpoint: 'GET /api/apm/fleet/has_data',
+  options: { tags: [] },
+  handler: async (resources) => {
+    const { core } = resources.context;
+    const savedObjectsClient = core.savedObjects.client;
+    const fleetPluginStart = await resources.plugins.fleet.start();
+
+    const packagePolicies = await fleetPluginStart.packagePolicyService.list(
+      savedObjectsClient,
+      { kuery: 'ingest-package-policies.package.name:apm' }
+    );
+    return { hasData: packagePolicies.total > 0 };
+  },
+});
+
+export const ApmFleetRouteRepository = createApmServerRouteRepository().add(
+  hasFleetDataRoute
+);

x-pack/plugins/apm/server/routes/get_global_apm_server_route_repository.ts

@@ -29,6 +29,7 @@ import { customLinkRouteRepository } from './settings/custom_link';
 import { traceRouteRepository } from './traces';
 import { transactionRouteRepository } from './transactions';
 import { APMRouteHandlerResources } from './typings';
+import { ApmFleetRouteRepository } from './fleet';
 
 const getTypedGlobalApmServerRouteRepository = () => {
   const repository = createApmServerRouteRepository()
@@ -48,7 +49,8 @@ const getTypedGlobalApmServerRouteRepository = () => {
     .merge(agentConfigurationRouteRepository)
     .merge(anomalyDetectionRouteRepository)
     .merge(apmIndicesRouteRepository)
-    .merge(customLinkRouteRepository);
+    .merge(customLinkRouteRepository)
+    .merge(ApmFleetRouteRepository);
 
   return repository;
 };