Skip to content

Commit

Permalink
[ML] Anomaly Explorer Rare/Population Charts (#23423)
Browse files Browse the repository at this point in the history
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).
  • Loading branch information
walterra authored and cqliu1 committed Oct 12, 2018
1 parent b5afe54 commit 66a5369
Show file tree
Hide file tree
Showing 28 changed files with 1,067 additions and 240 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ Object {
"entityFields": Array [
Object {
"fieldName": "airline",
"fieldType": "partition",
"fieldValue": "JAL",
},
],
Expand Down
Original file line number Diff line number Diff line change
@@ -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>
`;

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@

exports[`explorerChartsContainerService call anomalyChangeListener with actual series config 1`] = `
Object {
"layoutCellsPerChart": 12,
"seriesToPlot": Array [],
"timeFieldName": "timestamp",
"tooManyBuckets": false,
Expand All @@ -11,7 +10,7 @@ Object {

exports[`explorerChartsContainerService call anomalyChangeListener with actual series config 2`] = `
Object {
"layoutCellsPerChart": 12,
"chartsPerRow": 1,
"seriesToPlot": Array [
Object {
"bucketSpanSeconds": 900,
Expand Down Expand Up @@ -40,6 +39,7 @@ Object {
"entityFields": Array [
Object {
"fieldName": "airline",
"fieldType": "partition",
"fieldValue": "AAL",
},
],
Expand Down Expand Up @@ -71,7 +71,7 @@ Object {

exports[`explorerChartsContainerService call anomalyChangeListener with actual series config 3`] = `
Object {
"layoutCellsPerChart": 12,
"chartsPerRow": 1,
"seriesToPlot": Array [
Object {
"bucketSpanSeconds": 900,
Expand Down Expand Up @@ -582,6 +582,7 @@ Object {
"entityFields": Array [
Object {
"fieldName": "airline",
"fieldType": "partition",
"fieldValue": "AAL",
},
],
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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={
Expand Down Expand Up @@ -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={
Expand All @@ -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>
`;
Original file line number Diff line number Diff line change
Expand Up @@ -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"
>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand All @@ -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"
/>
Expand All @@ -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>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
@@ -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;
}
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Original file line number Diff line number Diff line change
Expand Up @@ -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'
});
}

Expand All @@ -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'
});
}

Expand Down
Loading

0 comments on commit 66a5369

Please sign in to comment.