All Apps and Add-ons

Quick State visualization Works in Search but Not always in Dashboard

Melstrathdee
Path Finder

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

0 Karma
1 Solution

Melstrathdee
Path Finder

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
alt text

View solution in original post

0 Karma

Melstrathdee
Path Finder

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
alt text

0 Karma

niketn
Legend

@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

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

msivill_splunk
Splunk Employee
Splunk Employee

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

alt text

Example SVG trellis layout generating different counter numbers

alt text

0 Karma

Melstrathdee
Path Finder

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

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

0 Karma
Get Updates on the Splunk Community!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...