Discussion: Dynamically fetch data instead of page reload for monitoring dashboard

Problem to solve

Improve the Monitoring dashboard user experience by dynamically loading content instead of reloading the page every time a dropdown control is updated.

Further details

The current dropdown controls to change the dashboard, environment, and date time picker reloads the entire page when a new value is selected. We should definitely take advantage of the fact that the page is entirely built-in Vue and make it more responsive by exploring other client-side data fetching strategies when controls are updated and not reload the page.

Other applications like Grafana have a similar experience in cases where the time range of a dashboard is changed.

Pros

  1. HTML/JS/CSS and other resources are loaded only once.
  2. Seamless and linear user experience with minimal page reloads.
  3. This will enable us to implement future features like auto-refreshing dashboards and also with integration testing (IMO).
  4. More opportunity to cache results.

Cons

  1. Might make the Vuex state management a bit tricky.
  2. Results caching may lead to memory-leak situations (if not handled properly)

Proposal

  1. Listen to change events (in Vuex) on the aforementioned dashboard dropdown controls and fetch data instead of reloading page
  2. Use HTML5 History API to manage changes in from and to datetime URL params.
  3. The backend currently passes a bunch of params like feature flags, Prometheus endpoints that do not dynamically change and not need any changes. However, params like prometheus_status might require change.

Documentation

No change required.

Testing

This would involve writing more state management tests. The existing component specs would require minimal to no changes.

Edited by Dhiraj Bodicherla