From b69e07378a29279d63e7792946916b13bb73b0ad Mon Sep 17 00:00:00 2001
From: Walter Rafelsberger <walter@elastic.co>
Date: Tue, 28 Jan 2020 16:07:31 +0100
Subject: [PATCH] [ML] Single Metric Viewer: Fix annnotations refresh. (#56107)

When creating/editing/deleting an annotation, the Single Metric Viewer page wouldn't update with the applied changes. This fixes it by tracking the change in the outer component with lastRefresh/previousRefresh and making it a condition in contextChartSelected() to trigger an update after a refresh.
---
 .../application/routing/routes/timeseriesexplorer.tsx  |  2 ++
 .../timeseriesexplorer/timeseriesexplorer.js           | 10 +++++++---
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/x-pack/legacy/plugins/ml/public/application/routing/routes/timeseriesexplorer.tsx b/x-pack/legacy/plugins/ml/public/application/routing/routes/timeseriesexplorer.tsx
index bc457f1a3fe89e..4455e6e99ada7e 100644
--- a/x-pack/legacy/plugins/ml/public/application/routing/routes/timeseriesexplorer.tsx
+++ b/x-pack/legacy/plugins/ml/public/application/routing/routes/timeseriesexplorer.tsx
@@ -89,6 +89,7 @@ export const TimeSeriesExplorerUrlStateManager: FC<TimeSeriesExplorerUrlStateMan
   const [appState, setAppState] = useUrlState('_a');
   const [globalState, setGlobalState] = useUrlState('_g');
   const [lastRefresh, setLastRefresh] = useState(0);
+  const previousRefresh = usePrevious(lastRefresh);
   const [selectedJobId, setSelectedJobId] = useState<string>();
 
   const refresh = useRefresh();
@@ -295,6 +296,7 @@ export const TimeSeriesExplorerUrlStateManager: FC<TimeSeriesExplorerUrlStateMan
         bounds,
         dateFormatTz,
         lastRefresh,
+        previousRefresh,
         selectedJobId,
         selectedDetectorIndex,
         selectedEntities,
diff --git a/x-pack/legacy/plugins/ml/public/application/timeseriesexplorer/timeseriesexplorer.js b/x-pack/legacy/plugins/ml/public/application/timeseriesexplorer/timeseriesexplorer.js
index 75815f8bc48a77..a8648082761664 100644
--- a/x-pack/legacy/plugins/ml/public/application/timeseriesexplorer/timeseriesexplorer.js
+++ b/x-pack/legacy/plugins/ml/public/application/timeseriesexplorer/timeseriesexplorer.js
@@ -161,6 +161,7 @@ export class TimeSeriesExplorer extends React.Component {
     bounds: PropTypes.object.isRequired,
     dateFormatTz: PropTypes.string.isRequired,
     lastRefresh: PropTypes.number.isRequired,
+    previousRefresh: PropTypes.number.isRequired,
     selectedJobId: PropTypes.string.isRequired,
     selectedDetectorIndex: PropTypes.number,
     selectedEntities: PropTypes.object,
@@ -319,7 +320,11 @@ export class TimeSeriesExplorer extends React.Component {
       to: selection.to.toISOString(),
     };
 
-    if (isEqual(this.props.zoom, zoomState) && this.state.focusChartData !== undefined) {
+    if (
+      isEqual(this.props.zoom, zoomState) &&
+      this.state.focusChartData !== undefined &&
+      this.props.previousRefresh === this.props.lastRefresh
+    ) {
       return;
     }
 
@@ -1089,13 +1094,12 @@ export class TimeSeriesExplorer extends React.Component {
       this.previousShowAnnotations === showAnnotations &&
       this.previousShowForecast === showForecast &&
       this.previousShowModelBounds === showModelBounds &&
-      this.previousLastRefresh === lastRefresh
+      this.props.previousRefresh === lastRefresh
     ) {
       renderFocusChartOnly = false;
     }
 
     this.previousChartProps = chartProps;
-    this.previousLastRefresh = lastRefresh;
     this.previousShowAnnotations = showAnnotations;
     this.previousShowForecast = showForecast;
     this.previousShowModelBounds = showModelBounds;