Row Click Custom Simpletable

[hvandenb]

I'm building an collapsible table using bootstrap or jquery ui. Basically, when a user clicks on a row in a simpleresultstable it will use an accordion to then show additional details of an event. I tried implementing this with bootstrap, but there seems to be a conflict with the jquery libraries.

I then switched to using jquery directly, but it only partly works. Basically, it tries to show the accordion. Again it looks like some conflict with simpleresultstable. Has anyone ran into this before or has a work example.

My example, is based on http://jsfiddle.net/Xqk3m/ and http://stackoverflow.com/questions/9026867/jquery-accordion-effect-on-a-table

When I copy the code that is rendered in Splunk and past that in jfiddle it works.

Here is what I put in the application.js

$('tbody tr').each(function() {
        posReference = $(this).find("td.pos").text();
        $(this).addClass("accordion");
        detail = $(this).find('td[field="detail"]').html();
        $(this).append('<tr><td colspan="6" class="hiddenRow"><div class="accordian-body collapse" id="hidden' + posReference + '"><p>' + detail + '</p></div></td></tr>');
        $(this).show();
        $(this).nextAll("tr").hide();
        $(this).click(function(){
          $(this).nextAll("tr").fadeToggle(1000);
        }).eq(0).trigger('click');
});

[sideview]

I'm afraid that it is still a long road between this code sample and a working version that will modify SimpleResultsTable module's behavior.

Your code assumes that the table in question is a simple static table rendered right in the page's HTML. The SimpleResultsTable on the other hand is pretty dynamic, rendering and re-rendering itself at runtime. To hook into its behavior you have to patch the SimpleResultsTable class and learn how its internals work. This can certainly be done but it requires spending a fair bit of time learning how the Splunk UI framework works, how SimpleResultsTable's internals work, and how to patch Splunk modules safely.

The shortest path I think, and by quite a large margin, is to lean on Sideview Utils. In particular the Table module and its "Table Embedding" feature can dramatically shorten the path to your end goal here. Here's a working example. This example below creates an accordion table and I've made it deliberately simple and self-contained.

Make sure to read the first few intro pages in the Sideview Utils app, and also make sure to read the docs pages for the Table module and its embedding feature. After reading those pages, how to build off this simple example below towards a more complex accordion table should be fairly clear.

The advanced XML:

<module name="Search" autoRun="True">
  <param name="search"><![CDATA[
    index=_internal source=*metrics.log group="per_sourcetype_thruput" | head 1000 | stats max(eps) sum(kb) by series | rename series as sourcetype
  ]]></param>

  <module name="Pager">

    <module name="Table">
      <param name="hiddenFields">max(eps) sum(kb)</param>

      <module name="HTML" group="row.fields.sourcetype">
        <param name="html"><![CDATA[
          <a href="#" onclick="toggleAccordion(this);return false;">$row.fields.sourcetype$</a>
          <div class="contents" style="display:none;">
            <table>
              <tr>
                <td style="border-width:0px;">Max EPS = $row.fields.max(eps)$</td>
                <td style="border-width:0px;">Sum(KB) = $row.fields.sum(kb)$</td>
              </tr>
            </table>
          </div>
        ]]></param>
      </module>
    </module>
  </module>
</module>

*the Javascript: * (put this in application.js)

function toggleAccordion(link){
    var contents=$('.contents',$(link).parent());
    if (contents.is(':visible')) {
        contents.hide()
    }
    else {
        contents.show();
    }
}

Sideview Utils docs are contained within the app itself so download it today and check it out. Note that you'll want to upgrade to latest (2.6.4) if you have an older Sideview Utils. http://sideviewapps.com/apps/sideview-utils

You can also improve on this example by factoring out the inline CSS into application.css, but I left it inline to make the example simpler.

[hvandenb]

Thanks for the feedback - let me check out the license and see if I can make this work.