All Apps and Add-ons

How to drilldown from one gantt chart to another gantt chart by passing the clicked value as token in Splunk?

spkriyaz
Path Finder

Hi,

I'm using the Gantt chart visualization from the Gantt chart app to show the status of batch processes. Currently if I click the gantt chart it takes me to the search query instead I want to open another gantt chart.

The problem now is I'm having a hard time getting the Gantt chart to drilldown into another Gantt chart when I click the bar(as shown in below image) of the gantt chart. What I'm trying to achieve is to have the user be taken to another Gantt chart that shows the history of the process (say part 7 days) of the bar he clicked on in the original Gantt chart. 

Any lead or reference would help 🙂

Below is the main gantt chart which I have, when i click on the bar it should drilldown to another gantt chart and pass the process as token so the new gantt chart where I have the history of processes for past 7 days.

gantt.JPG

 

<form script="gantt:autodiscover.js">
  <label>Process Monitoring</label>
  <fieldset submitButton="false">
    <input type="dropdown" token="tko_posting_date" searchWhenChanged="true">
      <label>Posting Date</label>
      <search>
        <query>| gentimes start=-31 end=1 | sort -starttime 
        | eval date=strftime(starttime,"%d-%m-%Y %a")
        | eval pdate=strftime(starttime,"%Y%m%d") 
        | eval today=strftime(now(), "%d-%m-%Y %a") 
        | eval yesterday=strftime(relative_time(now(),"-1d@d"), "%d-%m-%Y %a") 
        | eval adate=case(date = today, "Today", date = yesterday, "Yesterday", 1=1 , date) 
        | eval sortd=case(date = today, "1", date = yesterday, "2", 1=1 , "0") 
        | eval endtime=endtime+43200
        | table pdate adate sortd starttime endtime
        | sort sortd, pdate desc</query>
      </search>
      <fieldForLabel>adate</fieldForLabel>
      <fieldForValue>pdate</fieldForValue>
      <selectFirstChoice>true</selectFirstChoice>
      <change>
        <set token="tko_set_earliest">$row.starttime$</set>
        <set token="tko_set_latest">$row.endtime$</set>
      </change>
    </input>
    <input type="dropdown" token="tko_inst" searchWhenChanged="true">
      <label>Select Institution</label>
      <fieldForLabel>institution_name</fieldForLabel>
      <fieldForValue>institution_number</fieldForValue>
      <search>
        <query>| inputlookup institution_name.csv
| table institution_name institution_number</query>
        <earliest>-15m</earliest>
        <latest>now</latest>
      </search>
      <default></default>
      <initialValue>*</initialValue>
      <choice value="*">ALL</choice>
    </input>
    <input type="dropdown" token="tko_emins" searchWhenChanged="true">
      <label>Elapsed Mins</label>
      <choice value="1">Non-Zero Values</choice>
      <choice value="0">All Values</choice>
      <default>1</default>
    </input>
  </fieldset>
  <row>
    <panel>
      <html>
            <h2>Gantt Chart demo</h2>
            <div id="demo-search" class="splunk-manager" data-require="splunkjs/mvc/searchmanager" 
            data-options="{          
            &quot;search&quot;: { &quot;type&quot;: &quot;token_safe&quot;, &quot;value&quot;: &quot;| inputlookup jobs.csv | search institution_number=$$tko_inst$$ posting_date=$$tko_posting_date$$ duration&gt;=$$tko_emins$$ &quot; },   
            &quot;earliest_time&quot;: { &quot;type&quot;: &quot;token_safe&quot;, &quot;value&quot;: &quot;$$tko_set_earliest$$&quot; },       
            &quot;latest_time&quot;: { &quot;type&quot;: &quot;token_safe&quot;, &quot;value&quot;: &quot;$$tko_set_latest$$&quot; },          
            &quot;cancelOnUnload&quot;: true,              
            &quot;preview&quot;: true           
            }">
            </div>

            <div id="demo-view" class="splunk-view" data-require="app/gantt/components/gantt/gantt" data-options="{     
            &quot;managerid&quot;: &quot;demo-search&quot;,   
            &quot;startField&quot;: &quot;startField&quot;,     
            &quot;durationField&quot;: &quot;duration&quot;,    
            &quot;categoryLabel&quot;: &quot;Process&quot;,        
            &quot;categoryField&quot;: &quot;process&quot;        
            }">
            </div>
        </html>
    </panel>
  </row>
</form>

 

Any thoughts?

Labels (2)
Tags (1)
0 Karma
Get Updates on the Splunk Community!

OpenTelemetry for Legacy Apps? Yes, You Can!

This article is a follow-up to my previous article posted on the OpenTelemetry Blog, "Your Critical Legacy App ...

UCC Framework: Discover Developer Toolkit for Building Technology Add-ons

The Next-Gen Toolkit for Splunk Technology Add-on Development The Universal Configuration Console (UCC) ...

.conf25 Community Recap

Hello Splunkers, And just like that, .conf25 is in the books! What an incredible few days — full of learning, ...