Flashing Rows (XML)

[tmarlette]

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>

[tmarlette · Accepted solution]

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

[martin_mueller]

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.