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 60dbb2b1053d..6f6e1ddbb14a 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 918a6a7d1c38..a5ef4968bd3b 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 7f5530aa7fa0..65427caba747 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 16d5d077a9b4..9c29bb936db8 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 8e7cce37b5be..0136fcfb88f3 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 ea79b1ef198b..8524a29fb4b6 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 d02eed810acd..e6c6ce65dfff 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 3f8b8728fd48..f7cd26fab3f8 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 4515c2cdd571..7bbfb43af71b 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 2ea10868957b..7ad5661159fd 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 b8902b30dcff..47101471a551 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 a4c23555edda..3740edcbfe7d 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 c7acbfee7e45..40d9a21bee35 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 51377d5e3770..c6593806191f 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 c883376cac4e..cfb50f983fdb 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 293dff7b6080..0d212682145f 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 63a1dac2017b..a936ec601ebe 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 2de5991b19b4..eb1ab41f1dfa 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 ab662e53d9d8..30544489eb0d 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 89ffc3b0be3f..e01dc55447f2 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 cd1d4110e32f..aab5a3a3af20 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 4923ed35a6d4..403a5ff03db7 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 278825c25c68..92cad40623c0 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 0938c97d737d..7153b673b319 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 47451fac265c..b514277a5dc9 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 59f6020d61c3..4376eeccab5c 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 9b7ace008206..bf4c23406099 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 b6a901bac8d2..38f681921a6c 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 aa4299006cc4..1c21826c80d3 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 21d7bbf6d120..71d3f7aa271d 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 ac15281d6121..e3a293a279e2 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 8535c483529a..eacd67e6dabe 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 af0befbc0616..fa6fdbce3c76 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 7d419baecc9e..9de1e5486141 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 113be5407c07..7d6bcbe69cfa 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 307887148e3e..562093976177 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 523a4e1ea415..a81df94c3d6f 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 a66f77909072..827ea59015f2 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 2bafca33d06f..1e8f1f7b5d0e 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 fb1414382ed5..272a5e97dfd1 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 31604d893401..c7df75312c79 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 e40ee3e80eaa..fdf607c340fe 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 98cdc1e65c3a..71974cfbe75b 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 f2682b2cce2d..bd9ade55866e 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 ae36d8b0434d..ddd74716ceef 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 02ef3b97222b..564381f78a4a 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 bd76025d9606..30053480eb4e 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 9b3d54d4efad..74461fcb7920 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 74b3975335c9..b1d1b0f8d745 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 66f346f36a5f..25acce3e5679 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 a6520f964c7b..41d11ba74e2e 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 29dd5ffde654..91f60fd9df84 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 dbdc877742e1..56a5367a4cfa 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 16a80ce09efd..3c3440b7833c 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 e4c9f0cf2816..f412df0b099b 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 6416b6f24cf6..214cc8841b2c 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 11d0f9bba929..296c98705294 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 4a46d708bb82..e14f185e2f6f 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 74ad3ffbe3d1..d05085f0b823 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 bd87c7b61631..4889f33b3f0d 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 00e6c0265fdf..20d018e27362 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 8d7091e17a4a..2441dd7893cd 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 69ea154538d6..2b709e207747 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 8103f729f375..e0ad710a14d9 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 1a88bf8b48c0..65f22d78adf9 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 56b61cb02d8b..74179489aceb 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 f12f367eab8e..8e0c24162f2a 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 fec3fc4cfe2d..6e5ce28e8cd2 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 84e2e6cb056d..b18fd70d0d2c 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 2630a6c7862c..09b48cc47b30 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 37ddfbda58c3..1ee668fb5765 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 faff0a073fe6..14b2a277c393 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 96ab6a51e49f..1f2a929084be 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 7b90aeb3ee03..5f08befb46a3 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 e9ec46610fe2..5f08e7375788 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 814dfd3d7798..e25803c98622 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 1b1c5c3c59a7..a3baef9a802b 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 841b74a37a40..625b19f92342 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 1cedd94a86be..3c07b8f608ba 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 4baf94c6f055..b6d7d1789fac 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 696f987ea2b6..d202c1cb770b 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 c77c3e7cc7a9..8c2f62f7998b 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 e6780927e755..a7c4b2311508 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 549509dc96f5..d36a5bf42216 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 3abd57773365..a79b5529d2cd 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 00aac84b8373..734ac85cf40e 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 8c9bc4e5cdd4..b5fe38b6eb66 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 61692b3dbf96..1180b1c9ed05 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 5dc9a8a5073b..e59d6e9bc5c1 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 f8799874408e..61921adf2741 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 f620c97984ca..024f05e493a2 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 02289485e12d..09effede911f 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 9de373d2189e..2eb502feb99e 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 6091a6ff8c73..2d5e1cfeb41e 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 7eee907d0526..5732c426e261 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 dcfaae3f9b25..9a2f3e041bf1 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 a8caf4685020..9fffd11600c8 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 54894b3f536c..57e3fa94b5ba 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 292aaaed816a..f6e2a1a52b53 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 5e1c450e336d..02e04ed09803 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 43ccf990257b..8458a4c9d446 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 8c18ac38efc3..000000000000 --- 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 cd10f07f2475..129f15a3355c 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 8924999f4821..6796c6576ab0 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 76a6b868300c..a5d6f6782908 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 213178080e53..000000000000 --- 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 5f42d19d035d..d45fe0c3c42c 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 fcd57e98b07d..a2c1121ff2ba 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 1223e014fe9e..59e94333e94e 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 dd3e56903ea5..639780d61ae8 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 1a914e4abcd7..3c06cfa9c712 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 = {