Adding javascript based date picker into dashboard

anilkapu · ‎09-25-2020

Hi,

I have dashboard with several visualizations. Im trying to add 2 date pickers "From", "To" to select date range so that the visualizations query events in that date range input by the user. I'm not able to use splunk's default "Time" input object because I have to limit users from selecting "From" date to maximum of 3 years from current date.

I have been able to add the date pickers into simplexml as per suggestion in this post https://community.splunk.com/t5/Dashboards-Visualizations/Jquery-datepicker-in-splunk/m-p/361049

The thing which I'm struggling with is to set the min/max attribute of "date" type element on "change" event. To explain this...for example.. if a user selects "From" date as 09/21/2020, then the calendar in "To" date should disable all the dates before this date.. Likewise if user selects 09/21/2020 as "To" date then disable all date selections after this date in "From" date field.

Here is the code for dashboard

<dashboard script="datepicker.js">
  <label>HTML Date Picker</label>
  <!-- Dumy Search to set From Date and To Date on load-->
  <search>
    <query>| makeresults | eval fromDate=strftime(relative_time(now(),"-1d@d"),"%Y-%m-%d") | eval toDate=strftime(now(),"%Y-%m-%d")</query>
    <earliest>-1s@s</earliest>
    <latest>now</latest>
    <done>
      <eval token="strMinDate">strftime(relative_time(now(), "-3years"), "%Y-%m-%d")</eval>
      <eval token="strMaxDate">strftime(now(), "%Y-%m-%d")</eval>

    </done>
  </search>
  <!-- Dumy Search to convert String Time to Epoch Time-->
  <search>
    <query>| makeresults | eval earliestTime=strptime("$tokFromDate$","%Y-%m-%d") | eval latestTime=strptime("$tokToDate$","%Y-%m-%d")</query>
    <earliest>-1s@s</earliest>
    <latest>now</latest>
    <done>
      <set token="tokEarliestTime">$result.earliestTime$</set>
      <set token="tokLatestTime">$result.latestTime$</set>
    </done>
  </search>
  <row>
    <panel>
      <title>Selected String Time - $strMinDate$ - $strMaxDate$</title>
      <html>
        <style>
          .dateContainer {
            display: flex;
          }
          .dateInput {
            padding-right: 15px;
          }
        </style>
        <div class="dateContainer">
          <div class="dateInput">
            <div>From Date:</div>
            <input id="inputFromDate" type="date" min="$strMinDate$" max="$strMaxDate$"/>
          </div>
          <div class="dateInput">
            <div>To Date:</div>
            <input id="inputToDate" type="date" min="$strMinDate$" max="$strMaxDate$"/>
          </div>
        </div>
      </html>
    </panel>
  </row>
  <row>
    <panel>
      <title>Converted Epoch Time - $tokFromDate$ $tokToDate$</title>
      <chart>
        <title>Splunkd errors timechart by top 5 components</title>
        <search>
          <query>index=_internal sourcetype="splunkd" log_level!="INFO" component="*" | timechart count by component limit=5 usenull=f useother=f
          </query>
          <earliest>$tokEarliestTime$</earliest>
          <latest>$tokLatestTime$</latest>
        </search>
        <option name="charting.axisTitleX.text">Time</option>
        <option name="charting.axisTitleY.text">Count</option>
        <option name="charting.chart.stackMode">stacked</option>
      </chart>
    </panel>
  </row>
</dashboard>

Below is the javascript

require([
  "jquery",
  "splunkjs/mvc",
  "splunkjs/mvc/simplexml/ready!"
], function($, mvc) {
  var submittedTokenModel = mvc.Components.get("submitted");
  var defaultTokenModel = mvc.Components.get("default");

  // On change of html date input inputFromDate, update the token tokFromDate in default and submitted model
  $(document).on("change", "#inputFromDate", function() {
    var dateText = $("#inputFromDate").val();
    defaultTokenModel.set("tokFromDate", dateText);
    submittedTokenModel.set("tokFromDate", dateText);
//update the min value of "To" date field to selected "From" date
    if (dateText) $("#inputToDate").attr('min', dateText);
  });

  // On change of html date input inputToDate, update the token tokToDate in default and submitted model
  $(document).on("change", "#inputToDate", function() {
    var dateText = $("#inputToDate").val();
    defaultTokenModel.set("tokToDate", dateText);
    submittedTokenModel.set("tokToDate", dateText);
//update the max value of "From" date field to selected "To" date
    if (dateText) $("#inputFromDate").attr('max', dateText);

  });
});

I'm using Splunk version Version:7.3.3 Build -7af3758d0d5e

Could any one suggest what am I doing wrong? Any help would be much appreciated

Adding javascript based date picker into dashboard

javascript

simple XML

Exciting News: The AppDynamics Community Joins Splunk!

The All New Performance Insights for Splunk

Good Sourcetype Naming

Are you a member of the Splunk Community?

Adding javascript based date picker into dashboard

javascript

simple XML

Exciting News: The AppDynamics Community Joins Splunk!

The All New Performance Insights for Splunk

Good Sourcetype Naming