Visualizations like Chart , Single View in Modal Window

[njohnson7]

All,

I was reusing the Modal Window project from Ian Gillespie as described in the Hurricane Labs Tutorial Project .

This project shows a TABLE in the Modal Window , I would like to have different Visualizations like Chart, Single View Panels etc.

Instead of using the TableView, I tried changing it to ChartView , ChartElement etc, but I am not able to make it work.

I still get the output as a Table in the Modal Window.

Could someone teach me to do that ? It would be really helpful if an example is given on Single View apart from ChartView as well.

Dashboard Code:

<dashboard script="modalviewsearchapp1.js">
  <label>Modal Demo</label>
  <row>
    <panel>
      <table id="master">
        <title>Master</title>
        <search>
          <query>index=_internal | stats count by sourcetype</query>
          <earliest>-60m@m</earliest>
          <latest>now</latest>
        </search>
        <!-- Set the type of of drilldown, since we will always consume the same field, use row-->
        <option name="drilldown">row</option>
      </table>
    </panel>
  </row>
  <row>
    <panel>
      <table id="slave">
        <title>slave</title>
        <search>
          <query>index=_internal 
| dedup group 
| table group</query>
          <earliest>-60m@m</earliest>
          <latest>now</latest>
        </search>
        <!-- Set the type of of drilldown, since we will always consume the same field, use row-->
        <option name="drilldown">row</option>
      </table>
    </panel>
  </row>
</dashboard>

Script - "modalviewsearchapp1.js"

require([
    'underscore',
    'backbone',
    '../app/search/components/ModalViews',
    'splunkjs/mvc',
    'splunkjs/mvc/searchmanager',
    'splunkjs/mvc/simplexml/ready!'
], function(_, Backbone, ModalView, mvc, SearchManager) {

    var master = mvc.Components.get("master");
    var tokens = mvc.Components.getInstance("submitted");
    var slave = mvc.Components.get("slave");

    var detailSearch = new SearchManager({
            id: "detailSearch",
            earliest_time: "-24h@h",
            latest_time: "now",
            preview: true,
            cache: false,
            search: "index=_internal sourcetype=$sourcetype$ | timechart count" 
    }, {tokens: true, tokenNamespace: "submitted"});  

    var detailedSearch = new SearchManager({
            id: "detailedSearch",
            earliest_time: "-24h@h",
            latest_time: "now",
            preview: true,
            cache: false,
            search: "index=_internal group=$group$ | chart count by sourcetype" 
    }, {tokens: true, tokenNamespace: "submitted"});  

    master.on("click", function(e) {
        e.preventDefault();
        if(e.field === "sourcetype") {
            var _title = e.data['click.value'];
            tokens.set('sourcetype', _title);
            var modal = new ModalView({ title: _title, search: detailSearch });
            modal.show();
        }

    });

        slave.on("click", function(e) {
        e.preventDefault();
        if(e.field === "group") {
            var _title = e.data['click.value'];
            tokens.set('group', _title);
            var modal = new ModalView({ title: _title, search: detailedSearch });
            modal.show();
        }

    });

});

Script - ModalViews

define([
    'underscore',
    'backbone',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/searchmanager',
    'splunkjs/mvc/simplexml/element/table',
    'splunkjs/mvc/chartview',
    'splunkjs/mvc/simplexml/element/chart',
    'splunkjs/ready!'

    ], function(_, Backbone, $, mvc, SearchManager, ChartElement) {

        var modalTemplate = "<div id=\"pivotModal\" class=\"modal\">" +
                       "<div class=\"modal-header\"><h3><%- title %></h3><button class=\"close\">Close</button></div>" +
                       "<div class=\"modal-body\"></div>" +
                       "<div class=\"modal-footer\"></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.childViews = [];
                console.log('Hello from the modal window: ', this.options.title);
                this.template = _.template(modalTemplate);
            },

            events: {
               'click .close': 'close',
               '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);

                $(this.el).find('.modal-body').append('<div id="modalVizualization"/>');

                $(this.el).find('.modal').css({
                    width:'90%',
                    height:'auto',
                    left: '5%',
                    'margin-left': '0',
                    'max-height':'100%'
                });

                var search = mvc.Components.get(this.options.search.id);

                var detailTable = new ChartElement({
                        id: "detailTable",
                'charting.chart': 'pie'
                        managerid: search.name,

                        el: $('#modalVizualization')

                }).render();

                this.childViews.push(detailTable);
                search.startSearch();                
            },

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

                   childView.unbind();
                   childView.remove();

               });
            }

        });

        return ModalView;

});

[niketn · Accepted solution]

@njohnson7 please consider the 10th topic of @jconger 's .Conf Presentation 10 Tips, Tricks and Hacks for Better Dashboards in Splunk, which is about Event Handler + Token + Table Cell Render + Modal + Splunk Web Framework. If you follow his code you will find the working example of opening a Chart as Modal pop-up based on click on a table cell.

Please try out and confirm!

[njohnson7]

@niketnilay - Thankyou , I did look at the material you suggested and I realized I was actually in the right direction- but for some reason it didn't work at that time. After seeing jconger's code, i tried modifying the code i posted above with ChartView, SingleView etc again and I achieved what I wanted , thank you once again.

[niketn]

Great to hear 🙂 Keep breaking those barriers!