Skip to content

Improve Real-Time UI: Resizable Dashboard and Time Range Preservation#24

Merged
cchwala merged 4 commits intomainfrom
feature/realtime-ui-improvements
Feb 12, 2026
Merged

Improve Real-Time UI: Resizable Dashboard and Time Range Preservation#24
cchwala merged 4 commits intomainfrom
feature/realtime-ui-improvements

Conversation

@cchwala
Copy link
Member

@cchwala cchwala commented Feb 12, 2026

This PR enhances the real-time monitoring interface with two key UX improvements:

Features

  1. Resizable Grafana Dashboard: Added a draggable divider that allows users to adjust the dashboard height (200px minimum, 80% viewport maximum) for better viewing on different screen sizes.

  2. Time Range Preservation: When selecting CMLs by clicking map lines, the Grafana dashboard now maintains the user's selected time range instead of resetting to the default 7-day view. Implemented using history.pushState for seamless updates without iframe reloads.

Technical Changes

  • Migrated from flexbox to absolute positioning layout with the map as a full-height background layer
  • Dashboard overlays from bottom with proper z-index layering
  • Disabled iframe pointer events during resize operations to prevent event capture issues
  • Cleaned up redundant CSS and removed unnecessary fallback logic

Testing

Tested on various screen sizes and verified:

  • Smooth resizing in both directions
  • Time range persists across CML selection
  • No stuck states or visual artifacts
  • Map interactions remain fully functional

@codecov
Copy link

codecov bot commented Feb 12, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 73.40%. Comparing base (0970bc8) to head (c30de40).
⚠️ Report is 2 commits behind head on main.

Additional details and impacted files
@@           Coverage Diff           @@
##             main      #24   +/-   ##
=======================================
  Coverage   73.40%   73.40%           
=======================================
  Files          22       22           
  Lines        1914     1914           
=======================================
  Hits         1405     1405           
  Misses        509      509           
Flag Coverage Δ
mno_simulator 87.87% <ø> (ø)
parser 81.21% <ø> (ø)
webserver 44.73% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

- Add draggable resizer for dashboard height adjustment (200px-80vh)
- Change layout to overlay positioning with map as background
- Fix resize dragging by disabling iframe pointer events during resize
@cchwala cchwala changed the title UI improvements Improve Real-Time UI: Resizable Dashboard and Time Range Preservation Feb 12, 2026
@cchwala cchwala merged commit 019c131 into main Feb 12, 2026
7 checks passed
@cchwala cchwala deleted the feature/realtime-ui-improvements branch February 12, 2026 21:52
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.

1 participant