[ML] Fix check for time field based data view. (#137784)

Fixes the check to allow only data views with time fields for the Explain Log Rate Spikes UI. Previously the check was done on an outer component and didn't reach the component that would display an error message, the user ended up with an empty page. Instead of a non-working UI and an error message in a toast, this now hides the entire UI and just displays an error callout component.

x-pack/plugins/aiops/public/components/explain_log_rate_spikes/explain_log_rate_spikes_app_state.tsx

@@ -5,15 +5,18 @@
  * 2.0.
  */
 
-import React, { FC, useCallback, useEffect } from 'react';
-import { Filter, Query } from '@kbn/es-query';
-import { i18n } from '@kbn/i18n';
+import React, { FC, useCallback } from 'react';
 import { parse, stringify } from 'query-string';
 import { isEqual } from 'lodash';
 import { encode } from 'rison-node';
 import { useHistory, useLocation } from 'react-router-dom';
-import { SavedSearch } from '@kbn/discover-plugin/public';
 
+import { EuiCallOut } from '@elastic/eui';
+
+import type { Filter, Query } from '@kbn/es-query';
+import { i18n } from '@kbn/i18n';
+
+import type { SavedSearch } from '@kbn/discover-plugin/public';
 import type { DataView } from '@kbn/data-views-plugin/public';
 
 import {
@@ -21,7 +24,6 @@ import {
   SearchQueryLanguage,
   SavedSearchSavedObject,
 } from '../../application/utils/search_utils';
-import { useAiOpsKibana } from '../../kibana_context';
 import {
   Accessor,
   Dictionary,
@@ -68,30 +70,9 @@ export const ExplainLogRateSpikesAppState: FC<ExplainLogRateSpikesAppStateProps>
   dataView,
   savedSearch,
 }) => {
-  const { services } = useAiOpsKibana();
-  const { notifications } = services;
-  const { toasts } = notifications;
-
   const history = useHistory();
   const { search: urlSearchString } = useLocation();
 
-  useEffect(() => {
-    if (!dataView.isTimeBased()) {
-      toasts.addWarning({
-        title: i18n.translate('xpack.aiops.index.dataViewNotBasedOnTimeSeriesNotificationTitle', {
-          defaultMessage: 'The data view {dataViewTitle} is not based on a time series',
-          values: { dataViewTitle: dataView.title },
-        }),
-        text: i18n.translate(
-          'xpack.aiops.index.dataViewNotBasedOnTimeSeriesNotificationDescription',
-          {
-            defaultMessage: 'Log rate spike analysis only runs over time-based indices',
-          }
-        ),
-      });
-    }
-  }, [dataView, toasts]);
-
   const setUrlState: SetUrlState = useCallback(
     (
       accessor: Accessor,
@@ -156,6 +137,25 @@ export const ExplainLogRateSpikesAppState: FC<ExplainLogRateSpikesAppStateProps>
 
   if (!dataView) return null;
 
+  if (!dataView.isTimeBased()) {
+    return (
+      <EuiCallOut
+        title={i18n.translate('xpack.aiops.index.dataViewNotBasedOnTimeSeriesNotificationTitle', {
+          defaultMessage: 'The data view "{dataViewTitle}" is not based on a time series.',
+          values: { dataViewTitle: dataView.getName() },
+        })}
+        color="danger"
+        iconType="alert"
+      >
+        <p>
+          {i18n.translate('xpack.aiops.index.dataViewNotBasedOnTimeSeriesNotificationDescription', {
+            defaultMessage: 'Log rate spike analysis only runs over time-based indices.',
+          })}
+        </p>
+      </EuiCallOut>
+    );
+  }
+
   return (
     <UrlStateContextProvider value={{ searchString: urlSearchString, setUrlState }}>
       <ExplainLogRateSpikesPage dataView={dataView} savedSearch={savedSearch} />

x-pack/plugins/ml/public/application/aiops/explain_log_rate_spikes.tsx

@@ -43,9 +43,7 @@ export const ExplainLogRateSpikesPage: FC = () => {
           </EuiFlexItem>
         </EuiFlexGroup>
       </MlPageHeader>
-      {dataView.timeFieldName && (
-        <ExplainLogRateSpikes dataView={dataView} savedSearch={savedSearch} />
-      )}
+      {dataView && <ExplainLogRateSpikes dataView={dataView} savedSearch={savedSearch} />}
       <HelpMenu docLink={docLinks.links.ml.guide} />
     </>
   );