diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/new_index/new_search_index_template.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/new_index/new_search_index_template.tsx index 211738b43f25d..076b47c82693a 100644 --- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/new_index/new_search_index_template.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/new_index/new_search_index_template.tsx @@ -154,7 +154,11 @@ export const NewSearchIndexTemplate: React.FC = ({ optionally set a default {language_analyzer} for the index." values={{ language_analyzer: ( - + {i18n.translate( 'xpack.enterpriseSearch.content.newIndex.newSearchIndexTemplate.formDescription.linkText', { @@ -247,6 +251,7 @@ export const NewSearchIndexTemplate: React.FC = ({ )} > = ({ - + {i18n.translate( 'xpack.enterpriseSearch.content.newIndex.newSearchIndexTemplate.learnMoreIndices.linkText', { @@ -273,7 +282,11 @@ export const NewSearchIndexTemplate: React.FC = ({ {type === INGESTION_METHOD_IDS.CONNECTOR && ( - + {i18n.translate( 'xpack.enterpriseSearch.content.newIndex.newSearchIndexTemplate.learnMoreConnectors.linkText', { @@ -285,7 +298,11 @@ export const NewSearchIndexTemplate: React.FC = ({ )} {type === INGESTION_METHOD_IDS.CRAWLER && ( - + {i18n.translate( 'xpack.enterpriseSearch.content.newIndex.newSearchIndexTemplate.learnMoreCrawler.linkText', { @@ -297,7 +314,11 @@ export const NewSearchIndexTemplate: React.FC = ({ )} {type === INGESTION_METHOD_IDS.API && ( - + {i18n.translate( 'xpack.enterpriseSearch.content.newIndex.newSearchIndexTemplate.learnMoreApis.linkText', { @@ -312,6 +333,7 @@ export const NewSearchIndexTemplate: React.FC = ({ history.back()} 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..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 @@ -7,13 +7,13 @@ import React from 'react'; import { Chart, Metric, Settings } from '@elastic/charts'; -import { EuiIcon, EuiPanel, useEuiBackgroundColor } 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'; export interface ChartProps { - theme?: PartialTheme; + theme?: UseEuiTheme<{}>; baseTheme: Theme; } @@ -41,7 +41,8 @@ export const Threshold = ({ valueFormatter, warning, }: Props) => { - const color = useEuiBackgroundColor('danger'); + const { euiTheme } = useEuiTheme(); + const color = euiTheme.colors.backgroundBaseDanger; 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/asset_details/tabs/processes/processes_table.tsx b/x-pack/plugins/observability_solution/infra/public/components/asset_details/tabs/processes/processes_table.tsx index 6d432910c20b3..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/autocomplete_field.tsx b/x-pack/plugins/observability_solution/infra/public/components/autocomplete_field/autocomplete_field.tsx index 657db92072275..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 @@ -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.levels.maskBelowHeader}; 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..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,8 +6,9 @@ */ import React from 'react'; -import { EuiIcon } from '@elastic/eui'; -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +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'; 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: ${() => useEuiFontSize('m').fontSize}; + 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..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,22 +6,14 @@ */ 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 = 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.euiTheme.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..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 @@ -6,17 +6,13 @@ */ 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 React from 'react'; +import styled, { type StyledComponent } 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 FixedDatePicker: StyledComponent< - FunctionComponent, - EuiTheme -> = euiStyled( +export const FixedDatePicker: StyledComponent = 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.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_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..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 @@ -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.colorMode === 'DARK' + ? 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..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 @@ -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.colorMode === 'DARK' + ? 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..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 @@ -7,8 +7,8 @@ import { scaleTime } from 'd3-scale'; import * as React from 'react'; - -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +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'; @@ -59,19 +59,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: ${() => useEuiFontSize('s').lineHeight}; + 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.colorMode === 'DARK' + ? 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..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 @@ -5,21 +5,29 @@ * 2.0. */ -import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; +import { EuiFlexGroup, type EuiFlexGroupProps, EuiFlexItem, useEuiTheme } from '@elastic/eui'; +import { css } from '@emotion/css'; +import React from 'react'; -import { euiStyled } from '@kbn/kibana-react-plugin/common'; +export const LogStatusbar = (props: EuiFlexGroupProps) => { + const { euiTheme } = useEuiTheme(); -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}; - max-height: 48px; - min-height: 48px; - background-color: ${(props) => props.theme.eui.euiColorEmptyShade}; - flex-direction: row; -`; + return ( + + ); +}; export const LogStatusbarItem = EuiFlexItem; 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/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..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 @@ -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.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 -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..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 @@ -5,52 +5,58 @@ * 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 c2493df3a3968..d012aeb532491 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, @@ -196,11 +196,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..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 @@ -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.body}; + 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..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 @@ -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.border.color}; 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..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 @@ -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,19 +70,21 @@ interface InnerProps { isChild?: boolean; } -const Inner = euiStyled.div` - border: 1px solid ${(props) => props.theme.eui.euiBorderColor}; +const Inner = styled.div` + border: ${(props) => props.theme.euiTheme.border.thin}; 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}; + box-shadow: 0px 2px 0px 0px ${(props) => props.theme.euiTheme.border.color}; display: flex; align-items: center; justify-content: center; overflow: hidden; `; -const Name = euiStyled.div` +const Name = styled.div` flex: 1 1 auto; padding: 6px 10px; overflow: hidden; @@ -91,9 +92,9 @@ 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}; + 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/group_of_groups.tsx b/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/group_of_groups.tsx index 8ffe5f0929ffe..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 @@ -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.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 ac5e7c1c09194..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 @@ -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.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/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..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 @@ -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/metric_control/metrics_edit_mode.tsx b/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/metric_control/metrics_edit_mode.tsx index fddd37e2b2803..afff11a467b27 100644 --- a/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/metric_control/metrics_edit_mode.tsx +++ b/x-pack/plugins/observability_solution/infra/public/pages/metrics/inventory_view/components/waffle/metric_control/metrics_edit_mode.tsx @@ -6,28 +6,35 @@ */ import React from 'react'; -import { EuiFlexItem, EuiFlexGroup, EuiButtonIcon } from '@elastic/eui'; +import { + EuiFlexItem, + EuiFlexGroup, + EuiButtonIcon, + withEuiTheme, + type WithEuiThemeProps, +} from '@elastic/eui'; import { i18n } from '@kbn/i18n'; -import { EuiTheme, withTheme } from '@kbn/kibana-react-plugin/common'; import { getCustomMetricLabel } from '../../../../../../../common/formatters/get_custom_metric_label'; import { SnapshotCustomMetricInput } from '../../../../../../../common/http_api/snapshot_api'; interface Props { - theme: EuiTheme | undefined; customMetrics: SnapshotCustomMetricInput[]; options: Array<{ text: string; value: string }>; 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 }) => (
{ ); }; -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..a2ec9dcccfe56 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/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/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..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 @@ -6,10 +6,10 @@ */ 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 { 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 +165,16 @@ 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}; + 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; `; -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..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 { EuiTheme } from '@kbn/kibana-react-plugin/common'; +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'; @@ -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 f927926a00df6..dd3e56903ea5d 100644 --- a/x-pack/plugins/observability_solution/infra/tsconfig.json +++ b/x-pack/plugins/observability_solution/infra/tsconfig.json @@ -8,7 +8,8 @@ "common/**/*", "public/**/*", "server/**/*", - "types/**/*" + "types/**/*", + "./emotion.d.ts" ], "kbn_references": [ "@kbn/core", @@ -65,7 +66,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', })}