[Logs UI] Remove apollo deps from log link-to routes (elastic#74502)

This replaces the use of the old graphql-based `useSource` hook with the new plain JSON `useLogSource` hook.

It also fixes two more problems:

- A rendering problem with the source configuration loading screen and a `setState` race condition in the `useLogSource` hook.
- A non-backwards-compatible change of the `/link-to/:sourceId/logs` route in elastic#61162.

x-pack/plugins/infra/common/http_api/log_sources/log_source_configuration.ts

@@ -20,6 +20,9 @@ export const logSourceConfigurationOriginRT = rt.keyof({
 export type LogSourceConfigurationOrigin = rt.TypeOf<typeof logSourceConfigurationOriginRT>;
 
 const logSourceFieldsConfigurationRT = rt.strict({
+  container: rt.string,
+  host: rt.string,
+  pod: rt.string,
   timestamp: rt.string,
   tiebreaker: rt.string,
 });

x-pack/plugins/infra/common/inventory_models/index.ts

@@ -30,7 +30,6 @@ export const findInventoryModel = (type: InventoryItemType) => {
 };
 
 interface InventoryFields {
-  message: string[];
   host: string;
   pod: string;
   container: string;

x-pack/plugins/infra/public/components/loading_page.tsx

@@ -17,10 +17,14 @@ import { FlexPage } from './page';
 
 interface LoadingPageProps {
   message?: ReactNode;
+  'data-test-subj'?: string;
 }
 
-export const LoadingPage = ({ message }: LoadingPageProps) => (
-  <FlexPage>
+export const LoadingPage = ({
+  message,
+  'data-test-subj': dataTestSubj = 'loadingPage',
+}: LoadingPageProps) => (
+  <FlexPage data-test-subj={dataTestSubj}>
     <EuiPageBody>
       <EuiPageContent verticalPosition="center" horizontalPosition="center">
         <EuiFlexGroup alignItems="center">

x-pack/plugins/infra/public/components/page.tsx

@@ -23,5 +23,6 @@ export const PageContent = euiStyled.div`
 `;
 
 export const FlexPage = euiStyled(EuiPage)`
+  align-self: stretch;
   flex: 1 0 0%;
 `;

x-pack/plugins/infra/public/components/source_loading_page.tsx

@@ -11,6 +11,7 @@ import { LoadingPage } from './loading_page';
 
 export const SourceLoadingPage: React.FunctionComponent = () => (
   <LoadingPage
+    data-test-subj="sourceLoadingPage"
     message={
       <FormattedMessage
         id="xpack.infra.sourceLoadingPage.loadingDataSourcesMessage"

x-pack/plugins/infra/public/containers/logs/log_source/log_source.mock.ts

@@ -0,0 +1,78 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { LogSourceConfiguration, LogSourceStatus, useLogSource } from './log_source';
+
+type CreateUseLogSource = (sourceConfiguration?: { sourceId?: string }) => typeof useLogSource;
+
+const defaultSourceId = 'default';
+
+export const createUninitializedUseLogSourceMock: CreateUseLogSource = ({
+  sourceId = defaultSourceId,
+} = {}) => () => ({
+  derivedIndexPattern: {
+    fields: [],
+    title: 'unknown',
+  },
+  hasFailedLoadingSource: false,
+  hasFailedLoadingSourceStatus: false,
+  initialize: jest.fn(),
+  isLoading: false,
+  isLoadingSourceConfiguration: false,
+  isLoadingSourceStatus: false,
+  isUninitialized: true,
+  loadSource: jest.fn(),
+  loadSourceConfiguration: jest.fn(),
+  loadSourceFailureMessage: undefined,
+  loadSourceStatus: jest.fn(),
+  sourceConfiguration: undefined,
+  sourceId,
+  sourceStatus: undefined,
+  updateSourceConfiguration: jest.fn(),
+});
+
+export const createLoadingUseLogSourceMock: CreateUseLogSource = ({
+  sourceId = defaultSourceId,
+} = {}) => (args) => ({
+  ...createUninitializedUseLogSourceMock({ sourceId })(args),
+  isLoading: true,
+  isLoadingSourceConfiguration: true,
+  isLoadingSourceStatus: true,
+});
+
+export const createLoadedUseLogSourceMock: CreateUseLogSource = ({
+  sourceId = defaultSourceId,
+} = {}) => (args) => ({
+  ...createUninitializedUseLogSourceMock({ sourceId })(args),
+  sourceConfiguration: createBasicSourceConfiguration(sourceId),
+  sourceStatus: {
+    logIndexFields: [],
+    logIndexStatus: 'available',
+  },
+});
+
+export const createBasicSourceConfiguration = (sourceId: string): LogSourceConfiguration => ({
+  id: sourceId,
+  origin: 'stored',
+  configuration: {
+    description: `description for ${sourceId}`,
+    logAlias: 'LOG_INDICES',
+    logColumns: [],
+    fields: {
+      container: 'CONTAINER_FIELD',
+      host: 'HOST_FIELD',
+      pod: 'POD_FIELD',
+      tiebreaker: 'TIEBREAKER_FIELD',
+      timestamp: 'TIMESTAMP_FIELD',
+    },
+    name: sourceId,
+  },
+});
+
+export const createAvailableSourceStatus = (logIndexFields = []): LogSourceStatus => ({
+  logIndexFields,
+  logIndexStatus: 'available',
+});

x-pack/plugins/infra/public/containers/logs/log_source/log_source.ts

@@ -5,13 +5,14 @@
  */
 
 import createContainer from 'constate';
-import { useState, useMemo, useCallback } from 'react';
+import { useCallback, useMemo, useState } from 'react';
+import { useMountedState } from 'react-use';
 import { HttpSetup } from 'src/core/public';
 import {
   LogSourceConfiguration,
-  LogSourceStatus,
-  LogSourceConfigurationPropertiesPatch,
   LogSourceConfigurationProperties,
+  LogSourceConfigurationPropertiesPatch,
+  LogSourceStatus,
 } from '../../../../common/http_api/log_sources';
 import { useTrackedPromise } from '../../../utils/use_tracked_promise';
 import { callFetchLogSourceConfigurationAPI } from './api/fetch_log_source_configuration';
@@ -32,6 +33,7 @@ export const useLogSource = ({
   sourceId: string;
   fetch: HttpSetup['fetch'];
 }) => {
+  const getIsMounted = useMountedState();
   const [sourceConfiguration, setSourceConfiguration] = useState<
     LogSourceConfiguration | undefined
   >(undefined);
@@ -45,6 +47,10 @@ export const useLogSource = ({
         return await callFetchLogSourceConfigurationAPI(sourceId, fetch);
       },
       onResolve: ({ data }) => {
+        if (!getIsMounted()) {
+          return;
+        }
+
         setSourceConfiguration(data);
       },
     },
@@ -58,6 +64,10 @@ export const useLogSource = ({
         return await callPatchLogSourceConfigurationAPI(sourceId, patchedProperties, fetch);
       },
       onResolve: ({ data }) => {
+        if (!getIsMounted()) {
+          return;
+        }
+
         setSourceConfiguration(data);
         loadSourceStatus();
       },
@@ -72,6 +82,10 @@ export const useLogSource = ({
         return await callFetchLogSourceStatusAPI(sourceId, fetch);
       },
       onResolve: ({ data }) => {
+        if (!getIsMounted()) {
+          return;
+        }
+
         setSourceStatus(data);
       },
     },