Dashboards & Visualizations
×

Join the Conversation

Without signing in, you're just watching from the sidelines. Sign in or Register to connect, share, and be part of the Splunk Community.
Ask a Question

Adding javascript based date picker into dashboard

anilkapu
Observer
‎09-25-2020 12:45 AM

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

 

Labels (2)
Labels
0 Karma
Reply
Got questions? Get answers!

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

Meet up IRL or virtually!

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

Get Updates on the Splunk Community!

Splunk Enterprise Security: An Automated Phishing Response Workflow

Originally posted on Splunk.com.   Key takeaways  The volume of phishing emails can overwhelm even the most ...

Sharper ES Detections, Agentic AI Integrations, Smarter Workload Management, and More ...

Splunk Lantern is Splunk’s customer success center that provides practical guidance from Splunk experts on key ...

Data Outage Monitoring and Reporting

We’ve all been there, right? Living our best life, working on our Splunk environment, when out of nowhere a ...