[Security Solution] [Detection & Response] 131827 Update Detections Response view with pagination and opening numbers in timeline #131828

jamster10 · 2022-05-09T17:40:22Z

To test this PR locally: add xpack.securitySolution.enableExperimental: [‘detectionResponseEnabled’] to your kibana.dev.yml

@elastic/security-threat-hunting-investigations:
The change is exporting getDataProvider, to allow for navigating to the Timeline flyout.

Figma: https://www.figma.com/file/yGGkXDuUQzoR7faSVu6F9p/OOTB-Dashboard-for-analysts?node-id=1080%3A113129

Bugs fixed in this ticket:

header font size of alerts chart needs to be uniform with other headers

Enhancements:

Update headers of vulnerable tables to new name "hosts/users by alert severity" & add tooltip for max results
Add ability for clicking on numbers to link to a timeline
Change alert colour scheme to match current alert colours
Implement pagination for vulnerable host/user tables and remove buttons.
Add cypress tests for testing navigation to timeline
Remove feature flag?

Background Conversations:

Donut charts are not uniform in colour. A conversation has been initiated with the charts team and design to make further decisions on this: https://elastic.slack.com/archives/CFK9BJ248/p1651826940605369

QA:

Information about the view:

For 8.3 We are only building the sections noted in this document by the thumbs up (with green circle) further work is slated potentially for 8.4.

Please refer to that document for more information about this project, but find some things noted below:

