Dashboards & Visualizations

Modal Drill down

Federico92
Path Finder

Hi everyone

I have this dashboard with this simple xml code

Federico92_0-1623848541637.png


<dashboard script="app3.js" theme="dark">
<label>Modal Test 2</label>
<row>
<panel>
<chart id="master">
<search>
<query>index=_internal sourcetype!="splunkd" | timechart span=6h count by sourcetype</query>
<earliest>-24h@h</earliest>
<latest>now</latest>
<sampleRatio>1</sampleRatio>
</search>
<option name="charting.chart">column</option>
<option name="charting.drilldown">all</option>
<option name="refresh.display">progressbar</option>
<drilldown>
<condition>
</condition>
</drilldown>
</chart>
</panel>
</row>
</dashboard>

When I click on chart, it shows a modal popup like this one:

Federico92_1-1623849151702.png


I'm triying to show a second modal by drilldown this modal. The following is the splunkjs script I wrote

app3.js

Federico92_2-1623849242942.png

ModalView3.js

Federico92_6-1623849524272.png

Federico92_7-1623849553337.png

ModalView4.js

Federico92_8-1623849590874.pngFederico92_9-1623849607359.png

But it doesn't work! Any suggestions?

Labels (3)
0 Karma
1 Solution

kamlesh_vaghela
SplunkTrust
SplunkTrust

@Federico92 

Can you please try this?

app3.js

 

require([
    'underscore',
    '../app/search/ModalView3',
    'splunkjs/mvc',
    'splunkjs/mvc/searchmanager',
    'splunkjs/mvc/simplexml/ready!'

], function(_, ModalView3, mvc, SearchManager) {

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

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

    master.on("click", function(e) {
        e.preventDefault();
        console.log("E", e)

        if (e.data['click.name'] === "_time") {
            var _title = e.data['click.name2'];
            tokens.set('sourcetype', _title);
            var modal3 = new ModalView3({
                title: _title,
                search: detailSearch
            });
            modal3.show();
        }
    });
});

 

 

ModalView3.js

 

define([
    'underscore',
    'backbone',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/searchmanager',
    'splunkjs/mvc/tableview',
    'app/search/ModalView4'

], function(_, Backbone, $, mvc, SearchManager, TableView, ModalView4) {

    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 ModalView3 = 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: '40%',
                height: '50%',
                position: 'absolute',
                top: '50%',
                left: '20%',
                transform: 'translateX(-20%) translateY(-50%)',
                'margin-left': '0',
                'max-height': '100%',
            });

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

            var detailTable = new TableView({
                id: "detailTable",
                managerid: search.name,
                pageSize: '10',
                data: "events",
                drilldown: "row",
                el: $('#modalVizualization')
            }).render();

            var tokens1 = mvc.Components.getInstance("submitted")
            console.log(detailTable)
            var drilldownSearch = new SearchManager({
                preview: false,
                cache: false,
                search: '|makeresults |eval string="This is drilldown for time; $time$ "'
            }, { tokens: true, tokenNamespace: "submitted" });

            detailTable.on("click", function(e) {
                e.preventDefault();

                if (e.data['click.name'] === "_time") {
                    var _title = "Drilldown Example";
                    console.log(e.data['click.value'])
                    tokens1.set('time', e.data['click.value']);
                    console.log("A")
                    var modal4 = new ModalView4({ title: _title, search: drilldownSearch });
                    console.log("B")
                    modal4.show();
                };
            })

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

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

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

            });
        }

    });

    return ModalView3;

});

 

 

ModalView4.js

 

define([
    'underscore',
    'backbone',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/tableview'

], function(_, Backbone, $, mvc, TableView) {

    var modalTemplate2 = "<div id=\"pivotModal2\" 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 ModalView4 = 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(modalTemplate2);
        },

        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="modalVizualization2"/>');

            $(this.el).find('.modal').css({
                width: '40%',
                height: '50%',
                position: 'absolute',
                top: '50%',
                left: '60%',
                transform: 'translateX(-50%) translateY(-50%)',
                'margin-left': '0',
                'max-height': '100%',
            });

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

            var detailTable2 = new TableView({
                id: "detailTable2",
                managerid: search1.name,
                pageSize: '10',
                data: "events",
                drilldown: "none",
                el: $('#modalVizualization2')
            }).render();

            this.childViews.push(detailTable2);
            search1.startSearch();
        },

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

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

            });
        }

    });

    return ModalView4;

});

 

 

 

Screenshot 2021-06-22 at 8.47.54 PM.png

Thanks
KV
▄︻̷̿┻̿═━一

If any of my reply helps you to solve the problem Or gain knowledge, an upvote would be appreciated.

