Dashboards & Visualizations

How do you show 3 different HTML images based on search results using tokens?

marvinlee93
Explorer

Hi all,

I have a table that will calculate the redalert and blackalert status through the EVAL command. (1 = ON, 0 = OFF)

There will be 3 states. (00,01,10)

I have used the command to on/off a panel that will display a static HTML image.

The table is showing the correct results but my panels are not changing even though the status of the redalert and blackalert has been changed. Any idea why? Below is my code.

<form>
  <label>Time Dependent Dashboards</label>
  <description>Realtime DATA</description>
  <fieldset autoRun="true" submitButton="false">
    <input type="time" token="field1">
      <label></label>
      <default>
        <earliest>-24h@h</earliest>
        <latest>now</latest>
      </default>
    </input>
  </fieldset>
   <row>
     <panel>
        <table>
         <search id="search_logic">
           <query>index="alarm"  |top redalert blackalert

          </query>
          <earliest>-10m@m</earliest>
          <latest>now</latest>

          <done>
             <!--set the tokens based on the value of red and black alert -->
             <condition match="'result.redalert' == 1">
               <set token="show_Red">true</set>
               <unset token="show_Green"></unset>
               <unset token="show_Black"></unset>
             </condition>
             <condition match="'result.blackalert' == 1">
               <set token="show_Black">true</set>
               <unset token="show_Green"></unset>
               <unset token="show_Red"></unset>
             </condition>  
             <condition>
               <set token="show_Green">true</set>
               <unset token="show_Red"></unset>
               <unset token="show_Black"></unset>
             </condition> 
           </done>
         </search>
         <!-- This is a dummy search to extract COUNT -->
         <option name="drilldown">none</option>
        </table>
     </panel>
   </row>

   <row depends="$show_Green$">
     <panel>
     <title>Green caution</title>
     <html>
       <h1>Green caution</h1>
         <p style="text-align:center;">
           <img hspace="5" alt="Logo" src="/static/app/search/images/photo.jpg" />
         </p>
     </html> 
     </panel>
   </row>

   <row depends="$show_Red$">
     <panel>
     <title>Red caution</title>
     <html>
       <h1>Red caution</h1>
         <p style="text-align:center;">
           <img hspace="5" alt="Logo" src="/static/app/search/images/photo.jpg" />
         </p>
     </html> 
     </panel>
   </row>

   <row depends="$show_Black$">
     <panel>
     <title>Black caution</title>
     <html>
       <h1>Black caution</h1>
         <p style="text-align:center;">
           <img hspace="5" alt="Logo" src="/static/app/search/images/photo.jpg" />
         </p>
     </html> 
     </panel>
   </row>
</form>
Tags (2)
0 Karma
1 Solution

renjith_nair
Legend

@marvinlee93,

Try using the string comparison by including the value in &quot

i.e.

 <condition match="'result.redalert' == &quot;1&quot;"

Below works fine for me

  <row>
    <panel>
      <title></title>
      <table>
        <search id="search_logic">
          <query>| makeresults |eval redalert=1,blackalert=0|table redalert,blackalert

           </query>
          <earliest>-10m@m</earliest>
          <latest>now</latest>
          <done>
            <!--set the tokens based on the value of red and black alert -->
            <condition  match="'result.redalert' == &quot;1&quot;">
              <unset token="show_Green"></unset>
              <unset token="show_Black"></unset>
              <set token="show_Red">true</set>
            </condition>
            <condition match="'result.blackalert' == &quot;1&quot;">
              <set token="show_Black">true</set>
              <unset token="show_Green"></unset>
              <unset token="show_Red"></unset>
            </condition>
            <condition>
              <set token="show_Green">true</set>
              <unset token="show_Red"></unset>
              <unset token="show_Black"></unset>
            </condition>
          </done>
        </search>
      </table>
    </panel>
  </row>
---
What goes around comes around. If it helps, hit it with Karma 🙂

View solution in original post

0 Karma

niketn
Legend

@marvinlee93 you seem to have several rows in your table. The token $result.<fieldName>$ can only access the first row of result. So, can you share the output of your table and tell us how you want to set the token?

Also your image section in sample code in the question seems to be the same. Are you trying to show the same image for three conditions or are they different? If they are different you can have only one html section and pass on the image file name as token instead i.e. $photo$ can be "photo_red", "photo_green" etc.

  <img hspace="5" alt="Logo" src="/static/app/$env:app$/images/$photo$.jpg" />

PS: I would suggest using icons instead of image or else your custom svg image instead of JPEG image for scalability of image as per resolution of the screen.

Refer to an older example which also has the link to my Wiki Talk for Image Overlay with Icon: https://answers.splunk.com/answers/585907/how-to-shift-image-inside-an-image-in-splunk-on-th.html

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

renjith_nair
Legend

@marvinlee93,

Try using the string comparison by including the value in &quot

i.e.

 <condition match="'result.redalert' == &quot;1&quot;"

Below works fine for me

  <row>
    <panel>
      <title></title>
      <table>
        <search id="search_logic">
          <query>| makeresults |eval redalert=1,blackalert=0|table redalert,blackalert

           </query>
          <earliest>-10m@m</earliest>
          <latest>now</latest>
          <done>
            <!--set the tokens based on the value of red and black alert -->
            <condition  match="'result.redalert' == &quot;1&quot;">
              <unset token="show_Green"></unset>
              <unset token="show_Black"></unset>
              <set token="show_Red">true</set>
            </condition>
            <condition match="'result.blackalert' == &quot;1&quot;">
              <set token="show_Black">true</set>
              <unset token="show_Green"></unset>
              <unset token="show_Red"></unset>
            </condition>
            <condition>
              <set token="show_Green">true</set>
              <unset token="show_Red"></unset>
              <unset token="show_Black"></unset>
            </condition>
          </done>
        </search>
      </table>
    </panel>
  </row>
