Skip to content

Commit b5ac8c0

Browse files
SoniaSanzVSoniaSanzV
committed
fix ilm icons and unify colors
1 parent 330f8c6 commit b5ac8c0

6 files changed

Lines changed: 57 additions & 50 deletions

File tree

‎x-pack/platform/plugins/private/index_lifecycle_management/public/application/lib/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,4 +7,6 @@
77

88
export * from './data_tiers';
99

10+
export * from './phase_colors';
11+
1012
export * from './rollover';

‎x-pack/platform/plugins/private/index_lifecycle_management/public/application/lib/phase_colors.ts‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
/*
2+
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
3+
* or more contributor license agreements. Licensed under the Elastic License
4+
* 2.0; you may not use this file except in compliance with the Elastic License
5+
* 2.0.
6+
*/
7+
8+
import type { UseEuiTheme } from '@elastic/eui';
9+
import type { Phases } from '../../../common/types';
10+
11+
export interface PhaseColorMap {
12+
hot: string;
13+
warm: string;
14+
cold: string;
15+
frozen: string;
16+
delete: string;
17+
}
18+
19+
export const getPhaseColors = (euiTheme: UseEuiTheme['euiTheme']): PhaseColorMap => ({
20+
hot: euiTheme.colors.vis.euiColorVis6,
21+
warm: euiTheme.colors.vis.euiColorVis9,
22+
cold: euiTheme.colors.vis.euiColorVis2,
23+
frozen: euiTheme.colors.vis.euiColorVis4,
24+
delete: euiTheme.colors.borderBaseSubdued,
25+
});
26+
27+
export const getPhaseColor = (
28+
phase: keyof Phases | 'delete',
29+
euiTheme: UseEuiTheme['euiTheme']
30+
): string => {
31+
const phaseColors = getPhaseColors(euiTheme);
32+
return phaseColors[phase as keyof PhaseColorMap];
33+
};

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

Lines changed: 10 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -10,24 +10,12 @@ import React from 'react';
1010
import { css } from '@emotion/react';
1111
import { EuiIcon, useEuiTheme } from '@elastic/eui';
1212
import type { Phases } from '../../../../../../common/types';
13+
import { getPhaseColors } from '../../../../lib';
1314

