From fb0cb57b4fa039ed5be9a03f70df38d423c6a502 Mon Sep 17 00:00:00 2001 From: Miriam <31922082+MiriamAparicio@users.noreply.github.com> Date: Wed, 18 Dec 2024 17:13:24 +0000 Subject: [PATCH] [ObsUX] [APM] Migrate APM from styled-components to @emotion (#204222) Closes https://github.com/elastic/kibana/issues/202765 ### Summary While working on the visual refresh for the new EUI theme Borealis we figured that was a good time to do the recommended migration from `styled-components` to `@emotion` ### What has been done - Migrate apm plugin from `styled-components` to `@emotion` - Eui Visual Refresh for Borealis new theme - All usage of color palette tokens and functions now pull from the theme, and correctly update to use new colors when the theme changes from Borealis to Amsterdam and vice versa - All references to renamed tokens have been updated to use the new token name - Remove usage of deprecated `useEuiBackgroundColor` - All usages of "success" colors have been updated to `accentSecondary` and `textAccentSecondary` as needed ### Not this time There are some color values on the server side, and the values are static they would not update properly as dynamic tokens do. Eui guidance right now is to keep these as they are for now (meaning to keep using the JSON tokens). ### How to test #### Running Kibana with the Borealis theme In order to run Kibana with Borealis, you'll need to do the following: - Set the following in kibana.dev.yml: uiSettings.experimental.themeSwitcherEnabled: true - Run Kibana with the following environment variable set: KBN_OPTIMIZER_THEMES="borealislight,borealisdark,v8light,v8dark" yarn start - This will expose a toggle under Stack Management > Advanced Settings > Theme version, which you can use to toggle between Amsterdam and Borealis. --- .../styled_components_files.js | 4 +- x-pack/.gitignore | 1 + .../apm/common/service_health_status.ts | 28 +-- .../get_apm_timeseries.tsx | 185 +++++++++--------- .../ui_components/chart_preview/index.tsx | 12 +- .../context_popover/field_stats_popover.tsx | 10 +- .../app/correlations/correlations_table.tsx | 7 +- .../failed_transactions_correlations.tsx | 8 +- ...get_transaction_distribution_chart_data.ts | 10 +- .../app/correlations/latency_correlations.tsx | 4 +- ...ependency_operation_distribution_chart.tsx | 8 +- .../entities/entity_link/entity_link.test.tsx | 5 +- .../app/entities/entity_link/index.tsx | 14 +- .../distribution/index.tsx | 7 +- .../error_sampler/error_sample_detail.tsx | 6 +- .../exception_stacktrace.test.tsx | 17 +- .../error_sampler/sample_summary.tsx | 12 +- .../error_group_list/index.tsx | 18 +- .../app/help_popover/help_popover.tsx | 4 +- .../infra_tabs/empty_prompt.tsx | 7 +- .../metrics/jvm_metrics_overview/index.tsx | 4 +- .../serverless_function_name_link.tsx | 6 +- .../serverless_metrics/serverless_summary.tsx | 4 +- .../service_node_metrics/index.tsx | 4 +- .../crash_group_list.test.tsx | 4 +- .../crash_group_list/index.tsx | 14 +- .../error_group_list.test.tsx | 4 +- .../error_group_list/index.tsx | 14 +- .../service_overview/stats/location_stats.tsx | 13 +- .../mobile/service_overview/stats/stats.tsx | 13 +- .../service_dashboards/empty_dashboards.tsx | 7 +- .../service_group_save/select_services.tsx | 2 +- .../service_list/health_badge.tsx | 7 +- .../app/service_map/controls.test.tsx | 11 +- .../components/app/service_map/controls.tsx | 31 ++- .../components/app/service_map/cytoscape.tsx | 8 +- .../app/service_map/cytoscape_options.ts | 93 +++++---- .../app/service_map/empty_banner.tsx | 18 +- .../components/app/service_map/index.tsx | 7 +- .../service_map/popover/anomaly_detection.tsx | 33 ++-- .../popover/externals_list_contents.tsx | 4 +- .../app/service_map/popover/index.tsx | 8 +- .../app/service_map/popover/popover.test.tsx | 11 +- .../service_map/popover/resource_contents.tsx | 8 +- .../use_cytoscape_event_handlers.test.tsx | 49 ++--- .../use_cytoscape_event_handlers.ts | 18 +- .../service_overview.test.tsx | 5 +- .../intance_details.tsx | 9 +- .../agent_configurations/list/index.tsx | 20 +- .../delete_button.tsx | 7 +- .../app/storage_explorer/summary_stats.tsx | 2 +- .../app/top_traces_overview/trace_list.tsx | 8 +- .../components/app/trace_link/index.tsx | 4 +- ...use_transaction_distribution_chart_data.ts | 4 +- .../waterfall/accordion_waterfall.tsx | 65 +++--- .../waterfall/failure_badge.tsx | 15 +- .../waterfall_container/waterfall/index.tsx | 21 +- .../waterfall/responsive_flyout.tsx | 17 +- .../waterfall/span_flyout/index.tsx | 6 +- .../span_flyout/truncate_height_section.tsx | 6 +- .../waterfall/waterfall_item.tsx | 41 ++-- .../waterfall_container.test.tsx | 6 +- .../components/app/transaction_link/index.tsx | 16 +- .../agent_instructions_accordion.tsx | 2 +- .../settings_form/form_row_setting.tsx | 2 +- .../anomaly_detection_setup_link.tsx | 11 +- .../components/routing/app_root/index.tsx | 28 +-- .../shared/charts/breakdown_chart/index.tsx | 7 +- .../duration_distribution_chart/index.tsx | 11 +- .../helper/get_chart_anomaly_timeseries.tsx | 8 +- .../custom_tooltip.tsx | 19 +- .../index.tsx | 15 +- .../shared/charts/spark_plot/index.tsx | 9 +- .../__snapshots__/timeline.test.tsx.snap | 155 ++++----------- .../shared/charts/timeline/legend.tsx | 16 +- .../marker/__snapshots__/index.test.tsx.snap | 8 +- .../charts/timeline/marker/agent_marker.tsx | 21 +- .../charts/timeline/marker/error_marker.tsx | 23 ++- .../shared/charts/timeline/marker/index.tsx | 4 +- .../shared/charts/timeline/timeline_axis.tsx | 8 +- .../shared/charts/timeline/vertical_lines.tsx | 10 +- .../shared/charts/timeseries_chart.tsx | 12 +- .../charts/timeseries_chart_with_context.tsx | 7 +- .../charts/transaction_charts/ml_header.tsx | 10 +- .../index.tsx | 16 +- .../shared/errors_table/get_columns.tsx | 4 +- .../shared/key_value_filter_list/index.tsx | 5 +- .../key_value_table/formatted_value.tsx | 6 +- .../shared/kuery_bar/typeahead/suggestion.js | 49 ++--- .../shared/kuery_bar/typeahead/suggestions.js | 18 +- .../shared/links/apm/service_link/index.tsx | 6 +- .../shared/links/dependency_link.tsx | 8 +- .../shared/overview_table_container/index.tsx | 4 +- .../components/shared/service_icons/index.tsx | 10 +- .../shared/stacktrace/cause_stacktrace.tsx | 24 +-- .../components/shared/stacktrace/context.tsx | 40 ++-- .../shared/stacktrace/frame_heading.tsx | 19 +- .../shared/stacktrace/library_stacktrace.tsx | 6 +- .../shared/stacktrace/stackframe.tsx | 16 +- .../shared/stacktrace/variables.tsx | 12 +- .../sticky_properties.test.tsx.snap | 20 +- .../shared/sticky_properties/index.tsx | 20 +- .../sticky_properties.test.tsx | 2 +- .../error_count_summary_item_badge.tsx | 7 +- .../http_info_summary_item.test.tsx | 2 +- .../summary/http_info_summary_item/index.tsx | 10 +- .../summary/user_agent_summary_item.tsx | 8 +- .../shared/time_comparison/index.test.tsx | 2 +- .../shared/time_comparison/index.tsx | 8 +- .../shared/transaction_type_select.tsx | 2 +- .../shared/truncate_with_tooltip/index.tsx | 6 +- .../public/embeddable/embeddable_context.tsx | 25 ++- .../apm/public/hooks/use_theme.tsx | 15 -- .../public/tutorial/config_agent/index.tsx | 2 +- .../tutorial_fleet_instructions/index.tsx | 2 +- .../apm/public/utils/test_helpers.tsx | 14 +- .../observability_solution/infra/emotion.d.ts | 14 -- .../logging/log_minimap/density_chart.tsx | 5 +- .../logging/log_minimap/log_minimap.tsx | 3 +- .../logging/log_minimap/time_ruler.tsx | 4 +- .../infra/tsconfig.json | 1 - .../public/hooks/use_chart_theme.tsx | 10 +- 122 files changed, 866 insertions(+), 959 deletions(-) delete mode 100644 x-pack/plugins/observability_solution/apm/public/hooks/use_theme.tsx delete mode 100644 x-pack/plugins/observability_solution/infra/emotion.d.ts diff --git a/packages/kbn-babel-preset/styled_components_files.js b/packages/kbn-babel-preset/styled_components_files.js index 60dbb2b1053de..6f6e1ddbb14ac 100644 --- a/packages/kbn-babel-preset/styled_components_files.js +++ b/packages/kbn-babel-preset/styled_components_files.js @@ -16,8 +16,8 @@ module.exports = { /packages[\/\\]kbn-ui-shared-deps-(npm|src)[\/\\]/, /src[\/\\]plugins[\/\\](kibana_react)[\/\\]/, /x-pack[\/\\]solutions[\/\\]observability[\/\\]plugins[\/\\](exploratory_view|investigate|investigate_app|observability|observability_ai_assistant_app|observability_ai_assistant_management|observability_solution|serverless_observability|streams|streams_app|synthetics|uptime|ux)[\/\\]/, - /x-pack[\/\\]plugins[\/\\](observability_solution\/apm|beats_management|fleet|observability_solution\/observability|observability_solution\/observability_shared|observability_solution\/exploratory_view|security_solution|timelines|observability_solution\/synthetics|observability_solution\/ux|observability_solution\/uptime)[\/\\]/, - /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\](observability_solution\/apm|beats_management|fleet|observability_solution\/infra|lists|observability_solution\/observability|observability_solution\/observability_shared|observability_solution\/exploratory_view|security_solution|timelines|observability_solution\/synthetics|observability_solution\/ux|observability_solution\/uptime)[\/\\]/, + /x-pack[\/\\]plugins[\/\\](beats_management|fleet|observability_solution\/observability|observability_solution\/observability_shared|observability_solution\/exploratory_view|security_solution|timelines|observability_solution\/synthetics|observability_solution\/ux|observability_solution\/uptime)[\/\\]/, + /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\](beats_management|fleet|lists|observability_solution\/observability|observability_solution\/observability_shared|observability_solution\/exploratory_view|security_solution|timelines|observability_solution\/synthetics|observability_solution\/ux|observability_solution\/uptime)[\/\\]/, /x-pack[\/\\]test[\/\\]plugin_functional[\/\\]plugins[\/\\]resolver_test[\/\\]/, /x-pack[\/\\]packages[\/\\]elastic_assistant[\/\\]/, /x-pack[\/\\]solutions[\/\\]security[\/\\]packages[\/\\]ecs_data_quality_dashboard[\/\\]/, diff --git a/x-pack/.gitignore b/x-pack/.gitignore index 918a6a7d1c388..a5ef4968bd3bb 100644 --- a/x-pack/.gitignore +++ b/x-pack/.gitignore @@ -7,6 +7,7 @@ /test/reporting/configs/failure_debug/ /plugins/reporting/.chromium/ /platform/plugins/shared/screenshotting/chromium/ +/plugins/screenshotting/chromium/ /plugins/reporting/.phantom/ /.aws-config.json /.env 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..65427caba7473 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 @@ -6,7 +6,7 @@ */ import { i18n } from '@kbn/i18n'; -import { EuiTheme } from '@kbn/kibana-react-plugin/common'; +import type { EuiThemeComputed } from '@elastic/eui'; import { ML_ANOMALY_SEVERITY } from '@kbn/ml-anomaly-utils/anomaly_severity'; export enum ServiceHealthStatus { @@ -34,29 +34,35 @@ export function getServiceHealthStatus({ severity }: { severity: ML_ANOMALY_SEVE } } -export function getServiceHealthStatusColor(theme: EuiTheme, status: ServiceHealthStatus) { +export function getServiceHealthStatusColor( + euiTheme: EuiThemeComputed, + status: ServiceHealthStatus +) { switch (status) { case ServiceHealthStatus.healthy: - return theme.eui.euiColorVis0; + return euiTheme.colors.success; case ServiceHealthStatus.warning: - return theme.eui.euiColorVis5; + return euiTheme.colors.warning; case ServiceHealthStatus.critical: - return theme.eui.euiColorVis9; + return euiTheme.colors.danger; case ServiceHealthStatus.unknown: - return theme.eui.euiColorMediumShade; + return euiTheme.colors.mediumShade; } } -export function getServiceHealthStatusBadgeColor(theme: EuiTheme, status: ServiceHealthStatus) { +export function getServiceHealthStatusBadgeColor( + euiTheme: EuiThemeComputed, + status: ServiceHealthStatus +) { switch (status) { case ServiceHealthStatus.healthy: - return theme.eui.euiColorVis0_behindText; + return euiTheme.colors.success; case ServiceHealthStatus.warning: - return theme.eui.euiColorVis5_behindText; + return euiTheme.colors.warning; case ServiceHealthStatus.critical: - return theme.eui.euiColorVis9_behindText; + return euiTheme.colors.danger; case ServiceHealthStatus.unknown: - return theme.eui.euiColorMediumShade; + return euiTheme.colors.mediumShade; } } diff --git a/x-pack/plugins/observability_solution/apm/public/assistant_functions/get_apm_timeseries.tsx b/x-pack/plugins/observability_solution/apm/public/assistant_functions/get_apm_timeseries.tsx index 16d5d077a9b4a..9c29bb936db8a 100644 --- a/x-pack/plugins/observability_solution/apm/public/assistant_functions/get_apm_timeseries.tsx +++ b/x-pack/plugins/observability_solution/apm/public/assistant_functions/get_apm_timeseries.tsx @@ -20,7 +20,6 @@ import type { GetApmTimeseriesFunctionResponse, } from '../../server/assistant_functions/get_apm_timeseries'; import { Coordinate, TimeSeries } from '../../typings/timeseries'; -import { ApmThemeProvider } from '../components/routing/app_root'; import { ChartType, getTimeSeriesColor, @@ -54,101 +53,99 @@ export function registerGetApmTimeseriesFunction({ return ( - - - {Object.values(groupedSeries).map((groupSeries) => { - const groupId = groupSeries[0].group; - - const maxY = getMaxY(groupSeries); - const latencyFormatter = getDurationFormatter(maxY, 10, 1000); - - let yLabelFormat: (value: number) => string; - - const firstStat = groupSeries[0].stat; - - switch (firstStat.timeseries.name) { - case 'transaction_throughput': - case 'exit_span_throughput': - case 'error_event_rate': - yLabelFormat = asTransactionRate; - break; - - case 'transaction_latency': - case 'exit_span_latency': - yLabelFormat = getResponseTimeTickFormatter(latencyFormatter); - break; - - case 'transaction_failure_rate': - case 'exit_span_failure_rate': - yLabelFormat = (y) => asPercent(y || 0, 100); - break; - } - - const timeseries: Array> = groupSeries.map( - (series): TimeSeries => { - let chartType: ChartType; - - const data = series.data; - - switch (series.stat.timeseries.name) { - case 'transaction_throughput': - case 'exit_span_throughput': - chartType = ChartType.THROUGHPUT; - break; - - case 'transaction_failure_rate': - case 'exit_span_failure_rate': - chartType = ChartType.FAILED_TRANSACTION_RATE; - break; - - case 'transaction_latency': - if (series.stat.timeseries.function === LatencyAggregationType.p99) { - chartType = ChartType.LATENCY_P99; - } else if (series.stat.timeseries.function === LatencyAggregationType.p95) { - chartType = ChartType.LATENCY_P95; - } else { - chartType = ChartType.LATENCY_AVG; - } - break; - - case 'exit_span_latency': + + {Object.values(groupedSeries).map((groupSeries) => { + const groupId = groupSeries[0].group; + + const maxY = getMaxY(groupSeries); + const latencyFormatter = getDurationFormatter(maxY, 10, 1000); + + let yLabelFormat: (value: number) => string; + + const firstStat = groupSeries[0].stat; + + switch (firstStat.timeseries.name) { + case 'transaction_throughput': + case 'exit_span_throughput': + case 'error_event_rate': + yLabelFormat = asTransactionRate; + break; + + case 'transaction_latency': + case 'exit_span_latency': + yLabelFormat = getResponseTimeTickFormatter(latencyFormatter); + break; + + case 'transaction_failure_rate': + case 'exit_span_failure_rate': + yLabelFormat = (y) => asPercent(y || 0, 100); + break; + } + + const timeseries: Array> = groupSeries.map( + (series): TimeSeries => { + let chartType: ChartType; + + const data = series.data; + + switch (series.stat.timeseries.name) { + case 'transaction_throughput': + case 'exit_span_throughput': + chartType = ChartType.THROUGHPUT; + break; + + case 'transaction_failure_rate': + case 'exit_span_failure_rate': + chartType = ChartType.FAILED_TRANSACTION_RATE; + break; + + case 'transaction_latency': + if (series.stat.timeseries.function === LatencyAggregationType.p99) { + chartType = ChartType.LATENCY_P99; + } else if (series.stat.timeseries.function === LatencyAggregationType.p95) { + chartType = ChartType.LATENCY_P95; + } else { chartType = ChartType.LATENCY_AVG; - break; - - case 'error_event_rate': - chartType = ChartType.ERROR_OCCURRENCES; - break; - } - - return { - title: series.id, - type: 'line', - color: getTimeSeriesColor(chartType!).currentPeriodColor, - data, - }; + } + break; + + case 'exit_span_latency': + chartType = ChartType.LATENCY_AVG; + break; + + case 'error_event_rate': + chartType = ChartType.ERROR_OCCURRENCES; + break; } - ); - - return ( - - - - {groupId} - - - - - ); - })} - - + + return { + title: series.id, + type: 'line', + color: getTimeSeriesColor(chartType!).currentPeriodColor, + data, + }; + } + ); + + return ( + + + + {groupId} + + + + + ); + })} + ); }); 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..0136fcfb88f39 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 @@ -10,6 +10,8 @@ import { Axis, BarSeries, Chart, + LIGHT_THEME, + DARK_THEME, LineAnnotation, Position, RectAnnotation, @@ -20,7 +22,7 @@ import { Tooltip, niceTimeFormatter, } from '@elastic/charts'; -import { EuiSpacer } from '@elastic/eui'; +import { COLOR_MODES_STANDARD, EuiSpacer, useEuiTheme } from '@elastic/eui'; import React, { useMemo } from 'react'; import { IUiSettingsClient } from '@kbn/core/public'; import { TimeUnitChar } from '@kbn/observability-plugin/common'; @@ -28,7 +30,6 @@ import { UI_SETTINGS } from '@kbn/data-plugin/public'; import moment from 'moment'; import { i18n } from '@kbn/i18n'; import { Coordinate } from '../../../../../typings/timeseries'; -import { useTheme } from '../../../../hooks/use_theme'; import { getTimeZone } from '../../../shared/charts/helper/timezone'; import { TimeLabelForData, TIME_LABELS, getDomain } from './chart_preview_helper'; import { ALERT_PREVIEW_BUCKET_SIZE } from '../../utils/helper'; @@ -52,15 +53,15 @@ export function ChartPreview({ timeUnit = 'm', totalGroups, }: ChartPreviewProps) { - const theme = useTheme(); + const theme = useEuiTheme(); const thresholdOpacity = 0.3; const DEFAULT_DATE_FORMAT = 'Y-MM-DD HH:mm:ss'; const style = { - fill: theme.eui.euiColorVis2, + fill: theme.euiTheme.colors.vis.euiColorVis2, line: { strokeWidth: 2, - stroke: theme.eui.euiColorVis2, + stroke: theme.euiTheme.colors.vis.euiColorVis2, opacity: 1, }, opacity: thresholdOpacity, @@ -121,6 +122,7 @@ export function ChartPreview({ legendPosition={'bottom'} legendSize={legendSize} locale={i18n.getLocale()} + theme={theme.colorMode === COLOR_MODES_STANDARD.dark ? DARK_THEME : LIGHT_THEME} /> setInfoOpen(false), []); - const theme = useTheme(); + const { euiTheme } = useEuiTheme(); const params = useFetchParams(); @@ -280,7 +280,9 @@ export function FieldStatsPopover({ } )} data-test-subj={'apmCorrelationsContextPopoverButton'} - style={{ marginLeft: theme.eui.euiSizeXS }} + css={css` + margin-left: ${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/correlations/failed_transactions_correlations.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/correlations/failed_transactions_correlations.tsx index d02eed810acd0..e6c6ce65dfffd 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 @@ -18,6 +18,7 @@ import { EuiBadge, EuiSwitch, EuiIconTip, + useEuiTheme, } from '@elastic/eui'; import type { EuiTableSortingType } from '@elastic/eui/src/components/basic_table/table_types'; import type { Direction } from '@elastic/eui/src/services/sort/sort_direction'; @@ -34,7 +35,6 @@ import { FailedTransactionsCorrelation } from '../../../../common/correlations/f import { useApmPluginContext } from '../../../context/apm_plugin/use_apm_plugin_context'; import { useLocalStorage } from '../../../hooks/use_local_storage'; import { FETCH_STATUS } from '../../../hooks/use_fetcher'; -import { useTheme } from '../../../hooks/use_theme'; import { push } from '../../shared/links/url_helpers'; import { CorrelationsTable } from './correlations_table'; @@ -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 } = useEuiTheme(); 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 } = useEuiTheme(); 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..f7cd26fab3f81 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 @@ -7,11 +7,11 @@ import { i18n } from '@kbn/i18n'; import { ProcessorEvent } from '@kbn/observability-plugin/common'; import React from 'react'; +import { useEuiTheme } from '@elastic/eui'; import { DEFAULT_PERCENTILE_THRESHOLD } from '../../../../common/correlations/constants'; import { useApmParams } from '../../../hooks/use_apm_params'; import { useFetcher } from '../../../hooks/use_fetcher'; import { useSampleChartSelection } from '../../../hooks/use_sample_chart_selection'; -import { useTheme } from '../../../hooks/use_theme'; import { useTimeRange } from '../../../hooks/use_time_range'; import { DurationDistributionChartData } from '../../shared/charts/duration_distribution_chart'; import { DurationDistributionChartWithScrubber } from '../../shared/charts/duration_distribution_chart_with_scrubber'; @@ -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 } = useEuiTheme(); 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/entity_link.test.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/entities/entity_link/entity_link.test.tsx index 4515c2cdd5714..7bbfb43af71b8 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/app/entities/entity_link/entity_link.test.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/app/entities/entity_link/entity_link.test.tsx @@ -17,7 +17,6 @@ import { fromQuery } from '../../../shared/links/url_helpers'; import { APIReturnType } from '../../../../services/rest/create_call_apm_api'; import { Redirect } from 'react-router-dom'; import { ApmPluginContextValue } from '../../../../context/apm_plugin/apm_plugin_context'; -import { ApmThemeProvider } from '../../../routing/app_root'; import * as useEntityCentricExperienceSetting from '../../../../hooks/use_entity_centric_experience_setting'; jest.mock('react-router-dom', () => ({ @@ -85,9 +84,7 @@ const renderEntityLink = ({ } as unknown as ApmPluginContextValue } > - - - + ); return { rerender, ...tools }; 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()} /> theme.eui.euiSizeS}; +const TransactionLinkName = styled.div` + margin-left: ${({ theme }) => theme.euiTheme.size.s}; display: inline-block; vertical-align: middle; `; diff --git a/x-pack/plugins/observability_solution/apm/public/components/app/error_group_details/error_sampler/exception_stacktrace.test.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/error_group_details/error_sampler/exception_stacktrace.test.tsx index a4c23555edda3..3740edcbfe7d4 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/app/error_group_details/error_sampler/exception_stacktrace.test.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/app/error_group_details/error_sampler/exception_stacktrace.test.tsx @@ -8,6 +8,7 @@ import { composeStories } from '@storybook/testing-react'; import React from 'react'; import { mount } from 'enzyme'; +import { EuiThemeProvider } from '@elastic/eui'; import * as stories from './exception_stacktrace.stories'; import { ExceptionStackTraceTitleProps } from './exception_stacktrace_title'; @@ -17,10 +18,16 @@ describe('ExceptionStacktrace', () => { describe('render', () => { describe('with stacktraces', () => { it('renders the stacktraces', () => { - expect(mount().find('Stacktrace')).toHaveLength(3); + expect( + mount(, { + wrappingComponent: EuiThemeProvider, + }).find('Stacktrace') + ).toHaveLength(3); }); it('should have the title in a specific format', function () { - const wrapper = mount().find('ExceptionStacktraceTitle'); + const wrapper = mount(, { + wrappingComponent: EuiThemeProvider, + }).find('ExceptionStacktraceTitle'); expect(wrapper).toHaveLength(1); const { type, message } = wrapper.props() as ExceptionStackTraceTitleProps; expect(wrapper.text()).toContain(`${type}: ${message}`); @@ -29,7 +36,11 @@ describe('ExceptionStacktrace', () => { describe('with more than one stack trace', () => { it('renders cause stacktraces', () => { - expect(mount().find('CauseStacktrace')).toHaveLength(2); + expect( + mount(, { + wrappingComponent: EuiThemeProvider, + }).find('CauseStacktrace') + ).toHaveLength(2); }); }); }); diff --git a/x-pack/plugins/observability_solution/apm/public/components/app/error_group_details/error_sampler/sample_summary.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/error_group_details/error_sampler/sample_summary.tsx index c7acbfee7e45e..40d9a21bee352 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/app/error_group_details/error_sampler/sample_summary.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/app/error_group_details/error_sampler/sample_summary.tsx @@ -4,17 +4,17 @@ * 2.0; you may not use this file except in compliance with the Elastic License * 2.0. */ -import { EuiText, EuiSpacer, EuiCodeBlock } from '@elastic/eui'; +import { EuiText, EuiSpacer, EuiCodeBlock, useEuiFontSize } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import React from 'react'; -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; import { APMError } from '../../../../../typings/es_schemas/ui/apm_error'; import { NOT_AVAILABLE_LABEL } from '../../../../../common/i18n'; -const Label = euiStyled.div` - margin-bottom: ${({ theme }) => theme.eui.euiSizeXS}; - font-size: ${({ theme }) => theme.eui.euiFontSizeS}; - color: ${({ theme }) => theme.eui.euiColorDarkestShade}; +const Label = styled.div` + margin-bottom: ${({ theme }) => theme.euiTheme.size.xs}; + font-size: ${() => useEuiFontSize('s').fontSize}; + color: ${({ theme }) => theme.euiTheme.colors.darkestShade}; `; interface Props { diff --git a/x-pack/plugins/observability_solution/apm/public/components/app/error_group_overview/error_group_list/index.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/error_group_overview/error_group_list/index.tsx index 51377d5e37709..c6593806191f4 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/app/error_group_overview/error_group_list/index.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/app/error_group_overview/error_group_list/index.tsx @@ -7,7 +7,7 @@ import { EuiBadge, EuiIconTip, EuiToolTip, RIGHT_ALIGNMENT } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; import React, { useMemo, useState } from 'react'; import { apmEnableTableSearchBar } from '@kbn/observability-plugin/common'; import { isPending } from '../../../../hooks/use_fetcher'; @@ -30,25 +30,25 @@ import { isTimeComparison } from '../../../shared/time_comparison/get_comparison import { ErrorGroupItem, useErrorGroupListData } from './use_error_group_list_data'; import { useApmPluginContext } from '../../../../context/apm_plugin/use_apm_plugin_context'; -const GroupIdLink = euiStyled(ErrorDetailLink)` - font-family: ${({ theme }) => theme.eui.euiCodeFontFamily}; +const GroupIdLink = styled(ErrorDetailLink)` + font-family: ${({ theme }) => theme.euiTheme.font.familyCode}; `; -const MessageAndCulpritCell = euiStyled.div` +const MessageAndCulpritCell = styled.div` ${truncate('100%')}; `; -const ErrorLink = euiStyled(ErrorOverviewLink)` +const ErrorLink = styled(ErrorOverviewLink)` ${truncate('100%')}; `; -const MessageLink = euiStyled(ErrorDetailLink)` - font-family: ${({ theme }) => theme.eui.euiCodeFontFamily}; +const MessageLink = styled(ErrorDetailLink)` + font-family: ${({ theme }) => theme.euiTheme.font.familyCode}; ${truncate('100%')}; `; -const Culprit = euiStyled.div` - font-family: ${({ theme }) => theme.eui.euiCodeFontFamily}; +const Culprit = styled.div` + font-family: ${({ theme }) => theme.euiTheme.font.familyCode}; `; interface Props { diff --git a/x-pack/plugins/observability_solution/apm/public/components/app/help_popover/help_popover.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/help_popover/help_popover.tsx index c883376cac4e1..cfb50f983fdbe 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/app/help_popover/help_popover.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/app/help_popover/help_popover.tsx @@ -16,9 +16,9 @@ import { EuiPopoverTitle, EuiText, } from '@elastic/eui'; -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; -const PopoverContent = euiStyled(EuiText)` +const PopoverContent = styled(EuiText)` max-width: 480px; max-height: 40vh; `; diff --git a/x-pack/plugins/observability_solution/apm/public/components/app/infra_overview/infra_tabs/empty_prompt.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/infra_overview/infra_tabs/empty_prompt.tsx index 293dff7b60800..0d212682145f1 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/app/infra_overview/infra_tabs/empty_prompt.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/app/infra_overview/infra_tabs/empty_prompt.tsx @@ -11,12 +11,12 @@ import { EuiDescriptionListTitle, EuiEmptyPrompt, EuiImage, + useEuiTheme, } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import React from 'react'; import noResultsIllustrationDark from '../../../../assets/no_results_dark.svg'; import noResultsIllustrationLight from '../../../../assets/no_results_light.svg'; -import { useTheme } from '../../../../hooks/use_theme'; export function EmptyPrompt() { return ( @@ -52,9 +52,10 @@ export function EmptyPrompt() { } function NoResultsIllustration() { - const theme = useTheme(); + const { colorMode } = useEuiTheme(); - const illustration = theme.darkMode ? noResultsIllustrationDark : noResultsIllustrationLight; + const illustration = + colorMode === 'DARK' ? noResultsIllustrationDark : noResultsIllustrationLight; return ( diff --git a/x-pack/plugins/observability_solution/apm/public/components/app/metrics/jvm_metrics_overview/index.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/metrics/jvm_metrics_overview/index.tsx index 63a1dac2017b3..a936ec601ebea 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/app/metrics/jvm_metrics_overview/index.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/app/metrics/jvm_metrics_overview/index.tsx @@ -7,7 +7,7 @@ import { EuiToolTip, EuiIcon } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import React from 'react'; -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; import { getServiceNodeName, SERVICE_NODE_NAME_MISSING } from '../../../../../common/service_nodes'; import { asDynamicBytes, asInteger, asPercent } from '../../../../../common/utils/formatters'; import { useApmServiceContext } from '../../../../context/apm_service/use_apm_service_context'; @@ -21,7 +21,7 @@ import { ITableColumn, ManagedTable } from '../../../shared/managed_table'; const INITIAL_SORT_FIELD = 'cpu'; const INITIAL_SORT_DIRECTION = 'desc'; -const ServiceNodeName = euiStyled.div` +const ServiceNodeName = styled.div` ${truncate(8 * unit)} `; diff --git a/x-pack/plugins/observability_solution/apm/public/components/app/metrics/serverless_metrics/serverless_function_name_link.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/metrics/serverless_metrics/serverless_function_name_link.tsx index 2de5991b19b47..eb1ab41f1dfa0 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/app/metrics/serverless_metrics/serverless_function_name_link.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/app/metrics/serverless_metrics/serverless_function_name_link.tsx @@ -5,14 +5,16 @@ * 2.0. */ import { EuiLink } from '@elastic/eui'; -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; import React from 'react'; import { useApmServiceContext } from '../../../../context/apm_service/use_apm_service_context'; import { useApmParams } from '../../../../hooks/use_apm_params'; import { useApmRouter } from '../../../../hooks/use_apm_router'; import { truncate } from '../../../../utils/style'; -const StyledLink = euiStyled(EuiLink)`${truncate('100%')};`; +const StyledLink = styled(EuiLink)` + ${truncate('100%')}; +`; interface Props { serverlessFunctionName: string; diff --git a/x-pack/plugins/observability_solution/apm/public/components/app/metrics/serverless_metrics/serverless_summary.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/metrics/serverless_metrics/serverless_summary.tsx index ab662e53d9d82..30544489eb0da 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/app/metrics/serverless_metrics/serverless_summary.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/app/metrics/serverless_metrics/serverless_summary.tsx @@ -15,7 +15,7 @@ import { } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import React from 'react'; -import styled from 'styled-components'; +import styled from '@emotion/styled'; import { asMillisecondDuration, asPercent } from '../../../../../common/utils/formatters'; import { useApmServiceContext } from '../../../../context/apm_service/use_apm_service_context'; import { useApmParams } from '../../../../hooks/use_apm_params'; @@ -34,7 +34,7 @@ const CentralizedContainer = styled.div` const Border = styled.div` height: 55px; - border-right: 1px solid ${({ theme }) => theme.eui.euiColorLightShade}; + border-right: ${({ theme }) => theme.euiTheme.border.thin}; `; function VerticalRule() { diff --git a/x-pack/plugins/observability_solution/apm/public/components/app/metrics_details/service_node_metrics/index.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/metrics_details/service_node_metrics/index.tsx index 89ffc3b0be3f2..e01dc55447f27 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/app/metrics_details/service_node_metrics/index.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/app/metrics_details/service_node_metrics/index.tsx @@ -20,7 +20,7 @@ import { } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n-react'; -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; import React from 'react'; import { ApmDocumentType } from '../../../../../common/document_type'; import { getServiceNodeName, SERVICE_NODE_NAME_MISSING } from '../../../../../common/service_nodes'; @@ -42,7 +42,7 @@ const INITIAL_DATA = { containerId: '', }; -const Truncate = euiStyled.span` +const Truncate = styled.span` display: block; ${truncate(unit * 12)} `; diff --git a/x-pack/plugins/observability_solution/apm/public/components/app/mobile/errors_and_crashes_overview/crash_group_list/crash_group_list.test.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/mobile/errors_and_crashes_overview/crash_group_list/crash_group_list.test.tsx index cd1d4110e32fc..aab5a3a3af208 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/app/mobile/errors_and_crashes_overview/crash_group_list/crash_group_list.test.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/app/mobile/errors_and_crashes_overview/crash_group_list/crash_group_list.test.tsx @@ -6,14 +6,14 @@ */ import { composeStories } from '@storybook/testing-react'; -import { render } from '@testing-library/react'; import React from 'react'; import * as stories from './crash_group_list.stories'; +import { renderWithTheme } from '../../../../../utils/test_helpers'; const { Example } = composeStories(stories); describe('MobileCrashGroupList', () => { it('renders', () => { - expect(() => render()).not.toThrowError(); + expect(() => renderWithTheme()).not.toThrowError(); }); }); diff --git a/x-pack/plugins/observability_solution/apm/public/components/app/mobile/errors_and_crashes_overview/crash_group_list/index.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/mobile/errors_and_crashes_overview/crash_group_list/index.tsx index 4923ed35a6d4b..403a5ff03db7f 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/app/mobile/errors_and_crashes_overview/crash_group_list/index.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/app/mobile/errors_and_crashes_overview/crash_group_list/index.tsx @@ -7,7 +7,7 @@ import { EuiToolTip, RIGHT_ALIGNMENT, LEFT_ALIGNMENT, EuiIconTip } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; import React, { useMemo } from 'react'; import { NOT_AVAILABLE_LABEL } from '../../../../../../common/i18n'; import { asInteger } from '../../../../../../common/utils/formatters'; @@ -25,20 +25,20 @@ import { ITableColumn, ManagedTable } from '../../../../shared/managed_table'; import { TimestampTooltip } from '../../../../shared/timestamp_tooltip'; import { isTimeComparison } from '../../../../shared/time_comparison/get_comparison_options'; -const MessageAndCulpritCell = euiStyled.div` +const MessageAndCulpritCell = styled.div` ${truncate('100%')}; `; -const ErrorLink = euiStyled(ErrorOverviewLink)` +const ErrorLink = styled(ErrorOverviewLink)` ${truncate('100%')}; `; -const GroupIdLink = euiStyled(CrashDetailLink)` - font-family: ${({ theme }) => theme.eui.euiCodeFontFamily}; +const GroupIdLink = styled(CrashDetailLink)` + font-family: ${({ theme }) => theme.euiTheme.font.familyCode}; `; -const MessageLink = euiStyled(CrashDetailLink)` - font-family: ${({ theme }) => theme.eui.euiCodeFontFamily}; +const MessageLink = styled(CrashDetailLink)` + font-family: ${({ theme }) => theme.euiTheme.font.familyCode}; ${truncate('100%')}; `; diff --git a/x-pack/plugins/observability_solution/apm/public/components/app/mobile/errors_and_crashes_overview/error_group_list/error_group_list.test.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/mobile/errors_and_crashes_overview/error_group_list/error_group_list.test.tsx index 278825c25c68c..92cad40623c0b 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/app/mobile/errors_and_crashes_overview/error_group_list/error_group_list.test.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/app/mobile/errors_and_crashes_overview/error_group_list/error_group_list.test.tsx @@ -6,14 +6,14 @@ */ import { composeStories } from '@storybook/testing-react'; -import { render } from '@testing-library/react'; import React from 'react'; import * as stories from './error_group_list.stories'; +import { renderWithTheme } from '../../../../../utils/test_helpers'; const { Example } = composeStories(stories); describe('ErrorGroupList', () => { it('renders', () => { - expect(() => render()).not.toThrowError(); + expect(() => renderWithTheme()).not.toThrowError(); }); }); diff --git a/x-pack/plugins/observability_solution/apm/public/components/app/mobile/errors_and_crashes_overview/error_group_list/index.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/mobile/errors_and_crashes_overview/error_group_list/index.tsx index 0938c97d737d2..7153b673b3195 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/app/mobile/errors_and_crashes_overview/error_group_list/index.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/app/mobile/errors_and_crashes_overview/error_group_list/index.tsx @@ -7,7 +7,7 @@ import { EuiBadge, EuiToolTip, RIGHT_ALIGNMENT, LEFT_ALIGNMENT, EuiIconTip } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; import React, { useMemo } from 'react'; import { NOT_AVAILABLE_LABEL } from '../../../../../../common/i18n'; import { asInteger } from '../../../../../../common/utils/formatters'; @@ -25,20 +25,20 @@ import { ITableColumn, ManagedTable } from '../../../../shared/managed_table'; import { TimestampTooltip } from '../../../../shared/timestamp_tooltip'; import { isTimeComparison } from '../../../../shared/time_comparison/get_comparison_options'; -const GroupIdLink = euiStyled(ErrorDetailLink)` - font-family: ${({ theme }) => theme.eui.euiCodeFontFamily}; +const GroupIdLink = styled(ErrorDetailLink)` + font-family: ${({ theme }) => theme.euiTheme.font.familyCode}; `; -const MessageAndCulpritCell = euiStyled.div` +const MessageAndCulpritCell = styled.div` ${truncate('100%')}; `; -const ErrorLink = euiStyled(ErrorOverviewLink)` +const ErrorLink = styled(ErrorOverviewLink)` ${truncate('100%')}; `; -const MessageLink = euiStyled(ErrorDetailLink)` - font-family: ${({ theme }) => theme.eui.euiCodeFontFamily}; +const MessageLink = styled(ErrorDetailLink)` + font-family: ${({ theme }) => theme.euiTheme.font.familyCode}; ${truncate('100%')}; `; 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_groups/service_group_save/select_services.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/service_groups/service_group_save/select_services.tsx index b6a901bac8d2f..38f681921a6c6 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/app/service_groups/service_group_save/select_services.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/app/service_groups/service_group_save/select_services.tsx @@ -23,7 +23,7 @@ import { import { i18n } from '@kbn/i18n'; import { css } from '@emotion/react'; import React, { useEffect, useState, useMemo } from 'react'; -import styled from 'styled-components'; +import styled from '@emotion/styled'; import { isEmpty } from 'lodash'; import { FETCH_STATUS, useFetcher } from '../../../../hooks/use_fetcher'; import { KueryBar } from '../../../shared/kuery_bar'; 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.test.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/service_map/controls.test.tsx index 21d7bbf6d1201..71d3f7aa271d0 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/app/service_map/controls.test.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/app/service_map/controls.test.tsx @@ -5,15 +5,13 @@ * 2.0. */ -import { euiLightVars as lightTheme } from '@kbn/ui-theme'; -import { render } from '@testing-library/react'; import cytoscape from 'cytoscape'; import React, { ReactNode } from 'react'; import { MemoryRouter } from 'react-router-dom'; -import { ThemeContext } from 'styled-components'; import { MockApmPluginContextWrapper } from '../../../context/apm_plugin/mock_apm_plugin_context'; import { Controls } from './controls'; import { CytoscapeContext } from './cytoscape'; +import { renderWithTheme } from '../../../utils/test_helpers'; const cy = cytoscape({ elements: [{ classes: 'primary', data: { id: 'test node' } }], @@ -27,11 +25,8 @@ function Wrapper({ children }: { children?: ReactNode }) { '/service-map?rangeFrom=now-15m&rangeTo=now&environment=ENVIRONMENT_ALL&kuery=', ]} > - - {children} - + {children} - s ); } @@ -39,7 +34,7 @@ function Wrapper({ children }: { children?: ReactNode }) { describe('Controls', () => { describe('with a primary node', () => { it('links to the full map', async () => { - const result = render(, { wrapper: Wrapper }); + const result = renderWithTheme(, { wrapper: Wrapper }); const { findByTestId } = result; const button = await findByTestId('viewFullMapButton'); 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..e3a293a279e2c 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 { euiStyled } from '@kbn/kibana-react-plugin/common'; +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'; @@ -18,24 +17,24 @@ import { CytoscapeContext } from './cytoscape'; import { getAnimationOptions, getNodeHeight } from './cytoscape_options'; import { useAnyOfApmParams } from '../../../hooks/use_apm_params'; -const ControlsContainer = euiStyled('div')` - left: ${({ theme }) => theme.eui.euiSize}; +const ControlsContainer = styled('div')` + left: ${({ theme }) => theme.euiTheme.size.base}; position: absolute; - top: ${({ theme }) => theme.eui.euiSizeS}; + top: ${({ theme }) => theme.euiTheme.size.s}; z-index: 1; /* The element containing the cytoscape canvas has z-index = 0. */ `; -const Button = euiStyled(EuiButtonIcon)` +const Button = styled(EuiButtonIcon)` display: block; - margin: ${({ theme }) => theme.eui.euiSizeXS}; + margin: ${({ theme }) => theme.euiTheme.size.xs}; `; -const ZoomInButton = euiStyled(Button)` - margin-bottom: ${({ theme }) => theme.eui.euiSizeS}; +const ZoomInButton = styled(Button)` + margin-bottom: ${({ theme }) => theme.euiTheme.size.s}; `; -const Panel = euiStyled(EuiPanel)` - margin-bottom: ${({ theme }) => theme.eui.euiSizeS}; +const Panel = styled(EuiPanel)` + margin-bottom: ${({ theme }) => theme.euiTheme.size.s}; `; const steps = 5; @@ -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,7 @@ export function Controls() { ); const [zoom, setZoom] = useState((cy && cy.zoom()) || 1); - const duration = parseInt(theme.eui.euiAnimSpeedFast, 10); + const duration = euiTheme.animation.fast ? parseInt(euiTheme.animation.fast, 10) : 0; const downloadUrl = useDebugDownloadUrl(cy); const viewFullMapUrl = getLegacyApmHref({ basePath, @@ -140,9 +139,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 af0befbc06165..fa6fdbce3c76c 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 type { EuiThemeComputed } 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 + euiTheme: EuiThemeComputed ): cytoscape.Css.MapperFunction { return (el: cytoscape.NodeSingular) => { const hasAnomalyDetectionJob = el.data('serviceAnomalyStats') !== undefined; const anomalyStats = getServiceAnomalyStats(el); if (hasAnomalyDetectionJob) { return getServiceHealthStatusColor( - theme, + euiTheme, anomalyStats?.healthStatus ?? ServiceHealthStatus.unknown ); } if (el.hasClass('primary') || el.selected()) { - return theme.eui.euiColorPrimary; + return euiTheme.colors.primary; } - return theme.eui.euiColorMediumShade; + return 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 = (euiTheme: EuiThemeComputed): cytoscape.AnimationOptions => ({ + duration: euiTheme.animation.normal ? parseInt(euiTheme.animation.normal, 10) : 0, // @ts-expect-error The cubic-bezier options here are not recognized by the cytoscape types - easing: theme.eui.euiAnimSlightBounce, + easing: euiTheme.animation.bounce, }); const zIndexNode = 200; @@ -90,14 +90,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', @@ -107,46 +111,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.textParagraph, // 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, }, }, @@ -162,7 +166,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, @@ -175,8 +179,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), }, }, { @@ -190,9 +194,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 @@ -202,9 +206,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, }, }, ] @@ -219,9 +223,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, }, }, @@ -230,32 +234,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 7d419baecc9eb..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,26 +6,22 @@ */ 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 { euiStyled } from '@kbn/kibana-react-plugin/common'; 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 } = useEuiTheme(); const cy = useContext(CytoscapeContext); const [nodeCount, setNodeCount] = useState(0); const { docLinks } = useApmPluginContext().core; @@ -51,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/anomaly_detection.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/service_map/popover/anomaly_detection.tsx index 307887148e3e8..562093976177a 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 @@ -5,10 +5,18 @@ * 2.0. */ -import { EuiFlexGroup, EuiFlexItem, EuiHealth, EuiIconTip, EuiTitle } from '@elastic/eui'; +import { + EuiFlexGroup, + EuiFlexItem, + EuiHealth, + EuiIconTip, + EuiTitle, + useEuiFontSize, + useEuiTheme, +} from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import React from 'react'; -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; import { getSeverity, ServiceAnomalyStats } from '../../../../../common/anomaly_detection'; import { getServiceHealthStatus, @@ -16,32 +24,31 @@ import { } from '../../../../../common/service_health_status'; import { TRANSACTION_REQUEST } from '../../../../../common/transaction_types'; import { asDuration, asInteger } from '../../../../../common/utils/formatters'; -import { useTheme } from '../../../../hooks/use_theme'; import { MLSingleMetricLink } from '../../../shared/links/machine_learning_links/mlsingle_metric_link'; import { popoverWidth } from '../cytoscape_options'; -const HealthStatusTitle = euiStyled(EuiTitle)` +const HealthStatusTitle = styled(EuiTitle)` display: inline; text-transform: uppercase; `; -const VerticallyCentered = euiStyled.div` +const VerticallyCentered = styled.div` display: flex; align-items: center; `; -const SubduedText = euiStyled.span` - color: ${({ theme }) => theme.eui.euiTextSubduedColor}; +const SubduedText = styled.span` + color: ${({ theme }) => theme.euiTheme.colors.textSubdued}; `; -const EnableText = euiStyled.section` - color: ${({ theme }) => theme.eui.euiTextSubduedColor}; +const EnableText = styled.section` + color: ${({ theme }) => theme.euiTheme.colors.textSubdued}; line-height: 1.4; - font-size: ${({ theme }) => theme.eui.euiFontSizeS}; + font-size: ${() => useEuiFontSize('s').fontSize}; width: ${popoverWidth}px; `; -export const ContentLine = euiStyled.section` +export const ContentLine = styled.section` line-height: 2; `; @@ -50,7 +57,7 @@ interface Props { serviceAnomalyStats: ServiceAnomalyStats | undefined; } export function AnomalyDetection({ serviceName, serviceAnomalyStats }: Props) { - const theme = useTheme(); + const { euiTheme } = useEuiTheme(); const anomalyScore = serviceAnomalyStats?.anomalyScore; const severity = getSeverity(anomalyScore); @@ -76,7 +83,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/popover/externals_list_contents.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/service_map/popover/externals_list_contents.tsx index 523a4e1ea415e..a81df94c3d6f0 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/app/service_map/popover/externals_list_contents.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/app/service_map/popover/externals_list_contents.tsx @@ -12,7 +12,7 @@ import { EuiFlexItem, } from '@elastic/eui'; import React, { Fragment } from 'react'; -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; import { NodeDataDefinition } from 'cytoscape'; import { ContentsProps } from '.'; import { @@ -22,7 +22,7 @@ import { } from '../../../../../common/es_fields/apm'; import { ExternalConnectionNode } from '../../../../../common/service_map'; -const ExternalResourcesList = euiStyled.section` +const ExternalResourcesList = styled.section` max-height: 360px; overflow: auto; `; 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/popover/popover.test.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/service_map/popover/popover.test.tsx index 2bafca33d06f8..1e8f1f7b5d0ee 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/app/service_map/popover/popover.test.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/app/service_map/popover/popover.test.tsx @@ -6,16 +6,17 @@ */ import { composeStories } from '@storybook/testing-react'; -import { render, screen, waitFor } from '@testing-library/react'; +import { screen, waitFor } from '@testing-library/react'; import React from 'react'; import * as stories from './popover.stories'; +import { renderWithTheme } from '../../../../utils/test_helpers'; const { Dependency, ExternalsList, Resource, Service } = composeStories(stories); describe('Popover', () => { describe('with dependency data', () => { it('renders a dependency link', async () => { - render(); + renderWithTheme(); await waitFor(() => { expect(screen.getByRole('link', { name: /Dependency Details/i })).toBeInTheDocument(); @@ -25,7 +26,7 @@ describe('Popover', () => { describe('with externals list data', () => { it('renders an externals list', async () => { - render(); + renderWithTheme(); await waitFor(() => { expect(screen.getByText(/813-mam-392.mktoresp.com:443/)).toBeInTheDocument(); @@ -35,7 +36,7 @@ describe('Popover', () => { describe('with resource data', () => { it('renders with no buttons', async () => { - render(); + renderWithTheme(); await waitFor(() => { expect(screen.queryByRole('link')).not.toBeInTheDocument(); @@ -45,7 +46,7 @@ describe('Popover', () => { describe('with service data', () => { it('renders contents for a service', async () => { - render(); + renderWithTheme(); await waitFor(() => { expect(screen.getByRole('link', { name: /service details/i })).toBeInTheDocument(); diff --git a/x-pack/plugins/observability_solution/apm/public/components/app/service_map/popover/resource_contents.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/service_map/popover/resource_contents.tsx index fb1414382ed57..272a5e97dfd1a 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/app/service_map/popover/resource_contents.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/app/service_map/popover/resource_contents.tsx @@ -8,18 +8,18 @@ import { EuiDescriptionListDescription, EuiDescriptionListTitle } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import React from 'react'; -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; import { NodeDataDefinition } from 'cytoscape'; import type { ContentsProps } from '.'; import { SPAN_SUBTYPE, SPAN_TYPE } from '../../../../../common/es_fields/apm'; -const ItemRow = euiStyled.div` +const ItemRow = styled.div` line-height: 2; `; -const SubduedDescriptionListTitle = euiStyled(EuiDescriptionListTitle)` +const SubduedDescriptionListTitle = styled(EuiDescriptionListTitle)` &&& { - color: ${({ theme }) => theme.eui.euiTextSubduedColor}; + color: ${({ theme }) => theme.euiTheme.colors.textSubdued}; } `; 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..c7df75312c79b 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,25 @@ 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 } } }, + animation: { normal: '1s' }, +} 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 +46,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 +67,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 +86,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 +98,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 +111,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 +127,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 +141,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 +154,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 +169,7 @@ describe('useCytoscapeEventHandlers', () => { return fn; }); - renderHook(() => useCytoscapeEventHandlers({ cy, theme })); + renderHook(() => useCytoscapeEventHandlers({ cy, euiTheme })); cy.getElementById('test').trigger('mouseover'); expect(trackApmEvent).toHaveBeenCalledWith({ @@ -184,7 +185,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 +198,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 +219,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 +236,7 @@ describe('useCytoscapeEventHandlers', () => { return fn; }); - renderHook(() => useCytoscapeEventHandlers({ cy, theme })); + renderHook(() => useCytoscapeEventHandlers({ cy, euiTheme })); cy.getElementById('test').trigger('select'); expect(trackApmEvent).toHaveBeenCalledWith({ @@ -258,7 +259,7 @@ describe('useCytoscapeEventHandlers', () => { useCytoscapeEventHandlers({ serviceName: 'test', cy, - theme, + euiTheme, }) ); cy.getElementById('test').trigger('unselect'); @@ -275,7 +276,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 +290,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 +306,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 +320,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 +335,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.test.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/service_overview/service_overview.test.tsx index 98cdc1e65c3a2..71974cfbe75bd 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/app/service_overview/service_overview.test.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/app/service_overview/service_overview.test.tsx @@ -6,10 +6,11 @@ */ import { composeStories } from '@storybook/testing-react'; -import { render, screen } from '@testing-library/react'; +import { screen } from '@testing-library/react'; import React from 'react'; import * as stories from './service_overview.stories'; import * as useAdHocApmDataView from '../../../hooks/use_adhoc_apm_data_view'; +import { renderWithTheme } from '../../../utils/test_helpers'; const { Example } = composeStories(stories); @@ -32,7 +33,7 @@ describe('ServiceOverview', () => { jest.clearAllMocks(); }); it('renders', async () => { - render(); + renderWithTheme(); expect(await screen.findByRole('heading', { name: 'Latency' })).toBeInTheDocument(); }); 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/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/top_traces_overview/trace_list.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/top_traces_overview/trace_list.tsx index 9b3d54d4efad5..74461fcb7920f 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/app/top_traces_overview/trace_list.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/app/top_traces_overview/trace_list.tsx @@ -5,12 +5,12 @@ * 2.0. */ -import { EuiIcon, EuiToolTip, RIGHT_ALIGNMENT } from '@elastic/eui'; +import { EuiIcon, EuiToolTip, RIGHT_ALIGNMENT, useEuiFontSize } from '@elastic/eui'; import { usePerformanceContext } from '@kbn/ebt-tools'; import { TypeOf } from '@kbn/typed-react-router-config'; import { i18n } from '@kbn/i18n'; import React, { useEffect, useMemo } from 'react'; -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; import { ApmRoutes } from '../../routing/apm_route_config'; import { asMillisecondDuration, asTransactionRate } from '../../../../common/utils/formatters'; import { useApmParams } from '../../../hooks/use_apm_params'; @@ -25,8 +25,8 @@ import { ServiceLink } from '../../shared/links/apm/service_link'; import { TruncateWithTooltip } from '../../shared/truncate_with_tooltip'; import { NOT_AVAILABLE_LABEL } from '../../../../common/i18n'; -const StyledTransactionLink = euiStyled(TransactionDetailLink)` - font-size: ${({ theme }) => theme.eui.euiFontSizeS}; +const StyledTransactionLink = styled(TransactionDetailLink)` + font-size: ${() => useEuiFontSize('s').fontSize}; ${truncate('100%')}; `; diff --git a/x-pack/plugins/observability_solution/apm/public/components/app/trace_link/index.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/trace_link/index.tsx index 74b3975335c90..b1d1b0f8d745b 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/app/trace_link/index.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/app/trace_link/index.tsx @@ -9,7 +9,7 @@ import { EuiEmptyPrompt } from '@elastic/eui'; import React from 'react'; import { i18n } from '@kbn/i18n'; import { Redirect } from 'react-router-dom'; -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; import { useKibana } from '@kbn/kibana-react-plugin/public'; import { FETCH_STATUS, useFetcher } from '../../../hooks/use_fetcher'; import { getRedirectToTransactionDetailPageUrl } from './get_redirect_to_transaction_detail_page_url'; @@ -18,7 +18,7 @@ import { useApmParams } from '../../../hooks/use_apm_params'; import { useTimeRange } from '../../../hooks/use_time_range'; import { ApmPluginStartDeps } from '../../../plugin'; -const CentralizedContainer = euiStyled.div` +const CentralizedContainer = styled.div` height: 100%; display: flex; `; 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..25acce3e56798 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 @@ -7,6 +7,7 @@ import { useEffect } from 'react'; import { i18n } from '@kbn/i18n'; +import { useEuiTheme } from '@elastic/eui'; import { DEFAULT_PERCENTILE_THRESHOLD } from '../../../../../common/correlations/constants'; import { EVENT_OUTCOME } from '../../../../../common/es_fields/apm'; import { EventOutcome } from '../../../../../common/event_outcome'; @@ -16,11 +17,10 @@ import { useFetcher, FETCH_STATUS } from '../../../../hooks/use_fetcher'; import { isErrorMessage } from '../../correlations/utils/is_error_message'; import { useFetchParams } from '../../correlations/use_fetch_params'; import { getTransactionDistributionChartData } from '../../correlations/get_transaction_distribution_chart_data'; -import { useTheme } from '../../../../hooks/use_theme'; export const useTransactionDistributionChartData = () => { const params = useFetchParams(); - const euiTheme = useTheme(); + const { euiTheme } = useEuiTheme(); 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..41d11ba74e2e1 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 { euiStyled } from '@kbn/kibana-react-plugin/common'; 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,38 +52,6 @@ interface WaterfallNodeProps extends WaterfallProps { const ACCORDION_HEIGHT = 48; -const StyledAccordion = euiStyled(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, @@ -176,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(); @@ -190,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, })); @@ -203,14 +170,14 @@ const WaterfallNode = React.memo((props: WaterfallNodeProps) => { onClickWaterfallItem(node.item, flyoutDetailTab); }; + const hasError = node.item.doc.event?.outcome === 'failure'; + return ( - @@ -243,6 +210,24 @@ const WaterfallNode = React.memo((props: WaterfallNodeProps) => { initialIsOpen forceState={node.expanded ? 'open' : 'closed'} onToggle={toggleAccordion} + css={css` + border-top: ${euiTheme.border.thin}; + .button_${node.item.id} { + width: 100%; + height: ${ACCORDION_HEIGHT}px; + margin-left: ${marginLeftLevel}px; + border-left: ${hasError + ? `${euiTheme.border.width.thick} solid ${euiTheme.colors.danger};` + : `${euiTheme.border.thin};`}; + &: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 29dd5ffde6547..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 { euiStyled } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; import { EventOutcome } from '../../../../../../../typings/es_schemas/raw/fields/event_outcome'; -import { useTheme } from '../../../../../../hooks/use_theme'; -const ResetLineHeight = euiStyled.span` +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,11 @@ export function FailureBadge({ outcome }: { outcome?: EventOutcome }) { defaultMessage: 'event.outcome = failure', })} > - 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 dbdc877742e1c..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 { euiStyled } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; import { css } from '@emotion/react'; -import { useTheme } from '../../../../../../hooks/use_theme'; import { VerticalLinesContainer, TimelineAxisContainer, @@ -24,7 +23,7 @@ import { AccordionWaterfall } from './accordion_waterfall'; import { WaterfallFlyout } from './waterfall_flyout'; import { IWaterfall, IWaterfallItem } from './waterfall_helpers/waterfall_helpers'; -const Container = euiStyled.div` +const Container = styled.div` transition: 0.1s padding ease; position: relative; `; @@ -48,8 +47,8 @@ const toggleFlyout = ({ }); }; -const WaterfallItemsContainer = euiStyled.div` - border-bottom: 1px solid ${({ theme }) => theme.eui.euiColorMediumShade}; +const WaterfallItemsContainer = styled.div` + border-bottom: 1px solid ${({ theme }) => theme.euiTheme.colors.mediumShade}; `; interface Props { @@ -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/responsive_flyout.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/responsive_flyout.tsx index 16a80ce09efd0..3c3440b7833cf 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/responsive_flyout.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/responsive_flyout.tsx @@ -5,10 +5,21 @@ * 2.0. */ -import { EuiFlyout } from '@elastic/eui'; -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +import React from 'react'; +import { EuiFlyout, EuiFlyoutProps } from '@elastic/eui'; +import styled, { type StyledComponent } from '@emotion/styled'; -export const ResponsiveFlyout = euiStyled(EuiFlyout)` +// The return type of this component needs to be specified because the inferred +// return type depends on types that are not exported from EUI. You get a TS4023 +// error if the return type is not specified. +export const ResponsiveFlyout: StyledComponent = styled( + ({ + className, + ...flyoutProps + }: { + className?: string; + } & EuiFlyoutProps) => +)` width: 100%; @media (min-width: 800px) { diff --git a/x-pack/plugins/observability_solution/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/span_flyout/index.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/span_flyout/index.tsx index e4c9f0cf2816e..f412df0b099bb 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/span_flyout/index.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/span_flyout/index.tsx @@ -21,7 +21,7 @@ import { EuiToolTip, } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; import { ProcessorEvent } from '@kbn/observability-plugin/common'; import { isEmpty } from 'lodash'; import React, { Fragment } from 'react'; @@ -80,10 +80,10 @@ function getSpanTypes(span: Span) { }; } -const ContainerWithMarginRight = euiStyled.div` +const ContainerWithMarginRight = styled.div` /* add margin to all direct descendants */ & > * { - margin-right: ${({ theme }) => theme.eui.euiSizeXS}; + margin-right: ${({ theme }) => theme.euiTheme.size.xs}; } `; diff --git a/x-pack/plugins/observability_solution/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/span_flyout/truncate_height_section.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/span_flyout/truncate_height_section.tsx index 6416b6f24cf67..214cc8841b2c2 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/span_flyout/truncate_height_section.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall/span_flyout/truncate_height_section.tsx @@ -8,10 +8,10 @@ import { EuiIcon, EuiLink } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import React, { Fragment, ReactNode, useEffect, useRef, useState } from 'react'; -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; -const ToggleButtonContainer = euiStyled.div` - margin-top: ${({ theme }) => theme.eui.euiSizeS} +const ToggleButtonContainer = styled.div` + margin-top: ${({ theme }) => theme.euiTheme.size.s} user-select: none; `; 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..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 { euiStyled } from '@kbn/kibana-react-plugin/common'; -import { useTheme } from '../../../../../../hooks/use_theme'; +import styled from '@emotion/styled'; import { isMobileAgentName, isRumAgentName } from '../../../../../../../common/agent_name'; import { TRACE_ID, TRANSACTION_ID } from '../../../../../../../common/es_fields/apm'; import { asDuration } from '../../../../../../../common/utils/formatters'; @@ -37,68 +36,68 @@ interface IBarStyleProps { color: string; } -const Container = euiStyled.div` +const Container = styled.div` position: relative; display: block; user-select: none; - padding-top: ${({ theme }) => theme.eui.euiSizeS}; - padding-bottom: ${({ theme }) => theme.eui.euiSizeM}; + padding-top: ${({ theme }) => theme.euiTheme.size.s}; + padding-bottom: ${({ theme }) => theme.euiTheme.size.m}; margin-right: ${(props) => props.timelineMargins.right}px; margin-left: ${(props) => props.hasToggle ? props.timelineMargins.left - 30 // fix margin if there is a toggle - : props.timelineMargins.left}px ; + : props.timelineMargins.left}px; background-color: ${({ isSelected, theme }) => - isSelected ? theme.eui.euiColorLightestShade : 'initial'}; + isSelected ? theme.euiTheme.colors.lightestShade : 'initial'}; cursor: pointer; &:hover { - background-color: ${({ theme }) => theme.eui.euiColorLightestShade}; + background-color: ${({ theme }) => theme.euiTheme.colors.lightestShade}; } `; -const ItemBar = euiStyled.div` +const ItemBar = styled.div` box-sizing: border-box; position: relative; - height: ${({ theme }) => theme.eui.euiSize}; + height: ${({ theme }) => theme.euiTheme.size.base}; min-width: 2px; background-color: ${(props) => props.color}; `; -const ItemText = euiStyled.span` +const ItemText = styled.span` position: absolute; right: 0; display: flex; align-items: center; - height: ${({ theme }) => theme.eui.euiSizeL}; + height: ${({ theme }) => theme.euiTheme.size.l}; max-width: 100%; /* add margin to all direct descendants */ & > * { - margin-right: ${({ theme }) => theme.eui.euiSizeS}; + margin-right: ${({ theme }) => theme.euiTheme.size.s}; white-space: nowrap; } `; -const CriticalPathItemBar = euiStyled.div` +const CriticalPathItemBar = styled.div` box-sizing: border-box; position: relative; - height: ${({ theme }) => theme.eui.euiSizeS}; - top : ${({ theme }) => theme.eui.euiSizeS}; + height: ${({ theme }) => theme.euiTheme.size.s}; + top: ${({ theme }) => theme.euiTheme.size.s}; min-width: 2px; background-color: transparent; display: flex; flex-direction: row; `; -const CriticalPathItemSegment = euiStyled.div<{ +const CriticalPathItemSegment = styled.div<{ left: number; width: number; color: string; }>` box-sizing: border-box; position: absolute; - height: ${({ theme }) => theme.eui.euiSizeS}; + height: ${({ theme }) => theme.euiTheme.size.s}; left: ${(props) => props.left * 100}%; width: ${(props) => props.width * 100}%; min-width: 2px; @@ -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/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall_container.test.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall_container.test.tsx index 4a46d708bb823..e14f185e2f6f9 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall_container.test.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/waterfall_container.test.tsx @@ -6,9 +6,9 @@ */ import { composeStories } from '@storybook/testing-react'; -import { render, waitFor } from '@testing-library/react'; +import { waitFor } from '@testing-library/react'; import React from 'react'; -import { disableConsoleWarning } from '../../../../../utils/test_helpers'; +import { disableConsoleWarning, renderWithTheme } from '../../../../../utils/test_helpers'; import * as stories from './waterfall_container.stories'; const { Example } = composeStories(stories); @@ -25,7 +25,7 @@ describe('WaterfallContainer', () => { }); it('expands and contracts the accordion', async () => { - const { getAllByRole } = render(); + const { getAllByRole } = renderWithTheme(); const buttons = await waitFor(() => getAllByRole('button')); const parentItem = buttons[1]; const childItem = buttons[2]; diff --git a/x-pack/plugins/observability_solution/apm/public/components/app/transaction_link/index.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/transaction_link/index.tsx index 74ad3ffbe3d15..d05085f0b8231 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/app/transaction_link/index.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/app/transaction_link/index.tsx @@ -7,14 +7,15 @@ import { EuiEmptyPrompt } from '@elastic/eui'; import React from 'react'; +import { i18n } from '@kbn/i18n'; import { Redirect } from 'react-router-dom'; -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; import { FETCH_STATUS, useFetcher } from '../../../hooks/use_fetcher'; import { getRedirectToTransactionDetailPageUrl } from '../trace_link/get_redirect_to_transaction_detail_page_url'; import { useApmParams } from '../../../hooks/use_apm_params'; import { useTimeRange } from '../../../hooks/use_time_range'; -const CentralizedContainer = euiStyled.div` +const CentralizedContainer = styled.div` height: 100%; display: flex; `; @@ -67,7 +68,16 @@ export function TransactionLink() { return ( - Fetching transaction...} /> + + {i18n.translate('xpack.apm.transactionLink.h2.fetchingTransactionLabel', { + defaultMessage: 'Fetching transaction...', + })} + + } + /> ); } diff --git a/x-pack/plugins/observability_solution/apm/public/components/fleet_integration/apm_agents/agent_instructions_accordion.tsx b/x-pack/plugins/observability_solution/apm/public/components/fleet_integration/apm_agents/agent_instructions_accordion.tsx index bd87c7b616312..4889f33b3f0db 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/fleet_integration/apm_agents/agent_instructions_accordion.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/fleet_integration/apm_agents/agent_instructions_accordion.tsx @@ -16,7 +16,7 @@ import { } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import React, { ComponentType } from 'react'; -import styled from 'styled-components'; +import styled from '@emotion/styled'; import { useKibana } from '@kbn/kibana-react-plugin/public'; import { Markdown } from '@kbn/shared-ux-markdown'; import { AgentIcon } from '@kbn/custom-icons'; diff --git a/x-pack/plugins/observability_solution/apm/public/components/fleet_integration/apm_policy_form/settings_form/form_row_setting.tsx b/x-pack/plugins/observability_solution/apm/public/components/fleet_integration/apm_policy_form/settings_form/form_row_setting.tsx index 00e6c0265fdf6..20d018e273628 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/fleet_integration/apm_policy_form/settings_form/form_row_setting.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/fleet_integration/apm_policy_form/settings_form/form_row_setting.tsx @@ -15,7 +15,7 @@ import { } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import React from 'react'; -import styled from 'styled-components'; +import styled from '@emotion/styled'; import { CodeEditor } from '@kbn/code-editor'; import { FormRowOnChange } from '.'; import { SettingsRow } from '../typings'; 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/routing/app_root/index.tsx b/x-pack/plugins/observability_solution/apm/public/components/routing/app_root/index.tsx index 69ea154538d6b..2b709e2077470 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/routing/app_root/index.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/routing/app_root/index.tsx @@ -7,7 +7,7 @@ import { PerformanceContextProvider } from '@kbn/ebt-tools'; import { APP_WRAPPER_CLASS } from '@kbn/core/public'; -import { KibanaContextProvider, useDarkMode } from '@kbn/kibana-react-plugin/public'; +import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public'; import { RedirectAppLinks } from '@kbn/shared-ux-link-redirect-app'; import { Storage } from '@kbn/kibana-utils-plugin/public'; import { @@ -16,9 +16,7 @@ import { } from '@kbn/observability-shared-plugin/public'; import { Route } from '@kbn/shared-ux-router'; import { RouteRenderer, RouterProvider } from '@kbn/typed-react-router-config'; -import { euiDarkVars, euiLightVars } from '@kbn/ui-theme'; import React from 'react'; -import { DefaultTheme, ThemeProvider } from 'styled-components'; import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; import { KibanaEnvironmentContextProvider } from '../../../context/kibana_environment_context/kibana_environment_context'; import { AnomalyDetectionJobsContextProvider } from '../../../context/anomaly_detection_jobs/anomaly_detection_jobs_context'; @@ -84,11 +82,9 @@ export function ApmAppRoot({ - - - - - + + + @@ -128,19 +124,3 @@ function MountApmHeaderActionMenu() { ); } - -export function ApmThemeProvider({ children }: { children: React.ReactNode }) { - const darkMode = useDarkMode(false); - - return ( - ({ - ...outerTheme, - eui: darkMode ? euiDarkVars : euiLightVars, - darkMode, - })} - > - {children} - - ); -} 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/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..74179489aceb2 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 type { EuiThemeComputed } from '@elastic/eui'; import { getSeverityColor } from '../../../../../common/anomaly_detection'; import { ServiceAnomalyTimeseries } from '../../../../../common/anomaly_detection/service_anomaly_timeseries'; import { APMChartSpec } from '../../../../../typings/timeseries'; @@ -21,11 +21,11 @@ export const expectedBoundsTitle = i18n.translate('xpack.apm.comparison.expected }); export function getChartAnomalyTimeseries({ anomalyTimeseries, - theme, + euiTheme, anomalyTimeseriesColor, }: { anomalyTimeseries?: ServiceAnomalyTimeseries; - theme: EuiTheme; + euiTheme: EuiThemeComputed; anomalyTimeseriesColor?: string; }): | { @@ -48,7 +48,7 @@ export function getChartAnomalyTimeseries({ opacity: 0, }, }, - color: anomalyTimeseriesColor ?? rgba(theme.eui.euiColorVis1, 0.5), + color: anomalyTimeseriesColor ?? rgba(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..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/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..6e5ce28e8cd22 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 @@ -19,7 +19,7 @@ import { TooltipType, Tooltip, } from '@elastic/charts'; -import { EuiPanel, EuiTitle } from '@elastic/eui'; +import { EuiPanel, EuiTitle, useEuiTheme } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import React from 'react'; import { useHistory } from 'react-router-dom'; @@ -28,7 +28,6 @@ import { usePreviousPeriodLabel } from '../../../../hooks/use_previous_period_te import { SERVICE_NODE_NAME } from '../../../../../common/es_fields/apm'; import { asTransactionRate, getDurationFormatter } from '../../../../../common/utils/formatters'; import { FETCH_STATUS } from '../../../../hooks/use_fetcher'; -import { useTheme } from '../../../../hooks/use_theme'; import { APIReturnType } from '../../../../services/rest/create_call_apm_api'; import * as urlHelpers from '../../links/url_helpers'; import { ChartContainer } from '../chart_container'; @@ -54,7 +53,7 @@ export function InstancesLatencyDistributionChart({ const history = useHistory(); const hasData = items.length > 0; - const theme = useTheme(); + const { euiTheme } = useEuiTheme(); const chartThemes = useChartThemes(); const maxLatency = Math.max(...items.map((item) => item.latency ?? 0)); @@ -130,7 +129,7 @@ export function InstancesLatencyDistributionChart({ locale={i18n.getLocale()} /> @@ -156,13 +155,13 @@ export function InstancesLatencyDistributionChart({ xScaleType={ScaleType.Linear} yAccessors={[(item) => item.latency]} yScaleType={ScaleType.Linear} - color={theme.eui.euiColorMediumShade} + color={euiTheme.colors.mediumShade} bubbleSeriesStyle={{ point: { shape: 'square', radius: 4, - fill: theme.eui.euiColorLightestShade, - stroke: theme.eui.euiColorMediumShade, + fill: euiTheme.colors.lightestShade, + stroke: 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..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/__snapshots__/timeline.test.tsx.snap b/x-pack/plugins/observability_solution/apm/public/components/shared/charts/timeline/__snapshots__/timeline.test.tsx.snap index 2630a6c7862c0..09b48cc47b302 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/shared/charts/timeline/__snapshots__/timeline.test.tsx.snap +++ b/x-pack/plugins/observability_solution/apm/public/components/shared/charts/timeline/__snapshots__/timeline.test.tsx.snap @@ -1,11 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Timeline TimelineAxisContainer should render with data 1`] = ` -.c0 { - position: absolute; - bottom: 0; -} -
+
- .c0 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - font-size: 14px; - color: #69707d; - cursor: pointer; - opacity: 1; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -.c1 { - width: 11px; - height: 11px; - margin-right: 0; - background: #98a2b3; - border-radius: 100%; -} - - +
+
+
- .c0 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - font-size: 14px; - color: #69707d; - cursor: pointer; - opacity: 1; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -.c1 { - width: 11px; - height: 11px; - margin-right: 0; - background: #98a2b3; - border-radius: 100%; -} - - +
+
+
- .c0 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - font-size: 14px; - color: #69707d; - cursor: pointer; - opacity: 1; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -.c1 { - width: 11px; - height: 11px; - margin-right: 0; - background: #98a2b3; - border-radius: 100%; -} - - +
+
@@ -287,70 +210,70 @@ exports[`Timeline VerticalLinesContainer should render with data 1`] = ` transform="translate(0 100)" > ` +const Container = styled.div` display: flex; align-items: center; - font-size: ${({ theme }) => theme.eui.euiFontSizeS}; - color: ${({ theme }) => theme.eui.euiColorDarkShade}; + font-size: ${() => useEuiFontSize('s').fontSize}; + color: ${({ theme }) => theme.euiTheme.colors.darkShade}; cursor: ${(props) => (props.clickable ? 'pointer' : 'initial')}; opacity: ${(props) => (props.disabled ? 0.4 : 1)}; user-select: none; @@ -38,7 +38,7 @@ interface IndicatorProps { const radius = 11; -export const Indicator = euiStyled.span` +export const Indicator = styled.span` width: ${radius}px; height: ${radius}px; margin-right: ${(props) => (props.withMargin ? `${radius / 2}px` : 0)}; @@ -68,8 +68,8 @@ export function Legend({ indicator, ...rest }: Props) { - const theme = useTheme(); - const indicatorColor = color || theme.eui.euiColorVis1; + const { euiTheme } = useEuiTheme(); + const indicatorColor = color || euiTheme.colors.vis.euiColorVis1; return ( - + `; exports[`Marker renders error marker 1`] = ` - - + `; 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 37ddfbda58c3b..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,22 +5,21 @@ * 2.0. */ -import { EuiToolTip } from '@elastic/eui'; +import { EuiToolTip, useEuiTheme } from '@elastic/eui'; import React from 'react'; -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +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'; -const NameContainer = euiStyled.div` - border-bottom: 1px solid ${({ theme }) => theme.eui.euiColorMediumShade}; - padding-bottom: ${({ theme }) => theme.eui.euiSizeS}; +const NameContainer = styled.div` + border-bottom: 1px solid ${({ theme }) => theme.euiTheme.colors.mediumShade}; + padding-bottom: ${({ theme }) => theme.euiTheme.size.s}; `; -const TimeContainer = euiStyled.div` - color: ${({ theme }) => theme.eui.euiColorMediumShade}; - padding-top: ${({ theme }) => theme.eui.euiSizeS}; +const TimeContainer = styled.div` + color: ${({ theme }) => theme.euiTheme.colors.mediumShade}; + padding-top: ${({ theme }) => theme.euiTheme.size.s}; `; interface Props { @@ -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 faff0a073fe6b..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 { euiStyled } from '@kbn/kibana-react-plugin/common'; +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'; @@ -20,21 +19,21 @@ interface Props { mark: ErrorMark; } -const Popover = euiStyled.div` +const Popover = styled.div` max-width: 280px; `; -const TimeLegend = euiStyled(Legend)` - margin-bottom: ${({ theme }) => theme.eui.euiSize}; +const TimeLegend = styled(Legend)` + margin-bottom: ${({ theme }) => theme.euiTheme.size.base}; `; -const ErrorLink = euiStyled(ErrorDetailLink)` +const ErrorLink = styled(ErrorDetailLink)` display: block; - margin: ${({ theme }) => `${theme.eui.euiSizeS} 0 ${theme.eui.euiSizeS} 0`}; + margin: ${({ theme }) => `${theme.euiTheme.size.s} 0 ${theme.euiTheme.size.s} 0`}; overflow-wrap: break-word; `; -const Button = euiStyled(Legend)` +const Button = styled(Legend)` height: 20px; display: flex; align-items: flex-end; @@ -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.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..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.tsx b/x-pack/plugins/observability_solution/apm/public/components/shared/charts/timeseries_chart.tsx index 7b90aeb3ee03c..5f08befb46a3a 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 { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiSpacer, useEuiTheme } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import React, { ReactElement } from 'react'; import { useHistory } from 'react-router-dom'; @@ -33,7 +33,6 @@ import { useChartThemes } from '@kbn/observability-shared-plugin/public'; import { isExpectedBoundsComparison } from '../time_comparison/get_comparison_options'; import { useChartPointerEventContext } from '../../../context/chart_pointer_event/use_chart_pointer_event_context'; -import { useTheme } from '../../../hooks/use_theme'; import { unit } from '../../../utils/style'; import { ChartContainer } from './chart_container'; import { @@ -75,11 +74,11 @@ export function TimeseriesChart({ }: TimeseriesChartProps) { const history = useHistory(); const { chartRef, updatePointerEvent } = useChartPointerEventContext(); - const theme = useTheme(); + const { euiTheme, colorMode } = useEuiTheme(); const chartThemes = useChartThemes(); const anomalyChartTimeseries = getChartAnomalyTimeseries({ anomalyTimeseries, - theme, + euiTheme, anomalyTimeseriesColor: anomalyTimeseries?.color, }); const isEmpty = isTimeseriesEmpty(timeseries); @@ -115,12 +114,13 @@ export function TimeseriesChart({ } : undefined; - const endZoneColor = theme.darkMode ? theme.eui.euiColorLightShade : theme.eui.euiColorDarkShade; + const isDarkMode = colorMode === 'DARK'; + const endZoneColor = isDarkMode ? euiTheme.colors.lightShade : euiTheme.colors.darkShade; const endZoneRectAnnotationStyle: Partial = { stroke: endZoneColor, fill: endZoneColor, strokeWidth: 0, - opacity: theme.darkMode ? 0.6 : 0.2, + opacity: isDarkMode ? 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..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/charts/transaction_charts/ml_header.tsx b/x-pack/plugins/observability_solution/apm/public/components/shared/charts/transaction_charts/ml_header.tsx index 814dfd3d77982..e25803c98622c 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/shared/charts/transaction_charts/ml_header.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/shared/charts/transaction_charts/ml_header.tsx @@ -9,7 +9,7 @@ import { EuiFlexItem, EuiIconTip, EuiText } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { isEmpty } from 'lodash'; import React from 'react'; -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; import { useApmServiceContext } from '../../../../context/apm_service/use_apm_service_context'; import { useAnyOfApmParams } from '../../../../hooks/use_apm_params'; import { MLSingleMetricLink } from '../../links/machine_learning_links/mlsingle_metric_link'; @@ -19,14 +19,14 @@ interface Props { mlJobId?: string; } -const ShiftedIconWrapper = euiStyled.span` +const ShiftedIconWrapper = styled.span` padding-right: 5px; position: relative; top: -1px; display: inline-block; `; -const ShiftedEuiText = euiStyled(EuiText)` +const ShiftedEuiText = styled(EuiText)` position: relative; top: 5px; `; @@ -45,7 +45,9 @@ export function MLHeader({ hasValidMlLicense, mlJobId }: Props) { const hasKuery = !isEmpty(kuery); const icon = hasKuery ? ( `${theme.eui.euiSizeS} ${theme.eui.euiSizeS} 0 ${theme.eui.euiSizeS}`}; + margin: ${({ theme }) => + `${theme.euiTheme.size.s} ${theme.euiTheme.size.s} 0 ${theme.euiTheme.size.s}`}; .descriptionList__title, .descriptionList__description { margin-top: 0; diff --git a/x-pack/plugins/observability_solution/apm/public/components/shared/key_value_table/formatted_value.tsx b/x-pack/plugins/observability_solution/apm/public/components/shared/key_value_table/formatted_value.tsx index 1b1c5c3c59a70..a3baef9a802ba 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/shared/key_value_table/formatted_value.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/shared/key_value_table/formatted_value.tsx @@ -7,11 +7,11 @@ import { isBoolean, isNumber, isObject } from 'lodash'; import React from 'react'; -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; import { NOT_AVAILABLE_LABEL } from '../../../../common/i18n'; -const EmptyValue = euiStyled.span` - color: ${({ theme }) => theme.eui.euiColorMediumShade}; +const EmptyValue = styled.span` + color: ${({ theme }) => theme.euiTheme.colors.mediumShade}; text-align: left; `; diff --git a/x-pack/plugins/observability_solution/apm/public/components/shared/kuery_bar/typeahead/suggestion.js b/x-pack/plugins/observability_solution/apm/public/components/shared/kuery_bar/typeahead/suggestion.js index 841b74a37a409..625b19f923424 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/shared/kuery_bar/typeahead/suggestion.js +++ b/x-pack/plugins/observability_solution/apm/public/components/shared/kuery_bar/typeahead/suggestion.js @@ -7,72 +7,73 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { euiStyled } from '@kbn/kibana-react-plugin/common'; -import { EuiIcon } from '@elastic/eui'; +import styled from '@emotion/styled'; +import { EuiIcon, useEuiFontSize } from '@elastic/eui'; import { unit } from '../../../../utils/style'; import { tint } from 'polished'; function getIconColor(type, theme) { switch (type) { case 'field': - return theme.eui.euiColorVis7; + return theme.euiTheme.colors.vis.euiColorVis7; case 'value': - return theme.eui.euiColorVis0; + return theme.euiTheme.colors.vis.euiColorVis0; case 'operator': - return theme.eui.euiColorVis1; + return theme.euiTheme.colors.vis.euiColorVis1; case 'conjunction': - return theme.eui.euiColorVis3; + return theme.euiTheme.colors.vis.euiColorVis3; case 'recentSearch': - return theme.eui.euiColorMediumShade; + return theme.euiTheme.colors.mediumShade; } } -const Description = euiStyled.div` - color: ${({ theme }) => theme.eui.euiColorDarkShade}; +const Description = styled.div` + color: ${({ theme }) => theme.euiTheme.colors.darkShade}; p { display: inline; span { - font-family: ${({ theme }) => theme.eui.euiCodeFontFamily}; - color: ${({ theme }) => theme.eui.euiColorFullShade}; - padding: 0 ${({ theme }) => theme.eui.euiSizeXS}; + font-family: ${({ theme }) => theme.euiTheme.font.familyCode}; + color: ${({ theme }) => theme.euiTheme.colors.fullShade}; + padding: 0 ${({ theme }) => theme.euiTheme.size.xs}; display: inline-block; } } `; -const ListItem = euiStyled.li` - font-size: ${({ theme }) => theme.eui.euiFontSizeXS}; - height: ${({ theme }) => theme.eui.euiSizeXL}; +const ListItem = styled.li` + font-size: ${() => useEuiFontSize('xs').fontSize}; + height: ${({ theme }) => theme.euiTheme.size.xl}; align-items: center; display: flex; - background: ${({ selected, theme }) => (selected ? theme.eui.euiColorLightestShade : 'initial')}; + background: ${({ selected, theme }) => + selected ? theme.euiTheme.colors.lightestShade : 'initial'}; cursor: pointer; - border-radius: ${({ theme }) => theme.eui.euiBorderRadiusSmall}; + border-radius: ${({ theme }) => theme.euiTheme.border.radius.small}; ${Description} { p span { background: ${({ selected, theme }) => - selected ? theme.eui.euiColorEmptyShade : theme.eui.euiColorLightestShade}; + selected ? theme.euiTheme.colors.emptyShade : theme.euiTheme.colors.lightestShade}; } } `; -const Icon = euiStyled.div` - flex: 0 0 ${({ theme }) => theme.eui.euiSizeXL}; +const Icon = styled.div` + flex: 0 0 ${({ theme }) => theme.euiTheme.size.xl}; background: ${({ type, theme }) => tint(0.9, getIconColor(type, theme))}; color: ${({ type, theme }) => getIconColor(type, theme)}; width: 100%; height: 100%; text-align: center; - line-height: ${({ theme }) => theme.eui.euiSizeXL}; + line-height: ${({ theme }) => theme.euiTheme.size.xl}; `; -const TextValue = euiStyled.div` +const TextValue = styled.div` flex: 0 0 ${unit * 16}px; - color: ${({ theme }) => theme.eui.euiColorDarkestShade}; - padding: 0 ${({ theme }) => theme.eui.euiSizeS}; + color: ${({ theme }) => theme.euiTheme.colors.darkestShade}; + padding: 0 ${({ theme }) => theme.euiTheme.size.s}; `; function getEuiIconType(type) { diff --git a/x-pack/plugins/observability_solution/apm/public/components/shared/kuery_bar/typeahead/suggestions.js b/x-pack/plugins/observability_solution/apm/public/components/shared/kuery_bar/typeahead/suggestions.js index 1cedd94a86be1..3c07b8f608bad 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/shared/kuery_bar/typeahead/suggestions.js +++ b/x-pack/plugins/observability_solution/apm/public/components/shared/kuery_bar/typeahead/suggestions.js @@ -9,18 +9,22 @@ import { isEmpty } from 'lodash'; import { tint } from 'polished'; import PropTypes from 'prop-types'; import React, { Component } from 'react'; -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; import { unit } from '../../../../utils/style'; import Suggestion from './suggestion'; -const List = euiStyled.ul` +const List = styled.ul` width: 100%; - border: 1px solid ${({ theme }) => theme.eui.euiColorLightShade}; - border-radius: ${({ theme }) => theme.eui.euiBorderRadiusSmall}; - box-shadow: 0 ${({ theme }) => - `${theme.eui.euiSizeXS} ${theme.eui.euiSizeXL} ${tint(0.9, theme.eui.euiColorFullShade)}`}; + border: 1px solid ${({ theme }) => theme.euiTheme.colors.lightShade}; + border-radius: ${({ theme }) => theme.euiTheme.border.radius.small}; + box-shadow: 0 + ${({ theme }) => + `${theme.euiTheme.size.xs} ${theme.euiTheme.size.xl} ${tint( + 0.9, + theme.euiTheme.colors.fullShade + )}`}; position: absolute; - background: ${({ theme }) => theme.eui.euiColorEmptyShade}; + background: ${({ theme }) => theme.euiTheme.colors.emptyShade}; z-index: 10; left: 0; max-height: ${unit * 20}px; diff --git a/x-pack/plugins/observability_solution/apm/public/components/shared/links/apm/service_link/index.tsx b/x-pack/plugins/observability_solution/apm/public/components/shared/links/apm/service_link/index.tsx index 4baf94c6f0559..b6d7d1789fac9 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/shared/links/apm/service_link/index.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/shared/links/apm/service_link/index.tsx @@ -8,7 +8,7 @@ import { EuiFlexGroup, EuiFlexItem, EuiLink, EuiText } from '@elastic/eui'; import { AgentIcon } from '@kbn/custom-icons'; import { i18n } from '@kbn/i18n'; -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; import { TypeOf } from '@kbn/typed-react-router-config'; import React from 'react'; import { isMobileAgentName } from '../../../../../../common/agent_name'; @@ -21,7 +21,9 @@ import { PopoverTooltip } from '../../../popover_tooltip'; import { TruncateWithTooltip } from '../../../truncate_with_tooltip'; import { MaxGroupsMessage, OTHER_SERVICE_NAME } from '../max_groups_message'; -const StyledLink = euiStyled(EuiLink)`${truncate('100%')};`; +const StyledLink = styled(EuiLink)` + ${truncate('100%')}; +`; function formatString(value?: string | null) { return value || NOT_AVAILABLE_LABEL; diff --git a/x-pack/plugins/observability_solution/apm/public/components/shared/links/dependency_link.tsx b/x-pack/plugins/observability_solution/apm/public/components/shared/links/dependency_link.tsx index 696f987ea2b63..d202c1cb770b7 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/shared/links/dependency_link.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/shared/links/dependency_link.tsx @@ -8,19 +8,21 @@ import { EuiFlexGroup, EuiFlexItem, EuiLink } from '@elastic/eui'; import { TypeOf } from '@kbn/typed-react-router-config'; import React from 'react'; -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; import { useApmRouter } from '../../../hooks/use_apm_router'; import { truncate } from '../../../utils/style'; import { ApmRoutes } from '../../routing/apm_route_config'; import { SpanIcon } from '../span_icon'; -const StyledLink = euiStyled(EuiLink)`${truncate('100%')};`; +const StyledLink = styled(EuiLink)` + ${truncate('100%')}; +`; interface Props { query: TypeOf['query']; subtype?: string; type?: string; - onClick?: React.ComponentProps['onClick']; + onClick?: React.MouseEventHandler; } export function DependencyLink({ query, subtype, type, onClick }: Props) { diff --git a/x-pack/plugins/observability_solution/apm/public/components/shared/overview_table_container/index.tsx b/x-pack/plugins/observability_solution/apm/public/components/shared/overview_table_container/index.tsx index c77c3e7cc7a92..8c2f62f7998b3 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/shared/overview_table_container/index.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/shared/overview_table_container/index.tsx @@ -6,7 +6,7 @@ */ import React, { ReactNode } from 'react'; -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; import { useBreakpoints } from '../../../hooks/use_breakpoints'; /** @@ -24,7 +24,7 @@ const tableHeight = 282; * * Hide the empty message when we don't yet have any items and are still not initiated. */ -const OverviewTableContainerDiv = euiStyled.div<{ +const OverviewTableContainerDiv = styled.div<{ fixedHeight?: boolean; isEmptyAndNotInitiated: boolean; shouldUseMobileLayout: boolean; 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/stacktrace/cause_stacktrace.tsx b/x-pack/plugins/observability_solution/apm/public/components/shared/stacktrace/cause_stacktrace.tsx index 549509dc96f52..d36a5bf422160 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/shared/stacktrace/cause_stacktrace.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/shared/stacktrace/cause_stacktrace.tsx @@ -8,29 +8,29 @@ import { EuiAccordion, EuiTitle } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import React from 'react'; -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; import { Stacktrace } from '.'; import { Stackframe } from '../../../../typings/es_schemas/raw/fields/stackframe'; -const Accordion = euiStyled(EuiAccordion)` - border-top: ${({ theme }) => theme.eui.euiBorderThin}; - margin-top: ${({ theme }) => theme.eui.euiSizeS}; +const Accordion = styled(EuiAccordion)` + border-top: ${({ theme }) => theme.euiTheme.border.thin}; + margin-top: ${({ theme }) => theme.euiTheme.size.s}; `; -const CausedByContainer = euiStyled('h5')` - padding: ${({ theme }) => theme.eui.euiSizeS} 0; +const CausedByContainer = styled('h5')` + padding: ${({ theme }) => theme.euiTheme.size.s} 0; `; -const CausedByHeading = euiStyled('span')` - color: ${({ theme }) => theme.eui.euiTextSubduedColor}; +const CausedByHeading = styled('span')` + color: ${({ theme }) => theme.euiTheme.colors.textSubdued}; display: block; - font-size: ${({ theme }) => theme.eui.euiFontSizeXS}; - font-weight: ${({ theme }) => theme.eui.euiFontWeightBold}; + font-size: ${({ theme }) => theme.euiTheme.size.xs}; + font-weight: ${({ theme }) => theme.euiTheme.font.weight.bold}; text-transform: uppercase; `; -const FramesContainer = euiStyled('div')` - padding-left: ${({ theme }) => theme.eui.euiSizeM}; +const FramesContainer = styled('div')` + padding-left: ${({ theme }) => theme.euiTheme.size.m}; `; function CausedBy({ message }: { message: string }) { diff --git a/x-pack/plugins/observability_solution/apm/public/components/shared/stacktrace/context.tsx b/x-pack/plugins/observability_solution/apm/public/components/shared/stacktrace/context.tsx index 3abd577733651..a79b5529d2cde 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/shared/stacktrace/context.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/shared/stacktrace/context.tsx @@ -13,66 +13,66 @@ import javascript from 'react-syntax-highlighter/dist/cjs/languages/hljs/javascr import python from 'react-syntax-highlighter/dist/cjs/languages/hljs/python'; import ruby from 'react-syntax-highlighter/dist/cjs/languages/hljs/ruby'; import xcode from 'react-syntax-highlighter/dist/cjs/styles/hljs/xcode'; -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; import { StackframeWithLineContext } from '../../../../typings/es_schemas/raw/fields/stackframe'; SyntaxHighlighter.registerLanguage('javascript', javascript); SyntaxHighlighter.registerLanguage('python', python); SyntaxHighlighter.registerLanguage('ruby', ruby); -const ContextContainer = euiStyled.div` +const ContextContainer = styled.div` position: relative; - border-radius: ${({ theme }) => theme.eui.euiBorderRadiusSmall}; + border-radius: ${({ theme }) => theme.euiTheme.border.radius.small}; `; const LINE_HEIGHT = 18; -const LineHighlight = euiStyled.div<{ lineNumber: number }>` +const LineHighlight = styled.div<{ lineNumber: number }>` position: absolute; width: 100%; height: ${LINE_HEIGHT}px; top: ${(props) => props.lineNumber * LINE_HEIGHT}px; pointer-events: none; - background-color: ${({ theme }) => tint(0.9, theme.eui.euiColorWarning)}; + background-color: ${({ theme }) => tint(0.9, theme.euiTheme.colors.warning)}; `; -const LineNumberContainer = euiStyled.div<{ isLibraryFrame: boolean }>` +const LineNumberContainer = styled.div<{ isLibraryFrame: boolean }>` position: absolute; top: 0; left: 0; - border-radius: ${({ theme }) => theme.eui.euiBorderRadiusSmall}; + border-radius: ${({ theme }) => theme.euiTheme.border.radius.small}; background: ${({ isLibraryFrame, theme }) => - isLibraryFrame ? theme.eui.euiColorEmptyShade : theme.eui.euiColorLightestShade}; + isLibraryFrame ? theme.euiTheme.colors.emptyShade : theme.euiTheme.colors.lightestShade}; `; -const LineNumber = euiStyled.div<{ highlight: boolean }>` +const LineNumber = styled.div<{ highlight: boolean }>` position: relative; min-width: 42px; - padding-left: ${({ theme }) => theme.eui.euiSizeS}; - padding-right: ${({ theme }) => theme.eui.euiSizeXS}; - color: ${({ theme }) => theme.eui.euiColorMediumShade}; + padding-left: ${({ theme }) => theme.euiTheme.size.s}; + padding-right: ${({ theme }) => theme.euiTheme.size.xs}; + color: ${({ theme }) => theme.euiTheme.colors.mediumShade}; line-height: ${LINE_HEIGHT}px; text-align: right; - border-right: 1px solid ${({ theme }) => theme.eui.euiColorLightShade}; + border-right: ${({ theme }) => theme.euiTheme.border.thin}; background-color: ${({ highlight, theme }) => - highlight ? tint(0.9, theme.eui.euiColorWarning) : null}; + highlight ? tint(0.9, theme.euiTheme.colors.warning) : null}; &:last-of-type { - border-radius: 0 0 0 ${({ theme }) => theme.eui.euiBorderRadiusSmall}; + border-radius: 0 0 0 ${({ theme }) => theme.euiTheme.border.radius.small}; } `; -const LineContainer = euiStyled.div` +const LineContainer = styled.div` overflow: auto; margin: 0 0 0 42px; padding: 0; - background-color: ${({ theme }) => theme.eui.euiColorEmptyShade}; + background-color: ${({ theme }) => theme.euiTheme.colors.emptyShade}; &:last-of-type { - border-radius: 0 0 ${({ theme }) => theme.eui.euiBorderRadiusSmall} 0; + border-radius: 0 0 ${({ theme }) => theme.euiTheme.border.radius.small} 0; } `; -const Line = euiStyled.pre` +const Line = styled.pre` // Override all styles margin: 0; color: inherit; @@ -84,7 +84,7 @@ const Line = euiStyled.pre` line-height: ${LINE_HEIGHT}px; `; -const Code = euiStyled.code` +const Code = styled.code` position: relative; padding: 0; margin: 0; diff --git a/x-pack/plugins/observability_solution/apm/public/components/shared/stacktrace/frame_heading.tsx b/x-pack/plugins/observability_solution/apm/public/components/shared/stacktrace/frame_heading.tsx index 00aac84b83731..734ac85cf40e6 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/shared/stacktrace/frame_heading.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/shared/stacktrace/frame_heading.tsx @@ -6,7 +6,8 @@ */ import React, { ComponentType } from 'react'; -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; +import { useEuiFontSize } from '@elastic/eui'; import { Stackframe } from '../../../../typings/es_schemas/raw/fields/stackframe'; import { CSharpFrameHeadingRenderer, @@ -18,21 +19,21 @@ import { PhpFrameHeadingRenderer, } from './frame_heading_renderers'; -const FileDetails = euiStyled.div` - color: ${({ theme }) => theme.eui.euiColorDarkShade}; +const FileDetails = styled.div` + color: ${({ theme }) => theme.euiTheme.colors.darkShade}; line-height: 1.5; /* matches the line-hight of the accordion container button */ padding: 2px 0; - font-family: ${({ theme }) => theme.eui.euiCodeFontFamily}; - font-size: ${({ theme }) => theme.eui.euiFontSizeS}; + font-family: ${({ theme }) => theme.euiTheme.font.familyCode}; + font-size: ${({ theme }) => useEuiFontSize('s').fontSize}; `; -const LibraryFrameFileDetail = euiStyled.span` - color: ${({ theme }) => theme.eui.euiColorDarkShade}; +const LibraryFrameFileDetail = styled.span` + color: ${({ theme }) => theme.euiTheme.colors.darkShade}; word-break: break-word; `; -const AppFrameFileDetail = euiStyled.span` - color: ${({ theme }) => theme.eui.euiColorFullShade}; +const AppFrameFileDetail = styled.span` + color: ${({ theme }) => theme.euiTheme.colors.fullShade}; word-break: break-word; `; diff --git a/x-pack/plugins/observability_solution/apm/public/components/shared/stacktrace/library_stacktrace.tsx b/x-pack/plugins/observability_solution/apm/public/components/shared/stacktrace/library_stacktrace.tsx index 8c9bc4e5cdd4e..b5fe38b6eb663 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/shared/stacktrace/library_stacktrace.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/shared/stacktrace/library_stacktrace.tsx @@ -8,12 +8,12 @@ import { EuiAccordion } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import React from 'react'; -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; import { Stackframe } from '../../../../typings/es_schemas/raw/fields/stackframe'; import { Stackframe as StackframeComponent } from './stackframe'; -const LibraryStacktraceAccordion = euiStyled(EuiAccordion)` - margin: ${({ theme }) => theme.eui.euiSizeXS} 0; +const LibraryStacktraceAccordion = styled(EuiAccordion)` + margin: ${({ theme }) => theme.euiTheme.size.xs} 0; `; interface Props { diff --git a/x-pack/plugins/observability_solution/apm/public/components/shared/stacktrace/stackframe.tsx b/x-pack/plugins/observability_solution/apm/public/components/shared/stacktrace/stackframe.tsx index 61692b3dbf967..1180b1c9ed05c 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/shared/stacktrace/stackframe.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/shared/stacktrace/stackframe.tsx @@ -7,7 +7,7 @@ import { EuiAccordion } from '@elastic/eui'; import React from 'react'; -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; import { Stackframe as StackframeType, StackframeWithLineContext, @@ -16,18 +16,18 @@ import { Context } from './context'; import { FrameHeading } from './frame_heading'; import { Variables } from './variables'; -const ContextContainer = euiStyled.div<{ isLibraryFrame: boolean }>` +const ContextContainer = styled.div<{ isLibraryFrame: boolean }>` position: relative; - font-family: ${({ theme }) => theme.eui.euiCodeFontFamily}; - font-size: ${({ theme }) => theme.eui.euiFontSizeS}; - border: 1px solid ${({ theme }) => theme.eui.euiColorLightShade}; - border-radius: ${({ theme }) => theme.eui.euiBorderRadiusSmall}; + font-family: ${({ theme }) => theme.euiTheme.font.familyCode}; + font-size: ${({ theme }) => theme.euiTheme.size.s}; + border: 1px solid ${({ theme }) => theme.euiTheme.colors.lightShade}; + border-radius: ${({ theme }) => theme.euiTheme.border.radius.small}; background: ${({ isLibraryFrame, theme }) => - isLibraryFrame ? theme.eui.euiColorEmptyShade : theme.eui.euiColorLightestShade}; + isLibraryFrame ? theme.euiTheme.colors.emptyShade : theme.euiTheme.colors.lightestShade}; `; // Indent the non-context frames the same amount as the accordion control -const NoContextFrameHeadingWrapper = euiStyled.div` +const NoContextFrameHeadingWrapper = styled.div` margin-left: 28px; `; diff --git a/x-pack/plugins/observability_solution/apm/public/components/shared/stacktrace/variables.tsx b/x-pack/plugins/observability_solution/apm/public/components/shared/stacktrace/variables.tsx index 5dc9a8a5073ba..e59d6e9bc5c12 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/shared/stacktrace/variables.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/shared/stacktrace/variables.tsx @@ -8,16 +8,16 @@ import { EuiAccordion } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import React from 'react'; -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; import { Stackframe } from '../../../../typings/es_schemas/raw/fields/stackframe'; import { KeyValueTable } from '../key_value_table'; import { flattenObject } from '../../../../common/utils/flatten_object'; -const VariablesContainer = euiStyled.div` - background: ${({ theme }) => theme.eui.euiColorEmptyShade}; - border-radius: 0 0 ${({ theme }) => - `${theme.eui.euiBorderRadiusSmall} ${theme.eui.euiBorderRadiusSmall}`}; - padding: ${({ theme }) => `${theme.eui.euiSizeS} ${theme.eui.euiSizeM}`}; +const VariablesContainer = styled.div` + background: ${({ theme }) => theme.euiTheme.colors.emptyShade}; + border-radius: 0 0 + ${({ theme }) => `${theme.euiTheme.border.radius.small} ${theme.euiTheme.border.radius.small}`}; + padding: ${({ theme }) => `${theme.euiTheme.size.s} ${theme.euiTheme.size.m}`}; `; interface Props { diff --git a/x-pack/plugins/observability_solution/apm/public/components/shared/sticky_properties/__snapshots__/sticky_properties.test.tsx.snap b/x-pack/plugins/observability_solution/apm/public/components/shared/sticky_properties/__snapshots__/sticky_properties.test.tsx.snap index f8799874408e3..61921adf27413 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/shared/sticky_properties/__snapshots__/sticky_properties.test.tsx.snap +++ b/x-pack/plugins/observability_solution/apm/public/components/shared/sticky_properties/__snapshots__/sticky_properties.test.tsx.snap @@ -24,9 +24,9 @@ exports[`StickyProperties should render entire component 1`] = ` + url.full - + } delay="regular" display="inlineBlock" @@ -43,9 +43,9 @@ exports[`StickyProperties should render entire component 1`] = ` display="inlineBlock" position="top" > - + https://www.elastic.co/test - + + http.request.method - + } delay="regular" display="inlineBlock" @@ -91,9 +91,9 @@ exports[`StickyProperties should render entire component 1`] = ` + error.exception.handled - + } delay="regular" display="inlineBlock" @@ -121,9 +121,9 @@ exports[`StickyProperties should render entire component 1`] = ` + user.id - + } delay="regular" display="inlineBlock" diff --git a/x-pack/plugins/observability_solution/apm/public/components/shared/sticky_properties/index.tsx b/x-pack/plugins/observability_solution/apm/public/components/shared/sticky_properties/index.tsx index f620c97984ca7..024f05e493a2a 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/shared/sticky_properties/index.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/shared/sticky_properties/index.tsx @@ -5,10 +5,10 @@ * 2.0. */ -import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; +import { EuiFlexGroup, EuiFlexItem, useEuiFontSize } from '@elastic/eui'; import { EuiToolTip } from '@elastic/eui'; import React from 'react'; -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; import { truncate } from '../../../utils/style'; export interface IStickyProperty { @@ -19,14 +19,14 @@ export interface IStickyProperty { truncated?: boolean; } -const TooltipFieldName = euiStyled.span` - font-family: ${({ theme }) => theme.eui.euiCodeFontFamily}; +const TooltipFieldName = styled.span` + font-family: ${({ theme }) => theme.euiTheme.font.familyCode}; `; -const PropertyLabel = euiStyled.div` - margin-bottom: ${({ theme }) => theme.eui.euiSizeS}; - font-size: ${({ theme }) => theme.eui.euiFontSizeXS}; - color: ${({ theme }) => theme.eui.euiColorMediumShade}; +const PropertyLabel = styled.div` + margin-bottom: ${({ theme }) => theme.euiTheme.size.s}; + font-size: ${() => useEuiFontSize('xs').fontSize}; + color: ${({ theme }) => theme.euiTheme.colors.mediumShade}; span { cursor: help; @@ -35,13 +35,13 @@ const PropertyLabel = euiStyled.div` PropertyLabel.displayName = 'PropertyLabel'; const propertyValueLineHeight = 1.2; -const PropertyValue = euiStyled.div` +const PropertyValue = styled.div` display: inline-block; line-height: ${propertyValueLineHeight}; `; PropertyValue.displayName = 'PropertyValue'; -const PropertyValueTruncated = euiStyled.span` +const PropertyValueTruncated = styled.span` display: inline-block; line-height: ${propertyValueLineHeight}; ${truncate('100%')}; diff --git a/x-pack/plugins/observability_solution/apm/public/components/shared/sticky_properties/sticky_properties.test.tsx b/x-pack/plugins/observability_solution/apm/public/components/shared/sticky_properties/sticky_properties.test.tsx index 02289485e12d0..09effede911f9 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/shared/sticky_properties/sticky_properties.test.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/shared/sticky_properties/sticky_properties.test.tsx @@ -56,7 +56,7 @@ describe('StickyProperties', () => { const wrapper = shallow() .find('PropertyValue') - .dive() + .render() .text(); expect(wrapper).toEqual('1337'); 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/components/shared/summary/http_info_summary_item/http_info_summary_item.test.tsx b/x-pack/plugins/observability_solution/apm/public/components/shared/summary/http_info_summary_item/http_info_summary_item.test.tsx index 6091a6ff8c73d..2d5e1cfeb41e1 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/shared/summary/http_info_summary_item/http_info_summary_item.test.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/shared/summary/http_info_summary_item/http_info_summary_item.test.tsx @@ -9,7 +9,7 @@ import React from 'react'; import { shallow, mount } from 'enzyme'; import { HttpInfoSummaryItem } from '.'; import * as exampleTransactions from '../__fixtures__/transactions'; -import { EuiThemeProvider } from '@kbn/kibana-react-plugin/common'; +import { EuiThemeProvider } from '@elastic/eui'; describe('HttpInfoSummaryItem', () => { describe('render', () => { diff --git a/x-pack/plugins/observability_solution/apm/public/components/shared/summary/http_info_summary_item/index.tsx b/x-pack/plugins/observability_solution/apm/public/components/shared/summary/http_info_summary_item/index.tsx index 7eee907d05264..5732c426e2610 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/shared/summary/http_info_summary_item/index.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/shared/summary/http_info_summary_item/index.tsx @@ -8,15 +8,15 @@ import { EuiBadge, EuiToolTip } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import React from 'react'; -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; import { truncate, unit } from '../../../../utils/style'; import { HttpStatusBadge } from '../http_status_badge'; -const HttpInfoBadge = euiStyled(EuiBadge)` - margin-right: ${({ theme }) => theme.eui.euiSizeXS}; +const HttpInfoBadge = styled(EuiBadge)` + margin-right: ${({ theme }) => theme.euiTheme.size.xs}; `; -const Url = euiStyled('span')` +const Url = styled('span')` display: inline-block; vertical-align: bottom; ${truncate(unit * 24)}; @@ -27,7 +27,7 @@ interface HttpInfoProps { url: string; } -const Span = euiStyled('span')` +const Span = styled('span')` white-space: nowrap; `; diff --git a/x-pack/plugins/observability_solution/apm/public/components/shared/summary/user_agent_summary_item.tsx b/x-pack/plugins/observability_solution/apm/public/components/shared/summary/user_agent_summary_item.tsx index dcfaae3f9b255..9a2f3e041bf1c 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/shared/summary/user_agent_summary_item.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/shared/summary/user_agent_summary_item.tsx @@ -6,15 +6,15 @@ */ import React from 'react'; -import { EuiToolTip } from '@elastic/eui'; +import { EuiToolTip, useEuiFontSize } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; import { UserAgent } from '../../../../typings/es_schemas/raw/fields/user_agent'; type UserAgentSummaryItemProps = UserAgent; -const Version = euiStyled('span')` - font-size: ${({ theme }) => theme.eui.euiFontSizeS}; +const Version = styled('span')` + font-size: ${() => useEuiFontSize('s').fontSize}; `; export function UserAgentSummaryItem({ name, version }: UserAgentSummaryItemProps) { diff --git a/x-pack/plugins/observability_solution/apm/public/components/shared/time_comparison/index.test.tsx b/x-pack/plugins/observability_solution/apm/public/components/shared/time_comparison/index.test.tsx index a8caf46850203..9fffd11600c81 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/shared/time_comparison/index.test.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/shared/time_comparison/index.test.tsx @@ -8,7 +8,6 @@ import { render } from '@testing-library/react'; import React, { ReactNode } from 'react'; import { MemoryRouter } from 'react-router-dom'; -import { EuiThemeProvider } from '@kbn/kibana-react-plugin/common'; import { expectTextsInDocument, expectTextsNotInDocument } from '../../../utils/test_helpers'; import { TimeComparison } from '.'; import * as urlHelpers from '../links/url_helpers'; @@ -24,6 +23,7 @@ import type { ApmPluginContextValue } from '../../../context/apm_plugin/apm_plug import { merge } from 'lodash'; import type { ApmMlJob } from '../../../../common/anomaly_detection/apm_ml_job'; import { FETCH_STATUS } from '../../../hooks/use_fetcher'; +import { EuiThemeProvider } from '@elastic/eui'; const ML_AD_JOBS = { jobs: [ diff --git a/x-pack/plugins/observability_solution/apm/public/components/shared/time_comparison/index.tsx b/x-pack/plugins/observability_solution/apm/public/components/shared/time_comparison/index.tsx index 54894b3f536c2..57e3fa94b5ba8 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/shared/time_comparison/index.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/shared/time_comparison/index.tsx @@ -9,7 +9,7 @@ import { EuiCheckbox, EuiSelect } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import React, { useMemo } from 'react'; import { useHistory, useLocation } from 'react-router-dom'; -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; import { useUiTracker } from '@kbn/observability-shared-plugin/public'; import { useApmRouter } from '../../../hooks/use_apm_router'; import { useEnvironmentsContext } from '../../../context/environments_context/use_environments_context'; @@ -21,12 +21,12 @@ import { useTimeRange } from '../../../hooks/use_time_range'; import * as urlHelpers from '../links/url_helpers'; import { getComparisonOptions, TimeRangeComparisonEnum } from './get_comparison_options'; -const PrependContainer = euiStyled.div` +const PrependContainer = styled.div` display: flex; justify-content: center; align-items: center; - background-color: ${({ theme }) => theme.eui.euiFormInputGroupLabelBackground}; - padding: 0 ${({ theme }) => theme.eui.euiSizeM}; + background-color: ${({ theme }) => theme.euiTheme.colors.backgroundBaseFormsPrepend}; + padding: 0 ${({ theme }) => theme.euiTheme.size.m}; `; export function TimeComparison() { diff --git a/x-pack/plugins/observability_solution/apm/public/components/shared/transaction_type_select.tsx b/x-pack/plugins/observability_solution/apm/public/components/shared/transaction_type_select.tsx index 292aaaed816af..f6e2a1a52b535 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/shared/transaction_type_select.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/shared/transaction_type_select.tsx @@ -8,7 +8,7 @@ import { EuiSelect } from '@elastic/eui'; import React, { FormEvent, useCallback } from 'react'; import { useHistory } from 'react-router-dom'; -import styled from 'styled-components'; +import styled from '@emotion/styled'; import { useApmServiceContext } from '../../context/apm_service/use_apm_service_context'; import { useBreakpoints } from '../../hooks/use_breakpoints'; import * as urlHelpers from './links/url_helpers'; diff --git a/x-pack/plugins/observability_solution/apm/public/components/shared/truncate_with_tooltip/index.tsx b/x-pack/plugins/observability_solution/apm/public/components/shared/truncate_with_tooltip/index.tsx index 5e1c450e336d6..02e04ed098038 100644 --- a/x-pack/plugins/observability_solution/apm/public/components/shared/truncate_with_tooltip/index.tsx +++ b/x-pack/plugins/observability_solution/apm/public/components/shared/truncate_with_tooltip/index.tsx @@ -7,12 +7,12 @@ import { EuiToolTip } from '@elastic/eui'; import React from 'react'; -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; import { truncate } from '../../../utils/style'; const tooltipAnchorClassname = '_apm_truncate_tooltip_anchor_'; -const TooltipWrapper = euiStyled.div` +const TooltipWrapper = styled.div` width: 100%; .${tooltipAnchorClassname} { width: 100% !important; @@ -20,7 +20,7 @@ const TooltipWrapper = euiStyled.div` } `; -const ContentWrapper = euiStyled.div` +const ContentWrapper = styled.div` ${truncate('100%')} `; diff --git a/x-pack/plugins/observability_solution/apm/public/embeddable/embeddable_context.tsx b/x-pack/plugins/observability_solution/apm/public/embeddable/embeddable_context.tsx index 43ccf990257ba..8458a4c9d4466 100644 --- a/x-pack/plugins/observability_solution/apm/public/embeddable/embeddable_context.tsx +++ b/x-pack/plugins/observability_solution/apm/public/embeddable/embeddable_context.tsx @@ -9,7 +9,6 @@ import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public'; import { KibanaThemeProvider } from '@kbn/react-kibana-context-theme'; import { ApmPluginContext, ApmPluginContextValue } from '../context/apm_plugin/apm_plugin_context'; import { createCallApmApi } from '../services/rest/create_call_apm_api'; -import { ApmThemeProvider } from '../components/routing/app_root'; import { ChartPointerEventContextProvider } from '../context/chart_pointer_event/chart_pointer_event_context'; import { EmbeddableDeps } from './types'; import { TimeRangeMetadataContextProvider } from '../context/time_range_metadata/time_range_metadata_context'; @@ -54,19 +53,17 @@ export function ApmEmbeddableContext({ - - - - {children} - - - + + + {children} + + 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; -} diff --git a/x-pack/plugins/observability_solution/apm/public/tutorial/config_agent/index.tsx b/x-pack/plugins/observability_solution/apm/public/tutorial/config_agent/index.tsx index cd10f07f2475e..129f15a3355cd 100644 --- a/x-pack/plugins/observability_solution/apm/public/tutorial/config_agent/index.tsx +++ b/x-pack/plugins/observability_solution/apm/public/tutorial/config_agent/index.tsx @@ -8,7 +8,7 @@ import { EuiLoadingSpinner } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { HttpStart } from '@kbn/core/public'; import React, { useEffect, useMemo, useState } from 'react'; -import styled from 'styled-components'; +import styled from '@emotion/styled'; import { APIReturnType } from '../../services/rest/create_call_apm_api'; import { AgentConfigInstructions } from './agent_config_instructions'; import { getPolicyOptions, PolicyOption } from './get_policy_options'; diff --git a/x-pack/plugins/observability_solution/apm/public/tutorial/tutorial_fleet_instructions/index.tsx b/x-pack/plugins/observability_solution/apm/public/tutorial/tutorial_fleet_instructions/index.tsx index 8924999f4821f..6796c6576ab03 100644 --- a/x-pack/plugins/observability_solution/apm/public/tutorial/tutorial_fleet_instructions/index.tsx +++ b/x-pack/plugins/observability_solution/apm/public/tutorial/tutorial_fleet_instructions/index.tsx @@ -18,7 +18,7 @@ import { import { i18n } from '@kbn/i18n'; import { HttpStart } from '@kbn/core/public'; import React, { useEffect, useState } from 'react'; -import styled from 'styled-components'; +import styled from '@emotion/styled'; import { APIReturnType } from '../../services/rest/create_call_apm_api'; interface Props { diff --git a/x-pack/plugins/observability_solution/apm/public/utils/test_helpers.tsx b/x-pack/plugins/observability_solution/apm/public/utils/test_helpers.tsx index 76a6b868300cf..a5d6f67829081 100644 --- a/x-pack/plugins/observability_solution/apm/public/utils/test_helpers.tsx +++ b/x-pack/plugins/observability_solution/apm/public/utils/test_helpers.tsx @@ -18,8 +18,8 @@ import moment from 'moment'; import { Moment } from 'moment-timezone'; import React from 'react'; import { MemoryRouter } from 'react-router-dom'; -import { EuiThemeProvider } from '@kbn/kibana-react-plugin/common'; import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public'; +import { EuiThemeProvider } from '@elastic/eui'; import { MockApmPluginContextWrapper } from '../context/apm_plugin/mock_apm_plugin_context'; import { UrlParamsProvider } from '../context/url_params_context/url_params_context'; @@ -112,17 +112,13 @@ export function expectTextsInDocument(output: any, texts: string[]) { }); } -export function renderWithTheme( - component: React.ReactNode, - params?: any, - { darkMode = false } = {} -) { - return render({component}, params); +export function renderWithTheme(component: React.ReactNode, params?: any) { + return render({component}, params); } -export function mountWithTheme(tree: React.ReactElement, { darkMode = false } = {}) { +export function mountWithTheme(tree: React.ReactElement) { function WrappingThemeProvider(props: any) { - return {props.children}; + return {props.children}; } return mount(tree, { diff --git a/x-pack/plugins/observability_solution/infra/emotion.d.ts b/x-pack/plugins/observability_solution/infra/emotion.d.ts deleted file mode 100644 index 213178080e536..0000000000000 --- a/x-pack/plugins/observability_solution/infra/emotion.d.ts +++ /dev/null @@ -1,14 +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 '@emotion/react'; -import type { UseEuiTheme } from '@elastic/eui'; - -declare module '@emotion/react' { - // eslint-disable-next-line @typescript-eslint/no-empty-interface - export interface Theme extends UseEuiTheme {} -} diff --git a/x-pack/plugins/observability_solution/infra/public/components/logging/log_minimap/density_chart.tsx b/x-pack/plugins/observability_solution/infra/public/components/logging/log_minimap/density_chart.tsx index 5f42d19d035d5..d45fe0c3c42c3 100644 --- a/x-pack/plugins/observability_solution/infra/public/components/logging/log_minimap/density_chart.tsx +++ b/x-pack/plugins/observability_solution/infra/public/components/logging/log_minimap/density_chart.tsx @@ -11,6 +11,7 @@ import { max } from 'lodash'; import * as React from 'react'; import styled from '@emotion/styled'; import { LogEntriesSummaryBucket } from '@kbn/logs-shared-plugin/common'; +import { COLOR_MODES_STANDARD } from '@elastic/eui'; interface DensityChartProps { buckets: LogEntriesSummaryBucket[]; @@ -66,14 +67,14 @@ export const DensityChart: React.FC = ({ const DensityChartPositiveBackground = styled.rect` fill: ${(props) => - props.theme.colorMode === 'DARK' + props.theme.colorMode === COLOR_MODES_STANDARD.dark ? props.theme.euiTheme.colors.lightShade : props.theme.euiTheme.colors.lightestShade}; `; const PositiveAreaPath = styled.path` fill: ${(props) => - props.theme.colorMode === 'DARK' + props.theme.colorMode === COLOR_MODES_STANDARD.dark ? props.theme.euiTheme.colors.mediumShade : props.theme.euiTheme.colors.lightShade}; `; diff --git a/x-pack/plugins/observability_solution/infra/public/components/logging/log_minimap/log_minimap.tsx b/x-pack/plugins/observability_solution/infra/public/components/logging/log_minimap/log_minimap.tsx index fcd57e98b07d4..a2c1121ff2ba0 100644 --- a/x-pack/plugins/observability_solution/infra/public/components/logging/log_minimap/log_minimap.tsx +++ b/x-pack/plugins/observability_solution/infra/public/components/logging/log_minimap/log_minimap.tsx @@ -14,6 +14,7 @@ import { import { scaleLinear } from 'd3-scale'; import moment from 'moment'; import * as React from 'react'; +import { COLOR_MODES_STANDARD } from '@elastic/eui'; import { DensityChart } from './density_chart'; import { HighlightedInterval } from './highlighted_interval'; import { SearchMarkers } from './search_markers'; @@ -166,7 +167,7 @@ const TimeCursor = styled.line` pointer-events: none; stroke-width: 1px; stroke: ${(props) => - props.theme.colorMode === 'DARK' + props.theme.colorMode === COLOR_MODES_STANDARD.dark ? props.theme.euiTheme.colors.darkestShade : props.theme.euiTheme.colors.darkShade}; `; diff --git a/x-pack/plugins/observability_solution/infra/public/components/logging/log_minimap/time_ruler.tsx b/x-pack/plugins/observability_solution/infra/public/components/logging/log_minimap/time_ruler.tsx index 1223e014fe9e6..59e94333e94ee 100644 --- a/x-pack/plugins/observability_solution/infra/public/components/logging/log_minimap/time_ruler.tsx +++ b/x-pack/plugins/observability_solution/infra/public/components/logging/log_minimap/time_ruler.tsx @@ -8,7 +8,7 @@ import { scaleTime } from 'd3-scale'; import * as React from 'react'; import styled from '@emotion/styled'; -import { useEuiFontSize } from '@elastic/eui'; +import { COLOR_MODES_STANDARD, useEuiFontSize } from '@elastic/eui'; import { useKibanaTimeZoneSetting } from '../../../hooks/use_kibana_time_zone_setting'; import { getTimeLabelFormat } from './time_label_formatter'; @@ -69,7 +69,7 @@ const TimeRulerTickLabel = styled.text` const TimeRulerGridLine = styled.line` stroke: ${(props) => - props.theme.colorMode === 'DARK' + props.theme.colorMode === COLOR_MODES_STANDARD.dark ? props.theme.euiTheme.colors.darkestShade : props.theme.euiTheme.colors.darkShade}; stroke-opacity: 0.5; diff --git a/x-pack/plugins/observability_solution/infra/tsconfig.json b/x-pack/plugins/observability_solution/infra/tsconfig.json index dd3e56903ea5d..639780d61ae82 100644 --- a/x-pack/plugins/observability_solution/infra/tsconfig.json +++ b/x-pack/plugins/observability_solution/infra/tsconfig.json @@ -9,7 +9,6 @@ "public/**/*", "server/**/*", "types/**/*", - "./emotion.d.ts" ], "kbn_references": [ "@kbn/core", diff --git a/x-pack/plugins/observability_solution/observability_shared/public/hooks/use_chart_theme.tsx b/x-pack/plugins/observability_solution/observability_shared/public/hooks/use_chart_theme.tsx index 1a914e4abcd7e..3c06cfa9c7128 100644 --- a/x-pack/plugins/observability_solution/observability_shared/public/hooks/use_chart_theme.tsx +++ b/x-pack/plugins/observability_solution/observability_shared/public/hooks/use_chart_theme.tsx @@ -5,13 +5,13 @@ * 2.0. */ -import { LIGHT_THEME, DARK_THEME, PartialTheme, Theme } from '@elastic/charts'; +import { LIGHT_THEME, DARK_THEME, PartialTheme } from '@elastic/charts'; +import { useEuiTheme, COLOR_MODES_STANDARD } from '@elastic/eui'; import { useMemo } from 'react'; -import { useTheme } from './use_theme'; -export function useChartThemes(): { baseTheme: Theme; theme: PartialTheme[] } { - const theme = useTheme(); - const baseTheme = theme.darkMode ? DARK_THEME : LIGHT_THEME; +export function useChartThemes() { + const theme = useEuiTheme(); + const baseTheme = theme.colorMode === COLOR_MODES_STANDARD.dark ? DARK_THEME : LIGHT_THEME; return useMemo(() => { const themeOverrides: PartialTheme = {