Is there a way to visualize glass tables outside ITSI?

[3DGjos]

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!

[DavidHourani]

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

[3DGjos]

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!

[3DGjos]

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>

[DavidHourani]

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

[VatsalJagani]

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