Dashboards & Visualizations

How to create singleElement drilldown link to external URL

ryastrebov
Communicator

Hello!

How to create singleElement drilldown link to external URL?

Example code:

     var search2 = new SearchManager({
                "id": "search2",
                "cancelOnUnload": true,
                "earliest_time": "-1h",
                "latest_time": "now",
                "status_buckets": 0,
                "search": "index=_internal | stats count",
                "app": utils.getCurrentApp(),
                "auto_cancel": 90,
                "preview": true,
                "runWhenTimeIsUndefined": false
            }, {tokens: true, tokenNamespace: "submitted"});
    .....................
            var element2 = new SingleElement({
                "id": "element2",
                "field": "count",
                "drilldown": "all",
                "linkFields": "beforelabel, result",
                "afterLabel": "in the past hour.",
                "underLabel": "total events",
                "beforeLabel": "There have been",
                "managerid": "search2",
                "el": $('#element2')
            }, {tokens: true}).render();

But this drilldown only to search... How can create link to external URL? Example http://www.splunk.com? My Splunk version is 6.1.4.

Tags (1)
0 Karma
1 Solution

rsennett_splunk
Splunk Employee
Splunk Employee

Here is the combo you need... you're missing a piece :

  // SEARCH MANAGERS
        //

        var search1 = new SearchManager({
            "id": "search1",
            "latest_time": "now",
            "cancelOnUnload": true,
            "earliest_time": "-1h",
            "status_buckets": 0,
            "search": "index=_internal | stats count",
            "app": utils.getCurrentApp(),
            "auto_cancel": 90,
            "preview": true,
            "runWhenTimeIsUndefined": false
        }, {tokens: true, tokenNamespace: "submitted"});

 // VIEWS: VISUALIZATION ELEMENTS
        //

        var element1 = new SingleElement({
            "id": "element1",
            "beforeLabel": "There have been",
            "linkFields": "beforelabel, result",
            "drilldown": "all",
            "underLabel": "total events",
            "field": "count",
            "afterLabel": "in the past hour.",
            "managerid": "search1",
            "el": $('#element1')
        }, {tokens: true, tokenNamespace: "submitted"}).render();

        element1.on("click", function(e) {
            if (e.field !== undefined) {
                e.preventDefault();
                var url = TokenUtils.replaceTokenNames("http://answers.splunk.com/answers/?q=$click.value$", _.extend(submittedTokenModel.toJSON(), e.data), TokenUtils.getEscaper('url'));
                utils.redirect(url);
            }
        });

take a look at the Dashboard Examples app for Splunk 6.x: https://splunkbase.splunk.com/app/1603/
Once installed, go here:

https://yourSplunkServer:8000/en-US/app/simple_xml_examples/simple_drilldown_dynamic?earliest=0&late...
check out the bottom two panels...

I've adjusted to Single Element for clarity since the examples are for Table elements.
It's the same though...

Or... create a new dashboard and paste this in before the </dashboard> tag.

<row>
<single>
            <title>Single panel with drilldown on beforeLabel and result values, and link to search view</title>
            <searchString>index=_internal | stats count</searchString>
            <earliestTime>-1h</earliestTime>
            <latestTime>now</latestTime>
            <option name="beforeLabel">There have been</option>
            <option name="underLabel">total events</option>
            <option name="afterLabel">in the past hour.</option>
            <option name="field">count</option>
            <option name="drilldown">all</option>
            <option name="linkFields">beforelabel, result</option>
          <drilldown>
        <link>http://answers.splunk.com/answers/?q=$click.value$</link>
      </drilldown>
        </single>
</row>

If that does what you want... then save the dashboard as HTML and check out the javascript elements... you'll see what I pasted in in the first example, and you can apply it to your own stuff.

In fact, if I were you.. I'd just do it in SimpleXML first, for your own stuff... then save to HTML and grab what you need for the main dashboard you're working on.

A really good rule of thumb, is to do as much as you possibly can in SimpleXML and THEN save to HTML if you have need for an HTML dashboard. Why work so hard? Let Splunk show you... 🙂

