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

Join the Splunk Community Slack to learn, troubleshoot, and make connections with fellow Splunk practitioners in real time!

Join Splunk User Groups to connect and learn in-person by region or remotely by topic or industry.

Announcing Modern Navigation: A New Era of Splunk User Experience

Best Practices: Splunk auto adjust pipeline queue

Request for Professional Development: Attending .conf26

Join the Conversation

Adding javascript based date picker into dashboard

javascript

simple XML

Join the Splunk Community Slack to learn, troubleshoot, and make connections with fellow Splunk practitioners in real time!

Join Splunk User Groups to connect and learn in-person by region or remotely by topic or industry.

Announcing Modern Navigation: A New Era of Splunk User Experience

Best Practices: Splunk auto adjust pipeline queue

Request for Professional Development: Attending .conf26