Solved: Re: How to create a central dashboard containing l...

dbcase · ‎07-28-2016

Hi,

Is there a way to create a Dashboard/form/something that will group dashboards together? Example, I have dashboards 1-10, but I'd like that have 1 central dashboard/page that the users would go to and then select the dashboard that they want to view.

kbarker302 · ‎07-28-2016

I have done something similar with a very simple dashboard using primarily HTML (ex: home.xml):

<dashboard>
  <label>Home</label>
  <row>
    <panel>
        <title>Panel 1</title>
        <html>
            <div>
                <li><a href="/app/yourapp/dashboard1">Dashboard 1</a></li>
                <li><a href="/app/yourapp/dashboard2">Dashboard 2</a></li>
            </div>
        </html>
    </panel>
  </row>
</dashboard>

Within the html tags you can do pretty much whatever you want as far as the presentation goes.

Then I modified default.xml under $SPLUNK_HOME/etc/apps/yourapp/default/ui/nav to make my home dashboard the default dashboard and add it to the navigation:

<nav search_view="search" color="#65A637">
  <view name="home" default='true' />

   ... other dashboards/dropdowns that reflect my app's structure

</nav>

View solution in original post

fredclown · ‎05-16-2025

I know it has been a while since this question was asked but here is a simple xml dashboard that will show all the other dashboards in the app along with the descriptions and links to them. It is populated dynamically with a rest search. All you would need to do would be to edit the app nav to look something like the below example if you call the dashboard "overview". If you don't call it "overview" then change the first view element to whatever you named the dashboard. Specifically, it is looking for the name that is shown in the URL bar, not the editable label in the dashboard.

Navigation

<nav search_view="search">
  <view name="overview" default="true" />
  <view name="search" />
  <view name="analytics_workspace" />
  <view name="datasets" />
  <view name="reports" />
  <view name="alerts" />
  <view name="dashboards" />
</nav>

Dashboard

<dashboard version="1.1" theme="dark">
  <label>Overview</label>
  <row id="cards">
    <panel>
      <table>
        <search>
          <query>| rest /servicesNS/-/$env:app$/data/ui/views splunk_server=local
| rename eai:acl.app as app
| search isDashboard=1 app=$env:app$ title!=$env:page$
| table label description app title
| sort label</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="count">100</option>
        <option name="drilldown">cell</option>
        <drilldown>
          <link target="_blank">/app/$row.app$/$row.title$</link>
        </drilldown>
      </table>
    </panel>
  </row>
  <row id="styles_row">
    <panel>
      <html>
        <style>
          /* Hide the styles panel */
          #styles_row {
            display: none;
          }
          
          /* Remove search tools (refresh, etc) */
          .element-footer.dashboard-element-footer {
            display: none !important;
          }
          
          /* Remove hover background color */
          #statistics .results-table tbody td.highlighted {
            background-color: #FAFAFA !important;
          }
          
          /* Remove hover background color dark mode */
          .dashboard-panel[class*="dashboardPanel---pages-dark"] #statistics .results-table tbody td.highlighted {
            background-color: #31373B !important;
          }

          #statistics.results-table {
            padding: 10px;
            box-sizing: border-box !important;
          }
          
          /* Style the table to make it just a simple container element */
          body table {
            width: 100% !important;
            min-width: 100% !important;
            display: block;
            box-sizing: border-box !important;
            border: none !important;
            -webkit-box-shadow: none !important;
            box-shadow: none !important;
            
          }

          [id^="cards"] table tbody td {
            font-family: Splunk Platform Sans,Proxima Nova,Roboto,Droid,Helvetica Neue,Helvetica,Arial,sans-serif !important;
          }

          /* Hide the table header */
          thead {
            display: none;
          }

          /* Make the tbody a grid layout */
          tbody {
            display: grid;
            grid-template-columns: 33% 33% 33%;
            box-sizing: border-box !important;
            column-gap: 10px;
            row-gap: 10px;
            border: none !important;
          }

          /* Bold the dashboard title */
          tr td:nth-child(1) {
            font-weight: bold;
          }

          /* Make the card text black in light mode */
          tr td:nth-child(2) {
            color: #000000 !important;
          }
          
          /* Make the card text white in dark mode */
          .dashboard-panel[class*="dashboardPanel---pages-dark"] tr td:nth-child(2) {
            color: #FFFFFF !important;
          }

          /* Hide the 3rd (app) and 4th (title) columns */
          tr td:nth-child(3), tr td:nth-child(4) {
            display: none;
          }

          /* Turn the table rows into cards */
          tbody tr {
            border-radius: 5px;
            border: 1px solid #999999;
            padding: 10px;
            
          }

          tbody tr, tbody tr td {
            box-sizing: border-box !important;
            display: block;
            background: #FAFAFA !important;
          }

          .dashboard-panel[class*="dashboardPanel---pages-dark"] tbody tr, .dashboard-panel[class*="dashboardPanel---pages-dark"] tbody tr td {
            background: #31373B !important;
          }
          
          .table td {
            padding-top: 0 !important;
            padding-bottom: 0 !important;
          }
        </style>
      </html>
    </panel>
  </row>
