diff --git a/x-pack/plugins/ml/public/explorer/explorer_charts/__mocks__/mock_series_config_rare.json b/x-pack/plugins/ml/public/explorer/explorer_charts/__mocks__/mock_series_config_rare.json new file mode 100644 index 0000000000000..b82583a730323 --- /dev/null +++ b/x-pack/plugins/ml/public/explorer/explorer_charts/__mocks__/mock_series_config_rare.json @@ -0,0 +1,49 @@ +{ + "jobId": "ffb-rare-url-0921", + "detectorIndex": 0, + "metricFunction": "count", + "timeField": "@timestamp", + "interval": "15m", + "datafeedConfig": { + "datafeed_id": "datafeed-ffb-rare-url-0921", + "job_id": "ffb-rare-url-0921", + "query_delay": "115433ms", + "indices": [ + "filebeat-6.0.0-2017-nginx-elasticco-anon" + ], + "types": [], + "query": { + "match_all": { + "boost": 1 + } + }, + "scroll_size": 1000, + "chunking_config": { + "mode": "auto" + }, + "state": "stopped" + }, + "functionDescription": "rare", + "bucketSpanSeconds": 900, + "detectorLabel": "rare by \"nginx.access.url\"", + "entityFields": [ + { + "fieldName": "nginx.access.url", + "fieldValue": "/?node=4.1.1,5,7", + "fieldType": "by" + } + ], + "infoTooltip": { + "jobId": "ffb-rare-url-0921", + "aggregationInterval": "15m", + "chartFunction": "count", + "entityFields": [ + { + "fieldName": "nginx.access.url", + "fieldValue": "/?node=4.1.1,5,7" + } + ] + }, + "loading": true, + "chartData": null +} 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 c6dd2cc357aca..b62c219edbfc7 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 @@ -65,7 +65,7 @@ export function ExplorerChartLabel({ detectorLabel, entityFields, infoTooltip, w ); } ExplorerChartLabel.propTypes = { - detectorLabel: PropTypes.string.isRequired, + detectorLabel: PropTypes.object.isRequired, entityFields: PropTypes.arrayOf(ExplorerChartLabelBadge.propTypes.entity), infoTooltip: PropTypes.object.isRequired, wrapLabel: PropTypes.bool 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 1e4a335abf583..3c54899be60cd 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 @@ -57,13 +57,25 @@ function ExplorerChartContainer({ } = series; const chartType = getChartType(series); + let DetectorLabel = {detectorLabel}; + + if (chartType === CHART_TYPE.EVENT_DISTRIBUTION) { + const byField = series.entityFields.find(d => d.fieldType === 'by'); + if (typeof byField !== 'undefined') { + DetectorLabel = ( + + {detectorLabel}
y-axis event distribution split by "{byField.fieldName}" +
+ ); + } + } return ( { const mockedGetBBox = { x: 0, y: -11.5, width: 12.1875, height: 14.5 }; const originalGetBBox = SVGElement.prototype.getBBox; + const rareChartUniqueString = 'y-axis event distribution split by'; beforeEach(() => SVGElement.prototype.getBBox = () => mockedGetBBox); afterEach(() => (SVGElement.prototype.getBBox = originalGetBBox)); @@ -111,5 +113,29 @@ describe('ExplorerChartsContainer', () => { // 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(2); + + // Check if the additional y-axis information for rare charts is not part of the chart + expect(wrapper.html().search(rareChartUniqueString)).toBe(-1); + }); + + test('Initialization with rare detector', () => { + const wrapper = mount(); + + // 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(2); + + // Check if the additional y-axis information for rare charts is part of the chart + expect(wrapper.html().search(rareChartUniqueString)).toBeGreaterThan(0); }); }); diff --git a/x-pack/plugins/ml/public/util/chart_utils.js b/x-pack/plugins/ml/public/util/chart_utils.js index a5965e5356501..0a061f32fbf6f 100644 --- a/x-pack/plugins/ml/public/util/chart_utils.js +++ b/x-pack/plugins/ml/public/util/chart_utils.js @@ -324,7 +324,7 @@ export function removeLabelOverlap(axis, startTimeMs, tickInterval, width) { const fn = function (ts) { const filteredTicks = axis.selectAll('.tick').filter(d => d === ts); - if (filteredTicks[0].length === 0) { + if (filteredTicks.length === 0 || filteredTicks[0].length === 0) { return false; }