[Logs Explorer] Flyout details ai assistant registration

x-pack/plugins/log_explorer/public/components/log_explorer/log_explorer.tsx

@@ -17,6 +17,7 @@ import { createLogExplorerProfileCustomizations } from '../../customizations/log
 import { createPropertyGetProxy } from '../../utils/proxies';
 import { LogExplorerProfileContext } from '../../state_machines/log_explorer_profile';
 import { LogExplorerStartDeps } from '../../types';
+import { LogExplorerCustomizations } from './types';
 
 export interface CreateLogExplorerArgs {
   core: CoreStart;
@@ -29,6 +30,7 @@ export interface LogExplorerStateContainer {
 }
 
 export interface LogExplorerProps {
+  customizations?: LogExplorerCustomizations;
   scopedHistory: ScopedHistory;
   state$?: BehaviorSubject<LogExplorerStateContainer>;
 }
@@ -44,10 +46,10 @@ export const createLogExplorer = ({ core, plugins }: CreateLogExplorerArgs) => {
     uiSettings: createUiSettingsServiceProxy(core.uiSettings),
   };
 
-  return ({ scopedHistory, state$ }: LogExplorerProps) => {
+  return ({ customizations = {}, scopedHistory, state$ }: LogExplorerProps) => {
     const logExplorerCustomizations = useMemo(
-      () => [createLogExplorerProfileCustomizations({ core, plugins, state$ })],
-      [state$]
+      () => [createLogExplorerProfileCustomizations({ core, customizations, plugins, state$ })],
+      [customizations, state$]
     );
 
     return (

x-pack/plugins/log_explorer/public/components/log_explorer/types.ts

@@ -0,0 +1,25 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { DataTableRecord } from '@kbn/discover-utils/types';
+
+export type RenderPreviousContent = () => React.ReactNode;
+
+export interface LogExplorerFlyoutContentProps {
+  doc: DataTableRecord;
+}
+
+export type FlyoutRenderContent = (
+  renderPreviousContent: RenderPreviousContent,
+  props: LogExplorerFlyoutContentProps
+) => React.ReactNode;
+
+export interface LogExplorerCustomizations {
+  flyout?: {
+    renderContent?: FlyoutRenderContent;
+  };
+}

x-pack/plugins/log_explorer/public/customizations/custom_flyout_content.tsx

@@ -5,23 +5,40 @@
  * 2.0.
  */
 
-import React from 'react';
+import React, { useCallback } from 'react';
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { FlyoutDetail } from '../components/flyout_detail/flyout_detail';
 import { FlyoutProps } from '../components/flyout_detail';
+import { useLogExplorerCustomizationsContext } from '../hooks/use_log_explorer_customizations';
 
 export const CustomFlyoutContent = ({
   actions,
   dataView,
   doc,
   renderDefaultContent,
 }: FlyoutProps) => {
+  const { flyout } = useLogExplorerCustomizationsContext();
+
+  const renderPreviousContent = useCallback(
+    () => (
+      <>
+        {/* Apply custom Log Explorer detail */}
+        <EuiFlexItem>
+          <FlyoutDetail actions={actions} dataView={dataView} doc={doc} />
+        </EuiFlexItem>
+      </>
+    ),
+    [actions, dataView, doc]
+  );
+
+  const content = flyout?.renderContent
+    ? flyout?.renderContent(renderPreviousContent, { doc })
+    : renderPreviousContent();
+
   return (
     <EuiFlexGroup direction="column">
       {/* Apply custom Log Explorer detail */}
-      <EuiFlexItem>
-        <FlyoutDetail actions={actions} dataView={dataView} doc={doc} />
-      </EuiFlexItem>
+      {content}
       {/* Restore default content */}
       <EuiFlexItem>{renderDefaultContent()}</EuiFlexItem>
     </EuiFlexGroup>

x-pack/plugins/log_explorer/public/customizations/log_explorer_profile.tsx

@@ -14,19 +14,27 @@ import { LogExplorerProfileStateService } from '../state_machines/log_explorer_p
 import { LogExplorerStateContainer } from '../components/log_explorer';
 import { LogExplorerStartDeps } from '../types';
 import { useKibanaContextForPluginProvider } from '../utils/use_kibana';
+import { LogExplorerCustomizations } from '../components/log_explorer/types';
+import { LogExplorerCustomizationsProvider } from '../hooks/use_log_explorer_customizations';
 
 const LazyCustomDatasetFilters = dynamic(() => import('./custom_dataset_filters'));
 const LazyCustomDatasetSelector = dynamic(() => import('./custom_dataset_selector'));
 const LazyCustomFlyoutContent = dynamic(() => import('./custom_flyout_content'));
 
 export interface CreateLogExplorerProfileCustomizationsDeps {
   core: CoreStart;
+  customizations: LogExplorerCustomizations;
   plugins: LogExplorerStartDeps;
   state$?: BehaviorSubject<LogExplorerStateContainer>;
 }
 
 export const createLogExplorerProfileCustomizations =
-  ({ core, plugins, state$ }: CreateLogExplorerProfileCustomizationsDeps): CustomizationCallback =>
+  ({
+    core,
+    customizations: logExplorerCustomizations,
+    plugins,
+    state$,
+  }: CreateLogExplorerProfileCustomizationsDeps): CustomizationCallback =>
   async ({ customizations, stateContainer }) => {
     const { data, dataViews, discover } = plugins;
     // Lazy load dependencies
@@ -127,7 +135,9 @@ export const createLogExplorerProfileCustomizations =
 
         return (
           <KibanaContextProviderForPlugin>
-            <LazyCustomFlyoutContent {...props} dataView={internalState.dataView} />
+            <LogExplorerCustomizationsProvider value={logExplorerCustomizations}>
+              <LazyCustomFlyoutContent {...props} dataView={internalState.dataView} />
+            </LogExplorerCustomizationsProvider>
           </KibanaContextProviderForPlugin>
         );
       },

x-pack/plugins/log_explorer/public/hooks/use_log_explorer_customizations.ts

@@ -0,0 +1,17 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import createContainer from 'constate';
+import { LogExplorerCustomizations } from '../components/log_explorer/types';
+
+interface UseLogExplorerCustomizationsDeps {
+  value: LogExplorerCustomizations;
+}
+
+const useLogExplorerCustomizations = ({ value }: UseLogExplorerCustomizationsDeps) => value;
+
+export const [LogExplorerCustomizationsProvider, useLogExplorerCustomizationsContext] =
+  createContainer(useLogExplorerCustomizations);

x-pack/plugins/log_explorer/public/index.ts

@@ -10,6 +10,10 @@ import type { LogExplorerConfig } from '../common/plugin_config';
 import { LogExplorerPlugin } from './plugin';
 export type { LogExplorerPluginSetup, LogExplorerPluginStart } from './types';
 export type { LogExplorerStateContainer } from './components/log_explorer';
+export type {
+  LogExplorerCustomizations,
+  LogExplorerFlyoutContentProps,
+} from './components/log_explorer/types';
 
 export function plugin(context: PluginInitializerContext<LogExplorerConfig>) {
   return new LogExplorerPlugin(context);

x-pack/plugins/logs_shared/public/components/log_ai_assistant/index.tsx

@@ -4,22 +4,25 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-import React from 'react';
+import React, { ComponentType } from 'react';
 import { Optional } from '@kbn/utility-types';
 import { dynamic } from '../../../common/dynamic';
-import type { LogAIAssistantProps } from './log_ai_assistant';
+import type { LogAIAssistantDeps } from './log_ai_assistant';
 
 export const LogAIAssistant = dynamic(() => import('./log_ai_assistant'));
 
 interface LogAIAssistantFactoryDeps {
-  observabilityAIAssistant: LogAIAssistantProps['aiAssistant'];
+  observabilityAIAssistant: LogAIAssistantDeps['observabilityAIAssistant'];
 }
 
-export function createLogAIAssistant({ observabilityAIAssistant }: LogAIAssistantFactoryDeps) {
-  return ({
-    aiAssistant = observabilityAIAssistant,
-    ...props
-  }: Optional<LogAIAssistantProps, 'aiAssistant'>) => (
-    <LogAIAssistant aiAssistant={aiAssistant} {...props} />
+export type LogAIAssistantComponent = ComponentType<
+  Optional<LogAIAssistantDeps, 'observabilityAIAssistant'>
+>;
+
+export function createLogAIAssistant({
+  observabilityAIAssistant: aiAssistant,
+}: LogAIAssistantFactoryDeps): LogAIAssistantComponent {
+  return ({ observabilityAIAssistant = aiAssistant, ...props }) => (
+    <LogAIAssistant observabilityAIAssistant={observabilityAIAssistant} {...props} />
   );
 }

x-pack/plugins/logs_shared/public/components/log_ai_assistant/log_ai_assistant.mock.tsx

@@ -0,0 +1,10 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+
+export const createLogAIAssistantMock = () => jest.fn().mockReturnValue(<div />);

x-pack/plugins/logs_shared/public/components/log_ai_assistant/log_ai_assistant.tsx

@@ -12,6 +12,8 @@ import {
   type Message,
   ObservabilityAIAssistantPluginStart,
   MessageRole,
+  ObservabilityAIAssistantProvider,
+  useObservabilityAIAssistant,
 } from '@kbn/observability-ai-assistant-plugin/public';
 import { LogEntryField } from '../../../common';
 import { explainLogMessageTitle, similarLogMessagesTitle } from './translations';
@@ -21,11 +23,16 @@ export interface LogAIAssistantDocument {
 }
 
 export interface LogAIAssistantProps {
-  aiAssistant: ObservabilityAIAssistantPluginStart;
   doc: LogAIAssistantDocument | undefined;
 }
 
-export function LogAIAssistant({ aiAssistant, doc }: LogAIAssistantProps) {
+export interface LogAIAssistantDeps extends LogAIAssistantProps {
+  observabilityAIAssistant: ObservabilityAIAssistantPluginStart;
+}
+
+export const LogAIAssistant = withProviders(({ doc }: LogAIAssistantProps) => {
+  const aiAssistant = useObservabilityAIAssistant();
+
   const explainLogMessageMessages = useMemo<Message[] | undefined>(() => {
     if (!doc) {
       return undefined;
@@ -80,7 +87,20 @@ export function LogAIAssistant({ aiAssistant, doc }: LogAIAssistantProps) {
       ) : null}
     </EuiFlexGroup>
   );
-}
+});
 
 // eslint-disable-next-line import/no-default-export
 export default LogAIAssistant;
+
+function withProviders(Component: React.FunctionComponent<LogAIAssistantProps>) {
+  return function ComponentWithProviders({
+    observabilityAIAssistant,
+    ...props
+  }: LogAIAssistantDeps) {
+    return (
+      <ObservabilityAIAssistantProvider value={observabilityAIAssistant}>
+        <Component {...props} />
+      </ObservabilityAIAssistantProvider>
+    );
+  };
+}

x-pack/plugins/logs_shared/public/components/logging/log_entry_flyout/log_entry_flyout.tsx

@@ -184,7 +184,7 @@ export const LogEntryFlyout = ({
         >
           <EuiFlexGroup direction="column" gutterSize="m">
             <EuiFlexItem grow={false}>
-              <LogAIAssistant aiAssistant={observabilityAIAssistant} doc={logEntry} />
+              <LogAIAssistant observabilityAIAssistant={observabilityAIAssistant} doc={logEntry} />
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
               <LogEntryFieldsTable logEntry={logEntry} onSetFieldFilter={onSetFieldFilter} />

x-pack/plugins/logs_shared/public/index.ts

@@ -37,6 +37,7 @@ export { useLogSummary, WithSummary } from './containers/logs/log_summary';
 export { useLogEntryFlyout } from './components/logging/log_entry_flyout';
 
 // Shared components
+export type { LogAIAssistantDocument } from './components/log_ai_assistant/log_ai_assistant';
 export type {
   LogEntryStreamItem,
   LogEntryColumnWidths,

x-pack/plugins/logs_shared/public/mocks.tsx

@@ -5,11 +5,13 @@
  * 2.0.
  */
 
+import { createLogAIAssistantMock } from './components/log_ai_assistant/log_ai_assistant.mock';
 import { createLogViewsServiceStartMock } from './services/log_views/log_views_service.mock';
 import { LogsSharedClientStartExports } from './types';
 
 export const createLogsSharedPluginStartMock = (): jest.Mocked<LogsSharedClientStartExports> => ({
   logViews: createLogViewsServiceStartMock(),
+  LogAIAssistant: createLogAIAssistantMock(),
 });
 
 export const _ensureTypeCompatibility = (): LogsSharedClientStartExports =>

x-pack/plugins/logs_shared/public/types.ts

@@ -17,6 +17,7 @@ import type { DataPublicPluginStart } from '@kbn/data-plugin/public';
 import type { DataViewsPublicPluginStart } from '@kbn/data-views-plugin/public';
 import { ObservabilityAIAssistantPluginStart } from '@kbn/observability-ai-assistant-plugin/public';
 import { UiActionsStart } from '@kbn/ui-actions-plugin/public';
+import { LogAIAssistantComponent } from './components/log_ai_assistant';
 // import type { OsqueryPluginStart } from '../../osquery/public';
 import { LogViewsServiceSetup, LogViewsServiceStart } from './services/log_views';
 
@@ -27,6 +28,7 @@ export interface LogsSharedClientSetupExports {
 
 export interface LogsSharedClientStartExports {
   logViews: LogViewsServiceStart;
+  LogAIAssistant: LogAIAssistantComponent;
 }
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface

x-pack/plugins/observability_log_explorer/kibana.jsonc

@@ -15,6 +15,7 @@
       "data",
       "discover",
       "logExplorer",
+      "logsShared",
       "observabilityShared",
       "share",
       "kibanaUtils",

x-pack/plugins/observability_log_explorer/public/log_explorer_customizations/flyout_content.tsx

@@ -0,0 +1,51 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import { EuiFlexItem } from '@elastic/eui';
+import {
+  LogExplorerCustomizations,
+  LogExplorerFlyoutContentProps,
+} from '@kbn/log-explorer-plugin/public';
+import type { LogAIAssistantDocument } from '@kbn/logs-shared-plugin/public';
+import React, { useMemo } from 'react';
+import { useKibanaContextForPlugin } from '../utils/use_kibana';
+
+const ObservabilityLogAIAssistant = ({ doc }: LogExplorerFlyoutContentProps) => {
+  const { services } = useKibanaContextForPlugin();
+  const { LogAIAssistant } = services.logsShared;
+
+  const mappedDoc = useMemo(() => mapDocToAIAssistantFormat(doc), [doc]);
+
+  return <LogAIAssistant key={doc.id} doc={mappedDoc} />;
+};
+
+export const renderFlyoutContent: Required<LogExplorerCustomizations>['flyout']['renderContent'] = (
+  renderPreviousContent,
+  props
+) => {
+  return (
+    <>
+      {renderPreviousContent()}
+      <EuiFlexItem>
+        <ObservabilityLogAIAssistant {...props} />
+      </EuiFlexItem>
+    </>
+  );
+};
+
+/**
+ * Utils
+ */
+const mapDocToAIAssistantFormat = (doc: LogExplorerFlyoutContentProps['doc']) => {
+  if (!doc) return;
+
+  return {
+    fields: Object.entries(doc.flattened).map(([field, value]) => ({
+      field,
+      value,
+    })) as LogAIAssistantDocument['fields'],
+  };
+};

x-pack/plugins/observability_log_explorer/public/log_explorer_customizations/index.ts

@@ -0,0 +1,15 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { LogExplorerCustomizations } from '@kbn/log-explorer-plugin/public';
+import { renderFlyoutContent } from './flyout_content';
+
+export const createLogExplorerCustomizations = (): LogExplorerCustomizations => ({
+  flyout: {
+    renderContent: renderFlyoutContent,
+  },
+});