Skip to content

Commit

Permalink
[Cloud Security] Bug fix - show origin event's with primary color ins…
Browse files Browse the repository at this point in the history
…tead of danger (elastic#204425)

## Summary

Bug description:

**Actual:** The node's color is red when exploring events through
Explore or Timeline.
**The expected** color of events is blue.

Before:

![385007418-f0a6bd7e-dbc9-43ad-99b8-a07bcad85075](https://github.com/user-attachments/assets/7bf198f3-9a32-4d27-84db-3e97b5bf312b)

After:

https://github.com/user-attachments/assets/f1a10deb-65f5-43be-a351-6fca34f855cb

https://github.com/user-attachments/assets/223534f4-09a2-4b41-85bc-c2195dd153ba

**How to test this PR:**

- Enable the feature flag

`kibana.dev.yml`:

```yaml
uiSettings.overrides.securitySolution:enableVisualizationsInFlyout: true
xpack.securitySolution.enableExperimental: ['graphVisualizationInFlyoutEnabled']
```

- Load mocked data:

```bash
node scripts/es_archiver load x-pack/test/cloud_security_posture_functional/es_archives/logs_gcp_audit \
  --es-url http://elastic:changeme@localhost:9200 \
  --kibana-url http://elastic:changeme@localhost:5601

node scripts/es_archiver load x-pack/test/cloud_security_posture_functional/es_archives/security_alerts \
  --es-url http://elastic:changeme@localhost:9200 \
  --kibana-url http://elastic:changeme@localhost:5601
```

- Make sure you include data from Oct 13 2024. (in the video I use Last
year)

### Checklist

- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [x] [Flaky Test
Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was
used on any tests changed

(cherry picked from commit 2c5544c)
  • Loading branch information
kfirpeled committed Dec 17, 2024
1 parent 9228337 commit 91349ca
Show file tree
Hide file tree
Showing 18 changed files with 483 additions and 145 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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()]),
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 },
Expand All @@ -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(
Expand All @@ -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,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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',
},
Expand All @@ -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',
},
Expand All @@ -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',
},
Expand All @@ -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',
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>(
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -53,7 +53,7 @@ export const defineGraphRoute = (router: CspRouter) =>
esClient: cspContext.esClient,
},
query: {
eventIds,
originEventIds,
spaceId,
start,
end,
Expand Down
53 changes: 37 additions & 16 deletions x-pack/plugins/cloud_security_posture/server/routes/graph/v1.ts
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,8 @@ interface GraphEdge {
action: string;
targetIds: string[] | string;
eventOutcome: string;
isAlert: boolean;
isOrigin: boolean;
isOriginAlert: boolean;
}

interface LabelEdges {
Expand All @@ -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;
Expand All @@ -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,
});

Expand Down Expand Up @@ -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(*),
Expand All @@ -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>();
};
Expand Down Expand Up @@ -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[] = [];
Expand All @@ -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 ?? []),
Expand All @@ -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',
};

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand All @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down Expand Up @@ -123,6 +124,7 @@ export const VisualizeTab = memo(() => {
const { hasGraphRepresentation } = useGraphPreview({
getFieldsData,
ecsData: dataAsNestedObject,
dataFormattedForFieldBrowser,
});

const isGraphFeatureEnabled = useIsExperimentalFeatureEnabled(
Expand Down
Loading

0 comments on commit 91349ca

Please sign in to comment.