Dashboards & Visualizations

How to expand and collapse table rows using javascript?

rijinc
Explorer

I have seen one example of expanding table row and chart is displayed . I am not much familiar with javascript code

My table currently has these values :
alt text

Want these "application used" row values to be displayed in an expanded row .

The reason is because currently in a table view in Splunk dashboard there are more than 100 rows and even after displaying 5 rows in a table due to such values of more than 500 strings scrolling becomes tedious .

Is it possible to do a table row expand of this column so that while expanding the values from application used field get displayed.

My Splunk query is :

|loadjob savedsearch=admin:applist:apptest | table Name Age Hobby ApplicationUsed Status

Any help would be very much useful is it possible to do such a view ?

0 Karma

pkarpushin
Path Finder

Hi @rijinc ,

In you simple XML dashboard use this code:

  <dashboard script="expandRow.js">
    ....
      <row>
        <panel>
          <table id="myTable">
            <search id="mySearch">
              <query>
                |loadjob savedsearch=admin:applist:apptest
              </query>
            </search>
            <fields>Name, Age, Hobby, Status</fields>
          </table>
        </panel>
      </row>

Place expandRow.js file into $SPLUNK_HOME/etc/apps/<your_app>/appserver/static dir with this code:

require([
    'splunkjs/mvc/tableview',
    'splunkjs/mvc/postprocessmanager',
    'splunkjs/mvc',
    'underscore',
    'splunkjs/mvc/simplexml/ready!'],function(
    TableView,
    PostProcessManager,
    mvc,
    _
    ){
    var EventSearchBasedRowExpansionRenderer = TableView.BaseRowExpansionRenderer.extend({
        initialize: function(args) {

            this._postProcessManager = new PostProcessManager({
                id: 'ApplicationUsed ',
                managerid: 'mySearch'
            });
            this._tableView = new TableView({
                id: 'drop_down_table',
                managerid: 'ApplicationUsed'
            });
        },
        canRender: function(rowData) {
            // always expand
            console.log("RowData: ", rowData);
            return true;
        },
        render: function($container, rowData) {
            // rowData contains information about the row that is expanded.  We can see the cells, fields, and values
            // We will find the Name cell to use its value
            var username = _(rowData.cells).find(function (cell) {
               return cell.field === 'Name';
            });
            //update the search with the Name that we are interested in
            this._postProcessManager.set({ search: 
                '| search Name="' + username.value + '" | table ApplicationUsed '
                 });
            // $container is the jquery object where we can put out content.
            // In this case we will render our table and add it to the $container
            $container.append(this._tableView.render().el);
        }
    });
    var tableElement = mvc.Components.getInstance("myTable");
    tableElement.getVisualization(function(tableView) {
        // Add custom cell renderer, the table will re-render automatically.
        tableView.addRowExpansionRenderer(new EventSearchBasedRowExpansionRenderer());
    });
});

After that you can customize CSS for you dashboard to edit #drop_down_table params for better visualization.

iamkilarunaresh
Explorer
  • @pkarpushin I have a similar use case but I need the two-level of row expansion, The first expansion is on main row and the second expansion is on the expanded row.  Is this possible? Please assist!
0 Karma

louismai
Path Finder

It works well. But I used get the value at the specific location.
this._postProcessManager.set({ search: '| search Members=' + rowData.values[1] + ' | table Group '});

So I don't use the search the cell field name.

0 Karma

rijinc
Explorer

Hi All,

Any help or inputs ?

0 Karma
Career Survey
First 500 qualified respondents will receive a $20 gift card! Tell us about your professional Splunk journey.

Can’t make it to .conf25? Join us online!

Get Updates on the Splunk Community!

Can’t Make It to Boston? Stream .conf25 and Learn with Haya Husain

Boston may be buzzing this September with Splunk University and .conf25, but you don’t have to pack a bag to ...

Splunk Lantern’s Guide to The Most Popular .conf25 Sessions

Splunk Lantern is a Splunk customer success center that provides advice from Splunk experts on valuable data ...

Unlock What’s Next: The Splunk Cloud Platform at .conf25

In just a few days, Boston will be buzzing as the Splunk team and thousands of community members come together ...