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..e7bbe5d10268a 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,9 @@ * 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 +35,32 @@ 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.euiColorVisSuccess0; case ServiceHealthStatus.warning: - return theme.eui.euiColorVis5; + return theme.colors.vis.euiColorVisWarning0; case ServiceHealthStatus.critical: - return theme.eui.euiColorVis9; + return theme.colors.vis.euiColorVisDanger0; 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.euiColorVisSuccess0; case ServiceHealthStatus.warning: - return theme.eui.euiColorVis5_behindText; + return theme.colors.vis.euiColorVisWarning0; case ServiceHealthStatus.critical: - return theme.eui.euiColorVis9_behindText; + return theme.colors.vis.euiColorVisDanger0; case ServiceHealthStatus.unknown: - return theme.eui.euiColorMediumShade; + return theme.colors.mediumShade; } } diff --git a/x-pack/plugins/observability_solution/apm/common/viz_colors.ts b/x-pack/plugins/observability_solution/apm/common/viz_colors.ts index 20d525c914549..591f0285f7f8d 100644 --- a/x-pack/plugins/observability_solution/apm/common/viz_colors.ts +++ b/x-pack/plugins/observability_solution/apm/common/viz_colors.ts @@ -8,6 +8,8 @@ import { euiLightVars as lightTheme } from '@kbn/ui-theme'; function getVizColorsForTheme(theme = lightTheme) { + // Regarding https://github.com/elastic/kibana/issues/203338 + // Guidance right now is to keep these as they are for now (meaning to keep using the JSON return [ theme.euiColorVis0, theme.euiColorVis1, 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..a446d06b3710f 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 @@ -52,15 +52,15 @@ export function ChartPreview({ timeUnit = 'm', totalGroups, }: ChartPreviewProps) { - const theme = useTheme(); + const { euiTheme } = useTheme(); 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/correlations/context_popover/field_stats_popover.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/correlations/context_popover/field_stats_popover.tsx index 33351f2104397..4f9a5af062d17 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/app/correlations/context_popover/field_stats_popover.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/app/correlations/context_popover/field_stats_popover.tsx @@ -205,7 +205,7 @@ export function FieldStatsPopover({ const field = dataView?.getFieldByName(fieldName); const closePopover = useCallback(() => setInfoOpen(false), []); - const theme = useTheme(); + const { euiTheme } = useTheme(); const params = useFetchParams(); @@ -280,7 +280,7 @@ export function FieldStatsPopover({ } )} data-test-subj={'apmCorrelationsContextPopoverButton'} - style={{ marginLeft: theme.eui.euiSizeXS }} + style={{ marginLeft: euiTheme.size.xs }} /> ); diff --git a/x-pack/plugins/observability_solution/apm/public/components/app/correlations/correlations_table.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/correlations/correlations_table.tsx index ea79b1ef198bc..7dbb17c485ad4 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/app/correlations/correlations_table.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/app/correlations/correlations_table.tsx @@ -43,7 +43,7 @@ export function CorrelationsTable({ sorting, rowHeader, }: CorrelationsTableProps) { - const euiTheme = useTheme(); + const { euiTheme } = useTheme(); const trackApmEvent = useUiTracker({ app: 'apm' }); const trackSelectSignificantCorrelationTerm = useCallback( () => debounce(() => trackApmEvent({ metric: 'select_significant_term' }), 1000), @@ -105,7 +105,7 @@ export function CorrelationsTable({ selectedTerm.fieldValue === term.fieldValue && selectedTerm.fieldName === term.fieldName ? { - backgroundColor: euiTheme.eui.euiColorLightestShade, + backgroundColor: euiTheme.colors.lightestShade, } : null, }; diff --git a/x-pack/plugins/observability_solution/apm/public/components/app/correlations/failed_transactions_correlations.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/correlations/failed_transactions_correlations.tsx index d02eed810acd0..a19f9e6c0d140 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/app/correlations/failed_transactions_correlations.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/app/correlations/failed_transactions_correlations.tsx @@ -54,7 +54,7 @@ import { MIN_TAB_TITLE_HEIGHT } from '../../shared/charts/duration_distribution_ import { TotalDocCountLabel } from '../../shared/charts/duration_distribution_chart/total_doc_count_label'; export function FailedTransactionsCorrelations({ onFilter }: { onFilter: () => void }) { - const euiTheme = useTheme(); + const { euiTheme } = useTheme(); const { core: { notifications }, @@ -456,7 +456,7 @@ export function FailedTransactionsCorrelations({ onFilter }: { onFilter: () => v style={{ display: 'flex', flexDirection: 'row', - paddingLeft: euiTheme.eui.euiSizeS, + paddingLeft: euiTheme.size.s, }} > v void }) { core: { notifications }, } = useApmPluginContext(); - const euiTheme = useTheme(); + const { euiTheme } = useTheme(); const { progress, response, startFetch, cancelFetch } = useLatencyCorrelations(); const { overallHistogram, hasData, status } = getOverallHistogram(response, progress.isRunning); diff --git a/x-pack/plugins/observability_solution/apm/public/components/app/dependency_operation_detail_view/dependency_operation_distribution_chart.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/dependency_operation_detail_view/dependency_operation_distribution_chart.tsx index 3f8b8728fd483..8bf04bea3995c 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/app/dependency_operation_detail_view/dependency_operation_distribution_chart.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/app/dependency_operation_detail_view/dependency_operation_distribution_chart.tsx @@ -22,7 +22,7 @@ export function DependencyOperationDistributionChart() { // there is no "current" event in the dependency operation detail view const markerCurrentEvent = undefined; - const euiTheme = useTheme(); + const { euiTheme } = useTheme(); const { query: { @@ -67,14 +67,14 @@ export function DependencyOperationDistributionChart() { const chartData: DurationDistributionChartData[] = [ { - areaSeriesColor: euiTheme.eui.euiColorVis1, + areaSeriesColor: euiTheme.colors.vis.euiColorVis1, histogram: data?.allSpansDistribution.overallHistogram ?? [], id: i18n.translate('xpack.apm.dependencyOperationDistributionChart.allSpansLegendLabel', { defaultMessage: 'All spans', }), }, { - areaSeriesColor: euiTheme.eui.euiColorVis7, + areaSeriesColor: euiTheme.colors.vis.euiColorVis7, histogram: data?.failedSpansDistribution?.overallHistogram ?? [], id: i18n.translate('xpack.apm.dependencyOperationDistributionChart.failedSpansLegendLabel', { defaultMessage: 'Failed spans', diff --git a/x-pack/plugins/observability_solution/apm/public/components/app/entities/entity_link/index.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/entities/entity_link/index.tsx index 2ea10868957b5..33e58d91e2378 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/app/entities/entity_link/index.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/app/entities/entity_link/index.tsx @@ -5,7 +5,14 @@ * 2.0. */ -import { EuiButtonEmpty, EuiEmptyPrompt, EuiImage, EuiLink, EuiLoadingSpinner } from '@elastic/eui'; +import { + COLOR_MODES_STANDARD, + EuiButtonEmpty, + EuiEmptyPrompt, + EuiImage, + EuiLink, + EuiLoadingSpinner, +} from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n-react'; import { useKibana } from '@kbn/kibana-react-plugin/public'; @@ -65,7 +72,7 @@ export function EntityLink() { icon={ } diff --git a/x-pack/plugins/observability_solution/apm/public/components/app/error_group_details/distribution/index.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/error_group_details/distribution/index.tsx index b8902b30dcff2..fa1efbcd05359 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/app/error_group_details/distribution/index.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/app/error_group_details/distribution/index.tsx @@ -18,7 +18,7 @@ import { DARK_THEME, LegendValue, } from '@elastic/charts'; -import { EuiTitle } from '@elastic/eui'; +import { COLOR_MODES_STANDARD, EuiTitle } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import React from 'react'; import { useApmPluginContext } from '../../../../context/apm_plugin/use_apm_plugin_context'; @@ -97,7 +97,7 @@ export function ErrorDistribution({ distribution, title, fetchStatus }: Props) { showLegend legendValues={[LegendValue.CurrentAndLastValue]} legendPosition={Position.Bottom} - theme={theme.darkMode ? DARK_THEME : LIGHT_THEME} + theme={theme.colorMode === COLOR_MODES_STANDARD.dark ? DARK_THEME : LIGHT_THEME} locale={i18n.getLocale()} /> diff --git a/x-pack/plugins/observability_solution/apm/public/components/app/service_dashboards/empty_dashboards.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/service_dashboards/empty_dashboards.tsx index 9b7ace008206b..d4fd124599473 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/app/service_dashboards/empty_dashboards.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/app/service_dashboards/empty_dashboards.tsx @@ -5,7 +5,7 @@ * 2.0. */ import React from 'react'; -import { EuiEmptyPrompt, EuiImage } from '@elastic/eui'; +import { COLOR_MODES_STANDARD, EuiEmptyPrompt, EuiImage } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { dashboardsDark, dashboardsLight } from '@kbn/shared-svg'; import { useTheme } from '../../../hooks/use_theme'; @@ -25,7 +25,7 @@ export function EmptyDashboards({ actions }: Props) { icon={ } diff --git a/x-pack/plugins/observability_solution/apm/public/components/app/service_inventory/service_list/health_badge.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/service_inventory/service_list/health_badge.tsx index aa4299006cc48..8ef7ea61e71a0 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/app/service_inventory/service_list/health_badge.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/app/service_inventory/service_list/health_badge.tsx @@ -15,10 +15,10 @@ import { import { useTheme } from '../../../../hooks/use_theme'; export function HealthBadge({ healthStatus }: { healthStatus: ServiceHealthStatus }) { - const theme = useTheme(); + const { euiTheme } = useTheme(); return ( - + {getServiceHealthStatusLabel(healthStatus)} ); diff --git a/x-pack/plugins/observability_solution/apm/public/components/app/service_map/controls.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/service_map/controls.tsx index ac15281d61212..ea8aaa272c5f8 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/app/service_map/controls.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/app/service_map/controls.tsx @@ -110,7 +110,7 @@ export function Controls() { ); const [zoom, setZoom] = useState((cy && cy.zoom()) || 1); - const duration = parseInt(theme.eui.euiAnimSpeedFast, 10); + const duration = parseInt(theme.euiTheme.animation.fast || '0', 10); const downloadUrl = useDebugDownloadUrl(cy); const viewFullMapUrl = getLegacyApmHref({ basePath, diff --git a/x-pack/plugins/observability_solution/apm/public/components/app/service_map/cytoscape_options.ts b/x-pack/plugins/observability_solution/apm/public/components/app/service_map/cytoscape_options.ts index af0befbc06165..3d40a4bf18ba4 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/app/service_map/cytoscape_options.ts +++ b/x-pack/plugins/observability_solution/apm/public/components/app/service_map/cytoscape_options.ts @@ -7,7 +7,7 @@ import cytoscape from 'cytoscape'; import { CSSProperties } from 'react'; -import { EuiTheme } from '@kbn/kibana-react-plugin/common'; +import { UseEuiTheme } from '@elastic/eui'; import { ServiceAnomalyStats } from '../../../../common/anomaly_detection'; import { SERVICE_NAME, SPAN_DESTINATION_SERVICE_RESOURCE } from '../../../../common/es_fields/apm'; import { @@ -26,21 +26,21 @@ function getServiceAnomalyStats(el: cytoscape.NodeSingular) { } function getBorderColorFn( - theme: EuiTheme + theme: UseEuiTheme ): cytoscape.Css.MapperFunction { return (el: cytoscape.NodeSingular) => { const hasAnomalyDetectionJob = el.data('serviceAnomalyStats') !== undefined; const anomalyStats = getServiceAnomalyStats(el); if (hasAnomalyDetectionJob) { return getServiceHealthStatusColor( - theme, + theme.euiTheme, anomalyStats?.healthStatus ?? ServiceHealthStatus.unknown ); } if (el.hasClass('primary') || el.selected()) { - return theme.eui.euiColorPrimary; + return theme.euiTheme.colors.primary; } - return theme.eui.euiColorMediumShade; + return theme.euiTheme.colors.mediumShade; }; } @@ -79,10 +79,10 @@ function getBorderWidth(el: cytoscape.NodeSingular) { // @ts-expect-error `documentMode` is not recognized as a valid property of `document`. const isIE11 = !!window.MSInputMethodContext && !!document.documentMode; -export const getAnimationOptions = (theme: EuiTheme): cytoscape.AnimationOptions => ({ - duration: parseInt(theme.eui.euiAnimSpeedNormal, 10), +export const getAnimationOptions = (theme: UseEuiTheme): cytoscape.AnimationOptions => ({ + duration: parseInt(theme.euiTheme.animation.normal || '0', 10), // @ts-expect-error The cubic-bezier options here are not recognized by the cytoscape types - easing: theme.eui.euiAnimSlightBounce, + easing: theme.euiTheme.animation.bounce, }); const zIndexNode = 200; @@ -90,14 +90,14 @@ const zIndexEdge = 100; const zIndexEdgeHighlight = 110; const zIndexEdgeHover = 120; -export const getNodeHeight = (theme: EuiTheme): number => parseInt(theme.eui.euiSizeXXL, 10); +export const getNodeHeight = (theme: UseEuiTheme): number => parseInt(theme.euiTheme.size.xxl, 10); function isService(el: cytoscape.NodeSingular) { return el.data(SERVICE_NAME) !== undefined; } -const getStyle = (theme: EuiTheme, isTraceExplorerEnabled: boolean): cytoscape.Stylesheet[] => { - const lineColor = theme.eui.euiColorMediumShade; +const getStyle = (theme: UseEuiTheme, isTraceExplorerEnabled: boolean): cytoscape.Stylesheet[] => { + const lineColor = theme.euiTheme.colors.mediumShade; return [ { selector: 'core', @@ -107,7 +107,7 @@ const getStyle = (theme: EuiTheme, isTraceExplorerEnabled: boolean): cytoscape.S { selector: 'node', style: { - 'background-color': theme.eui.euiColorGhost, + 'background-color': theme.euiTheme.colors.ghost, // The DefinitelyTyped definitions don't specify that a function can be // used here. 'background-image': (el: cytoscape.NodeSingular) => iconForNode(el), @@ -118,12 +118,12 @@ const getStyle = (theme: EuiTheme, isTraceExplorerEnabled: boolean): cytoscape.S 'border-width': getBorderWidth, color: (el: cytoscape.NodeSingular) => el.hasClass('primary') || el.selected() - ? theme.eui.euiColorPrimaryText - : theme.eui.euiTextColor, + ? theme.euiTheme.colors.textPrimary + : theme.euiTheme.colors.text, // theme.euiFontFamily doesn't work here for some reason, so we're just // specifying a subset of the fonts for the label text. 'font-family': 'Inter UI, Segoe UI, Helvetica, Arial, sans-serif', - 'font-size': theme.eui.euiFontSizeS, + 'font-size': theme.euiTheme.size.s, ghost: 'yes', 'ghost-offset-x': 0, 'ghost-offset-y': 2, @@ -133,20 +133,20 @@ const getStyle = (theme: EuiTheme, isTraceExplorerEnabled: boolean): cytoscape.S isService(el) ? el.data(SERVICE_NAME) : el.data('label') || el.data(SPAN_DESTINATION_SERVICE_RESOURCE), - 'min-zoomed-font-size': parseInt(theme.eui.euiSizeS, 10), + 'min-zoomed-font-size': parseInt(theme.euiTheme.size.s, 10), 'overlay-opacity': 0, shape: (el: cytoscape.NodeSingular) => isService(el) ? (isIE11 ? 'rectangle' : 'ellipse') : 'diamond', - 'text-background-color': theme.eui.euiColorPrimary, + 'text-background-color': theme.euiTheme.colors.primary, 'text-background-opacity': (el: cytoscape.NodeSingular) => el.hasClass('primary') || el.selected() ? 0.1 : 0, - 'text-background-padding': theme.eui.euiSizeXS, + 'text-background-padding': theme.euiTheme.size.xs, 'text-background-shape': 'roundrectangle', - 'text-margin-y': parseInt(theme.eui.euiSizeS, 10), + 'text-margin-y': parseInt(theme.euiTheme.size.s, 10), 'text-max-width': '200px', 'text-valign': 'bottom', 'text-wrap': 'ellipsis', - width: theme.eui.euiSizeXXL, + width: theme.euiTheme.size.xxl, 'z-index': zIndexNode, }, }, @@ -162,7 +162,7 @@ const getStyle = (theme: EuiTheme, isTraceExplorerEnabled: boolean): cytoscape.S // fairly new. // // @ts-expect-error - 'target-distance-from-node': isIE11 ? undefined : theme.eui.euiSizeXS, + 'target-distance-from-node': isIE11 ? undefined : theme.euiTheme.size.xs, width: 1, 'source-arrow-shape': 'none', 'z-index': zIndexEdge, @@ -175,8 +175,8 @@ const getStyle = (theme: EuiTheme, isTraceExplorerEnabled: boolean): cytoscape.S 'source-arrow-color': lineColor, 'target-arrow-shape': isIE11 ? 'none' : 'triangle', // @ts-expect-error - 'source-distance-from-node': isIE11 ? undefined : parseInt(theme.eui.euiSizeXS, 10), - 'target-distance-from-node': isIE11 ? undefined : parseInt(theme.eui.euiSizeXS, 10), + 'source-distance-from-node': isIE11 ? undefined : parseInt(theme.euiTheme.size.xs, 10), + 'target-distance-from-node': isIE11 ? undefined : parseInt(theme.euiTheme.size.xs, 10), }, }, { @@ -190,9 +190,9 @@ const getStyle = (theme: EuiTheme, isTraceExplorerEnabled: boolean): cytoscape.S style: { width: 4, 'z-index': zIndexEdgeHover, - 'line-color': theme.eui.euiColorDarkShade, - 'source-arrow-color': theme.eui.euiColorDarkShade, - 'target-arrow-color': theme.eui.euiColorDarkShade, + 'line-color': theme.euiTheme.colors.darkShade, + 'source-arrow-color': theme.euiTheme.colors.darkShade, + 'target-arrow-color': theme.euiTheme.colors.darkShade, }, }, ...(isTraceExplorerEnabled @@ -202,9 +202,9 @@ const getStyle = (theme: EuiTheme, isTraceExplorerEnabled: boolean): cytoscape.S style: { width: 4, 'z-index': zIndexEdgeHover, - 'line-color': theme.eui.euiColorDarkShade, - 'source-arrow-color': theme.eui.euiColorDarkShade, - 'target-arrow-color': theme.eui.euiColorDarkShade, + 'line-color': theme.euiTheme.colors.darkShade, + 'source-arrow-color': theme.euiTheme.colors.darkShade, + 'target-arrow-color': theme.euiTheme.colors.darkShade, }, }, ] @@ -219,9 +219,9 @@ const getStyle = (theme: EuiTheme, isTraceExplorerEnabled: boolean): cytoscape.S selector: 'edge.highlight', style: { width: 4, - 'line-color': theme.eui.euiColorPrimary, - 'source-arrow-color': theme.eui.euiColorPrimary, - 'target-arrow-color': theme.eui.euiColorPrimary, + 'line-color': theme.euiTheme.colors.primary, + 'source-arrow-color': theme.euiTheme.colors.primary, + 'target-arrow-color': theme.euiTheme.colors.primary, 'z-index': zIndexEdgeHighlight, }, }, @@ -230,28 +230,28 @@ const getStyle = (theme: EuiTheme, isTraceExplorerEnabled: boolean): cytoscape.S // The CSS styles for the div containing the cytoscape element. Makes a // background grid of dots. -export const getCytoscapeDivStyle = (theme: EuiTheme, status: FETCH_STATUS): CSSProperties => ({ +export const getCytoscapeDivStyle = (theme: UseEuiTheme, status: FETCH_STATUS): CSSProperties => ({ background: `linear-gradient( 90deg, - ${theme.eui.euiPageBackgroundColor} - calc(${theme.eui.euiSizeL} - calc(${theme.eui.euiSizeXS} / 2)), + ${theme.euiTheme.colors.body} + calc(${theme.euiTheme.size.l} - calc(${theme.euiTheme.size.xs} / 2)), transparent 1% ) center, linear-gradient( - ${theme.eui.euiPageBackgroundColor} - calc(${theme.eui.euiSizeL} - calc(${theme.eui.euiSizeXS} / 2)), + ${theme.euiTheme.colors.body} + calc(${theme.euiTheme.size.l} - calc(${theme.euiTheme.size.xs} / 2)), transparent 1% ) center, -${theme.eui.euiColorLightShade}`, - backgroundSize: `${theme.eui.euiSizeL} ${theme.eui.euiSizeL}`, +${theme.euiTheme.colors.body}`, + backgroundSize: `${theme.euiTheme.size.l} ${theme.euiTheme.size.l}`, cursor: `${status === FETCH_STATUS.LOADING ? 'wait' : 'grab'}`, marginTop: 0, }); export const getCytoscapeOptions = ( - theme: EuiTheme, + theme: UseEuiTheme, isTraceExplorerEnabled: boolean ): cytoscape.CytoscapeOptions => ({ boxSelectionEnabled: false, diff --git a/x-pack/plugins/observability_solution/apm/public/components/app/service_map/empty_banner.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/service_map/empty_banner.tsx index 7d419baecc9eb..963e422a3d030 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/app/service_map/empty_banner.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/app/service_map/empty_banner.tsx @@ -8,24 +8,22 @@ import React, { useContext, useEffect, useState } from 'react'; import { EuiCallOut, EuiLink } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +// import { euiStyled } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; import { CytoscapeContext } from './cytoscape'; import { useTheme } from '../../../hooks/use_theme'; import { useApmPluginContext } from '../../../context/apm_plugin/use_apm_plugin_context'; -const EmptyBannerContainer = euiStyled.div` - margin: ${({ theme }) => theme.eui.euiSizeS}; +const EmptyBannerContainer = styled.div` + margin: ${({ theme }) => theme.euiTheme.size.s}; /* Add some extra margin so it displays to the right of the controls. */ - left: calc( - ${({ theme }) => theme.eui.euiSizeXXL} + - ${({ theme }) => theme.eui.euiSizeS} - ); + left: calc(${({ theme }) => theme.euiTheme.size.xxl} + ${({ theme }) => theme.euiTheme.size.s}); position: absolute; z-index: 1; `; export function EmptyBanner() { - const theme = useTheme(); + const { euiTheme } = useTheme(); const cy = useContext(CytoscapeContext); const [nodeCount, setNodeCount] = useState(0); const { docLinks } = useApmPluginContext().core; @@ -51,7 +49,7 @@ export function EmptyBanner() { // Since we're absolutely positioned, we need to get the full width and // subtract the space for controls and margins. - const width = cy.width() - parseInt(theme.eui.euiSizeXXL, 10) - parseInt(theme.eui.euiSizeL, 10); + const width = cy.width() - parseInt(euiTheme.size.xxl, 10) - parseInt(euiTheme.size.l, 10); return ( diff --git a/x-pack/plugins/observability_solution/apm/public/components/app/service_map/index.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/service_map/index.tsx index 113be5407c070..7af82013525c9 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/app/service_map/index.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/app/service_map/index.tsx @@ -190,7 +190,6 @@ export function ServiceMap({ meta: { rangeFrom: start, rangeTo: end }, }); } - return ( <> diff --git a/x-pack/plugins/observability_solution/apm/public/components/app/service_map/popover/anomaly_detection.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/service_map/popover/anomaly_detection.tsx index 307887148e3e8..73de189ae12a6 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/app/service_map/popover/anomaly_detection.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/app/service_map/popover/anomaly_detection.tsx @@ -50,7 +50,7 @@ interface Props { serviceAnomalyStats: ServiceAnomalyStats | undefined; } export function AnomalyDetection({ serviceName, serviceAnomalyStats }: Props) { - const theme = useTheme(); + const { euiTheme } = useTheme(); const anomalyScore = serviceAnomalyStats?.anomalyScore; const severity = getSeverity(anomalyScore); @@ -76,7 +76,7 @@ export function AnomalyDetection({ serviceName, serviceAnomalyStats }: Props) { - + {ANOMALY_DETECTION_SCORE_METRIC} diff --git a/x-pack/plugins/observability_solution/apm/public/components/app/service_map/use_cytoscape_event_handlers.test.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/service_map/use_cytoscape_event_handlers.test.tsx index 31604d8934019..5e08a19d80244 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/app/service_map/use_cytoscape_event_handlers.test.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/app/service_map/use_cytoscape_event_handlers.test.tsx @@ -8,18 +8,18 @@ import { renderHook } from '@testing-library/react'; import cytoscape from 'cytoscape'; import dagre from 'cytoscape-dagre'; -import { EuiTheme } from '@kbn/kibana-react-plugin/common'; import { useUiTracker } from '@kbn/observability-shared-plugin/public'; import { useCytoscapeEventHandlers } from './use_cytoscape_event_handlers'; import lodash from 'lodash'; +import { UseEuiTheme } from '@elastic/eui'; jest.mock('@kbn/observability-shared-plugin/public'); cytoscape.use(dagre); const theme = { - eui: { avatarSizing: { l: { size: 10 } } }, -} as unknown as EuiTheme; + euiTheme: { size: { l: { size: 10 } } }, +} as unknown as UseEuiTheme; describe('useCytoscapeEventHandlers', () => { describe('when cytoscape is undefined', () => { diff --git a/x-pack/plugins/observability_solution/apm/public/components/app/service_map/use_cytoscape_event_handlers.ts b/x-pack/plugins/observability_solution/apm/public/components/app/service_map/use_cytoscape_event_handlers.ts index e40ee3e80eaaa..e98d0305fea8b 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/app/service_map/use_cytoscape_event_handlers.ts +++ b/x-pack/plugins/observability_solution/apm/public/components/app/service_map/use_cytoscape_event_handlers.ts @@ -8,8 +8,8 @@ import cytoscape from 'cytoscape'; import { debounce } from 'lodash'; import { useEffect } from 'react'; -import { EuiTheme } from '@kbn/kibana-react-plugin/common'; import { useUiTracker } from '@kbn/observability-shared-plugin/public'; +import { UseEuiTheme } from '@elastic/eui'; import { getAnimationOptions, getNodeHeight } from './cytoscape_options'; /* @@ -43,7 +43,7 @@ function getLayoutOptions({ }: { fit?: boolean; nodeHeight: number; - theme: EuiTheme; + theme: UseEuiTheme; }): cytoscape.LayoutOptions { const animationOptions = getAnimationOptions(theme); @@ -86,7 +86,7 @@ export function useCytoscapeEventHandlers({ }: { cy?: cytoscape.Core; serviceName?: string; - theme: EuiTheme; + theme: UseEuiTheme; }) { const trackApmEvent = useUiTracker({ app: 'apm' }); diff --git a/x-pack/plugins/observability_solution/apm/public/components/app/service_overview/service_overview_instances_table/intance_details.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/service_overview/service_overview_instances_table/intance_details.tsx index f2682b2cce2d0..94d5ca7051d26 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/app/service_overview/service_overview_instances_table/intance_details.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/app/service_overview/service_overview_instances_table/intance_details.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import { EuiFlexGroup, EuiFlexItem, EuiSkeletonText } from '@elastic/eui'; +import { COLOR_MODES_STANDARD, EuiFlexGroup, EuiFlexItem, EuiSkeletonText } from '@elastic/eui'; import { CloudProvider, getAgentIcon, getCloudProviderIcon } from '@kbn/custom-icons'; import { i18n } from '@kbn/i18n'; import { get } from 'lodash'; @@ -140,7 +140,7 @@ export function InstanceDetails({ serviceName, serviceNodeName, kuery }: Props) title={i18n.translate('xpack.apm.serviceOverview.instanceTable.details.serviceTitle', { defaultMessage: 'Service', })} - icon={getAgentIcon(data.agent?.name, theme.darkMode)} + icon={getAgentIcon(data.agent?.name, theme.colorMode === COLOR_MODES_STANDARD.dark)} keyValueList={serviceDetailsKeyValuePairs} onClickFilter={addKueryBarFilter} /> diff --git a/x-pack/plugins/observability_solution/apm/public/components/app/settings/agent_configurations/list/index.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/settings/agent_configurations/list/index.tsx index ae36d8b0434d7..bb92eb5debb5f 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/app/settings/agent_configurations/list/index.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/app/settings/agent_configurations/list/index.tsx @@ -40,7 +40,7 @@ interface Props { export function AgentConfigurationList({ status, configurations, refetch }: Props) { const { core } = useApmPluginContext(); const canSave = core.application.capabilities.apm['settings:save']; - const theme = useTheme(); + const { euiTheme } = useTheme(); const [configToBeDeleted, setConfigToBeDeleted] = useState(null); const apmRouter = useApmRouter(); @@ -110,7 +110,7 @@ export function AgentConfigurationList({ status, configurations, refetch }: Prop { field: 'applied_by_agent', align: 'center', - width: theme.eui.euiSizeXL, + width: euiTheme.size.xl, name: '', sortable: true, render: (_, { applied_by_agent: appliedByAgent }) => ( @@ -125,7 +125,7 @@ export function AgentConfigurationList({ status, configurations, refetch }: Prop }) } > - + ), }, @@ -172,12 +172,14 @@ export function AgentConfigurationList({ status, configurations, refetch }: Prop ...(canSave ? [ { - width: theme.eui.euiSizeXL, + width: euiTheme.size.xl, name: '', render: (config: Config) => ( ( setConfigToBeDeleted(config)} /> diff --git a/x-pack/plugins/observability_solution/apm/public/components/app/settings/custom_link/create_edit_custom_link_flyout/delete_button.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/settings/custom_link/create_edit_custom_link_flyout/delete_button.tsx index 02ef3b97222b0..0b608b07cdb65 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/app/settings/custom_link/create_edit_custom_link_flyout/delete_button.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/app/settings/custom_link/create_edit_custom_link_flyout/delete_button.tsx @@ -21,7 +21,7 @@ interface Props { export function DeleteButton({ onDelete, customLinkId }: Props) { const [isDeleting, setIsDeleting] = useState(false); const { toasts } = useApmPluginContext().core.notifications; - const theme = useTheme(); + const { euiTheme } = useTheme(); return ( {i18n.translate('xpack.apm.settings.customLink.delete', { defaultMessage: 'Delete', diff --git a/x-pack/plugins/observability_solution/apm/public/components/app/storage_explorer/summary_stats.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/storage_explorer/summary_stats.tsx index bd76025d96062..30053480eb4e6 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/app/storage_explorer/summary_stats.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/app/storage_explorer/summary_stats.tsx @@ -204,7 +204,7 @@ function SummaryMetric({ css={css` ${xlFontSize} font-weight: ${euiTheme.font.weight.bold}; - color: ${euiTheme.colors.text}; + color: ${euiTheme.colors.textParagraph}; `} > {value} diff --git a/x-pack/plugins/observability_solution/apm/public/components/app/transaction_details/distribution/use_transaction_distribution_chart_data.ts b/x-pack/plugins/observability_solution/apm/public/components/app/transaction_details/distribution/use_transaction_distribution_chart_data.ts index 66f346f36a5fe..64a70794ee513 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/app/transaction_details/distribution/use_transaction_distribution_chart_data.ts +++ b/x-pack/plugins/observability_solution/apm/public/components/app/transaction_details/distribution/use_transaction_distribution_chart_data.ts @@ -20,7 +20,7 @@ import { useTheme } from '../../../../hooks/use_theme'; export const useTransactionDistributionChartData = () => { const params = useFetchParams(); - const euiTheme = useTheme(); + const { euiTheme } = useTheme(); const { core: { notifications }, diff --git a/x-pack/plugins/observability_solution/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/accordion_waterfall.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/accordion_waterfall.tsx index a6520f964c7b8..854120ff2dd88 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/accordion_waterfall.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/accordion_waterfall.tsx @@ -176,7 +176,7 @@ const VirtualRow = React.memo( ); const WaterfallNode = React.memo((props: WaterfallNodeProps) => { - const theme = useTheme(); + const { euiTheme } = useTheme(); const { duration, waterfallItemId, onClickWaterfallItem, timelineMargins, node } = props; const { criticalPathSegmentsById, getErrorCount, updateTreeNode, showCriticalPath } = useWaterfallContext(); @@ -190,7 +190,7 @@ const WaterfallNode = React.memo((props: WaterfallNodeProps) => { ?.filter((segment) => segment.self) .map((segment) => ({ id: segment.item.id, - color: theme.eui.euiColorAccent, + color: euiTheme.colors.accent, left: (segment.offset - node.item.offset - node.item.skew) / node.item.duration, width: segment.duration / node.item.duration, })); diff --git a/x-pack/plugins/observability_solution/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/failure_badge.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/failure_badge.tsx index 29dd5ffde6547..71ba5e2631957 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/failure_badge.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/failure_badge.tsx @@ -17,7 +17,7 @@ const ResetLineHeight = euiStyled.span` `; export function FailureBadge({ outcome }: { outcome?: EventOutcome }) { - const theme = useTheme(); + const { euiTheme } = useTheme(); if (outcome !== 'failure') { return null; @@ -30,7 +30,11 @@ export function FailureBadge({ outcome }: { outcome?: EventOutcome }) { defaultMessage: 'event.outcome = failure', })} > - failure + + {i18n.translate('xpack.apm.failureBadge.failureBadgeLabel', { + defaultMessage: 'failure', + })} + ); diff --git a/x-pack/plugins/observability_solution/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/index.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/index.tsx index dbdc877742e1c..16351b11bc5a0 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/index.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/index.tsx @@ -90,7 +90,7 @@ const MAX_DEPTH_OPEN_LIMIT = 2; export function Waterfall({ waterfall, waterfallItemId, showCriticalPath }: Props) { const history = useHistory(); - const theme = useTheme(); + const { euiTheme } = useTheme(); const [isAccordionOpen, setIsAccordionOpen] = useState(true); const { duration } = waterfall; @@ -134,16 +134,16 @@ export function Waterfall({ waterfall, waterfallItemId, showCriticalPath }: Prop display: flex; position: sticky; top: var(--euiFixedHeadersOffset, 0); - z-index: ${theme.eui.euiZLevel2}; - background-color: ${theme.eui.euiColorEmptyShade}; - border-bottom: 1px solid ${theme.eui.euiColorMediumShade}; + z-index: ${euiTheme.levels.menu}; + background-color: ${euiTheme.colors.mediumShade}; + border-bottom: 1px solid ${euiTheme.colors.mediumShade}; `} > { diff --git a/x-pack/plugins/observability_solution/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/waterfall_item.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/waterfall_item.tsx index 11d0f9bba9298..038e7aa4b50c8 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/waterfall_item.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/waterfall_item.tsx @@ -311,7 +311,7 @@ function RelatedErrors({ errorCount: number; }) { const apmRouter = useApmRouter(); - const theme = useTheme(); + const { euiTheme } = useTheme(); const { query } = useAnyOfApmParams( '/services/{serviceName}/transactions/view', '/mobile-services/{serviceName}/transactions/view', @@ -348,7 +348,7 @@ function RelatedErrors({
e.stopPropagation()}> {i18n.translate('xpack.apm.waterfall.errorCount', { diff --git a/x-pack/plugins/observability_solution/apm/public/components/routing/app_root/apm_header_action_menu/anomaly_detection_setup_link.tsx b/x-pack/plugins/observability_solution/apm/public/components/routing/app_root/apm_header_action_menu/anomaly_detection_setup_link.tsx index 8d7091e17a4ac..b55d662af6cfd 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/routing/app_root/apm_header_action_menu/anomaly_detection_setup_link.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/routing/app_root/apm_header_action_menu/anomaly_detection_setup_link.tsx @@ -29,7 +29,7 @@ export function AnomalyDetectionSetupLink() { const { core } = useApmPluginContext(); const { basePath } = core.http; - const theme = useTheme(); + const { euiTheme } = useTheme(); const { anomalyDetectionSetupState } = useAnomalyDetectionJobsContext(); @@ -74,7 +74,7 @@ export function AnomalyDetectionSetupLink() { data-test-subj="apmAnomalyDetectionHeaderLink" > {pre} - {ANOMALY_DETECTION_LINK_LABEL} + {ANOMALY_DETECTION_LINK_LABEL} ); diff --git a/x-pack/plugins/observability_solution/apm/public/components/shared/charts/breakdown_chart/index.tsx b/x-pack/plugins/observability_solution/apm/public/components/shared/charts/breakdown_chart/index.tsx index 8103f729f375a..3a45bcf9c9f6e 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/shared/charts/breakdown_chart/index.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/shared/charts/breakdown_chart/index.tsx @@ -74,7 +74,7 @@ export function BreakdownChart({ const { query: { rangeFrom, rangeTo }, } = useAnyOfApmParams('/services/{serviceName}', '/mobile-services/{serviceName}'); - const theme = useTheme(); + const { euiTheme } = useTheme(); const { start, end } = useTimeRange({ rangeFrom, rangeTo }); const min = moment.utc(start).valueOf(); @@ -82,7 +82,7 @@ export function BreakdownChart({ const xFormatter = niceTimeFormatter([min, max]); - const annotationColor = theme.eui.euiColorSuccess; + const annotationColor = euiTheme.colors.success; const isEmpty = isTimeseriesEmpty(timeseries); diff --git a/x-pack/plugins/observability_solution/apm/public/components/shared/charts/duration_distribution_chart/index.tsx b/x-pack/plugins/observability_solution/apm/public/components/shared/charts/duration_distribution_chart/index.tsx index 1a88bf8b48c0b..b37a73b83460f 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/shared/charts/duration_distribution_chart/index.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/shared/charts/duration_distribution_chart/index.tsx @@ -109,7 +109,7 @@ export function DurationDistributionChart({ eventType, }: DurationDistributionChartProps) { const chartThemes = useChartThemes(); - const euiTheme = useTheme(); + const { euiTheme } = useTheme(); const markerPercentile = DEFAULT_PERCENTILE_THRESHOLD; const annotationsDataValues: LineAnnotationDatum[] = [ @@ -188,7 +188,7 @@ export function DurationDistributionChart({ }, tickLabel: { fontSize: 10, - fill: euiTheme.eui.euiColorMediumShade, + fill: euiTheme.colors.mediumShade, padding: 0, }, }, @@ -207,8 +207,8 @@ export function DurationDistributionChart({ id="rect_annotation_1" style={{ strokeWidth: 1, - stroke: euiTheme.eui.euiColorLightShade, - fill: euiTheme.eui.euiColorLightShade, + stroke: euiTheme.colors.lightShade, + fill: euiTheme.colors.lightShade, opacity: 0.9, }} hideTooltips={true} diff --git a/x-pack/plugins/observability_solution/apm/public/components/shared/charts/helper/get_chart_anomaly_timeseries.tsx b/x-pack/plugins/observability_solution/apm/public/components/shared/charts/helper/get_chart_anomaly_timeseries.tsx index 56b61cb02d8b9..70eb6bb599f6c 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/shared/charts/helper/get_chart_anomaly_timeseries.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/shared/charts/helper/get_chart_anomaly_timeseries.tsx @@ -7,11 +7,11 @@ import { i18n } from '@kbn/i18n'; import { rgba } from 'polished'; -import { EuiTheme } from '@kbn/kibana-react-plugin/common'; import { getSeverity } from '@kbn/ml-anomaly-utils/get_severity'; import { ML_ANOMALY_SEVERITY } from '@kbn/ml-anomaly-utils/anomaly_severity'; import { ML_ANOMALY_THRESHOLD } from '@kbn/ml-anomaly-utils/anomaly_threshold'; import type { AreaSeriesStyle, RecursivePartial } from '@elastic/charts'; +import { UseEuiTheme } from '@elastic/eui'; import { getSeverityColor } from '../../../../../common/anomaly_detection'; import { ServiceAnomalyTimeseries } from '../../../../../common/anomaly_detection/service_anomaly_timeseries'; import { APMChartSpec } from '../../../../../typings/timeseries'; @@ -25,7 +25,7 @@ export function getChartAnomalyTimeseries({ anomalyTimeseriesColor, }: { anomalyTimeseries?: ServiceAnomalyTimeseries; - theme: EuiTheme; + theme: UseEuiTheme; anomalyTimeseriesColor?: string; }): | { @@ -48,7 +48,7 @@ export function getChartAnomalyTimeseries({ opacity: 0, }, }, - color: anomalyTimeseriesColor ?? rgba(theme.eui.euiColorVis1, 0.5), + color: anomalyTimeseriesColor ?? rgba(theme.euiTheme.colors.vis.euiColorVis1, 0.5), yAccessors: ['y1'], y0Accessors: ['y0'], data: anomalyTimeseries.bounds, diff --git a/x-pack/plugins/observability_solution/apm/public/components/shared/charts/instances_latency_distribution_chart/custom_tooltip.tsx b/x-pack/plugins/observability_solution/apm/public/components/shared/charts/instances_latency_distribution_chart/custom_tooltip.tsx index f12f367eab8e9..ef4b3b0994d54 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/shared/charts/instances_latency_distribution_chart/custom_tooltip.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/shared/charts/instances_latency_distribution_chart/custom_tooltip.tsx @@ -92,7 +92,7 @@ function MultipleInstanceCustomTooltip({ latencyFormatter, values, }: TooltipInfo & { latencyFormatter: TimeFormatter }) { - const theme = useTheme(); + const { euiTheme } = useTheme(); return ( <> @@ -127,10 +127,7 @@ function MultipleInstanceCustomTooltip({ >
-
+
{latencyLabel} {latencyFormatter(latency).formatted}
@@ -142,10 +139,7 @@ function MultipleInstanceCustomTooltip({ >
-
+
{throughputLabel} {asTransactionRate(throughput)}
@@ -166,7 +160,7 @@ function MultipleInstanceCustomTooltip({ */ export function CustomTooltip(props: TooltipInfo & { latencyFormatter: TimeFormatter }) { const { values } = props; - const theme = useTheme(); + const { euiTheme } = useTheme(); return (
@@ -175,7 +169,7 @@ export function CustomTooltip(props: TooltipInfo & { latencyFormatter: TimeForma ) : ( )} -
+
{clickToFilterDescription}
diff --git a/x-pack/plugins/observability_solution/apm/public/components/shared/charts/instances_latency_distribution_chart/index.tsx b/x-pack/plugins/observability_solution/apm/public/components/shared/charts/instances_latency_distribution_chart/index.tsx index fec3fc4cfe2dd..d7e03010a3c2e 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/shared/charts/instances_latency_distribution_chart/index.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/shared/charts/instances_latency_distribution_chart/index.tsx @@ -130,7 +130,7 @@ export function InstancesLatencyDistributionChart({ locale={i18n.getLocale()} /> @@ -156,13 +156,13 @@ export function InstancesLatencyDistributionChart({ xScaleType={ScaleType.Linear} yAccessors={[(item) => item.latency]} yScaleType={ScaleType.Linear} - color={theme.eui.euiColorMediumShade} + color={theme.euiTheme.colors.mediumShade} bubbleSeriesStyle={{ point: { shape: 'square', radius: 4, - fill: theme.eui.euiColorLightestShade, - stroke: theme.eui.euiColorMediumShade, + fill: theme.euiTheme.colors.lightestShade, + stroke: theme.euiTheme.colors.mediumShade, strokeWidth: 2, }, }} diff --git a/x-pack/plugins/observability_solution/apm/public/components/shared/charts/spark_plot/index.tsx b/x-pack/plugins/observability_solution/apm/public/components/shared/charts/spark_plot/index.tsx index 84e2e6cb056d0..9ac1710d68874 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/shared/charts/spark_plot/index.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/shared/charts/spark_plot/index.tsx @@ -93,7 +93,7 @@ export function SparkPlotItem({ comparisonSeries?: Coordinate[]; comparisonSeriesColor?: string; }) { - const theme = useTheme(); + const { euiTheme } = useTheme(); const defaultChartThemes = useChartThemes(); const comparisonChartTheme = getComparisonChartTheme(); const hasComparisonSeries = !!comparisonSeries?.length; @@ -110,7 +110,7 @@ export function SparkPlotItem({ }; const chartSize = { - height: theme.eui.euiSizeL, + height: euiTheme.size.l, width: compact ? unit * 4 : unit * 5, }; @@ -201,7 +201,7 @@ export function SparkPlotItem({ justifyContent: 'center', }} > - +
); } diff --git a/x-pack/plugins/observability_solution/apm/public/components/shared/charts/timeline/legend.tsx b/x-pack/plugins/observability_solution/apm/public/components/shared/charts/timeline/legend.tsx index 131d82f4cb428..8b349525a0d2b 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/shared/charts/timeline/legend.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/shared/charts/timeline/legend.tsx @@ -69,7 +69,7 @@ export function Legend({ ...rest }: Props) { const theme = useTheme(); - const indicatorColor = color || theme.eui.euiColorVis1; + const indicatorColor = color || theme.euiTheme.colors.vis.euiColorVis1; return ( @@ -42,7 +42,7 @@ export function AgentMarker({ mark }: Props) {
} > - + ); diff --git a/x-pack/plugins/observability_solution/apm/public/components/shared/charts/timeline/marker/error_marker.tsx b/x-pack/plugins/observability_solution/apm/public/components/shared/charts/timeline/marker/error_marker.tsx index faff0a073fe6b..fc547b7a56ef7 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/shared/charts/timeline/marker/error_marker.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/shared/charts/timeline/marker/error_marker.tsx @@ -51,7 +51,7 @@ function truncateMessage(errorMessage?: string) { } export function ErrorMarker({ mark }: Props) { - const theme = useTheme(); + const { euiTheme } = useTheme(); const { urlParams } = useLegacyUrlParams(); const [isPopoverOpen, showPopover] = useState(false); @@ -61,7 +61,7 @@ export function ErrorMarker({ mark }: Props) {
} + indicator={
@
} /> {label} @@ -76,7 +76,7 @@ export function TimelineAxis({ plotValues, marks = [], topTraceDuration }: Timel key="topTrace" x={topTraceDurationPosition} y={0} - fill={theme.eui.euiTextColor} + fill={euiTheme.colors.textParagraph} textAnchor="middle" > {tickFormatter(topTraceDuration).formatted} diff --git a/x-pack/plugins/observability_solution/apm/public/components/shared/charts/timeline/vertical_lines.tsx b/x-pack/plugins/observability_solution/apm/public/components/shared/charts/timeline/vertical_lines.tsx index 96ab6a51e49f3..dc1a9bae4b23e 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/shared/charts/timeline/vertical_lines.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/shared/charts/timeline/vertical_lines.tsx @@ -21,7 +21,7 @@ export function VerticalLines({ topTraceDuration, plotValues, marks = [] }: Vert const markTimes = marks.filter((mark) => mark.verticalLine).map(({ offset }) => offset); - const theme = useTheme(); + const { euiTheme } = useTheme(); const tickPositions = tickValues.reduce((positions, tick) => { const position = xScale(tick); @@ -53,7 +53,7 @@ export function VerticalLines({ topTraceDuration, plotValues, marks = [] }: Vert x2={position} y1={0} y2="100%" - stroke={theme.eui.euiColorLightestShade} + stroke={euiTheme.colors.lightestShade} /> ))} {markPositions.map((position) => ( @@ -63,7 +63,7 @@ export function VerticalLines({ topTraceDuration, plotValues, marks = [] }: Vert x2={position} y1={0} y2="100%" - stroke={theme.eui.euiColorMediumShade} + stroke={euiTheme.colors.mediumShade} /> ))} {Number.isFinite(topTraceDurationPosition) && ( @@ -73,7 +73,7 @@ export function VerticalLines({ topTraceDuration, plotValues, marks = [] }: Vert x2={topTraceDurationPosition} y1={0} y2="100%" - stroke={theme.eui.euiColorMediumShade} + stroke={euiTheme.colors.mediumShade} /> )} diff --git a/x-pack/plugins/observability_solution/apm/public/components/shared/charts/timeseries_chart.tsx b/x-pack/plugins/observability_solution/apm/public/components/shared/charts/timeseries_chart.tsx index 7b90aeb3ee03c..e7c2fdee56d41 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/shared/charts/timeseries_chart.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/shared/charts/timeseries_chart.tsx @@ -25,7 +25,7 @@ import { Tooltip, SettingsSpec, } from '@elastic/charts'; -import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiSpacer } from '@elastic/eui'; +import { COLOR_MODES_STANDARD, EuiFlexGroup, EuiFlexItem, EuiIcon, EuiSpacer } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import React, { ReactElement } from 'react'; import { useHistory } from 'react-router-dom'; @@ -115,12 +115,15 @@ export function TimeseriesChart({ } : undefined; - const endZoneColor = theme.darkMode ? theme.eui.euiColorLightShade : theme.eui.euiColorDarkShade; + const endZoneColor = + theme.colorMode === COLOR_MODES_STANDARD.light + ? theme.euiTheme.colors.lightShade + : theme.euiTheme.colors.darkShade; const endZoneRectAnnotationStyle: Partial = { stroke: endZoneColor, fill: endZoneColor, strokeWidth: 0, - opacity: theme.darkMode ? 0.6 : 0.2, + opacity: theme.colorMode === COLOR_MODES_STANDARD.dark ? 0.6 : 0.2, }; function getChartType(type: string) { diff --git a/x-pack/plugins/observability_solution/apm/public/components/shared/charts/timeseries_chart_with_context.tsx b/x-pack/plugins/observability_solution/apm/public/components/shared/charts/timeseries_chart_with_context.tsx index e9ec46610fe25..6b9381cda5f00 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/shared/charts/timeseries_chart_with_context.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/shared/charts/timeseries_chart_with_context.tsx @@ -69,8 +69,8 @@ export function TimeseriesChartWithContext({ } = useAnyOfApmParams('/services', '/dependencies/*', '/services/{serviceName}'); const { core } = useApmPluginContext(); const timeZone = getTimeZone(core.uiSettings); - const theme = useTheme(); - const annotationColor = theme.eui.euiColorSuccess; + const { euiTheme } = useTheme(); + const annotationColor = euiTheme.colors.success; const { annotations } = useAnnotationsContext(); const timeseriesAnnotations = [ diff --git a/x-pack/plugins/observability_solution/apm/public/components/shared/charts/transaction_coldstart_rate_chart/index.tsx b/x-pack/plugins/observability_solution/apm/public/components/shared/charts/transaction_coldstart_rate_chart/index.tsx index ffce66c797cb0..03676f11904b2 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/shared/charts/transaction_coldstart_rate_chart/index.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/shared/charts/transaction_coldstart_rate_chart/index.tsx @@ -57,7 +57,7 @@ export function TransactionColdstartRateChart({ comparisonEnabled, offset, }: Props) { - const theme = useTheme(); + const { euiTheme } = useTheme(); const { query: { rangeFrom, rangeTo }, @@ -117,7 +117,7 @@ export function TransactionColdstartRateChart({ { data: data?.currentPeriod?.transactionColdstartRate ?? [], type: 'linemark', - color: theme.eui.euiColorVis5, + color: euiTheme.colors.vis.euiColorVis5, title: i18n.translate('xpack.apm.coldstartRate.chart.coldstartRate', { defaultMessage: 'Cold start rate (avg.)', }), @@ -127,7 +127,7 @@ export function TransactionColdstartRateChart({ { data: data?.previousPeriod?.transactionColdstartRate ?? [], type: 'area', - color: theme.eui.euiColorMediumShade, + color: euiTheme.colors.mediumShade, title: previousPeriodLabel, }, ] diff --git a/x-pack/plugins/observability_solution/apm/public/components/shared/service_icons/index.tsx b/x-pack/plugins/observability_solution/apm/public/components/shared/service_icons/index.tsx index e6780927e755b..57776a5c7de87 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/shared/service_icons/index.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/shared/service_icons/index.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import { EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner } from '@elastic/eui'; +import { COLOR_MODES_STANDARD, EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { CloudProvider, @@ -122,7 +122,8 @@ export function ServiceIcons({ start, end, serviceName, environment }: Props) { { key: 'service', icon: { - type: getAgentIcon(icons?.agentName, theme.darkMode) || 'node', + type: + getAgentIcon(icons?.agentName, theme.colorMode === COLOR_MODES_STANDARD.dark) || 'node', }, isVisible: !!icons?.agentName, title: i18n.translate('xpack.apm.serviceIcons.service', { @@ -133,7 +134,7 @@ export function ServiceIcons({ start, end, serviceName, environment }: Props) { { key: 'opentelemetry', icon: { - type: getAgentIcon('opentelemetry', theme.darkMode), + type: getAgentIcon('opentelemetry', theme.colorMode === COLOR_MODES_STANDARD.dark), }, isVisible: !!icons?.agentName && isOpenTelemetryAgentName(icons.agentName), title: i18n.translate('xpack.apm.serviceIcons.opentelemetry', { diff --git a/x-pack/plugins/observability_solution/apm/public/components/shared/summary/error_count_summary_item_badge.tsx b/x-pack/plugins/observability_solution/apm/public/components/shared/summary/error_count_summary_item_badge.tsx index 9de373d2189e2..b1ca26b406af0 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/shared/summary/error_count_summary_item_badge.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/shared/summary/error_count_summary_item_badge.tsx @@ -15,10 +15,10 @@ interface Props { } export function ErrorCountSummaryItemBadge({ count }: Props) { - const theme = useTheme(); + const { euiTheme } = useTheme(); return ( - + {i18n.translate('xpack.apm.transactionDetails.errorCount', { defaultMessage: '{errorCount, number} {errorCount, plural, one {Error} other {Errors}}', values: { errorCount: count }, diff --git a/x-pack/plugins/observability_solution/apm/public/hooks/use_theme.tsx b/x-pack/plugins/observability_solution/apm/public/hooks/use_theme.tsx index 8c18ac38efc33..7567cd8b7b919 100644 --- a/x-pack/plugins/observability_solution/apm/public/hooks/use_theme.tsx +++ b/x-pack/plugins/observability_solution/apm/public/hooks/use_theme.tsx @@ -5,11 +5,9 @@ * 2.0. */ -import { useContext } from 'react'; -import { ThemeContext } from 'styled-components'; -import { EuiTheme } from '@kbn/kibana-react-plugin/common'; +import { useEuiTheme, UseEuiTheme } from '@elastic/eui'; -export function useTheme(): EuiTheme { - const theme = useContext(ThemeContext); +export function useTheme(): UseEuiTheme { + const theme = useEuiTheme(); return theme; } diff --git a/x-pack/plugins/observability_solution/infra/public/components/autocomplete_field/suggestion_item.tsx b/x-pack/plugins/observability_solution/infra/public/components/autocomplete_field/suggestion_item.tsx index 486d41d2c9c93..4debb4341f19e 100644 --- a/x-pack/plugins/observability_solution/infra/public/components/autocomplete_field/suggestion_item.tsx +++ b/x-pack/plugins/observability_solution/infra/public/components/autocomplete_field/suggestion_item.tsx @@ -6,9 +6,8 @@ */ import React from 'react'; -import { EuiIcon, useEuiFontSize } from '@elastic/eui'; +import { EuiIcon, EuiThemeComputed, useEuiTheme, useEuiFontSize } from '@elastic/eui'; import styled from '@emotion/styled'; -import type { Theme } from '@emotion/react'; import { QuerySuggestion, QuerySuggestionTypes } from '@kbn/unified-search-plugin/public'; import { transparentize } from 'polished'; @@ -21,10 +20,10 @@ interface Props { export const SuggestionItem: React.FC = (props) => { const { isSelected, onClick, onMouseEnter, suggestion } = props; - + const { euiTheme } = useEuiTheme(); return ( - + {suggestion.text} @@ -60,10 +59,11 @@ const SuggestionItemField = styled.div` const SuggestionItemIconField = styled(SuggestionItemField)<{ suggestionType: QuerySuggestionTypes; + euiTheme: EuiThemeComputed; }>` - background-color: ${({ theme, suggestionType }) => - transparentize(0.9, getEuiIconColor(theme, suggestionType))}; - color: ${({ theme, suggestionType }) => getEuiIconColor(theme, suggestionType)}; + background-color: ${(props) => + transparentize(0.9, getEuiIconColor(props.euiTheme, props.suggestionType))}; + color: ${(props) => getEuiIconColor(props.euiTheme, props.suggestionType)}; flex: 0 0 auto; justify-content: center; width: ${({ theme }) => theme.euiTheme.size.xl}; @@ -103,18 +103,21 @@ const getEuiIconType = (suggestionType: QuerySuggestionTypes) => { } }; -const getEuiIconColor = (theme: Theme, suggestionType: QuerySuggestionTypes): string => { +const getEuiIconColor = ( + euiTheme: EuiThemeComputed, + suggestionType: QuerySuggestionTypes +): string => { switch (suggestionType) { case QuerySuggestionTypes.Field: - return theme?.euiTheme.colors.vis.euiColorVis7; + return euiTheme.colors.vis.euiColorVis7; case QuerySuggestionTypes.Value: - return theme?.euiTheme.colors.vis.euiColorVis0; + return euiTheme.colors.vis.euiColorVis0; case QuerySuggestionTypes.Operator: - return theme?.euiTheme.colors.vis.euiColorVis1; + return euiTheme.colors.vis.euiColorVis1; case QuerySuggestionTypes.Conjunction: - return theme?.euiTheme.colors.vis.euiColorVis2; + return euiTheme.colors.vis.euiColorVis2; case QuerySuggestionTypes.RecentSearch: default: - return theme?.euiTheme.colors.mediumShade; + return euiTheme.colors.mediumShade; } }; diff --git a/x-pack/plugins/observability_solution/observability_shared/public/components/field_value_suggestions/field_value_selection.tsx b/x-pack/plugins/observability_solution/observability_shared/public/components/field_value_suggestions/field_value_selection.tsx index aebb3a145371e..6151bcd137d94 100644 --- a/x-pack/plugins/observability_solution/observability_shared/public/components/field_value_suggestions/field_value_selection.tsx +++ b/x-pack/plugins/observability_solution/observability_shared/public/components/field_value_suggestions/field_value_selection.tsx @@ -221,7 +221,7 @@ export function FieldValueSelection({ css={{ flexDirection: 'row-reverse', gap: euiTheme.size.s, - color: euiTheme.colors.subduedText, + color: euiTheme.colors.textSubdued, }} label={i18n.translate( 'xpack.observabilityShared.fieldValueSelection.logicalAnd', diff --git a/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/common/monitor_test_result/status_badge.tsx b/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/common/monitor_test_result/status_badge.tsx index dd72eac40afc3..d0ac65e54d7ce 100644 --- a/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/common/monitor_test_result/status_badge.tsx +++ b/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/common/monitor_test_result/status_badge.tsx @@ -47,7 +47,7 @@ export const getBadgeColorForMonitorStatus = (status: MonitorStatus): IconColor export const getTextColorForMonitorStatus = ( status: MonitorStatus ): keyof EuiThemeComputed['colors'] => { - return status === 'skipped' ? 'disabledText' : 'text'; + return status === 'skipped' ? 'textDisabled' : 'textParagraph'; }; export const COMPLETE_LABEL = i18n.translate('xpack.synthetics.monitorStatus.complete', { diff --git a/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/common/screenshot/empty_thumbnail.tsx b/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/common/screenshot/empty_thumbnail.tsx index 45e1e780d1e31..0597b96353e59 100644 --- a/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/common/screenshot/empty_thumbnail.tsx +++ b/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/common/screenshot/empty_thumbnail.tsx @@ -103,11 +103,11 @@ export const EmptyThumbnail = ({ {unavailableMessage ? ( - {unavailableMessage} + {unavailableMessage} ) : null}
)} diff --git a/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/common/screenshot/journey_screenshot_dialog.tsx b/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/common/screenshot/journey_screenshot_dialog.tsx index b608c694189bc..6c8644bec96c2 100644 --- a/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/common/screenshot/journey_screenshot_dialog.tsx +++ b/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/common/screenshot/journey_screenshot_dialog.tsx @@ -201,7 +201,7 @@ export const JourneyScreenshotDialog = ({ { <> - + {labels.BRUSH_AREA_MESSAGE} diff --git a/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/step_details_page/step_waterfall_chart/waterfall/waterfall_header/waterfall_tick_axis.tsx b/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/step_details_page/step_waterfall_chart/waterfall/waterfall_header/waterfall_tick_axis.tsx index 197dcdb4da1bb..f0025931b6f76 100644 --- a/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/step_details_page/step_waterfall_chart/waterfall/waterfall_header/waterfall_tick_axis.tsx +++ b/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/step_details_page/step_waterfall_chart/waterfall/waterfall_header/waterfall_tick_axis.tsx @@ -61,7 +61,7 @@ export const WaterfallTickAxis = ({ marginBottom: euiTheme.size.s, whiteSpace: 'nowrap', cursor: 'pointer', - color: euiTheme.colors.primaryText, + color: euiTheme.colors.textPrimary, }} onClick={() => { setOnlyHighlighted(!showOnlyHighlightedNetworkRequests);