topic Re: Limit choices in default TIMEPICKER in All Apps and Add-ons

Limit choices in default TIMEPICKER

jlhamlet — Fri, 13 Mar 2015 14:19:45 GMT

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,

Re: Limit choices in default TIMEPICKER

tom_frotscher — Fri, 13 Mar 2015 14:55:21 GMT

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

Re: Limit choices in default TIMEPICKER

theouhuios — Mon, 13 Jul 2015 19:56:15 GMT

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

Re: Limit choices in default TIMEPICKER

jhubbard74 — Mon, 27 Jul 2015 16:11:50 GMT

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

Re: Limit choices in default TIMEPICKER

aljohnson_splun — Thu, 14 Jan 2016 21:24:52 GMT

One thing to add here:

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

Re: Limit choices in default TIMEPICKER

spammenot66 — Thu, 11 May 2017 16:00:41 GMT

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>

Re: Limit choices in default TIMEPICKER

nuaraujo — Wed, 20 Sep 2017 19:54:30 GMT

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.

Re: Limit choices in default TIMEPICKER

bdiego_splunk — Fri, 23 Mar 2018 19:05:11 GMT

@nuaraujo You need to use:

<form stylesheet="dashboard.css">

Re: Limit choices in default TIMEPICKER

gmorris_splunk — Thu, 28 Jun 2018 15:08:48 GMT

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

Re: Limit choices in default TIMEPICKER

runner724 — Mon, 16 Jul 2018 17:18:46 GMT

In version Splunk 7.0+, dashboard DOM was significantly changed and the CSS example above no longer works. Here is an updated example that will remove the "Real time" column from the "Presets" tab of time pickers:

div[data-test^='real-time-column'] {
display: none;
}

Re: Limit choices in default TIMEPICKER

Murali2888 — Mon, 06 Aug 2018 12:18:52 GMT

@runner724 Can you let me know how we can remove Advanced and Relative tab? I am looking to retain only "Date Range panel". I tried above method which only works for Presets tab columns.

Re: Limit choices in default TIMEPICKER

gmorris_splunk — Mon, 06 Aug 2018 15:10:48 GMT

Unfortunately this doesn't work for me?

Re: Limit choices in default TIMEPICKER

runner724 — Mon, 06 Aug 2018 15:43:57 GMT

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;
}

Re: Limit choices in default TIMEPICKER

runner724 — Mon, 06 Aug 2018 15:44:41 GMT

Are you on Splunk > 7.0 and did you use _bump after modifying the CSS?

Re: Limit choices in default TIMEPICKER

jwhubbard — Tue, 29 Sep 2020 20:43:49 GMT

This will hide all Accordion Panels except Date Range Panel. Tested in Version: 7.1.1 Build: 8f0ead9ec3db
div[id^='dateandtimerange_view'],
div[id^='presets_view'],
div[id^='advanced_view'],
div[id^='relative_view'],
div[id^='realtime_view'] {
display: none;
}

Re: Limit choices in default TIMEPICKER

Murali2888 — Tue, 07 Aug 2018 01:33:44 GMT

@jwhubbard - I tried this already on 7.1.0 Build: 2e75b3406c5b, but did not work. I can't upgrade to 7.1.1 now unfortunately though.

@runner724 - Thanks for your help. I am able to retain date range and date-time range panel using below.
div[data-test-panel-id^='advanced'],
div[data-test-panel-id^='presets'],
div[data-test-panel-id^='relative'],
div[data-test-panel-id^='real'] {
display: none !important;
}

Could you please let me know how do you inspect the CSS components? In that way, I can make any changes required for future splunk releases.

Re: Limit choices in default TIMEPICKER

runner724 — Tue, 07 Aug 2018 16:12:57 GMT

Put your browser in dev mode (F12) and use the element selector tool to select the thing you are interested in. This will jump the DOM to where that element is on the page.

Then you have to look at the element's DOM and figure out how to target it precisely with CSS. This is pretty tricky after the 7.1.x update because the entire dashboard is now a deep pile of nested div elements with strange attributes (even things like radio buttons and text inputs)

It was easy in 7.0.0 but to this day I struggle with CSS that will resize a drop-down correctly in 7.1.x. Would be nice if Splunk made it easier to give a specific size to UI elements...

Re: Limit choices in default TIMEPICKER

gmorris_splunk — Wed, 08 Aug 2018 10:08:24 GMT

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>

Re: Limit choices in default TIMEPICKER

splunker12er — Mon, 01 Oct 2018 09:58:47 GMT

For who search for time-picker options using stylesheet didnt work after upgrade to version 7.x.
Here is the updated stylesheet (.css) to restrict time-picker selections . Edit as needed to hide time-picker options selectively..

Tested and working in Splunk version in 7.1.2 !

/* ------------------------------------------------- */
/* Hides or display specific portions of the         */
/* Datetimepicker accordion                          */
/* ------------------------------------------------- */

/* OPTIONS
div[data-test-panel-id^='presets']
div[data-test-panel-id^='relative']
div[data-test-panel-id^='realTime']
div[data-test-panel-id^='date']
div[data-test-panel-id^='dateTime']
div[data-test-panel-id^='advanced']
*/


/*Hide advanced, realtime, real, and few presets  - tested in splunk v7.1.2*/
button[data-test^='Business week to date'],
button[data-test^='Week to date'],
button[data-test^='Year to date'],
button[data-test^='Previous week'],
button[data-test^='Previous business week'],
button[data-test^='Previous month'],
button[data-test^='Previous year'],
button[data-test^='Last 15 minutes'],
button[data-test^='Last 60 minutes'],
div[data-test^='real-time-column'],
div[data-test^='past'],
div[data-test^='other-column'],
div[data-test-panel-id^='advanced'],
div[data-test-panel-id^='relative'],
div[data-test-panel-id^='real']
{
display: none !important;
}

Re: Limit choices in default TIMEPICKER

tonyca — Thu, 15 Nov 2018 06:23:41 GMT

Is this script worked in Splunk 7.2 ?