Dashboards & Visualizations

How to get the values of a drop-down box input to navigate to another page in Simple XML?

Path Finder

Hello,

My Dashboard has two simple drop-downs which generate the options in them dynamically by executing a search. The search performs an inputlookup to populate the drop-downs from a csv file present in the server.
Here's how my csv file looks like:

APP_FAMILY,APPLICATION
app_fam1,app_name1
app_fam1,app_name2
app_fam2,app_name3
app_fam2,app_name4

Now the first drop-down populates itself with the distinct values from the APP_FAMILY (application family) column, and then the second drop-down populates itself with the applications under that application family.

Now, according to what application the user chooses, the page should load that application specific page containing its metrics in a dashboard.

Example:
If the application name is app_name1;
the page that loads should be business_metrics_app_name1?form.app_family=app_fam1&form.app=app_name1

Here's my code in Simple XML:

<form>
  <label>Business Metrics</label>
  <fieldset submitButton="false" autoRun="true">
    <input type="dropdown" token="app_family" searchWhenChanged="true">
      <label>Select Application Family</label>
      <search>
        <query>| inputlookup lookupFile.csv | table App_Family | dedup App_Family</query>
        <earliest>0</earliest>
      </search>
      <fieldForLabel>App_Family</fieldForLabel>
      <fieldForValue>App_Family</fieldForValue>
    </input>
    <input type="dropdown" token="app" searchWhenChanged="true">
      <label>Select Application</label>
      <search>
        <query>| inputlookup lookupFile.csv | where App_Family="$app_family$" | table Application</query>
        <earliest>0</earliest>
      </search>
      <fieldForLabel>Application</fieldForLabel>
      <fieldForValue>Application</fieldForValue>
    </input>
  </fieldset>
</form>

how can this be achieved using simple XML?

I can perform the task using HTML and JQuery, but I want the same look and feel that splunk provides in the dashboard.
If further clarifications are needed I will assist in any way I can.

alt text

1 Solution

SplunkTrust
SplunkTrust

You can give this a try. This give two dropdown (used your sample static data, change the dropdown queries accordingly). Once you select options from both the dropdown, a table appears with clickable rows. Click on the row will redirect to specified URL with values passed from dropdown.

<form>
  <label>Business Metrics</label>
  <fieldset submitButton="false" autoRun="true">
    <input type="dropdown" token="app_family" searchWhenChanged="true">
      <label>Select Application Family</label>
      <search>
        <query>| gentimes start=-1 | eval temp="app_fam1,app_name1  app_fam1,app_name2  app_fam2,app_name3  app_fam2,app_name4" | table temp | makemv temp | mvexpand temp | rex field=temp "(?<App_Family>.*),(?<Application>.*)" | table App_Family | dedup App_Family</query>
        <earliest>0</earliest>
      </search>
      <fieldForLabel>App_Family</fieldForLabel>
      <fieldForValue>App_Family</fieldForValue>
      <populatingSearch fieldForLabel="App_Family" fieldForValue="App_Family">| gentimes start=-1 | eval temp="app_fam1,app_name1  app_fam1,app_name2  app_fam2,app_name3  app_fam2,app_name4" | table temp | makemv temp | mvexpand temp | rex field=temp "(?<App_Family>.*),(?<Application>.*)" | table App_Family | dedup App_Family</populatingSearch>
    </input>
    <input type="dropdown" token="app" searchWhenChanged="true">
      <label>Select Application</label>
      <search>
        <query>| gentimes start=-1 | eval temp="app_fam1,app_name1  app_fam1,app_name2  app_fam2,app_name3  app_fam2,app_name4" | table temp | makemv temp | mvexpand temp | rex field=temp "(?<App_Family>.*),(?<Application>.*)" | where App_Family="$app_family$" | table Application</query>
        <earliest>0</earliest>
      </search>
      <fieldForLabel>Application</fieldForLabel>
      <fieldForValue>Application</fieldForValue>
      <populatingSearch fieldForLabel="Application" fieldForValue="Application">| gentimes start=-1 | eval temp="app_fam1,app_name1  app_fam1,app_name2  app_fam2,app_name3  app_fam2,app_name4" | table temp | makemv temp | mvexpand temp | rex field=temp "(?<App_Family>.*),(?<Application>.*)" | where App_Family="$app_family$" | table Application</populatingSearch>
    </input>
  </fieldset>
   <row>
    <panel>
      <table depends="$app$">
        <title>Launcher</title>
        <searchString>| gentimes start=-1 | eval Launcher="Click Here to Launch the Dashboard" | table Launcher</searchString>
        <earliestTime>0</earliestTime>
        <latestTime/>       
        <option name="wrap">true</option>
        <option name="rowNumbers">false</option>
        <option name="dataOverlayMode">none</option>
        <option name="drilldown">cell</option>
        <drilldown>
          <link>
             <![CDATA[
/app/YourAppNameHere/business_metrics_$app$?form.app_family=$app_family$&form.app=$app$
  ]]>
          </link>
        </drilldown>
        <option name="count">10</option>
      </table>
    </panel>
  </row>
