Solved: Re: Limit choices in default TIMEPICKER - Page 2

jlhamlet · ‎03-13-2015

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,

jhubbard74 · ‎07-27-2015

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 · ‎08-08-2018

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 · ‎05-08-2019

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.

runner724 · ‎08-06-2018

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 · ‎09-20-2017

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.

gmorris_splunk · ‎06-28-2018

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

bdiego_splunk · ‎03-23-2018

@nuaraujo You need to use:

<form stylesheet="dashboard.css">

aljohnson_splun · ‎01-14-2016

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

spammenot66 · ‎05-11-2017

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 · ‎03-13-2015

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 · ‎07-13-2015

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

tonyca · ‎12-03-2018

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

tonyca · ‎12-03-2018

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

tonyca · ‎11-14-2018

Is this script worked in Splunk 7.2 ?

Limit choices in default TIMEPICKER

How it Works

dashboard.css

/opt/splunk/etc/apps/< appname >/appserver/static/dashboard.css

Introducing Splunk Enterprise 9.2

Adoption of RUM and APM at Splunk

Routing logs with Splunk OTel Collector for Kubernetes