Solved: How to add a Splunk Report (saved search) inside t...

saulcruzmendez · ‎11-06-2019

I have created inside an HTML tag a popup with the modal class.
However, I'm interested in showing a Report (saved search) on that popup.
I'm not sure how to add such a report inside the HTML tag.

        <div class="modal popup-body $tokShowModel$" id="myModal">
         <div class="modal-header popup-header">
            <h3>Show a report</h3>
            <div>
             <a id="anchorCloseModalWindow" class="btn btn-primary btn-position">x</a>
            </div>
         </div>
         <div class="modal-body">
         <h1>Report comes here<h1>
         </div>
        </div>

saulcruzmendez · ‎11-08-2019

I was able to solve this via a Javascript, using a SearchManager and TableElement.

These links are pretty good documented:

https://docs.splunk.com/DocumentationStatic/WebFramework/1.0/compref_searchmanager.html
https://dev.splunk.com/enterprise/docs/developapps/webframework/displaydataview/howtoaddvisualhtml

View solution in original post

niketn · ‎11-08-2019

@saulcruzmendez Go ahead and accept your own answer posted above. The reason why I had suggested Embedded Dashboards was to keep the complexity lower. However, if you are comfortable with Simple XML Extensions, you can try the following Splunk .Conf session by @jconger where Example 10 deals with Event Handler + Token + Table Cell Render + Modal + Splunk Web Framework to generate a chart as Modal pop-up exactly the same way as your requirement.

10 Tips, Tricks and Hacks for Better Dashboards in Splunk

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

saulcruzmendez · ‎11-08-2019

@niketnilay Thank you for the link! I'll for sure watch the video session. I appreciate the help!

saulcruzmendez · ‎11-08-2019

I was able to solve this via a Javascript, using a SearchManager and TableElement.

These links are pretty good documented:

https://docs.splunk.com/DocumentationStatic/WebFramework/1.0/compref_searchmanager.html
https://dev.splunk.com/enterprise/docs/developapps/webframework/displaydataview/howtoaddvisualhtml

saulcruzmendez · ‎11-07-2019

@niketnilay

Thanks you for your answer. That could work but I need it to be a search on real time, not a schedule report. I have been looking around, and from what is looks like. I need to work on the modal window via JavaScript.

niketn · ‎11-07-2019

@saulcruzmendez, one simple approach would be to convert your saved search to scheduled search and enable Embedded Report (learn about the best practices to enable this).

https://docs.splunk.com/Documentation/Splunk/latest/Report/Embedscheduledreports

Then you can add the iframe code to your existing Modal Pop-up. Here is a sample code:

  <row>
    <panel>
      <html>
        <div class="modal popup-body $tokShowModel$" id="myModal">
          <div class="modal-header popup-header">
            <h3>Show a report</h3>
            <div>
              <a id="anchorCloseModalWindow" class="btn btn-primary btn-position">x</a>
            </div>
          </div>
          <div class="modal-body">
            <h1>Splunkd Error embedded as modal pop-up</h1>
            <div>
              <iframe height="400" width="480" frameborder="0" src="embedded_report_rest_uri_generated_after_converting_your_report_to_embedded_report"></iframe>
            </div>
          </div>
        </div>
      </html>
    </panel>
  </row>

Do try out and confirm.

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

How to add a Splunk Report (saved search) inside the HTML tags?

Introducing the Splunk Community Dashboard Challenge!

Get the T-shirt to Prove You Survived Splunk University Bootcamp

Wondering How to Build Resiliency in the Cloud?