</dashboard>

kbarker302 · ‎07-28-2016

I have done something similar with a very simple dashboard using primarily HTML (ex: home.xml):

<dashboard>
  <label>Home</label>
  <row>
    <panel>
        <title>Panel 1</title>
        <html>
            <div>
                <li><a href="/app/yourapp/dashboard1">Dashboard 1</a></li>
                <li><a href="/app/yourapp/dashboard2">Dashboard 2</a></li>
            </div>
        </html>
    </panel>
  </row>
</dashboard>

Within the html tags you can do pretty much whatever you want as far as the presentation goes.

Then I modified default.xml under $SPLUNK_HOME/etc/apps/yourapp/default/ui/nav to make my home dashboard the default dashboard and add it to the navigation:

<nav search_view="search" color="#65A637">
  <view name="home" default='true' />

   ... other dashboards/dropdowns that reflect my app's structure

</nav>

tvijaykumar2405 · ‎05-20-2019

can we add drilldown to it, as it is taking me to the Dashboard1 page when i click on 1, instead it should open in new tab when i click on dashboard 1 and dashboard 2

surekhasplunk · ‎11-23-2017

Hi @karker302,

I have implemented something line this.

I have named links for all the dashboards in the main page and by clicking on each of the links they take me to the respective dashboards.
But is there a option to increase the font size of those href links ?

jotne · ‎09-23-2022

Setting font Size:

<li><a href="/app/yourapp/dashboard1"  style="font-size: 30px">Dashboard 1</a></li>

niketn · ‎11-23-2017

@surekhasplunk, you can do it through CSS. In the following example I have purposely added two types of CSS Styles

1) Inline style within HTML tag : <div id="myMainMenu" style="font-size:200%">
2) <style> tag within HTML panel

<dashboard>
  <label>Dashboard Menu</label>
   <row>
     <panel>
         <title>Panel 1</title>
         <html>
            <style>
              #myMainMenu li{
                padding-bottom:10px;
              }
            </style>
            <div id="myMainMenu" style="font-size:200%">
                 <li><a href="/app/yourapp/dashboard1">Dashboard 1</a></li>
                 <li><a href="/app/yourapp/dashboard2">Dashboard 2</a></li>
            </div>
         </html>
     </panel>
   </row>  
</dashboard>

3) You can also save the contents within <style>...</style> tag as YourCustomStyle.css file and include the same as or , depending on which type of dashboard view you have created.
PS: This type of CSS Style will require you to place the CSS file under appserver/static folder for your Splunk App which is typically $SPLUNK_HOME$/etc/apps/<YourAppName>/appserver/static. For the changes to reflect you might have to restart/refresh/bump your Splunk instance and also clear browser history.

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

pgadhari · ‎01-02-2019

Hi Niket,

Can we create a sub-menu below "dashboard 1" to see the different views such as "view-1" , view-2" and so on.. ? also, can we do it like mouse hover and the sub-menu will appear like sort of "dynamic menus" stuff ? Can you please help in that regards ? Thanks.

pgadhari · ‎01-02-2019

Hi Niket,

Actually I want to create this type of landing page for my Splunk, from where people can navigate to respective applications. I have attached a screenshot on this link :

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/

So, this above I have to display in the panel body itself. Can we use same javascript and jquery code to do that ? Please advise. If you want I can open a new question on this too :

Thanks
PG

niketn · ‎01-02-2019

@pgadhari, most of the time if you can create a UI design using HTML CSS and JS, the same can be brought to Splunk Dashboard as well. Refer to one of my older answer which creates Cascaded Dropdown Menu using HTML and CSS. Please try out and confirm on the original post : https://answers.splunk.com/answers/595047/can-we-implement-cascading-dropdowns-in-a-dashboar.html

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

pradeepkumarg · ‎07-28-2016

You can get the list of dashboards with the below search

|rest /servicesNS/-/-/data/ui/views

and then list them in a table, configure a drill down link by constructing the URL with

http://your_splunk_host:8000/en-US/app/ + appname + view name

sundareshr · ‎07-28-2016

You can use the link tag to navigate to other dashboards, or you could create a menu struture on all your dashboards so users can navigate back and forth without having to go to the central dashboard. Below some relevant links to help you with this task

http://docs.splunk.com/Documentation/Splunk/6.4.2/AdvancedDev/BuildNavigation

https://answers.splunk.com/answers/225099/is-there-any-option-to-just-link-two-dashboards-wi.html

How to create a central dashboard containing links to all other dashboards for users to navigate to?

Can’t make it to .conf25? Join us online!

Can’t Make It to Boston? Stream .conf25 and Learn with Haya Husain

Splunk Lantern’s Guide to The Most Popular .conf25 Sessions

Unlock What’s Next: The Splunk Cloud Platform at .conf25

Are you a member of the Splunk Community?

How to create a central dashboard containing links to all other dashboards for users to navigate to?

Can’t make it to .conf25? Join us online!

Can’t Make It to Boston? Stream .conf25 and Learn with Haya Husain

Splunk Lantern’s Guide to The Most Popular .conf25 Sessions

Unlock What’s Next: The Splunk Cloud Platform at .conf25