Dashboards & Visualizations

How to add flashing animation in Trellis View

Raymond2T
Path Finder

I have a singlevalue trellis view showing the status of items up (Green) and down (Red).

When the status is down (Red), i would like to get the trellis view to flash or blink.

I found below html code for blinking effect

<html>
        <style>
          @keyframes blink {
            100%,
            0% {
              opacity: 0.6;
            }
            60% {
              opacity: 0.9;
            } 
          }
          #singlevalue rect {
            animation: blink 0.8s infinite;
          }
        </style>
      </html>


However, it will make all singlevalue are blinking.
I am using rangemap to make the background of singlevalue in Red/Green color.

How can I specify the trellis will blink in Red color only?

Thanks a lot.

Labels (3)
0 Karma

tscroggins
Influencer

Hi @Raymond2T,

In Simple XML dashboards, you can use the deprecated but still functional classField option. For example, if you have a field named range with values green and red, use:

 

<single>
  <search>
    <!-- ... -->
  </search>
  <option name="classField">range</option>
  <!-- ... -->
</single>

 

When trellis is enabled, the resulting div element will have an additional class of either green or red, depending on the value of that row's range field:

 

<div id="singlevalue" class="single-value shared-singlevalue red" ...>

 

You can adjust your stylesheet to include the green and red classes as desired:

 

<style>
  @keyframes blink {
    100%,
    0% {
      opacity: 0.6;
    }
    60% {
      opacity: 0.9;
    } 
  }
  .single-value.red rect {
    animation: blink 0.8s infinite;
  }
</style>

 

 

Get Updates on the Splunk Community!

Database Performance Sidebar Panel Now on APM Database Query Performance & Service ...

We’ve streamlined the troubleshooting experience for database-related service issues by adding a database ...

IM Landing Page Filter - Now Available

We’ve added the capability for you to filter across the summary details on the main Infrastructure Monitoring ...

Dynamic Links from Alerts to IM Navigators - New in Observability Cloud

Splunk continues to improve the troubleshooting experience in Observability Cloud with this latest enhancement ...