[7.0] [APM] Adds 7.x migration message to 'no services' view (#30811)

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 (
+      <EuiEmptyPrompt
+        title={
+          <div>
+            {i18n.translate('xpack.apm.servicesTable.notFoundLabel', {
+              defaultMessage: 'No services found'
+            })}
+          </div>
+        }
+        titleSize="s"
+      />
+    );
+  } else {
+    return (
+      <EuiEmptyPrompt
+        title={
+          <div>
+            {i18n.translate('xpack.apm.servicesTable.noServicesLabel', {
+              defaultMessage: `Looks like you don't have any APM services installed. Let's add some!`
+            })}
+          </div>
+        }
+        titleSize="s"
+        body={
+          <React.Fragment>
+            <p>
+              {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.`
+                }
+              )}
+            </p>
+            <p>
+              {i18n.translate('xpack.apm.servicesTable.7xOldDataMessage', {
+                defaultMessage:
+                  'You may also have old data that needs to be migrated.'
+              })}{' '}
+              <KibanaLink
+                pathname="/app/kibana"
+                hash="/management/elasticsearch/upgrade_assistant"
+              >
+                {i18n.translate(
+                  'xpack.apm.servicesTable.MigrationAssistantLink',
+                  {
+                    defaultMessage:
+                      'Learn more by visiting the Kibana Migration Assistant'
+                  }
+                )}
+              </KibanaLink>
+              .
+            </p>
+          </React.Fragment>
+        }
+        actions={<SetupInstructionsLink buttonFill={true} />}
+      />
+    );
+  }
+}

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(<NoServicesMessage historicalDataFound={true} />);
+    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(<NoServicesMessage historicalDataFound={false} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+});

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`] = `
+<EuiEmptyPrompt
+  actions={
+    <SetupInstructionsLink
+      buttonFill={true}
+    />
+  }
+  body={
+    <React.Fragment>
+      <p>
+        Upgrading from a pre-7.x version? Make sure you've also upgraded
+              your APM server instance(s) to at least 7.0.
+      </p>
+      <p>
+        You may also have old data that needs to be migrated.
+
+        <Connect(UnconnectedKibanaLink)
+          hash="/management/elasticsearch/upgrade_assistant"
+          pathname="/app/kibana"
+        >
+          Learn more by visiting the Kibana Migration Assistant
+        </Connect(UnconnectedKibanaLink)>
+        .
+      </p>
+    </React.Fragment>
+  }
+  iconColor="subdued"
+  title={
+    <div>
+      Looks like you don't have any APM services installed. Let's add some!
+    </div>
+  }
+  titleSize="s"
+/>
+`;
+
+exports[`NoServicesMessage should show only a "not found" message when historical data is found 1`] = `
+<EuiEmptyPrompt
+  iconColor="subdued"
+  title={
+    <div>
+      No services found
+    </div>
+  }
+  titleSize="s"
+/>
+`;

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": <EmptyMessage
-    heading="No services were found"
-    subheading={null}
+  "noItemsMessage": <NoServicesMessage
+    historicalDataFound={true}
   />,
 }
 `;
@@ -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": <EmptyMessage
-    heading="Looks like you don't have any services with APM installed. Let's add some!"
-    subheading={
-      <SetupInstructionsLink
-        buttonFill={true}
-      />
-    }
+  "noItemsMessage": <NoServicesMessage
+    historicalDataFound={false}
   />,
 }
 `;

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<Props, State> {
 
   public render() {
     const { urlParams } = this.props;
-    const { historicalDataFound } = this.state;
-
-    const noItemsMessage = (
-      <EmptyMessage
-        heading={
-          historicalDataFound
-            ? i18n.translate('xpack.apm.servicesTable.notFoundLabel', {
-                defaultMessage: 'No services were found'
-              })
-            : i18n.translate('xpack.apm.servicesTable.noServicesLabel', {
-                defaultMessage: `Looks like you don't have any services with APM installed. Let's add some!`
-              })
-        }
-        subheading={
-          !historicalDataFound ? <SetupInstructionsLink buttonFill /> : 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<Props, State> {
           render={() => (
             <ServiceList
               items={this.props.serviceList.data}
-              noItemsMessage={noItemsMessage}
+              noItemsMessage={
+                <NoServicesMessage
+                  historicalDataFound={this.state.historicalDataFound}
+                />
+              }
             />
           )}
         />