[APM] E2E: Zero config for running e2e locally (#59152)

.gitignore

@@ -44,3 +44,6 @@ package-lock.json
 *.sublime-*
 npm-debug.log*
 .tern-project
+x-pack/legacy/plugins/apm/tsconfig.json
+apm.tsconfig.json
+/x-pack/legacy/plugins/apm/e2e/snapshots.js

x-pack/legacy/plugins/apm/e2e/.gitignore

@@ -1,4 +1,3 @@
-cypress/ingest-data/events.json
 cypress/screenshots/*
-
 cypress/test-results
+tmp

x-pack/legacy/plugins/apm/e2e/README.md

@@ -1,66 +1,24 @@
 # End-To-End (e2e) Test for APM UI
 
-## Ingest static data into Elasticsearch via APM Server
+**Run E2E tests**
 
-1. Start Elasticsearch and APM Server, using [apm-integration-testing](https://github.com/elastic/apm-integration-testing):
-
-```shell
-$ git clone https://github.com/elastic/apm-integration-testing.git
-$ cd apm-integration-testing
-./scripts/compose.py start master --no-kibana --no-xpack-secure
-```
-
-2. Download [static data file](https://storage.googleapis.com/apm-ui-e2e-static-data/events.json)
-
-```shell
-$ cd x-pack/legacy/plugins/apm/e2e/cypress/ingest-data
-$ curl https://storage.googleapis.com/apm-ui-e2e-static-data/events.json --output events.json
-```
-
-3. Post to APM Server
-
-```shell
-$ cd x-pack/legacy/plugins/apm/e2e/cypress/ingest-data
-$ node replay.js --server-url http://localhost:8200 --secret-token abcd --events ./events.json
-```
->This process will take a few minutes to ingest all data
-
-4. Start Kibana
-
-```shell
-$ yarn kbn bootstrap
-$ yarn start --no-base-path --csp.strict=false
-```
-
-> Content Security Policy (CSP) Settings: Your Kibana instance must have the `csp.strict: false`.
-
-## How to run the tests
-
-_Note: Run the following commands from `kibana/x-pack/legacy/plugins/apm/e2e/cypress`._
-
-### Interactive mode
-
-```
-yarn cypress open
+```sh
+x-pack/legacy/plugins/apm/e2e/run-e2e.sh
 ```
 
-### Headless mode
-
-```
-yarn cypress run
-```
+_Starts Kibana, APM Server, Elasticsearch (with sample data) and runs the tests_
 
 ## Reproducing CI builds
 
->This process is very slow compared to the local development described above. Consider that the CI must install and configure the build tools and create a Docker image for the project to run tests in a consistent manner.
+> This process is very slow compared to the local development described above. Consider that the CI must install and configure the build tools and create a Docker image for the project to run tests in a consistent manner.
 
 The Jenkins CI uses a shell script to prepare Kibana:
 
 ```shell
 # Prepare and run Kibana locally
 $ x-pack/legacy/plugins/apm/e2e/ci/prepare-kibana.sh
 # Build Docker image for Kibana
-$ docker build --tag cypress --build-arg NODE_VERSION=$(cat .node-version) x-pack/legacy/plugins/apm/e2e/ci 
+$ docker build --tag cypress --build-arg NODE_VERSION=$(cat .node-version) x-pack/legacy/plugins/apm/e2e/ci
 # Run Docker image
 $ docker run --rm -t --user "$(id -u):$(id -g)" \
     -v `pwd`:/app --network="host" \

x-pack/legacy/plugins/apm/e2e/ci/entrypoint.sh

@@ -7,7 +7,7 @@ if [ -z "${kibana}" ] ; then
   kibana=127.0.0.1
 fi
 
-export CYPRESS_BASE_URL=http://${kibana}:5601
+export CYPRESS_BASE_URL=http://${kibana}:5701
 
 ## To avoid issues with the home and caching artifacts
 export HOME=/tmp

x-pack/legacy/plugins/apm/e2e/ci/kibana.e2e.yml

@@ -0,0 +1,31 @@
+# Kibana
+server.port: 5701
+xpack.security.encryptionKey: 'something_at_least_32_characters'
+csp.strict: false
+logging.verbose: true
+
+# Elasticsearch
+# Started via apm-integration-testing
+# ./scripts/compose.py start master --no-kibana --elasticsearch-port 9201 --apm-server-port 8201
+elasticsearch.hosts: http://localhost:9201
+elasticsearch.username: 'kibana_system_user'
+elasticsearch.password: 'changeme'
+
+# APM index pattern
+apm_oss.indexPattern: apm-*
+
+# APM Indices
+apm_oss.errorIndices: apm-*-error*
+apm_oss.sourcemapIndices: apm-*-sourcemap
+apm_oss.transactionIndices: apm-*-transaction*
+apm_oss.spanIndices: apm-*-span*
+apm_oss.metricsIndices: apm-*-metric*
+apm_oss.onboardingIndices: apm-*-onboarding*
+
+# APM options
+xpack.apm.enabled: true
+xpack.apm.serviceMapEnabled: false
+xpack.apm.autocreateApmIndexPattern: true
+xpack.apm.ui.enabled: true
+xpack.apm.ui.transactionGroupBucketSize: 100
+xpack.apm.ui.maxTraceItems: 1000

x-pack/legacy/plugins/apm/e2e/ci/prepare-kibana.sh

@@ -1,24 +1,21 @@
 #!/usr/bin/env bash
 set -e
 
-CYPRESS_DIR="x-pack/legacy/plugins/apm/e2e"
+E2E_DIR="x-pack/legacy/plugins/apm/e2e"
 
 echo "1/3 Install dependencies ..."
 # shellcheck disable=SC1091
 source src/dev/ci_setup/setup_env.sh true
 yarn kbn bootstrap
-cp ${CYPRESS_DIR}/ci/kibana.dev.yml config/kibana.dev.yml
-echo 'elasticsearch:' >> config/kibana.dev.yml
-cp ${CYPRESS_DIR}/ci/kibana.dev.yml config/kibana.yml
 
 echo "2/3 Ingest test data ..."
-pushd ${CYPRESS_DIR}
+pushd ${E2E_DIR}
 yarn install
 curl --silent https://storage.googleapis.com/apm-ui-e2e-static-data/events.json --output ingest-data/events.json
-node ingest-data/replay.js --server-url http://localhost:8200 --secret-token abcd --events ./events.json > ingest-data.log
+node ingest-data/replay.js --server-url http://localhost:8201 --secret-token abcd --events ./events.json > ingest-data.log
 
 echo "3/3 Start Kibana ..."
 popd
 ## Might help to avoid FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 export NODE_OPTIONS="--max-old-space-size=4096"
-nohup node scripts/kibana --no-base-path --csp.strict=false --optimize.watch=false> kibana.log 2>&1 &
+nohup node scripts/kibana --config "${E2E_DIR}/ci/kibana.e2e.yml" --no-base-path --optimize.watch=false> kibana.log 2>&1 &

x-pack/legacy/plugins/apm/e2e/cypress.json

@@ -1,5 +1,6 @@
 {
-  "baseUrl": "http://localhost:5601",
+  "nodeVersion": "system",
+  "baseUrl": "http://localhost:5701",
   "video": false,
   "trashAssetsBeforeRuns": false,
   "fileServerFolder": "../",
@@ -15,5 +16,9 @@
     "mochaFile": "./cypress/test-results/[hash]-e2e-tests.xml",
     "toConsole": false
   },
-  "testFiles": "**/*.{feature,features}"
+  "testFiles": "**/*.{feature,features}",
+  "env": {
+    "elasticsearch_username": "admin",
+    "elasticsearch_password": "changeme"
+  }
 }

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

