Dashboards & Visualizations

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

Federico92
Path Finder

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

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
Labels (3)
Tags (1)
0 Karma
1 Solution

kamlesh_vaghela
SplunkTrust
SplunkTrust

@Federico92 

Try again by adding blank drill down in table.

 

      <drilldown>
        <condition></condition>
      </drilldown>

 

 

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>
      <!-- Set the type of of drilldown, since we will always consume the same field, use row-->
      <option name="drilldown">row</option>
      <drilldown>
        <condition></condition>
      </drilldown>
    </table>

 

 

 

Screenshot 2021-06-03 at 4.06.13 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

Tags (2)
0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@Federico92 

Try again by adding blank drill down in table.

 

      <drilldown>
        <condition></condition>
      </drilldown>

 

 

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>
      <!-- Set the type of of drilldown, since we will always consume the same field, use row-->
      <option name="drilldown">row</option>
      <drilldown>
        <condition></condition>
      </drilldown>
    </table>

 

 

 

Screenshot 2021-06-03 at 4.06.13 PM.png

Thanks
KV
▄︻̷̿┻̿═━一

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

Tags (2)
0 Karma

crteixeira
Explorer

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 

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@crteixeira 

Can you please share your sample code ?

0 Karma

crteixeira
Explorer
@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

<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>
      <!-- Set the type of of drilldown, since we will always consume the same field, use row-->
      <option name="drilldown">row</option>
      <drilldown>
        <condition></condition>
      </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;

});
0 Karma

crteixeira
Explorer
*********** ----------- ************
Exemplo com checkbox


text.xml

<dashboard script="my.js" stylesheet="my.css">
  <label>Teste Checkbox</label>
  <row>
    <panel>
      <table id="myTable">
        <title>My Table</title>
        <search>
          <query>index=_internal | stats count by sourcetype | eval checkbox=sourcetype</query>
          <earliest>-15m</earliest>
          <latest>now</latest>
        </search>
        <option name="count">10</option>
        <option name="drilldown">row</option>
        <option name="refresh.display">progressbar</option>
        <drilldown>
          <condition field="*"></condition>
        </drilldown>
      </table>
    </panel>
  </row>
  <row>
    <panel>
      <html>
      <div>
        <input type="button" id="mybutton" value="My Button"/>
      </div>
    </html>
    </panel>
  </row>
  <row>
    <panel>
      <table>
        <title>My Selected Value</title>
        <search>
          <query>| makeresults | eval myvalue="$mytoken$" | makemv delim="," myvalue | stats count by myvalue | table myvalue</query>
          <earliest>-15m</earliest>
          <latest>now</latest>
        </search>
        <option name="count">10</option>
        <option name="drilldown">none</option>
      </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);
0 Karma

crteixeira
Explorer

ModalView

demo.png

Checkbox

test.png

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

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

 

Screenshot 2022-07-27 at 1.56.27 PM.png

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.

Tags (1)

crteixeira
Explorer

We arrived at the same solution

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

0 Karma

Federico92
Path Finder

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

0 Karma

Federico92
Path Finder

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

0 Karma
Get Updates on the Splunk Community!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...