From 9d49e91b50244089fff4689ab15bb6cd69731d45 Mon Sep 17 00:00:00 2001 From: Jason Rhodes Date: Thu, 14 Feb 2019 10:05:21 -0500 Subject: [PATCH] [APM] Adds 7.x migration message to 'no services' view (#30811) (#30937) * Adds 7.x migration message to 'no services message' * Small tweaks and adds a test * Removed comment after confirming link url with operations team * Updates test descriptions to be more descriptive per review --- .../app/ServiceOverview/NoServicesMessage.tsx | 79 +++++++++++++++++++ .../__test__/NoServicesMessage.test.tsx | 21 +++++ .../NoServicesMessage.test.tsx.snap | 49 ++++++++++++ .../ServiceOverview.test.js.snap | 14 +--- .../components/app/ServiceOverview/view.tsx | 29 ++----- 5 files changed, 160 insertions(+), 32 deletions(-) create mode 100644 x-pack/plugins/apm/public/components/app/ServiceOverview/NoServicesMessage.tsx create mode 100644 x-pack/plugins/apm/public/components/app/ServiceOverview/__test__/NoServicesMessage.test.tsx create mode 100644 x-pack/plugins/apm/public/components/app/ServiceOverview/__test__/__snapshots__/NoServicesMessage.test.tsx.snap diff --git a/x-pack/plugins/apm/public/components/app/ServiceOverview/NoServicesMessage.tsx b/x-pack/plugins/apm/public/components/app/ServiceOverview/NoServicesMessage.tsx new file mode 100644 index 0000000000000..adb26f1659955 --- /dev/null +++ b/x-pack/plugins/apm/public/components/app/ServiceOverview/NoServicesMessage.tsx @@ -0,0 +1,79 @@ +/* + * 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 { EuiEmptyPrompt } from '@elastic/eui'; +import { i18n } from '@kbn/i18n'; +import React from 'react'; +import { KibanaLink } from '../../shared/Links/KibanaLink'; +import { SetupInstructionsLink } from '../../shared/Links/SetupInstructionsLink'; + +interface Props { + // any data submitted from APM agents found (not just in the given time range) + historicalDataFound: boolean; +} + +export function NoServicesMessage({ historicalDataFound }: Props) { + if (historicalDataFound) { + return ( + + {i18n.translate('xpack.apm.servicesTable.notFoundLabel', { + defaultMessage: 'No services found' + })} + + } + titleSize="s" + /> + ); + } else { + return ( + + {i18n.translate('xpack.apm.servicesTable.noServicesLabel', { + defaultMessage: `Looks like you don't have any APM services installed. Let's add some!` + })} + + } + titleSize="s" + body={ + +

+ {i18n.translate( + 'xpack.apm.servicesTable.7xUpgradeServerMessage', + { + defaultMessage: `Upgrading from a pre-7.x version? Make sure you've also upgraded + your APM server instance(s) to at least 7.0.` + } + )} +

+

+ {i18n.translate('xpack.apm.servicesTable.7xOldDataMessage', { + defaultMessage: + 'You may also have old data that needs to be migrated.' + })}{' '} + + {i18n.translate( + 'xpack.apm.servicesTable.MigrationAssistantLink', + { + defaultMessage: + 'Learn more by visiting the Kibana Migration Assistant' + } + )} + + . +

+ + } + actions={} + /> + ); + } +} diff --git a/x-pack/plugins/apm/public/components/app/ServiceOverview/__test__/NoServicesMessage.test.tsx b/x-pack/plugins/apm/public/components/app/ServiceOverview/__test__/NoServicesMessage.test.tsx new file mode 100644 index 0000000000000..e09878b5969c8 --- /dev/null +++ b/x-pack/plugins/apm/public/components/app/ServiceOverview/__test__/NoServicesMessage.test.tsx @@ -0,0 +1,21 @@ +/* + * 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 { shallow } from 'enzyme'; +import React from 'react'; +import { NoServicesMessage } from '../NoServicesMessage'; + +describe('NoServicesMessage', () => { + it('should show only a "not found" message when historical data is found', () => { + const wrapper = shallow(); + expect(wrapper).toMatchSnapshot(); + }); + + it('should show a "no services installed" message, a link to the set up instructions page, a message about upgrading APM server, and a link to the migration assistant when NO historical data is found', () => { + const wrapper = shallow(); + expect(wrapper).toMatchSnapshot(); + }); +}); diff --git a/x-pack/plugins/apm/public/components/app/ServiceOverview/__test__/__snapshots__/NoServicesMessage.test.tsx.snap b/x-pack/plugins/apm/public/components/app/ServiceOverview/__test__/__snapshots__/NoServicesMessage.test.tsx.snap new file mode 100644 index 0000000000000..cb05558c9020f --- /dev/null +++ b/x-pack/plugins/apm/public/components/app/ServiceOverview/__test__/__snapshots__/NoServicesMessage.test.tsx.snap @@ -0,0 +1,49 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`NoServicesMessage should show a "no services installed" message, a link to the set up instructions page, a message about upgrading APM server, and a link to the migration assistant when NO historical data is found 1`] = ` + + } + body={ + +

+ Upgrading from a pre-7.x version? Make sure you've also upgraded + your APM server instance(s) to at least 7.0. +

+

+ You may also have old data that needs to be migrated. + + + Learn more by visiting the Kibana Migration Assistant + + . +

+ + } + iconColor="subdued" + title={ +
+ Looks like you don't have any APM services installed. Let's add some! +
+ } + titleSize="s" +/> +`; + +exports[`NoServicesMessage should show only a "not found" message when historical data is found 1`] = ` + + No services found + + } + titleSize="s" +/> +`; diff --git a/x-pack/plugins/apm/public/components/app/ServiceOverview/__test__/__snapshots__/ServiceOverview.test.js.snap b/x-pack/plugins/apm/public/components/app/ServiceOverview/__test__/__snapshots__/ServiceOverview.test.js.snap index c7289c9d7ffa6..2f417980a911a 100644 --- a/x-pack/plugins/apm/public/components/app/ServiceOverview/__test__/__snapshots__/ServiceOverview.test.js.snap +++ b/x-pack/plugins/apm/public/components/app/ServiceOverview/__test__/__snapshots__/ServiceOverview.test.js.snap @@ -11,9 +11,8 @@ exports[`Service Overview -> View should render when historical data is found 1` exports[`Service Overview -> View should render when historical data is found 2`] = ` Object { "items": Array [], - "noItemsMessage": , } `; @@ -29,13 +28,8 @@ exports[`Service Overview -> View should render when historical data is not foun exports[`Service Overview -> View should render when historical data is not found 2`] = ` Object { "items": Array [], - "noItemsMessage": - } + "noItemsMessage": , } `; diff --git a/x-pack/plugins/apm/public/components/app/ServiceOverview/view.tsx b/x-pack/plugins/apm/public/components/app/ServiceOverview/view.tsx index 976eb29e0f6e3..39b0a23f934b2 100644 --- a/x-pack/plugins/apm/public/components/app/ServiceOverview/view.tsx +++ b/x-pack/plugins/apm/public/components/app/ServiceOverview/view.tsx @@ -4,15 +4,13 @@ * you may not use this file except in compliance with the Elastic License. */ -import { i18n } from '@kbn/i18n'; import React, { Component } from 'react'; import { RRRRenderResponse } from 'react-redux-request'; import { IUrlParams } from 'x-pack/plugins/apm/public/store/urlParams'; import { IServiceListItem } from 'x-pack/plugins/apm/server/lib/services/get_services'; import { loadAgentStatus } from '../../../services/rest/apm/status_check'; import { ServiceListRequest } from '../../../store/reactReduxRequest/serviceList'; -import { EmptyMessage } from '../../shared/EmptyMessage'; -import { SetupInstructionsLink } from '../../shared/Links/SetupInstructionsLink'; +import { NoServicesMessage } from './NoServicesMessage'; import { ServiceList } from './ServiceList'; interface Props { @@ -21,6 +19,7 @@ interface Props { } interface State { + // any data submitted from APM agents found (not just in the given time range) historicalDataFound: boolean; } @@ -38,24 +37,6 @@ export class ServiceOverview extends Component { public render() { const { urlParams } = this.props; - const { historicalDataFound } = this.state; - - const noItemsMessage = ( - : null - } - /> - ); // Render method here uses this.props.serviceList instead of received "data" from RRR // to make it easier to test -- mapStateToProps uses the RRR selector so the data @@ -67,7 +48,11 @@ export class ServiceOverview extends Component { render={() => ( + } /> )} />