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

rtev
Path Finder

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
Engager

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,

0 Karma

sealeydi
New Member

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.

0 Karma

splunker12er
Motivator

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
Loves-to-Learn Lots

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

 

0 Karma

elkhalloufi
Loves-to-Learn

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

0 Karma

elkhalloufi
Loves-to-Learn

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'],

0 Karma

jhubbard74
Explorer

mmarrast,

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

  1. 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.
  2. 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
Engager

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 ?

0 Karma

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

runner724
Path Finder

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
Splunk Employee
Splunk Employee

Unfortunately this doesn't work for me?

0 Karma

runner724
Path Finder

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

0 Karma

Murali2888
Communicator

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

0 Karma

jwhubbard
Engager

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

0 Karma

Murali2888
Communicator

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

0 Karma

elkhalloufi
Loves-to-Learn

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

0 Karma

runner724
Path Finder

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

0 Karma

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>
0 Karma

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