Solved: Re: Limit choices in default TIMEPICKER

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

ssaenger · ‎11-10-2023

Hi,

just to help anyone else. This builds on gmorris_splunk answer.

Version:8.2.6

Below only shows Date Range.

Note the removal of the commas, and the use of empty curly brackets.
one thing I could not get to work, was to display only the 'Between' option .

 <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-panel-id^='date']
        {}   !important;
      div[data-test-panel-id^='presets']
        {
        display: none !important;
        }
      div[data-test-panel-id^='dateTime']
        {
        display: none !important;
        }
      div[data-test-panel-id^='advanced']
        {
        display: none !important;
        }
      div[data-test-panel-id^='realTime']
        {
        display: none !important;
        }
      div[data-test-panel-id^='relative']
        {
      display: none !important;
        }
          </style>
        </html>
</panel>

.

rtev · ‎12-13-2018

Looks like somewhere between 7.0.2 and 7.1.2 the API for the Time Picker was deprecated and replaced.

timepickerview.js contents:

define(function(require) {
    var console = require('util/console');

    console.warn(
        '%s is deprecated. Please require %s instead.',
        'splunkjs/mvc/simpleform/timepickerview',
        'splunkjs/mvc/simpleform/timerangeview');

    return require('./timerangeview');
});

There's some documentation about it over in the WebFramework Documentation.

Take a look at TimelineView there for the details:

require([
    "splunkjs/mvc/searchmanager",
    "splunkjs/mvc/timerangeview",
    "splunkjs/mvc/simplexml/ready!"
], function(SearchManager, TimeRangeView) {

    // Create a search manager
    var mysearch = new SearchManager({
        id: "example-search",
        preview: true,
        search: "index=_internal | head 50",
        status_buckets: 300,
        required_field_list: "*"
    });

    // Instantiate a view using the default time range picker
    var mytimerange = new TimeRangeView({
        id: "example-timerange",
        managerid: "example-search",
        preset: "Today",
        el: $("#mytimerangeview")
    }).render();

    // Update the search manager when the time range changes
    mytimerange.on("change", function() {
        mysearch.settings.set(mytimerange.val());
    });

    // Create a custom time range picker

    // Show the Presets panel, hide the Real-time and Advanced panels
    var mypresetsettings = {
        showPresets: true,
        showCustomRealTime: false,
        showCustomAdvanced:false,
    };

    // Define custom preset values
    var mypresetvalues = [
        {label: 'Last 13 minutes', earliest_time: '-13m', latest_time: 'now'},
        {label: 'Last 42 minutes', earliest_time: '-42m', latest_time: 'now'}
    ];

    // Instantiate a view using the custom time range picker
    var mytimerange_custom = new TimeRangeView({
        id: "example-timerange_custom",
        managerid: "example-search",
        presets: mypresetvalues,
        dialogOptions: mypresetsettings,
        el: $("#mytimerangeview_custom")
    }).render();

    // Update the search manager when the time range changes
    mytimerange_custom.on("change", function() {
        mysearch.settings.set(mytimerange_custom.val());
    });
});

(* shamelessly cut and pasted from there )

mmarrast · ‎12-20-2018

