Dashboards & Visualizations

Each Dashboard Panel should able to run query on submit

prats84
Explorer

Hi,

I would like to create a Dashboard with about 10 panels containing different searches.
I want to 1) display the actual search fo the panels and then 2) allow the user to trigged the search for each panel

I do not want the dashboard to have only one submit button but have a submit or click button for each panel on the dashboard.

Labels (3)
Tags (1)
0 Karma
1 Solution

niketn
Legend

@prats84 if you want SimpleXML option you can try Link Input with CSS override to make them appear as Submit button. If you want JS approach you can check out Octo Insight blog There can be only one ... Submit Button? by @rjthibod.

Following is a run anywhere example with pure Simple XML approach using built in Splunk Link input as button, which runs respective panel chart query only after respective input is selected following respective submit button being clicked. Each time an input is changed the chart is reset and search is unset.

alt text

Following is the approach used:

Step 1: Using Link input <change> event handler set the token when the submit link is clicked. Unset the link form input.
Step 2: Pass the token set in above step as depends to <chart> or any other viz to hide if token is unset and show if token is set.
Step 3: Pass the token set in above step as depends to <search> to stop search from being dispatched if token is unset and run search only when the token is set.
Step 4: On change of respective panel input unset the token set by respective submit link so that chart gets hidden and search is stopped from being dispatched again and requires submit click to re-run the search.
Step 5: Use CSS Style override for making Links appear as Button. PS: For demo example's simplicity CSS Style has been overridden through Simple XML dashboard code through hidden <html> panel. Use CSS Stylesheet in production or actual use case.

<form>
  <label>Panel with Submit Button</label>
  <fieldset submitButton="false"></fieldset>
  <row depends="$alwaysHideCSSPanel$">
    <panel>
      <html>
        <style>
          #link1 div[data-test="radio-bar"],
          #link2 div[data-test="radio-bar"]{
            width: 120px !important;
            background-color: #5CC05C;
          }
          #link1 div[data-test="radio-bar"] button[data-test="option"] span[data-test="label"],
          #link2 div[data-test="radio-bar"] button[data-test="option"] span[data-test="label"]{
            color: #FFFFFF !important;
          }
        </style>
      </html>
    </panel>
  </row>
  <row>
    <panel>
      <title>Panel 1</title>
      <input type="time" token="time1">
        <label></label>
        <default>
          <earliest>-7d@h</earliest>
          <latest>now</latest>
        </default>
        <change>
          <unset token="submit1"></unset>
        </change>
      </input>
      <input id="link1" type="link" token="link1" searchWhenChanged="true">
        <label></label>
        <choice value="submit">Submit</choice>
        <change>
          <condition value="submit">
            <set token="submit1">true</set>
            <unset token="form.link1"></unset>
          </condition>
        </change>
      </input>
      <chart depends="$submit1$">
        <title>Chart 1</title>
        <search depends="$submit1$">
          <query>| tstats count where index=_internal sourcetype=splunkd by _time span=1h</query>
          <earliest>$time1.earliest$</earliest>
          <latest>$time1.latest$</latest>
        </search>
        <option name="charting.chart">line</option>
        <option name="refresh.display">progressbar</option>
      </chart>
    </panel>
    <panel>
      <title>Panel 2</title>
      <input type="time" token="time2">
        <label></label>
        <default>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </default>
        <change>
          <unset token="submit2"></unset>
        </change>
      </input>
      <input id="link2" type="link" token="link2" searchWhenChanged="true">
        <label></label>
        <choice value="submit">Submit</choice>
        <change>
          <condition value="submit">
            <set token="submit2">true</set>
            <unset token="form.link2"></unset>
          </condition>
        </change>
      </input>
      <chart depends="$submit2$">
        <title>Chart 2</title>
        <search depends="$submit2$">
          <query>| tstats count where index=_internal sourcetype=splunkd by _time span=1h</query>
          <earliest>$time2.earliest$</earliest>
          <latest>$time2.latest$</latest>
        </search>
        <option name="charting.chart">line</option>
        <option name="refresh.display">progressbar</option>
      </chart>
    </panel>
  </row>
</form>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

niketn
Legend

@prats84 if you want SimpleXML option you can try Link Input with CSS override to make them appear as Submit button. If you want JS approach you can check out Octo Insight blog There can be only one ... Submit Button? by @rjthibod.

