Solved: Customized Landing page for Splunk applications

pgadhari · ‎01-05-2019

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/

@niketnilay - this is in discussion we are having on this thread - https://answers.splunk.com/answers/595047/can-we-implement-cascading-dropdowns-in-a-dashboar.html

Regards
PG

niketn · ‎01-06-2019

@pgadhari, there are multiple part to your questions and while we can give you pointers actual implementation would be difficult to provide.

1) Since list of Apps is static. You can refer to the following answer of mine to pull available views under specific apps (and other criteria like access based, naming convention based etc.): https://answers.splunk.com/answers/639475/how-to-pass-a-dashboard-as-value-in-dropdown-of-an-1.html

2) You can use the above search result to form html content as required for Dropdown using Simple XML JS Extension:
https://answers.splunk.com/answers/324828/render-html-code-from-search-result-in-splunk-dash.html

3) As far as jazzing up the Dashboard is considered like adding Background Image and CSS Styles they are indeed possible. Refer to answers

https://answers.splunk.com/answers/684612/issue-with-image-overlay-on-background.html
https://answers.splunk.com/answers/590387/how-do-i-update-panel-color-in-splunk-using-css-1.html

As an additional exercise I would recommend you to refer to Splunk Dashboard Examples app and Splunk Dev for All which will give you solid pointers with Splunk Dashboard development with working examples and code.

If the above answers do not help you with your use case do post specifics of which html, CSS, JS or Splunk functionality is not working for you!

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

View solution in original post

paramagurukarth · ‎01-07-2019

I really appreciate your thought,

Default landing page can be configured only via user object. You cannot default landing page . Creating a custom dashboard and assigning the same for all the users will be a maintenance issue.

My Solution to your problem will be,
1. Create a New App
2. Set show_in_nav = false in app.conf
3. Create your custom dashboard with all you home page content in that using HTML module and hide all splunk items using the attributes in dashboard tag

hideChrome
hideAppBar
hideEdit
hideFooter
hideSplunkBar
hideTitle

An another app mention your new app as default launcher app by setting default_namespace = new_app_name in user-pref.conf

Rest is in your HTML, JS and CSS skills

Good Luck!

niketn · ‎01-06-2019

@pgadhari, there are multiple part to your questions and while we can give you pointers actual implementation would be difficult to provide.

1) Since list of Apps is static. You can refer to the following answer of mine to pull available views under specific apps (and other criteria like access based, naming convention based etc.): https://answers.splunk.com/answers/639475/how-to-pass-a-dashboard-as-value-in-dropdown-of-an-1.html

2) You can use the above search result to form html content as required for Dropdown using Simple XML JS Extension:
https://answers.splunk.com/answers/324828/render-html-code-from-search-result-in-splunk-dash.html

3) As far as jazzing up the Dashboard is considered like adding Background Image and CSS Styles they are indeed possible. Refer to answers

https://answers.splunk.com/answers/684612/issue-with-image-overlay-on-background.html
https://answers.splunk.com/answers/590387/how-do-i-update-panel-color-in-splunk-using-css-1.html

As an additional exercise I would recommend you to refer to Splunk Dashboard Examples app and Splunk Dev for All which will give you solid pointers with Splunk Dashboard development with working examples and code.

If the above answers do not help you with your use case do post specifics of which html, CSS, JS or Splunk functionality is not working for you!

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

pgadhari · ‎01-07-2019

@niketnilay - I managed to create the simple landing page to start with, for our Splunk setup. I have attached the screenshot for the same. I have used sub-navigation menu from W3schools below links (https://www.w3schools.com/howto/howto_css_subnav.asp ) and able to put it in my landing page in the xml code itself. But, as of now, it is part of a panel. Below is the code for the same:

<!-- The navigation menu -->
  <row depends="$alwaysHideCSSPanel$">
    <panel>
      <html>
          <style>
              div[id^="panelCustomStyle"] .dashboard-panel{
              height:100px !important;
              border-width: 0px;
              background-color: #2f2c59;
              }            
              }
          </style>
        </html>
    </panel>
  </row>
  <row>
    <panel id="panelCustomStyle">
      <html>  


<div class="navbar1">
  <a href="#home">Home</a>
  <div class="subnav">
    <button class="subnavbtn">Network <i class="fa fa-caret-down"/>
            </button>
    <div class="subnav-content">



      <a href="/app/wireless_aruba/boingo_wifi__services">WiFi</a>
     <a href="/app/wireless_aruba/boingo_wifi_historical_SI">Link 1</a>
      <a href="/app/wireless_aruba/ap_utilization_3">Link 2</a>
      <a href="/app/wireless_aruba/rogue_ap_discovery">Link 3</a>
      <a href="/app/wireless_aruba/user_analysis">Link 4</a>
      <a href="/app/wireless_aruba/ap_locator">Link 5</a>


    </div>
  </div> 
  <div class="subnav">
    <button class="subnavbtn">DC Infrastructure <i class="fa fa-caret-down"/>
            </button>
    <div class="subnav-content">
      <a href="#bring">VMware </a>
      <a href="#deliver">Storage</a>

      <a href="#express">AWS</a>
      <a href="#express">Azure</a>
      <a href="#express">Email</a>
      <a href="#express">AD</a>
   </div>
  </div> 
  <div class="subnav">
    <button class="subnavbtn">Database <i class="fa fa-caret-down"/>
            </button>
    <div class="subnav-content">
      <a href="#link1">DB Performance</a>
      <a href="#link2">DB Errors</a>
      </div>
  </div>

  <!--div class="subnav">
    <button class="subnavbtn">Unified Communication <i class="fa fa-caret-down"></i></button>
    <div class="subnav-content">
      <a href="#link1">Unified Communication</a>

      </div>
  </div-->
