wip

elastic · Dec 13, 2024 · 6168cfd · 6168cfd
1 parent ff331f2
commit 6168cfd
Show file tree

Hide file tree

Showing 68 changed files with 402 additions and 345 deletions.
diff --git a/x-pack/plugins/observability_solution/apm/common/service_health_status.ts b/x-pack/plugins/observability_solution/apm/common/service_health_status.ts
@@ -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.vis.euiColorVis0;
     case ServiceHealthStatus.warning:
-      return theme.eui.euiColorVis5;
+      return euiTheme.colors.vis.euiColorVis5;
     case ServiceHealthStatus.critical:
-      return theme.eui.euiColorVis9;
+      return euiTheme.colors.vis.euiColorVis9;
     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.vis.euiColorVis0;
     case ServiceHealthStatus.warning:
-      return theme.eui.euiColorVis5_behindText;
+      return euiTheme.colors.vis.euiColorVis5;
     case ServiceHealthStatus.critical:
-      return theme.eui.euiColorVis9_behindText;
+      return euiTheme.colors.vis.euiColorVis9;
     case ServiceHealthStatus.unknown:
-      return theme.eui.euiColorMediumShade;
+      return euiTheme.colors.mediumShade;
   }
 }
 

diff --git a/x-pack/plugins/observability_solution/apm/emotion.d.ts b/x-pack/plugins/observability_solution/apm/emotion.d.ts
@@ -0,0 +1,14 @@
+/*
+ * 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/...servability_solution/apm/public/components/alerting/ui_components/chart_preview/index.tsx b/...servability_solution/apm/public/components/alerting/ui_components/chart_preview/index.tsx
@@ -20,15 +20,14 @@ import {
   Tooltip,
   niceTimeFormatter,
 } from '@elastic/charts';
-import { EuiSpacer } from '@elastic/eui';
+import { EuiSpacer, useEuiTheme } from '@elastic/eui';
 import React, { useMemo } from 'react';
 import { IUiSettingsClient } from '@kbn/core/public';
 import { TimeUnitChar } from '@kbn/observability-plugin/common';
 import { UI_SETTINGS } from '@kbn/data-plugin/public';
 import moment from 'moment';
 import { i18n } from '@kbn/i18n';
 import { Coordinate } from '../../../../../typings/timeseries';
-import { useTheme } from '../../../../hooks/use_theme';
 import { getTimeZone } from '../../../shared/charts/helper/timezone';
 import { TimeLabelForData, TIME_LABELS, getDomain } from './chart_preview_helper';
 import { ALERT_PREVIEW_BUCKET_SIZE } from '../../utils/helper';
@@ -52,15 +51,15 @@ export function ChartPreview({
   timeUnit = 'm',
   totalGroups,
 }: ChartPreviewProps) {
-  const theme = useTheme();
+  const { euiTheme } = useEuiTheme();
   const thresholdOpacity = 0.3;
   const DEFAULT_DATE_FORMAT = 'Y-MM-DD HH:mm:ss';
 
   const style = {
-    fill: theme.eui.euiColorVis2,
+    fill: euiTheme.colors.vis.euiColorVis2,
     line: {
       strokeWidth: 2,
-      stroke: theme.eui.euiColorVis2,
+      stroke: euiTheme.colors.vis.euiColorVis2,
       opacity: 1,
     },
     opacity: thresholdOpacity,

diff --git a/...lity_solution/apm/public/components/app/correlations/failed_transactions_correlations.tsx b/...lity_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,
           }}
         >
           <EuiSwitch
@@ -473,7 +473,7 @@ export function FailedTransactionsCorrelations({ onFilter }: { onFilter: () => v
           <EuiIconTip
             size="m"
             iconProps={{
-              style: { marginLeft: euiTheme.eui.euiSizeXS },
+              style: { marginLeft: euiTheme.size.xs },
             }}
             content={i18n.translate(
               'xpack.apm.correlations.latencyCorrelations.advancedStatisticsTooltipContent',

diff --git a/...olution/apm/public/components/app/correlations/get_transaction_distribution_chart_data.ts b/...olution/apm/public/components/app/correlations/get_transaction_distribution_chart_data.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 type { HistogramItem } from '../../../../common/correlations/types';
 import { DurationDistributionChartData } from '../../shared/charts/duration_distribution_chart';
 import { LatencyCorrelation } from '../../../../common/correlations/latency_correlations/types';
@@ -18,7 +18,7 @@ export function getTransactionDistributionChartData({
   failedTransactionsHistogram,
   selectedTerm,
 }: {
-  euiTheme: EuiTheme;
+  euiTheme: EuiThemeComputed;
   allTransactionsHistogram?: HistogramItem[];
   failedTransactionsHistogram?: HistogramItem[];
   selectedTerm?: LatencyCorrelation | FailedTransactionsCorrelation | undefined;
@@ -31,7 +31,7 @@ export function getTransactionDistributionChartData({
         defaultMessage: 'All transactions',
       }),
       histogram: allTransactionsHistogram,
-      areaSeriesColor: euiTheme.eui.euiColorVis1,
+      areaSeriesColor: euiTheme.colors.vis.euiColorVis1,
     });
   }
 
@@ -41,15 +41,15 @@ export function getTransactionDistributionChartData({
         defaultMessage: 'Failed transactions',
       }),
       histogram: failedTransactionsHistogram,
-      areaSeriesColor: euiTheme.eui.euiColorVis7,
+      areaSeriesColor: euiTheme.colors.vis.euiColorVis7,
     });
   }
 
   if (selectedTerm && Array.isArray(selectedTerm.histogram)) {
     transactionDistributionChartData.push({
       id: `${selectedTerm.fieldName}:${selectedTerm.fieldValue}`,
       histogram: selectedTerm.histogram,
-      areaSeriesColor: euiTheme.eui.euiColorVis2,
+      areaSeriesColor: euiTheme.colors.vis.euiColorVis2,
     });
   }
 

diff --git a/...ns/observability_solution/apm/public/components/app/correlations/latency_correlations.tsx b/...ns/observability_solution/apm/public/components/app/correlations/latency_correlations.tsx
@@ -17,6 +17,7 @@ import {
   EuiTitle,
   EuiBadge,
   EuiIconTip,
+  useEuiTheme,
 } from '@elastic/eui';
 import { Direction } from '@elastic/eui/src/services/sort/sort_direction';
 import { EuiTableSortingType } from '@elastic/eui/src/components/basic_table/table_types';
@@ -47,7 +48,6 @@ import { CorrelationsProgressControls } from './progress_controls';
 import { OnAddFilter } from './context_popover/field_stats_popover';
 import { useLatencyCorrelations } from './use_latency_correlations';
 import { getTransactionDistributionChartData } from './get_transaction_distribution_chart_data';
-import { useTheme } from '../../../hooks/use_theme';
 import { ChartTitleToolTip } from './chart_title_tool_tip';
 import { getLatencyCorrelationImpactLabel } from './utils/get_failed_transactions_correlation_impact_label';
 import { MIN_TAB_TITLE_HEIGHT } from '../../shared/charts/duration_distribution_chart_with_scrubber';
@@ -68,7 +68,7 @@ export function LatencyCorrelations({ onFilter }: { onFilter: () => 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/...mponents/app/dependency_operation_detail_view/dependency_operation_distribution_chart.tsx b/...mponents/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/...ution/apm/public/components/app/error_group_details/error_sampler/error_sample_detail.tsx b/...ution/apm/public/components/app/error_group_details/error_sampler/error_sample_detail.tsx
@@ -22,7 +22,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 { ObservabilityTriggerId } from '@kbn/observability-shared-plugin/common';
 import { getContextMenuItemsFromActions } from '@kbn/observability-shared-plugin/public';
 import { first } from 'lodash';
@@ -56,8 +56,8 @@ import { ExceptionStacktrace } from './exception_stacktrace';
 import { SampleSummary } from './sample_summary';
 import { ErrorSampleContextualInsight } from './error_sample_contextual_insight';
 
-const TransactionLinkName = euiStyled.div`
-  margin-left: ${({ theme }) => theme.eui.euiSizeS};
+const TransactionLinkName = styled.div`
+  margin-left: ${({ theme }) => theme.euiTheme.size.s};
   display: inline-block;
   vertical-align: middle;
 `;

diff --git a/...y_solution/apm/public/components/app/error_group_details/error_sampler/sample_summary.tsx b/...y_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/...bility_solution/apm/public/components/app/error_group_overview/error_group_list/index.tsx b/...bility_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/...ck/plugins/observability_solution/apm/public/components/app/help_popover/help_popover.tsx b/...ck/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/...s/observability_solution/apm/public/components/app/metrics/jvm_metrics_overview/index.tsx b/...s/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/...on/apm/public/components/app/metrics/serverless_metrics/serverless_function_name_link.tsx b/...on/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;