View solution in original post

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@Federico92 

Just sharing more enhanced code Model View.

https://github.com/KamleshVaghela/splunk_dashboard_model_view_examples

It has ModalViewComponent.js, which provide single code for all possible Splunk UI viz.

So with this single component  you can use it for multiple views in Model, like table, chart or any custom visualisation. It will reduce multiple ModelView js  file to one.  

I thank to you and your previous questions, on ModelView and possible requirements of ModelView in any app, that encourages me to design such solution. So Thank you very much 🙂 

I hope this will help you in your project for future requirements .

 

Thanks
KV
▄︻̷̿┻̿═━一  

If any of my reply helps you to solve the problem Or gain knowledge, an upvote would be appreciated.

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@Federico92 

Can you please try this?

app3.js

 

require([
    'underscore',
    '../app/search/ModalView3',
    'splunkjs/mvc',
    'splunkjs/mvc/searchmanager',
    'splunkjs/mvc/simplexml/ready!'

], function(_, ModalView3, mvc, SearchManager) {

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

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

    master.on("click", function(e) {
        e.preventDefault();
        console.log("E", e)

        if (e.data['click.name'] === "_time") {
            var _title = e.data['click.name2'];
            tokens.set('sourcetype', _title);
            var modal3 = new ModalView3({
                title: _title,
                search: detailSearch
            });
            modal3.show();
        }
    });
});

 

 

ModalView3.js

 

define([
    'underscore',
    'backbone',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/searchmanager',
    'splunkjs/mvc/tableview',
    'app/search/ModalView4'

], function(_, Backbone, $, mvc, SearchManager, TableView, ModalView4) {

    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 ModalView3 = 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: '40%',
                height: '50%',
                position: 'absolute',
                top: '50%',
                left: '20%',
                transform: 'translateX(-20%) translateY(-50%)',
                'margin-left': '0',
                'max-height': '100%',
            });

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

            var detailTable = new TableView({
                id: "detailTable",
                managerid: search.name,
                pageSize: '10',
                data: "events",
                drilldown: "row",
                el: $('#modalVizualization')
            }).render();

            var tokens1 = mvc.Components.getInstance("submitted")
            console.log(detailTable)
            var drilldownSearch = new SearchManager({
                preview: false,
                cache: false,
                search: '|makeresults |eval string="This is drilldown for time; $time$ "'
            }, { tokens: true, tokenNamespace: "submitted" });

            detailTable.on("click", function(e) {
                e.preventDefault();

                if (e.data['click.name'] === "_time") {
                    var _title = "Drilldown Example";
                    console.log(e.data['click.value'])
                    tokens1.set('time', e.data['click.value']);
                    console.log("A")
                    var modal4 = new ModalView4({ title: _title, search: drilldownSearch });
                    console.log("B")
                    modal4.show();
                };
            })

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

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

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

            });
        }

    });

    return ModalView3;

});

 

 

ModalView4.js

 

define([
    'underscore',
    'backbone',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/tableview'

], function(_, Backbone, $, mvc, TableView) {

    var modalTemplate2 = "<div id=\"pivotModal2\" 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 ModalView4 = 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(modalTemplate2);
        },

        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="modalVizualization2"/>');

            $(this.el).find('.modal').css({
                width: '40%',
                height: '50%',
                position: 'absolute',
                top: '50%',
                left: '60%',
                transform: 'translateX(-50%) translateY(-50%)',
                'margin-left': '0',
                'max-height': '100%',
            });

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

            var detailTable2 = new TableView({
                id: "detailTable2",
                managerid: search1.name,
                pageSize: '10',
                data: "events",
                drilldown: "none",
                el: $('#modalVizualization2')
            }).render();

            this.childViews.push(detailTable2);
            search1.startSearch();
        },

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

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

            });
        }

    });

    return ModalView4;

});

 

 

 

Screenshot 2021-06-22 at 8.47.54 PM.png

Thanks
KV
▄︻̷̿┻̿═━一

If any of my reply helps you to solve the problem Or gain knowledge, an upvote would be appreciated.

View solution in original post

0 Karma

Federico92
Path Finder

Thanks a lot KV, it works!

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

Glad to help you.

 

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@Federico92 

I think drill down logic you should code in model view js. Exact before the child view.push() method.

KV

0 Karma

Federico92
Path Finder

Thanks for the answer KV, but unfortunately it seems not to work! 😔

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@Federico92 

Can you please share your sample code instead of screens? So I can replicate it.

 

0 Karma

Federico92
Path Finder
Dashboard

