[RAC] integrating rbac search strategy with alert flyout

x-pack/plugins/cases/public/components/case_view/index.tsx

@@ -105,6 +105,7 @@ export const CaseComponent = React.memo<CaseComponentProps>(
  const [initLoadingData, setInitLoadingData] = useState(true);
  const init = useRef(true);
  const timelineUi = useTimelineContext()?.ui;
+ const alertConsumers = useTimelineContext()?.alertConsumers;
 
  const {
  caseUserActions,
@@ -486,7 +487,9 @@ export const CaseComponent = React.memo<CaseComponentProps>(
  </EuiFlexGroup>
  </ContentWrapper>
  </WhitePageWrapper>
- {timelineUi?.renderTimelineDetailsPanel ? timelineUi.renderTimelineDetailsPanel() : null}
+ {timelineUi?.renderTimelineDetailsPanel
+ ? timelineUi.renderTimelineDetailsPanel({ alertConsumers })
+ : null}
  </>
  );
  }

x-pack/plugins/cases/public/components/timeline_context/index.tsx

@@ -7,6 +7,7 @@
 
 import React, { useState } from 'react';
 import { EuiMarkdownEditorUiPlugin, EuiMarkdownAstNodePosition } from '@elastic/eui';
+import type { AlertConsumers } from '@kbn/rule-data-utils/target/alerts_as_data_rbac';
 import { Plugin } from 'unified';
 /**
  * @description - manage the plugins, hooks, and ui components needed to enable timeline functionality within the cases plugin
@@ -28,6 +29,7 @@ interface TimelineProcessingPluginRendererProps {
 }
 
 export interface CasesTimelineIntegration {
+ alertConsumers?: AlertConsumers[];
  editor_plugins: {
  parsingPlugin: Plugin;
  processingPluginRenderer: React.FC<
@@ -43,7 +45,11 @@ export interface CasesTimelineIntegration {
  };
  ui?: {
  renderInvestigateInTimelineActionComponent?: (alertIds: string[]) => JSX.Element;
- renderTimelineDetailsPanel?: () => JSX.Element;
+ renderTimelineDetailsPanel?: ({
+ alertConsumers,
+ }: {
+ alertConsumers?: AlertConsumers[];
+ }) => JSX.Element;
  };
 }
 

x-pack/plugins/security_solution/public/cases/components/case_view/index.tsx

@@ -7,6 +7,7 @@
 
 import React, { useCallback, useRef, useState } from 'react';
 import { useDispatch } from 'react-redux';
+import { AlertConsumers } from '@kbn/rule-data-utils/target/alerts_as_data_rbac';
 
 import {
  getCaseDetailsUrl,
@@ -33,6 +34,7 @@ import { SpyRoute } from '../../../common/utils/route/spy_routes';
 import * as timelineMarkdownPlugin from '../../../common/components/markdown_editor/plugins/timeline';
 import { CaseDetailsRefreshContext } from '../../../common/components/endpoint/host_isolation/endpoint_host_isolation_cases_context';
 import { getEndpointDetailsPath } from '../../../management/common/routing';
+import { EntityType } from '../../../timelines/containers/details';
 
 interface Props {
  caseId: string;
@@ -53,13 +55,17 @@ export interface CaseProps extends Props {
  updateCase: (newCase: Case) => void;
 }
 
-const TimelineDetailsPanel = () => {
+const ALERT_CONSUMER: AlertConsumers[] = [AlertConsumers.SIEM];
+
+const TimelineDetailsPanel = ({ alertConsumers }: { alertConsumers?: AlertConsumers[] }) => {
  const { browserFields, docValueFields } = useSourcererScope(SourcererScopeName.detections);
 
  return (
  <DetailsPanel
+ alertConsumers={alertConsumers}
  browserFields={browserFields}
  docValueFields={docValueFields}
+ entityType={EntityType.ALERTS}
  isFlyoutView
  timelineId={TimelineId.casePage}
  />
@@ -228,6 +234,7 @@ export const CaseView = React.memo(({ caseId, subCaseId, userCanCrud }: Props) =
  showAlertDetails,
  subCaseId,
  timelineIntegration: {
+ alertConsumers: ALERT_CONSUMER,
  editor_plugins: {
  parsingPlugin: timelineMarkdownPlugin.parser,
  processingPluginRenderer: timelineMarkdownPlugin.renderer,

x-pack/plugins/security_solution/public/common/components/events_viewer/index.tsx

@@ -11,6 +11,7 @@ import deepEqual from 'fast-deep-equal';
 import styled from 'styled-components';
 
 import { isEmpty } from 'lodash/fp';
+import { AlertConsumers } from '@kbn/rule-data-utils/target/alerts_as_data_rbac';
 import { inputsModel, inputsSelectors, State } from '../../store';
 import { inputsActions } from '../../store/actions';
 import { ControlColumnProps, RowRenderer, TimelineId } from '../../../../common/types/timeline';
@@ -30,6 +31,7 @@ import { useKibana } from '../../lib/kibana';
 import { defaultControlColumn } from '../../../timelines/components/timeline/body/control_columns';
 import { EventsViewer } from './events_viewer';
 import * as i18n from './translations';
+import { EntityType } from '../../../timelines/containers/details';
 
 const EMPTY_CONTROL_COLUMNS: ControlColumnProps[] = [];
 const leadingControlColumns: ControlColumnProps[] = [
@@ -67,6 +69,8 @@ export interface OwnProps {
 
 type Props = OwnProps & PropsFromRedux;
 
+const alertConsumers: AlertConsumers[] = [AlertConsumers.SIEM];
+
 /**
  * The stateful events viewer component is the highest level component that is utilized across the security_solution pages layer where
  * timeline is used BESIDES the flyout. The flyout makes use of the `EventsViewer` component which is a subcomponent here
@@ -205,7 +209,9 @@ const StatefulEventsViewerComponent: React.FC<Props> = ({
  </InspectButtonContainer>
  </FullScreenContainer>
  <DetailsPanel
+ alertConsumers={alertConsumers}
  browserFields={browserFields}
+ entityType={EntityType.ALERTS}
  docValueFields={docValueFields}
  isFlyoutView
  timelineId={id}

x-pack/plugins/security_solution/public/timelines/components/side_panel/event_details/index.tsx

@@ -17,9 +17,10 @@ import {
 import React, { useState, useCallback, useMemo } from 'react';
 import styled from 'styled-components';
 import deepEqual from 'fast-deep-equal';
+import { AlertConsumers } from '@kbn/rule-data-utils/target/alerts_as_data_rbac';
 import { BrowserFields, DocValueFields } from '../../../../common/containers/source';
 import { ExpandableEvent, ExpandableEventTitle } from './expandable_event';
-import { useTimelineEventsDetails } from '../../../containers/details';
+import { EntityType, useTimelineEventsDetails } from '../../../containers/details';
 import { TimelineTabs } from '../../../../../common/types/timeline';
 import { HostIsolationPanel } from '../../../../detections/components/host_isolation';
 import { EndpointIsolateSuccess } from '../../../../common/components/endpoint/host_isolation';
@@ -49,8 +50,10 @@ const StyledEuiFlyoutBody = styled(EuiFlyoutBody)`
 `;
 
 interface EventDetailsPanelProps {
+ alertConsumers?: AlertConsumers[];
  browserFields: BrowserFields;
  docValueFields: DocValueFields[];
+ entityType?: EntityType;
  expandedEvent: {
  eventId: string;
  indexName: string;
@@ -65,16 +68,20 @@ interface EventDetailsPanelProps {
 }
 
 const EventDetailsPanelComponent: React.FC<EventDetailsPanelProps> = ({
+ alertConsumers,
  browserFields,
  docValueFields,
+ entityType,
  expandedEvent,
  handleOnEventClosed,
  isFlyoutView,
  tabType,
  timelineId,
 }) => {
  const [loading, detailsData] = useTimelineEventsDetails({
+ alertConsumers,
  docValueFields,
+ entityType,
  indexName: expandedEvent.indexName ?? '',
  eventId: expandedEvent.eventId ?? '',
  skip: !expandedEvent.eventId,

x-pack/plugins/security_solution/public/timelines/components/side_panel/index.tsx

@@ -8,6 +8,8 @@
 import React, { useCallback, useMemo } from 'react';
 import { useDispatch } from 'react-redux';
 import { EuiFlyout, EuiFlyoutProps } from '@elastic/eui';
+import { AlertConsumers } from '@kbn/rule-data-utils/target/alerts_as_data_rbac';
+
 import { timelineActions, timelineSelectors } from '../../store/timeline';
 import { timelineDefaults } from '../../store/timeline/defaults';
 import { BrowserFields, DocValueFields } from '../../../common/containers/source';
@@ -16,10 +18,13 @@ import { useDeepEqualSelector } from '../../../common/hooks/use_selector';
 import { EventDetailsPanel } from './event_details';
 import { HostDetailsPanel } from './host_details';
 import { NetworkDetailsPanel } from './network_details';
+import { EntityType } from '../../containers/details';
 
 interface DetailsPanelProps {
+ alertConsumers?: AlertConsumers[];
  browserFields: BrowserFields;
  docValueFields: DocValueFields[];
+ entityType?: EntityType;
  handleOnPanelClosed?: () => void;
  isFlyoutView?: boolean;
  tabType?: TimelineTabs;
@@ -33,8 +38,10 @@ interface DetailsPanelProps {
  */
 export const DetailsPanel = React.memo(
  ({
+ alertConsumers,
  browserFields,
  docValueFields,
+ entityType,
  handleOnPanelClosed,
  isFlyoutView,
  tabType,
@@ -70,8 +77,10 @@ export const DetailsPanel = React.memo(
  panelSize = 'm';
  visiblePanel = (
  <EventDetailsPanel
+ alertConsumers={alertConsumers}
  browserFields={browserFields}
  docValueFields={docValueFields}
+ entityType={entityType}
  expandedEvent={currentTabDetail?.params}
  handleOnEventClosed={closePanel}
  isFlyoutView={isFlyoutView}

x-pack/plugins/security_solution/public/timelines/components/timeline/eql_tab_content/index.tsx

@@ -13,6 +13,7 @@ import {
  EuiFlyoutFooter,
  EuiBadge,
 } from '@elastic/eui';
+import { AlertConsumers } from '@kbn/rule-data-utils/target/alerts_as_data_rbac';
 import { isEmpty } from 'lodash/fp';
 import React, { useEffect, useCallback } from 'react';
 import styled from 'styled-components';
@@ -151,6 +152,8 @@ export type Props = OwnProps & PropsFromRedux;
 
 const NO_SORTING: Sort[] = [];
 
+const alertConsumers: AlertConsumers[] = [AlertConsumers.SIEM];
+
 export const EqlTabContentComponent: React.FC<Props> = ({
  activeTab,
  columns,
@@ -346,6 +349,7 @@ export const EqlTabContentComponent: React.FC<Props> = ({
  <VerticalRule />
  <ScrollableFlexItem grow={1}>
  <DetailsPanel
+ alertConsumers={alertConsumers}
  browserFields={browserFields}
  docValueFields={docValueFields}
  tabType={TimelineTabs.eql}

x-pack/plugins/security_solution/public/timelines/components/timeline/notes_tab_content/index.tsx

@@ -16,6 +16,8 @@ import {
  EuiPanel,
  EuiHorizontalRule,
 } from '@elastic/eui';
+import { AlertConsumers } from '@kbn/rule-data-utils/target/alerts_as_data_rbac';
+
 import React, { Fragment, useCallback, useMemo, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import styled from 'styled-components';
@@ -64,6 +66,8 @@ const Username = styled(EuiText)`
  font-weight: bold;
 `;
 
+const alertConsumers: AlertConsumers[] = [AlertConsumers.SIEM];
+
 interface UsernameWithAvatar {
  username: string;
 }
@@ -170,6 +174,7 @@ const NotesTabContentComponent: React.FC<NotesTabContentProps> = ({ timelineId }
  () =>
  expandedDetail[TimelineTabs.notes]?.panelView ? (
  <DetailsPanel
+ alertConsumers={alertConsumers}
  browserFields={browserFields}
  docValueFields={docValueFields}
  handleOnPanelClosed={handleOnPanelClosed}

x-pack/plugins/security_solution/public/timelines/components/timeline/pinned_tab_content/index.tsx

@@ -6,6 +6,7 @@
  */
 
 import { EuiFlexGroup, EuiFlexItem, EuiFlyoutBody, EuiFlyoutFooter } from '@elastic/eui';
+import { AlertConsumers } from '@kbn/rule-data-utils/target/alerts_as_data_rbac';
 import { isEmpty } from 'lodash/fp';
 import React, { useMemo, useCallback } from 'react';
 import styled from 'styled-components';
@@ -88,6 +89,8 @@ const VerticalRule = styled.div`
 
 VerticalRule.displayName = 'VerticalRule';
 
+const alertConsumers: AlertConsumers[] = [AlertConsumers.SIEM];
+
 interface OwnProps {
  renderCellValue: (props: CellValueElementProps) => React.ReactNode;
  rowRenderers: RowRenderer[];
@@ -266,6 +269,7 @@ export const PinnedTabContentComponent: React.FC<Props> = ({
  <VerticalRule />
  <ScrollableFlexItem grow={1}>
  <DetailsPanel
+ alertConsumers={alertConsumers}
  browserFields={browserFields}
  docValueFields={docValueFields}
  handleOnPanelClosed={handleOnPanelClosed}

x-pack/plugins/security_solution/public/timelines/components/timeline/query_tab_content/index.tsx

@@ -13,6 +13,7 @@ import {
  EuiFlyoutFooter,
  EuiBadge,
 } from '@elastic/eui';
+import { AlertConsumers } from '@kbn/rule-data-utils/target/alerts_as_data_rbac';
 import { isEmpty } from 'lodash/fp';
 import React, { useState, useMemo, useEffect, useCallback } from 'react';
 import styled from 'styled-components';
@@ -135,6 +136,8 @@ const EventsCountBadge = styled(EuiBadge)`
  margin-left: ${({ theme }) => theme.eui.paddingSizes.s};
 `;
 
+const alertConsumers: AlertConsumers[] = [AlertConsumers.SIEM];
+
 const isTimerangeSame = (prevProps: Props, nextProps: Props) =>
  prevProps.end === nextProps.end &&
  prevProps.start === nextProps.start &&
@@ -414,6 +417,7 @@ export const QueryTabContentComponent: React.FC<Props> = ({
  <VerticalRule />
  <ScrollableFlexItem grow={1}>
  <DetailsPanel
+ alertConsumers={alertConsumers}
  browserFields={browserFields}
  docValueFields={docValueFields}
  handleOnPanelClosed={handleOnPanelClosed}

x-pack/plugins/security_solution/public/timelines/containers/details/index.tsx

@@ -9,6 +9,7 @@ import { isEmpty, noop } from 'lodash/fp';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import deepEqual from 'fast-deep-equal';
 import { Subscription } from 'rxjs';
+import { AlertConsumers } from '@kbn/rule-data-utils/target/alerts_as_data_rbac';
 
 import { inputsModel } from '../../../common/store';
 import { useKibana } from '../../../common/lib/kibana';
@@ -23,18 +24,28 @@ import { isCompleteResponse, isErrorResponse } from '../../../../../../../src/pl
 import { useAppToasts } from '../../../common/hooks/use_app_toasts';
 import * as i18n from './translations';
 
+export enum EntityType {
+ ALERTS = 'alerts',
+ EVENTS = 'events',
+}
 export interface EventsArgs {
  detailsData: TimelineEventsDetailsItem[] | null;
 }
 
 export interface UseTimelineEventsDetailsProps {
+ alertConsumers?: AlertConsumers[];
+ entityType?: EntityType;
  docValueFields: DocValueFields[];
  indexName: string;
  eventId: string;
  skip: boolean;
 }
 
+const EMPTY_ARRAY: AlertConsumers[] = [];
+
 export const useTimelineEventsDetails = ({
+ alertConsumers = EMPTY_ARRAY,
+ entityType = EntityType.EVENTS,
  docValueFields,
  indexName,
  eventId,
@@ -104,7 +115,9 @@ export const useTimelineEventsDetails = ({
  setTimelineDetailsRequest((prevRequest) => {
  const myRequest = {
  ...(prevRequest ?? {}),
+ alertConsumers,
  docValueFields,
+ entityType,
  indexName,
  eventId,
  factoryQueryType: TimelineEventsQueries.details,
@@ -114,7 +127,7 @@ export const useTimelineEventsDetails = ({
  }
  return prevRequest;
  });
- }, [docValueFields, eventId, indexName]);
+ }, [alertConsumers, docValueFields, entityType, eventId, indexName]);
 
  useEffect(() => {
  timelineDetailsSearch(timelineDetailsRequest);

x-pack/plugins/timelines/common/utils/field_formatters.ts

@@ -43,7 +43,7 @@ export const getDataFromSourceHits = (
  category?: string,
  path?: string
 ): TimelineEventsDetailsItem[] =>
- Object.keys(sources).reduce<TimelineEventsDetailsItem[]>((accumulator, source) => {
+ Object.keys(sources ?? {}).reduce<TimelineEventsDetailsItem[]>((accumulator, source) => {
  const item: EventSource = get(source, sources);
  if (Array.isArray(item) || isString(item) || isNumber(item)) {
  const field = path ? `${path}.${source}` : source;

x-pack/plugins/timelines/server/search_strategy/timeline/factory/events/details/index.ts

@@ -39,6 +39,7 @@ export const timelineEventsDetails: TimelineFactory<TimelineEventsQueries.detail
  const inspect = {
  dsl: [inspectStringifyObject(buildTimelineDetailsQuery(indexName, eventId, docValueFields))],
  };
+
  if (response.isRunning) {
  return {
  ...response,