Centralize phase colors and descriptions by SoniaSanzV · Pull Request #266680 · elastic/kibana

SoniaSanzV · 2026-04-30T14:26:15Z

Closes #266417

Summary

ILM phase labels, titles, short/long descriptions, and theme-aware colors were independently defined in both the index_lifecycle_management and streams_app plugins, causing duplicated i18n tokens and a behavioral divergence in the delete phase color.
Introduces a new shared package @kbn/data-lifecycle-phases (owner: @elastic/kibana-management) that exports PHASE_ORDER, PHASE_NAMES, PHASE_TITLES, PHASE_SHORT_DESCRIPTIONS, PHASE_DESCRIPTIONS, and usePhaseColors. Both plugins now import from it.
The delete phase color was misaligned: streams_app declared borderBasePlain in use_ilm_phases_color_and_description.tsx but individual components (lifecycle_phase.tsx, downsampling_bar.tsx) were silently overriding it with euiTheme.colors.backgroundBaseSubdued directly — so the declared value was never actually used. The canonical token is now backgroundBaseSubdued, defined once in usePhaseColors and consumed everywhere.
use_phase_colors.ts in ILM (a trivial re-export shim) is removed; consumers import usePhaseColors directly from @kbn/data-lifecycle-phases.
ILM_PHASE_ORDER and PHASE_LABELS aliases in x-pack/platform/plugins/shared/streams_app/public/components/stream_management/data_management/stream_detail_lifecycle/downsampling/edit_ilm_phases_flyout/constants.ts are removed; call sites now use the canonical PHASE_ORDER and PHASE_NAMES directly from @kbn/data-lifecycle-phases.

How to test

Navigate to Stack Management → Index Lifecycle Policies. Open any policy with multiple phases.
- Verify the timeline color bars (hot/warm/cold/frozen/delete) render correctly.
- Verify phase icons in the policy editor match their phase colors.
Open a policy flyout from the policy list and confirm phase indicator dots show the correct colors.
Navigate to the Streams app → a stream with an ILM lifecycle.
- Verify the lifecycle summary bar shows the correct phase colors including the delete phase (subdued background).
- Open the Edit ILM phases flyout and confirm phase descriptions and colors are shown correctly.
- Verify the DSL lifecycle summary and the Failure Store summary both render the hot/delete colors correctly.
Confirm no visible regression in the downsampling bar when a delete segment is present.

kibanamachine · 2026-05-04T11:53:59Z

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`indexLifecycleManagement`	195	196	+1
`streamsApp`	1845	1847	+2
total			+3

Public APIs missing comments

Total count of every public API that lacks a comment. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats comments for more detailed information.

id	before	after	diff
`@kbn/data-lifecycle-phases`	-	1	+1

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`indexLifecycleManagement`	153.5KB	151.3KB	-2.2KB
`streamsApp`	2.0MB	2.0MB	+1.2KB
total			-1.1KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
`indexLifecycleManagement`	31.2KB	33.8KB	+2.7KB

Unknown metric groups

API count

id	before	after	diff
`@kbn/data-lifecycle-phases`	-	28	+28

History

💔 Build #437322 failed da51f68
💚 Build #437175 succeeded 6578c3f
💛 Build #436466 was flaky 1c2550d

cc @SoniaSanzV

flash1293

Onboarding changes LGTM< just adding a new type dependency

damian-polewski

Thanks for working on this improvement! Code looks good and everything works well, I added one small nit but overall LGTM!

damian-polewski · 2026-05-05T07:42:11Z

