Quick State visualization Works in Search but Not always in Dashboard

[Melstrathdee]

I am using the Quick State visualization to display a greenlight/redlight display for services for my hosts. However the viz doesnt always load when I have it in a dashboard.
It seems to work consistently if I use the search interface but not when I add it to a dashboard.
Any Ideas?

Quick State

My code is as follows:

<viz type="quick_state_app.quick_state">
        <search>
          <query>index="windows"  sourcetype=abc  host=xyz
| dedup host
| eval state = if(State = "Running","#3fc77a","#d93f3c" ) 
|  eval icon="../../static/app/mytestapp/dot.jpg"
 | table host icon state
</query>
          <earliest>$dateToken.earliest$</earliest>
          <latest>$dateToken.latest$</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="height">165</option>
      </viz>

Running version - 7.2.3

[Melstrathdee · Accepted solution]

Thanks for the suggestions. This is what I ended up doing:

I used the following post to generate a table where I had a label and then value separated by a pipe.
The js then displays the label and used the value to display a colour.

https://answers.splunk.com/answers/661894/how-to-color-cell-contents-with-css-and-js.html

I then added the following css so that the table rows displayed across the page rather than down the page.

#my_table tr {
  display: block;
  float: left;
   text-align: center !important;
background-color:#212527 !important;
}
#my_table th{display:none;}

#my_table td {
  display: block;
   text-align: center !important;
     background-color:#212527 !important;
     width:180px !important;
   padding: 2px !important;
    margin: 2px !important;
}

Then this css to control the cells colour etc.

    .css_for_2 { 
     background-color:#b44441;
           padding: 5px !important;
            font-size: 14px  !important;
            line-height:120%  !important;
              color: white  !important;
    height:60px  !important;
     }

     .css_for_3 { 
     background-color:orange;
          padding: 5px !important;
            font-size: 14px  !important;
            line-height:120%  !important;
              color: white  !important;
    height:60px  !important;
     }

     .css_for_1 { 
     background-color:#3fc77a;
          padding: 5px !important;
            font-size: 14px  !important;
            line-height:120%  !important;
              color: white  !important;
    height:60px  !important;
     }

And this is how it looks

[niketn]

@Melstrathdee try Status Indicator Custom Visualization with Trellis or else check out Custom Decorations example in the Splunk Dashboard Examples App. You can use Splunk Icons ( https://<yourSplunkServer>/en-US/static/docs/style/style-guide.html#icons ) and also extend this example to include Image instead of Icons.

Refer to some of older answers for using Single Value and Status Indicator

https://answers.splunk.com/answers/590581/refresh-data-in-table-by-collecting-token-on-click.html
https://answers.splunk.com/answers/606444/can-i-create-a-visual-of-the-status-of-a-file-usin.html

[msivill_splunk]

If you are open to looking at alternative options the Scalable Vector Graphics - Custom Visualization has just been updated to support trellis layouts. So you could achieve something similar with custom images, the caveat being that it uses SVG to display images, not JPG/PNG.

Example SVG trellis layout generating different battery levels

Example SVG trellis layout generating different counter numbers

[Melstrathdee]

Great Idea, I didnt think to use the scale vector graphics.

I've posted what I did in the end below.