[Fleet][Eui Visual Refresh] Make agent status colors theme aware #204070
Conversation
This file contains 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
jillguyonnet
added
release_note:skip
|
Pinging @elastic/fleet (Team:Fleet) |
jillguyonnet
force-pushed
the
fleet/201997-make-agent-status-colors-theme-aware
branch
from
99ce7db to
144c01b
Compare
|
Thanks @nchaulet - FYI I had accidentally committed an unrelated WIP change that I reverted, code is otherwise the same. |
💛 Build succeeded, but was flaky
Failed CI StepsTest Failures
Metrics [docs]Async chunks
|
jillguyonnet
changed the title
|
@elasticmachine merge upstream |
mgadewoll
reviewed
Dec 16, 2024
x-pack/plugins/fleet/public/applications/fleet/sections/agents/services/agent_status.tsx
Outdated
Show resolved
Hide resolved
jillguyonnet
force-pushed
the
fleet/201997-make-agent-status-colors-theme-aware
branch
from
9b2b349 to
5eafbc6
Compare
mgadewoll
approved these changes
Dec 16, 2024
jillguyonnet
deleted the
fleet/201997-make-agent-status-colors-theme-aware
branch
JoseLuisGJ
pushed a commit
to JoseLuisGJ/kibana
that referenced
this pull request
Dec 19, 2024
…stic#204070) ## Summary Closes elastic#201997 Fleet does not make proper use of [color palettes](https://eui.elastic.co/#/utilities/color-palettes), in the sense that [vis colors should only be used to visualizations](elastic#199715 (comment)). There are currently two Fleet UI elements, in the agents list table, that use some vis colors and need to be updated: - the status icons in the agent status summary - the horizontal agent status bar  This PR updates the function `getColorForAgentStatus`, which returns the color based on agent status, to return theme colors with semantic meaning aligned with the agent status badges. This will ensure colours are aligned between agent status badges and the table header in both Amsterdam and Borealis themes. It should be noted that the colours used for offline and inactive status (lightShade and darkShade), are marked as disabled, since their use isn't properly semantic: <img width="1012" alt="Screenshot 2024-12-16 at 15 31 00" src="https://github.com/user-attachments/assets/ee7a185f-01d9-4139-a1ff-785a249fd882" /> ## Screenshots ### Before (current `main`) #### Amsterdam theme <img width="1918" alt="fleet-agents-amsterdam-main" src="https://github.com/user-attachments/assets/1be3ccf7-64bd-40e3-832d-b79f47345170" /> #### Borealis theme <img width="1918" alt="fleet-agents-borealis-main" src="https://github.com/user-attachments/assets/276208ed-91a8-41df-8858-53a0e7894c4a" /> ### After #### Amsterdam theme <img width="1918" alt="fleet-agents-amsterdam-branch" src="https://github.com/user-attachments/assets/e9e6ab25-f43e-4949-9e9c-8edc3443effd" /> #### Borealis theme <img width="1918" alt="fleet-agents-borealis-branch" src="https://github.com/user-attachments/assets/6ae2c3ca-9209-406f-8f46-6ee40dc77632" />
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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
Closes #201997
Fleet does not make proper use of color palettes, in the sense that vis colors should only be used to visualizations.
There are currently two Fleet UI elements, in the agents list table, that use some vis colors and need to be updated:
This PR updates the function
getColorForAgentStatus, which returns the color based on agent status, to return theme colors with semantic meaning aligned with the agent status badges. This will ensure colours are aligned between agent status badges and the table header in both Amsterdam and Borealis themes.It should be noted that the colours used for offline and inactive status (lightShade and darkShade), are marked as disabled, since their use isn't properly semantic:
Screenshots
Before (current
main)Amsterdam theme
Borealis theme
After
Amsterdam theme
Borealis theme