[ML] Anomaly Explorer Rare/Population Charts

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

@@ -27,6 +27,7 @@ Object {
   "entityFields": Array [
     Object {
       "fieldName": "airline",
+      "fieldType": "partition",
       "fieldValue": "JAL",
     },
   ],

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

@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ExplorerChartTooltip Render tooltip based on infoTooltip data. 1`] = `
+<div
+  className="ml-explorer-chart-info-tooltip"
+>
+  <TooltipDefinitionList
+    toolTipData={
+      Array [
+        Object {
+          "description": "mock-job-id",
+          "title": "job ID",
+        },
+        Object {
+          "description": "15m",
+          "title": "aggregation interval",
+        },
+        Object {
+          "description": "avg responsetime",
+          "title": "chart function",
+        },
+        Object {
+          "description": "JAL",
+          "title": "airline",
+        },
+      ]
+    }
+  />
+</div>
+`;

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

@@ -2,7 +2,6 @@
 
 exports[`explorerChartsContainerService call anomalyChangeListener with actual series config 1`] = `
 Object {
-  "layoutCellsPerChart": 12,
   "seriesToPlot": Array [],
   "timeFieldName": "timestamp",
   "tooManyBuckets": false,
@@ -11,7 +10,7 @@ Object {
 
 exports[`explorerChartsContainerService call anomalyChangeListener with actual series config 2`] = `
 Object {
-  "layoutCellsPerChart": 12,
+  "chartsPerRow": 1,
   "seriesToPlot": Array [
     Object {
       "bucketSpanSeconds": 900,
@@ -40,6 +39,7 @@ Object {
       "entityFields": Array [
         Object {
           "fieldName": "airline",
+          "fieldType": "partition",
           "fieldValue": "AAL",
         },
       ],
@@ -71,7 +71,7 @@ Object {
 
 exports[`explorerChartsContainerService call anomalyChangeListener with actual series config 3`] = `
 Object {
-  "layoutCellsPerChart": 12,
+  "chartsPerRow": 1,
   "seriesToPlot": Array [
     Object {
       "bucketSpanSeconds": 900,
@@ -582,6 +582,7 @@ Object {
       "entityFields": Array [
         Object {
           "fieldName": "airline",
+          "fieldType": "partition",
           "fieldValue": "AAL",
         },
       ],

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

@@ -26,16 +26,16 @@ exports[`ExplorerChartLabelBadge Render the chart label in one line. 1`] = `
             }
           }
         />
-
       </React.Fragment>
 
       <span
         className="ml-explorer-chart-info-icon"
       >
         <EuiIconTip
           aria-label="Info"
+          className="ml-explorer-chart-eui-icon-tip"
           content={
-            <ExplorerChartTooltip
+            <ExplorerChartInfoTooltip
               aggregationInterval="1h"
               chartFunction="sum nginx.access.body_sent.bytes"
               entityFields={
@@ -77,8 +77,9 @@ exports[`ExplorerChartLabelBadge Render the chart label in two lines. 1`] = `
     >
       <EuiIconTip
         aria-label="Info"
+        className="ml-explorer-chart-eui-icon-tip"
         content={
-          <ExplorerChartTooltip
+          <ExplorerChartInfoTooltip
             aggregationInterval="1h"
             chartFunction="sum nginx.access.body_sent.bytes"
             entityFields={
@@ -98,8 +99,8 @@ exports[`ExplorerChartLabelBadge Render the chart label in two lines. 1`] = `
       />
     </span>
   </span>
-  <div
-    className="ml-explorer-chart-label-fields"
+  <span
+    className="ml-explorer-chart-label-badges"
   >
     <React.Fragment
       key="nginx.access.remote_ip 72.57.0.53"
@@ -113,8 +114,7 @@ exports[`ExplorerChartLabelBadge Render the chart label in two lines. 1`] = `
           }
         }
       />
-
     </React.Fragment>
-  </div>
+  </span>
 </React.Fragment>
 `;

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

@@ -5,6 +5,7 @@ exports[`ExplorerChartLabelBadge Render entity label badge. 1`] = `
   className="ml-explorer-chart-label-badge"
 >
   <EuiBadge
+    className="ml-reset-font-weight"
     color="hollow"
     iconSide="left"
   >

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

@@ -14,7 +14,7 @@ import {
 } from '@elastic/eui';
 
 import { ExplorerChartLabelBadge } from './explorer_chart_label_badge';
-import { ExplorerChartTooltip } from '../../explorer_chart_tooltip';
+import { ExplorerChartInfoTooltip } from '../../explorer_chart_info_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:
@@ -35,15 +35,16 @@ export function ExplorerChartLabel({ detectorLabel, entityFields, infoTooltip, w
   const entityFieldBadges = entityFields.map((entity) => {
     return (
       <React.Fragment key={`${entity.fieldName} ${entity.fieldValue}`}>
-        <ExplorerChartLabelBadge entity={entity} />&nbsp;
+        <ExplorerChartLabelBadge entity={entity} />
       </React.Fragment>
     );
   });
 
   const infoIcon = (
     <span className="ml-explorer-chart-info-icon">
       <EuiIconTip
-        content={<ExplorerChartTooltip {...infoTooltip} />}
+        className="ml-explorer-chart-eui-icon-tip"
+        content={<ExplorerChartInfoTooltip {...infoTooltip} />}
         position="top"
         size="s"
       />
@@ -62,7 +63,7 @@ export function ExplorerChartLabel({ detectorLabel, entityFields, infoTooltip, w
         )}
       </span>
       {wrapLabel && (
-        <div className="ml-explorer-chart-label-fields">{entityFieldBadges}</div>
+        <span className="ml-explorer-chart-label-badges">{entityFieldBadges}</span>
       )}
     </React.Fragment>
   );

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

@@ -16,7 +16,7 @@ import {
 export function ExplorerChartLabelBadge({ entity }) {
   return (
     <span className="ml-explorer-chart-label-badge">
-      <EuiBadge color="hollow">
+      <EuiBadge color="hollow" className="ml-reset-font-weight">
         {entity.fieldName} <strong>{entity.fieldValue}</strong>
       </EuiBadge>
     </span>

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

@@ -1,33 +1,9 @@
-.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-eui-icon-tip {
+  max-width: none;
 }
 
-.ml-explorer-chart-label-detector {
-  vertical-align: middle;
-  /* account 100px for the "View" link and info icon */
-  max-width: calc(~"100% - 100px");
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-  display: inline-block;
-}
-
-.ml-explorer-chart-info-icon {
-  margin: 0;
-  vertical-align: middle;
-  display: inline-block;
-}
-
-/* only used when the field badges get wrapped to a new line */
-.ml-explorer-chart-label-fields {
-  width: 100%;
-  /* use a fixed height to avoid layout issues when
-     only some charts don't have entity fields */
-  height: 22px;
-  overflow: hidden;
-  white-space: nowrap;
-  line-height: 0;
+.ml-explorer-chart-label-badges {
+  margin-top: 3px;
+  /* let this overflow but not interfere with the flex layout */
+  width: 0;
 }

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

@@ -4,7 +4,6 @@
   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 {
+.ml-reset-font-weight {
   font-weight: normal;
-  vertical-align: middle;
 }

x-pack/plugins/ml/public/explorer/explorer_charts/explorer_chart_config_builder.js

@@ -51,14 +51,16 @@ export function buildConfig(record) {
   if (_.has(record, 'partition_field_name')) {
     config.entityFields.push({
       fieldName: record.partition_field_name,
-      fieldValue: record.partition_field_value
+      fieldValue: record.partition_field_value,
+      fieldType: 'partition'
     });
   }
 
   if (_.has(record, 'over_field_name')) {
     config.entityFields.push({
       fieldName: record.over_field_name,
-      fieldValue: record.over_field_value
+      fieldValue: record.over_field_value,
+      fieldType: 'over'
     });
   }
 
@@ -68,7 +70,8 @@ export function buildConfig(record) {
   if (_.has(record, 'by_field_name') && !(_.has(record, 'over_field_name'))) {
     config.entityFields.push({
       fieldName: record.by_field_name,
-      fieldValue: record.by_field_value
+      fieldValue: record.by_field_value,
+      fieldType: 'by'
     });
   }