Dashboards & Visualizations

How can I give the to the users to save their selected input filter on a dashboard page?

chitreshakumar
Communicator

I have a dashboard page which we give access to the users.I want to give the option which will save their selected input filter .

woodcock
Esteemed Legend

Why not just tell them to bookmark the page after all the inputs are selected? Once Submit is pushed, the input selection values are stored as URIs in the URL. Bookmark that and return via bookmark. Cake.

0 Karma

niketn
Legend

@chitreshakumar, following is a simple example for the approach required.

I have created a lookup file with name <your_Splunk_app_name>_<logged_in_username>.csv. This stores a row with the current dashboard name and inputs you have selected. You can implement a KV Store on similar lines for better maintenance. Also JavaScript can be extended to generate the query to pull all inputs available in the dashboard and dynamically populate in csv. Current implementation is static where each input needs to be added to be saved in csv and to be pulled back on dashboard load.

The run anywhere example loads with 24 hours as default time and Log Level as All by default until the Selected inputs are saved

alt text
Once the Selected Inputs are saved, on reloading the dashboard, the default values of inputs i.e. 24 hours for time and All for log level is overridden with the saved values.

alt text
Following is the Run any where dashboard Simple XML:

<form script="save_inputs.js">
  <label>Save Logged In User Selection</label>
  <search>
    <query>| inputlookup "$env:app$_$env:user$".csv where tokDashboardName="$env:page$"
    | table tokTime_earliest tokTime_latest tokLogLevel
    </query>
    <done>
      <condition match="$job.resultCount$!=0">
        <set token="form.tokTime.earliest">$result.tokTime_earliest$</set>
        <set token="form.tokTime.latest">$result.tokTime_latest$</set>
        <set token="form.tokLogLevel">$result.tokLogLevel$</set>
        <set token="tokTime.earliest">$result.tokTime_earliest$</set>
        <set token="tokTime.latest">$result.tokTime_latest$</set>
        <set token="tokLogLevel">$result.tokLogLevel$</set>
      </condition>
    </done>
  </search>
  <search>
    <query>| makeresults
| eval tokSave="$tokSave$"
| fields - tokSave
| eval tokTime_earliest="$tokTime.earliest$"
| eval tokTime_latest="$tokTime.latest$"
| eval tokLogLevel="$tokLogLevel$"
| eval tokDashboardName="$env:page$"
| outputlookup "$env:app$_$env:user$".csv
    </query>
  </search>
  <fieldset submitButton="false"></fieldset>
  <row>
    <panel>
      <input type="time" token="tokTime" searchWhenChanged="true">
        <label>Select Time</label>
        <default>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </default>
      </input>
      <input type="dropdown" token="tokLogLevel" searchWhenChanged="true">
        <label>Select Log Level</label>
        <choice value="*">All</choice>
        <choice value="ERROR">Error</choice>
        <choice value="WARN">Warning</choice>
        <default>*</default>
      </input>
      <html>
        <style>
          #saveButtonLabel{
            float:right;
          }
          #saveButton{
            float:right;
          }          
        </style>
        <div id="saveButtonLabel">Click the Save button after changing the input selection to be used later!</div>
        <br/></br>
        <br/></br>
        <button id="saveButton" class="btn">Save Inputs</button>
       </html>
    </panel>
  </row>
  <row>
    <panel>
      <chart>
        <search>
          <query>index=_internal sourcetype=splunkd log_level!="INFO" log_level="$tokLogLevel$"
| stats count by component
| sort - count
| head 10</query>
          <earliest>$tokTime.earliest$</earliest>
          <latest>$tokTime.latest$</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="charting.axisLabelsX.majorLabelStyle.overflowMode">ellipsisNone</option>
        <option name="charting.axisLabelsX.majorLabelStyle.rotation">0</option>
        <option name="charting.axisTitleX.visibility">visible</option>
        <option name="charting.axisTitleY.visibility">visible</option>
        <option name="charting.axisTitleY2.visibility">visible</option>
        <option name="charting.axisX.abbreviation">none</option>
        <option name="charting.axisX.scale">linear</option>
        <option name="charting.axisY.abbreviation">none</option>
        <option name="charting.axisY.scale">linear</option>
        <option name="charting.axisY2.abbreviation">none</option>
        <option name="charting.axisY2.enabled">0</option>
        <option name="charting.axisY2.scale">inherit</option>
        <option name="charting.chart">column</option>
        <option name="charting.chart.bubbleMaximumSize">50</option>
        <option name="charting.chart.bubbleMinimumSize">10</option>
        <option name="charting.chart.bubbleSizeBy">area</option>
        <option name="charting.chart.nullValueMode">gaps</option>
        <option name="charting.chart.showDataLabels">none</option>
        <option name="charting.chart.sliceCollapsingThreshold">0.01</option>
        <option name="charting.chart.stackMode">default</option>
        <option name="charting.chart.style">shiny</option>
        <option name="charting.drilldown">none</option>
        <option name="charting.layout.splitSeries">0</option>
        <option name="charting.layout.splitSeries.allowIndependentYRanges">0</option>
        <option name="charting.legend.labelStyle.overflowMode">ellipsisMiddle</option>
        <option name="charting.legend.mode">standard</option>
        <option name="charting.legend.placement">right</option>
        <option name="charting.lineWidth">2</option>
        <option name="refresh.display">progressbar</option>
        <option name="trellis.enabled">0</option>
        <option name="trellis.scales.shared">1</option>
        <option name="trellis.size">medium</option>
      </chart>
    </panel>
  </row>
