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

[Federico92]

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

[kamlesh_vaghela · Accepted solution]

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

 

Thanks
KV
▄︻̷̿┻̿═━一

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

[crteixeira]

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 

[kamlesh_vaghela]

@crteixeira 

Can you please share your sample code ?

[crteixeira]

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

});

[crteixeira]

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

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

[crteixeira]

ModalView

Checkbox

[kamlesh_vaghela]

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

[crteixeira]

We arrived at the same solution

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

[Federico92]

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

[Federico92]

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