[ML] Anomaly Explorer Rare/Population Charts (elastic#23423)

This PR introduces custom charts for detectors that use a rare function (Event Distribution Chart) as well as detectors that use an over field (Population Distribution Chart).
walterra · Oct 5, 2018 · e7625eb · e7625eb
1 parent 932faba
commit e7625eb
Show file tree

Hide file tree

Showing 28 changed files with 1,067 additions and 240 deletions.
diff --git a/.../public/explorer/explorer_charts/__snapshots__/explorer_chart_config_builder.test.js.snap b/.../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",
     },
   ],

diff --git a/...ml/public/explorer/explorer_charts/__snapshots__/explorer_chart_info_tooltip.test.js.snap b/...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>
+`;
diff --git a/...gins/ml/public/explorer/explorer_charts/__snapshots__/explorer_chart_tooltip.test.js.snap b/...gins/ml/public/explorer/explorer_charts/__snapshots__/explorer_chart_tooltip.test.js.snap
diff --git a/...lic/explorer/explorer_charts/__snapshots__/explorer_charts_container_service.test.js.snap b/...lic/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",
         },
       ],

diff --git a/...er_charts/components/explorer_chart_label/__snapshots__/explorer_chart_label.test.js.snap b/...er_charts/components/explorer_chart_label/__snapshots__/explorer_chart_label.test.js.snap
@@ -14,28 +14,25 @@ exports[`ExplorerChartLabelBadge Render the chart label in one line. 1`] = `
       </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",
-            }
+      <ExplorerChartLabelBadge
+        entity={
+          Object {
+            "$$hashKey": "object:813",
+            "fieldName": "nginx.access.remote_ip",
+            "fieldValue": "72.57.0.53",
           }
-        />
-         
-      </React.Fragment>
+        }
+        key="nginx.access.remote_ip 72.57.0.53"
+      />
        
       <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 +74,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,23 +96,19 @@ 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"
-    >
-      <ExplorerChartLabelBadge
-        entity={
-          Object {
-            "$$hashKey": "object:813",
-            "fieldName": "nginx.access.remote_ip",
-            "fieldValue": "72.57.0.53",
-          }
+    <ExplorerChartLabelBadge
+      entity={
+        Object {
+          "$$hashKey": "object:813",
+          "fieldName": "nginx.access.remote_ip",
+          "fieldValue": "72.57.0.53",
         }
-      />
-       
-    </React.Fragment>
-  </div>
+      }
+      key="nginx.access.remote_ip 72.57.0.53"
+    />
+  </span>
 </React.Fragment>
 `;
diff --git a/...rts/components/explorer_chart_label/__snapshots__/explorer_chart_label_badge.test.js.snap b/...rts/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"
   >

diff --git a/...l/public/explorer/explorer_charts/components/explorer_chart_label/explorer_chart_label.js b/...l/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:
@@ -32,18 +32,15 @@ export function ExplorerChartLabel({ detectorLabel, entityFields, infoTooltip, w
     (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 entityFieldBadges = entityFields.map((entity) => (
+    <ExplorerChartLabelBadge entity={entity} key={`${entity.fieldName} ${entity.fieldValue}`} />
+  ));
 
   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 +59,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>
   );

diff --git a/...ic/explorer/explorer_charts/components/explorer_chart_label/explorer_chart_label_badge.js b/...ic/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>

diff --git a/...explorer/explorer_charts/components/explorer_chart_label/styles/explorer_chart_label.less b/...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;
 }
diff --git a/...er/explorer_charts/components/explorer_chart_label/styles/explorer_chart_label_badge.less b/...er/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;
 }
diff --git a/x-pack/plugins/ml/public/explorer/explorer_charts/explorer_chart_config_builder.js b/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'
     });
   }