From 0f0f458a36fe0c5480385d8e8028cc196abb0667 Mon Sep 17 00:00:00 2001 From: cauemarcondes Date: Tue, 1 Jun 2021 10:44:11 -0400 Subject: [PATCH] adding fleet information on APM tutorial --- .../home/public/application/application.tsx | 10 +++++---- .../components/apm_fleet/index.tsx | 21 ++++++++++++++----- .../illustration_integrations_darkmode.svg | 1 + .../illustration_integrations_lightmode.svg | 1 + x-pack/plugins/apm/server/routes/fleet.ts | 2 +- .../apm/server/tutorial/envs/elastic_cloud.ts | 11 ++++++---- .../instructions/apm_agent_instructions.ts | 5 ++++- 7 files changed, 36 insertions(+), 15 deletions(-) create mode 100644 x-pack/plugins/apm/public/assets/illustration_integrations_darkmode.svg create mode 100644 x-pack/plugins/apm/public/assets/illustration_integrations_lightmode.svg diff --git a/src/plugins/home/public/application/application.tsx b/src/plugins/home/public/application/application.tsx index 9ab720b47ab92..18f3089c14d11 100644 --- a/src/plugins/home/public/application/application.tsx +++ b/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( - - - , + + + + + , element ); diff --git a/src/plugins/home/public/application/components/apm_fleet/index.tsx b/src/plugins/home/public/application/components/apm_fleet/index.tsx index 27cbb44da3b21..1dc1b1e5de1b6 100644 --- a/src/plugins/home/public/application/components/apm_fleet/index.tsx +++ b/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(); const [isLoading, setIsLoading] = useState(false); @@ -38,8 +40,8 @@ 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); @@ -47,7 +49,7 @@ export function APMFleet() { setIsLoading(false); } fetchData(); - }, [basePath]); + }, [http]); if (isLoading) { return ( @@ -94,7 +96,16 @@ export function APMFleet() { } /> - + + + ); diff --git a/x-pack/plugins/apm/public/assets/illustration_integrations_darkmode.svg b/x-pack/plugins/apm/public/assets/illustration_integrations_darkmode.svg new file mode 100644 index 0000000000000..b1f86be19a080 --- /dev/null +++ b/x-pack/plugins/apm/public/assets/illustration_integrations_darkmode.svg @@ -0,0 +1 @@ +Kibana-integrations-darkmode \ No newline at end of file diff --git a/x-pack/plugins/apm/public/assets/illustration_integrations_lightmode.svg b/x-pack/plugins/apm/public/assets/illustration_integrations_lightmode.svg new file mode 100644 index 0000000000000..0cddcb0af6909 --- /dev/null +++ b/x-pack/plugins/apm/public/assets/illustration_integrations_lightmode.svg @@ -0,0 +1 @@ +Kibana-integrations-lightmode \ No newline at end of file diff --git a/x-pack/plugins/apm/server/routes/fleet.ts b/x-pack/plugins/apm/server/routes/fleet.ts index e9f8ccee9666f..72e2571fe1bb4 100644 --- a/x-pack/plugins/apm/server/routes/fleet.ts +++ b/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; diff --git a/x-pack/plugins/apm/server/tutorial/envs/elastic_cloud.ts b/x-pack/plugins/apm/server/tutorial/envs/elastic_cloud.ts index e6aa59b708436..35c1d91881bbd 100644 --- a/x-pack/plugins/apm/server/tutorial/envs/elastic_cloud.ts +++ b/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: [ diff --git a/x-pack/plugins/apm/server/tutorial/instructions/apm_agent_instructions.ts b/x-pack/plugins/apm/server/tutorial/instructions/apm_agent_instructions.ts index a25021fac5d00..ba11a996f00df 100644 --- a/x-pack/plugins/apm/server/tutorial/instructions/apm_agent_instructions.ts +++ b/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(