Dashboards & Visualizations

Dashboard - set/unset token issue

andreac81
Explorer

Hi to all,

I copied a splunk installation by a server to antoher (inclusive of apps, dasboards,...).
A dasboard should show some panels only when a token is passed (when a link in pressed), but when i press the link nothing happen.

In dashboard code there is

  <row depends="$showJboss$">
    <panel>

Following code used in th link that should open the panel

<a class="btn-pill1" href="#" data-unset-token="showVarnish,showJboss" data-token-json="{ &quot;showJboss&quot;: &quot;rename comment as show&quot;, &quot;showDropdown&quot;: &quot;rename comment as show&quot; }">JBOSS </a>

The XML code is the same of the dashbord that in other server correctly works, so I think the issue is not in XML code but elsewhere.

What can I check to identify the issue?

Thanks,
Andrea

Tags (1)
0 Karma
1 Solution

sbbadri
Motivator

Check below links,

https://docs.splunk.com/Documentation/Splunk/6.6.2/Viz/tokens
https://splunkbase.splunk.com/app/1603/ - Splunk 6.x Dashboard Examples - Below example is from this app

<dashboard script="tokenlinks.js">
    <label>Token Links</label>
    <search id="base1">
        <query>index=_internal | timechart count by sourcetype</query>
        <earliest>-24h</earliest>
        <latest>now</latest>
    </search>
    <search id="base2">
        <query>index=_internal | timechart count by sourcetype</query>
        <earliest>-24h</earliest>
        <latest>now</latest>
    </search>
    <row>
        <panel>
            <title>Link Switcher Example</title>
            <html>
                <!-- Set the $show_chart$ token when the link is clicked, also unset the $show_table$ token -->
                <a href="#" class="btn-pill" data-set-token="show_chart" data-value="show" data-unset-token="show_table">
                    Show Chart
                </a>
                <!-- Set the $show_table$ token when the link is clicked, also unset the $show_chart$ token -->
                <a href="#" class="btn-pill" data-set-token="show_table" data-value="show" data-unset-token="show_chart">
                    Show Table
                </a>
                <!-- Unset both the $show_chart$ and $show_table$ token when the link is clicked -->
                <a href="#" class="btn-pill" data-token-json='{"show_table": null, "show_chart": null}'>Hide All</a>
            </html>
            <chart depends="$show_chart$">
                <search base="base1"/>
            </chart>
            <table depends="$show_table$">
                <search base="base1"/>
            </table>
            <html rejects="$show_chart$, $show_table$">
                <p>Click on one of the links above to select which visualization to show.</p>
            </html>
        </panel>
    </row>

    <row>
        <panel>
            <title>Button Switcher Example</title>
            <chart>
                <search base="base2"/>
            </chart>
            <html>
                <button class="btn" data-set-token="show_details" data-value="show">Show Details</button>
            </html>
        </panel>

        <!-- The panel is only shown once the user clicks on the button and the $show_details$ token is set -->
        <panel depends="$show_details$">
            <table>
                <title>Details</title>
                <search base="base2"/>
            </table>
            <html>
                <h2>Sample Description</h2>
                <p>This is some sample description that only shows up if you click on the "Show Details" button.</p>
                <button class="btn" data-unset-token="show_details">Hide Details</button>
            </html>
        </panel>
    </row>
</dashboard>

tokenlink.js

require(['jquery', 'underscore', 'splunkjs/mvc', 'util/console'], function($, _, mvc, console) {
    function setToken(name, value) {
        console.log('Setting Token %o=%o', name, value);
        var defaultTokenModel = mvc.Components.get('default');
        if (defaultTokenModel) {
            defaultTokenModel.set(name, value);
        }
        var submittedTokenModel = mvc.Components.get('submitted');
        if (submittedTokenModel) {
            submittedTokenModel.set(name, value);
        }
    }
    $('.dashboard-body').on('click', '[data-set-token],[data-unset-token],[data-token-json]', function(e) {
        e.preventDefault();
        var target = $(e.currentTarget);
        var setTokenName = target.data('set-token');
        if (setTokenName) {
            setToken(setTokenName, target.data('value'));
        }
        var unsetTokenName = target.data('unset-token');
        if (unsetTokenName) {
            setToken(unsetTokenName, undefined);
        }
        var tokenJson = target.data('token-json');
        if (tokenJson) {
            try {
                if (_.isObject(tokenJson)) {
                    _(tokenJson).each(function(value, key) {
                        if (value == null) {
                            // Unset the token
                            setToken(key, undefined);
                        } else {
                            setToken(key, value);
                        }
                    });
                }
            } catch (e) {
                console.warn('Cannot parse token JSON: ', e);
            }
        }
    });
});

