diff --git a/x-pack/legacy/plugins/ml/public/timeseriesexplorer/timeseriesexplorer.js b/x-pack/legacy/plugins/ml/public/timeseriesexplorer/timeseriesexplorer.js index 974d6e5a60f6031..5c0add52c0fc9bd 100644 --- 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} /> )} diff --git a/x-pack/legacy/plugins/ml/public/timeseriesexplorer/timeseriesexplorer_controller.js b/x-pack/legacy/plugins/ml/public/timeseriesexplorer/timeseriesexplorer_controller.js index 3b1ed143b3bef04..d1bf096014b3f23 100644 --- 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 index f28155d67a1b997..9c77e3d24b96b0c 100644 --- 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: {