Skip to content

Fix APM UI paper cuts: pagination, settings modal, and chart improvements#2618

Merged
ps48 merged 3 commits intoopensearch-project:mainfrom
ps48:apm-ui-fixes
Mar 13, 2026
Merged

Fix APM UI paper cuts: pagination, settings modal, and chart improvements#2618
ps48 merged 3 commits intoopensearch-project:mainfrom
ps48:apm-ui-fixes

Conversation

@ps48
Copy link
Copy Markdown
Member

@ps48 ps48 commented Mar 13, 2026

Description

  • Fix table pagination reset: Restore EuiResizableContainer to Services Home, Operations, and Dependencies pages using React.memo on table panels to prevent mouse-event re-renders from resetting EuiInMemoryTable uncontrolled pagination state
  • APM Settings modal improvements: Update settings modal UI and configuration flow
  • Chart and component fixes: Improve PromQL line chart and metric card rendering, fix service map graph/sidebar/details panel, update navigation utils, and fix correlated logs hook

Pagination fix (EuiResizableContainer + React.memo)

  • Extract table content into module-level React.memo components (OperationsTablePanel,
    DependenciesTablePanel, ServicesTablePanel) so resize/mouse events don't re-mount tables
  • Use useRef to capture togglePanel from the render-prop callback
  • Stabilize filter callbacks with useCallback to maintain memo effectiveness
  • Match Application Map's resizable panel props for consistent look and feel

APM Settings modal

  • Update settings modal layout and configuration options

Shared component fixes

  • Improve PromQL line chart multi-series support and error handling
  • Fix metric card trend indicator rendering
  • Update service map graph, sidebar, and details panel
  • Fix correlated logs, dependency metrics, and operation metrics hooks
  • Add navigation utility helpers

Issues Resolved

#2545

Check List

  • New functionality includes testing.
    • All tests pass, including unit test, integration test and doctest
  • New functionality has been documented.
    • New functionality has javadoc added
    • New functionality has user manual doc added
  • Commits are signed per the DCO using --signoff

By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license.
For more information on following Developer Certificate of Origin and signing off your commits, please check here.

ps48 added 3 commits March 12, 2026 21:23
Signed-off-by: ps48 <pshenoy36@gmail.com>
Signed-off-by: ps48 <pshenoy36@gmail.com>
Signed-off-by: ps48 <pshenoy36@gmail.com>
@ps48 ps48 changed the title Apm UI fixes Fix APM UI paper cuts: pagination, settings modal, and chart improvements Mar 13, 2026
@ps48 ps48 added the bug Something isn't working label Mar 13, 2026
compressed
placeholder={i18n.translate('observability.apm.settings.servicesPlaceholder', {
defaultMessage: 'Select service map dataset',
defaultMessage: 'Select service map index pattern: otel-v2-apm-service-map-*',
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

we are on v2 already?

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.

yes APM uses service map v2

@ps48 ps48 merged commit 5fa4bba into opensearch-project:main Mar 13, 2026
14 of 21 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Something isn't working

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants