Custom filter section in dashboard

OpenSearch Dashboards
1

Hi,
I want to create a section of different filters using controls visual in dashboard. which will include all type of filters including options dropdowns, range sliders and calendars to filter on date fields. How can I add calendar filters? Any input on how to achieve this.
Many Thanks.

2

OpenSearch Dashboards already has built-in global time filtering controls. See Setting the time filter - OpenSearch documentation for more info. There’s no plan to duplicate that functionality in the controls visualization type.

3

I assume you want to create a plugin similar to the controls plugin today, but one that has a calendar like ui? As @joshuarrrr mentioned, since we can already do that pretty easily, we likely wont be duplicating that feature in the controls. that being said, if you want to build a custom plugin that does this, you can do this in many ways, but the easiest might be to use the existing uiActions trigger SELECT_RANGE_TRIGGER. This is what current visualizations use to specify the start and end time when brushing over a histogram visualization.

4

Could you please explain a bit more on this

5

There isn’t a lot of documentation on this right now unfortunately, and i’m currently working on a PR to improve docs for UI Actions. Will share it once its ready here. But the jist of it is that the UI Actions plugin is today has a few registered actions and triggers meant specifically to set the timerange and filters. The visualizations today use these triggers. so when you click on a bucket agg in a bar chart visualization, you should see that bucket be added to the filter bar. You can similarly use the same triggers in your app to do the same.

There is another approach you can use to do this btw, but its limited to setting just the query, date and filters. It cannot be extended beyond that. This is to use the filterManager service in the data plugin. It is responsible for maintaining the state of the query bar. It has api methods to update those values and is a more direct way of setting the time range, etc.

This being said, your easiest approach here would be to take a look at the controls plugin to see how it works under the hood and use the features that make sense for you.

1 Like