All Apps and Add-ons

Limit choices in default TIMEPICKER

jlhamlet
Path Finder

Hi,

I am trying to limit the choices in the default timepicker in Simple XML.

The ideas is to only keep: "Presets" and "Date & Time Range", and delete the rest for a specific application.

Can you please provide me a way to do this ?

Note: in the Times.conf file, seems like i can only disable/enable what is included in the "Presets" dropdown.

Thank you,

1 Solution

jhubbard74
Explorer

As an alternative to JavaScript, you can also manipulate the Dashboard Style Sheet (Splunk 6.2.x). Editing the dashboard stylesheet can be done while the site is running and will be the least intrusive to operations.

How it Works

Every accordion element (div) in the timepicker module starts with a specific prefix. By using the CSS selector attribute capability you can query the specific DIV ID's. Settting the matching ID's to 'display: none;' effectively removes the HTML element from visibility/use.

The configuration below will display the two options you requested. The optional component prefixes are commented out for anyone that wants to customize this differently.

dashboard.css

/opt/splunk/etc/apps/< appname >/appserver/static/dashboard.css
/* ------------------------------------------------- */
/* Hides or display specific portions of the         */
/* Datetimepicker accordion                          */
/* ------------------------------------------------- */

/* OPTIONS
div[id^='presets_view']
div[id^='relative_view']
div[id^='realtime_view']
div[id^='daterange_view']
div[id^='dateandtimerange_view']
div[id^='advanced_view']
*/

div[id^='daterange_view'],
div[id^='advanced_view'],
div[id^='relative_view'],
div[id^='realtime_view'] {
    display: none;
}

You may be able to use the debug/refresh endpoint to update the change, however I've found that it works best if you restart splunk or splunkweb after applying the change for the first time. Note: Your end users may have to clear/refresh their browser page caches as well.

/opt/splunk/bin/splunk restart splunkweb

View solution in original post

gmorris_splunk
Splunk Employee
Splunk Employee

Thanks @runner724
Got it working now, also found background color and width for those interested.

<panel>
  <html>
    <style>
      body,
      .dashboard-body,
      .footer,
      .dashboard-panel,
      .nav
      {
      background: #F8FCF7;
      }

      div[data-test^='time-range-dialog']
      {
      background-color: #EDF8EB;
      min-width: 300px !important;
      width: 400px !important;
      }
      div[data-test^='body']
      {
      background-color: #D1ECCC;
      }
      div[data-test^='real-time-column'], 
      <!-- div[data-test^='relative'], -->
      div[data-test^='other'],
      <!--div[data-test-panel-id^='preset'], -->
      div[data-test-panel-id^='date'],
      div[data-test-panel-id^='dateTime'],
      div[data-test-panel-id^='advanced'],
      div[data-test-panel-id^='realTime'],
      div[data-test-panel-id^='relative']
      {
      display: none !important;
      }
          </style>
        </html>
</panel>

splunkuseradmin
Path Finder

thanks this worked for me. while keeping 'present' and 'date range' using above css, i also need to keep only "week to date" and "month to date" "previous week" and previous month" in the 'present'./
can help me with this.

0 Karma

runner724
Path Finder

Yeah my CSS only works for the presets tab column. Looking at the CSS for the 'Advanced' major tab, I see:

(...) data-test-panel-id="advanced" (...)

So logically I would expect this CSS to remove that entire tab:

div[data-test-panel-id^='advanced'] {
display: none !important;
}

nuaraujo
Path Finder

Hello all,

1 - I created /opt/splunk/etc/apps/MyApp/appserver/static/dashboard.css with the exact content of the dashboad.css above

2 - I added script="dashboard.css" to my xml file. The first line is now like:

<form script="dashboard.css">

3 - I confirmed that the permissions in the folders and files are ok. I restarted Splunk.

Even so, I still have all the default options in the timepicker. Am I missing something?

Thanks in advance.

0 Karma

gmorris_splunk
Splunk Employee
Splunk Employee

Does this still work in V7.1?
Thanks in advance.

0 Karma

bdiego_splunk
Splunk Employee
Splunk Employee

@nuaraujo You need to use:

<form stylesheet="dashboard.css">
0 Karma

aljohnson_splun
Splunk Employee
Splunk Employee

+1

One thing to add here:

splunk-web-address:8000/en-US/_bump can let you refresh your web assets without restarting all of splunkweb.

0 Karma

spammenot66
Contributor

Thanks for the info. With the latest release, you should be able to add the CSS directly into the xml. On top of that, using the strategy below, you can even hide specific items. In the example below, I've hidden the presets link for: today, last 15m, last 60m, last 4hr, and last 24hr.

<html>           
       <style>              

           /*
           div[id^='presets_view3278'], >> PRESETS
           div[id^='daterange_view3278'], >> Date Range
           div[id^='advanced_view3278'], >> Advanced
           div[id^='relative_view3278'], >>  Relative
           div[id^='realtime_view3278'] >> Realtime{
             display: none;
           }*/
           li a[data-earliest^='@d'],
           li a[data-earliest^='-15m'],
           li a[data-earliest^='-60m@m'],
           li a[data-earliest^='-4h@m'],
           li a[data-earliest^='-24h@h'],
           {
             display: none;
           }


      </style></html>

tom_frotscher
Builder

Hi, you can do this with javascript. Have you ever expanded simple xml dashboards with javascript? If so, it should not be a problem for you to add this. If not, you get information here.

require([
'underscore',
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/simplexml/ready!'], function(_, $, mvc){

// Timerange Test
var mypresetsettings = {
    showCustomDateTime: true,
    showPresets: true,
    showCustomRealTime: false,
    showCustomAdvanced: false,
    showCustomRelative: false,
    showCustomDate: false
};

// Show only the date and time submenue of the timerangepicker
var timeRangePicker = mvc.Components.getInstance("input1");
timeRangePicker.options.dialogOptions = mypresetsettings;
console.log(timeRangePicker.options);
mvc.Components.getInstance("input1").render();
});

You can edit, which presets are available in the "mypresetsettings" object, just toggle from true to false if you want to see it.
Be aware, that "input1" was the id for the time range picker for me. This can be different for you, if it is not the first input element.
If you add a .js file you have to restart your splunk to make it recognize it.

Greetings

Tom

theouhuios
Motivator

Has this worked ? I tried it and I have issues getting it to work.

0 Karma

tonyca
Explorer

for me this script worked in 7.1 version but not working in 7.2.1
Is there any solution to this problem ??

0 Karma

tonyca
Explorer

for me this script worked in 7.1 version but not working in 7.2.1

0 Karma

tonyca
Explorer

Is this script worked in Splunk 7.2 ?

0 Karma
Get Updates on the Splunk Community!

New Case Study Shows the Value of Partnering with Splunk Academic Alliance

The University of Nevada, Las Vegas (UNLV) is another premier research institution helping to shape the next ...

How to Monitor Google Kubernetes Engine (GKE)

We’ve looked at how to integrate Kubernetes environments with Splunk Observability Cloud, but what about ...

Index This | How can you make 45 using only 4?

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