[6.x] [ML] Improve Explorer Chart labels. (#23494)

x-pack/plugins/ml/public/explorer/explorer.html

@@ -131,6 +131,8 @@ <h4 class="euiTitle euiTitle--small">No {{swimlaneViewByFieldName}} influencers
           </div>
         </div>
 
+        <div class="euiSpacer euiSpacer--m"></div>
+
         <div class="euiText explorer-charts">
           <ml-explorer-charts-container />
         </div>

x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/__snapshots__/explorer_chart_label.test.js.snap

@@ -0,0 +1,120 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ExplorerChartLabelBadge Render the chart label in one line. 1`] = `
+<React.Fragment>
+  <span
+    className="ml-explorer-chart-label"
+  >
+    <span
+      className="ml-explorer-chart-label-detector"
+    >
+      high_sum(nginx.access.body_sent.bytes) over nginx.access.remote_ip (population-03)
+      <React.Fragment>
+         – 
+      </React.Fragment>
+    </span>
+    <React.Fragment>
+      <React.Fragment
+        key="nginx.access.remote_ip 72.57.0.53"
+      >
+        <ExplorerChartLabelBadge
+          entity={
+            Object {
+              "$$hashKey": "object:813",
+              "fieldName": "nginx.access.remote_ip",
+              "fieldValue": "72.57.0.53",
+            }
+          }
+        />
+
+      </React.Fragment>
+
+      <span
+        className="ml-explorer-chart-info-icon"
+      >
+        <EuiIconTip
+          aria-label="Info"
+          content={
+            <ExplorerChartTooltip
+              aggregationInterval="1h"
+              chartFunction="sum nginx.access.body_sent.bytes"
+              entityFields={
+                Array [
+                  Object {
+                    "fieldName": "nginx.access.remote_ip",
+                    "fieldValue": "72.57.0.53",
+                  },
+                ]
+              }
+              jobId="population-03"
+            />
+          }
+          position="top"
+          size="s"
+          type="questionInCircle"
+        />
+      </span>
+    </React.Fragment>
+  </span>
+</React.Fragment>
+`;
+
+exports[`ExplorerChartLabelBadge Render the chart label in two lines. 1`] = `
+<React.Fragment>
+  <span
+    className="ml-explorer-chart-label"
+  >
+    <span
+      className="ml-explorer-chart-label-detector"
+    >
+      high_sum(nginx.access.body_sent.bytes) over nginx.access.remote_ip (population-03)
+      <React.Fragment>
+
+      </React.Fragment>
+    </span>
+    <span
+      className="ml-explorer-chart-info-icon"
+    >
+      <EuiIconTip
+        aria-label="Info"
+        content={
+          <ExplorerChartTooltip
+            aggregationInterval="1h"
+            chartFunction="sum nginx.access.body_sent.bytes"
+            entityFields={
+              Array [
+                Object {
+                  "fieldName": "nginx.access.remote_ip",
+                  "fieldValue": "72.57.0.53",
+                },
+              ]
+            }
+            jobId="population-03"
+          />
+        }
+        position="top"
+        size="s"
+        type="questionInCircle"
+      />
+    </span>
+  </span>
+  <div
+    className="ml-explorer-chart-label-fields"
+  >
+    <React.Fragment
+      key="nginx.access.remote_ip 72.57.0.53"
+    >
+      <ExplorerChartLabelBadge
+        entity={
+          Object {
+            "$$hashKey": "object:813",
+            "fieldName": "nginx.access.remote_ip",
+            "fieldValue": "72.57.0.53",
+          }
+        }
+      />
+
+    </React.Fragment>
+  </div>
+</React.Fragment>
+`;

x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/__snapshots__/explorer_chart_label_badge.test.js.snap

@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ExplorerChartLabelBadge Render entity label badge. 1`] = `
+<span
+  className="ml-explorer-chart-label-badge"
+>
+  <EuiBadge
+    color="hollow"
+    iconSide="left"
+  >
+    nginx.access.remote_ip
+
+    <strong>
+      72.57.0.53
+    </strong>
+  </EuiBadge>
+</span>
+`;

x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/explorer_chart_label.js

