How to create tabs in Splunk dashboard without adm...

nishantmishra21 · ‎07-11-2017

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 😞

gstultz_splunk · ‎08-15-2018

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.

trb48 · ‎06-19-2020

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

niketn · ‎06-21-2020

@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!!!"

gstultz_splunk · ‎06-21-2020

@niketn 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>

"

niketn · ‎06-21-2020

@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!!!"

gstultz_splunk · ‎06-21-2020

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

"

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

"

gstultz_splunk · ‎06-19-2020

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!

sbbadri · ‎07-11-2017

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>

nishantmishra21 · ‎07-11-2017

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

felipesewaybric · ‎07-11-2017

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.

LukeMurphey · ‎07-11-2017

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...

latheefsk · ‎04-05-2022

Hello i prepared tabs dashboard but both tabs are running at same time can you help me on this .

Thanks
lateef

nishantmishra21 · ‎07-11-2017

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 😞

How to create tabs in Splunk dashboard without admin access?

Enterprise Security Content Update (ESCU) | New Releases

Why am I not seeing the finding in Splunk Enterprise Security Analyst Queue?

Index This | What are the 12 Days of Splunk-mas?