All Apps and Add-ons

Hide/contract the drilldown table

Contributor

I have drilldowns in my Table module. When I click on any row, the drilldown table will present itself.

Is there a way to hide this drilldown table afterwards? Would I need to create custom behavior on this table?

I would like the panel to also shrink back in size when the drilldown is hiding.

SplunkTrust
SplunkTrust

Here's a more involved answer that tries to take care of some of the less trivial usability issues. It implements a little close-button on the second table's header, and basically when this close button is clicked it causes the first table to deselect and all downstream config to be hidden.

Part 1) The XML for the example

<module name="Search" layoutPanel="panel_row1_col1" autoRun="True">
  <param name="search">index=_internal source="*metrics.log" group="per_sourcetype_thruput" | stats avg(eps) by series | sort - avg(eps)</param>
  <param name="earliest">-2h</param>

  <module name="HTML">
    <param name="html"><![CDATA[
      <h2>Sourcetypes and their average event throughput $search.timeRange.label$</h2>
    ]]></param>
  </module>
  <module name="JobProgressIndicator"></module>
  <module name="Pager">
    <module name="Table">
      <param name="customBehavior">closeButtonHidesAllChildrenAndClearsSelection</param>

      <module name="Search">
        <param name="search">index=* OR index=_* sourcetype="$row.fields.series$" | stats count by source | sort - count</param>
        <param name="earliest">-2h</param>

        <module name="HTML">
          <param name="html"><![CDATA[
            <div style="float:right"><a class="splIcon splIcon-close"></a></div>
            <h2>$results.count$ source(s) that have sourcetype=$row.fields.series$</h2>
          ]]></param>
          <param name="customBehavior">closeButtonContractsDrilldownTable</param>
        </module>

        <module name="JobProgressIndicator"></module>
        <module name="Pager">
          <module name="Table"></module>
        </module>

      </module>
    </module>
  </module>
</module>

Part 2) The JS for the customBehaviors. Put this in application.js

if (typeof(Sideview)!="undefined") {
    // in this simple implementation there can only be one of these per page.

    // we just define a simple variable.
    var primaryTableModule;

    // and then use a customBehavior to just point our variable at the first table.
    Sideview.utils.declareCustomBehavior("closeButtonHidesAllChildrenAndClearsSelection", function(tableModule) {
        primaryTableModule = tableModule;
    });

    // then we use a customBehavior on the HTML module that will set up an 
    // event handler on the close button, that folds up all the drilldown
    // config and clears the selection.
    Sideview.utils.declareCustomBehavior("closeButtonContractsDrilldownTable", function(htmlModule) {
        var existingMethodReference = htmlModule.renderHTML.bind(htmlModule);
        htmlModule.renderHTML = function(context) {
            existingMethodReference(context);
            $(".splIcon-close",this.container).click(function() {
                // step 1 - tell the first table to hide all its descendants. 
                // it is best to use the visibilityMode system of the Splunk UI
                // lest you find yourself fighting it later. 😃 
                var visibilityMode = primaryTableModule.drilldownVisibilityKey + primaryTableModule.moduleId;
                primaryTableModule.hideDescendants(visibilityMode);
                // step 2 - clear the highlighted row.
                primaryTableModule.clearSelection();
                // step 3 - call reset on all the descendants. 
                primaryTableModule.withEachDescendant(function(module) {
                    module.reset();
                });
            });
        }
    });
}

Contributor

I ended up using a link with a javascript onclick function. When clicked, the function would hide the appropriate modules.

0 Karma

Contributor

Another problem I can foresee with having a button is that the button must be outside of any Pulldown, as the HTML module is reloaded for every downstream push and any event listeners are lost.

Adding:

.layoutCellInner.dashboardCell
{
min-height:0 !important;
}

to the application.css makes the height dynamic to the contents. I can have one button outside of all the pulldowns that hides all the drilldown tables

0 Karma

Contributor

Yes that is the idea. What is the Javascript function to hide a table and collapse all the empty white space? Simply hiding the table with CSS or .hide() does not take away any of the empty whitespace

0 Karma

SplunkTrust
SplunkTrust

Is the idea just that your users want to reclaim that space on the dashboard after they've had a look at the inline drilldown? If so I think a little close-button would make the most sense, and a customBehavior is probably the best way to go.

0 Karma

Contributor

That can be flexible, as long as it works. Perhaps clicking on the same row of the original table? Maybe an additional button that hides the drilldown?

0 Karma

SplunkTrust
SplunkTrust

afterwards meaning after what, exactly? Can you spell out what condition you'd like to result in the hiding of the drilldown table?

0 Karma