From aa2759903099648ed31ce086b21fd05a564cef8b Mon Sep 17 00:00:00 2001
From: Walter Rafelsberger <walter@elastic.co>
Date: Wed, 22 Jan 2020 14:28:28 +0100
Subject: [PATCH] [ML] Fix entity controls update. (#55524)

Fixes an issue where the options in the internal state of the EntityControl component wouldn't update after a prop change. This had the effect that after a job change via the job selector, the entity control dropdown would stay empty.
---
 .../components/entity_control/entity_control.tsx     | 12 +++++++++---
 .../timeseriesexplorer/timeseriesexplorer.js         |  3 ++-
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/x-pack/legacy/plugins/ml/public/application/timeseriesexplorer/components/entity_control/entity_control.tsx b/x-pack/legacy/plugins/ml/public/application/timeseriesexplorer/components/entity_control/entity_control.tsx
index df5412e609a9c9..6727102f55a52d 100644
--- a/x-pack/legacy/plugins/ml/public/application/timeseriesexplorer/components/entity_control/entity_control.tsx
+++ b/x-pack/legacy/plugins/ml/public/application/timeseriesexplorer/components/entity_control/entity_control.tsx
@@ -4,6 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { isEqual } from 'lodash';
 import React, { Component } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
@@ -47,8 +48,8 @@ export class EntityControl extends Component<EntityControlProps, EntityControlSt
   };
 
   componentDidUpdate(prevProps: EntityControlProps) {
-    const { entity, forceSelection, isLoading, options } = this.props;
-    const { selectedOptions } = this.state;
+    const { entity, forceSelection, isLoading, options: propOptions } = this.props;
+    const { options: stateOptions, selectedOptions } = this.state;
 
     const { fieldValue } = entity;
 
@@ -68,11 +69,16 @@ export class EntityControl extends Component<EntityControlProps, EntityControlSt
     if (prevProps.isLoading === true && isLoading === false) {
       this.setState({
         isLoading: false,
-        options,
         selectedOptions: selectedOptionsUpdate,
       });
     }
 
+    if (!isEqual(propOptions, stateOptions)) {
+      this.setState({
+        options: propOptions,
+      });
+    }
+
     if (forceSelection && this.inputRef) {
       this.inputRef.focus();
     }
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 f3d8692bfb3e97..6d918a62d721a3 100644
--- a/x-pack/legacy/plugins/ml/public/application/timeseriesexplorer/timeseriesexplorer.js
+++ b/x-pack/legacy/plugins/ml/public/application/timeseriesexplorer/timeseriesexplorer.js
@@ -94,6 +94,8 @@ function getEntityControlOptions(fieldValues) {
     return [];
   }
 
+  fieldValues.sort();
+
   return fieldValues.map(value => {
     return { label: value };
   });
@@ -163,7 +165,6 @@ export class TimeSeriesExplorer extends React.Component {
     selectedDetectorIndex: PropTypes.number,
     selectedEntities: PropTypes.object,
     selectedForecastId: PropTypes.string,
-    setGlobalState: PropTypes.func.isRequired,
     tableInterval: PropTypes.string,
     tableSeverity: PropTypes.number,
     zoom: PropTypes.object,