With Splunk... the answer is always "YES!". It just might require more regex than you're prepared for!

View solution in original post

rsennett_splunk
Splunk Employee
Splunk Employee

Here is the combo you need... you're missing a piece :

  // SEARCH MANAGERS
        //

        var search1 = new SearchManager({
            "id": "search1",
            "latest_time": "now",
            "cancelOnUnload": true,
            "earliest_time": "-1h",
            "status_buckets": 0,
            "search": "index=_internal | stats count",
            "app": utils.getCurrentApp(),
            "auto_cancel": 90,
            "preview": true,
            "runWhenTimeIsUndefined": false
        }, {tokens: true, tokenNamespace: "submitted"});

 // VIEWS: VISUALIZATION ELEMENTS
        //

        var element1 = new SingleElement({
            "id": "element1",
            "beforeLabel": "There have been",
            "linkFields": "beforelabel, result",
            "drilldown": "all",
            "underLabel": "total events",
            "field": "count",
            "afterLabel": "in the past hour.",
            "managerid": "search1",
            "el": $('#element1')
        }, {tokens: true, tokenNamespace: "submitted"}).render();

        element1.on("click", function(e) {
            if (e.field !== undefined) {
                e.preventDefault();
                var url = TokenUtils.replaceTokenNames("http://answers.splunk.com/answers/?q=$click.value$", _.extend(submittedTokenModel.toJSON(), e.data), TokenUtils.getEscaper('url'));
                utils.redirect(url);
            }
        });

take a look at the Dashboard Examples app for Splunk 6.x: https://splunkbase.splunk.com/app/1603/
Once installed, go here:

https://yourSplunkServer:8000/en-US/app/simple_xml_examples/simple_drilldown_dynamic?earliest=0&late...
check out the bottom two panels...

I've adjusted to Single Element for clarity since the examples are for Table elements.
It's the same though...

Or... create a new dashboard and paste this in before the </dashboard> tag.

<row>
<single>
            <title>Single panel with drilldown on beforeLabel and result values, and link to search view</title>
            <searchString>index=_internal | stats count</searchString>
            <earliestTime>-1h</earliestTime>
            <latestTime>now</latestTime>
            <option name="beforeLabel">There have been</option>
            <option name="underLabel">total events</option>
            <option name="afterLabel">in the past hour.</option>
            <option name="field">count</option>
            <option name="drilldown">all</option>
            <option name="linkFields">beforelabel, result</option>
          <drilldown>
        <link>http://answers.splunk.com/answers/?q=$click.value$</link>
      </drilldown>
        </single>
</row>

If that does what you want... then save the dashboard as HTML and check out the javascript elements... you'll see what I pasted in in the first example, and you can apply it to your own stuff.

In fact, if I were you.. I'd just do it in SimpleXML first, for your own stuff... then save to HTML and grab what you need for the main dashboard you're working on.

A really good rule of thumb, is to do as much as you possibly can in SimpleXML and THEN save to HTML if you have need for an HTML dashboard. Why work so hard? Let Splunk show you... 🙂

With Splunk... the answer is always "YES!". It just might require more regex than you're prepared for!

ryastrebov
Communicator

Thank you very much!

0 Karma

rsennett_splunk
Splunk Employee
Splunk Employee

You're welcome... I've adjusted the answer so it speaks directly to the Single Element... but it's all the same.
See here: http://docs.splunk.com/Documentation/Splunk/latest/Viz/PanelreferenceforSimplifiedXML#drilldown

Glad you got it. 🙂

With Splunk... the answer is always "YES!". It just might require more regex than you're prepared for!
0 Karma
Get Updates on the Splunk Community!

Improve Your Security Posture

Watch NowImprove Your Security PostureCustomers are at the center of everything we do at Splunk and security ...

Maximize the Value from Microsoft Defender with Splunk

 Watch NowJoin Splunk and Sens Consulting for this Security Edition Tech TalkWho should attend:  Security ...

This Week's Community Digest - Splunk Community Happenings [6.27.22]

Get the latest news and updates from the Splunk Community here! News From Splunk Answers ✍️ Splunk Answers is ...