move analysis table and progress to separate component

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

@@ -18,24 +18,20 @@ import {
 } 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 { Filter, Query } from '@kbn/es-query';
 import { SavedSearch } from '@kbn/discover-plugin/public';
 
 import { useAiOpsKibana } from '../../kibana_context';
-import { initialState, streamReducer } from '../../../common/api/stream_reducer';
-import type { ApiExplainLogRateSpikes } from '../../../common/api';
 import { SearchQueryLanguage, SavedSearchSavedObject } from '../../application/utils/search_utils';
 import { useUrlState, usePageUrlState, AppStateKey } from '../../hooks/url_state';
 import { useData } from '../../hooks/use_data';
-import { SpikeAnalysisTable } from '../spike_analysis_table';
 import { restorableDefaults } from './explain_log_rate_spikes_wrapper';
 import { FullTimeRangeSelector } from '../full_time_range_selector';
 import { DocumentCountContent } from '../document_count_content/document_count_content';
 import { DatePickerWrapper } from '../date_picker_wrapper';
 import { SearchPanel } from '../search_panel';
+import { ExplainLogRateSpikesAnalysis } from './explain_log_rate_spikes_analysis';
 
 /**
  * ExplainLogRateSpikes props require a data view.
@@ -49,8 +45,7 @@ interface ExplainLogRateSpikesProps {
 
 export const ExplainLogRateSpikes: FC<ExplainLogRateSpikesProps> = ({ dataView, savedSearch }) => {
   const { services } = useAiOpsKibana();
-  const { http, data: dataService } = services;
-  const basePath = http?.basePath.get() ?? '';
+  const { data: dataService } = services;
 
   const [aiopsListState, setAiopsListState] = usePageUrlState(AppStateKey, restorableDefaults);
   const [globalState, setGlobalState] = useUrlState('_g');
@@ -116,31 +111,6 @@ export const ExplainLogRateSpikes: FC<ExplainLogRateSpikesProps> = ({ dataView,
     });
   }, [dataService, searchQueryLanguage, searchString]);
 
-  const { cancel, start, data, isRunning, error } = useFetchStream<
-    ApiExplainLogRateSpikes,
-    typeof basePath
-  >(
-    `${basePath}/internal/aiops/explain_log_rate_spikes`,
-    {
-      // @ts-ignore unexpected type
-      start: earliest,
-      // @ts-ignore unexpected type
-      end: latest,
-      // TODO Consider an optional Kuery.
-      kuery: '',
-      // TODO Handle data view without time fields.
-      timeFieldName: dataView.timeFieldName ?? '',
-      index: dataView.title,
-      ...windowParameters,
-    },
-    { reducer: streamReducer, initialState }
-  );
-
-  useEffect(() => {
-    start();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
   return (
     <>
       <EuiFlexGroup gutterSize="m">
@@ -201,20 +171,12 @@ export const ExplainLogRateSpikes: FC<ExplainLogRateSpikesProps> = ({ dataView,
           <EuiSpacer size="m" />
           {earliest !== undefined && latest !== undefined && windowParameters !== undefined && (
             <EuiFlexItem>
-              <ProgressControls
-                progress={data.loaded}
-                progressMessage={data.loadingState ?? ''}
-                isRunning={isRunning}
-                onRefresh={start}
-                onCancel={cancel}
+              <ExplainLogRateSpikesAnalysis
+                dataView={dataView}
+                earliest={earliest}
+                latest={latest}
+                windowParameters={windowParameters}
               />
-              {data?.changePoints ? (
-                <SpikeAnalysisTable
-                  changePointData={data.changePoints}
-                  loading={isRunning}
-                  error={error}
-                />
-              ) : null}
             </EuiFlexItem>
           )}
         </EuiFlexGroup>

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

@@ -0,0 +1,79 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { useEffect, FC } from 'react';
+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 { useAiOpsKibana } from '../../kibana_context';
+import { initialState, streamReducer } from '../../../common/api/stream_reducer';
+import type { ApiExplainLogRateSpikes } from '../../../common/api';
+
+import { SpikeAnalysisTable } from '../spike_analysis_table';
+
+/**
+ * ExplainLogRateSpikes props require a data view.
+ */
+interface ExplainLogRateSpikesAnalysisProps {
+  /** The data view to analyze. */
+  dataView: DataView;
+  /** Start timestamp filter */
+  earliest: number;
+  /** End timestamp filter */
+  latest: number;
+  /** Window parameters for the analysis */
+  windowParameters: WindowParameters;
+}
+
+export const ExplainLogRateSpikesAnalysis: FC<ExplainLogRateSpikesAnalysisProps> = ({
+  dataView,
+  earliest,
+  latest,
+  windowParameters,
+}) => {
+  const { services } = useAiOpsKibana();
+  const basePath = services.http?.basePath.get() ?? '';
+
+  const { cancel, start, data, isRunning, error } = useFetchStream<
+    ApiExplainLogRateSpikes,
+    typeof basePath
+  >(
+    `${basePath}/internal/aiops/explain_log_rate_spikes`,
+    {
+      start: earliest,
+      end: latest,
+      // TODO Consider an optional Kuery.
+      kuery: '',
+      // TODO Handle data view without time fields.
+      timeFieldName: dataView.timeFieldName ?? '',
+      index: dataView.title,
+      ...windowParameters,
+    },
+    { reducer: streamReducer, initialState }
+  );
+  useEffect(() => {
+    start();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <>
+      <ProgressControls
+        progress={data.loaded}
+        progressMessage={data.loadingState ?? ''}
+        isRunning={isRunning}
+        onRefresh={start}
+        onCancel={cancel}
+      />
+      {data?.changePoints ? (
+        <SpikeAnalysisTable changePointData={data.changePoints} loading={isRunning} error={error} />
+      ) : null}
+    </>
+  );
+};