From 0b4775f6363103991b8b370829840abaa61180a2 Mon Sep 17 00:00:00 2001 From: "miriam.aparicio" Date: Mon, 2 Dec 2024 08:55:59 +0000 Subject: [PATCH 1/9] wip --- .../observability_solution/infra/emotion.d.ts | 14 + .../alerting/common/components/threshold.tsx | 9 +- .../alert_details_app_section/index.tsx | 6 +- .../components/expression_row.tsx | 10 +- .../tabs/processes/process_row.tsx | 35 +- .../autocomplete_field/autocomplete_field.tsx | 13 +- .../autocomplete_field/suggestion_item.tsx | 47 ++- .../components/empty_states/no_data.tsx | 5 +- .../public/components/eui/toolbar/toolbar.tsx | 13 +- .../public/components/fixed_datepicker.tsx | 7 +- .../infra/public/components/loading/index.tsx | 7 +- .../components/loading_overlay_wrapper.tsx | 10 +- .../quality_warning_notices.tsx | 6 +- .../category_expression.tsx | 13 +- .../missing_results_privileges_prompt.tsx | 4 +- .../missing_setup_privileges_prompt.tsx | 4 +- .../ml_unavailable_prompt.tsx | 5 +- .../setup_status_unknown_prompt.tsx | 4 +- .../logging/log_customization_menu.tsx | 5 +- .../log_entry_examples/log_entry_examples.tsx | 4 +- .../logging/log_highlights_menu.tsx | 23 +- .../logging/log_minimap/density_chart.tsx | 17 +- .../log_minimap/highlighted_interval.tsx | 13 +- .../logging/log_minimap/log_minimap.tsx | 16 +- .../logging/log_minimap/search_marker.tsx | 17 +- .../logging/log_minimap/time_ruler.tsx | 15 +- .../log_search_controls/log_search_input.tsx | 8 +- .../components/logging/log_statusbar.tsx | 17 +- .../infra/public/components/page.tsx | 13 +- .../infra/public/pages/error.tsx | 7 +- .../page_results_content.tsx | 6 +- .../sections/top_categories/datasets_list.tsx | 5 +- .../single_metric_comparison.tsx | 5 +- .../top_categories/top_categories_table.tsx | 5 +- .../sections/anomalies/expanded_row.tsx | 4 +- .../sections/anomalies/log_entry_example.tsx | 4 +- .../logs/settings/add_log_column_popover.tsx | 4 +- .../pages/logs/stream/page_logs_content.tsx | 4 +- .../logs/stream/page_view_log_in_context.tsx | 4 +- .../hosts/components/kpis/host_count_kpi.tsx | 6 +- .../search_bar/controls_content.tsx | 6 +- .../components/bottom_drawer.tsx | 18 +- .../components/dropdown_button.tsx | 29 +- .../inventory_view/components/layout.tsx | 6 +- .../components/nodes_overview.tsx | 8 +- .../components/timeline/timeline.tsx | 22 +- .../components/waffle/gradient_legend.tsx | 13 +- .../components/waffle/group_name.tsx | 15 +- .../components/waffle/group_of_groups.tsx | 9 +- .../components/waffle/group_of_nodes.tsx | 8 +- .../components/waffle/legend.tsx | 5 +- .../components/waffle/legend_controls.tsx | 4 +- .../inventory_view/components/waffle/map.tsx | 7 +- .../metric_control/custom_metric_form.tsx | 393 +++++++++--------- .../components/waffle/palette_preview.tsx | 14 +- .../waffle/stepped_gradient_legend.tsx | 16 +- .../components/waffle/steps_legend.tsx | 13 +- .../waffle/waffle_sort_controls.tsx | 19 +- .../components/gauges_section_vis.tsx | 5 +- .../metric_detail/components/invalid_node.tsx | 4 +- .../components/layouts/aws_ec2_layout.tsx | 15 +- .../components/layouts/aws_rds_layout.tsx | 25 +- .../components/layouts/aws_s3_layout.tsx | 15 +- .../components/layouts/aws_sqs_layout.tsx | 15 +- .../components/layouts/container_layout.tsx | 37 +- .../layouts/nginx_layout_sections.tsx | 18 +- .../components/layouts/pod_layout.tsx | 21 +- .../components/metadata_details.tsx | 27 +- .../components/time_controls.tsx | 4 +- .../pages/metrics/metric_detail/types.ts | 4 +- .../metrics_explorer/components/chart.tsx | 4 +- .../public/utils/theme_utils/with_attrs.tsx | 19 + .../infra/tsconfig.json | 4 +- 73 files changed, 633 insertions(+), 603 deletions(-) create mode 100644 x-pack/plugins/observability_solution/infra/emotion.d.ts create mode 100644 x-pack/plugins/observability_solution/infra/public/utils/theme_utils/with_attrs.tsx diff --git a/x-pack/plugins/observability_solution/infra/emotion.d.ts b/x-pack/plugins/observability_solution/infra/emotion.d.ts new file mode 100644 index 0000000000000..213178080e536 --- /dev/null +++ b/x-pack/plugins/observability_solution/infra/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/x-pack/plugins/observability_solution/infra/public/alerting/common/components/threshold.tsx b/x-pack/plugins/observability_solution/infra/public/alerting/common/components/threshold.tsx index 0b587bf067f47..f58faae9f6b41 100644 --- a/x-pack/plugins/observability_solution/infra/public/alerting/common/components/threshold.tsx +++ b/x-pack/plugins/observability_solution/infra/public/alerting/common/components/threshold.tsx @@ -6,14 +6,15 @@ */ import React from 'react'; +import type { Theme as EuiTheme } from '@emotion/react'; import { Chart, Metric, Settings } from '@elastic/charts'; -import { EuiIcon, EuiPanel, useEuiBackgroundColor } from '@elastic/eui'; -import type { PartialTheme, Theme } from '@elastic/charts'; +import { EuiIcon, EuiPanel } from '@elastic/eui'; +import type { Theme } from '@elastic/charts'; import { i18n } from '@kbn/i18n'; import { COMPARATORS } from '@kbn/alerting-comparators'; export interface ChartProps { - theme?: PartialTheme; + theme?: EuiTheme; baseTheme: Theme; } @@ -41,7 +42,7 @@ export const Threshold = ({ valueFormatter, warning, }: Props) => { - const color = useEuiBackgroundColor('danger'); + const color = theme?.euiTheme.colors.danger; return ( props.theme.eui.euiSizeS}; + margin-bottom: ${(props) => props.theme.euiTheme.size.s}; `; -const ExpandedRowCell = euiStyled(EuiTableRowCell).attrs({ - textOnly: false, - colSpan: 6, -})` - padding-top: ${(props) => props.theme.eui.euiSizeM} !important; - padding-bottom: ${(props) => props.theme.eui.euiSizeM} !important; - background-color: ${(props) => props.theme.eui.euiColorLightestShade}; +ExpandedCommandLine.defaultProps = { transparentBackground: true }; + +const ExpandedRowCell = styled(EuiTableRowCell)` + padding-top: ${(props) => props.theme.euiTheme.size.m} !important; + padding-bottom: ${(props) => props.theme.euiTheme.size.m} !important; + background-color: ${(props) => props.theme.euiTheme.colors.lightestShade}; `; + +ExpandedRowCell.defaultProps = { textOnly: false, colSpan: 6 }; diff --git a/x-pack/plugins/observability_solution/infra/public/components/autocomplete_field/autocomplete_field.tsx b/x-pack/plugins/observability_solution/infra/public/components/autocomplete_field/autocomplete_field.tsx index 657db92072275..07dbeb11883ad 100644 --- a/x-pack/plugins/observability_solution/infra/public/components/autocomplete_field/autocomplete_field.tsx +++ b/x-pack/plugins/observability_solution/infra/public/components/autocomplete_field/autocomplete_field.tsx @@ -8,7 +8,7 @@ import { EuiFieldSearch, EuiOutsideClickDetector, EuiPanel } from '@elastic/eui'; import React from 'react'; import { QuerySuggestion } from '@kbn/unified-search-plugin/public'; -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; import { composeStateUpdaters } from '../../utils/typed_react'; import { SuggestionItem } from './suggestion_item'; @@ -302,19 +302,18 @@ const withUnfocused = (state: AutocompleteFieldState) => ({ isFocused: false, }); -const AutocompleteContainer = euiStyled.div` +const AutocompleteContainer = styled.div` position: relative; `; -const SuggestionsPanel = euiStyled(EuiPanel).attrs(() => ({ - paddingSize: 'none', - hasShadow: true, -}))` +const SuggestionsPanel = styled(EuiPanel)` position: absolute; width: 100%; margin-top: 2px; overflow-x: hidden; overflow-y: scroll; - z-index: ${(props) => props.theme.eui.euiZLevel1}; + z-index: ${(props) => props.theme.euiTheme.euiZLevel1}; max-height: 322px; `; + +SuggestionsPanel.defaultProps = { paddingSize: 'none', hasShadow: true }; diff --git a/x-pack/plugins/observability_solution/infra/public/components/autocomplete_field/suggestion_item.tsx b/x-pack/plugins/observability_solution/infra/public/components/autocomplete_field/suggestion_item.tsx index a317ad3ecff5e..f1dc90bde8a69 100644 --- a/x-pack/plugins/observability_solution/infra/public/components/autocomplete_field/suggestion_item.tsx +++ b/x-pack/plugins/observability_solution/infra/public/components/autocomplete_field/suggestion_item.tsx @@ -7,7 +7,8 @@ import React from 'react'; import { EuiIcon } from '@elastic/eui'; -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; +import { Theme } from '@emotion/react'; import { QuerySuggestion, QuerySuggestionTypes } from '@kbn/unified-search-plugin/public'; import { transparentize } from 'polished'; @@ -36,51 +37,51 @@ SuggestionItem.defaultProps = { isSelected: false, }; -const SuggestionItemContainer = euiStyled.div<{ +const SuggestionItemContainer = styled.div<{ isSelected?: boolean; }>` display: flex; flex-direction: row; - font-size: ${(props) => props.theme.eui.euiFontSizeS}; - height: ${(props) => props.theme.eui.euiSizeXL}; + font-size: ${({ theme }) => theme.euiTheme.size.s}; + height: ${({ theme }) => theme.euiTheme.size.xl}; white-space: nowrap; background-color: ${(props) => - props.isSelected ? props.theme.eui.euiColorLightestShade : 'transparent'}; + props.isSelected ? props.theme.euiTheme.colors.lightestShade : 'transparent'}; `; -const SuggestionItemField = euiStyled.div` +const SuggestionItemField = styled.div` align-items: center; cursor: pointer; display: flex; flex-direction: row; - height: ${(props) => props.theme.eui.euiSizeXL}; - padding: ${(props) => props.theme.eui.euiSizeXS}; + height: ${({ theme }) => theme.euiTheme.size.xl}; + padding: ${({ theme }) => theme.euiTheme.size.xs}; `; -const SuggestionItemIconField = euiStyled(SuggestionItemField)<{ +const SuggestionItemIconField = styled(SuggestionItemField)<{ suggestionType: QuerySuggestionTypes; }>` - background-color: ${(props) => - transparentize(0.9, getEuiIconColor(props.theme, props.suggestionType))}; - color: ${(props) => getEuiIconColor(props.theme, props.suggestionType)}; + background-color: ${({ theme, suggestionType }) => + transparentize(0.9, getEuiIconColor(theme, suggestionType))}; + color: ${({ theme, suggestionType }) => getEuiIconColor(theme, suggestionType)}; flex: 0 0 auto; justify-content: center; - width: ${(props) => props.theme.eui.euiSizeXL}; + width: ${({ theme }) => theme.euiTheme.size.xl}; `; -const SuggestionItemTextField = euiStyled(SuggestionItemField)` +const SuggestionItemTextField = styled(SuggestionItemField)` flex: 2 0 0; - font-family: ${(props) => props.theme.eui.euiCodeFontFamily}; + font-family: ${({ theme }) => theme.euiTheme.font.familyCode}; `; -const SuggestionItemDescriptionField = euiStyled(SuggestionItemField)` +const SuggestionItemDescriptionField = styled(SuggestionItemField)` flex: 3 0 0; p { display: inline; span { - font-family: ${(props) => props.theme.eui.euiCodeFontFamily}; + font-family: ${({ theme }) => theme.euiTheme.font.familyCode}; } } `; @@ -102,18 +103,18 @@ const getEuiIconType = (suggestionType: QuerySuggestionTypes) => { } }; -const getEuiIconColor = (theme: any, suggestionType: QuerySuggestionTypes): string => { +const getEuiIconColor = (theme: Theme, suggestionType: QuerySuggestionTypes): string => { switch (suggestionType) { case QuerySuggestionTypes.Field: - return theme?.eui.euiColorVis7; + return theme?.euiTheme.colors.vis.euiColorVis7; case QuerySuggestionTypes.Value: - return theme?.eui.euiColorVis0; + return theme?.euiTheme.colors.vis.euiColorVis0; case QuerySuggestionTypes.Operator: - return theme?.eui.euiColorVis1; + return theme?.euiTheme.colors.vis.euiColorVis1; case QuerySuggestionTypes.Conjunction: - return theme?.eui.euiColorVis2; + return theme?.euiTheme.colors.vis.euiColorVis2; case QuerySuggestionTypes.RecentSearch: default: - return theme?.eui.euiColorMediumShade; + return theme?.euiTheme.colors.mediumShade; } }; diff --git a/x-pack/plugins/observability_solution/infra/public/components/empty_states/no_data.tsx b/x-pack/plugins/observability_solution/infra/public/components/empty_states/no_data.tsx index 0fc2af08d1e5f..3a9fb85331f3c 100644 --- a/x-pack/plugins/observability_solution/infra/public/components/empty_states/no_data.tsx +++ b/x-pack/plugins/observability_solution/infra/public/components/empty_states/no_data.tsx @@ -7,8 +7,7 @@ import { EuiButton, EuiEmptyPrompt } from '@elastic/eui'; import React from 'react'; - -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; interface NoDataProps { titleText: string; @@ -44,6 +43,6 @@ export const NoData: React.FC = ({ /> ); -const CenteredEmptyPrompt = euiStyled(EuiEmptyPrompt)` +const CenteredEmptyPrompt = styled(EuiEmptyPrompt)` align-self: center; `; diff --git a/x-pack/plugins/observability_solution/infra/public/components/eui/toolbar/toolbar.tsx b/x-pack/plugins/observability_solution/infra/public/components/eui/toolbar/toolbar.tsx index 95f45562c6241..b4598045400b8 100644 --- a/x-pack/plugins/observability_solution/infra/public/components/eui/toolbar/toolbar.tsx +++ b/x-pack/plugins/observability_solution/infra/public/components/eui/toolbar/toolbar.tsx @@ -8,20 +8,17 @@ import { EuiPanel } from '@elastic/eui'; import { FunctionComponent } from 'react'; import { StyledComponent } from 'styled-components'; -import { euiStyled, EuiTheme } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; // 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 Toolbar: StyledComponent = euiStyled(EuiPanel).attrs( - () => ({ - grow: false, - paddingSize: 'none', - }) -)` +export const Toolbar: StyledComponent = styled(EuiPanel)` border-top: none; border-right: none; border-left: none; border-radius: 0; - padding: ${(props) => props.theme.eui.euiSizeS} ${(props) => props.theme.eui.euiSizeL}; + padding: ${(props) => props.theme.euiTheme.size.s} ${(props) => props.theme.size.l}; `; + +Toolbar.defaultProps = { grow: false, paddingSize: 'none' }; diff --git a/x-pack/plugins/observability_solution/infra/public/components/fixed_datepicker.tsx b/x-pack/plugins/observability_solution/infra/public/components/fixed_datepicker.tsx index 2d11fd155aa28..3fd96c72166f3 100644 --- a/x-pack/plugins/observability_solution/infra/public/components/fixed_datepicker.tsx +++ b/x-pack/plugins/observability_solution/infra/public/components/fixed_datepicker.tsx @@ -8,15 +8,16 @@ import { EuiDatePicker, EuiDatePickerProps } from '@elastic/eui'; import React, { FunctionComponent } from 'react'; import { StyledComponent } from 'styled-components'; -import { euiStyled, EuiTheme } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; +import { Theme } from '@emotion/react'; // 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 FixedDatePicker: StyledComponent< FunctionComponent, - EuiTheme -> = euiStyled( + Theme +> = styled( ({ className, inputClassName, diff --git a/x-pack/plugins/observability_solution/infra/public/components/loading/index.tsx b/x-pack/plugins/observability_solution/infra/public/components/loading/index.tsx index b4d8a4867c71e..372bd604834ef 100644 --- a/x-pack/plugins/observability_solution/infra/public/components/loading/index.tsx +++ b/x-pack/plugins/observability_solution/infra/public/components/loading/index.tsx @@ -7,8 +7,7 @@ import { EuiLoadingChart, EuiPanel, EuiText } from '@elastic/eui'; import * as React from 'react'; - -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; interface InfraLoadingProps { text: string | JSX.Element; @@ -34,7 +33,7 @@ export class InfraLoadingPanel extends React.PureComponent & { @@ -28,13 +28,13 @@ const Overlay: FC> = ({ children }) => ( {children ? children : } ); -const RelativeDiv = euiStyled.div` +const RelativeDiv = styled.div` position: relative; `; -const OverlayDiv = euiStyled.div` +const OverlayDiv = styled.div` align-items: center; - background-color: ${(props) => transparentize(0.3, props.theme.eui.euiColorEmptyShade)}; + background-color: ${(props) => transparentize(0.3, props.theme.euiTheme.colors.emptyShade)}; display: flex; height: 100%; justify-content: center; @@ -42,5 +42,5 @@ const OverlayDiv = euiStyled.div` position: absolute; top: 0; width: 100%; - z-index: ${(props) => props.theme.eui.euiZLevel1}; + z-index: ${(props) => props.theme.euiTheme.euiZLevel1}; `; diff --git a/x-pack/plugins/observability_solution/infra/public/components/logging/log_analysis_job_status/quality_warning_notices.tsx b/x-pack/plugins/observability_solution/infra/public/components/logging/log_analysis_job_status/quality_warning_notices.tsx index b86df4954c431..e3b4ef43106be 100644 --- a/x-pack/plugins/observability_solution/infra/public/components/logging/log_analysis_job_status/quality_warning_notices.tsx +++ b/x-pack/plugins/observability_solution/infra/public/components/logging/log_analysis_job_status/quality_warning_notices.tsx @@ -17,7 +17,7 @@ import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n-react'; import { groupBy } from 'lodash'; import React, { Fragment, useState } from 'react'; -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; import { CategoryQualityWarning, CategoryQualityWarningReason, @@ -83,10 +83,10 @@ export const CategoryQualityWarnings: React.FC<{ ); }; -const QualityWarningReasonDescription = euiStyled(EuiDescriptionListDescription)` +const QualityWarningReasonDescription = styled(EuiDescriptionListDescription)` display: list-item; list-style-type: disc; - margin-left: ${(props) => props.theme.eui.euiSizeM}; + margin-left: ${(props) => props.theme.euiTheme.size.m}; `; const categoryQualityWarningCalloutTitle = i18n.translate( diff --git a/x-pack/plugins/observability_solution/infra/public/components/logging/log_analysis_results/category_expression.tsx b/x-pack/plugins/observability_solution/infra/public/components/logging/log_analysis_results/category_expression.tsx index 849b8cdaa4546..432b12a0f2372 100644 --- a/x-pack/plugins/observability_solution/infra/public/components/logging/log_analysis_results/category_expression.tsx +++ b/x-pack/plugins/observability_solution/infra/public/components/logging/log_analysis_results/category_expression.tsx @@ -7,8 +7,7 @@ import { i18n } from '@kbn/i18n'; import React, { memo } from 'react'; - -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; export const RegularExpressionRepresentation: React.FunctionComponent<{ maximumSegmentCount?: number; @@ -48,16 +47,16 @@ export const RegularExpressionRepresentation: React.FunctionComponent<{ ); }); -const CategoryPattern = euiStyled.span` - font-family: ${(props) => props.theme.eui.euiCodeFontFamily}; +const CategoryPattern = styled.span` + font-family: ${(props) => props.theme.euiTheme.font.familyCode}; word-break: break-all; `; -const CategoryPatternWildcard = euiStyled.span` - color: ${(props) => props.theme.eui.euiColorMediumShade}; +const CategoryPatternWildcard = styled.span` + color: ${(props) => props.theme.euiTheme.colors.mediumShade}; `; -const CategoryPatternSegment = euiStyled.span` +const CategoryPatternSegment = styled.span` font-weight: bold; `; diff --git a/x-pack/plugins/observability_solution/infra/public/components/logging/log_analysis_setup/missing_results_privileges_prompt.tsx b/x-pack/plugins/observability_solution/infra/public/components/logging/log_analysis_setup/missing_results_privileges_prompt.tsx index dce819ffb0930..db20baea06cc1 100644 --- a/x-pack/plugins/observability_solution/infra/public/components/logging/log_analysis_setup/missing_results_privileges_prompt.tsx +++ b/x-pack/plugins/observability_solution/infra/public/components/logging/log_analysis_setup/missing_results_privileges_prompt.tsx @@ -7,7 +7,7 @@ import { EuiEmptyPrompt } from '@elastic/eui'; import React from 'react'; -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; import { missingMlPrivilegesTitle, missingMlResultsPrivilegesDescription, @@ -23,6 +23,6 @@ export const MissingResultsPrivilegesPrompt: React.FunctionComponent = () => ( /> ); -const EmptyPrompt = euiStyled(EuiEmptyPrompt)` +const EmptyPrompt = styled(EuiEmptyPrompt)` align-self: center; `; diff --git a/x-pack/plugins/observability_solution/infra/public/components/logging/log_analysis_setup/missing_setup_privileges_prompt.tsx b/x-pack/plugins/observability_solution/infra/public/components/logging/log_analysis_setup/missing_setup_privileges_prompt.tsx index 4e2a360b55ceb..44f98fbf1ba56 100644 --- a/x-pack/plugins/observability_solution/infra/public/components/logging/log_analysis_setup/missing_setup_privileges_prompt.tsx +++ b/x-pack/plugins/observability_solution/infra/public/components/logging/log_analysis_setup/missing_setup_privileges_prompt.tsx @@ -7,7 +7,7 @@ import { EuiEmptyPrompt } from '@elastic/eui'; import React from 'react'; -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; import { missingMlPrivilegesTitle, missingMlSetupPrivilegesDescription, @@ -23,6 +23,6 @@ export const MissingSetupPrivilegesPrompt: React.FunctionComponent = () => ( /> ); -const EmptyPrompt = euiStyled(EuiEmptyPrompt)` +const EmptyPrompt = styled(EuiEmptyPrompt)` align-self: center; `; diff --git a/x-pack/plugins/observability_solution/infra/public/components/logging/log_analysis_setup/ml_unavailable_prompt.tsx b/x-pack/plugins/observability_solution/infra/public/components/logging/log_analysis_setup/ml_unavailable_prompt.tsx index 5dafe8514ee08..a5935f30f52e3 100644 --- a/x-pack/plugins/observability_solution/infra/public/components/logging/log_analysis_setup/ml_unavailable_prompt.tsx +++ b/x-pack/plugins/observability_solution/infra/public/components/logging/log_analysis_setup/ml_unavailable_prompt.tsx @@ -9,8 +9,7 @@ import { EuiButton, EuiEmptyPrompt, EuiLink } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n-react'; import React from 'react'; - -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; export const MlUnavailablePrompt: React.FunctionComponent<{}> = () => ( = () => ( /> ); -const EmptyPrompt = euiStyled(EuiEmptyPrompt)` +const EmptyPrompt = styled(EuiEmptyPrompt)` align-self: center; `; diff --git a/x-pack/plugins/observability_solution/infra/public/components/logging/log_analysis_setup/setup_status_unknown_prompt.tsx b/x-pack/plugins/observability_solution/infra/public/components/logging/log_analysis_setup/setup_status_unknown_prompt.tsx index 55cb23c5c51a2..25b759191ca87 100644 --- a/x-pack/plugins/observability_solution/infra/public/components/logging/log_analysis_setup/setup_status_unknown_prompt.tsx +++ b/x-pack/plugins/observability_solution/infra/public/components/logging/log_analysis_setup/setup_status_unknown_prompt.tsx @@ -9,7 +9,7 @@ import React from 'react'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n-react'; import { EuiEmptyPrompt, EuiButton } from '@elastic/eui'; -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; interface Props { retry: () => void; @@ -42,6 +42,6 @@ export const LogAnalysisSetupStatusUnknownPrompt: React.FunctionComponent /> ); -const EmptyPrompt = euiStyled(EuiEmptyPrompt)` +const EmptyPrompt = styled(EuiEmptyPrompt)` align-self: center; `; diff --git a/x-pack/plugins/observability_solution/infra/public/components/logging/log_customization_menu.tsx b/x-pack/plugins/observability_solution/infra/public/components/logging/log_customization_menu.tsx index 5e7db2009b33c..e39053a489a49 100644 --- a/x-pack/plugins/observability_solution/infra/public/components/logging/log_customization_menu.tsx +++ b/x-pack/plugins/observability_solution/infra/public/components/logging/log_customization_menu.tsx @@ -8,8 +8,7 @@ import { EuiButtonEmpty, EuiPopover } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n-react'; import * as React from 'react'; - -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; interface LogCustomizationMenuState { isShown: boolean; @@ -75,6 +74,6 @@ export class LogCustomizationMenu extends React.Component< } } -const CustomizationMenuContent = euiStyled.div` +const CustomizationMenuContent = styled.div` min-width: 200px; `; diff --git a/x-pack/plugins/observability_solution/infra/public/components/logging/log_entry_examples/log_entry_examples.tsx b/x-pack/plugins/observability_solution/infra/public/components/logging/log_entry_examples/log_entry_examples.tsx index 2acb77b9406b6..c124866dad8e9 100644 --- a/x-pack/plugins/observability_solution/infra/public/components/logging/log_entry_examples/log_entry_examples.tsx +++ b/x-pack/plugins/observability_solution/infra/public/components/logging/log_entry_examples/log_entry_examples.tsx @@ -6,7 +6,7 @@ */ import React, { FC, PropsWithChildren } from 'react'; -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; import { LogEntryExampleMessagesEmptyIndicator } from './log_entry_examples_empty_indicator'; import { LogEntryExampleMessagesFailureIndicator } from './log_entry_examples_failure_indicator'; import { LogEntryExampleMessagesLoadingIndicator } from './log_entry_examples_loading_indicator'; @@ -41,7 +41,7 @@ export const LogEntryExampleMessages: FC> = ({ ); }; -const Wrapper = euiStyled.div` +const Wrapper = styled.div` align-items: stretch; flex-direction: column; flex: 1 0 0%; diff --git a/x-pack/plugins/observability_solution/infra/public/components/logging/log_highlights_menu.tsx b/x-pack/plugins/observability_solution/infra/public/components/logging/log_highlights_menu.tsx index 1e53d8125834f..1657fdc51450d 100644 --- a/x-pack/plugins/observability_solution/infra/public/components/logging/log_highlights_menu.tsx +++ b/x-pack/plugins/observability_solution/infra/public/components/logging/log_highlights_menu.tsx @@ -18,9 +18,9 @@ import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n-react'; import { debounce } from 'lodash'; import React, { useCallback, useMemo, useState } from 'react'; - -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; import { useVisibilityState } from '../../hooks/use_visibility_state'; +import { withAttrs } from '../../utils/theme_utils/with_attrs'; interface LogHighlightsMenuProps { onChange: (highlightTerms: string[]) => void; @@ -174,14 +174,17 @@ const goToNextHighlightLabel = i18n.translate( } ); -const ActiveHighlightsIndicator = euiStyled(EuiIcon).attrs(({ theme }) => ({ - type: 'checkInCircleFilled', - size: 'm', - color: theme?.eui.euiColorAccent, -}))` - padding-left: ${(props) => props.theme.eui.euiSizeXS}; -`; +const ActiveHighlightsIndicator = withAttrs( + styled(EuiIcon)` + padding-left: ${(props) => props.theme.euiTheme.size.xs}; + `, + ({ theme }) => ({ + type: 'checkInCircleFilled', + size: 'm', + color: theme?.euiTheme.colors.accent, + }) +); -const LogHighlightsMenuContent = euiStyled.div` +const LogHighlightsMenuContent = styled.div` width: 300px; `; 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 72709d7d2faee..78296744a9539 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 @@ -9,8 +9,7 @@ import { scaleLinear, scaleTime } from 'd3-scale'; import { area, curveMonotoneY } from 'd3-shape'; import { max } from 'lodash'; import * as React from 'react'; - -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; import { LogEntriesSummaryBucket } from '@kbn/logs-shared-plugin/common'; interface DensityChartProps { @@ -65,16 +64,16 @@ export const DensityChart: React.FC = ({ ); }; -const DensityChartPositiveBackground = euiStyled.rect` +const DensityChartPositiveBackground = styled.rect` fill: ${(props) => props.theme.darkMode - ? props.theme.eui.euiColorLightShade - : props.theme.eui.euiColorLightestShade}; + ? props.theme.euiTheme.colors.lightShade + : props.theme.euiTheme.colors.lightestShade}; `; -const PositiveAreaPath = euiStyled.path` +const PositiveAreaPath = styled.path` fill: ${(props) => - props.theme.darkMode - ? props.theme.eui.euiColorMediumShade - : props.theme.eui.euiColorLightShade}; + props.theme.colorMode === '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/highlighted_interval.tsx b/x-pack/plugins/observability_solution/infra/public/components/logging/log_minimap/highlighted_interval.tsx index f08d7a8ab579b..a672488cc2c5e 100644 --- a/x-pack/plugins/observability_solution/infra/public/components/logging/log_minimap/highlighted_interval.tsx +++ b/x-pack/plugins/observability_solution/infra/public/components/logging/log_minimap/highlighted_interval.tsx @@ -6,8 +6,7 @@ */ import * as React from 'react'; - -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; interface HighlightedIntervalProps { className?: string; @@ -53,14 +52,14 @@ export const HighlightedInterval: React.FC = ({ HighlightedInterval.displayName = 'HighlightedInterval'; -const HighlightTargetMarker = euiStyled.line` - stroke: ${(props) => props.theme.eui.euiColorPrimary}; +const HighlightTargetMarker = styled.line` + stroke: ${(props) => props.theme.euiTheme.colors.primary}; stroke-width: 1; `; -const HighlightPolygon = euiStyled.polygon` - fill: ${(props) => props.theme.eui.euiColorPrimary}; +const HighlightPolygon = styled.polygon` + fill: ${(props) => props.theme.euiTheme.colors.primary}; fill-opacity: 0.3; - stroke: ${(props) => props.theme.eui.euiColorPrimary}; + stroke: ${(props) => props.theme.euiTheme.colors.primary}; stroke-width: 1; `; 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 00c6bcc4a623f..ef67a7f325a4f 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 @@ -5,7 +5,7 @@ * 2.0. */ -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; import { LogEntriesSummaryBucket, LogEntriesSummaryHighlightsBucket, @@ -157,23 +157,23 @@ export class LogMinimap extends React.Component props.theme.eui.euiColorMediumShade}; +const MinimapBorder = styled.line` + stroke: ${(props) => props.theme.euiTheme.colors.mediumShade}; stroke-width: 1px; `; -const TimeCursor = euiStyled.line` +const TimeCursor = styled.line` pointer-events: none; stroke-width: 1px; stroke: ${(props) => props.theme.darkMode - ? props.theme.eui.euiColorDarkestShade - : props.theme.eui.euiColorDarkShade}; + ? props.theme.euiTheme.colors.darkestShade + : props.theme.euiTheme.colors.darkShade}; `; -const MinimapWrapper = euiStyled.svg` +const MinimapWrapper = styled.svg` cursor: pointer; - fill: ${(props) => props.theme.eui.euiColorEmptyShade}; + fill: ${(props) => props.theme.euiTheme.colors.emptyShade}; & ${TimeCursor} { visibility: hidden; } diff --git a/x-pack/plugins/observability_solution/infra/public/components/logging/log_minimap/search_marker.tsx b/x-pack/plugins/observability_solution/infra/public/components/logging/log_minimap/search_marker.tsx index efdbb3c3986e9..d651dc0885ad7 100644 --- a/x-pack/plugins/observability_solution/infra/public/components/logging/log_minimap/search_marker.tsx +++ b/x-pack/plugins/observability_solution/infra/public/components/logging/log_minimap/search_marker.tsx @@ -6,7 +6,8 @@ */ import { FormattedMessage } from '@kbn/i18n-react'; -import { euiStyled, keyframes } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; +import { keyframes } from '@emotion/react'; import { LogEntriesSummaryHighlightsBucket, LogEntryTime } from '@kbn/logs-shared-plugin/common'; import * as React from 'react'; import { SearchMarkerTooltip } from './search_marker_tooltip'; @@ -101,14 +102,14 @@ const fadeInAnimation = keyframes` } `; -const SearchMarkerGroup = euiStyled.g` - animation: ${fadeInAnimation} ${(props) => props.theme.eui.euiAnimSpeedExtraSlow} ease-in both; +const SearchMarkerGroup = styled.g` + animation: ${fadeInAnimation} ${(props) => props.theme.euiTheme.animation.extraSlow} ease-in both; `; -const SearchMarkerBackgroundRect = euiStyled.rect` - fill: ${(props) => props.theme.eui.euiColorAccent}; +const SearchMarkerBackgroundRect = styled.rect` + fill: ${(props) => props.theme.euiTheme.colors.accent}; opacity: 0; - transition: opacity ${(props) => props.theme.eui.euiAnimSpeedNormal} ease-in; + transition: opacity ${(props) => props.theme.euiTheme.animation.normal} ease-in; cursor: pointer; ${SearchMarkerGroup}:hover & { @@ -116,6 +117,6 @@ const SearchMarkerBackgroundRect = euiStyled.rect` } `; -const SearchMarkerForegroundRect = euiStyled.rect` - fill: ${(props) => props.theme.eui.euiColorAccent}; +const SearchMarkerForegroundRect = styled.rect` + fill: ${(props) => props.theme.euiTheme.colors.accent}; `; 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 861feda79f1e5..e4bc157d16464 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 @@ -7,8 +7,7 @@ import { scaleTime } from 'd3-scale'; import * as React from 'react'; - -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; import { useKibanaTimeZoneSetting } from '../../../hooks/use_kibana_time_zone_setting'; import { getTimeLabelFormat } from './time_label_formatter'; @@ -59,19 +58,19 @@ export const TimeRuler: React.FC = ({ end, height, start, tickCo TimeRuler.displayName = 'TimeRuler'; -const TimeRulerTickLabel = euiStyled.text` +const TimeRulerTickLabel = styled.text` font-size: 9px; - line-height: ${(props) => props.theme.eui.euiLineHeight}; - fill: ${(props) => props.theme.eui.euiTextSubduedColor}; + line-height: ${(props) => props.theme.euiTheme.euiLineHeight}; + fill: ${(props) => props.theme.euiTheme.colors.textSubdued}; user-select: none; pointer-events: none; `; -const TimeRulerGridLine = euiStyled.line` +const TimeRulerGridLine = styled.line` stroke: ${(props) => props.theme.darkMode - ? props.theme.eui.euiColorDarkestShade - : props.theme.eui.euiColorDarkShade}; + ? props.theme.euiTheme.colors.darkestShade + : props.theme.euiTheme.colors.darkShade}; stroke-opacity: 0.5; stroke-width: 1px; `; diff --git a/x-pack/plugins/observability_solution/infra/public/components/logging/log_search_controls/log_search_input.tsx b/x-pack/plugins/observability_solution/infra/public/components/logging/log_search_controls/log_search_input.tsx index 471b6c75a652a..25aa19d556cbe 100644 --- a/x-pack/plugins/observability_solution/infra/public/components/logging/log_search_controls/log_search_input.tsx +++ b/x-pack/plugins/observability_solution/infra/public/components/logging/log_search_controls/log_search_input.tsx @@ -7,12 +7,10 @@ import { EuiFieldSearch } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; - +import styled from '@emotion/styled'; import classNames from 'classnames'; import * as React from 'react'; -import { euiStyled } from '@kbn/kibana-react-plugin/common'; - interface LogSearchInputProps { className?: string; isLoading: boolean; @@ -77,11 +75,11 @@ export const LogSearchInput = class extends React.PureComponent< } }; -const PlainSearchField = euiStyled(EuiFieldSearch)` +const PlainSearchField = styled(EuiFieldSearch)` background: transparent; box-shadow: none; &:focus { - box-shadow: inset 0 -2px 0 0 ${(props) => props.theme.eui.euiColorPrimary}; + box-shadow: inset 0 -2px 0 0 ${(props) => props.theme.euiTheme.colors.primary}; } `; diff --git a/x-pack/plugins/observability_solution/infra/public/components/logging/log_statusbar.tsx b/x-pack/plugins/observability_solution/infra/public/components/logging/log_statusbar.tsx index 45020d9aaca14..7277ddaf73fcf 100644 --- a/x-pack/plugins/observability_solution/infra/public/components/logging/log_statusbar.tsx +++ b/x-pack/plugins/observability_solution/infra/public/components/logging/log_statusbar.tsx @@ -6,20 +6,17 @@ */ import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; +import styled from '@emotion/styled'; -import { euiStyled } from '@kbn/kibana-react-plugin/common'; - -export const LogStatusbar = euiStyled(EuiFlexGroup).attrs(() => ({ - alignItems: 'center', - gutterSize: 'none', - justifyContent: 'flexEnd', -}))` - padding: ${(props) => props.theme.eui.euiSizeS}; - border-top: ${(props) => props.theme.eui.euiBorderThin}; +export const LogStatusbar = styled(EuiFlexGroup)` + padding: ${(props) => props.theme.euiTheme.size.s}; + border-top: ${(props) => props.theme.euiTheme.border.thin}; max-height: 48px; min-height: 48px; - background-color: ${(props) => props.theme.eui.euiColorEmptyShade}; + background-color: ${(props) => props.theme.euiTheme.colors.emptyShade}; flex-direction: row; `; +LogStatusbar.defaultProps = { alignItems: 'center', gutterSize: 'none', justifyContent: 'flexEnd' }; + export const LogStatusbarItem = EuiFlexItem; diff --git a/x-pack/plugins/observability_solution/infra/public/components/page.tsx b/x-pack/plugins/observability_solution/infra/public/components/page.tsx index ae961c899a5d1..21e1d5748b16f 100644 --- a/x-pack/plugins/observability_solution/infra/public/components/page.tsx +++ b/x-pack/plugins/observability_solution/infra/public/components/page.tsx @@ -6,24 +6,23 @@ */ import { EuiPage } from '@elastic/eui'; +import styled from '@emotion/styled'; -import { euiStyled } from '@kbn/kibana-react-plugin/common'; - -export const ColumnarPage = euiStyled.div` +export const ColumnarPage = styled.div` display: flex; flex-direction: column; flex: 1 0 auto; - width: 100% + width: 100%; `; -export const PageContent = euiStyled.div` +export const PageContent = styled.div` flex: 1 0 0%; display: flex; flex-direction: row; - background-color: ${(props) => props.theme.eui.euiColorEmptyShade}; + background-color: ${(props) => props.theme.euiTheme.colors.emptyShade}; `; -export const FlexPage = euiStyled(EuiPage)` +export const FlexPage = styled(EuiPage)` align-self: stretch; flex: 1 0 0%; `; diff --git a/x-pack/plugins/observability_solution/infra/public/pages/error.tsx b/x-pack/plugins/observability_solution/infra/public/pages/error.tsx index fa89fa3b929b3..5972178ba2a0d 100644 --- a/x-pack/plugins/observability_solution/infra/public/pages/error.tsx +++ b/x-pack/plugins/observability_solution/infra/public/pages/error.tsx @@ -8,13 +8,12 @@ import { EuiCallOut, EuiTitle, EuiPageTemplate } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n-react'; import React from 'react'; - -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; import { ColumnarPage, PageContent } from '../components/page'; -const DetailPageContent = euiStyled(PageContent)` +const DetailPageContent = styled(PageContent)` overflow: auto; - background-color: ${(props) => props.theme.eui.euiColorLightestShade}; + background-color: ${(props) => props.theme.euiTheme.colors.lightestShade}; `; interface Props { diff --git a/x-pack/plugins/observability_solution/infra/public/pages/logs/log_entry_categories/page_results_content.tsx b/x-pack/plugins/observability_solution/infra/public/pages/logs/log_entry_categories/page_results_content.tsx index e1db34f31a5e0..337f0535e2bf0 100644 --- a/x-pack/plugins/observability_solution/infra/public/pages/logs/log_entry_categories/page_results_content.tsx +++ b/x-pack/plugins/observability_solution/infra/public/pages/logs/log_entry_categories/page_results_content.tsx @@ -11,7 +11,7 @@ import { i18n } from '@kbn/i18n'; import moment from 'moment'; import React, { useCallback, useEffect, useMemo, useState } from 'react'; import useInterval from 'react-use/lib/useInterval'; -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; import { useKibana } from '@kbn/kibana-react-plugin/public'; import { MLJobsAwaitingNodeWarning, ML_PAGES, useMlHref } from '@kbn/ml-plugin/public'; import { useTrackPageview } from '@kbn/observability-shared-plugin/public'; @@ -299,11 +299,11 @@ const stringToNumericTimeRange = (timeRange: StringTimeRange): TimeRange => ({ // This is needed due to the flex-basis: 100% !important; rule that // kicks in on small screens via media queries breaking when using direction="column" -export const ResultsContentPage = euiStyled(EuiPage)` +export const ResultsContentPage = styled(EuiPage)` flex: 1 0 0%; flex-direction: column; - [class*="euiFlexGroup-responsive"] > .euiFlexItem { + [class*='euiFlexGroup-responsive'] > .euiFlexItem { flex-basis: auto !important; } `; diff --git a/x-pack/plugins/observability_solution/infra/public/pages/logs/log_entry_categories/sections/top_categories/datasets_list.tsx b/x-pack/plugins/observability_solution/infra/public/pages/logs/log_entry_categories/sections/top_categories/datasets_list.tsx index 271eac8bf641d..a737a1de4a32b 100644 --- a/x-pack/plugins/observability_solution/infra/public/pages/logs/log_entry_categories/sections/top_categories/datasets_list.tsx +++ b/x-pack/plugins/observability_solution/infra/public/pages/logs/log_entry_categories/sections/top_categories/datasets_list.tsx @@ -6,8 +6,7 @@ */ import React from 'react'; - -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; import { LogEntryCategoryDataset } from '../../../../../../common/log_analysis'; import { getFriendlyNameForPartitionId } from '../../../../../../common/log_analysis'; @@ -30,7 +29,7 @@ export const DatasetsList: React.FunctionComponent<{ * These aim at aligning the list with the EuiHealth list in the neighboring * column. */ -const DatasetLabel = euiStyled.div` +const DatasetLabel = styled.div` display: inline-block; margin-bottom: 2.5px; margin-top: 1px; diff --git a/x-pack/plugins/observability_solution/infra/public/pages/logs/log_entry_categories/sections/top_categories/single_metric_comparison.tsx b/x-pack/plugins/observability_solution/infra/public/pages/logs/log_entry_categories/sections/top_categories/single_metric_comparison.tsx index 40cf29c8e6eb6..93346fcbb744f 100644 --- a/x-pack/plugins/observability_solution/infra/public/pages/logs/log_entry_categories/sections/top_categories/single_metric_comparison.tsx +++ b/x-pack/plugins/observability_solution/infra/public/pages/logs/log_entry_categories/sections/top_categories/single_metric_comparison.tsx @@ -9,8 +9,7 @@ import { EuiIcon, EuiTextColor } from '@elastic/eui'; import numeral from '@elastic/numeral'; import { i18n } from '@kbn/i18n'; import React from 'react'; - -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; export const SingleMetricComparison: React.FunctionComponent<{ currentValue: number; @@ -53,6 +52,6 @@ const newCategoryTrendLabel = i18n.translate( } ); -const NoWrapSpan = euiStyled.span` +const NoWrapSpan = styled.span` white-space: nowrap; `; diff --git a/x-pack/plugins/observability_solution/infra/public/pages/logs/log_entry_categories/sections/top_categories/top_categories_table.tsx b/x-pack/plugins/observability_solution/infra/public/pages/logs/log_entry_categories/sections/top_categories/top_categories_table.tsx index 7848672391315..377738ff00821 100644 --- a/x-pack/plugins/observability_solution/infra/public/pages/logs/log_entry_categories/sections/top_categories/top_categories_table.tsx +++ b/x-pack/plugins/observability_solution/infra/public/pages/logs/log_entry_categories/sections/top_categories/top_categories_table.tsx @@ -10,8 +10,7 @@ import numeral from '@elastic/numeral'; import { i18n } from '@kbn/i18n'; import React, { useMemo, useCallback } from 'react'; import useSet from 'react-use/lib/useSet'; - -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; import { PersistedLogViewReference } from '@kbn/logs-shared-plugin/common'; import { categoriesSortRT, @@ -29,7 +28,7 @@ import { DatasetsList } from './datasets_list'; import { LogEntryCountSparkline } from './log_entry_count_sparkline'; import { SortOptions, ChangeSortOptions } from '../../use_log_entry_categories_results'; -export const TopCategoriesTable = euiStyled( +export const TopCategoriesTable = styled( ({ categorizationJobId, className, diff --git a/x-pack/plugins/observability_solution/infra/public/pages/logs/log_entry_rate/sections/anomalies/expanded_row.tsx b/x-pack/plugins/observability_solution/infra/public/pages/logs/log_entry_rate/sections/anomalies/expanded_row.tsx index 8b4ea2edda9ac..49d539a6783ca 100644 --- a/x-pack/plugins/observability_solution/infra/public/pages/logs/log_entry_rate/sections/anomalies/expanded_row.tsx +++ b/x-pack/plugins/observability_solution/infra/public/pages/logs/log_entry_rate/sections/anomalies/expanded_row.tsx @@ -10,7 +10,7 @@ import numeral from '@elastic/numeral'; import { i18n } from '@kbn/i18n'; import React from 'react'; import useMount from 'react-use/lib/useMount'; -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; import { useLogViewContext } from '@kbn/logs-shared-plugin/public'; import { isCategoryAnomaly, @@ -139,6 +139,6 @@ export const AnomaliesTableExpandedRow: React.FunctionComponent<{ ); }; -const ExpandedContentWrapper = euiStyled(EuiFlexGroup)` +const ExpandedContentWrapper = styled(EuiFlexGroup)` overflow: hidden; `; diff --git a/x-pack/plugins/observability_solution/infra/public/pages/logs/log_entry_rate/sections/anomalies/log_entry_example.tsx b/x-pack/plugins/observability_solution/infra/public/pages/logs/log_entry_rate/sections/anomalies/log_entry_example.tsx index 6c545beb4b9cd..60399d70f2826 100644 --- a/x-pack/plugins/observability_solution/infra/public/pages/logs/log_entry_rate/sections/anomalies/log_entry_example.tsx +++ b/x-pack/plugins/observability_solution/infra/public/pages/logs/log_entry_rate/sections/anomalies/log_entry_example.tsx @@ -10,7 +10,7 @@ import moment from 'moment'; import { encode } from '@kbn/rison'; import { i18n } from '@kbn/i18n'; import { useMlHref, ML_PAGES } from '@kbn/ml-plugin/public'; -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; import { useLinkProps, shouldHandleLinkEvent } from '@kbn/observability-shared-plugin/public'; import { LogEntryColumn, @@ -333,7 +333,7 @@ export const LogEntryExampleMessageHeaders: React.FunctionComponent<{ ); }; -const LogEntryExampleMessageHeadersWrapper = euiStyled(LogColumnHeadersWrapper)` +const LogEntryExampleMessageHeadersWrapper = styled(LogColumnHeadersWrapper)` border-bottom: none; box-shadow: none; padding-right: 0; diff --git a/x-pack/plugins/observability_solution/infra/public/pages/logs/settings/add_log_column_popover.tsx b/x-pack/plugins/observability_solution/infra/public/pages/logs/settings/add_log_column_popover.tsx index 75b69045501c8..bb0b55cbbabf3 100644 --- a/x-pack/plugins/observability_solution/infra/public/pages/logs/settings/add_log_column_popover.tsx +++ b/x-pack/plugins/observability_solution/infra/public/pages/logs/settings/add_log_column_popover.tsx @@ -16,7 +16,7 @@ import { import { FormattedMessage } from '@kbn/i18n-react'; import React, { useCallback, useMemo } from 'react'; import { v4 as uuidv4 } from 'uuid'; -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; import { LogColumnConfiguration } from '../../../utils/source_configuration'; import { useVisibilityState } from '../../../hooks/use_visibility_state'; @@ -162,6 +162,6 @@ const SystemColumnBadge: React.FunctionComponent = () => ( ); -const SelectableContent = euiStyled.div` +const SelectableContent = styled.div` width: 400px; `; diff --git a/x-pack/plugins/observability_solution/infra/public/pages/logs/stream/page_logs_content.tsx b/x-pack/plugins/observability_solution/infra/public/pages/logs/stream/page_logs_content.tsx index f59d3c1f03fbf..7ab709b837cc9 100644 --- a/x-pack/plugins/observability_solution/infra/public/pages/logs/stream/page_logs_content.tsx +++ b/x-pack/plugins/observability_solution/infra/public/pages/logs/stream/page_logs_content.tsx @@ -7,7 +7,7 @@ import { EuiSpacer } from '@elastic/eui'; import type { Query } from '@kbn/es-query'; -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; import { LogEntry, convertISODateToNanoPrecision } from '@kbn/logs-shared-plugin/common'; import { LogEntryFlyout, @@ -341,7 +341,7 @@ export const StreamPageLogsContentForState = React.memo<{ ); }); -const LogPageMinimapColumn = euiStyled.div` +const LogPageMinimapColumn = styled.div` flex: 1 0 0%; overflow: hidden; min-width: 100px; diff --git a/x-pack/plugins/observability_solution/infra/public/pages/logs/stream/page_view_log_in_context.tsx b/x-pack/plugins/observability_solution/infra/public/pages/logs/stream/page_view_log_in_context.tsx index d49bfc0c203f3..0b458e925c082 100644 --- a/x-pack/plugins/observability_solution/infra/public/pages/logs/stream/page_view_log_in_context.tsx +++ b/x-pack/plugins/observability_solution/infra/public/pages/logs/stream/page_view_log_in_context.tsx @@ -16,7 +16,7 @@ import { import { FormattedMessage } from '@kbn/i18n-react'; import { isEmpty } from 'lodash'; import React, { useCallback, useMemo } from 'react'; -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; import { LogEntry } from '@kbn/logs-shared-plugin/common'; import { LogStream } from '@kbn/logs-shared-plugin/public'; import { useViewLogInProviderContext } from '../../../containers/logs/view_log_in_context'; @@ -71,7 +71,7 @@ export const PageViewLogInContext: React.FC = () => { ); }; -const LogInContextWrapper = euiStyled.div<{ width: number | string; height: number | string }>` +const LogInContextWrapper = styled.div<{ width: number | string; height: number | string }>` padding: 16px; width: ${(props) => (typeof props.width === 'number' ? `${props.width}px` : props.width)}; height: ${(props) => (typeof props.height === 'number' ? `${props.height}px` : props.height)}; diff --git a/x-pack/plugins/observability_solution/infra/public/pages/metrics/hosts/components/kpis/host_count_kpi.tsx b/x-pack/plugins/observability_solution/infra/public/pages/metrics/hosts/components/kpis/host_count_kpi.tsx index b1d3875e85a67..7cafec013edef 100644 --- a/x-pack/plugins/observability_solution/infra/public/pages/metrics/hosts/components/kpis/host_count_kpi.tsx +++ b/x-pack/plugins/observability_solution/infra/public/pages/metrics/hosts/components/kpis/host_count_kpi.tsx @@ -6,9 +6,9 @@ */ import { i18n } from '@kbn/i18n'; import React from 'react'; -import { useTheme } from '@kbn/observability-shared-plugin/public'; import { findInventoryModel } from '@kbn/metrics-data-access-plugin/common'; import useAsync from 'react-use/lib/useAsync'; +import { useEuiTheme } from '@elastic/eui'; import { KPI_CHART_HEIGHT, METRICS_TOOLTIP } from '../../../../../common/visualizations'; import { useHostCountContext } from '../../hooks/use_host_count'; import { useUnifiedSearchContext } from '../../hooks/use_unified_search'; @@ -19,13 +19,13 @@ export const HostCountKpi = () => { const inventoryModel = findInventoryModel('host'); const { count, loading } = useHostCountContext(); const { searchCriteria } = useUnifiedSearchContext(); - const euiTheme = useTheme(); + const { euiTheme } = useEuiTheme(); const { value: formulas } = useAsync(() => inventoryModel.metrics.getFormulas()); const hostsCountChart: Pick = { id: 'hostsViewKPI-hostsCount', - color: euiTheme.eui.euiColorLightestShade, + color: euiTheme.colors.lightestShade, title: i18n.translate('xpack.infra.hostsViewPage.kpi.hostCount.title', { defaultMessage: 'Hosts', }), diff --git a/x-pack/plugins/observability_solution/infra/public/pages/metrics/hosts/components/search_bar/controls_content.tsx b/x-pack/plugins/observability_solution/infra/public/pages/metrics/hosts/components/search_bar/controls_content.tsx index 847d0e05183a7..f0b9b2b0c3b76 100644 --- a/x-pack/plugins/observability_solution/infra/public/pages/metrics/hosts/components/search_bar/controls_content.tsx +++ b/x-pack/plugins/observability_solution/infra/public/pages/metrics/hosts/components/search_bar/controls_content.tsx @@ -13,7 +13,7 @@ import { } from '@kbn/controls-plugin/public'; import { DataView } from '@kbn/data-views-plugin/public'; import type { Filter, Query, TimeRange } from '@kbn/es-query'; -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; import { useControlPanels } from '@kbn/observability-shared-plugin/public'; import React, { useCallback, useEffect, useRef } from 'react'; import { Subscription } from 'rxjs'; @@ -104,8 +104,8 @@ export const ControlsContent: React.FC = ({ ); }; -const ControlGroupContainer = euiStyled.div` +const ControlGroupContainer = styled.div` .controlGroup { - min-height: ${(props) => props.theme.eui.euiSizeXXL} + min-height: ${(props) => props.theme.euiTheme.size.xxl}; } `; diff --git a/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/bottom_drawer.tsx b/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/bottom_drawer.tsx index 348c0f8e53310..2e4413ce91c2f 100644 --- a/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/bottom_drawer.tsx +++ b/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/bottom_drawer.tsx @@ -8,7 +8,7 @@ import React, { useCallback, useState, useEffect, useRef } from 'react'; import { i18n } from '@kbn/i18n'; import { EuiFlexGroup, EuiFlexItem, EuiButtonEmpty, EuiPanel } from '@elastic/eui'; -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; import { useUiTracker } from '@kbn/observability-shared-plugin/public'; import useLocalStorage from 'react-use/lib/useLocalStorage'; import { InventoryItemType } from '@kbn/metrics-data-access-plugin/common'; @@ -117,19 +117,19 @@ export const BottomDrawer = ({ interval, formatter, view, nodeType }: Props) => ); }; -const BottomActionContainer = euiStyled.div` +const BottomActionContainer = styled.div` position: sticky; bottom: 0; left: 0; - background: ${(props) => props.theme.eui.euiColorGhost}; - width: calc(100% + ${(props) => props.theme.eui.euiSizeL} * 2); - margin-left: -${(props) => props.theme.eui.euiSizeL}; + background: ${(props) => props.theme.euiTheme.colors.ghost}; + width: calc(100% + ${(props) => props.theme.euiTheme.size.l} * 2); + margin-left: -${(props) => props.theme.euiTheme.size.l}; `; // Additional width comes from the padding on the EuiPageBody and inner nodes container -const BottomPanel = euiStyled(EuiPanel)` - padding: ${(props) => props.theme.eui.euiSizeL} 0; +const BottomPanel = styled(EuiPanel)` + padding: ${(props) => props.theme.euiTheme.size.l} 0; `; -const StickyPanel = euiStyled(EuiPanel)` - padding: 0 ${(props) => props.theme.eui.euiSizeL}; +const StickyPanel = styled(EuiPanel)` + padding: 0 ${(props) => props.theme.euiTheme.size.l}; `; diff --git a/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/dropdown_button.tsx b/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/dropdown_button.tsx index 0e4aa275a7879..65e4078c7aecc 100644 --- a/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/dropdown_button.tsx +++ b/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/dropdown_button.tsx @@ -5,52 +5,59 @@ * 2.0. */ -import { EuiFlexGroup, EuiFlexItem, EuiButtonEmpty } from '@elastic/eui'; +import { + EuiFlexGroup, + EuiFlexItem, + EuiButtonEmpty, + withEuiTheme, + WithEuiThemeProps, + type EuiThemeComputed, +} from '@elastic/eui'; import React, { ReactNode } from 'react'; -import { withTheme, EuiTheme } from '@kbn/kibana-react-plugin/common'; import { KubernetesTour } from './kubernetes_tour'; interface Props { 'data-test-subj'?: string; label: string; onClick: () => void; - theme: EuiTheme | undefined; children: ReactNode; showKubernetesInfo?: boolean; } -const ButtonLabel = ({ label, theme }: { label: string; theme?: EuiTheme }) => ( +type PropsWithTheme = Props & WithEuiThemeProps; + +const ButtonLabel = ({ label, theme }: { label: string; theme?: EuiThemeComputed }) => ( {label} ); -export const DropdownButton = withTheme((props: Props) => { +export const DropdownButton = withEuiTheme((props: PropsWithTheme) => { const { onClick, label, theme, children, showKubernetesInfo } = props; return ( {showKubernetesInfo ? ( - + ) : ( - + )} `${props.theme.eui.euiSizeM} 0`}; +const TopActionContainer = styled(EuiFlexItem)` + padding: ${(props) => `${props.theme.euiTheme.size.m} 0`}; `; diff --git a/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/nodes_overview.tsx b/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/nodes_overview.tsx index d42670f190fde..7bc04c54b9abc 100644 --- a/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/nodes_overview.tsx +++ b/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/nodes_overview.tsx @@ -9,7 +9,7 @@ import { i18n } from '@kbn/i18n'; import { usePerformanceContext } from '@kbn/ebt-tools'; import React, { useCallback, useMemo } from 'react'; import { useCurrentEuiBreakpoint } from '@elastic/eui'; -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; import { InventoryItemType } from '@kbn/metrics-data-access-plugin/common'; import { InfraWaffleMapBounds, @@ -184,11 +184,11 @@ export const NodesOverview = ({ ); }; -const TableContainer = euiStyled.div` - padding: ${(props) => props.theme.eui.euiSizeL}; +const TableContainer = styled.div` + padding: ${(props) => props.theme.euiTheme.size.l}; `; -const MapContainer = euiStyled.div<{ positionStatic: boolean }>` +const MapContainer = styled.div<{ positionStatic: boolean }>` position: ${(props) => (props.positionStatic ? 'static' : 'absolute')}; display: flex; top: 0; diff --git a/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/timeline/timeline.tsx b/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/timeline/timeline.tsx index 545bc57c65315..3f951f339409e 100644 --- a/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/timeline/timeline.tsx +++ b/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/timeline/timeline.tsx @@ -27,7 +27,7 @@ import { import { EuiFlexItem } from '@elastic/eui'; import { EuiFlexGroup } from '@elastic/eui'; import { EuiIcon } from '@elastic/eui'; -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; import { Metric } from '../../../../../../common/http_api/infra_ml'; import { useTimelineChartTheme } from '../../../../../hooks/use_timeline_chart_theme'; import { toMetricOpt } from '../../../../../../common/snapshot_metric_i18n'; @@ -298,32 +298,32 @@ export const Timeline: React.FC = ({ interval, yAxisFormatter, isVisible ); }; -const TimelineContainer = euiStyled.div` - background-color: ${(props) => props.theme.eui.euiPageBackgroundColor}; - border-top: 1px solid ${(props) => props.theme.eui.euiColorLightShade}; +const TimelineContainer = styled.div` + background-color: ${(props) => props.theme.euiTheme.colors.euiPageBackgroundColor}; + border-top: 1px solid ${(props) => props.theme.euiTheme.colors.lightShade}; height: 220px; width: 100%; - padding: ${(props) => props.theme.eui.euiSizeS} ${(props) => props.theme.eui.euiSizeM}; + padding: ${(props) => props.theme.euiTheme.size.s} ${(props) => props.theme.euiTheme.size.m}; display: flex; flex-direction: column; `; -const TimelineHeader = euiStyled.div` +const TimelineHeader = styled.div` display: flex; width: 100%; - padding: ${(props) => props.theme.eui.euiSizeS} ${(props) => props.theme.eui.euiSizeM}; + padding: ${(props) => props.theme.euiTheme.size.s} ${(props) => props.theme.euiTheme.size.m}; @media only screen and (max-width: 767px) { - margin-top: 30px; + margin-top: 30px; } `; -const TimelineChartContainer = euiStyled.div` - padding-left: ${(props) => props.theme.eui.euiSizeXS}; +const TimelineChartContainer = styled.div` + padding-left: ${(props) => props.theme.euiTheme.size.xs}; width: 100%; height: 100%; `; -const TimelineLoadingContainer = euiStyled.div` +const TimelineLoadingContainer = styled.div` display: flex; justify-content: center; align-items: center; diff --git a/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/gradient_legend.tsx b/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/gradient_legend.tsx index 0d74700ea49fd..79d8d092c1e6e 100644 --- a/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/gradient_legend.tsx +++ b/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/gradient_legend.tsx @@ -6,8 +6,7 @@ */ import React from 'react'; - -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; import { InfraFormatter, InfraWaffleMapBounds, @@ -53,7 +52,7 @@ export const GradientLegend: React.FC = ({ legend, bounds, formatter }) = ); }; -const GradientLegendContainer = euiStyled.div` +const GradientLegendContainer = styled.div` position: absolute; height: 10px; bottom: 0; @@ -61,15 +60,15 @@ const GradientLegendContainer = euiStyled.div` right: 40px; `; -const GradientLegendTick = euiStyled.div` +const GradientLegendTick = styled.div` position: absolute; bottom: 0; top: -18px; `; -const GradientLegendTickLine = euiStyled.div` +const GradientLegendTickLine = styled.div` position: absolute; - background-color: ${(props) => props.theme.eui.euiBorderColor}; + background-color: ${(props) => props.theme.euiTheme.colors.border.euiBorderColor}; width: 1px; left: 0; top: 15px; @@ -82,7 +81,7 @@ const GradientLegendTickLine = euiStyled.div` } `; -const GradientLegendTickLabel = euiStyled.div` +const GradientLegendTickLabel = styled.div` position: absolute; font-size: 11px; text-align: center; diff --git a/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/group_name.tsx b/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/group_name.tsx index 6b0d9ba878a54..ba4bb80c368a1 100644 --- a/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/group_name.tsx +++ b/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/group_name.tsx @@ -7,8 +7,7 @@ import { EuiLink, EuiToolTip } from '@elastic/eui'; import React from 'react'; - -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; import { InfraWaffleMapGroup, InfraWaffleMapOptions } from '../../../../../common/inventory/types'; interface Props { @@ -56,7 +55,7 @@ export class GroupName extends React.PureComponent { }; } -const GroupNameContainer = euiStyled.div` +const GroupNameContainer = styled.div` position: relative; text-align: center; font-size: 16px; @@ -71,10 +70,12 @@ interface InnerProps { isChild?: boolean; } -const Inner = euiStyled.div` +const Inner = styled.div` border: 1px solid ${(props) => props.theme.eui.euiBorderColor}; background-color: ${(props) => - props.isChild ? props.theme.eui.euiColorLightestShade : props.theme.eui.euiColorEmptyShade}; + props.isChild + ? props.theme.euiTheme.colors.lightestShade + : props.theme.euiTheme.colors.emptyShade}; border-radius: 4px; box-shadow: 0px 2px 0px 0px ${(props) => props.theme.eui.euiBorderColor}; display: flex; @@ -83,7 +84,7 @@ const Inner = euiStyled.div` overflow: hidden; `; -const Name = euiStyled.div` +const Name = styled.div` flex: 1 1 auto; padding: 6px 10px; overflow: hidden; @@ -91,7 +92,7 @@ const Name = euiStyled.div` white-space: nowrap; `; -const Count = euiStyled.div` +const Count = styled.div` flex: 0 0 auto; border-left: 1px solid ${(props) => props.theme.eui.euiBorderColor}; padding: 6px 10px; diff --git a/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/group_of_groups.tsx b/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/group_of_groups.tsx index 8ffe5f0929ffe..6abb42677afe7 100644 --- a/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/group_of_groups.tsx +++ b/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/group_of_groups.tsx @@ -6,8 +6,7 @@ */ import React from 'react'; - -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; import { InventoryItemType } from '@kbn/metrics-data-access-plugin/common'; import { InfraWaffleMapBounds, @@ -52,18 +51,18 @@ export const GroupOfGroups: React.FC = (props) => { ); }; -const GroupOfGroupsContainer = euiStyled.div` +const GroupOfGroupsContainer = styled.div` margin: 0 10px; width: 100%; `; -const Groups = euiStyled.div` +const Groups = styled.div` display: flex; background-color: rgba(0, 0, 0, 0.05); flex-wrap: wrap; justify-content: center; padding: 20px 10px 10px; border-radius: 4px; - border: 1px solid ${(props) => props.theme.eui.euiBorderColor}; + border: 1px solid ${(props) => props.theme.euiTheme.euiBorderColor}; box-shadow: 0 1px 7px rgba(0, 0, 0, 0.1); `; diff --git a/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/group_of_nodes.tsx b/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/group_of_nodes.tsx index ac5e7c1c09194..a8e8fd32458f1 100644 --- a/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/group_of_nodes.tsx +++ b/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/group_of_nodes.tsx @@ -8,7 +8,7 @@ import React from 'react'; import { EuiLoadingSpinner } from '@elastic/eui'; import { isEqual } from 'lodash'; -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; import { InventoryItemType } from '@kbn/metrics-data-access-plugin/common'; import { InfraWaffleMapBounds, @@ -87,17 +87,17 @@ export const GroupOfNodes = React.memo( isEqualGroupOfNodes ); -const GroupOfNodesContainer = euiStyled.div` +const GroupOfNodesContainer = styled.div` margin: 0 10px; `; -const Nodes = euiStyled.div` +const Nodes = styled.div` display: flex; background-color: rgba(0, 0, 0, 0.05); flex-wrap: wrap; justify-content: center; padding: 20px 10px 10px; border-radius: 4px; - border: 1px solid ${(props) => props.theme.eui.euiBorderColor}; + border: 1px solid ${(props) => props.theme.euiTheme.euiBorderColor}; box-shadow: 0 1px 7px rgba(0, 0, 0, 0.1); `; diff --git a/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/legend.tsx b/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/legend.tsx index f566f50b09293..6544bb7c81eb2 100644 --- a/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/legend.tsx +++ b/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/legend.tsx @@ -6,8 +6,7 @@ */ import React from 'react'; - -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; import { InfraFormatter, InfraWaffleMapBounds, @@ -40,7 +39,7 @@ export const Legend: React.FC = ({ legend, bounds, formatter }) => { ); }; -const LegendContainer = euiStyled.div` +const LegendContainer = styled.div` margin: 0 10px; display: flex; `; diff --git a/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/legend_controls.tsx b/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/legend_controls.tsx index 7b81056b32b8f..ce66c788bd1b2 100644 --- a/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/legend_controls.tsx +++ b/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/legend_controls.tsx @@ -24,7 +24,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, { SyntheticEvent, useState, useCallback, useEffect } from 'react'; import { first, last } from 'lodash'; import { EuiRangeProps, EuiSelectProps } from '@elastic/eui'; @@ -378,7 +378,7 @@ export const LegendControls = ({ ); }; -const StyledEuiForm = euiStyled(EuiForm)` +const StyledEuiForm = styled(EuiForm)` min-width: 400px; @media (max-width: 480px) { min-width: 100%; diff --git a/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/map.tsx b/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/map.tsx index 2fe65f48bac13..27fb0e501639b 100644 --- a/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/map.tsx +++ b/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/map.tsx @@ -6,8 +6,7 @@ */ import React from 'react'; - -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; import { InventoryItemType } from '@kbn/metrics-data-access-plugin/common'; import { nodesToWaffleMap } from '../../lib/nodes_to_wafflemap'; import { isWaffleMapGroupWithGroups, isWaffleMapGroupWithNodes } from '../../lib/type_guards'; @@ -99,7 +98,7 @@ export const Map: React.FC = ({ ); }; -const WaffleMapOuterContainer = euiStyled.div<{ bottomMargin: number; staticHeight: boolean }>` +const WaffleMapOuterContainer = styled.div<{ bottomMargin: number; staticHeight: boolean }>` flex: 1 0 0%; display: flex; justify-content: flex-start; @@ -111,7 +110,7 @@ const WaffleMapOuterContainer = euiStyled.div<{ bottomMargin: number; staticHeig ${(props) => props.staticHeight && 'min-height: 300px;'} `; -const WaffleMapInnerContainer = euiStyled.div` +const WaffleMapInnerContainer = styled.div` display: flex; flex-direction: row; flex-wrap: wrap; diff --git a/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/metric_control/custom_metric_form.tsx b/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/metric_control/custom_metric_form.tsx index 00da4640eb73f..2d2c53fa15ebc 100644 --- a/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/metric_control/custom_metric_form.tsx +++ b/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/metric_control/custom_metric_form.tsx @@ -19,10 +19,11 @@ import { EuiFlexItem, EuiText, EuiPopoverTitle, + WithEuiThemeProps, + withEuiTheme, } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n-react'; -import { EuiTheme, withTheme } from '@kbn/kibana-react-plugin/common'; import { SnapshotCustomAggregation, SnapshotCustomMetricInput, @@ -51,204 +52,210 @@ const AGGREGATION_LABELS = { }; interface Props { - theme: EuiTheme | undefined; metric?: SnapshotCustomMetricInput; customMetrics: SnapshotCustomMetricInput[]; onChange: (metric: SnapshotCustomMetricInput) => void; onCancel: () => void; } -export const CustomMetricForm = withTheme(({ theme, onCancel, onChange, metric }: Props) => { - const { metricsView } = useMetricsDataViewContext(); - const [label, setLabel] = useState(metric ? metric.label : void 0); - const [aggregation, setAggregation] = useState( - metric ? metric.aggregation : 'avg' - ); - const [field, setField] = useState(metric ? metric.field : void 0); - - const handleSubmit = useCallback(() => { - if (metric && aggregation && field) { - onChange({ - ...metric, - label, - aggregation, - field, - }); - } else if (aggregation && field) { - const newMetric: SnapshotCustomMetricInput = { - type: 'custom', - id: uuidv4(), - label, - aggregation, - field, - }; - onChange(newMetric); - } - }, [metric, aggregation, field, onChange, label]); - - const handleLabelChange = useCallback( - (e: React.ChangeEvent) => { - setLabel(e.target.value); - }, - [setLabel] - ); - - const handleFieldChange = useCallback( - (selectedOptions: SelectedOption[]) => { - setField(selectedOptions[0].label); - }, - [setField] - ); - - const handleAggregationChange = useCallback( - (e: React.ChangeEvent) => { - const value = e.target.value; - const aggValue: SnapshotCustomAggregation = SnapshotCustomAggregationRT.is(value) - ? value - : 'avg'; - setAggregation(aggValue); - }, - [setAggregation] - ); - - const fieldOptions = (metricsView?.fields ?? []) - .filter((f) => f.aggregatable && f.type === 'number' && !(field && field === f.name)) - .map((f) => ({ label: f.name })); - - const aggregationOptions = SNAPSHOT_CUSTOM_AGGREGATIONS.map((k) => ({ - text: AGGREGATION_LABELS[k as SnapshotCustomAggregation], - value: k, - })); - - const isSubmitDisabled = !field || !aggregation; - - const title = metric - ? i18n.translate('xpack.infra.waffle.customMetricPanelLabel.edit', { - defaultMessage: 'Edit custom metric', - }) - : i18n.translate('xpack.infra.waffle.customMetricPanelLabel.add', { - defaultMessage: 'Add custom metric', - }); - - const titleAriaLabel = metric - ? i18n.translate('xpack.infra.waffle.customMetricPanelLabel.editAriaLabel', { - defaultMessage: 'Back to custom metrics edit mode', - }) - : i18n.translate('xpack.infra.waffle.customMetricPanelLabel.addAriaLabel', { - defaultMessage: 'Back to metric picker', - }); - - return ( -
- - - - {title} - - -
- - - - - - - - - {i18n.translate('xpack.infra.waffle.customMetrics.ofLabel', { - defaultMessage: 'of', - })} - - - - - - - - - { + const { metricsView } = useMetricsDataViewContext(); + const [label, setLabel] = useState(metric ? metric.label : void 0); + const [aggregation, setAggregation] = useState( + metric ? metric.aggregation : 'avg' + ); + const [field, setField] = useState(metric ? metric.field : void 0); + + const handleSubmit = useCallback(() => { + if (metric && aggregation && field) { + onChange({ + ...metric, + label, + aggregation, + field, + }); + } else if (aggregation && field) { + const newMetric: SnapshotCustomMetricInput = { + type: 'custom', + id: uuidv4(), + label, + aggregation, + field, + }; + onChange(newMetric); + } + }, [metric, aggregation, field, onChange, label]); + + const handleLabelChange = useCallback( + (e: React.ChangeEvent) => { + setLabel(e.target.value); + }, + [setLabel] + ); + + const handleFieldChange = useCallback( + (selectedOptions: SelectedOption[]) => { + setField(selectedOptions[0].label); + }, + [setField] + ); + + const handleAggregationChange = useCallback( + (e: React.ChangeEvent) => { + const value = e.target.value; + const aggValue: SnapshotCustomAggregation = SnapshotCustomAggregationRT.is(value) + ? value + : 'avg'; + setAggregation(aggValue); + }, + [setAggregation] + ); + + const fieldOptions = (metricsView?.fields ?? []) + .filter((f) => f.aggregatable && f.type === 'number' && !(field && field === f.name)) + .map((f) => ({ label: f.name })); + + const aggregationOptions = SNAPSHOT_CUSTOM_AGGREGATIONS.map((k) => ({ + text: AGGREGATION_LABELS[k as SnapshotCustomAggregation], + value: k, + })); + + const isSubmitDisabled = !field || !aggregation; + + const title = metric + ? i18n.translate('xpack.infra.waffle.customMetricPanelLabel.edit', { + defaultMessage: 'Edit custom metric', + }) + : i18n.translate('xpack.infra.waffle.customMetricPanelLabel.add', { + defaultMessage: 'Add custom metric', + }); + + const titleAriaLabel = metric + ? i18n.translate('xpack.infra.waffle.customMetricPanelLabel.editAriaLabel', { + defaultMessage: 'Back to custom metrics edit mode', + }) + : i18n.translate('xpack.infra.waffle.customMetricPanelLabel.addAriaLabel', { + defaultMessage: 'Back to metric picker', + }); + + return ( +
+ + + + {title} + + +
- - -
-
- - - - - - -
- -
- ); -}); + > + + + + + + + + {i18n.translate('xpack.infra.waffle.customMetrics.ofLabel', { + defaultMessage: 'of', + })} + + + + + + + + + + + +
+
+ + + + + + +
+ +
+ ); + } +); diff --git a/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/palette_preview.tsx b/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/palette_preview.tsx index 57131c0fd3104..4c59ce126ae24 100644 --- a/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/palette_preview.tsx +++ b/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/palette_preview.tsx @@ -6,7 +6,7 @@ */ import React from 'react'; -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; import type { InventoryColorPalette } from '../../../../../common/inventory/types'; import { getColorPalette } from '../../lib/get_color_palette'; @@ -27,19 +27,19 @@ export const PalettePreview = ({ steps, palette, reverse }: Props) => { ); }; -const Swatch = euiStyled.div` +const Swatch = styled.div` max-width: 15px; height: 12px; flex: 1 1 auto; &:first-child { - border-radius: ${(props) => props.theme.eui.euiBorderRadius} 0 0 ${(props) => - props.theme.eui.euiBorderRadius}; + border-radius: ${(props) => props.theme.euiTheme.border.radius} 0 0 ${(props) => + props.theme.euiTheme.border.radius}; } &:last-child { - border-radius: 0 ${(props) => props.theme.eui.euiBorderRadius} ${(props) => - props.theme.eui.euiBorderRadius} 0; + border-radius: 0 ${(props) => props.theme.euiTheme.border.radius} ${(props) => + props.theme.euiTheme.border.radius} 0; `; -const Swatches = euiStyled.div` +const Swatches = styled.div` display: flex; `; diff --git a/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/stepped_gradient_legend.tsx b/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/stepped_gradient_legend.tsx index f1727a3b060e1..dbbe8afe00b5f 100644 --- a/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/stepped_gradient_legend.tsx +++ b/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/stepped_gradient_legend.tsx @@ -7,7 +7,7 @@ import React from 'react'; import { EuiText } from '@elastic/eui'; -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; import { InfraWaffleMapBounds, InfraFormatter, @@ -56,7 +56,7 @@ const TickLabel = ({ value, bounds, formatter }: TickProps) => { ); }; -const LegendContainer = euiStyled.div` +const LegendContainer = styled.div` position: relative; display: flex; flex-direction: column; @@ -64,7 +64,7 @@ const LegendContainer = euiStyled.div` align-items: center; `; -const GradientContainer = euiStyled.div` +const GradientContainer = styled.div` height: 200px; width: 10px; display: flex; @@ -72,14 +72,14 @@ const GradientContainer = euiStyled.div` align-items: stretch; `; -const GradientStep = euiStyled.div` +const GradientStep = styled.div` flex: 1 1 auto; &:first-child { - border-radius: ${(props) => props.theme.eui.euiBorderRadius} ${(props) => - props.theme.eui.euiBorderRadius} 0 0; + border-radius: ${(props) => props.theme.euiTheme.border.radius} + ${(props) => props.theme.euiTheme.border.radius} 0 0; } &:last-child { - border-radius: 0 0 ${(props) => props.theme.eui.euiBorderRadius} ${(props) => - props.theme.eui.euiBorderRadius}; + border-radius: 0 0 ${(props) => props.theme.euiTheme.border.radius} + ${(props) => props.theme.euiTheme.border.radius}; } `; diff --git a/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/steps_legend.tsx b/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/steps_legend.tsx index 23935caedcd40..2cdb8ca7d2e2b 100644 --- a/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/steps_legend.tsx +++ b/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/steps_legend.tsx @@ -7,8 +7,7 @@ import { darken } from 'polished'; import React from 'react'; - -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; import { InfraFormatter, InfraWaffleMapRuleOperator, @@ -48,18 +47,18 @@ export const StepLegend: React.FC = ({ legend, formatter }) => { return {legend.rules.map(createStep(formatter))}; }; -const StepLegendContainer = euiStyled.div` +const StepLegendContainer = styled.div` display: flex; padding: 10px 40px 10px 10px; `; -const StepContainer = euiStyled.div` +const StepContainer = styled.div` display: flex; margin-right: 20px align-items: center; `; -const StepSquare = euiStyled.div` +const StepSquare = styled.div` position: relative; width: 24px; height: 24px; @@ -69,7 +68,7 @@ const StepSquare = euiStyled.div` box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2); `; -const StepSquareInner = euiStyled.div` +const StepSquareInner = styled.div` position: absolute; top: 0; left: 0; @@ -78,6 +77,6 @@ const StepSquareInner = euiStyled.div` border-radius: 3px; `; -const StepLabel = euiStyled.div` +const StepLabel = styled.div` font-size: 12px; `; diff --git a/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/waffle_sort_controls.tsx b/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/waffle_sort_controls.tsx index 48c8b5f3c1dfb..6079f9b8fd2c0 100644 --- a/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/waffle_sort_controls.tsx +++ b/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/waffle_sort_controls.tsx @@ -6,9 +6,15 @@ */ import React, { useCallback, useMemo, useState, ReactNode } from 'react'; -import { EuiSwitch, EuiContextMenuPanelDescriptor, EuiPopover, EuiContextMenu } from '@elastic/eui'; +import { + EuiSwitch, + EuiContextMenuPanelDescriptor, + EuiPopover, + EuiContextMenu, + withEuiTheme, + WithEuiThemeProps, +} from '@elastic/eui'; import { i18n } from '@kbn/i18n'; -import { EuiTheme, withTheme } from '@kbn/kibana-react-plugin/common'; import { WaffleSortOption } from '../../hooks/use_waffle_options'; import { DropdownButton } from '../dropdown_button'; @@ -108,16 +114,17 @@ export const WaffleSortControls = ({ sort, onChange }: Props) => { }; interface SwitchContainerProps { - theme: EuiTheme | undefined; children: ReactNode; } -const SwitchContainer = withTheme(({ children, theme }: SwitchContainerProps) => { +type SwitchContainerPropsWithTheme = SwitchContainerProps & WithEuiThemeProps; + +const SwitchContainer = withEuiTheme(({ children, theme }: SwitchContainerPropsWithTheme) => { return (
{children} diff --git a/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/gauges_section_vis.tsx b/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/gauges_section_vis.tsx index 5106aecfc29f2..673b57ab037ce 100644 --- a/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/gauges_section_vis.tsx +++ b/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/gauges_section_vis.tsx @@ -16,8 +16,7 @@ import { } from '@elastic/eui'; import { get, last, max } from 'lodash'; import React, { ReactText } from 'react'; - -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; import { InventoryFormatterType } from '@kbn/metrics-data-access-plugin/common'; import { createFormatter } from '../../../../../common/formatters'; import { SeriesOverrides, VisSectionProps } from '../types'; @@ -97,7 +96,7 @@ export const GaugesSectionVis = ({ ); }; -const GroupBox = euiStyled.div` +const GroupBox = styled.div` display: flex; flex-flow: row wrap; justify-content: space-evenly; diff --git a/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/invalid_node.tsx b/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/invalid_node.tsx index 6eaa418f47607..c1b000e40f532 100644 --- a/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/invalid_node.tsx +++ b/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/invalid_node.tsx @@ -8,7 +8,7 @@ import { EuiButton, EuiEmptyPrompt, EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n-react'; import React from 'react'; -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; import { useLinkProps } from '@kbn/observability-shared-plugin/public'; import { ViewSourceConfigurationButton } from '../../../../components/source_configuration/view_source_configuration_button'; @@ -72,6 +72,6 @@ export const InvalidNodeError: React.FunctionComponent = ); }; -const CenteredEmptyPrompt = euiStyled(EuiEmptyPrompt)` +const CenteredEmptyPrompt = styled(EuiEmptyPrompt)` align-self: center; `; diff --git a/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/layouts/aws_ec2_layout.tsx b/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/layouts/aws_ec2_layout.tsx index 99b0169b74f06..cb2056c45ee14 100644 --- a/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/layouts/aws_ec2_layout.tsx +++ b/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/layouts/aws_ec2_layout.tsx @@ -5,9 +5,8 @@ * 2.0. */ -import { EuiPanel } from '@elastic/eui'; +import { EuiPanel, withEuiTheme } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; -import { withTheme } from '@kbn/kibana-react-plugin/common'; import React from 'react'; import type { LayoutPropsWithTheme } from '../../types'; import { ChartSectionVis } from '../chart_section_vis'; @@ -15,7 +14,7 @@ import { MetadataDetails } from '../metadata_details'; import { Section } from '../section'; import { SubSection } from '../sub_section'; -export const AwsEC2Layout = withTheme( +export const AwsEC2Layout = withEuiTheme( ({ metrics, theme, onChangeRangeTime }: LayoutPropsWithTheme) => ( @@ -73,7 +72,7 @@ export const AwsEC2Layout = withTheme( type="area" seriesOverrides={{ rx: { - color: theme.eui.euiColorVis1, + color: theme.euiTheme.colors.vis.euiColorVis1, name: i18n.translate( 'xpack.infra.metricDetailPage.hostMetricsLayout.networkTrafficSection.networkRxRateSeriesLabel', { @@ -82,7 +81,7 @@ export const AwsEC2Layout = withTheme( ), }, tx: { - color: theme.eui.euiColorVis2, + color: theme.euiTheme.colors.vis.euiColorVis2, name: i18n.translate( 'xpack.infra.metricDetailPage.hostMetricsLayout.networkTrafficSection.networkTxRateSeriesLabel', { @@ -108,7 +107,7 @@ export const AwsEC2Layout = withTheme( type="area" seriesOverrides={{ write: { - color: theme.eui.euiColorVis2, + color: theme.euiTheme.colors.vis.euiColorVis2, name: i18n.translate( 'xpack.infra.metricDetailPage.ec2MetricsLayout.diskIOBytesSection.writeLabel', { @@ -117,7 +116,7 @@ export const AwsEC2Layout = withTheme( ), }, read: { - color: theme.eui.euiColorVis1, + color: theme.euiTheme.colors.vis.euiColorVis1, name: i18n.translate( 'xpack.infra.metricDetailPage.ec2MetricsLayout.diskIOBytesSection.readLabel', { diff --git a/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/layouts/aws_rds_layout.tsx b/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/layouts/aws_rds_layout.tsx index 6415a55e7ed45..043127321f082 100644 --- a/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/layouts/aws_rds_layout.tsx +++ b/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/layouts/aws_rds_layout.tsx @@ -5,16 +5,15 @@ * 2.0. */ -import { EuiPanel } from '@elastic/eui'; +import { EuiPanel, withEuiTheme } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; -import { withTheme } from '@kbn/kibana-react-plugin/common'; import React from 'react'; import type { LayoutPropsWithTheme } from '../../types'; import { ChartSectionVis } from '../chart_section_vis'; import { Section } from '../section'; import { SubSection } from '../sub_section'; -export const AwsRDSLayout = withTheme( +export const AwsRDSLayout = withEuiTheme( ({ metrics, onChangeRangeTime, theme }: LayoutPropsWithTheme) => (
(
(
( @@ -47,7 +46,7 @@ export const ContainerLayout = withTheme( defaultMessage: 'CPU Usage', } ), - color: theme.eui.euiColorFullShade, + color: theme.euiTheme.colors.fullShade, formatter: 'percent', gaugeMax: 1, }, @@ -58,7 +57,7 @@ export const ContainerLayout = withTheme( defaultMessage: 'Memory Usage', } ), - color: theme.eui.euiColorFullShade, + color: theme.euiTheme.colors.fullShade, formatter: 'percent', gaugeMax: 1, }, @@ -76,7 +75,7 @@ export const ContainerLayout = withTheme( defaultMessage: 'CPU Usage', } ), - color: theme.eui.euiColorFullShade, + color: theme.euiTheme.colors.fullShade, formatter: 'percent', gaugeMax: 1, }, @@ -87,7 +86,7 @@ export const ContainerLayout = withTheme( defaultMessage: 'Memory Usage', } ), - color: theme.eui.euiColorFullShade, + color: theme.euiTheme.colors.fullShade, formatter: 'percent', gaugeMax: 1, }, @@ -98,7 +97,7 @@ export const ContainerLayout = withTheme( defaultMessage: 'Inbound (RX)', } ), - color: theme.eui.euiColorFullShade, + color: theme.euiTheme.colors.fullShade, formatter: 'bits', formatterTemplate: '{{value}}/s', }, @@ -109,7 +108,7 @@ export const ContainerLayout = withTheme( defaultMessage: 'Outbound (TX)', } ), - color: theme.eui.euiColorFullShade, + color: theme.euiTheme.colors.fullShade, formatter: 'bits', formatterTemplate: '{{value}}/s', }, @@ -130,7 +129,7 @@ export const ContainerLayout = withTheme( type="area" formatter="percent" seriesOverrides={{ - cpu: { color: theme.eui.euiColorVis1 }, + cpu: { color: theme.euiTheme.colors.vis.euiColorVis1 }, }} /> @@ -148,7 +147,7 @@ export const ContainerLayout = withTheme( type="area" formatter="percent" seriesOverrides={{ - memory: { color: theme.eui.euiColorVis1 }, + memory: { color: theme.euiTheme.colors.vis.euiColorVis1 }, }} /> @@ -166,7 +165,7 @@ export const ContainerLayout = withTheme( type="area" formatter="percent" seriesOverrides={{ - cpu: { color: theme.eui.euiColorVis1 }, + cpu: { color: theme.euiTheme.colors.vis.euiColorVis1 }, }} /> @@ -184,7 +183,7 @@ export const ContainerLayout = withTheme( type="area" formatter="percent" seriesOverrides={{ - memory: { color: theme.eui.euiColorVis1 }, + memory: { color: theme.euiTheme.colors.vis.euiColorVis1 }, }} /> @@ -203,7 +202,7 @@ export const ContainerLayout = withTheme( type="area" seriesOverrides={{ rx: { - color: theme.eui.euiColorVis1, + color: theme.euiTheme.colors.vis.euiColorVis1, name: i18n.translate( 'xpack.infra.metricDetailPage.containerMetricsLayout.networkTrafficSection.networkRxRateSeriesLabel', { @@ -212,7 +211,7 @@ export const ContainerLayout = withTheme( ), }, tx: { - color: theme.eui.euiColorVis2, + color: theme.euiTheme.colors.vis.euiColorVis2, name: i18n.translate( 'xpack.infra.metricDetailPage.containerMetricsLayout.networkTrafficSection.networkTxRateSeriesLabel', { @@ -238,7 +237,7 @@ export const ContainerLayout = withTheme( formatter="number" seriesOverrides={{ read: { - color: theme.eui.euiColorVis1, + color: theme.euiTheme.colors.vis.euiColorVis1, name: i18n.translate( 'xpack.infra.metricDetailPage.containerMetricsLayout.diskIoOpsSection.readRateSeriesLabel', { @@ -247,7 +246,7 @@ export const ContainerLayout = withTheme( ), }, write: { - color: theme.eui.euiColorVis2, + color: theme.euiTheme.colors.vis.euiColorVis2, name: i18n.translate( 'xpack.infra.metricDetailPage.containerMetricsLayout.diskIoOpsSection.writeRateSeriesLabel', { @@ -273,7 +272,7 @@ export const ContainerLayout = withTheme( formatterTemplate="{{value}}/s" seriesOverrides={{ read: { - color: theme.eui.euiColorVis1, + color: theme.euiTheme.colors.vis.euiColorVis1, name: i18n.translate( 'xpack.infra.metricDetailPage.containerMetricsLayout.diskIoBytesSection.readRateSeriesLabel', { @@ -282,7 +281,7 @@ export const ContainerLayout = withTheme( ), }, write: { - color: theme.eui.euiColorVis2, + color: theme.euiTheme.colors.vis.euiColorVis2, name: i18n.translate( 'xpack.infra.metricDetailPage.containerMetricsLayout.diskIoBytesSection.writeRateSeriesLabel', { diff --git a/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/layouts/nginx_layout_sections.tsx b/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/layouts/nginx_layout_sections.tsx index d845357d33256..470640de53ddb 100644 --- a/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/layouts/nginx_layout_sections.tsx +++ b/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/layouts/nginx_layout_sections.tsx @@ -7,13 +7,13 @@ import React from 'react'; import { i18n } from '@kbn/i18n'; -import { withTheme } from '@kbn/kibana-react-plugin/common'; +import { withEuiTheme } from '@elastic/eui'; import type { LayoutPropsWithTheme } from '../../types'; import { Section } from '../section'; import { SubSection } from '../sub_section'; import { ChartSectionVis } from '../chart_section_vis'; -export const NginxLayoutSection = withTheme( +export const NginxLayoutSection = withEuiTheme( ({ metrics, onChangeRangeTime, theme }: LayoutPropsWithTheme) => (
@@ -57,7 +57,7 @@ export const NginxLayoutSection = withTheme( formatter="abbreviatedNumber" formatterTemplate="{{value}}/s" seriesOverrides={{ - rate: { color: theme.eui.euiColorVis1 }, + rate: { color: theme.euiTheme.colors.vis.euiColorVis1 }, }} /> @@ -75,7 +75,7 @@ export const NginxLayoutSection = withTheme( formatter="abbreviatedNumber" seriesOverrides={{ connections: { - color: theme.eui.euiColorVis1, + color: theme.euiTheme.colors.vis.euiColorVis1, type: 'bar', }, }} @@ -95,7 +95,7 @@ export const NginxLayoutSection = withTheme( formatter="abbreviatedNumber" seriesOverrides={{ reqPerConns: { - color: theme.eui.euiColorVis1, + color: theme.euiTheme.colors.vis.euiColorVis1, name: i18n.translate( 'xpack.infra.metricDetailPage.nginxMetricsLayout.requestsPerConnectionsSection.reqsPerConnSeriesLabel', { diff --git a/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/layouts/pod_layout.tsx b/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/layouts/pod_layout.tsx index f35f606db7452..c2ed79d75325d 100644 --- a/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/layouts/pod_layout.tsx +++ b/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/layouts/pod_layout.tsx @@ -5,9 +5,8 @@ * 2.0. */ -import { EuiPanel } from '@elastic/eui'; +import { EuiPanel, withEuiTheme } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; -import { withTheme } from '@kbn/kibana-react-plugin/common'; import React from 'react'; import type { LayoutPropsWithTheme } from '../../types'; import { ChartSectionVis } from '../chart_section_vis'; @@ -17,7 +16,7 @@ import { Section } from '../section'; import { SubSection } from '../sub_section'; import { NginxLayoutSection } from './nginx_layout_sections'; -export const PodLayout = withTheme( +export const PodLayout = withEuiTheme( ({ metrics, onChangeRangeTime, theme }: LayoutPropsWithTheme) => ( @@ -45,7 +44,7 @@ export const PodLayout = withTheme( defaultMessage: 'CPU Usage', } ), - color: theme.eui.euiColorFullShade, + color: theme.euiTheme.colors.fullShade, formatter: 'percent', gaugeMax: 1, }, @@ -56,7 +55,7 @@ export const PodLayout = withTheme( defaultMessage: 'Memory Usage', } ), - color: theme.eui.euiColorFullShade, + color: theme.euiTheme.colors.fullShade, formatter: 'percent', gaugeMax: 1, }, @@ -67,7 +66,7 @@ export const PodLayout = withTheme( defaultMessage: 'Inbound (RX)', } ), - color: theme.eui.euiColorFullShade, + color: theme.euiTheme.colors.fullShade, formatter: 'bits', formatterTemplate: '{{value}}/s', }, @@ -78,7 +77,7 @@ export const PodLayout = withTheme( defaultMessage: 'Outbound (TX)', } ), - color: theme.eui.euiColorFullShade, + color: theme.euiTheme.colors.fullShade, formatter: 'bits', formatterTemplate: '{{value}}/s', }, @@ -98,7 +97,7 @@ export const PodLayout = withTheme( formatter="percent" type="area" seriesOverrides={{ - cpu: { color: theme.eui.euiColorVis1 }, + cpu: { color: theme.euiTheme.colors.vis.euiColorVis1 }, }} /> @@ -116,7 +115,7 @@ export const PodLayout = withTheme( formatter="percent" seriesOverrides={{ memory: { - color: theme.eui.euiColorVis1, + color: theme.euiTheme.colors.vis.euiColorVis1, }, }} /> @@ -136,7 +135,7 @@ export const PodLayout = withTheme( type="area" seriesOverrides={{ rx: { - color: theme.eui.euiColorVis1, + color: theme.euiTheme.colors.vis.euiColorVis1, name: i18n.translate( 'xpack.infra.metricDetailPage.podMetricsLayout.networkTrafficSection.networkRxRateSeriesLabel', { @@ -145,7 +144,7 @@ export const PodLayout = withTheme( ), }, tx: { - color: theme.eui.euiColorVis2, + color: theme.euiTheme.colors.vis.euiColorVis2, name: i18n.translate( 'xpack.infra.metricDetailPage.podMetricsLayout.networkTrafficSection.networkTxRateSeriesLabel', { diff --git a/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/metadata_details.tsx b/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/metadata_details.tsx index e1596f52aa3c3..c086ce45cf5b0 100644 --- a/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/metadata_details.tsx +++ b/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/metadata_details.tsx @@ -8,8 +8,7 @@ import React, { useContext, useState, useCallback, useMemo } from 'react'; import { EuiButtonIcon, EuiFlexGrid, EuiFlexItem, EuiTitle, EuiText } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; -import { get } from 'lodash'; -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; import { InfraMetadata } from '../../../../../common/http_api'; import { MetadataContext } from '../containers/metadata_context'; @@ -165,18 +164,18 @@ export const MetadataDetails = (props: Props) => { ); }; -const MetadataContainer = euiStyled.div` -border-top: ${(props) => props.theme.eui.euiBorderWidthThin} solid ${(props) => - props.theme.eui.euiBorderColor}; -border-bottom: ${(props) => props.theme.eui.euiBorderWidthThin} solid ${(props) => - props.theme.eui.euiBorderColor}; -padding: ${(props) => props.theme.eui.euiSizeM} 0; -margin-bottom: ${(props) => props.theme.eui.euiSizeM}; -display: flex; +const MetadataContainer = styled.div` + border-top: ${(props) => props.theme.euiTheme.border.thin} solid + ${(props) => props.theme.eui.euiBorderColor}; + border-bottom: ${(props) => props.theme.euiTheme.border.thin} solid + ${(props) => props.theme.eui.euiBorderColor}; + padding: ${(props) => props.theme.euiTheme.size.m} 0; + margin-bottom: ${(props) => props.theme.euiTheme.size.m}; + display: flex; `; -const Controls = euiStyled.div` -flex-grow: 0; -margin-right: ${(props) => props.theme.eui.euiSizeM}; -min-width: 0px; +const Controls = styled.div` + flex-grow: 0; + margin-right: ${(props) => props.theme.euiTheme.size.m}; + min-width: 0px; `; diff --git a/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/time_controls.tsx b/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/time_controls.tsx index b1973fe002de2..0b0df22840406 100644 --- a/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/time_controls.tsx +++ b/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/time_controls.tsx @@ -8,7 +8,7 @@ import { EuiSuperDatePicker, OnRefreshChangeProps, OnTimeChangeProps } from '@elastic/eui'; import React, { useCallback } from 'react'; import { UI_SETTINGS } from '@kbn/data-plugin/public'; -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; import { MetricsTimeInput } from '../hooks/use_metrics_time'; import { useKibanaUiSetting } from '../../../../hooks/use_kibana_ui_setting'; import { mapKibanaQuickRangesToDatePickerRanges } from '../../../../utils/map_timepicker_quickranges_to_datepicker_ranges'; @@ -76,6 +76,6 @@ export const MetricsTimeControls = (props: MetricsTimeControlsProps) => { ); }; -const MetricsTimeControlsContainer = euiStyled.div` +const MetricsTimeControlsContainer = styled.div` max-width: 750px; `; diff --git a/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/types.ts b/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/types.ts index 4d5c5ad7ea861..240d9ce012789 100644 --- a/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/types.ts +++ b/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/types.ts @@ -7,7 +7,7 @@ import rt from 'io-ts'; import { PropsWithChildren } from 'react'; -import { EuiTheme } from '@kbn/kibana-react-plugin/common'; +import { WithEuiThemeProps } from '@elastic/eui'; import { InventoryFormatterTypeRT } from '@kbn/metrics-data-access-plugin/common'; import { MetricsTimeInput } from './hooks/use_metrics_time'; import { NodeDetailsMetricData } from '../../../../common/http_api/node_details_api'; @@ -19,7 +19,7 @@ export interface LayoutProps { stopLiveStreaming?: () => void; } -export type LayoutPropsWithTheme = LayoutProps & PropsWithChildren<{ theme: EuiTheme }>; +export type LayoutPropsWithTheme = LayoutProps & PropsWithChildren & WithEuiThemeProps; const ChartTypesRT = rt.keyof({ area: null, diff --git a/x-pack/plugins/observability_solution/infra/public/pages/metrics/metrics_explorer/components/chart.tsx b/x-pack/plugins/observability_solution/infra/public/pages/metrics/metrics_explorer/components/chart.tsx index 3e07480e7d7fe..347283ca1f51a 100644 --- a/x-pack/plugins/observability_solution/infra/public/pages/metrics/metrics_explorer/components/chart.tsx +++ b/x-pack/plugins/observability_solution/infra/public/pages/metrics/metrics_explorer/components/chart.tsx @@ -16,7 +16,7 @@ import { Tooltip, } from '@elastic/charts'; import { EuiFlexGroup, EuiFlexItem, EuiTitle, EuiToolTip } from '@elastic/eui'; -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +import styled from '@emotion/styled'; import { first, last } from 'lodash'; import moment from 'moment'; import React, { useCallback, useMemo } from 'react'; @@ -176,7 +176,7 @@ export const MetricsExplorerChart = ({ ); }; -const ChartTitleContainer = euiStyled.div` +const ChartTitleContainer = styled.div` width: 100%; overflow: hidden; text-overflow: ellipsis; diff --git a/x-pack/plugins/observability_solution/infra/public/utils/theme_utils/with_attrs.tsx b/x-pack/plugins/observability_solution/infra/public/utils/theme_utils/with_attrs.tsx new file mode 100644 index 0000000000000..cccc4de593482 --- /dev/null +++ b/x-pack/plugins/observability_solution/infra/public/utils/theme_utils/with_attrs.tsx @@ -0,0 +1,19 @@ +/* + * 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 { type Theme, useTheme } from '@emotion/react'; +import React from 'react'; + +import { ComponentType } from 'react'; + +export const withAttrs = + (Component: ComponentType, fn: (args: { theme: Theme; props: any }) => any) => + (props: any) => { + const theme = useTheme(); + const attrs = fn({ theme, props }); + + return ; + }; diff --git a/x-pack/plugins/observability_solution/infra/tsconfig.json b/x-pack/plugins/observability_solution/infra/tsconfig.json index efd8be77b688c..3a99b9ef13f44 100644 --- a/x-pack/plugins/observability_solution/infra/tsconfig.json +++ b/x-pack/plugins/observability_solution/infra/tsconfig.json @@ -8,7 +8,9 @@ "common/**/*", "public/**/*", "server/**/*", - "types/**/*" + "types/**/*", + // Emotion theme typing + "./emotion.d.ts" ], "kbn_references": [ "@kbn/core", From 7846e0f0008707a4cd623593562eff65a3a9070e Mon Sep 17 00:00:00 2001 From: "miriam.aparicio" Date: Mon, 2 Dec 2024 14:57:28 +0000 Subject: [PATCH 2/9] added some missing tokens and visual refresh improvements --- .../alerting/common/components/threshold.tsx | 10 +-- .../components/alert_annotation.tsx | 7 +- .../tabs/processes/processes_table.tsx | 2 +- .../autocomplete_field/autocomplete_field.tsx | 2 +- .../public/components/eui/toolbar/toolbar.tsx | 5 +- .../components/loading_overlay_wrapper.tsx | 2 +- .../log_stream_react_embeddable.tsx | 8 +-- .../logging/log_minimap/density_chart.tsx | 2 +- .../logging/log_minimap/time_ruler.tsx | 3 +- .../components/logs_deprecation_callout.tsx | 13 ++-- .../single_metric_comparison.tsx | 8 +-- .../components/dropdown_button.tsx | 9 +-- .../components/timeline/timeline.tsx | 2 +- .../components/waffle/gradient_legend.tsx | 2 +- .../components/waffle/group_name.tsx | 6 +- .../components/waffle/group_of_groups.tsx | 2 +- .../components/waffle/group_of_nodes.tsx | 2 +- .../metric_control/custom_metric_form.tsx | 2 +- .../metric_control/metrics_edit_mode.tsx | 19 ++++-- .../components/waffle/node_context_menu.tsx | 8 +-- .../components/waffle/node_square.tsx | 65 ++++++++++--------- .../waffle/waffle_sort_controls.tsx | 2 +- .../waffle/waffle_time_controls.tsx | 16 +++-- .../components/metadata_details.tsx | 5 +- .../infra/tsconfig.json | 1 - .../topn_functions/function_row.tsx | 9 ++- 26 files changed, 115 insertions(+), 97 deletions(-) diff --git a/x-pack/plugins/observability_solution/infra/public/alerting/common/components/threshold.tsx b/x-pack/plugins/observability_solution/infra/public/alerting/common/components/threshold.tsx index f58faae9f6b41..6cf4ec885e4d6 100644 --- a/x-pack/plugins/observability_solution/infra/public/alerting/common/components/threshold.tsx +++ b/x-pack/plugins/observability_solution/infra/public/alerting/common/components/threshold.tsx @@ -6,15 +6,14 @@ */ import React from 'react'; -import type { Theme as EuiTheme } from '@emotion/react'; import { Chart, Metric, Settings } from '@elastic/charts'; -import { EuiIcon, EuiPanel } from '@elastic/eui'; -import type { Theme } from '@elastic/charts'; +import { EuiIcon, EuiPanel, useEuiTheme } from '@elastic/eui'; +import type { PartialTheme, Theme } from '@elastic/charts'; import { i18n } from '@kbn/i18n'; import { COMPARATORS } from '@kbn/alerting-comparators'; export interface ChartProps { - theme?: EuiTheme; + theme?: PartialTheme; baseTheme: Theme; } @@ -42,7 +41,8 @@ export const Threshold = ({ valueFormatter, warning, }: Props) => { - const color = theme?.euiTheme.colors.danger; + const { euiTheme } = useEuiTheme(); + const color = euiTheme.colors.danger; return ( { diff --git a/x-pack/plugins/observability_solution/infra/public/components/autocomplete_field/autocomplete_field.tsx b/x-pack/plugins/observability_solution/infra/public/components/autocomplete_field/autocomplete_field.tsx index 07dbeb11883ad..c1b362c46bd07 100644 --- a/x-pack/plugins/observability_solution/infra/public/components/autocomplete_field/autocomplete_field.tsx +++ b/x-pack/plugins/observability_solution/infra/public/components/autocomplete_field/autocomplete_field.tsx @@ -312,7 +312,7 @@ const SuggestionsPanel = styled(EuiPanel)` margin-top: 2px; overflow-x: hidden; overflow-y: scroll; - z-index: ${(props) => props.theme.euiTheme.euiZLevel1}; + z-index: ${(props) => props.theme.euiTheme.levels.maskBelowHeader}; max-height: 322px; `; diff --git a/x-pack/plugins/observability_solution/infra/public/components/eui/toolbar/toolbar.tsx b/x-pack/plugins/observability_solution/infra/public/components/eui/toolbar/toolbar.tsx index b4598045400b8..4f64e58544a5e 100644 --- a/x-pack/plugins/observability_solution/infra/public/components/eui/toolbar/toolbar.tsx +++ b/x-pack/plugins/observability_solution/infra/public/components/eui/toolbar/toolbar.tsx @@ -9,16 +9,17 @@ import { EuiPanel } from '@elastic/eui'; import { FunctionComponent } from 'react'; import { StyledComponent } from 'styled-components'; import styled from '@emotion/styled'; +import { Theme } from '@emotion/react'; // 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 Toolbar: StyledComponent = styled(EuiPanel)` +export const Toolbar: StyledComponent = styled(EuiPanel)` border-top: none; border-right: none; border-left: none; border-radius: 0; - padding: ${(props) => props.theme.euiTheme.size.s} ${(props) => props.theme.size.l}; + padding: ${(props) => props.theme.euiTheme.size.s} ${(props) => props.theme.euiTheme.size.l}; `; Toolbar.defaultProps = { grow: false, paddingSize: 'none' }; diff --git a/x-pack/plugins/observability_solution/infra/public/components/loading_overlay_wrapper.tsx b/x-pack/plugins/observability_solution/infra/public/components/loading_overlay_wrapper.tsx index 7641247baae2c..08bb2f33dec75 100644 --- a/x-pack/plugins/observability_solution/infra/public/components/loading_overlay_wrapper.tsx +++ b/x-pack/plugins/observability_solution/infra/public/components/loading_overlay_wrapper.tsx @@ -42,5 +42,5 @@ const OverlayDiv = styled.div` position: absolute; top: 0; width: 100%; - z-index: ${(props) => props.theme.euiTheme.euiZLevel1}; + z-index: ${(props) => props.theme.euiTheme.levels.maskBelowHeader}; `; diff --git a/x-pack/plugins/observability_solution/infra/public/components/log_stream/log_stream_react_embeddable.tsx b/x-pack/plugins/observability_solution/infra/public/components/log_stream/log_stream_react_embeddable.tsx index 1193b81379219..8b841c30f1533 100644 --- a/x-pack/plugins/observability_solution/infra/public/components/log_stream/log_stream_react_embeddable.tsx +++ b/x-pack/plugins/observability_solution/infra/public/components/log_stream/log_stream_react_embeddable.tsx @@ -7,7 +7,7 @@ import React, { FC, PropsWithChildren, useEffect, useMemo, useState } from 'react'; import { i18n } from '@kbn/i18n'; -import { EuiCallOut, EuiLink } from '@elastic/eui'; +import { EuiCallOut, EuiLink, useEuiTheme } from '@elastic/eui'; import { ReactEmbeddableFactory } from '@kbn/embeddable-plugin/public'; import { initializeTimeRange, @@ -19,7 +19,6 @@ import { AppMountParameters, CoreStart } from '@kbn/core/public'; import { EuiThemeProvider } from '@kbn/kibana-react-plugin/common'; import { Query } from '@kbn/es-query'; import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render'; -import { euiThemeVars } from '@kbn/ui-theme'; import useLocalStorage from 'react-use/lib/useLocalStorage'; import { FormattedMessage } from '@kbn/i18n-react'; import type { LogStreamApi, LogStreamSerializedState, Services } from './types'; @@ -113,6 +112,7 @@ const SAVED_SEARCH_DOCS_URL = const DeprecationCallout = () => { const [isDismissed, setDismissed] = useLocalStorage(DISMISSAL_STORAGE_KEY, false); + const { euiTheme } = useEuiTheme(); if (isDismissed) { return null; @@ -125,8 +125,8 @@ const DeprecationCallout = () => { onDismiss={() => setDismissed(true)} css={{ position: 'absolute', - bottom: euiThemeVars.euiSizeM, - right: euiThemeVars.euiSizeM, + bottom: euiTheme.size.m, + right: euiTheme.size.m, width: 'min(100%, 40ch)', }} > 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 78296744a9539..75f8cc24f319c 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 @@ -73,7 +73,7 @@ const DensityChartPositiveBackground = styled.rect` const PositiveAreaPath = styled.path` fill: ${(props) => - props.theme.colorMode === 'dark' + props.theme.darkMode ? props.theme.euiTheme.colors.mediumShade : props.theme.euiTheme.colors.lightShade}; `; 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 e4bc157d16464..d96ef9442ac63 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,6 +8,7 @@ import { scaleTime } from 'd3-scale'; import * as React from 'react'; import styled from '@emotion/styled'; +import { useEuiFontSize } from '@elastic/eui'; import { useKibanaTimeZoneSetting } from '../../../hooks/use_kibana_time_zone_setting'; import { getTimeLabelFormat } from './time_label_formatter'; @@ -60,7 +61,7 @@ TimeRuler.displayName = 'TimeRuler'; const TimeRulerTickLabel = styled.text` font-size: 9px; - line-height: ${(props) => props.theme.euiTheme.euiLineHeight}; + line-height: ${() => useEuiFontSize('s').lineHeight}; fill: ${(props) => props.theme.euiTheme.colors.textSubdued}; user-select: none; pointer-events: none; diff --git a/x-pack/plugins/observability_solution/infra/public/components/logs_deprecation_callout.tsx b/x-pack/plugins/observability_solution/infra/public/components/logs_deprecation_callout.tsx index 0edb8b9ab2924..756c42214d7c0 100644 --- a/x-pack/plugins/observability_solution/infra/public/components/logs_deprecation_callout.tsx +++ b/x-pack/plugins/observability_solution/infra/public/components/logs_deprecation_callout.tsx @@ -5,13 +5,12 @@ * 2.0. */ -import { EuiCallOut } from '@elastic/eui'; +import { EuiCallOut, useEuiTheme } from '@elastic/eui'; import React from 'react'; import { i18n } from '@kbn/i18n'; import { EuiButton } from '@elastic/eui'; import { getRouterLinkProps } from '@kbn/router-utils'; import useLocalStorage from 'react-use/lib/useLocalStorage'; -import { euiThemeVars } from '@kbn/ui-theme'; import { css } from '@emotion/css'; import { LocatorPublic } from '@kbn/share-plugin/common'; import { DISCOVER_APP_LOCATOR, DiscoverAppLocatorParams } from '@kbn/discover-plugin/common'; @@ -48,6 +47,8 @@ export const LogsDeprecationCallout = ({ page }: LogsDeprecationCalloutProps) => }, } = useKibanaContextForPlugin(); + const { euiTheme } = useEuiTheme(); + const { dismissalStorageKey, message } = pageConfigurations[page]; const [isDismissed, setDismissed] = useLocalStorage(dismissalStorageKey, false); @@ -67,7 +68,9 @@ export const LogsDeprecationCallout = ({ page }: LogsDeprecationCalloutProps) => iconType="iInCircle" heading="h2" onDismiss={() => setDismissed(true)} - className={calloutStyle} + className={css` + margin-bottom: ${euiTheme.size.l}; + `} >

{message}

) onClick: () => locator.navigate({}), }); }; - -const calloutStyle = css` - margin-bottom: ${euiThemeVars.euiSizeL}; -`; diff --git a/x-pack/plugins/observability_solution/infra/public/pages/logs/log_entry_categories/sections/top_categories/single_metric_comparison.tsx b/x-pack/plugins/observability_solution/infra/public/pages/logs/log_entry_categories/sections/top_categories/single_metric_comparison.tsx index 93346fcbb744f..7ca4a58d693ab 100644 --- a/x-pack/plugins/observability_solution/infra/public/pages/logs/log_entry_categories/sections/top_categories/single_metric_comparison.tsx +++ b/x-pack/plugins/observability_solution/infra/public/pages/logs/log_entry_categories/sections/top_categories/single_metric_comparison.tsx @@ -27,15 +27,15 @@ export const SingleMetricComparison: React.FunctionComponent<{ } else if (changeFactor > 0 && Number.isFinite(changeFactor)) { return ( - - {formatPercentage(changeFactor)} + + {formatPercentage(changeFactor)} ); } else if (changeFactor > 0 && !Number.isFinite(changeFactor)) { return ( - - {newCategoryTrendLabel} + + {newCategoryTrendLabel} ); } diff --git a/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/dropdown_button.tsx b/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/dropdown_button.tsx index 65e4078c7aecc..2c8f5981599d7 100644 --- a/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/dropdown_button.tsx +++ b/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/dropdown_button.tsx @@ -12,6 +12,7 @@ import { withEuiTheme, WithEuiThemeProps, type EuiThemeComputed, + useEuiShadow, } from '@elastic/eui'; import React, { ReactNode } from 'react'; import { KubernetesTour } from './kubernetes_tour'; @@ -31,10 +32,10 @@ const ButtonLabel = ({ label, theme }: { label: string; theme?: EuiThemeComputed grow={false} style={{ padding: 12, - background: theme?.euiFormInputGroupLabelBackground, + background: theme?.colors.backgroundBaseFormsPrepend, fontSize: '0.75em', fontWeight: 600, - color: theme?.euiTitleColor, + color: theme?.colors.textHeading, }} > {label} @@ -48,8 +49,8 @@ export const DropdownButton = withEuiTheme((props: PropsWithTheme) => { alignItems="center" gutterSize="none" style={{ - border: theme?.euiTheme.euiFormInputGroupBorder, - boxShadow: `0px 3px 2px ${theme?.euiTheme.euiTableActionsBorderColor}, 0px 1px 1px ${theme?.euiTheme.euiTableActionsBorderColor}`, + border: theme?.euiTheme.border.thin, + boxShadow: `0px 3px 2px ${useEuiShadow('xs')}, 0px 1px 1px ${useEuiShadow('xs')}`, }} > {showKubernetesInfo ? ( diff --git a/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/timeline/timeline.tsx b/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/timeline/timeline.tsx index 3f951f339409e..0697b05205fea 100644 --- a/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/timeline/timeline.tsx +++ b/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/timeline/timeline.tsx @@ -299,7 +299,7 @@ export const Timeline: React.FC = ({ interval, yAxisFormatter, isVisible }; const TimelineContainer = styled.div` - background-color: ${(props) => props.theme.euiTheme.colors.euiPageBackgroundColor}; + background-color: ${(props) => props.theme.euiTheme.colors.body}; border-top: 1px solid ${(props) => props.theme.euiTheme.colors.lightShade}; height: 220px; width: 100%; diff --git a/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/gradient_legend.tsx b/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/gradient_legend.tsx index 79d8d092c1e6e..d17cd89eaf067 100644 --- a/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/gradient_legend.tsx +++ b/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/gradient_legend.tsx @@ -68,7 +68,7 @@ const GradientLegendTick = styled.div` const GradientLegendTickLine = styled.div` position: absolute; - background-color: ${(props) => props.theme.euiTheme.colors.border.euiBorderColor}; + background-color: ${(props) => props.theme.euiTheme.border.color}; width: 1px; left: 0; top: 15px; diff --git a/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/group_name.tsx b/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/group_name.tsx index ba4bb80c368a1..ba31487ff29cb 100644 --- a/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/group_name.tsx +++ b/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/group_name.tsx @@ -71,13 +71,13 @@ interface InnerProps { } const Inner = styled.div` - border: 1px solid ${(props) => props.theme.eui.euiBorderColor}; + border: 1px solid ${(props) => props.theme.euiTheme.border.color}; background-color: ${(props) => props.isChild ? props.theme.euiTheme.colors.lightestShade : props.theme.euiTheme.colors.emptyShade}; border-radius: 4px; - box-shadow: 0px 2px 0px 0px ${(props) => props.theme.eui.euiBorderColor}; + box-shadow: 0px 2px 0px 0px ${(props) => props.theme.euiTheme.border.color}; display: flex; align-items: center; justify-content: center; @@ -94,7 +94,7 @@ const Name = styled.div` const Count = styled.div` flex: 0 0 auto; - border-left: 1px solid ${(props) => props.theme.eui.euiBorderColor}; + border-left: 1px solid ${(props) => props.theme.euiTheme.border.color}; padding: 6px 10px; font-size: 0.85em; font-weight: normal; diff --git a/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/group_of_groups.tsx b/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/group_of_groups.tsx index 6abb42677afe7..bb09b568ceb9a 100644 --- a/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/group_of_groups.tsx +++ b/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/group_of_groups.tsx @@ -63,6 +63,6 @@ const Groups = styled.div` justify-content: center; padding: 20px 10px 10px; border-radius: 4px; - border: 1px solid ${(props) => props.theme.euiTheme.euiBorderColor}; + border: 1px solid ${(props) => props.theme.euiTheme.border.color}; box-shadow: 0 1px 7px rgba(0, 0, 0, 0.1); `; diff --git a/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/group_of_nodes.tsx b/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/group_of_nodes.tsx index a8e8fd32458f1..07185ad58f26b 100644 --- a/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/group_of_nodes.tsx +++ b/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/group_of_nodes.tsx @@ -98,6 +98,6 @@ const Nodes = styled.div` justify-content: center; padding: 20px 10px 10px; border-radius: 4px; - border: 1px solid ${(props) => props.theme.euiTheme.euiBorderColor}; + border: 1px solid ${(props) => props.theme.euiTheme.border.color}; box-shadow: 0 1px 7px rgba(0, 0, 0, 0.1); `; diff --git a/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/metric_control/custom_metric_form.tsx b/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/metric_control/custom_metric_form.tsx index 2d2c53fa15ebc..b66eca468b482 100644 --- a/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/metric_control/custom_metric_form.tsx +++ b/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/metric_control/custom_metric_form.tsx @@ -161,7 +161,7 @@ export const CustomMetricForm = withEuiTheme(
; onEdit: (metric: SnapshotCustomMetricInput) => void; onDelete: (metric: SnapshotCustomMetricInput) => void; } + +type PropsWithTheme = Props & WithEuiThemeProps; + const ICON_WIDTH = 36; -export const MetricsEditMode = withTheme( - ({ theme, customMetrics, options, onEdit, onDelete }: Props) => { +export const MetricsEditMode = withEuiTheme( + ({ theme, customMetrics, options, onEdit, onDelete }: PropsWithTheme) => { return (
{options.map((option) => (
- {option.text} + {option.text}
))} {customMetrics.map((metric) => ( diff --git a/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/node_context_menu.tsx b/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/node_context_menu.tsx index 256b4e5184892..c1fa99a6e652b 100644 --- a/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/node_context_menu.tsx +++ b/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/node_context_menu.tsx @@ -5,12 +5,11 @@ * 2.0. */ -import { EuiCode } from '@elastic/eui'; +import { EuiCode, type WithEuiThemeProps, withEuiTheme } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n-react'; import React, { useMemo, useState } from 'react'; -import { withTheme, EuiTheme } from '@kbn/kibana-react-plugin/common'; import { Section, SectionLinkProps, @@ -40,9 +39,10 @@ interface Props { node: InfraWaffleMapNode; nodeType: InventoryItemType; } +type PropsWithTheme = Props & WithEuiThemeProps; -export const NodeContextMenu: React.FC = withTheme( - ({ options, currentTime, node, nodeType }) => { +export const NodeContextMenu = withEuiTheme( + ({ options, currentTime, node, nodeType }: PropsWithTheme) => { const { getAssetDetailUrl } = useAssetDetailsRedirect(); const [flyoutVisible, setFlyoutVisible] = useState(false); const inventoryModel = findInventoryModel(nodeType); diff --git a/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/node_square.tsx b/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/node_square.tsx index 31d31fed64016..977bf6b8b16cd 100644 --- a/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/node_square.tsx +++ b/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/node_square.tsx @@ -7,12 +7,10 @@ import { darken, readableColor } from 'polished'; import React, { CSSProperties } from 'react'; - import { i18n } from '@kbn/i18n'; - import { css } from '@emotion/react'; -import { euiThemeVars } from '@kbn/ui-theme'; import { UseBooleanHandlers } from '@kbn/react-hooks'; +import { useEuiTheme } from '@elastic/eui'; type NodeProps = React.DetailedHTMLProps, T> & { 'data-test-subj'?: string; @@ -66,35 +64,38 @@ const NodeContainerSmall = ({ children, ...props }: NodeProps & { color: string {children}
); -const ValueInner = ({ children, ...props }: NodeProps) => ( -
- {children} -
-); +const ValueInner = ({ children, ...props }: NodeProps) => { + const { euiTheme } = useEuiTheme(); + return ( +
+ {children} +
+ ); +}; const SquareOuter = ({ children, ...props }: NodeProps & { color: string }) => (
{children} diff --git a/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/waffle_time_controls.tsx b/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/waffle_time_controls.tsx index 916e27e0b6d21..a723958246c10 100644 --- a/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/waffle_time_controls.tsx +++ b/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/waffle_time_controls.tsx @@ -5,20 +5,28 @@ * 2.0. */ -import { EuiButton, EuiDatePicker, EuiFlexGroup, EuiFlexItem, EuiToolTip } from '@elastic/eui'; +import { + EuiButton, + EuiDatePicker, + EuiFlexGroup, + EuiFlexItem, + EuiToolTip, + WithEuiThemeProps, + withEuiTheme, +} from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n-react'; import moment, { Moment } from 'moment'; import React, { useCallback } from 'react'; -import { withTheme, EuiTheme } from '@kbn/kibana-react-plugin/common'; import { convertIntervalToString } from '../../../../../utils/convert_interval_to_string'; import { useWaffleTimeContext } from '../../hooks/use_waffle_time'; interface Props { - theme: EuiTheme | undefined; interval: string; } -export const WaffleTimeControls = withTheme(({ interval }: Props) => { +type PropsWithTheme = Props & WithEuiThemeProps; + +export const WaffleTimeControls = withEuiTheme(({ interval }: PropsWithTheme) => { const { currentTime, isAutoReloading, startAutoReload, stopAutoReload, jumpToTime } = useWaffleTimeContext(); diff --git a/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/metadata_details.tsx b/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/metadata_details.tsx index c086ce45cf5b0..c7f3857d21347 100644 --- a/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/metadata_details.tsx +++ b/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/metadata_details.tsx @@ -6,6 +6,7 @@ */ import React, { useContext, useState, useCallback, useMemo } from 'react'; +import { get } from 'lodash'; import { EuiButtonIcon, EuiFlexGrid, EuiFlexItem, EuiTitle, EuiText } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import styled from '@emotion/styled'; @@ -166,9 +167,9 @@ export const MetadataDetails = (props: Props) => { const MetadataContainer = styled.div` border-top: ${(props) => props.theme.euiTheme.border.thin} solid - ${(props) => props.theme.eui.euiBorderColor}; + ${(props) => props.theme.euiTheme.border.color}; border-bottom: ${(props) => props.theme.euiTheme.border.thin} solid - ${(props) => props.theme.eui.euiBorderColor}; + ${(props) => props.theme.euiTheme.border.color}; padding: ${(props) => props.theme.euiTheme.size.m} 0; margin-bottom: ${(props) => props.theme.euiTheme.size.m}; display: flex; diff --git a/x-pack/plugins/observability_solution/infra/tsconfig.json b/x-pack/plugins/observability_solution/infra/tsconfig.json index 3a99b9ef13f44..66952247a63e9 100644 --- a/x-pack/plugins/observability_solution/infra/tsconfig.json +++ b/x-pack/plugins/observability_solution/infra/tsconfig.json @@ -67,7 +67,6 @@ "@kbn/discover-plugin", "@kbn/observability-shared-plugin", "@kbn/observability-ai-assistant-plugin", - "@kbn/ui-theme", "@kbn/ml-anomaly-utils", "@kbn/aiops-plugin", "@kbn/field-formats-plugin", diff --git a/x-pack/plugins/observability_solution/profiling/public/components/topn_functions/function_row.tsx b/x-pack/plugins/observability_solution/profiling/public/components/topn_functions/function_row.tsx index 3d20818e7b012..436b6942c1305 100644 --- a/x-pack/plugins/observability_solution/profiling/public/components/topn_functions/function_row.tsx +++ b/x-pack/plugins/observability_solution/profiling/public/components/topn_functions/function_row.tsx @@ -11,7 +11,6 @@ import { EuiFlexItem, EuiIcon, EuiText, - useEuiBackgroundColor, useEuiTheme, } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; @@ -101,9 +100,9 @@ interface DiffColumnProps { } function DiffColumn({ diff, setCellProps }: DiffColumnProps) { - const theme = useEuiTheme(); - const successColor = useEuiBackgroundColor('success'); - const dangerColor = useEuiBackgroundColor('danger'); + const { euiTheme } = useEuiTheme(); + const successColor = euiTheme.colors.backgroundBaseSuccess; + const dangerColor = euiTheme.colors.backgroundBaseDanger; useEffect(() => { if (diff && diff.rank !== 0) { @@ -116,7 +115,7 @@ function DiffColumn({ diff, setCellProps }: DiffColumnProps) { if (!diff) { return ( - + {i18n.translate('xpack.profiling.functionsView.newLabel', { defaultMessage: 'New', })} From c84a7311011a00806a2d6a4c1ab9a113a76be663 Mon Sep 17 00:00:00 2001 From: "miriam.aparicio" Date: Mon, 2 Dec 2024 16:41:37 +0000 Subject: [PATCH 3/9] fixes --- .../asset_details/tabs/processes/processes_table.tsx | 6 +++--- .../components/autocomplete_field/suggestion_item.tsx | 2 +- .../metrics/inventory_view/components/dropdown_button.tsx | 2 -- 3 files changed, 4 insertions(+), 6 deletions(-) diff --git a/x-pack/plugins/observability_solution/infra/public/components/asset_details/tabs/processes/processes_table.tsx b/x-pack/plugins/observability_solution/infra/public/components/asset_details/tabs/processes/processes_table.tsx index 9c38054315da8..4f3a3835990ba 100644 --- a/x-pack/plugins/observability_solution/infra/public/components/asset_details/tabs/processes/processes_table.tsx +++ b/x-pack/plugins/observability_solution/infra/public/components/asset_details/tabs/processes/processes_table.tsx @@ -367,7 +367,7 @@ const columns: Array<{ ]; const CodeLine = ({ command }: { command: string }) => { - const euiTheme = useEuiTheme(); + const { euiTheme } = useEuiTheme(); return (
{ {command} diff --git a/x-pack/plugins/observability_solution/infra/public/components/autocomplete_field/suggestion_item.tsx b/x-pack/plugins/observability_solution/infra/public/components/autocomplete_field/suggestion_item.tsx index f1dc90bde8a69..536263b3b9e07 100644 --- a/x-pack/plugins/observability_solution/infra/public/components/autocomplete_field/suggestion_item.tsx +++ b/x-pack/plugins/observability_solution/infra/public/components/autocomplete_field/suggestion_item.tsx @@ -42,7 +42,7 @@ const SuggestionItemContainer = styled.div<{ }>` display: flex; flex-direction: row; - font-size: ${({ theme }) => theme.euiTheme.size.s}; + font-size: ${({ theme }) => theme.euiTheme.size.m}; height: ${({ theme }) => theme.euiTheme.size.xl}; white-space: nowrap; background-color: ${(props) => diff --git a/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/dropdown_button.tsx b/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/dropdown_button.tsx index 2c8f5981599d7..50b69b94c803e 100644 --- a/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/dropdown_button.tsx +++ b/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/dropdown_button.tsx @@ -12,7 +12,6 @@ import { withEuiTheme, WithEuiThemeProps, type EuiThemeComputed, - useEuiShadow, } from '@elastic/eui'; import React, { ReactNode } from 'react'; import { KubernetesTour } from './kubernetes_tour'; @@ -50,7 +49,6 @@ export const DropdownButton = withEuiTheme((props: PropsWithTheme) => { gutterSize="none" style={{ border: theme?.euiTheme.border.thin, - boxShadow: `0px 3px 2px ${useEuiShadow('xs')}, 0px 1px 1px ${useEuiShadow('xs')}`, }} > {showKubernetesInfo ? ( From ff2da5846e490583459b2819154cc9ffae7c73b2 Mon Sep 17 00:00:00 2001 From: "miriam.aparicio" Date: Mon, 2 Dec 2024 17:11:17 +0000 Subject: [PATCH 4/9] update snapshot --- .../infra/public/alerting/common/components/threshold.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/plugins/observability_solution/infra/public/alerting/common/components/threshold.test.tsx b/x-pack/plugins/observability_solution/infra/public/alerting/common/components/threshold.test.tsx index 32d70920c5a73..12b6e76fe01cc 100644 --- a/x-pack/plugins/observability_solution/infra/public/alerting/common/components/threshold.test.tsx +++ b/x-pack/plugins/observability_solution/infra/public/alerting/common/components/threshold.test.tsx @@ -64,7 +64,7 @@ describe('Threshold', () => { expect((Metric as jest.Mock).mock.calls[0][0].data[0][0]).toMatchInlineSnapshot(` Object { - "color": "#f8e9e9", + "color": "#BD271E", "extra": Alert when >= 7%
From 105cab2653950c8ac8950464854070967cbddc81 Mon Sep 17 00:00:00 2001 From: "miriam.aparicio" Date: Tue, 3 Dec 2024 12:07:09 +0000 Subject: [PATCH 5/9] fix types and darkMode --- .../public/alerting/common/components/threshold.tsx | 6 +++--- .../infra/public/apps/common_providers.tsx | 5 +++-- .../infra/public/components/eui/toolbar/toolbar.tsx | 8 +------- .../infra/public/components/fixed_datepicker.tsx | 12 ++---------- .../components/logging/log_minimap/density_chart.tsx | 4 ++-- .../components/logging/log_minimap/log_minimap.tsx | 2 +- .../components/logging/log_minimap/time_ruler.tsx | 2 +- 7 files changed, 13 insertions(+), 26 deletions(-) diff --git a/x-pack/plugins/observability_solution/infra/public/alerting/common/components/threshold.tsx b/x-pack/plugins/observability_solution/infra/public/alerting/common/components/threshold.tsx index 6cf4ec885e4d6..0fc34e7969c6c 100644 --- a/x-pack/plugins/observability_solution/infra/public/alerting/common/components/threshold.tsx +++ b/x-pack/plugins/observability_solution/infra/public/alerting/common/components/threshold.tsx @@ -7,13 +7,13 @@ import React from 'react'; import { Chart, Metric, Settings } from '@elastic/charts'; -import { EuiIcon, EuiPanel, useEuiTheme } from '@elastic/eui'; +import { EuiIcon, EuiPanel, UseEuiTheme, useEuiTheme } from '@elastic/eui'; import type { PartialTheme, Theme } from '@elastic/charts'; import { i18n } from '@kbn/i18n'; import { COMPARATORS } from '@kbn/alerting-comparators'; export interface ChartProps { - theme?: PartialTheme; + theme?: UseEuiTheme<{}>; baseTheme: Theme; } @@ -57,7 +57,7 @@ export const Threshold = ({ data-test-subj={`threshold-${thresholds.join('-')}-${value}`} > - + > = ({ children, triggersActionsUI, setHeaderActionMenu, appName, storage, theme$ }) => { const darkMode = useIsDarkMode(); + const colorMode = darkMode ? 'DARK' : 'LIGHT'; return ( - + {children} diff --git a/x-pack/plugins/observability_solution/infra/public/components/eui/toolbar/toolbar.tsx b/x-pack/plugins/observability_solution/infra/public/components/eui/toolbar/toolbar.tsx index 4f64e58544a5e..05b474c14fcb6 100644 --- a/x-pack/plugins/observability_solution/infra/public/components/eui/toolbar/toolbar.tsx +++ b/x-pack/plugins/observability_solution/infra/public/components/eui/toolbar/toolbar.tsx @@ -6,15 +6,9 @@ */ import { EuiPanel } from '@elastic/eui'; -import { FunctionComponent } from 'react'; -import { StyledComponent } from 'styled-components'; import styled from '@emotion/styled'; -import { Theme } from '@emotion/react'; -// 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 Toolbar: StyledComponent = styled(EuiPanel)` +export const Toolbar = styled(EuiPanel)` border-top: none; border-right: none; border-left: none; diff --git a/x-pack/plugins/observability_solution/infra/public/components/fixed_datepicker.tsx b/x-pack/plugins/observability_solution/infra/public/components/fixed_datepicker.tsx index 3fd96c72166f3..dd5042b447a74 100644 --- a/x-pack/plugins/observability_solution/infra/public/components/fixed_datepicker.tsx +++ b/x-pack/plugins/observability_solution/infra/public/components/fixed_datepicker.tsx @@ -5,19 +5,11 @@ * 2.0. */ +import React from 'react'; import { EuiDatePicker, EuiDatePickerProps } from '@elastic/eui'; -import React, { FunctionComponent } from 'react'; -import { StyledComponent } from 'styled-components'; import styled from '@emotion/styled'; -import { Theme } from '@emotion/react'; -// 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 FixedDatePicker: StyledComponent< - FunctionComponent, - Theme -> = styled( +export const FixedDatePicker = styled( ({ className, inputClassName, 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 75f8cc24f319c..5f42d19d035d5 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 @@ -66,14 +66,14 @@ export const DensityChart: React.FC = ({ const DensityChartPositiveBackground = styled.rect` fill: ${(props) => - props.theme.darkMode + props.theme.colorMode === 'DARK' ? props.theme.euiTheme.colors.lightShade : props.theme.euiTheme.colors.lightestShade}; `; const PositiveAreaPath = styled.path` fill: ${(props) => - props.theme.darkMode + props.theme.colorMode === '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 ef67a7f325a4f..fcd57e98b07d4 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 @@ -166,7 +166,7 @@ const TimeCursor = styled.line` pointer-events: none; stroke-width: 1px; stroke: ${(props) => - props.theme.darkMode + props.theme.colorMode === '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 d96ef9442ac63..1223e014fe9e6 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 @@ -69,7 +69,7 @@ const TimeRulerTickLabel = styled.text` const TimeRulerGridLine = styled.line` stroke: ${(props) => - props.theme.darkMode + props.theme.colorMode === 'DARK' ? props.theme.euiTheme.colors.darkestShade : props.theme.euiTheme.colors.darkShade}; stroke-opacity: 0.5; From 30f592a488ebe2f5f098021c652132668cb2ec63 Mon Sep 17 00:00:00 2001 From: "miriam.aparicio" Date: Wed, 4 Dec 2024 11:32:41 +0000 Subject: [PATCH 6/9] fixes after review --- .../alerting/common/components/threshold.tsx | 2 +- .../infra/public/apps/common_providers.tsx | 5 ++- .../autocomplete_field/suggestion_item.tsx | 2 +- .../public/components/fixed_datepicker.tsx | 9 +++-- .../components/logging/log_statusbar.tsx | 33 ++++++++++++------- .../pages/metrics/metric_detail/types.ts | 2 +- .../infra/tsconfig.json | 1 - 7 files changed, 33 insertions(+), 21 deletions(-) diff --git a/x-pack/plugins/observability_solution/infra/public/alerting/common/components/threshold.tsx b/x-pack/plugins/observability_solution/infra/public/alerting/common/components/threshold.tsx index 0fc34e7969c6c..c45fff627ae8b 100644 --- a/x-pack/plugins/observability_solution/infra/public/alerting/common/components/threshold.tsx +++ b/x-pack/plugins/observability_solution/infra/public/alerting/common/components/threshold.tsx @@ -7,7 +7,7 @@ import React from 'react'; import { Chart, Metric, Settings } from '@elastic/charts'; -import { EuiIcon, EuiPanel, UseEuiTheme, useEuiTheme } from '@elastic/eui'; +import { EuiIcon, EuiPanel, type UseEuiTheme, useEuiTheme } from '@elastic/eui'; import type { PartialTheme, Theme } from '@elastic/charts'; import { i18n } from '@kbn/i18n'; import { COMPARATORS } from '@kbn/alerting-comparators'; diff --git a/x-pack/plugins/observability_solution/infra/public/apps/common_providers.tsx b/x-pack/plugins/observability_solution/infra/public/apps/common_providers.tsx index b93c7a5135a7b..392e3f250ada0 100644 --- a/x-pack/plugins/observability_solution/infra/public/apps/common_providers.tsx +++ b/x-pack/plugins/observability_solution/infra/public/apps/common_providers.tsx @@ -7,7 +7,7 @@ import { AppMountParameters, CoreStart } from '@kbn/core/public'; import React, { FC, PropsWithChildren } from 'react'; -import { EuiThemeProvider } from '@elastic/eui'; +import { EuiThemeProvider } from '@kbn/kibana-react-plugin/common'; import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public'; import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render'; import { Storage } from '@kbn/kibana-utils-plugin/public'; @@ -34,11 +34,10 @@ export const CommonInfraProviders: FC< }> > = ({ children, triggersActionsUI, setHeaderActionMenu, appName, storage, theme$ }) => { const darkMode = useIsDarkMode(); - const colorMode = darkMode ? 'DARK' : 'LIGHT'; return ( - + {children} diff --git a/x-pack/plugins/observability_solution/infra/public/components/autocomplete_field/suggestion_item.tsx b/x-pack/plugins/observability_solution/infra/public/components/autocomplete_field/suggestion_item.tsx index 536263b3b9e07..a0dc1327cbf50 100644 --- a/x-pack/plugins/observability_solution/infra/public/components/autocomplete_field/suggestion_item.tsx +++ b/x-pack/plugins/observability_solution/infra/public/components/autocomplete_field/suggestion_item.tsx @@ -8,7 +8,7 @@ import React from 'react'; import { EuiIcon } from '@elastic/eui'; import styled from '@emotion/styled'; -import { Theme } from '@emotion/react'; +import type { Theme } from '@emotion/react'; import { QuerySuggestion, QuerySuggestionTypes } from '@kbn/unified-search-plugin/public'; import { transparentize } from 'polished'; diff --git a/x-pack/plugins/observability_solution/infra/public/components/fixed_datepicker.tsx b/x-pack/plugins/observability_solution/infra/public/components/fixed_datepicker.tsx index dd5042b447a74..a33550399ae4e 100644 --- a/x-pack/plugins/observability_solution/infra/public/components/fixed_datepicker.tsx +++ b/x-pack/plugins/observability_solution/infra/public/components/fixed_datepicker.tsx @@ -5,11 +5,14 @@ * 2.0. */ -import React from 'react'; import { EuiDatePicker, EuiDatePickerProps } from '@elastic/eui'; -import styled from '@emotion/styled'; +import React from 'react'; +import styled, { type StyledComponent } from '@emotion/styled'; -export const FixedDatePicker = styled( +// 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 FixedDatePicker: StyledComponent = styled( ({ className, inputClassName, diff --git a/x-pack/plugins/observability_solution/infra/public/components/logging/log_statusbar.tsx b/x-pack/plugins/observability_solution/infra/public/components/logging/log_statusbar.tsx index 7277ddaf73fcf..058242259dfde 100644 --- a/x-pack/plugins/observability_solution/infra/public/components/logging/log_statusbar.tsx +++ b/x-pack/plugins/observability_solution/infra/public/components/logging/log_statusbar.tsx @@ -5,18 +5,29 @@ * 2.0. */ -import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; -import styled from '@emotion/styled'; +import { EuiFlexGroup, type EuiFlexGroupProps, EuiFlexItem, useEuiTheme } from '@elastic/eui'; +import { css } from '@emotion/css'; +import React from 'react'; -export const LogStatusbar = styled(EuiFlexGroup)` - padding: ${(props) => props.theme.euiTheme.size.s}; - border-top: ${(props) => props.theme.euiTheme.border.thin}; - max-height: 48px; - min-height: 48px; - background-color: ${(props) => props.theme.euiTheme.colors.emptyShade}; - flex-direction: row; -`; +export const LogStatusbar = (props: EuiFlexGroupProps) => { + const { euiTheme } = useEuiTheme(); -LogStatusbar.defaultProps = { alignItems: 'center', gutterSize: 'none', justifyContent: 'flexEnd' }; + return ( + + ); +}; export const LogStatusbarItem = EuiFlexItem; diff --git a/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/types.ts b/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/types.ts index 240d9ce012789..62a8e01bf6dcf 100644 --- a/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/types.ts +++ b/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/types.ts @@ -7,7 +7,7 @@ import rt from 'io-ts'; import { PropsWithChildren } from 'react'; -import { WithEuiThemeProps } from '@elastic/eui'; +import type { WithEuiThemeProps } from '@elastic/eui'; import { InventoryFormatterTypeRT } from '@kbn/metrics-data-access-plugin/common'; import { MetricsTimeInput } from './hooks/use_metrics_time'; import { NodeDetailsMetricData } from '../../../../common/http_api/node_details_api'; diff --git a/x-pack/plugins/observability_solution/infra/tsconfig.json b/x-pack/plugins/observability_solution/infra/tsconfig.json index 66952247a63e9..8f76c0eac7110 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 theme typing "./emotion.d.ts" ], "kbn_references": [ From 9c2af1bcf01f630aa1dcf4c1123bd0849e814849 Mon Sep 17 00:00:00 2001 From: "miriam.aparicio" Date: Thu, 5 Dec 2024 12:01:03 +0000 Subject: [PATCH 7/9] improvements after eui team review --- .../public/alerting/common/components/threshold.tsx | 2 +- .../metric_threshold/components/expression_row.tsx | 6 +++--- .../components/autocomplete_field/suggestion_item.tsx | 4 ++-- .../infra/public/components/logging/log_statusbar.tsx | 4 ++-- .../public/components/logs_deprecation_callout.tsx | 11 ++++------- .../top_categories/single_metric_comparison.tsx | 8 ++++---- .../inventory_view/components/bottom_drawer.tsx | 2 +- .../inventory_view/components/waffle/group_name.tsx | 4 ++-- .../waffle/metric_control/custom_metric_form.tsx | 2 +- .../components/waffle/waffle_sort_controls.tsx | 2 +- .../metric_detail/components/metadata_details.tsx | 6 ++---- 11 files changed, 23 insertions(+), 28 deletions(-) diff --git a/x-pack/plugins/observability_solution/infra/public/alerting/common/components/threshold.tsx b/x-pack/plugins/observability_solution/infra/public/alerting/common/components/threshold.tsx index c45fff627ae8b..c3e7cb93c44d2 100644 --- a/x-pack/plugins/observability_solution/infra/public/alerting/common/components/threshold.tsx +++ b/x-pack/plugins/observability_solution/infra/public/alerting/common/components/threshold.tsx @@ -42,7 +42,7 @@ export const Threshold = ({ warning, }: Props) => { const { euiTheme } = useEuiTheme(); - const color = euiTheme.colors.danger; + const color = euiTheme.colors.backgroundBaseDanger; return ( props.theme.euiTheme.size.xs}; `; const StyledExpression = styled.div` - padding: 0 4px; + padding: 0 ${(props) => props.theme.euiTheme.size.xs}; `; const StyledHealth = styled(EuiHealth)` - margin-left: 4px; + margin-left: ${(props) => props.theme.euiTheme.size.xs}; `; export const ExpressionRow = ({ diff --git a/x-pack/plugins/observability_solution/infra/public/components/autocomplete_field/suggestion_item.tsx b/x-pack/plugins/observability_solution/infra/public/components/autocomplete_field/suggestion_item.tsx index a0dc1327cbf50..486d41d2c9c93 100644 --- a/x-pack/plugins/observability_solution/infra/public/components/autocomplete_field/suggestion_item.tsx +++ b/x-pack/plugins/observability_solution/infra/public/components/autocomplete_field/suggestion_item.tsx @@ -6,7 +6,7 @@ */ import React from 'react'; -import { EuiIcon } from '@elastic/eui'; +import { EuiIcon, useEuiFontSize } from '@elastic/eui'; import styled from '@emotion/styled'; import type { Theme } from '@emotion/react'; import { QuerySuggestion, QuerySuggestionTypes } from '@kbn/unified-search-plugin/public'; @@ -42,7 +42,7 @@ const SuggestionItemContainer = styled.div<{ }>` display: flex; flex-direction: row; - font-size: ${({ theme }) => theme.euiTheme.size.m}; + font-size: ${() => useEuiFontSize('m').fontSize}; height: ${({ theme }) => theme.euiTheme.size.xl}; white-space: nowrap; background-color: ${(props) => diff --git a/x-pack/plugins/observability_solution/infra/public/components/logging/log_statusbar.tsx b/x-pack/plugins/observability_solution/infra/public/components/logging/log_statusbar.tsx index 058242259dfde..4aa8508f3285f 100644 --- a/x-pack/plugins/observability_solution/infra/public/components/logging/log_statusbar.tsx +++ b/x-pack/plugins/observability_solution/infra/public/components/logging/log_statusbar.tsx @@ -20,8 +20,8 @@ export const LogStatusbar = (props: EuiFlexGroupProps) => { css={css` padding: ${euiTheme.size.s}; border-top: ${euiTheme.border.thin}; - max-height: 48px; - min-height: 48px; + max-height: ${euiTheme.size.xxxl}; + min-height: ${euiTheme.size.xxxl}; background-color: ${euiTheme.colors.emptyShade}; flex-direction: row; `} diff --git a/x-pack/plugins/observability_solution/infra/public/components/logs_deprecation_callout.tsx b/x-pack/plugins/observability_solution/infra/public/components/logs_deprecation_callout.tsx index 756c42214d7c0..959d9a45ace6f 100644 --- a/x-pack/plugins/observability_solution/infra/public/components/logs_deprecation_callout.tsx +++ b/x-pack/plugins/observability_solution/infra/public/components/logs_deprecation_callout.tsx @@ -5,13 +5,12 @@ * 2.0. */ -import { EuiCallOut, useEuiTheme } from '@elastic/eui'; +import { EuiCallOut } from '@elastic/eui'; import React from 'react'; import { i18n } from '@kbn/i18n'; import { EuiButton } from '@elastic/eui'; import { getRouterLinkProps } from '@kbn/router-utils'; import useLocalStorage from 'react-use/lib/useLocalStorage'; -import { css } from '@emotion/css'; import { LocatorPublic } from '@kbn/share-plugin/common'; import { DISCOVER_APP_LOCATOR, DiscoverAppLocatorParams } from '@kbn/discover-plugin/common'; import { useKibanaContextForPlugin } from '../hooks/use_kibana'; @@ -47,8 +46,6 @@ export const LogsDeprecationCallout = ({ page }: LogsDeprecationCalloutProps) => }, } = useKibanaContextForPlugin(); - const { euiTheme } = useEuiTheme(); - const { dismissalStorageKey, message } = pageConfigurations[page]; const [isDismissed, setDismissed] = useLocalStorage(dismissalStorageKey, false); @@ -68,9 +65,9 @@ export const LogsDeprecationCallout = ({ page }: LogsDeprecationCalloutProps) => iconType="iInCircle" heading="h2" onDismiss={() => setDismissed(true)} - className={css` - margin-bottom: ${euiTheme.size.l}; - `} + css={({ euiTheme }) => ({ + marginBottom: euiTheme.size.l, + })} >

{message}

0 && Number.isFinite(changeFactor)) { return ( - - {formatPercentage(changeFactor)} + + {formatPercentage(changeFactor)} ); } else if (changeFactor > 0 && !Number.isFinite(changeFactor)) { return ( - - {newCategoryTrendLabel} + + {newCategoryTrendLabel} ); } diff --git a/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/bottom_drawer.tsx b/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/bottom_drawer.tsx index 2e4413ce91c2f..6ac2c09bc81b9 100644 --- a/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/bottom_drawer.tsx +++ b/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/bottom_drawer.tsx @@ -121,7 +121,7 @@ const BottomActionContainer = styled.div` position: sticky; bottom: 0; left: 0; - background: ${(props) => props.theme.euiTheme.colors.ghost}; + background: ${(props) => props.theme.euiTheme.colors.backgroundBasePlain}; width: calc(100% + ${(props) => props.theme.euiTheme.size.l} * 2); margin-left: -${(props) => props.theme.euiTheme.size.l}; `; // Additional width comes from the padding on the EuiPageBody and inner nodes container diff --git a/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/group_name.tsx b/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/group_name.tsx index ba31487ff29cb..6b93a205f6365 100644 --- a/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/group_name.tsx +++ b/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/group_name.tsx @@ -71,7 +71,7 @@ interface InnerProps { } const Inner = styled.div` - border: 1px solid ${(props) => props.theme.euiTheme.border.color}; + border: ${(props) => props.theme.euiTheme.border.thin}; background-color: ${(props) => props.isChild ? props.theme.euiTheme.colors.lightestShade @@ -94,7 +94,7 @@ const Name = styled.div` const Count = styled.div` flex: 0 0 auto; - border-left: 1px solid ${(props) => props.theme.euiTheme.border.color}; + border-left: ${(props) => props.theme.euiTheme.border.thin}; padding: 6px 10px; font-size: 0.85em; font-weight: normal; diff --git a/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/metric_control/custom_metric_form.tsx b/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/metric_control/custom_metric_form.tsx index b66eca468b482..4d866dd474a23 100644 --- a/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/metric_control/custom_metric_form.tsx +++ b/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/metric_control/custom_metric_form.tsx @@ -161,7 +161,7 @@ export const CustomMetricForm = withEuiTheme(
{children} diff --git a/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/metadata_details.tsx b/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/metadata_details.tsx index c7f3857d21347..0309d2a47bff0 100644 --- a/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/metadata_details.tsx +++ b/x-pack/plugins/observability_solution/infra/public/pages/metrics/metric_detail/components/metadata_details.tsx @@ -166,10 +166,8 @@ export const MetadataDetails = (props: Props) => { }; const MetadataContainer = styled.div` - border-top: ${(props) => props.theme.euiTheme.border.thin} solid - ${(props) => props.theme.euiTheme.border.color}; - border-bottom: ${(props) => props.theme.euiTheme.border.thin} solid - ${(props) => props.theme.euiTheme.border.color}; + border-top: ${(props) => props.theme.euiTheme.border.thin}; + border-bottom: ${(props) => props.theme.euiTheme.border.thin}; padding: ${(props) => props.theme.euiTheme.size.m} 0; margin-bottom: ${(props) => props.theme.euiTheme.size.m}; display: flex; From 0f155cfec94f347d2d21f5ae2225541eacaf9d8f Mon Sep 17 00:00:00 2001 From: "miriam.aparicio" Date: Thu, 5 Dec 2024 14:40:42 +0000 Subject: [PATCH 8/9] fix jest tests --- .../public/alerting/common/components/threshold.test.tsx | 2 +- .../alerting/metric_threshold/components/expression_row.tsx | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/x-pack/plugins/observability_solution/infra/public/alerting/common/components/threshold.test.tsx b/x-pack/plugins/observability_solution/infra/public/alerting/common/components/threshold.test.tsx index 12b6e76fe01cc..32d70920c5a73 100644 --- a/x-pack/plugins/observability_solution/infra/public/alerting/common/components/threshold.test.tsx +++ b/x-pack/plugins/observability_solution/infra/public/alerting/common/components/threshold.test.tsx @@ -64,7 +64,7 @@ describe('Threshold', () => { expect((Metric as jest.Mock).mock.calls[0][0].data[0][0]).toMatchInlineSnapshot(` Object { - "color": "#BD271E", + "color": "#f8e9e9", "extra": Alert when >= 7%
diff --git a/x-pack/plugins/observability_solution/infra/public/alerting/metric_threshold/components/expression_row.tsx b/x-pack/plugins/observability_solution/infra/public/alerting/metric_threshold/components/expression_row.tsx index c07f9e54ed039..fc922aa7297ad 100644 --- a/x-pack/plugins/observability_solution/infra/public/alerting/metric_threshold/components/expression_row.tsx +++ b/x-pack/plugins/observability_solution/infra/public/alerting/metric_threshold/components/expression_row.tsx @@ -47,15 +47,15 @@ interface ExpressionRowProps { } const NegativeHorizontalMarginDiv = styled.div` - margin: 0 -${(props) => props.theme.euiTheme.size.xs}; + margin: 0 -4px; `; const StyledExpression = styled.div` - padding: 0 ${(props) => props.theme.euiTheme.size.xs}; + padding: 0 4px; `; const StyledHealth = styled(EuiHealth)` - margin-left: ${(props) => props.theme.euiTheme.size.xs}; + margin-left: 4px; `; export const ExpressionRow = ({ From 12d44a44c8cc74497b5106587636a988329c9c9d Mon Sep 17 00:00:00 2001 From: "miriam.aparicio" Date: Thu, 5 Dec 2024 17:02:13 +0000 Subject: [PATCH 9/9] fix e2e test --- .../public/components/logs_deprecation_callout.tsx | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/x-pack/plugins/observability_solution/infra/public/components/logs_deprecation_callout.tsx b/x-pack/plugins/observability_solution/infra/public/components/logs_deprecation_callout.tsx index 959d9a45ace6f..756c42214d7c0 100644 --- a/x-pack/plugins/observability_solution/infra/public/components/logs_deprecation_callout.tsx +++ b/x-pack/plugins/observability_solution/infra/public/components/logs_deprecation_callout.tsx @@ -5,12 +5,13 @@ * 2.0. */ -import { EuiCallOut } from '@elastic/eui'; +import { EuiCallOut, useEuiTheme } from '@elastic/eui'; import React from 'react'; import { i18n } from '@kbn/i18n'; import { EuiButton } from '@elastic/eui'; import { getRouterLinkProps } from '@kbn/router-utils'; import useLocalStorage from 'react-use/lib/useLocalStorage'; +import { css } from '@emotion/css'; import { LocatorPublic } from '@kbn/share-plugin/common'; import { DISCOVER_APP_LOCATOR, DiscoverAppLocatorParams } from '@kbn/discover-plugin/common'; import { useKibanaContextForPlugin } from '../hooks/use_kibana'; @@ -46,6 +47,8 @@ export const LogsDeprecationCallout = ({ page }: LogsDeprecationCalloutProps) => }, } = useKibanaContextForPlugin(); + const { euiTheme } = useEuiTheme(); + const { dismissalStorageKey, message } = pageConfigurations[page]; const [isDismissed, setDismissed] = useLocalStorage(dismissalStorageKey, false); @@ -65,9 +68,9 @@ export const LogsDeprecationCallout = ({ page }: LogsDeprecationCalloutProps) => iconType="iInCircle" heading="h2" onDismiss={() => setDismissed(true)} - css={({ euiTheme }) => ({ - marginBottom: euiTheme.size.l, - })} + className={css` + margin-bottom: ${euiTheme.size.l}; + `} >

{message}