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

[Security Solution] Update Timeline tooltips to use action words / fewer words #126973

Closed
Tracked by #120277
andrew-goldstein opened this issue Mar 5, 2022 · 3 comments
Closed
Tracked by #120277
Labels
bug Fixes for quality problems that affect the customer experience fixed impact:low Addressing this issue will have a low level of impact on the quality/strength of our product. QA:Validated Issue has been validated by QA Team: SecuritySolution Security Solutions Team working on SIEM, Endpoint, Timeline, Resolver, etc. Team:Threat Hunting:Investigations Security Solution Investigations Team v8.3.0

Comments

@andrew-goldstein
Copy link
Contributor

andrew-goldstein commented Mar 5, 2022

Update the row-level action button tooltips in Timeline to use action words / fewer words, per the EUI Guidelines which state:

Labels should provide a clear indication of that action that occurs when the user clicks the button. Prefer action words, and include an object when it is not clear from the context, for example, Add dashboard. Labels should be three words or fewer. If your label requires more words, consider using a text link instead.

  1. Per the screenshot below, unpinned alerts and events currently display a tooltip that reads Unpinned event:

unpinned_event

  • Changing the tooltip above to Pin alert would provide a clear indication of the action that occurs when the user clicks the button
  • When an alert is already pinned, changing the tooltip to Unpin alert would similarly provide a clear indication what happens when the button is clicked
  1. The notes button tooltip currently reads Add notes for this event, per the screenshot below:

add_notes_for_this_event

  • Per the Labels should be three words or fewer guidance above, Add note would suffice

Kibana/Elasticsearch Stack version:

8.1.0

Steps to reproduce:

  1. Add an alert from Security > Alerts to a timeline

  2. Hover over an unpinned alert

Expected result

  • The tooltip text is Pin alert

Actual result

  • The tooltip text is Unpinned event
  1. Pin an alert

  2. Hover over the pinned alert

Expected result

  • The tooltip text is Unpin alert

Actual result

  • The tooltip text is Pinned event
  1. Hover over the notes button

Expected result

  • The tooltip text is Add note

Actual result

  • The tooltip text is Add notes for this event
  1. Add an event from Hosts > Events to a timeline

  2. Hover over an unpinned event

Expected result

  • The tooltip text is Pin event

Actual result

  • The tooltip text is Unpinned event
  1. Pin an event

  2. Hover over the pinned event

Expected result

  • The tooltip text is Unpin event

Actual result

  • The tooltip text is Pinned event
  1. Hover over the notes button

Expected result

  • The tooltip text is Add note

Actual result

  • The tooltip text is Add notes for this event
@andrew-goldstein andrew-goldstein added bug Fixes for quality problems that affect the customer experience triage_needed Team: SecuritySolution Security Solutions Team working on SIEM, Endpoint, Timeline, Resolver, etc. Team:Threat Hunting:Investigations Security Solution Investigations Team labels Mar 5, 2022
@elasticmachine
Copy link
Contributor

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

@michaelolo24 michaelolo24 added impact:low Addressing this issue will have a low level of impact on the quality/strength of our product. and removed triage_needed labels Mar 18, 2022
andrew-goldstein added a commit to andrew-goldstein/kibana that referenced this issue May 23, 2022
…/ fewer words

- This PR updates the row-level action button tooltips in Timeline, per issue <elastic#126973>, to use action words / fewer words. This brings the tooltips up to date with the latest [EUI Guidelines](https://elastic.github.io/eui/#/navigation/button/guidelines).
- The tooltips now differentiate between events and alerts. (The original tooltips were written before the Security Solution shipped with a detection engine, so there was no prior distinction.)

### Alert tooltips

This section contains before / after screenshots for alerts.

#### Before: Unpinned alert

