Dashboards & Visualizations
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 
Ask a Question
Solved! Jump to solution

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

HattrickNZ
Motivator
‎03-11-2015 03:29 PM

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>
Reply
1 Solution
Solved! Jump to solution
Solution

stephanefotso
Motivator
‎03-13-2015 08:15 AM

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

Reply
Solved! Jump to solution

joshua_hart1
Path Finder
‎08-21-2015 08:04 AM

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/

Reply
Solved! Jump to solution
Solution

stephanefotso
Motivator
‎03-13-2015 08:15 AM

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
Reply
Solved! Jump to solution

HattrickNZ
Motivator
‎03-15-2015 01:05 PM

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
Reply
Solved! Jump to solution

stephanefotso
Motivator
‎03-15-2015 03:36 PM

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
Reply
Solved! Jump to solution

HattrickNZ
Motivator
‎03-15-2015 03:40 PM

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
Reply
Solved! Jump to solution

stephanefotso
Motivator
‎03-15-2015 04:18 PM

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
Reply
Solved! Jump to solution

stephanefotso
Motivator
‎03-26-2015 07:13 AM

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

SGF
0 Karma
Reply
Solved! Jump to solution

stephanefotso
Motivator
‎03-11-2015 06:01 PM

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
Reply
Solved! Jump to solution

HattrickNZ
Motivator
‎03-12-2015 03:53 PM

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
Reply
Get Updates on the Splunk Community!

Monitoring Amazon Elastic Kubernetes Service (EKS)

As we’ve seen, integrating Kubernetes environments with Splunk Observability Cloud is a quick and easy way to ...

Cloud Platform & Enterprise: Classic Dashboard Export Feature Deprecation

As of Splunk Cloud Platform 9.3.2408 and Splunk Enterprise 9.4, classic dashboard export features are now ...

Explore the Latest Educational Offerings from Splunk (November Releases)

At Splunk Education, we are committed to providing a robust learning experience for all users, regardless of ...