[SIEM] [Detection engine] from signals to timeline

x-pack/legacy/plugins/siem/public/components/detection_engine/utility_bar/utility_bar_action.tsx

@@ -45,7 +45,7 @@ export interface UtilityBarActionProps extends LinkIconProps {
 }
 
 export const UtilityBarAction = React.memo<UtilityBarActionProps>(
-  ({ children, color, href, iconSide, iconSize, iconType, onClick, popoverContent }) => (
+  ({ children, color, disabled, href, iconSide, iconSize, iconType, onClick, popoverContent }) => (
     <BarAction>
       {popoverContent ? (
         <Popover
@@ -60,6 +60,7 @@ export const UtilityBarAction = React.memo<UtilityBarActionProps>(
       ) : (
         <LinkIcon
           color={color}
+          disabled={disabled}
           href={href}
           iconSide={iconSide}
           iconSize={iconSize}

x-pack/legacy/plugins/siem/public/components/link_icon/index.tsx

@@ -11,6 +11,7 @@ import styled, { css } from 'styled-components';
 
 interface LinkProps {
   color?: LinkAnchorProps['color'];
+  disabled?: boolean;
   href?: string;
   iconSide?: 'left' | 'right';
   onClick?: Function;
@@ -51,8 +52,15 @@ export interface LinkIconProps extends LinkProps {
 }
 
 export const LinkIcon = React.memo<LinkIconProps>(
-  ({ children, color, href, iconSide = 'left', iconSize = 's', iconType, onClick }) => (
-    <Link className="siemLinkIcon" color={color} href={href} iconSide={iconSide} onClick={onClick}>
+  ({ children, color, disabled, href, iconSide = 'left', iconSize = 's', iconType, onClick }) => (
+    <Link
+      className="siemLinkIcon"
+      color={color}
+      disabled={disabled}
+      href={href}
+      iconSide={iconSide}
+      onClick={onClick}
+    >
       <EuiIcon size={iconSize} type={iconType} />
       <span className="siemLinkIcon__label">{children}</span>
     </Link>

x-pack/legacy/plugins/siem/public/components/open_timeline/helpers.ts

@@ -58,7 +58,7 @@ export const isUntitled = ({ title }: OpenTimelineResult): boolean =>
 const omitTypename = (key: string, value: keyof TimelineModel) =>
   key === '__typename' ? undefined : value;
 
-const omitTypenameInTimeline = (timeline: TimelineResult): TimelineResult =>
+export const omitTypenameInTimeline = (timeline: TimelineResult): TimelineResult =>
   JSON.parse(JSON.stringify(timeline), omitTypename);
 
 const parseString = (params: string) => {

x-pack/legacy/plugins/siem/public/components/timeline/body/actions/index.tsx

@@ -14,15 +14,15 @@ import { EventsLoading, EventsTd, EventsTdContent, EventsTdGroupActions } from '
 import { eventHasNotes, getPinTooltip } from '../helpers';
 import * as i18n from '../translations';
 import { OnRowSelected } from '../../events';
-import { TimelineNonEcsData } from '../../../../graphql/types';
+import { Ecs } from '../../../../graphql/types';
 
 export interface TimelineActionProps {
   eventId: string;
-  data: TimelineNonEcsData[];
+  ecsData: Ecs;
 }
 
 export interface TimelineAction {
-  getAction: ({ eventId, data }: TimelineActionProps) => JSX.Element;
+  getAction: ({ eventId, ecsData }: TimelineActionProps) => JSX.Element;
   width: number;
   id: string;
 }

x-pack/legacy/plugins/siem/public/components/timeline/body/events/event_column_view.tsx

@@ -7,7 +7,7 @@
 import React, { useMemo } from 'react';
 import uuid from 'uuid';
 
-import { TimelineNonEcsData } from '../../../../graphql/types';
+import { TimelineNonEcsData, Ecs } from '../../../../graphql/types';
 import { Note } from '../../../../lib/note';
 import { AssociateNote, UpdateNote } from '../../../notes/helpers';
 import { OnColumnResized, OnPinEvent, OnRowSelected, OnUnPinEvent } from '../../events';
@@ -26,6 +26,7 @@ interface Props {
   columnHeaders: ColumnHeader[];
   columnRenderers: ColumnRenderer[];
   data: TimelineNonEcsData[];
+  ecsData: Ecs;
   eventIdToNoteIds: Readonly<Record<string, string[]>>;
   expanded: boolean;
   getNotesByIds: (noteIds: string[]) => Note[];
@@ -58,6 +59,7 @@ export const EventColumnView = React.memo<Props>(
     columnHeaders,
     columnRenderers,
     data,
+    ecsData,
     eventIdToNoteIds,
     expanded,
     getNotesByIds,
@@ -83,11 +85,11 @@ export const EventColumnView = React.memo<Props>(
       return (
         timelineTypeContext.timelineActions?.map(action => (
           <EventsTdContent key={action.id} textAlign="center">
-            {action.getAction({ eventId: id, data })}
+            {action.getAction({ eventId: id, ecsData })}
           </EventsTdContent>
         )) ?? []
       );
-    }, [data, timelineTypeContext.timelineActions]);
+    }, [ecsData, timelineTypeContext.timelineActions]);
 
     return (
       <EventsTrData data-test-subj="event-column-view">

x-pack/legacy/plugins/siem/public/components/timeline/body/events/stateful_event.tsx

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { useEffect, useRef, useState, useCallback } from 'react';
+import React, { useEffect, useRef, useState, useCallback, useMemo } from 'react';
 import uuid from 'uuid';
 import VisibilitySensor from 'react-visibility-sensor';
 
@@ -30,6 +30,7 @@ import { ColumnHeader } from '../column_headers/column_header';
 import { ColumnRenderer } from '../renderers/column_renderer';
 import { getRowRenderer } from '../renderers/get_row_renderer';
 import { RowRenderer } from '../renderers/row_renderer';
+import { getEventType } from '../helpers';
 import { StatefulEventChild } from './stateful_event_child';
 
 interface Props {
@@ -141,6 +142,8 @@ const StatefulEventComponent: React.FC<Props> = ({
 
   const divElement = useRef<HTMLDivElement | null>(null);
 
+  const eventType = useMemo(() => getEventType(event.ecs), [event]);
+
   const onToggleShowNotes = useCallback(() => {
     const eventId = event._id;
     setShowNotes({ ...showNotes, [eventId]: !showNotes[eventId] });
@@ -215,6 +218,8 @@ const StatefulEventComponent: React.FC<Props> = ({
                 <EventsTrGroup
                   className={STATEFUL_EVENT_CSS_CLASS_NAME}
                   data-test-subj="event"
+                  eventType={eventType}
+                  showLeftBorder={!isEventViewer}
                   ref={c => {
                     if (c != null) {
                       divElement.current = c;
@@ -232,6 +237,7 @@ const StatefulEventComponent: React.FC<Props> = ({
                         columnHeaders={columnHeaders}
                         columnRenderers={columnRenderers}
                         data={event.data}
+                        ecsData={event.ecs}
                         eventIdToNoteIds={eventIdToNoteIds}
                         expanded={!!expanded[event._id]}
                         getNotesByIds={getNotesByIds}

x-pack/legacy/plugins/siem/public/components/timeline/body/events/stateful_event_child.tsx

@@ -7,7 +7,7 @@
 import React from 'react';
 import uuid from 'uuid';
 
-import { TimelineNonEcsData } from '../../../../graphql/types';
+import { TimelineNonEcsData, Ecs } from '../../../../graphql/types';
 import { Note } from '../../../../lib/note';
 import { AddNoteToEvent, UpdateNote } from '../../../notes/helpers';
 import { NoteCards } from '../../../notes/note_cards';
@@ -26,6 +26,7 @@ interface Props {
   columnHeaders: ColumnHeader[];
   columnRenderers: ColumnRenderer[];
   data: TimelineNonEcsData[];
+  ecsData: Ecs;
   expanded: boolean;
   eventIdToNoteIds: Readonly<Record<string, string[]>>;
   isEventViewer?: boolean;
@@ -61,6 +62,7 @@ export const StatefulEventChild = React.memo<Props>(
     columnRenderers,
     expanded,
     data,
+    ecsData,
     eventIdToNoteIds,
     getNotesByIds,
     isEventViewer = false,
@@ -92,6 +94,7 @@ export const StatefulEventChild = React.memo<Props>(
           columnHeaders={columnHeaders}
           columnRenderers={columnRenderers}
           data={data}
+          ecsData={ecsData}
           expanded={expanded}
           eventIdToNoteIds={eventIdToNoteIds}
           getNotesByIds={getNotesByIds}

x-pack/legacy/plugins/siem/public/components/timeline/body/helpers.ts

@@ -7,6 +7,7 @@ import { get, isEmpty, noop } from 'lodash/fp';
 
 import { BrowserFields } from '../../../containers/source';
 import { Ecs, TimelineItem, TimelineNonEcsData } from '../../../graphql/types';
+import { EventType } from '../../../store/timeline/model';
 import { OnPinEvent, OnUnPinEvent } from '../events';
 import { ColumnHeader } from './column_headers/column_header';
 import * as i18n from './translations';
@@ -126,3 +127,11 @@ export const getEventIdToDataMapping = (
     };
   }, {});
 };
+
+/** Return eventType raw or signal */
+export const getEventType = (event: Ecs): Omit<EventType, 'all'> => {
+  if (!isEmpty(event.signal?.rule?.id)) {
+    return 'signal';
+  }
+  return 'raw';
+};

x-pack/legacy/plugins/siem/public/components/timeline/body/stateful_body.tsx

@@ -281,6 +281,7 @@ const makeMapStateToProps = () => {
     const {
       columns,
       eventIdToNoteIds,
+      eventType,
       isSelectAllChecked,
       loadingEventIds,
       pinnedEventIds,
@@ -292,6 +293,7 @@ const makeMapStateToProps = () => {
     return {
       columnHeaders: memoizedColumnHeaders(columns, browserFields),
       eventIdToNoteIds,
+      eventType,
       isSelectAllChecked,
       loadingEventIds,
       notesById: getNotesByIds(state),

x-pack/legacy/plugins/siem/public/components/timeline/index.tsx

@@ -5,7 +5,7 @@
  */
 
 import { isEqual } from 'lodash/fp';
-import React, { useEffect, useCallback } from 'react';
+import React, { useEffect, useCallback, useMemo } from 'react';
 import { connect } from 'react-redux';
 import { ActionCreator } from 'typescript-fsa';
 
@@ -14,7 +14,8 @@ import { esFilters } from '../../../../../../../src/plugins/data/public';
 import { WithSource } from '../../containers/source';
 import { inputsModel, inputsSelectors, State, timelineSelectors } from '../../store';
 import { timelineActions } from '../../store/actions';
-import { KqlMode, timelineDefaults, TimelineModel } from '../../store/timeline/model';
+import { EventType, KqlMode, timelineDefaults, TimelineModel } from '../../store/timeline/model';
+import { useSignalIndex } from '../../containers/detection_engine/signals/use_signal_index';
 
 import { ColumnHeader } from './body/column_headers/column_header';
 import { DataProvider, QueryOperator } from './data_providers/data_provider';
@@ -41,6 +42,7 @@ interface StateReduxProps {
   activePage?: number;
   columns: ColumnHeader[];
   dataProviders?: DataProvider[];
+  eventType: EventType;
   end: number;
   filters: esFilters.Filter[];
   isLive: boolean;
@@ -139,6 +141,7 @@ const StatefulTimelineComponent = React.memo<Props>(
     columns,
     createTimeline,
     dataProviders,
+    eventType,
     end,
     filters,
     flyoutHeaderHeight,
@@ -163,6 +166,15 @@ const StatefulTimelineComponent = React.memo<Props>(
     updateItemsPerPage,
     upsertColumn,
   }) => {
+    const [loading, signalIndexExists, signalIndexName] = useSignalIndex();
+
+    const indexToAdd = useMemo<string[]>(() => {
+      if (signalIndexExists && signalIndexName != null && ['signal', 'all'].includes(eventType)) {
+        return [signalIndexName];
+      }
+      return [];
+    }, [eventType, signalIndexExists, signalIndexName]);
+
     const onDataProviderRemoved: OnDataProviderRemoved = useCallback(
       (providerId: string, andProviderId?: string) =>
         removeProvider!({ id, providerId, andProviderId }),
@@ -249,7 +261,7 @@ const StatefulTimelineComponent = React.memo<Props>(
     }, []);
 
     return (
-      <WithSource sourceId="default">
+      <WithSource sourceId="default" indexToAdd={indexToAdd}>
         {({ indexPattern, browserFields }) => (
           <Timeline
             browserFields={browserFields}
@@ -261,11 +273,13 @@ const StatefulTimelineComponent = React.memo<Props>(
             flyoutHeight={flyoutHeight}
             id={id}
             indexPattern={indexPattern}
+            indexToAdd={indexToAdd}
             isLive={isLive}
             itemsPerPage={itemsPerPage!}
             itemsPerPageOptions={itemsPerPageOptions!}
             kqlMode={kqlMode}
             kqlQueryExpression={kqlQueryExpression}
+            loadingIndexName={loading}
             onChangeDataProviderKqlQuery={onChangeDataProviderKqlQuery}
             onChangeDroppableAndProvider={onChangeDroppableAndProvider}
             onChangeItemsPerPage={onChangeItemsPerPage}
@@ -286,6 +300,7 @@ const StatefulTimelineComponent = React.memo<Props>(
   (prevProps, nextProps) => {
     return (
       prevProps.activePage === nextProps.activePage &&
+      prevProps.eventType === nextProps.eventType &&
       prevProps.end === nextProps.end &&
       prevProps.flyoutHeaderHeight === nextProps.flyoutHeaderHeight &&
       prevProps.flyoutHeight === nextProps.flyoutHeight &&
@@ -320,6 +335,7 @@ const makeMapStateToProps = () => {
     const {
       columns,
       dataProviders,
+      eventType,
       filters,
       itemsPerPage,
       itemsPerPageOptions,
@@ -334,6 +350,7 @@ const makeMapStateToProps = () => {
     return {
       columns,
       dataProviders,
+      eventType,
       end: input.timerange.to,
       filters: timelineFilter,
       id,