Following is a run anywhere example with pure Simple XML approach using built in Splunk Link input as button, which runs respective panel chart query only after respective input is selected following respective submit button being clicked. Each time an input is changed the chart is reset and search is unset.

alt text

Following is the approach used:

Step 1: Using Link input <change> event handler set the token when the submit link is clicked. Unset the link form input.
Step 2: Pass the token set in above step as depends to <chart> or any other viz to hide if token is unset and show if token is set.
Step 3: Pass the token set in above step as depends to <search> to stop search from being dispatched if token is unset and run search only when the token is set.
Step 4: On change of respective panel input unset the token set by respective submit link so that chart gets hidden and search is stopped from being dispatched again and requires submit click to re-run the search.
Step 5: Use CSS Style override for making Links appear as Button. PS: For demo example's simplicity CSS Style has been overridden through Simple XML dashboard code through hidden <html> panel. Use CSS Stylesheet in production or actual use case.

<form>
  <label>Panel with Submit Button</label>
  <fieldset submitButton="false"></fieldset>
  <row depends="$alwaysHideCSSPanel$">
    <panel>
      <html>
        <style>
          #link1 div[data-test="radio-bar"],
          #link2 div[data-test="radio-bar"]{
            width: 120px !important;
            background-color: #5CC05C;
          }
          #link1 div[data-test="radio-bar"] button[data-test="option"] span[data-test="label"],
          #link2 div[data-test="radio-bar"] button[data-test="option"] span[data-test="label"]{
            color: #FFFFFF !important;
          }
        </style>
      </html>
    </panel>
  </row>
  <row>
    <panel>
      <title>Panel 1</title>
      <input type="time" token="time1">
        <label></label>
        <default>
          <earliest>-7d@h</earliest>
          <latest>now</latest>
        </default>
        <change>
          <unset token="submit1"></unset>
        </change>
      </input>
      <input id="link1" type="link" token="link1" searchWhenChanged="true">
        <label></label>
        <choice value="submit">Submit</choice>
        <change>
          <condition value="submit">
            <set token="submit1">true</set>
            <unset token="form.link1"></unset>
          </condition>
        </change>
      </input>
      <chart depends="$submit1$">
        <title>Chart 1</title>
        <search depends="$submit1$">
          <query>| tstats count where index=_internal sourcetype=splunkd by _time span=1h</query>
          <earliest>$time1.earliest$</earliest>
          <latest>$time1.latest$</latest>
        </search>
        <option name="charting.chart">line</option>
        <option name="refresh.display">progressbar</option>
      </chart>
    </panel>
    <panel>
      <title>Panel 2</title>
      <input type="time" token="time2">
        <label></label>
        <default>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </default>
        <change>
          <unset token="submit2"></unset>
        </change>
      </input>
      <input id="link2" type="link" token="link2" searchWhenChanged="true">
        <label></label>
        <choice value="submit">Submit</choice>
        <change>
          <condition value="submit">
            <set token="submit2">true</set>
            <unset token="form.link2"></unset>
          </condition>
        </change>
      </input>
      <chart depends="$submit2$">
        <title>Chart 2</title>
        <search depends="$submit2$">
          <query>| tstats count where index=_internal sourcetype=splunkd by _time span=1h</query>
          <earliest>$time2.earliest$</earliest>
          <latest>$time2.latest$</latest>
        </search>
        <option name="charting.chart">line</option>
        <option name="refresh.display">progressbar</option>
      </chart>
    </panel>
  </row>
</form>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

prats84
Explorer

Worked like a charm. Thanks

Sfry1981
Communicator

If i understand this correctly this should be quite straight forward. On your dashboard press edit, + Add Input, select dropdown and when it shows in the top of the dashboard, drag and drop that into the panel, repeat this for each panel by following the above ten times (or you can copy and paste directly in the source if you prefer), once done you can set each drop-down based on that search.

If you want further help let me know or let me know if this isnt what you were looking at.

0 Karma

prats84
Explorer

Thank you for your answer. This is not exactly what I was looking for but does answer some aspect.
I more looking for an on-demand or user-input search for each panel.

The user is showing the entire search query and only when the user clicks on the panel or a particular Submit button on the respective panel the search is triggered and the results are returned.

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 ...