[ML] Anomaly Explorer: Fixes handling of job group IDs when opening from dashboard panels #203224

rbrtj · 2024-12-06T10:41:52Z

Summary

Fixes issues around handling job group IDs in Anomaly Explorer: #198824.

Also does the following refactors:

UrlStateService is now more generic, allowing for the creation of useGlobalUrlState and usePageUrlState hooks based on it.
New useGlobalUrlState hook: Responsible for managing global state with proper typing.
id_badges.js converted to typescript -> id_badges.tsx
The use of maps in the id_badges, job_selector and job_selector_flyout components has been removed. Now, selected group and job ids are passed directly.
Instead of manually setting the global state in job_selector, an onSelectionChange callback is now expected. In the future, the Timeseries explorer and Anomaly Explorer are expected to use a (maybe) shared context to track selected jobs easily, eliminating the need to manually update the global state for the Timeseries explorer.
The AnomalyExplorerCommonStateService now listens for URL changes to track properties derived from the URL. This replaces the useUrlState hook, which lacked proper typing, and serves as the single source of truth for selected jobs and groups.
The ExplorerDashboardService, previously a hybrid of a "service" and redux-like action handler, has been removed. The state is now managed within state_manager component. In the future, data like chartsData and influencers should be decoupled from ExplorerState and moved to individual services.

Fix for all issues mentioned in [ML] Anomaly explorer: Enhancements for embeddables with groups selected #198824 as visible in the video:

The initial group selection now results in the correct badge being displayed.
Creating an embeddable with a selected group properly propagates the selected group instead of individual job ids.
Navigating to the Anomaly Explorer from Dashboards now correctly uses the selected group instead of individual job ids.

Screen.Recording.2024-12-09.at.13.57.25.mov

rbrtj · 2024-12-09T12:37:16Z

x-pack/plugins/ml/public/application/explorer/explorer_utils.ts

+
+// Creates index pattern in the format expected by the kuery bar/kuery autocomplete provider
+// Field objects required fields: name, type, aggregatable, searchable
+export function getIndexPattern(influencers: ExplorerJob[]) {


Moved from x-pack/plugins/ml/public/application/explorer/reducers/explorer_reducer/get_index_pattern.ts

rbrtj · 2024-12-09T12:43:15Z

x-pack/plugins/ml/public/application/routing/routes/explorer/state_manager.tsx


  const refresh = useRefresh();
  const lastRefresh = refresh?.lastRefresh ?? 0;

-  // We cannot simply infer bounds from the globalState's `time` attribute


I think it’s no longer used, as I couldn’t get globalState.time.mode to an invalid state.

rbrtj · 2024-12-09T12:45:52Z

x-pack/plugins/ml/public/application/routing/routes/explorer/state_manager.tsx

  );

  useEffect(() => {
    if (!loadExplorerDataConfig || loadExplorerDataConfig?.selectedCells === undefined) return;
+    // TODO: Find other way to set loading state as it causes unnecessary re-renders - handle it in anomaly_explorer_common_state


It should be fixed when we decouple ExplorerState into individual services for handling, e.g., chartsData, influencers, etc.

elasticmachine · 2024-12-09T13:05:42Z

Pinging @elastic/ml-ui (:ml)

darnautov · 2024-12-13T16:38:48Z

x-pack/platform/packages/private/ml/url_state/src/url_state.test.tsx

@@ -143,3 +149,89 @@ describe('useUrlState', () => {
    expect(getByTestId('appState').innerHTML).toBe('the updated query');
  });
 });
