diff --git a/x-pack/plugins/aiops/public/components/explain_log_rate_spikes/explain_log_rate_spikes_app_state.tsx b/x-pack/plugins/aiops/public/components/explain_log_rate_spikes/explain_log_rate_spikes_app_state.tsx
index e3c01c3026c7..56135d4eb7b7 100644
--- a/x-pack/plugins/aiops/public/components/explain_log_rate_spikes/explain_log_rate_spikes_app_state.tsx
+++ b/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} />
diff --git a/x-pack/plugins/ml/public/application/aiops/explain_log_rate_spikes.tsx b/x-pack/plugins/ml/public/application/aiops/explain_log_rate_spikes.tsx
index 7ab537fc26d8..5d9a7fd3a841 100644
--- a/x-pack/plugins/ml/public/application/aiops/explain_log_rate_spikes.tsx
+++ b/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} />
     </>
   );