From ecfbfa72819dd0b3ad0df12fa5fa75498dd31128 Mon Sep 17 00:00:00 2001
From: Walter Rafelsberger <walter@rafelsberger.at>
Date: Thu, 13 Sep 2018 17:31:10 +0200
Subject: [PATCH] [ML] Fix reloading anomaly charts on resize. (#22967)
 (#22995)

- Fixes a regression introduced in #22814. Because of the stricter checking for scope/props updates, resizing the browser window would miss updating the Anomaly Explorer Charts widths. This fixes it by adding a check to trigger anomalyDataChange in redrawOnResize().
- Additionally, if only one chart is up for display, this update makes sure a single chart always spans across the full available width.
---
 ...xplorer_charts_container_service.test.js.snap |  8 ++++----
 .../explorer_charts_container_service.js         | 16 +++++++++++++---
 .../ml/public/explorer/explorer_controller.js    | 10 ++++++++++
 3 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/x-pack/plugins/ml/public/explorer/explorer_charts/__snapshots__/explorer_charts_container_service.test.js.snap b/x-pack/plugins/ml/public/explorer/explorer_charts/__snapshots__/explorer_charts_container_service.test.js.snap
index e7b6cfb8ed9b3..f93ba62f6c04c 100644
--- a/x-pack/plugins/ml/public/explorer/explorer_charts/__snapshots__/explorer_charts_container_service.test.js.snap
+++ b/x-pack/plugins/ml/public/explorer/explorer_charts/__snapshots__/explorer_charts_container_service.test.js.snap
@@ -11,7 +11,7 @@ Object {
 
 exports[`explorerChartsContainerService call anomalyChangeListener with actual series config 2`] = `
 Object {
-  "layoutCellsPerChart": 6,
+  "layoutCellsPerChart": 12,
   "seriesToPlot": Array [
     Object {
       "bucketSpanSeconds": 900,
@@ -71,7 +71,7 @@ Object {
 
 exports[`explorerChartsContainerService call anomalyChangeListener with actual series config 3`] = `
 Object {
-  "layoutCellsPerChart": 6,
+  "layoutCellsPerChart": 12,
   "seriesToPlot": Array [
     Object {
       "bucketSpanSeconds": 900,
@@ -603,8 +603,8 @@ Object {
       "loading": false,
       "metricFieldName": "responsetime",
       "metricFunction": "avg",
-      "plotEarliest": 1486611900000,
-      "plotLatest": 1486714500000,
+      "plotEarliest": 1486560600000,
+      "plotLatest": 1486765800000,
       "selectedEarliest": 1486656000000,
       "selectedLatest": 1486670399999,
       "timeField": "@timestamp",
diff --git a/x-pack/plugins/ml/public/explorer/explorer_charts/explorer_charts_container_service.js b/x-pack/plugins/ml/public/explorer/explorer_charts/explorer_charts_container_service.js
index 26aa4abc302bb..a5adebebbe9f6 100644
--- a/x-pack/plugins/ml/public/explorer/explorer_charts/explorer_charts_container_service.js
+++ b/x-pack/plugins/ml/public/explorer/explorer_charts/explorer_charts_container_service.js
@@ -58,7 +58,10 @@ export function explorerChartsContainerServiceFactory(
     const allSeriesRecords = processRecordsForDisplay(filteredRecords);
     // Calculate the number of charts per row, depending on the width available, to a max of 4.
     const chartsContainerWidth = Math.floor($chartContainer.width());
-    const chartsPerRow = Math.min(Math.max(Math.floor(chartsContainerWidth / 550), 1), MAX_CHARTS_PER_ROW);
+    let chartsPerRow = Math.min(Math.max(Math.floor(chartsContainerWidth / 550), 1), MAX_CHARTS_PER_ROW);
+    if (allSeriesRecords.length === 1) {
+      chartsPerRow = 1;
+    }
 
     data.layoutCellsPerChart = DEFAULT_LAYOUT_CELLS_PER_CHART / chartsPerRow;
 
@@ -71,8 +74,15 @@ export function explorerChartsContainerServiceFactory(
 
     // Calculate the time range of the charts, which is a function of the chart width and max job bucket span.
     data.tooManyBuckets = false;
-    const { chartRange, tooManyBuckets } = calculateChartRange(seriesConfigs, earliestMs, latestMs,
-      Math.floor(chartsContainerWidth / chartsPerRow), recordsToPlot, data.timeFieldName);
+    const chartWidth = Math.floor(chartsContainerWidth / chartsPerRow);
+    const { chartRange, tooManyBuckets } = calculateChartRange(
+      seriesConfigs,
+      earliestMs,
+      latestMs,
+      chartWidth,
+      recordsToPlot,
+      data.timeFieldNam
+    );
     data.tooManyBuckets = tooManyBuckets;
 
     // initialize the charts with loading indicators
diff --git a/x-pack/plugins/ml/public/explorer/explorer_controller.js b/x-pack/plugins/ml/public/explorer/explorer_controller.js
index a3d9ab69fa60a..e7113f411a77f 100644
--- a/x-pack/plugins/ml/public/explorer/explorer_controller.js
+++ b/x-pack/plugins/ml/public/explorer/explorer_controller.js
@@ -305,6 +305,16 @@ module.controller('MlExplorerController', function (
 
     mlExplorerDashboardService.swimlaneDataChange.changed('overall');
     mlExplorerDashboardService.swimlaneDataChange.changed('viewBy');
+
+    if (
+      mlCheckboxShowChartsService.state.get('showCharts') &&
+      $scope.anomalyChartRecords.length > 0
+    ) {
+      const timerange = getSelectionTimeRange($scope.cellData);
+      mlExplorerDashboardService.anomalyDataChange.changed(
+        $scope.anomalyChartRecords, timerange.earliestMs, timerange.latestMs
+      );
+    }
   }
 
   // Refresh the data when the dashboard filters are updated.