---
What goes around comes around. If it helps, hit it with Karma 🙂
0 Karma

marvinlee93
Explorer

I realized that my code is working only if I manually refresh the page. It doesn't change automatically even though the state was detected. It only changes if i refresh the page.

0 Karma

renjith_nair
Legend

The search has to be executed and the done event has to be triggered to set the tokens. This is done normally through the refresh of the dashboard(re-execute search). If you are using realtime, try changing "done" to "IN PROGRESS"

---
What goes around comes around. If it helps, hit it with Karma 🙂
0 Karma

marvinlee93
Explorer

Hi, I managed to solve the problem. It's due to my table not being able to refresh.

0 Karma

renjith_nair
Legend

If you are not using real time search, you need to add refresh

<dashboard refresh="20">

Here is another example of using real time. Displaying panel based on the value of sec.

<dashboard >
  <label>Time Dependent Dashboards</label>
  <description>Realtime DATA</description>
  <row>
    <panel>
      <table>
        <search id="search_logic">
          <query>index=_internal|head 1|eval second=strftime(_time,"%S")|eval redalert=if(second&gt;20 AND second&lt;40,1,0)|eval blackalert=if(second&gt;40,1,0)|table redalert,blackalert,second</query>
          <earliest>rt-10s</earliest>
          <latest>rtnow</latest>
           <progress>
             <!--set the tokens based on the value of red and black alert -->
             <condition  match="'result.redalert' == &quot;1&quot;">
               <unset token="show_Green"></unset>
               <unset token="show_Black"></unset>
               <set token="show_Red">true</set>
             </condition>
             <condition match="'result.blackalert' == &quot;1&quot;">
               <set token="show_Black">true</set>
               <unset token="show_Green"></unset>
               <unset token="show_Red"></unset>
             </condition>
             <condition>
               <set token="show_Green">true</set>
               <unset token="show_Red"></unset>
               <unset token="show_Black"></unset>
             </condition>
           </progress>          
        </search>
        <!-- This is a dummy search to extract COUNT -->
        <option name="drilldown">none</option>
      </table>
    </panel>
  </row>
  <row depends="$show_Green$">
    <panel>
      <title>Green caution</title>
      <html>
            <h1>Green caution</h1>
              <p style="text-align:center;">
                <img hspace="5" alt="Logo" src="/static/app/search/images/photo.jpg"/>
              </p>
          </html>
    </panel>
  </row>
  <row depends="$show_Red$">
    <panel>
      <title>Red caution</title>
      <html>
            <h1>Red caution</h1>
              <p style="text-align:center;">
                <img hspace="5" alt="Logo" src="/static/app/search/images/photo.jpg"/>
              </p>
          </html>
    </panel>
  </row>
  <row depends="$show_Black$">
    <panel>
      <title>Black caution</title>
      <html>
            <h1>Black caution</h1>
              <p style="text-align:center;">
                <img hspace="5" alt="Logo" src="/static/app/search/images/photo.jpg"/>
              </p>
          </html>
    </panel>
  </row>
</dashboard>
---
What goes around comes around. If it helps, hit it with Karma 🙂
0 Karma

marvinlee93
Explorer
<dashboard>
  <label>Time Dependent Dashboards</label>
  <description>Realtime DATA</description>
   <row>
     <panel>
        <table>
         <search id="search_logic">
           <query> 
          index="main" 
          | eval WBGT=0.7*(Humidity__RH)/(100)*(Temperature_degC) + 4.4 + 0.2*(Temperature_degC)
          | eval red_increase=if(WBGT&gt;32 AND WBGT&lt;33,1,0)
          | streamstats window=1 sum(red_increase) as redincreases
          | eval redalert=if(redincreases&gt;=1,1,0) 

          | eval black_increase=if(WBGT&gt;32.9,1,0)
          | streamstats window=1 sum(black_increase) as blackincreases
          | eval blackalert=if(blackincreases&gt;=1,1,0) |table redalert blackalert 

          </query>
          <earliest>-10s@s</earliest>
          <latest>now</latest>

          <progress>
             <!--set the tokens based on the value of red and black alert -->
             <condition match="'result.redalert' == &quot;1&quot;;">
               <set token="show_Red">true</set>
               <unset token="show_Green"></unset>
               <unset token="show_Black"></unset>
             </condition>
             <condition match="'result.blackalert' == &quot;1&quot;">
               <set token="show_Black">true</set>
               <unset token="show_Green"></unset>
               <unset token="show_Red"></unset>
             </condition>  
             <condition>
               <set token="show_Green">true</set>
               <unset token="show_Red"></unset>
               <unset token="show_Black"></unset>
             </condition> 
           </progress>
         </search>
         <!-- This is a dummy search to extract COUNT -->
         <option name="drilldown">none</option>
        </table>
     </panel>
   </row>

   <row>
     <panel depends="$show_Green$">
     <title>Green caution</title>
     </panel>

     <panel depends="$show_Red$">
     <title>Red caution</title>
     </panel>

     <panel depends="$show_Black$">
     <title>Black caution</title>
     </panel>
   </row>
</dashboard>

Still not working 😞 and I really have no idea why

0 Karma
Get Updates on the Splunk Community!

.conf24 | Day 0

Hello Splunk Community! My name is Chris, and I'm based in Canberra, Australia's capital, and I travelled for ...

Enhance Security Visibility with Splunk Enterprise Security 7.1 through Threat ...

(view in My Videos)Struggling with alert fatigue, lack of context, and prioritization around security ...

Troubleshooting the OpenTelemetry Collector

  In this tech talk, you’ll learn how to troubleshoot the OpenTelemetry collector - from checking the ...