[Logs UI] Allow for plugins to inject internal source configurations

x-pack/plugins/infra/common/graphql/shared/fragments.gql_query.ts

@@ -18,6 +18,7 @@ export const sharedFragments = {
       id
       version
       updatedAt
+      origin
     }
   `,
   InfraLogEntryFields: gql`

x-pack/plugins/infra/common/graphql/types.ts

@@ -22,6 +22,8 @@ export interface InfraSource {
   version?: string | null;
   /** The timestamp the source configuration was last persisted at */
   updatedAt?: number | null;
+  /** The origin of the source (one of 'fallback', 'internal', 'stored') */
+  origin: string;
   /** The raw configuration of the source */
   configuration: InfraSourceConfiguration;
   /** The status of the source */
@@ -1047,6 +1049,8 @@ export namespace InfraSourceFields {
     version?: string | null;
 
     updatedAt?: number | null;
+
+    origin: string;
   };
 }
 

x-pack/plugins/infra/public/apps/start_app.tsx

@@ -21,6 +21,7 @@ import { InfraFrontendLibs } from '../lib/lib';
 import { PageRouter } from '../routes';
 import { createStore } from '../store';
 import { ApolloClientContext } from '../utils/apollo_context';
+import { HistoryContext } from '../utils/history_context';
 import { useKibanaUiSetting } from '../utils/use_kibana_ui_setting';
 
 export async function startApp(libs: InfraFrontendLibs) {
@@ -44,7 +45,9 @@ export async function startApp(libs: InfraFrontendLibs) {
                 <ApolloProvider client={libs.apolloClient}>
                   <ApolloClientContext.Provider value={libs.apolloClient}>
                     <EuiThemeProvider darkMode={darkMode}>
-                      <PageRouter history={history} />
+                      <HistoryContext.Provider value={history}>
+                        <PageRouter history={history} />
+                      </HistoryContext.Provider>
                     </EuiThemeProvider>
                   </ApolloClientContext.Provider>
                 </ApolloProvider>

x-pack/plugins/infra/public/components/source_configuration/source_configuration_flyout.tsx

@@ -84,6 +84,11 @@ export const SourceConfigurationFlyout = injectI18n(
       ]
     );
 
+    const isWriteable = useMemo(() => shouldAllowEdit && source && source.origin !== 'internal', [
+      shouldAllowEdit,
+      source,
+    ]);
+
     if (!isVisible || !source || !source.configuration) {
       return null;
     }
@@ -101,22 +106,22 @@ export const SourceConfigurationFlyout = injectI18n(
             <NameConfigurationPanel
               isLoading={isLoading}
               nameFieldProps={indicesConfigurationProps.name}
-              readOnly={!shouldAllowEdit}
+              readOnly={!isWriteable}
             />
             <EuiSpacer />
             <IndicesConfigurationPanel
               isLoading={isLoading}
               logAliasFieldProps={indicesConfigurationProps.logAlias}
               metricAliasFieldProps={indicesConfigurationProps.metricAlias}
-              readOnly={!shouldAllowEdit}
+              readOnly={!isWriteable}
             />
             <EuiSpacer />
             <FieldsConfigurationPanel
               containerFieldProps={indicesConfigurationProps.containerField}
               hostFieldProps={indicesConfigurationProps.hostField}
               isLoading={isLoading}
               podFieldProps={indicesConfigurationProps.podField}
-              readOnly={!shouldAllowEdit}
+              readOnly={!isWriteable}
               tiebreakerFieldProps={indicesConfigurationProps.tiebreakerField}
               timestampFieldProps={indicesConfigurationProps.timestampField}
             />
@@ -153,7 +158,7 @@ export const SourceConfigurationFlyout = injectI18n(
         <EuiFlyoutHeader hasBorder>
           <EuiTitle>
             <h2 id="sourceConfigurationTitle">
-              {shouldAllowEdit ? (
+              {isWriteable ? (
                 <FormattedMessage
                   id="xpack.infra.sourceConfiguration.sourceConfigurationTitle"
                   defaultMessage="Configure source"
@@ -216,7 +221,7 @@ export const SourceConfigurationFlyout = injectI18n(
               )}
             </EuiFlexItem>
             <EuiFlexItem />
-            {shouldAllowEdit && (
+            {isWriteable && (
               <EuiFlexItem grow={false}>
                 {isLoading ? (
                   <EuiButton color="primary" isLoading fill>

x-pack/plugins/infra/public/containers/logs/log_flyout.tsx

@@ -7,10 +7,12 @@
 import createContainer from 'constate-latest';
 import { isString } from 'lodash';
 import React, { useContext, useEffect, useMemo, useState } from 'react';
+
 import { FlyoutItemQuery, InfraLogItem } from '../../graphql/types';
 import { useApolloClient } from '../../utils/apollo_context';
 import { UrlStateContainer } from '../../utils/url_state';
 import { useTrackedPromise } from '../../utils/use_tracked_promise';
+import { Source } from '../source';
 import { flyoutItemQuery } from './flyout_item.gql_query';
 
 export enum FlyoutVisibility {
@@ -24,7 +26,8 @@ interface FlyoutOptionsUrlState {
   surroundingLogsId?: string | null;
 }
 
-export const useLogFlyout = ({ sourceId }: { sourceId: string }) => {
+export const useLogFlyout = () => {
+  const { sourceId } = useContext(Source.Context);
   const [flyoutVisible, setFlyoutVisibility] = useState<boolean>(false);
   const [flyoutId, setFlyoutId] = useState<string | null>(null);
   const [flyoutItem, setFlyoutItem] = useState<InfraLogItem | null>(null);

x-pack/plugins/infra/public/containers/logs/log_summary/with_summary.ts

@@ -9,6 +9,7 @@ import { connect } from 'react-redux';
 
 import { logFilterSelectors, logPositionSelectors, State } from '../../../store';
 import { RendererFunction } from '../../../utils/typed_react';
+import { Source } from '../../source';
 import { LogViewConfiguration } from '../log_view_configuration';
 import { LogSummaryBuckets, useLogSummary } from './log_summary';
 
@@ -26,8 +27,9 @@ export const WithSummary = connect((state: State) => ({
     visibleMidpointTime: number | null;
   }) => {
     const { intervalSize } = useContext(LogViewConfiguration.Context);
+    const { sourceId } = useContext(Source.Context);
 
-    const { buckets } = useLogSummary('default', visibleMidpointTime, intervalSize, filterQuery);
+    const { buckets } = useLogSummary(sourceId, visibleMidpointTime, intervalSize, filterQuery);
 
     return children({ buckets });
   }

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

@@ -4,6 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { useEffect } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 
@@ -24,6 +25,7 @@ export const withStreamItems = connect(
   bindPlainActionCreators({
     loadNewerEntries: logEntriesActions.loadNewerEntries,
     reloadEntries: logEntriesActions.reloadEntries,
+    setSourceId: logEntriesActions.setSourceId,
   })
 );
 
@@ -52,3 +54,26 @@ const createLogEntryStreamItem = (logEntry: LogEntry) => ({
   kind: 'logEntry' as 'logEntry',
   logEntry,
 });
+
+/**
+ * This component serves as connection between the state and side-effects
+ * managed by redux and the state and effects managed by hooks. In particular,
+ * it forwards changes of the source id to redux via the action creator
+ * `setSourceId`.
+ *
+ * It will be mounted beneath the hierachy level where the redux store and the
+ * source state are initialized. Once the log entry state and loading
+ * side-effects have been migrated from redux to hooks it can be removed.
+ */
+export const ReduxSourceIdBridge = withStreamItems(
+  ({ setSourceId, sourceId }: { setSourceId: (sourceId: string) => void; sourceId: string }) => {
+    useEffect(
+      () => {
+        setSourceId(sourceId);
+      },
+      [setSourceId, sourceId]
+    );
+
+    return null;
+  }
+);

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

@@ -144,7 +144,7 @@ export const useSource = ({ sourceId }: { sourceId: string }) => {
     () => {
       loadSource();
     },
-    [loadSource]
+    [loadSource, sourceId]
   );
 
   return {

x-pack/plugins/infra/public/containers/source_id/index.ts

@@ -0,0 +1,7 @@
+/*
+ * 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.
+ */
+
+export * from './source_id';

x-pack/plugins/infra/public/containers/source_id/source_id.ts

@@ -0,0 +1,28 @@
+/*
+ * 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 * as runtimeTypes from 'io-ts';
+
+import { useUrlState, replaceStateKeyInQueryString } from '../../utils/use_url_state';
+
+const SOURCE_ID_URL_STATE_KEY = 'sourceId';
+
+export const useSourceId = () => {
+  return useUrlState({
+    defaultState: 'default',
+    decodeUrlState: decodeSourceIdUrlState,
+    encodeUrlState: encodeSourceIdUrlState,
+    urlStateKey: SOURCE_ID_URL_STATE_KEY,
+  });
+};
+
+export const replaceSourceIdInQueryString = (sourceId: string) =>
+  replaceStateKeyInQueryString(SOURCE_ID_URL_STATE_KEY, sourceId);
+
+const sourceIdRuntimeType = runtimeTypes.union([runtimeTypes.string, runtimeTypes.undefined]);
+const encodeSourceIdUrlState = sourceIdRuntimeType.encode;
+const decodeSourceIdUrlState = (value: unknown) =>
+  sourceIdRuntimeType.decode(value).getOrElse(undefined);

x-pack/plugins/infra/public/graphql/introspection.json

@@ -101,6 +101,18 @@
             "isDeprecated": false,
             "deprecationReason": null
           },
+          {
+            "name": "origin",
+            "description": "The origin of the source (one of 'fallback', 'internal', 'stored')",
+            "args": [],
+            "type": {
+              "kind": "NON_NULL",
+              "name": null,
+              "ofType": { "kind": "SCALAR", "name": "String", "ofType": null }
+            },
+            "isDeprecated": false,
+            "deprecationReason": null
+          },
           {
             "name": "configuration",
             "description": "The raw configuration of the source",

x-pack/plugins/infra/public/graphql/types.ts

@@ -22,6 +22,8 @@ export interface InfraSource {
   version?: string | null;
   /** The timestamp the source configuration was last persisted at */
   updatedAt?: number | null;
+  /** The origin of the source (one of 'fallback', 'internal', 'stored') */
+  origin: string;
   /** The raw configuration of the source */
   configuration: InfraSourceConfiguration;
   /** The status of the source */
@@ -1047,6 +1049,8 @@ export namespace InfraSourceFields {
     version?: string | null;
 
     updatedAt?: number | null;
+
+    origin: string;
   };
 }
 

x-pack/plugins/infra/public/pages/link_to/link_to.tsx

@@ -7,7 +7,6 @@
 import React from 'react';
 import { match as RouteMatch, Redirect, Route, Switch } from 'react-router-dom';
 
-import { Source } from '../../containers/source';
 import { RedirectToLogs } from './redirect_to_logs';
 import { RedirectToNodeDetail } from './redirect_to_node_detail';
 import { RedirectToNodeLogs } from './redirect_to_node_logs';
@@ -21,20 +20,18 @@ export class LinkToPage extends React.Component<LinkToPageProps> {
     const { match } = this.props;
 
     return (
-      <Source.Provider sourceId="default">
-        <Switch>
-          <Route
-            path={`${match.url}/:nodeType(host|container|pod)-logs/:nodeId`}
-            component={RedirectToNodeLogs}
-          />
-          <Route
-            path={`${match.url}/:nodeType(host|container|pod)-detail/:nodeId`}
-            component={RedirectToNodeDetail}
-          />
-          <Route path={`${match.url}/logs`} component={RedirectToLogs} />
-          <Redirect to="/infrastructure" />
-        </Switch>
-      </Source.Provider>
+      <Switch>
+        <Route
+          path={`${match.url}/:sourceId?/:nodeType(host|container|pod)-logs/:nodeId`}
+          component={RedirectToNodeLogs}
+        />
+        <Route
+          path={`${match.url}/:nodeType(host|container|pod)-detail/:nodeId`}
+          component={RedirectToNodeDetail}
+        />
+        <Route path={`${match.url}/:sourceId?/logs`} component={RedirectToLogs} />
+        <Redirect to="/infrastructure" />
+      </Switch>
     );
   }
 }

x-pack/plugins/infra/public/pages/link_to/redirect_to_logs.test.tsx

@@ -16,12 +16,11 @@ describe('RedirectToLogs component', () => {
     const component = shallowWithIntl(
       <RedirectToLogs {...createRouteComponentProps('/logs?time=1550671089404')} />
     ).dive();
-    const withSourceChildFunction = component.prop('children') as any;
 
-    expect(withSourceChildFunction(testSourceChildArgs)).toMatchInlineSnapshot(`
+    expect(component).toMatchInlineSnapshot(`
 <Redirect
   push={false}
-  to="/logs?logFilter=(expression:'',kind:kuery)&logPosition=(position:(tiebreaker:0,time:1550671089404))"
+  to="/logs?logFilter=(expression:'',kind:kuery)&logPosition=(position:(tiebreaker:0,time:1550671089404))&sourceId=default"
 />
 `);
   });
@@ -32,32 +31,33 @@ describe('RedirectToLogs component', () => {
         {...createRouteComponentProps('/logs?time=1550671089404&filter=FILTER_FIELD:FILTER_VALUE')}
       />
     ).dive();
-    const withSourceChildFunction = component.prop('children') as any;
 
-    expect(withSourceChildFunction(testSourceChildArgs)).toMatchInlineSnapshot(`
+    expect(component).toMatchInlineSnapshot(`
 <Redirect
   push={false}
-  to="/logs?logFilter=(expression:'FILTER_FIELD:FILTER_VALUE',kind:kuery)&logPosition=(position:(tiebreaker:0,time:1550671089404))"
+  to="/logs?logFilter=(expression:'FILTER_FIELD:FILTER_VALUE',kind:kuery)&logPosition=(position:(tiebreaker:0,time:1550671089404))&sourceId=default"
 />
 `);
   });
-});
 
-const testSourceChildArgs = {
-  configuration: {
-    fields: {
-      container: 'CONTAINER_FIELD',
-      host: 'HOST_FIELD',
-      pod: 'POD_FIELD',
-    },
-  },
-  isLoading: false,
-};
+  it('renders a redirect with the correct custom source id', () => {
+    const component = shallowWithIntl(
+      <RedirectToLogs {...createRouteComponentProps('/SOME-OTHER-SOURCE/logs')} />
+    ).dive();
+
+    expect(component).toMatchInlineSnapshot(`
+<Redirect
+  push={false}
+  to="/logs?logFilter=(expression:'',kind:kuery)&sourceId=SOME-OTHER-SOURCE"
+/>
+`);
+  });
+});
 
 const createRouteComponentProps = (path: string) => {
   const location = createLocation(path);
   return {
-    match: matchPath(location.pathname, { path: '/logs' }) as any,
+    match: matchPath(location.pathname, { path: '/:sourceId?/logs' }) as any,
     history: null as any,
     location,
   };