From cce639f13f3ae16b17a2ddc611c10a91a13a585b Mon Sep 17 00:00:00 2001
From: Walter Rafelsberger <walter@elastic.co>
Date: Tue, 25 Sep 2018 17:09:02 +0200
Subject: [PATCH 01/19] [ML] Tweak Explorer Chart labels.

---
 .../explorer_charts_container.test.js.snap    | 27 ++++-----
 .../explorer_charts_container.js              | 56 ++++++++++++++-----
 .../styles/explorer_charts_container.less     |  4 ++
 3 files changed, 58 insertions(+), 29 deletions(-)

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
index 087558cfa4ed4..c58d2325cd6d1 100644
--- 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
@@ -4,21 +4,18 @@ 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>
+  <ChartLabel
+    detectorLabel="high_sum(nginx.access.body_sent.bytes) over nginx.access.remote_ip (population-03)"
+    entityFields={
+      Array [
+        Object {
+          "$$hashKey": "object:813",
+          "fieldName": "nginx.access.remote_ip",
+          "fieldValue": "72.57.0.53",
+        },
+      ]
+    }
+  />
   <EuiIconTip
     aria-label="Info"
     content={
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..5c3241e75f789 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,12 +7,52 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 
-import { EuiIconTip } from '@elastic/eui';
+import {
+  EuiBadge,
+  EuiIconTip
+} from '@elastic/eui';
 
 import { getExploreSeriesLink } from '../../util/chart_utils';
 import { ExplorerChart } from './explorer_chart';
 import { ExplorerChartTooltip } from './explorer_chart_tooltip';
 
+const LABEL_SPLIT_THRESHOLD = 100;
+
+function getLabelCharLength(detectorLabel, entityFields) {
+  return detectorLabel.length + entityFields.map(d => `${d.fieldName} ${d.fieldValue}`).join(' ').length;
+}
+
+function ChartLabelBadge({ entity }) {
+  return (
+    <EuiBadge color="hollow" className="ml-chart-label-badge">
+      {entity.fieldName} <strong>{entity.fieldValue}</strong>
+    </EuiBadge>
+  );
+}
+
+function ChartLabel({ detectorLabel, entityFields }) {
+  let labelSeparator = ' - ';
+  if (getLabelCharLength(detectorLabel, entityFields) > LABEL_SPLIT_THRESHOLD) {
+    labelSeparator = <br />;
+  }
+
+  return (
+    <div className="explorer-chart-label-fields">
+      {(detectorLabel.length > 0 && entityFields.length > 0) && (
+        <span>{detectorLabel} {labelSeparator} </span>
+      )}
+      {(detectorLabel.length > 0 && entityFields.length === 0) && (
+        <span>{detectorLabel}</span>
+      )}
+      {entityFields.map((entity, j) => {
+        return (
+          <span key={j}><ChartLabelBadge entity={entity} /> </span>
+        );
+      })}
+    </div>
+  );
+}
+
 export function ExplorerChartsContainer({
   seriesToPlot,
   layoutCellsPerChart,
@@ -36,19 +76,7 @@ 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>
+                <ChartLabel detectorLabel={detectorLabel} entityFields={entityFields} />
                 <EuiIconTip content={<ExplorerChartTooltip {...series.infoTooltip} />} position="left" size="s" />
                 {tooManyBuckets && (
                   <EuiIconTip
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..8b0fcc3869a5b 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
@@ -105,6 +105,10 @@
         font-size: 13px;
         font-weight: normal;
 
+        .ml-chart-label-badge {
+          font-weight: normal;
+        }
+
         .explorer-chart-label-fields {
           vertical-align: top;
           /* account 80px for the "View" link */

From 2a7d9aff07908025bd8de49602b8650914b43c00 Mon Sep 17 00:00:00 2001
From: Walter Rafelsberger <walter@elastic.co>
Date: Wed, 26 Sep 2018 09:58:13 +0200
Subject: [PATCH 02/19] [ML] Wrap all chart labels if one is too long.

---
 .../explorer_charts_container.js              | 21 +++++++++++--------
 1 file changed, 12 insertions(+), 9 deletions(-)

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 5c3241e75f789..c602978cb0068 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
@@ -17,9 +17,9 @@ import { ExplorerChart } from './explorer_chart';
 import { ExplorerChartTooltip } from './explorer_chart_tooltip';
 
 const LABEL_SPLIT_THRESHOLD = 100;
-
-function getLabelCharLength(detectorLabel, entityFields) {
-  return detectorLabel.length + entityFields.map(d => `${d.fieldName} ${d.fieldValue}`).join(' ').length;
+function isLabelLengthAboveThreshold({ detectorLabel, entityFields }) {
+  const labelLength = (detectorLabel.length + entityFields.map(d => `${d.fieldName} ${d.fieldValue}`).join(' ').length);
+  return (labelLength > LABEL_SPLIT_THRESHOLD);
 }
 
 function ChartLabelBadge({ entity }) {
@@ -30,11 +30,8 @@ function ChartLabelBadge({ entity }) {
   );
 }
 
-function ChartLabel({ detectorLabel, entityFields }) {
-  let labelSeparator = ' - ';
-  if (getLabelCharLength(detectorLabel, entityFields) > LABEL_SPLIT_THRESHOLD) {
-    labelSeparator = <br />;
-  }
+function ChartLabel({ detectorLabel, entityFields, wrapLabel }) {
+  const labelSeparator = (wrapLabel === true) ? <br /> : ' - ';
 
   return (
     <div className="explorer-chart-label-fields">
@@ -59,6 +56,8 @@ export function ExplorerChartsContainer({
   tooManyBuckets,
   mlSelectSeverityService
 }) {
+  const wrapLabel = seriesToPlot.some((series) => isLabelLengthAboveThreshold(series));
+
   return (
     <div className="explorer-charts">
       {(seriesToPlot.length > 0) &&
@@ -76,7 +75,11 @@ export function ExplorerChartsContainer({
           return (
             <div className={`ml-explorer-chart-container col-md-${layoutCellsPerChart}`} key={id}>
               <div className="explorer-chart-label">
-                <ChartLabel detectorLabel={detectorLabel} entityFields={entityFields} />
+                <ChartLabel
+                  detectorLabel={detectorLabel}
+                  entityFields={entityFields}
+                  wrapLabel={wrapLabel}
+                />
                 <EuiIconTip content={<ExplorerChartTooltip {...series.infoTooltip} />} position="left" size="s" />
                 {tooManyBuckets && (
                   <EuiIconTip

From f271f2384b1c6c872aaf223cac3351acbf3695c3 Mon Sep 17 00:00:00 2001
From: Walter Rafelsberger <walter@elastic.co>
Date: Wed, 26 Sep 2018 10:21:07 +0200
Subject: [PATCH 03/19] [ML] Split up components into their own files.

---
 .../explorer_chart_label.js                   | 36 ++++++++++++++++
 .../explorer_chart_label_badge.js             | 26 +++++++++++
 .../components/explorer_chart_label/index.js  |  7 +++
 .../explorer_charts_container.js              | 43 +++----------------
 x-pack/plugins/ml/public/util/chart_utils.js  |  9 ++++
 5 files changed, 84 insertions(+), 37 deletions(-)
 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_badge.js
 create mode 100644 x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/index.js

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..dfe58562c0c73
--- /dev/null
+++ b/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/explorer_chart_label.js
@@ -0,0 +1,36 @@
+/*
+ * 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 PropTypes from 'prop-types';
+import React from 'react';
+
+import { ExplorerChartLabelBadge } from './explorer_chart_label_badge';
+
+export function ExplorerChartLabel({ detectorLabel, entityFields, wrapLabel }) {
+  const labelSeparator = (wrapLabel === true) ? <br /> : ' - ';
+
+  return (
+    <div className="explorer-chart-label-fields">
+      {(detectorLabel.length > 0 && entityFields.length > 0) && (
+        <span>{detectorLabel} {labelSeparator} </span>
+      )}
+      {(detectorLabel.length > 0 && entityFields.length === 0) && (
+        <span>{detectorLabel}</span>
+      )}
+      {entityFields.map((entity, j) => {
+        return (
+          <span key={j}><ExplorerChartLabelBadge entity={entity} /> </span>
+        );
+      })}
+    </div>
+  );
+}
+ExplorerChartLabel.propTypes = {
+  series: PropTypes.shape({
+    detectorLabel: PropTypes.string.isRequired,
+    entityFields: PropTypes.array.isRequired
+  })
+};
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..7f866643aea04
--- /dev/null
+++ b/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/explorer_chart_label_badge.js
@@ -0,0 +1,26 @@
+/*
+ * 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 PropTypes from 'prop-types';
+import React from 'react';
+
+import {
+  EuiBadge
+} from '@elastic/eui';
+
+export function ExplorerChartLabelBadge({ entity }) {
+  return (
+    <EuiBadge color="hollow" className="ml-chart-label-badge">
+      {entity.fieldName} <strong>{entity.fieldValue}</strong>
+    </EuiBadge>
+  );
+}
+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/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/explorer_charts_container.js b/x-pack/plugins/ml/public/explorer/explorer_charts/explorer_charts_container.js
index c602978cb0068..5d28dfea2e0e3 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
@@ -8,47 +8,16 @@ import PropTypes from 'prop-types';
 import React from 'react';
 
 import {
-  EuiBadge,
   EuiIconTip
 } 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';
-
-const LABEL_SPLIT_THRESHOLD = 100;
-function isLabelLengthAboveThreshold({ detectorLabel, entityFields }) {
-  const labelLength = (detectorLabel.length + entityFields.map(d => `${d.fieldName} ${d.fieldValue}`).join(' ').length);
-  return (labelLength > LABEL_SPLIT_THRESHOLD);
-}
-
-function ChartLabelBadge({ entity }) {
-  return (
-    <EuiBadge color="hollow" className="ml-chart-label-badge">
-      {entity.fieldName} <strong>{entity.fieldValue}</strong>
-    </EuiBadge>
-  );
-}
-
-function ChartLabel({ detectorLabel, entityFields, wrapLabel }) {
-  const labelSeparator = (wrapLabel === true) ? <br /> : ' - ';
-
-  return (
-    <div className="explorer-chart-label-fields">
-      {(detectorLabel.length > 0 && entityFields.length > 0) && (
-        <span>{detectorLabel} {labelSeparator} </span>
-      )}
-      {(detectorLabel.length > 0 && entityFields.length === 0) && (
-        <span>{detectorLabel}</span>
-      )}
-      {entityFields.map((entity, j) => {
-        return (
-          <span key={j}><ChartLabelBadge entity={entity} /> </span>
-        );
-      })}
-    </div>
-  );
-}
+import { ExplorerChartLabel } from './components/explorer_chart_label';
 
 export function ExplorerChartsContainer({
   seriesToPlot,
@@ -75,7 +44,7 @@ export function ExplorerChartsContainer({
           return (
             <div className={`ml-explorer-chart-container col-md-${layoutCellsPerChart}`} key={id}>
               <div className="explorer-chart-label">
-                <ChartLabel
+                <ExplorerChartLabel
                   detectorLabel={detectorLabel}
                   entityFields={entityFields}
                   wrapLabel={wrapLabel}
diff --git a/x-pack/plugins/ml/public/util/chart_utils.js b/x-pack/plugins/ml/public/util/chart_utils.js
index 158db91ebdacf..cbca5e78d829b 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 = 100;
+
+// 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);
+}
+
 // This removes overlapping x-axis labels by starting off from a specific label
 // that is required/wanted to show up. The code then traverses to both sides along the axis
 // and decides which labels to keep or remove. All vertical tick lines will be kept visible,

From c80911e44ab53a346374edff2bfe95e7e0140ad3 Mon Sep 17 00:00:00 2001
From: Walter Rafelsberger <walter@elastic.co>
Date: Wed, 26 Sep 2018 10:47:27 +0200
Subject: [PATCH 04/19] [ML] Adds jest tests.

---
 .../explorer_charts_container.test.js.snap    |  3 +-
 .../explorer_chart_label.test.js.snap         | 28 +++++++++++++++++
 .../explorer_chart_label_badge.test.js.snap   | 15 ++++++++++
 .../explorer_chart_label.test.js              | 30 +++++++++++++++++++
 .../explorer_chart_label_badge.js             |  4 ++-
 .../explorer_chart_label_badge.test.js        | 24 +++++++++++++++
 .../styles/explorer_chart_label_badge.less    |  9 ++++++
 .../styles/explorer_charts_container.less     |  4 ---
 .../ml/public/util/chart_utils.test.js        | 18 +++++++++++
 9 files changed, 129 insertions(+), 6 deletions(-)
 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.test.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/styles/explorer_chart_label_badge.less

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
index c58d2325cd6d1..752855df9ea3d 100644
--- 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
@@ -4,7 +4,7 @@ exports[`ExplorerChartsContainer Initialization with chart data 1`] = `
 <div
   className="explorer-chart-label"
 >
-  <ChartLabel
+  <ExplorerChartLabel
     detectorLabel="high_sum(nginx.access.body_sent.bytes) over nginx.access.remote_ip (population-03)"
     entityFields={
       Array [
@@ -15,6 +15,7 @@ exports[`ExplorerChartsContainer Initialization with chart data 1`] = `
         },
       ]
     }
+    wrapLabel={true}
   />
   <EuiIconTip
     aria-label="Info"
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..483faf4920657
--- /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,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ExplorerChartLabelBadge Render the chart label. 1`] = `
+<div
+  className="explorer-chart-label-fields"
+>
+  <span>
+    high_sum(nginx.access.body_sent.bytes) over nginx.access.remote_ip (population-03)
+     
+    <br />
+     
+  </span>
+  <span
+    key="0"
+  >
+    <ExplorerChartLabelBadge
+      entity={
+        Object {
+          "$$hashKey": "object:813",
+          "fieldName": "nginx.access.remote_ip",
+          "fieldValue": "72.57.0.53",
+        }
+      }
+    />
+     
+  </span>
+</div>
+`;
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..8e61b8626b731
--- /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,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ExplorerChartLabelBadge Render entity label badge. 1`] = `
+<EuiBadge
+  className="ml-explorer-chart-label-badge"
+  color="hollow"
+  iconSide="left"
+>
+  nginx.access.remote_ip
+   
+  <strong>
+    72.57.0.53
+  </strong>
+</EuiBadge>
+`;
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..77781048b4cf8
--- /dev/null
+++ b/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/explorer_chart_label.test.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 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.', () => {
+
+    const wrapper = shallow(
+      <ExplorerChartLabel
+        detectorLabel={seriesConfig.detectorLabel}
+        entityFields={seriesConfig.entityFields}
+        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
index 7f866643aea04..8b71afa7230fa 100644
--- 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
@@ -4,6 +4,8 @@
  * 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';
 
@@ -13,7 +15,7 @@ import {
 
 export function ExplorerChartLabelBadge({ entity }) {
   return (
-    <EuiBadge color="hollow" className="ml-chart-label-badge">
+    <EuiBadge color="hollow" className="ml-explorer-chart-label-badge">
       {entity.fieldName} <strong>{entity.fieldValue}</strong>
     </EuiBadge>
   );
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/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..f67c3645f39c6
--- /dev/null
+++ b/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/styles/explorer_chart_label_badge.less
@@ -0,0 +1,9 @@
+/* 
+  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;
+}
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 8b0fcc3869a5b..9d1f205f9b224 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
@@ -105,10 +105,6 @@
         font-size: 13px;
         font-weight: normal;
 
-        .ml-chart-label-badge {
-          font-weight: normal;
-        }
-
         .explorer-chart-label-fields {
           vertical-align: top;
           /* account 80px for the "View" link */
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 d4beee8484b9b..a23bf6066d7db 100644
--- a/x-pack/plugins/ml/public/util/chart_utils.test.js
+++ b/x-pack/plugins/ml/public/util/chart_utils.test.js
@@ -47,6 +47,7 @@ import { timefilter } from 'ui/timefilter';
 import {
   getExploreSeriesLink,
   getTickValues,
+  isLabelLengthAboveThreshold,
   removeLabelOverlap
 } from './chart_utils';
 
@@ -133,6 +134,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('removeLabelOverlap', () => {
   const originalGetBBox = SVGElement.prototype.getBBox;
 

From b0e14a9c8c893df67352a32bdbfee10ec53b08d1 Mon Sep 17 00:00:00 2001
From: Walter Rafelsberger <walter@elastic.co>
Date: Wed, 26 Sep 2018 12:13:49 +0200
Subject: [PATCH 05/19] [ML] Use same icon as in jobs list for single series
 viewer button.

---
 .../plugins/ml/public/explorer/explorer.html  |  2 +
 .../explorer_chart_label.js                   |  6 ++-
 .../styles/explorer_chart_label.less          | 15 ++++++
 .../explorer_charts/explorer_chart.js         |  6 ++-
 .../explorer_charts_container.js              | 50 ++++++++++++++-----
 .../styles/explorer_chart.less                |  6 ++-
 .../styles/explorer_charts_container.less     | 40 ++++-----------
 7 files changed, 76 insertions(+), 49 deletions(-)
 create mode 100644 x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/styles/explorer_chart_label.less

diff --git a/x-pack/plugins/ml/public/explorer/explorer.html b/x-pack/plugins/ml/public/explorer/explorer.html
index 81f2b2e76985f..2d15e2ee4606f 100644
--- a/x-pack/plugins/ml/public/explorer/explorer.html
+++ b/x-pack/plugins/ml/public/explorer/explorer.html
@@ -145,6 +145,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/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
index dfe58562c0c73..38ac39de68f08 100644
--- 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
@@ -4,6 +4,8 @@
  * 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';
 
@@ -13,7 +15,7 @@ export function ExplorerChartLabel({ detectorLabel, entityFields, wrapLabel }) {
   const labelSeparator = (wrapLabel === true) ? <br /> : ' - ';
 
   return (
-    <div className="explorer-chart-label-fields">
+    <span className="explorer-chart-label-fields">
       {(detectorLabel.length > 0 && entityFields.length > 0) && (
         <span>{detectorLabel} {labelSeparator} </span>
       )}
@@ -25,7 +27,7 @@ export function ExplorerChartLabel({ detectorLabel, entityFields, wrapLabel }) {
           <span key={j}><ExplorerChartLabelBadge entity={entity} /> </span>
         );
       })}
-    </div>
+    </span>
   );
 }
 ExplorerChartLabel.propTypes = {
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..32cc45cb1af6b
--- /dev/null
+++ b/x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/styles/explorer_chart_label.less
@@ -0,0 +1,15 @@
+.ml-explorer-chart-label {
+  display: block;
+  font-size: 13px;
+  font-weight: normal;
+}
+
+.ml-explorer-chart-label-fields {
+  vertical-align: middle;
+  /* account 80px for the "View" link */
+  max-width: calc(~"100% - 80px");
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  display: inline-block;
+}
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 5d28dfea2e0e3..f96486854bf4d 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
@@ -8,7 +8,9 @@ import PropTypes from 'prop-types';
 import React from 'react';
 
 import {
-  EuiIconTip
+  EuiButtonIcon,
+  EuiIconTip,
+  EuiToolTip
 } from '@elastic/eui';
 
 import {
@@ -19,6 +21,10 @@ 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,
   layoutCellsPerChart,
@@ -43,26 +49,44 @@ export function ExplorerChartsContainer({
 
           return (
             <div className={`ml-explorer-chart-container col-md-${layoutCellsPerChart}`} key={id}>
-              <div className="explorer-chart-label">
+              <span className="ml-explorer-chart-icons">
+                {wrapLabel && (<br />)}
+                {tooManyBuckets && (
+                  <span className="ml-explorer-chart-icon">
+                    <EuiIconTip
+                      content={textTooManyBuckets}
+                      position="top"
+                      size="s"
+                      type="alert"
+                      color="warning"
+                    />
+                  </span>
+                )}
+                <EuiToolTip
+                  position="top"
+                  content={textViewButton}
+                >
+                  <EuiButtonIcon
+                    href={getExploreSeriesLink(series)}
+                    target="_BLANK"
+                    iconType="stats"
+                    aria-label={textViewButton}
+                  />
+                </EuiToolTip>
+              </span>
+              <div className="ml-explorer-chart-label">
                 <ExplorerChartLabel
                   detectorLabel={detectorLabel}
                   entityFields={entityFields}
                   wrapLabel={wrapLabel}
                 />
-                <EuiIconTip content={<ExplorerChartTooltip {...series.infoTooltip} />} position="left" size="s" />
-                {tooManyBuckets && (
+                <span className="ml-explorer-chart-icon">
                   <EuiIconTip
-                    content={'This selection contains too many buckets to be displayed.' +
-                     'The dashboard is best viewed over a shorter time range.'}
-                    position="bottom"
+                    content={<ExplorerChartTooltip {...series.infoTooltip} />}
+                    position="top"
                     size="s"
-                    type="alert"
-                    color="warning"
                   />
-                )}
-                <a className="euiLink" onClick={() => window.open(getExploreSeriesLink(series), '_blank')}>
-                  View <i className="fa fa-external-link" aria-hidden="true" />
-                </a>
+                </span>
               </div>
               <ExplorerChart
                 tooManyBuckets={tooManyBuckets}
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..3a1eafac3ba73 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,14 @@
 
     }
 
-    .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;
-      }
-    }
   }
 }
+
+.ml-explorer-chart-icons {
+  float:right;
+  padding-left: 5px;
+}
+
+.ml-explorer-chart-icon {
+  margin: 0px 0 0 4px;
+}

From 3933602f3ddfe4c6cd9c269b2c14da6e0c4b7a96 Mon Sep 17 00:00:00 2001
From: Walter Rafelsberger <walter@elastic.co>
Date: Wed, 26 Sep 2018 12:45:43 +0200
Subject: [PATCH 06/19] [ML] Updated jest tests.

---
 .../explorer_charts_container.test.js.snap    | 54 +++++++++----------
 .../explorer_chart_label.test.js.snap         |  4 +-
 .../explorer_charts_container.test.js         | 35 +++++++++++-
 .../ml/public/util/chart_utils.test.js        |  3 ++
 4 files changed, 63 insertions(+), 33 deletions(-)

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
index 752855df9ea3d..9eb51eb5fcb32 100644
--- 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
@@ -2,7 +2,7 @@
 
 exports[`ExplorerChartsContainer Initialization with chart data 1`] = `
 <div
-  className="explorer-chart-label"
+  className="ml-explorer-chart-label"
 >
   <ExplorerChartLabel
     detectorLabel="high_sum(nginx.access.body_sent.bytes) over nginx.access.remote_ip (population-03)"
@@ -17,36 +17,30 @@ exports[`ExplorerChartsContainer Initialization with chart data 1`] = `
     }
     wrapLabel={true}
   />
-  <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]}
+  <span
+    className="ml-explorer-chart-icon"
   >
-    View 
-    <i
-      aria-hidden="true"
-      className="fa fa-external-link"
+    <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"
     />
-  </a>
+  </span>
 </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
index 483faf4920657..398ea0d9be524 100644
--- 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
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ExplorerChartLabelBadge Render the chart label. 1`] = `
-<div
+<span
   className="explorer-chart-label-fields"
 >
   <span>
@@ -24,5 +24,5 @@ exports[`ExplorerChartLabelBadge Render the chart label. 1`] = `
     />
      
   </span>
-</div>
+</span>
 `;
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..68df4b59c9793 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';
 
@@ -71,6 +104,6 @@ describe('ExplorerChartsContainer', () => {
 
     // 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();
+    expect(wrapper.find('.ml-explorer-chart-label')).toMatchSnapshot();
   });
 });
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 a23bf6066d7db..41f6fe9e08c86 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: () => {

From d028c766b802e7be2e752f6d1a58cb54acce5cf3 Mon Sep 17 00:00:00 2001
From: Walter Rafelsberger <walter@elastic.co>
Date: Wed, 26 Sep 2018 13:32:58 +0200
Subject: [PATCH 07/19] [ML] Use EuiButtonEmpty instead of code based on Font
 Awesome.

---
 .../explorer_charts_container.js              | 21 ++++++++++---------
 .../styles/explorer_charts_container.less     |  2 ++
 2 files changed, 13 insertions(+), 10 deletions(-)

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 f96486854bf4d..e4b835592488d 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
@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 
 import {
-  EuiButtonIcon,
+  EuiButtonEmpty,
   EuiIconTip,
   EuiToolTip
 } from '@elastic/eui';
@@ -49,8 +49,7 @@ export function ExplorerChartsContainer({
 
           return (
             <div className={`ml-explorer-chart-container col-md-${layoutCellsPerChart}`} key={id}>
-              <span className="ml-explorer-chart-icons">
-                {wrapLabel && (<br />)}
+              <div className="ml-explorer-chart-icons">
                 {tooManyBuckets && (
                   <span className="ml-explorer-chart-icon">
                     <EuiIconTip
@@ -66,14 +65,16 @@ export function ExplorerChartsContainer({
                   position="top"
                   content={textViewButton}
                 >
-                  <EuiButtonIcon
-                    href={getExploreSeriesLink(series)}
-                    target="_BLANK"
-                    iconType="stats"
-                    aria-label={textViewButton}
-                  />
+                  <EuiButtonEmpty
+                    iconSide="right"
+                    iconType="popout"
+                    size="xs"
+                    onClick={() => getExploreSeriesLink(series)}
+                  >
+                    View
+                  </EuiButtonEmpty>
                 </EuiToolTip>
-              </span>
+              </div>
               <div className="ml-explorer-chart-label">
                 <ExplorerChartLabel
                   detectorLabel={detectorLabel}
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 3a1eafac3ba73..5158c6ac1d873 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
@@ -105,6 +105,8 @@
 .ml-explorer-chart-icons {
   float:right;
   padding-left: 5px;
+  /* counter-margin for EuiButtonEmpty's padding */
+  margin-right: -8px;
 }
 
 .ml-explorer-chart-icon {

From 39c749a6aca63ebfde9b70f7b30ea34a50302d1f Mon Sep 17 00:00:00 2001
From: Walter Rafelsberger <walter@elastic.co>
Date: Wed, 26 Sep 2018 15:24:53 +0200
Subject: [PATCH 08/19] [ML] Restructred after feedback.

---
 .../explorer_charts_container.test.js.snap    |  38 +++----
 .../explorer_chart_label.test.js.snap         | 103 ++++++++++++++----
 .../explorer_chart_label.js                   |  56 +++++++---
 .../explorer_chart_label.test.js              |  15 ++-
 .../styles/explorer_chart_label.less          |  12 +-
 .../explorer_charts_container.js              |   9 +-
 x-pack/plugins/ml/public/util/chart_utils.js  |   2 +-
 7 files changed, 163 insertions(+), 72 deletions(-)

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
index 9eb51eb5fcb32..791efae23422a 100644
--- 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
@@ -15,32 +15,20 @@ exports[`ExplorerChartsContainer Initialization with chart data 1`] = `
         },
       ]
     }
+    infoTooltip={
+      Object {
+        "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",
+      }
+    }
     wrapLabel={true}
   />
-  <span
-    className="ml-explorer-chart-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>
 </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
index 398ea0d9be524..5ec81f3a11c36 100644
--- 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
@@ -1,28 +1,89 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ExplorerChartLabelBadge Render the chart label. 1`] = `
-<span
-  className="explorer-chart-label-fields"
->
-  <span>
-    high_sum(nginx.access.body_sent.bytes) over nginx.access.remote_ip (population-03)
-     
-    <br />
-     
-  </span>
+exports[`ExplorerChartLabelBadge Render the chart label in one line. 1`] = `
+<React.Fragment>
   <span
-    key="0"
+    className="ml-explorer-chart-label-detector"
   >
-    <ExplorerChartLabelBadge
-      entity={
-        Object {
-          "$$hashKey": "object:813",
-          "fieldName": "nginx.access.remote_ip",
-          "fieldValue": "72.57.0.53",
+    <span>
+      high_sum(nginx.access.body_sent.bytes) over nginx.access.remote_ip (population-03)
+    </span>
+    <React.Fragment>
+       
+       - 
+       
+    </React.Fragment>
+    <span
+      key="0"
+    >
+      <ExplorerChartLabelBadge
+        entity={
+          Object {
+            "$$hashKey": "object:813",
+            "fieldName": "nginx.access.remote_ip",
+            "fieldValue": "72.57.0.53",
+          }
         }
-      }
-    />
-     
+      />
+       
+    </span>
+    <span
+      className="ml-explorer-chart-icon"
+    >
+      <EuiIconTip
+        aria-label="Info"
+        content={<ExplorerChartTooltip />}
+        position="top"
+        size="s"
+        type="questionInCircle"
+      />
+    </span>
+  </span>
+</React.Fragment>
+`;
+
+exports[`ExplorerChartLabelBadge Render the chart label in two lines. 1`] = `
+<React.Fragment>
+  <span
+    className="ml-explorer-chart-label-detector"
+  >
+    <span>
+      high_sum(nginx.access.body_sent.bytes) over nginx.access.remote_ip (population-03)
+    </span>
+    <React.Fragment>
+      <span
+        className="ml-explorer-chart-icon"
+      >
+        <EuiIconTip
+          aria-label="Info"
+          content={<ExplorerChartTooltip />}
+          position="top"
+          size="s"
+          type="questionInCircle"
+        />
+      </span>
+       
+      <br />
+       
+    </React.Fragment>
   </span>
-</span>
+  <div
+    className="ml-explorer-chart-label-fields"
+  >
+    <span
+      key="0"
+    >
+      <ExplorerChartLabelBadge
+        entity={
+          Object {
+            "$$hashKey": "object:813",
+            "fieldName": "nginx.access.remote_ip",
+            "fieldValue": "72.57.0.53",
+          }
+        }
+      />
+       
+    </span>
+  </div>
+</React.Fragment>
 `;
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
index 38ac39de68f08..6bea0832898fa 100644
--- 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
@@ -4,30 +4,60 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import './styles/explorer_chart_label_badge.less';
+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 }) {
+  /*
+    Depending on whether we wrap the entityField badges to a new line, we render this differently:
+
+    1. All in one line:
+        <detectorLabel> - <entityBadge1> <entityBadge1> ... <infoIcon>
+
+    2. Multiple lines:
+        <detectorLabel> <infoIcon> <br />
+        <entityBadge1> <entityBadge1> ...
+  */
 
-export function ExplorerChartLabel({ detectorLabel, entityFields, wrapLabel }) {
   const labelSeparator = (wrapLabel === true) ? <br /> : ' - ';
 
+  const entityFieldBadges = entityFields.map((entity, j) => {
+    return <span key={j}><ExplorerChartLabelBadge entity={entity} /> </span>;
+  });
+
+  const infoIcon = (
+    <span className="ml-explorer-chart-icon">
+      <EuiIconTip
+        content={<ExplorerChartTooltip {...infoTooltip} />}
+        position="top"
+        size="s"
+      />
+    </span>
+  );
+
   return (
-    <span className="explorer-chart-label-fields">
-      {(detectorLabel.length > 0 && entityFields.length > 0) && (
-        <span>{detectorLabel} {labelSeparator} </span>
-      )}
-      {(detectorLabel.length > 0 && entityFields.length === 0) && (
+    <React.Fragment>
+      <span className="ml-explorer-chart-label-detector">
         <span>{detectorLabel}</span>
+        {(detectorLabel.length > 0 && entityFields.length > 0) && (
+          <React.Fragment>{wrapLabel && infoIcon} {labelSeparator} </React.Fragment>
+        )}
+        {!wrapLabel && entityFieldBadges}
+        {!wrapLabel && infoIcon}
+      </span>
+      {wrapLabel && (
+        <div className="ml-explorer-chart-label-fields">{entityFieldBadges}</div>
       )}
-      {entityFields.map((entity, j) => {
-        return (
-          <span key={j}><ExplorerChartLabelBadge entity={entity} /> </span>
-        );
-      })}
-    </span>
+    </React.Fragment>
   );
 }
 ExplorerChartLabel.propTypes = {
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
index 77781048b4cf8..8f5557d4d091b 100644
--- 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
@@ -14,7 +14,20 @@ import { ExplorerChartLabel } from './explorer_chart_label';
 
 describe('ExplorerChartLabelBadge', () => {
 
-  test('Render the chart label.', () => {
+  test('Render the chart label in one line.', () => {
+
+    const wrapper = shallow(
+      <ExplorerChartLabel
+        detectorLabel={seriesConfig.detectorLabel}
+        entityFields={seriesConfig.entityFields}
+        wrapLabel={false}
+      />
+    );
+    expect(wrapper).toMatchSnapshot();
+
+  });
+
+  test('Render the chart label in two lines.', () => {
 
     const wrapper = shallow(
       <ExplorerChartLabel
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
index 32cc45cb1af6b..395b41d723a76 100644
--- 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
@@ -1,10 +1,8 @@
 .ml-explorer-chart-label {
-  display: block;
-  font-size: 13px;
   font-weight: normal;
 }
 
-.ml-explorer-chart-label-fields {
+.ml-explorer-chart-label-detector {
   vertical-align: middle;
   /* account 80px for the "View" link */
   max-width: calc(~"100% - 80px");
@@ -13,3 +11,11 @@
   white-space: nowrap;
   display: inline-block;
 }
+
+/* only used when the field badges get wrapped to a new line */
+.ml-explorer-chart-label-fields {
+  width: 100%;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
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 e4b835592488d..71b29c057fe8d 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
@@ -18,7 +18,6 @@ import {
   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.' +
@@ -79,15 +78,9 @@ export function ExplorerChartsContainer({
                 <ExplorerChartLabel
                   detectorLabel={detectorLabel}
                   entityFields={entityFields}
+                  infoTooltip={series.infoTooltip}
                   wrapLabel={wrapLabel}
                 />
-                <span className="ml-explorer-chart-icon">
-                  <EuiIconTip
-                    content={<ExplorerChartTooltip {...series.infoTooltip} />}
-                    position="top"
-                    size="s"
-                  />
-                </span>
               </div>
               <ExplorerChart
                 tooManyBuckets={tooManyBuckets}
diff --git a/x-pack/plugins/ml/public/util/chart_utils.js b/x-pack/plugins/ml/public/util/chart_utils.js
index cbca5e78d829b..2e721386b0540 100644
--- a/x-pack/plugins/ml/public/util/chart_utils.js
+++ b/x-pack/plugins/ml/public/util/chart_utils.js
@@ -228,7 +228,7 @@ export function getTickValues(startTimeMs, tickInterval, earliest, latest) {
   return tickValues;
 }
 
-const LABEL_WRAP_THRESHOLD = 100;
+const LABEL_WRAP_THRESHOLD = 60;
 
 // Checks if the string length of a chart label (detector description
 // and entity fields) is above LABEL_WRAP_THRESHOLD.

From 9bdef671c483c1b9fac3de91dcfc8e06e751a43b Mon Sep 17 00:00:00 2001
From: Walter Rafelsberger <walter@elastic.co>
Date: Wed, 26 Sep 2018 15:29:30 +0200
Subject: [PATCH 09/19] [ML] Fix comment.

---
 .../components/explorer_chart_label/explorer_chart_label.js   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

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
index 6bea0832898fa..40498816c1eda 100644
--- 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
@@ -21,11 +21,11 @@ export function ExplorerChartLabel({ detectorLabel, entityFields, infoTooltip, w
     Depending on whether we wrap the entityField badges to a new line, we render this differently:
 
     1. All in one line:
-        <detectorLabel> - <entityBadge1> <entityBadge1> ... <infoIcon>
+        <detectorLabel> - <entityBadge1> <entityBadge2> ... <infoIcon>
 
     2. Multiple lines:
         <detectorLabel> <infoIcon> <br />
-        <entityBadge1> <entityBadge1> ...
+        <entityBadge1> <entityBadge2> ...
   */
 
   const labelSeparator = (wrapLabel === true) ? <br /> : ' - ';

From aee9e06a9b7e3b1869cda586017476ef0ba7e809 Mon Sep 17 00:00:00 2001
From: Walter Rafelsberger <walter@elastic.co>
Date: Wed, 26 Sep 2018 15:37:53 +0200
Subject: [PATCH 10/19] [ML] Tweaked conditional rendering.

---
 .../components/explorer_chart_label/explorer_chart_label.js  | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

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
index 40498816c1eda..605818fe4ba8f 100644
--- 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
@@ -51,8 +51,9 @@ export function ExplorerChartLabel({ detectorLabel, entityFields, infoTooltip, w
         {(detectorLabel.length > 0 && entityFields.length > 0) && (
           <React.Fragment>{wrapLabel && infoIcon} {labelSeparator} </React.Fragment>
         )}
-        {!wrapLabel && entityFieldBadges}
-        {!wrapLabel && infoIcon}
+        {!wrapLabel && (
+          <React.Fragment>{entityFieldBadges} {infoIcon}</React.Fragment>
+        )}
       </span>
       {wrapLabel && (
         <div className="ml-explorer-chart-label-fields">{entityFieldBadges}</div>

From 8d7e763506099862a38739405f04584d15345d18 Mon Sep 17 00:00:00 2001
From: Walter Rafelsberger <walter@elastic.co>
Date: Thu, 27 Sep 2018 11:04:27 +0200
Subject: [PATCH 11/19] [ML] Don't use string concatentation.

---
 .../explorer/explorer_charts/explorer_charts_container.js     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

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 71b29c057fe8d..2703983ca9292 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
@@ -20,8 +20,8 @@ import {
 import { ExplorerChart } from './explorer_chart';
 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 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({

From d6ed62f2bfd71d138c62027d08576785a7152760 Mon Sep 17 00:00:00 2001
From: Walter Rafelsberger <walter@elastic.co>
Date: Thu, 27 Sep 2018 11:06:26 +0200
Subject: [PATCH 12/19] [ML] Changed comment to be in line with style guide.

---
 .../explorer_chart_label.js                   | 19 ++++++++-----------
 1 file changed, 8 insertions(+), 11 deletions(-)

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
index 605818fe4ba8f..5cede92f3fa0b 100644
--- 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
@@ -17,17 +17,14 @@ import { ExplorerChartLabelBadge } from './explorer_chart_label_badge';
 import { ExplorerChartTooltip } from '../../explorer_chart_tooltip';
 
 export function ExplorerChartLabel({ detectorLabel, entityFields, infoTooltip, wrapLabel }) {
-  /*
-    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> <br />
-        <entityBadge1> <entityBadge2> ...
-  */
-
+  // 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> <br />
+  //   <entityBadge1> <entityBadge2> ...
   const labelSeparator = (wrapLabel === true) ? <br /> : ' - ';
 
   const entityFieldBadges = entityFields.map((entity, j) => {

From 3cf3c47816797877d48f6e9ed51f7db4fbae900a Mon Sep 17 00:00:00 2001
From: Walter Rafelsberger <walter@elastic.co>
Date: Thu, 27 Sep 2018 11:09:27 +0200
Subject: [PATCH 13/19] [ML] Use a proper React key.

---
 .../components/explorer_chart_label/explorer_chart_label.js   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

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
index 5cede92f3fa0b..a3d5773d0c047 100644
--- 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
@@ -27,8 +27,8 @@ export function ExplorerChartLabel({ detectorLabel, entityFields, infoTooltip, w
   //   <entityBadge1> <entityBadge2> ...
   const labelSeparator = (wrapLabel === true) ? <br /> : ' - ';
 
-  const entityFieldBadges = entityFields.map((entity, j) => {
-    return <span key={j}><ExplorerChartLabelBadge entity={entity} /> </span>;
+  const entityFieldBadges = entityFields.map((entity) => {
+    return <span key={`${entity.fieldName} ${entity.fieldValue}`}><ExplorerChartLabelBadge entity={entity} /> </span>;
   });
 
   const infoIcon = (

From 467d84594c1f4be4a2e8c2eb829dae3bdaea58f1 Mon Sep 17 00:00:00 2001
From: Walter Rafelsberger <walter@elastic.co>
Date: Thu, 27 Sep 2018 11:22:57 +0200
Subject: [PATCH 14/19] [ML] Update jest snapshot to reflect new React key.

---
 .../explorer_chart_label.test.js.snap         | 51 ++++++++++---------
 1 file changed, 27 insertions(+), 24 deletions(-)

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
index 5ec81f3a11c36..8bc0eac5e4d11 100644
--- 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
@@ -13,31 +13,34 @@ exports[`ExplorerChartLabelBadge Render the chart label in one line. 1`] = `
        - 
        
     </React.Fragment>
-    <span
-      key="0"
-    >
-      <ExplorerChartLabelBadge
-        entity={
-          Object {
-            "$$hashKey": "object:813",
-            "fieldName": "nginx.access.remote_ip",
-            "fieldValue": "72.57.0.53",
+    <React.Fragment>
+      <span
+        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",
+            }
           }
-        }
-      />
+        />
+         
+      </span>
        
-    </span>
-    <span
-      className="ml-explorer-chart-icon"
-    >
-      <EuiIconTip
-        aria-label="Info"
-        content={<ExplorerChartTooltip />}
-        position="top"
-        size="s"
-        type="questionInCircle"
-      />
-    </span>
+      <span
+        className="ml-explorer-chart-icon"
+      >
+        <EuiIconTip
+          aria-label="Info"
+          content={<ExplorerChartTooltip />}
+          position="top"
+          size="s"
+          type="questionInCircle"
+        />
+      </span>
+    </React.Fragment>
   </span>
 </React.Fragment>
 `;
@@ -71,7 +74,7 @@ exports[`ExplorerChartLabelBadge Render the chart label in two lines. 1`] = `
     className="ml-explorer-chart-label-fields"
   >
     <span
-      key="0"
+      key="nginx.access.remote_ip 72.57.0.53"
     >
       <ExplorerChartLabelBadge
         entity={

From 68bb3f889d6a9e146fb303e51b6a3251e2a29565 Mon Sep 17 00:00:00 2001
From: Walter Rafelsberger <walter@elastic.co>
Date: Thu, 27 Sep 2018 11:25:44 +0200
Subject: [PATCH 15/19] [ML] Updated PropTypes and argument default value for
 wrapLabel.

---
 .../explorer_chart_label/explorer_chart_label.js    | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

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
index a3d5773d0c047..4e3583ad9e321 100644
--- 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
@@ -16,7 +16,7 @@ import {
 import { ExplorerChartLabelBadge } from './explorer_chart_label_badge';
 import { ExplorerChartTooltip } from '../../explorer_chart_tooltip';
 
-export function ExplorerChartLabel({ detectorLabel, entityFields, infoTooltip, wrapLabel }) {
+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:
@@ -59,8 +59,11 @@ export function ExplorerChartLabel({ detectorLabel, entityFields, infoTooltip, w
   );
 }
 ExplorerChartLabel.propTypes = {
-  series: PropTypes.shape({
-    detectorLabel: PropTypes.string.isRequired,
-    entityFields: PropTypes.array.isRequired
-  })
+  detectorLabel: PropTypes.string.isRequired,
+  entityFields: PropTypes.arrayOf(PropTypes.shape({
+    fieldName: PropTypes.string.isRequired,
+    fieldValue: PropTypes.string.isRequired
+  })),
+  infoTooltip: PropTypes.object,
+  wrapLabel: PropTypes.bool
 };

From 62f2e21d2564e84f5effbceef9d712f8f8b4a7d0 Mon Sep 17 00:00:00 2001
From: Walter Rafelsberger <walter@elastic.co>
Date: Thu, 27 Sep 2018 11:50:04 +0200
Subject: [PATCH 16/19] [ML] Fix layout issue with mixed charts with some
 having no entity fields.

---
 .../components/explorer_chart_label/explorer_chart_label.js    | 2 +-
 .../explorer_chart_label/styles/explorer_chart_label.less      | 3 +++
 2 files changed, 4 insertions(+), 1 deletion(-)

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
index 4e3583ad9e321..37cab17601ddb 100644
--- 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
@@ -45,7 +45,7 @@ export function ExplorerChartLabel({ detectorLabel, entityFields, infoTooltip, w
     <React.Fragment>
       <span className="ml-explorer-chart-label-detector">
         <span>{detectorLabel}</span>
-        {(detectorLabel.length > 0 && entityFields.length > 0) && (
+        {(detectorLabel.length > 0 && entityFields.length > 0 || wrapLabel === true) && (
           <React.Fragment>{wrapLabel && infoIcon} {labelSeparator} </React.Fragment>
         )}
         {!wrapLabel && (
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
index 395b41d723a76..c7a10a9ad9fc6 100644
--- 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
@@ -15,6 +15,9 @@
 /* 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;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;

From 874948f7a4f069fc97b826269b1e6dc4a7fa5a45 Mon Sep 17 00:00:00 2001
From: Walter Rafelsberger <walter@elastic.co>
Date: Thu, 27 Sep 2018 11:56:00 +0200
Subject: [PATCH 17/19] [ML] BR tag isn't necessary anymore because entity
 fields are in a DIV.

---
 .../__snapshots__/explorer_chart_label.test.js.snap           | 1 -
 .../components/explorer_chart_label/explorer_chart_label.js   | 4 ++--
 2 files changed, 2 insertions(+), 3 deletions(-)

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
index 8bc0eac5e4d11..0d235bdab9f9e 100644
--- 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
@@ -66,7 +66,6 @@ exports[`ExplorerChartLabelBadge Render the chart label in two lines. 1`] = `
         />
       </span>
        
-      <br />
        
     </React.Fragment>
   </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
index 37cab17601ddb..7fd5a63902e62 100644
--- 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
@@ -23,9 +23,9 @@ export function ExplorerChartLabel({ detectorLabel, entityFields, infoTooltip, w
   //   <detectorLabel> - <entityBadge1> <entityBadge2> ... <infoIcon>
   //
   // 2. Multiple lines:
-  //   <detectorLabel> <infoIcon> <br />
+  //   <detectorLabel> <infoIcon>
   //   <entityBadge1> <entityBadge2> ...
-  const labelSeparator = (wrapLabel === true) ? <br /> : ' - ';
+  const labelSeparator = (wrapLabel === true) ? '' : ' - ';
 
   const entityFieldBadges = entityFields.map((entity) => {
     return <span key={`${entity.fieldName} ${entity.fieldValue}`}><ExplorerChartLabelBadge entity={entity} /> </span>;

From 669f7f4034f2c59ba57cfd9912ec89436925f3aa Mon Sep 17 00:00:00 2001
From: Walter Rafelsberger <walter@elastic.co>
Date: Thu, 27 Sep 2018 13:29:18 +0200
Subject: [PATCH 18/19] [ML] Fixes potentially hidden info icon. Fixes various
 CSS issues.

---
 .../explorer_charts_container.test.js.snap    | 34 -------
 .../explorer_chart_label.test.js.snap         | 90 ++++++++++++-------
 .../explorer_chart_label_badge.test.js.snap   | 21 +++--
 .../explorer_chart_label.js                   | 30 ++++---
 .../explorer_chart_label.test.js              |  2 +
 .../explorer_chart_label_badge.js             |  8 +-
 .../styles/explorer_chart_label.less          | 15 +++-
 .../styles/explorer_chart_label_badge.less    |  1 +
 .../explorer_charts_container.js              | 14 ++-
 .../explorer_charts_container.test.js         |  6 +-
 .../styles/explorer_charts_container.less     |  7 +-
 11 files changed, 118 insertions(+), 110 deletions(-)
 delete mode 100644 x-pack/plugins/ml/public/explorer/explorer_charts/__snapshots__/explorer_charts_container.test.js.snap

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 791efae23422a..0000000000000
--- a/x-pack/plugins/ml/public/explorer/explorer_charts/__snapshots__/explorer_charts_container.test.js.snap
+++ /dev/null
@@ -1,34 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ExplorerChartsContainer Initialization with chart data 1`] = `
-<div
-  className="ml-explorer-chart-label"
->
-  <ExplorerChartLabel
-    detectorLabel="high_sum(nginx.access.body_sent.bytes) over nginx.access.remote_ip (population-03)"
-    entityFields={
-      Array [
-        Object {
-          "$$hashKey": "object:813",
-          "fieldName": "nginx.access.remote_ip",
-          "fieldValue": "72.57.0.53",
-        },
-      ]
-    }
-    infoTooltip={
-      Object {
-        "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",
-      }
-    }
-    wrapLabel={true}
-  />
-</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
index 0d235bdab9f9e..b09453a8a3bc1 100644
--- 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
@@ -3,18 +3,18 @@
 exports[`ExplorerChartLabelBadge Render the chart label in one line. 1`] = `
 <React.Fragment>
   <span
-    className="ml-explorer-chart-label-detector"
+    className="ml-explorer-chart-label"
   >
-    <span>
+    <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>
-    <React.Fragment>
-      <span
+      <React.Fragment
         key="nginx.access.remote_ip 72.57.0.53"
       >
         <ExplorerChartLabelBadge
@@ -26,15 +26,29 @@ exports[`ExplorerChartLabelBadge Render the chart label in one line. 1`] = `
             }
           }
         />
-         
-      </span>
+         
+      </React.Fragment>
        
       <span
-        className="ml-explorer-chart-icon"
+        className="ml-explorer-chart-info-icon"
       >
         <EuiIconTip
           aria-label="Info"
-          content={<ExplorerChartTooltip />}
+          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"
@@ -48,31 +62,43 @@ exports[`ExplorerChartLabelBadge Render the chart label in one line. 1`] = `
 exports[`ExplorerChartLabelBadge Render the chart label in two lines. 1`] = `
 <React.Fragment>
   <span
-    className="ml-explorer-chart-label-detector"
+    className="ml-explorer-chart-label"
   >
-    <span>
+    <span
+      className="ml-explorer-chart-label-detector"
+    >
       high_sum(nginx.access.body_sent.bytes) over nginx.access.remote_ip (population-03)
     </span>
-    <React.Fragment>
-      <span
-        className="ml-explorer-chart-icon"
-      >
-        <EuiIconTip
-          aria-label="Info"
-          content={<ExplorerChartTooltip />}
-          position="top"
-          size="s"
-          type="questionInCircle"
-        />
-      </span>
-       
-       
-    </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>
   </span>
   <div
     className="ml-explorer-chart-label-fields"
   >
-    <span
+    <React.Fragment
       key="nginx.access.remote_ip 72.57.0.53"
     >
       <ExplorerChartLabelBadge
@@ -84,8 +110,8 @@ exports[`ExplorerChartLabelBadge Render the chart label in two lines. 1`] = `
           }
         }
       />
-       
-    </span>
+       
+    </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
index 8e61b8626b731..9853aaa7907d9 100644
--- 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
@@ -1,15 +1,18 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ExplorerChartLabelBadge Render entity label badge. 1`] = `
-<EuiBadge
+<span
   className="ml-explorer-chart-label-badge"
-  color="hollow"
-  iconSide="left"
 >
-  nginx.access.remote_ip
-   
-  <strong>
-    72.57.0.53
-  </strong>
-</EuiBadge>
+  <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
index 7fd5a63902e62..018bab904196b 100644
--- 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
@@ -25,14 +25,21 @@ export function ExplorerChartLabel({ detectorLabel, entityFields, infoTooltip, w
   // 2. Multiple lines:
   //   <detectorLabel> <infoIcon>
   //   <entityBadge1> <entityBadge2> ...
-  const labelSeparator = (wrapLabel === true) ? '' : ' - ';
+  const labelSeparator = (
+    wrapLabel === true ||
+    (entityFields.length === 0 || detectorLabel.length === 0)
+  ) ? '' : (<React.Fragment>&nbsp;&ndash;&nbsp;</React.Fragment>);
 
   const entityFieldBadges = entityFields.map((entity) => {
-    return <span key={`${entity.fieldName} ${entity.fieldValue}`}><ExplorerChartLabelBadge entity={entity} /> </span>;
+    return (
+      <React.Fragment key={`${entity.fieldName} ${entity.fieldValue}`}>
+        <ExplorerChartLabelBadge entity={entity} />&nbsp;
+      </React.Fragment>
+    );
   });
 
   const infoIcon = (
-    <span className="ml-explorer-chart-icon">
+    <span className="ml-explorer-chart-info-icon">
       <EuiIconTip
         content={<ExplorerChartTooltip {...infoTooltip} />}
         position="top"
@@ -43,11 +50,11 @@ export function ExplorerChartLabel({ detectorLabel, entityFields, infoTooltip, w
 
   return (
     <React.Fragment>
-      <span className="ml-explorer-chart-label-detector">
-        <span>{detectorLabel}</span>
-        {(detectorLabel.length > 0 && entityFields.length > 0 || wrapLabel === true) && (
-          <React.Fragment>{wrapLabel && infoIcon} {labelSeparator} </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>
         )}
@@ -60,10 +67,7 @@ export function ExplorerChartLabel({ detectorLabel, entityFields, infoTooltip, w
 }
 ExplorerChartLabel.propTypes = {
   detectorLabel: PropTypes.string.isRequired,
-  entityFields: PropTypes.arrayOf(PropTypes.shape({
-    fieldName: PropTypes.string.isRequired,
-    fieldValue: PropTypes.string.isRequired
-  })),
-  infoTooltip: PropTypes.object,
+  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
index 8f5557d4d091b..f0ff2b53a3c18 100644
--- 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
@@ -20,6 +20,7 @@ describe('ExplorerChartLabelBadge', () => {
       <ExplorerChartLabel
         detectorLabel={seriesConfig.detectorLabel}
         entityFields={seriesConfig.entityFields}
+        infoTooltip={seriesConfig.infoTooltip}
         wrapLabel={false}
       />
     );
@@ -33,6 +34,7 @@ describe('ExplorerChartLabelBadge', () => {
       <ExplorerChartLabel
         detectorLabel={seriesConfig.detectorLabel}
         entityFields={seriesConfig.entityFields}
+        infoTooltip={seriesConfig.infoTooltip}
         wrapLabel={true}
       />
     );
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
index 8b71afa7230fa..6a0d34991d895 100644
--- 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
@@ -15,9 +15,11 @@ import {
 
 export function ExplorerChartLabelBadge({ entity }) {
   return (
-    <EuiBadge color="hollow" className="ml-explorer-chart-label-badge">
-      {entity.fieldName} <strong>{entity.fieldValue}</strong>
-    </EuiBadge>
+    <span className="ml-explorer-chart-label-badge">
+      <EuiBadge color="hollow">
+        {entity.fieldName} <strong>{entity.fieldValue}</strong>
+      </EuiBadge>
+    </span>
   );
 }
 ExplorerChartLabelBadge.propTypes = {
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
index c7a10a9ad9fc6..c9065f9404f0e 100644
--- 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
@@ -1,24 +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 80px for the "View" link */
-  max-width: calc(~"100% - 80px");
+  /* 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;
-  text-overflow: ellipsis;
   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
index f67c3645f39c6..69b13432f05c9 100644
--- 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
@@ -6,4 +6,5 @@
 */
 .ml-explorer-chart-label-badge {
   font-weight: normal;
+  vertical-align: middle;
 }
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 2703983ca9292..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
@@ -74,14 +74,12 @@ export function ExplorerChartsContainer({
                   </EuiButtonEmpty>
                 </EuiToolTip>
               </div>
-              <div className="ml-explorer-chart-label">
-                <ExplorerChartLabel
-                  detectorLabel={detectorLabel}
-                  entityFields={entityFields}
-                  infoTooltip={series.infoTooltip}
-                  wrapLabel={wrapLabel}
-                />
-              </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 68df4b59c9793..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
@@ -102,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('.ml-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_charts_container.less b/x-pack/plugins/ml/public/explorer/explorer_charts/styles/explorer_charts_container.less
index 5158c6ac1d873..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
@@ -102,13 +102,10 @@
   }
 }
 
+/* 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-right: -8px;
-}
-
-.ml-explorer-chart-icon {
-  margin: 0px 0 0 4px;
+  margin: 2px -8px 0 0;
 }

From 1f70b46f3540acc2b8bdae4213a26aee2f743459 Mon Sep 17 00:00:00 2001
From: Walter Rafelsberger <walter@elastic.co>
Date: Thu, 27 Sep 2018 15:38:53 +0200
Subject: [PATCH 19/19] [ML] Fixes missing space between detector label and
 info icon.

---
 .../__snapshots__/explorer_chart_label.test.js.snap           | 3 +++
 .../components/explorer_chart_label/explorer_chart_label.js   | 4 +++-
 2 files changed, 6 insertions(+), 1 deletion(-)

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
index b09453a8a3bc1..0654b24dcf60a 100644
--- 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
@@ -68,6 +68,9 @@ exports[`ExplorerChartLabelBadge Render the chart label in two lines. 1`] = `
       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"
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
index 018bab904196b..218f270f806c5 100644
--- 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
@@ -25,10 +25,12 @@ export function ExplorerChartLabel({ detectorLabel, entityFields, infoTooltip, w
   // 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;&ndash;&nbsp;</React.Fragment>);
+  ) ? (<React.Fragment>&nbsp;</React.Fragment>) : (<React.Fragment>&nbsp;&ndash;&nbsp;</React.Fragment>);
 
   const entityFieldBadges = entityFields.map((entity) => {
     return (