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!

Webinar Recap | Revolutionizing IT Operations: The Transformative Power of AI and ML ...

The Transformative Power of AI and ML in Enhancing Observability   In the realm of IT operations, the ...

.conf24 | Registration Open!

Hello, hello! I come bearing good news: Registration for .conf24 is now open!   conf is Splunk’s rad annual ...

ICYMI - Check out the latest releases of Splunk Edge Processor

Splunk is pleased to announce the latest enhancements to Splunk Edge Processor.  HEC Receiver authorization ...