1415
const useStyles = ({ enabled, phase }: { enabled: boolean; phase: string }) => {
1516
const { euiTheme } = useEuiTheme();
16-
const isBorealis = euiTheme.themeName === 'EUI_THEME_BOREALIS';
1717

18-
const phaseIconColors = {
19-
hot: isBorealis ? euiTheme.colors.vis.euiColorVis6 : euiTheme.colors.vis.euiColorVisBehindText9,
20-
warm: isBorealis
21-
? euiTheme.colors.vis.euiColorVis9
22-
: euiTheme.colors.vis.euiColorVisBehindText5,
23-
cold: isBorealis
24-
? euiTheme.colors.vis.euiColorVis2
25-
: euiTheme.colors.vis.euiColorVisBehindText1,
26-
frozen: isBorealis
27-
? euiTheme.colors.vis.euiColorVis4
28-
: euiTheme.colors.vis.euiColorVisBehindText4,
29-
delete: euiTheme.colors.darkShade,
30-
};
18+
const phaseIconColors = getPhaseColors(euiTheme);
3119

3220
return {
3321
container: css`
@@ -37,14 +25,15 @@ const useStyles = ({ enabled, phase }: { enabled: boolean; phase: string }) => {
3725
justify-content: center;
3826
align-items: center;
3927
border-radius: 50%;
40-
background-color: ${phase === 'delete'
41-
? euiTheme.colors.lightShade
42-
: euiTheme.colors.lightestShade};
28+
background-color: ${!enabled
29+
? euiTheme.colors.backgroundBaseFormsPrepend
30+
: phaseIconColors[phase as keyof typeof phaseIconColors]};
4331
${!enabled && `margin: ${euiTheme.size.s};`}
4432
`,
45-
icon: css`
46-
fill: ${phaseIconColors[phase as keyof typeof phaseIconColors]};
47-
`,
33+
icon:
34+
phase === 'delete'
35+
? euiTheme.colors.backgroundFilledText
36+
: euiTheme.colors.backgroundBasePlain,
4837
};
4938
};
5039
interface Props {
@@ -57,11 +46,7 @@ export const PhaseIcon: FunctionComponent<Props> = ({ enabled, phase }) => {
5746
return (
5847
<div css={styles.container}>
5948
{enabled ? (
60-
<EuiIcon
61-
css={styles.icon}
62-
type={phase === 'delete' ? 'trash' : 'checkInCircleFilled'}
63-
size={phase === 'delete' ? 'm' : 'l'}
64-
/>
49+
<EuiIcon color={styles.icon} type={phase === 'delete' ? 'trash' : 'check'} />
6550
) : (
6651
<EuiIcon type={'dot'} size={'s'} />
6752
)}

‎x-pack/platform/plugins/private/index_lifecycle_management/public/application/sections/edit_policy/components/timeline/timeline.styles.ts‎

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,18 +7,13 @@
77

88
import { css } from '@emotion/react';
99
import { useEuiTheme } from '@elastic/eui';
10+
import { getPhaseColors } from '../../../../lib';
1011

1112
export const useStyles = () => {
1213
const { euiTheme } = useEuiTheme();
1314
const ilmTimelineBarHeight = euiTheme.size.s;
14-
const isBorealis = euiTheme.themeName === 'EUI_THEME_BOREALIS';
1515

16-
const timelineIconColors = {
17-
hot: isBorealis ? euiTheme.colors.vis.euiColorVis6 : euiTheme.colors.vis.euiColorVis9,
18-
warm: isBorealis ? euiTheme.colors.vis.euiColorVis9 : euiTheme.colors.vis.euiColorVis5,
19-
cold: isBorealis ? euiTheme.colors.vis.euiColorVis2 : euiTheme.colors.vis.euiColorVis1,
20-
frozen: euiTheme.colors.vis.euiColorVis4,
21-
};
16+
const timelineIconColors = getPhaseColors(euiTheme);
2217

2318
return {
2419
container: css`
@@ -62,8 +57,8 @@ export const useStyles = () => {
6257
deleteIconContainer: css`
6358
padding: ${euiTheme.size.m};
6459
margin-left: ${euiTheme.size.m};
65-
background-color: ${euiTheme.colors.lightestShade};
66-
color: ${euiTheme.colors.darkShade};
60+
background-color: ${timelineIconColors.delete};
61+
color: ${euiTheme.colors.backgroundFilledText};
6762
border-radius: 50%;
6863
`,
6964
colorBar: css`

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

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -9,20 +9,12 @@ import React from 'react';
99
import { css } from '@emotion/react';
1010
import { useEuiTheme } from '@elastic/eui';
1111
import type { Phase } from '../../../../../common/types';
12+
import { getPhaseColors } from '../../../lib';
1213

1314
export const PhaseIndicator = ({ phase }: { phase: Phase }) => {
1415
const { euiTheme } = useEuiTheme();
1516

16-
const isBorealis = euiTheme.themeName === 'EUI_THEME_BOREALIS';
17-
18-
// Changing the mappings for the phases in Borealis as a mid-term solution. See https://github.com/elastic/kibana/issues/203664#issuecomment-2536593361.
19-
const phaseToIndicatorColors = {
20-
hot: isBorealis ? euiTheme.colors.vis.euiColorVis6 : euiTheme.colors.vis.euiColorVis9,
21-
warm: isBorealis ? euiTheme.colors.vis.euiColorVis9 : euiTheme.colors.vis.euiColorVis5,
22-
cold: isBorealis ? euiTheme.colors.vis.euiColorVis2 : euiTheme.colors.vis.euiColorVis1,
23-
frozen: euiTheme.colors.vis.euiColorVis4,
24-
delete: euiTheme.colors.lightShade,
25-
};
17+
const phaseToIndicatorColors = getPhaseColors(euiTheme);
2618

2719
return (
2820
<div

‎x-pack/platform/plugins/private/index_lifecycle_management/public/extend_index_management/components/index_lifecycle_summary.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ import type { Index, IndexDetailsTab } from '@kbn/index-management-shared-types'
3030
import type { IlmExplainLifecycleLifecycleExplainManaged } from '@elastic/elasticsearch/lib/api/types';
3131
import type { Phase } from '../../../common/types';
3232
import { getPolicyEditPath } from '../../application/services/navigation';
33+
import { getPhaseColors } from '../../application/lib';
3334
interface Props {
3435
index: Index;
3536
getUrlForApp: ApplicationStart['getUrlForApp'];
@@ -44,24 +45,23 @@ export const IndexLifecycleSummary: FunctionComponent<Props> = ({
4445
const { ilm: ilmData } = index;
4546
// only ILM managed indices render the ILM tab
4647
const ilm = ilmData as IlmExplainLifecycleLifecycleExplainManaged;
47-
const isBorealis = euiTheme.themeName === 'EUI_THEME_BOREALIS';
4848

49-
// Changing the mappings for the phases in Borealis as a mid-term solution. See https://github.com/elastic/kibana/issues/203664#issuecomment-2536593361.
49+
const phaseColors = getPhaseColors(euiTheme);
5050
const phaseToBadgeMapping: Record<Phase, { color: EuiBadgeProps['color']; label: string }> = {
5151
hot: {
52-
color: isBorealis ? euiTheme.colors.vis.euiColorVis6 : euiTheme.colors.vis.euiColorVis9,
52+
color: phaseColors.hot,
5353
label: 'Hot',
5454
},
5555
warm: {
56-
color: isBorealis ? euiTheme.colors.vis.euiColorVis9 : euiTheme.colors.vis.euiColorVis5,
56+
color: phaseColors.warm,
5757
label: 'Warm',
5858
},
5959
cold: {
60-
color: isBorealis ? euiTheme.colors.vis.euiColorVis2 : euiTheme.colors.vis.euiColorVis1,
60+
color: phaseColors.cold,
6161
label: 'Cold',
6262
},
6363
frozen: {
64-
color: euiTheme.colors.vis.euiColorVis4,
64+
color: phaseColors.frozen,
6565
label: 'Frozen',
6666
},
6767
delete: {

0 commit comments

Comments
 (0)