</form>

View solution in original post

SplunkTrust
SplunkTrust

You can give this a try. This give two dropdown (used your sample static data, change the dropdown queries accordingly). Once you select options from both the dropdown, a table appears with clickable rows. Click on the row will redirect to specified URL with values passed from dropdown.

<form>
  <label>Business Metrics</label>
  <fieldset submitButton="false" autoRun="true">
    <input type="dropdown" token="app_family" searchWhenChanged="true">
      <label>Select Application Family</label>
      <search>
        <query>| gentimes start=-1 | eval temp="app_fam1,app_name1  app_fam1,app_name2  app_fam2,app_name3  app_fam2,app_name4" | table temp | makemv temp | mvexpand temp | rex field=temp "(?<App_Family>.*),(?<Application>.*)" | table App_Family | dedup App_Family</query>
        <earliest>0</earliest>
      </search>
      <fieldForLabel>App_Family</fieldForLabel>
      <fieldForValue>App_Family</fieldForValue>
      <populatingSearch fieldForLabel="App_Family" fieldForValue="App_Family">| gentimes start=-1 | eval temp="app_fam1,app_name1  app_fam1,app_name2  app_fam2,app_name3  app_fam2,app_name4" | table temp | makemv temp | mvexpand temp | rex field=temp "(?<App_Family>.*),(?<Application>.*)" | table App_Family | dedup App_Family</populatingSearch>
    </input>
    <input type="dropdown" token="app" searchWhenChanged="true">
      <label>Select Application</label>
      <search>
        <query>| gentimes start=-1 | eval temp="app_fam1,app_name1  app_fam1,app_name2  app_fam2,app_name3  app_fam2,app_name4" | table temp | makemv temp | mvexpand temp | rex field=temp "(?<App_Family>.*),(?<Application>.*)" | where App_Family="$app_family$" | table Application</query>
        <earliest>0</earliest>
      </search>
      <fieldForLabel>Application</fieldForLabel>
      <fieldForValue>Application</fieldForValue>
      <populatingSearch fieldForLabel="Application" fieldForValue="Application">| gentimes start=-1 | eval temp="app_fam1,app_name1  app_fam1,app_name2  app_fam2,app_name3  app_fam2,app_name4" | table temp | makemv temp | mvexpand temp | rex field=temp "(?<App_Family>.*),(?<Application>.*)" | where App_Family="$app_family$" | table Application</populatingSearch>
    </input>
  </fieldset>
   <row>
    <panel>
      <table depends="$app$">
        <title>Launcher</title>
        <searchString>| gentimes start=-1 | eval Launcher="Click Here to Launch the Dashboard" | table Launcher</searchString>
        <earliestTime>0</earliestTime>
        <latestTime/>       
        <option name="wrap">true</option>
        <option name="rowNumbers">false</option>
        <option name="dataOverlayMode">none</option>
        <option name="drilldown">cell</option>
        <drilldown>
          <link>
             <![CDATA[
/app/YourAppNameHere/business_metrics_$app$?form.app_family=$app_family$&form.app=$app$
  ]]>
          </link>
        </drilldown>
        <option name="count">10</option>
      </table>
    </panel>
  </row>
</form>

View solution in original post

Path Finder

I thought that the submit button can be manipulated to this extent, but this will work too. Thank you for your answer @somesoni2