How to Change Panel Title Using Time Range Picker Dynamically Or In Human Readable Format
Hi Guys!!!
Today we have come with an interesting new trick regarding Splunk Dashboard. We will show you how to change Dashboard’s Panel Title Using Time Range Picker.
So, let’s start.
Step: 1
First, we will create a dashboard named “Test Dashboard” with a single panel “Event Count” with one “Time” input option.
We have used the below query to create the Panel of the Dashboard.
index=_internal sourcetype=splunkd_ui_access | stats count
Explanation:
Here, we have given the Panel Title as “Event Count” and in the “Time Range Picker” we have selected “Last 24 hours”.
Now, we want to make the panel title like “Event Count for Last 24 hours” or if we will select the “Time Range Picker” to “Last 7 days”, the title will be changed to “Event Count for Last 7 days”.
The red-bordered portion we have added in the “Source” to add the “Time Range Picker”.
Please, follow the next steps,
Step: 2
To achieve this requirement we will create a base search which we will use in the Dashboard.
First we will discuss and explain the query of the base search.
Please, see the below query,
| makeresults | eval aa="-24d@d" | rex field=aa "(?<bb>\d+)(?<cc>\w+)" | eval earliest_time=case(bb!=1 AND cc="d","Last ".bb." days",bb=1 AND cc="d","Last ".bb." day")
Explanation:
| makeresults -> This returned “_time” field.
| eval aa=”-24d@d” -> We created “aa” field which has “-24d@d” means “Last 24 days”
| rex field=aa “(?<bb>\d+)(?<cc>\w+)” -> Using rex command we have created two more fields “bb” and “cc”, where “bb” contains the digit(24) and “cc” contains d(days)
| eval earliest_time=case(bb!=1 AND cc=”d”,”Last “.bb.” days”,bb=1 AND cc=”d”,”Last “.bb.” day”) -> Here, we have created a field named “earliest_time”. We have used case function in the following way,
bb!=1 AND cc=”d”,”Last “.bb.” days” -> This means if “bb” contains any value except 1 and “cc” contains “d”, the field “earliest_time” will contain “Last “.bb.” days”(here, Last 24 days).
bb=1 AND cc=”d”,”Last “.bb.” day” -> This means if “bb” contains value 1 and “cc” contains “d”, the field “earliest_time” will contain “Last “.bb.” day”(eg:, Last 1 day).
The same way we have created for “Hour ranges”, Please see the below query,
| makeresults | eval aa="-24h@h" | rex field=aa "(?<bb>\d+)(?<cc>\w+)" | eval earliest_time=case(bb!=1 AND cc="h","Last ".bb." hours",bb=1 AND cc="h","Last ".bb." hour")
Expalantion:
| makeresults -> This returned “_time” field.
| eval aa=”-24h@h” -> We created “aa” field which has “-24h@h” means “Last 24 hours”
| rex field=aa “(?<bb>\d+)(?<cc>\w+)” -> Using rex command we have created two more fields “bb” and “cc”, where “bb” contains the digit(24) and “cc” contains h(hours)
| eval earliest_time=case(bb!=1 AND cc=”h”,”Last “.bb.” hours”,bb=1 AND cc=”h”,”Last “.bb.” hour”) -> Here, we have created a field named “earliest_time”. We have used case function in the following way,
bb!=1 AND cc=”h”,”Last “.bb.” hours” -> means if “bb” contains any value except 1 and “cc” contains “h”, the field “earliest_time” will contain “Last “.bb.” hours”(here, Last 24 hours).
bb=1 AND cc=”h”,”Last “.bb.” hour” -> This means if “bb” contains value 1 and “cc” contains “h”, the field “earliest_time” will contain “Last “.bb.” hour”(eg:, Last 1 hour).
The same way, we have created conditions for minute(s), second(s), month(s) and all the condition of case function, we have put together like below,
| eval earliest_time=case(bb!=1 AND cc="d","Last ".bb." days",bb=1 AND cc="d","Last ".bb." day",bb!=1 AND cc="s","Last ".bb." seconds",bb=1 AND cc="s","Last ".bb." second", bb!=1 AND cc="h","Last ".bb." hours",bb=1 AND cc="h","Last ".bb." hour",bb!=1 AND cc="m","Last ".bb." minutes",bb=1 AND cc="m","Last ".bb." minute",bb!=1 AND cc="mon","Last ".bb." months",bb=1 AND cc="mon","Last ".bb." month")
Step: 3
Click on the “Edit” option.
Step: 4
Click on the “Source” option.
Step: 5
Explanation:
“<search id=”baseSearch”>
<query>| makeresults
| eval aa=”$time.earliest$”
| rex field=aa “(?<bb>\d+)(?<cc>\w+)”
| eval earliest_time=case(bb!=1 AND cc=”d”,”Last “.bb.” days”,bb=1 AND cc=”d”,”Last “.bb.” day”,bb!=1 AND cc=”s”,”Last “.bb.” seconds”,bb=1 AND cc=”s”,”Last “.bb.” second”, bb!=1 AND cc=”h”,”Last “.bb.” hours”,bb=1 AND cc=”h”,”Last “.bb.” hour”,bb!=1 AND cc=”m”,”Last “.bb.” minutes”,bb=1 AND cc=”m”,”Last “.bb.” minute”,bb!=1 AND cc=”mon”,”Last “.bb.” months”,bb=1 AND cc=”mon”,”Last “.bb.” month”)</query>” -> First we have created a base search with the query we have created (step: 2).Only, one changes we have made “| eval aa=”$time.earliest$“, so that it will take the earliest time selected in the “Time Range Picker”.
“<earliest>$time.earliest$</earliest>
<latest>$time.latest$</latest>” -> Here, in “earliest” and “latest” tags we have mentioned the token to take “earliest” and “latest” time selected from the “Time Range Picker” respectively.
“<done>
<set token=”time_range”>$result.earliest_time$</set>
</done>” -> Then we have open “done” tag and created a token named “time_range” where we are setting the value of the field named “earliest_time”[ $result.earliest_time$]
“<title>Event Count for $time_range$</title>” -> Then here in the title of the panel we have added “Event Count for $time_range$” [$time_range$ token will be responsible for changing the Panel title with the value selected from the “Time Range Picker” dynamically]
Step: 6
Now, click on the “Save” to save the changes.
Step: 7
As you can see in the above image the panel of the Dashboard is changing according to the time selected in “Time Range Picker”.
Please click here to download the source code of the dashboard.
