Skip to content
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

Jump to bottom

[SIEM] Fixes a CSS issue with Timeline field truncation #65789

Merged
merged 1 commit into from
May 8, 2020
Merged

[SIEM] Fixes a CSS issue with Timeline field truncation #65789

merged 1 commit into from
May 8, 2020

Conversation

andrew-goldstein
Copy link
Contributor

Summary

Fixes a CSS issue where Timeline field truncation wasn't working, per the following screenshots:

Before

before

After

after

Desk testing

  • The timeline in the Before and After screenshots above includes columns that typically contain large values (e.g. process.hash.sha256). It also contains the event.module column, which has special formatting, as detailed below.

  • You may re-create the timeline shown in the Before and After screenshots, or download the exported timeline from the following link truncation.ndjson.txt and import it. (Remove the .txt extension after downloading it.)

  • The event.module field has special formatting that displays an icon link to the endpoint if it's been configured. To desk test this without configuring an endpoint, edit x-pack/plugins/siem/public/components/timeline/body/renderers/formatted_field_helpers.tsx, and change the following line:

{endpointRefUrl != null && canYouAddEndpointLogo(moduleName, endpointRefUrl) && (

to

{true && (

The above change forces the icon to always appear, even if you don't have an endpoint configured.

Desk tested in:

  • Chrome 81.0.4044.138
  • Firefox 76.0
  • Safari 13.1

@andrew-goldstein andrew-goldstein added Team:SIEM v8.0.0 release_note:skip Skip the PR/issue when compiling release notes v7.8.0 v7.9.0 labels May 7, 2020
@andrew-goldstein andrew-goldstein requested review from a team as code owners May 7, 2020 22:34
@andrew-goldstein andrew-goldstein self-assigned this May 7, 2020
@elasticmachine
Copy link
Contributor

Pinging @elastic/siem (Team:SIEM)

andrew-goldstein
andrew-goldstein commented May 7, 2020
View reviewed changes
x-pack/plugins/siem/public/components/with_hover_actions/index.tsx
.euiPopover__anchor {
width: 100%;
}
` as unknown) as typeof EuiPopover;
Copy link
Contributor Author

Choose a reason for hiding this comment

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

thanks @chandlerprall for the help wrapping EuiPopover in a styled-component!

rylnd
rylnd approved these changes May 7, 2020
View reviewed changes
Copy link
Contributor

@rylnd rylnd left a comment

Choose a reason for hiding this comment

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

Tested out locally, timeline looks much cleaner! Thank you for the helpful reviewer instructions, as well.

x-pack/plugins/siem/public/components/with_hover_actions/index.tsx Show resolved Hide resolved
@andrew-goldstein
## Summary
c5d8fc8 
Fixes [a CSS issue where Timeline field truncation](elastic#65170) wasn't working, per the following screenshots:

### Before

<img width="1083" alt="before" src="https://user-images.githubusercontent.com/4459398/81349357-16706d80-907d-11ea-8051-7f2db803d701.png">

### After

<img width="1078" alt="after" src="https://user-images.githubusercontent.com/4459398/81349372-1b352180-907d-11ea-8ac7-8bde3f10394f.png">

## Desk testing

* The timeline in the _Before_ and _After_ screenshots above includes columns that typically contain large values (e.g. `process.hash.sha256`). It also contains the `event.module` column, which has special formatting, as detailed below.

* You may re-create the timeline shown in the _Before_ and _After_ screenshots, or download the exported timeline from the following link [truncation.ndjson.txt](https://github.com/elastic/kibana/files/4596036/truncation.ndjson.txt) and import it. (Remove the `.txt` extension after downloading it.)

* The `event.module` field has special formatting that displays an icon link to the endpoint if it's been configured. To desk test this without configuring an endpoint, edit `x-pack/plugins/siem/public/components/timeline/body/renderers/formatted_field_helpers.tsx`, and change the following line:

```
{endpointRefUrl != null && canYouAddEndpointLogo(moduleName, endpointRefUrl) && (
```

to

```
{true && (
```

The above change forces the icon to always appear, even if you don't have an endpoint configured.

### Desk tested in:

- Chrome `81.0.4044.138`
- Firefox `76.0`
- Safari `13.1`
@kibanamachine
Copy link
Contributor

💚 Build Succeeded

History

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

yctercero
yctercero approved these changes May 8, 2020
View reviewed changes
Copy link
Contributor

@yctercero yctercero left a comment

Choose a reason for hiding this comment

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

LGTM! Pulled down and tested numerous fields including event.module. It looks great! Thanks for the fix.

@andrew-goldstein andrew-goldstein merged commit e79f331 into elastic:master May 8, 2020
@andrew-goldstein andrew-goldstein deleted the fix-timeline-field-truncation branch May 8, 2020 15:38
@andrew-goldstein andrew-goldstein mentioned this pull request May 8, 2020
Merged
andrew-goldstein added a commit to andrew-goldstein/kibana that referenced this pull request May 8, 2020
@andrew-goldstein
[SIEM] Fixes a CSS issue with Timeline field truncation (elastic#65789)
c8b6380 
## Summary

Fixes [a CSS issue where Timeline field truncation](elastic#65170) wasn't working, per the following screenshots:

### Before

<img width="1083" alt="before" src="https://user-images.githubusercontent.com/4459398/81349357-16706d80-907d-11ea-8051-7f2db803d701.png">

### After

<img width="1078" alt="after" src="https://user-images.githubusercontent.com/4459398/81349372-1b352180-907d-11ea-8ac7-8bde3f10394f.png">

## Desk testing

* The timeline in the _Before_ and _After_ screenshots above includes columns that typically contain large values (e.g. `process.hash.sha256`). It also contains the `event.module` column, which has special formatting, as detailed below.

* You may re-create the timeline shown in the _Before_ and _After_ screenshots, or download the exported timeline from the following link [truncation.ndjson.txt](https://github.com/elastic/kibana/files/4596036/truncation.ndjson.txt) and import it. (Remove the `.txt` extension after downloading it.)

* The `event.module` field has special formatting that displays an icon link to the endpoint if it's been configured. To desk test this without configuring an endpoint, edit `x-pack/plugins/siem/public/components/timeline/body/renderers/formatted_field_helpers.tsx`, and change the following line:

```
{endpointRefUrl != null && canYouAddEndpointLogo(moduleName, endpointRefUrl) && (
```

to

```
{true && (
```

The above change forces the icon to always appear, even if you don't have an endpoint configured.

### Desk tested in:

- Chrome `81.0.4044.138`
- Firefox `76.0`
- Safari `13.1`
@andrew-goldstein andrew-goldstein mentioned this pull request May 8, 2020
Merged
andrew-goldstein added a commit that referenced this pull request May 8, 2020
@andrew-goldstein
[SIEM] Fixes a CSS issue with Timeline field truncation (#65789) (#65878
ceab635 
)

## Summary

Fixes [a CSS issue where Timeline field truncation](#65170) wasn't working, per the following screenshots:

### Before

<img width="1083" alt="before" src="https://user-images.githubusercontent.com/4459398/81349357-16706d80-907d-11ea-8051-7f2db803d701.png">

### After

<img width="1078" alt="after" src="https://user-images.githubusercontent.com/4459398/81349372-1b352180-907d-11ea-8ac7-8bde3f10394f.png">

## Desk testing

* The timeline in the _Before_ and _After_ screenshots above includes columns that typically contain large values (e.g. `process.hash.sha256`). It also contains the `event.module` column, which has special formatting, as detailed below.

* You may re-create the timeline shown in the _Before_ and _After_ screenshots, or download the exported timeline from the following link [truncation.ndjson.txt](https://github.com/elastic/kibana/files/4596036/truncation.ndjson.txt) and import it. (Remove the `.txt` extension after downloading it.)

* The `event.module` field has special formatting that displays an icon link to the endpoint if it's been configured. To desk test this without configuring an endpoint, edit `x-pack/plugins/siem/public/components/timeline/body/renderers/formatted_field_helpers.tsx`, and change the following line:

```
{endpointRefUrl != null && canYouAddEndpointLogo(moduleName, endpointRefUrl) && (
```

to

```
{true && (
```

The above change forces the icon to always appear, even if you don't have an endpoint configured.

### Desk tested in:

- Chrome `81.0.4044.138`
- Firefox `76.0`
- Safari `13.1`
andrew-goldstein added a commit that referenced this pull request May 8, 2020
@andrew-goldstein
[SIEM] Fixes a CSS issue with Timeline field truncation (#65789) (#65879
7966756 
)

## Summary

Fixes [a CSS issue where Timeline field truncation](#65170) wasn't working, per the following screenshots:

### Before

<img width="1083" alt="before" src="https://user-images.githubusercontent.com/4459398/81349357-16706d80-907d-11ea-8051-7f2db803d701.png">

### After

<img width="1078" alt="after" src="https://user-images.githubusercontent.com/4459398/81349372-1b352180-907d-11ea-8ac7-8bde3f10394f.png">

## Desk testing

* The timeline in the _Before_ and _After_ screenshots above includes columns that typically contain large values (e.g. `process.hash.sha256`). It also contains the `event.module` column, which has special formatting, as detailed below.

* You may re-create the timeline shown in the _Before_ and _After_ screenshots, or download the exported timeline from the following link [truncation.ndjson.txt](https://github.com/elastic/kibana/files/4596036/truncation.ndjson.txt) and import it. (Remove the `.txt` extension after downloading it.)

* The `event.module` field has special formatting that displays an icon link to the endpoint if it's been configured. To desk test this without configuring an endpoint, edit `x-pack/plugins/siem/public/components/timeline/body/renderers/formatted_field_helpers.tsx`, and change the following line:

```
{endpointRefUrl != null && canYouAddEndpointLogo(moduleName, endpointRefUrl) && (
```

to

```
{true && (
```

The above change forces the icon to always appear, even if you don't have an endpoint configured.

### Desk tested in:

- Chrome `81.0.4044.138`
- Firefox `76.0`
- Safari `13.1`
gmmorris added a commit to gmmorris/kibana that referenced this pull request May 11, 2020
@gmmorris
Merge branch 'master' into alerting/lazy-load-components
74f076f 
* master: (58 commits)
  [Drilldowns][chore] import dashboard url generator from plugin contract (elastic#64628)
  fix double flyouts in add panel flow (elastic#65861)
  Point 7.x to 7.9.0 in .backportrc.json
  Mount ui/new_platform applications in same div structure as Core (elastic#63930)
  [Uptime] Settings threshold validation (elastic#65454)
  Fix edit alert flyout to update initialAlert after edit (elastic#65359)
  Fix anomalies display on focused APM service map (elastic#65882)
  [SIEM][Detection Engine] Increases the template limit for ECS mappings
  [SIEM][CASE] Moves functional tests from "legacyEs" to "Es" (elastic#65851)
  [Metrics UI] Fix p95/p99 charts and alerting error (elastic#65579)
  [ML] Add job timing stats to anomaly jobs (elastic#65696)
  restore index pattern management data-test-subj's (elastic#64697)
  [Discover] Prevent whitespace wrapping of doc table header (elastic#52861)
  [SIEM] Fixes a CSS issue with Timeline field truncation (elastic#65789)
  Skipping failing tests. elastic#65867 elastic#65866 elastic#65865
  [Discover] Deangularize the hits counter and create a react component (elastic#65631)
  Tsvb less update (elastic#65467)
  [TSVB] Remove remaining lodash.set usage (elastic#65846)
  [Uptime] Add `a11y` tests (elastic#65514)
  [Uptime] Enable loading on monitor list (elastic#65670)
  ...
@MindyRS MindyRS added the Team: SecuritySolution Security Solutions Team working on SIEM, Endpoint, Timeline, Resolver, etc. label Sep 23, 2021
@elasticmachine
Copy link
Contributor

Pinging @elastic/security-solution (Team: SecuritySolution)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@rylnd rylnd rylnd approved these changes

@yctercero yctercero yctercero approved these changes

Assignees

@andrew-goldstein andrew-goldstein

Labels
release_note:skip Skip the PR/issue when compiling release notes Team: SecuritySolution Security Solutions Team working on SIEM, Endpoint, Timeline, Resolver, etc. Team:SIEM v7.8.0 v7.9.0 v8.0.0
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[SIEM][Timeline] - Timeline field truncation no longer working
6 participants
@andrew-goldstein @elasticmachine @kibanamachine @rylnd @yctercero @MindyRS