Dashboards & Visualizations
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 
Ask a Question
Solved! Jump to solution

How to click on a table in a dashboard and open the search in a new window in HTML?

kdimaria
Communicator
‎11-08-2017 09:40 AM

I have a dashboard coded in HTML and when I click on a table element, it changes the page to show the search ran in Splunk. Is there a way to click on the table and then keep the dashboard up and show the search in a new tab or window? Using drilldown or something?

0 Karma
Reply
1 Solution
Solved! Jump to solution
Solution

niketn
Legend
‎11-08-2017 12:27 PM

@kdimaria, if would be tough for community to assist with HTML dashboard without code since it is not as easy to mock as Simple XML. In order to open drilldown SPL in new window you would need utils.redirect(url, false, "_blank"); . However, you would also need to provide SPL query you need to run along with default drilldown token required for the search.

Following is an example which will run the search index=_internal sourcetype=splunkd log_level!=\"INFO\" $click.name$=\"$click.value$\" in a new window. App name is search i.e. /app/search/search, which you would need to change to your app as well. Add the following code to implement click event for the table you have created (assuming table id is element1, if not change accordingly)

    element1.on("click", function(e) {
        if (e.field !== undefined) {
            e.preventDefault();
            var url = TokenUtils.replaceTokenNames("{{SPLUNKWEB_URL_PREFIX}}/app/search/search?q=index=_internal sourcetype=splunkd log_level!=\"INFO\" $click.name$=\"$click.value$\"", _.extend(submittedTokenModel.toJSON(), e.data), TokenUtils.getEscaper('url'), TokenUtils.getFilters(mvc.Components));
            utils.redirect(url, false, "_blank");
        }
    });

The line utils.redirect(url, false, "_blank"); redirects search to a new page. You would need to change the search query and dynamic predefined drilldown token to be passed as per your need. Refer to documentation for dynamic drilldown http://docs.splunk.com/Documentation/Splunk/latest/Viz/tokens##Predefined_tokens_for_dynamic_drilldo...

If the above does not work for you, you would need to provide the table element JS code as well as search code (for the table and intended search for new window) from your html dashboard. However, I am attaching a run anywhere HTML Dashboard for you to try out the above example based on Splunk _internal index:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Table drilldown search in new window HTML</title>
    <link rel="shortcut icon" href="/en-US/static/@FB592E2458E4D537E2C0C5FB336072C4851FE2C517060C29ED9A121948D79ED6/img/favicon.ico" />
    <link rel="stylesheet" type="text/css" href="{{SPLUNKWEB_URL_PREFIX}}/static/build/css/bootstrap-enterprise.css" />
    <link rel="stylesheet" type="text/css" href="{{SPLUNKWEB_URL_PREFIX}}/static/css/build/pages/dashboard-simple-bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" media="all" href="{{SPLUNKWEB_URL_PREFIX}}/static/app/search/dashboard.css" />


        <meta name="referrer" content="never" />
        <meta name="referrer" content="no-referrer" />

          <script>
                window._splunk_metrics_events = {
                   push : function() {},
                   active: false,
                   }
          </script>
    </head>
<body class="simplexml preload locale-en" data-splunk-version="7.0.0" data-splunk-product="enterprise">
<!-- 
BEGIN LAYOUT
This section contains the layout for the dashboard. Splunk uses proprietary
styles in <div> tags, similar to Bootstrap's grid system. 
-->
<header>
    <a class="navSkip" href="#navSkip" tabindex="1">Screen reader users, click here to skip the navigation bar</a>
    <div class="header splunk-header">
            <div id="placeholder-splunk-bar">
                <a href="{{SPLUNKWEB_URL_PREFIX}}/app/launcher/home" class="brand" title="splunk > listen to your data">splunk<strong>></strong></a>
            </div>
                <div id="placeholder-app-bar"></div>
    </div>
    <a id="navSkip"></a>