+
+describe('usePageUrlState', () => {


what is the motivation of using components in tests? did yo try rendering the hook itself?

good point, I just aligned with the existing tests, but rendering the test component seems redundant, updated in: #7df5acb

darnautov · 2024-12-13T16:55:00Z

x-pack/platform/plugins/shared/ml/public/application/explorer/anomaly_timeline.tsx

+      anomalyExplorerCommonStateService.selectedJobs$,
+      anomalyExplorerCommonStateService.selectedJobs
+    );
+
+    const selectedGroups = useObservable(
+      anomalyExplorerCommonStateService.selectedGroups$,
+      anomalyExplorerCommonStateService.selectedGroups
+    );
+
+    const mergedGroupsAndJobsIds = useMemo(
+      () => getMergedGroupsAndJobsIds(selectedGroups, selectedJobs),
+      [selectedGroups, selectedJobs]


nit: I noticed it's been used in several places, maybe it's worth creating a hook useJobSelection that return this data

👍 Done in: #e854c74

darnautov · 2024-12-13T16:57:12Z

x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_data.ts

@@ -56,7 +58,7 @@ export function getExplorerDefaultState(): ExplorerState {
    indexPattern: getDefaultIndexPattern(),
    influencers: {},
    isAndOperator: false,
-    loading: true,
+    loading: false,


❓ is it a delbarate change?

Yes, we use the loading prop to determine whether to show no jobs selected view: https://github.com/elastic/kibana/pull/203224/files#diff-ed860f8ee6aaa77969a5132f71414c4da278732ec436bd254ecfe4a4a625c89bL471

darnautov

LGTM!

elasticmachine · 2024-12-16T10:34:12Z

💚 Build Succeeded

Buildkite Build
Commit: e854c74

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`aiops`	621	623	+2
`dataVisualizer`	734	736	+2
`ml`	2147	2138	-9
total			-5

Async chunks

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

id	before	after	diff
`aiops`	616.0KB	621.4KB	+5.4KB
`dataVisualizer`	616.3KB	616.4KB	+18.0B
`ml`	4.7MB	4.7MB	+7.3KB
`transform`	475.6KB	475.8KB	+211.0B
total			+13.0KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
`dataVisualizer`	24.5KB	26.3KB	+1.8KB
`ml`	76.5KB	78.4KB	+1.9KB
total			+3.6KB

Unknown metric groups

ESLint disabled line counts

id	before	after	diff
`@kbn/ml-url-state`	7	6	-1
`ml`	567	558	-9
total			-10

Total ESLint disabled count

id	before	after	diff
`@kbn/ml-url-state`	7	6	-1
`ml`	570	561	-9
total			-10

History

💚 Build #259900 succeeded ab69786
💔 Build #259859 failed 74778d6
💔 Build #259746 failed a4c8b49
💔 Build #259168 failed a257c9f
💔 Build #259096 failed d18d929
💔 Build #259085 failed e0c1de2

cc @rbrtj

kibanamachine · 2024-12-16T10:51:00Z

Starting backport for target branches: 8.x

https://github.com/elastic/kibana/actions/runs/12351075785

…ups & Explorer Refactor (elastic#203224) ## Summary Fixes issues around handling groupIds in Anomaly Explorer: [elastic#198824](elastic#198824) * `UrlStateService` is now more generic, allowing for the creation of `useGlobalUrlState` and `usePageUrlState` hooks based on it. * New `useGlobalUrlState` hook: Responsible for managing global state with proper typing. * `id_badges.js` converted to typescript -> `id_badges.tsx` * The use of `maps` in the `id_badges`, `job_selector` and `job_selector_flyout` components has been removed. Now, selected group and job ids are passed directly. * Instead of manually setting the global state in `job_selector`, an `onSelectionChange` callback is now expected. In the future, the `Timeseries explorer` and `Anomaly Explorer` are expected to use a (maybe) shared context to track selected jobs easily, eliminating the need to manually update the global state for the `Timeseries explorer`. * The `AnomalyExplorerCommonStateService` now listens for URL changes to track properties derived from the URL. This replaces the `useUrlState` hook, which lacked proper typing, and serves as the single source of truth for selected jobs and groups. * The `ExplorerDashboardService`, previously a hybrid of a "service" and redux-like action handler, has been removed. The state is now managed within `state_manager` component. In the future, data like `chartsData` and `influencers` should be decoupled from `ExplorerState` and moved to individual services. 1. Fix for all issues mentioned in elastic#198824 as visible in the video: - The initial group selection now results in the correct badge being displayed. - Creating an embeddable with a selected group properly propagates the selected group instead of individual job ids. - Navigating to the Anomaly Explorer from Dashboards now correctly uses the selected group instead of individual job ids. https://github.com/user-attachments/assets/82c641e0-d930-42eb-8627-fad4bdc417f6 --------- Co-authored-by: kibanamachine <[email protected]> (cherry picked from commit ea85f05)

kibanamachine · 2024-12-16T10:56:00Z

💚 All backports created successfully

Status	Branch	Result
✅	8.x

Note: Successful backport PRs will be merged automatically after passing CI.

Questions ?

Please refer to the Backport tool documentation

…ed Groups & Explorer Refactor (#203224) (#204361) # Backport This will backport the following commits from `main` to `8.x`: - [[ML] Anomaly Explorer: Enhancements for Embeddables with Selected Groups & Explorer Refactor (#203224)](#203224)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Robert Jaszczurek <[email protected]>

…ups & Explorer Refactor (elastic#203224) ## Summary Fixes issues around handling groupIds in Anomaly Explorer: [elastic#198824](elastic#198824) * `UrlStateService` is now more generic, allowing for the creation of `useGlobalUrlState` and `usePageUrlState` hooks based on it. * New `useGlobalUrlState` hook: Responsible for managing global state with proper typing. * `id_badges.js` converted to typescript -> `id_badges.tsx` * The use of `maps` in the `id_badges`, `job_selector` and `job_selector_flyout` components has been removed. Now, selected group and job ids are passed directly. * Instead of manually setting the global state in `job_selector`, an `onSelectionChange` callback is now expected. In the future, the `Timeseries explorer` and `Anomaly Explorer` are expected to use a (maybe) shared context to track selected jobs easily, eliminating the need to manually update the global state for the `Timeseries explorer`. * The `AnomalyExplorerCommonStateService` now listens for URL changes to track properties derived from the URL. This replaces the `useUrlState` hook, which lacked proper typing, and serves as the single source of truth for selected jobs and groups. * The `ExplorerDashboardService`, previously a hybrid of a "service" and redux-like action handler, has been removed. The state is now managed within `state_manager` component. In the future, data like `chartsData` and `influencers` should be decoupled from `ExplorerState` and moved to individual services. 1. Fix for all issues mentioned in elastic#198824 as visible in the video: - The initial group selection now results in the correct badge being displayed. - Creating an embeddable with a selected group properly propagates the selected group instead of individual job ids. - Navigating to the Anomaly Explorer from Dashboards now correctly uses the selected group instead of individual job ids. https://github.com/user-attachments/assets/82c641e0-d930-42eb-8627-fad4bdc417f6 --------- Co-authored-by: kibanamachine <[email protected]>

rbrtj added 8 commits December 4, 2024 15:47

useGlobalUrlState service

a83459d

remove set_charts_data_loading explorer action

8a063ac

anomaly explorer refactor

6fc0569

remove unused ExplorerPage props

bb30891

Badges refactor

50172b8

improve memoization for useUrlStateService

8885e91

pass groups to dashboard embeddable instead of individual jobs

c23276f

global state interface comment

334f736

rbrtj commented Dec 9, 2024

View reviewed changes

remove invalidTimeRangeError

7b8dd0e

rbrtj commented Dec 9, 2024

View reviewed changes

remove unused import

91facf8

rbrtj commented Dec 9, 2024

View reviewed changes

rbrtj self-assigned this Dec 9, 2024

rbrtj added bug Fixes for quality problems that affect the customer experience release_note:fix :ml Feature:Anomaly Detection ML anomaly detection v9.0.0 Team:ML Team label for ML (also use :ml) v8.18.0 backport:version Backport to applied version labels labels Dec 9, 2024

rbrtj requested review from walterra, darnautov and peteharverson December 9, 2024 13:05

rbrtj marked this pull request as ready for review December 9, 2024 13:05

rbrtj requested a review from a team as a code owner December 9, 2024 13:05

Merge branch 'main' into anomaly-explorer-enhancements

3612c08

rbrtj changed the title ~~[ML] Anomaly explorer: Refactor~~ [ML] Anomaly Explorer: Enhancements for Embeddables with Selected Groups & Explorer Refactor Dec 9, 2024

rbrtj added 8 commits December 12, 2024 13:25

move new selection id badges test to tsx && fix tests

a4c8b49

timeseries explorer selected jobs fix

844adfa

basic unit tests for usePageUrlState and useGlobalUrlState hooks

b687d6f

rename GroupWithTimerange for consistency && share TimeRange type

7894672

use set to remove duplicates from jobsInSelectedGroups list

f42b979

remove unused smv jobs from anomaly explorer common state

f725b4d

remove unused explorer constants

e2e5c00

unit tests for getIndexPattern and getMergedGroupsAndJobsIds

74778d6

rbrtj mentioned this pull request Dec 12, 2024

[ML] Increase Test Coverage 8.18.0 #201813

Open

19 tasks

rbrtj requested a review from walterra December 12, 2024 14:48

rbrtj and others added 2 commits December 12, 2024 16:27

new selection id badges tests type fix

ab69786

Merge branch 'main' into anomaly-explorer-enhancements

cdc4801

darnautov reviewed Dec 13, 2024

View reviewed changes

darnautov approved these changes Dec 13, 2024

View reviewed changes

rbrtj and others added 3 commits December 16, 2024 09:08

Merge branch 'main' into anomaly-explorer-enhancements

9c5851e

url state hooks test improvements

7df5acb

use job selection hook

e854c74

rbrtj merged commit ea85f05 into elastic:main Dec 16, 2024
8 checks passed

kibanamachine mentioned this pull request Dec 16, 2024

[8.x] [ML] Anomaly Explorer: Enhancements for Embeddables with Selected Groups & Explorer Refactor (#203224) #204361

Merged

peteharverson mentioned this pull request Dec 16, 2024

[ML] Anomaly explorer: Enhancements for embeddables with groups selected #198824

Closed

kibanamachine mentioned this pull request Dec 16, 2024

[ResponseOps][Connectors]Migrate remaining routes. #204042

Merged

peteharverson changed the title ~~[ML] Anomaly Explorer: Enhancements for Embeddables with Selected Groups & Explorer Refactor~~ [ML] Anomaly Explorer: Fixes handling of job group IDs when opening from dashboard panels Dec 17, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[ML] Anomaly Explorer: Fixes handling of job group IDs when opening from dashboard panels #203224

[ML] Anomaly Explorer: Fixes handling of job group IDs when opening from dashboard panels #203224

rbrtj commented Dec 6, 2024 •

edited by peteharverson

Loading

rbrtj Dec 9, 2024

rbrtj Dec 9, 2024 •

edited

Loading

rbrtj Dec 9, 2024

elasticmachine commented Dec 9, 2024

darnautov Dec 13, 2024

rbrtj Dec 16, 2024

darnautov Dec 13, 2024

rbrtj Dec 16, 2024

darnautov Dec 13, 2024

rbrtj Dec 16, 2024

darnautov left a comment

elasticmachine commented Dec 16, 2024

ESLint disabled line counts

Total ESLint disabled count

kibanamachine commented Dec 16, 2024

kibanamachine commented Dec 16, 2024

[ML] Anomaly Explorer: Fixes handling of job group IDs when opening from dashboard panels #203224

[ML] Anomaly Explorer: Fixes handling of job group IDs when opening from dashboard panels #203224

Conversation

rbrtj commented Dec 6, 2024 • edited by peteharverson Loading

Summary

Choose a reason for hiding this comment

rbrtj Dec 9, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

elasticmachine commented Dec 9, 2024

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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

darnautov left a comment

Choose a reason for hiding this comment

elasticmachine commented Dec 16, 2024

💚 Build Succeeded

Metrics [docs]

Module Count

Async chunks

Page load bundle

ESLint disabled line counts

Total ESLint disabled count

History

kibanamachine commented Dec 16, 2024

kibanamachine commented Dec 16, 2024

💚 All backports created successfully

Questions ?

rbrtj commented Dec 6, 2024 •

edited by peteharverson

Loading

rbrtj Dec 9, 2024 •

edited

Loading