Dashboards & Visualizations

How can I have tabs with different views in a dashboard panel in Splunk 6.1.2?

HattrickNZ
Motivator

I have the below code and this is a panel in a dashboard that shows a chart.

What I want to be able to do is add a tab so that I can have 2 tabs in the one panel. For example, Tab1 will be the view below a chart and Tab2 will be the same but it will be in a table visualization and not a chart. How can i achieve this?

<row>
    <panel>
      <chart>
        <title>title_123</title>
        <searchString> <MY_SEARCH_STRING_GOES_HERE> </searchString>
        <earliestTime>rt-2d</earliestTime>
        <latestTime>rtnow</latestTime>
        <option name="charting.axisLabelsX.majorLabelStyle.overflowMode">ellipsisNone</option>
        <option name="charting.axisLabelsX.majorLabelStyle.rotation">0</option>
        <option name="charting.axisTitleX.visibility">visible</option>
        <option name="charting.axisTitleY.visibility">visible</option>
        <option name="charting.axisTitleY2.visibility">visible</option>
        <option name="charting.axisX.scale">linear</option>
        <option name="charting.axisY.maximumNumber">100</option>
        <option name="charting.axisY.scale">linear</option>
        <option name="charting.axisY2.enabled">false</option>
        <option name="charting.axisY2.scale">inherit</option>
        <option name="charting.chart">line</option>
        <option name="charting.chart.nullValueMode">gaps</option>
        <option name="charting.chart.sliceCollapsingThreshold">0.01</option>
        <option name="charting.chart.stackMode">default</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">ellipsisStart</option>
        <option name="charting.legend.placement">right</option>
      </chart>
    </panel>
  </row>
1 Solution

stephanefotso
Motivator

Haa ok. I understand HattrickNZ. See bellow an example which can help you, i hope. It is working, just test it.And if you wish to use the autodiscover, let me know, i will help you.
Just put the js file in $SPLUNK_HOME$/etc/apps/your_app_name/appserver/static folder, and don't forget to restart SPLUNK.
Let's go

costum_link_switcher.xml

<dashboard script="link_switcher.js">
    <label>Link Switcher</label>
    <row grouping="4">
        <html>
            <!-- Placeholder/container for the link switcher to appear -->
            <div class="link-switcher" data-items="link1,link2,link3">Select a view: <!--Links go here--></div>
        </html>
        <table id="link1">
            <title>Table</title>
            <searchString>index=_internal | stats count by sourcetype</searchString>
            <earliestTime>-24h</earliestTime>
        </table>
        <chart id="link2">
            <title>Chart</title>
            <searchString>index=_internal | stats count by sourcetype</searchString>
            <earliestTime>-24h</earliestTime>
        </chart>
        <map id="link3">
            <title>Map</title>
            <searchString>| inputlookup geomaps_data.csv | iplocation device_ip | geostats latfield=lat longfield=lon count by method</searchString>
            <earliestTime>0</earliestTime>
            <option name="mapping.map.center">(30.810646,-10.556976)</option>
            <option name="mapping.map.zoom">2</option>
        </map>
    </row>

</dashboard>

link_switcher.js

/*
 * 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();
    });
});
SGF

View solution in original post

joshua_hart1
Path Finder

Not sure if this is more in line with what you're looking for, but this latest Splunk blog entry shows a slick way of adding tabs to a panel: http://blogs.splunk.com/2015/03/30/making-a-dashboard-with-tabs-and-searches-that-run-when-clicked/

stephanefotso
Motivator

Haa ok. I understand HattrickNZ. See bellow an example which can help you, i hope. It is working, just test it.And if you wish to use the autodiscover, let me know, i will help you.
Just put the js file in $SPLUNK_HOME$/etc/apps/your_app_name/appserver/static folder, and don't forget to restart SPLUNK.
Let's go

costum_link_switcher.xml

<dashboard script="link_switcher.js">
    <label>Link Switcher</label>
    <row grouping="4">
        <html>
            <!-- Placeholder/container for the link switcher to appear -->
            <div class="link-switcher" data-items="link1,link2,link3">Select a view: <!--Links go here--></div>
        </html>
        <table id="link1">
            <title>Table</title>
            <searchString>index=_internal | stats count by sourcetype</searchString>
            <earliestTime>-24h</earliestTime>
        </table>
        <chart id="link2">
            <title>Chart</title>
            <searchString>index=_internal | stats count by sourcetype</searchString>
            <earliestTime>-24h</earliestTime>
        </chart>
        <map id="link3">
            <title>Map</title>
            <searchString>| inputlookup geomaps_data.csv | iplocation device_ip | geostats latfield=lat longfield=lon count by method</searchString>
            <earliestTime>0</earliestTime>
            <option name="mapping.map.center">(30.810646,-10.556976)</option>
            <option name="mapping.map.zoom">2</option>
        </map>
    </row>

</dashboard>

link_switcher.js

/*
 * 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();
    });
});
SGF

HattrickNZ
Motivator

tks @stephanefotso, but i have access to the files of Custom Link Switcher dashboard in Splunk 6.x Dashboad Example but that is on my own macine where I have splunk installed, but it is out of indexing licence. Can i uninstall and reinstall? Will this give me a new licence so I can use this for testing?

On the splunk server i am working on I can't have access to the live splunk server at present. So I can't put all the files on where I want. Not sure the best way around this? Can you advise?

0 Karma

stephanefotso
Motivator

Yes you can uninstall and reinstall splunk. You will get a new free licence for 60 days, and you could be able to test the above code.

SGF
0 Karma

HattrickNZ
Motivator

many thanks @stephanefotso Can i include the code in the simple xml? or can i only have xml in that?
For example is there some way I can use tags to enclose my js or css code?

0 Karma

stephanefotso
Motivator

No! you can't. The same Xml file include all your tabs. For example in the above xml, you have three tags: link1, link2 and link3 handled in the same js file.

SGF
0 Karma

stephanefotso
Motivator

Hello! Are you satisfy by the answer? if yes, don't forget to vote or accept it.
Thanks

SGF
0 Karma

stephanefotso
Motivator

I think the Custom Link Switcher dashboard in Splunk 6.x Dashboad Example app could help you. Take a look at it.

SGF
0 Karma

HattrickNZ
Motivator

tks @stephanefotso I also need these files for it to work. autodiscover.js link_switcher.js linkswitcher.js

$ pwd
/cygdrive/c/Program Files/Splunk/etc/apps/simple_xml_examples

$ find . -name autodiscover.js
./appserver/static/autodiscover.js

$ find . -name 'link_switcher.js'
./appserver/static/link_switcher.js

$ find . -name 'linkswitcher.js'
./appserver/static/components/linkswitcher/linkswitcher.js
0 Karma
Get Updates on the Splunk Community!

Adoption of RUM and APM at Splunk

    Unleash the power of Splunk Observability   Watch Now In this can't miss Tech Talk! The Splunk Growth ...

March Community Office Hours Security Series Uncovered!

Hello Splunk Community! In March, Splunk Community Office Hours spotlighted our fabulous Splunk Threat ...

Stay Connected: Your Guide to April Tech Talks, Office Hours, and Webinars!

Take a look below to explore our upcoming Community Office Hours, Tech Talks, and Webinars in April. This post ...