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

[ML] Fix charts grid on the Anomaly Explorer page (#86904)

Browse source 
* [ML] fix AR charts grid items width

* [ML] update test snapshot
This commit is contained in:
Dima Arnautov 2020-12-24 13:52:09 +01:00 committed by GitHub
parent 6fc041c1d4
commit 47ce575cc0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 11 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
x-pack/plugins/ml/public/application/explorer/explorer_charts/__snapshots__/explorer_charts_container_service.test.js.snap generated
View file

@ -596,8 +596,8 @@ Object {
"loading": false,
"metricFieldName": "responsetime",
"metricFunction": "avg",
"plotEarliest": 1486560600000,
"plotLatest": 1486765800000,
"plotEarliest": 1486542600000,
"plotLatest": 1486783800000,
"selectedEarliest": 1486656000000,
"selectedLatest": 1486670399999,
"timeField": "@timestamp",

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

@ -29,6 +29,7 @@ import { explorerService } from '../explorer_dashboard_service';
import { CHART_TYPE } from '../explorer_constants';
import { i18n } from '@kbn/i18n';
import { SWIM_LANE_LABEL_WIDTH } from '../swimlane_container';
export function getDefaultChartsData() {
return {
@ -57,15 +58,14 @@ export const anomalyDataChange = function (
) {
const data = getDefaultChartsData();
const containerWith = chartsContainerWidth + SWIM_LANE_LABEL_WIDTH;
const filteredRecords = anomalyRecords.filter((record) => {
return Number(record.record_score) >= severity;
});
const [allSeriesRecords, errorMessages] = processRecordsForDisplay(filteredRecords);
// Calculate the number of charts per row, depending on the width available, to a max of 4.
let chartsPerRow = Math.min(
Math.max(Math.floor(chartsContainerWidth / 550), 1),
MAX_CHARTS_PER_ROW
);
let chartsPerRow = Math.min(Math.max(Math.floor(containerWith / 550), 1), MAX_CHARTS_PER_ROW);
if (allSeriesRecords.length === 1) {
chartsPerRow = 1;
}
@ -81,7 +81,7 @@ export const anomalyDataChange = function (
// Calculate the time range of the charts, which is a function of the chart width and max job bucket span.
data.tooManyBuckets = false;
const chartWidth = Math.floor(chartsContainerWidth / chartsPerRow);
const chartWidth = Math.floor(containerWith / chartsPerRow);
const { chartRange, tooManyBuckets } = calculateChartRange(
seriesConfigs,
selectedEarliestMs,

11
x-pack/plugins/ml/public/application/explorer/swimlane_container.tsx
View file

@ -46,11 +46,11 @@ import { useUiSettings } from '../contexts/kibana';
/**
* Ignore insignificant resize, e.g. browser scrollbar appearance.
*/
const RESIZE_IGNORED_DIFF_PX = 20;
const RESIZE_THROTTLE_TIME_MS = 500;
const CELL_HEIGHT = 30;
const LEGEND_HEIGHT = 34;
const Y_AXIS_HEIGHT = 24;
export const SWIM_LANE_LABEL_WIDTH = 200;
export function isViewBySwimLaneData(arg: any): arg is ViewBySwimLaneData {
return arg && arg.hasOwnProperty('cardinality');
@ -167,12 +167,9 @@ export const SwimlaneContainer: FC<SwimlaneProps> = ({
const resizeHandler = useCallback(
throttle((e: { width: number; height: number }) => {
const labelWidth = 200;
const resultNewWidth = e.width - labelWidth;
if (Math.abs(resultNewWidth - chartWidth) > RESIZE_IGNORED_DIFF_PX) {
setChartWidth(resultNewWidth);
onResize(resultNewWidth);
}
const resultNewWidth = e.width - SWIM_LANE_LABEL_WIDTH;
setChartWidth(resultNewWidth);
onResize(resultNewWidth);
}, RESIZE_THROTTLE_TIME_MS),
[chartWidth]
);