-            }
-          ),
-        },
+  return {


Just checking: are we removing useMemo here intentionally? We still might want to keep the values cached.

…ilder_new_vis_attachment * commit '6fd683609eb6dee81f242f8ff6951edbe3bfd66c': (226 commits) Remove Model Author group-by option from external inference endpoints (elastic#264761) [Streams][Streamlang] Align ES|QL condition transpiler with Painless on null propagation (elastic#264751) chore(axios,workflows-eng): remove axios from workflows connector utils (elastic#267512) [failed-test-reporter] avoid opening issues for scout env failures (elastic#267649) [kbn-api-contracts] Detect request-body additionalProperties:false tightening (elastic#267546) [main] Sync bundled packages with Package Storage (elastic#267644) Centralize phase colors and descriptions (elastic#266680) [Unified Waterfall] Add "Scroll to origin" button (elastic#266594) [APM] Add alert and SLO badges to the service map embeddable (elastic#266360) [CI] Speed up telemetry_check by pre-filtering to collector files (elastic#265978) [Discover] Address flaky large CSV test (elastic#266642) avoid passing unrelated props within integration card icon component conditional render (elastic#266569) [Cases][Templates] Extend cases search by template field label (elastic#266414) [Background search] Migrate custom SplitButton to EuiSplitButton (elastic#267447) [i18n] Report translation coverage during integrate (elastic#264124) [api-docs] 2026-05-05 Daily api_docs build (elastic#267639) [Scout] Update test config manifests (elastic#267636) [content list] Add saved object provider services (elastic#266428) [Fleet] Otel UI add health and implement it in OTelComponentDetail (elastic#267292) Update dependency msw to v2.13.4 (main) (elastic#266770) ...

## Summary On the Streams retention management page (`/app/streams/{name}/management/retention`), the `GET /internal/streams/{name}/lifecycle/_explain` endpoint was being called in an infinite loop. Every render triggered a new fetch, which caused a state update, which triggered another render, and so on. The root cause was referential instability in `usePhaseColors` (`kbn-data-lifecycle-phases`): it returned a plain object literal on every render with no memoization. This made `ilmPhases` (built from `phaseColors` in `useIlmPhasesColorAndDescription`) also a new reference every render. Since `ilmPhases` was in the dependency array of `useIngestionRatePerTier`, the fetch — including the `_explain` call — re-ran on every render. This was caused by #266680 Two fixes: - `usePhaseColors` now wraps its return value in `useMemo`, keyed on the individual EUI theme color tokens. The color map is only recreated on theme changes (e.g. dark/light mode toggle). - `useIlmPhasesColorAndDescription` now wraps `ilmPhases` in `useMemo` keyed on `phaseColors`. Since `phaseColors` is now stable, `ilmPhases` is also stable, and `useIngestionRatePerTier` no longer re-fires on every render. ### Test plan - Navigate to `/app/streams/{name}/management/retention` on a non-serverless environment with a stream that has an ILM policy. - Open the browser network tab and filter for `lifecycle/_explain`. - Verify the endpoint is called once on page load (and again only when the time range changes), not continuously.

## Summary On the Streams retention management page (`/app/streams/{name}/management/retention`), the `GET /internal/streams/{name}/lifecycle/_explain` endpoint was being called in an infinite loop. Every render triggered a new fetch, which caused a state update, which triggered another render, and so on. The root cause was referential instability in `usePhaseColors` (`kbn-data-lifecycle-phases`): it returned a plain object literal on every render with no memoization. This made `ilmPhases` (built from `phaseColors` in `useIlmPhasesColorAndDescription`) also a new reference every render. Since `ilmPhases` was in the dependency array of `useIngestionRatePerTier`, the fetch — including the `_explain` call — re-ran on every render. This was caused by elastic#266680 Two fixes: - `usePhaseColors` now wraps its return value in `useMemo`, keyed on the individual EUI theme color tokens. The color map is only recreated on theme changes (e.g. dark/light mode toggle). - `useIlmPhasesColorAndDescription` now wraps `ilmPhases` in `useMemo` keyed on `phaseColors`. Since `phaseColors` is now stable, `ilmPhases` is also stable, and `useIngestionRatePerTier` no longer re-fires on every render. ### Test plan - Navigate to `/app/streams/{name}/management/retention` on a non-serverless environment with a stream that has an ILM policy. - Open the browser network tab and filter for `lifecycle/_explain`. - Verify the endpoint is called once on page load (and again only when the time range changes), not continuously.

Centralize phase colors and descriptions

a281279

SoniaSanzV self-assigned this Apr 30, 2026

SoniaSanzV requested a review from a team as a code owner April 30, 2026 14:26

SoniaSanzV added the Feature:ILM label Apr 30, 2026

SoniaSanzV requested review from a team as code owners April 30, 2026 14:26

kibanamachine added 3 commits April 30, 2026 14:32

Changes from node scripts/lint.js --fix

a849855

Changes from node scripts/generate codeowners

c7aff46

Changes from node scripts/regenerate_moon_projects.js --update

1c2550d

SoniaSanzV enabled auto-merge (squash) May 4, 2026 07:02

SoniaSanzV added 3 commits May 4, 2026 09:02

Merge branch 'main' into centralize_phases_colors_and_descriptions

6578c3f

Merge branch 'main' into centralize_phases_colors_and_descriptions

da51f68

Merge branch 'main' into centralize_phases_colors_and_descriptions

6fa0401

flash1293 approved these changes May 4, 2026

View reviewed changes

damian-polewski approved these changes May 5, 2026

View reviewed changes

SoniaSanzV merged commit 671047a into elastic:main May 5, 2026
29 checks passed

kibanamachine added the v9.5.0 label May 5, 2026

SoniaSanzV deleted the centralize_phases_colors_and_descriptions branch May 5, 2026 07:45

SoniaSanzV mentioned this pull request May 8, 2026

[Streams] Fix loop in retention tab #268434

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Centralize phase colors and descriptions#266680

Centralize phase colors and descriptions#266680
SoniaSanzV merged 7 commits into
elastic:mainfrom
SoniaSanzV:centralize_phases_colors_and_descriptions

SoniaSanzV commented Apr 30, 2026

Uh oh!

kibanamachine commented May 4, 2026

API count

Uh oh!

flash1293 left a comment

Uh oh!

damian-polewski left a comment

Uh oh!

damian-polewski May 5, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

SoniaSanzV commented Apr 30, 2026

Summary

How to test

Uh oh!

kibanamachine commented May 4, 2026

💚 Build Succeeded

Metrics [docs]

Module Count

Public APIs missing comments

Async chunks

Page load bundle

API count

History

Uh oh!

flash1293 left a comment

Choose a reason for hiding this comment

Uh oh!

damian-polewski left a comment

Choose a reason for hiding this comment

Uh oh!

damian-polewski May 5, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants