-
Notifications
You must be signed in to change notification settings - Fork 8.2k
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.
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
[RAC][Alert Triage][TGrid] Update the Alerts Table (TGrid) API to implement renderCellValue
#96098
Conversation
… implement `renderCellValue` - This PR implements a superset of the `renderCellValue` API from [EuiDataGrid](https://elastic.github.io/eui/#/tabular-content/data-grid) in the `TGrid` (Timeline grid) API - The TGrid API was also updated to accept a collection of `RowRenderer`s as a prop The API changes are summarized by the following screenshot: <img width="1239" alt="render-cell-value" src="https://user-images.githubusercontent.com/4459398/113345484-c121f800-92ef-11eb-8a21-2b6dd8ef499b.png"> Related (RAC) issue: elastic#94520 ### Details The `StatefulEventsViewer` has been updated to accept `renderCellValue` as a (required) prop: ``` renderCellValue: (props: CellValueElementProps) => React.ReactNode; ``` The type definition of `CellValueElementProps` is: ``` export type CellValueElementProps = EuiDataGridCellValueElementProps & { data: TimelineNonEcsData[]; eventId: string; // _id header: ColumnHeaderOptions; linkValues: string[] | undefined; timelineId: string; }; ``` The `CellValueElementProps` type above is a _superset_ of `EuiDataGridCellValueElementProps`. The additional properties above include the `data` returned by the TGrid when it performs IO to retrieve alerts and events. ### Using `renderCellValue` to control rendering The internal implementation of TGrid's cell rendering didn't change with this PR; it moved to `x-pack/plugins/security_solution/public/timelines/components/timeline/cell_rendering/default_cell_renderer.tsx` as shown below: ``` export const DefaultCellRenderer: React.FC<CellValueElementProps> = ({ columnId, data, eventId, header, linkValues, setCellProps, timelineId, }) => ( <> {getColumnRenderer(header.id, columnRenderers, data).renderColumn({ columnName: header.id, eventId, field: header, linkValues, timelineId, truncate: true, values: getMappedNonEcsValue({ data, fieldName: header.id, }), })} </> ); ``` Any usages of TGrid were updated to pass `DefaultCellRenderer` as the value of the `renderCellValue` prop, as shown in the screenshot below: <img width="1239" alt="render-cell-value" src="https://user-images.githubusercontent.com/4459398/113345484-c121f800-92ef-11eb-8a21-2b6dd8ef499b.png"> The `EuiDataGrid` [codesandbox example](https://codesandbox.io/s/nsmzs) provides the following example `renderCellValue` implementation, which highlights a cell green based on it's numeric value: ``` const renderCellValue = useMemo(() => { return ({ rowIndex, columnId, setCellProps }) => { const data = useContext(DataContext); useEffect(() => { if (columnId === 'amount') { if (data.hasOwnProperty(rowIndex)) { const numeric = parseFloat( data[rowIndex][columnId].match(/\d+\.\d+/)[0], 10 ); setCellProps({ style: { backgroundColor: `rgba(0, 255, 0, ${numeric * 0.0002})`, }, }); } } }, [rowIndex, columnId, setCellProps, data]); function getFormatted() { return data[rowIndex][columnId].formatted ? data[rowIndex][columnId].formatted : data[rowIndex][columnId]; } return data.hasOwnProperty(rowIndex) ? getFormatted(rowIndex, columnId) : null; }; }, []); ``` The sample code above formats the `amount` column in the example `EuiDataGrid` with a green `backgroundColor` based on the value of the data, as shown in the screenshot below: <img width="956" alt="datagrid-cell-formatting" src="https://user-images.githubusercontent.com/4459398/113348300-a782af80-92f3-11eb-896a-3d92cf4b9b53.png"> To demonstrate that similar styling can be applied to TGrid using the same technique illustrated by `EuiDataGrid`'s [codesandbox example](https://codesandbox.io/s/nsmzs), we can update the `DefaultCellRenderer` in `x-pack/plugins/security_solution/public/timelines/components/timeline/cell_rendering/default_cell_renderer.tsx` to apply a similar technique: ``` export const DefaultCellRenderer: React.FC<CellValueElementProps> = ({ columnId, data, eventId, header, linkValues, setCellProps, timelineId, }) => { useEffect(() => { if (columnId === 'signal.rule.risk_score') { const value = getMappedNonEcsValue({ data, fieldName: columnId, }); if (Array.isArray(value) && value.length > 0) { const numeric = parseFloat(value[0]); setCellProps({ style: { backgroundColor: `rgba(0, 255, 0, ${numeric * 0.002})`, }, }); } } }, [columnId, data, setCellProps]); return ( <> {getMappedNonEcsValue({ data, fieldName: columnId, })} </> ); }; ``` The example code above renders the `signal.rule.risk_score` column in the Alerts table with a green `backgroundColor` based on the value of the data, as shown in the screenshot below: <img width="1231" alt="alerts" src="https://user-images.githubusercontent.com/4459398/113349015-a30ac680-92f4-11eb-8518-5c1b7465e76e.png"> Note: In the screenshot above, the values in the Alerts table are not rendered as draggables.
Pinging @elastic/security-solution (Team: SecuritySolution) |
Pinging @elastic/security-threat-hunting (Team:Threat Hunting) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
checked out and ran locally, everything seems to work as before. the tests validate the approach and show how these can be customized. lgtm, awesome! 👍
💚 Build SucceededMetrics [docs]Module Count
Async chunks
History
To update your PR or re-run it, just comment with: |
…lement `renderCellValue` (elastic#96098) ### [RAC][Alert Triage][TGrid] Update the Alerts Table (TGrid) API to implement `renderCellValue` - This PR implements a superset of the `renderCellValue` API from [EuiDataGrid](https://elastic.github.io/eui/#/tabular-content/data-grid) in the `TGrid` (Timeline grid) API - The TGrid API was also updated to accept a collection of `RowRenderer`s as a prop The API changes are summarized by the following screenshot: <img width="1239" alt="render-cell-value" src="https://user-images.githubusercontent.com/4459398/113345484-c121f800-92ef-11eb-8a21-2b6dd8ef499b.png"> The following screenshot shows the `signal.rule.risk_score` column in the Alerts table being rendered with a green background color, using the same technique illustrated by `EuiDataGrid`'s [codesandbox example](https://codesandbox.io/s/nsmzs): <img width="1231" alt="alerts" src="https://user-images.githubusercontent.com/4459398/113349015-a30ac680-92f4-11eb-8518-5c1b7465e76e.png"> Note: In the screenshot above, the values in the Alerts table are also _not_ rendered as draggables. Related (RAC) issue: elastic#94520 ### Details The `StatefulEventsViewer` has been updated to accept `renderCellValue` as a (required) prop: ``` renderCellValue: (props: CellValueElementProps) => React.ReactNode; ``` The type definition of `CellValueElementProps` is: ``` export type CellValueElementProps = EuiDataGridCellValueElementProps & { data: TimelineNonEcsData[]; eventId: string; // _id header: ColumnHeaderOptions; linkValues: string[] | undefined; timelineId: string; }; ``` The `CellValueElementProps` type above is a _superset_ of `EuiDataGridCellValueElementProps`. The additional properties above include the `data` returned by the TGrid when it performs IO to retrieve alerts and events. ### Using `renderCellValue` to control rendering The internal implementation of TGrid's cell rendering didn't change with this PR; it moved to `x-pack/plugins/security_solution/public/timelines/components/timeline/cell_rendering/default_cell_renderer.tsx` as shown below: ``` export const DefaultCellRenderer: React.FC<CellValueElementProps> = ({ columnId, data, eventId, header, linkValues, setCellProps, timelineId, }) => ( <> {getColumnRenderer(header.id, columnRenderers, data).renderColumn({ columnName: header.id, eventId, field: header, linkValues, timelineId, truncate: true, values: getMappedNonEcsValue({ data, fieldName: header.id, }), })} </> ); ``` Any usages of TGrid were updated to pass `DefaultCellRenderer` as the value of the `renderCellValue` prop, as shown in the screenshot below: <img width="1239" alt="render-cell-value" src="https://user-images.githubusercontent.com/4459398/113345484-c121f800-92ef-11eb-8a21-2b6dd8ef499b.png"> The `EuiDataGrid` [codesandbox example](https://codesandbox.io/s/nsmzs) provides the following example `renderCellValue` implementation, which highlights a cell green based on it's numeric value: ``` const renderCellValue = useMemo(() => { return ({ rowIndex, columnId, setCellProps }) => { const data = useContext(DataContext); useEffect(() => { if (columnId === 'amount') { if (data.hasOwnProperty(rowIndex)) { const numeric = parseFloat( data[rowIndex][columnId].match(/\d+\.\d+/)[0], 10 ); setCellProps({ style: { backgroundColor: `rgba(0, 255, 0, ${numeric * 0.0002})`, }, }); } } }, [rowIndex, columnId, setCellProps, data]); function getFormatted() { return data[rowIndex][columnId].formatted ? data[rowIndex][columnId].formatted : data[rowIndex][columnId]; } return data.hasOwnProperty(rowIndex) ? getFormatted(rowIndex, columnId) : null; }; }, []); ``` The sample code above formats the `amount` column in the example `EuiDataGrid` with a green `backgroundColor` based on the value of the data, as shown in the screenshot below: <img width="956" alt="datagrid-cell-formatting" src="https://user-images.githubusercontent.com/4459398/113348300-a782af80-92f3-11eb-896a-3d92cf4b9b53.png"> To demonstrate that similar styling can be applied to TGrid using the same technique illustrated by `EuiDataGrid`'s [codesandbox example](https://codesandbox.io/s/nsmzs), we can update the `DefaultCellRenderer` in `x-pack/plugins/security_solution/public/timelines/components/timeline/cell_rendering/default_cell_renderer.tsx` to apply a similar technique: ``` export const DefaultCellRenderer: React.FC<CellValueElementProps> = ({ columnId, data, eventId, header, linkValues, setCellProps, timelineId, }) => { useEffect(() => { if (columnId === 'signal.rule.risk_score') { const value = getMappedNonEcsValue({ data, fieldName: columnId, }); if (Array.isArray(value) && value.length > 0) { const numeric = parseFloat(value[0]); setCellProps({ style: { backgroundColor: `rgba(0, 255, 0, ${numeric * 0.002})`, }, }); } } }, [columnId, data, setCellProps]); return ( <> {getMappedNonEcsValue({ data, fieldName: columnId, })} </> ); }; ``` The example code above renders the `signal.rule.risk_score` column in the Alerts table with a green `backgroundColor` based on the value of the data, as shown in the screenshot below: <img width="1231" alt="alerts" src="https://user-images.githubusercontent.com/4459398/113349015-a30ac680-92f4-11eb-8518-5c1b7465e76e.png"> Note: In the screenshot above, the values in the Alerts table are not rendered as draggables.
…lement `renderCellValue` (#96098) (#96233) ### [RAC][Alert Triage][TGrid] Update the Alerts Table (TGrid) API to implement `renderCellValue` - This PR implements a superset of the `renderCellValue` API from [EuiDataGrid](https://elastic.github.io/eui/#/tabular-content/data-grid) in the `TGrid` (Timeline grid) API - The TGrid API was also updated to accept a collection of `RowRenderer`s as a prop The API changes are summarized by the following screenshot: <img width="1239" alt="render-cell-value" src="https://user-images.githubusercontent.com/4459398/113345484-c121f800-92ef-11eb-8a21-2b6dd8ef499b.png"> The following screenshot shows the `signal.rule.risk_score` column in the Alerts table being rendered with a green background color, using the same technique illustrated by `EuiDataGrid`'s [codesandbox example](https://codesandbox.io/s/nsmzs): <img width="1231" alt="alerts" src="https://user-images.githubusercontent.com/4459398/113349015-a30ac680-92f4-11eb-8518-5c1b7465e76e.png"> Note: In the screenshot above, the values in the Alerts table are also _not_ rendered as draggables. Related (RAC) issue: #94520 ### Details The `StatefulEventsViewer` has been updated to accept `renderCellValue` as a (required) prop: ``` renderCellValue: (props: CellValueElementProps) => React.ReactNode; ``` The type definition of `CellValueElementProps` is: ``` export type CellValueElementProps = EuiDataGridCellValueElementProps & { data: TimelineNonEcsData[]; eventId: string; // _id header: ColumnHeaderOptions; linkValues: string[] | undefined; timelineId: string; }; ``` The `CellValueElementProps` type above is a _superset_ of `EuiDataGridCellValueElementProps`. The additional properties above include the `data` returned by the TGrid when it performs IO to retrieve alerts and events. ### Using `renderCellValue` to control rendering The internal implementation of TGrid's cell rendering didn't change with this PR; it moved to `x-pack/plugins/security_solution/public/timelines/components/timeline/cell_rendering/default_cell_renderer.tsx` as shown below: ``` export const DefaultCellRenderer: React.FC<CellValueElementProps> = ({ columnId, data, eventId, header, linkValues, setCellProps, timelineId, }) => ( <> {getColumnRenderer(header.id, columnRenderers, data).renderColumn({ columnName: header.id, eventId, field: header, linkValues, timelineId, truncate: true, values: getMappedNonEcsValue({ data, fieldName: header.id, }), })} </> ); ``` Any usages of TGrid were updated to pass `DefaultCellRenderer` as the value of the `renderCellValue` prop, as shown in the screenshot below: <img width="1239" alt="render-cell-value" src="https://user-images.githubusercontent.com/4459398/113345484-c121f800-92ef-11eb-8a21-2b6dd8ef499b.png"> The `EuiDataGrid` [codesandbox example](https://codesandbox.io/s/nsmzs) provides the following example `renderCellValue` implementation, which highlights a cell green based on it's numeric value: ``` const renderCellValue = useMemo(() => { return ({ rowIndex, columnId, setCellProps }) => { const data = useContext(DataContext); useEffect(() => { if (columnId === 'amount') { if (data.hasOwnProperty(rowIndex)) { const numeric = parseFloat( data[rowIndex][columnId].match(/\d+\.\d+/)[0], 10 ); setCellProps({ style: { backgroundColor: `rgba(0, 255, 0, ${numeric * 0.0002})`, }, }); } } }, [rowIndex, columnId, setCellProps, data]); function getFormatted() { return data[rowIndex][columnId].formatted ? data[rowIndex][columnId].formatted : data[rowIndex][columnId]; } return data.hasOwnProperty(rowIndex) ? getFormatted(rowIndex, columnId) : null; }; }, []); ``` The sample code above formats the `amount` column in the example `EuiDataGrid` with a green `backgroundColor` based on the value of the data, as shown in the screenshot below: <img width="956" alt="datagrid-cell-formatting" src="https://user-images.githubusercontent.com/4459398/113348300-a782af80-92f3-11eb-896a-3d92cf4b9b53.png"> To demonstrate that similar styling can be applied to TGrid using the same technique illustrated by `EuiDataGrid`'s [codesandbox example](https://codesandbox.io/s/nsmzs), we can update the `DefaultCellRenderer` in `x-pack/plugins/security_solution/public/timelines/components/timeline/cell_rendering/default_cell_renderer.tsx` to apply a similar technique: ``` export const DefaultCellRenderer: React.FC<CellValueElementProps> = ({ columnId, data, eventId, header, linkValues, setCellProps, timelineId, }) => { useEffect(() => { if (columnId === 'signal.rule.risk_score') { const value = getMappedNonEcsValue({ data, fieldName: columnId, }); if (Array.isArray(value) && value.length > 0) { const numeric = parseFloat(value[0]); setCellProps({ style: { backgroundColor: `rgba(0, 255, 0, ${numeric * 0.002})`, }, }); } } }, [columnId, data, setCellProps]); return ( <> {getMappedNonEcsValue({ data, fieldName: columnId, })} </> ); }; ``` The example code above renders the `signal.rule.risk_score` column in the Alerts table with a green `backgroundColor` based on the value of the data, as shown in the screenshot below: <img width="1231" alt="alerts" src="https://user-images.githubusercontent.com/4459398/113349015-a30ac680-92f4-11eb-8518-5c1b7465e76e.png"> Note: In the screenshot above, the values in the Alerts table are not rendered as draggables. Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
…-nav * 'master' of github.com:elastic/kibana: (106 commits) [Lens] don't use eui variables for zindex (elastic#96117) Remove /src/legacy (elastic#95510) skip flaky suite (elastic#95899) [Dashboard] Fix Lens and TSVB chart tooltip positioning relative to global headers (elastic#94247) fixes a skipped management x-pack test (elastic#96178) [App Search] API logs: Add log detail flyout (elastic#96162) [tech-debt] Remove defunct opacity parameters from EUI shadow functions (elastic#96191) Add Input Controls project configuration (elastic#96238) [file upload] document file upload privileges and provide actionable UI when failures occur (elastic#95883) Revert "TS Incremental build exclude test files (elastic#95610)" (elastic#96223) [App Search] Added Sample Response section to Result Settings (elastic#95971) [Maps] Safe-erase text-field (elastic#94873) [RAC][Alert Triage][TGrid] Update the Alerts Table (TGrid) API to implement `renderCellValue` (elastic#96098) [Maps] Enable all zoom levels for all users (elastic#96093) Use plugin version in its publicPath (elastic#95945) [Enterprise Search] Expose core.chrome.setIsVisible for use in Workplace Search (elastic#95984) [Workplace Search] Add sub nav and fix rendering bugs in Personal dashboard (elastic#96100) [OBS]home page is showing incorrect value of APM throughput (tpm) (elastic#95991) [Observability] Exploratory View initial skeleton (elastic#94426) [KQL] Fixed styles of KQL textarea for the K8 theme (elastic#96190) ... # Conflicts: # x-pack/plugins/snapshot_restore/__jest__/client_integration/helpers/restore_snapshot.helpers.ts
…implement a subset of the `EuiDataGridColumn` API This PR implements the following subset of the `EuiDataGridColumn` API from [EuiDataGrid](https://elastic.github.io/eui/#/tabular-content/data-grid) in the `TGrid` (Timeline grid): ```ts Pick<EuiDataGridColumn, 'display' | 'displayAsText' | 'id' | 'initialWidth'> ``` The above properties are [documented in EuiDataGrid's data_grid_types.ts](https://github.com/elastic/eui/blob/master/src/components/datagrid/data_grid_types.ts), and summarized in the table below: | Property | Description | |----------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | `display?: ReactNode` | A `ReactNode` used when rendering the column header | | `displayAsText?: string` | Displays the column name as text (in lieu of using `display`). If not used, `id` will be shown as the column name. | | `id: string` | The unique identifier for this column, e.g. `user.name` | | `initialWidth?: number` | Initial width (in pixels) of the column | The following screenshot shows the `TGrid` rendering (from left-to-right): - An (example) RAC-flavored Observability alerts table - An (example) RAC-flavored Security Solution alerts table - The production alerts table in the Security Solutions `Detections` page, which remains the default ![three_table_configurations](https://user-images.githubusercontent.com/4459398/115944491-5a69a780-a473-11eb-85b6-36120c3092d6.png) _Above, three table configurations, rendered via the updated API_ The `public/detections/configurations` directory contains the configurations for the three tables shown in the screenshot above This change works in concert with another recent change to the `TGrid` that [added support for the `renderCellValue` API](elastic#96098). ### Example configurations #### (example) RAC-flavored Observability alerts table ![observability_alerts_example](https://user-images.githubusercontent.com/4459398/115944556-b3d1d680-a473-11eb-8338-6097731f2d48.png) The column specification for the (example) RAC-flavored Observability alerts table, shown in the screenshot above is defined in `x-pack/plugins/security_solution/public/detections/configurations/examples/observablity_alerts/columns.ts`: ```ts export const columns: Array< Pick<EuiDataGridColumn, 'display' | 'displayAsText' | 'id' | 'initialWidth'> & ColumnHeaderOptions > = [ { columnHeaderType: defaultColumnHeaderType, displayAsText: i18n.STATUS, id: 'kibana.rac.alert.status', initialWidth: 74, }, { columnHeaderType: defaultColumnHeaderType, displayAsText: i18n.TRIGGERED, id: '@timestamp', initialWidth: DEFAULT_DATE_COLUMN_MIN_WIDTH + 5, }, { columnHeaderType: defaultColumnHeaderType, displayAsText: i18n.ALERT_DURATION, id: 'kibana.rac.alert.duration.us', initialWidth: 116, }, { columnHeaderType: defaultColumnHeaderType, displayAsText: i18n.ALERTS_HEADERS_SEVERITY, id: 'signal.rule.severity', initialWidth: 102, }, { columnHeaderType: defaultColumnHeaderType, displayAsText: i18n.ALERTS_HEADERS_REASON, id: 'signal.reason', initialWidth: 644, }, ]; ``` The example implementation of `EuiDataGrid`'s [`renderCellValue` API](elastic#96098) used to render the RAC-flavored Observability alerts table shown in the screenshot above is located in `x-pack/plugins/security_solution/public/detections/configurations/examples/observablity_alerts/render_cell_value.tsx`: ```ts /** * This implementation of `EuiDataGrid`'s `renderCellValue` * accepts `EuiDataGridCellValueElementProps`, plus `data` * from the TGrid */ export const renderCellValue: React.FC< EuiDataGridCellValueElementProps & CellValueElementProps > = ({ columnId, data, eventId, header, isDetails, isExpandable, isExpanded, linkValues, rowIndex, setCellProps, timelineId, }) => { const value = getMappedNonEcsValue({ data, fieldName: columnId, })?.reduce((x) => x[0]) ?? ''; switch (columnId) { case 'kibana.rac.alert.status': return <Status status={random(0, 1) ? 'recovered' : 'active'} />; case 'kibana.rac.alert.duration.us': return <span>{moment(value).fromNow(true)}</span>; case 'signal.rule.severity': return <Severity severity={value} />; case 'signal.reason': return ( <EuiLink> <TruncatableText>{reason}</TruncatableText> </EuiLink> ); default: // NOTE: we're using `DefaultCellRenderer` in this example configuration as a fallback, but // using `DefaultCellRenderer` here is entirely optional return ( <DefaultCellRenderer columnId={columnId} data={data} eventId={eventId} header={header} isDetails={isDetails} isExpandable={isExpandable} isExpanded={isExpanded} linkValues={linkValues} rowIndex={rowIndex} setCellProps={setCellProps} timelineId={timelineId} /> ); } }; ``` #### (example) RAC-flavored Security Solution alerts table ![secuirty_solution_rac_example](https://user-images.githubusercontent.com/4459398/115944592-e8459280-a473-11eb-9e0f-cef8519102d4.png) The column specification for the (example) RAC-flavored Security Solution alerts table, shown in the screenshot above is defined in `x-pack/plugins/security_solution/public/detections/configurations/examples/security_solution_rac/columns.ts`: ```ts /** * columns implements a subset of `EuiDataGrid`'s `EuiDataGridColumn` interface, * plus additional TGrid column properties */ export const columns: Array< Pick<EuiDataGridColumn, 'display' | 'displayAsText' | 'id' | 'initialWidth'> & ColumnHeaderOptions > = [ { columnHeaderType: defaultColumnHeaderType, id: '@timestamp', initialWidth: DEFAULT_DATE_COLUMN_MIN_WIDTH + 5, }, { columnHeaderType: defaultColumnHeaderType, id: 'signal.rule.name', displayAsText: i18n.ALERTS_HEADERS_RULE_NAME, linkField: 'signal.rule.id', initialWidth: 212, }, { columnHeaderType: defaultColumnHeaderType, id: 'signal.rule.severity', displayAsText: i18n.ALERTS_HEADERS_SEVERITY, initialWidth: 104, }, { columnHeaderType: defaultColumnHeaderType, id: 'signal.reason', displayAsText: i18n.ALERTS_HEADERS_REASON, initialWidth: 644, }, ]; ``` ### Testing the example configurations locally For now, the alerts table in the Security Solution's `Detections` page is configured to use the existing (`7.13`) column configuration. To test the Alerts table in the Security Solution `Detections` page with the example configurations provided in this PR: 1. Edit `x-pack/plugins/security_solution/public/detections/components/alerts_table/index.tsx` and change the following line: ```ts import { columns, RenderCellValue } from '../../configurations/security_solution_detections'; ``` from the above to ```ts import { columns, RenderCellValue } from '../../configurations/examples/observablity_alerts'; ``` for the (example) RAC-flavored Observability alerts table, or change it to ```ts import { columns, RenderCellValue } from '../../configurations/examples/security_solution_rac'; ``` for the (example) RAC-flavored Security solution alerts table. 2. Navigate to your local instance of the Security Solution [Detections page](http://localhost:5601/xyx/app/security/detections) (Note: you may need to enable detection rules to populate the alerts table.) 3. Click the `customize_columns` button shown in the screenshot below: ![customize_columns](https://user-images.githubusercontent.com/4459398/115796322-e3f37980-a38e-11eb-930b-5b21dfcb5e65.png) 4. In the `Customize Columns` popover, click the `Reset Fields` button, shown in the screenshot below: ![reset-fields](https://user-images.githubusercontent.com/4459398/115797081-49943580-a390-11eb-9485-7e6cae2f2a6f.png) After clicking `Reset Fields`, the new default columns will be displayed. ### Backwards compatibility The `width` property of Timeline's model was changed to `initialWidth` as part of this PR. - This change has no effect on Timelines persisted as saved objects - This change has no effect on Timeline's [Export and Import Timelines](https://www.elastic.co/guide/en/security/current/timelines-ui.html#import-export-timelines) feature - When a TGrid's column configuration containing the legacy `width` and `label` `ColumnHeaderOptions` is read from `localstorage`, these properties are migrated to `initialWidth` and `displayAsText` respectively. - Backwards compatibility was desk tested by persisting a custom column configuration while running off `master`, and then re-visiting the page after running this PR branch. As expected, the previously persisted column configuration was rendered correctly after running the PR branch. - Unit tests were added to `x-pack/plugins/security_solution/public/timelines/containers/local_storage/index.test.ts` to test the migration of the `width` and `label` properties ### Other changes - The minium width of a resized column is now `70px`. The new minium is no longer data-type specific.
…lement a subset of the `EuiDataGridColumn` API (#98241) ## [RAC][Alert Triage][TGrid] Update the Alerts Table (TGrid) API to implement a subset of the `EuiDataGridColumn` API This PR implements the following subset of the `EuiDataGridColumn` API from [EuiDataGrid](https://elastic.github.io/eui/#/tabular-content/data-grid) in the `TGrid` (Timeline grid): ```ts Pick<EuiDataGridColumn, 'display' | 'displayAsText' | 'id' | 'initialWidth'> ``` The above properties are [documented in EuiDataGrid's data_grid_types.ts](https://github.com/elastic/eui/blob/master/src/components/datagrid/data_grid_types.ts), and summarized in the table below: | Property | Description | |----------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | `display?: ReactNode` | A `ReactNode` used when rendering the column header | | `displayAsText?: string` | Displays the column name as text (in lieu of using `display`). If not used, `id` will be shown as the column name. | | `id: string` | The unique identifier for this column, e.g. `user.name` | | `initialWidth?: number` | Initial width (in pixels) of the column | The following screenshot shows the `TGrid` rendering (from left-to-right): - An (example) RAC-flavored Observability alerts table - An (example) RAC-flavored Security Solution alerts table - The production alerts table in the Security Solutions `Detections` page, which remains the default ![three_table_configurations](https://user-images.githubusercontent.com/4459398/115944491-5a69a780-a473-11eb-85b6-36120c3092d6.png) _Above, three table configurations, rendered via the updated API_ The `public/detections/configurations` directory contains the configurations for the three tables shown in the screenshot above This change works in concert with another recent change to the `TGrid` that [added support for the `renderCellValue` API](#96098). ### Example configurations #### (example) RAC-flavored Observability alerts table ![observability_alerts_example](https://user-images.githubusercontent.com/4459398/115944556-b3d1d680-a473-11eb-8338-6097731f2d48.png) The column specification for the (example) RAC-flavored Observability alerts table, shown in the screenshot above is defined in `x-pack/plugins/security_solution/public/detections/configurations/examples/observablity_alerts/columns.ts`: ```ts export const columns: Array< Pick<EuiDataGridColumn, 'display' | 'displayAsText' | 'id' | 'initialWidth'> & ColumnHeaderOptions > = [ { columnHeaderType: defaultColumnHeaderType, displayAsText: i18n.STATUS, id: 'kibana.rac.alert.status', initialWidth: 74, }, { columnHeaderType: defaultColumnHeaderType, displayAsText: i18n.TRIGGERED, id: '@timestamp', initialWidth: DEFAULT_DATE_COLUMN_MIN_WIDTH + 5, }, { columnHeaderType: defaultColumnHeaderType, displayAsText: i18n.ALERT_DURATION, id: 'kibana.rac.alert.duration.us', initialWidth: 116, }, { columnHeaderType: defaultColumnHeaderType, displayAsText: i18n.ALERTS_HEADERS_SEVERITY, id: 'signal.rule.severity', initialWidth: 102, }, { columnHeaderType: defaultColumnHeaderType, displayAsText: i18n.ALERTS_HEADERS_REASON, id: 'signal.reason', initialWidth: 644, }, ]; ``` The example implementation of `EuiDataGrid`'s [`renderCellValue` API](#96098) used to render the RAC-flavored Observability alerts table shown in the screenshot above is located in `x-pack/plugins/security_solution/public/detections/configurations/examples/observablity_alerts/render_cell_value.tsx`: ```ts /** * This implementation of `EuiDataGrid`'s `renderCellValue` * accepts `EuiDataGridCellValueElementProps`, plus `data` * from the TGrid */ export const renderCellValue: React.FC< EuiDataGridCellValueElementProps & CellValueElementProps > = ({ columnId, data, eventId, header, isDetails, isExpandable, isExpanded, linkValues, rowIndex, setCellProps, timelineId, }) => { const value = getMappedNonEcsValue({ data, fieldName: columnId, })?.reduce((x) => x[0]) ?? ''; switch (columnId) { case 'kibana.rac.alert.status': return <Status status={random(0, 1) ? 'recovered' : 'active'} />; case 'kibana.rac.alert.duration.us': return <span>{moment(value).fromNow(true)}</span>; case 'signal.rule.severity': return <Severity severity={value} />; case 'signal.reason': return ( <EuiLink> <TruncatableText>{reason}</TruncatableText> </EuiLink> ); default: // NOTE: we're using `DefaultCellRenderer` in this example configuration as a fallback, but // using `DefaultCellRenderer` here is entirely optional return ( <DefaultCellRenderer columnId={columnId} data={data} eventId={eventId} header={header} isDetails={isDetails} isExpandable={isExpandable} isExpanded={isExpanded} linkValues={linkValues} rowIndex={rowIndex} setCellProps={setCellProps} timelineId={timelineId} /> ); } }; ``` #### (example) RAC-flavored Security Solution alerts table ![secuirty_solution_rac_example](https://user-images.githubusercontent.com/4459398/115944592-e8459280-a473-11eb-9e0f-cef8519102d4.png) The column specification for the (example) RAC-flavored Security Solution alerts table, shown in the screenshot above is defined in `x-pack/plugins/security_solution/public/detections/configurations/examples/security_solution_rac/columns.ts`: ```ts /** * columns implements a subset of `EuiDataGrid`'s `EuiDataGridColumn` interface, * plus additional TGrid column properties */ export const columns: Array< Pick<EuiDataGridColumn, 'display' | 'displayAsText' | 'id' | 'initialWidth'> & ColumnHeaderOptions > = [ { columnHeaderType: defaultColumnHeaderType, id: '@timestamp', initialWidth: DEFAULT_DATE_COLUMN_MIN_WIDTH + 5, }, { columnHeaderType: defaultColumnHeaderType, id: 'signal.rule.name', displayAsText: i18n.ALERTS_HEADERS_RULE_NAME, linkField: 'signal.rule.id', initialWidth: 212, }, { columnHeaderType: defaultColumnHeaderType, id: 'signal.rule.severity', displayAsText: i18n.ALERTS_HEADERS_SEVERITY, initialWidth: 104, }, { columnHeaderType: defaultColumnHeaderType, id: 'signal.reason', displayAsText: i18n.ALERTS_HEADERS_REASON, initialWidth: 644, }, ]; ``` ### Testing the example configurations locally For now, the alerts table in the Security Solution's `Detections` page is configured to use the existing (`7.13`) column configuration. To test the Alerts table in the Security Solution `Detections` page with the example configurations provided in this PR: 1. Edit `x-pack/plugins/security_solution/public/detections/components/alerts_table/index.tsx` and change the following line: ```ts import { columns, RenderCellValue } from '../../configurations/security_solution_detections'; ``` from the above to ```ts import { columns, RenderCellValue } from '../../configurations/examples/observablity_alerts'; ``` for the (example) RAC-flavored Observability alerts table, or change it to ```ts import { columns, RenderCellValue } from '../../configurations/examples/security_solution_rac'; ``` for the (example) RAC-flavored Security solution alerts table. 2. Navigate to your local instance of the Security Solution [Detections page](http://localhost:5601/xyx/app/security/detections) (Note: you may need to enable detection rules to populate the alerts table.) 3. Click the `customize_columns` button shown in the screenshot below: ![customize_columns](https://user-images.githubusercontent.com/4459398/115796322-e3f37980-a38e-11eb-930b-5b21dfcb5e65.png) 4. In the `Customize Columns` popover, click the `Reset Fields` button, shown in the screenshot below: ![reset-fields](https://user-images.githubusercontent.com/4459398/115797081-49943580-a390-11eb-9485-7e6cae2f2a6f.png) After clicking `Reset Fields`, the new default columns will be displayed. ### Backwards compatibility The `width` property of Timeline's model was changed to `initialWidth` as part of this PR. - This change has no effect on Timelines persisted as saved objects - This change has no effect on Timeline's [Export and Import Timelines](https://www.elastic.co/guide/en/security/current/timelines-ui.html#import-export-timelines) feature - When a TGrid's column configuration containing the legacy `width` and `label` `ColumnHeaderOptions` is read from `localstorage`, these properties are migrated to `initialWidth` and `displayAsText` respectively. - Backwards compatibility was desk tested by persisting a custom column configuration while running off `master`, and then re-visiting the page after running this PR branch. As expected, the previously persisted column configuration was rendered correctly after running the PR branch. - Unit tests were added to `x-pack/plugins/security_solution/public/timelines/containers/local_storage/index.test.ts` to test the migration of the `width` and `label` properties ### Other changes - The minium width of a resized column is now `70px`. The new minium is no longer data-type specific.
…lement a subset of the `EuiDataGridColumn` API (elastic#98241) ## [RAC][Alert Triage][TGrid] Update the Alerts Table (TGrid) API to implement a subset of the `EuiDataGridColumn` API This PR implements the following subset of the `EuiDataGridColumn` API from [EuiDataGrid](https://elastic.github.io/eui/#/tabular-content/data-grid) in the `TGrid` (Timeline grid): ```ts Pick<EuiDataGridColumn, 'display' | 'displayAsText' | 'id' | 'initialWidth'> ``` The above properties are [documented in EuiDataGrid's data_grid_types.ts](https://github.com/elastic/eui/blob/master/src/components/datagrid/data_grid_types.ts), and summarized in the table below: | Property | Description | |----------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | `display?: ReactNode` | A `ReactNode` used when rendering the column header | | `displayAsText?: string` | Displays the column name as text (in lieu of using `display`). If not used, `id` will be shown as the column name. | | `id: string` | The unique identifier for this column, e.g. `user.name` | | `initialWidth?: number` | Initial width (in pixels) of the column | The following screenshot shows the `TGrid` rendering (from left-to-right): - An (example) RAC-flavored Observability alerts table - An (example) RAC-flavored Security Solution alerts table - The production alerts table in the Security Solutions `Detections` page, which remains the default ![three_table_configurations](https://user-images.githubusercontent.com/4459398/115944491-5a69a780-a473-11eb-85b6-36120c3092d6.png) _Above, three table configurations, rendered via the updated API_ The `public/detections/configurations` directory contains the configurations for the three tables shown in the screenshot above This change works in concert with another recent change to the `TGrid` that [added support for the `renderCellValue` API](elastic#96098). ### Example configurations #### (example) RAC-flavored Observability alerts table ![observability_alerts_example](https://user-images.githubusercontent.com/4459398/115944556-b3d1d680-a473-11eb-8338-6097731f2d48.png) The column specification for the (example) RAC-flavored Observability alerts table, shown in the screenshot above is defined in `x-pack/plugins/security_solution/public/detections/configurations/examples/observablity_alerts/columns.ts`: ```ts export const columns: Array< Pick<EuiDataGridColumn, 'display' | 'displayAsText' | 'id' | 'initialWidth'> & ColumnHeaderOptions > = [ { columnHeaderType: defaultColumnHeaderType, displayAsText: i18n.STATUS, id: 'kibana.rac.alert.status', initialWidth: 74, }, { columnHeaderType: defaultColumnHeaderType, displayAsText: i18n.TRIGGERED, id: '@timestamp', initialWidth: DEFAULT_DATE_COLUMN_MIN_WIDTH + 5, }, { columnHeaderType: defaultColumnHeaderType, displayAsText: i18n.ALERT_DURATION, id: 'kibana.rac.alert.duration.us', initialWidth: 116, }, { columnHeaderType: defaultColumnHeaderType, displayAsText: i18n.ALERTS_HEADERS_SEVERITY, id: 'signal.rule.severity', initialWidth: 102, }, { columnHeaderType: defaultColumnHeaderType, displayAsText: i18n.ALERTS_HEADERS_REASON, id: 'signal.reason', initialWidth: 644, }, ]; ``` The example implementation of `EuiDataGrid`'s [`renderCellValue` API](elastic#96098) used to render the RAC-flavored Observability alerts table shown in the screenshot above is located in `x-pack/plugins/security_solution/public/detections/configurations/examples/observablity_alerts/render_cell_value.tsx`: ```ts /** * This implementation of `EuiDataGrid`'s `renderCellValue` * accepts `EuiDataGridCellValueElementProps`, plus `data` * from the TGrid */ export const renderCellValue: React.FC< EuiDataGridCellValueElementProps & CellValueElementProps > = ({ columnId, data, eventId, header, isDetails, isExpandable, isExpanded, linkValues, rowIndex, setCellProps, timelineId, }) => { const value = getMappedNonEcsValue({ data, fieldName: columnId, })?.reduce((x) => x[0]) ?? ''; switch (columnId) { case 'kibana.rac.alert.status': return <Status status={random(0, 1) ? 'recovered' : 'active'} />; case 'kibana.rac.alert.duration.us': return <span>{moment(value).fromNow(true)}</span>; case 'signal.rule.severity': return <Severity severity={value} />; case 'signal.reason': return ( <EuiLink> <TruncatableText>{reason}</TruncatableText> </EuiLink> ); default: // NOTE: we're using `DefaultCellRenderer` in this example configuration as a fallback, but // using `DefaultCellRenderer` here is entirely optional return ( <DefaultCellRenderer columnId={columnId} data={data} eventId={eventId} header={header} isDetails={isDetails} isExpandable={isExpandable} isExpanded={isExpanded} linkValues={linkValues} rowIndex={rowIndex} setCellProps={setCellProps} timelineId={timelineId} /> ); } }; ``` #### (example) RAC-flavored Security Solution alerts table ![secuirty_solution_rac_example](https://user-images.githubusercontent.com/4459398/115944592-e8459280-a473-11eb-9e0f-cef8519102d4.png) The column specification for the (example) RAC-flavored Security Solution alerts table, shown in the screenshot above is defined in `x-pack/plugins/security_solution/public/detections/configurations/examples/security_solution_rac/columns.ts`: ```ts /** * columns implements a subset of `EuiDataGrid`'s `EuiDataGridColumn` interface, * plus additional TGrid column properties */ export const columns: Array< Pick<EuiDataGridColumn, 'display' | 'displayAsText' | 'id' | 'initialWidth'> & ColumnHeaderOptions > = [ { columnHeaderType: defaultColumnHeaderType, id: '@timestamp', initialWidth: DEFAULT_DATE_COLUMN_MIN_WIDTH + 5, }, { columnHeaderType: defaultColumnHeaderType, id: 'signal.rule.name', displayAsText: i18n.ALERTS_HEADERS_RULE_NAME, linkField: 'signal.rule.id', initialWidth: 212, }, { columnHeaderType: defaultColumnHeaderType, id: 'signal.rule.severity', displayAsText: i18n.ALERTS_HEADERS_SEVERITY, initialWidth: 104, }, { columnHeaderType: defaultColumnHeaderType, id: 'signal.reason', displayAsText: i18n.ALERTS_HEADERS_REASON, initialWidth: 644, }, ]; ``` ### Testing the example configurations locally For now, the alerts table in the Security Solution's `Detections` page is configured to use the existing (`7.13`) column configuration. To test the Alerts table in the Security Solution `Detections` page with the example configurations provided in this PR: 1. Edit `x-pack/plugins/security_solution/public/detections/components/alerts_table/index.tsx` and change the following line: ```ts import { columns, RenderCellValue } from '../../configurations/security_solution_detections'; ``` from the above to ```ts import { columns, RenderCellValue } from '../../configurations/examples/observablity_alerts'; ``` for the (example) RAC-flavored Observability alerts table, or change it to ```ts import { columns, RenderCellValue } from '../../configurations/examples/security_solution_rac'; ``` for the (example) RAC-flavored Security solution alerts table. 2. Navigate to your local instance of the Security Solution [Detections page](http://localhost:5601/xyx/app/security/detections) (Note: you may need to enable detection rules to populate the alerts table.) 3. Click the `customize_columns` button shown in the screenshot below: ![customize_columns](https://user-images.githubusercontent.com/4459398/115796322-e3f37980-a38e-11eb-930b-5b21dfcb5e65.png) 4. In the `Customize Columns` popover, click the `Reset Fields` button, shown in the screenshot below: ![reset-fields](https://user-images.githubusercontent.com/4459398/115797081-49943580-a390-11eb-9485-7e6cae2f2a6f.png) After clicking `Reset Fields`, the new default columns will be displayed. ### Backwards compatibility The `width` property of Timeline's model was changed to `initialWidth` as part of this PR. - This change has no effect on Timelines persisted as saved objects - This change has no effect on Timeline's [Export and Import Timelines](https://www.elastic.co/guide/en/security/current/timelines-ui.html#import-export-timelines) feature - When a TGrid's column configuration containing the legacy `width` and `label` `ColumnHeaderOptions` is read from `localstorage`, these properties are migrated to `initialWidth` and `displayAsText` respectively. - Backwards compatibility was desk tested by persisting a custom column configuration while running off `master`, and then re-visiting the page after running this PR branch. As expected, the previously persisted column configuration was rendered correctly after running the PR branch. - Unit tests were added to `x-pack/plugins/security_solution/public/timelines/containers/local_storage/index.test.ts` to test the migration of the `width` and `label` properties ### Other changes - The minium width of a resized column is now `70px`. The new minium is no longer data-type specific.
…lement a subset of the `EuiDataGridColumn` API (#98241) (#98665) ## [RAC][Alert Triage][TGrid] Update the Alerts Table (TGrid) API to implement a subset of the `EuiDataGridColumn` API This PR implements the following subset of the `EuiDataGridColumn` API from [EuiDataGrid](https://elastic.github.io/eui/#/tabular-content/data-grid) in the `TGrid` (Timeline grid): ```ts Pick<EuiDataGridColumn, 'display' | 'displayAsText' | 'id' | 'initialWidth'> ``` The above properties are [documented in EuiDataGrid's data_grid_types.ts](https://github.com/elastic/eui/blob/master/src/components/datagrid/data_grid_types.ts), and summarized in the table below: | Property | Description | |----------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | `display?: ReactNode` | A `ReactNode` used when rendering the column header | | `displayAsText?: string` | Displays the column name as text (in lieu of using `display`). If not used, `id` will be shown as the column name. | | `id: string` | The unique identifier for this column, e.g. `user.name` | | `initialWidth?: number` | Initial width (in pixels) of the column | The following screenshot shows the `TGrid` rendering (from left-to-right): - An (example) RAC-flavored Observability alerts table - An (example) RAC-flavored Security Solution alerts table - The production alerts table in the Security Solutions `Detections` page, which remains the default ![three_table_configurations](https://user-images.githubusercontent.com/4459398/115944491-5a69a780-a473-11eb-85b6-36120c3092d6.png) _Above, three table configurations, rendered via the updated API_ The `public/detections/configurations` directory contains the configurations for the three tables shown in the screenshot above This change works in concert with another recent change to the `TGrid` that [added support for the `renderCellValue` API](#96098). ### Example configurations #### (example) RAC-flavored Observability alerts table ![observability_alerts_example](https://user-images.githubusercontent.com/4459398/115944556-b3d1d680-a473-11eb-8338-6097731f2d48.png) The column specification for the (example) RAC-flavored Observability alerts table, shown in the screenshot above is defined in `x-pack/plugins/security_solution/public/detections/configurations/examples/observablity_alerts/columns.ts`: ```ts export const columns: Array< Pick<EuiDataGridColumn, 'display' | 'displayAsText' | 'id' | 'initialWidth'> & ColumnHeaderOptions > = [ { columnHeaderType: defaultColumnHeaderType, displayAsText: i18n.STATUS, id: 'kibana.rac.alert.status', initialWidth: 74, }, { columnHeaderType: defaultColumnHeaderType, displayAsText: i18n.TRIGGERED, id: '@timestamp', initialWidth: DEFAULT_DATE_COLUMN_MIN_WIDTH + 5, }, { columnHeaderType: defaultColumnHeaderType, displayAsText: i18n.ALERT_DURATION, id: 'kibana.rac.alert.duration.us', initialWidth: 116, }, { columnHeaderType: defaultColumnHeaderType, displayAsText: i18n.ALERTS_HEADERS_SEVERITY, id: 'signal.rule.severity', initialWidth: 102, }, { columnHeaderType: defaultColumnHeaderType, displayAsText: i18n.ALERTS_HEADERS_REASON, id: 'signal.reason', initialWidth: 644, }, ]; ``` The example implementation of `EuiDataGrid`'s [`renderCellValue` API](#96098) used to render the RAC-flavored Observability alerts table shown in the screenshot above is located in `x-pack/plugins/security_solution/public/detections/configurations/examples/observablity_alerts/render_cell_value.tsx`: ```ts /** * This implementation of `EuiDataGrid`'s `renderCellValue` * accepts `EuiDataGridCellValueElementProps`, plus `data` * from the TGrid */ export const renderCellValue: React.FC< EuiDataGridCellValueElementProps & CellValueElementProps > = ({ columnId, data, eventId, header, isDetails, isExpandable, isExpanded, linkValues, rowIndex, setCellProps, timelineId, }) => { const value = getMappedNonEcsValue({ data, fieldName: columnId, })?.reduce((x) => x[0]) ?? ''; switch (columnId) { case 'kibana.rac.alert.status': return <Status status={random(0, 1) ? 'recovered' : 'active'} />; case 'kibana.rac.alert.duration.us': return <span>{moment(value).fromNow(true)}</span>; case 'signal.rule.severity': return <Severity severity={value} />; case 'signal.reason': return ( <EuiLink> <TruncatableText>{reason}</TruncatableText> </EuiLink> ); default: // NOTE: we're using `DefaultCellRenderer` in this example configuration as a fallback, but // using `DefaultCellRenderer` here is entirely optional return ( <DefaultCellRenderer columnId={columnId} data={data} eventId={eventId} header={header} isDetails={isDetails} isExpandable={isExpandable} isExpanded={isExpanded} linkValues={linkValues} rowIndex={rowIndex} setCellProps={setCellProps} timelineId={timelineId} /> ); } }; ``` #### (example) RAC-flavored Security Solution alerts table ![secuirty_solution_rac_example](https://user-images.githubusercontent.com/4459398/115944592-e8459280-a473-11eb-9e0f-cef8519102d4.png) The column specification for the (example) RAC-flavored Security Solution alerts table, shown in the screenshot above is defined in `x-pack/plugins/security_solution/public/detections/configurations/examples/security_solution_rac/columns.ts`: ```ts /** * columns implements a subset of `EuiDataGrid`'s `EuiDataGridColumn` interface, * plus additional TGrid column properties */ export const columns: Array< Pick<EuiDataGridColumn, 'display' | 'displayAsText' | 'id' | 'initialWidth'> & ColumnHeaderOptions > = [ { columnHeaderType: defaultColumnHeaderType, id: '@timestamp', initialWidth: DEFAULT_DATE_COLUMN_MIN_WIDTH + 5, }, { columnHeaderType: defaultColumnHeaderType, id: 'signal.rule.name', displayAsText: i18n.ALERTS_HEADERS_RULE_NAME, linkField: 'signal.rule.id', initialWidth: 212, }, { columnHeaderType: defaultColumnHeaderType, id: 'signal.rule.severity', displayAsText: i18n.ALERTS_HEADERS_SEVERITY, initialWidth: 104, }, { columnHeaderType: defaultColumnHeaderType, id: 'signal.reason', displayAsText: i18n.ALERTS_HEADERS_REASON, initialWidth: 644, }, ]; ``` ### Testing the example configurations locally For now, the alerts table in the Security Solution's `Detections` page is configured to use the existing (`7.13`) column configuration. To test the Alerts table in the Security Solution `Detections` page with the example configurations provided in this PR: 1. Edit `x-pack/plugins/security_solution/public/detections/components/alerts_table/index.tsx` and change the following line: ```ts import { columns, RenderCellValue } from '../../configurations/security_solution_detections'; ``` from the above to ```ts import { columns, RenderCellValue } from '../../configurations/examples/observablity_alerts'; ``` for the (example) RAC-flavored Observability alerts table, or change it to ```ts import { columns, RenderCellValue } from '../../configurations/examples/security_solution_rac'; ``` for the (example) RAC-flavored Security solution alerts table. 2. Navigate to your local instance of the Security Solution [Detections page](http://localhost:5601/xyx/app/security/detections) (Note: you may need to enable detection rules to populate the alerts table.) 3. Click the `customize_columns` button shown in the screenshot below: ![customize_columns](https://user-images.githubusercontent.com/4459398/115796322-e3f37980-a38e-11eb-930b-5b21dfcb5e65.png) 4. In the `Customize Columns` popover, click the `Reset Fields` button, shown in the screenshot below: ![reset-fields](https://user-images.githubusercontent.com/4459398/115797081-49943580-a390-11eb-9485-7e6cae2f2a6f.png) After clicking `Reset Fields`, the new default columns will be displayed. ### Backwards compatibility The `width` property of Timeline's model was changed to `initialWidth` as part of this PR. - This change has no effect on Timelines persisted as saved objects - This change has no effect on Timeline's [Export and Import Timelines](https://www.elastic.co/guide/en/security/current/timelines-ui.html#import-export-timelines) feature - When a TGrid's column configuration containing the legacy `width` and `label` `ColumnHeaderOptions` is read from `localstorage`, these properties are migrated to `initialWidth` and `displayAsText` respectively. - Backwards compatibility was desk tested by persisting a custom column configuration while running off `master`, and then re-visiting the page after running this PR branch. As expected, the previously persisted column configuration was rendered correctly after running the PR branch. - Unit tests were added to `x-pack/plugins/security_solution/public/timelines/containers/local_storage/index.test.ts` to test the migration of the `width` and `label` properties ### Other changes - The minium width of a resized column is now `70px`. The new minium is no longer data-type specific.
…lement a subset of the `EuiDataGridColumn` API (elastic#98241) This PR implements the following subset of the `EuiDataGridColumn` API from [EuiDataGrid](https://elastic.github.io/eui/#/tabular-content/data-grid) in the `TGrid` (Timeline grid): ```ts Pick<EuiDataGridColumn, 'display' | 'displayAsText' | 'id' | 'initialWidth'> ``` The above properties are [documented in EuiDataGrid's data_grid_types.ts](https://github.com/elastic/eui/blob/master/src/components/datagrid/data_grid_types.ts), and summarized in the table below: | Property | Description | |----------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | `display?: ReactNode` | A `ReactNode` used when rendering the column header | | `displayAsText?: string` | Displays the column name as text (in lieu of using `display`). If not used, `id` will be shown as the column name. | | `id: string` | The unique identifier for this column, e.g. `user.name` | | `initialWidth?: number` | Initial width (in pixels) of the column | The following screenshot shows the `TGrid` rendering (from left-to-right): - An (example) RAC-flavored Observability alerts table - An (example) RAC-flavored Security Solution alerts table - The production alerts table in the Security Solutions `Detections` page, which remains the default ![three_table_configurations](https://user-images.githubusercontent.com/4459398/115944491-5a69a780-a473-11eb-85b6-36120c3092d6.png) _Above, three table configurations, rendered via the updated API_ The `public/detections/configurations` directory contains the configurations for the three tables shown in the screenshot above This change works in concert with another recent change to the `TGrid` that [added support for the `renderCellValue` API](elastic#96098). ![observability_alerts_example](https://user-images.githubusercontent.com/4459398/115944556-b3d1d680-a473-11eb-8338-6097731f2d48.png) The column specification for the (example) RAC-flavored Observability alerts table, shown in the screenshot above is defined in `x-pack/plugins/security_solution/public/detections/configurations/examples/observablity_alerts/columns.ts`: ```ts export const columns: Array< Pick<EuiDataGridColumn, 'display' | 'displayAsText' | 'id' | 'initialWidth'> & ColumnHeaderOptions > = [ { columnHeaderType: defaultColumnHeaderType, displayAsText: i18n.STATUS, id: 'kibana.rac.alert.status', initialWidth: 74, }, { columnHeaderType: defaultColumnHeaderType, displayAsText: i18n.TRIGGERED, id: '@timestamp', initialWidth: DEFAULT_DATE_COLUMN_MIN_WIDTH + 5, }, { columnHeaderType: defaultColumnHeaderType, displayAsText: i18n.ALERT_DURATION, id: 'kibana.rac.alert.duration.us', initialWidth: 116, }, { columnHeaderType: defaultColumnHeaderType, displayAsText: i18n.ALERTS_HEADERS_SEVERITY, id: 'signal.rule.severity', initialWidth: 102, }, { columnHeaderType: defaultColumnHeaderType, displayAsText: i18n.ALERTS_HEADERS_REASON, id: 'signal.reason', initialWidth: 644, }, ]; ``` The example implementation of `EuiDataGrid`'s [`renderCellValue` API](elastic#96098) used to render the RAC-flavored Observability alerts table shown in the screenshot above is located in `x-pack/plugins/security_solution/public/detections/configurations/examples/observablity_alerts/render_cell_value.tsx`: ```ts /** * This implementation of `EuiDataGrid`'s `renderCellValue` * accepts `EuiDataGridCellValueElementProps`, plus `data` * from the TGrid */ export const renderCellValue: React.FC< EuiDataGridCellValueElementProps & CellValueElementProps > = ({ columnId, data, eventId, header, isDetails, isExpandable, isExpanded, linkValues, rowIndex, setCellProps, timelineId, }) => { const value = getMappedNonEcsValue({ data, fieldName: columnId, })?.reduce((x) => x[0]) ?? ''; switch (columnId) { case 'kibana.rac.alert.status': return <Status status={random(0, 1) ? 'recovered' : 'active'} />; case 'kibana.rac.alert.duration.us': return <span>{moment(value).fromNow(true)}</span>; case 'signal.rule.severity': return <Severity severity={value} />; case 'signal.reason': return ( <EuiLink> <TruncatableText>{reason}</TruncatableText> </EuiLink> ); default: // NOTE: we're using `DefaultCellRenderer` in this example configuration as a fallback, but // using `DefaultCellRenderer` here is entirely optional return ( <DefaultCellRenderer columnId={columnId} data={data} eventId={eventId} header={header} isDetails={isDetails} isExpandable={isExpandable} isExpanded={isExpanded} linkValues={linkValues} rowIndex={rowIndex} setCellProps={setCellProps} timelineId={timelineId} /> ); } }; ``` ![secuirty_solution_rac_example](https://user-images.githubusercontent.com/4459398/115944592-e8459280-a473-11eb-9e0f-cef8519102d4.png) The column specification for the (example) RAC-flavored Security Solution alerts table, shown in the screenshot above is defined in `x-pack/plugins/security_solution/public/detections/configurations/examples/security_solution_rac/columns.ts`: ```ts /** * columns implements a subset of `EuiDataGrid`'s `EuiDataGridColumn` interface, * plus additional TGrid column properties */ export const columns: Array< Pick<EuiDataGridColumn, 'display' | 'displayAsText' | 'id' | 'initialWidth'> & ColumnHeaderOptions > = [ { columnHeaderType: defaultColumnHeaderType, id: '@timestamp', initialWidth: DEFAULT_DATE_COLUMN_MIN_WIDTH + 5, }, { columnHeaderType: defaultColumnHeaderType, id: 'signal.rule.name', displayAsText: i18n.ALERTS_HEADERS_RULE_NAME, linkField: 'signal.rule.id', initialWidth: 212, }, { columnHeaderType: defaultColumnHeaderType, id: 'signal.rule.severity', displayAsText: i18n.ALERTS_HEADERS_SEVERITY, initialWidth: 104, }, { columnHeaderType: defaultColumnHeaderType, id: 'signal.reason', displayAsText: i18n.ALERTS_HEADERS_REASON, initialWidth: 644, }, ]; ``` For now, the alerts table in the Security Solution's `Detections` page is configured to use the existing (`7.13`) column configuration. To test the Alerts table in the Security Solution `Detections` page with the example configurations provided in this PR: 1. Edit `x-pack/plugins/security_solution/public/detections/components/alerts_table/index.tsx` and change the following line: ```ts import { columns, RenderCellValue } from '../../configurations/security_solution_detections'; ``` from the above to ```ts import { columns, RenderCellValue } from '../../configurations/examples/observablity_alerts'; ``` for the (example) RAC-flavored Observability alerts table, or change it to ```ts import { columns, RenderCellValue } from '../../configurations/examples/security_solution_rac'; ``` for the (example) RAC-flavored Security solution alerts table. 2. Navigate to your local instance of the Security Solution [Detections page](http://localhost:5601/xyx/app/security/detections) (Note: you may need to enable detection rules to populate the alerts table.) 3. Click the `customize_columns` button shown in the screenshot below: ![customize_columns](https://user-images.githubusercontent.com/4459398/115796322-e3f37980-a38e-11eb-930b-5b21dfcb5e65.png) 4. In the `Customize Columns` popover, click the `Reset Fields` button, shown in the screenshot below: ![reset-fields](https://user-images.githubusercontent.com/4459398/115797081-49943580-a390-11eb-9485-7e6cae2f2a6f.png) After clicking `Reset Fields`, the new default columns will be displayed. The `width` property of Timeline's model was changed to `initialWidth` as part of this PR. - This change has no effect on Timelines persisted as saved objects - This change has no effect on Timeline's [Export and Import Timelines](https://www.elastic.co/guide/en/security/current/timelines-ui.html#import-export-timelines) feature - When a TGrid's column configuration containing the legacy `width` and `label` `ColumnHeaderOptions` is read from `localstorage`, these properties are migrated to `initialWidth` and `displayAsText` respectively. - Backwards compatibility was desk tested by persisting a custom column configuration while running off `master`, and then re-visiting the page after running this PR branch. As expected, the previously persisted column configuration was rendered correctly after running the PR branch. - Unit tests were added to `x-pack/plugins/security_solution/public/timelines/containers/local_storage/index.test.ts` to test the migration of the `width` and `label` properties - The minium width of a resized column is now `70px`. The new minium is no longer data-type specific.
[RAC][Alert Triage][TGrid] Update the Alerts Table (TGrid) API to implement
renderCellValue
This PR implements a superset of the
renderCellValue
API from EuiDataGrid in theTGrid
(Timeline grid) APIThe TGrid API was also updated to accept a collection of
RowRenderer
s as a propThe API changes are summarized by the following screenshot:
The following screenshot shows the
signal.rule.risk_score
column in the Alerts table being rendered with a green background color, using the same technique illustrated byEuiDataGrid
's codesandbox example:Note: In the screenshot above, the values in the Alerts table are also not rendered as draggables.
Related (RAC) issue: #94520
Details
The
StatefulEventsViewer
has been updated to acceptrenderCellValue
as a (required) prop:The type definition of
CellValueElementProps
is:The
CellValueElementProps
type above is a superset ofEuiDataGridCellValueElementProps
. The additional properties above include thedata
returned by the TGrid when it performs IO to retrieve alerts and events.Using
renderCellValue
to control renderingThe internal implementation of TGrid's cell rendering didn't change with this PR; it moved to
x-pack/plugins/security_solution/public/timelines/components/timeline/cell_rendering/default_cell_renderer.tsx
as shown below:Any usages of TGrid were updated to pass
DefaultCellRenderer
as the value of therenderCellValue
prop, as shown in the screenshot below:The
EuiDataGrid
codesandbox example provides the following examplerenderCellValue
implementation, which highlights a cell green based on it's numeric value:The sample code above formats the
amount
column in the exampleEuiDataGrid
with a greenbackgroundColor
based on the value of the data, as shown in the screenshot below:To demonstrate that similar styling can be applied to TGrid using the same technique illustrated by
EuiDataGrid
's codesandbox example, we can update theDefaultCellRenderer
inx-pack/plugins/security_solution/public/timelines/components/timeline/cell_rendering/default_cell_renderer.tsx
to apply a similar technique:The example code above renders the
signal.rule.risk_score
column in the Alerts table with a greenbackgroundColor
based on the value of the data, as shown in the screenshot below:Note: In the screenshot above, the values in the Alerts table are not rendered as draggables.