topic Re: Modal window in splunk in Dashboards & Visualizations

Help with Modal window in splunk: How to find error in my search?

Federico92 — Mon, 25 Jul 2022 15:56:53 GMT

Hi everyone!

I found these JavaScript to visualize drill down search in a modal window

App.js

require([

'underscore',

'backbone',

'../app/Splunk-Modal-Window/components/ModalView',

'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 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();

if(e.field === "sourcetype") {

var _title = e.data['click.value'];

tokens.set('sourcetype', _title);

var modal = new ModalView({ title: _title, search: detailSearch });

modal.show();

}

});

});

ModalView.js

define([

'underscore',

'backbone',

'jquery',

'splunkjs/mvc',

'splunkjs/mvc/searchmanager',

'splunkjs/mvc/simplexml/element/table'

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

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 TableElement({

id: "detailTable",

managerid: search.name,

pageSize: "5",

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;

});

Splunk dashboard xml

<dashboard script="app.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>

<option name="drilldown">row</option>
</table>
</panel>
</row>
</dashboard>

I'm a beginner in the javascript world and I'm not able to find the error in this code. Does anyone have a suggestion? Thanks

Re: Modal window in splunk

kamlesh_vaghela — Thu, 03 Jun 2021 10:36:27 GMT

@Federico92

Try again by adding blank drill down in table.

Sample Code:

<table id="master"> <title>Master</title> <search> <query>index=_internal | stats count by sourcetype</query> <earliest>-60m@m</earliest> <latest>now</latest> </search>  <option name="drilldown">row</option> <drilldown> <condition></condition> </drilldown> </table>

Thanks
KV
▄︻̷̿┻̿═━一

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

Re: Modal window in splunk

Federico92 — Thu, 03 Jun 2021 10:42:29 GMT

It doesn't work for me with your correction. Where have you put your scripts?

Re: Modal window in splunk

Federico92 — Thu, 03 Jun 2021 10:57:20 GMT

I've found the issue and it works. Great! thanks a lot

Re: Modal window in splunk

crteixeira — Mon, 25 Jul 2022 13:26:41 GMT

Hello how are you?

I'm trying to apply the same example

I created the app.js and ModalView.js files and ran the _bump to reload the file settings

Redirection doesn't happen, but popup doesn't show either

Would you help me?

@kamlesh_vaghela

Re: Modal window in splunk

kamlesh_vaghela — Mon, 25 Jul 2022 15:36:41 GMT

@crteixeira

Can you please share your sample code ?

Re: Modal window in splunk

crteixeira — Mon, 25 Jul 2022 16:40:24 GMT

@kamlesh_vaghela Thanks for getting back

The first problem, I managed to solve the app path was incorrect

I have another problem I don't know if you can help

I have two dashboards that work separately

1 - Checkbox function with the result in a new table dashboard text.xml

2 - I need to run the buttom search in the popup of the second example dashboard demo.xml

Sorry for the bad writing

Code:

demo.xml

<label>Modal Demo</label>

<row>

<panel>

<title>Master</title>

<query>index=_internal | stats count by sourcetype</query>

</search>

</drilldown>

</table>

</panel>

</row>

</dashboard>

app.js

require([

'underscore',

'backbone',

'../app/meuapp/components/ModalView',

'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 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();

if(e.field === "sourcetype") {

var _title = e.data['click.value'];

tokens.set('sourcetype', _title);

var modal = new ModalView({ title: _title, search: detailSearch });

modal.show();

}

});

ModalView.js

define([

'underscore',

'backbone',

'jquery',

'splunkjs/mvc',

'splunkjs/mvc/searchmanager',

'splunkjs/mvc/simplexml/element/table'

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

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 TableElement({

id: "detailTable",

managerid: search.name,

pageSize: "5",

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;

});

Re: Modal window in splunk

crteixeira — Mon, 25 Jul 2022 16:41:10 GMT

*********** ----------- ************

Exemplo com checkbox

text.xml

<label>Teste Checkbox</label>

<row>

<panel>

<title>My Table</title>

<query>index=_internal | stats count by sourcetype | eval checkbox=sourcetype</query>

</search>

<option name="refresh.display">progressbar</option>

</drilldown>

</table>

</panel>

</row>

<row>

<panel>

<html>

<div>

</div>

</html>

</panel>

</row>

<row>

<panel>

<table>

<title>My Selected Value</title>

</search>

</table>

</panel>

</row>

</dashboard>

my.js

require([

'underscore',

'jquery',

'splunkjs/mvc',

'splunkjs/mvc/tableview',

'splunkjs/mvc/simplexml/ready!'

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

// Access the "default" token model

var tokens = mvc.Components.get("default");

var selected_values_array = [];

var submittedTokens = mvc.Components.get('submitted');

var CustomRangeRenderer = TableView.BaseCellRenderer.extend({

canRender: function(cell) {

return _(['checkbox']).contains(cell.field);

render: function($td, cell) {

var a = $('<div>').attr({"id":"chk-sourcetype"+cell.value,"value":cell.value}).addClass('checkbox').click(function() {

// console.log("checked",$(this).attr('class'));

// console.log("checked",$(this).attr('value'));

if($(this).attr('class')==="checkbox")

{

selected_values_array.push($(this).attr('value'));

$(this).removeClass();

$(this).addClass("checkbox checked");

}

else {

$(this).removeClass();

$(this).addClass("checkbox");

var i = selected_values_array.indexOf($(this).attr('value'));

if(i != -1) {

selected_values_array.splice(i, 1);

}

// Change the value of a token $mytoken$

}

console.log(selected_values_array);

}).appendTo($td);

}

});

//List of table IDs

var tableIDs = ["myTable"];

for (i=0;i<tableIDs.length;i++) {

var sh = mvc.Components.get(tableIDs[i]);

if(typeof(sh)!="undefined") {

sh.getVisualization(function(tableView) {

// Add custom cell renderer and force re-render

tableView.table.addCellRenderer(new CustomRangeRenderer());

tableView.table.render();

});

}

$(document).ready(function () {

$("#mybutton").on("click", function (e) {

e.preventDefault();

console.log("in");

tokens.set("mytoken", selected_values_array.join());

submittedTokens.set(tokens.toJSON());

});

my.css

/* The standalone checkbox square*/

.checkbox {

width:20px;

height:20px;

border: 1px solid #000;

display: inline-block;

}

/* This is what simulates a checkmark icon */

.checkbox.checked:after {

content: '';

display: block;

width: 4px;

height: 7px;

/* "Center" the checkmark */

position:relative;

top:4px;

left:7px;

border: solid #000;

border-width: 0 2px 2px 0;

transform: rotate(45deg);

Re: Modal window in splunk

crteixeira — Mon, 25 Jul 2022 16:42:13 GMT

ModalView

Checkbox

Re: Modal window in splunk

kamlesh_vaghela — Wed, 27 Jul 2022 08:27:24 GMT

@crteixeira

Can you please try this?

my.js

require([ 'underscore', 'jquery', 'splunkjs/mvc', 'splunkjs/mvc/tableview', 'splunkjs/mvc/searchmanager', '../app/search/ModalView', 'splunkjs/mvc/simplexml/ready!' ], function(_, $, mvc, TableView, SearchManager, ModalView) { // Access the "default" token model var tokens = mvc.Components.get("default"); var selected_values_array = []; var submittedTokens = mvc.Components.get('submitted'); var CustomRangeRenderer = TableView.BaseCellRenderer.extend({ canRender: function(cell) { return _(['checkbox']).contains(cell.field); }, render: function($td, cell) { var a = $('<div>').attr({"id":"chk-sourcetype"+cell.value,"value":cell.value}).addClass('checkbox').click(function() { // console.log("checked",$(this).attr('class')); // console.log("checked",$(this).attr('value')); if($(this).attr('class')==="checkbox") { selected_values_array.push($(this).attr('value')); $(this).removeClass(); $(this).addClass("checkbox checked"); } else { $(this).removeClass(); $(this).addClass("checkbox"); var i = selected_values_array.indexOf($(this).attr('value')); if(i != -1) { selected_values_array.splice(i, 1); } // Change the value of a token $mytoken$ } console.log(selected_values_array); }).appendTo($td); } }); //List of table IDs var tableIDs = ["myTable"]; for (i=0;i<tableIDs.length;i++) { var sh = mvc.Components.get(tableIDs[i]); if(typeof(sh)!="undefined") { sh.getVisualization(function(tableView) { // Add custom cell renderer and force re-render tableView.table.addCellRenderer(new CustomRangeRenderer()); tableView.table.render(); }); } } var detailSearch = new SearchManager({ id: "detailSearch", earliest_time: "-24h@h", latest_time: "now", preview: true, cache: false, search: '| makeresults | eval myvalue="$mytoken$" | makemv delim="," myvalue | stats count by myvalue | table myvalue' }, {tokens: true, tokenNamespace: "submitted"}); $(document).ready(function () { $("#mybutton").on("click", function (e) { e.preventDefault(); console.log("in"); tokens.set("mytoken", selected_values_array.join()); submittedTokens.set(tokens.toJSON()); var modal = new ModalView({ title: "Kamlesh", search: detailSearch }); modal.show(); }); }); });

Screenshot:

I hope this will help you.

Thanks
KV

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

Re: Modal window in splunk

crteixeira — Tue, 09 Aug 2022 18:52:37 GMT

We arrived at the same solution

Thanks for the super help and sorry for the delay @kamlesh_vaghela