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.

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

[SIEM] Update Timeline to use the latest euiFlyoutBody style #59524

Merged

Conversation

andrew-goldstein
Copy link
Contributor

[SIEM] Update Timeline to use the latest euiFlyoutBody style

A recent update to EUI requires an update to Timeline to restore its original padding, per the before / after screenshots below:

Before

The previous code, which was using the euiFlyoutBody__overflow style, has extra padding (before this PR):

timeline-padding-before-chrome

After Chrome 80.0.3987.132

The new code in this PR uses euiFlyoutBody__overflowContent, which restores the Timeline's original padding:

timeline-paddng-after-chrome-default-theme

timeline-padding-after-chrome-dark-theme

After Firefox 73.0.1

timeline-padding-after-firefox

After Safari 13.0.5

timeline-padding-after-safari

[A recent update to EUI](elastic/eui#2837) requires an update to Timeline to restore its original padding, per the before / after screenshots below:

### Before

The previous code, which was using the `euiFlyoutBody__overflow` style, has extra padding (before this PR):

![timeline-padding-before-chrome](https://user-images.githubusercontent.com/4459398/76060425-81e37500-5f3e-11ea-8083-a58297afee85.png)

### After Chrome `80.0.3987.132`

The new code in this PR uses `euiFlyoutBody__overflowContent`, which restores the Timeline's original padding:

![timeline-paddng-after-chrome-default-theme](https://user-images.githubusercontent.com/4459398/76060436-8b6cdd00-5f3e-11ea-80d6-9ff0e74722c3.png)

![timeline-padding-after-chrome-dark-theme](https://user-images.githubusercontent.com/4459398/76060601-dedf2b00-5f3e-11ea-8a46-1008d7defe09.png)

### After Firefox `73.0.1`

![timeline-padding-after-firefox](https://user-images.githubusercontent.com/4459398/76060692-18b03180-5f3f-11ea-8277-31b6f9dbf211.png)

### After Safari `13.0.5`

![timeline-padding-after-safari](https://user-images.githubusercontent.com/4459398/76060744-38475a00-5f3f-11ea-9b04-cdd45fa41702.png)
@andrew-goldstein andrew-goldstein added Team:SIEM v8.0.0 release_note:skip Skip the PR/issue when compiling release notes v7.7.0 labels Mar 6, 2020
@andrew-goldstein andrew-goldstein self-assigned this Mar 6, 2020
@elasticmachine
Copy link
Contributor

Pinging @elastic/siem (Team:SIEM)

@kibanamachine
Copy link
Contributor

💚 Build Succeeded

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

@andrew-goldstein andrew-goldstein merged commit 060b9fb into elastic:master Mar 6, 2020
@andrew-goldstein andrew-goldstein deleted the restore-timeline-padding branch March 6, 2020 15:45
andrew-goldstein added a commit that referenced this pull request Mar 6, 2020
…#59561)

## [SIEM] Update Timeline to use the latest euiFlyoutBody style

[A recent update to EUI](elastic/eui#2837) requires an update to Timeline to restore its original padding, per the before / after screenshots below:

### Before

The previous code, which was using the `euiFlyoutBody__overflow` style, has extra padding (before this PR):

![timeline-padding-before-chrome](https://user-images.githubusercontent.com/4459398/76060425-81e37500-5f3e-11ea-8083-a58297afee85.png)

### After Chrome `80.0.3987.132`

The new code in this PR uses `euiFlyoutBody__overflowContent`, which restores the Timeline's original padding:

![timeline-paddng-after-chrome-default-theme](https://user-images.githubusercontent.com/4459398/76060436-8b6cdd00-5f3e-11ea-80d6-9ff0e74722c3.png)

![timeline-padding-after-chrome-dark-theme](https://user-images.githubusercontent.com/4459398/76060601-dedf2b00-5f3e-11ea-8a46-1008d7defe09.png)

### After Firefox `73.0.1`

![timeline-padding-after-firefox](https://user-images.githubusercontent.com/4459398/76060692-18b03180-5f3f-11ea-8277-31b6f9dbf211.png)

### After Safari `13.0.5`

![timeline-padding-after-safari](https://user-images.githubusercontent.com/4459398/76060744-38475a00-5f3f-11ea-9b04-cdd45fa41702.png)
gmmorris added a commit to gmmorris/kibana that referenced this pull request Mar 9, 2020
* master: (154 commits)
  Add an optional authentication mode for HTTP resources (elastic#58589)
  Implement embeddable drilldown menu options (elastic#59232)
  [Alerting] "Create alert" graph visualization design improvements (elastic#59399)
  Alerting update route throttle property is missing (elastic#59580)
  [SIEM] Adds 'Load prebuilt rules' Cypress test (elastic#59529)
  Show error if field is not found during filter rendering (elastic#59298)
  Navigate back to discover app during test, because the saved search from the preceding test has major performance problems when used with this test (elastic#59571)
  Check for alert dialog when doing a force logout (elastic#59329)
  ensure fs deletes are not cwd dependent (elastic#59570)
  Empty message for APM service map (elastic#59518)
  [Drilldowns] <ActionWizard/> Component (elastic#59032)
  [Reporting] Improve the page exit error messages (elastic#59351)
  Ensure logged out starting state for tests that need it (elastic#59322)
  Hide input value from kbn-config-schema error messages (elastic#58843)
  [ML] Transforms: Migrate client plugin to NP. (elastic#59443)
  [ML] Disable failing functional tests
  [SIEM] Update Timeline to use the latest euiFlyoutBody style (elastic#59524)
  Temporarily remove the project mappings for PR labels (elastic#59493)
  [Alerting] replace index threshold graph usage of watcher APIs with new API (elastic#59385)
  [ML] Show view series link in anomalies table for machine_learning_user role (elastic#59549)
  ...
jkelastic pushed a commit to jkelastic/kibana that referenced this pull request Mar 12, 2020
…#59524)

## [SIEM] Update Timeline to use the latest euiFlyoutBody style

[A recent update to EUI](elastic/eui#2837) requires an update to Timeline to restore its original padding, per the before / after screenshots below:

### Before

The previous code, which was using the `euiFlyoutBody__overflow` style, has extra padding (before this PR):

![timeline-padding-before-chrome](https://user-images.githubusercontent.com/4459398/76060425-81e37500-5f3e-11ea-8083-a58297afee85.png)

### After Chrome `80.0.3987.132`

The new code in this PR uses `euiFlyoutBody__overflowContent`, which restores the Timeline's original padding:

![timeline-paddng-after-chrome-default-theme](https://user-images.githubusercontent.com/4459398/76060436-8b6cdd00-5f3e-11ea-80d6-9ff0e74722c3.png)

![timeline-padding-after-chrome-dark-theme](https://user-images.githubusercontent.com/4459398/76060601-dedf2b00-5f3e-11ea-8a46-1008d7defe09.png)

### After Firefox `73.0.1`

![timeline-padding-after-firefox](https://user-images.githubusercontent.com/4459398/76060692-18b03180-5f3f-11ea-8277-31b6f9dbf211.png)

### After Safari `13.0.5`

![timeline-padding-after-safari](https://user-images.githubusercontent.com/4459398/76060744-38475a00-5f3f-11ea-9b04-cdd45fa41702.png)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
release_note:skip Skip the PR/issue when compiling release notes Team:SIEM v7.7.0 v8.0.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants