Dashboards & Visualizations

Can we implement cascading dropdowns in a dashboard?

tamduong16
Contributor

I want to create a dropdown list for my dashboard. But I can't figure out how to make a dropdown like this in Splunk. Or maybe the option isn't available for now. How can I do this in Splunk? Thanks!

alt text

1 Solution

niketn
Legend

@tamduong16, there are couple of options that you can try for cascading of Menu:

Option 1: Use Splunk's Built-in Navigation ( Splunk > Settings > User Interface > Navigation > default.xml )
The limitation is that it allows cascading only up to two level deep. Refer to Splunk Dev Site for details: http://dev.splunk.com/view/SP-CAAAEP9#view

Option 2: Use Prebuilt HTML Panel with CSS to Generate multi-level Cascaded Navigation menu
This can go multilevel deep, based on defined CSS. Since it is purely CSS it has not dependency with JavaScript. Hence this can be created as a template using Prebuilt Panels ( Splunk > Settings > Prebuilt Panels ) which can contain both HTML and CSS.
PS: Every dashboard using Custom Menu via Pre-built Panel should ideally hide default Splunk App Bar, Menu Bar, Title etc for consistent App like feel (optional refer to Splunk Documentation: http://docs.splunk.com/Documentation/Splunk/latest/Viz/PanelreferenceforSimplifiedXML#dashboard_or_f...).

Option 3: Use HTML file with CSS Menu and include in the Dashboard panel using src
Similar to Prebuilt Panel an HTML file can be used as a template, however, dependency with static HTML file implies Splunk refresh/restart/bump along with browser cache cleanup for changes to reflect. Since coding effort and template effect is similar to Prebuilt panel which does not require either of these steps, it is better to use option 3.

Option 4: Use Simple XML JS Extension to add jQuery based Multilevel Dropdown
Advantage code is simpler, however, dependency with jQuery implies it can not be created as standalone template. You would need to include prebuilt Panel and then also include Javascript code in the dashbaord where menu is required.

I am explaining a scenario with ** Option 2 with Prebuilt panel containing pure CSS drilldown menu (two level for demo) ** as it is quick easy to implement. However, if really required I can provide further details for any other option/s. (PS: Menu in example seems to be Option 4: https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_dropdown_multilevel_css&stacked=...)

alt text

Step 1: I have picked up pure CSS Dropdown Menu from Codepen
--> https://codepen.io/3ncrypter/pen/wBMbqL
Slight modifications done to CSS for adjusting to Splunk: for example Background color is changed from White to Grey so that Menu does not blend with Splunk Panel's Default Background color i.e. White.

Step 2: Navigate to Settings > User Interface > Prebuilt Panel menu in Splunk. Add the following code and save as splunk_app_custom_main_menu

<panel>
  <html>
            <style>
              <!-- Splunk Style override to remove Header Padding and Margin when hiding Splunk's Default Header with App Bar, Menu Bar, Title and Edit -->
          .dashboard-header {
              margin-bottom: 0px !important;
              padding-top: 0px !important;
              min-height: 0px !important;
          }
          .splunk-header {
            min-height: 0px;
          }
          #mainmenu .panel-body.html{
            padding:0px !important;  
          }
          <!-- Splunk Style Override CSS END -->
          .main{
            width: 100%;
            background: #eee;
          }
          /*General Menu Styling*/
          .mainnav{
            margin: 0 auto
          }
          li{
            list-style: none;
          }
          li a{
            text-decoration: none;
          }
          .dropdown{
            z-index:1;
            position: absolute;
            width: 150px;
            top: 27px;
            opacity: 0;
            visibility: hidden;
            transition: ease-out .35s;
            -moz-transition: ease-out .35s;
            -webkit-transition: ease-out .35s;}
          .mainnav li{
            float: left;
            padding: 5px;
            background: maroon;
            border-left: 1px dotted #ccc;
          }
          .mainnav li:first-child{
            border: none;
          }
          .mainnav li a{
            display: block;
            padding: 2px 20px;
            color: #fff;
            font-family: arial;
          }
          .mainnav li:hover{
            background: #ccc;
            transition: ease-in .35s;
            -moz-transition: ease-in .35s;
            -webkit-transition: ease-in .35s;
          }
          .mainnav li:hover a{
            color: maroon;
            transition: ease-in .35s;
            -moz-transition: ease-in .35s;
            -webkit-transition: ease-in .35s;
          }
          /*First Level*/
          .subs {
            left: -45px;
            position: relative;
            top: 0px;
            width: 175px;
            border-left: none !important;
            border-bottom: 1px dotted #ccc !important;
          }
          .subs:last-child{
            border: none !important;
          }
          .hassubs:hover .dropdown,.hassubs .hassubs:hover .dropdown{
            opacity: 1;
            visibility: visible;
            transition: ease-in .35s;
            -moz-transition: ease-in .35s;
            -webkit-transition: ease-in .35s;
          }
          .mainnav li:hover ul a,.mainnav li:hover ul li ul li a{
            color: white;
          }
          .mainnav li ul li:hover,.mainnav li ul li ul li:hover{
            background: #ccc;
            transition: ease-in-out .35s;
            -moz-transition: ease-in-out .35s;
            -webkit-transition: ease-in-out .35s;
          }
          .mainnav li ul li:hover a,.mainnav li ul li ul li:hover a{
            color: maroon;
            transition: ease-in-out .35s;
            -moz-transition: ease-in-out .35s;
            -webkit-transition: ease-in-out .35s;
          }
          /*Second Level*/
          .hassubs .hassubs .dropdown .subs{
            left: 25px;
            position: relative;
            width: 165px;
            top: 0px;
          }
          .hassubs .hassubs .dropdown{
            position: absolute;
            width: 150px;
            left: 120px;
            top: 0px;
            opacity: 0;
            visibility: hidden;
            transition: ease-out .35s;
            -moz-transition: ease-out .35s;
            -webkit-transition: ease-out .35s;
          }
        </style>
<!--
Name: Multilevel PureCSS DropDown Menu
Version: V 1.0 10122014
Website:http://surajverma.in||http://bleuflex.com
Github:https://bleuflex.github.io/PureCSS-Menu.
License: GPL V2.0
**You can use it for personal or commercial purposes, we appreciate a link to the author website wherever possible.**
Code from: https://codepen.io/3ncrypter/pen/wBMbqL
--> 
        <div class="main">
            <ul class="mainnav">
                <li class="hassubs">
          <a href="#">Staging</a>
                    <ul class="dropdown">
                        <li class="subs hassubs">
              <a href="#">Performance</a>
                            <ul class="dropdown">
                                <li class="subs">
                  <a href="#">Dashboard1</a>
                </li>
                                <li class="subs">
                  <a href="#">Dashboard2</a>
                </li>
                                <li class="subs">
                  <a href="#">Dashboard3</a>
                </li>
                            </ul>
                        </li>
                        <li class="subs hassubs">
              <a href="#">Opearations</a>
                            <ul class="dropdown">
                                <li class="subs">
                  <a href="#">Dashboard3</a>
                </li>
                                <li class="subs">
                  <a href="#">Dashboard4</a>
                </li>
                                <li class="subs">
                  <a href="#">Dashboard5</a>
                </li>
                            </ul>
                        </li>
                        <li class="subs hassubs">
              <a href="#">Work In Progress</a>
                            <ul class="dropdown">
                                <li class="subs">
                  <a href="#">Dashboard6</a>
                </li>
                                <li class="subs">
                  <a href="#">Dashboard7</a>
                </li>
                                <li class="subs">
                  <a href="#">Dashboard8</a>
                </li>
                            </ul>
                        </li>
                        <li class="subs">
              <a href="#">Search</a>
            </li>
                        <li class="subs">
              <a href="#">Alerts</a>
            </li>
                        <li class="subs">
              <a href="#">Reports</a>
            </li>
                    </ul>
                </li>
                <li class="hassubs">
          <a href="#">Production</a>
                    <ul class="dropdown">
                        <li class="subs hassubs">
              <a href="#">Performance</a>
                            <ul class="dropdown">
                                <li class="subs">
                  <a href="#">Dashboard1</a>
                </li>
                                <li class="subs">
                  <a href="#">Dashboard2</a>
                </li>
                                <li class="subs">
                  <a href="#">Dashboard3</a>
                </li>
                            </ul>
                        </li>
                        <li class="subs hassubs">
              <a href="#">Operations</a>
                            <ul class="dropdown">
                                <li class="subs">
                  <a href="#">Dashboard3</a>
                </li>
                                <li class="subs">
                  <a href="#">Dashboard4</a>
                </li>
                                <li class="subs">
                  <a href="#">Dashboard5</a>
                </li>
                            </ul>
                        </li>
                        <li class="subs">
              <a href="#">Search</a>
            </li>
                        <li class="subs">
              <a href="#">Alerts</a>
            </li>
                        <li class="subs">
              <a href="#">Reports</a>
            </li>
                    </ul>
                </li>
                <li>
          <a href="#">Contact</a>
        </li>
            </ul>
            <br style="clear: both;"/>
        </div>
      </html>
</panel>

Step 3: Create a Splunk Dashboard with first <panel> to refer to the pre-built panel above:

<dashboard hideAppBar="true" hideSplunkBar="true" hideTitle="true" hideEdit="true" hideFooter="true">
  <label>Multi Level Menu In Splunk</label>
  <!-- Prebuilt Panel splunk_app_custom_main_menu with HTML Panel and CSS Style to generate menu -->
  <row>
    <panel id="mainmenu" ref="splunk_app_custom_main_menu"></panel>
  </row>
  <!-- Dummy Row for Demo Purpose. Creates Empty HTML Panel to Show Menu Overlay -->  
  <row>
    <panel>
      <html id="htmlFiller">
        <style>
          #htmlFiller{
            height:500px;
          }
        </style>
        <div style="text-align:center;font-weight:bold;font-size:150%;color:blue;position:absolute;top:250px;left:30%">
          This is a Filler Panel for Demonstration of Menu Overlay on Hover.
        </div>
      </html>
    </panel>
  </row>
</dashboard>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

niketn
Legend

@tamduong16, there are couple of options that you can try for cascading of Menu:

Option 1: Use Splunk's Built-in Navigation ( Splunk > Settings > User Interface > Navigation > default.xml )
The limitation is that it allows cascading only up to two level deep. Refer to Splunk Dev Site for details: http://dev.splunk.com/view/SP-CAAAEP9#view

Option 2: Use Prebuilt HTML Panel with CSS to Generate multi-level Cascaded Navigation menu
This can go multilevel deep, based on defined CSS. Since it is purely CSS it has not dependency with JavaScript. Hence this can be created as a template using Prebuilt Panels ( Splunk > Settings > Prebuilt Panels ) which can contain both HTML and CSS.
PS: Every dashboard using Custom Menu via Pre-built Panel should ideally hide default Splunk App Bar, Menu Bar, Title etc for consistent App like feel (optional refer to Splunk Documentation: http://docs.splunk.com/Documentation/Splunk/latest/Viz/PanelreferenceforSimplifiedXML#dashboard_or_f...).

Option 3: Use HTML file with CSS Menu and include in the Dashboard panel using src
Similar to Prebuilt Panel an HTML file can be used as a template, however, dependency with static HTML file implies Splunk refresh/restart/bump along with browser cache cleanup for changes to reflect. Since coding effort and template effect is similar to Prebuilt panel which does not require either of these steps, it is better to use option 3.

Option 4: Use Simple XML JS Extension to add jQuery based Multilevel Dropdown
Advantage code is simpler, however, dependency with jQuery implies it can not be created as standalone template. You would need to include prebuilt Panel and then also include Javascript code in the dashbaord where menu is required.

I am explaining a scenario with ** Option 2 with Prebuilt panel containing pure CSS drilldown menu (two level for demo) ** as it is quick easy to implement. However, if really required I can provide further details for any other option/s. (PS: Menu in example seems to be Option 4: https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_dropdown_multilevel_css&stacked=...)

alt text

Step 1: I have picked up pure CSS Dropdown Menu from Codepen
--> https://codepen.io/3ncrypter/pen/wBMbqL
Slight modifications done to CSS for adjusting to Splunk: for example Background color is changed from White to Grey so that Menu does not blend with Splunk Panel's Default Background color i.e. White.

Step 2: Navigate to Settings > User Interface > Prebuilt Panel menu in Splunk. Add the following code and save as splunk_app_custom_main_menu

<panel>
  <html>
            <style>
              <!-- Splunk Style override to remove Header Padding and Margin when hiding Splunk's Default Header with App Bar, Menu Bar, Title and Edit -->
          .dashboard-header {
              margin-bottom: 0px !important;
              padding-top: 0px !important;
              min-height: 0px !important;
          }
          .splunk-header {
            min-height: 0px;
          }
          #mainmenu .panel-body.html{
            padding:0px !important;  
          }
          <!-- Splunk Style Override CSS END -->
          .main{
            width: 100%;
            background: #eee;
          }
          /*General Menu Styling*/
          .mainnav{
            margin: 0 auto
          }
          li{
            list-style: none;
          }
          li a{
            text-decoration: none;
          }
          .dropdown{
            z-index:1;
            position: absolute;
            width: 150px;
            top: 27px;
            opacity: 0;
            visibility: hidden;
            transition: ease-out .35s;
            -moz-transition: ease-out .35s;
            -webkit-transition: ease-out .35s;}
          .mainnav li{
            float: left;
            padding: 5px;
            background: maroon;
            border-left: 1px dotted #ccc;
          }
          .mainnav li:first-child{
            border: none;
          }
          .mainnav li a{
            display: block;
            padding: 2px 20px;
            color: #fff;
            font-family: arial;
          }
          .mainnav li:hover{
            background: #ccc;
            transition: ease-in .35s;
            -moz-transition: ease-in .35s;
            -webkit-transition: ease-in .35s;
          }
          .mainnav li:hover a{
            color: maroon;
            transition: ease-in .35s;
            -moz-transition: ease-in .35s;
            -webkit-transition: ease-in .35s;
          }
          /*First Level*/
          .subs {
            left: -45px;
            position: relative;
            top: 0px;
            width: 175px;
            border-left: none !important;
            border-bottom: 1px dotted #ccc !important;
          }
          .subs:last-child{
            border: none !important;
          }
          .hassubs:hover .dropdown,.hassubs .hassubs:hover .dropdown{
            opacity: 1;
            visibility: visible;
            transition: ease-in .35s;
            -moz-transition: ease-in .35s;
            -webkit-transition: ease-in .35s;
          }
          .mainnav li:hover ul a,.mainnav li:hover ul li ul li a{
            color: white;
          }
          .mainnav li ul li:hover,.mainnav li ul li ul li:hover{
            background: #ccc;
            transition: ease-in-out .35s;
            -moz-transition: ease-in-out .35s;
            -webkit-transition: ease-in-out .35s;
          }
          .mainnav li ul li:hover a,.mainnav li ul li ul li:hover a{
            color: maroon;
            transition: ease-in-out .35s;
            -moz-transition: ease-in-out .35s;
            -webkit-transition: ease-in-out .35s;
          }
          /*Second Level*/
          .hassubs .hassubs .dropdown .subs{
            left: 25px;
            position: relative;
            width: 165px;
            top: 0px;
          }
          .hassubs .hassubs .dropdown{
            position: absolute;
            width: 150px;
            left: 120px;
            top: 0px;
            opacity: 0;
            visibility: hidden;
            transition: ease-out .35s;
            -moz-transition: ease-out .35s;
            -webkit-transition: ease-out .35s;
          }
        </style>
<!--
Name: Multilevel PureCSS DropDown Menu
Version: V 1.0 10122014
Website:http://surajverma.in||http://bleuflex.com
Github:https://bleuflex.github.io/PureCSS-Menu.
License: GPL V2.0
**You can use it for personal or commercial purposes, we appreciate a link to the author website wherever possible.**
Code from: https://codepen.io/3ncrypter/pen/wBMbqL
--> 
        <div class="main">
            <ul class="mainnav">
                <li class="hassubs">
          <a href="#">Staging</a>
                    <ul class="dropdown">
                        <li class="subs hassubs">
              <a href="#">Performance</a>
                            <ul class="dropdown">
                                <li class="subs">
                  <a href="#">Dashboard1</a>
                </li>
                                <li class="subs">
                  <a href="#">Dashboard2</a>
                </li>
                                <li class="subs">
                  <a href="#">Dashboard3</a>
                </li>
                            </ul>
                        </li>
                        <li class="subs hassubs">
              <a href="#">Opearations</a>
                            <ul class="dropdown">
                                <li class="subs">
                  <a href="#">Dashboard3</a>
                </li>
                                <li class="subs">
                  <a href="#">Dashboard4</a>
                </li>
                                <li class="subs">
                  <a href="#">Dashboard5</a>
                </li>
                            </ul>
                        </li>
                        <li class="subs hassubs">
              <a href="#">Work In Progress</a>
                            <ul class="dropdown">
                                <li class="subs">
                  <a href="#">Dashboard6</a>
                </li>
                                <li class="subs">
                  <a href="#">Dashboard7</a>
                </li>
                                <li class="subs">
                  <a href="#">Dashboard8</a>
                </li>
                            </ul>
                        </li>
                        <li class="subs">
              <a href="#">Search</a>
            </li>
                        <li class="subs">
              <a href="#">Alerts</a>
            </li>
                        <li class="subs">
              <a href="#">Reports</a>
            </li>
                    </ul>
                </li>
                <li class="hassubs">
          <a href="#">Production</a>
                    <ul class="dropdown">
                        <li class="subs hassubs">
              <a href="#">Performance</a>
                            <ul class="dropdown">
                                <li class="subs">
                  <a href="#">Dashboard1</a>
                </li>
                                <li class="subs">
                  <a href="#">Dashboard2</a>
                </li>
                                <li class="subs">
                  <a href="#">Dashboard3</a>
                </li>
                            </ul>
                        </li>
                        <li class="subs hassubs">
              <a href="#">Operations</a>
                            <ul class="dropdown">
                                <li class="subs">
                  <a href="#">Dashboard3</a>
                </li>
                                <li class="subs">
                  <a href="#">Dashboard4</a>
                </li>
                                <li class="subs">
                  <a href="#">Dashboard5</a>
                </li>
                            </ul>
                        </li>
                        <li class="subs">
              <a href="#">Search</a>
            </li>
                        <li class="subs">
              <a href="#">Alerts</a>
            </li>
                        <li class="subs">
              <a href="#">Reports</a>
            </li>
                    </ul>
                </li>
                <li>
          <a href="#">Contact</a>
        </li>
            </ul>
            <br style="clear: both;"/>
        </div>
      </html>
