Skip to content

[ResponseOps][Alerting v2] Episode details page#260942

Draft
umbopepato wants to merge 7 commits intoelastic:mainfrom
umbopepato:208-episode-detail-page
Draft

[ResponseOps][Alerting v2] Episode details page#260942
umbopepato wants to merge 7 commits intoelastic:mainfrom
umbopepato:208-episode-detail-page

Conversation

@umbopepato
Copy link
Copy Markdown
Member

@umbopepato umbopepato commented Apr 2, 2026

📄 Summary

  • Adds an Alerting v2 episode detail page in Observability (episode_details_page.tsx) with routing and navigation from the episodes experience.

    This is only temporary, page and components will be moved to Stack Management

  • Reorganizes @kbn/alerting-v2-episodes-ui components to avoid inconsistencies in folder structure and naming, improves consistency, naming and composition of /queries (esql query builders).
  • Adds fetch_related_alert_episodes API wiring and related query/helpers.
  • Adds/improves testing.

🧪 Verification steps

✅ Happy Path

  • Open Observability → Alerts v2 (episodes) and navigate to an episode detail URL; confirm the page loads with lifecycle heatmap, actions, filters, grouping, related episodes, tags/events as implemented.
  • Use acknowledge, resolve, snooze, and tags from the episode actions and confirm they behave as on the list view (parity with refactored components).
  • Confirm the View rule details link opens the expected rule detail / management destination.
  • Confirm the Related episodes cards links lead to the correct page

⚡️ Edge Cases

  • Episodes with no or few related episodes, sparse tags/events, and unusual grouping fields.
  • Runbook content rendering after the runbook fix commit.

❌ Failure Cases

  • Failed or empty ES|QL / related-episode fetches: error/empty states on the detail page and related components.
  • Navigation when episode or rule identifiers are missing or invalid.

🐞 Known issues

  • Wrong page placement: needs to be moved to Stack Management
  • The heatmap can result quirky when only 1/2 or few events are present in the current episode,
  • as well as in the opposite case, when there are many many events in the series, since we're currently fetching and rendering all of them
  • Grouping criteria is still temporary as we're still evaluating the _source.data extraction query both in terms of functionality and performance
  • The sidebar wraps on narrow layouts, but is still limited in size (working on this)

📷 Screenshots

⏪ Backport rationale

Not backporting since this is for internal review only, under a feature flag

🔗 References

Closes https://github.com/elastic/rna-program/issues/208

☑️ Checklist

@elasticmachine
Copy link
Copy Markdown
Contributor

elasticmachine commented Apr 2, 2026

🤖 Jobs for this PR can be triggered through checkboxes. 🚧

ℹ️ To trigger the CI, please tick the checkbox below 👇

  • Click to trigger kibana-pull-request for this PR!
  • Click to trigger kibana-deploy-project-from-pr for this PR!
  • Click to trigger kibana-deploy-cloud-from-pr for this PR!
  • Click to trigger kibana-entity-store-performance-from-pr for this PR!
  • Click to trigger kibana-storybooks-from-pr for this PR!

http: HttpStart;
}

export function AlertEpisodeActions({
Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Renamed this to ..Actions since it's generic and used both in the episodes table and details page

Comment on lines +38 to +42
it('omits status badges when episode status is missing', () => {
render(<RelatedAlertEpisode episode={{ 'episode.id': 'ep-2' }} rule={rule} href="/x" />);

expect(screen.queryByTestId('relatedAlertEpisodeGrouping')).toBeInTheDocument();
});
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟢 Low related/related_alert_episode.test.tsx:38

The test 'omits status badges when episode status is missing' on line 38-42 does not verify its stated purpose. It asserts relatedAlertEpisodeGrouping is present, but that element always renders regardless of status. The test passes even when AlertEpisodeStatusBadges is incorrectly rendered. Consider querying for the status badge test ID and asserting it is not in the document.

    render(<RelatedAlertEpisode episode={{ 'episode.id': 'ep-2' }} rule={rule} href="/x" />);

-    expect(screen.queryByTestId('relatedAlertEpisodeGrouping')).toBeInTheDocument();
+    expect(screen.queryByTestId('relatedAlertEpisodeGrouping')).toBeInTheDocument();
+    expect(screen.queryByTestId('alertEpisodeStatusBadge')).not.toBeInTheDocument();
🤖 Copy this AI Prompt to have your agent fix this:
In file x-pack/platform/packages/shared/response-ops/alerting-v2-episodes-ui/components/related/related_alert_episode.test.tsx around lines 38-42:

The test 'omits status badges when episode status is missing' on line 38-42 does not verify its stated purpose. It asserts `relatedAlertEpisodeGrouping` is present, but that element always renders regardless of status. The test passes even when `AlertEpisodeStatusBadges` is incorrectly rendered. Consider querying for the status badge test ID and asserting it is not in the document.

Evidence trail:
x-pack/platform/packages/shared/response-ops/alerting-v2-episodes-ui/components/related/related_alert_episode.test.tsx lines 38-41 - test asserts `relatedAlertEpisodeGrouping` is present

x-pack/platform/packages/shared/response-ops/alerting-v2-episodes-ui/components/related/related_alert_episode.tsx lines 55-67 - `relatedAlertEpisodeGrouping` test ID is on the grouping container which always renders

x-pack/platform/packages/shared/response-ops/alerting-v2-episodes-ui/components/related/related_alert_episode.tsx lines 43-51 - `AlertEpisodeStatusBadges` is conditionally rendered only when `status` is truthy

@elasticmachine
Copy link
Copy Markdown
Contributor

⏳ Build in-progress, with failures

Failed CI Steps

Test Failures

  • [job] [logs] Jest Tests #10 / should call onSelectionChange on user selection
  • [job] [logs] Jest Tests #9 / renderApp should adjust routes for complete
  • [job] [logs] Jest Tests #9 / renderApp should adjust routes for complete
  • [job] [logs] Jest Tests #9 / renderApp should adjust routes for essentials
  • [job] [logs] Jest Tests #9 / renderApp should adjust routes for essentials

History

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants