adding fleet information on APM tutorial

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

@@ -10,6 +10,7 @@ import {
   EuiCard,
   EuiFlexGroup,
   EuiFlexItem,
+  EuiImage,
   EuiLoadingSpinner,
   EuiPanel,
 } from '@elastic/eui';
@@ -29,7 +30,8 @@ interface APIResponse {
 }
 
 export function APMFleet() {
-  const { getBasePath } = getServices();
+  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);
@@ -38,16 +40,16 @@ export function APMFleet() {
     async function fetchData() {
       setIsLoading(true);
       try {
-        const response = await fetch(`${basePath}/api/apm/fleet/hasData`);
-        setData((await response.json()) as APIResponse);
+        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();
-  }, [basePath]);
+  }, [http]);
 
   if (isLoading) {
     return (
@@ -94,7 +96,16 @@ export function APMFleet() {
             }
           />
         </EuiFlexItem>
-        <EuiFlexItem grow={3} style={{ background: 'red' }} />
+        <EuiFlexItem grow={3}>
+          <EuiImage
+            src={`${basePath}/plugins/apm/assets/${
+              isDarkTheme
+                ? 'illustration_integrations_darkmode.svg'
+                : 'illustration_integrations_lightmode.svg'
+            }`}
+            alt="Illustration"
+          />
+        </EuiFlexItem>
       </EuiFlexGroup>
     </EuiPanel>
   );

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

@@ -9,7 +9,7 @@ import { createApmServerRoute } from './create_apm_server_route';
 import { createApmServerRouteRepository } from './create_apm_server_route_repository';
 
 const hasFleetDataRoute = createApmServerRoute({
-  endpoint: 'GET /api/apm/fleet/hasData',
+  endpoint: 'GET /api/apm/fleet/has_data',
   options: { tags: [] },
   handler: async (resources) => {
     const { core } = resources.context;

x-pack/plugins/apm/server/tutorial/envs/elastic_cloud.ts

@@ -33,7 +33,10 @@ export function createElasticCloudInstructions(
   const instructionSets = [];
 
   instructionSets.push(
-    getApmServerInstructionSet({ cloudSetup, hasApmServerUrl: !!apmServerUrl })
+    getApmServerInstructionSet({
+      cloudSetup,
+      isApmServerEnabled: !!apmServerUrl,
+    })
   );
 
   instructionSets.push(getApmAgentInstructionSet(cloudSetup));
@@ -45,10 +48,10 @@ export function createElasticCloudInstructions(
 
 function getApmServerInstructionSet({
   cloudSetup,
-  hasApmServerUrl,
+  isApmServerEnabled,
 }: {
   cloudSetup?: CloudSetup;
-  hasApmServerUrl: boolean;
+  isApmServerEnabled: boolean;
 }): InstructionSetSchema {
   const instructionVariants: InstructionSetSchema['instructionVariants'] = [
     {
@@ -57,7 +60,7 @@ function getApmServerInstructionSet({
     },
   ];
 
-  if (!hasApmServerUrl) {
+  if (!isApmServerEnabled) {
     instructionVariants.push({
       id: INSTRUCTION_VARIANT.ESC,
       instructions: [

x-pack/plugins/apm/server/tutorial/instructions/apm_agent_instructions.ts

@@ -913,7 +913,10 @@ export const createPhpAgentInstructions = (
           'APM is automatically started when your app boots. Configure the agent either via `php.ini` file:',
       }
     ),
-    commands: `elastic_apm.server_url=http://localhost:8200
+    commands: `elastic_apm.server_url="${
+      apmServerUrl || 'http://localhost:8200'
+    }"
+elastic.apm.secret_token="${secretToken}"
 elastic_apm.service_name="My service"
 `.split('\n'),
     textPost: i18n.translate(