[7.x] [Infra UI][Logs UI] Fix autocomplete to use proper derived index pattern (#42287)

x-pack/legacy/plugins/infra/public/containers/source/source.tsx

@@ -21,6 +21,19 @@ import { updateSourceMutation } from './update_source.gql_query';
 
 type Source = SourceQuery.Query['source'];
 
+const pickIndexPattern = (source: Source | undefined, type: 'logs' | 'metrics' | 'both') => {
+  if (!source) {
+    return 'unknown-index';
+  }
+  if (type === 'logs') {
+    return source.configuration.logAlias;
+  }
+  if (type === 'metrics') {
+    return source.configuration.metricAlias;
+  }
+  return `${source.configuration.logAlias},${source.configuration.metricAlias}`;
+};
+
 export const useSource = ({ sourceId }: { sourceId: string }) => {
   const apolloClient = useApolloClient();
   const [source, setSource] = useState<Source | undefined>(undefined);
@@ -108,13 +121,12 @@ export const useSource = ({ sourceId }: { sourceId: string }) => {
     [apolloClient, sourceId]
   );
 
-  const derivedIndexPattern = useMemo(
-    () => ({
+  const createDerivedIndexPattern = (type: 'logs' | 'metrics' | 'both') => {
+    return {
       fields: source ? source.status.indexFields : [],
-      title: source ? `${source.configuration.logAlias}` : 'unknown-index',
-    }),
-    [source]
-  );
+      title: pickIndexPattern(source, type),
+    };
+  };
 
   const isLoading = useMemo(
     () =>
@@ -146,7 +158,7 @@ export const useSource = ({ sourceId }: { sourceId: string }) => {
 
   return {
     createSourceConfiguration,
-    derivedIndexPattern,
+    createDerivedIndexPattern,
     logIndicesExist,
     isLoading,
     isLoadingSource: loadSourceRequest.state === 'pending',

x-pack/legacy/plugins/infra/public/containers/with_source/with_source.tsx

@@ -15,7 +15,7 @@ interface WithSourceProps {
   children: RendererFunction<{
     configuration?: SourceQuery.Query['source']['configuration'];
     create: (sourceProperties: UpdateSourceInput) => Promise<any> | undefined;
-    derivedIndexPattern: StaticIndexPattern;
+    createDerivedIndexPattern: (type: 'logs' | 'metrics' | 'both') => StaticIndexPattern;
     exists?: boolean;
     hasFailed: boolean;
     isLoading: boolean;
@@ -33,7 +33,7 @@ interface WithSourceProps {
 export const WithSource: React.FunctionComponent<WithSourceProps> = ({ children }) => {
   const {
     createSourceConfiguration,
-    derivedIndexPattern,
+    createDerivedIndexPattern,
     source,
     sourceExists,
     sourceId,
@@ -50,7 +50,7 @@ export const WithSource: React.FunctionComponent<WithSourceProps> = ({ children
   return children({
     create: createSourceConfiguration,
     configuration: source && source.configuration,
-    derivedIndexPattern,
+    createDerivedIndexPattern,
     exists: sourceExists,
     hasFailed: hasFailedLoadingSource,
     isLoading,

x-pack/legacy/plugins/infra/public/pages/infrastructure/index.tsx

@@ -68,11 +68,11 @@ export const InfrastructurePage = injectI18n(({ match, intl }: InfrastructurePag
             path={`${match.path}/metrics-explorer`}
             render={props => (
               <WithSource>
-                {({ configuration, derivedIndexPattern }) => (
+                {({ configuration, createDerivedIndexPattern }) => (
                   <MetricsExplorerOptionsContainer.Provider>
                     <WithMetricsExplorerOptionsUrlState />
                     <MetricsExplorerPage
-                      derivedIndexPattern={derivedIndexPattern}
+                      derivedIndexPattern={createDerivedIndexPattern('metrics')}
                       source={configuration}
                       {...props}
                     />

x-pack/legacy/plugins/infra/public/pages/infrastructure/snapshot/index.tsx

@@ -38,7 +38,7 @@ export const SnapshotPage = injectUICapabilities(
     const { intl, uiCapabilities } = props;
     const { showIndicesConfiguration } = useContext(SourceConfigurationFlyoutState.Context);
     const {
-      derivedIndexPattern,
+      createDerivedIndexPattern,
       hasFailedLoadingSource,
       isLoading,
       loadSourceFailureMessage,
@@ -84,7 +84,7 @@ export const SnapshotPage = injectUICapabilities(
         ) : metricIndicesExist ? (
           <>
             <WithWaffleTimeUrlState />
-            <WithWaffleFilterUrlState indexPattern={derivedIndexPattern} />
+            <WithWaffleFilterUrlState indexPattern={createDerivedIndexPattern('metrics')} />
             <WithWaffleOptionsUrlState />
             <SnapshotToolbar />
             <SnapshotPageContent />

x-pack/legacy/plugins/infra/public/pages/infrastructure/snapshot/page_content.tsx

@@ -19,10 +19,10 @@ import { WithSource } from '../../../containers/with_source';
 export const SnapshotPageContent: React.SFC = () => (
   <PageContent>
     <WithSource>
-      {({ configuration, derivedIndexPattern, sourceId }) => (
+      {({ configuration, createDerivedIndexPattern, sourceId }) => (
         <WithOptions>
           {({ wafflemap }) => (
-            <WithWaffleFilter indexPattern={derivedIndexPattern}>
+            <WithWaffleFilter indexPattern={createDerivedIndexPattern('metrics')}>
               {({ filterQueryAsJson, applyFilterQuery }) => (
                 <WithWaffleTime>
                   {({ currentTimeRange, isAutoReloading }) => (

x-pack/legacy/plugins/infra/public/pages/infrastructure/snapshot/toolbar.tsx

@@ -26,10 +26,10 @@ export const SnapshotToolbar = injectI18n(({ intl }) => (
     <EuiFlexGroup alignItems="center" justifyContent="spaceBetween" gutterSize="m">
       <EuiFlexItem>
         <WithSource>
-          {({ derivedIndexPattern }) => (
-            <WithKueryAutocompletion indexPattern={derivedIndexPattern}>
+          {({ createDerivedIndexPattern }) => (
+            <WithKueryAutocompletion indexPattern={createDerivedIndexPattern('metrics')}>
               {({ isLoadingSuggestions, loadSuggestions, suggestions }) => (
-                <WithWaffleFilter indexPattern={derivedIndexPattern}>
+                <WithWaffleFilter indexPattern={createDerivedIndexPattern('metrics')}>
                   {({
                     applyFilterQueryFromKueryExpression,
                     filterQueryDraft,
@@ -73,7 +73,7 @@ export const SnapshotToolbar = injectI18n(({ intl }) => (
     </EuiFlexGroup>
     <EuiFlexGroup alignItems="center" gutterSize="m">
       <WithSource>
-        {({ derivedIndexPattern }) => (
+        {({ createDerivedIndexPattern }) => (
           <WithWaffleOptions>
             {({
               changeMetric,
@@ -106,7 +106,7 @@ export const SnapshotToolbar = injectI18n(({ intl }) => (
                     groupBy={groupBy}
                     nodeType={nodeType}
                     onChange={changeGroupBy}
-                    fields={derivedIndexPattern.fields}
+                    fields={createDerivedIndexPattern('metrics').fields}
                     onChangeCustomOptions={changeCustomOptions}
                     customOptions={customOptions}
                   />

x-pack/legacy/plugins/infra/public/pages/logs/page_logs_content.tsx

@@ -32,7 +32,7 @@ import { SourceConfigurationFlyoutState } from '../../components/source_configur
 import { LogHighlightsBridge } from '../../containers/logs/log_highlights';
 
 export const LogsPageLogsContent: React.FunctionComponent = () => {
-  const { derivedIndexPattern, source, sourceId, version } = useContext(Source.Context);
+  const { createDerivedIndexPattern, source, sourceId, version } = useContext(Source.Context);
   const { intervalSize, textScale, textWrap } = useContext(LogViewConfiguration.Context);
   const {
     setFlyoutVisibility,
@@ -45,6 +45,8 @@ export const LogsPageLogsContent: React.FunctionComponent = () => {
   } = useContext(LogFlyoutState.Context);
   const { showLogsConfiguration } = useContext(SourceConfigurationFlyoutState.Context);
 
+  const derivedIndexPattern = createDerivedIndexPattern('logs');
+
   return (
     <>
       <ReduxSourceIdBridge sourceId={sourceId} />

x-pack/legacy/plugins/infra/public/pages/logs/page_toolbar.tsx

@@ -26,7 +26,8 @@ import { Source } from '../../containers/source';
 import { WithKueryAutocompletion } from '../../containers/with_kuery_autocompletion';
 
 export const LogsToolbar = injectI18n(({ intl }) => {
-  const { derivedIndexPattern } = useContext(Source.Context);
+  const { createDerivedIndexPattern } = useContext(Source.Context);
+  const derivedIndexPattern = createDerivedIndexPattern('logs');
   const {
     availableIntervalSizes,
     availableTextScales,