maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

[ML] fix charts container width init (#72389)

Browse source
This commit is contained in:
Dima Arnautov 2020-07-20 12:25:13 +02:00 committed by GitHub
parent 3442451aac
commit 4acdf278dc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 14 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
x-pack/plugins/ml/public/application/explorer/actions/load_explorer_data.ts
View file

@ -200,6 +200,7 @@ const loadExplorerDataProvider = (anomalyTimelineService: AnomalyTimelineService
if (selectedCells !== undefined && Array.isArray(anomalyChartRecords)) {
memoizedAnomalyDataChange(
lastRefresh,
swimlaneContainerWidth,
anomalyChartRecords,
timerange.earliestMs,
timerange.latestMs,
@ -208,6 +209,7 @@ const loadExplorerDataProvider = (anomalyTimelineService: AnomalyTimelineService
} else {
memoizedAnomalyDataChange(
lastRefresh,
swimlaneContainerWidth,
[],
timerange.earliestMs,
timerange.latestMs,

1
x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_charts_container_service.d.ts vendored
View file

@ -14,6 +14,7 @@ export declare interface ExplorerChartsData {
export declare const getDefaultChartsData: () => ExplorerChartsData;
export declare const anomalyDataChange: (
chartsContainerWidth: number,
anomalyRecords: any[],
earliestMs: number,
latestMs: number,

10
x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_charts_container_service.js
View file

@ -24,7 +24,6 @@ import {
} from '../../../../common/util/job_utils';
import { mlResultsService } from '../../services/results_service';
import { mlJobService } from '../../services/job_service';
import { getChartContainerWidth } from '../legacy_utils';
import { explorerService } from '../explorer_dashboard_service';
import { CHART_TYPE } from '../explorer_constants';
@ -48,7 +47,13 @@ const MAX_CHARTS_PER_ROW = 4;
// callback(getDefaultChartsData());
export const anomalyDataChange = function (anomalyRecords, earliestMs, latestMs, severity = 0) {
export const anomalyDataChange = function (
chartsContainerWidth,
anomalyRecords,
earliestMs,
latestMs,
severity = 0
) {
const data = getDefaultChartsData();
const filteredRecords = anomalyRecords.filter((record) => {
@ -56,7 +61,6 @@ export const anomalyDataChange = function (anomalyRecords, earliestMs, latestMs,
});
const allSeriesRecords = processRecordsForDisplay(filteredRecords);
// Calculate the number of charts per row, depending on the width available, to a max of 4.
const chartsContainerWidth = getChartContainerWidth();
let chartsPerRow = Math.min(
Math.max(Math.floor(chartsContainerWidth / 550), 1),
MAX_CHARTS_PER_ROW

14
x-pack/plugins/ml/public/application/explorer/explorer_charts/explorer_charts_container_service.test.js
View file

@ -88,12 +88,6 @@ jest.mock('../../util/string_utils', () => ({
},
}));
jest.mock('../legacy_utils', () => ({
getChartContainerWidth() {
return 1140;
},
}));
jest.mock('../explorer_dashboard_service', () => ({
explorerService: {
setCharts: jest.fn(),
@ -109,7 +103,7 @@ describe('explorerChartsContainerService', () => {
});
test('call anomalyChangeListener with empty series config', (done) => {
anomalyDataChange([], 1486656000000, 1486670399999);
anomalyDataChange(1140, [], 1486656000000, 1486670399999);
setImmediate(() => {
expect(explorerService.setCharts.mock.calls.length).toBe(1);
@ -122,7 +116,7 @@ describe('explorerChartsContainerService', () => {
});
test('call anomalyChangeListener with actual series config', (done) => {
anomalyDataChange(mockAnomalyChartRecords, 1486656000000, 1486670399999);
anomalyDataChange(1140, mockAnomalyChartRecords, 1486656000000, 1486670399999);
setImmediate(() => {
expect(explorerService.setCharts.mock.calls.length).toBe(2);
@ -138,7 +132,7 @@ describe('explorerChartsContainerService', () => {
return d;
});
anomalyDataChange(mockAnomalyChartRecordsClone, 1486656000000, 1486670399999);
anomalyDataChange(1140, mockAnomalyChartRecordsClone, 1486656000000, 1486670399999);
setImmediate(() => {
expect(explorerService.setCharts.mock.calls.length).toBe(2);
@ -161,7 +155,7 @@ describe('explorerChartsContainerService', () => {
mockAnomalyChartRecordsClone[1].partition_field_value = 'AAL.';
expect(() => {
anomalyDataChange(mockAnomalyChartRecordsClone, 1486656000000, 1486670399999);
anomalyDataChange(1140, mockAnomalyChartRecordsClone, 1486656000000, 1486670399999);
}).not.toThrow();
setImmediate(() => {

13
x-pack/plugins/ml/public/application/explorer/legacy_utils.ts
View file

@ -1,13 +0,0 @@
/*
* 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.
*/
// This file includes utils which should eventuelly become obsolete once Anomaly Explorer
// is fully migrated to React. Their purpose is to retain functionality while we migrate step by step.
export function getChartContainerWidth() {
const chartContainer = document.querySelector('.explorer-charts');
return Math.floor((chartContainer && chartContainer.clientWidth) || 0);
}