</header>
<div class="dashboard-body container-fluid main-section-body" data-role="main">
    <div class="dashboard-header clearfix">
        <h2>Splunk Answers 589259 - Table drilldown search in new window HTML</h2>
    </div>


    <div id="row1" class="dashboard-row dashboard-row1">
        <div id="panel1" class="dashboard-cell" style="width: 100%;">
            <div class="dashboard-panel clearfix">

                <div class="panel-element-row">
                    <div id="element1" class="dashboard-element table" style="width: 100%">
                        <div class="panel-body"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 
END LAYOUT
-->

<script src="{{SPLUNKWEB_URL_PREFIX}}/config?autoload=1" crossorigin="use-credentials"></script>
<script src="{{SPLUNKWEB_URL_PREFIX}}/static/js/i18n.js"></script>
<script src="{{SPLUNKWEB_URL_PREFIX}}/i18ncatalog?autoload=1"></script>
<script src="{{SPLUNKWEB_URL_PREFIX}}/static/build/simplexml/index.js"></script>
<script type="text/javascript">
// <![CDATA[
// <![CDATA[
//
// LIBRARY REQUIREMENTS
//
// In the require function, we include the necessary libraries and modules for
// the HTML dashboard. Then, we pass variable names for these libraries and
// modules as function parameters, in order.
// 
// When you add libraries or modules, remember to retain this mapping order
// between the library or module and its function parameter. You can do this by
// adding to the end of these lists, as shown in the commented examples below.

