Adds traces overview with mock data (#22628)

* Adds traces overview with mock data

* Updates service overview snapshots

* Updates based on review feedback

* Adds tests for ManagedTable and ImpactBar

* Refactored transaction overview to use new managed table component

* Fixes tab size

* Cleans up some tests and types

* Cleans up types and tests

* kbn bootstrap changes to x-pack yarn.lock

* Removed jsconfig file in apm

* Updates snapshot tests

* Reversed bogus yarn lock change in x-pack

* review feedback wip

* Resolves typescript issues

package.json

@@ -246,9 +246,10 @@
     "@types/node": "^8.10.20",
     "@types/prop-types": "^15.5.3",
     "@types/puppeteer": "^1.6.2",
-    "@types/react": "^16.3.14",
+    "@types/react": "16.3.14",
     "@types/react-dom": "^16.0.5",
     "@types/react-redux": "^6.0.6",
+    "@types/react-router-dom": "^4.3.1",
     "@types/react-virtualized": "^9.18.7",
     "@types/redux": "^3.6.31",
     "@types/redux-actions": "^2.2.1",

x-pack/plugins/apm/public/components/app/Main/Home.tsx

@@ -0,0 +1,40 @@
+/*
+ * 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 { EuiTabbedContent } from '@elastic/eui';
+import React from 'react';
+// @ts-ignore
+import { KueryBar } from '../../shared/KueryBar';
+import { SetupInstructionsLink } from '../../shared/SetupInstructionsLink';
+// @ts-ignore
+import { HeaderContainer } from '../../shared/UIComponents';
+// @ts-ignore
+import { ServiceOverview } from '../ServiceOverview';
+import { TraceOverview } from '../TraceOverview';
+
+export function Home() {
+  return (
+    <div>
+      <HeaderContainer>
+        <h1>APM</h1>
+        <SetupInstructionsLink />
+      </HeaderContainer>
+      <KueryBar />
+      <EuiTabbedContent
+        className="k6Tab--large"
+        tabs={[
+          {
+            id: 'services_overview',
+            name: 'Services',
+            content: <ServiceOverview />
+          },
+          { id: 'traces_overview', name: 'Traces', content: <TraceOverview /> }
+        ]}
+      />
+    </div>
+  );
+}

x-pack/plugins/apm/public/components/app/Main/__test__/Home.test.js

@@ -0,0 +1,15 @@
+/*
+ * 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 { Home } from '../Home';
+
+describe('Home component', () => {
+  it('should render', () => {
+    expect(shallow(<Home />)).toMatchSnapshot();
+  });
+});

x-pack/plugins/apm/public/components/app/Main/__test__/__snapshots__/Home.test.js.snap

@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Home component should render 1`] = `
+<div>
+  <styled.div>
+    <h1>
+      APM
+    </h1>
+    <SetupInstructionsLink />
+  </styled.div>
+  <Connect(KueryBarView) />
+  <EuiTabbedContent
+    className="k6Tab--large"
+    tabs={
+      Array [
+        Object {
+          "content": <Connect(ServiceOverview) />,
+          "id": "services_overview",
+          "name": "Services",
+        },
+        Object {
+          "content": <Connect(TraceOverview) />,
+          "id": "traces_overview",
+          "name": "Traces",
+        },
+      ]
+    }
+  />
+</div>
+`;

x-pack/plugins/apm/public/components/app/Main/routeConfig.js → x-pack/plugins/apm/public/components/app/Main/routeConfig.tsx

@@ -6,25 +6,40 @@
 
 import React from 'react';
 import { Redirect } from 'react-router-dom';
-import ServiceOverview from '../ServiceOverview';
+// @ts-ignore
+import { legacyDecodeURIComponent } from '../../../utils/url';
+// @ts-ignore
 import ErrorGroupDetails from '../ErrorGroupDetails';
+// @ts-ignore
 import ErrorGroupOverview from '../ErrorGroupOverview';
+// @ts-ignore
 import TransactionDetails from '../TransactionDetails';
+// @ts-ignore
 import TransactionOverview from '../TransactionOverview';
-import { legacyDecodeURIComponent } from '../../../utils/url';
+import { Home } from './Home';
+
+interface BreadcrumbArgs {
+  match: {
+    params: StringMap<any>;
+  };
+}
+
+interface RenderArgs {
+  location: StringMap<any>;
+}
 
 export const routes = [
   {
     exact: true,
     path: '/',
-    component: ServiceOverview,
+    component: Home,
     breadcrumb: 'APM'
   },
   {
     exact: true,
     path: '/:serviceName/errors/:groupId',
     component: ErrorGroupDetails,
-    breadcrumb: ({ match }) => match.params.groupId
+    breadcrumb: ({ match }: BreadcrumbArgs) => match.params.groupId
   },
   {
     exact: true,
@@ -44,8 +59,8 @@ export const routes = [
       {
         exact: true,
         path: '/:serviceName',
-        breadcrumb: ({ match }) => match.params.serviceName,
-        render: ({ location }) => {
+        breadcrumb: ({ match }: BreadcrumbArgs) => match.params.serviceName,
+        render: ({ location }: RenderArgs) => {
           return (
             <Redirect
               to={{
@@ -68,14 +83,14 @@ export const routes = [
     exact: true,
     path: '/:serviceName/transactions/:transactionType',
     component: TransactionOverview,
-    breadcrumb: ({ match }) =>
+    breadcrumb: ({ match }: BreadcrumbArgs) =>
       legacyDecodeURIComponent(match.params.transactionType)
   },
   {
     exact: true,
     path: '/:serviceName/transactions/:transactionType/:transactionName',
     component: TransactionDetails,
-    breadcrumb: ({ match }) =>
+    breadcrumb: ({ match }: BreadcrumbArgs) =>
       legacyDecodeURIComponent(match.params.transactionName)
   }
 ];

x-pack/plugins/apm/public/components/app/ServiceOverview/List/__test__/List.test.js → x-pack/plugins/apm/public/components/app/ServiceOverview/ServiceList/__test__/List.test.js

@@ -8,7 +8,7 @@ import React from 'react';
 import { mount } from 'enzyme';
 
 import { MemoryRouter } from 'react-router-dom';
-import List from '../index';
+import { ServiceList } from '../index';
 import props from './props.json';
 import {
   mountWithRouterAndStore,
@@ -25,7 +25,7 @@ describe('ErrorGroupOverview -> List', () => {
     const storeState = {};
     const wrapper = mount(
       <MemoryRouter>
-        <List items={[]} />
+        <ServiceList items={[]} />
       </MemoryRouter>,
       storeState
     );
@@ -36,7 +36,7 @@ describe('ErrorGroupOverview -> List', () => {
   it('should render with data', () => {
     const storeState = { location: {} };
     const wrapper = mountWithRouterAndStore(
-      <List items={props.items} />,
+      <ServiceList items={props.items} />,
       storeState
     );