All Apps and Add-ons

Flashing Rows (XML)

tmarlette
Motivator

I am using the sideview app, in order to see if I can make some blinky lights within splunk. Currently I have a search already that works, as well as a dashboard that changes color upon specific parameters. Now I am wondering if I can make the lights 'blink' or flash.

I found this within CSS
http://www.w3schools.com/css/tryit.asp?filename=trycss3_animation1

Which is exactly what i'm look for, and I think I can embed this within an HTML module.

When I try this (copy and paste the code) it screws up the whole view, but changes the background color just like in the example, which while looking cool, doesn't help at all. 😃

I was just wondering if someone could help me make ONLY the row flash instead of the entire background?

PS... this is my XML:

<view isSticky="False" isVisible="true" onunloadCancelJobs="true" template="dashboard.html" stylesheet="application.css">
  <label>Test View</label>
  <module name="AccountBar" layoutPanel="appHeader" />
  <module name="AppBar" layoutPanel="appHeader" />
  <module name="SideviewUtils" layoutPanel="appHeader"/>
  <module name="Message" layoutPanel="messaging">
    <param name="filter">*</param>
    <param name="maxSize">2</param>
    <param name="clearOnJobDispatch">False</param>
  </module>
  <module name="HTML" layoutPanel="viewHeader">
    <param name="html"><![CDATA[
      <h1>Test Page</h1>
    ]]></param>
    <module name="Search" layoutPanel="panel_row1_col1" autoRun="true">
      <param name="search">sourcetype=WMI:Service host=host_chi Name=service1 | sort - State | sort - host | dedup host | eval "field1"=case(State="Running","OK",State="Stopped","Down") | convert timeformat="%m/%d/%Y %H:%M:%S" ctime(_time) AS "Updated" | table "Updated",host,"field1"
      </param>
      <param name="earliest">-15m</param>
      <module name="Table" layoutPanel="panel_row1_col1_grp1">
        <param name="rowClass">$row.fields.field1$</param>
        <module name="HTML" layoutPanel="panel_row2_col1">
          <param name="html">
            <![CDATA[
              <style type="text/css"> .Table tr.OK { background-color:#66FF66; } .Table tr.Down { background-color:#DB4D4D; } .Table tr.yellow { background-color:#fef200; } .Table tr.blue { background-color:#0090d6; } 
              </style>
            ]]>
          </param>
        </module>
        <module name="Redirector">
          <param name="arg.host">$row.fields.host$</param>
          <param name="popup">True</param>
          <param name="url">test_view2</param>
        </module>
      </module>
    </module>
  </module>
</view>
0 Karma
1 Solution

tmarlette
Motivator

I figured this out myself. This can be done using CSS3. The only catch is that it won't flash in IE9.

Read about it here:
http://www.w3schools.com/css/css3_animations.asp

View solution in original post

0 Karma

tmarlette
Motivator

I figured this out myself. This can be done using CSS3. The only catch is that it won't flash in IE9.

Read about it here:
http://www.w3schools.com/css/css3_animations.asp

0 Karma

martin_mueller
SplunkTrust
SplunkTrust

Move your style definition into the already-linked application.css. Using the rowClass param is already the way to go for setting row-specific styles.

0 Karma
Get Updates on the Splunk Community!

Routing Data to Different Splunk Indexes in the OpenTelemetry Collector

This blog post is part of an ongoing series on OpenTelemetry. The OpenTelemetry project is the second largest ...

Getting Started with AIOps: Event Correlation Basics and Alert Storm Detection in ...

Getting Started with AIOps:Event Correlation Basics and Alert Storm Detection in Splunk IT Service ...

Register to Attend BSides SPL 2022 - It's all Happening October 18!

Join like-minded individuals for technical sessions on everything Splunk!  This is a community-led and run ...