[ML] AIOps: Get data view via context instead of prop drilling. (#181797

) ## Summary Part of #181603. In the `aiops` plugin the data view is available via `DataSourceContext`. This PR removes the data view being passed around via components props and uses `useDataSource` instead. ### Checklist - [x] This was checked for breaking API changes and was [labeled appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)
elastic · Apr 26, 2024 · 9ea394b · 9ea394b
1 parent a79d201
commit 9ea394b
Show file tree

Hide file tree

Showing 8 changed files with 16 additions and 31 deletions.
diff --git a/x-pack/plugins/aiops/public/components/log_categorization/log_categorization_page.tsx b/x-pack/plugins/aiops/public/components/log_categorization/log_categorization_page.tsx
@@ -311,7 +311,6 @@ export const LogCategorizationPage: FC<LogCategorizationPageProps> = ({ embeddin
       <EuiFlexGroup gutterSize="none">
         <EuiFlexItem>
           <SearchPanel
-            dataView={dataView}
             searchString={searchString ?? ''}
             searchQuery={searchQuery}
             searchQueryLanguage={searchQueryLanguage}

diff --git a/...blic/components/log_rate_analysis/log_rate_analysis_content/log_rate_analysis_content.tsx b/...blic/components/log_rate_analysis/log_rate_analysis_content/log_rate_analysis_content.tsx
@@ -15,7 +15,6 @@ import type { BarStyleAccessor } from '@elastic/charts/dist/chart_types/xy_chart
 
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
-import type { DataView } from '@kbn/data-views-plugin/public';
 import {
   getWindowParametersForTrigger,
   getSnappedTimestamps,
@@ -29,6 +28,7 @@ import type { SignificantItem } from '@kbn/ml-agg-utils';
 import { useLogRateAnalysisStateContext, type GroupTableItem } from '@kbn/aiops-components';
 
 import { useData } from '../../../hooks/use_data';
+import { useDataSource } from '../../../hooks/use_data_source';
 
 import { DocumentCountContent } from '../../document_count_content/document_count_content';
 import {
@@ -63,8 +63,6 @@ export function getDocumentCountStatsSplitLabel(
 }
 
 export interface LogRateAnalysisContentProps {
-  /** The data view to analyze. */
-  dataView: DataView;
   timeRange?: { min: Moment; max: Moment };
   /** Elasticsearch query to pass to analysis endpoint */
   esSearchQuery?: estypes.QueryDslQueryContainer;
@@ -83,7 +81,6 @@ export interface LogRateAnalysisContentProps {
 }
 
 export const LogRateAnalysisContent: FC<LogRateAnalysisContentProps> = ({
-  dataView,
   timeRange,
   esSearchQuery = DEFAULT_SEARCH_QUERY,
   stickyHistogram,
@@ -93,6 +90,8 @@ export const LogRateAnalysisContent: FC<LogRateAnalysisContentProps> = ({
   onWindowParametersChange,
   embeddingOrigin,
 }) => {
+  const { dataView } = useDataSource();
+
   const [windowParameters, setWindowParameters] = useState<WindowParameters | undefined>();
   const [isBrushCleared, setIsBrushCleared] = useState(true);
   const [logRateAnalysisType, setLogRateAnalysisType] = useState<LogRateAnalysisType>(
@@ -272,7 +271,6 @@ export const LogRateAnalysisContent: FC<LogRateAnalysisContentProps> = ({
       <EuiHorizontalRule />
       {showLogRateAnalysisResults && (
         <LogRateAnalysisResults
-          dataView={dataView}
           analysisType={logRateAnalysisType}
           earliest={earliest}
           isBrushCleared={isBrushCleared}

diff --git a/...ponents/log_rate_analysis/log_rate_analysis_content/log_rate_analysis_content_wrapper.tsx b/...ponents/log_rate_analysis/log_rate_analysis_content/log_rate_analysis_content_wrapper.tsx
@@ -96,7 +96,6 @@ export const LogRateAnalysisContentWrapper: FC<LogRateAnalysisContentWrapperProp
             <StorageContextProvider storage={localStorage} storageKeys={AIOPS_STORAGE_KEYS}>
               <DatePickerContextProvider {...datePickerDeps}>
                 <LogRateAnalysisContent
-                  dataView={dataView}
                   timeRange={timeRange}
                   esSearchQuery={esSearchQuery}
                   stickyHistogram={stickyHistogram}

diff --git a/x-pack/plugins/aiops/public/components/log_rate_analysis/log_rate_analysis_page.tsx b/x-pack/plugins/aiops/public/components/log_rate_analysis/log_rate_analysis_page.tsx
@@ -169,15 +169,13 @@ export const LogRateAnalysisPage: FC<Props> = ({ stickyHistogram }) => {
         <EuiFlexGroup gutterSize="m" direction="column">
           <EuiFlexItem>
             <SearchPanel
-              dataView={dataView}
               searchString={searchString ?? ''}
               searchQuery={searchQuery}
               searchQueryLanguage={searchQueryLanguage}
               setSearchParams={setSearchParams}
             />
           </EuiFlexItem>
           <LogRateAnalysisContent
-            dataView={dataView}
             embeddingOrigin={AIOPS_TELEMETRY_ID.AIOPS_DEFAULT_SOURCE}
             esSearchQuery={searchQuery}
             onWindowParametersChange={onWindowParametersHandler}

diff --git a/x-pack/plugins/aiops/public/components/log_rate_analysis/log_rate_analysis_results.tsx b/x-pack/plugins/aiops/public/components/log_rate_analysis/log_rate_analysis_results.tsx
@@ -23,7 +23,6 @@ import {
 } from '@elastic/eui';
 
 import { reportPerformanceMetricEvent } from '@kbn/ebt-tools';
-import type { DataView } from '@kbn/data-views-plugin/public';
 import { ProgressControls } from '@kbn/aiops-components';
 import { useFetchStream } from '@kbn/ml-response-stream/client';
 import {
@@ -41,6 +40,8 @@ import type { AiopsLogRateAnalysisSchemaSignificantItem } from '@kbn/aiops-log-r
 import { useLogRateAnalysisStateContext } from '@kbn/aiops-components';
 
 import { useAiopsAppContext } from '../../hooks/use_aiops_app_context';
+import { useDataSource } from '../../hooks/use_data_source';
+
 import {
   getGroupTableItems,
   LogRateAnalysisResultsTable,
@@ -93,8 +94,6 @@ export interface LogRateAnalysisResultsData {
  * LogRateAnalysis props require a data view.
  */
 interface LogRateAnalysisResultsProps {
-  /** The data view to analyze. */
-  dataView: DataView;
   /** The type of analysis, whether it's a spike or dip */
   analysisType?: LogRateAnalysisType;
   /** Start timestamp filter */
@@ -123,7 +122,6 @@ interface LogRateAnalysisResultsProps {
 }
 
 export const LogRateAnalysisResults: FC<LogRateAnalysisResultsProps> = ({
-  dataView,
   analysisType = LOG_RATE_ANALYSIS_TYPE.SPIKE,
   earliest,
   isBrushCleared,
@@ -139,6 +137,7 @@ export const LogRateAnalysisResults: FC<LogRateAnalysisResultsProps> = ({
   embeddingOrigin,
 }) => {
   const { analytics, http } = useAiopsAppContext();
+  const { dataView } = useDataSource();
 
   // Store the performance metric's start time using a ref
   // to be able to track it across rerenders.
@@ -485,7 +484,6 @@ export const LogRateAnalysisResults: FC<LogRateAnalysisResultsProps> = ({
             significantItems={data.significantItems}
             groupTableItems={groupTableItems}
             loading={isRunning}
-            dataView={dataView}
             timeRangeMs={timeRangeMs}
             searchQuery={searchQuery}
             barColorOverride={barColorOverride}
@@ -497,7 +495,6 @@ export const LogRateAnalysisResults: FC<LogRateAnalysisResultsProps> = ({
           <LogRateAnalysisResultsTable
             significantItems={data.significantItems}
             loading={isRunning}
-            dataView={dataView}
             timeRangeMs={timeRangeMs}
             searchQuery={searchQuery}
             barColorOverride={barColorOverride}

diff --git a/...ops/public/components/log_rate_analysis_results_table/log_rate_analysis_results_table.tsx b/...ops/public/components/log_rate_analysis_results_table/log_rate_analysis_results_table.tsx
@@ -23,8 +23,6 @@ import {
 } from '@elastic/eui';
 
 import type { FieldStatsServices } from '@kbn/unified-field-list/src/components/field_stats';
-
-import type { DataView } from '@kbn/data-views-plugin/public';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { type SignificantItem, SIGNIFICANT_ITEM_TYPE } from '@kbn/ml-agg-utils';
@@ -36,6 +34,7 @@ import { useLogRateAnalysisStateContext } from '@kbn/aiops-components';
 import { useEuiTheme } from '../../hooks/use_eui_theme';
 
 import { MiniHistogram } from '../mini_histogram';
+import { useDataSource } from '../../hooks/use_data_source';
 import { useAiopsAppContext } from '../../hooks/use_aiops_app_context';
 
 import { getFailedTransactionsCorrelationImpactLabel } from './get_failed_transactions_correlation_impact_label';
@@ -59,7 +58,6 @@ const TRUNCATE_TEXT_LINES = 3;
 
 interface LogRateAnalysisResultsTableProps {
   significantItems: SignificantItem[];
-  dataView: DataView;
   loading: boolean;
   isExpandedRow?: boolean;
   searchQuery: estypes.QueryDslQueryContainer;
@@ -73,7 +71,6 @@ interface LogRateAnalysisResultsTableProps {
 
 export const LogRateAnalysisResultsTable: FC<LogRateAnalysisResultsTableProps> = ({
   significantItems,
-  dataView,
   loading,
   isExpandedRow,
   searchQuery,
@@ -84,6 +81,7 @@ export const LogRateAnalysisResultsTable: FC<LogRateAnalysisResultsTableProps> =
 }) => {
   const euiTheme = useEuiTheme();
   const primaryBackgroundColor = useEuiBackgroundColor('primary');
+  const { dataView } = useDataSource();
   const dataViewId = dataView.id;
 
   const {

diff --git a/...lic/components/log_rate_analysis_results_table/log_rate_analysis_results_table_groups.tsx b/...lic/components/log_rate_analysis_results_table/log_rate_analysis_results_table_groups.tsx
@@ -30,10 +30,11 @@ import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import type { SignificantItem } from '@kbn/ml-agg-utils';
 import type { TimeRange as TimeRangeMs } from '@kbn/ml-date-picker';
-import type { DataView } from '@kbn/data-views-plugin/public';
 import { stringHash } from '@kbn/ml-string-hash';
 import { useLogRateAnalysisStateContext, type GroupTableItem } from '@kbn/aiops-components';
 
+import { useDataSource } from '../../hooks/use_data_source';
+
 import { MiniHistogram } from '../mini_histogram';
 
 import { getFailedTransactionsCorrelationImpactLabel } from './get_failed_transactions_correlation_impact_label';
@@ -60,7 +61,6 @@ interface LogRateAnalysisResultsTableProps {
   loading: boolean;
   searchQuery: estypes.QueryDslQueryContainer;
   timeRangeMs: TimeRangeMs;
-  dataView: DataView;
   /** Optional color override for the default bar color for charts */
   barColorOverride?: string;
   /** Optional color override for the highlighted bar color for charts */
@@ -72,13 +72,14 @@ export const LogRateAnalysisResultsGroupsTable: FC<LogRateAnalysisResultsTablePr
   significantItems,
   groupTableItems,
   loading,
-  dataView,
   timeRangeMs,
   searchQuery,
   barColorOverride,
   barHighlightColorOverride,
   zeroDocsFallback = false,
 }) => {
+  const { dataView } = useDataSource();
+
   const [pageIndex, setPageIndex] = useState(0);
   const [pageSize, setPageSize] = useState(10);
   const [sortField, setSortField] = useState<'docCount' | 'pValue'>(
@@ -125,7 +126,6 @@ export const LogRateAnalysisResultsGroupsTable: FC<LogRateAnalysisResultsTablePr
           )}
           loading={loading}
           isExpandedRow
-          dataView={dataView}
           timeRangeMs={timeRangeMs}
           searchQuery={searchQuery}
           barColorOverride={barColorOverride}

diff --git a/x-pack/plugins/aiops/public/components/search_panel/search_panel.tsx b/x-pack/plugins/aiops/public/components/search_panel/search_panel.tsx
@@ -11,12 +11,12 @@ import { EuiFlexItem, EuiFlexGroup } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import type { Query, Filter } from '@kbn/es-query';
 import type { TimeRange } from '@kbn/es-query';
-import type { DataView, DataViewField } from '@kbn/data-views-plugin/public';
+import type { DataViewField } from '@kbn/data-views-plugin/public';
 import type { SearchQueryLanguage } from '@kbn/ml-query-utils';
 import { useAiopsAppContext } from '../../hooks/use_aiops_app_context';
+import { useDataSource } from '../../hooks/use_data_source';
 import { createMergedEsQuery } from '../../application/utils/search_utils';
 interface Props {
-  dataView: DataView;
   searchString: Query['query'];
   searchQuery: Query['query'];
   searchQueryLanguage: SearchQueryLanguage;
@@ -34,12 +34,7 @@ interface Props {
   onAddFilter?: (field: DataViewField | string, value: string, type: '+' | '-') => void;
 }
 
-export const SearchPanel: FC<Props> = ({
-  dataView,
-  searchString,
-  searchQueryLanguage,
-  setSearchParams,
-}) => {
+export const SearchPanel: FC<Props> = ({ searchString, searchQueryLanguage, setSearchParams }) => {
   const {
     uiSettings,
     unifiedSearch: {
@@ -48,6 +43,7 @@ export const SearchPanel: FC<Props> = ({
     notifications: { toasts },
     data: { query: queryManager },
   } = useAiopsAppContext();
+  const { dataView } = useDataSource();
 
   // The internal state of the input query bar updated on every key stroke.
   const [searchInput, setSearchInput] = useState<Query>({