View solution in original post

sbbadri
Motivator

Check below links,

https://docs.splunk.com/Documentation/Splunk/6.6.2/Viz/tokens
https://splunkbase.splunk.com/app/1603/ - Splunk 6.x Dashboard Examples - Below example is from this app

<dashboard script="tokenlinks.js">
    <label>Token Links</label>
    <search id="base1">
        <query>index=_internal | timechart count by sourcetype</query>
        <earliest>-24h</earliest>
        <latest>now</latest>
    </search>
    <search id="base2">
        <query>index=_internal | timechart count by sourcetype</query>
        <earliest>-24h</earliest>
        <latest>now</latest>
    </search>
    <row>
        <panel>
            <title>Link Switcher Example</title>
            <html>
                <!-- Set the $show_chart$ token when the link is clicked, also unset the $show_table$ token -->
                <a href="#" class="btn-pill" data-set-token="show_chart" data-value="show" data-unset-token="show_table">
                    Show Chart
                </a>
                <!-- Set the $show_table$ token when the link is clicked, also unset the $show_chart$ token -->
                <a href="#" class="btn-pill" data-set-token="show_table" data-value="show" data-unset-token="show_chart">
                    Show Table
                </a>
                <!-- Unset both the $show_chart$ and $show_table$ token when the link is clicked -->
                <a href="#" class="btn-pill" data-token-json='{"show_table": null, "show_chart": null}'>Hide All</a>
            </html>
            <chart depends="$show_chart$">
                <search base="base1"/>
            </chart>
            <table depends="$show_table$">
                <search base="base1"/>
            </table>
            <html rejects="$show_chart$, $show_table$">
                <p>Click on one of the links above to select which visualization to show.</p>
            </html>
        </panel>
    </row>

    <row>
        <panel>
            <title>Button Switcher Example</title>
            <chart>
                <search base="base2"/>
            </chart>
            <html>
                <button class="btn" data-set-token="show_details" data-value="show">Show Details</button>
            </html>
        </panel>

        <!-- The panel is only shown once the user clicks on the button and the $show_details$ token is set -->
        <panel depends="$show_details$">
            <table>
                <title>Details</title>
                <search base="base2"/>
            </table>
            <html>
                <h2>Sample Description</h2>
                <p>This is some sample description that only shows up if you click on the "Show Details" button.</p>
                <button class="btn" data-unset-token="show_details">Hide Details</button>
            </html>
        </panel>
    </row>
</dashboard>

tokenlink.js

require(['jquery', 'underscore', 'splunkjs/mvc', 'util/console'], function($, _, mvc, console) {
    function setToken(name, value) {
        console.log('Setting Token %o=%o', name, value);
        var defaultTokenModel = mvc.Components.get('default');
        if (defaultTokenModel) {
            defaultTokenModel.set(name, value);
        }
        var submittedTokenModel = mvc.Components.get('submitted');
        if (submittedTokenModel) {
            submittedTokenModel.set(name, value);
        }
    }
    $('.dashboard-body').on('click', '[data-set-token],[data-unset-token],[data-token-json]', function(e) {
        e.preventDefault();
        var target = $(e.currentTarget);
        var setTokenName = target.data('set-token');
        if (setTokenName) {
            setToken(setTokenName, target.data('value'));
        }
        var unsetTokenName = target.data('unset-token');
        if (unsetTokenName) {
            setToken(unsetTokenName, undefined);
        }
        var tokenJson = target.data('token-json');
        if (tokenJson) {
            try {
                if (_.isObject(tokenJson)) {
                    _(tokenJson).each(function(value, key) {
                        if (value == null) {
                            // Unset the token
                            setToken(key, undefined);
                        } else {
                            setToken(key, value);
                        }
                    });
                }
            } catch (e) {
                console.warn('Cannot parse token JSON: ', e);
            }
        }
    });
});
Get Updates on the Splunk Community!

What's new in Splunk Cloud Platform 9.1.2312?

Hi Splunky people! We are excited to share the newest updates in Splunk Cloud Platform 9.1.2312! Analysts can ...

What’s New in Splunk Security Essentials 3.8.0?

Splunk Security Essentials (SSE) is an app that can amplify the power of your existing Splunk Cloud Platform, ...

Let’s Get You Certified – Vegas-Style at .conf24

Are you ready to level up your Splunk game? Then, let’s get you certified live at .conf24 – our annual user ...