[Security Solution] Full screen timeline, Collapse event #71786
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- increase margin around `Exit full screen` button - cleanup timeline resize handle - wip: fix style issue - restored full screen button style - Extends full screen mode to all timeline-based views - Fixes an issue where the size of the actions column changed while loading data in timeline based views - Collapse event button to avoid scrolling to the top of an event - Adds tooltip to the timeline sort indiciator to indicate current sort direction - fixing tests
…lution/public/common/store/store.ts`
|
Pinging @elastic/siem (Team:SIEM) |
XavierM
reviewed
Jul 14, 2020
x-pack/plugins/security_solution/public/common/components/event_details/event_details.tsx
Outdated
Show resolved
Hide resolved
XavierM
reviewed
Jul 14, 2020
x-pack/plugins/security_solution/public/common/components/event_details/event_details.tsx
Outdated
Show resolved
Hide resolved
XavierM
reviewed
Jul 14, 2020
x-pack/plugins/security_solution/public/common/components/events_viewer/events_viewer.tsx
Outdated
Show resolved
Hide resolved
XavierM
reviewed
Jul 14, 2020
x-pack/plugins/security_solution/public/common/components/page/index.tsx
Show resolved
Hide resolved
XavierM
reviewed
Jul 14, 2020
XavierM
reviewed
Jul 14, 2020
x-pack/plugins/security_solution/public/timelines/components/graph_overlay/index.tsx
Outdated
Show resolved
Hide resolved
XavierM
approved these changes
Jul 15, 2020
There was a problem hiding this comment.
This is so nice, I feel like I am in a magic security solutions castle.
Good job, @andrew-goldstein another feature who would be loved by our users.
…sconfig`, which was generated by running: ``` node x-pack/plugins/security_solution/scripts/optimize_tsconfig ``` After returning to the default (checked-in) `tsconfig` via: ``` node x-pack/plugins/security_solution/scripts/unoptimize_tsconfig.js ``` it passes the type checker without error, so I'm removing the `@ts-ignore`
|
@elasticmachine merge upstream |
…bana into full-screen-timeline
|
@elasticmachine merge upstream |
💚 Build SucceededBuild metrics@kbn/optimizer bundle module count
async chunks size
miscellaneous assets size
page load bundle size
History
To update your PR or re-run it, just comment with: |
angorayc
pushed a commit
that referenced
this pull request
Jul 15, 2020
…1838) ## Full screen Timeline & Timeline-based views - Adds a _Full screen_ mode to Timeline, and all Timeline-based views, including: - Detections - Detections > Rule details - Hosts > Events - Hosts > External alerts - Network > External alerts - Timeline - Enter full screen from any Resolver - Adds a `Collapse event` action for quickly collapsing an expanded Timeline event - Hides the `Add to case action` in timeline-based Resolver views, so those actions are only enabled in Timeline (a `TODO` from #70111) ### Full screen detections  ### Enter full screen from any Resolver  ### Full screen Timeline  ### Collapse event  ### Sort tooltip 
gmmorris
added a commit
to gmmorris/kibana
that referenced
this pull request
Jul 15, 2020
* master: [APM] Add error rates to Service Map popovers (elastic#69520) [Security Solution][Detection Engine] - Update exceptions logic (elastic#71512) [Security Solution] Full screen timeline, Collapse event (elastic#71786) [Security Solution][Exception Modal] Create endpoint exception list if it doesn't already exist (elastic#71807) [Detection Rules] Add 7.9 rules (elastic#71808) [Search] Add telemetry for data plugin search service (elastic#70677) Add @elastic/safer-lodash-set as an alternative to lodash.set (elastic#67452) [tests] Temporarily skipped to promote snapshot
gmmorris
added a commit
to gmmorris/kibana
that referenced
this pull request
Jul 15, 2020
* master: [APM] Add error rates to Service Map popovers (elastic#69520) [Security Solution][Detection Engine] - Update exceptions logic (elastic#71512) [Security Solution] Full screen timeline, Collapse event (elastic#71786) [Security Solution][Exception Modal] Create endpoint exception list if it doesn't already exist (elastic#71807) [Detection Rules] Add 7.9 rules (elastic#71808) [Search] Add telemetry for data plugin search service (elastic#70677) Add @elastic/safer-lodash-set as an alternative to lodash.set (elastic#67452) [tests] Temporarily skipped to promote snapshot
andrew-goldstein
added a commit
to andrew-goldstein/kibana
that referenced
this pull request
Jul 21, 2020
Fixes CSS issues related to the [Full screen timeline, Collapse event](elastic#71786) feature: - Sometimes, Timeline's left padding is missing in Full screen mode - The `Attach to new case` and `Attach to existing case...` actions should be centered in Full screen mode - The Timeline flyout button is not opaque when the alerts table is in Full screen mode ### Sometimes, Timeline's left padding is missing in Full screen mode To reproduce: 1) Drag anything to the Timeline 2) Click the `Full screen` button **Expected result** - [x] The timeline has left padding in full screen mode **Actual result** - [ ] Sometimes, the left padding of the Timeline is missing, per the screenshot below:  ### Fix: screenshot  ### The `Attach to new case` and `Attach to existing case...` actions should be centered in full screen mode 1) Create a new timeline with the following KQL query: `agent.type : endpoint` 2) Click the `Analyze event` button on any enabled event to view Resolver **Expected result** - [x] The `Attach to new case` and `Attach to existing case...` actions should be centered between the horizontal lines **Actual result** - [ ] The `Attach to new case` and `Attach to existing case...` actions are **NOT** centered, per the screenshot below:  ### Fix: screenshot  ### The Timeline flyout button is not opaque when the alerts table is in Full screen mode To reproduce: 1) Navigate to Security > Detections 2) Click on the `Full screen` button **Expected result** - [x] The Timeline flyout button is opaque when the alerts table is in Full screen mode **Actual result** - [ ] The Timeline flyout button is **NOT** opaque when the alerts table is in Full screen mode, per the screenshot below:  ## Fix: screenshot (light theme)  ## Fix: screenshot (dark theme)  ### Desk testing Desk tested in : - Chrome `84.0.4147.89` - Firefox `78.0.2` - Safari `13.1.2`
6 tasks
andrew-goldstein
added a commit
that referenced
this pull request
Jul 21, 2020
## [Security Solution] Full screen Timeline CSS fixes Fixes CSS issues related to the [Full screen timeline, Collapse event](#71786) feature: - Sometimes, Timeline's left padding is missing in Full screen mode - The `Attach to new case` and `Attach to existing case...` actions should be centered in Full screen mode - The Timeline flyout button is not opaque when the alerts table is in Full screen mode ### Sometimes, Timeline's left padding is missing in Full screen mode To reproduce: 1) Drag anything to the Timeline 2) Click the `Full screen` button **Expected result** - [x] The timeline has left padding in full screen mode **Actual result** - [x] Sometimes, the left padding of the Timeline is missing, per the screenshot below:  ### Fix: screenshot  ### The `Attach to new case` and `Attach to existing case...` actions should be centered in full screen mode 1) Create a new timeline with the following KQL query: `agent.type : endpoint` 2) Click the `Analyze event` button on any enabled event to view Resolver **Expected result** - [x] The `Attach to new case` and `Attach to existing case...` actions should be centered between the horizontal lines **Actual result** - [x] The `Attach to new case` and `Attach to existing case...` actions are **NOT** centered, per the screenshot below:  ### Fix: screenshot  ### The Timeline flyout button is not opaque when the alerts table is in Full screen mode To reproduce: 1) Navigate to Security > Detections 2) Click on the `Full screen` button **Expected result** - [x] The Timeline flyout button is opaque when the alerts table is in Full screen mode **Actual result** - [x] The Timeline flyout button is **NOT** opaque when the alerts table is in Full screen mode, per the screenshot below:  ## Fix: screenshot (light theme)  ## Fix: screenshot (dark theme)  ### Desk testing Desk tested in : - Chrome `84.0.4147.89` - Firefox `78.0.2` - Safari `13.1.2`
andrew-goldstein
added a commit
to andrew-goldstein/kibana
that referenced
this pull request
Jul 21, 2020
## [Security Solution] Full screen Timeline CSS fixes Fixes CSS issues related to the [Full screen timeline, Collapse event](elastic#71786) feature: - Sometimes, Timeline's left padding is missing in Full screen mode - The `Attach to new case` and `Attach to existing case...` actions should be centered in Full screen mode - The Timeline flyout button is not opaque when the alerts table is in Full screen mode ### Sometimes, Timeline's left padding is missing in Full screen mode To reproduce: 1) Drag anything to the Timeline 2) Click the `Full screen` button **Expected result** - [x] The timeline has left padding in full screen mode **Actual result** - [x] Sometimes, the left padding of the Timeline is missing, per the screenshot below:  ### Fix: screenshot  ### The `Attach to new case` and `Attach to existing case...` actions should be centered in full screen mode 1) Create a new timeline with the following KQL query: `agent.type : endpoint` 2) Click the `Analyze event` button on any enabled event to view Resolver **Expected result** - [x] The `Attach to new case` and `Attach to existing case...` actions should be centered between the horizontal lines **Actual result** - [x] The `Attach to new case` and `Attach to existing case...` actions are **NOT** centered, per the screenshot below:  ### Fix: screenshot  ### The Timeline flyout button is not opaque when the alerts table is in Full screen mode To reproduce: 1) Navigate to Security > Detections 2) Click on the `Full screen` button **Expected result** - [x] The Timeline flyout button is opaque when the alerts table is in Full screen mode **Actual result** - [x] The Timeline flyout button is **NOT** opaque when the alerts table is in Full screen mode, per the screenshot below:  ## Fix: screenshot (light theme)  ## Fix: screenshot (dark theme)  ### Desk testing Desk tested in : - Chrome `84.0.4147.89` - Firefox `78.0.2` - Safari `13.1.2`
andrew-goldstein
added a commit
to andrew-goldstein/kibana
that referenced
this pull request
Jul 21, 2020
## [Security Solution] Full screen Timeline CSS fixes Fixes CSS issues related to the [Full screen timeline, Collapse event](elastic#71786) feature: - Sometimes, Timeline's left padding is missing in Full screen mode - The `Attach to new case` and `Attach to existing case...` actions should be centered in Full screen mode - The Timeline flyout button is not opaque when the alerts table is in Full screen mode ### Sometimes, Timeline's left padding is missing in Full screen mode To reproduce: 1) Drag anything to the Timeline 2) Click the `Full screen` button **Expected result** - [x] The timeline has left padding in full screen mode **Actual result** - [x] Sometimes, the left padding of the Timeline is missing, per the screenshot below:  ### Fix: screenshot  ### The `Attach to new case` and `Attach to existing case...` actions should be centered in full screen mode 1) Create a new timeline with the following KQL query: `agent.type : endpoint` 2) Click the `Analyze event` button on any enabled event to view Resolver **Expected result** - [x] The `Attach to new case` and `Attach to existing case...` actions should be centered between the horizontal lines **Actual result** - [x] The `Attach to new case` and `Attach to existing case...` actions are **NOT** centered, per the screenshot below:  ### Fix: screenshot  ### The Timeline flyout button is not opaque when the alerts table is in Full screen mode To reproduce: 1) Navigate to Security > Detections 2) Click on the `Full screen` button **Expected result** - [x] The Timeline flyout button is opaque when the alerts table is in Full screen mode **Actual result** - [x] The Timeline flyout button is **NOT** opaque when the alerts table is in Full screen mode, per the screenshot below:  ## Fix: screenshot (light theme)  ## Fix: screenshot (dark theme)  ### Desk testing Desk tested in : - Chrome `84.0.4147.89` - Firefox `78.0.2` - Safari `13.1.2`
andrew-goldstein
added a commit
that referenced
this pull request
Jul 21, 2020
## [Security Solution] Full screen Timeline CSS fixes Fixes CSS issues related to the [Full screen timeline, Collapse event](#71786) feature: - Sometimes, Timeline's left padding is missing in Full screen mode - The `Attach to new case` and `Attach to existing case...` actions should be centered in Full screen mode - The Timeline flyout button is not opaque when the alerts table is in Full screen mode ### Sometimes, Timeline's left padding is missing in Full screen mode To reproduce: 1) Drag anything to the Timeline 2) Click the `Full screen` button **Expected result** - [x] The timeline has left padding in full screen mode **Actual result** - [x] Sometimes, the left padding of the Timeline is missing, per the screenshot below:  ### Fix: screenshot  ### The `Attach to new case` and `Attach to existing case...` actions should be centered in full screen mode 1) Create a new timeline with the following KQL query: `agent.type : endpoint` 2) Click the `Analyze event` button on any enabled event to view Resolver **Expected result** - [x] The `Attach to new case` and `Attach to existing case...` actions should be centered between the horizontal lines **Actual result** - [x] The `Attach to new case` and `Attach to existing case...` actions are **NOT** centered, per the screenshot below:  ### Fix: screenshot  ### The Timeline flyout button is not opaque when the alerts table is in Full screen mode To reproduce: 1) Navigate to Security > Detections 2) Click on the `Full screen` button **Expected result** - [x] The Timeline flyout button is opaque when the alerts table is in Full screen mode **Actual result** - [x] The Timeline flyout button is **NOT** opaque when the alerts table is in Full screen mode, per the screenshot below:  ## Fix: screenshot (light theme)  ## Fix: screenshot (dark theme)  ### Desk testing Desk tested in : - Chrome `84.0.4147.89` - Firefox `78.0.2` - Safari `13.1.2`
andrew-goldstein
added a commit
that referenced
this pull request
Jul 21, 2020
## [Security Solution] Full screen Timeline CSS fixes Fixes CSS issues related to the [Full screen timeline, Collapse event](#71786) feature: - Sometimes, Timeline's left padding is missing in Full screen mode - The `Attach to new case` and `Attach to existing case...` actions should be centered in Full screen mode - The Timeline flyout button is not opaque when the alerts table is in Full screen mode ### Sometimes, Timeline's left padding is missing in Full screen mode To reproduce: 1) Drag anything to the Timeline 2) Click the `Full screen` button **Expected result** - [x] The timeline has left padding in full screen mode **Actual result** - [x] Sometimes, the left padding of the Timeline is missing, per the screenshot below:  ### Fix: screenshot  ### The `Attach to new case` and `Attach to existing case...` actions should be centered in full screen mode 1) Create a new timeline with the following KQL query: `agent.type : endpoint` 2) Click the `Analyze event` button on any enabled event to view Resolver **Expected result** - [x] The `Attach to new case` and `Attach to existing case...` actions should be centered between the horizontal lines **Actual result** - [x] The `Attach to new case` and `Attach to existing case...` actions are **NOT** centered, per the screenshot below:  ### Fix: screenshot  ### The Timeline flyout button is not opaque when the alerts table is in Full screen mode To reproduce: 1) Navigate to Security > Detections 2) Click on the `Full screen` button **Expected result** - [x] The Timeline flyout button is opaque when the alerts table is in Full screen mode **Actual result** - [x] The Timeline flyout button is **NOT** opaque when the alerts table is in Full screen mode, per the screenshot below:  ## Fix: screenshot (light theme)  ## Fix: screenshot (dark theme)  ### Desk testing Desk tested in : - Chrome `84.0.4147.89` - Firefox `78.0.2` - Safari `13.1.2`
MindyRS
added
the
Team: SecuritySolution
|
Pinging @elastic/security-solution (Team: SecuritySolution) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Full screen Timeline & Timeline-based views
Collapse eventaction for quickly collapsing an expanded Timeline eventAdd to case actionin timeline-based Resolver views, so those actions are only enabled in Timeline (aTODOfrom [Security] Investigate in Resolver Timeline Integration #70111)Full screen detections
Enter full screen from any Resolver
Full screen Timeline
Collapse event
Sort tooltip