Add attribute value filter

[jgbernalp]

These changes introduce filters based on user UI selections. Using a LogQL parser the console plugin is able to generate UI filters from a query and vice versa.

Part of this PR:

• Include the components for attribute filtering
• Include a LogQL parser
• synchronize the query content with the selected filters ( double direction editing: UI <-> Query expression)

Screen.Recording.2022-09-26.at.15.55.46.mov

Completes: https://issues.redhat.com/browse/LOG-2983 & https://issues.redhat.com/browse/OU-69

[openshift-ci]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: jgbernalp

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

• OWNERS [jgbernalp]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[jgbernalp]

/retest

[jgbernalp]

/retest

[jgbernalp]

/retest

[jgbernalp]

/retest-required

[kyoto]

Is it necessary to handle this unknown case separately rather than inside the flatMap below?

[jgbernalp]

/retest

[kyoto]

For my comment #27 (review), rather than just renaming the parameter, I was wondering if you could avoid passing in a parameter at all and use queryParams here? Or maybe queryParams won't yet be set when the function is first called?

Taking it a bit further, would something like this work?

useEffect(() => {
  const queryValue = queryParams.get(QUERY_PARAM_KEY) ?? initialQuery;
  const tenantValue = queryParams.get(TENANT_PARAM_KEY) ?? DEFAULT_TENANT;
  const showResourcesValue =
    queryParams.get(SHOW_RESOURCES_PARAM_KEY) ?? DEFAULT_SHOW_RESOURCES;

  setQuery(queryValue);
  setTenant(tenantValue);
  setAreResourcesShown(showResourcesValue === '1');
  setFilters(filtersFromQuery({ query: queryValue, attributes }));
}, [queryParams])

And then you wouldn't need the other two useEffects at all.

[jgbernalp]

Yes, having the useEffect listening into the history rather than the queryValue allowed that the text input didn't loose the caret position.

But in fact this was an issue in the input and shouldn't be solved in the useURLState hook. I changed it to use just one useEffect and adjusted the input proxying the prop in an internal state so the caret position is kept while the url parameter changes.

[openshift-ci]

@jgbernalp: all tests passed!

Full PR test history. Your PR dashboard.

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository. I understand the commands that are listed here.

[kyoto]

/lgtm
Thanks @jgbernalp!