maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

[SIEM] Fix overlapping timestamp tooltip in expanded Event Details (#38328)

Browse source 
## 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:
Garrett Spong 2019-06-06 18:23:29 -06:00 committed by GitHub
parent acba93a38c
commit 39c1598018
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 21 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
x-pack/plugins/siem/public/components/event_details/columns.tsx
View file

@ -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

9
x-pack/plugins/siem/public/components/timeline/body/renderers/constants.tsx Normal file
View file

@ -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';

4
x-pack/plugins/siem/public/components/timeline/body/renderers/formatted_field.tsx
View file

@ -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;

4
x-pack/plugins/siem/public/components/timeline/body/renderers/plain_column_renderer.tsx
View file

@ -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;