</div>
</html>
</panel>
</row>

Actually, now I want to use this menu for all the apps as a Navigation menu, and want to remove "default Navigation bar" of Splunk for every app. Not sure on how to do this yet ? Can you help in fixing this issue. I tried pasting the above code in default.xml of the app, but that is removing the "default navigation bar" but not showing the custom menu.

Appreciate if you can help in providing this solution ? Whether I can hide "default navigation bar" and replace it with my custom menu. Attached is the screenshot of the landing page.

https://ibb.co/pJygb3r
https://ibb.co/zfWghVb - image with custom menu

niketn · ‎01-07-2019

@pgadhari As pointed out in one of my older answers for Custom Navigation, you would need to move above code as Pre-Built Panel and include reference of the Pre-Built Panel in all your dashboards to load your custom menu!

https://answers.splunk.com/answers/595047/can-we-implement-cascading-dropdowns-in-a-dashboar.html

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

pgadhari · ‎01-07-2019

oh ok. Saw that post. I will try that out and keep you posted. Thanks.

niketn · ‎01-08-2019

@pgadhari , if the solution worked for you, do accept the answer to mark this question as answered!

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

pgadhari · ‎01-08-2019

@niketnilay - I have created a pre-built panel and it seems to be working fine. But when I hide splunkappbar, title bar, app bar - it is showing gap between start of the browser and my menu. How do I remove that gap ? It is looking odd there. Please help on how can I remove the gap ? I am attaching the screenshot for your reference.

In the image the red square is the gap which I want to remove.

https://ibb.co/MPT4MqF

niketn · ‎01-08-2019

@pgadhari try the following CSS override. After testing move the CSS Style Override to to a custom CSS file:

<row depends="$alwaysHideCSSPanel$">
    <panel>
        <html>
            <style>
                .dashboard-header{
                    margin: 0;
                    padding: 0;
                    height: 0px;
                    min-height: 0px;
                 }
            </style>
        </html>
    </panel>
</row>

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

pgadhari · ‎01-08-2019

Great this worked perfectly well.

But I am getting some other issue now, I have taken the CSS menu from W3Schools, and there is "link" tag in that which points to awesome fonts. Somehow the link tag is not working in my panel and due to that the caret-down icon is not loading in my menu.

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Somehow the above tag is not working for me. Please help ?

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_subnav - this is from the Tryit Editor, wherein we can see the caret-down(dropdown) near "About", "Services" menus. In my case it is not displaying that icon ?

pgadhari · ‎01-08-2019

When I try to put the above code in dashboard xml, somehow it is showing the error as :

Error parsing XML on line 147: Premature end of data in tag panel line 1

Also, when I go to line 147 - it says "unexpected close tag". Please help resolve the issue? Thanks

niketn · ‎01-08-2019

@pgadhari I must tell you the previous few issues you have listed are quite unrelated to original issue posted. However, just to keep track of issues at single place, in Splunk <html> panel you would need to define close tag for each DOM element (best practices enforced in the validation. So, try the following:

  <meta name="viewport" content="width=device-width, initial-scale=1"></meta>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"></link>

PS: font-awesome is already available with Splunk so try to include that or ensure whether you really to include CDN link in your dashboards or not!

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

pgadhari · ‎01-08-2019

I have already tried adding and to the code above, but still it is not loading the icon. It shows as small square box there. How can I use the same using Splunk ? can you help here ?

niketn · ‎01-08-2019

Even after adding the above you get Error parsing XML on line 147: Premature end of data in tag panel line 1 error?

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

niketn · ‎01-08-2019

@pgadhari use Splunk's built-in icons instead of font-awesome icons <i class="fa fa-caret-down"/> and <i class="fa fa-caret-up"/>

<i class="icon-triangle-down-small">

And

<i class="icon-triangle-up-small">

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

pgadhari · ‎01-08-2019

How can I know what all built-in icons are available in Splunk. Is there any documentation on that ? can you share the same please ?

niketn · ‎01-09-2019

@pgadhari Splunk Provides Style Guide built in with Splunk Enterprise. Not just Icons but Color Palettes etc. Please fill in your Splunk URL/Port in the link below to check it out yourself:

http://<yourSplunkURL>/en-US/static/docs/style/style-guide.html

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

pgadhari · ‎01-09-2019

Actually, I am looking for icons such as home, network, communication, database so that I can use it in my navigation bar. I think this is possible only with awesome fonts, but awesome-fonts is not working for me. Any other suggestions ?

https://www.w3schools.com/howto/howto_css_navbar_icon.asp

pgadhari · ‎01-08-2019

This is really awesome @niketnilay . It worked like a charm. Really appreciate your support for resolving my every issues bro.. Really awesome :-)..

That icon worked good.

niketn · ‎01-08-2019

Wow...finally. 🙂
Do accept the anwer to mark this question as answered!

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

Customized Landing page for Splunk applications

Continuing Innovation & New Integrations Unlock Full Stack Observability For Your ...

Monitoring Amazon Elastic Kubernetes Service (EKS)

Cloud Platform & Enterprise: Classic Dashboard Export Feature Deprecation