From e991e6e8bcd58548341031ac6cf6d26494f92b59 Mon Sep 17 00:00:00 2001 From: Bryce Buchanan <75274611+bryce-b@users.noreply.github.com> Date: Wed, 18 Dec 2024 05:43:16 -0800 Subject: [PATCH] [EUI][INFRA] Updated hardcoded colors (#204133) ## Summary This PR replaces a couple of places where hardcoded colors are used in the Infra portion of Kibana with EUITheme colors. ### Checklist Check the PR satisfies following conditions. Reviewers should verify this PR satisfies this list as well. - [x] The PR description includes the appropriate Release Notes section, and the correct `release_note:*` label is applied per the [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) ### Details Below are before and after screenshots: #### Inventory History ##### Before inventory history before ##### After Screenshot 2024-12-12 at 13 05 45 #### Alert Threshold & Alert Range annotation ##### Before Screenshot 2024-12-11 at 14 10 54 ##### After Screenshot 2024-12-12 at 12 58 32 --- .../threhsold_chart/create_lens_definition.ts | 2 +- .../alert_details_app_section.test.tsx.snap | 2 +- .../components/alert_details_app_section.tsx | 3 +-- .../inventory_view/components/timeline/timeline.tsx | 12 ++++++++---- 4 files changed, 11 insertions(+), 8 deletions(-) diff --git a/x-pack/plugins/observability_solution/infra/public/alerting/log_threshold/components/alert_details_app_section/components/threhsold_chart/create_lens_definition.ts b/x-pack/plugins/observability_solution/infra/public/alerting/log_threshold/components/alert_details_app_section/components/threhsold_chart/create_lens_definition.ts index ab3bc5f72bbfa..a6feb02a2bc61 100644 --- a/x-pack/plugins/observability_solution/infra/public/alerting/log_threshold/components/alert_details_app_section/components/threhsold_chart/create_lens_definition.ts +++ b/x-pack/plugins/observability_solution/infra/public/alerting/log_threshold/components/alert_details_app_section/components/threhsold_chart/create_lens_definition.ts @@ -78,7 +78,7 @@ function createBaseLensDefinition( yConfig: [ { forAccessor: '607b2253-ed20-4f0a-bf62-07a1f846cca4', - color: '#6092c0', + color: euiTheme.colors.vis.euiColorVis2, }, ], }, diff --git a/x-pack/plugins/observability_solution/infra/public/alerting/metric_threshold/components/__snapshots__/alert_details_app_section.test.tsx.snap b/x-pack/plugins/observability_solution/infra/public/alerting/metric_threshold/components/__snapshots__/alert_details_app_section.test.tsx.snap index af8a5b3d8e0a9..0df66d4c3dca3 100644 --- a/x-pack/plugins/observability_solution/infra/public/alerting/metric_threshold/components/__snapshots__/alert_details_app_section.test.tsx.snap +++ b/x-pack/plugins/observability_solution/infra/public/alerting/metric_threshold/components/__snapshots__/alert_details_app_section.test.tsx.snap @@ -17,7 +17,7 @@ Array [ "type": "manual", }, Object { - "color": "#F04E9833", + "color": "rgba(189,39,30,0.2)", "id": "metric_threshold_active_alert_range_annotation", "key": Object { "endTimestamp": "2024-06-13T07:00:33.381Z", diff --git a/x-pack/plugins/observability_solution/infra/public/alerting/metric_threshold/components/alert_details_app_section.tsx b/x-pack/plugins/observability_solution/infra/public/alerting/metric_threshold/components/alert_details_app_section.tsx index 8f3e22c5b8a84..b23bfe38d1d39 100644 --- a/x-pack/plugins/observability_solution/infra/public/alerting/metric_threshold/components/alert_details_app_section.tsx +++ b/x-pack/plugins/observability_solution/infra/public/alerting/metric_threshold/components/alert_details_app_section.tsx @@ -18,7 +18,6 @@ import { transparentize, useEuiTheme, } from '@elastic/eui'; -import chroma from 'chroma-js'; import { RuleConditionChart, TopAlert } from '@kbn/observability-plugin/public'; import { ALERT_END, ALERT_START, ALERT_EVALUATION_VALUES, ALERT_GROUP } from '@kbn/rule-data-utils'; @@ -90,7 +89,7 @@ export function AlertDetailsAppSection({ alert, rule }: AppSectionProps) { timestamp: alertStart!, endTimestamp: alertEnd ?? moment().toISOString(), }, - color: chroma(transparentize('#F04E981A', 0.2)).hex().toUpperCase(), + color: transparentize(euiTheme.colors.danger, 0.2), id: `metric_threshold_${alertEnd ? 'recovered' : 'active'}_alert_range_annotation`, }; diff --git a/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/timeline/timeline.tsx b/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/timeline/timeline.tsx index 0697b05205fea..a40bab58d70fa 100644 --- a/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/timeline/timeline.tsx +++ b/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/timeline/timeline.tsx @@ -10,7 +10,7 @@ import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n-react'; import moment from 'moment'; import { first, last } from 'lodash'; -import { EuiLoadingChart, EuiText, EuiEmptyPrompt, EuiButton } from '@elastic/eui'; +import { EuiLoadingChart, EuiText, EuiEmptyPrompt, EuiButton, useEuiTheme } from '@elastic/eui'; import { Axis, Chart, @@ -56,7 +56,7 @@ export const Timeline: React.FC = ({ interval, yAxisFormatter, isVisible const { metric, nodeType, accountId, region } = useWaffleOptionsContext(); const { currentTime, jumpToTime, stopAutoReload } = useWaffleTimeContext(); const { filterQueryAsJson } = useWaffleFiltersContext(); - + const { euiTheme } = useEuiTheme(); const chartTheme = useTimelineChartTheme(); const { loading, error, startTime, endTime, timeseries, reload } = useTimeline( @@ -238,7 +238,11 @@ export const Timeline: React.FC = ({ interval, yAxisFormatter, isVisible @@ -261,7 +265,7 @@ export const Timeline: React.FC = ({ interval, yAxisFormatter, isVisible dataValues={generateAnnotationData( anomalies.map((a) => [a.startTime, a.influencers]) )} - style={{ fill: '#D36086' }} + style={{ fill: euiTheme.colors.backgroundFilledAccent }} /> )}