Is there functionality like LinkSwitcher in Splunk...

anantdeshpande · ‎07-19-2017

Hi,
I am using Splunk 6.2 version. I have created two dashboards. One for incoming transactions and other for outgoing transactions.
The search criteria (tokens) and query for both dashboards is completely different. I do not want two separate dashboards now.

Can we do something using simple XML to club these two dashboards in one (Something like LinkSwitcher unfortunately which is not available in 6.2 version)?

Single click should change my dashboard.

anantdeshpande · ‎07-23-2017

Hi all,
I am able to club two dashboards using drop down tokens and depends clause in simple XML.

guilmxm · ‎07-19-2017

Hi,

An earlier version of the Simple xml application used to provide a javascript extension that does what you want:

https://splunkbase.splunk.com/app/1603/

I think probably the version 6.0, the view "custom_token_links" should contain an example.

I still have that code:

/*
 * Simple link switcher implementation which uses jQuery to inject the switcher elements
 */
require([
    'underscore',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc) {

    $('.link-switcher').each(function() {
        var linkSwitcherContainer = $(this);

        // Grab component instances for the specified item IDs
        var elements = _(linkSwitcherContainer.data('items').split(',')).map(function(id) {
            return mvc.Components.get($.trim(id));
        });

        // Hide all but the first element
        _(elements).chain().each(function(el) {

            var link = $('<a href="#" class="btn-pill"></a>').appendTo(linkSwitcherContainer);
            // Use the title of the dashboard element for the link text
            link.text(el.settings.get('title'));
            // Clear the title of the dashboard element
            el.settings.unset('title');

            link.click(function(e) {
                e.preventDefault();

                // Reset the selected link
                linkSwitcherContainer.find('a.active').removeClass('active');
                // Hide all views
                _(elements).chain().pluck('$el').invoke('hide');

                // Mark clicked link as active
                link.addClass('active');
                // Show the view
                el.$el.show().css({ width: '100%' });

                // Force charts to redraw
                $(window).trigger('resize');
            });

        }).pluck('$el').invoke('hide'); // Hide all elements initially

        // Activate the first link and view by simulating a click on the first link
        linkSwitcherContainer.find('a:first').click();
    });

});

To be saved in a JS file, example "link_switcher.js", then in your dashboard you call the script:

<form script="link_switcher.js">

That you will use the following way:

<row depends="$charting$">
    <panel id="process">
        <title>Paging statistics</title>
        <html>
            <!-- Placeholder/container for the link switcher to appear -->
            <div class="link-switcher" data-items="link10,link11,link12">Select a view:<!--Links go here-->
            </div>
        </html>
        <chart id="link10">
            <title>Pages In / Pages Out (pgsin / pgsout, pgin / pgout)</title>
            <search base="timeStats">
                <query>fields _time,pgsin*,pgsout*,pgin*,pgout*</query>
            </search>
            <option name="charting.axisTitleX.visibility">visible</option>
            <option name="charting.axisTitleY.visibility">visible</option>
            <option name="charting.axisX.scale">linear</option>
            <option name="charting.axisY.scale">linear</option>
            <option name="charting.chart">$chart$</option>
            <option name="charting.chart.nullValueMode">$charting.chart.nullValueMode$</option>
            <option name="charting.chart.sliceCollapsingThreshold">0.01</option>
            <option name="charting.chart.stackMode">$chart.stackingmode$</option>
            <option name="charting.chart.style">shiny</option>
            <option name="charting.drilldown">all</option>
            <option name="charting.layout.splitSeries">0</option>
            <option name="charting.legend.labelStyle.overflowMode">ellipsisMiddle</option>
            <option name="charting.legend.placement">$charting.legend.placement$</option>
            <option name="height">680</option>
            <option name="charting.axisTitleX.text">Time</option>
            <option name="charting.axisY.minimumNumber">0</option>
            <option name="charting.axisTitleY.text">Pages</option>
        </chart>
        <chart id="link11">
            <title>Fs In / Fs Out (sum of pgin/pgsin and pgout/pgsout per interval)</title>
            <search base="timeStats">
                <query>fields _time,fsin*,fsout*</query>
            </search>
            <option name="charting.axisTitleX.visibility">visible</option>
            <option name="charting.axisTitleY.visibility">visible</option>
            <option name="charting.axisX.scale">linear</option>
            <option name="charting.axisY.scale">linear</option>
            <option name="charting.chart">$chart$</option>
            <option name="charting.chart.nullValueMode">$charting.chart.nullValueMode$</option>
            <option name="charting.chart.sliceCollapsingThreshold">0.01</option>
            <option name="charting.chart.stackMode">$chart.stackingmode$</option>
            <option name="charting.chart.style">shiny</option>
            <option name="charting.drilldown">all</option>
            <option name="charting.layout.splitSeries">0</option>
            <option name="charting.legend.labelStyle.overflowMode">ellipsisMiddle</option>
            <option name="charting.legend.placement">$charting.legend.placement$</option>
            <option name="height">680</option>
            <option name="charting.axisTitleX.text">Time</option>
            <option name="charting.axisY.minimumNumber">0</option>
            <option name="charting.axisTitleY.text">Pages</option>
        </chart>

etc.

The key is the "html" element within the row and then you add a relevant ID to each element.

But check the Simple xml app as well.

Guilhem

Is there functionality like LinkSwitcher in Splunk 6.2 version, but using Simple XML instead?

Introducing the 2024 Splunk MVPs!

Splunk Custom Visualizations App End of Life

Introducing Splunk Enterprise 9.2