[RUM Dashboard] Initial Version

x-pack/plugins/apm/common/elasticsearch_fieldnames.ts

@@ -87,3 +87,9 @@ export const CONTAINER_ID = 'container.id';
 export const POD_NAME = 'kubernetes.pod.name';
 
 export const CLIENT_GEO_COUNTRY_ISO_CODE = 'client.geo.country_iso_code';
+
+// RUM Labels
+export const TRANSACTION_URL = 'transaction.page.url';
+export const CLIENT_GEO = 'client.geo';
+export const USER_AGENT_DEVICE = 'user_agent.device.name';
+export const USER_AGENT_OS = 'user_agent.os.name';

x-pack/plugins/apm/common/projections/errors.ts

@@ -16,7 +16,7 @@ import {
   ERROR_GROUP_ID,
 } from '../elasticsearch_fieldnames';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { rangeFilter } from '../../server/lib/helpers/range_filter';
+import { rangeFilter } from '../utils/range_filter';
 
 export function getErrorGroupsProjection({
   setup,

x-pack/plugins/apm/common/projections/metrics.ts

@@ -16,7 +16,7 @@ import {
   SERVICE_NODE_NAME,
 } from '../elasticsearch_fieldnames';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { rangeFilter } from '../../server/lib/helpers/range_filter';
+import { rangeFilter } from '../utils/range_filter';
 import { SERVICE_NODE_NAME_MISSING } from '../service_nodes';
 
 function getServiceNodeNameFilters(serviceNodeName?: string) {

x-pack/plugins/apm/common/projections/rum_overview.ts

@@ -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.
+ */
+
+import {
+  Setup,
+  SetupTimeRange,
+  SetupUIFilters,
+  // eslint-disable-next-line @kbn/eslint/no-restricted-paths
+} from '../../server/lib/helpers/setup_request';
+import { PROCESSOR_EVENT, TRANSACTION_TYPE } from '../elasticsearch_fieldnames';
+import { rangeFilter } from '../utils/range_filter';
+
+export function getRumOverviewProjection({
+  setup,
+}: {
+  setup: Setup & SetupTimeRange & SetupUIFilters;
+}) {
+  const { start, end, uiFiltersES, indices } = setup;
+
+  const bool = {
+    filter: [
+      { range: rangeFilter(start, end) },
+      { term: { [PROCESSOR_EVENT]: 'transaction' } },
+      { term: { [TRANSACTION_TYPE]: 'page-load' } },
+      ...uiFiltersES,
+    ],
+  };
+
+  return {
+    index: indices['apm_oss.transactionIndices'],
+    body: {
+      query: {
+        bool,
+      },
+    },
+  };
+}

x-pack/plugins/apm/common/projections/services.ts

@@ -12,7 +12,7 @@ import {
 } from '../../server/lib/helpers/setup_request';
 import { SERVICE_NAME, PROCESSOR_EVENT } from '../elasticsearch_fieldnames';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { rangeFilter } from '../../server/lib/helpers/range_filter';
+import { rangeFilter } from '../utils/range_filter';
 
 export function getServicesProjection({
   setup,

x-pack/plugins/apm/common/projections/transactions.ts

@@ -17,7 +17,7 @@ import {
   TRANSACTION_NAME,
 } from '../elasticsearch_fieldnames';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { rangeFilter } from '../../server/lib/helpers/range_filter';
+import { rangeFilter } from '../utils/range_filter';
 
 export function getTransactionsProjection({
   setup,

x-pack/plugins/apm/common/projections/typings.ts

@@ -29,4 +29,5 @@ export enum PROJECTION {
   METRICS = 'metrics',
   ERROR_GROUPS = 'errorGroups',
   SERVICE_NODES = 'serviceNodes',
+  RUM_OVERVIEW = 'rumOverview',
 }

x-pack/plugins/apm/e2e/cypress/integration/helpers.ts

@@ -6,8 +6,9 @@
 
 /* eslint-disable import/no-extraneous-dependencies */
 
-const RANGE_FROM = '2020-03-04T12:30:00.000Z';
-const RANGE_TO = '2020-03-04T13:00:00.000Z';
+const RANGE_FROM = '2020-06-11T14:59:32.686Z';
+const RANGE_TO = '2020-06-11T16:59:36.219Z';
+
 const BASE_URL = Cypress.config().baseUrl;
 
 /** The default time in ms to wait for a Cypress command to complete */

x-pack/plugins/apm/e2e/cypress/integration/rum_dashboard.feature

@@ -0,0 +1,7 @@
+Feature: RUM Dashboard
+
+  Scenario: Client metrics
+    Given a user browses the APM UI application
+    When the user inspects the real user monitoring tab
+    Then should redirect to rum dashboard
+      And should have correct client metrics

x-pack/plugins/apm/e2e/cypress/integration/snapshots.js

@@ -1,10 +1,20 @@
 module.exports = {
+  "__version": "4.5.0",
+  "RUM Dashboard": {
+    "Client metrics": {
+      "1": "77.52 seconds",
+      "2": "199",
+      "3": "4.14 seconds",
+      "4": "77.52 seconds",
+      "5": "199",
+      "6": "4.14 seconds"
+    }
+  },
   "APM": {
     "Transaction duration charts": {
-      "1": "350 ms",
-      "2": "175 ms",
+      "1": "450 ms",
+      "2": "225 ms",
       "3": "0 ms"
     }
-  },
-  "__version": "4.5.0"
+  }
 }

x-pack/plugins/apm/e2e/cypress/support/step_definitions/rum_dashboard.ts

@@ -0,0 +1,41 @@
+/*
+ * 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 { Given, When, Then } from 'cypress-cucumber-preprocessor/steps';
+import { loginAndWaitForPage } from '../../integration/helpers';
+
+/** The default time in ms to wait for a Cypress command to complete */
+export const DEFAULT_TIMEOUT = 60 * 1000;
+
+Given(`a user browses the APM UI application`, () => {
+  // open service overview page
+  loginAndWaitForPage(`/app/apm#/services`);
+});
+
+When(`the user inspects the real user monitoring tab`, () => {
+  // click rum tab
+  cy.get(':contains(Real User Monitoring)', { timeout: DEFAULT_TIMEOUT })
+    .last()
+    .click({ force: true });
+});
+
+Then(`should redirect to rum dashboard`, () => {
+  cy.url().should('contain', `/app/apm#/rum-overview`);
+});
+
+Then(`should have correct client metrics`, () => {
+  const clientMetrics = '[data-cy=client-metrics] .euiStat__title';
+
+  // wait for all loading to finish
+  cy.get('kbnLoadingIndicator').should('not.be.visible');
+  cy.get('.euiStat__title-isLoading').should('not.be.visible');
+
+  cy.get(clientMetrics).eq(2).invoke('text').snapshot();
+
+  cy.get(clientMetrics).eq(1).invoke('text').snapshot();
+
+  cy.get(clientMetrics).eq(0).invoke('text').snapshot();
+});

x-pack/plugins/apm/e2e/yarn.lock

@@ -5561,10 +5561,10 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
-typescript@3.9.2:
-  version "3.9.2"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.2.tgz#64e9c8e9be6ea583c54607677dd4680a1cf35db9"
-  integrity sha512-q2ktq4n/uLuNNShyayit+DTobV2ApPEo/6so68JaD5ojvc/6GClBipedB9zNWYxRSAlZXAe405Rlijzl6qDiSw==
+typescript@3.9.5:
+  version "3.9.5"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.5.tgz#586f0dba300cde8be52dd1ac4f7e1009c1b13f36"
+  integrity sha512-hSAifV3k+i6lEoCJ2k6R2Z/rp/H3+8sdmcn5NrS3/3kE7+RyZXm9aqvxWqjEXHAd8b0pShatpcdMTvEdvAJltQ==
 
 umd@^3.0.0:
   version "3.0.3"

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

@@ -25,6 +25,8 @@ import { SetupInstructionsLink } from '../../shared/Links/SetupInstructionsLink'
 import { ServiceMap } from '../ServiceMap';
 import { ServiceOverview } from '../ServiceOverview';
 import { TraceOverview } from '../TraceOverview';
+import { RumOverview } from '../RumDashboard';
+import { RumOverviewLink } from '../../shared/Links/apm/RumOverviewLink';
 
 function getHomeTabs({
   serviceMapEnabled = true,
@@ -70,14 +72,27 @@ function getHomeTabs({
     });
   }
 
+  homeTabs.push({
+    link: (
+      <RumOverviewLink>
+        {i18n.translate('xpack.apm.home.rumTabLabel', {
+          defaultMessage: 'Real User Monitoring',
+        })}
+      </RumOverviewLink>
+    ),
+    render: () => <RumOverview />,
+    name: 'rum-overview',
+  });
+
   return homeTabs;
 }
+
 const SETTINGS_LINK_LABEL = i18n.translate('xpack.apm.settingsLinkLabel', {
   defaultMessage: 'Settings',
 });
 
 interface Props {
-  tab: 'traces' | 'services' | 'service-map';
+  tab: 'traces' | 'services' | 'service-map' | 'rum-overview';
 }
 
 export function Home({ tab }: Props) {

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

@@ -250,4 +250,13 @@ export const routes: BreadcrumbRoute[] = [
     }),
     name: RouteName.CUSTOMIZE_UI,
   },
+  {
+    exact: true,
+    path: '/rum-overview',
+    component: () => <Home tab="rum-overview" />,
+    breadcrumb: i18n.translate('xpack.apm.home.rumOverview.title', {
+      defaultMessage: 'Real User Monitoring',
+    }),
+    name: RouteName.RUM_OVERVIEW,
+  },
 ];

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

@@ -26,4 +26,5 @@ export enum RouteName {
   SERVICE_NODES = 'nodes',
   LINK_TO_TRACE = 'link_to_trace',
   CUSTOMIZE_UI = 'customize_ui',
+  RUM_OVERVIEW = 'rum_overview',
 }

x-pack/plugins/apm/public/components/app/RumDashboard/ChartWrapper/index.tsx

@@ -0,0 +1,63 @@
+/*
+ * 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 React, { FC, HTMLAttributes } from 'react';
+import {
+  EuiErrorBoundary,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiLoadingChart,
+} from '@elastic/eui';
+
+interface Props {
+  /**
+   * Height for the chart
+   */
+  height?: string;
+  /**
+   * if chart data source is still loading
+   */
+  loading?: boolean;
+  /**
+   * aria-label for accessibility
+   */
+  'aria-label'?: string;
+}
+
+export const ChartWrapper: FC<Props> = ({
+  loading = false,
+  height = '100%',
+  children,
+  ...rest
+}) => {
+  const opacity = loading === true ? 0.3 : 1;
+
+  return (
+    <EuiErrorBoundary>
+      <div
+        style={{
+          height,
+          opacity,
+          transition: 'opacity 0.2s',
+        }}
+        {...(rest as HTMLAttributes<HTMLDivElement>)}
+      >
+        {children}
+      </div>
+      {loading === true && (
+        <EuiFlexGroup
+          justifyContent="spaceAround"
+          alignItems="center"
+          style={{ height, marginTop: `-${height}`, marginBottom: 0 }}
+        >
+          <EuiFlexItem grow={false}>
+            <EuiLoadingChart size="xl" />
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      )}
+    </EuiErrorBoundary>
+  );
+};