A bit late to the party, but you can do this with some javascript.
The following example makes the Quick State clickable, and opens up a post prosess search in a modal view.
NOTE: A colleague of mine has said that the visualization don't play along after upgrading to version 7.0.1 (from 6.X)
The two files needed are quickStateDrilldown.js and ModalView.js
quickStateDrilldown.js is placed in $SPLUNK_HOME/etc/apps/your_app/appserver/static
ModalView.js is placed in $SPLUNK_HOME/etc/apps/your_app/appserver/static/components
If you want to have a regular drilldown, i.e. only set some tokens in the dashboard, remove the two last lines in quickStateDrilldown : var modal = ... and modal.show
require([
'underscore',
'jquery',
'backbone',
'splunkjs/mvc',
'../app/<your_app>/components/ModalView', // update this line with your app name
'splunkjs/mvc/searchmanager',
'splunkjs/mvc/postprocessmanager',
'splunkjs/mvc/simplexml/ready!'
], function(_, $,Backbone, mvc, ModalView, SearchManager, PostProcessManager) {
// this line makes the drilldown:
var tokens = mvc.Components.getInstance("submitted");
// the dashboard uses a base search
var basesearch = new SearchManager({
id: "basesearch",
earliest_time: "$token_time.earliest$",
latest_time: "$token_time.latest$",
preview: true,
cache: false,
search: "index=_internal | stats count by host"
}, {tokens: true});
// and then a post prosess search
var detailSearch = new PostProcessManager({
id: "detailSearch",
managerid: "basesearch",
preview: true,
cache: false,
search: '| where match(host,\"$token_host$\") | table host count'
}, {tokens: true, tokenNamespace: "submitted"});
// these lines makes the visualization clickable, and displays the post-prosess search in a pop-up modal
$('#panel_state').on('click', '#draggable', function() {
var _title=$(this).find('h3').text();
console.log( "clicked: " + _title );
tokens.set('token_host', _title);
var modal = new ModalView({ title : "My title: ".concat(_title), search : detailSearch });
modal.show();
});
});
ModalView.js
define([
'underscore',
'backbone',
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/searchmanager',
'splunkjs/mvc/simplexml/element/chart',
], function(_, Backbone, $, mvc, SearchManager, ChartElement) {
var modalTemplate = "<div id=\"pivotModal\" class=\"modal\">" +
"<div class=\"modal-header\"><h3><%- title %></h3></div>" +
"<div class=\"modal-body\"></div>" +
"<div class=\"modal-footer\"><button "+
"class=\"dtsBtn close\">Close</button></div>" +
"</div>" +
"<div class=\"modal-backdrop\"></div>";
var ModalView = Backbone.View.extend({
defaults: {
title: 'Not Set'
},
initialize: function(options) {
this.options = options;
this.options = _.extend({}, this.defaults, this.options);
this.template = _.template(modalTemplate);
//console.log('Hello from Modal View: ' + this.options.title);
this.childViews = [];
},
events: {
//clicking on a button with a class of close calls the close function
'click .close': 'close',
//clicking on the modal backdrop calls the close function
'click .modal-backdrop': 'close',
},
render: function() {
var data = { title : this.options.title }
this.$el.html(this.template(data));
return this;
},
show: function() {
$(document.body).append(this.render().el);
//create a new div in which we will add our table
$(this.el).find('.modal-body').append('<div id="modalVizualization"/>');
//modify the modal so it occupies 60% of the screen width
$(this.el).find('.modal').css({
width:'60%',
height:'auto',
left: '20%',
'margin-left': '0',
'max-height':'100%'
});
//get a reference to the search
var search = mvc.Components.get(this.options.search.id);
//console.log("Checkpoint")
//define our table view and we will use the search as the manager to populate it
var detailChart = new ChartElement({
id: "detailChart",
managerid: search.name,
"charting.legend.placement": "none",
"resizable": true,
"charting.axisTitleX.visibility": "collapsed",
"charting.drilldown": "none",
"charting.chart.barSpacing": "10",
"charting.fieldColors": "{\"Antall\": 0xA8C6E8}",
"charting.chart": "bar",
"charting.axisTitleY.visibility": "collapsed",
el: $('#modalVizualization')
}).render();
//add our detailTable to our childViews array so we can remove them later
this.childViews.push(detailChart);
//run the search
search.startSearch();
},
close: function() {
this.unbind();
this.remove();
_.each(this.childViews, function(childView){
childView.unbind();
childView.remove();
});
}
});
return ModalView;
});
... View more