From aa6489585b0b159d385e665fe5b3f31db0d0e201 Mon Sep 17 00:00:00 2001 From: Sonia Sanz Vivas Date: Wed, 8 Jan 2025 16:40:16 +0100 Subject: [PATCH] [ILM] Remove euiThemeVars and remapping colors for Borealis (#204449) Part of https://github.com/elastic/kibana/issues/203664 ## Summary This PR addresses the changes for Borealis theme that are related to the ILM plugin. That means get rid of `euiThemeVars` in Boreales in favor of `useEuiTheme` colors and remapping the colors for ILM status. It also eliminates the use of ` _behindText` values in Borealis. This remapping is a mid-term solution since the Vis color palette is not been using here as this is not their intended use. In the future, probably a separate palette will be created. Screenshot 2024-12-16 at 17 20 54 Screenshot 2024-12-16 at 17 20 40 Screenshot 2024-12-16 at 17 19 42 Screenshot 2024-12-16 at 17 19 58 --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Matthew Kime --- .../extend_index_management.test.tsx.snap | 6 +-- .../__snapshots__/policy_flyout.test.tsx.snap | 8 +-- .../components/phase_icon/phase_icon.scss | 21 +------- .../components/phase_icon/phase_icon.tsx | 20 ++++++- .../components/timeline/timeline.scss | 16 ------ .../components/timeline/timeline.tsx | 51 ++++++++++++++++-- .../policy_flyout/phase_indicator.tsx | 22 +++++--- .../components/index_lifecycle_summary.tsx | 54 ++++++++++--------- .../index_lifecycle_management/tsconfig.json | 2 +- 9 files changed, 117 insertions(+), 83 deletions(-) diff --git a/x-pack/platform/plugins/private/index_lifecycle_management/__jest__/__snapshots__/extend_index_management.test.tsx.snap b/x-pack/platform/plugins/private/index_lifecycle_management/__jest__/__snapshots__/extend_index_management.test.tsx.snap index d5f44f5b24be6..e23f395b13ed9 100644 --- a/x-pack/platform/plugins/private/index_lifecycle_management/__jest__/__snapshots__/extend_index_management.test.tsx.snap +++ b/x-pack/platform/plugins/private/index_lifecycle_management/__jest__/__snapshots__/extend_index_management.test.tsx.snap @@ -179,7 +179,7 @@ exports[`extend index management ilm summary extension should render a phase def >
= ({ enabled, phase }) => { + const { euiTheme } = useEuiTheme(); + + const isBorealis = euiTheme.themeName === 'EUI_THEME_BOREALIS'; + + const phaseIconColors = { + hot: isBorealis ? euiTheme.colors.vis.euiColorVis6 : euiThemeVars.euiColorVis9_behindText, + warm: isBorealis ? euiTheme.colors.vis.euiColorVis9 : euiThemeVars.euiColorVis5_behindText, + cold: isBorealis ? euiTheme.colors.vis.euiColorVis2 : euiThemeVars.euiColorVis1_behindText, + frozen: euiTheme.colors.vis.euiColorVis4, + delete: euiTheme.colors.darkShade, + }; + return (
{enabled ? ( diff --git a/x-pack/platform/plugins/private/index_lifecycle_management/public/application/sections/edit_policy/components/timeline/timeline.scss b/x-pack/platform/plugins/private/index_lifecycle_management/public/application/sections/edit_policy/components/timeline/timeline.scss index a69f244a25aea..7fd59bebea9e6 100644 --- a/x-pack/platform/plugins/private/index_lifecycle_management/public/application/sections/edit_policy/components/timeline/timeline.scss +++ b/x-pack/platform/plugins/private/index_lifecycle_management/public/application/sections/edit_policy/components/timeline/timeline.scss @@ -60,33 +60,17 @@ $ilmTimelineBarHeight: $euiSizeS; &__hotPhase { width: var(--ilm-timeline-hot-phase-width); - - &__colorBar { - background-color: $euiColorVis9; - } } &__warmPhase { width: var(--ilm-timeline-warm-phase-width); - - &__colorBar { - background-color: $euiColorVis5; - } } &__coldPhase { width: var(--ilm-timeline-cold-phase-width); - - &__colorBar { - background-color: $euiColorVis1; - } } &__frozenPhase { width: var(--ilm-timeline-frozen-phase-width); - - &__colorBar { - background-color: $euiColorVis4; - } } } diff --git a/x-pack/platform/plugins/private/index_lifecycle_management/public/application/sections/edit_policy/components/timeline/timeline.tsx b/x-pack/platform/plugins/private/index_lifecycle_management/public/application/sections/edit_policy/components/timeline/timeline.tsx index b2ee9c2520831..8cdfdf5bc9bf3 100644 --- a/x-pack/platform/plugins/private/index_lifecycle_management/public/application/sections/edit_policy/components/timeline/timeline.tsx +++ b/x-pack/platform/plugins/private/index_lifecycle_management/public/application/sections/edit_policy/components/timeline/timeline.tsx @@ -5,11 +5,21 @@ * 2.0. */ +/** @jsx jsx */ +// Needed for for testing out the css prop feature. See: https://emotion.sh/docs/css-prop#jsx-pragma +import { css, jsx } from '@emotion/react'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n-react'; import React, { FunctionComponent, memo } from 'react'; -import { EuiFlexGroup, EuiFlexItem, EuiTitle, EuiText, EuiIconTip } from '@elastic/eui'; +import { + EuiFlexGroup, + EuiFlexItem, + EuiTitle, + EuiText, + EuiIconTip, + useEuiTheme, +} from '@elastic/eui'; import { useKibana } from '../../../../../shared_imports'; @@ -135,6 +145,17 @@ export const Timeline: FunctionComponent = memo( : undefined, }; + const { euiTheme } = useEuiTheme(); + + const isBorealis = euiTheme.themeName === 'EUI_THEME_BOREALIS'; + + const timelineIconColors = { + hot: isBorealis ? euiTheme.colors.vis.euiColorVis6 : euiTheme.colors.vis.euiColorVis9, + warm: isBorealis ? euiTheme.colors.vis.euiColorVis9 : euiTheme.colors.vis.euiColorVis5, + cold: isBorealis ? euiTheme.colors.vis.euiColorVis2 : euiTheme.colors.vis.euiColorVis1, + frozen: euiTheme.colors.vis.euiColorVis4, + }; + const phaseAgeInMilliseconds = calculateRelativeFromAbsoluteMilliseconds(absoluteTimings); const widths = calculateWidths(phaseAgeInMilliseconds); @@ -188,7 +209,12 @@ export const Timeline: FunctionComponent = memo( data-test-subj="ilmTimelinePhase-hot" className="ilmTimeline__phasesContainer__phase ilmTimeline__hotPhase" > -
+
= memo( data-test-subj="ilmTimelinePhase-warm" className="ilmTimeline__phasesContainer__phase ilmTimeline__warmPhase" > -
+
= memo( data-test-subj="ilmTimelinePhase-cold" className="ilmTimeline__phasesContainer__phase ilmTimeline__coldPhase" > -
+
= memo( data-test-subj="ilmTimelinePhase-frozen" className="ilmTimeline__phasesContainer__phase ilmTimeline__frozenPhase" > -
+
{ + const { euiTheme } = useEuiTheme(); + + const isBorealis = euiTheme.themeName === 'EUI_THEME_BOREALIS'; + + // Changing the mappings for the phases in Borealis as a mid-term solution. See https://github.com/elastic/kibana/issues/203664#issuecomment-2536593361. + const phaseToIndicatorColors = { + hot: isBorealis ? euiTheme.colors.vis.euiColorVis6 : euiTheme.colors.vis.euiColorVis9, + warm: isBorealis ? euiTheme.colors.vis.euiColorVis9 : euiTheme.colors.vis.euiColorVis5, + cold: isBorealis ? euiTheme.colors.vis.euiColorVis2 : euiTheme.colors.vis.euiColorVis1, + frozen: euiTheme.colors.vis.euiColorVis4, + delete: euiTheme.colors.lightShade, + }; + return (
= { - hot: { - color: euiThemeVars.euiColorVis9, - label: 'Hot', - }, - warm: { - color: euiThemeVars.euiColorVis5, - label: 'Warm', - }, - cold: { - color: euiThemeVars.euiColorVis1, - label: 'Cold', - }, - frozen: { - color: euiThemeVars.euiColorVis4, - label: 'Frozen', - }, - delete: { - color: 'default', - label: 'Delete', - }, -}; - interface Props { index: Index; getUrlForApp: ApplicationStart['getUrlForApp']; @@ -64,6 +40,34 @@ export const IndexLifecycleSummary: FunctionComponent = ({ index, getUrlF // only ILM managed indices render the ILM tab const ilm = ilmData as IlmExplainLifecycleLifecycleExplainManaged; + const { euiTheme } = useEuiTheme(); + + const isBorealis = euiTheme.themeName === 'EUI_THEME_BOREALIS'; + + // Changing the mappings for the phases in Borealis as a mid-term solution. See https://github.com/elastic/kibana/issues/203664#issuecomment-2536593361. + const phaseToBadgeMapping: Record = { + hot: { + color: isBorealis ? euiTheme.colors.vis.euiColorVis6 : euiTheme.colors.vis.euiColorVis9, + label: 'Hot', + }, + warm: { + color: isBorealis ? euiTheme.colors.vis.euiColorVis9 : euiTheme.colors.vis.euiColorVis5, + label: 'Warm', + }, + cold: { + color: isBorealis ? euiTheme.colors.vis.euiColorVis2 : euiTheme.colors.vis.euiColorVis1, + label: 'Cold', + }, + frozen: { + color: euiTheme.colors.vis.euiColorVis4, + label: 'Frozen', + }, + delete: { + color: 'default', + label: 'Delete', + }, + }; + // if ilm.phase is an unexpected value, then display a default badge const phaseBadgeConfig = phaseToBadgeMapping[ilm.phase as Phase] ?? { color: 'default', diff --git a/x-pack/platform/plugins/private/index_lifecycle_management/tsconfig.json b/x-pack/platform/plugins/private/index_lifecycle_management/tsconfig.json index 5f061478f6a5d..34f3e7a95d191 100644 --- a/x-pack/platform/plugins/private/index_lifecycle_management/tsconfig.json +++ b/x-pack/platform/plugins/private/index_lifecycle_management/tsconfig.json @@ -35,13 +35,13 @@ "@kbn/core-http-browser", "@kbn/config-schema", "@kbn/shared-ux-router", - "@kbn/ui-theme", "@kbn/shared-ux-link-redirect-app", "@kbn/index-management-shared-types", "@kbn/react-kibana-context-render", "@kbn/unsaved-changes-prompt", "@kbn/shared-ux-table-persist", "@kbn/index-lifecycle-management-common-shared", + "@kbn/ui-theme", ], "exclude": [ "target/**/*",