When building a table or list of assets in Kibana, we will often want to filter and search within that list. Usually in Kibana when this is needed, developers reach for a SearchBar component provided by the Shared UX team in the App Experience org.
The unified search bar does some version of the following:
Validates search input and provides autocomplete by way of the ES mappings of a provided data view
Provides a version of the validated, selected filters formatted in one of the standard Elasticsearch query language formats, usually KQL but with options such as "lucene" available as well
For working with the asset client, we would prefer to have the UI know nothing about the underlying ES schema or the queries being constructed to access the data that fills the table. Instead, we would like to have a search component that does the following:
Validates search input by way of a provided TS + runtime validation, similar to what io-ts or zod provides,
Provides autocomplete via callback
Provides a formatted, validated hash of the selected inputs in some standard format that represents the nested levels of and/or boolean logic and selected filters and values
At the moment, we've just used a simple EuiSearchInput to achieve a very crude and incomplete version of this for a "proof of concept", but it loses a lot of the string parsing logic around "and", "or", parentheses, quotation marks, and more, so if it's possible to reuse an existing component or tool for doing this logic, that would be better than building this from scratch.
When building a table or list of assets in Kibana, we will often want to filter and search within that list. Usually in Kibana when this is needed, developers reach for a
SearchBar
component provided by the Shared UX team in the App Experience org.The unified search bar does some version of the following:
For working with the asset client, we would prefer to have the UI know nothing about the underlying ES schema or the queries being constructed to access the data that fills the table. Instead, we would like to have a search component that does the following:
At the moment, we've just used a simple
EuiSearchInput
to achieve a very crude and incomplete version of this for a "proof of concept", but it loses a lot of the string parsing logic around "and", "or", parentheses, quotation marks, and more, so if it's possible to reuse an existing component or tool for doing this logic, that would be better than building this from scratch.