@@ -2,6 +2,6 @@ Feature: APM
 
   Scenario: Transaction duration charts
     Given a user browses the APM UI application
-    When the user inspects the opbeans-go service
+    When the user inspects the opbeans-node service
     Then should redirect to correct path with correct params
-      And should have correct y-axis ticks
+      And should have correct y-axis ticks

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

@@ -6,45 +6,26 @@
 
 /* eslint-disable import/no-extraneous-dependencies */
 
-import { safeLoad } from 'js-yaml';
-
-const RANGE_FROM = '2019-09-04T18:00:00.000Z';
-const RANGE_TO = '2019-09-05T06:00:00.000Z';
+const RANGE_FROM = '2020-03-04T12:30:00.000Z';
+const RANGE_TO = '2020-03-04T13:00:00.000Z';
 const BASE_URL = Cypress.config().baseUrl;
 
-/**
- * Credentials in the `kibana.dev.yml` config file will be used to authenticate with Kibana
- */
-const KIBANA_DEV_YML_PATH = '../../../../../config/kibana.dev.yml';
-
 /** The default time in ms to wait for a Cypress command to complete */
-export const DEFAULT_TIMEOUT = 30 * 1000;
+export const DEFAULT_TIMEOUT = 60 * 1000;
 
 export function loginAndWaitForPage(url: string) {
-  // read the login details from `kibana.dev.yml`
-  cy.readFile(KIBANA_DEV_YML_PATH).then(kibanaDevYml => {
-    const config = safeLoad(kibanaDevYml);
-    const username = config['elasticsearch.username'];
-    const password = config['elasticsearch.password'];
-
-    const hasCredentials = username && password;
-
-    cy.log(
-      `Authenticating via config credentials from "${KIBANA_DEV_YML_PATH}". username: ${username}, password: ${password}`
-    );
+  const username = Cypress.env('elasticsearch_username');
+  const password = Cypress.env('elasticsearch_password');
 
-    const options = hasCredentials
-      ? {
-          auth: { username, password }
-        }
-      : {};
+  cy.log(`Authenticating via ${username} / ${password}`);
 
-    const fullUrl = `${BASE_URL}${url}?rangeFrom=${RANGE_FROM}&rangeTo=${RANGE_TO}`;
-    cy.visit(fullUrl, options);
-  });
+  const fullUrl = `${BASE_URL}${url}?rangeFrom=${RANGE_FROM}&rangeTo=${RANGE_TO}`;
+  cy.visit(fullUrl, { auth: { username, password } });
 
   cy.viewport('macbook-15');
 
   // wait for loading spinner to disappear
-  cy.get('.kibanaLoaderWrap', { timeout: DEFAULT_TIMEOUT }).should('not.exist');
+  cy.get('#kbn_loading_message', { timeout: DEFAULT_TIMEOUT }).should(
+    'not.exist'
+  );
 }

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

