[Security Solution][Alerts] saved query UX improvements #140064

vitaliidm · 2022-09-06T08:36:46Z

Summary

addresses [Security Solution][Alerts] Saved query rule type UX improvements #139250
adds checkbox Load the saved query dynamically on each rule execution for query and saved_query rule types on create/edit form if saved query selected. When checkbox checked, updates, made by user, to filters and query input will be dismissed. Filters and input will become disabled, to prevent further changes in controls. On saving, rule would be saved as saved_query type.
create unified query/saved_query schema, against which rules would be validated. That would allow to save query rule as saved_query and vice verse
shows on rule details page saved query name and loads its filters and query, so these values shown to users, will always be up to date with the saved query

Screenshots and video

Screen.Recording.2022-09-13.at.14.31.20.mov

Checklist

Delete any items that are not applicable to this PR.

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)
Any UI touched in this PR does not create any new axe failures (run axe in browser: FF, Chrome)
This renders correctly on smaller devices using a responsive layout. (You can test this in your browser)
This was checked for cross-browser compatibility

…-ref HEAD~1..HEAD --fix'

x-pack/plugins/security_solution/public/detections/components/rules/query_bar/index.tsx

…rules/query_bar/index.tsx

vitaliidm · 2022-09-07T17:28:48Z

src/plugins/unified_search/public/filter_bar/filter_bar.tsx

@@ -27,6 +27,7 @@ export interface Props {
   * Applies extra styles necessary when coupled with the query bar
   */
  afterQueryBar?: boolean;
+  readOnly?: boolean;


changes for unified_search components will be removed after #140101 is merged, and present here only for demo/POC purposes

…-ref HEAD~1..HEAD --fix'

elasticmachine · 2022-09-15T17:07:51Z

Pinging @elastic/fleet (Team:Fleet)

…-ref HEAD~1..HEAD --fix'

banderror

Great functional enhancement, thanks @vitaliidm!

I reviewed some of the changes on the FE side and left a few comments. I didn't test the PR. I would be happy if you could address the feedback after the FF.

@marshallmain ~~There's a merge conflict that I tried to resolve but wasn't able to push to Vitalii's branch (weird because I used to do it previously with some PRs).~~ UPD: was able to resolve it via GitHub's UI :)

x-pack/plugins/security_solution/cypress/tasks/common.ts

x-pack/plugins/security_solution/public/common/hooks/use_get_saved_query.ts

banderror · 2022-09-18T17:38:28Z

x-pack/plugins/security_solution/public/common/hooks/use_fetch/request_names.ts

