How to add filter panel in kibana custom plugin

Elastic Stack Kibana
1

Hi
I am trying to develop a custom kibana plugin and want to add the filter bar to my plugin similar to the one in discover
How can I add the filter bar to mu custom kibana plugin?

2

Are you using Elastic UI Framework?

https://elastic.github.io/eui/#/tabular-content/in-memory-tables

If so you can just add a filter to your search like in the example below.

  const search = {
    toolsLeft: renderToolsLeft(),
    toolsRight: renderToolsRight(),
    box: {
      incremental: true,
    },
    filters: [
      {
        type: 'field_value_selection',
        field: 'nationality',
        name: 'Nationality',
        multiSelect: false,
        options: store.countries.map(country => ({
          value: country.code,
          name: country.name,
          view: `${country.flag} ${country.name}`,
        })),
      },
    ],
  };
3

Thanks for your suggestion. I am looking for a filter bar similar to Discover plugin.

IS there a way I can use it?

4

Can you be more specific? Which filter bar on the discover page?

I think all of them are built on the functionality I posted above.

5

The one where in I can add a filter
image

6

Not an easy question to answer but here is the source code to how that is done.

7

Hi @ Tejashree_kate

Thank you for this question.

We have been putting quite a lot of effort in the past year, making our services and UI components reusable by community members. One of those components is TopNavMenu, which contains the menu items (like the Save links), the query string input area, time picker and filter bar.

I have recently made an example plugin, and part of is is using the entire navigation panel and consuming it.

You can take a look at this PR:

  • This block renders the entire navigation panel, with minimal configuration:
  • This block subscribes to any changes in the navigation panel:
  • This block consumes the values from the navigation panel to generate an ElasticSearch request.

I would also recommend using the plugin generator to generate the boilerplate for your plugin. The generated plugin already contains the TopNavMenu component, in a structure similar to that of the example plugin mentioned above.

See this PR for more information on the plugin generator.

I would love to hear any feedback you have. Feel free to even post it on that PR.

Thanks,
Liza

1 Like
9

Thanks @Liza_Katz for the example
It was little hard to find it last week, as it's not yet merged with examples in the master branch of Kibana.
That save me a lot of work creating new logic for search in my plugin, all my plugins now include TopNavMenu
Thanks again for the great job you are doing for the community

10

@ylasri So glad to hear you found it useful.
If you like, feel free to share a link with me.
I would love to check it out.

11

Thanks @Liza_Katz
Yes please feel free to review my example and share your comments.
The example is very basic et re-use most of the example your provide.

12

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.