Digital Resilience Pays Off
How resilient is your organization? Learn how to mature your digital resilience with this free guide.
Using Bootstrap Modal with Splunk Simple XML
By
Jason Conger
While working on a performance dashboard recently, I wanted an area to further explain the performance metric currently being displayed without taking up too much screen real estate. In the end, I ended up using a Bootstrap modal dialog to display the metric details when a user clicks an information icon. Here is the end result:
Step 1 – Add the Bootstrap modal markup to your dashboard
Pulling the syntax directly from Bootstrap (http://getbootstrap.com/javascript/#modals), this is what the Simple XML looks like:
<row grouping=”2”>
<chart id=”chart1”> … </chart>
<html>
<a href="#" id="btn1" class="btnModalInfo" data-toggle="modal" data-target="#desc1">…</a>
<div class="modal fade" id="desc1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"></div>
<div class="modal-body">…</div>
<div class="modal-footer">…</div>
</div>
</div>
</div>
</html>
</row>
Step 2 – Add JavaScript to move your buttons to the correct place
If you have a keen eye, you will notice that the button that triggers the modal dialog will appear below the chart. We want the button moved next to the title of the panel, so we use a little jQuery to reposition the button like this:
require(['jquery'], function($){
$(function() {
// When the DOM is ready, move the modal button where we want it to be displayed
$("#chart1 .panel-head").find("h3").after($("#btn1"));
});
});
FYI – I got the code to move things around from the Splunk 6 Dashboard Examples app – there are lots of cool things in there so check it out.
Step 3 – Add CSS to make things look pretty
The last step is to add some CSS to do things like float and add padding. The important part of the CSS is setting the .modal display to none. There is a bug feature in Chrome that will render controls behind the modal dialog useless even when the dialog is not displayed (reference -> http://updates.html5rocks.com/2012/09/Stacking-Changes-Coming-to-position-fixed-elements) To fix this, add the following to your stylesheet:
.modal {
display: none;
}
As always, I created a sample GitHub project to put it all together. Go get it here -> https://github.com/JasonConger/SplunkModalDescExample
Related Articles
About Splunk
The world’s leading organizations rely on Splunk, a Cisco company, to continuously strengthen digital resilience with our unified security and observability platform, powered by industry-leading AI.
Our customers trust Splunk’s award-winning security and observability solutions to secure and improve the reliability of their complex digital environments, at any scale.
Subscribe to our blog
Get the latest articles from Splunk straight to your inbox.
Connect with Splunk on X
Follow @Splunk
