Dashboards & Visualizations

Visualizations like Chart , Single View in Modal Window

njohnson7
Path Finder

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;

});
0 Karma
1 Solution

niketn
Legend

@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!

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

0 Karma

niketn
Legend

@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!

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

njohnson7
Path Finder

@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
Legend

Great to hear 🙂 Keep breaking those barriers!

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma
Get Updates on the Splunk Community!

What's new in Splunk Cloud Platform 9.1.2312?

Hi Splunky people! We are excited to share the newest updates in Splunk Cloud Platform 9.1.2312! Analysts can ...

What’s New in Splunk Security Essentials 3.8.0?

Splunk Security Essentials (SSE) is an app that can amplify the power of your existing Splunk Cloud Platform, ...

Let’s Get You Certified – Vegas-Style at .conf24

Are you ready to level up your Splunk game? Then, let’s get you certified live at .conf24 – our annual user ...