Dashboards & Visualizations

Is there a way to hardcode a dashboard drilldown link in Javascript?

KolGr001
SplunkTrust
SplunkTrust

Hola!

I ran in to a minor "drilldown" problem with one of my dashboards once we upgraded from 6.0.x to 6.2.5, and am looking for some insight on possible fixes.

High Level:

We use a custom Splunk command to go out and fetch some file and download the PDF right from the view. What started happening in our dev environment after the upgrade is when we click "PDF Link" it would not only fetch the file as expected, but it would drilldown to the search app. Before we could actually click the link and it would stay on the dashboard view even while cell drilldown is enabled. The reason we have cell drilldown turned on is because there is another cell on the same row that allows users to go to another dashboard.

Potential Solution:
There is a nice solution here to drill down to absolute URL using clickvalue:

http://answers.splunk.com/answers/85517/drill-down-to-absolute-url-using-clickvalue

This is nice, because what I think we could do is use a similar .js file to turn the drilldown cell in to a link that redirects users to the page all while providing the functionality to pass values like any other dashboard.

Problem:

Is there a way to hardcode the dashboard link in to the JS file, so that if we turn off cell drill-down we can still use the same functionality?

Code Samples:

Dashboard Simple XML:

<form stylesheet="cg_ereceipts_overview.css" script="cg_ereceipts_overview.js">
  <label>Dashboard Name</label>
  <fieldset submitButton="True">
    <input type="text" token="field1">
      <label>field1:</label>
      <default></default>
    </input>
    <input type="text" token="field2">
      <label>field2:</label>
      <default></default>
    </input>
    <input type="text" token="field1=3">
      <label>field3:</label>
      <default></default>
    </input>
    <input type="time">
      <default>
        <earliestTime>-30d@d</earliestTime>
        <latestTime>now</latestTime>
      </default>
    </input>
  </fieldset>
  <row>
    <table id="ereceipt_results">
      <title>Your Search Results:</title>
      <search>
        <query>index=contract_ereceipt_summary source=contract_ereceipt_summary $field1$ $field2$ $field3$ 
          | eval pdfDownloadUrl = if( isnull(PID_OUT), "One or more required fields needed to download the PDF are not available.", eReceiptUrlBase + "?bp_context_id=" + bp_context_id + "&amp;TPCode=" + TPCode + "&amp;PID_OUT=" + PID_OUT)        
          | table fields
          | sort - _time 
          | convert ctime(_time) 
          |`ctg_common_header_rename` 
          | rename pdfDownloadUrl as "Download PDF"</query>
      </search>
      <option name="rowNumbers">true</option>
      <drilldown target="My New Window">
        <link field="Re-Submit">
          <![CDATA[/app/contract_gateway/cg_ereceipts_resend_html?various field values]]>
        </link>
      </drilldown>
      <option name="wrap">true</option>
      <option name="dataOverlayMode">none</option>
      <option name="drilldown">cell</option>
      <option name="count">10</option>
    </table>
  </row>
</form>

New JS File to create Link:

require([
    'underscore',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/tableview',
    'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc, TableView) {
    var CustomLinkRenderer = TableView.BaseCellRenderer.extend({
        canRender: function(cell) {
            return cell.field === 'Re-Submit';
        },
        render: function($td, cell) {
            var link = cell.value;
              var a = $('<a>').attr("href", link).text("Re-Submit e-Receipt Here");
              $td.addClass('table-link').empty().append(a);
              a.click(function(e) {
                e.preventDefault();
                // for current window:
                //window.location = $(e.currentTarget).attr('href');
                // or for popup:
                window.open($(e.currentTarget).attr('href'));
              });
        }
    });

        // Get the table view by id
        mvc.Components.get('ereceipt_results').getVisualization(function(tableView){
        // Register custom cell renderer
        tableView.table.addCellRenderer(new CustomLinkRenderer());
        // Force the table to re-render
        tableView.table.render();
    });
});

Let me know if I can provide you with any other details.

Thanks in Advance!

0 Karma

sloshburch
Ultra Champion

Given the advancements in drilldown over the years, have you considered simply avoiding the javascript and trying the native approach?

I haven't tested this to see if my proposal works, but my gut first try at this would be to simply use the drilldown without the javascript.

My first try would be to have the drilldown send to another form dashboard where an iframe is used to pull the pdf file. Depending on what else is on that page, you might even be able to do it with cascading drill downs on the same page.

See example 3 and the items on http://docs.splunk.com/Documentation/Splunk/6.3.0/Viz/PanelreferenceforSimplifiedXML#Drilldown_eleme...

This page goes even deeper on things: http://docs.splunk.com/Documentation/Splunk/6.3.0/AdvancedDev/TableChartDrilldown

Curious how this works out for you.

0 Karma

KolGr001
SplunkTrust
SplunkTrust

Thanks, I agree - I tried not going this route, but I want to make it "fool proof" for our business users where they can click "download PDF" without actually drilling down to the search app.

I'll check out some of the documentation you have provided. Thanks!

0 Karma

sloshburch
Ultra Champion

Yea - me thinks this would work without going into the search app. That shouldn't be an issue with the current feature set.

0 Karma

KolGr001
SplunkTrust
SplunkTrust

Hey dude - still have some issues with this. Now that the link drills down to the search app, users are getting confused. Is there anyway I can still use the link without drilling down and shutting off cell drilldown?

0 Karma