Dashboards & Visualizations

How to create tabs in Splunk dashboard without admin access?

Hi,
I am having multiple charts and table in my dashboard. Currently based on drop down I Show/Hide the panels.

But what I am trying is to have TABS, just like we have in browsers (UI render can differ 🙂 ), diving related charts in separate tabs.

I saw couple of answers/blog @lukeMurphy , but everywhere it need javascript and modules which need to be placed in splunk deployment server.

I don't have access to deployment server. Is there a way to have those javascript, or used any module to have TABS in my dashboard.

Since, I have a server,which forwards data to splunk using splunk forwarded., I do something like below location in my server:

/splunkforwarder/bin
/splunkforwarder/etc/apps

Let me know if these help 😞

0 Karma

Splunk Employee
Splunk Employee

The answer is via a jquery-ui library and function [$( "#tabs" ).tabs();]. Go to: https://jqueryui.com/tabs/#default and they layout what you need to do without adding files to the servers.

Engager

@gstultz_splunk Could you provide an example of how to embed the tab HTML inside of Splunks XML?

0 Karma

Legend

@trb48 refer to one of my recent answers on using Link input with Simple XML CSS Extension to make them appear as tabs. (No JS Required)

https://community.splunk.com/t5/Dashboards-Visualizations/How-can-we-create-Tabs-using-Link-List-in-...

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

Splunk Employee
Splunk Employee

@niketnilay As with a lot of things in Splunk, there are multiple ways to accomplish a task where simplicity is in the mind of the beholder.  And when it comes to dashboards, simplicity rules in order to facilitate quick rendering and efficient trouble shooting.  Using your method, how much could you reduce your code to simply create three tabs, label them, include simple text on each page and switch between them?  

Using the jqueryUI, you really don't need to know javaScript.  All you need to do is reference the libraries, list the tab function, and create the HTML to take advantage of the tab functionality.  Which, answering the question I posed, takes all of 21 lines (give or take depending upon how you want to format the HTML).

"

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Tabs - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#tabs" ).tabs();
} );
</script>
</head>
<body>

<div id="tabs">
<ul>
<li><a href="#tabs-1">Nunc tincidunt</a></li>
<li><a href="#tabs-2">Proin dolor</a></li>
<li><a href="#tabs-3">Aenean lacinia</a></li>
</ul>
<div id="tabs-1">
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. </p>
</div>
<div id="tabs-2">
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc.</p>
</div>

"

 
0 Karma

Legend

@gstultz_splunk I am aware of multiple solutions to single problem and that is indeed the charm 😃. I had answered with respect to the current question (and simplicity in mind), which requires no static file to be placed on Splunk server as that requires admin access. The approach I have proposed requires only Simple XML (with CSS extension within Simple XML and no JS required not event web CDN reference which is not allowed in many production implementations).

Having said that I would love for you to try the Simple XML example I have posted as it is run anywhere example. It would be really helpful, if you can convert that example in Splunk with minimal code and no JS required, to use jQueryUI (hopefully you are not planning to convert to HTML dashboard or talking about the new Dashboard Framework which would complicate the dashboard but can make jQueryUI to work).

I think that was also an ask to you by @trb48 , because of which I have provided purely Simple XML approach. On the other hand, I can also provide jQueryUI based solution, but that would not work with pure Simple XML Splunk Dashboard because of the way it is designed (it will require Simple XML JS Extension even for CDN reference).

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

Splunk Employee
Splunk Employee

These lines got truncated after the last '</div>':

 

"  

<div id="tabs-3">
<p>Mauris eleifend est et turpis.
</p>
</div>
</div>

"

0 Karma

Splunk Employee
Splunk Employee

Take a look at the embedded link I supplied.  That takes you to the jQueryUI site with an example of three tabs with content on each tab.  For fun, select each tab to see how they work.  When you're done foolin' around, look at the hyperlink labeled, "View Source" under the example.  Lines 12 - 14 are the jqueryUI code you should embed with your javascript, or at the top of the HTML.  Lines 19 - 24 are "pointers" to the tabs you want to create.  Lines 25 - 34 are the content you want on the tabs.  

Hope that helps!

0 Karma

Motivator

Check simple_xml_examples app ::: link_switcher

below is the example

<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>
0 Karma

I tried this link approach, but then there is a constraining of PANEL SIZE. If I add multiple links, the alignment is not at all pleasing to eye. I even tried having multiple , dividing the content.

Do u have any idea if i can alter the background of the input panels using simple inline css? Atleast using that I can make it visually good

0 Karma

Contributor

What i use is: https://www.splunk.com/blog/2015/03/30/making-a-dashboard-with-tabs-and-searches-that-run-when-click...

but you will need to add to app/resource/appserver/static, if you create your app, you can deploy in manager apps.

Champion

There isn't a great way to do this. I would love it if Splunk offered the ability to officially group panels into tabs but it doesn't yet.

There is a couple of options I outline here you may want to consider:
See https://answers.splunk.com/answers/289613/is-there-any-way-to-include-javascript-in-the-html.html#an...

0 Karma

Thanks for the response. I had a look at these, but since I don't have admin privileges, I am not able to add .js to appserver/static folder or install apps 😞

0 Karma
State of Splunk Careers

Access the Splunk Careers Report to see real data that shows how Splunk mastery increases your value and job satisfaction.

Find out what your skills are worth!