</panel>

Step 3: Create a Splunk Dashboard with first <panel> to refer to the pre-built panel above:

<dashboard hideAppBar="true" hideSplunkBar="true" hideTitle="true" hideEdit="true" hideFooter="true">
  <label>Multi Level Menu In Splunk</label>
  <!-- Prebuilt Panel splunk_app_custom_main_menu with HTML Panel and CSS Style to generate menu -->
  <row>
    <panel id="mainmenu" ref="splunk_app_custom_main_menu"></panel>
  </row>
  <!-- Dummy Row for Demo Purpose. Creates Empty HTML Panel to Show Menu Overlay -->  
  <row>
    <panel>
      <html id="htmlFiller">
        <style>
          #htmlFiller{
            height:500px;
          }
        </style>
        <div style="text-align:center;font-weight:bold;font-size:150%;color:blue;position:absolute;top:250px;left:30%">
          This is a Filler Panel for Demonstration of Menu Overlay on Hover.
        </div>
      </html>
    </panel>
  </row>
</dashboard>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

pgadhari
Builder

Hi Niket,

Ya this is cool. But actually if you see my previous comments, I want to create a landing page wherein the users will directly browse the splunk apps and their dashboards or views from that page itself, instead of using menus. Once, they navigate to specific Apps, then I can implement the above menu for all the apps and navigations. But before that, I have to make the dropdown on click in the landing page, which I have shared earlier in the previous question. Can you please help on how can I integrate the JS, html, css for creating a onclick submenu in the landing page I shared earlier ? That would be really helpful.

Attaching the images again :

https://ibb.co/8K62v6d

So, when you click "Wifi", there will be sub-menu which will list different views in that, like the link below :

http://jsfiddle.net/APA2S/1/

0 Karma

pgadhari
Builder

Hi Niket,

Can you provide any solution on my above comment pls ? Thanks.

0 Karma

niketn
Legend

@pgadhari if I understand your problem correctly

1) A centralized dashboard listing available Splunk Apps.
2) On click of any specific App, the dashboards present under the specific App should be listed.

If so do post a new question with specific details. While the underlying concept remains the same main challenge to the question is whether list of Splunk Apps and their corresponding dashboards is static or Dynamic? Also can there be multilevel Dropdown?

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

pgadhari
Builder

@niketnilay .. yes point no. 1 and 2 is the concept. So, if you see my previous post wherein I have shared the images. I have a created a dashboard wherein the upper panel will show the "most popular apps" which will be static and not dynamic.

Also the second panel, will contain the link for all the apps (which is also static), and once we click on the "Wifi" app, it should come up with sub-menu showing the dashboards/views in it. May be we can do this using "css and html" or javascript also. But actually i want to make it a jazzy landing page. Also, I am thinking of putting a background image also. Your help would be truly appreciated. This is quite urgent. I will open a new question and post here the link. thanks.

0 Karma

pgadhari
Builder
0 Karma
Get Updates on the Splunk Community!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...