require([
    "splunkjs/mvc",
    "splunkjs/mvc/utils",
    "splunkjs/mvc/tokenutils",
    "underscore",
    "jquery",
    "splunkjs/mvc/simplexml",
    "splunkjs/mvc/layoutview",
    "splunkjs/mvc/simplexml/dashboardview",
    "splunkjs/mvc/simplexml/dashboard/panelref",
    "splunkjs/mvc/simplexml/element/chart",
    "splunkjs/mvc/simplexml/element/event",
    "splunkjs/mvc/simplexml/element/html",
    "splunkjs/mvc/simplexml/element/list",
    "splunkjs/mvc/simplexml/element/map",
    "splunkjs/mvc/simplexml/element/single",
    "splunkjs/mvc/simplexml/element/table",
    "splunkjs/mvc/simplexml/element/visualization",
    "splunkjs/mvc/simpleform/formutils",
    "splunkjs/mvc/simplexml/eventhandler",
    "splunkjs/mvc/simplexml/searcheventhandler",
    "splunkjs/mvc/simpleform/input/dropdown",
    "splunkjs/mvc/simpleform/input/radiogroup",
    "splunkjs/mvc/simpleform/input/linklist",
    "splunkjs/mvc/simpleform/input/multiselect",
    "splunkjs/mvc/simpleform/input/checkboxgroup",
    "splunkjs/mvc/simpleform/input/text",
    "splunkjs/mvc/simpleform/input/timerange",
    "splunkjs/mvc/simpleform/input/submit",
    "splunkjs/mvc/searchmanager",
    "splunkjs/mvc/savedsearchmanager",
    "splunkjs/mvc/postprocessmanager",
    "splunkjs/mvc/simplexml/urltokenmodel"
    // Add comma-separated libraries and modules manually here, for example:
    // ..."splunkjs/mvc/simplexml/urltokenmodel",
    // "splunkjs/mvc/tokenforwarder"
    ],
    function(
        mvc,
        utils,
        TokenUtils,
        _,
        $,
        DashboardController,
        LayoutView,
        Dashboard,
        PanelRef,
        ChartElement,
        EventElement,
        HtmlElement,
        ListElement,
        MapElement,
        SingleElement,
        TableElement,
        VisualizationElement,
        FormUtils,
        EventHandler,
        SearchEventHandler,
        DropdownInput,
        RadioGroupInput,
        LinkListInput,
        MultiSelectInput,
        CheckboxGroupInput,
        TextInput,
        TimeRangeInput,
        SubmitButton,
        SearchManager,
        SavedSearchManager,
        PostProcessManager,
        UrlTokenModel

        // Add comma-separated parameter names here, for example: 
        // ...UrlTokenModel, 
        // TokenForwarder
        ) {

        var pageLoading = true;


        // 
        // TOKENS
        //

        // Create token namespaces
        var urlTokenModel = new UrlTokenModel();
        mvc.Components.registerInstance('url', urlTokenModel);
        var defaultTokenModel = mvc.Components.getInstance('default', {create: true});
        var submittedTokenModel = mvc.Components.getInstance('submitted', {create: true});

        urlTokenModel.on('url:navigate', function() {
            defaultTokenModel.set(urlTokenModel.toJSON());
            if (!_.isEmpty(urlTokenModel.toJSON()) && !_.all(urlTokenModel.toJSON(), _.isUndefined)) {
                submitTokens();
            } else {
                submittedTokenModel.clear();
            }
        });

        // Initialize tokens
        defaultTokenModel.set(urlTokenModel.toJSON());

        function submitTokens() {
            // Copy the contents of the defaultTokenModel to the submittedTokenModel and urlTokenModel
            FormUtils.submitForm({ replaceState: pageLoading });
        }

        function setToken(name, value) {
            defaultTokenModel.set(name, value);
            submittedTokenModel.set(name, value);
        }

        function unsetToken(name) {
            defaultTokenModel.unset(name);
            submittedTokenModel.unset(name);
        }



        //
        // SEARCH MANAGERS
        //


var search1 = new SearchManager({
            "id": "search1",
            "search": "index=_internal sourcetype=splunkd log_level!=\"INFO\" |  stats count by component",
            "earliest_time": "-24h@h",
            "cancelOnUnload": true,
            "status_buckets": 0,
            "sample_ratio": 1,
            "latest_time": "now",
            "app": utils.getCurrentApp(),
            "auto_cancel": 90,
            "preview": true,
            "tokenDependencies": {
            },
            "runWhenTimeIsUndefined": false
        }, {tokens: true, tokenNamespace: "submitted"});


        //
        // SPLUNK LAYOUT
        //

        $('header').remove();
        new LayoutView({"hideAppBar": false, "hideChrome": false, "hideFooter": false, "hideSplunkBar": false})
            .render()
            .getContainerElement()
            .appendChild($('.dashboard-body')[0]);

        //
        // DASHBOARD EDITOR
        //

        new Dashboard({
            id: 'dashboard',
            el: $('.dashboard-body'),
            showTitle: true,
            editable: true
        }, {tokens: true}).render();


        //
        // VIEWS: VISUALIZATION ELEMENTS
        //

        var element1 = new TableElement({
            "id": "element1",
            "count": 20,
            "dataOverlayMode": "none",
            "drilldown": "cell",
            "percentagesRow": "false",
            "rowNumbers": "false",
            "totalsRow": "false",
            "wrap": "true",
            "managerid": "search1",
            "el": $('#element1')
        }, {tokens: true, tokenNamespace: "submitted"}).render();

        element1.on("click", function(e) {
            if (e.field !== undefined) {
                e.preventDefault();
                var url = TokenUtils.replaceTokenNames("{{SPLUNKWEB_URL_PREFIX}}/app/search/search?q=index=_internal sourcetype=splunkd log_level!=\"INFO\" $click.name$=\"$click.value$\"", _.extend(submittedTokenModel.toJSON(), e.data), TokenUtils.getEscaper('url'), TokenUtils.getFilters(mvc.Components));
                utils.redirect(url, false, "_blank");
            }
        });

        // Initialize time tokens to default
        if (!defaultTokenModel.has('earliest') && !defaultTokenModel.has('latest')) {
            defaultTokenModel.set({ earliest: '0', latest: '' });
        }

        submitTokens();


        //
        // DASHBOARD READY
        //

        DashboardController.ready();
        pageLoading = false;

    }
);
// ]]>
</script>
</body>
</html>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

0 Karma
Reply
Solved! Jump to solution
Solution

niketn
Legend
‎11-08-2017 12:27 PM

