[Cloud Security] Improve graph node label ellipsis logic#204580
Merged
kfirpeled merged 6 commits intoelastic:mainfrom Dec 19, 2024
Merged
[Cloud Security] Improve graph node label ellipsis logic#204580kfirpeled merged 6 commits intoelastic:mainfrom
kfirpeled merged 6 commits intoelastic:mainfrom
Conversation
kfirpeled
added
release_note:skip
kfirpeled
changed the title
Contributor
|
Pinging @elastic/kibana-cloud-security-posture (Team:Cloud Security) |
kfirpeled
commented
Dec 18, 2024
| text?: string; | ||
| } | ||
|
|
||
| const LabelComponent: React.FC<LabelProps> = ({ text = '' }: LabelProps) => { |
Contributor
Author
There was a problem hiding this comment.
I was wondering if I should name it Label or NodeLabel.
There's already a node which represents a label and is named LabelNode.
Therefore I wasn't sure.
I'm open for suggestions for better names either for LabelNode or for the Label component
Contributor
💚 Build Succeeded
Metrics [docs]Module Count
Async chunks
|
seanrathier
approved these changes
Dec 18, 2024
.../solutions/security/packages/kbn-cloud-security-posture/graph/src/components/node/styles.tsx
Show resolved
Hide resolved
Contributor
|
Starting backport for target branches: 8.x https://github.com/elastic/kibana/actions/runs/12413045339 |
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this pull request
Dec 19, 2024
) ## Summary This PR improves the logic of node's label truncation. It follows the guidelines from design: > - Set the maximum width for names to 160px > - Truncate names to max two lines > - I recommend truncating names in the middle, as entity IDs often differ only in their last characters while starting similarly. This approach will make it easier to identify differences between names > - Display the full name in a tooltip on hover for better visibility Before: <img width="150" src="https://github.com/user-attachments/assets/4bc18b98-1e1b-41df-ac69-79b2adf1f127" /> <img width="150" src="https://github.com/user-attachments/assets/69c335f6-3952-44e8-8836-19eab3bff28f" /> <img width="150" src="https://github.com/user-attachments/assets/4ba65932-5af5-4382-b721-41c6ee7388a8" /> After: https://github.com/user-attachments/assets/2ab04809-7599-45ab-9aaa-ae1fcabdf969 **How to test** To test this PR you can run ``` yarn storybook cloud_security_posture_packages ``` ### Checklist - [ ] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios --------- Co-authored-by: Sean Rathier <sean.rathier@elastic.co> Co-authored-by: Brad White <Ikuni17@users.noreply.github.com> (cherry picked from commit f316612)
Contributor
💚 All backports created successfully
Note: Successful backport PRs will be merged automatically after passing CI. Questions ?Please refer to the Backport tool documentation |
8 tasks
kibanamachine
added a commit
that referenced
this pull request
Dec 19, 2024
…) (#204933) # Backport This will backport the following commits from `main` to `8.x`: - [[Cloud Security] Improve graph node label ellipsis logic (#204580)](#204580) <!--- Backport version: 9.4.3 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) <!--BACKPORT [{"author":{"name":"Kfir Peled","email":"61654899+kfirpeled@users.noreply.github.com"},"sourceCommit":{"committedDate":"2024-12-19T12:51:11Z","message":"[Cloud Security] Improve graph node label ellipsis logic (#204580)\n\n## Summary\r\n\r\nThis PR improves the logic of node's label truncation. It follows the\r\nguidelines from design:\r\n\r\n> - Set the maximum width for names to 160px\r\n> - Truncate names to max two lines\r\n> - I recommend truncating names in the middle, as entity IDs often\r\ndiffer only in their last characters while starting similarly. This\r\napproach will make it easier to identify differences between names\r\n> - Display the full name in a tooltip on hover for better visibility\r\n \r\n\r\nBefore:\r\n\r\n<img width=\"150\"\r\nsrc=\"https://github.com/user-attachments/assets/4bc18b98-1e1b-41df-ac69-79b2adf1f127\"\r\n/>\r\n<img width=\"150\"\r\nsrc=\"https://github.com/user-attachments/assets/69c335f6-3952-44e8-8836-19eab3bff28f\"\r\n/>\r\n<img width=\"150\"\r\nsrc=\"https://github.com/user-attachments/assets/4ba65932-5af5-4382-b721-41c6ee7388a8\"\r\n/>\r\n\r\n\r\nAfter:\r\n\r\n\r\nhttps://github.com/user-attachments/assets/2ab04809-7599-45ab-9aaa-ae1fcabdf969\r\n\r\n\r\n**How to test**\r\n\r\nTo test this PR you can run\r\n\r\n```\r\nyarn storybook cloud_security_posture_packages\r\n```\r\n\r\n### Checklist\r\n\r\n- [ ] [Unit or functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere updated or added to match the most common scenarios\r\n\r\n---------\r\n\r\nCo-authored-by: Sean Rathier <sean.rathier@elastic.co>\r\nCo-authored-by: Brad White <Ikuni17@users.noreply.github.com>","sha":"f31661255b366bb2f50a47b9821874bdc0cd1b8e","branchLabelMapping":{"^v9.0.0$":"main","^v8.18.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","Team:Cloud Security","backport:prev-minor"],"title":"[Cloud Security] Improve graph node label ellipsis logic","number":204580,"url":"https://github.com/elastic/kibana/pull/204580","mergeCommit":{"message":"[Cloud Security] Improve graph node label ellipsis logic (#204580)\n\n## Summary\r\n\r\nThis PR improves the logic of node's label truncation. It follows the\r\nguidelines from design:\r\n\r\n> - Set the maximum width for names to 160px\r\n> - Truncate names to max two lines\r\n> - I recommend truncating names in the middle, as entity IDs often\r\ndiffer only in their last characters while starting similarly. This\r\napproach will make it easier to identify differences between names\r\n> - Display the full name in a tooltip on hover for better visibility\r\n \r\n\r\nBefore:\r\n\r\n<img width=\"150\"\r\nsrc=\"https://github.com/user-attachments/assets/4bc18b98-1e1b-41df-ac69-79b2adf1f127\"\r\n/>\r\n<img width=\"150\"\r\nsrc=\"https://github.com/user-attachments/assets/69c335f6-3952-44e8-8836-19eab3bff28f\"\r\n/>\r\n<img width=\"150\"\r\nsrc=\"https://github.com/user-attachments/assets/4ba65932-5af5-4382-b721-41c6ee7388a8\"\r\n/>\r\n\r\n\r\nAfter:\r\n\r\n\r\nhttps://github.com/user-attachments/assets/2ab04809-7599-45ab-9aaa-ae1fcabdf969\r\n\r\n\r\n**How to test**\r\n\r\nTo test this PR you can run\r\n\r\n```\r\nyarn storybook cloud_security_posture_packages\r\n```\r\n\r\n### Checklist\r\n\r\n- [ ] [Unit or functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere updated or added to match the most common scenarios\r\n\r\n---------\r\n\r\nCo-authored-by: Sean Rathier <sean.rathier@elastic.co>\r\nCo-authored-by: Brad White <Ikuni17@users.noreply.github.com>","sha":"f31661255b366bb2f50a47b9821874bdc0cd1b8e"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/204580","number":204580,"mergeCommit":{"message":"[Cloud Security] Improve graph node label ellipsis logic (#204580)\n\n## Summary\r\n\r\nThis PR improves the logic of node's label truncation. It follows the\r\nguidelines from design:\r\n\r\n> - Set the maximum width for names to 160px\r\n> - Truncate names to max two lines\r\n> - I recommend truncating names in the middle, as entity IDs often\r\ndiffer only in their last characters while starting similarly. This\r\napproach will make it easier to identify differences between names\r\n> - Display the full name in a tooltip on hover for better visibility\r\n \r\n\r\nBefore:\r\n\r\n<img width=\"150\"\r\nsrc=\"https://github.com/user-attachments/assets/4bc18b98-1e1b-41df-ac69-79b2adf1f127\"\r\n/>\r\n<img width=\"150\"\r\nsrc=\"https://github.com/user-attachments/assets/69c335f6-3952-44e8-8836-19eab3bff28f\"\r\n/>\r\n<img width=\"150\"\r\nsrc=\"https://github.com/user-attachments/assets/4ba65932-5af5-4382-b721-41c6ee7388a8\"\r\n/>\r\n\r\n\r\nAfter:\r\n\r\n\r\nhttps://github.com/user-attachments/assets/2ab04809-7599-45ab-9aaa-ae1fcabdf969\r\n\r\n\r\n**How to test**\r\n\r\nTo test this PR you can run\r\n\r\n```\r\nyarn storybook cloud_security_posture_packages\r\n```\r\n\r\n### Checklist\r\n\r\n- [ ] [Unit or functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere updated or added to match the most common scenarios\r\n\r\n---------\r\n\r\nCo-authored-by: Sean Rathier <sean.rathier@elastic.co>\r\nCo-authored-by: Brad White <Ikuni17@users.noreply.github.com>","sha":"f31661255b366bb2f50a47b9821874bdc0cd1b8e"}}]}] BACKPORT--> Co-authored-by: Kfir Peled <61654899+kfirpeled@users.noreply.github.com>
JoseLuisGJ
pushed a commit
to JoseLuisGJ/kibana
that referenced
this pull request
Dec 19, 2024
) ## Summary This PR improves the logic of node's label truncation. It follows the guidelines from design: > - Set the maximum width for names to 160px > - Truncate names to max two lines > - I recommend truncating names in the middle, as entity IDs often differ only in their last characters while starting similarly. This approach will make it easier to identify differences between names > - Display the full name in a tooltip on hover for better visibility Before: <img width="150" src="https://github.com/user-attachments/assets/4bc18b98-1e1b-41df-ac69-79b2adf1f127" /> <img width="150" src="https://github.com/user-attachments/assets/69c335f6-3952-44e8-8836-19eab3bff28f" /> <img width="150" src="https://github.com/user-attachments/assets/4ba65932-5af5-4382-b721-41c6ee7388a8" /> After: https://github.com/user-attachments/assets/2ab04809-7599-45ab-9aaa-ae1fcabdf969 **How to test** To test this PR you can run ``` yarn storybook cloud_security_posture_packages ``` ### Checklist - [ ] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios --------- Co-authored-by: Sean Rathier <sean.rathier@elastic.co> Co-authored-by: Brad White <Ikuni17@users.noreply.github.com>
benakansara
pushed a commit
to benakansara/kibana
that referenced
this pull request
Jan 2, 2025
) ## Summary This PR improves the logic of node's label truncation. It follows the guidelines from design: > - Set the maximum width for names to 160px > - Truncate names to max two lines > - I recommend truncating names in the middle, as entity IDs often differ only in their last characters while starting similarly. This approach will make it easier to identify differences between names > - Display the full name in a tooltip on hover for better visibility Before: <img width="150" src="https://github.com/user-attachments/assets/4bc18b98-1e1b-41df-ac69-79b2adf1f127" /> <img width="150" src="https://github.com/user-attachments/assets/69c335f6-3952-44e8-8836-19eab3bff28f" /> <img width="150" src="https://github.com/user-attachments/assets/4ba65932-5af5-4382-b721-41c6ee7388a8" /> After: https://github.com/user-attachments/assets/2ab04809-7599-45ab-9aaa-ae1fcabdf969 **How to test** To test this PR you can run ``` yarn storybook cloud_security_posture_packages ``` ### Checklist - [ ] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios --------- Co-authored-by: Sean Rathier <sean.rathier@elastic.co> Co-authored-by: Brad White <Ikuni17@users.noreply.github.com>
viduni94
pushed a commit
to viduni94/kibana
that referenced
this pull request
Jan 23, 2025
) ## Summary This PR improves the logic of node's label truncation. It follows the guidelines from design: > - Set the maximum width for names to 160px > - Truncate names to max two lines > - I recommend truncating names in the middle, as entity IDs often differ only in their last characters while starting similarly. This approach will make it easier to identify differences between names > - Display the full name in a tooltip on hover for better visibility Before: <img width="150" src="https://github.com/user-attachments/assets/4bc18b98-1e1b-41df-ac69-79b2adf1f127" /> <img width="150" src="https://github.com/user-attachments/assets/69c335f6-3952-44e8-8836-19eab3bff28f" /> <img width="150" src="https://github.com/user-attachments/assets/4ba65932-5af5-4382-b721-41c6ee7388a8" /> After: https://github.com/user-attachments/assets/2ab04809-7599-45ab-9aaa-ae1fcabdf969 **How to test** To test this PR you can run ``` yarn storybook cloud_security_posture_packages ``` ### Checklist - [ ] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios --------- Co-authored-by: Sean Rathier <sean.rathier@elastic.co> Co-authored-by: Brad White <Ikuni17@users.noreply.github.com>
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
5 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.
Summary
This PR improves the logic of node's label truncation. It follows the guidelines from design:
Before:
After:
Screen.Recording.2024-12-17.at.15.26.46.mov
How to test
To test this PR you can run
Checklist