github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 09:19:04 -04:00
Code Issues Projects Releases Packages Wiki Activity

[ILM] Remove euiThemeVars and remapping colors for Borealis (#204449)

Browse source 
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.


<img width="1387" alt="Screenshot 2024-12-16 at 17 20 54"
src="https://github.com/user-attachments/assets/1bc82a7d-27cc-47cb-bc35-45f8feb7360a"
/>
<img width="743" alt="Screenshot 2024-12-16 at 17 20 40"
src="https://github.com/user-attachments/assets/ca5b4b4e-2809-42e6-abc0-fa87493df0e1"
/>
<img width="1330" alt="Screenshot 2024-12-16 at 17 19 42"
src="https://github.com/user-attachments/assets/8ebc252c-07dc-4efa-b13d-4f9fadb3366b"
/>
<img width="753" alt="Screenshot 2024-12-16 at 17 19 58"
src="https://github.com/user-attachments/assets/eff5c360-c9dd-4a96-ac7a-e8b1059937eb"
/>

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Matthew Kime <matt@mattki.me>
This commit is contained in:
Sonia Sanz Vivas 2025-01-08 16:40:16 +01:00 • committed by GitHub
parent c6501da809
commit aa6489585b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 117 additions and 83 deletions
Download patch file Download diff file Expand all files Collapse all files

6
x-pack/platform/plugins/private/index_lifecycle_management/__jest__/__snapshots__/extend_index_management.test.tsx.snap generated
View file

@ -179,7 +179,7 @@ exports[`extend index management ilm summary extension should render a phase def
>
<span
class="euiBadge emotion-euiBadge"
style="--euiBadgeBackgroundColor: #e7664c; --euiBadgeTextColor: #000000;"
style="--euiBadgeBackgroundColor: #E7664C; --euiBadgeTextColor: #000000;"
title="Hot"
>
<span
@ -349,7 +349,7 @@ exports[`extend index management ilm summary extension should render a step info
>
<span
class="euiBadge emotion-euiBadge"
style="--euiBadgeBackgroundColor: #e7664c; --euiBadgeTextColor: #000000;"
style="--euiBadgeBackgroundColor: #E7664C; --euiBadgeTextColor: #000000;"
title="Hot"
>
<span
@ -515,7 +515,7 @@ exports[`extend index management ilm summary extension should render an error pa
>
<span
class="euiBadge emotion-euiBadge"
style="--euiBadgeBackgroundColor: #e7664c; --euiBadgeTextColor: #000000;"
style="--euiBadgeBackgroundColor: #E7664C; --euiBadgeTextColor: #000000;"
title="Hot"
>
<span

8
x-pack/platform/plugins/private/index_lifecycle_management/__jest__/__snapshots__/policy_flyout.test.tsx.snap generated
View file

@ -62,7 +62,7 @@ exports[`View policy flyout shows all phases 1`] = `
data-test-subj="ilmTimelinePhase-hot"
>
<div
class="ilmTimeline__colorBar ilmTimeline__hotPhase__colorBar"
class="ilmTimeline__colorBar css-nkokfp"
/>
<div
class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-center-row"
@ -88,7 +88,7 @@ exports[`View policy flyout shows all phases 1`] = `
data-test-subj="ilmTimelinePhase-warm"
>
<div
class="ilmTimeline__colorBar ilmTimeline__warmPhase__colorBar"
class="ilmTimeline__colorBar css-1gruzq0"
/>
<div
class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-center-row"
@ -114,7 +114,7 @@ exports[`View policy flyout shows all phases 1`] = `
data-test-subj="ilmTimelinePhase-cold"
>
<div
class="ilmTimeline__colorBar ilmTimeline__coldPhase__colorBar"
class="ilmTimeline__colorBar css-33s0i"
/>
<div
class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-center-row"
@ -140,7 +140,7 @@ exports[`View policy flyout shows all phases 1`] = `
data-test-subj="ilmTimelinePhase-frozen"
>
<div
class="ilmTimeline__colorBar ilmTimeline__frozenPhase__colorBar"
class="ilmTimeline__colorBar css-x0nb1a"
/>
<div
class="euiFlexGroup emotion-euiFlexGroup-responsive-s-flexStart-center-row"

21
x-pack/platform/plugins/private/index_lifecycle_management/public/application/sections/edit_policy/components/phase_icon/phase_icon.scss
View file

@ -6,31 +6,14 @@
align-items: center;
border-radius: 50%;
background-color: $euiColorLightestShade;
&--disabled {
width: $euiSize;
height: $euiSize;
margin: $euiSizeS;
}
&--delete {
background-color: $euiColorLightShade;
}
&__inner--hot {
fill: $euiColorVis9_behindText;
}
&__inner--warm {
fill: $euiColorVis5_behindText;
}
&__inner--cold {
fill: $euiColorVis1_behindText;
}
&__inner--frozen {
fill: $euiColorVis4_behindText;
}
&__inner--delete {
fill: $euiColorDarkShade;
}
&__inner--disabled {
fill: $euiColorMediumShade;
}
}

20
x-pack/platform/plugins/private/index_lifecycle_management/public/application/sections/edit_policy/components/phase_icon/phase_icon.tsx
View file

@ -6,7 +6,9 @@
*/
import React, { FunctionComponent } from 'react';
import { EuiIcon } from '@elastic/eui';
import { css } from '@emotion/react';
import { euiThemeVars } from '@kbn/ui-theme';
import { EuiIcon, useEuiTheme } from '@elastic/eui';
import { Phases } from '../../../../../../common/types';
import './phase_icon.scss';
interface Props {
@ -14,13 +16,27 @@ interface Props {
phase: string & keyof Phases;
}
export const PhaseIcon: FunctionComponent<Props> = ({ 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 (
<div
className={`ilmPhaseIcon ilmPhaseIcon--${phase} ${enabled ? '' : 'ilmPhaseIcon--disabled'}`}
>
{enabled ? (
<EuiIcon
className={`ilmPhaseIcon__inner--${phase}`}
css={css`
fill: ${phaseIconColors[phase]};
`}
type={phase === 'delete' ? 'trash' : 'checkInCircleFilled'}
size={phase === 'delete' ? 'm' : 'l'}
/>

16
x-pack/platform/plugins/private/index_lifecycle_management/public/application/sections/edit_policy/components/timeline/timeline.scss
View file

@ -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;
}
}
}

51
x-pack/platform/plugins/private/index_lifecycle_management/public/application/sections/edit_policy/components/timeline/timeline.tsx
View file

@ -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<Props> = 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<Props> = memo(
data-test-subj="ilmTimelinePhase-hot"
className="ilmTimeline__phasesContainer__phase ilmTimeline__hotPhase"
>
<div className="ilmTimeline__colorBar ilmTimeline__hotPhase__colorBar" />
<div
className={`ilmTimeline__colorBar `}
css={css`
background-color: ${timelineIconColors.hot};
`}
/>
<TimelinePhaseText
phaseName={i18nTexts.hotPhase}
durationInPhase={getDurationInPhaseContent('hot')}
@ -199,7 +225,12 @@ export const Timeline: FunctionComponent<Props> = memo(
data-test-subj="ilmTimelinePhase-warm"
className="ilmTimeline__phasesContainer__phase ilmTimeline__warmPhase"
>
<div className="ilmTimeline__colorBar ilmTimeline__warmPhase__colorBar" />
<div
className={`ilmTimeline__colorBar`}
css={css`
background-color: ${timelineIconColors.warm};
`}
/>
<TimelinePhaseText
phaseName={i18nTexts.warmPhase}
durationInPhase={getDurationInPhaseContent('warm')}
@ -211,7 +242,12 @@ export const Timeline: FunctionComponent<Props> = memo(
data-test-subj="ilmTimelinePhase-cold"
className="ilmTimeline__phasesContainer__phase ilmTimeline__coldPhase"
>
<div className="ilmTimeline__colorBar ilmTimeline__coldPhase__colorBar" />
<div
className={`ilmTimeline__colorBar`}
css={css`
background-color: ${timelineIconColors.cold};
`}
/>
<TimelinePhaseText
phaseName={i18nTexts.coldPhase}
durationInPhase={getDurationInPhaseContent('cold')}
@ -223,7 +259,12 @@ export const Timeline: FunctionComponent<Props> = memo(
data-test-subj="ilmTimelinePhase-frozen"
className="ilmTimeline__phasesContainer__phase ilmTimeline__frozenPhase"
>
<div className="ilmTimeline__colorBar ilmTimeline__frozenPhase__colorBar" />
<div
className="ilmTimeline__colorBar"
css={css`
background-color: ${timelineIconColors.frozen};
`}
/>
<TimelinePhaseText
phaseName={i18nTexts.frozenPhase}
durationInPhase={getDurationInPhaseContent('frozen')}

22
x-pack/platform/plugins/private/index_lifecycle_management/public/application/sections/policy_list/policy_flyout/phase_indicator.tsx
View file

@ -7,17 +7,23 @@
import React from 'react';
import { css } from '@emotion/react';
import { euiThemeVars } from '@kbn/ui-theme';
import { useEuiTheme } from '@elastic/eui';
import type { Phase } from '../../../../../common/types';
const phaseToIndicatorColors = {
hot: euiThemeVars.euiColorVis9,
warm: euiThemeVars.euiColorVis5,
cold: euiThemeVars.euiColorVis1,
frozen: euiThemeVars.euiColorVis4,
delete: euiThemeVars.euiColorLightShade,
};
export const PhaseIndicator = ({ phase }: { phase: Phase }) => {
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 (
<div
css={css`

54
x-pack/platform/plugins/private/index_lifecycle_management/public/extend_index_management/components/index_lifecycle_summary.tsx
View file

@ -22,38 +22,14 @@ import {
EuiBadgeProps,
EuiBadge,
EuiCode,
useEuiTheme,
} from '@elastic/eui';
import { euiThemeVars } from '@kbn/ui-theme';
import { ApplicationStart } from '@kbn/core/public';
import { Index, IndexDetailsTab } from '@kbn/index-management-shared-types';
import { IlmExplainLifecycleLifecycleExplainManaged } from '@elastic/elasticsearch/lib/api/types';
import { Phase } from '../../../common/types';
import { getPolicyEditPath } from '../../application/services/navigation';
const phaseToBadgeMapping: Record<Phase, { color: EuiBadgeProps['color']; label: string }> = {
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<Props> = ({ 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<Phase, { color: EuiBadgeProps['color']; label: string }> = {
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',

2
x-pack/platform/plugins/private/index_lifecycle_management/tsconfig.json
View file

@ -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/**/*",