diff --git a/x-pack/plugins/aiops/public/components/explain_log_rate_spikes/explain_log_rate_spikes_analysis.tsx b/x-pack/plugins/aiops/public/components/explain_log_rate_spikes/explain_log_rate_spikes_analysis.tsx index 6bd060577a425..6dfa853fe3723 100644 --- a/x-pack/plugins/aiops/public/components/explain_log_rate_spikes/explain_log_rate_spikes_analysis.tsx +++ b/x-pack/plugins/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 start(); } + const showSpikeAnalysisTable = data?.changePoints.length > 0; + return ( <> onRefresh={startHandler} onCancel={cancel} /> - {data?.changePoints ? ( + {!isRunning && !showSpikeAnalysisTable && ( + + + + } + titleSize="xs" + body={ +

+ +

+ } + /> + )} + {showSpikeAnalysisTable && ( 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 index 7bb8049fe4dd1..850bb801ceffb 100644 --- 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 = ({ }; }, [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 ( } rowProps={(changePoint) => { diff --git a/x-pack/plugins/aiops/server/routes/explain_log_rate_spikes.ts b/x-pack/plugins/aiops/server/routes/explain_log_rate_spikes.ts index cb0911e1c53be..2f8a3a314ecd3 100644 --- a/x-pack/plugins/aiops/server/routes/explain_log_rate_spikes.ts +++ b/x-pack/plugins/aiops/server/routes/explain_log_rate_spikes.ts @@ -75,6 +75,23 @@ export const defineExplainLogRateSpikesRoute = ( logger ); + function endWithUpdatedLoadingState() { + push( + updateLoadingStateAction({ + ccsWarning: false, + loaded: 1, + loadingState: i18n.translate( + 'xpack.aiops.explainLogRateSpikes.loadingState.doneMessage', + { + defaultMessage: 'Done.', + } + ), + }) + ); + + end(); + } + // Async IIFE to run the analysis while not blocking returning `responseWithHeaders`. (async () => { push(resetAction()); @@ -100,11 +117,7 @@ export const defineExplainLogRateSpikesRoute = ( return; } - if (fieldCandidates.length > 0) { - loaded += LOADED_FIELD_CANDIDATES; - } else { - loaded = 1; - } + loaded += LOADED_FIELD_CANDIDATES; push( updateLoadingStateAction({ @@ -123,7 +136,9 @@ export const defineExplainLogRateSpikesRoute = ( }) ); - if (shouldStop || fieldCandidates.length === 0) { + if (fieldCandidates.length === 0) { + endWithUpdatedLoadingState(); + } else if (shouldStop) { end(); return; } @@ -179,7 +194,7 @@ export const defineExplainLogRateSpikesRoute = ( } if (changePoints?.length === 0) { - end(); + endWithUpdatedLoadingState(); return; } @@ -274,20 +289,7 @@ export const defineExplainLogRateSpikesRoute = ( }); } - push( - updateLoadingStateAction({ - ccsWarning: false, - loaded: 1, - loadingState: i18n.translate( - 'xpack.aiops.explainLogRateSpikes.loadingState.doneMessage', - { - defaultMessage: 'Done.', - } - ), - }) - ); - - end(); + endWithUpdatedLoadingState(); })(); return response.ok(responseWithHeaders);