NETOBSERV-2417: Display Loki labels in bold in filters dropdown

[OlivierCazade]

Description

Display Loki labels in bold in filters dropdown

• Add lokiLabels to frontend config
• Populate lokiLabels from Loki config

Dependencies

n/a

Checklist

If you are not familiar with our processes or don't know what to answer in the list below, let us know in a comment: the maintainers will take care of that.

• Is this PR backed with a JIRA ticket? If so, make sure it is written as a title prefix (in general, PRs affecting the NetObserv/Network Observability product should be backed with a JIRA ticket - especially if they bring user facing changes).
• Does this PR require product documentation?
  • If so, make sure the JIRA epic is labelled with "documentation" and provides a description relevant for doc writers, such as use cases or scenarios. Any required step to activate or configure the feature should be documented there, such as new CRD knobs.
• Does this PR require a product release notes entry?
  • If so, fill in "Release Note Text" in the JIRA.
• Is there anything else the QE team should know before testing? E.g: configuration changes, environment setup, etc.
  • If so, make sure it is described in the JIRA ticket.
• QE requirements (check 1 from the list):
  • Standard QE validation, with pre-merge tests unless stated otherwise.
  • Regression tests only (e.g. refactoring with no user-facing change).
  • No QE (e.g. trivial change with high reviewer's confidence, or per agreement with the QE team).

[openshift-ci-robot]

@OlivierCazade: This pull request references NETOBSERV-2417 which is a valid jira issue.

Warning: The referenced jira issue has an invalid target version for the target branch this PR targets: expected the story to target the "4.21.0" version, but no target version was set.

Details

In response to this:

Description

Display Loki labels in bold in filters dropdown

• Add lokiLabels to frontend config
• Populate lokiLabels from Loki config

Dependencies

n/a

Checklist

If you are not familiar with our processes or don't know what to answer in the list below, let us know in a comment: the maintainers will take care of that.

• Is this PR backed with a JIRA ticket? If so, make sure it is written as a title prefix (in general, PRs affecting the NetObserv/Network Observability product should be backed with a JIRA ticket - especially if they bring user facing changes).
• Does this PR require product documentation?
• If so, make sure the JIRA epic is labelled with "documentation" and provides a description relevant for doc writers, such as use cases or scenarios. Any required step to activate or configure the feature should be documented there, such as new CRD knobs.
• Does this PR require a product release notes entry?
• If so, fill in "Release Note Text" in the JIRA.
• Is there anything else the QE team should know before testing? E.g: configuration changes, environment setup, etc.
• If so, make sure it is described in the JIRA ticket.
• QE requirements (check 1 from the list):
• Standard QE validation, with pre-merge tests unless stated otherwise.
• Regression tests only (e.g. refactoring with no user-facing change).
• No QE (e.g. trivial change with high reviewer's confidence, or per agreement with the QE team).

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 openshift-eng/jira-lifecycle-plugin repository.

[github-actions]

New image:
quay.io/netobserv/network-observability-console-plugin:884e9bf

It will expire after two weeks.

To deploy this build, run from the operator repo, assuming the operator is running:

USER=netobserv VERSION=884e9bf make set-plugin-image

[codecov]

Codecov Report

❌ Patch coverage is 64.28571% with 5 lines in your changes missing coverage. Please review.
✅ Project coverage is 53.65%. Comparing base (cabe8c5) to head (3f2ca4b).
⚠️ Report is 12 commits behind head on main.

Files with missing lines	Patch %	Lines
web/src/utils/filters-helper.ts	63.63%	2 Missing and 2 partials ⚠️
pkg/config/config.go	50.00%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1133      +/-   ##
==========================================
+ Coverage   53.60%   53.65%   +0.05%     
==========================================
  Files         205      205              
  Lines       10513    10526      +13     
  Branches     1301     1303       +2     
==========================================
+ Hits         5635     5648      +13     
- Misses       4362     4363       +1     
+ Partials      516      515       -1     

Flag	Coverage Δ
uitests	55.96% <66.66%> (+0.07%)	⬆️
unittests	47.36% <50.00%> (+<0.01%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines	Coverage Δ
web/src/components/toolbar/filters-toolbar.tsx	61.25% <ø> (ø)
...rc/components/toolbar/filters/filters-dropdown.tsx	96.42% <100.00%> (ø)
web/src/model/config.ts	100.00% <ø> (ø)
pkg/config/config.go	47.36% <50.00%> (+0.04%)	⬆️
web/src/utils/filters-helper.ts	86.11% <63.63%> (-9.89%)	⬇️

... and 1 file with indirect coverage changes

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[jpinsonneau]

Do we need a tooltip somewhere to explain what bold text means here ?

[OlivierCazade]

What kind of tooltip do you have in mind ? Do you have an example ?

[jpinsonneau]

☝️ directly on the dropdown could work but be carefull as we already have one on the inputgroup

We also have some mentions in other places we could improve:
https://github.com/search?q=repo%3Anetobserv%2Fnetwork-observability-console-plugin+%22indexed+fields%22&type=code

filters (which use indexed fields) -> filters (in bold which use indexed fields)

[Amoghrd]

/ok-to-test

[github-actions]

New image:
quay.io/netobserv/network-observability-console-plugin:f508365

It will expire after two weeks.

To deploy this build, run from the operator repo, assuming the operator is running:

USER=netobserv VERSION=f508365 make set-plugin-image

[Amoghrd]

@OlivierCazade I dont see any filters in bold🤔 The loki filters here in this dropdown should be bold right?

[OlivierCazade]

@Amoghrd if you first load the main console plugin you probably need to clean cache and reload.

[Amoghrd]

Yeah, I think had not refreshed when I took previously.
I do see the loki filters in bold.
But I have 2 comments:

• As Julien suggested, it would be nice to explain why some are in bold; i.e explaining they require loki to be installed
• Secondly, in browser dark mode, bold is not apparent. So all the more reason to have a text/tooltip explaining that some filters are bold since they require loki would make the customer look for bold even in dark mode. Or should we go with some other approach other than just bold text? Maybe even italics?

Light mode:

Dark mode:

[jotak]

+1 for a short explanation text somewhere, e.g. something like: Filters displayed in bold are Loki labels. Using at least one label in your filters speeds up queries. (or something in that vein)

@Amoghrd I'm not sure to understand your comment on the dark mode; I haven't tested myself, but based on your screenshot, bold text appears on dark mode as well?
But also I've no objection to have bold and italic if it's more distinguishable / better for accessibility

[Amoghrd]

My comment was that in dark mode bold is not apparent as in light mode. So an explanation is must. Italics might help to stand out in dark mode too is what I was suggesting😅

[openshift-ci]

New changes are detected. LGTM label has been removed.

[openshift-merge-robot]

PR needs rebase.

Details

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-sigs/prow repository.

[openshift-ci]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:
Once this PR has been reviewed and has the lgtm label, please ask for approval from jpinsonneau. For more information see the Code Review Process.

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

Details

Needs approval from an approver in each of these files:

• DOWNSTREAM_OWNERS

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

[openshift-ci]

@OlivierCazade: The following tests failed, say /retest to rerun all failed tests or /retest-required to rerun all mandatory failed tests:

Test name	Commit	Details	Required	Rerun command
ci/prow/qe-e2e-console-tests	1fe3b65	link	false	/test qe-e2e-console-tests
ci/prow/plugin-cypress	1fe3b65	link	true	/test plugin-cypress
ci/prow/images	1fe3b65	link	true	/test images

Full PR test history. Your PR dashboard.

Details

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-sigs/prow repository. I understand the commands that are listed here.