Dashboards & Visualizations

How can I achieve a two level row expansions for a table view?

deepikagooty
Explorer

Hello everyone,

I am currently working with the "row table expansion.js" from the dashboard examples. However, I am facing an issue where I can only achieve a single-level row expansion. My requirement is to have a two-level row expansion instead.

Could you please assist me with achieving the desired two-level row expansion functionality? Thank you in advance.

deepikagooty_0-1684432822149.png

 

Labels (2)
0 Karma

deepikagooty
Explorer

@kamlesh_vaghela Can you please suggest a solution for this

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@deepikagooty 

Can you please try this Sample JS Code?

 

require([
    'splunkjs/mvc/tableview',
    'splunkjs/mvc/chartview',
    'splunkjs/mvc/searchmanager',
    'splunkjs/mvc',
    'underscore',
    'splunkjs/mvc/simplexml/ready!'
], function(
    TableView,
    ChartView,
    SearchManager,
    mvc,
    _
) {
    console.log("HIe");
    var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
        canRender: function(cell) {
            return cell.field;
        },
        render: function($container, rowData) {
            console.log(rowData.value);
            $container.html(rowData.value)
        }
    });

    var EventSearchBasedRowExpansionRendererSecondLevel = TableView.BaseRowExpansionRenderer.extend({
        initialize: function(args) {
            this._searchManager = new SearchManager({
                preview: false
            }, { tokens: true, tokenNamespace: "submitted" });
            
            this._TableView = new TableView({
                managerid: this._searchManager.name,
                drilldown: 'cell'
            });
        },

        canRender: function(rowData) {
            return true;
        },

        render: function($container, rowData) {
            var processCell = _(rowData.cells).find(function(cell) {
                return cell.field === 'a';
            });

            value = processCell.value

            // var tokens = mvc.Components.get("default")
            this._searchManager.set({ search: '|makeresults count=100 | eval b="B", value="'+value+'",c=2 | accum c '});

            $container.append(this._TableView.render().el);
        }
    });

    var EventSearchBasedRowExpansionRenderer = TableView.BaseRowExpansionRenderer.extend({
        initialize: function(args) {
            this._searchManager = new SearchManager({
                preview: false
            }, { tokens: true, tokenNamespace: "submitted" });
            
            this._TableView = new TableView({
                managerid: this._searchManager.name,
                drilldown: 'cell'
            });

            this._TableView.addRowExpansionRenderer(new EventSearchBasedRowExpansionRendererSecondLevel());

        },

        canRender: function(rowData) {
            return true;
        },

        render: function($container, rowData) {
            var processCell = _(rowData.cells).find(function(cell) {
                return cell.field === 'Test Case';
            });

            value = processCell.value
            // var tokens = mvc.Components.get("default")
            // var id = tokens.get("splunk_id")
            this._searchManager.set({ search: '|makeresults count=100 | eval a="A", value="'+value+'",c=1 | accum c '});

            $container.append(this._TableView.render().el);
        }
    });

    var tableElement = mvc.Components.getInstance("expand_with_events");
    tableElement.getVisualization(function(tableView) {
        // Add custom cell renderer, the table will re-render automatically.
        tableView.table.addCellRenderer(new CustomRangeRenderer());
        tableView.render();
        tableView.addRowExpansionRenderer(new EventSearchBasedRowExpansionRenderer());
    });
});

 

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.

0 Karma

deepikagooty
Explorer

Hi,

Thanks for the reply. I tried the below mentioned solution. I am able to see the two level row expansion. However, it only works for the first row and that too only once and it does not roll up. For the rest of the rows it only expands to one level.

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@deepikagooty 

Below solution works for me. Can you please compare it with your code?

XML

<dashboard script="expand_with_events.js" theme="dark" hideFilters="True">
  <label>expand_with_events</label>
  <row>
    <panel>
      <table id="table1">
        <search>
          <query>| makeresults count=10 | eval count=1 | accum count | eval SID = count</query>
          <earliest>-1w@w1</earliest>
          <latest>@w1</latest>
        </search>
        <option name="drilldown">row</option>
        <option name="refresh.display">progressbar</option>
        <drilldown>
          <condition></condition>
        </drilldown>
      </table>
    </panel>
  </row>
</dashboard>

 

JS

require([
    'splunkjs/mvc/tableview',
    'splunkjs/mvc/chartview',
    'splunkjs/mvc/searchmanager',
    'splunkjs/mvc',
    'underscore',
    'splunkjs/mvc/simplexml/ready!'
], function (
    TableView,
    ChartView,
    SearchManager,
    mvc,
    _
) {
    console.log("HIe");
    
    var EventSearchBasedRowExpansionRenderer = TableView.BaseRowExpansionRenderer.extend({
        initialize: function (args) {
            this._searchManager = new SearchManager({
                preview: false
            }, { tokens: true, tokenNamespace: "submitted" });

            this._TableView = new TableView({
                managerid: this._searchManager.name,
                drilldown: 'cell'
            });
        },

        canRender: function (rowData) {
            return true;
        },

        render: function ($container, rowData) {
            var processCell = _(rowData.cells).find(function (cell) {
                return cell.field === 'SID';
            });

            value = processCell.value
            
            this._searchManager.set({ search: '|makeresults count=100 | eval a="A", value="' + value + '",c=1 | accum c ' });

            $container.append(this._TableView.render().el);
        }
    });

    var tableElement = mvc.Components.getInstance("table1");
    tableElement.getVisualization(function (tableView) {
        
        tableView.addRowExpansionRenderer(new EventSearchBasedRowExpansionRenderer());
    });
});

 

Please check screenshot. 🙂 

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

 

0 Karma

deepikagooty
Explorer

Hi @kamlesh_vaghela ,

 I tried the recent solution and it seems to be doing the one level expansion whereas I have the requirement to implement two level expansion. I have tried your previous solution on the same thread and got the two level expansion working. But the problem is, it only works for the first row and that too only once and it does not roll up. For the rest of the rows it only expands to one level.

 

 

 

0 Karma
Get Updates on the Splunk Community!

Registration for Splunk University is Now Open!

Are you ready for an adventure in learning?   Brace yourselves because Splunk University is back, and it's ...

Splunkbase | Splunk Dashboard Examples App for SimpleXML End of Life

The Splunk Dashboard Examples App for SimpleXML will reach end of support on Dec 19, 2024, after which no new ...

Understanding Generative AI Techniques and Their Application in Cybersecurity

Watch On-Demand Artificial intelligence is the talk of the town nowadays, with industries of all kinds ...