### [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: https://github.com/elastic/kibana/issues/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.
* Hide chrome for Workplace Search by default
The Workplace Search Personal dashboard needs the chrome hidden. We hide it globally here first to prevent a flash of chrome on the Personal dashboard and unhide it for admin routes, which will be in a future commit
* Add core.chrome.setIsVisible to KibanaLogic
* Toggle chrome visibility for Workplace Search
* Add test
* Refactor to set context and chrome when pathname changes
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
* Fix route for private deferated source summary
* Make schema types nullable
Federated sources don’t have counts and the server returns null so our routes have to expect that sometimes these values will be null
* Add SourceSubNav to Personal dashboard
We are able to leverage the existing component with a couple a small change; the existing componet is a subnav in the larger Enterprise Search shared navigation component and does not include its styles. This caused the list items to render with bullet points next to them. Adding this class and displaying the nav items as block elements fixes this issue.
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
* add spaces test
* fix updating and deleting sessions in non-default space
* revert back to batch update
* Add space tests
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Liza K <liza.katz@elastic.co>
This was causing console errors.
I factored out the column headers to their own component, and moved
all table rows to be under a tbody. This alleviates the console
warnings.
* Add toasts to FlashMessagesLogic
+ Tests cleanup:
- Group actions by their reducer blocks (since flashMessages has such specific logic) - recommend viewing with whitespace changes off for this
- Do not reset context between each test, but instead by mount(), which allows tests to maintain state between adding/removing/resetting
- Remove '()' from test names (feedback from previous PRs)
* Add toast message helpers
+ refactor FLASH_MESSAGE_TYPES to constants, so that both callouts & toasts can use it effectively
* Update FlashMessages to display toasts as well as callouts
- This means we can automatically use toasts alongside callouts in all views that already have FlashMessages
+ a11y enhancement! update callouts to also announce new messages to screenreaders
* [Example] Update ApiLogsLogic to flash an error toast on poll
+ update copy to better match EUI guidelines (shorter)
* Fix test caused by new FlashMessages structure
* PR suggestion - destructure
Co-authored-by: Scotty Bollinger <scotty.bollinger@elastic.co>
* PR feedback: implicit return
* Fix color types
- adding our own string enum fixes the typescript errors that both EuiCallout & EuiToast emit when passing color props to the base EUI types
* PR feedback: Update flashToast API to match callout helper API
- accepts a string title with optional args, creates a unique ID automatically if missing
Co-authored-by: Scotty Bollinger <scotty.bollinger@elastic.co>
* Remove kebabCase
Kibana routes are snake case, which matches the existing serviceType, so this is no longer needed
* Fix route segment
The word reauthenticate is not hyphenated
* Fix all misspelling of reauthenticate
Renames files too
* add runtime mapping editor in wizard
* ensure depVar is updated correctly with RF changes
* remove old RF from includes
* ensure cloning works with RF as depVar
* ensure indexPattern RF work
* scatterplot supports RTF. depVar options have indexPattern RTF on first load
* remove unnecessary types
* ensure supported fields included by default
* update types in editor
* use isRuntimeMappings
* fix translations. ensure runtimeMappings persist when going back to step 1
* ensure histograms support runtime fields
* update types
* Enterprise Search eslint import order rule fix
- mocks in current folder should be grouped with mocks from parent folders
* Run --fix/update instances of importing ./__mocks__
* Temp research code
* Make it work
* Cleanup
* Convert series to datatable
* Remove unecessary log
* Minor
* Fix types problem
* Add unit tests
* Take under consideration the override index pattern setting
* Implement brush event for dual mode
* Move indexpatterns fetch outside the loop
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
* Retry tasks that timeout with timeout_exception or receive_timeout_transport_exception
* Integration test: assert waitForPickupUpdatedMappingsTask waitForReindexTask returns retryable error when task has not completed within the timeout
* stateActionMachine: remove infinite loop failsafe
* Introduce wait_for_task_completion_timeout and keep on retrying *_WAIT_FOR_TASK steps until the ES task completes
* cloneIndex integration test if clone target exists but does not turn yellow within timeout
* Try to stabilize waitForReindexTask test
* Fix types
* Make v2 migrations retryAttempts configurable
* Improve type safety by narrowing left res types
* Fix test description
* Fix tests
* Add hasBorder to all EuiPageContent panels
* EngineCreation: switch EuiPageBody to EuiPageContent
+ add hasBorder
* Credentials: update EuiPanels w/ hasBorder
* ApiCodeExample: switch to hasBorder
* DataPanel: update to take & pass hasBorder prop
* Analytics & EngineOverview: use hasBorder
* Relevance Tuning: update EuiPanels
- switch to hasBorder for top level panels
- switch to color="subdued" for boost accordion
- tweak padding of boost panel
- CSS cleanup
* Role Mappings: switch to hasBorder
+ remove unused class - `euiPanel--disabled` was not applying any styles
+ remove random 'export' string
* Sample engine CTA: switch to subdued panel
+ fix sizing - when loading button pops in, it was causing text to overflow
* Standardize process fields across process and Target.process
* Lint
* Bug fix
* Typo fix
* Add new fields to unit test, fix 0 truthiness bug, and exercise 0 truthiness bug in unit test
* Add a PR-requested unit test case
* Use Yoda Conditions, Kibana does not
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
* [APM] Correlations support for progressively loading sections (#95059)
* fixes type consistency
* - Adds progressive section loading for errors tab in correlations
- code improvements
* Tests for latency correlations and overall distribution APIs
* adds API test for error correlations endpoints
* renamed 'getOverallErrorDistribution' to 'getOverallErrorTimeseries'
* Code improvements
* fix whitespace