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

…lastic#36066)

This exposes an API on the Kibana server object (old platform style) to define internal source configurations, which can not be edited by the user and take precedence above any stored 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,
   };