Open/Acknowledged/Closed hyperlinks in alerts chart are not clickable as the app does not have the ability to route to those specific sections in Alerts page. (we can for open, but not closed or acknowledged, so we have opted to make none of them clickable
Same as above with hyperlinks in cases chart
Alert / Alert counts for each table have been requested to link to timelines. For eg:

clicking 7 would link to a timeline filtered by alerts by host.name: "Win 8"

Permissions
If a user does not have case permissions, no case chart or tables will be seen.
If a user does not have alerts permissions, no alert chart or tables will be seen.
If a user has not pertinent permissions, they will see a no permissioned view.

Checklist

Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
Unit or functional tests were updated or added to match the most common scenarios
Any UI touched in this PR is usable by keyboard only (learn more about keyboard accessibility)
This was checked for cross-browser compatibility

…-changes

jamster10 · 2022-05-17T21:54:31Z

...rity_solution/public/overview/components/detection_response/cases_table/cases_table.test.tsx

@@ -76,7 +76,7 @@ describe('CasesTable', () => {
    mockUseCaseItemsReturn({ isLoading: false });
    const { getByText } = renderComponent();

-    expect(getByText('Updated now')).toBeInTheDocument();
+    expect(getByText(/Updated/)).toBeInTheDocument();


These tests are async, and caused flaky tests with 'now' not being in the doc as time passed before the check. So instead we're just checking that this part of the text is there.

jamster10 · 2022-05-17T22:20:46Z

...n/public/overview/components/detection_response/host_alerts_table/host_alerts_table.test.tsx

+    expect(queryByTestId('hostTablePaginator')).toBeInTheDocument();
+
+    fireEvent.click(page3);
+    expect(mockSetPage).toHaveBeenCalledWith(2);


paginator uses 0 based index, so 3rd page is at index 2

...ty_solution/public/overview/components/detection_response/hooks/use_navigate_to_timeline.tsx

…styled components

jamster10 · 2022-05-19T14:23:05Z

@elasticmachine merge upstream

…-changes

michaelolo24 · 2022-05-20T13:23:59Z

...lution/public/overview/components/detection_response/host_alerts_table/host_alerts_table.tsx

+              <EuiTablePagination
+                data-test-subj="hostTablePaginator"
+                activePage={pagination.currentPage}
+                itemsPerPage={4}


we don't want the user to be able to configure the per page count?

nah, hard coded to 4. I'll make it a const variable instead.

michaelolo24 · 2022-05-20T13:25:31Z

...lution/public/overview/components/detection_response/host_alerts_table/host_alerts_table.tsx

@@ -117,41 +108,53 @@ const getTableColumns: GetTableColumns = ({ getAppUrl, navigateTo }) => [
    field: 'totalAlerts',
    name: i18n.ALERTS_TEXT,
    'data-test-subj': 'hostSeverityAlertsTable-totalAlerts',
-    render: (totalAlerts: number) => <FormattedCount count={totalAlerts} />,
+    render: (totalAlerts: number, { hostName }) => (
+      <EuiLink onClick={() => handleClick({ hostName })}>


nit: can you store this anonymous function and the others in this file in a useCallback?

fixed :D. Thank you!

michaelolo24 · 2022-05-20T14:56:08Z

...lution/public/overview/components/detection_response/rule_alerts_table/rule_alerts_table.tsx

@@ -79,7 +81,11 @@ export const getTableColumns: GetTableColumns = ({ getAppUrl, navigateTo }) => [
    field: 'alert_count',
    name: i18n.RULE_ALERTS_COLUMN_ALERT_COUNT,
    'data-test-subj': 'severityRuleAlertsTable-alertCount',
-    render: (alertCount: number) => <FormattedCount count={alertCount} />,
+    render: (alertCount: number, { name }) => (
+      <EuiLink onClick={() => openRuleInTimeline(name)}>


same thing here regarding the anonymous function in a useCallback

michaelolo24 · 2022-05-20T15:01:35Z

...ion/public/overview/components/detection_response/user_alerts_table/use_user_alerts_items.ts

+
+      setPaginationData((p) => ({
+        ...p,
+        pageCount: Math.ceil(


Not necessary, but you might be able to surface this to a util getPageCount which can be used here and in the hosts one

michaelolo24 · 2022-05-20T15:39:29Z

...ty_solution/public/overview/components/detection_response/hooks/use_navigate_to_timeline.tsx

+import { useCreateTimeline } from '../../../../timelines/components/timeline/properties/use_create_timeline';
+import { updateProviders } from '../../../../timelines/store/timeline/actions';
+
+export const useNavigateToTimeline = () => {


Just quick reminder to sync with @kqualters-elastic on this

michaelolo24

Had a few nits, but pulled down and tested and it works well! Thanks!

jamster10 · 2022-05-23T16:14:29Z

@elasticmachine merge upstream

…-changes

…f github.com:jamster10/kibana into 131827-Detection-response-product-and-design-changes

kibana-ci · 2022-05-23T17:56:15Z

💚 Build Succeeded

Metrics [docs]

Public APIs missing comments

Total count of every public API that lacks a comment. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats comments for more detailed information.

id	before	after	diff
`timelines`	331	332	+1

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`securitySolution`	5.0MB	5.0MB	+2.6KB

Unknown metric groups

API count

id	before	after	diff
`timelines`	435	436	+1

History

💛 Build #46139 was flaky dc0205a
💔 Build #45756 failed f9194a2
💚 Build #45551 succeeded 170df13
💔 Build #45532 failed ecec737
💔 Build #45530 failed 748f548
💚 Build #43419 succeeded 8078281

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

cc @jamster10

…esponse view with pagination and opening numbers in timeline (elastic#131828) * Fix alert colour pallete & alerts chart header size * Add pagination and navigation to timeline capability * fix translation name conflict * Rename hook file to snake case to match elastic formatting * Change name scheme oof navigateToTimeline to OpenInTimeline & remove styled components Co-authored-by: Kristof-Pierre Cummings <kristofpierre.cummings@elastic.co> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

Fix alert colour pallete & alerts chart header size

8078281

jamster10 requested a review from a team as a code owner May 9, 2022 17:40

jamster10 marked this pull request as draft May 9, 2022 17:40

jamster10 linked an issue May 9, 2022 that may be closed by this pull request

Add ability for numeric values to open timeline and implement changes from design / product review #131827

Closed

6 tasks

Merge branch 'main' into 131827-Detection-response-product-and-design…

8c63718

…-changes

jamster10 added the ci:deploy-cloud label May 10, 2022

Kristof-Pierre Cummings added 3 commits May 17, 2022 15:47

Add pagination and navigation to timeline capability

08bdf3e

Merge branch 'main' into 131827-Detection-response-product-and-design…

748f548

…-changes

fix translation name conflict

ecec737

jamster10 added backport:skip This commit does not require backporting Team:Threat Hunting Security Solution Threat Hunting Team release_note:feature Makes this part of the condensed release notes Team:Threat Hunting:Explore v8.3.0 labels May 17, 2022

jamster10 self-assigned this May 17, 2022

jamster10 marked this pull request as ready for review May 17, 2022 21:43

jamster10 requested a review from a team as a code owner May 17, 2022 21:43

jamster10 force-pushed the 131827-Detection-response-product-and-design-changes branch from cd0582b to 90414d6 Compare May 17, 2022 21:51

jamster10 commented May 17, 2022

View reviewed changes

jamster10 requested a review from semd May 17, 2022 22:01

Rename hook file to snake case to match elastic formatting

170df13

jamster10 force-pushed the 131827-Detection-response-product-and-design-changes branch from 90414d6 to 170df13 Compare May 17, 2022 22:19

jamster10 commented May 17, 2022

View reviewed changes

jamster10 requested a review from angorayc May 18, 2022 02:56

angorayc reviewed May 18, 2022

View reviewed changes

Change name scheme oof navigateToTimeline to OpenInTimeline & remove …

f9194a2

…styled components

jamster10 changed the title ~~Update Detections Response view based on dialogue with design and product~~ [Security Solution] [Detection & Response] 131827 Update Detections Response view with pagination and opening numbers in timeline May 18, 2022

angorayc approved these changes May 19, 2022

View reviewed changes

Merge branch 'main' into 131827-Detection-response-product-and-design…

dc0205a

…-changes

michaelolo24 reviewed May 20, 2022

View reviewed changes

michaelolo24 approved these changes May 20, 2022

View reviewed changes

Merge branch 'main' into 131827-Detection-response-product-and-design…

e2f7d84

…-changes

jamster10 enabled auto-merge (squash) May 23, 2022 16:14

Kristof-Pierre Cummings added 4 commits May 23, 2022 11:32

Disable routing on alerts with value 0

983e238

Merge branch '131827-Detection-response-product-and-design-changes' o…

7f2ff1c

…f github.com:jamster10/kibana into 131827-Detection-response-product-and-design-changes

Add constants for item page count

090bd81

remove skip of user alerts table testsaasa

3f43bab

jamster10 merged commit f540c5e into elastic:main May 23, 2022

This was referenced May 23, 2022

Remove feature flag for detections & response #132745

Closed

132745 remove feature flag from detections response #132746

Merged

jamster10 linked an issue May 25, 2022 that may be closed by this pull request

Failing test: Jest Tests.x-pack/plugins/security_solution/public/overview/components/detection_response/user_alerts_table - UserAlertsTable should render the updated at subtitle #132360

Closed

tylersmalley added ci:cloud-deploy Create or update a Cloud deployment and removed ci:deploy-cloud labels Aug 17, 2022

stephmilovic mentioned this pull request Dec 11, 2023

Failing test: Jest Tests.x-pack/plugins/security_solution/public/overview/components/detection_response/host_alerts_table - HostAlertsTable should render the updated at subtitle #131611

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Security Solution] [Detection & Response] 131827 Update Detections Response view with pagination and opening numbers in timeline #131828

[Security Solution] [Detection & Response] 131827 Update Detections Response view with pagination and opening numbers in timeline #131828

jamster10 commented May 9, 2022 •

edited

Loading

jamster10 May 17, 2022

jamster10 May 17, 2022 •

edited

Loading

jamster10 commented May 19, 2022

michaelolo24 May 20, 2022

jamster10 May 23, 2022

michaelolo24 May 20, 2022 •

edited

Loading

jamster10 May 23, 2022

michaelolo24 May 20, 2022

jamster10 May 23, 2022

michaelolo24 May 20, 2022 •

edited

Loading

jamster10 May 23, 2022

michaelolo24 May 20, 2022

michaelolo24 left a comment

jamster10 commented May 23, 2022

kibana-ci commented May 23, 2022

API count

[Security Solution] [Detection & Response] 131827 Update Detections Response view with pagination and opening numbers in timeline #131828

[Security Solution] [Detection & Response] 131827 Update Detections Response view with pagination and opening numbers in timeline #131828

Conversation

jamster10 commented May 9, 2022 • edited Loading

Enhancements:

Background Conversations:

QA:

Checklist

Choose a reason for hiding this comment

jamster10 May 17, 2022 • edited Loading

Choose a reason for hiding this comment

jamster10 commented May 19, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

michaelolo24 May 20, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

michaelolo24 May 20, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

michaelolo24 left a comment

Choose a reason for hiding this comment

jamster10 commented May 23, 2022

kibana-ci commented May 23, 2022

💚 Build Succeeded

Metrics [docs]

Public APIs missing comments

Async chunks

API count

History

jamster10 commented May 9, 2022 •

edited

Loading

jamster10 May 17, 2022 •

edited

Loading

michaelolo24 May 20, 2022 •

edited

Loading

michaelolo24 May 20, 2022 •

edited

Loading