@kdimaria, if would be tough for community to assist with HTML dashboard without code since it is not as easy to mock as Simple XML. In order to open drilldown SPL in new window you would need utils.redirect(url, false, "_blank"); . However, you would also need to provide SPL query you need to run along with default drilldown token required for the search.

Following is an example which will run the search index=_internal sourcetype=splunkd log_level!=\"INFO\" $click.name$=\"$click.value$\" in a new window. App name is search i.e. /app/search/search, which you would need to change to your app as well. Add the following code to implement click event for the table you have created (assuming table id is element1, if not change accordingly)

    element1.on("click", function(e) {
        if (e.field !== undefined) {
            e.preventDefault();
            var url = TokenUtils.replaceTokenNames("{{SPLUNKWEB_URL_PREFIX}}/app/search/search?q=index=_internal sourcetype=splunkd log_level!=\"INFO\" $click.name$=\"$click.value$\"", _.extend(submittedTokenModel.toJSON(), e.data), TokenUtils.getEscaper('url'), TokenUtils.getFilters(mvc.Components));
            utils.redirect(url, false, "_blank");
        }
    });

The line utils.redirect(url, false, "_blank"); redirects search to a new page. You would need to change the search query and dynamic predefined drilldown token to be passed as per your need. Refer to documentation for dynamic drilldown http://docs.splunk.com/Documentation/Splunk/latest/Viz/tokens##Predefined_tokens_for_dynamic_drilldo...

If the above does not work for you, you would need to provide the table element JS code as well as search code (for the table and intended search for new window) from your html dashboard. However, I am attaching a run anywhere HTML Dashboard for you to try out the above example based on Splunk _internal index:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Table drilldown search in new window HTML</title>
    <link rel="shortcut icon" href="/en-US/static/@FB592E2458E4D537E2C0C5FB336072C4851FE2C517060C29ED9A121948D79ED6/img/favicon.ico" />
    <link rel="stylesheet" type="text/css" href="{{SPLUNKWEB_URL_PREFIX}}/static/build/css/bootstrap-enterprise.css" />
    <link rel="stylesheet" type="text/css" href="{{SPLUNKWEB_URL_PREFIX}}/static/css/build/pages/dashboard-simple-bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" media="all" href="{{SPLUNKWEB_URL_PREFIX}}/static/app/search/dashboard.css" />


        <meta name="referrer" content="never" />
        <meta name="referrer" content="no-referrer" />

          <script>
                window._splunk_metrics_events = {
                   push : function() {},
                   active: false,
                   }
          </script>
    </head>
<body class="simplexml preload locale-en" data-splunk-version="7.0.0" data-splunk-product="enterprise">
<!-- 
BEGIN LAYOUT
This section contains the layout for the dashboard. Splunk uses proprietary
styles in <div> tags, similar to Bootstrap's grid system. 
-->
<header>
    <a class="navSkip" href="#navSkip" tabindex="1">Screen reader users, click here to skip the navigation bar</a>
    <div class="header splunk-header">
            <div id="placeholder-splunk-bar">
                <a href="{{SPLUNKWEB_URL_PREFIX}}/app/launcher/home" class="brand" title="splunk > listen to your data">splunk<strong>></strong></a>
            </div>
                <div id="placeholder-app-bar"></div>
    </div>
    <a id="navSkip"></a>
</header>
<div class="dashboard-body container-fluid main-section-body" data-role="main">
    <div class="dashboard-header clearfix">
        <h2>Splunk Answers 589259 - Table drilldown search in new window HTML</h2>
    </div>


    <div id="row1" class="dashboard-row dashboard-row1">
        <div id="panel1" class="dashboard-cell" style="width: 100%;">
            <div class="dashboard-panel clearfix">

                <div class="panel-element-row">
                    <div id="element1" class="dashboard-element table" style="width: 100%">
                        <div class="panel-body"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 
END LAYOUT
-->