<dashboard script="app3.js" theme="dark">
<label>Modal Test 2</label>
<row>
<panel>
<chart id="master">
<search>
<query>index=_internal sourcetype!="splunkd" | timechart span=6h count by sourcetype</query>
<earliest>-24h@h</earliest>
<latest>now</latest>
<sampleRatio>1</sampleRatio>
</search>
<option name="charting.chart">column</option>
<option name="charting.drilldown">all</option>
<option name="refresh.display">progressbar</option>
<drilldown>
<condition>
</condition>
</drilldown>
</chart>
</panel>
</row>
</dashboard>

app3.js


require([
    'underscore',
    '../app/modal_playground/components/ModalView3',
    'splunkjs/mvc',
    'splunkjs/mvc/searchmanager',
    'splunkjs/mvc/simplexml/ready!'
    
], function(_, ModalView3,  mvc, SearchManager) {

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

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

    master.on("click", function(e) {
        e.preventDefault();
        console.log("E", e)
        if (e.data['click.name'] === "_time") {
            var _title = e.data['click.name2'];
            tokens.set('sourcetype', _title);
            var modal3 = new ModalView3({ title: _title, search: detailSearch });
            modal3.show();
        }
    });
});

ModalView3.js

define
([
    'underscore',
    'backbone',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/searchmanager',
    '../app/modal_playground/components/ModalView4,
    'splunkjs/mvc/simplexml/element/table',
    'splunkjs/mvc/simplexml/element/chart',

    ], function master(_, Backbone, $, mvc, SearchManager, TableElement, ModalView4) {

        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 ModalView3 = 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:'40%',
                        height:'50%',
                        position: 'absolute',
                        top: '50%',
                        left: '20%',
                        transform: 'translateX(-20%) translateY(-50%)',
                        'margin-left': '0',
                        'max-height':'100%',
                });
                
                var search = mvc.Components.get(this.options.search.id);
                
                var detailTable = new TableElement({
                        id: "detailTable",
                        managerid: search.name,
                        pageSize: '10',
                        data: "events",
                        drilldown: "row",
                        el: $('#modalVizualization')
                }).render();

                var detailTable = mvc.Components.get('pivotModal');
                var tokens1 = mvc.Components.getInstance("submitted")

                var drilldownSearch = SearchManager({

                id="drilldownSearch",
                preview = false,
                cache = false,
                search: "|makeresults |eval string=\"This is drilldown for time; \".$_time$"
                },{ tokens1: true, tokenNamespace: "submitted"});

                detailTable.on("click:row", function(e) {
                e.preventDefault();
                if (e.data['click.name'] === "_time") {
                    var _title = "Drilldown Example";
                    tokens1.set('_time', 'click.value');
                    var modal4 = new ModalView4({ title: _title, search: drilldownSearch });
                    modal4.show();
                    };
                })

                this.childViews.push(detailTable);
                search.startSearch();
            },
    
            close: function() {
               this.unbind();
               this.remove();
               _.each(this.childViews, function(childView) {
                   
                   childView.unbind();
                   childView.remove();
                   
               });
            }
    
        });
        
        return ModalView3;

    });
0 Karma

Federico92
Path Finder

ModalView4.js

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

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

        var modalTemplate2 = "<div id=\"pivotModal2\" 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 ModalView4 = 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(modalTemplate2);
            },
            
            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="modalVizualization2"/>');
     
                $(this.el).find('.modal').css({
                        width:'40%',
                        height:'50%',
                        position: 'absolute',
                        top: '50%',
                        left: '60%',
                        transform: 'translateX(-50%) translateY(-50%)',
                        'margin-left': '0',
                        'max-height':'100%',
                });
                
                var search1 = mvc.Components.get(this.options.search.id);
                
                var detailTable2 = new TableElement({
                        id: "detailTable2",
                        managerid: search1.name,
                        pageSize: '10',
                        data: "events",
                        drilldown: "none",
                        el: $('#modalVizualization2')
                }).render();
                
                this.childViews.push(detailTable2);
                search1.startSearch();                
            },
    
            close: function() {
               this.unbind();
               this.remove();
               _.each(this.childViews, function(childView) {
                   
                   childView.unbind();
                   childView.remove();
                   
               });
            }
    
        });
        
        return ModalView4;

});
0 Karma

Federico92
Path Finder

When I try to do this, it disable the first modal too

Federico92_0-1623911385414.png

Federico92_1-1623911423942.png

 

 

0 Karma

Federico92
Path Finder

In ModalView3.js?

0 Karma
.conf21 Now Fully Virtual!
Register for FREE Today!

We've made .conf21 totally virtual and totally FREE! Our completely online experience will run from 10/19 through 10/20 with some additional events, too!