[Security Solution][Alert Flyout] Convert rule name to rule flyout and enable rule previews

x-pack/plugins/security_solution/public/flyout/document_details/left/components/correlations_details_alerts_table.tsx

@@ -24,6 +24,9 @@ import { InvestigateInTimelineButton } from '../../../../common/components/event
 import { ACTION_INVESTIGATE_IN_TIMELINE } from '../../../../detections/components/alerts_table/translations';
 import { getDataProvider } from '../../../../common/components/event_details/use_action_cell_data_provider';
 import { AlertPreviewButton } from '../../../shared/components/alert_preview_button';
+import { PreviewLink } from '../../../shared/components/preview_link';
+import { useDocumentDetailsContext } from '../../shared/context';
+import { useBasicDataFromDetailsData } from '../../shared/hooks/use_basic_data_from_details_data';
 
 export const TIMESTAMP_DATE_FORMAT = 'MMM D, YYYY @ HH:mm:ss.SSS';
 const dataProviderLimit = 5;
@@ -82,6 +85,9 @@ export const CorrelationsDetailsAlertsTable: FC<CorrelationsDetailsAlertsTablePr
   } = usePaginatedAlerts(alertIds || []);
   const isPreviewEnabled = !useIsExperimentalFeatureEnabled('entityAlertPreviewDisabled');
 
+  const { dataFormattedForFieldBrowser } = useDocumentDetailsContext();
+  const { ruleId } = useBasicDataFromDetailsData(dataFormattedForFieldBrowser);
+
   const onTableChange = useCallback(
     ({ page, sort }: Criteria<Record<string, unknown>>) => {
       if (page) {
@@ -170,7 +176,13 @@ export const CorrelationsDetailsAlertsTable: FC<CorrelationsDetailsAlertsTablePr
         truncateText: true,
         render: (value: string) => (
           <CellTooltipWrapper tooltip={value}>
-            <span>{value}</span>
+            {isPreviewEnabled ? (
+              <PreviewLink field={ALERT_RULE_NAME} value={value} scopeId={scopeId} ruleId={ruleId}>
+                <span>{value}</span>
+              </PreviewLink>
+            ) : (
+              <span>{value}</span>
+            )}
           </CellTooltipWrapper>
         ),
       },
@@ -209,7 +221,7 @@ export const CorrelationsDetailsAlertsTable: FC<CorrelationsDetailsAlertsTablePr
         },
       },
     ],
