rule toolbar + rule status failed

elastic · Feb 19, 2025 · 0b0a84d · 0b0a84d
1 parent c6e83ee
commit 0b0a84d
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 27 deletions.
diff --git a/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/new_chat_by_title/index.tsx b/x-pack/platform/packages/shared/kbn-elastic-assistant/impl/new_chat_by_title/index.tsx
@@ -14,6 +14,8 @@ export interface Props {
   /** Optionally render new chat as a link */
   asLink?: boolean;
   children?: React.ReactNode;
+  /** Optionally specify color of empty button */
+  color?: 'text' | 'accent' | 'primary' | 'success' | 'warning' | 'danger';
   showAssistantOverlay: (show: boolean) => void;
   /** Defaults to `discuss`. If null, the button will not have an icon */
   iconType?: string | null;
@@ -24,6 +26,7 @@ export interface Props {
 const NewChatByTitleComponent: React.FC<Props> = ({
   asLink = false,
   children = i18n.NEW_CHAT,
+  color = 'primary',
   showAssistantOverlay,
   iconType,
   iconOnly = false,
@@ -44,7 +47,7 @@ const NewChatByTitleComponent: React.FC<Props> = ({
   return useMemo(
     () =>
       asLink ? (
-        <EuiLink data-test-subj="newChatLink" onClick={showOverlay}>
+        <EuiLink color={color} data-test-subj="newChatLink" onClick={showOverlay}>
           {children}
         </EuiLink>
       ) : iconOnly ? (
@@ -59,6 +62,7 @@ const NewChatByTitleComponent: React.FC<Props> = ({
         </EuiToolTip>
       ) : (
         <EuiButtonEmpty
+          color={color}
           data-test-subj="newChatByTitle"
           iconType={icon}
           onClick={showOverlay}
@@ -67,7 +71,7 @@ const NewChatByTitleComponent: React.FC<Props> = ({
           {children}
         </EuiButtonEmpty>
       ),
-    [children, icon, showOverlay, iconOnly]
+    [asLink, color, showOverlay, children, iconOnly, icon]
   );
 };
 

diff --git a/...curity/packages/ecs-data-quality-dashboard/impl/data_quality_panel/actions/chat/index.tsx b/...curity/packages/ecs-data-quality-dashboard/impl/data_quality_panel/actions/chat/index.tsx
@@ -52,7 +52,7 @@ const ChatActionComponent: FC<Props> = ({ indexName, markdownComment, chatTitle
     isAssistantEnabled
   );
   return (
-    <NewChatByTitle asLink showAssistantOverlay={showAssistantOverlay} iconType={null}>
+    <NewChatByTitle asLink showAssistantOverlay={showAssistantOverlay}>
       <span css={styles.linkText}>
         <AssistantIcon />
         {ASK_ASSISTANT}

diff --git a/...ns/security_solution/public/detection_engine/rule_details_ui/pages/rule_details/index.tsx b/...ns/security_solution/public/detection_engine/rule_details_ui/pages/rule_details/index.tsx
@@ -433,6 +433,7 @@ const RuleDetailsPageComponent: React.FC<DetectionEngineComponentProps> = ({
       </EuiFlexItem>
     ) : (
       <RuleStatusFailedCallOut
+        ruleNameForChat={rule?.name ?? ruleI18n.DETECTION_RULES_CONVERSATION_ID}
         ruleName={rule?.immutable ? rule?.name : undefined}
         dataSources={rule?.immutable ? ruleIndex : undefined}
         status={lastExecutionStatus}

diff --git a/...public/detection_engine/rule_management_ui/components/rules_table/rules_table_toolbar.tsx b/...public/detection_engine/rule_management_ui/components/rules_table/rules_table_toolbar.tsx
@@ -7,7 +7,7 @@
 
 import React, { useCallback, useMemo } from 'react';
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
-import { NewChat } from '@kbn/elastic-assistant';
+import { NewChatByTitle, useAssistantOverlay } from '@kbn/elastic-assistant';
 import { useUserData } from '../../../../detections/components/user_info';
 import { TabNavigation } from '../../../../common/components/navigation/tab_navigation';
 import { usePrebuiltRulesStatus } from '../../../rule_management/logic/prebuilt_rules/use_prebuilt_rules_status';
@@ -86,27 +86,36 @@ export const RulesTableToolbar = React.memo(() => {
     () => rules.filter((rule) => selectedRuleIds.includes(rule.id)),
     [rules, selectedRuleIds]
   );
+
+  const selectedRuleNames = useMemo(() => selectedRules.map((rule) => rule.name), [selectedRules]);
   const getPromptContext = useCallback(
     async () => getPromptContextFromDetectionRules(selectedRules),
     [selectedRules]
   );
 
+  const chatTitle = useMemo(() => {
+    return `${i18nAssistant.DETECTION_RULES_CONVERSATION_ID} - ${selectedRuleNames.join(', ')}`;
+  }, [selectedRuleNames]);
+
+  const { showAssistantOverlay } = useAssistantOverlay(
+    'detection-rules',
+    chatTitle,
+    i18nAssistant.RULE_MANAGEMENT_CONTEXT_DESCRIPTION,
+    getPromptContext,
+    null,
+    i18nAssistant.EXPLAIN_THEN_SUMMARIZE_RULE_DETAILS,
+    i18nAssistant.RULE_MANAGEMENT_CONTEXT_TOOLTIP,
+    isAssistantEnabled
+  );
+
   return (
     <EuiFlexGroup justifyContent={'spaceBetween'}>
       <EuiFlexItem grow={false}>
         <TabNavigation navTabs={ruleTabs} />
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
         {hasAssistantPrivilege && selectedRules.length > 0 && (
-          <NewChat
-            category="detection-rules"
-            conversationId={i18nAssistant.DETECTION_RULES_CONVERSATION_ID}
-            description={i18nAssistant.RULE_MANAGEMENT_CONTEXT_DESCRIPTION}
-            getPromptContext={getPromptContext}
-            suggestedUserPrompt={i18nAssistant.EXPLAIN_THEN_SUMMARIZE_RULE_DETAILS}
-            tooltip={i18nAssistant.RULE_MANAGEMENT_CONTEXT_TOOLTIP}
-            isAssistantEnabled={isAssistantEnabled}
-          />
+          <NewChatByTitle showAssistantOverlay={showAssistantOverlay} />
         )}
       </EuiFlexItem>
     </EuiFlexGroup>

diff --git a/...n/public/detections/components/rules/rule_execution_status/rule_status_failed_callout.tsx b/...n/public/detections/components/rules/rule_execution_status/rule_status_failed_callout.tsx
@@ -5,21 +5,21 @@
  * 2.0.
  */
 
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 
 import { css } from '@emotion/react';
 import { EuiCallOut, EuiCodeBlock } from '@elastic/eui';
 
-import { NewChat } from '@kbn/elastic-assistant';
+import { NewChatByTitle, useAssistantOverlay } from '@kbn/elastic-assistant';
 import { FormattedDate } from '../../../../common/components/formatted_date';
 import type { RuleExecutionStatus } from '../../../../../common/api/detection_engine/rule_monitoring';
 import { RuleExecutionStatusEnum } from '../../../../../common/api/detection_engine/rule_monitoring';
 
 import * as i18n from './translations';
-import * as i18nAssistant from '../../../pages/detection_engine/rules/translations';
 import { useAssistantAvailability } from '../../../../assistant/use_assistant_availability';
 
 interface RuleStatusFailedCallOutProps {
+  ruleNameForChat: string;
   ruleName?: string | undefined;
   dataSources?: string[] | undefined;
   date: string;
@@ -29,6 +29,7 @@ interface RuleStatusFailedCallOutProps {
 
 const RuleStatusFailedCallOutComponent: React.FC<RuleStatusFailedCallOutProps> = ({
   ruleName,
+  ruleNameForChat,
   dataSources,
   date,
   message,
@@ -43,6 +44,20 @@ const RuleStatusFailedCallOutComponent: React.FC<RuleStatusFailedCallOutProps> =
         : `Error message: ${message}`,
     [message, ruleName, dataSources]
   );
+
+  const chatTitle = useMemo(() => {
+    return `${ruleNameForChat} - ${title} ${date}`;
+  }, [date, title, ruleNameForChat]);
+  const { showAssistantOverlay } = useAssistantOverlay(
+    'detection-rules',
+    chatTitle,
+    i18n.ASK_ASSISTANT_DESCRIPTION,
+    getPromptContext,
+    null,
+    i18n.ASK_ASSISTANT_USER_PROMPT,
+    i18n.ASK_ASSISTANT_TOOLTIP,
+    isAssistantEnabled
+  );
   if (!shouldBeDisplayed) {
     return null;
   }
@@ -77,18 +92,9 @@ const RuleStatusFailedCallOutComponent: React.FC<RuleStatusFailedCallOutProps> =
           {message}
         </EuiCodeBlock>
         {hasAssistantPrivilege && (
-          <NewChat
-            category="detection-rules"
-            color={color}
-            conversationId={i18nAssistant.DETECTION_RULES_CONVERSATION_ID}
-            description={i18n.ASK_ASSISTANT_DESCRIPTION}
-            getPromptContext={getPromptContext}
-            suggestedUserPrompt={i18n.ASK_ASSISTANT_USER_PROMPT}
-            tooltip={i18n.ASK_ASSISTANT_TOOLTIP}
-            isAssistantEnabled={isAssistantEnabled}
-          >
+          <NewChatByTitle showAssistantOverlay={showAssistantOverlay} color={color}>
             {i18n.ASK_ASSISTANT_ERROR_BUTTON}
-          </NewChat>
+          </NewChatByTitle>
         )}
       </EuiCallOut>
     </div>