@@ -0,0 +1,75 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import './styles/explorer_chart_label.less';
+
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import {
+  EuiIconTip
+} from '@elastic/eui';
+
+import { ExplorerChartLabelBadge } from './explorer_chart_label_badge';
+import { ExplorerChartTooltip } from '../../explorer_chart_tooltip';
+
+export function ExplorerChartLabel({ detectorLabel, entityFields, infoTooltip, wrapLabel = false }) {
+  // Depending on whether we wrap the entityField badges to a new line, we render this differently:
+  //
+  // 1. All in one line:
+  //   <detectorLabel> - <entityBadge1> <entityBadge2> ... <infoIcon>
+  //
+  // 2. Multiple lines:
+  //   <detectorLabel> <infoIcon>
+  //   <entityBadge1> <entityBadge2> ...
+
+  // Using &nbsp;s here to make sure those spaces get rendered.
+  const labelSeparator = (
+    wrapLabel === true ||
+    (entityFields.length === 0 || detectorLabel.length === 0)
+  ) ? (<React.Fragment>&nbsp;</React.Fragment>) : (<React.Fragment>&nbsp;&ndash;&nbsp;</React.Fragment>);
+
+  const entityFieldBadges = entityFields.map((entity) => {
+    return (
+      <React.Fragment key={`${entity.fieldName} ${entity.fieldValue}`}>
+        <ExplorerChartLabelBadge entity={entity} />&nbsp;
+      </React.Fragment>
+    );
+  });
+
+  const infoIcon = (
+    <span className="ml-explorer-chart-info-icon">
+      <EuiIconTip
+        content={<ExplorerChartTooltip {...infoTooltip} />}
+        position="top"
+        size="s"
+      />
+    </span>
+  );
+
+  return (
+    <React.Fragment>
+      <span className="ml-explorer-chart-label">
+        <span className="ml-explorer-chart-label-detector">
+          {detectorLabel}{labelSeparator}
+        </span>
+        {wrapLabel && infoIcon}
+        {!wrapLabel && (
+          <React.Fragment>{entityFieldBadges} {infoIcon}</React.Fragment>
+        )}
+      </span>
+      {wrapLabel && (
+        <div className="ml-explorer-chart-label-fields">{entityFieldBadges}</div>
+      )}
+    </React.Fragment>
+  );
+}
+ExplorerChartLabel.propTypes = {
+  detectorLabel: PropTypes.string.isRequired,
+  entityFields: PropTypes.arrayOf(ExplorerChartLabelBadge.propTypes.entity),
+  infoTooltip: PropTypes.object.isRequired,
+  wrapLabel: PropTypes.bool
+};

x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/explorer_chart_label.test.js

@@ -0,0 +1,45 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import seriesConfig from '../../__mocks__/mock_series_config_filebeat.json';
+
+import { shallow } from 'enzyme';
+import React from 'react';
+
+import { ExplorerChartLabel } from './explorer_chart_label';
+
+
+describe('ExplorerChartLabelBadge', () => {
+
+  test('Render the chart label in one line.', () => {
+
+    const wrapper = shallow(
+      <ExplorerChartLabel
+        detectorLabel={seriesConfig.detectorLabel}
+        entityFields={seriesConfig.entityFields}
+        infoTooltip={seriesConfig.infoTooltip}
+        wrapLabel={false}
+      />
+    );
+    expect(wrapper).toMatchSnapshot();
+
+  });
+
+  test('Render the chart label in two lines.', () => {
+
+    const wrapper = shallow(
+      <ExplorerChartLabel
+        detectorLabel={seriesConfig.detectorLabel}
+        entityFields={seriesConfig.entityFields}
+        infoTooltip={seriesConfig.infoTooltip}
+        wrapLabel={true}
+      />
+    );
+    expect(wrapper).toMatchSnapshot();
+
+  });
+
+});

x-pack/plugins/ml/public/explorer/explorer_charts/components/explorer_chart_label/explorer_chart_label_badge.js

@@ -0,0 +1,30 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import './styles/explorer_chart_label_badge.less';
+
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import {
+  EuiBadge
+} from '@elastic/eui';
+
+export function ExplorerChartLabelBadge({ entity }) {
+  return (
+    <span className="ml-explorer-chart-label-badge">
+      <EuiBadge color="hollow">
+        {entity.fieldName} <strong>{entity.fieldValue}</strong>
+      </EuiBadge>
+    </span>
+  );
+}
+ExplorerChartLabelBadge.propTypes = {
+  entity: PropTypes.shape({
+    fieldName: PropTypes.string.isRequired,
+    fieldValue: PropTypes.string.isRequired
+  })
+};

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();
+
+  });
+
+});

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';