-    [isPreviewEnabled, scopeId, dataTestSubj]
+    [isPreviewEnabled, scopeId, dataTestSubj, ruleId]
   );
 
   return (

x-pack/plugins/security_solution/public/flyout/document_details/left/components/prevalence_details.tsx

@@ -50,6 +50,7 @@ import { getEmptyTagValue } from '../../../../common/components/empty_value';
 import { IS_OPERATOR } from '../../../../../common/types';
 import { hasPreview, PreviewLink } from '../../../shared/components/preview_link';
 import { CellActions } from '../../shared/components/cell_actions';
+import { useBasicDataFromDetailsData } from '../../shared/hooks/use_basic_data_from_details_data';
 
 export const PREVALENCE_TAB_ID = 'prevalence';
 const DEFAULT_FROM = 'now-30d';
@@ -89,6 +90,10 @@ interface PrevalenceDetailsRow extends PrevalenceData {
    * Scope id to pass to the preview link
    */
   scopeId: string;
+  /**
+   * Id of the rule
+   */
+  ruleId: string;
 }
 
 const columns: Array<EuiBasicTableColumn<PrevalenceDetailsRow>> = [
@@ -123,6 +128,7 @@ const columns: Array<EuiBasicTableColumn<PrevalenceDetailsRow>> = [
                     field={data.field}
                     value={value}
                     scopeId={data.scopeId}
+                    ruleId={data.ruleId}
                     data-test-subj={PREVALENCE_DETAILS_TABLE_PREVIEW_LINK_CELL_TEST_ID}
                   >
                     <EuiText size="xs">{value}</EuiText>
@@ -329,6 +335,7 @@ const columns: Array<EuiBasicTableColumn<PrevalenceDetailsRow>> = [
 export const PrevalenceDetails: React.FC = () => {
   const { dataFormattedForFieldBrowser, investigationFields, scopeId } =
     useDocumentDetailsContext();
+  const { ruleId } = useBasicDataFromDetailsData(dataFormattedForFieldBrowser);
 
   const isPlatinumPlus = useLicense().isPlatinumPlus();
   const isPreviewEnabled = !useIsExperimentalFeatureEnabled('entityAlertPreviewDisabled');
@@ -384,8 +391,9 @@ export const PrevalenceDetails: React.FC = () => {
         isPlatinumPlus,
         isPreviewEnabled,
         scopeId,
+        ruleId,
       })),
-    [data, absoluteStart, absoluteEnd, isPlatinumPlus, isPreviewEnabled, scopeId]
+    [data, absoluteStart, absoluteEnd, isPlatinumPlus, isPreviewEnabled, scopeId, ruleId]
   );
 
   const upsell = (

x-pack/plugins/security_solution/public/flyout/document_details/right/components/alert_description.test.tsx

@@ -13,15 +13,15 @@ import {
   RULE_SUMMARY_BUTTON_TEST_ID,
   ALERT_DESCRIPTION_DETAILS_TEST_ID,
 } from './test_ids';
-import { AlertDescription, RULE_OVERVIEW_BANNER } from './alert_description';
+import { AlertDescription } from './alert_description';
 import { DocumentDetailsContext } from '../../shared/context';
 import { mockGetFieldsData } from '../../shared/mocks/mock_get_fields_data';
 import type { TimelineEventsDetailsItem } from '@kbn/timelines-plugin/common';
-import { DocumentDetailsRuleOverviewPanelKey } from '../../shared/constants/panel_keys';
 import { TestProviders } from '../../../../common/mock';
 import { useExpandableFlyoutApi } from '@kbn/expandable-flyout';
 import type { ExpandableFlyoutApi } from '@kbn/expandable-flyout';
 import { createTelemetryServiceMock } from '../../../../common/lib/telemetry/telemetry_service.mock';
+import { RulePreviewPanelKey, RULE_PREVIEW_BANNER } from '../../../rule_details/right';
 
 const mockedTelemetry = createTelemetryServiceMock();
 jest.mock('../../../../common/lib/kibana', () => {
@@ -150,13 +150,11 @@ describe('<AlertDescription />', () => {
       getByTestId(RULE_SUMMARY_BUTTON_TEST_ID).click();
 
       expect(flyoutContextValue.openPreviewPanel).toHaveBeenCalledWith({
-        id: DocumentDetailsRuleOverviewPanelKey,
+        id: RulePreviewPanelKey,
         params: {
-          id: panelContext.eventId,
-          indexName: panelContext.indexName,
-          scopeId: panelContext.scopeId,
-          banner: RULE_OVERVIEW_BANNER,
+          banner: RULE_PREVIEW_BANNER,
           ruleId: ruleUuid.values[0],
+          isPreviewMode: true,
         },
       });
     });

x-pack/plugins/security_solution/public/flyout/document_details/right/components/alert_description.tsx

@@ -21,43 +21,32 @@ import {
   ALERT_DESCRIPTION_TITLE_TEST_ID,
   RULE_SUMMARY_BUTTON_TEST_ID,
 } from './test_ids';
-import { DocumentDetailsRuleOverviewPanelKey } from '../../shared/constants/panel_keys';
-
-export const RULE_OVERVIEW_BANNER = {
-  title: i18n.translate('xpack.securitySolution.flyout.right.about.description.rulePreviewTitle', {
-    defaultMessage: 'Preview rule details',
-  }),
-  backgroundColor: 'warning',
-  textColor: 'warning',
-};
+import { RULE_PREVIEW_BANNER, RulePreviewPanelKey } from '../../../rule_details/right';
 
 /**
  * Displays the rule description of a signal document.
  */
 export const AlertDescription: FC = () => {
   const { telemetry } = useKibana().services;
-  const { dataFormattedForFieldBrowser, scopeId, eventId, indexName, isPreview } =
-    useDocumentDetailsContext();
+  const { dataFormattedForFieldBrowser, scopeId, isPreview } = useDocumentDetailsContext();
   const { isAlert, ruleDescription, ruleName, ruleId } = useBasicDataFromDetailsData(
     dataFormattedForFieldBrowser
   );
   const { openPreviewPanel } = useExpandableFlyoutApi();
   const openRulePreview = useCallback(() => {
     openPreviewPanel({
-      id: DocumentDetailsRuleOverviewPanelKey,
+      id: RulePreviewPanelKey,
       params: {
-        id: eventId,
-        indexName,
-        scopeId,
-        banner: RULE_OVERVIEW_BANNER,
         ruleId,
+        banner: RULE_PREVIEW_BANNER,
+        isPreviewMode: true,
       },
     });
     telemetry.reportDetailsFlyoutOpened({
       location: scopeId,
       panel: 'preview',
     });
-  }, [eventId, openPreviewPanel, indexName, scopeId, ruleId, telemetry]);
+  }, [openPreviewPanel, scopeId, ruleId, telemetry]);
 
   const viewRule = useMemo(
     () => (

x-pack/plugins/security_solution/public/flyout/document_details/right/components/highlighted_fields_cell.tsx

@@ -25,6 +25,7 @@ import {
   HIGHLIGHTED_FIELDS_LINKED_CELL_TEST_ID,
 } from './test_ids';
 import { hasPreview, PreviewLink } from '../../../shared/components/preview_link';
+import { useBasicDataFromDetailsData } from '../../shared/hooks/use_basic_data_from_details_data';
 
 export interface HighlightedFieldsCellProps {
   /**
@@ -49,7 +50,8 @@ export const HighlightedFieldsCell: VFC<HighlightedFieldsCellProps> = ({
   field,
   originalField = '',
 }) => {
-  const { scopeId, eventId, indexName } = useDocumentDetailsContext();
+  const { scopeId, eventId, indexName, dataFormattedForFieldBrowser } = useDocumentDetailsContext();
+  const { ruleId } = useBasicDataFromDetailsData(dataFormattedForFieldBrowser);
   const { openLeftPanel } = useExpandableFlyoutApi();
   const isPreviewEnabled = !useIsExperimentalFeatureEnabled('entityAlertPreviewDisabled');
 
@@ -84,6 +86,7 @@ export const HighlightedFieldsCell: VFC<HighlightedFieldsCellProps> = ({
                   field={field}
                   value={value}
                   scopeId={scopeId}
+                  ruleId={ruleId}
                   data-test-subj={HIGHLIGHTED_FIELDS_LINKED_CELL_TEST_ID}
                 />
               ) : hasPreview(field) ? (

x-pack/plugins/security_solution/public/flyout/document_details/right/components/table_field_value_cell.test.tsx

@@ -84,6 +84,7 @@ describe('TableFieldValueCell', () => {
               data={hostIpData}
               eventId={eventId}
               values={hostIpValues}
+              ruleId="ruleId"
             />
           </DocumentDetailsContext.Provider>
         </TestProviders>
@@ -106,6 +107,7 @@ describe('TableFieldValueCell', () => {
               eventId={eventId}
               fieldFromBrowserField={undefined} // <-- no metadata
               values={hostIpValues}
+              ruleId="ruleId"
             />
           </DocumentDetailsContext.Provider>
         </TestProviders>
@@ -152,6 +154,7 @@ describe('TableFieldValueCell', () => {
               eventId={eventId}
               fieldFromBrowserField={messageFieldFromBrowserField}
               values={messageValues}
+              ruleId="ruleId"
             />
           </DocumentDetailsContext.Provider>
         </TestProviders>
@@ -188,6 +191,7 @@ describe('TableFieldValueCell', () => {
               eventId={eventId}
               fieldFromBrowserField={hostIpFieldFromBrowserField} // <-- metadata
               values={hostIpValues}
+              ruleId="ruleId"
             />
           </DocumentDetailsContext.Provider>
         </TestProviders>

x-pack/plugins/security_solution/public/flyout/document_details/right/components/table_field_value_cell.tsx

@@ -34,6 +34,10 @@ export interface FieldValueCellProps {
    * Field retrieved from the BrowserField
    */
   fieldFromBrowserField?: Partial<FieldSpec>;
+  /**
+   * Id of the rule
+   */
+  ruleId: string;
   /**
    * Value of the link field if it exists. Allows to navigate to other pages like host, user, network...
    */
@@ -53,6 +57,7 @@ export const TableFieldValueCell = memo(
     data,
     eventId,
     fieldFromBrowserField,
+    ruleId,
     getLinkValue,
     values,
   }: FieldValueCellProps) => {
@@ -87,6 +92,7 @@ export const TableFieldValueCell = memo(
                   field={data.field}
                   value={value}
                   scopeId={scopeId}
+                  ruleId={ruleId}
                   data-test-subj={`${FLYOUT_TABLE_PREVIEW_LINK_FIELD_TEST_ID}-${i}`}
                 />
               ) : (

x-pack/plugins/security_solution/public/flyout/document_details/right/tabs/table_tab.tsx

@@ -26,6 +26,7 @@ import type { EventFieldsData } from '../../../../common/components/event_detail
 import { CellActions } from '../../shared/components/cell_actions';
 import { useDocumentDetailsContext } from '../../shared/context';
 import { isInTableScope, isTimelineScope } from '../../../../helpers';
+import { useBasicDataFromDetailsData } from '../../shared/hooks/use_basic_data_from_details_data';
 
 const COUNT_PER_PAGE_OPTIONS = [25, 50, 100];
 
@@ -76,13 +77,23 @@ export type ColumnsProvider = (providerOptions: {
    * Maintain backwards compatibility // TODO remove when possible
    */
   scopeId: string;
+  /**
+   * Id of the rule
+   */
+  ruleId: string;
   /**
    * Value of the link field if it exists. Allows to navigate to other pages like host, user, network...
    */
   getLinkValue: (field: string) => string | null;
 }) => Array<EuiBasicTableColumn<TimelineEventsDetailsItem>>;
 
-export const getColumns: ColumnsProvider = ({ browserFields, eventId, scopeId, getLinkValue }) => [
+export const getColumns: ColumnsProvider = ({
+  browserFields,
+  eventId,
+  scopeId,
+  getLinkValue,
+  ruleId,
+}) => [
   {
     field: 'field',
     name: (
@@ -113,6 +124,7 @@ export const getColumns: ColumnsProvider = ({ browserFields, eventId, scopeId, g
             eventId={eventId}
             fieldFromBrowserField={fieldFromBrowserField}
             getLinkValue={getLinkValue}
+            ruleId={ruleId}
             values={values}
           />
         </CellActions>
@@ -129,6 +141,7 @@ export const TableTab = memo(() => {
 
   const { browserFields, dataFormattedForFieldBrowser, eventId, scopeId } =
     useDocumentDetailsContext();
+  const { ruleId } = useBasicDataFromDetailsData(dataFormattedForFieldBrowser);
 
   const [pagination, setPagination] = useState<{ pageIndex: number }>({
     pageIndex: 0,
@@ -199,8 +212,9 @@ export const TableTab = memo(() => {
         eventId,
         scopeId,
         getLinkValue,
+        ruleId,
       }),
-    [browserFields, eventId, scopeId, getLinkValue]
+    [browserFields, eventId, scopeId, getLinkValue, ruleId]
   );
 
   return (