[ML] Fix no results behavior.

elastic · Aug 2, 2022 · 4369802 · 4369802
1 parent 89148e3
commit 4369802
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 7 deletions.
diff --git a/...gins/aiops/public/components/explain_log_rate_spikes/explain_log_rate_spikes_analysis.tsx b/...gins/aiops/public/components/explain_log_rate_spikes/explain_log_rate_spikes_analysis.tsx
@@ -7,10 +7,13 @@
 
 import React, { useEffect, FC } from 'react';
 
+import { EuiEmptyPrompt } from '@elastic/eui';
+
 import type { DataView } from '@kbn/data-views-plugin/public';
 import { ProgressControls } from '@kbn/aiops-components';
 import { useFetchStream } from '@kbn/aiops-utils';
 import type { WindowParameters } from '@kbn/aiops-utils';
+import { FormattedMessage } from '@kbn/i18n-react';
 import type { ChangePoint } from '@kbn/ml-agg-utils';
 import type { Query } from '@kbn/es-query';
 
@@ -85,6 +88,8 @@ export const ExplainLogRateSpikesAnalysis: FC<ExplainLogRateSpikesAnalysisProps>
     start();
   }
 
+  const showSpikeAnalysisTable = data?.changePoints.length > 0;
+
   return (
     <>
       <ProgressControls
@@ -94,7 +99,28 @@ export const ExplainLogRateSpikesAnalysis: FC<ExplainLogRateSpikesAnalysisProps>
         onRefresh={startHandler}
         onCancel={cancel}
       />
-      {data?.changePoints ? (
+      {!isRunning && !showSpikeAnalysisTable && (
+        <EuiEmptyPrompt
+          title={
+            <h2>
+              <FormattedMessage
+                id="xpack.aiops.explainLogRateSpikesPage.noResultsPromptTitle"
+                defaultMessage="The analysis did not return any results."
+              />
+            </h2>
+          }
+          titleSize="xs"
+          body={
+            <p>
+              <FormattedMessage
+                id="xpack.aiops.explainLogRateSpikesPage.noResultsPromptBody"
+                defaultMessage="Try to adjust the baseline and deviation time ranges and rerun the analysis. If you still get no results, there might be no statistically significant entities contributing to this spike in log rates."
+              />
+            </p>
+          }
+        />
+      )}
+      {showSpikeAnalysisTable && (
         <SpikeAnalysisTable
           changePoints={data.changePoints}
           loading={isRunning}
@@ -103,7 +129,7 @@ export const ExplainLogRateSpikesAnalysis: FC<ExplainLogRateSpikesAnalysisProps>
           onSelectedChangePoint={onSelectedChangePoint}
           selectedChangePoint={selectedChangePoint}
         />
-      ) : null}
+      )}
     </>
   );
 };
diff --git a/x-pack/plugins/aiops/public/components/spike_analysis_table/spike_analysis_table.tsx b/x-pack/plugins/aiops/public/components/spike_analysis_table/spike_analysis_table.tsx
@@ -29,9 +29,6 @@ import { getFailedTransactionsCorrelationImpactLabel } from './get_failed_transa
 const NARROW_COLUMN_WIDTH = '120px';
 
 const PAGINATION_SIZE_OPTIONS = [5, 10, 20, 50];
-const noDataText = i18n.translate('xpack.aiops.correlations.correlationsTable.noDataText', {
-  defaultMessage: 'No data',
-});
 const DEFAULT_SORT_FIELD = 'pValue';
 const DEFAULT_SORT_DIRECTION = 'asc';
 
@@ -206,15 +203,21 @@ export const SpikeAnalysisTable: FC<SpikeAnalysisTableProps> = ({
     };
   }, [pageIndex, pageSize, sortField, sortDirection, changePoints]);
 
+  // Don't pass on the `loading` state to the table itself because
+  // it disables hovering events. Because the mini histograms take a while
+  // to load, hovering would not update the main chart. Instead,
+  // the loading state is shown by the progress bar on the outer component level.
+  // The outer component also will display a prompt when no data was returned
+  // running the analysis and will hide this table.
+
   return (
     <EuiBasicTable
       compressed
       columns={columns}
       items={pageOfItems}
-      noItemsMessage={noDataText}
       onChange={onChange}
       pagination={pagination}
-      loading={loading}
+      loading={false}
       error={error}
       sorting={sorting as EuiTableSortingType<ChangePoint>}
       rowProps={(changePoint) => {