[ML] Add toast notification for SMV

elastic · Sep 1, 2020 · 0176c59 · 0176c59
1 parent ff450a5
commit 0176c59
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 6 deletions.
diff --git a/x-pack/plugins/ml/public/application/routing/routes/explorer.tsx b/x-pack/plugins/ml/public/application/routing/routes/explorer.tsx
@@ -100,9 +100,9 @@ const ExplorerUrlStateManager: FC<ExplorerUrlStateManagerProps> = ({ jobsWithTim
     if (globalState?.time !== undefined) {
       if (!validateTimeRange(globalState.time)) {
         setInValidTimeRangeError(
-          i18n.translate('invalidTimeRangeInUrlCallout', {
+          i18n.translate('xpack.ml.explorer.invalidTimeRangeInUrlCallout', {
             defaultMessage:
-              "The time filter changed to the full range for this job due to invalid default time filter '{from}' - '{to}'. Please check the advanced settings.",
+              "The time filter changed to the full range for this job due to invalid default time filter from '{from}' to '{to}'. Please check the advanced settings.",
             values: {
               from: globalState.time.from,
               to: globalState.time.to,

diff --git a/x-pack/plugins/ml/public/application/routing/routes/timeseriesexplorer.tsx b/x-pack/plugins/ml/public/application/routing/routes/timeseriesexplorer.tsx
@@ -38,6 +38,7 @@ import { useResolver } from '../use_resolver';
 import { basicResolvers } from '../resolvers';
 import { getBreadcrumbWithUrlForApp } from '../breadcrumbs';
 import { useTimefilter } from '../../contexts/kibana';
+import { validateTimeRange } from '../../..';
 
 export const timeSeriesExplorerRouteFactory = (navigateToPath: NavigateToPath): MlRoute => ({
   path: '/timeseriesexplorer',
@@ -91,6 +92,7 @@ export const TimeSeriesExplorerUrlStateManager: FC<TimeSeriesExplorerUrlStateMan
   const previousRefresh = usePrevious(lastRefresh);
   const [selectedJobId, setSelectedJobId] = useState<string>();
   const timefilter = useTimefilter({ timeRangeSelector: true, autoRefreshSelector: true });
+  const [invalidTimeRangeError, setInValidTimeRangeError] = useState<string | undefined>();
 
   const refresh = useRefresh();
   useEffect(() => {
@@ -114,10 +116,23 @@ export const TimeSeriesExplorerUrlStateManager: FC<TimeSeriesExplorerUrlStateMan
   const [bounds, setBounds] = useState<TimeRangeBounds | undefined>(undefined);
   useEffect(() => {
     if (globalState?.time !== undefined) {
-      timefilter.setTime({
-        from: globalState.time.from,
-        to: globalState.time.to,
-      });
+      if (!validateTimeRange(globalState.time)) {
+        setInValidTimeRangeError(
+          i18n.translate('xpack.ml.timeSeriesExplorer.invalidTimeRangeInUrlCallout', {
+            defaultMessage:
+              "The time filter changed to the full range for this job due to invalid default time filter from '{from}' to '{to}'. Please check the advanced settings.",
+            values: {
+              from: globalState.time.from,
+              to: globalState.time.to,
+            },
+          })
+        );
+      } else {
+        timefilter.setTime({
+          from: globalState.time.from,
+          to: globalState.time.to,
+        });
+      }
 
       const timefilterBounds = timefilter.getBounds();
       // Only if both min/max bounds are valid moment times set the bounds.
@@ -300,6 +315,7 @@ export const TimeSeriesExplorerUrlStateManager: FC<TimeSeriesExplorerUrlStateMan
         tableSeverity: tableSeverity.val,
         timefilter,
         zoom: zoomProp,
+        invalidTimeRangeError,
       }}
     />
   );

diff --git a/x-pack/plugins/ml/public/application/timeseriesexplorer/timeseriesexplorer.js b/x-pack/plugins/ml/public/application/timeseriesexplorer/timeseriesexplorer.js
@@ -833,6 +833,14 @@ export class TimeSeriesExplorer extends React.Component {
   }
 
   componentDidMount() {
+    // if timeRange used in the url is incorrect
+    // perhaps due to user's advanced setting using incorrect date-maths
+    const { invalidTimeRangeError } = this.props;
+    if (invalidTimeRangeError) {
+      const toastNotifications = getToastNotifications();
+      toastNotifications.addWarning(invalidTimeRangeError);
+    }
+
     // Required to redraw the time series chart when the container is resized.
     this.resizeChecker = new ResizeChecker(this.resizeRef.current);
     this.resizeChecker.on('resize', () => {