From 3e983e2c9c1f511bbc30a46ba7bef70e64c8ca14 Mon Sep 17 00:00:00 2001 From: jillguyonnet Date: Thu, 12 Dec 2024 16:36:41 +0100 Subject: [PATCH 1/2] [Fleet] Make agent status colors theme aware --- .../components/status_badges.tsx | 11 ++++-- .../agent_list_page/components/status_bar.tsx | 7 ++-- .../sections/agents/services/agent_status.tsx | 35 +++++++------------ 3 files changed, 26 insertions(+), 27 deletions(-) diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/components/status_badges.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/components/status_badges.tsx index 44363d12088d1..21ff0e22505bf 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/components/status_badges.tsx +++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/components/status_badges.tsx @@ -5,7 +5,13 @@ * 2.0. */ -import { EuiFlexGroup, EuiHealth, EuiNotificationBadge, EuiFlexItem } from '@elastic/eui'; +import { + EuiFlexGroup, + EuiHealth, + EuiNotificationBadge, + EuiFlexItem, + useEuiTheme, +} from '@elastic/eui'; import React, { memo } from 'react'; import { @@ -31,9 +37,10 @@ export const AgentStatusBadges: React.FC<{ const AgentStatusBadge: React.FC<{ status: SimplifiedAgentStatus; count: number }> = memo( ({ status, count }) => { + const { euiTheme } = useEuiTheme(); return ( <> - + {getLabelForAgentStatus(status)} diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/components/status_bar.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/components/status_bar.tsx index f4fc01204267b..429702e6b7dc6 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/components/status_bar.tsx +++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/agent_list_page/components/status_bar.tsx @@ -6,7 +6,7 @@ */ import styled from 'styled-components'; -import { EuiColorPaletteDisplay, EuiSpacer } from '@elastic/eui'; +import { EuiColorPaletteDisplay, EuiSpacer, useEuiTheme } from '@elastic/eui'; import React, { useMemo } from 'react'; import { AGENT_STATUSES, getColorForAgentStatus } from '../../services/agent_status'; @@ -25,16 +25,17 @@ const StyledEuiColorPaletteDisplay = styled(EuiColorPaletteDisplay)` export const AgentStatusBar: React.FC<{ agentStatus: { [k in SimplifiedAgentStatus]: number }; }> = ({ agentStatus }) => { + const { euiTheme } = useEuiTheme(); const palette = useMemo(() => { return AGENT_STATUSES.reduce((acc, status) => { const previousStop = acc.length > 0 ? acc[acc.length - 1].stop : 0; acc.push({ stop: previousStop + (agentStatus[status] || 0), - color: getColorForAgentStatus(status), + color: getColorForAgentStatus(status, euiTheme), }); return acc; }, [] as Array<{ stop: number; color: string }>); - }, [agentStatus]); + }, [agentStatus, euiTheme]); const hasNoAgent = palette[palette.length - 1].stop === 0; diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/services/agent_status.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/services/agent_status.tsx index b69da08105759..47085ac057c63 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/services/agent_status.tsx +++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/services/agent_status.tsx @@ -5,24 +5,11 @@ * 2.0. */ -import { euiPaletteColorBlindBehindText } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; -import { euiLightVars } from '@kbn/ui-theme'; -import type { SimplifiedAgentStatus } from '../../../types'; +import type { EuiThemeComputed } from '@elastic/eui-theme-common'; -const visColors = euiPaletteColorBlindBehindText(); -const colorToHexMap = { - // using variables as mentioned here https://elastic.github.io/eui/#/guidelines/getting-started - default: euiLightVars.euiColorLightShade, - primary: visColors[1], - success: visColors[0], - accent: visColors[2], - warning: visColors[5], - danger: visColors[9], - inactive: euiLightVars.euiColorDarkShade, - lightest: euiLightVars.euiColorDisabled, -}; +import type { SimplifiedAgentStatus } from '../../../types'; export const AGENT_STATUSES: SimplifiedAgentStatus[] = [ 'healthy', @@ -33,20 +20,24 @@ export const AGENT_STATUSES: SimplifiedAgentStatus[] = [ 'unenrolled', ]; -export function getColorForAgentStatus(agentStatus: SimplifiedAgentStatus): string { +export function getColorForAgentStatus( + agentStatus: SimplifiedAgentStatus, + euiTheme: EuiThemeComputed<{}> +): string { + // using variables as mentioned here https://eui.elastic.co/#/theming/colors/values switch (agentStatus) { case 'healthy': - return colorToHexMap.success; + return euiTheme.colors.success; case 'offline': - return colorToHexMap.default; + return euiTheme.colors.lightShade; case 'inactive': - return colorToHexMap.inactive; + return euiTheme.colors.darkShade; case 'unhealthy': - return colorToHexMap.warning; + return euiTheme.colors.warning; case 'updating': - return colorToHexMap.primary; + return euiTheme.colors.primary; case 'unenrolled': - return colorToHexMap.lightest; + return euiTheme.colors.disabled; default: throw new Error(`Unsupported Agent status ${agentStatus}`); } From 5eafbc6cddc79a8ac6bd58c80ae1f65f81e9b6bc Mon Sep 17 00:00:00 2001 From: jillguyonnet Date: Mon, 16 Dec 2024 11:41:36 +0100 Subject: [PATCH 2/2] Use background colors --- .../fleet/sections/agents/services/agent_status.tsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/services/agent_status.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/services/agent_status.tsx index 47085ac057c63..6b12331d7034c 100644 --- a/x-pack/plugins/fleet/public/applications/fleet/sections/agents/services/agent_status.tsx +++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agents/services/agent_status.tsx @@ -24,20 +24,19 @@ export function getColorForAgentStatus( agentStatus: SimplifiedAgentStatus, euiTheme: EuiThemeComputed<{}> ): string { - // using variables as mentioned here https://eui.elastic.co/#/theming/colors/values switch (agentStatus) { case 'healthy': - return euiTheme.colors.success; + return euiTheme.colors.backgroundFilledSuccess; case 'offline': return euiTheme.colors.lightShade; case 'inactive': return euiTheme.colors.darkShade; case 'unhealthy': - return euiTheme.colors.warning; + return euiTheme.colors.backgroundFilledWarning; case 'updating': - return euiTheme.colors.primary; + return euiTheme.colors.backgroundFilledPrimary; case 'unenrolled': - return euiTheme.colors.disabled; + return euiTheme.colors.backgroundBaseDisabled; default: throw new Error(`Unsupported Agent status ${agentStatus}`); }