From d785346ebe0d7025c5280d61501842700133b3ce Mon Sep 17 00:00:00 2001 From: Walter Rafelsberger Date: Thu, 5 Sep 2019 15:11:07 +0200 Subject: [PATCH 1/2] [ML] Fixes 'soft' refresh. --- .../_timeseriesexplorer.scss | 6 +++ .../timeseriesexplorer/timeseriesexplorer.js | 43 ++++++++++++------- 2 files changed, 34 insertions(+), 15 deletions(-) diff --git a/x-pack/legacy/plugins/ml/public/timeseriesexplorer/_timeseriesexplorer.scss b/x-pack/legacy/plugins/ml/public/timeseriesexplorer/_timeseriesexplorer.scss index f4366ec13fda3f..631ab501e66849 100644 --- a/x-pack/legacy/plugins/ml/public/timeseriesexplorer/_timeseriesexplorer.scss +++ b/x-pack/legacy/plugins/ml/public/timeseriesexplorer/_timeseriesexplorer.scss @@ -333,3 +333,9 @@ } } } + +/* Hides the progress bar's background so it doesn't look like it increases the thickness + of the horizontal bar below the tab menu elements in its inactive state. */ +.mlTimeSeriesExplorerProgress { background-color: $euiColorEmptyShade; } +.mlTimeSeriesExplorerProgress::-moz-progress-bar { background-color: $euiColorEmptyShade; } +.mlTimeSeriesExplorerProgress::-webkit-progress-bar { background-color: $euiColorEmptyShade; } diff --git a/x-pack/legacy/plugins/ml/public/timeseriesexplorer/timeseriesexplorer.js b/x-pack/legacy/plugins/ml/public/timeseriesexplorer/timeseriesexplorer.js index db316f67688fe9..effa3ac8bc23b3 100644 --- a/x-pack/legacy/plugins/ml/public/timeseriesexplorer/timeseriesexplorer.js +++ b/x-pack/legacy/plugins/ml/public/timeseriesexplorer/timeseriesexplorer.js @@ -22,6 +22,7 @@ import { EuiFlexGroup, EuiFlexItem, EuiFormRow, + EuiProgress, EuiSelect, EuiSpacer, EuiText, @@ -103,6 +104,7 @@ function getTimeseriesexplorerDefaultState() { focusAnnotationData: [], focusChartData: undefined, focusForecastData: undefined, + fullRefresh: true, hasResults: false, jobs: [], // Counter to keep track of what data sets have been loaded. @@ -127,9 +129,14 @@ function getTimeseriesexplorerDefaultState() { }; } -const TimeSeriesExplorerPage = ({ children, jobSelectorProps, resizeRef }) => ( +const TimeSeriesExplorerPage = ({ children, jobSelectorProps, loading, resizeRef }) => ( + {/* Show animated progress bar while loading */} + {loading && ()} + {/* Show a progress bar with progress 0% when not loading. + If we'd just show no progress bar when not loading it would result in a flickering height effect. */} + {!loading && ()}
{children} @@ -466,7 +473,7 @@ export class TimeSeriesExplorer extends React.Component { }); } - refresh = () => { + refresh = (fullRefresh = true) => { const { appStateHandler, timefilter } = this.props; const { detectorId: currentDetectorId, @@ -481,17 +488,22 @@ export class TimeSeriesExplorer extends React.Component { this.contextChartSelectedInitCallDone = false; + // Only when `fullRefresh` is true we'll reset all data + // and show the loading spinner within the page. this.setState({ - chartDetails: undefined, - contextChartData: undefined, - contextForecastData: undefined, - focusChartData: undefined, - focusForecastData: undefined, + fullRefresh, loadCounter: currentLoadCounter + 1, loading: true, - modelPlotEnabled: isModelPlotEnabled(currentSelectedJob, +currentDetectorId, currentEntities), - hasResults: false, - dataNotChartable: false + ...(fullRefresh ? { + chartDetails: undefined, + contextChartData: undefined, + contextForecastData: undefined, + focusChartData: undefined, + focusForecastData: undefined, + modelPlotEnabled: isModelPlotEnabled(currentSelectedJob, +currentDetectorId, currentEntities), + hasResults: false, + dataNotChartable: false + } : {}), }, () => { const { detectorId, entities, loadCounter, jobs, modelPlotEnabled, selectedJob } = this.state; const detectorIndex = +detectorId; @@ -793,7 +805,7 @@ export class TimeSeriesExplorer extends React.Component { this.subscriptions.add(annotationsRefresh$.subscribe(this.refresh)); this.subscriptions.add(interval$.subscribe(tableControlsListener)); this.subscriptions.add(severity$.subscribe(tableControlsListener)); - this.subscriptions.add(mlTimefilterRefresh$.subscribe(this.refresh)); + this.subscriptions.add(mlTimefilterRefresh$.subscribe(() => this.refresh(false))); // Listen for changes to job selection. this.subscriptions.add(this.jobSelectService.subscribe(({ selection: selectedJobIds }) => { @@ -923,6 +935,7 @@ export class TimeSeriesExplorer extends React.Component { focusAnnotationData, focusChartData, focusForecastData, + fullRefresh, hasResults, jobs, loading, @@ -1001,7 +1014,7 @@ export class TimeSeriesExplorer extends React.Component { this.previousShowModelBounds = showModelBounds; return ( - +
@@ -1041,7 +1054,7 @@ export class TimeSeriesExplorer extends React.Component {
- {(loading === true) && ( + {(fullRefresh && loading === true) && ( )} - {(jobs.length > 0 && loading === false && hasResults === false) && ( + {(jobs.length > 0 && (fullRefresh === false || loading === false) && hasResults === false) && ( )} - {(jobs.length > 0 && loading === false && hasResults === true) && ( + {(jobs.length > 0 && (fullRefresh === false || loading === false) && hasResults === true) && ( {i18n.translate('xpack.ml.timeSeriesExplorer.singleTimeSeriesAnalysisTitle', { From 8987ad07a253e460c04e71d237a2bb5c4132440b Mon Sep 17 00:00:00 2001 From: Walter Rafelsberger Date: Sat, 7 Sep 2019 16:03:17 +0200 Subject: [PATCH 2/2] [ML] Tweak SCSS. --- .../public/timeseriesexplorer/_timeseriesexplorer.scss | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/x-pack/legacy/plugins/ml/public/timeseriesexplorer/_timeseriesexplorer.scss b/x-pack/legacy/plugins/ml/public/timeseriesexplorer/_timeseriesexplorer.scss index 631ab501e66849..aa172cf000d5fb 100644 --- a/x-pack/legacy/plugins/ml/public/timeseriesexplorer/_timeseriesexplorer.scss +++ b/x-pack/legacy/plugins/ml/public/timeseriesexplorer/_timeseriesexplorer.scss @@ -336,6 +336,9 @@ /* Hides the progress bar's background so it doesn't look like it increases the thickness of the horizontal bar below the tab menu elements in its inactive state. */ -.mlTimeSeriesExplorerProgress { background-color: $euiColorEmptyShade; } -.mlTimeSeriesExplorerProgress::-moz-progress-bar { background-color: $euiColorEmptyShade; } -.mlTimeSeriesExplorerProgress::-webkit-progress-bar { background-color: $euiColorEmptyShade; } +.mlTimeSeriesExplorerProgress { + background-color: $euiColorEmptyShade; + &::-moz-progress-bar, &::-webkit-progress-bar { + background-color: $euiColorEmptyShade; + } +}