All Apps and Add-ons

Quick State: Is there a way to make the visualization a clickable item?


Is there a way we can make the Quick State visualization clickable per item/box that appears? Or some custom css +js to get them clickable for drilldown?

Path Finder

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

    '../app/<your_app>/components/ModalView',               // update this line with your app name
], 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  });;


    ], 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 }
            return this;

        show: function() {
            //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
                left: '20%',
                'margin-left': '0',

            //get a reference to the search
            var search = mvc.Components.get(;
            //define our table view and we will use the search as the manager to populate it
            var detailChart = new ChartElement({
                    id: "detailChart",
                    "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')

            //add our detailTable to our childViews array so we can remove them later

            //run the search

        close: function() {
            _.each(this.childViews, function(childView){


    return ModalView;