Skip to content

Implement Visual Refresh changes in Stack monitoring #8228

@weronikaolejniczak

Description

@weronikaolejniczak

The purpose of this task is to implement the changes necessary for the Visual Refresh in Stack monitoring in Kibana.

Package: /x-pack/plugins/monitoring
Meta issue: elastic/kibana#199715
Details: stack-monitoring.pdf


### Tasks
- [x] use color palette tokens and functions within the scope of the `EuiProvider`
- [x] replace `tintOrShade()` color calculation function with a semantic token
- [x] replace `euiThemeVars` from `@kbn/ui-theme` with `useEuiTheme` from `@elastic/eui`
- [x] change all cases of `props.theme.eui.*` to `euiTheme.*`
- [x] extend `emotion.d.ts` file in the `tsconfig.json`
- [x] replace `euiStyled` with `css` from `@emotion/react`
- [x] migrate Sass to `@emotion/react`
- [x] (if applicable) replace all `success` tokens with `accentSecondary`
- [ ] (optional) replace `transparentize()` color calculation function with a semantic token
- [ ] (optional) replace all custom colors with semantic tokens (or at least appropriate color palette values)
- [ ] (optional) replace incorrectly used vis color palette with other color tokens
- [ ] (optional) replace all "health" SVGs with an appropriate component / update the colors of the SVG

Special test cases:

  • Monitoring time-series "Zoom out" button hover behavior - x-pack/plugins/monitoring/public/components/chart/monitoring_timeseries_container.tsx
  • Shard allocation (especially color mapping with shard type and status):
    • x-pack/plugins/monitoring/public/components/elasticsearch/shard_allocation/components/assigned.js
    • x-pack/plugins/monitoring/public/components/elasticsearch/shard_allocation/components/shard.js
  • Kuery bar suggestions and autocomplete field:
    • x-pack/plugins/monitoring/public/components/kuery_bar/autocomplete_field.tsx
    • x-pack/plugins/monitoring/public/components/kuery_bar/suggestion_item.tsx

Metadata

Metadata

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions