🌊 Streams: Disable AI suggestions button if there is no sample data (#…

…213113) This PR makes the AI suggestions button more stable in case of misconfigured fields: * Only make the button clickable if there are sample values * Filter out sample documents that don't have the required field on the server (would have broken the request before) <img width="344" alt="Screenshot 2025-03-04 at 15 43 23" src="https://github.com/user-attachments/assets/12045985-cfac-4a13-a23c-595ac6503c1a" /> (cherry picked from commit 02b9f8f)
elastic · Mar 4, 2025 · ecdcd10 · ecdcd10
1 parent 28d6da2
commit ecdcd10
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 25 deletions.
diff --git a/...k/platform/plugins/shared/streams/server/routes/streams/processing/suggestions_handler.ts b/...k/platform/plugins/shared/streams/server/routes/streams/processing/suggestions_handler.ts
@@ -66,14 +66,20 @@ export function extractAndGroupPatterns(samples: FlattenRecord[], field: string)
   const NUMBER_PATTERN_CATEGORIES = 5;
   const NUMBER_SAMPLES_PER_PATTERN = 8;
 
-  const samplesWithPatterns = samples.map((sample) => {
-    const pattern = evalPattern(get(sample, field) as string);
-    return {
-      document: sample,
-      fullPattern: pattern,
-      truncatedPattern: pattern.slice(0, 10),
-      fieldValue: get(sample, field) as string,
-    };
+  const samplesWithPatterns = samples.flatMap((sample) => {
+    const value = get(sample, field);
+    if (typeof value !== 'string') {
+      return [];
+    }
+    const pattern = evalPattern(value);
+    return [
+      {
+        document: sample,
+        fullPattern: pattern,
+        truncatedPattern: pattern.slice(0, 10),
+        fieldValue: get(sample, field) as string,
+      },
+    ];
   });
 
   // Group samples by their truncated patterns

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
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import {
   EuiBadge,
   EuiButton,
@@ -40,12 +40,14 @@ const RefreshButton = ({
   selectConnector,
   currentConnector,
   isLoading,
+  hasValidField,
 }: {
   generatePatterns: () => void;
   selectConnector?: UseGenAIConnectorsResult['selectConnector'];
   connectors?: FindActionResult[];
   currentConnector?: string;
   isLoading: boolean;
+  hasValidField: boolean;
 }) => {
   const [isPopoverOpen, { off: closePopover, toggle: togglePopover }] = useBoolean(false);
   const splitButtonPopoverId = useGeneratedHtmlId({
@@ -55,21 +57,34 @@ const RefreshButton = ({
   return (
     <EuiFlexGroup responsive={false} gutterSize="xs" alignItems="center">
       <EuiFlexItem grow={false}>
-        <EuiButton
-          size="s"
-          iconType="sparkles"
-          data-test-subj="streamsAppGrokAiSuggestionsRefreshSuggestionsButton"
-          onClick={generatePatterns}
-          isLoading={isLoading}
-          disabled={currentConnector === undefined}
+        <EuiToolTip
+          content={
+            !hasValidField &&
+            i18n.translate(
+              'xpack.streams.streamDetailView.managementTab.enrichment.processorFlyout.refreshSuggestionsTooltip',
+              {
+                defaultMessage:
+                  'Make sure the configured field is valid and has samples in existing documents',
+              }
+            )
+          }
         >
-          {i18n.translate(
-            'xpack.streams.streamDetailView.managementTab.enrichment.processorFlyout.refreshSuggestions',
-            {
-              defaultMessage: 'Generate patterns',
-            }
-          )}
-        </EuiButton>
+          <EuiButton
+            size="s"
+            iconType="sparkles"
+            data-test-subj="streamsAppGrokAiSuggestionsRefreshSuggestionsButton"
+            onClick={generatePatterns}
+            isLoading={isLoading}
+            disabled={currentConnector === undefined || !hasValidField}
+          >
+            {i18n.translate(
+              'xpack.streams.streamDetailView.managementTab.enrichment.processorFlyout.refreshSuggestions',
+              {
+                defaultMessage: 'Generate patterns',
+              }
+            )}
+          </EuiButton>
+        </EuiToolTip>
       </EuiFlexItem>
       {connectors && connectors.length > 1 && (
         <EuiFlexItem grow={false}>
@@ -205,7 +220,16 @@ function InnerGrokAiSuggestions({
     content = <EuiCallOut color="danger">{suggestionsError.message}</EuiCallOut>;
   }
 
-  const currentPatterns = form.getValues().patterns;
+  const { field: currentFieldName, patterns: currentPatterns } = form.getValues();
+
+  const hasValidField = useMemo(() => {
+    return Boolean(
+      currentFieldName &&
+        filteredSamples.some(
+          (sample) => sample[currentFieldName] && typeof sample[currentFieldName] === 'string'
+        )
+    );
+  }, [filteredSamples, currentFieldName]);
 
   const filteredSuggestions = suggestions?.patterns
     .map((pattern, i) => ({
@@ -323,6 +347,7 @@ function InnerGrokAiSuggestions({
             connectors={genAiConnectors?.connectors}
             selectConnector={genAiConnectors?.selectConnector}
             currentConnector={currentConnector}
+            hasValidField={hasValidField}
           />
         </EuiFlexGroup>
       </EuiFlexItem>
@@ -365,7 +390,7 @@ export function GrokAiSuggestions() {
     );
   }
 
-  if (!isAiEnabled || !props.filteredSamples.length) {
+  if (!isAiEnabled) {
     return null;
   }
   return <InnerGrokAiSuggestions {...props} />;