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!

Splunk Observability Cloud | Unified Identity - Now Available for Existing Splunk ...

Raise your hand if you’ve already forgotten your username or password when logging into an account. (We can’t ...

Index This | How many sides does a circle have?

February 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

Registration for Splunk University is Now Open!

Are you ready for an adventure in learning?   Brace yourselves because Splunk University is back, and it's ...