[9.3] [Metrics] [Lens] Replace custom header with lens highlight implementation (#249450)#250281
Merged
justinkambic merged 8 commits intoelastic:9.3from Jan 30, 2026
Merged
Conversation
…tion (elastic#249450) ## Summary Related to elastic#241152. ~This PoC would replace the metrics panel custom header components with a native Lens implementation of the highlighting functionality.~ Previously, the Metrics UI team implemented a custom header component to use for the Metrics embeddables shown in Discover. This allowed for a highlight mechanic that was not present in lens, shown below:  Unfortunately, with the custom implementation they also had to cancel interaction events related to selecting/copying the text contents of the header, because of unwanted UI side effects. As noted in the linked issue, rather than adding additional CSS hacks, the desire was instead to have Lens support the highlight feature, and remove the custom implementation altogether. **The goal of this patch is to allow Metrics UI to use the default embeddable title component, while keeping the highlight feature.** This is achieved by adding a `titleHighlight` prop to the embeddable component. When this prop is defined, the embeddable will wrap the title content in an `EuiHighlight` as the custom component was doing. In the case of Metrics UI, which passes the highlight, the embeddable's title will wrap the intended content in a highlight. Otherwise, the new code is skipped, and the embeddable component should behave exactly as it normally would. ## Testing ### Getting data Testing this PR will require metrics data indexed at a path like `metrics*`. There are a bunch of ways to do this, but a simple way is to clone Simian Forge: ```bash git clone https://github.com/simianhacker/simian-forge.git ``` Perform an install + build: ```bash npm i && npm run build ``` Then, create an Elasticsearch API key. This is easily achieved in Kibana by going to the API key management page and creating a new key. Copy the key Kibana created for you and use it in your command, like below: <img width="1146" height="465" alt="API key management page" src="https://github.com/user-attachments/assets/a19639af-7642-4d02-b32d-6d6413676b9d" /> ```bash ./forge --backfill now-1h --interval 10s --count 100 --dataset hosts --purge --elasticsearch-url {ES_URL} --elasticsearch-api-key {API_KEY} ``` If you're running Elasticsearch locally, you can simply specify `--elasticsearch-url http://localhost:9200`. ### Querying data Perform a metrics ES|QL query like: ``` TS metrics* ``` When the metrics visualizations appear, make sure you're able to select the text with your mouse pointer and copy the contents. Both the highlight functionality, and text selection, are shown in the image below:  _Additional note:_ because this change makes the Metrics component `ChartTitle` obsolete, it removes the component's file/tests as well. --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> (cherry picked from commit 15610b7) # Conflicts: # src/platform/packages/shared/kbn-unified-metrics-grid/moon.yml # src/platform/packages/shared/kbn-unified-metrics-grid/tsconfig.json # src/platform/plugins/private/presentation_panel/public/panel_component/types.ts
justinkambic
force-pushed
the
backport/9.3/pr-249450
branch
from
49e5ce5 to
2adbc00
Compare
Contributor
Author
|
Note to reviewers: this patch introduced two minor regressions. They have been fixed in #250619 and #250963. Both of those changes are already backported to 9.3. I've merged the latest commits into this backport, so you should be able to test and see correct filtering/reordering behavior, and the |
weltenwort
approved these changes
Jan 30, 2026
Member
weltenwort
left a comment
weltenwort
left a comment
There was a problem hiding this comment.
LGTM and seems to work as expected
Contributor
💛 Build succeeded, but was flaky
Failed CI StepsTest Failures
Metrics [docs]Module Count
Async chunks
Page load bundle
History
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Backport
This will backport the following commits from
mainto9.3:Questions ?
Please refer to the Backport tool documentation