How to add a drilldown to a dashboard where clicking on a URL returned from a search opens it in a new tab in the browser?

[bpant]

Hi,

I am indexing json data that contains several urls. This data is getting properly indexed as expected. Now, I want to provide the navigation option for these urls. Meaning, whenever any users clicks on it, splunks client should open up the address mentioned in the url in the new tab of the explorer.
Right now they are treated as strings. Nothing is happening when I am doing a click on it.
Please note: I wanted to do this for search dashboard.

-Bhanu

[sideview]

If you're not comfortable with Javascript, you might prefer using Sideview Utils. Here is a working example of what you're asking for that requires no custom code, requiring Sideview Utils 2.X or later.

Of course, to understand how the Sideview XML works you'll have to read a little of the Sideview docs (contained within the app).
Download Sideview Utils from this page http://sideviewapps.com/apps/sideview-utils/ and make sure to read the homepage and also the page "Key Techniques > Overview of the Advanced XML". Beyond that there are 60 or 70 pages of docs about the modules with working examples for each of them.

Here's your example though, where the URL's appear as blue links. This uses a feature in Sideview Utils called "table-embedding" to table-embed an HTML module.

<view onunloadCancelJobs="true" template="dashboard.html" isSticky="False">
  <label>Table - clickable referer example</label>
  <module name="AccountBar" layoutPanel="appHeader" />
  <module name="AppBar" layoutPanel="appHeader" />
  <module name="SideviewUtils" layoutPanel="appHeader" />

  <module name="Message" layoutPanel="messaging">
    <param name="filter">*</param>
    <param name="maxSize">2</param>
    <param name="clearOnJobDispatch">True</param>
  </module>

  <module name="HTML" layoutPanel="viewHeader">
    <param name="html"><![CDATA[
    <h1>Table - clickable referer example</h1>
    ]]></param>
  </module>

  <module name="Search" layoutPanel="panel_row2_col1" autoRun="True">
    <param name="search"><![CDATA[
      index=_internal http:// | head 10 | eval link=referer | table _time user referer link
    ]]></param>
    <param name="earliest">-1h</param>
    <param name="latest">now</param>

    <module name="Pager">

      <module name="Table">

        <module name="HTML" group="row.fields.referer">
          <param name="html"><![CDATA[
          <a href="$row.fields.referer$" target="_blank">$row.fields.referer$</a>
          ]]></param>
        </module>

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

[ngatchasandra]

Hi,
If i understanded your tasks, try to look the xml code like follow:

<dashboard script="table_drilldown_url_field.js">
  <label>Drilldown URL Field Value</label>
  <description>Use the value of a field as the drilldown link</description>
  <row>
      <table id="link">
        <searchString>index=_internal http:// | head 10 | eval link=referer | table _time user referer link</searchString>
        <earliestTime>-60m@m</earliestTime>
        <latestTime>now</latestTime>
        <option name="wrap">true</option>
        <option name="rowNumbers">false</option>
        <option name="dataOverlayMode">none</option>
        <option name="drilldown">none</option>
        <option name="count">10</option>
      </table>
  </row>
</dashboard>

And js file is :

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 === 'link';
        },
        render: function($td, cell) {
            var link = cell.value;
            var a = $('<a>').attr("href", cell.value).text("Link to Referer URL");
            $td.addClass('table-link').empty().append(a);

            a.click(function(e) {
              e.preventDefault();
              window.location = $(e.currentTarget).attr('href');
              // or for popup:
              // window.open($(e.currentTarget).attr('href'));
            });
        }
    });

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

This is located in C:\Program Files\Splunk\etc\apps\appname\appserver\static

[ngatchasandra]

Hi,

This is in Dashboard_6_example application.

Only create a new dashboard and edit it , copy and paste the XML code. Don't forget to put the js file in static. After do that, restart splunk.

Please,If you don't satisfy, do me know.

[bpant]

Thanks for your response.
I am new to Splunk and I did not understand where to have this code?
Please guide me.
For other dashboards I can see we can have an edit button which opens an editor to write a code. But I could not see any such option in search dashboard.

[ngatchasandra]

Hi bpant,
Only create a empty dashboard, after do this, click on edit button and select edit source. Copy and paste the first code in editor (replace only that you see with the first). Thus, create a new file in your Notepad++ or Block note, copy and paste the second code (js file) in this file and save it as table_drilldown_url_field.js in directory C:\Program Files\Splunk\etc\apps\appname\appserver\static. Where appname is app where you create your dashboard (default is search).
Let me know if is not working.

Try also dowloading Dasboard_6_example app and install, you will see this demo .

[mkhan_splunk]

I am looking for same. But this is not working.
Should I download and add underscore.js and jquery in static folder also?

Thnaks,
Yusuf