Real time monitoring dashboard (blinking alert)

Grafana Alerting
1

I have created a grafana real time dashboard for monitoring the service. When I reach the threshold ,the icon switch to sold red as an alert. I want to the icon to blink or flash red as an alert, is that possible?

2

Yes, it should be possible. However, by default, Grafana does not provide this functionality out of the box. You would need to use custom CSS or JavaScript to achieve the blinking effect.

Text panel with HTML code:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<div id="blinking-text">
  <span class="text-value">${variable}</span>
</div>

<script>
$(document).ready(function() {
  var blinkingText = $("#blinking-text");

  setInterval(function() {
    blinkingText.toggleClass("blinking");
  }, 500); // speed
});
</script>

<style>
#blinking-text .text-value {
  font-size: 18px;
}

#blinking-text.blinking .text-value {
  animation: blink 1s infinite;
}

@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}
</style>

Don’t forget to disable the HTML sanitize option: Configuration | Grafana Labs

You can find some interesting insights Refreshing gif image - #8 by svetb.

2 Likes
3

Thank you so much, I’ll try it

4

I believe this HTML code sample will cause the text panel to blink unconditionally. However, I’m trying for a gauge with percentage threshold that triggers this blinking.

Once the gauge value exceeds 80%, I need the companion text panel to start blinking to indicate an issue.
Is it possible in the HTML code to reference dynamic value from other panels or even write a Lucene query directly?

5

@bassamjq Have you found any alternate way to achieve this? If possible please share the details.

6

@bassamjq I am also working on the same part. were you able to resolve this ?