Your answers were very helpful.
But now, in the date range panel (with values "before, "since" and "between"), the "before" value is selected by default but I want the "between". Do you know how to do that?

Thank you,

sealeydi · ‎02-17-2019

I too have this question. It appears the behaviour has changed between v6 and v7 of Splunk. Before it was always "between" for the "date range" and "time & date range" sub menus, now it seems to depend on how the underlying selected time stanza is constructed ie if it has latest=now ie "last 60 minutes" then this button is "since", if it is relative ie "yesterday" then it defaults to the "between" button.
The behaviour between the timepicker in the Search App compared to a dashboard now differs in version 7x., which is somewhat annoying.

I would like to know how for a given times.conf stanza you can potentially control what the button behaviour is in the "date range" and "time & date range" sub menus.

It also appears a lot of what is now in the documentation for times.conf no longer works ie sub menu options, [settings] option etc. IT would be good if this was sorted to save people wasting time.

splunker12er · ‎10-01-2018

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

dhtran · ‎11-02-2020

Hello @splunker12er

I've used your solution on Splunk 8.0.6 and it worked fine but only when splunk is in english : base_url/en-US/

My application needs to be in french as well, when I change into base_url/fr-FR/ the css wasn't applied. I've tried to add those elements in french

example :

for

button[data-test^='Today']

equivalent in french

button[data-test^="Aujourd'hui"]

but it didn't seem to work.

Do you have any solution to apply the same solution for differents languages ?

Thanks for your help

elkhalloufi · ‎05-22-2020

Thank you gys for your answers, I am working oon version 7.1.2
how can I remove Since and Before from my Daterange and keep only Between,
Thank you and best regards

elkhalloufi · ‎05-25-2020

Good day, i found the answer
button[data-test-value^='since'],
button[data-test-value^='before'],
label[data-test-value^='Since'],
div[data-test-panel-id^='dateTime'],
div[data-test-panel-id^='presets'],
div[data-test-panel-id^='relative'],
div[data-test-panel-id^='real'],
div[data-test-panel-id^='advanced'] {
display: none;
}
because Since was default, i added this line: label[data-test-value^='Since'],

kennybirdwell · ‎09-22-2021

You took out Since and Before for the data picker so all that was left was Between how did your panel look? Mine initial still comes up with Since but the drop down only has Between. Once you choose Between you can't go back to Since but initially it has Since and you can use Since. I wanted to only allow Between. I tried the label with Between but didn't make a difference, also removed the label from the code all together and it still initially has Since.

jhubbard74 · ‎12-13-2018

mmarrast,

There are 2 options available (that I am aware of):

Create two different APPS and apply the style-sheets as mentioned above to affect the whole app. In my opinion this is the correct and only way this should be used.
Create multiple style-sheets in a single app, and refer to each style-sheet within each dashboard or form directly. This option will work, only as long as the dashboard CSS is the final CSS to be applied. I cannot guarantee that this is the case since I have not fully tested every scenario.

Summary explanation of option 2
There is a good document write-up in dev.splunk.com: Modify dashboards using Simple XML.

The quick steps from the above link:
1. Add separate CSS files to $SPLUNK_HOME/etc/apps/app_name/appserver/static/ directory. Lets say stylesA.css and stylesB.css.
2. Edit the Simple XML code of your dashboard: While viewing your dashboard click Edit then click Source
3. The very first line should read: <dashboard> (or <form>). Add the stylesheet element attribute to the element. For example: in dashboard A you would add <dashboard stylesheet="stylesA.css"> ; and for dashboard B you would add <dashboard stylesheet="stylesB.css">

mmarrast · ‎12-13-2018

Hello,

How to apply a custom css to a date range picker in a first dashboard, and applying another css to another date range picker in another dashboard ?

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

runner724 · ‎07-16-2018

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

gmorris_splunk · ‎08-06-2018

Unfortunately this doesn't work for me?

runner724 · ‎08-06-2018

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

Murali2888 · ‎08-06-2018

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

jwhubbard · ‎08-06-2018

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

Murali2888 · ‎08-06-2018

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

elkhalloufi · ‎05-22-2020

Thank you gys for your answers, I am working oon version 7.1.2
how can I remove Since and Before from my Daterange and keep only Between,
Thank you and best regards

runner724 · ‎08-07-2018

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

Limit choices in default TIMEPICKER

How it Works

dashboard.css

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

How it Works

dashboard.css

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

Stay Connected: Your Guide to November Tech Talks, Office Hours, and Webinars!

Transform your security operations with Splunk Enterprise Security

Splunk Admins and App Developers | Earn a $35 gift card!