diff --git a/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/Watcher/WatcherFlyOut.js b/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/Watcher/WatcherFlyOut.js index 78199377a8d23..75110c5931a0f 100644 --- a/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/Watcher/WatcherFlyOut.js +++ b/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/Watcher/WatcherFlyOut.js @@ -31,7 +31,7 @@ import { EuiLink } from '@elastic/eui'; -import { ELASTIC_DOCS } from '../../../../utils/documentation'; +import { XPACK_DOCS } from '../../../../utils/documentation/xpack'; import { KibanaLink } from '../../../../utils/url'; import { createErrorGroupWatch } from './createErrorGroupWatch'; @@ -226,10 +226,7 @@ export default class WatcherFlyout extends Component { This form will assist in creating a Watch that can notify you of error occurrences from this service. To learn more about Watcher, please read our{' '} - + documentation . @@ -344,10 +341,7 @@ export default class WatcherFlyout extends Component { helpText={ If you have not configured email, please see the{' '} - + documentation . diff --git a/x-pack/plugins/apm/public/components/shared/PropertiesTable/__test__/PropertiesTable.test.js b/x-pack/plugins/apm/public/components/shared/PropertiesTable/__test__/PropertiesTable.test.js index 7cee0b14c57af..0a90bedc95d32 100644 --- a/x-pack/plugins/apm/public/components/shared/PropertiesTable/__test__/PropertiesTable.test.js +++ b/x-pack/plugins/apm/public/components/shared/PropertiesTable/__test__/PropertiesTable.test.js @@ -12,9 +12,9 @@ import { sortKeysByConfig, getPropertyTabNames } from '..'; -import { getFeatureDocs } from '../../../../utils/documentation'; +import { getAgentFeatureDocsUrl } from '../../../../utils/documentation/agents'; -jest.mock('../../../../utils/documentation'); +jest.mock('../../../../utils/documentation/agents'); jest.mock('../propertyConfig.json', () => [ { key: 'testProperty', @@ -105,32 +105,13 @@ describe('getPropertyTabNames', () => { }); describe('AgentFeatureTipMessage component', () => { - let mockDocs; - const featureName = ''; - const agentName = ''; - - beforeEach(() => { - mockDocs = { - text: 'Mock Docs Text', - url: 'mock-url' - }; - getFeatureDocs.mockImplementation(() => mockDocs); - }); + const featureName = 'user'; + const agentName = 'nodejs'; it('should render when docs are returned', () => { - expect( - shallow( - - ) - ).toMatchSnapshot(); - expect(getFeatureDocs).toHaveBeenCalledWith(featureName, agentName); - }); + const mockDocs = 'mock-url'; + getAgentFeatureDocsUrl.mockImplementation(() => mockDocs); - it('should render when docs are returned, but missing a url', () => { - delete mockDocs.url; expect( shallow( { /> ) ).toMatchSnapshot(); + expect(getAgentFeatureDocsUrl).toHaveBeenCalledWith(featureName, agentName); }); it('should render null empty string when no docs are returned', () => { - mockDocs = null; + getAgentFeatureDocsUrl.mockImplementation(() => null); expect( shallow( - Mock Docs Text + You can configure your agent to add contextual information about your users. `; -exports[`AgentFeatureTipMessage component should render when docs are returned, but missing a url 1`] = ` - - - Mock Docs Text - - -`; - exports[`PropertiesTable component should render empty when data has no keys 1`] = ` @@ -68,7 +57,7 @@ exports[`PropertiesTable component should render with data 1`] = ` /> `; diff --git a/x-pack/plugins/apm/public/components/shared/PropertiesTable/index.tsx b/x-pack/plugins/apm/public/components/shared/PropertiesTable/index.tsx index 5bdc04d122c41..dfbdae8a7df5c 100644 --- a/x-pack/plugins/apm/public/components/shared/PropertiesTable/index.tsx +++ b/x-pack/plugins/apm/public/components/shared/PropertiesTable/index.tsx @@ -11,7 +11,7 @@ import styled from 'styled-components'; import { StringMap } from '../../../../typings/common'; import { colors, fontSize, px, unit, units } from '../../../style/variables'; -import { getFeatureDocs } from '../../../utils/documentation'; +import { getAgentFeatureDocsUrl } from '../../../utils/documentation/agents'; // @ts-ignore import { ExternalLink } from '../../../utils/url'; import { KeySorter, NestedKeyValueTable } from './NestedKeyValueTable'; @@ -38,6 +38,17 @@ export function getPropertyTabNames(selected: string[]): string[] { ).map(({ key }: { key: string }) => key); } +function getAgentFeatureText(featureName: string) { + switch (featureName) { + case 'user': + return 'You can configure your agent to add contextual information about your users.'; + case 'tags': + return 'You can configure your agent to add filterable tags on transactions.'; + case 'custom': + return 'You can configure your agent to add custom contextual information on transactions.'; + } +} + export function AgentFeatureTipMessage({ featureName, agentName @@ -45,21 +56,18 @@ export function AgentFeatureTipMessage({ featureName: string; agentName?: string; }) { - const docs = getFeatureDocs(featureName, agentName); - - if (!docs) { + const docsUrl = getAgentFeatureDocsUrl(featureName, agentName); + if (!docsUrl) { return null; } return ( - {docs.text}{' '} - {docs.url && ( - - Learn more in the documentation. - - )} + {getAgentFeatureText(featureName)}{' '} + + Learn more in the documentation. + ); } @@ -100,10 +108,7 @@ export function PropertiesTable({ keySorter={sortKeysByConfig} depth={1} /> - + ); } diff --git a/x-pack/plugins/apm/public/utils/documentation.ts b/x-pack/plugins/apm/public/utils/documentation.ts deleted file mode 100644 index e830acc9bf11d..0000000000000 --- a/x-pack/plugins/apm/public/utils/documentation.ts +++ /dev/null @@ -1,192 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License; - * you may not use this file except in compliance with the Elastic License. - */ - -import { get } from 'lodash'; -// @ts-ignore -import { metadata } from 'ui/metadata'; - -const STACK_VERSION = metadata.branch; -const DOCS_ROOT = 'https://www.elastic.co/guide/en/apm'; - -// -// General APM -// -export const APM_DOCS = { - 'get-started': { - url: `${DOCS_ROOT}/get-started/${STACK_VERSION}/index.html` - } -}; - -// -// APM Server docs -// -export const APM_SERVER_DOCS = { - download: { - url: 'https://www.elastic.co/downloads/apm/apm-server' - }, - configuring: { - url: `${DOCS_ROOT}/server/${STACK_VERSION}/configuring.html` - }, - 'running-on-docker': { - url: `${DOCS_ROOT}/server/${STACK_VERSION}/running-on-docker.html#running-on-docker` - }, - frontend: { - url: `${DOCS_ROOT}/server/${STACK_VERSION}/frontend.html` - } -}; - -// -// APM Agents docs -// -const featureContextUserText = - 'You can configure your agent to add contextual information about your users.'; -const featureContextTagsText = - 'You can configure your agent to add filterable tags on transactions.'; -const featureContextCustomText = - 'You can configure your agent to add custom contextual information on transactions.'; - -interface AgentDoc { - url: string; - text?: string; -} - -interface AgentDocList { - [key: string]: { - [key: string]: AgentDoc; - }; -} - -export const APM_AGENT_DOCS: AgentDocList = { - home: { - nodejs: { - url: `${DOCS_ROOT}/agent/nodejs/1.x/index.html` - }, - python: { - url: `${DOCS_ROOT}/agent/python/2.x/index.html` - }, - ruby: { - url: `${DOCS_ROOT}/agent/ruby/1.x/index.html` - }, - javascript: { - url: `${DOCS_ROOT}/agent/js-base/0.x/index.html` - } - }, - 'get-started': { - python: { - url: `${DOCS_ROOT}/agent/python/2.x/getting-started.html` - }, - javascript: { - url: `${DOCS_ROOT}/agent/js-base/0.x/getting-started.html` - } - }, - 'nodejs-only': { - 'babel-es-modules': { - url: `${DOCS_ROOT}/agent/nodejs/1.x/advanced-setup.html#es-modules` - } - }, - 'python-only': { - django: { url: `${DOCS_ROOT}/agent/python/2.x/django-support.html` }, - flask: { url: `${DOCS_ROOT}/agent/python/2.x/flask-support.html` } - }, - 'context-user': { - nodejs: { - text: featureContextUserText, - url: `${DOCS_ROOT}/agent/nodejs/1.x/agent-api.html#apm-set-user-context` - }, - python: { - text: featureContextUserText, - url: `${DOCS_ROOT}/agent/python/2.x/api.html#api-set-user-context` - }, - ruby: { - text: featureContextUserText, - url: `${DOCS_ROOT}/agent/ruby/1.x/advanced.html#_providing_info_about_the_user` - }, - javascript: { - text: featureContextUserText, - url: `${DOCS_ROOT}/agent/js-base/0.x/api.html#apm-set-user-context` - } - }, - 'context-tags': { - nodejs: { - text: featureContextTagsText, - url: `${DOCS_ROOT}/agent/nodejs/1.x/agent-api.html#apm-set-tag` - }, - python: { - text: featureContextTagsText, - url: `${DOCS_ROOT}/agent/python/2.x/api.html#api-tag` - }, - ruby: { - text: featureContextTagsText, - url: `${DOCS_ROOT}/agent/ruby/1.x/advanced.html#_adding_tags` - }, - javascript: { - url: `${DOCS_ROOT}/agent/js-base/0.x/api.html#apm-set-tags` - } - }, - 'context-custom': { - nodejs: { - text: featureContextCustomText, - url: `${DOCS_ROOT}/agent/nodejs/1.x/agent-api.html#apm-set-custom-context` - }, - python: { - text: featureContextCustomText, - url: `${DOCS_ROOT}/agent/python/2.x/api.html#api-set-custom-context` - }, - ruby: { - text: featureContextCustomText, - url: `${DOCS_ROOT}/agent/ruby/1.x/advanced.html#_adding_custom_context` - }, - javascript: { - text: featureContextCustomText, - url: `${DOCS_ROOT}/agent/js-base/0.x/api.html#apm-set-custom-context` - } - }, - 'dropped-spans': { - nodejs: { - url: `${DOCS_ROOT}/agent/nodejs/1.x/agent-api.html#transaction-max-spans` - }, - python: { - url: `${DOCS_ROOT}/agent/python/2.x/configuration.html#config-transaction-max-spans` - } - } -}; - -// -// Elastic docs -// -export const ELASTIC_DOCS = { - 'x-pack-emails': { - url: `https://www.elastic.co/guide/en/x-pack/${STACK_VERSION}/actions-email.html#configuring-email` - }, - 'watcher-get-started': { - url: `https://www.elastic.co/guide/en/x-pack/${STACK_VERSION}/watcher-getting-started.html` - } -}; - -// -// Helper methods -// -function translateAgentName(agentName?: string) { - switch (agentName) { - case 'js-react': - case 'js-base': - return 'javascript'; - - default: - return agentName; - } -} - -export function getFeatureDocs( - featureName: string, - agentName?: string -): AgentDoc | void { - if (!agentName) { - return; - } - const translatedAgentName = translateAgentName(agentName); - return get(APM_AGENT_DOCS, `${featureName}.${translatedAgentName}`); -} diff --git a/x-pack/plugins/apm/public/utils/documentation/agents.ts b/x-pack/plugins/apm/public/utils/documentation/agents.ts new file mode 100644 index 0000000000000..70ba4c8644cbf --- /dev/null +++ b/x-pack/plugins/apm/public/utils/documentation/agents.ts @@ -0,0 +1,50 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +const AGENT_URL_ROOT = 'https://www.elastic.co/guide/en/apm/agent'; + +// TODO: currently unused but should be added to timeline view +export const APM_AGENT_DROPPED_SPANS_DOCS = { + nodejs: `${AGENT_URL_ROOT}/nodejs/1.x/agent-api.html#transaction-max-spans`, + python: `${AGENT_URL_ROOT}/python/2.x/configuration.html#config-transaction-max-spans` +}; + +const APM_AGENT_FEATURE_DOCS: { + [featureName: string]: { + [agentName: string]: string; + }; +} = { + user: { + nodejs: `${AGENT_URL_ROOT}/nodejs/1.x/agent-api.html#apm-set-user-context`, + python: `${AGENT_URL_ROOT}/python/2.x/api.html#api-set-user-context`, + ruby: `${AGENT_URL_ROOT}/ruby/1.x/advanced.html#_providing_info_about_the_user`, + 'js-react': `${AGENT_URL_ROOT}/js-base/0.x/api.html#apm-set-user-context`, + 'js-base': `${AGENT_URL_ROOT}/js-base/0.x/api.html#apm-set-user-context` + }, + tags: { + nodejs: `${AGENT_URL_ROOT}/nodejs/1.x/agent-api.html#apm-set-tag`, + python: `${AGENT_URL_ROOT}/python/2.x/api.html#api-tag`, + ruby: `${AGENT_URL_ROOT}/ruby/1.x/advanced.html#_adding_tags`, + 'js-react': `${AGENT_URL_ROOT}/js-base/0.x/api.html#apm-set-tags`, + 'js-base': `${AGENT_URL_ROOT}/js-base/0.x/api.html#apm-set-tags` + }, + custom: { + nodejs: `${AGENT_URL_ROOT}/nodejs/1.x/agent-api.html#apm-set-custom-context`, + python: `${AGENT_URL_ROOT}/python/2.x/api.html#api-set-custom-context`, + ruby: `${AGENT_URL_ROOT}/ruby/1.x/advanced.html#_adding_custom_context`, + 'js-react': `${AGENT_URL_ROOT}/js-base/0.x/api.html#apm-set-custom-context`, + 'js-base': `${AGENT_URL_ROOT}/js-base/0.x/api.html#apm-set-custom-context` + } +}; + +export function getAgentFeatureDocsUrl( + featureName: string, + agentName?: string +) { + if (APM_AGENT_FEATURE_DOCS[featureName] && agentName) { + return APM_AGENT_FEATURE_DOCS[featureName][agentName]; + } +} diff --git a/x-pack/plugins/apm/public/utils/documentation/xpack.ts b/x-pack/plugins/apm/public/utils/documentation/xpack.ts new file mode 100644 index 0000000000000..11741fb3ea803 --- /dev/null +++ b/x-pack/plugins/apm/public/utils/documentation/xpack.ts @@ -0,0 +1,16 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License; + * you may not use this file except in compliance with the Elastic License. + */ + +// @ts-ignore +import { metadata } from 'ui/metadata'; +const STACK_VERSION = metadata.branch; + +const XPACK_URL_ROOT = `https://www.elastic.co/guide/en/x-pack/${STACK_VERSION}`; + +export const XPACK_DOCS = { + xpackEmails: `${XPACK_URL_ROOT}/actions-email.html#configuring-email`, + xpackWatcher: `${XPACK_URL_ROOT}/watcher-getting-started.html` +};