[Bug] 100% client CPU usage on red alert glow animation

[vonox7]

When having an alert, the corresponding panel receives a red heart and glows red in the background. This glow animation consumes 100% desktop CPU load, which is pretty bad.
Expected: Less than 5% CPU load or no animation.

I'm using Grafana v4.1.0 with Influx on Linux. My desktop machine is the latest MacbookPro with the latest Chrome 57.0.2987.133.

[torkelo]

@mattttt your animation needs a tweak :)

[mattttt]

I think I have a solution for this, based on this post: http://tobiasahlin.com/blog/how-to-animate-box-shadow/

Testing now in a branch.

[mattttt]

While I wasnt able to replicate CPU usage spiking to 100%, I did observe that it did spike a bit (~15-20% on my laptop) and looked for more efficient ways to handle the animation.

Refactored code in PR: #8227

[torkelo]

great, thanks @mattttt for quick fix!

[youurayy]

Hi, the animation is definitely still taxing, e.g. on laptops (Macbook/Chrome), and on a bigger dashboard page with several open alerts, it adds up and the laptop goes into a full-fan/very-hot mode.

Things go back to normal after adding this CSS (e.g. via the Stylebot extension):

.panel-alert-state--alerting:after {
    -webkit-animation: none;
    animation: none;
    opacity: inherit;
}

... plus I feel I have even better overview of where the alerts are because the red border is now solid.

Perhaps this could make it as an option into future Grafanas -- to have the animation on a user setting, possible to turn on/off (or just remove it entirely).

[youurayy]

Grafana signalling an alarm (even in non-foreground tab, Chrome) with a CSS animation, Macbook Pro i9 CPU (top-spec), cca. 2019:

*laptop hot and spinning fans loudly

[marefr]

@youurayy thanks for the suggestions. I would recommend you to open a new issue where you can report more detailed information since this issue have been closed for over 2 years.