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

[ehorwood]

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?

[thilleso]

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;
});