elastic · kibanamachine · Apr 1, 2025 · Apr 1, 2025 · Apr 1, 2025
diff --git a/.../public/components/data_management/stream_detail_enrichment/processor_outcome_preview.tsx b/.../public/components/data_management/stream_detail_enrichment/processor_outcome_preview.tsx
@@ -30,6 +30,7 @@ import {
   getTableColumns,
   previewDocsFilterOptions,
 } from './state_management/simulation_state_machine';
+import { selectPreviewDocuments } from './state_management/simulation_state_machine/selectors';
 
 export const ProcessorOutcomePreview = () => {
   const isLoading = useSimulatorSelector(
@@ -140,7 +141,9 @@ const OutcomePreviewTable = () => {
   const processors = useSimulatorSelector((state) => state.context.processors);
   const detectedFields = useSimulatorSelector((state) => state.context.simulation?.detected_fields);
   const previewDocsFilter = useSimulatorSelector((state) => state.context.previewDocsFilter);
-  const previewDocuments = useSimulatorSelector((state) => state.context.previewDocuments);
+  const previewDocuments = useSimulatorSelector((snapshot) =>
+    selectPreviewDocuments(snapshot.context)
+  );
 
   const previewColumns = useMemo(
     () => getTableColumns(processors, detectedFields ?? [], previewDocsFilter),

diff --git a/...mponents/data_management/stream_detail_enrichment/processors/grok/grok_ai_suggestions.tsx b/...mponents/data_management/stream_detail_enrichment/processors/grok/grok_ai_suggestions.tsx
@@ -29,10 +29,12 @@ import type { FindActionResult } from '@kbn/actions-plugin/server';
 import { UseGenAIConnectorsResult } from '@kbn/observability-ai-assistant-plugin/public/hooks/use_genai_connectors';
 import { useAbortController, useBoolean } from '@kbn/react-hooks';
 import useObservable from 'react-use/lib/useObservable';
+import { css } from '@emotion/css';
 import { useStreamDetail } from '../../../../../hooks/use_stream_detail';
 import { useKibana } from '../../../../../hooks/use_kibana';
 import { GrokFormState, ProcessorFormState } from '../../types';
 import { useSimulatorSelector } from '../../state_management/stream_enrichment_state_machine';
+import { selectPreviewDocuments } from '../../state_management/simulation_state_machine/selectors';
 
 const RefreshButton = ({
   generatePatterns,
@@ -353,7 +355,15 @@ function InnerGrokAiSuggestions({
   return (
     <>
       {content != null && (
-        <EuiFlexGroup direction="column" gutterSize="m">
+        <EuiFlexGroup
+          direction="column"
+          gutterSize="m"
+          // make sure the content is always filling the full width so the
+          // refresh button is rendered below in all cases
+          className={css`
+            width: 100%;
+          `}
+        >
           {content}
         </EuiFlexGroup>
       )}
@@ -379,7 +389,9 @@ export function GrokAiSuggestions() {
   } = useKibana();
   const { enabled: isAiEnabled, couldBeEnabled } = useAiEnabled();
   const { definition } = useStreamDetail();
-  const previewDocuments = useSimulatorSelector((state) => state.context.previewDocuments);
+  const previewDocuments = useSimulatorSelector((snapshot) =>
+    selectPreviewDocuments(snapshot.context)
+  );
 
   if (!isAiEnabled && couldBeEnabled) {
     return (

diff --git a/...reams_app/public/components/data_management/stream_detail_enrichment/processors/index.tsx b/...reams_app/public/components/data_management/stream_detail_enrichment/processors/index.tsx
@@ -44,7 +44,7 @@ import {
   useStreamEnrichmentEvents,
   useStreamsEnrichmentSelector,
   useSimulatorSelector,
-  StreamEnrichmentContext,
+  StreamEnrichmentContextType,
 } from '../state_management/stream_enrichment_state_machine';
 import { ProcessorMetrics } from '../state_management/simulation_state_machine';
 import { DateProcessorForm } from './date';
@@ -194,7 +194,7 @@ const createDraftProcessorFromForm = (
 };
 
 export interface EditProcessorPanelProps {
-  processorRef: StreamEnrichmentContext['processorsRefs'][number];
+  processorRef: StreamEnrichmentContextType['processorsRefs'][number];
   processorMetrics?: ProcessorMetrics;
 }
 

diff --git a/...anagement/stream_detail_enrichment/state_management/simulation_state_machine/selectors.ts b/...anagement/stream_detail_enrichment/state_management/simulation_state_machine/selectors.ts
@@ -0,0 +1,26 @@
+/*
+ * 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 { createSelector } from 'reselect';
+import { filterSimulationDocuments } from './utils';
+import { SimulationActorSnapshot } from './simulation_state_machine';
+
+const EMPTY_ARRAY: [] = [];
+
+export const selectPreviewDocuments = createSelector(
+  [
+    (snapshot: SimulationActorSnapshot['context']) => snapshot.samples,
+    (snapshot: SimulationActorSnapshot['context']) => snapshot.previewDocsFilter,
+    (snapshot: SimulationActorSnapshot['context']) => snapshot.simulation?.documents,
+  ],
+  (samples, previewDocsFilter, documents) => {
+    return (
+      (previewDocsFilter && documents
+        ? filterSimulationDocuments(documents, previewDocsFilter)
+        : samples) || EMPTY_ARRAY
+    );
+  }
+);
diff --git a/...m_detail_enrichment/state_management/simulation_state_machine/simulation_state_machine.ts b/...m_detail_enrichment/state_management/simulation_state_machine/simulation_state_machine.ts
@@ -30,7 +30,7 @@ import {
   createSimulationRunnerActor,
   createSimulationRunFailureNofitier,
 } from './simulation_runner_actor';
-import { filterSimulationDocuments, composeSamplingCondition } from './utils';
+import { composeSamplingCondition } from './utils';
 
 export type SimulationActorRef = ActorRefFrom<typeof simulationMachine>;
 export type SimulationActorSnapshot = SnapshotFrom<typeof simulationMachine>;
@@ -72,13 +72,6 @@ export const simulationMachine = setup({
     storeSimulation: assign((_, params: { simulation: Simulation | undefined }) => ({
       simulation: params.simulation,
     })),
-    derivePreviewDocuments: assign(({ context }) => {
-      return {
-        previewDocuments: context.simulation
-          ? filterSimulationDocuments(context.simulation.documents, context.previewDocsFilter)
-          : context.samples,
-      };
-    }),
     deriveSamplingCondition: assign(({ context }) => ({
       samplingCondition: composeSamplingCondition(context.processors),
     })),
@@ -125,14 +118,11 @@ export const simulationMachine = setup({
   on: {
     'dateRange.update': '.loadingSamples',
     'simulation.changePreviewDocsFilter': {
-      actions: [
-        { type: 'storePreviewDocsFilter', params: ({ event }) => event },
-        { type: 'derivePreviewDocuments' },
-      ],
+      actions: [{ type: 'storePreviewDocsFilter', params: ({ event }) => event }],
     },
     'simulation.reset': {
       target: '.idle',
-      actions: [{ type: 'resetSimulation' }, { type: 'derivePreviewDocuments' }],
+      actions: [{ type: 'resetSimulation' }],
     },
     // Handle adding/reordering processors
     'processors.*': {
@@ -158,7 +148,7 @@ export const simulationMachine = setup({
       },
       {
         target: '.idle',
-        actions: [{ type: 'resetSimulation' }, { type: 'derivePreviewDocuments' }],
+        actions: [{ type: 'resetSimulation' }],
       },
     ],
   },
@@ -210,10 +200,7 @@ export const simulationMachine = setup({
         }),
         onDone: {
           target: 'assertingSimulationRequirements',
-          actions: [
-            { type: 'storeSamples', params: ({ event }) => ({ samples: event.output }) },
-            { type: 'derivePreviewDocuments' },
-          ],
+          actions: [{ type: 'storeSamples', params: ({ event }) => ({ samples: event.output }) }],
         },
         onError: {
           target: 'idle',
@@ -251,7 +238,6 @@ export const simulationMachine = setup({
           target: 'idle',
           actions: [
             { type: 'storeSimulation', params: ({ event }) => ({ simulation: event.output }) },
-            { type: 'derivePreviewDocuments' },
           ],
         },
         onError: {

diff --git a/...hment/state_management/stream_enrichment_state_machine/stream_enrichment_state_machine.ts b/...hment/state_management/stream_enrichment_state_machine/stream_enrichment_state_machine.ts
@@ -23,7 +23,7 @@ import {
 } from '@kbn/streams-schema';
 import { htmlIdGenerator } from '@elastic/eui';
 import {
-  StreamEnrichmentContext,
+  StreamEnrichmentContextType,
   StreamEnrichmentEvent,
   StreamEnrichmentInput,
   StreamEnrichmentServiceDependencies,
@@ -49,7 +49,7 @@ export type StreamEnrichmentActorRef = ActorRefFrom<typeof streamEnrichmentMachi
 export const streamEnrichmentMachine = setup({
   types: {
     input: {} as StreamEnrichmentInput,
-    context: {} as StreamEnrichmentContext,
+    context: {} as StreamEnrichmentContextType,
     events: {} as StreamEnrichmentEvent,
   },
   actors: {
@@ -346,7 +346,7 @@ export const createStreamEnrichmentMachineImplementations = ({
   },
 });
 
-function getStagedProcessors(context: StreamEnrichmentContext) {
+function getStagedProcessors(context: StreamEnrichmentContextType) {
   return context.processorsRefs
     .map((proc) => proc.getSnapshot())
     .filter((proc) => proc.context.isNew)

diff --git a/...gement/stream_detail_enrichment/state_management/stream_enrichment_state_machine/types.ts b/...gement/stream_detail_enrichment/state_management/stream_enrichment_state_machine/types.ts
@@ -24,7 +24,7 @@ export interface StreamEnrichmentInput {
   definition: IngestStreamGetResponse;
 }
 
-export interface StreamEnrichmentContext {
+export interface StreamEnrichmentContextType {
   definition: IngestStreamGetResponse;
   initialProcessorsRefs: ProcessorActorRef[];
   processorsRefs: ProcessorActorRef[];