Dashboards & Visualizations

Best way to add tabs into dashboards?

snix
Communicator

Looking for a actively supporting solution that will allow me to add tabs into my dashboard to break up panels not just for organization but to also prevent all the panels from running at the same time once the dashboard is open. I would prefer the panels to only run when the tab is clicked on relative to the panels shown under that tab.

Tags (1)

sbbadri
Motivator

Check out - Splunk 6.x Dashboard Examples app from splunk base - https://splunkbase.splunk.com/app/1603/

Below is the sample for link switcher/tab switcher

<form>
    <label>Link Switcher</label>
    <description>Toggle dashboard content using a list of links.</description>
    <fieldset submitButton="false">
        <input type="link" token="unused">
            <label>Choose a view</label>
            <choice value="table">Table</choice>
            <choice value="chart">Chart</choice>
            <choice value="map">Map</choice>
            <default>Table</default>
            <change>
                <condition value="table">
                    <set token="showTable">true</set>
                    <unset token="showChart"></unset>
                    <unset token="showMap"></unset>
                </condition>
                <condition value="chart">
                    <set token="showChart">true</set>
                    <unset token="showTable"></unset>
                    <unset token="showMap"></unset>
                </condition>
                <condition value="map">
                    <set token="showMap">true</set>
                    <unset token="showChart"></unset>
                    <unset token="showTable"></unset>
                </condition>
            </change>
        </input>
    </fieldset>
    <row>
        <panel>
            <table depends="$showTable$">
                <title>Table</title>
                <search>
                    <query>index=_internal | stats count by sourcetype</query>
                    <earliest>-24h</earliest>
                    <latest>now</latest>
                </search>
            </table>
            <chart depends="$showChart$">
                <title>Chart</title>
                <search>
                    <query>index=_internal | stats count by sourcetype</query>
                    <earliest>-24h</earliest>
                    <latest>now</latest>
                </search>
            </chart>
            <map depends="$showMap$">
                <title>Map</title>
                <search>
                    <query>| inputlookup geomaps_data.csv | iplocation device_ip | geostats latfield=lat longfield=lon count by method</query>
                    <earliest>0</earliest>
                    <latest>now</latest>
                </search>
                <option name="mapping.map.center">(30.810646,-10.556976)</option>
                <option name="mapping.map.zoom">2</option>
            </map>
        </panel>
</row>
    <row>
        <panel>
            <input type="link" token="needed">
                <label>Choose a sourcetype:</label>
                <choice value="link4">Internal Event Count</choice>
                <choice value="link5">Splunk Event Count</choice>
                <default>Internal Event Count</default>
                <change>
                    <condition value="link4">
                        <set token="showInternal">true</set>
                        <unset token="showSplunkd"></unset>
                    </condition>
                    <condition value="link5">
                        <unset token="showInternal"></unset>
                        <set token="showSplunkd">true</set>
                    </condition>
                </change>
            </input>
                <single depends="$showInternal$">
                    <title>Internal event count</title>
                    <search>
                        <query>index=_internal | stats count</query>
                        <earliest>-24h</earliest>
                        <latest>now</latest>
                    </search>
                </single>
                <single depends="$showSplunkd$">
                    <title>Splunkd event count</title>
                    <search>
                        <query>index=_internal sourcetype=splunkd | stats count</query>
                        <earliest>-24h</earliest>
                        <latest>now</latest>
                    </search>
                </single>
        </panel>
    </row>
</form>

paramagurukarth
Builder

If you want four tabs...
Create four individual views (xml)
Create a custom module with four tabs using html ul & li elements. attach an
on click event to those tabs and load individual views inside an iframe when you got a click on the tabs

0 Karma

snix
Communicator

http://blogs.splunk.com/2015/03/30/making-a-dashboard-with-tabs-and-searches-that-run-when-clicked/

Okay I found this blog post on how to do what I am asking here and it seems simple enough that even I can understand and was able to get tabs working. The only problem is as soon as I reference the tabs.js and .css files in the it makes the tabs actually function but all the panels just say "Search is waiting for input...".

Tried taking the code all the way down to a simple single panel just in case I put something strange in and still have the same problem I even noticed it shows up on the Tabs Example app provided in the post.

What could be causing this?

0 Karma

rphillips_splk
Splunk Employee
Splunk Employee

in the tabs example Step 1, click the submit button

0 Karma

snix
Communicator

Thanks for replying back, I had answered that on another post and forgot to post that here as well but yes that was the trick. I felt so dumb after I realized there was a submit button. All my current views run automatically so I didn't even think to try hahah 😉

0 Karma

jackson1990
Path Finder

Hi snix,i tried implementing tabs in my dashboard using the blog link you have posted.The problem which i am facing is the rows binded to data-elements are not displayed/hided properly in the first run.While i run for the first time,the dashboard shows all the row,irrespective of whether its binded to the tab or tab.can you provide the solution for this if you have?

0 Karma

iKate
Builder

@jackson1990 did you find way to solve the problem? I've got the same issue.

0 Karma
Get Updates on the Splunk Community!

Introducing the 2024 SplunkTrust!

Hello, Splunk Community! We are beyond thrilled to announce our newest group of SplunkTrust members!  The ...

Introducing the 2024 Splunk MVPs!

We are excited to announce the 2024 cohort of the Splunk MVP program. Splunk MVPs are passionate members of ...

Splunk Custom Visualizations App End of Life

The Splunk Custom Visualizations apps End of Life for SimpleXML will reach end of support on Dec 21, 2024, ...