[8.x] [Cloud Security] Bug fix - show origin event's with primary color instead of danger (#204425)

x-pack/platform/packages/shared/kbn-cloud-security-posture/common/schema/graph/v1.ts

@@ -12,7 +12,9 @@ export const graphRequestSchema = schema.object({
   nodesLimit: schema.maybe(schema.number()),
   showUnknownTarget: schema.maybe(schema.boolean()),
   query: schema.object({
-    eventIds: schema.arrayOf(schema.string()),
+    originEventIds: schema.arrayOf(
+      schema.object({ id: schema.string(), isAlert: schema.boolean() })
+    ),
     // TODO: use zod for range validation instead of config schema
     start: schema.oneOf([schema.number(), schema.string()]),
     end: schema.oneOf([schema.number(), schema.string()]),

x-pack/solutions/security/packages/kbn-cloud-security-posture/graph/src/components/graph_investigation/graph_investigation.tsx

@@ -126,21 +126,46 @@ const useGraphPopovers = (
 };
 
 interface GraphInvestigationProps {
-  dataView: DataView;
-  eventIds: string[];
-  timestamp: string | null;
+  /**
+   * The initial state to use for the graph investigation view.
+   */
+  initialState: {
+    /**
+     * The data view to use for the graph investigation view.
+     */
+    dataView: DataView;
+
+    /**
+     * The origin events for the graph investigation view.
+     */
+    originEventIds: Array<{
+      /**
+       * The ID of the origin event.
+       */
+      id: string;
+
+      /**
+       * A flag indicating whether the origin event is an alert or not.
+       */
+      isAlert: boolean;
+    }>;
+
+    /**
+     * The initial timerange for the graph investigation view.
+     */
+    timeRange: TimeRange;
+  };
 }
 
 /**
  * Graph investigation view allows the user to expand nodes and view related entities.
  */
 export const GraphInvestigation: React.FC<GraphInvestigationProps> = memo(
-  ({ dataView, eventIds, timestamp = new Date().toISOString() }: GraphInvestigationProps) => {
+  ({
+    initialState: { dataView, originEventIds, timeRange: initialTimeRange },
+  }: GraphInvestigationProps) => {
     const [searchFilters, setSearchFilters] = useState<Filter[]>(() => []);
-    const [timeRange, setTimeRange] = useState<TimeRange>({
-      from: `${timestamp}||-30m`,
-      to: `${timestamp}||+30m`,
-    });
+    const [timeRange, setTimeRange] = useState<TimeRange>(initialTimeRange);
 
     const {
       services: { uiSettings },
@@ -153,7 +178,7 @@ export const GraphInvestigation: React.FC<GraphInvestigationProps> = memo(
           [...searchFilters],
           getEsQueryConfig(uiSettings as Parameters<typeof getEsQueryConfig>[0])
         ),
-      [searchFilters, dataView, uiSettings]
+      [dataView, searchFilters, uiSettings]
     );
 
     const { nodeExpandPopover, openPopoverCallback } = useGraphPopovers(
@@ -166,7 +191,7 @@ export const GraphInvestigation: React.FC<GraphInvestigationProps> = memo(
     const { data, refresh, isFetching } = useFetchGraphData({
       req: {
         query: {
-          eventIds,
+          originEventIds,
           esQuery: query,
           start: timeRange.from,
           end: timeRange.to,

x-pack/solutions/security/packages/kbn-cloud-security-posture/graph/src/hooks/use_fetch_graph_data.test.tsx

@@ -33,7 +33,7 @@ describe('useFetchGraphData', () => {
       return useFetchGraphData({
         req: {
           query: {
-            eventIds: [],
+            originEventIds: [],
             start: '2021-09-01T00:00:00.000Z',
             end: '2021-09-01T23:59:59.999Z',
           },
@@ -52,7 +52,7 @@ describe('useFetchGraphData', () => {
       return useFetchGraphData({
         req: {
           query: {
-            eventIds: [],
+            originEventIds: [],
             start: '2021-09-01T00:00:00.000Z',
             end: '2021-09-01T23:59:59.999Z',
           },
@@ -75,7 +75,7 @@ describe('useFetchGraphData', () => {
       return useFetchGraphData({
         req: {
           query: {
-            eventIds: [],
+            originEventIds: [],
             start: '2021-09-01T00:00:00.000Z',
             end: '2021-09-01T23:59:59.999Z',
           },
@@ -98,7 +98,7 @@ describe('useFetchGraphData', () => {
       return useFetchGraphData({
         req: {
           query: {
-            eventIds: [],
+            originEventIds: [],
             start: '2021-09-01T00:00:00.000Z',
             end: '2021-09-01T23:59:59.999Z',
           },

x-pack/solutions/security/packages/kbn-cloud-security-posture/graph/src/hooks/use_fetch_graph_data.ts

@@ -81,13 +81,13 @@ export const useFetchGraphData = ({
   options,
 }: UseFetchGraphDataParams): UseFetchGraphDataResult => {
   const queryClient = useQueryClient();
-  const { esQuery, eventIds, start, end } = req.query;
+  const { esQuery, originEventIds, start, end } = req.query;
   const {
     services: { http },
   } = useKibana();
   const QUERY_KEY = useMemo(
-    () => ['useFetchGraphData', eventIds, start, end, esQuery],
-    [end, esQuery, eventIds, start]
+    () => ['useFetchGraphData', originEventIds, start, end, esQuery],
+    [end, esQuery, originEventIds, start]
   );
 
   const { isLoading, isError, data, isFetching } = useQuery<GraphResponse>(

x-pack/solutions/security/plugins/cloud_security_posture/server/routes/graph/route.ts

@@ -43,7 +43,7 @@ export const defineGraphRoute = (router: CspRouter) =>
         const cspContext = await context.csp;
 
         const { nodesLimit, showUnknownTarget = false } = request.body;
-        const { eventIds, start, end, esQuery } = request.body.query as GraphRequest['query'];
+        const { originEventIds, start, end, esQuery } = request.body.query as GraphRequest['query'];
         const spaceId = (await cspContext.spaces?.spacesService?.getActiveSpace(request))?.id;
 
         try {
@@ -53,7 +53,7 @@ export const defineGraphRoute = (router: CspRouter) =>
               esClient: cspContext.esClient,
             },
             query: {
-              eventIds,
+              originEventIds,
               spaceId,
               start,
               end,

x-pack/solutions/security/plugins/cloud_security_posture/server/routes/graph/v1.ts

@@ -33,7 +33,8 @@ interface GraphEdge {
   action: string;
   targetIds: string[] | string;
   eventOutcome: string;
-  isAlert: boolean;
+  isOrigin: boolean;
+  isOriginAlert: boolean;
 }
 
 interface LabelEdges {
@@ -46,10 +47,15 @@ interface GraphContextServices {
   esClient: IScopedClusterClient;
 }
 
+interface OriginEventId {
+  id: string;
+  isAlert: boolean;
+}
+
 interface GetGraphParams {
   services: GraphContextServices;
   query: {
-    eventIds: string[];
+    originEventIds: OriginEventId[];
     spaceId?: string;
     start: string | number;
     end: string | number;
@@ -61,19 +67,21 @@ interface GetGraphParams {
 
 export const getGraph = async ({
   services: { esClient, logger },
-  query: { eventIds, spaceId = 'default', start, end, esQuery },
+  query: { originEventIds, spaceId = 'default', start, end, esQuery },
   showUnknownTarget,
   nodesLimit,
 }: GetGraphParams): Promise<Pick<GraphResponse, 'nodes' | 'edges' | 'messages'>> => {
-  logger.trace(`Fetching graph for [eventIds: ${eventIds.join(', ')}] in [spaceId: ${spaceId}]`);
+  logger.trace(
+    `Fetching graph for [originEventIds: ${originEventIds.join(', ')}] in [spaceId: ${spaceId}]`
+  );
 
   const results = await fetchGraph({
     esClient,
     showUnknownTarget,
     logger,
     start,
     end,
-    eventIds,
+    originEventIds,
     esQuery,
   });
 
@@ -132,23 +140,29 @@ const fetchGraph = async ({
   logger,
   start,
   end,
-  eventIds,
+  originEventIds,
   showUnknownTarget,
   esQuery,
 }: {
   esClient: IScopedClusterClient;
   logger: Logger;
   start: string | number;
   end: string | number;
-  eventIds: string[];
+  originEventIds: OriginEventId[];
   showUnknownTarget: boolean;
   esQuery?: EsQuery;
 }): Promise<EsqlToRecords<GraphEdge>> => {
+  const originAlertIds = originEventIds.filter((originEventId) => originEventId.isAlert);
   const query = `from logs-*
 | WHERE event.action IS NOT NULL AND actor.entity.id IS NOT NULL
-| EVAL isAlert = ${
-    eventIds.length > 0
-      ? `event.id in (${eventIds.map((_id, idx) => `?al_id${idx}`).join(', ')})`
+| EVAL isOrigin = ${
+    originEventIds.length > 0
+      ? `event.id in (${originEventIds.map((_id, idx) => `?og_id${idx}`).join(', ')})`
+      : 'false'
+  }
+| EVAL isOriginAlert = isOrigin AND ${
+    originAlertIds.length > 0
+      ? `event.id in (${originAlertIds.map((_id, idx) => `?og_alrt_id${idx}`).join(', ')})`
       : 'false'
   }
 | STATS badge = COUNT(*),
@@ -159,19 +173,26 @@ const fetchGraph = async ({
       action = event.action,
       targetIds = target.entity.id,
       eventOutcome = event.outcome,
-      isAlert
+      isOrigin,
+      isOriginAlert
 | LIMIT 1000
-| SORT isAlert DESC`;
+| SORT isOrigin DESC`;
 
   logger.trace(`Executing query [${query}]`);
 
+  const eventIds = originEventIds.map((originEventId) => originEventId.id);
   return await esClient.asCurrentUser.helpers
     .esql({
       columnar: false,
       filter: buildDslFilter(eventIds, showUnknownTarget, start, end, esQuery),
       query,
       // @ts-ignore - types are not up to date
-      params: [...eventIds.map((id, idx) => ({ [`al_id${idx}`]: id }))],
+      params: [
+        ...originEventIds.map((originEventId, idx) => ({ [`og_id${idx}`]: originEventId.id })),
+        ...originEventIds
+          .filter((originEventId) => originEventId.isAlert)
+          .map((originEventId, idx) => ({ [`og_alrt_id${idx}`]: originEventId.id })),
+      ],
     })
     .toRecords<GraphEdge>();
 };
@@ -238,7 +259,7 @@ const createNodes = (records: GraphEdge[], context: Omit<ParseContext, 'edgesMap
       break;
     }
 
-    const { ips, hosts, users, actorIds, action, targetIds, isAlert, eventOutcome } = record;
+    const { ips, hosts, users, actorIds, action, targetIds, isOriginAlert, eventOutcome } = record;
     const actorIdsArray = castArray(actorIds);
     const targetIdsArray = castArray(targetIds);
     const unknownTargets: string[] = [];
@@ -257,7 +278,7 @@ const createNodes = (records: GraphEdge[], context: Omit<ParseContext, 'edgesMap
         nodesMap[id] = {
           id,
           label: unknownTargets.includes(id) ? 'Unknown' : undefined,
-          color: isAlert ? 'danger' : 'primary',
+          color: isOriginAlert ? 'danger' : 'primary',
           ...determineEntityNodeShape(
             id,
             castArray(ips ?? []),
@@ -280,7 +301,7 @@ const createNodes = (records: GraphEdge[], context: Omit<ParseContext, 'edgesMap
         const labelNode: LabelNodeDataModel = {
           id: edgeId + `label(${action})outcome(${eventOutcome})`,
           label: action,
-          color: isAlert ? 'danger' : eventOutcome === 'failed' ? 'warning' : 'primary',
+          color: isOriginAlert ? 'danger' : eventOutcome === 'failed' ? 'warning' : 'primary',
           shape: 'label',
         };
 

x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/left/components/graph_visualization.tsx

@@ -29,12 +29,20 @@ export const GraphVisualization: React.FC = memo(() => {
   const dataView = useGetScopedSourcererDataView({
     sourcererScope: SourcererScopeName.default,
   });
-  const { getFieldsData, dataAsNestedObject } = useDocumentDetailsContext();
-  const { eventIds, timestamp } = useGraphPreview({
+  const { getFieldsData, dataAsNestedObject, dataFormattedForFieldBrowser } =
+    useDocumentDetailsContext();
+  const {
+    eventIds,
+    timestamp = new Date().toISOString(),
+    isAlert,
+  } = useGraphPreview({
     getFieldsData,
     ecsData: dataAsNestedObject,
+    dataFormattedForFieldBrowser,
   });
 
+  const originEventIds = eventIds.map((id) => ({ id, isAlert }));
+
   return (
     <div
       data-test-subj={GRAPH_VISUALIZATION_TEST_ID}
@@ -46,7 +54,16 @@ export const GraphVisualization: React.FC = memo(() => {
     >
       {dataView && (
         <React.Suspense fallback={<EuiLoadingSpinner />}>
-          <GraphInvestigationLazy dataView={dataView} eventIds={eventIds} timestamp={timestamp} />
+          <GraphInvestigationLazy
+            initialState={{
+              dataView,
+              originEventIds,
+              timeRange: {
+                from: `${timestamp}||-30m`,
+                to: `${timestamp}||+30m`,
+              },
+            }}
+          />
         </React.Suspense>
       )}
     </div>

x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/left/tabs/visualize_tab.tsx

@@ -88,7 +88,8 @@ const graphVisualizationButton: EuiButtonGroupOptionProps = {
  * Visualize view displayed in the document details expandable flyout left section
  */
 export const VisualizeTab = memo(() => {
-  const { scopeId, getFieldsData, dataAsNestedObject } = useDocumentDetailsContext();
+  const { scopeId, getFieldsData, dataAsNestedObject, dataFormattedForFieldBrowser } =
+    useDocumentDetailsContext();
   const { openPreviewPanel } = useExpandableFlyoutApi();
   const panels = useExpandableFlyoutState();
   const [activeVisualizationId, setActiveVisualizationId] = useState(
@@ -123,6 +124,7 @@ export const VisualizeTab = memo(() => {
   const { hasGraphRepresentation } = useGraphPreview({
     getFieldsData,
     ecsData: dataAsNestedObject,
+    dataFormattedForFieldBrowser,
   });
 
   const isGraphFeatureEnabled = useIsExperimentalFeatureEnabled(