[Monitoring] APM Monitoring UI (#22975) (#23444)

* Merge in boilerplate branch

* Manually copy over the specific metrics and UIs

* Add api integration tests

* Fix tests

* Remove unused metrics

* Update snapshot

* Fix tests

* Remove types agg

* Use ApmClusterMetric

* provide description for apm-server monitoring metrics (#23331)

* Vis LESS to SASS (cont.) (#23199)

* Tweak migrations integraiton tests to have a stable sort (#23265)

* Fix: plugin api route with security enabled (#23334)

Closes #23266

This is more of a quick fix than the final solution. The issue was that Canvas tries to check the plugins API without checking to see if the user it logged in. As a result, instead of the plugins response, it gets the HTML from the login page and that causes an error to be thrown when attempting to parse the results.

For now, this PR just disables the auth requirement on the Canvas plugin API endpoint.

* [migrations/tests] sort results before assertion (#23347)

There have been several failures in this test, seemingly caused by a lack of sorting in the results. It makes sense that since both migrations are run simultaneously that sometimes one would succeed and sometimes another would, so I've just sorted the results before checking.

![image](https://user-images.githubusercontent.com/1329312/45791153-44e9cc80-bc3d-11e8-88c4-760d4c7b35bd.png)

cc: @chrisdavies

* [ML] Moves custom URL editor Add button and form to top of flyout (#23326)

* [ML] Moves custom URL editor Add button and form to top of flyout

* [ML] Edits to custom URL editor class name

* Graph LESS to SASS (#23348)

* Developer documentation for integrating with the telemetry service (#23295)

* Developer documentation for integrating with the telemetry service

* open with a bang

* more faqs

* thing about tracking ui interactions

* talk to the plat team

* create and register

* Fix a bug where ES sends a string and migrations expect a boolean (#23313)

* chore: use cheerio in i18n.html.getDirectiveMessages (#23342)

this was only using jsdom to parse html, but cheerio allows parsing html without requiring a dom. cheerio was also already in the dependency list.

* [core/utils] add shareWeakReplay() operator (#23333)

* Chore: fix canvas test runner (#23336)

Blocked by #23342

This fixes the local test runner in Canvas. It should not affect anything else, including the CI test runner.

- Bumps JSDOM to ^12.0.0
  - I matched Kibana's version on migration, but nothing else in X-Pack uses JSDOM, so we can use the newer version (which has a very different API)
  - I had to match it because of a script that enforces version matching, but #23342 removed jsdom from Kibana, so we no longer have a version to match
- Restores the local `.babelrc` file
  - I thought it was only used for building plugins; I was wrong 😢

* Convert Discover open top nav to EUI flyout (#22971)

* move find logic to SavedObjectFinder component since savedObjectClient is no longer coupled to angular

* implement flyout open saved searches

* remove old open stuff

* add jest test for OpenSearchPanel and simplify panel title

* fix functional tests

* fix _lab_mode functional test

* Migrate save top nav in Discover and Visualize to EUI (#23190)

* extract reusable save component from DashboardSaveModal

* update discover search to use SavedObjectSaveModal

* create generic show_save_model that works for both discover and dashboard

* fix last bits of discover save

* remove old save functionallity

* migrate visualize save to EUI

* fix functional tests

* disable save button if title is empty

* mark title input as invalid when title is not provided

* fix funtional tests

* Moves styleSheetPath to uiExports (#23007)

This was previously defined in uiExports.app, which limited plugins which are not an app of providing a stylesheet. This allows any plugin to define a stylesheet which will be available on page load.

* Timelion less to sass (#23339)

* Consistent casing

* Fix snapshot

* Update tests

x-pack/plugins/monitoring/public/components/apm/instance/index.js

@@ -0,0 +1,7 @@
+/*
+ * 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.
+ */
+
+export { ApmServerInstance } from './instance';

x-pack/plugins/monitoring/public/components/apm/instance/instance.js

@@ -0,0 +1,59 @@
+/*
+ * 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 from 'react';
+import { MonitoringTimeseriesContainer } from '../../chart';
+import {
+  EuiFlexItem,
+  EuiPanel,
+  EuiSpacer,
+  EuiPage,
+  EuiPageBody,
+  EuiFlexGroup
+} from '@elastic/eui';
+import { Status } from './status';
+
+export function ApmServerInstance({ summary, metrics, ...props }) {
+  const seriesToShow = [
+    metrics.apm_responses_valid,
+    metrics.apm_responses_errors,
+
+    metrics.apm_output_events_rate_success,
+    metrics.apm_output_events_rate_failure,
+
+    metrics.apm_requests,
+    metrics.apm_transformations,
+
+
+    metrics.apm_cpu,
+    metrics.apm_memory,
+
+    metrics.apm_os_load,
+  ];
+
+  const charts = seriesToShow.map((data, index) => (
+    <EuiFlexItem style={{ minWidth: '45%' }} key={index}>
+      <EuiPanel>
+        <MonitoringTimeseriesContainer
+          series={data}
+          {...props}
+        />
+      </EuiPanel>
+    </EuiFlexItem>
+  ));
+
+  return (
+    <EuiPage style={{ backgroundColor: 'white' }}>
+      <EuiPageBody>
+        <Status stats={summary}/>
+        <EuiSpacer size="s"/>
+        <EuiFlexGroup wrap>
+          {charts}
+        </EuiFlexGroup>
+      </EuiPageBody>
+    </EuiPage>
+  );
+}

x-pack/plugins/monitoring/public/components/apm/instance/status.js

@@ -0,0 +1,64 @@
+/*
+ * 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, { Fragment } from 'react';
+import moment from 'moment';
+import { SummaryStatus } from '../../summary_status';
+import { ApmStatusIcon } from '../status_icon';
+import { formatMetric } from '../../../lib/format_number';
+import { formatTimestampToDuration } from '../../../../common';
+
+export function Status({ stats }) {
+  const {
+    name,
+    output,
+    version,
+    uptime,
+    timeOfLastEvent,
+  } = stats;
+
+  const metrics = [
+    {
+      label: 'Name',
+      value: name,
+      dataTestSubj: 'name'
+    },
+    {
+      label: 'Output',
+      value: output,
+      dataTestSubj: 'output'
+    },
+    {
+      label: 'Version',
+      value: version,
+      dataTestSubj: 'version'
+    },
+    {
+      label: 'Uptime',
+      value: formatMetric(uptime, 'time_since'),
+      dataTestSubj: 'uptime'
+    },
+    {
+      label: 'Last Event',
+      value: formatTimestampToDuration(+moment(timeOfLastEvent), 'since') + ' ago',
+      dataTestSubj: 'timeOfLastEvent',
+    }
+  ];
+
+  const IconComponent = ({ status }) => (
+    <Fragment>
+      Status: <ApmStatusIcon status={status} />
+    </Fragment>
+  );
+
+  return (
+    <SummaryStatus
+      metrics={metrics}
+      IconComponent={IconComponent}
+      data-test-subj="apmDetailStatus"
+    />
+  );
+}

x-pack/plugins/monitoring/public/components/apm/instances/index.js

@@ -0,0 +1,7 @@
+/*
+ * 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.
+ */
+
+export { ApmServerInstances } from './instances';

x-pack/plugins/monitoring/public/components/apm/instances/instances.js

@@ -0,0 +1,107 @@
+/*
+ * 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 from 'react';
+import moment from 'moment';
+import { MonitoringTable } from '../../table';
+import {
+  KuiTableRowCell,
+  KuiTableRow
+} from '@kbn/ui-framework/components';
+import { EuiLink } from '@elastic/eui';
+import { Status } from './status';
+import { SORT_ASCENDING, SORT_DESCENDING, TABLE_ACTION_UPDATE_FILTER } from '../../../../common/constants';
+import { formatMetric } from '../../../lib/format_number';
+import { formatTimestampToDuration } from '../../../../common';
+
+
+const filterFields = [ 'name', 'type', 'version', 'output' ];
+const columns = [
+  { title: 'Name', sortKey: 'name', sortOrder: SORT_ASCENDING },
+  { title: 'Output Enabled', sortKey: 'output' },
+  { title: 'Total Events Rate', sortKey: 'total_events_rate', secondarySortOrder: SORT_DESCENDING },
+  { title: 'Bytes Sent Rate', sortKey: 'bytes_sent_rate' },
+  { title: 'Output Errors', sortKey: 'errors' },
+  { title: 'Last Event', sortKey: 'time_of_last_event' },
+  { title: 'Allocated Memory', sortKey: 'memory' },
+  { title: 'Version', sortKey: 'version' },
+];
+const instanceRowFactory = () => {
+  return function KibanaRow(props) {
+    const applyFiltering = filterText => () => {
+      props.dispatchTableAction(TABLE_ACTION_UPDATE_FILTER, filterText);
+    };
+
+    return (
+      <KuiTableRow>
+        <KuiTableRowCell>
+          <div className="monTableCell__name">
+            <EuiLink
+              href={`#/apm/instances/${props.uuid}`}
+              data-test-subj={`apmLink-${props.name}`}
+            >
+              {props.name}
+            </EuiLink>
+          </div>
+        </KuiTableRowCell>
+        <KuiTableRowCell>
+          {props.output}
+        </KuiTableRowCell>
+        <KuiTableRowCell>
+          {formatMetric(props.total_events_rate, '', '/s')}
+        </KuiTableRowCell>
+        <KuiTableRowCell>
+          {formatMetric(props.bytes_sent_rate, 'byte', '/s')}
+        </KuiTableRowCell>
+        <KuiTableRowCell>
+          {formatMetric(props.errors, '0')}
+        </KuiTableRowCell>
+        <KuiTableRowCell>
+          {formatTimestampToDuration(+moment(props.time_of_last_event), 'since') + ' ago'}
+        </KuiTableRowCell>
+        <KuiTableRowCell>
+          {formatMetric(props.memory, 'byte')}
+        </KuiTableRowCell>
+        <KuiTableRowCell>
+          <EuiLink
+            onClick={applyFiltering(props.version)}
+          >
+            {props.version}
+          </EuiLink>
+        </KuiTableRowCell>
+      </KuiTableRow>
+    );
+  };
+};
+
+export function ApmServerInstances({ apms }) {
+  const {
+    pageIndex,
+    filterText,
+    sortKey,
+    sortOrder,
+    onNewState,
+  } = apms;
+
+  return (
+    <div>
+      <Status stats={apms.data.stats}/>
+      <MonitoringTable
+        className="apmInstancesTable"
+        rows={apms.data.apms}
+        pageIndex={pageIndex}
+        filterText={filterText}
+        sortKey={sortKey}
+        sortOrder={sortOrder}
+        onNewState={onNewState}
+        placeholder="Filter Instances..."
+        filterFields={filterFields}
+        columns={columns}
+        rowComponent={instanceRowFactory()}
+      />
+    </div>
+  );
+}

x-pack/plugins/monitoring/public/components/apm/instances/status.js

@@ -0,0 +1,54 @@
+/*
+ * 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, { Fragment } from 'react';
+import moment from 'moment';
+import { SummaryStatus } from '../../summary_status';
+import { ApmStatusIcon } from '../status_icon';
+import { formatMetric } from '../../../lib/format_number';
+import { formatTimestampToDuration } from '../../../../common';
+
+export function Status({ stats }) {
+  const {
+    apms: {
+      total
+    },
+    totalEvents,
+    timeOfLastEvent,
+  } = stats;
+
+  const metrics = [
+    {
+      label: 'Servers',
+      value: total,
+      dataTestSubj: 'total'
+    },
+    {
+      label: 'Total Events',
+      value: formatMetric(totalEvents, '0.[0]a'),
+      dataTestSubj: 'totalEvents'
+    },
+    {
+      label: 'Last Event',
+      value: formatTimestampToDuration(+moment(timeOfLastEvent), 'since') + ' ago',
+      dataTestSubj: 'timeOfLastEvent',
+    }
+  ];
+
+  const IconComponent = ({ status }) => (
+    <Fragment>
+      Status: <ApmStatusIcon status={status} />
+    </Fragment>
+  );
+
+  return (
+    <SummaryStatus
+      metrics={metrics}
+      IconComponent={IconComponent}
+      data-test-subj="apmDetailStatus"
+    />
+  );
+}

x-pack/plugins/monitoring/public/components/apm/overview/index.js

@@ -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 from 'react';
+import { MonitoringTimeseriesContainer } from '../../chart';
+import {
+  EuiSpacer,
+  EuiPage,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiPageBody,
+  EuiPanel
+} from '@elastic/eui';
+import { Status } from '../instances/status';
+
+export function ApmOverview({
+  stats,
+  metrics,
+  ...props
+}) {
+  const seriesToShow = [
+    metrics.apm_responses_valid,
+    metrics.apm_responses_errors,
+
+    metrics.apm_output_events_rate_success,
+    metrics.apm_output_events_rate_failure,
+
+    metrics.apm_requests,
+    metrics.apm_transformations,
+
+
+    metrics.apm_cpu,
+    metrics.apm_memory,
+
+    metrics.apm_os_load,
+  ];
+
+  const charts = seriesToShow.map((data, index) => (
+    <EuiFlexItem style={{ minWidth: '45%' }} key={index}>
+      <EuiPanel>
+        <MonitoringTimeseriesContainer
+          series={data}
+          {...props}
+        />
+      </EuiPanel>
+    </EuiFlexItem>
+  ));
+
+  return (
+    <EuiPage style={{ backgroundColor: 'white' }}>
+      <EuiPageBody>
+        <Status stats={stats}/>
+        <EuiSpacer size="s"/>
+        <EuiFlexGroup wrap>
+          {charts}
+        </EuiFlexGroup>
+      </EuiPageBody>
+    </EuiPage>
+  );
+}

x-pack/plugins/monitoring/public/components/apm/status_icon.js

@@ -0,0 +1,23 @@
+/*
+ * 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 from 'react';
+import { StatusIcon } from 'plugins/monitoring/components/status_icon';
+
+export function ApmStatusIcon({ status, availability = true }) {
+  const type = (() => {
+    if (!availability) {
+      return StatusIcon.TYPES.GRAY;
+    }
+
+    const statusKey = status.toUpperCase();
+    return StatusIcon.TYPES[statusKey] || StatusIcon.TYPES.YELLOW;
+  })();
+
+  return (
+    <StatusIcon type={type} label={`Health: ${status}`} />
+  );
+}