![01-BEFORE-unpinned-alert](https://user-images.githubusercontent.com/4459398/169910015-ec5789c2-a691-4e48-b375-c95d15db8378.png)

#### After: Unpinned alert

![01-AFTER-unpinned-alert](https://user-images.githubusercontent.com/4459398/169910149-0cdd8c65-a9b0-43b6-8550-cd0d9c512b17.png)

#### Before: Pinned alert

![02-BEFORE-pinned-alert](https://user-images.githubusercontent.com/4459398/169910207-27aa3307-d33d-4fb5-9ff7-042a6adf030e.png)

#### After: Pinned alert

![02-AFTER-pinned-alert](https://user-images.githubusercontent.com/4459398/169910265-087a3779-2330-437d-b83f-d887eb4adaf9.png)

#### Before: Add a note to an alert

![03-BEFORE-alert-add-note](https://user-images.githubusercontent.com/4459398/169910347-39ca30db-a010-4739-b67f-464851730218.png)

#### After: Add a note to an alert

![03-AFTER-alert-add-note](https://user-images.githubusercontent.com/4459398/169910407-510ff4f3-e0ee-4649-8a44-5b7411a5b629.png)

#### Before: A pinned alert with notes

![04-BEFORE-pinned-alert-with-notes](https://user-images.githubusercontent.com/4459398/169910491-59869c08-2b2b-4c42-a39b-4d4efc05e668.png)

#### After: A pinned alert with notes

![04-AFTER-pinned-alert-with-notes](https://user-images.githubusercontent.com/4459398/169910573-7ae31f88-1199-4744-ae5e-54b40d3c34cb.png)

#### Before: A timeline template with alerts

![05-BEFORE-alert-template](https://user-images.githubusercontent.com/4459398/169910699-03ead1dd-d543-4687-a6f3-14b1b95023aa.png)

#### After: A timeline template with alerts

![05-AFTER-alert-template](https://user-images.githubusercontent.com/4459398/169910740-120eb087-111f-42e9-bb24-af3c344e68c7.png)

### Event tooltips

This section contains before / after screenshots for events.

#### Before: Unpinned event

![06-BEFORE-unpinned-event](https://user-images.githubusercontent.com/4459398/169911532-047d07e2-b4b2-4719-a1a9-fe67c9e04162.png)

#### After: Unpinned event

![06-AFTER-unpinned-event](https://user-images.githubusercontent.com/4459398/169911561-3c452e5b-23de-4144-b0c9-3e805fbd4021.png)

#### Before: Pinned event

![07-BEFORE-pinned-event](https://user-images.githubusercontent.com/4459398/169911699-ffde9799-6120-49e0-8012-37dd687bba31.png)

#### After: Pinned event

![07-AFTER-pinned-event](https://user-images.githubusercontent.com/4459398/169911741-48eeba36-a2c3-4a53-b5f6-57c376b82aa0.png)

#### Before: Add a note to event

![08-BEFORE-event-add-note](https://user-images.githubusercontent.com/4459398/169911867-4139d719-dd5d-4e1b-a415-08863cbf9897.png)

#### After: Add a note to an event

![08-AFTER-event-add-note](https://user-images.githubusercontent.com/4459398/169911895-ea537e8e-9457-4f30-adcc-7ca03c35ea68.png)

#### Before: A pinned event with notes

![09-BEFORE-pinned-event-with-notes](https://user-images.githubusercontent.com/4459398/169911931-9bb662b7-21ea-414b-99c2-46706763ac01.png)

#### After: A pinned event with notes

![09-AFTER-pinned-event-with-notes](https://user-images.githubusercontent.com/4459398/169911975-fc7901ff-61d2-4b6d-b47f-62bf38d4ca16.png)

#### Before: A timeline template with events

![10-BEFORE-event-template](https://user-images.githubusercontent.com/4459398/169911994-4df648ad-bfc7-44ec-bcd5-602a6edb6ca1.png)

#### After: A timeline template with events

![10-AFTER-event-template](https://user-images.githubusercontent.com/4459398/169912017-ac54d03d-11ab-4116-ab33-6d20d5cbba37.png)
andrew-goldstein added a commit to andrew-goldstein/kibana that referenced this issue May 24, 2022
…/ fewer words

- This PR updates the row-level action button tooltips in Timeline, per issue <elastic#126973>, to use action words / fewer words. This brings the tooltips up to date with the latest [EUI Guidelines](https://elastic.github.io/eui/#/navigation/button/guidelines).
- The tooltips now differentiate between events and alerts. (The original tooltips were written before the Security Solution shipped with a detection engine, so there was no prior distinction.)

### Alert tooltips

This section contains before / after screenshots for alerts.

#### Before: Unpinned alert

![01-BEFORE-unpinned-alert](https://user-images.githubusercontent.com/4459398/169910015-ec5789c2-a691-4e48-b375-c95d15db8378.png)

#### After: Unpinned alert

![01-AFTER-unpinned-alert](https://user-images.githubusercontent.com/4459398/169910149-0cdd8c65-a9b0-43b6-8550-cd0d9c512b17.png)

#### Before: Pinned alert

![02-BEFORE-pinned-alert](https://user-images.githubusercontent.com/4459398/169910207-27aa3307-d33d-4fb5-9ff7-042a6adf030e.png)

#### After: Pinned alert

![02-AFTER-pinned-alert](https://user-images.githubusercontent.com/4459398/169910265-087a3779-2330-437d-b83f-d887eb4adaf9.png)

#### Before: Add a note to an alert

![03-BEFORE-alert-add-note](https://user-images.githubusercontent.com/4459398/169910347-39ca30db-a010-4739-b67f-464851730218.png)

#### After: Add a note to an alert

![03-AFTER-alert-add-note](https://user-images.githubusercontent.com/4459398/169910407-510ff4f3-e0ee-4649-8a44-5b7411a5b629.png)

#### Before: A pinned alert with notes

![04-BEFORE-pinned-alert-with-notes](https://user-images.githubusercontent.com/4459398/169910491-59869c08-2b2b-4c42-a39b-4d4efc05e668.png)

#### After: A pinned alert with notes

![04-AFTER-pinned-alert-with-notes](https://user-images.githubusercontent.com/4459398/169910573-7ae31f88-1199-4744-ae5e-54b40d3c34cb.png)

#### Before: A timeline template with alerts

![05-BEFORE-alert-template](https://user-images.githubusercontent.com/4459398/169910699-03ead1dd-d543-4687-a6f3-14b1b95023aa.png)

#### After: A timeline template with alerts

![05-AFTER-alert-template](https://user-images.githubusercontent.com/4459398/169910740-120eb087-111f-42e9-bb24-af3c344e68c7.png)

### Event tooltips

This section contains before / after screenshots for events.

#### Before: Unpinned event

![06-BEFORE-unpinned-event](https://user-images.githubusercontent.com/4459398/169911532-047d07e2-b4b2-4719-a1a9-fe67c9e04162.png)

#### After: Unpinned event

![06-AFTER-unpinned-event](https://user-images.githubusercontent.com/4459398/169911561-3c452e5b-23de-4144-b0c9-3e805fbd4021.png)

#### Before: Pinned event

![07-BEFORE-pinned-event](https://user-images.githubusercontent.com/4459398/169911699-ffde9799-6120-49e0-8012-37dd687bba31.png)

#### After: Pinned event

![07-AFTER-pinned-event](https://user-images.githubusercontent.com/4459398/169911741-48eeba36-a2c3-4a53-b5f6-57c376b82aa0.png)

#### Before: Add a note to event

![08-BEFORE-event-add-note](https://user-images.githubusercontent.com/4459398/169911867-4139d719-dd5d-4e1b-a415-08863cbf9897.png)

#### After: Add a note to an event

![08-AFTER-event-add-note](https://user-images.githubusercontent.com/4459398/169911895-ea537e8e-9457-4f30-adcc-7ca03c35ea68.png)

#### Before: A pinned event with notes

![09-BEFORE-pinned-event-with-notes](https://user-images.githubusercontent.com/4459398/169911931-9bb662b7-21ea-414b-99c2-46706763ac01.png)

#### After: A pinned event with notes

![09-AFTER-pinned-event-with-notes](https://user-images.githubusercontent.com/4459398/169911975-fc7901ff-61d2-4b6d-b47f-62bf38d4ca16.png)

#### Before: A timeline template with events

![10-BEFORE-event-template](https://user-images.githubusercontent.com/4459398/169911994-4df648ad-bfc7-44ec-bcd5-602a6edb6ca1.png)

#### After: A timeline template with events

![10-AFTER-event-template](https://user-images.githubusercontent.com/4459398/169912017-ac54d03d-11ab-4116-ab33-6d20d5cbba37.png)
andrew-goldstein added a commit that referenced this issue May 24, 2022
…ewer words (#132756)

## [Security Solution] Updates Timeline tooltips to use action words / fewer words

- This PR updates the row-level action button tooltips in Timeline, per issue <#126973>, to use action words / fewer words. This brings the tooltips up to date with the latest [EUI Guidelines](https://elastic.github.io/eui/#/navigation/button/guidelines).
- The tooltips now differentiate between events and alerts. (The original tooltips were written before the Security Solution shipped with a detection engine, so there was no prior distinction.)

### Alert tooltips

This section contains before / after screenshots for alerts.

#### Before: Unpinned alert

![01-BEFORE-unpinned-alert](https://user-images.githubusercontent.com/4459398/169910015-ec5789c2-a691-4e48-b375-c95d15db8378.png)

#### After: Unpinned alert

![01-AFTER-unpinned-alert](https://user-images.githubusercontent.com/4459398/169910149-0cdd8c65-a9b0-43b6-8550-cd0d9c512b17.png)

#### Before: Pinned alert

![02-BEFORE-pinned-alert](https://user-images.githubusercontent.com/4459398/169910207-27aa3307-d33d-4fb5-9ff7-042a6adf030e.png)

#### After: Pinned alert

![02-AFTER-pinned-alert](https://user-images.githubusercontent.com/4459398/169910265-087a3779-2330-437d-b83f-d887eb4adaf9.png)

#### Before: Add a note to an alert

![03-BEFORE-alert-add-note](https://user-images.githubusercontent.com/4459398/169910347-39ca30db-a010-4739-b67f-464851730218.png)

#### After: Add a note to an alert

![03-AFTER-alert-add-note](https://user-images.githubusercontent.com/4459398/169910407-510ff4f3-e0ee-4649-8a44-5b7411a5b629.png)

#### Before: A pinned alert with notes

![04-BEFORE-pinned-alert-with-notes](https://user-images.githubusercontent.com/4459398/169910491-59869c08-2b2b-4c42-a39b-4d4efc05e668.png)

#### After: A pinned alert with notes

![04-AFTER-pinned-alert-with-notes](https://user-images.githubusercontent.com/4459398/169910573-7ae31f88-1199-4744-ae5e-54b40d3c34cb.png)

#### Before: A timeline template with alerts

![05-BEFORE-alert-template](https://user-images.githubusercontent.com/4459398/169910699-03ead1dd-d543-4687-a6f3-14b1b95023aa.png)

#### After: A timeline template with alerts

![05-AFTER-alert-template](https://user-images.githubusercontent.com/4459398/169910740-120eb087-111f-42e9-bb24-af3c344e68c7.png)

### Event tooltips

This section contains before / after screenshots for events.

#### Before: Unpinned event

![06-BEFORE-unpinned-event](https://user-images.githubusercontent.com/4459398/169911532-047d07e2-b4b2-4719-a1a9-fe67c9e04162.png)

#### After: Unpinned event

![06-AFTER-unpinned-event](https://user-images.githubusercontent.com/4459398/169911561-3c452e5b-23de-4144-b0c9-3e805fbd4021.png)

#### Before: Pinned event

![07-BEFORE-pinned-event](https://user-images.githubusercontent.com/4459398/169911699-ffde9799-6120-49e0-8012-37dd687bba31.png)

#### After: Pinned event

![07-AFTER-pinned-event](https://user-images.githubusercontent.com/4459398/169911741-48eeba36-a2c3-4a53-b5f6-57c376b82aa0.png)

#### Before: Add a note to event

![08-BEFORE-event-add-note](https://user-images.githubusercontent.com/4459398/169911867-4139d719-dd5d-4e1b-a415-08863cbf9897.png)

#### After: Add a note to an event

![08-AFTER-event-add-note](https://user-images.githubusercontent.com/4459398/169911895-ea537e8e-9457-4f30-adcc-7ca03c35ea68.png)

#### Before: A pinned event with notes

![09-BEFORE-pinned-event-with-notes](https://user-images.githubusercontent.com/4459398/169911931-9bb662b7-21ea-414b-99c2-46706763ac01.png)

#### After: A pinned event with notes

![09-AFTER-pinned-event-with-notes](https://user-images.githubusercontent.com/4459398/169911975-fc7901ff-61d2-4b6d-b47f-62bf38d4ca16.png)

#### Before: A timeline template with events

![10-BEFORE-event-template](https://user-images.githubusercontent.com/4459398/169911994-4df648ad-bfc7-44ec-bcd5-602a6edb6ca1.png)

#### After: A timeline template with events

![10-AFTER-event-template](https://user-images.githubusercontent.com/4459398/169912017-ac54d03d-11ab-4116-ab33-6d20d5cbba37.png)

CC: @dimadavid
@andrew-goldstein
Copy link
Contributor Author

The fix for this issue is merged to:

@ghost
Copy link

ghost commented Jun 3, 2022

Hi @MadameSheema ,

We have validated above issue on 8.3.0 BC2 and it's fixed. 🟢

Build Details:

Version: 8.3.0 BC2
Build: 53231
Commit: 25476b531ba9f32292bde85508d342aa5e1c29eb

Screenshots:

Annotation 2022-06-03 132247

Annotation 2022-06-03 132315

Annotation 2022-06-03 132338

Annotation 2022-06-03 132438

Annotation 2022-06-03 132455

Annotation 2022-06-03 132515

Hence, we are closing this issue and marking this as QA Validated.

Thanks !

@ghost ghost closed this as completed Jun 3, 2022
@ghost ghost added the QA:Validated Issue has been validated by QA label Jun 3, 2022
This issue was closed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Fixes for quality problems that affect the customer experience fixed impact:low Addressing this issue will have a low level of impact on the quality/strength of our product. QA:Validated Issue has been validated by QA Team: SecuritySolution Security Solutions Team working on SIEM, Endpoint, Timeline, Resolver, etc. Team:Threat Hunting:Investigations Security Solution Investigations Team v8.3.0
Projects
None yet
Development

No branches or pull requests

4 participants