[Security Solution] Query toggle, responsive design issues

[stephmilovic]

There are responsive design issues with the query toggle button and headings on the tables in Explore area. General cleanup needed. See screenshots:

remove all related workarounds by searching for: ticket number #131405 in the code base (within detection response: x-pack/plugins/security_solution/public/overview/components/detection_response/ )

[elasticmachine]

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

[stephmilovic]

tested the fix, but i also did the fix so idk that i should close this @MadameSheema ??

[ghost]

Hi @stephmilovic,

We have validated above issue on 8.2.1 BC1 build and and found that it's still occurring 🔴.

Below are the observations about the Explore area on smaller screens (here screen size is 400 x 666):

1. Toggle icon should be before the alerts trend and events name. (refer Screenshot 1)

• Detection alerts trend Fail
• External alerts trend Fail
• Events Fail
• Host events Fail
• Network events Fail

2. Alerts trend and Events name should be shown on de-expanding the toggle. (refer Screenshot 1)

• Detection alerts trend Fail
• External alerts trend Pass
• Events Pass
• Host events Pass
• Network events Pass

3. Alerts trend and Events name should be shown inside the box on de-expanding the toggle. (refer Screenshot 1)

• Detection alerts trend Fail
• External alerts trend Pass
• Events Pass
• Host events Fail
• Network events Fail

4. Closed alignment of box should be there for Alerts trend and Events name. There should not be lot of space in the box on de-expanding the toggle. (refer Screenshot 1)

• Detection alerts trend Pass
• External alerts trend Fail
• Events Fail
• Host events Fail
• Network events Fail

5. Alignment of sub parts of events should be correct. (refer Video 1)

• Host events Pass
• Network events Pass

6. Puts the number and bar on the same line for sub parts of events. (refer Screenshot 2)

• Host events Fail
• Network events Fail

Build info:

Version: 8.2.1 BC1
Build: 52170
Commit: 88889128ccda6f7e13983b0087e9aaa183818473

Screenshots:

Screenshot 1:

Video 1:

Overview.-.Kibana.-.Google.Chrome.2022-05-19.14-39-41.mp4

Screenshot 2:

Thanks!

[ghost]

Hi @stephmilovic,

We have validated above issue on 8.2.1 Staging BC2 build and and found that it's still occurring 🔴.

Below are the observations about the Explore area on smaller screens (here screen size is 400 x 666):

1. Toggle icon should be before the alerts trend and events name. (refer Screenshot 1)

• Detection alerts trend Pass
• External alerts trend Pass
• Events Pass
• Host events Pass
• Network events Pass

2. Alerts trend and Events name should be shown on de-expanding the toggle. (refer Screenshot 1)

• Detection alerts trend Pass
• External alerts trend Pass
• Events Pass
• Host events Pass
• Network events Pass

3. Alerts trend and Events name should be shown inside the box on de-expanding the toggle. (refer Screenshot 1)

• Detection alerts trend Pass
• External alerts trend Pass
• Events Pass
• Host events Pass
• Network events Pass

4. Closed alignment of box should be there for Alerts trend and Events name. There should not be lot of space in the box on de-expanding the toggle. (refer Screenshot 1)

• Detection alerts trend Pass
• External alerts trend Pass
• Events Pass
• Host events Pass
• Network events Pass

5. Alignment of sub parts of events should be correct. (refer Video 1)

• Host events Pass
• Network events Pass

6. Puts the number and bar on the same line for sub parts of events. But there is a gap between number and bar. (refer Screenshot 2)

• Host events Fail
• Network events Fail

Build info:

Version: 8.2.1 BC2
Build: 52192
Commit: d4427fadd63ee9face4438cb3a4e17aaec93afe4

Screenshots:

Screenshot 1:

Video 1:

Overview.-.Kibana.-.Google.Chrome.2022-05-20.14-29-42.mp4

Screenshot 2:

Thanks!

[ghost]

Hi @stephmilovic,

We have validated above issue on 8.3.0 BC2 and and found that it's still occurring 🔴.

Build info:

Version: 8.3.0 BC2
Build: 53231
Commit: 25476b531ba9f32292bde85508d342aa5e1c29eb

Below are the observations about the Explore area on smaller screens (here screen size is 400 x 666):

1. Toggle icon should be before the alerts trend and events name.

• Detection alerts trend Pass
• External alerts trend Pass
• Events Pass
• Host events Pass
• Network events Pass

2. Alerts trend and Events name should be shown on de-expanding the toggle.

• Detection alerts trend Pass
• External alerts trend Pass
• Events Pass
• Host events Pass
• Network events Pass

3. Alerts trend and Events name should be shown inside the box on de-expanding the toggle.

• Detection alerts trend Pass
• External alerts trend Pass
• Events Pass
• Host events Pass
• Network events Pass

4. Closed alignment of box should be there for Alerts trend and Events name. There should not be lot of space in the box on de-expanding the toggle.

• Detection alerts trend Pass
• External alerts trend Pass
• Events Pass
• Host events Pass
• Network events Pass

5. Alignment of sub parts of events should be correct.

• Host events Pass
• Network events Pass

VM.Prachi.1.-.ec2-54-90-253-174.compute-1.amazonaws.com.-.Remote.Desktop.Connection.2022-06-03.12-29-18.mp4

6. Puts the number and bar on the same line for sub parts of events. But there is a gap between number and bar.

• Host events Fail
• Network events Fail

Thanks!