[ML] Move showModelBounds from angularjs scope to react state.

elastic · Jul 23, 2019 · 46d7910 · 46d7910
1 parent 663e9b5
commit 46d7910
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 17 deletions.
diff --git a/x-pack/legacy/plugins/ml/public/timeseriesexplorer/timeseriesexplorer.js b/x-pack/legacy/plugins/ml/public/timeseriesexplorer/timeseriesexplorer.js
@@ -48,6 +48,9 @@ const allValuesLabel = i18n.translate('xpack.ml.timeSeriesExplorer.allPartitionV
 function getTimeseriesexplorerDefaultState() {
   return {
     loading: false,
+
+    // Toggles display of model bounds in the focus chart
+    showModelBounds: true,
   };
 }
 
@@ -68,20 +71,24 @@ export const TimeSeriesExplorer = injectI18n(
       showAnnotationsCheckbox: PropTypes.bool.isRequired,
       showForecast: PropTypes.bool.isRequired,
       showForecastCheckbox: PropTypes.bool.isRequired,
-      showModelBounds: PropTypes.bool.isRequired,
       showModelBoundsCheckbox: PropTypes.bool.isRequired,
       selectedJob: PropTypes.object,
       tableData: PropTypes.object,
       timefilter: PropTypes.object.isRequired,
       toggleShowAnnotations: PropTypes.func.isRequired,
       toggleShowForecast: PropTypes.func.isRequired,
-      toggleShowModelBounds: PropTypes.func.isRequired,
     };
 
     state = getTimeseriesexplorerDefaultState();
 
     detectorIndexChangeHandler = (e) => this.props.detectorIndexChanged(e.target.value);
 
+    toggleShowModelBoundsHandler = () => {
+      this.setState({
+        showModelBounds: !this.state.showModelBounds,
+      });
+    }
+
     previousTsc = {};
     previousShowAnnotations = undefined;
     previousShowForecast = undefined;
@@ -104,17 +111,19 @@ export const TimeSeriesExplorer = injectI18n(
         showAnnotationsCheckbox,
         showForecast,
         showForecastCheckbox,
-        showModelBounds,
         showModelBoundsCheckbox,
         selectedJob,
         tableData,
         timefilter,
         toggleShowAnnotations,
         toggleShowForecast,
-        toggleShowModelBounds,
         tsc,
       } = this.props;
 
+      const {
+        showModelBounds,
+      } = this.state;
+
       const loading = this.props.loading || this.state.loading;
 
       if (jobs.length === 0) {
@@ -265,7 +274,7 @@ export const TimeSeriesExplorer = injectI18n(
                         defaultMessage: 'show model bounds',
                       })}
                       checked={showModelBounds}
-                      onChange={toggleShowModelBounds}
+                      onChange={this.toggleShowModelBoundsHandler}
                     />
                   </EuiFlexItem>
                 )}

diff --git a/x-pack/legacy/plugins/ml/public/timeseriesexplorer/timeseriesexplorer_controller.js b/x-pack/legacy/plugins/ml/public/timeseriesexplorer/timeseriesexplorer_controller.js
@@ -80,6 +80,8 @@ uiRoutes
 import { uiModules } from 'ui/modules';
 const module = uiModules.get('apps/ml');
 
+const timeFieldName = 'timestamp';
+
 module.controller('MlTimeSeriesExplorerController', function (
   $injector,
   $scope,
@@ -93,7 +95,6 @@ module.controller('MlTimeSeriesExplorerController', function (
   $injector.get('mlSelectSeverityService');
   const mlJobSelectService = $injector.get('mlJobSelectService');
 
-  $scope.timeFieldName = 'timestamp';
   timefilter.enableTimeRangeSelector();
   timefilter.enableAutoRefreshSelector();
   $scope.timefilter = timefilter;
@@ -111,7 +112,6 @@ module.controller('MlTimeSeriesExplorerController', function (
   $scope.anomalyRecords = [];
 
   $scope.modelPlotEnabled = false;
-  $scope.showModelBounds = true;            // Toggles display of model bounds in the focus chart
   $scope.showModelBoundsCheckbox = false;
   $scope.showAnnotations = mlAnnotationsEnabled;// Toggles display of annotations in the focus chart
   $scope.showAnnotationsCheckbox = mlAnnotationsEnabled;
@@ -431,7 +431,7 @@ module.controller('MlTimeSeriesExplorerController', function (
         refreshFocusData.focusChartData = processDataForFocusAnomalies(
           refreshFocusData.focusChartData,
           refreshFocusData.anomalyRecords,
-          $scope.timeFieldName,
+          timeFieldName,
           $scope.focusAggregationInterval,
           $scope.modelPlotEnabled);
 
@@ -496,7 +496,7 @@ module.controller('MlTimeSeriesExplorerController', function (
     ).then((resp) => {
       // Sort in descending time order before storing in scope.
       refreshFocusData.anomalyRecords = _.chain(resp.records)
-        .sortBy(record => record[$scope.timeFieldName])
+        .sortBy(record => record[timeFieldName])
         .reverse()
         .value();
       console.log('Time series explorer anomalies:', refreshFocusData.anomalyRecords);
@@ -673,12 +673,6 @@ module.controller('MlTimeSeriesExplorerController', function (
     $scope.$applyAsync();
   };
 
-  $scope.toggleShowModelBounds = function () {
-    $timeout(() => {
-      $scope.showModelBounds = !$scope.showModelBounds;
-    }, 0);
-  };
-
   if (mlAnnotationsEnabled) {
     $scope.toggleShowAnnotations = function () {
       $timeout(() => {

diff --git a/x-pack/legacy/plugins/ml/public/timeseriesexplorer/timeseriesexplorer_utils.js b/x-pack/legacy/plugins/ml/public/timeseriesexplorer/timeseriesexplorer_utils.js
@@ -50,14 +50,12 @@ export function mapScopeToProps(scope) {
     showAnnotationsCheckbox: scope.showAnnotationsCheckbox,
     showForecast: scope.showForecast,
     showForecastCheckbox: scope.showForecastCheckbox,
-    showModelBounds: scope.showModelBounds,
     showModelBoundsCheckbox: scope.showModelBoundsCheckbox,
     selectedJob: scope.selectedJob,
     tableData: scope.tableData,
     timefilter: scope.timefilter,
     toggleShowAnnotations: scope.toggleShowAnnotations,
     toggleShowForecast: scope.toggleShowForecast,
-    toggleShowModelBounds: scope.toggleShowModelBounds,
 
     // time series chart
     tsc: {