Skip to content

[AI4DSOC] Add cell renderer for datetime fields to the alert summary table #219126

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
PhilippeOberti merged 2 commits into from
Apr 24, 2025
Merged

[AI4DSOC] Add cell renderer for datetime fields to the alert summary table #219126

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2547f36
[AI4DSOC] Add cell renderer for datetime fields to the alert summary …
PhilippeOberti Apr 24, 2025
afaff27
fix name
PhilippeOberti Apr 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
134 changes: 134 additions & 0 deletions ...n/public/detections/components/alert_summary/table/datetime_schema_cell_renderer.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,134 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/

import React from 'react';
import { render } from '@testing-library/react';
import type { Alert } from '@kbn/alerting-types';
import { TestProviders } from '../../../../common/mock';
import { getEmptyValue } from '../../../../common/components/empty_value';
import { DatetimeSchemaCellRenderer } from './datetime_schema_cell_renderer';

describe('DatetimeSchemaCellRenderer', () => {
it('should handle missing field', () => {
const alert: Alert = {
_id: '_id',
_index: '_index',
field1: 'value1',
};
const field = 'field';

const { getByText } = render(
<TestProviders>
<DatetimeSchemaCellRenderer alert={alert} field={field} />
</TestProviders>
);

expect(getByText(getEmptyValue())).toBeInTheDocument();
});

it('should handle string value', () => {
const alert: Alert = {
_id: '_id',
_index: '_index',
field1: 'value1',
};
const field = 'field1';

const { getByText } = render(
<TestProviders>
<DatetimeSchemaCellRenderer alert={alert} field={field} />
</TestProviders>
);

expect(getByText('value1')).toBeInTheDocument();
});

it('should handle number value', () => {
const alert: Alert = {
_id: '_id',
_index: '_index',
field1: 123,
};
const columnId = 'field1';

const { getByText } = render(
<TestProviders>
<DatetimeSchemaCellRenderer alert={alert} field={columnId} />
</TestProviders>
);

expect(getByText('Jan 1, 1970 @ 00:00:00.123')).toBeInTheDocument();
});

it('should handle array of booleans', () => {
const alert: Alert = {
_id: '_id',
_index: '_index',
field1: [true, false],
};
const field = 'field1';

const { getByText } = render(
<TestProviders>
<DatetimeSchemaCellRenderer alert={alert} field={field} />
</TestProviders>
);

expect(getByText('true')).toBeInTheDocument();
});

it('should handle array of numbers', () => {
const alert: Alert = {
_id: '_id',
_index: '_index',
field1: [1, 2],
};
const field = 'field1';

const { getByText } = render(
<TestProviders>
<DatetimeSchemaCellRenderer alert={alert} field={field} />
</TestProviders>
);

expect(getByText('Jan 1, 1970 @ 00:00:00.001')).toBeInTheDocument();
});

it('should handle array of null', () => {
const alert: Alert = {
_id: '_id',
_index: '_index',
field1: [null, null],
};
const field = 'field1';

const { getByText } = render(
<TestProviders>
<DatetimeSchemaCellRenderer alert={alert} field={field} />
</TestProviders>
);

expect(getByText('—')).toBeInTheDocument();
});

it('should join array of JsonObjects', () => {
const alert: Alert = {
_id: '_id',
_index: '_index',
field1: [{ subField1: 'value1', subField2: 'value2' }],
};
const field = 'field1';

const { getByText } = render(
<TestProviders>
<DatetimeSchemaCellRenderer alert={alert} field={field} />
</TestProviders>
);

expect(getByText('[object Object]')).toBeInTheDocument();
Copy link
Copy Markdown
Contributor

@michaelolo24 michaelolo24 Apr 24, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Still don't know how to feel about this 😓

Copy link
Copy Markdown
Contributor Author

@PhilippeOberti PhilippeOberti Apr 24, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I know...Problem for future me I think 🤣 The FormattedDate component I'm leveraging in this PR is actually a bit weird. It displays a date if it's valid, and if not it fallback to the original value. I would have expected it to display a date if valid, and if not, just display -...
But this PR shouldn't be changing this logic as it's used in other places...

});
});
39 changes: 39 additions & 0 deletions ...lution/public/detections/components/alert_summary/table/datetime_schema_cell_renderer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/

import React, { memo, useMemo } from 'react';
import type { Alert } from '@kbn/alerting-types';
import { FormattedDate } from '../../../../common/components/formatted_date';
import { getAlertFieldValueAsStringOrNumberOrNull } from '../../../utils/type_utils';

export interface DatetimeSchemaCellRendererProps {
/**
* Alert data passed from the renderCellValue callback via the AlertWithLegacyFormats interface
*/
alert: Alert;
/**
* Column id passed from the renderCellValue callback via EuiDataGridProps['renderCellValue'] interface
*/
field: string;
}

/**
* Renders the value of a field of type date (when the schema is 'datetime').
* Component used in the AI for SOC alert summary table.
*/
export const DatetimeSchemaCellRenderer = memo(
({ alert, field }: DatetimeSchemaCellRendererProps) => {
const displayValue: number | string | null = useMemo(
() => getAlertFieldValueAsStringOrNumberOrNull(alert, field),
Copy link
Copy Markdown
Contributor

@michaelolo24 michaelolo24 Apr 24, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

what a function name 😅

Copy link
Copy Markdown
Contributor Author

@PhilippeOberti PhilippeOberti Apr 24, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Haha, yeah... at least it's clear? 😆

In a follow up PR (after RSA) I will move all the renderers into a folder and clean up these names a bit...

[alert, field]
);

return <FormattedDate fieldName={field} value={displayValue} />;
}
);

