topic Re: How do you show 3 different HTML images based on search results using tokens? in Dashboards & Visualizations

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

marvinlee93 — Mon, 17 Dec 2018 09:51:39 GMT

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>

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

renjith_nair — Mon, 17 Dec 2018 10:29:06 GMT

@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>

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

marvinlee93 — Tue, 18 Dec 2018 01:42:56 GMT

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.

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

renjith_nair — Tue, 18 Dec 2018 02:37:26 GMT

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"

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

marvinlee93 — Tue, 18 Dec 2018 02:56:09 GMT

<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

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

marvinlee93 — Tue, 18 Dec 2018 06:34:48 GMT

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

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

renjith_nair — Tue, 18 Dec 2018 06:37:53 GMT

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>

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

niketn — Tue, 18 Dec 2018 09:10:24 GMT

@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