topic Re: Need to add icons like check circle and cross circle in Dashboards & Visualizations

Need to add icons like check circle and cross circle

vishaltaneja070 — Thu, 05 Mar 2020 15:56:25 GMT

I need to status symbol based on status UP and Down, but i want to it in single value visualization i.e. need to replace "UP" value with circle check green & "DOWN" with circle cross red.

below is the sample code:

<dashboard>
  <label>Test</label>
  <row>
    <panel>
      <single>
        <search>
          <query>| makeresults | eval Status1="UP"</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="colorBy">value</option>
        <option name="colorMode">none</option>
        <option name="drilldown">none</option>
        <option name="numberPrecision">0</option>
        <option name="rangeColors">["0x53a051", "0x0877a6", "0xf8be34", "0xf1813f", "0xdc4e41"]</option>
        <option name="rangeValues">[0,30,70,100]</option>
        <option name="showSparkline">1</option>
        <option name="showTrendIndicator">1</option>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
        <option name="trendColorInterpretation">standard</option>
        <option name="trendDisplayMode">absolute</option>
        <option name="unitPosition">after</option>
        <option name="useColors">0</option>
        <option name="useThousandSeparators">1</option>
      </single>

      <single>
        <search>
          <query>| makeresults | eval Status2="DOWN"</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="colorBy">value</option>
        <option name="colorMode">none</option>
        <option name="drilldown">none</option>
        <option name="numberPrecision">0</option>
        <option name="rangeColors">["0x53a051", "0x0877a6", "0xf8be34", "0xf1813f", "0xdc4e41"]</option>
        <option name="rangeValues">[0,30,70,100]</option>
        <option name="showSparkline">1</option>
        <option name="showTrendIndicator">1</option>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
        <option name="trendColorInterpretation">standard</option>
        <option name="trendDisplayMode">absolute</option>
        <option name="unitPosition">after</option>
        <option name="useColors">0</option>
        <option name="useThousandSeparators">1</option>
      </single>
    </panel>
  </row>
</dashboard>

Re: Need to add icons like check circle and cross circle

gcusello — Thu, 05 Mar 2020 16:03:37 GMT

Hi @vishaltaneja07011993,
see in the Splunk Dashboard Examples App ( https://splunkbase.splunk.com/app/1603/ ) the dashboard "Table Icon Set (Rangemap)": there's an useful example of your need.
In few words, you have to use a js and a css to do this.

Ciao.
Giuseppe

Re: Need to add icons like check circle and cross circle

vishaltaneja070 — Thu, 05 Mar 2020 16:37:50 GMT

The issue is that i dont want to do it at panel level, i have to do it at single value visualization only.

Re: Need to add icons like check circle and cross circle

gcusello — Thu, 05 Mar 2020 16:42:45 GMT

Hi @vishaltaneja07011993,
did you already tried the "Status Indicator - Custom Visualization" at https://splunkbase.splunk.com/app/3119/ ?

Ciao.
Giuseppe

Re: Need to add icons like check circle and cross circle

vishaltaneja070 — Thu, 05 Mar 2020 17:38:14 GMT

Any other option , I don't want to use this app

Re: Need to add icons like check circle and cross circle

efavreau — Thu, 05 Mar 2020 20:07:08 GMT

Maybe with custom Javascript. Otherwise, the app gcusello said, is what the majority of us use. It's Splunk built and supported. Using either that app or the Javascript, will involve your admin. I don't see another reason to avoid the app, and from my point of view, is the easiest of the two. Good luck!

Re: Need to add icons like check circle and cross circle

dmarling — Thu, 05 Mar 2020 20:55:20 GMT

If you are against using any css or javascript you can use ascii to approximate it:

<dashboard>
  <label>Test</label>
  <row>
    <panel>
      <single>
        <search>
          <query>| makeresults | eval Status1="UP", Status1=if(Status1="UP", "✅", "❌")</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="refresh.display">progressbar</option>
      </single>
      <single>
        <search>
          <query>| makeresults | eval Status2="DOWN", Status2=if(Status2="UP", "✅", "❌")</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="refresh.display">progressbar</option>
      </single>
    </panel>
  </row>
</dashboard>

Re: Need to add icons like check circle and cross circle

woodcock — Thu, 05 Mar 2020 22:57:36 GMT

Believe it or not, Splunk natively supports the ANSI emojis (because your operating system and browser both do), which includes glyphs similar to what you are describing. The easiest way to explore is with this app:
Emoji: https://splunkbase.splunk.com/app/4273/
Or just cut and paste what you need from this site:
http://unicode.org/emoji/charts/full-emoji-list.html#2600
search for check mark and cross mark
Cut and paste this EXACTLY as-is (you don't even need to install the app):

| makeresults
| eval status="PASS FAIL UP DOWN OOPS"
| makemv status
| mvexpand status
| eval icon = case(
   status=="PASS", "✅",
   status=="FAIL", "❌",
   status=="UP", "⬆",
   status=="DOWN", "⬇",
   true(), "❓")