DatetimeSchemaCellRenderer.displayName = 'DatetimeSchemaCellRenderer';
47 changes: 37 additions & 10 deletions ...s/security_solution/public/detections/components/alert_summary/table/render_cell.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import type { Alert } from '@kbn/alerting-types';
import { CellValue } from './render_cell';
import { TestProviders } from '../../../../common/mock';
import { getEmptyValue } from '../../../../common/components/empty_value';
import { ALERT_RULE_PARAMETERS, ALERT_SEVERITY } from '@kbn/rule-data-utils';
import { ALERT_RULE_PARAMETERS, ALERT_SEVERITY, TIMESTAMP } from '@kbn/rule-data-utils';
import { BADGE_TEST_ID } from './kibana_alert_severity_cell_renderer';
import type { PackageListItem } from '@kbn/fleet-plugin/common';
import { installationStatuses } from '@kbn/fleet-plugin/common/constants';
Expand Down Expand Up @@ -41,10 +41,11 @@ describe('CellValue', () => {
field1: 'value1',
};
const columnId = 'columnId';
const schema = 'unknown';

const { getByText } = render(
<TestProviders>
<CellValue alert={alert} columnId={columnId} packages={packages} />
<CellValue alert={alert} columnId={columnId} packages={packages} schema={schema} />
</TestProviders>
);

Expand All @@ -58,10 +59,11 @@ describe('CellValue', () => {
field1: 'value1',
};
const columnId = 'field1';
const schema = 'string';

const { getByText } = render(
<TestProviders>
<CellValue alert={alert} columnId={columnId} packages={packages} />
<CellValue alert={alert} columnId={columnId} packages={packages} schema={schema} />
</TestProviders>
);

Expand All @@ -75,10 +77,11 @@ describe('CellValue', () => {
field1: 123,
};
const columnId = 'field1';
const schema = 'unknown';

const { getByText } = render(
<TestProviders>
<CellValue alert={alert} columnId={columnId} packages={packages} />
<CellValue alert={alert} columnId={columnId} packages={packages} schema={schema} />
</TestProviders>
);

Expand All @@ -92,10 +95,11 @@ describe('CellValue', () => {
field1: [true, false],
};
const columnId = 'field1';
const schema = 'unknown';

const { getByText } = render(
<TestProviders>
<CellValue alert={alert} columnId={columnId} packages={packages} />
<CellValue alert={alert} columnId={columnId} packages={packages} schema={schema} />
</TestProviders>
);

Expand All @@ -109,10 +113,11 @@ describe('CellValue', () => {
field1: [1, 2],
};
const columnId = 'field1';
const schema = 'unknown';

const { getByText } = render(
<TestProviders>
<CellValue alert={alert} columnId={columnId} packages={packages} />
<CellValue alert={alert} columnId={columnId} packages={packages} schema={schema} />
</TestProviders>
);

Expand All @@ -126,10 +131,11 @@ describe('CellValue', () => {
field1: [null, null],
};
const columnId = 'field1';
const schema = 'unknown';

const { getByText } = render(
<TestProviders>
<CellValue alert={alert} columnId={columnId} packages={packages} />
<CellValue alert={alert} columnId={columnId} packages={packages} schema={schema} />
</TestProviders>
);

Expand All @@ -143,10 +149,11 @@ describe('CellValue', () => {
field1: [{ subField1: 'value1', subField2: 'value2' }],
};
const columnId = 'field1';
const schema = 'unknown';

const { getByText } = render(
<TestProviders>
<CellValue alert={alert} columnId={columnId} packages={packages} />
<CellValue alert={alert} columnId={columnId} packages={packages} schema={schema} />
</TestProviders>
);

Expand All @@ -160,10 +167,11 @@ describe('CellValue', () => {
[ALERT_RULE_PARAMETERS]: [{ related_integrations: { package: ['splunk'] } }],
};
const columnId = ALERT_RULE_PARAMETERS;
const schema = 'unknown';

const { getByTestId } = render(
<TestProviders>
<CellValue alert={alert} columnId={columnId} packages={packages} />
<CellValue alert={alert} columnId={columnId} packages={packages} schema={schema} />
</TestProviders>
);

Expand All @@ -179,13 +187,32 @@ describe('CellValue', () => {
[ALERT_SEVERITY]: ['low'],
};
const columnId = ALERT_SEVERITY;
const schema = 'unknown';

const { getByTestId } = render(
<TestProviders>
<CellValue alert={alert} columnId={columnId} packages={packages} />
<CellValue alert={alert} columnId={columnId} packages={packages} schema={schema} />
</TestProviders>
);

expect(getByTestId(BADGE_TEST_ID)).toBeInTheDocument();
});

it('should use datetime renderer', () => {
const alert: Alert = {
_id: '_id',
_index: '_index',
[TIMESTAMP]: [1735754400000],
};
const columnId = TIMESTAMP;
const schema = 'datetime';

const { getByText } = render(
<TestProviders>
<CellValue alert={alert} columnId={columnId} packages={packages} schema={schema} />
</TestProviders>
);

expect(getByText('Jan 1, 2025 @ 18:00:00.000')).toBeInTheDocument();
});
});
Loading