@@ -1,19 +1,10 @@
 module.exports = {
-  "When clicking opbeans-go service": {
-    "transaction duration charts": {
-      "should have correct y-axis ticks": {
-        "1": "3.7 min",
-        "2": "1.8 min",
-        "3": "0.0 min"
-      }
-    }
-  },
-  "__version": "3.8.3",
   "APM": {
     "Transaction duration charts": {
-      "1": "3.7 min",
-      "2": "1.8 min",
-      "3": "0.0 min"
+      "1": "500 ms",
+      "2": "250 ms",
+      "3": "0 ms"
     }
-  }
+  },
+  "__version": "4.2.0"
 }

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

@@ -12,15 +12,15 @@ Given(`a user browses the APM UI application`, () => {
   loginAndWaitForPage(`/app/apm#/services`);
 });
 
-When(`the user inspects the opbeans-go service`, () => {
-  // click opbeans-go service
-  cy.get(':contains(opbeans-go)')
+When(`the user inspects the opbeans-node service`, () => {
+  // click opbeans-node service
+  cy.get(':contains(opbeans-node)')
     .last()
     .click({ force: true });
 });
 
 Then(`should redirect to correct path with correct params`, () => {
-  cy.url().should('contain', `/app/apm#/services/opbeans-go/transactions`);
+  cy.url().should('contain', `/app/apm#/services/opbeans-node/transactions`);
   cy.url().should('contain', `transactionType=request`);
 });