<script src="{{SPLUNKWEB_URL_PREFIX}}/config?autoload=1" crossorigin="use-credentials"></script>
<script src="{{SPLUNKWEB_URL_PREFIX}}/static/js/i18n.js"></script>
<script src="{{SPLUNKWEB_URL_PREFIX}}/i18ncatalog?autoload=1"></script>
<script src="{{SPLUNKWEB_URL_PREFIX}}/static/build/simplexml/index.js"></script>
<script type="text/javascript">
// <![CDATA[
// <![CDATA[
//
// LIBRARY REQUIREMENTS
//
// In the require function, we include the necessary libraries and modules for
// the HTML dashboard. Then, we pass variable names for these libraries and
// modules as function parameters, in order.
// 
// When you add libraries or modules, remember to retain this mapping order
// between the library or module and its function parameter. You can do this by
// adding to the end of these lists, as shown in the commented examples below.

require([
    "splunkjs/mvc",
    "splunkjs/mvc/utils",
    "splunkjs/mvc/tokenutils",
    "underscore",
    "jquery",
    "splunkjs/mvc/simplexml",
    "splunkjs/mvc/layoutview",
    "splunkjs/mvc/simplexml/dashboardview",
    "splunkjs/mvc/simplexml/dashboard/panelref",
    "splunkjs/mvc/simplexml/element/chart",
    "splunkjs/mvc/simplexml/element/event",
    "splunkjs/mvc/simplexml/element/html",
    "splunkjs/mvc/simplexml/element/list",
    "splunkjs/mvc/simplexml/element/map",
    "splunkjs/mvc/simplexml/element/single",
    "splunkjs/mvc/simplexml/element/table",
    "splunkjs/mvc/simplexml/element/visualization",
    "splunkjs/mvc/simpleform/formutils",
    "splunkjs/mvc/simplexml/eventhandler",
    "splunkjs/mvc/simplexml/searcheventhandler",
    "splunkjs/mvc/simpleform/input/dropdown",
    "splunkjs/mvc/simpleform/input/radiogroup",
    "splunkjs/mvc/simpleform/input/linklist",
    "splunkjs/mvc/simpleform/input/multiselect",
    "splunkjs/mvc/simpleform/input/checkboxgroup",
    "splunkjs/mvc/simpleform/input/text",
    "splunkjs/mvc/simpleform/input/timerange",
    "splunkjs/mvc/simpleform/input/submit",
    "splunkjs/mvc/searchmanager",
    "splunkjs/mvc/savedsearchmanager",
    "splunkjs/mvc/postprocessmanager",
    "splunkjs/mvc/simplexml/urltokenmodel"
    // Add comma-separated libraries and modules manually here, for example:
    // ..."splunkjs/mvc/simplexml/urltokenmodel",
    // "splunkjs/mvc/tokenforwarder"
    ],
    function(
        mvc,
        utils,
        TokenUtils,
        _,
        $,
        DashboardController,
        LayoutView,
        Dashboard,
        PanelRef,
        ChartElement,
        EventElement,
        HtmlElement,
        ListElement,
        MapElement,
        SingleElement,
        TableElement,
        VisualizationElement,
        FormUtils,
        EventHandler,
        SearchEventHandler,
        DropdownInput,
        RadioGroupInput,
        LinkListInput,
        MultiSelectInput,
        CheckboxGroupInput,
        TextInput,
        TimeRangeInput,
        SubmitButton,
        SearchManager,
        SavedSearchManager,
        PostProcessManager,
        UrlTokenModel

        // Add comma-separated parameter names here, for example: 
        // ...UrlTokenModel, 
        // TokenForwarder
        ) {

        var pageLoading = true;


        // 
        // TOKENS
        //

        // Create token namespaces
        var urlTokenModel = new UrlTokenModel();
        mvc.Components.registerInstance('url', urlTokenModel);
        var defaultTokenModel = mvc.Components.getInstance('default', {create: true});
        var submittedTokenModel = mvc.Components.getInstance('submitted', {create: true});

        urlTokenModel.on('url:navigate', function() {
            defaultTokenModel.set(urlTokenModel.toJSON());
            if (!_.isEmpty(urlTokenModel.toJSON()) && !_.all(urlTokenModel.toJSON(), _.isUndefined)) {
                submitTokens();
            } else {
                submittedTokenModel.clear();
            }
        });

        // Initialize tokens
        defaultTokenModel.set(urlTokenModel.toJSON());

        function submitTokens() {
            // Copy the contents of the defaultTokenModel to the submittedTokenModel and urlTokenModel
            FormUtils.submitForm({ replaceState: pageLoading });
        }

        function setToken(name, value) {
            defaultTokenModel.set(name, value);
            submittedTokenModel.set(name, value);
        }

        function unsetToken(name) {
            defaultTokenModel.unset(name);
            submittedTokenModel.unset(name);
        }



        //
        // SEARCH MANAGERS
        //


var search1 = new SearchManager({
            "id": "search1",
            "search": "index=_internal sourcetype=splunkd log_level!=\"INFO\" |  stats count by component",
            "earliest_time": "-24h@h",
            "cancelOnUnload": true,
            "status_buckets": 0,
            "sample_ratio": 1,
            "latest_time": "now",
            "app": utils.getCurrentApp(),
            "auto_cancel": 90,
            "preview": true,
            "tokenDependencies": {
            },
            "runWhenTimeIsUndefined": false
        }, {tokens: true, tokenNamespace: "submitted"});


        //
        // SPLUNK LAYOUT
        //

        $('header').remove();
        new LayoutView({"hideAppBar": false, "hideChrome": false, "hideFooter": false, "hideSplunkBar": false})
            .render()
            .getContainerElement()
            .appendChild($('.dashboard-body')[0]);

        //
        // DASHBOARD EDITOR
        //

        new Dashboard({
            id: 'dashboard',
            el: $('.dashboard-body'),
            showTitle: true,
            editable: true
        }, {tokens: true}).render();


        //
        // VIEWS: VISUALIZATION ELEMENTS
        //

        var element1 = new TableElement({
            "id": "element1",
            "count": 20,
            "dataOverlayMode": "none",
            "drilldown": "cell",
            "percentagesRow": "false",
            "rowNumbers": "false",
            "totalsRow": "false",
            "wrap": "true",
            "managerid": "search1",
            "el": $('#element1')
        }, {tokens: true, tokenNamespace: "submitted"}).render();

        element1.on("click", function(e) {
            if (e.field !== undefined) {
                e.preventDefault();
                var url = TokenUtils.replaceTokenNames("{{SPLUNKWEB_URL_PREFIX}}/app/search/search?q=index=_internal sourcetype=splunkd log_level!=\"INFO\" $click.name$=\"$click.value$\"", _.extend(submittedTokenModel.toJSON(), e.data), TokenUtils.getEscaper('url'), TokenUtils.getFilters(mvc.Components));
                utils.redirect(url, false, "_blank");
            }
        });

        // Initialize time tokens to default
        if (!defaultTokenModel.has('earliest') && !defaultTokenModel.has('latest')) {
            defaultTokenModel.set({ earliest: '0', latest: '' });
        }

        submitTokens();


        //
        // DASHBOARD READY
        //

        DashboardController.ready();
        pageLoading = false;

    }
);
// ]]>
</script>
</body>
</html>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma
Reply
Solved! Jump to solution

