From d4f23e6769206f34d9d5792d33629c6b3f9c2f18 Mon Sep 17 00:00:00 2001
From: Walter Rafelsberger <walter@rafelsberger.at>
Date: Thu, 27 Sep 2018 21:10:11 +0200
Subject: [PATCH] [ML] Improve Explorer Chart labels. (#23494)

Improves the display of the Explorer Chart labels to fix the following issues:
- Long chart labels could be cut off, so it's not possible to tell what entity fields a chart is referring to. A workaround is to hover the info icon tooltip but that's really slow and cumbersome if you have to do it for every chart.
- The list of entity fields and its values is an unformatted text blob which makes it hard to read and tell which values refer to which field.

Changes:
- If any of the chart labels is longer than 60 chars, the entity fields will wrap to a new line (for all charts to a achieve a consistent look).
- Entity fields use EuiBadge and some custom formatting to make it easier to see field/value pairs.
- If the detector description is too long, it still uses ellipsis for text-overflow:
- If the entity badges are too long, they will be just cut off to the right. There's no simple CSS fix for that, we cannot use ellipsis and we don't want to wrap those badges again because then multiple charts could have different heights. I experimented with gradients but that turned out to be somewhat unreliable. I still consider this a good enough improvement compare to the previous version and would like to leave a tweak for that to a follow up PR.
- If there are mixed detectors with and without entity fields and the existing one wrap, multiple charts are aligned considered the height of the entity fields on display:
- Additionally, this changes the link to the single series viewer from custom code using a Font Awesome icon to use EuiButtonEmpty with the same EUI based icon and a tooltip.
---
 .../plugins/ml/public/explorer/explorer.html  |   2 +
 .../explorer_charts_container.test.js.snap    |  54 --------
 .../explorer_chart_label.test.js.snap         | 120 ++++++++++++++++++
 .../explorer_chart_label_badge.test.js.snap   |  18 +++
 .../explorer_chart_label.js                   |  75 +++++++++++
 .../explorer_chart_label.test.js              |  45 +++++++
 .../explorer_chart_label_badge.js             |  30 +++++
 .../explorer_chart_label_badge.test.js        |  24 ++++
 .../components/explorer_chart_label/index.js  |   7 +
 .../styles/explorer_chart_label.less          |  33 +++++
 .../styles/explorer_chart_label_badge.less    |  10 ++
 .../explorer_charts/explorer_chart.js         |   6 +-
 .../explorer_charts_container.js              |  74 ++++++-----
 .../explorer_charts_container.test.js         |  39 +++++-
 .../styles/explorer_chart.less                |   6 +-
 .../styles/explorer_charts_container.less     |  39 ++----
 x-pack/plugins/ml/public/util/chart_utils.js  |   9 ++
 .../ml/public/util/chart_utils.test.js        |  21 +++
 18 files changed, 492 insertions(+), 120 deletions(-)
 delete mode 100644 x-pack/plugins/ml/public/explorer/explorer_charts/__snapshots__/explorer_charts_container.test.js.snap
 create mode 100644 x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/__snapshots__/explorer_chart_label.test.js.snap
 create mode 100644 x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/__snapshots__/explorer_chart_label_badge.test.js.snap
 create mode 100644 x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/explorer_chart_label.js
 create mode 100644 x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/explorer_chart_label.test.js
 create mode 100644 x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/explorer_chart_label_badge.js
 create mode 100644 x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/explorer_chart_label_badge.test.js
 create mode 100644 x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/index.js
 create mode 100644 x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/styles/explorer_chart_label.less
 create mode 100644 x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/styles/explorer_chart_label_badge.less

diff --git a/x-pack/plugins/ml/public/explorer/explorer.html b/x-pack/plugins/ml/public/explorer/explorer.html
index 857a3755a7771..d94296e3ad6a4 100644
--- a/x-pack/plugins/ml/public/explorer/explorer.html
+++ b/x-pack/plugins/ml/public/explorer/explorer.html
@@ -131,6 +131,8 @@ <h4 class="euiTitle euiTitle--small">No {{swimlaneViewByFieldName}} influencers
           </div>
         </div>
 
+        <div class="euiSpacer euiSpacer--m"></div>
+
         <div class="euiText explorer-charts">
           <ml-explorer-charts-container />
         </div>
diff --git a/x-pack/plugins/ml/public/explorer/explorer_charts/__snapshots__/explorer_charts_container.test.js.snap b/x-pack/plugins/ml/public/explorer/explorer_charts/__snapshots__/explorer_charts_container.test.js.snap
deleted file mode 100644
index 087558cfa4ed4..0000000000000
--- a/x-pack/plugins/ml/public/explorer/explorer_charts/__snapshots__/explorer_charts_container.test.js.snap
+++ /dev/null
@@ -1,54 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ExplorerChartsContainer Initialization with chart data 1`] = `
-<div
-  className="explorer-chart-label"
->
-  <div
-    className="explorer-chart-label-fields"
-  >
-    <span>
-      high_sum(nginx.access.body_sent.bytes) over nginx.access.remote_ip (population-03)
-       - 
-    </span>
-    <span
-      key="0"
-    >
-      nginx.access.remote_ip
-       
-      72.57.0.53
-    </span>
-  </div>
-  <EuiIconTip
-    aria-label="Info"
-    content={
-      <ExplorerChartTooltip
-        aggregationInterval="1h"
-        chartFunction="sum nginx.access.body_sent.bytes"
-        entityFields={
-          Array [
-            Object {
-              "fieldName": "nginx.access.remote_ip",
-              "fieldValue": "72.57.0.53",
-            },
-          ]
-        }
-        jobId="population-03"
-      />
-    }
-    position="left"
-    size="s"
-    type="questionInCircle"
-  />
-  <a
-    className="euiLink"
-    onClick={[Function]}
-  >
-    View 
-    <i
-      aria-hidden="true"
-      className="fa fa-external-link"
-    />
-  </a>
-</div>
-`;
diff --git a/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/__snapshots__/explorer_chart_label.test.js.snap b/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/__snapshots__/explorer_chart_label.test.js.snap
new file mode 100644
index 0000000000000..0654b24dcf60a
--- /dev/null
+++ b/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/__snapshots__/explorer_chart_label.test.js.snap
@@ -0,0 +1,120 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ExplorerChartLabelBadge Render the chart label in one line. 1`] = `
+<React.Fragment>
+  <span
+    className="ml-explorer-chart-label"
+  >
+    <span
+      className="ml-explorer-chart-label-detector"
+    >
+      high_sum(nginx.access.body_sent.bytes) over nginx.access.remote_ip (population-03)
+      <React.Fragment>
+         – 
+      </React.Fragment>
+    </span>
+    <React.Fragment>
+      <React.Fragment
+        key="nginx.access.remote_ip 72.57.0.53"
+      >
+        <ExplorerChartLabelBadge
+          entity={
+            Object {
+              "$$hashKey": "object:813",
+              "fieldName": "nginx.access.remote_ip",
+              "fieldValue": "72.57.0.53",
+            }
+          }
+        />
+         
+      </React.Fragment>
+       
+      <span
+        className="ml-explorer-chart-info-icon"
+      >
+        <EuiIconTip
+          aria-label="Info"
+          content={
+            <ExplorerChartTooltip
+              aggregationInterval="1h"
+              chartFunction="sum nginx.access.body_sent.bytes"
+              entityFields={
+                Array [
+                  Object {
+                    "fieldName": "nginx.access.remote_ip",
+                    "fieldValue": "72.57.0.53",
+                  },
+                ]
+              }
+              jobId="population-03"
+            />
+          }
+          position="top"
+          size="s"
+          type="questionInCircle"
+        />
+      </span>
+    </React.Fragment>
+  </span>
+</React.Fragment>
+`;
+
+exports[`ExplorerChartLabelBadge Render the chart label in two lines. 1`] = `
+<React.Fragment>
+  <span
+    className="ml-explorer-chart-label"
+  >
+    <span
+      className="ml-explorer-chart-label-detector"
+    >
+      high_sum(nginx.access.body_sent.bytes) over nginx.access.remote_ip (population-03)
+      <React.Fragment>
+         
+      </React.Fragment>
+    </span>
+    <span
+      className="ml-explorer-chart-info-icon"
+    >
+      <EuiIconTip
+        aria-label="Info"
+        content={
+          <ExplorerChartTooltip
+            aggregationInterval="1h"
+            chartFunction="sum nginx.access.body_sent.bytes"
+            entityFields={
+              Array [
+                Object {
+                  "fieldName": "nginx.access.remote_ip",
+                  "fieldValue": "72.57.0.53",
+                },
+              ]
+            }
+            jobId="population-03"
+          />
+        }
+        position="top"
+        size="s"
+        type="questionInCircle"
+      />
+    </span>
+  </span>
+  <div
+    className="ml-explorer-chart-label-fields"
+  >
+    <React.Fragment
+      key="nginx.access.remote_ip 72.57.0.53"
+    >
+      <ExplorerChartLabelBadge
+        entity={
+          Object {
+            "$$hashKey": "object:813",
+            "fieldName": "nginx.access.remote_ip",
+            "fieldValue": "72.57.0.53",
+          }
+        }
+      />
+       
+    </React.Fragment>
+  </div>
+</React.Fragment>
+`;
diff --git a/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/__snapshots__/explorer_chart_label_badge.test.js.snap b/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/__snapshots__/explorer_chart_label_badge.test.js.snap
new file mode 100644
index 0000000000000..9853aaa7907d9
--- /dev/null
+++ b/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/__snapshots__/explorer_chart_label_badge.test.js.snap
@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ExplorerChartLabelBadge Render entity label badge. 1`] = `
+<span
+  className="ml-explorer-chart-label-badge"
+>
+  <EuiBadge
+    color="hollow"
+    iconSide="left"
+  >
+    nginx.access.remote_ip
+     
+    <strong>
+      72.57.0.53
+    </strong>
+  </EuiBadge>
+</span>
+`;
diff --git a/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/explorer_chart_label.js b/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/explorer_chart_label.js
new file mode 100644
index 0000000000000..218f270f806c5
--- /dev/null
+++ b/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/explorer_chart_label.js
@@ -0,0 +1,75 @@
+/*
+ * 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 './styles/explorer_chart_label.less';
+
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import {
+  EuiIconTip
+} from '@elastic/eui';
+
+import { ExplorerChartLabelBadge } from './explorer_chart_label_badge';
+import { ExplorerChartTooltip } from '../../explorer_chart_tooltip';
+
+export function ExplorerChartLabel({ detectorLabel, entityFields, infoTooltip, wrapLabel = false }) {
+  // Depending on whether we wrap the entityField badges to a new line, we render this differently:
+  //
+  // 1. All in one line:
+  //   <detectorLabel> - <entityBadge1> <entityBadge2> ... <infoIcon>
+  //
+  // 2. Multiple lines:
+  //   <detectorLabel> <infoIcon>
+  //   <entityBadge1> <entityBadge2> ...
+
+  // Using &nbsp;s here to make sure those spaces get rendered.
+  const labelSeparator = (
+    wrapLabel === true ||
+    (entityFields.length === 0 || detectorLabel.length === 0)
+  ) ? (<React.Fragment>&nbsp;</React.Fragment>) : (<React.Fragment>&nbsp;&ndash;&nbsp;</React.Fragment>);
+
+  const entityFieldBadges = entityFields.map((entity) => {
+    return (
+      <React.Fragment key={`${entity.fieldName} ${entity.fieldValue}`}>
+        <ExplorerChartLabelBadge entity={entity} />&nbsp;
+      </React.Fragment>
+    );
+  });
+
+  const infoIcon = (
+    <span className="ml-explorer-chart-info-icon">
+      <EuiIconTip
+        content={<ExplorerChartTooltip {...infoTooltip} />}
+        position="top"
+        size="s"
+      />
+    </span>
+  );
+
+  return (
+    <React.Fragment>
+      <span className="ml-explorer-chart-label">
+        <span className="ml-explorer-chart-label-detector">
+          {detectorLabel}{labelSeparator}
+        </span>
+        {wrapLabel && infoIcon}
+        {!wrapLabel && (
+          <React.Fragment>{entityFieldBadges} {infoIcon}</React.Fragment>
+        )}
+      </span>
+      {wrapLabel && (
+        <div className="ml-explorer-chart-label-fields">{entityFieldBadges}</div>
+      )}
+    </React.Fragment>
+  );
+}
+ExplorerChartLabel.propTypes = {
+  detectorLabel: PropTypes.string.isRequired,
+  entityFields: PropTypes.arrayOf(ExplorerChartLabelBadge.propTypes.entity),
+  infoTooltip: PropTypes.object.isRequired,
+  wrapLabel: PropTypes.bool
+};
diff --git a/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/explorer_chart_label.test.js b/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/explorer_chart_label.test.js
new file mode 100644
index 0000000000000..f0ff2b53a3c18
--- /dev/null
+++ b/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/explorer_chart_label.test.js
@@ -0,0 +1,45 @@
+/*
+ * 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 seriesConfig from '../../__mocks__/mock_series_config_filebeat.json';
+
+import { shallow } from 'enzyme';
+import React from 'react';
+
+import { ExplorerChartLabel } from './explorer_chart_label';
+
+
+describe('ExplorerChartLabelBadge', () => {
+
+  test('Render the chart label in one line.', () => {
+
+    const wrapper = shallow(
+      <ExplorerChartLabel
+        detectorLabel={seriesConfig.detectorLabel}
+        entityFields={seriesConfig.entityFields}
+        infoTooltip={seriesConfig.infoTooltip}
+        wrapLabel={false}
+      />
+    );
+    expect(wrapper).toMatchSnapshot();
+
+  });
+
+  test('Render the chart label in two lines.', () => {
+
+    const wrapper = shallow(
+      <ExplorerChartLabel
+        detectorLabel={seriesConfig.detectorLabel}
+        entityFields={seriesConfig.entityFields}
+        infoTooltip={seriesConfig.infoTooltip}
+        wrapLabel={true}
+      />
+    );
+    expect(wrapper).toMatchSnapshot();
+
+  });
+
+});
diff --git a/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/explorer_chart_label_badge.js b/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/explorer_chart_label_badge.js
new file mode 100644
index 0000000000000..6a0d34991d895
--- /dev/null
+++ b/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/explorer_chart_label_badge.js
@@ -0,0 +1,30 @@
+/*
+ * 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 './styles/explorer_chart_label_badge.less';
+
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import {
+  EuiBadge
+} from '@elastic/eui';
+
+export function ExplorerChartLabelBadge({ entity }) {
+  return (
+    <span className="ml-explorer-chart-label-badge">
+      <EuiBadge color="hollow">
+        {entity.fieldName} <strong>{entity.fieldValue}</strong>
+      </EuiBadge>
+    </span>
+  );
+}
+ExplorerChartLabelBadge.propTypes = {
+  entity: PropTypes.shape({
+    fieldName: PropTypes.string.isRequired,
+    fieldValue: PropTypes.string.isRequired
+  })
+};
diff --git a/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/explorer_chart_label_badge.test.js b/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/explorer_chart_label_badge.test.js
new file mode 100644
index 0000000000000..e1f84d625c224
--- /dev/null
+++ b/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/explorer_chart_label_badge.test.js
@@ -0,0 +1,24 @@
+/*
+ * 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 seriesConfig from '../../__mocks__/mock_series_config_filebeat.json';
+
+import { shallow } from 'enzyme';
+import React from 'react';
+
+import { ExplorerChartLabelBadge } from './explorer_chart_label_badge';
+
+
+describe('ExplorerChartLabelBadge', () => {
+
+  test('Render entity label badge.', () => {
+
+    const wrapper = shallow(<ExplorerChartLabelBadge entity={seriesConfig.entityFields[0]} />);
+    expect(wrapper).toMatchSnapshot();
+
+  });
+
+});
diff --git a/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/index.js b/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/index.js
new file mode 100644
index 0000000000000..0cfc2b8463ef8
--- /dev/null
+++ b/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/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 * from './explorer_chart_label';
diff --git a/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/styles/explorer_chart_label.less b/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/styles/explorer_chart_label.less
new file mode 100644
index 0000000000000..c9065f9404f0e
--- /dev/null
+++ b/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/styles/explorer_chart_label.less
@@ -0,0 +1,33 @@
+.ml-explorer-chart-label {
+  font-weight: normal;
+  /* account 80px for the "View" link and potential alert icon */
+  max-width: calc(~"100% - 80px");
+  overflow: hidden;
+}
+
+.ml-explorer-chart-label-detector {
+  vertical-align: middle;
+  /* account 100px for the "View" link and info icon */
+  max-width: calc(~"100% - 100px");
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  display: inline-block;
+}
+
+.ml-explorer-chart-info-icon {
+  margin: 0;
+  vertical-align: middle;
+  display: inline-block;
+}
+
+/* only used when the field badges get wrapped to a new line */
+.ml-explorer-chart-label-fields {
+  width: 100%;
+  /* use a fixed height to avoid layout issues when
+     only some charts don't have entity fields */
+  height: 22px;
+  overflow: hidden;
+  white-space: nowrap;
+  line-height: 0;
+}
diff --git a/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/styles/explorer_chart_label_badge.less b/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/styles/explorer_chart_label_badge.less
new file mode 100644
index 0000000000000..69b13432f05c9
--- /dev/null
+++ b/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/styles/explorer_chart_label_badge.less
@@ -0,0 +1,10 @@
+/* 
+  Resets the badge's default strong font-weight so it's possible
+  to put custom emphasis inside the badge only on a part of it.
+  Used in the Explorer Chart label badge to display an entity's
+  field_name as `normal` and field_value as `strong`.
+*/
+.ml-explorer-chart-label-badge {
+  font-weight: normal;
+  vertical-align: middle;
+}
diff --git a/x-pack/plugins/ml/public/explorer/explorer_charts/explorer_chart.js b/x-pack/plugins/ml/public/explorer/explorer_charts/explorer_chart.js
index 8687579d9349e..6f1950e8c09c3 100644
--- a/x-pack/plugins/ml/public/explorer/explorer_charts/explorer_chart.js
+++ b/x-pack/plugins/ml/public/explorer/explorer_charts/explorer_chart.js
@@ -36,6 +36,7 @@ import { mlFieldFormatService } from '../../services/field_format_service';
 import { mlChartTooltipService } from '../../components/chart_tooltip/chart_tooltip_service';
 
 const CONTENT_WRAPPER_HEIGHT = 215;
+const CONTENT_WRAPPER_CLASS = 'ml-explorer-chart-content-wrapper';
 
 export class ExplorerChart extends React.Component {
   static propTypes = {
@@ -92,13 +93,14 @@ export class ExplorerChart extends React.Component {
 
       // Clear any existing elements from the visualization,
       // then build the svg elements for the chart.
-      const chartElement = d3.select(element).select('.content-wrapper');
+      const chartElement = d3.select(element).select(`.${CONTENT_WRAPPER_CLASS}`);
       chartElement.select('svg').remove();
 
       const svgWidth = $el.width();
       const svgHeight = chartHeight + margin.top + margin.bottom;
 
       const svg = chartElement.append('svg')
+        .classed('ml-explorer-chart-svg', true)
         .attr('width', svgWidth)
         .attr('height', svgHeight);
 
@@ -382,7 +384,7 @@ export class ExplorerChart extends React.Component {
           <LoadingIndicator height={CONTENT_WRAPPER_HEIGHT} />
         )}
         {!isLoading && (
-          <div className="content-wrapper" />
+          <div className={CONTENT_WRAPPER_CLASS} />
         )}
       </div>
     );
diff --git a/x-pack/plugins/ml/public/explorer/explorer_charts/explorer_charts_container.js b/x-pack/plugins/ml/public/explorer/explorer_charts/explorer_charts_container.js
index 03ff283f2bbe9..9a3e61d03f3f7 100644
--- a/x-pack/plugins/ml/public/explorer/explorer_charts/explorer_charts_container.js
+++ b/x-pack/plugins/ml/public/explorer/explorer_charts/explorer_charts_container.js
@@ -7,11 +7,22 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 
-import { EuiIconTip } from '@elastic/eui';
+import {
+  EuiButtonEmpty,
+  EuiIconTip,
+  EuiToolTip
+} from '@elastic/eui';
 
-import { getExploreSeriesLink } from '../../util/chart_utils';
+import {
+  getExploreSeriesLink,
+  isLabelLengthAboveThreshold
+} from '../../util/chart_utils';
 import { ExplorerChart } from './explorer_chart';
-import { ExplorerChartTooltip } from './explorer_chart_tooltip';
+import { ExplorerChartLabel } from './components/explorer_chart_label';
+
+const textTooManyBuckets = `This selection contains too many buckets to be displayed.
+ The dashboard is best viewed over a shorter time range.`;
+const textViewButton = 'Open in Single Metric Viewer';
 
 export function ExplorerChartsContainer({
   seriesToPlot,
@@ -19,6 +30,8 @@ export function ExplorerChartsContainer({
   tooManyBuckets,
   mlSelectSeverityService
 }) {
+  const wrapLabel = seriesToPlot.some((series) => isLabelLengthAboveThreshold(series));
+
   return (
     <div className="explorer-charts">
       {(seriesToPlot.length > 0) &&
@@ -35,35 +48,38 @@ export function ExplorerChartsContainer({
 
           return (
             <div className={`ml-explorer-chart-container col-md-${layoutCellsPerChart}`} key={id}>
-              <div className="explorer-chart-label">
-                <div className="explorer-chart-label-fields">
-                  {(detectorLabel.length > 0 && entityFields.length > 0) && (
-                    <span>{detectorLabel} - </span>
-                  )}
-                  {(detectorLabel.length > 0 && entityFields.length === 0) && (
-                    <span>{detectorLabel}</span>
-                  )}
-                  {entityFields.map((entity, j) => {
-                    return (
-                      <span key={j}>{entity.fieldName} {entity.fieldValue}</span>
-                    );
-                  })}
-                </div>
-                <EuiIconTip content={<ExplorerChartTooltip {...series.infoTooltip} />} position="left" size="s" />
+              <div className="ml-explorer-chart-icons">
                 {tooManyBuckets && (
-                  <EuiIconTip
-                    content={'This selection contains too many buckets to be displayed.' +
-                     'The dashboard is best viewed over a shorter time range.'}
-                    position="bottom"
-                    size="s"
-                    type="alert"
-                    color="warning"
-                  />
+                  <span className="ml-explorer-chart-icon">
+                    <EuiIconTip
+                      content={textTooManyBuckets}
+                      position="top"
+                      size="s"
+                      type="alert"
+                      color="warning"
+                    />
+                  </span>
                 )}
-                <a className="euiLink" onClick={() => window.open(getExploreSeriesLink(series), '_blank')}>
-                  View <i className="fa fa-external-link" aria-hidden="true" />
-                </a>
+                <EuiToolTip
+                  position="top"
+                  content={textViewButton}
+                >
+                  <EuiButtonEmpty
+                    iconSide="right"
+                    iconType="popout"
+                    size="xs"
+                    onClick={() => getExploreSeriesLink(series)}
+                  >
+                    View
+                  </EuiButtonEmpty>
+                </EuiToolTip>
               </div>
+              <ExplorerChartLabel
+                detectorLabel={detectorLabel}
+                entityFields={entityFields}
+                infoTooltip={series.infoTooltip}
+                wrapLabel={wrapLabel}
+              />
               <ExplorerChart
                 tooManyBuckets={tooManyBuckets}
                 seriesConfig={series}
diff --git a/x-pack/plugins/ml/public/explorer/explorer_charts/explorer_charts_container.test.js b/x-pack/plugins/ml/public/explorer/explorer_charts/explorer_charts_container.test.js
index 073cee8632ebd..b8e81abb07df0 100644
--- a/x-pack/plugins/ml/public/explorer/explorer_charts/explorer_charts_container.test.js
+++ b/x-pack/plugins/ml/public/explorer/explorer_charts/explorer_charts_container.test.js
@@ -22,6 +22,39 @@ jest.mock('../../services/field_format_service', () => ({
   }
 }));
 
+// The mocks for ui/chrome and ui/timefilter are copied from charts_utils.test.js
+// TODO: Refactor the involved tests to avoid this duplication
+jest.mock('ui/chrome',
+  () => ({
+    getBasePath: () => {
+      return '<basepath>';
+    },
+    getUiSettingsClient: () => {
+      return {
+        get: (key) => {
+          switch (key) {
+            case 'timepicker:timeDefaults':
+              return { from: 'now-15m', to: 'now', mode: 'quick' };
+            case 'timepicker:refreshIntervalDefaults':
+              return { pause: false, value: 0 };
+            default:
+              throw new Error(`Unexpected config key: ${key}`);
+          }
+        }
+      };
+    },
+  }), { virtual: true });
+
+import moment from 'moment';
+import { timefilter } from 'ui/timefilter';
+
+timefilter.enableTimeRangeSelector();
+timefilter.enableAutoRefreshSelector();
+timefilter.setTime({
+  from: moment(seriesConfig.selectedEarliest).toISOString(),
+  to: moment(seriesConfig.selectedLatest).toISOString()
+});
+
 import { shallow } from 'enzyme';
 import React from 'react';
 
@@ -69,8 +102,8 @@ describe('ExplorerChartsContainer', () => {
       mlChartTooltipService={mlChartTooltipService}
     />);
 
-    // Only do a snapshot of the label section, the included
-    // ExplorerChart component does that in its own tests anyway.
-    expect(wrapper.find('.explorer-chart-label')).toMatchSnapshot();
+    // We test child components with snapshots separately
+    // so we just do some high level sanity check here.
+    expect(wrapper.find('.ml-explorer-chart-container').children()).toHaveLength(3);
   });
 });
diff --git a/x-pack/plugins/ml/public/explorer/explorer_charts/styles/explorer_chart.less b/x-pack/plugins/ml/public/explorer/explorer_charts/styles/explorer_chart.less
index de8e351685f7e..267cebc9a6e2f 100644
--- a/x-pack/plugins/ml/public/explorer/explorer_charts/styles/explorer_chart.less
+++ b/x-pack/plugins/ml/public/explorer/explorer_charts/styles/explorer_chart.less
@@ -3,7 +3,7 @@ ml-explorer-chart,
   display: block;
   padding-bottom: 10px;
 
-  svg {
+  .ml-explorer-chart-svg {
     font-size: 12px;
     font-family: "Open Sans", "Lato", "Helvetica Neue", Helvetica, Arial;
 
@@ -106,3 +106,7 @@ ml-explorer-chart,
     stroke-opacity: 0.65;
   }
 }
+
+.ml-explorer-chart-content-wrapper {
+  height: 215px;
+}
diff --git a/x-pack/plugins/ml/public/explorer/explorer_charts/styles/explorer_charts_container.less b/x-pack/plugins/ml/public/explorer/explorer_charts/styles/explorer_charts_container.less
index 9d1f205f9b224..04a55fb0bc316 100644
--- a/x-pack/plugins/ml/public/explorer/explorer_charts/styles/explorer_charts_container.less
+++ b/x-pack/plugins/ml/public/explorer/explorer_charts/styles/explorer_charts_container.less
@@ -99,36 +99,13 @@
 
     }
 
-    .ml-explorer-chart-container {
-      .explorer-chart-label {
-        display: block;
-        font-size: 13px;
-        font-weight: normal;
-
-        .explorer-chart-label-fields {
-          vertical-align: top;
-          /* account 80px for the "View" link */
-          max-width: calc(~"100% - 80px");
-          text-overflow: ellipsis;
-          overflow: hidden;
-          white-space: nowrap;
-          display: inline-block;
-        }
-
-        .euiIcon {
-          vertical-align: top;
-          margin: 4px 0 0 4px;
-        }
-
-        a {
-          float:right;
-          padding-left: 5px;
-        }
-      }
-
-      .content-wrapper {
-        height: 215px;
-      }
-    }
   }
 }
+
+/* wrapper class for the top right alert icon and view button */
+.ml-explorer-chart-icons {
+  float:right;
+  padding-left: 5px;
+  /* counter-margin for EuiButtonEmpty's padding */
+  margin: 2px -8px 0 0;
+}
diff --git a/x-pack/plugins/ml/public/util/chart_utils.js b/x-pack/plugins/ml/public/util/chart_utils.js
index df0a1121ee7a9..0031cd5c74a7c 100644
--- a/x-pack/plugins/ml/public/util/chart_utils.js
+++ b/x-pack/plugins/ml/public/util/chart_utils.js
@@ -228,6 +228,15 @@ export function getTickValues(startTimeMs, tickInterval, earliest, latest) {
   return tickValues;
 }
 
+const LABEL_WRAP_THRESHOLD = 60;
+
+// Checks if the string length of a chart label (detector description
+// and entity fields) is above LABEL_WRAP_THRESHOLD.
+export function isLabelLengthAboveThreshold({ detectorLabel, entityFields }) {
+  const labelLength = (detectorLabel.length + entityFields.map(d => `${d.fieldName} ${d.fieldValue}`).join(' ').length);
+  return (labelLength > LABEL_WRAP_THRESHOLD);
+}
+
 // To get xTransform it would be nicer to use d3.transform, but that doesn't play well with JSDOM.
 // So this uses a regex variant because we definitely want test coverage for the label removal.
 // Once JSDOM supports SVGAnimatedTransformList we can use this simpler inline version:
diff --git a/x-pack/plugins/ml/public/util/chart_utils.test.js b/x-pack/plugins/ml/public/util/chart_utils.test.js
index d44cc933d0ad2..88ae5551f8797 100644
--- a/x-pack/plugins/ml/public/util/chart_utils.test.js
+++ b/x-pack/plugins/ml/public/util/chart_utils.test.js
@@ -6,6 +6,9 @@
 
 import seriesConfig from '../explorer/explorer_charts/__mocks__/mock_series_config_filebeat';
 
+// A copy of these mocks for ui/chrome and ui/timefilter are also
+// used in explorer_charts_container.test.js.
+// TODO: Refactor the involved tests to avoid this duplication
 jest.mock('ui/chrome',
   () => ({
     getBasePath: () => {
@@ -47,6 +50,7 @@ import { timefilter } from 'ui/timefilter';
 import {
   getExploreSeriesLink,
   getTickValues,
+  isLabelLengthAboveThreshold,
   getXTransform,
   removeLabelOverlap
 } from './chart_utils';
@@ -134,6 +138,23 @@ describe('getTickValues', () => {
   });
 });
 
+describe('isLabelLengthAboveThreshold', () => {
+
+  test('short label', () => {
+    const isLongLabel = isLabelLengthAboveThreshold({
+      detectorLabel: 'count',
+      entityFields: seriesConfig.entityFields
+    });
+    expect(isLongLabel).toBeFalsy();
+  });
+
+  test('long label', () => {
+    const isLongLabel = isLabelLengthAboveThreshold(seriesConfig);
+    expect(isLongLabel).toBeTruthy();
+  });
+
+});
+
 describe('getXTransform', () => {
   const expectedXTransform = 0.007167499999999999;