[ML] Fix loading forecasts from anomaly job list. (#41034)

Fixes a bug where opening a forecast from the anomaly jobs list several times would not show the forecast.
The bug was caused because the observable mlJobSelectService was triggered on mounting the mlJobSelectorReactWrapper to pass on the currently selected job. However, because this directive is a child of MlTimeSeriesExplorerController it would do this check only after this controller is already initialized but also need the current jobs. The result was that the controller would receive first the out-of-date jobs and only then the new job ids. The second trigger unsets the forecast, because it's expected to only be triggered multiple times by the job selector.
The fix introduced here solves the problem by triggered the observable directly from mlJobSelectService, because the service is only set up once in contrast to a directive. globalState offers some listeners which can be used to trigger callbacks on certain events within globalState. We can use save_with_changes to subscribe to updates when globalState.save() gets called.

x-pack/legacy/plugins/ml/public/components/job_selector/job_selector_react_wrapper_directive.js

@@ -18,16 +18,10 @@ import { BehaviorSubject } from 'rxjs';
 import { uiModules } from 'ui/modules';
 const module = uiModules.get('apps/ml');
 
-
 module
   .directive('mlJobSelectorReactWrapper', function (globalState, config, mlJobSelectService) {
     function link(scope, element, attrs) {
       const { jobIds, selectedGroups } = getSelectedJobIds(globalState);
-      const oldSelectedJobIds = mlJobSelectService.getValue().selection;
-
-      if (jobIds && !(_.isEqual(oldSelectedJobIds, jobIds))) {
-        mlJobSelectService.next({ selection: jobIds, groups: selectedGroups });
-      }
 
       const props = {
         config,
@@ -56,5 +50,18 @@ module
   })
   .service('mlJobSelectService', function (globalState) {
     const { jobIds, selectedGroups } = getSelectedJobIds(globalState);
-    return new BehaviorSubject({ selection: jobIds, groups: selectedGroups, resetSelection: false });
+    const mlJobSelectService = new BehaviorSubject({ selection: jobIds, groups: selectedGroups, resetSelection: false });
+
+    // Subscribe to changes to globalState and trigger
+    // a mlJobSelectService update if the job selection changed.
+    globalState.on('save_with_changes', () => {
+      const { newJobIds, newSelectedGroups } = getSelectedJobIds(globalState);
+      const oldSelectedJobIds = mlJobSelectService.getValue().selection;
+
+      if (newJobIds && !(_.isEqual(oldSelectedJobIds, newJobIds))) {
+        mlJobSelectService.next({ selection: newJobIds, groups: newSelectedGroups });
+      }
+    });
+
+    return mlJobSelectService;
   });