kdimaria
Communicator
‎11-09-2017 03:43 AM

Thanks, I knew how to do it this was but was hoping there would be a different way by changing the drilldown option in the table element.

0 Karma
Reply
Solved! Jump to solution

niketn
Legend
‎11-09-2017 03:53 AM

Hi they are available in Simple XML or with Simple XML JS Extension but not with HTML dashboard. 😞

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma
Reply
Solved! Jump to solution

kdimaria
Communicator
‎11-09-2017 04:19 AM

Yeah 😞 I should probably start using XML instead of HTML for my dashboards haha

0 Karma
Reply
Solved! Jump to solution

niketn
Legend
‎11-09-2017 05:34 AM

Simple XML will get you out of most of complicated situations through CSS Extension, JavaScript Extension and Splunk JS Stack. Once you switch to HTML you have complete control of your dashboard and virtually you open up Splunk Dashboard for full fledged web development. However, you have to be really get used to the "extra line of code" (which were abstract in Simple XML). With that trade off in mind. Code as much as possible in Simple XML and switch to HTML only if unavoidable or when dashboard is stable and almost final.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma
Reply
Solved! Jump to solution

sbbadri
Motivator
‎11-08-2017 11:03 AM

@kdimaria

<form>
<label>test_drilldown_new_page</label>
<fieldset submitButton="true">
<input type="time" token="ttok" searchWhenChanged="true">
<label>select a time range</label>
<default>
<earliest>-15m</earliest>
<latest>now</latest>
</default>
</input>
</fieldset>
<row>
<panel>
<table>
<search>
<query>index=_internal | stats count by sourcetype</query>
<earliest>$ttok.earliest$</earliest>
<latest>$ttok.latest$</latest>
</search>
<option name="count">15</option>
<option name="displayRowNumbers">false</option>
<option name="showPager">true</option>
<drilldown target="blank">
<link>
<![CDATA[
/app/testapp/search?q=search index=_internal sourcetype=$row.sourcetype$ earliest=$earliest$ latest=$latest$
]]>
</link>
</drilldown>

