[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.

Author: walterra

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();
     }

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,