</form>

Following is the code for JavaScript file save_inputs.js

 require([
     "splunkjs/mvc",
     "splunkjs/mvc/simplexml/ready!"
 ], function(
             mvc
             ) {
         var defaultTokenModel = mvc.Components.get("default");
         var submittedTokenModel = mvc.Components.get("submitted");
         $("#saveButton").click(function(){
            defaultTokenModel.set("tokSave","true"); 
            submittedTokenModel.set("tokSave","true");
            alert("Selected Inputs Saved!");
         });
 });

PS: Simple XML JavaScript extension is required if you need to Save Input button in your dashboard. If you can use Splunk's Check Box input instead, then you will not need JavaScript.

For the JavaScript to work your would need to place the above JavaScript file under your Splunk App's appserver/static folder.

$SPLUNK_HOME$/etc/apps/<YourAppName>/appserver/static/save_inputs.js
You may need to refresh/bump/restart Splunk and even close internet browser history for your changes to work.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

aamirs291
Path Finder

@niketnilay

If possible could you let me know how this approach can be implemented for multiselect inputs ? It is working for dropdown inputs.

0 Karma

niketn
Legend

@aamirs291, if this is working for you should definitely up-vote the answer 🙂

For us to assist you better you might have to provide the Simple XML code for Multiselect. The idea would remain the same to assign selected values to lookup file on click of Save Inputs button. However, multi-select and check boxes with multiple values have their form token value reflect as comma separated value. Also based on prefix and suffix and also token prefix and token suffix they would change. So I would need to know what you currently have to assist you better.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

aamirs291
Path Finder

Thanks for the quick response. This is how I have coded the multiselect currently

prefix (
suffix )
valuePrefix ticket_states="
valueSuffix "
delimiter OR

Also, I noticed that the inputs were getting saved to the lookup file upon changing them i.e they weren't dependant on the "Save Inputs" button. I am not sure if that is how it is supposed to work.

Let me know.

0 Karma

chitreshakumar
Communicator

Hi @nik I tried doing save input option just like you explained in the answer , But it is not working for me after saving

0 Karma

niketn
Legend

@chitreshakumar, are you getting Selected Inputs Saved pop up when you click Save? Have you checked whether lookup file is getting created under the name of user and app?
Are you trying to implement on single dashboard or multiple?

Is the JavaScript in the correct place? Have you tried F12 to confirm the same in Browser Inspector Tool?

Also are you trying the above Example "as is" or have modified the code as per your needs?

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

mwdbhyat
Builder

@niketnilay how would I go about implementing this in the KV store? Ive got it working with lookups..

0 Karma

chitreshakumar
Communicator

@nik I have tried the above code as it is.It's multiple dashboard

0 Karma

niketn
Legend

@chitreshakumar, If you have multiple dashboards and you are using lookup instead of KVStore, then you should have $env:app$_$env:page$_$env:user$ as the lookup file name for inputlookup and outputlookup command.

In any case, if you have only one dashboard that you are testing this with, can you check whether the lookup file is being generated?

Also to ensure that issue is not with JavaScript, do you see message "Selected Inputs Saved" when you click the Save inputs button?

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

micahkemp
Champion

Splunk makes heavy use of GET, which is convenient in terms of sharing searches and form inputs by simply copying the URL.

It sounds like your users may be able to just bookmark the page after they configure the input filters the way they want them.

0 Karma

chitreshakumar
Communicator

Yeah I want them to bookmark it but unable to find such options to implement in Splunk

0 Karma

micahkemp
Champion

You don't need to bookmark it in Splunk, you just bookmark it in your browser.

0 Karma
Get Updates on the Splunk Community!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...