Dashboards & Visualizations

Is it possible to set a token through an html form rather than an input?

andrewtrobec
Motivator

Hello,
I'm trying to set a token from within an html form which is within a panel. Since the date input in HTML is very useful, I'm trying to pass that value to a token for use in dashboard panel searches. Here is an idea of what I'm trying to do (it doesn't work):

<form>
  <label>Set Date</label>
  <row>
    <panel>
      <html>
            Date: <input type="date" token="tok_date"/>
        </html>
    </panel>
  </row>
  <row>
    <panel>
      <event>
        <search>
          <query>| makeresults | eval Value = "$tok_date$" | table Value</query>
          <earliest>0</earliest>
        </search>
        <option name="colorBy">value</option>
        <option name="colorMode">none</option>
        <option name="numberPrecision">0</option>
        <option name="showSparkline">1</option>
        <option name="showTrendIndicator">1</option>
        <option name="trendColorInterpretation">standard</option>
        <option name="trendDisplayMode">absolute</option>
        <option name="useColors">0</option>
        <option name="useThousandSeparators">1</option>
        <option name="linkView">search</option>
        <option name="underLabel">Selected Date</option>
        <option name="list.drilldown">full</option>
        <option name="list.wrap">1</option>
        <option name="maxLines">5</option>
        <option name="raw.drilldown">full</option>
        <option name="rowNumbers">0</option>
        <option name="table.drilldown">all</option>
        <option name="table.wrap">1</option>
        <option name="type">list</option>
        <fields>["host","source","sourcetype"]</fields>
      </event>
    </panel>
  </row>
</form>

Is what I'm trying to do at all possible?

Thank you and best regards,

Andrew

Tags (2)
0 Karma

poete
Builder

Hello @andrewtrobec ,

I modified a bit the content of the content of the dashboard and wrote a few lines of javascript, and it works.

<dashboard script="testToken.js">
  <label>Set Date</label>
  <row>
    <panel>
      <html>

             Date: <input type="date" token="tok_date"/>

            <input type="button" id="submitButton" value="Click Me!"/>
         </html>
    </panel>
  </row>
  <row>
    <panel>
      <table>
        <search>
          <query>| makeresults | eval Value="$tok_date$" | table Value</query>
          <earliest>0</earliest>
          <latest></latest>
        </search>
        <option name="drilldown">cell</option>
        <option name="refresh.display">progressbar</option>
      </table>
    </panel>
  </row>
</dashboard>

and the content of the js is :

require(['splunkjs/mvc','jquery', 'splunkjs/mvc/simplexml/ready!'], function (mvc,$) {
    $(document).ready(function () {
        // Retrieve the default token model
        var defaultTokenModel = mvc.Components.get("default");

            $("#submitButton").on("click", function (){
                defaultTokenModel.set("tok_date", document.querySelector('input[type="date"]').value);
             });    
        });
});

You should be able to elaborate from this

0 Karma
Get Updates on the Splunk Community!

Routing logs with Splunk OTel Collector for Kubernetes

The Splunk Distribution of the OpenTelemetry (OTel) Collector is a product that provides a way to ingest ...

Welcome to the Splunk Community!

(view in My Videos) We're so glad you're here! The Splunk Community is place to connect, learn, give back, and ...

Tech Talk | Elevating Digital Service Excellence: The Synergy of Splunk RUM & APM

Elevating Digital Service Excellence: The Synergy of Real User Monitoring and Application Performance ...