From 75673a3133e547b019cd13158a4bc87890e05656 Mon Sep 17 00:00:00 2001 From: "miriam.aparicio" Date: Mon, 25 Nov 2024 16:45:23 +0000 Subject: [PATCH] get vis colors from eui theme --- .../apm/common/service_health_status.ts | 28 ++++++----- .../ui_components/chart_preview/index.tsx | 9 ++-- .../error_sampler/sample_summary.tsx | 19 ++++---- .../app/service_map/cytoscape_options.ts | 4 +- .../service_map/popover/anomaly_detection.tsx | 14 ++++-- .../anomaly_detection_setup_link.tsx | 4 +- .../helper/get_chart_anomaly_timeseries.tsx | 8 ++-- .../index.tsx | 7 +-- .../shared/charts/timeline/legend.tsx | 6 +-- .../shared/charts/timeseries_chart.tsx | 13 +++--- .../index.tsx | 16 +++++-- .../shared/kuery_bar/typeahead/suggestion.js | 39 ++++++++-------- .../autocomplete_field/suggestion_item.tsx | 2 +- .../components/layouts/aws_ec2_layout.tsx | 24 +++++----- .../components/layouts/aws_rds_layout.tsx | 34 +++++++------- .../components/layouts/aws_s3_layout.tsx | 24 +++++----- .../components/layouts/aws_sqs_layout.tsx | 24 +++++----- .../components/layouts/container_layout.tsx | 46 +++++++++---------- .../layouts/nginx_layout_sections.tsx | 27 +++++------ .../components/layouts/pod_layout.tsx | 30 ++++++------ .../pages/metrics/metric_detail/types.ts | 3 +- 21 files changed, 200 insertions(+), 181 deletions(-) diff --git a/x-pack/plugins/observability_solution/apm/common/service_health_status.ts b/x-pack/plugins/observability_solution/apm/common/service_health_status.ts index 7f5530aa7fa05..ead84b338266d 100644 --- a/x-pack/plugins/observability_solution/apm/common/service_health_status.ts +++ b/x-pack/plugins/observability_solution/apm/common/service_health_status.ts @@ -5,8 +5,8 @@ * 2.0. */ +import { EuiThemeComputed } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; -import { EuiTheme } from '@kbn/kibana-react-plugin/common'; import { ML_ANOMALY_SEVERITY } from '@kbn/ml-anomaly-utils/anomaly_severity'; export enum ServiceHealthStatus { @@ -34,29 +34,35 @@ export function getServiceHealthStatus({ severity }: { severity: ML_ANOMALY_SEVE } } -export function getServiceHealthStatusColor(theme: EuiTheme, status: ServiceHealthStatus) { +export function getServiceHealthStatusColor( + theme: EuiThemeComputed<{}>, + status: ServiceHealthStatus +) { switch (status) { case ServiceHealthStatus.healthy: - return theme.eui.euiColorVis0; + return theme.colors.vis.euiColorVis0; case ServiceHealthStatus.warning: - return theme.eui.euiColorVis5; + return theme.colors.vis.euiColorVis5; case ServiceHealthStatus.critical: - return theme.eui.euiColorVis9; + return theme.colors.vis.euiColorVis9; case ServiceHealthStatus.unknown: - return theme.eui.euiColorMediumShade; + return theme.colors.mediumShade; } } -export function getServiceHealthStatusBadgeColor(theme: EuiTheme, status: ServiceHealthStatus) { +export function getServiceHealthStatusBadgeColor( + theme: EuiThemeComputed<{}>, + status: ServiceHealthStatus +) { switch (status) { case ServiceHealthStatus.healthy: - return theme.eui.euiColorVis0_behindText; + return theme.colors.vis.euiColorVis0; case ServiceHealthStatus.warning: - return theme.eui.euiColorVis5_behindText; + return theme.colors.vis.euiColorVis5; case ServiceHealthStatus.critical: - return theme.eui.euiColorVis9_behindText; + return theme.colors.vis.euiColorVis9; case ServiceHealthStatus.unknown: - return theme.eui.euiColorMediumShade; + return theme.colors.mediumShade; } } diff --git a/x-pack/plugins/observability_solution/apm/public/components/alerting/ui_components/chart_preview/index.tsx b/x-pack/plugins/observability_solution/apm/public/components/alerting/ui_components/chart_preview/index.tsx index 8e7cce37b5be4..271a0caac72fc 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/alerting/ui_components/chart_preview/index.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/alerting/ui_components/chart_preview/index.tsx @@ -20,7 +20,7 @@ import { Tooltip, niceTimeFormatter, } from '@elastic/charts'; -import { EuiSpacer } from '@elastic/eui'; +import { EuiSpacer, useEuiTheme } from '@elastic/eui'; import React, { useMemo } from 'react'; import { IUiSettingsClient } from '@kbn/core/public'; import { TimeUnitChar } from '@kbn/observability-plugin/common'; @@ -28,7 +28,6 @@ import { UI_SETTINGS } from '@kbn/data-plugin/public'; import moment from 'moment'; import { i18n } from '@kbn/i18n'; import { Coordinate } from '../../../../../typings/timeseries'; -import { useTheme } from '../../../../hooks/use_theme'; import { getTimeZone } from '../../../shared/charts/helper/timezone'; import { TimeLabelForData, TIME_LABELS, getDomain } from './chart_preview_helper'; import { ALERT_PREVIEW_BUCKET_SIZE } from '../../utils/helper'; @@ -52,15 +51,15 @@ export function ChartPreview({ timeUnit = 'm', totalGroups, }: ChartPreviewProps) { - const theme = useTheme(); + const { euiTheme } = useEuiTheme(); const thresholdOpacity = 0.3; const DEFAULT_DATE_FORMAT = 'Y-MM-DD HH:mm:ss'; const style = { - fill: theme.eui.euiColorVis2, + fill: euiTheme.colors.vis.euiColorVis2, line: { strokeWidth: 2, - stroke: theme.eui.euiColorVis2, + stroke: euiTheme.colors.vis.euiColorVis2, opacity: 1, }, opacity: thresholdOpacity, diff --git a/x-pack/plugins/observability_solution/apm/public/components/app/error_group_details/error_sampler/sample_summary.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/error_group_details/error_sampler/sample_summary.tsx index c7acbfee7e45e..8aaf275b66cb4 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/app/error_group_details/error_sampler/sample_summary.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/app/error_group_details/error_sampler/sample_summary.tsx @@ -4,17 +4,19 @@ * 2.0; you may not use this file except in compliance with the Elastic License * 2.0. */ -import { EuiText, EuiSpacer, EuiCodeBlock } from '@elastic/eui'; +import { EuiText, EuiSpacer, EuiCodeBlock, useEuiTheme, type EuiThemeComputed } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import React from 'react'; import { euiStyled } from '@kbn/kibana-react-plugin/common'; import { APMError } from '../../../../../typings/es_schemas/ui/apm_error'; import { NOT_AVAILABLE_LABEL } from '../../../../../common/i18n'; -const Label = euiStyled.div` - margin-bottom: ${({ theme }) => theme.eui.euiSizeXS}; - font-size: ${({ theme }) => theme.eui.euiFontSizeS}; - color: ${({ theme }) => theme.eui.euiColorDarkestShade}; +const Label = euiStyled.div<{ + euiTheme: EuiThemeComputed<{}>; +}>` + margin-bottom: ${({ euiTheme }) => euiTheme.size.xs}; + font-size: ${({ euiTheme }) => euiTheme.size.s}; + color: ${({ euiTheme }) => euiTheme.colors.darkestShade}; `; interface Props { @@ -23,6 +25,7 @@ interface Props { }; } export function SampleSummary({ error }: Props) { + const { euiTheme } = useEuiTheme(); const logMessage = error.error.log?.message; const excMessage = error.error.exception?.[0].message; const culprit = error.error.culprit; @@ -32,7 +35,7 @@ export function SampleSummary({ error }: Props) { {logMessage && ( <> -