topic Re: Hide/contract the drilldown table in All Apps and Add-ons

Hide/contract the drilldown table

cmak — Thu, 07 Feb 2013 20:24:18 GMT

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.

Re: Hide/contract the drilldown table

sideview — Thu, 07 Feb 2013 20:49:47 GMT

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

Re: Hide/contract the drilldown table

cmak — Thu, 07 Feb 2013 21:16:15 GMT

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?

Re: Hide/contract the drilldown table

sideview — Thu, 07 Feb 2013 21:25:08 GMT

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.

Re: Hide/contract the drilldown table

cmak — Thu, 07 Feb 2013 21:37:02 GMT

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

Re: Hide/contract the drilldown table

cmak — Thu, 07 Feb 2013 22:37:34 GMT

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

Re: Hide/contract the drilldown table

cmak — Fri, 08 Feb 2013 00:30:30 GMT

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

Re: Hide/contract the drilldown table

sideview — Fri, 08 Feb 2013 01:07:46 GMT

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