From 145d376a64149599226f74b97817ddcfa8720aa2 Mon Sep 17 00:00:00 2001 From: "miriam.aparicio" Date: Mon, 16 Dec 2024 13:08:42 +0000 Subject: [PATCH] apm migration to emotion --- .../context_popover/field_stats_popover.tsx | 7 +- .../app/correlations/correlations_table.tsx | 7 +- .../app/entities/entity_link/index.tsx | 14 ++- .../distribution/index.tsx | 7 +- .../infra_tabs/empty_prompt.tsx | 7 +- .../service_overview/stats/location_stats.tsx | 13 ++- .../mobile/service_overview/stats/stats.tsx | 13 ++- .../service_dashboards/empty_dashboards.tsx | 7 +- .../service_list/health_badge.tsx | 7 +- .../components/app/service_map/controls.tsx | 12 +-- .../components/app/service_map/cytoscape.tsx | 8 +- .../app/service_map/cytoscape_options.ts | 85 ++++++++++--------- .../app/service_map/empty_banner.tsx | 7 +- .../components/app/service_map/index.tsx | 7 +- .../app/service_map/popover/index.tsx | 8 +- .../use_cytoscape_event_handlers.test.tsx | 48 +++++------ .../use_cytoscape_event_handlers.ts | 18 ++-- .../intance_details.tsx | 9 +- .../agent_configurations/list/index.tsx | 20 +++-- .../delete_button.tsx | 7 +- .../waterfall/accordion_waterfall.tsx | 64 ++++++-------- .../waterfall/failure_badge.tsx | 7 +- .../waterfall_container/waterfall/index.tsx | 13 ++- .../waterfall/waterfall_item.tsx | 7 +- .../anomaly_detection_setup_link.tsx | 11 ++- .../shared/charts/breakdown_chart/index.tsx | 7 +- .../duration_distribution_chart/index.tsx | 11 ++- .../custom_tooltip.tsx | 19 ++--- .../shared/charts/spark_plot/index.tsx | 9 +- .../charts/timeline/marker/agent_marker.tsx | 7 +- .../charts/timeline/marker/error_marker.tsx | 9 +- .../shared/charts/timeline/timeline_axis.tsx | 8 +- .../shared/charts/timeline/vertical_lines.tsx | 10 +-- .../charts/timeseries_chart_with_context.tsx | 7 +- .../components/shared/ml_callout/index.tsx | 6 +- .../components/shared/service_icons/index.tsx | 10 +-- .../error_count_summary_item_badge.tsx | 7 +- .../apm/public/hooks/use_theme.tsx | 15 ---- 38 files changed, 250 insertions(+), 288 deletions(-) delete mode 100644 x-pack/plugins/observability_solution/apm/public/hooks/use_theme.tsx 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..4d4840e8c3ff7 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 @@ -5,7 +5,7 @@ * 2.0. */ -import { EuiButtonIcon, EuiToolTip } from '@elastic/eui'; +import { EuiButtonIcon, EuiToolTip, useEuiTheme } from '@elastic/eui'; import React, { useCallback, useMemo, useState } from 'react'; import { i18n } from '@kbn/i18n'; import { @@ -40,7 +40,6 @@ import { useApmPluginContext } from '../../../../context/apm_plugin/use_apm_plug import { useFetchParams } from '../use_fetch_params'; import type { ApmPluginStartDeps } from '../../../../plugin'; import { useAdHocApmDataView } from '../../../../hooks/use_adhoc_apm_data_view'; -import { useTheme } from '../../../../hooks/use_theme'; import { FETCH_STATUS, useFetcher } from '../../../../hooks/use_fetcher'; const HIGHLIGHTED_BUCKET_PROPS = { @@ -205,7 +204,7 @@ export function FieldStatsPopover({ const field = dataView?.getFieldByName(fieldName); const closePopover = useCallback(() => setInfoOpen(false), []); - const theme = useTheme(); + const { euiTheme } = useEuiTheme(); const params = useFetchParams(); @@ -280,7 +279,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..8524a29fb4b60 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 @@ -7,13 +7,12 @@ import React, { useCallback, useMemo, useState } from 'react'; import { debounce } from 'lodash'; -import { EuiBasicTable, EuiBasicTableColumn } from '@elastic/eui'; +import { EuiBasicTable, EuiBasicTableColumn, useEuiTheme } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import type { EuiTableSortingType } from '@elastic/eui/src/components/basic_table/table_types'; import type { Criteria } from '@elastic/eui/src/components/basic_table/basic_table'; import { useUiTracker } from '@kbn/observability-shared-plugin/public'; import { FETCH_STATUS } from '../../../hooks/use_fetcher'; -import { useTheme } from '../../../hooks/use_theme'; import type { FieldValuePair } from '../../../../common/correlations/types'; const PAGINATION_SIZE_OPTIONS = [5, 10, 20, 50]; @@ -43,7 +42,7 @@ export function CorrelationsTable({ sorting, rowHeader, }: CorrelationsTableProps) { - const euiTheme = useTheme(); + const { euiTheme } = useEuiTheme(); const trackApmEvent = useUiTracker({ app: 'apm' }); const trackSelectSignificantCorrelationTerm = useCallback( () => debounce(() => trackApmEvent({ metric: 'select_significant_term' }), 1000), @@ -105,7 +104,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/entities/entity_link/index.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/entities/entity_link/index.tsx index 2ea10868957b5..7ad5661159fd5 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 { + EuiButtonEmpty, + EuiEmptyPrompt, + EuiImage, + EuiLink, + EuiLoadingSpinner, + useEuiTheme, +} from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n-react'; import { useKibana } from '@kbn/kibana-react-plugin/public'; @@ -18,7 +25,6 @@ import { useApmParams } from '../../../../hooks/use_apm_params'; import { useApmRouter } from '../../../../hooks/use_apm_router'; import { useEntityCentricExperienceSetting } from '../../../../hooks/use_entity_centric_experience_setting'; import { FETCH_STATUS, isPending, useFetcher } from '../../../../hooks/use_fetcher'; -import { useTheme } from '../../../../hooks/use_theme'; import { ApmPluginStartDeps } from '../../../../plugin'; const pageHeader = { @@ -27,7 +33,7 @@ const pageHeader = { export function EntityLink() { const router = useApmRouter({ prependBasePath: false }); - const theme = useTheme(); + const { colorMode } = useEuiTheme(); const { services } = useKibana(); const { observabilityShared, data } = services; const timeRange = data.query.timefilter.timefilter.getTime(); @@ -65,7 +71,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..47101471a551a 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,14 +18,13 @@ import { DARK_THEME, LegendValue, } from '@elastic/charts'; -import { EuiTitle } from '@elastic/eui'; +import { EuiTitle, useEuiTheme } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import React from 'react'; import { useApmPluginContext } from '../../../../context/apm_plugin/use_apm_plugin_context'; import { useLegacyUrlParams } from '../../../../context/url_params_context/use_url_params'; import { FETCH_STATUS } from '../../../../hooks/use_fetcher'; import { usePreviousPeriodLabel } from '../../../../hooks/use_previous_period_text'; -import { useTheme } from '../../../../hooks/use_theme'; import { APIReturnType } from '../../../../services/rest/create_call_apm_api'; import { ChartContainer } from '../../../shared/charts/chart_container'; import { ChartType, getTimeSeriesColor } from '../../../shared/charts/helper/get_timeseries_color'; @@ -42,7 +41,7 @@ interface Props { export function ErrorDistribution({ distribution, title, fetchStatus }: Props) { const { core } = useApmPluginContext(); - const theme = useTheme(); + const { colorMode } = useEuiTheme(); const { urlParams } = useLegacyUrlParams(); const { comparisonEnabled } = urlParams; @@ -97,7 +96,7 @@ export function ErrorDistribution({ distribution, title, fetchStatus }: Props) { showLegend legendValues={[LegendValue.CurrentAndLastValue]} legendPosition={Position.Bottom} - theme={theme.darkMode ? DARK_THEME : LIGHT_THEME} + theme={colorMode === 'DARK' ? DARK_THEME : LIGHT_THEME} locale={i18n.getLocale()} /> diff --git a/x-pack/plugins/observability_solution/apm/public/components/app/mobile/service_overview/stats/location_stats.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/mobile/service_overview/stats/location_stats.tsx index 47451fac265c9..b514277a5dc91 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/app/mobile/service_overview/stats/location_stats.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/app/mobile/service_overview/stats/location_stats.tsx @@ -6,9 +6,8 @@ */ import { MetricDatum, MetricTrendShape } from '@elastic/charts'; import { i18n } from '@kbn/i18n'; -import { EuiIcon, EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner } from '@elastic/eui'; +import { EuiIcon, EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner, useEuiTheme } from '@elastic/eui'; import React, { useCallback } from 'react'; -import { useTheme } from '@kbn/observability-shared-plugin/public'; import { useFetcher, isPending, FETCH_STATUS } from '../../../../../hooks/use_fetcher'; import { CLIENT_GEO_COUNTRY_NAME } from '../../../../../../common/es_fields/apm'; import { NOT_AVAILABLE_LABEL } from '../../../../../../common/i18n'; @@ -45,7 +44,7 @@ export function MobileLocationStats({ environment: string; comparisonEnabled: boolean; }) { - const euiTheme = useTheme(); + const { euiTheme } = useEuiTheme(); const previousPeriodLabel = usePreviousPeriodLabel(); @@ -107,7 +106,7 @@ export function MobileLocationStats({ const metrics: MetricDatum[] = [ { - color: euiTheme.eui.euiColorLightestShade, + color: euiTheme.colors.lightestShade, title: i18n.translate('xpack.apm.mobile.location.metrics.http.requests.title', { defaultMessage: 'Most used in', }), @@ -121,7 +120,7 @@ export function MobileLocationStats({ trendShape: MetricTrendShape.Area, }, { - color: euiTheme.eui.euiColorLightestShade, + color: euiTheme.colors.lightestShade, title: i18n.translate('xpack.apm.mobile.location.metrics.mostCrashes', { defaultMessage: 'Most crashes', }), @@ -135,7 +134,7 @@ export function MobileLocationStats({ trendShape: MetricTrendShape.Area, }, { - color: euiTheme.eui.euiColorLightestShade, + color: euiTheme.colors.lightestShade, title: i18n.translate('xpack.apm.mobile.location.metrics.sessions', { defaultMessage: 'Most sessions', }), @@ -149,7 +148,7 @@ export function MobileLocationStats({ trendShape: MetricTrendShape.Area, }, { - color: euiTheme.eui.euiColorLightestShade, + color: euiTheme.colors.lightestShade, title: i18n.translate('xpack.apm.mobile.location.metrics.launches', { defaultMessage: 'Most launches', }), diff --git a/x-pack/plugins/observability_solution/apm/public/components/app/mobile/service_overview/stats/stats.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/mobile/service_overview/stats/stats.tsx index 59f6020d61c33..4376eeccab5c3 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/app/mobile/service_overview/stats/stats.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/app/mobile/service_overview/stats/stats.tsx @@ -6,9 +6,8 @@ */ import { MetricDatum, MetricTrendShape } from '@elastic/charts'; import { i18n } from '@kbn/i18n'; -import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiLoadingSpinner } from '@elastic/eui'; +import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiLoadingSpinner, useEuiTheme } from '@elastic/eui'; import React, { useCallback } from 'react'; -import { useTheme } from '@kbn/observability-shared-plugin/public'; import { NOT_AVAILABLE_LABEL } from '../../../../../../common/i18n'; import { useAnyOfApmParams } from '../../../../../hooks/use_apm_params'; import { FETCH_STATUS, isPending, useFetcher } from '../../../../../hooks/use_fetcher'; @@ -20,7 +19,7 @@ const valueFormatter = (value: number, suffix = '') => { }; export function MobileStats({ start, end, kuery }: { start: string; end: string; kuery: string }) { - const euiTheme = useTheme(); + const { euiTheme } = useEuiTheme(); const { path: { serviceName }, @@ -77,7 +76,7 @@ export function MobileStats({ start, end, kuery }: { start: string; end: string; const metrics: MetricDatum[] = [ { - color: euiTheme.eui.euiColorLightestShade, + color: euiTheme.colors.lightestShade, title: i18n.translate('xpack.apm.mobile.metrics.crash.rate', { defaultMessage: 'Crash rate', }), @@ -92,7 +91,7 @@ export function MobileStats({ start, end, kuery }: { start: string; end: string; trendShape: MetricTrendShape.Area, }, { - color: euiTheme.eui.euiColorLightestShade, + color: euiTheme.colors.lightestShade, title: i18n.translate('xpack.apm.mobile.metrics.load.time', { defaultMessage: 'Average app load time', }), @@ -105,7 +104,7 @@ export function MobileStats({ start, end, kuery }: { start: string; end: string; trendShape: MetricTrendShape.Area, }, { - color: euiTheme.eui.euiColorLightestShade, + color: euiTheme.colors.lightestShade, title: i18n.translate('xpack.apm.mobile.metrics.sessions', { defaultMessage: 'Sessions', }), @@ -118,7 +117,7 @@ export function MobileStats({ start, end, kuery }: { start: string; end: string; trendShape: MetricTrendShape.Area, }, { - color: euiTheme.eui.euiColorLightestShade, + color: euiTheme.colors.lightestShade, title: i18n.translate('xpack.apm.mobile.metrics.http.requests', { defaultMessage: 'HTTP requests', }), 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..bf4c234060996 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,17 +5,16 @@ * 2.0. */ import React from 'react'; -import { EuiEmptyPrompt, EuiImage } from '@elastic/eui'; +import { EuiEmptyPrompt, EuiImage, useEuiTheme } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { dashboardsDark, dashboardsLight } from '@kbn/shared-svg'; -import { useTheme } from '../../../hooks/use_theme'; interface Props { actions: React.ReactNode; } export function EmptyDashboards({ actions }: Props) { - const theme = useTheme(); + const { colorMode } = useEuiTheme(); return ( <> @@ -25,7 +24,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..1c21826c80d3b 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 @@ -6,19 +6,18 @@ */ import React from 'react'; -import { EuiBadge } from '@elastic/eui'; +import { EuiBadge, useEuiTheme } from '@elastic/eui'; import { getServiceHealthStatusBadgeColor, getServiceHealthStatusLabel, ServiceHealthStatus, } from '../../../../../common/service_health_status'; -import { useTheme } from '../../../../hooks/use_theme'; export function HealthBadge({ healthStatus }: { healthStatus: ServiceHealthStatus }) { - const theme = useTheme(); + const { euiTheme } = useEuiTheme(); 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 92de27e41be13..f018d368874dc 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 @@ -5,12 +5,11 @@ * 2.0. */ -import { EuiButtonIcon, EuiPanel, EuiToolTip } from '@elastic/eui'; +import { EuiButtonIcon, EuiPanel, EuiToolTip, useEuiTheme } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import React, { useContext, useEffect, useState } from 'react'; import styled from '@emotion/styled'; import { useApmPluginContext } from '../../../context/apm_plugin/use_apm_plugin_context'; -import { useTheme } from '../../../hooks/use_theme'; import { getLegacyApmHref } from '../../shared/links/apm/apm_link'; import { useLegacyUrlParams } from '../../../context/url_params_context/use_url_params'; import { APMQueryParams } from '../../shared/links/url_helpers'; @@ -97,7 +96,7 @@ function useDebugDownloadUrl(cy?: cytoscape.Core) { export function Controls() { const { core } = useApmPluginContext(); const { basePath } = core.http; - const theme = useTheme(); + const { euiTheme } = useEuiTheme(); const cy = useContext(CytoscapeContext); const { urlParams } = useLegacyUrlParams(); @@ -110,7 +109,8 @@ export function Controls() { ); const [zoom, setZoom] = useState((cy && cy.zoom()) || 1); - const duration = parseInt(theme.eui.euiAnimSpeedFast, 10); + // @ts-expect-error + const duration = parseInt(euiTheme.animation.fast, 10); const downloadUrl = useDebugDownloadUrl(cy); const viewFullMapUrl = getLegacyApmHref({ basePath, @@ -140,9 +140,9 @@ export function Controls() { if (cy) { const eles = cy.nodes(); cy.animate({ - ...getAnimationOptions(theme), + ...getAnimationOptions(euiTheme), center: { eles }, - fit: { eles, padding: getNodeHeight(theme) }, + fit: { eles, padding: getNodeHeight(euiTheme) }, }); } } diff --git a/x-pack/plugins/observability_solution/apm/public/components/app/service_map/cytoscape.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/service_map/cytoscape.tsx index 8535c483529a9..eacd67e6dabe8 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/app/service_map/cytoscape.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/app/service_map/cytoscape.tsx @@ -17,7 +17,7 @@ import React, { useRef, useState, } from 'react'; -import { useTheme } from '../../../hooks/use_theme'; +import { useEuiTheme } from '@elastic/eui'; import { useTraceExplorerEnabledSetting } from '../../../hooks/use_trace_explorer_enabled_setting'; import { getCytoscapeOptions } from './cytoscape_options'; import { useCytoscapeEventHandlers } from './use_cytoscape_event_handlers'; @@ -57,13 +57,13 @@ function useCytoscape(options: cytoscape.CytoscapeOptions) { } function CytoscapeComponent({ children, elements, height, serviceName, style }: CytoscapeProps) { - const theme = useTheme(); + const { euiTheme } = useEuiTheme(); const isTraceExplorerEnabled = useTraceExplorerEnabledSetting(); const [ref, cy] = useCytoscape({ - ...getCytoscapeOptions(theme, isTraceExplorerEnabled), + ...getCytoscapeOptions(euiTheme, isTraceExplorerEnabled), elements, }); - useCytoscapeEventHandlers({ cy, serviceName, theme }); + useCytoscapeEventHandlers({ cy, serviceName, euiTheme }); // Add items from the elements prop to the cytoscape collection and remove // items that no longer are in the list, then trigger an event to notify 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 51e1f5b0c1492..f0d0ed80ca2f4 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,6 @@ import cytoscape from 'cytoscape'; import { CSSProperties } from 'react'; -import { EuiTheme } from '@kbn/kibana-react-plugin/common'; import type { EuiThemeComputed } from '@elastic/eui'; import { ServiceAnomalyStats } from '../../../../common/anomaly_detection'; import { SERVICE_NAME, SPAN_DESTINATION_SERVICE_RESOURCE } from '../../../../common/es_fields/apm'; @@ -80,10 +79,11 @@ 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 = (euiTheme: EuiThemeComputed): cytoscape.AnimationOptions => ({ + // @ts-expect-error + duration: parseInt(euiTheme.animation.normal, 10), // @ts-expect-error The cubic-bezier options here are not recognized by the cytoscape types - easing: theme.eui.euiAnimSlightBounce, + easing: euiTheme.animation.bouncetheme, }); const zIndexNode = 200; @@ -91,14 +91,18 @@ const zIndexEdge = 100; const zIndexEdgeHighlight = 110; const zIndexEdgeHover = 120; -export const getNodeHeight = (theme: EuiTheme): number => parseInt(theme.eui.euiSizeXXL, 10); +export const getNodeHeight = (euiTheme: EuiThemeComputed): number => + parseInt(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 = ( + euiTheme: EuiThemeComputed, + isTraceExplorerEnabled: boolean +): cytoscape.Stylesheet[] => { + const lineColor = euiTheme.colors.mediumShade; return [ { selector: 'core', @@ -108,46 +112,46 @@ const getStyle = (theme: EuiTheme, isTraceExplorerEnabled: boolean): cytoscape.S { selector: 'node', style: { - 'background-color': theme.eui.euiColorGhost, + 'background-color': euiTheme.colors.backgroundBasePlain, // The DefinitelyTyped definitions don't specify that a function can be // used here. 'background-image': (el: cytoscape.NodeSingular) => iconForNode(el), 'background-height': (el: cytoscape.NodeSingular) => (isService(el) ? '60%' : '40%'), 'background-width': (el: cytoscape.NodeSingular) => (isService(el) ? '60%' : '40%'), - 'border-color': getBorderColorFn(theme), + 'border-color': getBorderColorFn(euiTheme), 'border-style': getBorderStyle, 'border-width': getBorderWidth, color: (el: cytoscape.NodeSingular) => el.hasClass('primary') || el.selected() - ? theme.eui.euiColorPrimaryText - : theme.eui.euiTextColor, + ? euiTheme.colors.textPrimary + : 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': euiTheme.size.s, ghost: 'yes', 'ghost-offset-x': 0, 'ghost-offset-y': 2, 'ghost-opacity': 0.15, - height: getNodeHeight(theme), + height: getNodeHeight(euiTheme), label: (el: cytoscape.NodeSingular) => 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(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': 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': euiTheme.size.xs, 'text-background-shape': 'roundrectangle', - 'text-margin-y': parseInt(theme.eui.euiSizeS, 10), + 'text-margin-y': parseInt(euiTheme.size.s, 10), 'text-max-width': '200px', 'text-valign': 'bottom', 'text-wrap': 'ellipsis', - width: theme.eui.euiSizeXXL, + width: euiTheme.size.xxl, 'z-index': zIndexNode, }, }, @@ -163,7 +167,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 : euiTheme.size.xs, width: 1, 'source-arrow-shape': 'none', 'z-index': zIndexEdge, @@ -176,8 +180,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(euiTheme.size.xs, 10), + 'target-distance-from-node': isIE11 ? undefined : parseInt(euiTheme.size.xs, 10), }, }, { @@ -191,9 +195,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': euiTheme.colors.darkShade, + 'source-arrow-color': euiTheme.colors.darkShade, + 'target-arrow-color': euiTheme.colors.darkShade, }, }, ...(isTraceExplorerEnabled @@ -203,9 +207,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': euiTheme.colors.darkShade, + 'source-arrow-color': euiTheme.colors.darkShade, + 'target-arrow-color': euiTheme.colors.darkShade, }, }, ] @@ -220,9 +224,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': euiTheme.colors.primary, + 'source-arrow-color': euiTheme.colors.primary, + 'target-arrow-color': euiTheme.colors.primary, 'z-index': zIndexEdgeHighlight, }, }, @@ -231,32 +235,35 @@ 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 = ( + euiTheme: EuiThemeComputed, + status: FETCH_STATUS +): CSSProperties => ({ background: `linear-gradient( 90deg, - ${theme.eui.euiPageBackgroundColor} - calc(${theme.eui.euiSizeL} - calc(${theme.eui.euiSizeXS} / 2)), + ${euiTheme.colors.backgroundBasePlain} + calc(${euiTheme.size.l} - calc(${euiTheme.size.xs} / 2)), transparent 1% ) center, linear-gradient( - ${theme.eui.euiPageBackgroundColor} - calc(${theme.eui.euiSizeL} - calc(${theme.eui.euiSizeXS} / 2)), + ${euiTheme.colors.backgroundBasePlain} + calc(${euiTheme.size.l} - calc(${euiTheme.size.xs} / 2)), transparent 1% ) center, -${theme.eui.euiColorLightShade}`, - backgroundSize: `${theme.eui.euiSizeL} ${theme.eui.euiSizeL}`, +${euiTheme.colors.lightShade}`, + backgroundSize: `${euiTheme.size.l} ${euiTheme.size.l}`, cursor: `${status === FETCH_STATUS.LOADING ? 'wait' : 'grab'}`, marginTop: 0, }); export const getCytoscapeOptions = ( - theme: EuiTheme, + euiTheme: EuiThemeComputed, isTraceExplorerEnabled: boolean ): cytoscape.CytoscapeOptions => ({ boxSelectionEnabled: false, maxZoom: 3, minZoom: 0.2, - style: getStyle(theme, isTraceExplorerEnabled), + style: getStyle(euiTheme, isTraceExplorerEnabled), }); 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 9e7f1b700eee8..9de1e54861411 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 @@ -6,11 +6,10 @@ */ import React, { useContext, useEffect, useState } from 'react'; -import { EuiCallOut, EuiLink } from '@elastic/eui'; +import { EuiCallOut, EuiLink, useEuiTheme } from '@elastic/eui'; import styled from '@emotion/styled'; import { i18n } from '@kbn/i18n'; import { CytoscapeContext } from './cytoscape'; -import { useTheme } from '../../../hooks/use_theme'; import { useApmPluginContext } from '../../../context/apm_plugin/use_apm_plugin_context'; const EmptyBannerContainer = styled.div` @@ -22,7 +21,7 @@ const EmptyBannerContainer = styled.div` `; export function EmptyBanner() { - const theme = useTheme(); + const { euiTheme } = useEuiTheme(); const cy = useContext(CytoscapeContext); const [nodeCount, setNodeCount] = useState(0); const { docLinks } = useApmPluginContext().core; @@ -48,7 +47,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..7d6bcbe69cfac 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 @@ -6,14 +6,13 @@ */ import { usePerformanceContext } from '@kbn/ebt-tools'; -import { EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner, EuiPanel } from '@elastic/eui'; +import { EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner, EuiPanel, useEuiTheme } from '@elastic/eui'; import React, { ReactNode } from 'react'; import { useApmPluginContext } from '../../../context/apm_plugin/use_apm_plugin_context'; import { isActivePlatinumLicense } from '../../../../common/license_check'; import { invalidLicenseMessage, SERVICE_MAP_TIMEOUT_ERROR } from '../../../../common/service_map'; import { FETCH_STATUS, useFetcher } from '../../../hooks/use_fetcher'; import { useLicenseContext } from '../../../context/license/use_license_context'; -import { useTheme } from '../../../hooks/use_theme'; import { LicensePrompt } from '../../shared/license_prompt'; import { Controls } from './controls'; import { Cytoscape } from './cytoscape'; @@ -103,7 +102,7 @@ export function ServiceMap({ end: string; serviceGroupId?: string; }) { - const theme = useTheme(); + const { euiTheme } = useEuiTheme(); const license = useLicenseContext(); const serviceName = useServiceName(); const { config } = useApmPluginContext(); @@ -200,7 +199,7 @@ export function ServiceMap({ elements={data.elements} height={heightWithPadding} serviceName={serviceName} - style={getCytoscapeDivStyle(theme, status)} + style={getCytoscapeDivStyle(euiTheme, status)} > {serviceName && } diff --git a/x-pack/plugins/observability_solution/apm/public/components/app/service_map/popover/index.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/service_map/popover/index.tsx index a66f77909072d..827ea59015f26 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/app/service_map/popover/index.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/app/service_map/popover/index.tsx @@ -13,6 +13,7 @@ import { EuiTitle, EuiToolTip, EuiIcon, + useEuiTheme, } from '@elastic/eui'; import cytoscape from 'cytoscape'; import React, { @@ -27,7 +28,6 @@ import React, { import { i18n } from '@kbn/i18n'; import { SERVICE_NAME, SPAN_TYPE } from '../../../../../common/es_fields/apm'; import { Environment } from '../../../../../common/environment_rt'; -import { useTheme } from '../../../../hooks/use_theme'; import { useTraceExplorerEnabledSetting } from '../../../../hooks/use_trace_explorer_enabled_setting'; import { CytoscapeContext } from '../cytoscape'; import { getAnimationOptions, popoverWidth } from '../cytoscape_options'; @@ -83,7 +83,7 @@ interface PopoverProps { } export function Popover({ focusedServiceName, environment, kuery, start, end }: PopoverProps) { - const theme = useTheme(); + const { euiTheme } = useEuiTheme(); const cy = useContext(CytoscapeContext); const [selectedElement, setSelectedElement] = useState< cytoscape.NodeSingular | cytoscape.EdgeSingular | undefined @@ -164,12 +164,12 @@ export function Popover({ focusedServiceName, environment, kuery, start, end }: event.preventDefault(); if (cy) { cy.animate({ - ...getAnimationOptions(theme), + ...getAnimationOptions(euiTheme), center: { eles: cy.getElementById(selectedElementId) }, }); } }, - [cy, selectedElementId, theme] + [cy, selectedElementId, euiTheme] ); const isAlreadyFocused = focusedServiceName === selectedElementId; 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..560bae859a25a 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,24 +8,24 @@ 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 type { EuiThemeComputed } from '@elastic/eui'; jest.mock('@kbn/observability-shared-plugin/public'); cytoscape.use(dagre); -const theme = { - eui: { avatarSizing: { l: { size: 10 } } }, -} as unknown as EuiTheme; +const euiTheme = { + size: { avatarSizing: { l: { size: 10 } } }, +} as unknown as EuiThemeComputed; describe('useCytoscapeEventHandlers', () => { describe('when cytoscape is undefined', () => { it('runs', () => { expect(() => { - renderHook(() => useCytoscapeEventHandlers({ cy: undefined, theme })); + renderHook(() => useCytoscapeEventHandlers({ cy: undefined, euiTheme })); }).not.toThrowError(); }); }); @@ -45,7 +45,7 @@ describe('useCytoscapeEventHandlers', () => { } as unknown as cytoscape.CollectionReturnValue), } as unknown as cytoscape.CollectionReturnValue); - renderHook(() => useCytoscapeEventHandlers({ serviceName: 'test', cy, theme })); + renderHook(() => useCytoscapeEventHandlers({ serviceName: 'test', cy, euiTheme })); cy.trigger('custom:data'); expect(cy.getElementById('test').hasClass('primary')).toEqual(true); @@ -66,7 +66,7 @@ describe('useCytoscapeEventHandlers', () => { } as unknown as cytoscape.CollectionReturnValue), } as unknown as cytoscape.CollectionReturnValue); - renderHook(() => useCytoscapeEventHandlers({ cy, theme })); + renderHook(() => useCytoscapeEventHandlers({ cy, euiTheme })); cy.trigger('custom:data'); expect(run).toHaveBeenCalled(); @@ -85,7 +85,7 @@ describe('useCytoscapeEventHandlers', () => { const edge = cy.getElementById('test'); const style = jest.spyOn(edge, 'style'); - renderHook(() => useCytoscapeEventHandlers({ cy, theme })); + renderHook(() => useCytoscapeEventHandlers({ cy, euiTheme })); cy.trigger('layoutstop'); expect(style).toHaveBeenCalledWith('control-point-distances', [-0, 0]); @@ -97,7 +97,7 @@ describe('useCytoscapeEventHandlers', () => { const cy = cytoscape({ elements: [{ data: { id: 'test' } }] }); const node = cy.getElementById('test'); - renderHook(() => useCytoscapeEventHandlers({ cy, theme })); + renderHook(() => useCytoscapeEventHandlers({ cy, euiTheme })); node.trigger('drag'); expect(node.data('hasBeenDragged')).toEqual(true); @@ -110,7 +110,7 @@ describe('useCytoscapeEventHandlers', () => { }); const node = cy.getElementById('test'); - renderHook(() => useCytoscapeEventHandlers({ cy, theme })); + renderHook(() => useCytoscapeEventHandlers({ cy, euiTheme })); node.trigger('drag'); expect(node.data('hasBeenDragged')).toEqual(true); @@ -126,7 +126,7 @@ describe('useCytoscapeEventHandlers', () => { } as unknown as HTMLElement; jest.spyOn(cy, 'container').mockReturnValueOnce(container); - renderHook(() => useCytoscapeEventHandlers({ cy, theme })); + renderHook(() => useCytoscapeEventHandlers({ cy, euiTheme })); cy.getElementById('test').trigger('dragfree'); expect(container.style.cursor).toEqual('pointer'); @@ -140,7 +140,7 @@ describe('useCytoscapeEventHandlers', () => { }); const node = cy.getElementById('test'); - renderHook(() => useCytoscapeEventHandlers({ cy, theme })); + renderHook(() => useCytoscapeEventHandlers({ cy, euiTheme })); node.trigger('mouseover'); expect(node.hasClass('hover')).toEqual(true); @@ -153,7 +153,7 @@ describe('useCytoscapeEventHandlers', () => { } as unknown as HTMLElement; jest.spyOn(cy, 'container').mockReturnValueOnce(container); - renderHook(() => useCytoscapeEventHandlers({ cy, theme })); + renderHook(() => useCytoscapeEventHandlers({ cy, euiTheme })); cy.getElementById('test').trigger('mouseover'); expect(container.style.cursor).toEqual('pointer'); @@ -168,7 +168,7 @@ describe('useCytoscapeEventHandlers', () => { return fn; }); - renderHook(() => useCytoscapeEventHandlers({ cy, theme })); + renderHook(() => useCytoscapeEventHandlers({ cy, euiTheme })); cy.getElementById('test').trigger('mouseover'); expect(trackApmEvent).toHaveBeenCalledWith({ @@ -184,7 +184,7 @@ describe('useCytoscapeEventHandlers', () => { }); const node = cy.getElementById('test'); - renderHook(() => useCytoscapeEventHandlers({ cy, theme })); + renderHook(() => useCytoscapeEventHandlers({ cy, euiTheme })); node.trigger('mouseout'); expect(node.hasClass('hover')).toEqual(false); @@ -197,7 +197,7 @@ describe('useCytoscapeEventHandlers', () => { } as unknown as HTMLElement; jest.spyOn(cy, 'container').mockReturnValueOnce(container); - renderHook(() => useCytoscapeEventHandlers({ cy, theme })); + renderHook(() => useCytoscapeEventHandlers({ cy, euiTheme })); cy.getElementById('test').trigger('mouseout'); expect(container.style.cursor).toEqual('grab'); @@ -218,7 +218,7 @@ describe('useCytoscapeEventHandlers', () => { } as unknown as HTMLElement; jest.spyOn(cy, 'container').mockReturnValueOnce(container); - renderHook(() => useCytoscapeEventHandlers({ cy, theme })); + renderHook(() => useCytoscapeEventHandlers({ cy, euiTheme })); cy.getElementById('test').trigger('mouseover'); expect(container.style.cursor).toEqual('default'); @@ -235,7 +235,7 @@ describe('useCytoscapeEventHandlers', () => { return fn; }); - renderHook(() => useCytoscapeEventHandlers({ cy, theme })); + renderHook(() => useCytoscapeEventHandlers({ cy, euiTheme })); cy.getElementById('test').trigger('select'); expect(trackApmEvent).toHaveBeenCalledWith({ @@ -258,7 +258,7 @@ describe('useCytoscapeEventHandlers', () => { useCytoscapeEventHandlers({ serviceName: 'test', cy, - theme, + euiTheme, }) ); cy.getElementById('test').trigger('unselect'); @@ -275,7 +275,7 @@ describe('useCytoscapeEventHandlers', () => { } as unknown as HTMLElement; jest.spyOn(cy, 'container').mockReturnValueOnce(container); - renderHook(() => useCytoscapeEventHandlers({ cy, theme })); + renderHook(() => useCytoscapeEventHandlers({ cy, euiTheme })); cy.trigger('tapstart'); expect(container.style.cursor).toEqual('grabbing'); @@ -289,7 +289,7 @@ describe('useCytoscapeEventHandlers', () => { } as unknown as HTMLElement; jest.spyOn(cy, 'container').mockReturnValueOnce(container); - renderHook(() => useCytoscapeEventHandlers({ cy, theme })); + renderHook(() => useCytoscapeEventHandlers({ cy, euiTheme })); cy.getElementById('test').trigger('tapstart'); expect(container.style.cursor).toEqual('grab'); @@ -305,7 +305,7 @@ describe('useCytoscapeEventHandlers', () => { } as unknown as HTMLElement; jest.spyOn(cy, 'container').mockReturnValueOnce(container); - renderHook(() => useCytoscapeEventHandlers({ cy, theme })); + renderHook(() => useCytoscapeEventHandlers({ cy, euiTheme })); cy.trigger('tapend'); expect(container.style.cursor).toEqual('grab'); @@ -319,7 +319,7 @@ describe('useCytoscapeEventHandlers', () => { } as unknown as HTMLElement; jest.spyOn(cy, 'container').mockReturnValueOnce(container); - renderHook(() => useCytoscapeEventHandlers({ cy, theme })); + renderHook(() => useCytoscapeEventHandlers({ cy, euiTheme })); cy.getElementById('test').trigger('tapend'); expect(container.style.cursor).toEqual('pointer'); @@ -334,7 +334,7 @@ describe('useCytoscapeEventHandlers', () => { jest.spyOn(Storage.prototype, 'getItem').mockReturnValueOnce('true'); const debug = jest.spyOn(window.console, 'debug').mockReturnValueOnce(undefined); - renderHook(() => useCytoscapeEventHandlers({ cy, theme })); + renderHook(() => useCytoscapeEventHandlers({ cy, euiTheme })); cy.getElementById('test').trigger('select'); expect(debug).toHaveBeenCalled(); 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..fdf607c340fe2 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 type { EuiThemeComputed } from '@elastic/eui'; import { getAnimationOptions, getNodeHeight } from './cytoscape_options'; /* @@ -39,13 +39,13 @@ function applyCubicBezierStyles(edges: cytoscape.EdgeCollection) { function getLayoutOptions({ fit = false, nodeHeight, - theme, + euiTheme, }: { fit?: boolean; nodeHeight: number; - theme: EuiTheme; + euiTheme: EuiThemeComputed; }): cytoscape.LayoutOptions { - const animationOptions = getAnimationOptions(theme); + const animationOptions = getAnimationOptions(euiTheme); return { animationDuration: animationOptions.duration, @@ -82,16 +82,16 @@ function resetConnectedEdgeStyle(cytoscapeInstance: cytoscape.Core, node?: cytos export function useCytoscapeEventHandlers({ cy, serviceName, - theme, + euiTheme, }: { cy?: cytoscape.Core; serviceName?: string; - theme: EuiTheme; + euiTheme: EuiThemeComputed; }) { const trackApmEvent = useUiTracker({ app: 'apm' }); useEffect(() => { - const nodeHeight = getNodeHeight(theme); + const nodeHeight = getNodeHeight(euiTheme); const dataHandler: cytoscape.EventHandler = (event, fit) => { if (serviceName) { @@ -111,7 +111,7 @@ export function useCytoscapeEventHandlers({ event.cy .elements('[!hasBeenDragged]') .difference('node:selected') - .layout(getLayoutOptions({ fit, nodeHeight, theme })) + .layout(getLayoutOptions({ fit, nodeHeight, euiTheme })) .run(); }; @@ -216,5 +216,5 @@ export function useCytoscapeEventHandlers({ cy.removeListener('tapend', undefined, tapendHandler); } }; - }, [cy, serviceName, trackApmEvent, theme]); + }, [cy, serviceName, trackApmEvent, euiTheme]); } 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..bd9ade55866e9 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 { EuiFlexGroup, EuiFlexItem, EuiSkeletonText, useEuiTheme } from '@elastic/eui'; import { CloudProvider, getAgentIcon, getCloudProviderIcon } from '@kbn/custom-icons'; import { i18n } from '@kbn/i18n'; import { get } from 'lodash'; @@ -35,7 +35,6 @@ import { } from '../../../../../common/es_fields/infra_metrics'; import { isPending } from '../../../../hooks/use_fetcher'; -import { useTheme } from '../../../../hooks/use_theme'; import { APIReturnType } from '../../../../services/rest/create_call_apm_api'; import { KeyValueFilterList } from '../../../shared/key_value_filter_list'; import { pushNewItemToKueryBar } from '../../../shared/kuery_bar/utils'; @@ -89,7 +88,7 @@ const cloudDetailsKeys = [ ]; export function InstanceDetails({ serviceName, serviceNodeName, kuery }: Props) { - const theme = useTheme(); + const { colorMode } = useEuiTheme(); const history = useHistory(); const { data, status } = useInstanceDetailsFetcher({ @@ -132,6 +131,8 @@ export function InstanceDetails({ serviceName, serviceNodeName, kuery }: Props) }); const containerType = data.kubernetes?.pod?.name ? 'Kubernetes' : 'Docker'; + + const isDarkMode = colorMode === 'DARK'; return ( @@ -140,7 +141,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, isDarkMode)} 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..ddd74716ceefb 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 @@ -13,6 +13,7 @@ import { EuiHealth, EuiToolTip, RIGHT_ALIGNMENT, + useEuiTheme, } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { isEmpty } from 'lodash'; @@ -22,7 +23,6 @@ import { APIReturnType } from '../../../../../services/rest/create_call_apm_api' import { getOptionLabel } from '../../../../../../common/agent_configuration/all_option'; import { useApmPluginContext } from '../../../../../context/apm_plugin/use_apm_plugin_context'; import { FETCH_STATUS } from '../../../../../hooks/use_fetcher'; -import { useTheme } from '../../../../../hooks/use_theme'; import { LoadingStatePrompt } from '../../../../shared/loading_state_prompt'; import { ITableColumn, ManagedTable } from '../../../../shared/managed_table'; import { TimestampTooltip } from '../../../../shared/timestamp_tooltip'; @@ -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 } = useEuiTheme(); 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..564381f78a4a3 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 @@ -5,13 +5,12 @@ * 2.0. */ -import { EuiButtonEmpty } from '@elastic/eui'; +import { EuiButtonEmpty, useEuiTheme } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { NotificationsStart } from '@kbn/core/public'; import React, { useState } from 'react'; import { callApmApi } from '../../../../../services/rest/create_call_apm_api'; import { useApmPluginContext } from '../../../../../context/apm_plugin/use_apm_plugin_context'; -import { useTheme } from '../../../../../hooks/use_theme'; interface Props { onDelete: () => void; @@ -21,7 +20,7 @@ interface Props { export function DeleteButton({ onDelete, customLinkId }: Props) { const [isDeleting, setIsDeleting] = useState(false); const { toasts } = useApmPluginContext().core.notifications; - const theme = useTheme(); + const { euiTheme } = useEuiTheme(); return ( {i18n.translate('xpack.apm.settings.customLink.delete', { defaultMessage: 'Delete', 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 30dabf4c376cf..ae3a410eac53a 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 @@ -7,20 +7,19 @@ import { EuiAccordion, - EuiAccordionProps, EuiFlexGroup, EuiFlexItem, EuiIcon, EuiText, EuiToolTip, + useEuiTheme, } from '@elastic/eui'; -import styled from '@emotion/styled'; import { transparentize } from 'polished'; import React, { useEffect, useRef } from 'react'; import { WindowScroller, AutoSizer } from 'react-virtualized'; import { areEqual, ListChildComponentProps, VariableSizeList as List } from 'react-window'; +import { css } from '@emotion/react'; import { asBigNumber } from '../../../../../../../common/utils/formatters'; -import { useTheme } from '../../../../../../hooks/use_theme'; import { Margins } from '../../../../../shared/charts/timeline'; import { IWaterfallNodeFlatten, @@ -53,37 +52,6 @@ interface WaterfallNodeProps extends WaterfallProps { const ACCORDION_HEIGHT = 48; -const StyledAccordion = styled(EuiAccordion).withConfig({ - shouldForwardProp: (prop) => !['marginLeftLevel', 'hasError'].includes(prop), -})< - EuiAccordionProps & { - marginLeftLevel: number; - hasError: boolean; - } ->` - border-top: 1px solid ${({ theme }) => theme.eui.euiColorLightShade}; - - ${(props) => { - const borderLeft = props.hasError - ? `2px solid ${props.theme.eui.euiColorDanger};` - : `1px solid ${props.theme.eui.euiColorLightShade};`; - return `.button_${props.id} { - width: 100%; - height: ${ACCORDION_HEIGHT}px; - margin-left: ${props.marginLeftLevel}px; - border-left: ${borderLeft} - &:hover { - background-color: ${props.theme.eui.euiColorLightestShade}; - } - }`; - }} - - .accordion__buttonContent { - width: 100%; - height: 100%; - } -`; - export function AccordionWaterfall({ maxLevelOpen, showCriticalPath, @@ -175,7 +143,7 @@ const VirtualRow = React.memo( ); const WaterfallNode = React.memo((props: WaterfallNodeProps) => { - const theme = useTheme(); + const { euiTheme } = useEuiTheme(); const { duration, waterfallItemId, onClickWaterfallItem, timelineMargins, node } = props; const { criticalPathSegmentsById, getErrorCount, updateTreeNode, showCriticalPath } = useWaterfallContext(); @@ -189,7 +157,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, })); @@ -202,14 +170,14 @@ const WaterfallNode = React.memo((props: WaterfallNodeProps) => { onClickWaterfallItem(node.item, flyoutDetailTab); }; + const hasError = node.item.doc.event?.outcome === 'failure'; + return ( - @@ -242,6 +210,24 @@ const WaterfallNode = React.memo((props: WaterfallNodeProps) => { initialIsOpen forceState={node.expanded ? 'open' : 'closed'} onToggle={toggleAccordion} + css={css` + border-top: 1px solid ${euiTheme.colors.lightShade}; + .button_${node.item.id} { + width: 100%; + height: ${ACCORDION_HEIGHT}px; + margin-left: ${marginLeftLevel}px; + border-left: ${hasError + ? `2px solid ${euiTheme.colors.danger};` + : `1px solid ${euiTheme.colors.lightShade};`}; + &:hover { + background-color: ${euiTheme.colors.lightestShade}; + } + } + .accordion__buttonContent { + width: 100%; + height: 100%; + } + `} /> ); }); 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 fa45f599cd422..91f60fd9df842 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 @@ -6,18 +6,17 @@ */ import React from 'react'; -import { EuiBadge, EuiToolTip } from '@elastic/eui'; +import { EuiBadge, EuiToolTip, useEuiTheme } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import styled from '@emotion/styled'; import { EventOutcome } from '../../../../../../../typings/es_schemas/raw/fields/event_outcome'; -import { useTheme } from '../../../../../../hooks/use_theme'; const ResetLineHeight = styled.span` line-height: initial; `; export function FailureBadge({ outcome }: { outcome?: EventOutcome }) { - const theme = useTheme(); + const { euiTheme } = useEuiTheme(); if (outcome !== 'failure') { return null; @@ -30,7 +29,7 @@ export function FailureBadge({ outcome }: { outcome?: EventOutcome }) { defaultMessage: 'event.outcome = failure', })} > - + {i18n.translate('xpack.apm.failure_badge.label', { 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 9a0cdc97c2274..56a5367a4cfa6 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 @@ -5,14 +5,13 @@ * 2.0. */ -import { EuiButtonEmpty, EuiCallOut } from '@elastic/eui'; +import { EuiButtonEmpty, EuiCallOut, useEuiTheme } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { History } from 'history'; import React, { useMemo, useState } from 'react'; import { useHistory } from 'react-router-dom'; import styled from '@emotion/styled'; import { css } from '@emotion/react'; -import { useTheme } from '../../../../../../hooks/use_theme'; import { VerticalLinesContainer, TimelineAxisContainer, @@ -90,7 +89,7 @@ const MAX_DEPTH_OPEN_LIMIT = 2; export function Waterfall({ waterfall, waterfallItemId, showCriticalPath }: Props) { const history = useHistory(); - const theme = useTheme(); + const { euiTheme } = useEuiTheme(); const [isAccordionOpen, setIsAccordionOpen] = useState(true); const { duration } = waterfall; @@ -134,16 +133,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.content}; + background-color: ${euiTheme.colors.emptyShade}; + 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 71aac44849c05..296c98705294c 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 @@ -5,11 +5,10 @@ * 2.0. */ -import { EuiBadge, EuiIcon, EuiText, EuiTitle, EuiToolTip } from '@elastic/eui'; +import { EuiBadge, EuiIcon, EuiText, EuiTitle, EuiToolTip, useEuiTheme } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import React, { ReactNode, useRef, useEffect, useState } from 'react'; import styled from '@emotion/styled'; -import { useTheme } from '../../../../../../hooks/use_theme'; import { isMobileAgentName, isRumAgentName } from '../../../../../../../common/agent_name'; import { TRACE_ID, TRANSACTION_ID } from '../../../../../../../common/es_fields/apm'; import { asDuration } from '../../../../../../../common/utils/formatters'; @@ -311,7 +310,7 @@ function RelatedErrors({ errorCount: number; }) { const apmRouter = useApmRouter(); - const theme = useTheme(); + const { euiTheme } = useEuiTheme(); const { query } = useAnyOfApmParams( '/services/{serviceName}/transactions/view', '/mobile-services/{serviceName}/transactions/view', @@ -348,7 +347,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..2441dd7893cd9 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 @@ -7,7 +7,7 @@ import { EuiLoadingSpinner } from '@elastic/eui'; import { IconType } from '@elastic/eui'; -import { EuiHeaderLink, EuiIcon, EuiToolTip } from '@elastic/eui'; +import { EuiHeaderLink, EuiIcon, EuiToolTip, useEuiTheme } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import React from 'react'; import { AnomalyDetectionSetupState } from '../../../../../common/anomaly_detection/get_anomaly_detection_setup_state'; @@ -18,7 +18,6 @@ import { import { useAnomalyDetectionJobsContext } from '../../../../context/anomaly_detection_jobs/use_anomaly_detection_jobs_context'; import { useApmPluginContext } from '../../../../context/apm_plugin/use_apm_plugin_context'; import { useApmParams } from '../../../../hooks/use_apm_params'; -import { useTheme } from '../../../../hooks/use_theme'; import { getLegacyApmHref } from '../../../shared/links/apm/apm_link'; export function AnomalyDetectionSetupLink() { @@ -29,12 +28,12 @@ export function AnomalyDetectionSetupLink() { const { core } = useApmPluginContext(); const { basePath } = core.http; - const theme = useTheme(); + const { euiTheme } = useEuiTheme(); const { anomalyDetectionSetupState } = useAnomalyDetectionJobsContext(); let tooltipText: string = ''; - let color: 'warning' | 'text' | 'success' | 'danger' = 'text'; + let color: 'warning' | 'text' | 'accentSecondary' | 'danger' = 'text'; let icon: IconType | undefined; if (anomalyDetectionSetupState === AnomalyDetectionSetupState.Failure) { @@ -51,7 +50,7 @@ export function AnomalyDetectionSetupLink() { tooltipText = getNoJobsMessage(anomalyDetectionSetupState, environment); icon = 'machineLearningApp'; } else if (anomalyDetectionSetupState === AnomalyDetectionSetupState.UpgradeableJobs) { - color = 'success'; + color = 'accentSecondary'; tooltipText = i18n.translate('xpack.apm.anomalyDetectionSetup.upgradeableJobsText', { defaultMessage: 'Updates available for existing anomaly detection jobs.', }); @@ -74,7 +73,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..e0ad710a14d9e 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 @@ -21,7 +21,7 @@ import { Tooltip, LegendValue, } from '@elastic/charts'; -import { EuiIcon } from '@elastic/eui'; +import { EuiIcon, useEuiTheme } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import moment from 'moment'; import React from 'react'; @@ -36,7 +36,6 @@ import { import { Coordinate, TimeSeries } from '../../../../../typings/timeseries'; import { useChartPointerEventContext } from '../../../../context/chart_pointer_event/use_chart_pointer_event_context'; import { FETCH_STATUS } from '../../../../hooks/use_fetcher'; -import { useTheme } from '../../../../hooks/use_theme'; import { unit } from '../../../../utils/style'; import { ChartContainer } from '../chart_container'; import { isTimeseriesEmpty, onBrushEnd } from '../helper/helper'; @@ -74,7 +73,7 @@ export function BreakdownChart({ const { query: { rangeFrom, rangeTo }, } = useAnyOfApmParams('/services/{serviceName}', '/mobile-services/{serviceName}'); - const theme = useTheme(); + const { euiTheme } = useEuiTheme(); const { start, end } = useTimeRange({ rangeFrom, rangeTo }); const min = moment.utc(start).valueOf(); @@ -82,7 +81,7 @@ export function BreakdownChart({ const xFormatter = niceTimeFormatter([min, max]); - const annotationColor = theme.eui.euiColorSuccess; + const annotationColor = euiTheme.colors.accentSecondary; 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..65f22d78adf99 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 @@ -25,7 +25,7 @@ import { TickFormatter, } from '@elastic/charts'; -import { euiPaletteColorBlind } from '@elastic/eui'; +import { euiPaletteColorBlind, useEuiTheme } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; @@ -37,7 +37,6 @@ import type { HistogramItem } from '../../../../../common/correlations/types'; import { DEFAULT_PERCENTILE_THRESHOLD } from '../../../../../common/correlations/constants'; import { FETCH_STATUS } from '../../../../hooks/use_fetcher'; -import { useTheme } from '../../../../hooks/use_theme'; import { ChartContainer } from '../chart_container'; @@ -109,7 +108,7 @@ export function DurationDistributionChart({ eventType, }: DurationDistributionChartProps) { const chartThemes = useChartThemes(); - const euiTheme = useTheme(); + const { euiTheme } = useEuiTheme(); const markerPercentile = DEFAULT_PERCENTILE_THRESHOLD; const annotationsDataValues: LineAnnotationDatum[] = [ @@ -188,7 +187,7 @@ export function DurationDistributionChart({ }, tickLabel: { fontSize: 10, - fill: euiTheme.eui.euiColorMediumShade, + fill: euiTheme.colors.mediumShade, padding: 0, }, }, @@ -207,8 +206,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/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..8e0c24162f2a6 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 @@ -6,13 +6,12 @@ */ import { TooltipInfo } from '@elastic/charts'; -import { EuiIcon } from '@elastic/eui'; +import { EuiIcon, useEuiTheme } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import React from 'react'; import { APIReturnType } from '../../../../services/rest/create_call_apm_api'; import { getServiceNodeName } from '../../../../../common/service_nodes'; import { asTransactionRate, TimeFormatter } from '../../../../../common/utils/formatters'; -import { useTheme } from '../../../../hooks/use_theme'; type ServiceInstanceMainStatistics = APIReturnType<'GET /internal/apm/services/{serviceName}/service_overview_instances/main_statistics'>; @@ -92,7 +91,7 @@ function MultipleInstanceCustomTooltip({ latencyFormatter, values, }: TooltipInfo & { latencyFormatter: TimeFormatter }) { - const theme = useTheme(); + const { euiTheme } = useEuiTheme(); return ( <> @@ -127,10 +126,7 @@ function MultipleInstanceCustomTooltip({ >
-
+
{latencyLabel} {latencyFormatter(latency).formatted}
@@ -142,10 +138,7 @@ function MultipleInstanceCustomTooltip({ >
-
+
{throughputLabel} {asTransactionRate(throughput)}
@@ -166,7 +159,7 @@ function MultipleInstanceCustomTooltip({ */ export function CustomTooltip(props: TooltipInfo & { latencyFormatter: TimeFormatter }) { const { values } = props; - const theme = useTheme(); + const { euiTheme } = useEuiTheme(); return (
@@ -175,7 +168,7 @@ export function CustomTooltip(props: TooltipInfo & { latencyFormatter: TimeForma ) : ( )} -
+
{clickToFilterDescription}
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..b18fd70d0d2ca 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 @@ -16,12 +16,11 @@ import { Settings, Tooltip, } from '@elastic/charts'; -import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiLoadingChart } from '@elastic/eui'; +import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiLoadingChart, useEuiTheme } from '@elastic/eui'; import React from 'react'; import { useChartThemes } from '@kbn/observability-shared-plugin/public'; import { i18n } from '@kbn/i18n'; import { Coordinate } from '../../../../../typings/timeseries'; -import { useTheme } from '../../../../hooks/use_theme'; import { unit } from '../../../../utils/style'; import { getComparisonChartTheme } from '../../time_comparison/get_comparison_chart_theme'; @@ -93,7 +92,7 @@ export function SparkPlotItem({ comparisonSeries?: Coordinate[]; comparisonSeriesColor?: string; }) { - const theme = useTheme(); + const { euiTheme } = useEuiTheme(); const defaultChartThemes = useChartThemes(); const comparisonChartTheme = getComparisonChartTheme(); const hasComparisonSeries = !!comparisonSeries?.length; @@ -110,7 +109,7 @@ export function SparkPlotItem({ }; const chartSize = { - height: theme.eui.euiSizeL, + height: euiTheme.size.l, width: compact ? unit * 4 : unit * 5, }; @@ -201,7 +200,7 @@ export function SparkPlotItem({ justifyContent: 'center', }} > - +
); } diff --git a/x-pack/plugins/observability_solution/apm/public/components/shared/charts/timeline/marker/agent_marker.tsx b/x-pack/plugins/observability_solution/apm/public/components/shared/charts/timeline/marker/agent_marker.tsx index 657f13b334645..1ee668fb5765f 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/shared/charts/timeline/marker/agent_marker.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/shared/charts/timeline/marker/agent_marker.tsx @@ -5,11 +5,10 @@ * 2.0. */ -import { EuiToolTip } from '@elastic/eui'; +import { EuiToolTip, useEuiTheme } from '@elastic/eui'; import React from 'react'; import styled from '@emotion/styled'; import { asDuration } from '../../../../../../common/utils/formatters'; -import { useTheme } from '../../../../../hooks/use_theme'; import { AgentMark } from '../../../../app/transaction_details/waterfall_with_summary/waterfall_container/marks/get_agent_marks'; import { Legend } from '../legend'; @@ -28,7 +27,7 @@ interface Props { } export function AgentMarker({ mark }: Props) { - const theme = useTheme(); + const { euiTheme } = useEuiTheme(); return ( <> @@ -42,7 +41,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 55c6f527b680d..14b2a277c3931 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 @@ -5,13 +5,12 @@ * 2.0. */ -import { EuiPopover, EuiText } from '@elastic/eui'; +import { EuiPopover, EuiText, useEuiTheme } from '@elastic/eui'; import React, { useState } from 'react'; import styled from '@emotion/styled'; import { TRACE_ID, TRANSACTION_ID } from '../../../../../../common/es_fields/apm'; import { asDuration } from '../../../../../../common/utils/formatters'; import { useLegacyUrlParams } from '../../../../../context/url_params_context/use_url_params'; -import { useTheme } from '../../../../../hooks/use_theme'; import { ErrorMark } from '../../../../app/transaction_details/waterfall_with_summary/waterfall_container/marks/get_error_marks'; import { ErrorDetailLink } from '../../../links/apm/error_detail_link'; import { Legend, Shape } from '../legend'; @@ -51,7 +50,7 @@ function truncateMessage(errorMessage?: string) { } export function ErrorMarker({ mark }: Props) { - const theme = useTheme(); + const { euiTheme } = useEuiTheme(); const { urlParams } = useLegacyUrlParams(); const [isPopoverOpen, showPopover] = useState(false); @@ -61,7 +60,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.text} 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..1f2a929084bea 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 @@ -6,7 +6,7 @@ */ import React from 'react'; -import { useTheme } from '../../../../hooks/use_theme'; +import { useEuiTheme } from '@elastic/eui'; import { Mark } from '../../../app/transaction_details/waterfall_with_summary/waterfall_container/marks'; import { PlotValues } from './plot_utils'; @@ -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 } = useEuiTheme(); 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_with_context.tsx b/x-pack/plugins/observability_solution/apm/public/components/shared/charts/timeseries_chart_with_context.tsx index e9ec46610fe25..5f08e7375788e 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 @@ -13,7 +13,7 @@ import { YDomainRange, } from '@elastic/charts'; import React from 'react'; -import { EuiIcon } from '@elastic/eui'; +import { EuiIcon, useEuiTheme } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { asAbsoluteDateTime } from '../../../../common/utils/formatters'; import { useAnnotationsContext } from '../../../context/annotations/use_annotations_context'; @@ -25,7 +25,6 @@ import { FETCH_STATUS } from '../../../hooks/use_fetcher'; import { unit } from '../../../utils/style'; import { getTimeZone } from './helper/timezone'; import { TimeseriesChart } from './timeseries_chart'; -import { useTheme } from '../../../hooks/use_theme'; interface AnomalyTimeseries extends ServiceAnomalyTimeseries { color?: string; @@ -69,8 +68,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 } = useEuiTheme(); + const annotationColor = euiTheme.colors.accentSecondary; const { annotations } = useAnnotationsContext(); const timeseriesAnnotations = [ diff --git a/x-pack/plugins/observability_solution/apm/public/components/shared/ml_callout/index.tsx b/x-pack/plugins/observability_solution/apm/public/components/shared/ml_callout/index.tsx index 0a6058a2c28c6..7517c5152032e 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/shared/ml_callout/index.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/shared/ml_callout/index.tsx @@ -48,7 +48,7 @@ export function MLCallout({ } | undefined; - const getLearnMoreLink = (color: 'primary' | 'success') => { + const getLearnMoreLink = (color: 'primary' | 'accentSecondary') => { return ( { setLoading(true); @@ -120,7 +120,7 @@ export function MLCallout({ })} ) : ( - getLearnMoreLink('success') + getLearnMoreLink('accentSecondary') ), }; break; 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..a7c4b2311508a 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 { EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner, useEuiTheme } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { CloudProvider, @@ -14,7 +14,6 @@ import { getServerlessIcon, } from '@kbn/custom-icons'; import React, { ReactChild, useState } from 'react'; -import { useTheme } from '../../../hooks/use_theme'; import { ContainerType } from '../../../../common/service_metadata'; import { FETCH_STATUS, useFetcher } from '../../../hooks/use_fetcher'; import { CloudDetails } from './cloud_details'; @@ -81,7 +80,8 @@ export interface PopoverItem { export function ServiceIcons({ start, end, serviceName, environment }: Props) { const [selectedIconPopover, setSelectedIconPopover] = useState(); - const theme = useTheme(); + const { colorMode } = useEuiTheme(); + const isDarkMode = colorMode === 'DARK'; const { data: icons, status: iconsFetchStatus } = useFetcher( (callApmApi) => { @@ -122,7 +122,7 @@ export function ServiceIcons({ start, end, serviceName, environment }: Props) { { key: 'service', icon: { - type: getAgentIcon(icons?.agentName, theme.darkMode) || 'node', + type: getAgentIcon(icons?.agentName, isDarkMode) || 'node', }, isVisible: !!icons?.agentName, title: i18n.translate('xpack.apm.serviceIcons.service', { @@ -133,7 +133,7 @@ export function ServiceIcons({ start, end, serviceName, environment }: Props) { { key: 'opentelemetry', icon: { - type: getAgentIcon('opentelemetry', theme.darkMode), + type: getAgentIcon('opentelemetry', isDarkMode), }, 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..2eb502feb99ec 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 @@ -7,18 +7,17 @@ import React from 'react'; import { i18n } from '@kbn/i18n'; -import { EuiBadge } from '@elastic/eui'; -import { useTheme } from '../../../hooks/use_theme'; +import { EuiBadge, useEuiTheme } from '@elastic/eui'; interface Props { count: number; } export function ErrorCountSummaryItemBadge({ count }: Props) { - const theme = useTheme(); + const { euiTheme } = useEuiTheme(); 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 deleted file mode 100644 index 8c18ac38efc33..0000000000000 --- a/x-pack/plugins/observability_solution/apm/public/hooks/use_theme.tsx +++ /dev/null @@ -1,15 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0; you may not use this file except in compliance with the Elastic License - * 2.0. - */ - -import { useContext } from 'react'; -import { ThemeContext } from 'styled-components'; -import { EuiTheme } from '@kbn/kibana-react-plugin/common'; - -export function useTheme(): EuiTheme { - const theme = useContext(ThemeContext); - return theme; -}