[ML] Anomaly Explorer: Fixes handling of job group IDs when opening from dashboard panels by rbrtj · Pull Request #203224 · elastic/kibana

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:57:12Z

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

    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 <42973632+kibanamachine@users.noreply.github.com> (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 <92210485+rbrtj@users.noreply.github.com>

…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 <42973632+kibanamachine@users.noreply.github.com>

Fix for: #212569 From what I found, the issue was with the `useUrlStateService` after changes introduced in #203224, which made the service more generic. When filtering causes the `explorer` to remount the `AnomaliesTable`, pagination state updates are triggered before the effect that sets `setCallback.current` executes. Initializing the ref with `setState` ensures its availability from the first render. https://github.com/user-attachments/assets/d1aa8409-56e5-4632-a5f2-82350b877db6

…#213075) Fix for: elastic#212569 From what I found, the issue was with the `useUrlStateService` after changes introduced in elastic#203224, which made the service more generic. When filtering causes the `explorer` to remount the `AnomaliesTable`, pagination state updates are triggered before the effect that sets `setCallback.current` executes. Initializing the ref with `setState` ensures its availability from the first render. https://github.com/user-attachments/assets/d1aa8409-56e5-4632-a5f2-82350b877db6 (cherry picked from commit 0210468)

…#213075) Fix for: elastic#212569 From what I found, the issue was with the `useUrlStateService` after changes introduced in elastic#203224, which made the service more generic. When filtering causes the `explorer` to remount the `AnomaliesTable`, pagination state updates are triggered before the effect that sets `setCallback.current` executes. Initializing the ref with `setState` ensures its availability from the first render. https://github.com/user-attachments/assets/d1aa8409-56e5-4632-a5f2-82350b877db6

Includes a fix for #213424 and a follow up to #203224 (comment) * Rewrites anomalies_table in typescript * Decouples anomalies table state into an individual service * Fixes an issue where anomalies table pagination wouldn't reset to 0 after changing significant properties of the view, causing the table data to refetch

Includes a fix for elastic#213424 and a follow up to elastic#203224 (comment) * Rewrites anomalies_table in typescript * Decouples anomalies table state into an individual service * Fixes an issue where anomalies table pagination wouldn't reset to 0 after changing significant properties of the view, causing the table data to refetch (cherry picked from commit ab78050)

Includes a fix for elastic#213424 and a follow up to elastic#203224 (comment) * Rewrites anomalies_table in typescript * Decouples anomalies table state into an individual service * Fixes an issue where anomalies table pagination wouldn't reset to 0 after changing significant properties of the view, causing the table data to refetch

#215669) # Backport This will backport the following commits from `main` to `8.18`: - [[ML] Anomaly Explorer: Fix Anomalies Table pagination (#214714)](#214714)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport)  Co-authored-by: Robert Jaszczurek <92210485+rbrtj@users.noreply.github.com>

…#215670) # Backport This will backport the following commits from `main` to `8.x`: - [[ML] Anomaly Explorer: Fix Anomalies Table pagination (#214714)](#214714)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport)  Co-authored-by: Robert Jaszczurek <92210485+rbrtj@users.noreply.github.com>

Includes a fix for elastic#213424 and a follow up to elastic#203224 (comment) * Rewrites anomalies_table in typescript * Decouples anomalies table state into an individual service * Fixes an issue where anomalies table pagination wouldn't reset to 0 after changing significant properties of the view, causing the table data to refetch

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) t// v8.18.0 backport:version Backport to applied version labels labels Dec 9, 2024

rbrtj requested review from darnautov, peteharverson and walterra 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

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

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

rbrtj mentioned this pull request Mar 4, 2025

[ML] Anomaly Explorer: Prevent crash on anomaly table filter #213075

Merged

rbrtj mentioned this pull request Mar 17, 2025

[ML] Anomaly Explorer: Fix Anomalies Table pagination #214714

Merged

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 merged 40 commits intoelastic:mainfrom
rbrtj:anomaly-explorer-enhancements

rbrtj commented Dec 6, 2024 •

edited by peteharverson

Loading

Uh oh!

rbrtj Dec 9, 2024

Uh oh!

rbrtj Dec 9, 2024 •

edited

Loading

Uh oh!

rbrtj Dec 9, 2024

Uh oh!

elasticmachine commented Dec 9, 2024

Uh oh!

darnautov Dec 13, 2024

Uh oh!

rbrtj Dec 16, 2024

Uh oh!

darnautov left a comment

Uh oh!

elasticmachine commented Dec 16, 2024

ESLint disabled line counts

Total ESLint disabled count

Uh oh!

kibanamachine commented Dec 16, 2024

Uh oh!

kibanamachine commented Dec 16, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

Conversation

rbrtj commented Dec 6, 2024 • edited by peteharverson Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Uh oh!

rbrtj Dec 9, 2024

Choose a reason for hiding this comment

Uh oh!

rbrtj Dec 9, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rbrtj Dec 9, 2024

Choose a reason for hiding this comment

Uh oh!

elasticmachine commented Dec 9, 2024

Uh oh!

darnautov Dec 13, 2024

Choose a reason for hiding this comment

Uh oh!

rbrtj Dec 16, 2024

Choose a reason for hiding this comment

Uh oh!

darnautov left a comment

Choose a reason for hiding this comment

Uh oh!

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

Uh oh!

kibanamachine commented Dec 16, 2024

Uh oh!

kibanamachine commented Dec 16, 2024

💚 All backports created successfully

Questions ?

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

rbrtj commented Dec 6, 2024 •

edited by peteharverson

Loading

rbrtj Dec 9, 2024 •

edited

Loading