[ML] Single metric viewer: Fix detector/entity selection (#44772)

This fixes switching to another detector on single metric viewer. There is no longer a Refresh button next to the dropdowns, instead the charts will reload when one of the dropdowns (detector or entity selection) changes.

x-pack/legacy/plugins/ml/public/timeseriesexplorer/timeseriesexplorer.js

@@ -22,7 +22,6 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiFormRow,
-  EuiButton,
   EuiSelect,
   EuiSpacer,
   EuiText,
@@ -170,10 +169,14 @@ export class TimeSeriesExplorer extends React.Component {
   detectorIndexChangeHandler = (e) => {
     const id = e.target.value;
     if (id !== undefined) {
-      this.setState({ detectorId: id });
+      this.setState({ detectorId: id }, () => {
+        this.updateControlsForDetector(
+          () => this.loadEntityValues(
+            () => this.saveSeriesPropertiesAndRefresh()
+          )
+        );
+      });
     }
-    this.updateControlsForDetector();
-    this.loadEntityValues();
   };
 
   toggleShowAnnotationsHandler = () => {
@@ -322,7 +325,7 @@ export class TimeSeriesExplorer extends React.Component {
         }
         return stateEntity;
       })
-    }));
+    }), () => this.saveSeriesPropertiesAndRefresh());
   };
 
   loadAnomaliesTableData = (earliestMs, latestMs) => {
@@ -378,7 +381,7 @@ export class TimeSeriesExplorer extends React.Component {
     });
   }
 
-  loadEntityValues = () => {
+  loadEntityValues = (callback = () => {}) => {
     const { timefilter } = this.props;
     const { detectorId, entities, selectedJob } = this.state;
 
@@ -411,7 +414,7 @@ export class TimeSeriesExplorer extends React.Component {
               }
               return entity;
             })
-          });
+          }, callback);
         }
       });
   }
@@ -653,7 +656,7 @@ export class TimeSeriesExplorer extends React.Component {
     });
   }
 
-  updateControlsForDetector = () => {
+  updateControlsForDetector = (callback = () => {}) => {
     const { appStateHandler } = this.props;
     const { detectorId, selectedJob } = this.state;
     // Update the entity dropdown control(s) according to the partitioning fields for the selected detector.
@@ -684,7 +687,7 @@ export class TimeSeriesExplorer extends React.Component {
       entities.push({ fieldName: byFieldName, fieldValue: byFieldValue });
     }
 
-    this.setState({ entities });
+    this.setState({ entities }, callback);
   }
 
   loadForJobId(jobId, jobs) {
@@ -739,16 +742,16 @@ export class TimeSeriesExplorer extends React.Component {
     this.setState(
       { detectorId, detectors, selectedJob },
       () => {
-        this.updateControlsForDetector();
-
-        // Populate the map of jobs / detectors / field formatters for the selected IDs and refresh.
-        mlFieldFormatService.populateFormats([jobId], getIndexPatterns())
-          .catch((err) => { console.log('Error populating field formats:', err); })
+        this.updateControlsForDetector(() => {
+          // Populate the map of jobs / detectors / field formatters for the selected IDs and refresh.
+          mlFieldFormatService.populateFormats([jobId], getIndexPatterns())
+            .catch((err) => { console.log('Error populating field formats:', err); })
           // Load the data - if the FieldFormats failed to populate
           // the default formatting will be used for metric values.
-          .then(() => {
-            this.refresh();
-          });
+            .then(() => {
+              this.refresh();
+            });
+        });
       }
     );
   }
@@ -1024,19 +1027,6 @@ export class TimeSeriesExplorer extends React.Component {
                 />
               );
             })}
-            <EuiFlexItem grow={false}>
-              <EuiFormRow hasEmptyLabelSpace>
-                <EuiButton
-                  fill
-                  iconType="refresh"
-                  onClick={this.saveSeriesPropertiesAndRefresh}
-                >
-                  {i18n.translate('xpack.ml.timeSeriesExplorer.refreshButtonAriaLabel', {
-                    defaultMessage: 'Refresh'
-                  })}
-                </EuiButton>
-              </EuiFormRow>
-            </EuiFlexItem>
             <EuiFlexItem style={{ textAlign: 'right' }}>
               <EuiFormRow hasEmptyLabelSpace style={{ maxWidth: '100%' }}>
                 <ForecastingModal

x-pack/plugins/translations/translations/ja-JP.json

@@ -7183,7 +7183,6 @@
     "xpack.ml.timeSeriesExplorer.loadingLabel": "読み込み中",
     "xpack.ml.timeSeriesExplorer.noResultsFoundLabel": "結果が見つかりませんでした",
     "xpack.ml.timeSeriesExplorer.noSingleMetricJobsFoundLabel": "シングルメトリックジョブが見つかりませんでした",
-    "xpack.ml.timeSeriesExplorer.refreshButtonAriaLabel": "更新",
     "xpack.ml.timeSeriesExplorer.requestedDetectorIndexNotValidWarningMessage": "リクエストされた検知器インデックス {detectorIndex} はジョブ {jobId} に有効ではありません",
     "xpack.ml.timeSeriesExplorer.runControls.durationLabel": "期間",
     "xpack.ml.timeSeriesExplorer.runControls.forecastMaximumLengthHelpText": "予想の長さで、最長 {maximumForecastDurationDays} 日です。秒には s、分には m、時間には h、日には d、週には w を使います。",

x-pack/plugins/translations/translations/zh-CN.json

@@ -7325,7 +7325,6 @@
     "xpack.ml.timeSeriesExplorer.loadingLabel": "正在加载",
     "xpack.ml.timeSeriesExplorer.noResultsFoundLabel": "找不到结果",
     "xpack.ml.timeSeriesExplorer.noSingleMetricJobsFoundLabel": "未找到单指标作业",
-    "xpack.ml.timeSeriesExplorer.refreshButtonAriaLabel": "刷新",
     "xpack.ml.timeSeriesExplorer.requestedDetectorIndexNotValidWarningMessage": "请求的检测工具索引 {detectorIndex} 对于作业 {jobId} 无效",
     "xpack.ml.timeSeriesExplorer.runControls.durationLabel": "持续时间",
     "xpack.ml.timeSeriesExplorer.runControls.forecastMaximumLengthHelpText": "预测时长，最多 {maximumForecastDurationDays} 天。使用 s 表示秒，m 表示分钟，h 表示小时，d 表示天，w 表示周。",