Solved: Dashboard - set/unset token issue

andreac81 · ‎07-07-2017

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

sbbadri · ‎07-07-2017

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 · ‎07-07-2017

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);
            }
        }
    });
});

Dashboard - set/unset token issue

New This Month in Splunk Observability Cloud - Metrics Usage Analytics, Enhanced K8s ...

Alerting Best Practices: How to Create Good Detectors

Discover Powerful New Features in Splunk Cloud Platform: Enhanced Analytics, ...