[SIEM] Fix overlapping timestamp tooltip in expanded Event Details (#38328)
## Summary Fixes issue where multiple tooltips are shown on `date` and `duration` fields within the expanded Event Details UI (https://github.com/elastic/ingest-dev/issues/481). ### Before: <img src="https://user-images.githubusercontent.com/2946766/59068176-b8397a00-8870-11e9-9b04-ee16d89ac7d4.png" width=400> <img src="https://user-images.githubusercontent.com/2946766/59068283-00f13300-8871-11e9-989d-986e9ae00e2a.png" width=400> ### After: <img src="https://user-images.githubusercontent.com/2946766/59068223-d901cf80-8870-11e9-9a28-1322adcfe570.png" width=400> <img src="https://user-images.githubusercontent.com/2946766/59068321-15353000-8871-11e9-8e33-2ffaa0b0c9c2.png" width=400> <img src="https://user-images.githubusercontent.com/2946766/59068621-d653aa00-8871-11e9-8803-8be01a20e585.png" width=400> ### Checklist Use ~~strikethroughs~~ to remove checklist items you don't feel are applicable to this PR. - [ ] ~This was checked for cross-browser compatibility, [including a check against IE11](https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md#cross-browser-compatibility)~ - [ ] ~Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/master/packages/kbn-i18n/README.md)~ - [ ] ~[Documentation](https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md#writing-documentation) was added for features that require explanation or tutorials~ - [ ] ~[Unit or functional tests](https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md#cross-browser-compatibility) were updated or added to match the most common scenarios~ - [ ] ~This was checked for [keyboard-only and screenreader accessibility](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Accessibility_testing_checklist)~ ### For maintainers - [ ] ~This was checked for breaking API changes and was [labeled appropriately](https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md#release-notes-process)~ - [ ] ~This includes a feature addition or change that requires a release note and was [labeled appropriately](https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md#release-notes-process)~
This commit is contained in:
parent
acba93a38c
commit
39c1598018
|
@ -26,6 +26,8 @@ import { WithHoverActions } from '../with_hover_actions';
|
|||
|
||||
import * as i18n from './translations';
|
||||
import { OverflowField } from '../tables/helpers';
|
||||
import { DATE_FIELD_TYPE, MESSAGE_FIELD_NAME } from '../timeline/body/renderers/constants';
|
||||
import { EVENT_DURATION_FIELD_NAME } from '../duration';
|
||||
|
||||
const HoverActionsContainer = styled(EuiPanel)`
|
||||
align-items: center;
|
||||
|
@ -137,14 +139,18 @@ export const getColumns = ({
|
|||
</HoverActionsContainer>
|
||||
}
|
||||
render={() =>
|
||||
data.field === 'message' ? (
|
||||
data.field === MESSAGE_FIELD_NAME ? (
|
||||
<OverflowField value={value} />
|
||||
) : (
|
||||
<DefaultDraggable
|
||||
data-test-subj="ip"
|
||||
field={data.field}
|
||||
id={`event-details-field-value-${eventId}-${data.field}-${i}-${value}`}
|
||||
tooltipContent={data.field}
|
||||
tooltipContent={
|
||||
data.type === DATE_FIELD_TYPE || data.field === EVENT_DURATION_FIELD_NAME
|
||||
? null
|
||||
: data.field
|
||||
}
|
||||
value={value}
|
||||
>
|
||||
<FormattedFieldValue
|
||||
|
|
|
@ -0,0 +1,9 @@
|
|||
/*
|
||||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
||||
* or more contributor license agreements. Licensed under the Elastic License;
|
||||
* you may not use this file except in compliance with the Elastic License.
|
||||
*/
|
||||
|
||||
export const DATE_FIELD_TYPE = 'date';
|
||||
export const IP_FIELD_TYPE = 'ip';
|
||||
export const MESSAGE_FIELD_NAME = 'message';
|
|
@ -16,9 +16,7 @@ import { FormattedDate } from '../../../formatted_date';
|
|||
import { FormattedIp } from '../../../formatted_ip';
|
||||
import { Port, PORT_NAMES } from '../../../port';
|
||||
|
||||
export const DATE_FIELD_TYPE = 'date';
|
||||
export const IP_FIELD_TYPE = 'ip';
|
||||
export const MESSAGE_FIELD_NAME = 'message';
|
||||
import { DATE_FIELD_TYPE, IP_FIELD_TYPE, MESSAGE_FIELD_NAME } from './constants';
|
||||
|
||||
export const FormattedFieldValue = pure<{
|
||||
eventId: string;
|
||||
|
|
|
@ -16,12 +16,14 @@ import { FormattedIp } from '../../../formatted_ip';
|
|||
import { IS_OPERATOR, DataProvider } from '../../data_providers/data_provider';
|
||||
import { Provider } from '../../data_providers/provider';
|
||||
import { ColumnHeader } from '../column_headers/column_header';
|
||||
import { IP_FIELD_TYPE, FormattedFieldValue } from './formatted_field';
|
||||
import { FormattedFieldValue } from './formatted_field';
|
||||
import { ColumnRenderer } from './column_renderer';
|
||||
import { parseQueryValue } from './parse_query_value';
|
||||
import { parseValue } from './parse_value';
|
||||
import { TruncatableText } from '../../../truncatable_text';
|
||||
|
||||
import { IP_FIELD_TYPE } from './constants';
|
||||
|
||||
export const dataExistsAtColumn = (columnName: string, data: TimelineNonEcsData[]): boolean =>
|
||||
data.findIndex(item => item.field === columnName) !== -1;
|
||||
|
||||
|
|
Loading…
Reference in a new issue