</table>
</panel>
</row>
</form>

0 Karma
Reply
Solved! Jump to solution

kamlesh_vaghela
SplunkTrust
SplunkTrust
‎11-08-2017 10:30 AM

HI

Can you please try below XML??

<dashboard>
  <label>HTML</label>
  <description></description>
  <row>
    <panel>
      <html>
        <table>
          <tr><td><a target="_blank" href="/app/splunk_answer_app/search?earliest=-15m&amp;latest=now&amp;q=search%20index%3D_internal%20%20%7C%20stats%20count%20as%20AA%20by%20sourcetype"> Click Me</a></td></tr>
        </table>
       </html>
    </panel>
  </row>
</dashboard>

Thanks

Reply
Solved! Jump to solution

kdimaria
Communicator
‎11-08-2017 10:35 AM

my dashboard is not coded in XML.. I have a dashboard completely coded in HTML and JS. with search elements that have a field called "drilldown" and it can be set to row or none..I'm not sure what else.

0 Karma
Reply
Solved! Jump to solution

akheraj_splunk
Splunk Employee
Splunk Employee
‎11-08-2017 10:42 AM

You may need to create a click event handler and set preventDefault();

See this example of custom handlers:
http://dev.splunk.com/view/webframework-codeexamples/SP-CAAAEV8

0 Karma
Reply
Solved! Jump to solution

kdimaria
Communicator
‎11-08-2017 11:00 AM

is there not an easier way of doing this? Isn't there some other drilldown option where it just opens a new window instead of changing the current one?

0 Karma
Reply
Solved! Jump to solution

akheraj_splunk
Splunk Employee
Splunk Employee
‎11-08-2017 09:59 AM

Yes, change the link target.

https://docs.splunk.com/Documentation/Splunk/7.0.0/Viz/DrilldownLinkToDashboard#Open_the_target_in_a...

0 Karma
Reply
Solved! Jump to solution

kdimaria
Communicator
‎11-08-2017 10:18 AM

I tried adding "drilldown": "blank" to my search element and that does not work..

0 Karma
Reply
Solved! Jump to solution

kdimaria
Communicator
‎11-08-2017 10:19 AM

also it is coded in HTML so i don't know if this makes a difference..

0 Karma
Reply
Get Updates on the Splunk Community!

New in Observability - Improvements to Custom Metrics SLOs, Log Observer Connect & ...

The latest enhancements to the Splunk observability portfolio deliver improved SLO management accuracy, better ...

Improve Data Pipelines Using Splunk Data Management

  Register Now   This Tech Talk will explore the pipeline management offerings Edge Processor and Ingest ...

3-2-1 Go! How Fast Can You Debug Microservices with Observability Cloud?

Register Join this Tech Talk to learn how unique features like Service Centric Views, Tag Spotlight, and ...