Pause auto-refresh when the document becomes hidden

[alexbegg]

Description

When running Airflow it can be common to leave some tabs of Airflow open but not active. I believe (but not 100% sure, if I am wrong I can close this issue) Airflow's auto-refresh keeps refreshing when the document becomes hidden (for example, you switched to another browser tab).

This is not desirable in the cases when you are running the Airflow services on your same machine and you have a long-running DAG (taking hours to run). This could cause your CPU utilization to ramp up in this scenario (which can be quite common for users, myself included):

1. You are running the Airflow services on your same machine
2. Your machine is not that powerful
3. You have a long-running DAG (taking hours to run)
4. You leave a auto-refreshing page(s) of that DAG open for a long time (such as tree or graph) in hidden (or non-focused) tabs of your browser
   • What can make this even worse is if you have multiple tabs like this open, you are multiplying the extra processing power to refresh the page at a short interval
5. You have not increased the default auto_refresh_interval of 3

Use case/motivation

I am proposing the following improvements to the auto-refresh method to improve this situation:

1. When you change tabs in your browser, there is a feature of Javascript in modern browsers called "Page Visibility API". It allows for the use of listeners on a visibilitychange event to know when a document becomes visible or hidden. This can be used to pause auto-refresh when the document becomes hidden.
   • Discussion on Stack Overflow: https://stackoverflow.com/questions/1060008/is-there-a-way-to-detect-if-a-browser-window-is-not-currently-active
   • MDN: https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API
   • W3C: https://www.w3.org/TR/page-visibility/
2. We should provide a message in the UI to alert the user that the auto-refreshing is paused until the page regains focus.
3. Lastely, the option to only auto-refresh if the document is visible should be a configurable setting.

Additionally, the older onblur and onfocus listeners on the entire document could be used too. That way if a user switches to a different window while the page is still visible, the auto-refresh can pause (although this might not be desirable if you want to have Airflow open side-by-side with something else, so maybe this will be overboard)

Related issues

No response

Are you willing to submit a PR?

• Yes I am willing to submit a PR!

Code of Conduct

• I agree to follow this project's Code of Conduct

[potiuk]

assigned you

[bbovenzi]

Good call! Feel free to DM me on the Airflow Slack if you need help with any part of the UI.

[alexbegg]

I have been too busy lately to work on a PR for this, I talked with @bbovenzi and he can work on it in place of me.