topic Re: Table drilldown: Disable link conditionally in Splunk Search

Table drilldown: Disable link conditionally

enexwhy — Tue, 24 Jan 2017 08:45:07 GMT

I have a table with cell drilldown enabled.
However, in certain conditions I want to disable the drilldown, for example:

I want the drilldown to be enabled for 'pass' but not for 'fail'.
I have some code in my .js file but it does not work. I am not very familiar with JavaScript.

Anyway this is what I want to achieve:
// Disables cells conditionally
var table1 = mvc.Components.get('table1');

table1.on('click', function(cell) {
    console.log(cell.field);
    console.log(cell.value); // I can get cell.field, but not cell.value -- how can I get cell.value?

    if (cell.field == 'status' && cell.value == 'fail') {
        cell.preventDefault(); // Disable the drilldown here
    }
});

Re: Table drilldown: Disable link conditionally

jeffland — Tue, 24 Jan 2017 11:57:28 GMT

You could use the cell.data object to get the required info. It contains everything also available for the Simple XML drilldown actions, such as click.name2 and so on. You'll want these two:

cell.data["click.name2"] // name of the clicked cell
cell.data["click.value2"] // value of the clicked cell

By the way, if you want to learn and understand what's happening, I recommend using your browsers developer tools, namely the debugger, to set breakpoints and check which objects are available and which info they contain. For example, you could set a breakpoint on the first line of the anonymous function you call on('click' and check out the cell object. In Chrome and Firefox, you press F12 and go to the Debugger tab. In the list of sources, look for your js file.
If you're on 6.5 and above, you'll need to insert a debugger; statement in your js file to make it appear in the list of sources, see here (answer by rjthibod) for source.

Re: Table drilldown: Disable link conditionally

enexwhy — Wed, 25 Jan 2017 02:37:36 GMT

Hi jeffland, thank you for your response.

I changed 'cell.field' and 'cell.value' to those you mentioned, but I do not see .preventDefault() working.
Even if I try the simplest thing that I can:
var table1 = mvc.Components.get('table1');

table1.on('click', function(cell) {
    cell.preventDefault(); // When I place a breakpoint here and click on table1, the drilldown takes place even before this line executes.
    var col = cell.data['click.name2'];
    var val = cell.data['click.value2'];
});

Re: Table drilldown: Disable link conditionally

jeffland — Wed, 25 Jan 2017 15:30:05 GMT

That has to be caused by something else you do on your dashboard. You could start from a minimal example like this Simple XML:

<dashboard script="preventDrilldown.js">
  <label>Preventing Drilldown</label>
  <row>
    <panel>
      <table id="table">
        <search>
          <query>index=_internal | stats count by group</query>
          <earliest>-15m</earliest>
          <latest>now</latest>
        </search>
      </table>
    </panel>
  </row>
</dashboard>

and this javascript:

require([
    "splunkjs/mvc",
    "splunkjs/mvc/simplexml/ready!"
], function (mvc) {
    var table = mvc.Components.get("table");
    table.on("click", function (cell) {
        cell.preventDefault();
    });
});

This has to work. From there, add features you have on your original dashboard until you hit the culprit. Unfortunately, that's all I can do from here 😞

Re: Table drilldown: Disable link conditionally

enexwhy — Thu, 26 Jan 2017 04:25:35 GMT

I figured it out. I had to remove all the drilldowns I defined in the XML, and redefine them in the .js file. I was thinking that .preventDefault() would stop those from happening but then I realized that 'default' means the default drilldown that produces the search query based on the cell you click on.

Thanks again for your responses.