Splunk IT Service Intelligence

Is there a way to visualize glass tables outside ITSI?

3DGjos
Communicator

Hello,

Our client want other area's people to visualize a glass table dashboard. the thing is that for security policies, no one except our client's area can access the ITSI servers (even from the UI).

So I have to make an entire dashboard outside the ITSI server, trying to replicate the logic from all services. So my question is: Is there a way to visuailize a glass table dashboard from another splunk instance or a webpage or something? Or can I at least map the services states from an internal log or something?

Thanks a lot!

0 Karma

DavidHourani
Super Champion

Hi @3DGjos,

You can't use glass tables outside of ITSI or ES but you can do better with a bit of HTML and CSS.

Using the the Splunk dashboard example application you will find a great example of an image used as a background for a dashboard and then single values are positioned on that image to make it look exactly like a glass table:
https://splunkbase.splunk.com/app/1603/
I've used this method to bypass using glass tables for many customers for the exact reason you mentioned.

Let me know if that helps and if you need help with the dashboards CSS for positioning the values on the image.

Cheers,
David

0 Karma

3DGjos
Communicator

Hello David, sorry for the delay, my client got their own times

Im trying to replicate the example from dashboards examples, but im still unable to visualize the .jpg image, here is what I did:

  1. I put custom_layout_overlay_single.css and splunk_indexing_pipeline.png into /opt/splunk/etc/apps/myapp/appserver/static

here are the contents of the .css:

.ingestion_pipeline {
    position: relative;
    width: 1200px;
    height: 500px;
}
#image_overlay_panel .image{
    background: transparent 50% 50% no-repeat url('/static/app/myapp/splunk_indexing_pipeline.png');
    position:absolute;
    top: 0px;
    left: 0px;
    width: inherit;
    height: inherit;
}


.singleValue {
    font-size: 4em;
    font-weight: bold;
}
#image_overlay_panel #parsing_queue {
   position: absolute;
   top: 430px;
   left: 292px;
}

#image_overlay_panel #merging_queue {
   position: absolute;
   top: 430px;
   left: 515px;
}

#image_overlay_panel #typing_queue {
   position: absolute;
   top: 430px;
   left: 738px;
}

#image_overlay_panel #index_queue {
   position: absolute;
   top: 430px;
   left: 954px;
}

I think my problem is I can't figure out how the route to map the .png works

thanks!

0 Karma

3DGjos
Communicator

2 . Made a dashboard in my app, I only change the label so far, but the png is not working:

here is my dashboard .xml:

 <form stylesheet="custom_layout_overlay_single.css">
          <label>Overview</label>
          <description>Display workflow status visually using an image, and grouped single value elements.</description>
          <fieldset autoRun="true" submitButton="false">
            <input type="time" searchWhenChanged="true">
              <default>
                <earliest>-24h@h</earliest>
                <latest>now</latest>
              </default>
            </input>
          </fieldset>
          <row>
              <panel id="image_overlay_panel">
                  <search id="parsing_queue">
                      <query>index=_internal source=*metrics.log group=queue name=parsingqueue
                          | eval fill_perc=round((current_size_kb/max_size_kb)*100,2)
                          | stats max(fill_perc) as count
                          | eval count = round(count,0) . "%"</query>
                      <earliest>$earliest$</earliest>
                      <latest>$latest$</latest>
                      <progress>
                        <set token="parsing_queue">$result.count$</set>
                      </progress>
                  </search>
                  <search id="merging_queue">
                      <query>index=_internal source=*metrics.log group=queue name=aggqueue
                          | eval fill_perc=round((current_size_kb/max_size_kb)*100,2)
                          | stats max(fill_perc) as count
                          | eval count = round(count,0) . "%"</query>
                      <earliest>$earliest$</earliest>
                      <latest>$latest$</latest>
                      <progress>
                        <set token="merging_queue">$result.count$</set>
                      </progress>
                  </search>
                  <search id="typing_queue">
                      <query>index=_internal source=*metrics.log group=queue name=typingqueue
                          | eval fill_perc=round((current_size_kb/max_size_kb)*100,2)
                          | stats max(fill_perc) as count
                          | eval count = round(count,0) . "%"</query>
                      <earliest>$earliest$</earliest>
                      <latest>$latest$</latest>
                      <progress>
                        <set token="typing_queue">$result.count$</set>
                      </progress>
                  </search>
                  <search id="index_queue">
                      <query>index=_internal source=*metrics.log group=queue name=indexqueue
                          | eval fill_perc=round((current_size_kb/max_size_kb)*100,2)
                          | stats max(fill_perc) as count
                          | eval count = round(count,0) . "%"</query>
                      <earliest>$earliest$</earliest>
                      <latest>$latest$</latest>
                      <progress>
                        <set token="index_queue">$result.count$</set>
                      </progress>
                  </search>
                  <html>
                      <div class="ingestion_pipeline">
                          <div class="image"></div>
                          <div class="singleValue" id="parsing_queue">$parsing_queue$</div>
                          <div class="singleValue" id="merging_queue">$merging_queue$</div>
                          <div class="singleValue" id="typing_queue">$typing_queue$</div>
                          <div class="singleValue" id="index_queue">$index_queue$</div>
                      </div>
                  </html>
              </panel>
          </row>
         </form>
0 Karma

DavidHourani
Super Champion

Hi @3DGjos, let me know if the solution worked for you 🙂

0 Karma

VatsalJagani
SplunkTrust
SplunkTrust

@3DGjos,

It's not very straight forward way, but here is how you can do it.

  • write a script which make web request to Splunk for search to be executed and manually run those searches of Glass Table. (You might have to do some hard work to find queries for all those elements in Glass table)
  • Create similar visualisations as your Glass table and show the results retrieved by the script.

As there is no straight forward solution currently available.
Not sure you can use one of these, quite easy but not sure if these works for you.

Embedded Report
Embedded Dashboard

Hope this helps!!!

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