@@ -9,6 +9,7 @@ import { APP_UI_ID } from '../../../../common/constants';
 export const REQUEST_NAMES = {
  SECURITY_DASHBOARDS: `${APP_UI_ID} fetch security dashboards`,
  ANOMALIES_TABLE: `${APP_UI_ID} fetch anomalies table data`,
+  GET_SAVED_QUERY: `${APP_UI_ID} fetch saved query`,


@semd why useFetch doesn't accept a string as a request name? Each time we need to implement a new request we will have to modify this file which doesn't respect the open-closed principle.

banderror · 2022-09-18T17:44:04Z

x-pack/plugins/security_solution/public/common/hooks/use_get_saved_query.ts

+  const { fetch, data, isLoading, error } = useFetch(
+    REQUEST_NAMES.GET_SAVED_QUERY,
+    savedQueryServices.getSavedQuery
+  );


@vitaliidm We started migrating our client-side data fetching logic to react-query. What are the benefits of using useFetch for this particular API call compared to react-query?

it uses under the hood in https://github.com/elastic/kibana/blob/main/x-pack/plugins/security_solution/public/common/utils/saved_query_services/index.tsx

createSavedQueryService from @kbn/data-plugin/public.

If we would like to use useFetch, we need to extract urls from data plugin and implement it on our side

x-pack/plugins/security_solution/public/common/hooks/translations.ts

x-pack/plugins/security_solution/public/detections/components/rules/query_bar/index.tsx

...k/plugins/security_solution/public/detections/pages/detection_engine/rules/details/index.tsx

kibana-ci · 2022-09-18T19:24:19Z

💛 Build succeeded, but was flaky

Buildkite Build
Commit: d61d622

Failed CI Steps

Security Solution Tests #4

Test Failures

[job] [logs] Security Solution Tests #4 / url state sets and reads the url state for timeline by id

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`securitySolution`	3075	3076	+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`	6.4MB	6.4MB	+7.9KB

History

💚 Build #72919 succeeded 623049d
💔 Build #72871 failed 7b89228
💚 Build #72763 succeeded dc826f7
💛 Build #72637 was flaky a528c64
💔 Build #72620 failed a959480
💛 Build #72342 was flaky 00a6834

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

cc @vitaliidm

## Summary addresses feedback left during code review for #140064 - Saved query checkbox label shows saved query name - `createSavedQuery` moved to `x-pack/plugins/security_solution/cypress/tasks/api_calls/saved_queries.ts` - `useGetSavedQuery` moved to `x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/details` - additional comments and minor code changes ### Before <img width="762" alt="Screenshot 2022-09-26 at 11 38 05" src="https://user-images.githubusercontent.com/92328789/192256482-2bfc29c9-305a-4ff6-b9cd-b0505e887bd1.png"> ### After <img width="989" alt="Screenshot 2022-09-26 at 11 37 23" src="https://user-images.githubusercontent.com/92328789/192256378-290183b1-44e2-47bb-9d64-c46d0819cff4.png">

…#141747) ## Summary addresses feedback left during code review for elastic#140064 - Saved query checkbox label shows saved query name - `createSavedQuery` moved to `x-pack/plugins/security_solution/cypress/tasks/api_calls/saved_queries.ts` - `useGetSavedQuery` moved to `x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/details` - additional comments and minor code changes ### Before <img width="762" alt="Screenshot 2022-09-26 at 11 38 05" src="https://user-images.githubusercontent.com/92328789/192256482-2bfc29c9-305a-4ff6-b9cd-b0505e887bd1.png"> ### After <img width="989" alt="Screenshot 2022-09-26 at 11 37 23" src="https://user-images.githubusercontent.com/92328789/192256378-290183b1-44e2-47bb-9d64-c46d0819cff4.png"> (cherry picked from commit f585dd6)

#141962) ## Summary addresses feedback left during code review for #140064 - Saved query checkbox label shows saved query name - `createSavedQuery` moved to `x-pack/plugins/security_solution/cypress/tasks/api_calls/saved_queries.ts` - `useGetSavedQuery` moved to `x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/details` - additional comments and minor code changes ### Before <img width="762" alt="Screenshot 2022-09-26 at 11 38 05" src="https://user-images.githubusercontent.com/92328789/192256482-2bfc29c9-305a-4ff6-b9cd-b0505e887bd1.png"> ### After <img width="989" alt="Screenshot 2022-09-26 at 11 37 23" src="https://user-images.githubusercontent.com/92328789/192256378-290183b1-44e2-47bb-9d64-c46d0819cff4.png"> (cherry picked from commit f585dd6) Co-authored-by: Vitalii Dmyterko <92328789+vitaliidm@users.noreply.github.com>

…#141747) ## Summary addresses feedback left during code review for elastic#140064 - Saved query checkbox label shows saved query name - `createSavedQuery` moved to `x-pack/plugins/security_solution/cypress/tasks/api_calls/saved_queries.ts` - `useGetSavedQuery` moved to `x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/details` - additional comments and minor code changes ### Before <img width="762" alt="Screenshot 2022-09-26 at 11 38 05" src="https://user-images.githubusercontent.com/92328789/192256482-2bfc29c9-305a-4ff6-b9cd-b0505e887bd1.png"> ### After <img width="989" alt="Screenshot 2022-09-26 at 11 37 23" src="https://user-images.githubusercontent.com/92328789/192256378-290183b1-44e2-47bb-9d64-c46d0819cff4.png">

vitaliidm and others added 4 commits September 6, 2022 09:35

initial comment

86d180e

[CI] Auto-commit changed files from 'node scripts/precommit_hook.js -…

6143219

…-ref HEAD~1..HEAD --fix'

fix some bugs

0c623a0

fix timeline

a9d16c4

vitaliidm commented Sep 6, 2022

View reviewed changes

x-pack/plugins/security_solution/public/detections/components/rules/query_bar/index.tsx Outdated Show resolved Hide resolved

vitaliidm and others added 9 commits September 6, 2022 15:09

Update x-pack/plugins/security_solution/public/detections/components/…

1e27923

…rules/query_bar/index.tsx

Update helpers.ts

c87c48e

Merge branch 'main' into detections/saved-query-ux

f244ded

add some tests

62c43ec

improvements

b4c4eda

fix tests

6c4567e

remove .only in tests

f0fb28e

Merge branch 'main' into detections/saved-query-ux

b16c95b

fix typings

59f6d36

vitaliidm commented Sep 7, 2022

View reviewed changes

vitaliidm and others added 15 commits September 7, 2022 20:37

fixes

6020de2

fix typo checks

be85eff

Update filter_bar.tsx

a640f2d

Update query_bar_top_row.tsx

4a6e1fb

Update query_string_input.tsx

eb0e078

Update search_bar.tsx

6bb5ee6

Update query_bar_top_row.tsx

a5925d3

Update query_bar_top_row.tsx

ca74c54

Merge branch 'main' into detections/saved-query-ux

4d19160

Merge branch 'main' into detections/saved-query-ux

41ce3b7

fix removed query

f7ad69a

lint

7ced67c

Merge branch 'main' into detections/saved-query-ux

9bf6573

types cleanup

e10cebd

small refactoring

19b021c

peluja1012 enabled auto-merge (squash) September 15, 2022 17:04

[CI] Auto-commit changed files from 'node scripts/precommit_hook.js -…

08cd7f3

…-ref HEAD~1..HEAD --fix'

kibanamachine requested a review from a team as a code owner September 15, 2022 17:07

botelastic bot added the Team:Fleet Team label for Observability Data Collection Fleet team label Sep 15, 2022

vitaliidm added 3 commits September 15, 2022 18:20

Update index.ts

2500b65

Update simplified_package_policy_helper.test.ts

9342fac

Update simplified_package_policy_helper.ts

1e1b308

vitaliidm removed the request for review from a team September 15, 2022 17:25

kibanamachine and others added 2 commits September 15, 2022 17:31

[CI] Auto-commit changed files from 'node scripts/precommit_hook.js -…

7b89228

…-ref HEAD~1..HEAD --fix'

Merge branch 'main' into detections/saved-query-ux

623049d

marshallmain mentioned this pull request Sep 15, 2022

[Osquery] Add Detection action #133279

Merged

banderror approved these changes Sep 18, 2022

View reviewed changes

Merge branch 'main' into detections/saved-query-ux

d61d622

peluja1012 merged commit ffd41ef into elastic:main Sep 18, 2022

kibanamachine added the backport:skip This commit does not require backporting label Sep 18, 2022

joepeeples mentioned this pull request Sep 19, 2022

[DOCS] Saved query UX updates elastic/security-docs#2472

Closed

vitaliidm mentioned this pull request Sep 26, 2022

[Security Solution][Alerts] saved query UX changes follow-up #141747

Merged

vitaliidm mentioned this pull request May 30, 2023

[Security Solution] document a guidance for 8.5 constant loading rule edit/details page elastic/security-docs#3204

Closed

vitaliidm deleted the detections/saved-query-ux branch March 4, 2024 17:31

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Security Solution][Alerts] saved query UX improvements #140064

[Security Solution][Alerts] saved query UX improvements #140064

vitaliidm commented Sep 6, 2022 •

edited

Loading

vitaliidm Sep 7, 2022

elasticmachine commented Sep 15, 2022

banderror left a comment •

edited

Loading

banderror Sep 18, 2022

banderror Sep 18, 2022

vitaliidm Sep 26, 2022

kibana-ci commented Sep 18, 2022

[Security Solution][Alerts] saved query UX improvements #140064

[Security Solution][Alerts] saved query UX improvements #140064

Conversation

vitaliidm commented Sep 6, 2022 • edited Loading

Summary

Screenshots and video

Checklist

vitaliidm Sep 7, 2022

Choose a reason for hiding this comment

elasticmachine commented Sep 15, 2022

banderror left a comment • edited Loading

Choose a reason for hiding this comment

banderror Sep 18, 2022

Choose a reason for hiding this comment

banderror Sep 18, 2022

Choose a reason for hiding this comment

vitaliidm Sep 26, 2022

Choose a reason for hiding this comment

kibana-ci commented Sep 18, 2022

💛 Build succeeded, but was flaky

Failed CI Steps

Test Failures

Metrics [docs]

Module Count

Async chunks

History

vitaliidm commented Sep 6, 2022 •

edited

Loading

banderror left a comment •

edited

Loading