topic Re: Modal Drill down in Dashboards & Visualizations

Modal Drill down

Federico92 — Wed, 16 Jun 2021 13:22:37 GMT

Hi everyone

I have this dashboard with this simple xml code

<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:

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

app3.js

ModalView3.js

ModalView4.js

But it doesn't work! Any suggestions?

Re: Modal Drill down

kamlesh_vaghela — Wed, 16 Jun 2021 18:38:00 GMT

@Federico92

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

Re: Modal Drill down

Federico92 — Thu, 17 Jun 2021 06:15:23 GMT

In ModalView3.js?

Re: Modal Drill down

Federico92 — Thu, 17 Jun 2021 06:31:58 GMT

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

Re: Modal Drill down

Federico92 — Mon, 21 Jun 2021 16:30:56 GMT

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

Re: Modal Drill down

kamlesh_vaghela — Mon, 21 Jun 2021 16:37:38 GMT

@Federico92

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

Re: Modal Drill down

Federico92 — Tue, 22 Jun 2021 13:31:38 GMT

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;

});

Re: Modal Drill down

Federico92 — Tue, 22 Jun 2021 13:31:56 GMT

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;

});

Re: Modal Drill down

kamlesh_vaghela — Tue, 22 Jun 2021 15:18:07 GMT

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

Thanks
KV
▄︻̷̿┻̿═━一

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

Re: Modal Drill down

Federico92 — Tue, 22 Jun 2021 15:32:45 GMT

Thanks a lot KV, it works!

Re: Modal Drill down

kamlesh_vaghela — Tue, 22 Jun 2021 16:04:06 GMT

Glad to help you.

Re: Modal Drill down

kamlesh_vaghela — Sat, 24 Jul 2021 05:53:58 GMT

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