maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Strongly typed EUI theme for styled-components (#90106)

Browse source 
* Strongly typed EUI theme for styled-components

use euiStyled

fix tsc issue

* use relative imports

* remove redundant types

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Søren Louv-Jansen 2021-02-09 08:26:36 +01:00 committed by GitHub
parent a997178c0e
commit 451d0819bc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
57 changed files with 177 additions and 177 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
x-pack/plugins/apm/public/application/csmApp.tsx
View file

@ -11,7 +11,8 @@ import { AppMountParameters, CoreStart } from 'kibana/public';
import React from 'react';
import ReactDOM from 'react-dom';
import { Route, Router } from 'react-router-dom';
import styled, { DefaultTheme, ThemeProvider } from 'styled-components';
import { DefaultTheme, ThemeProvider } from 'styled-components';
import { euiStyled } from '../../../../../src/plugins/kibana_react/common';
import {
KibanaContextProvider,
RedirectAppLinks,
@ -30,7 +31,7 @@ import { createCallApmApi } from '../services/rest/createCallApmApi';
import { px, units } from '../style/variables';
import { createStaticIndexPattern } from '../services/rest/index_pattern';
const CsmMainContainer = styled.div`
const CsmMainContainer = euiStyled.div`
padding: ${px(units.plus)};
height: 100%;
`;

5
x-pack/plugins/apm/public/application/index.tsx
View file

@ -12,7 +12,8 @@ import React from 'react';
import ReactDOM from 'react-dom';
import { Route, Router, Switch } from 'react-router-dom';
import 'react-vis/dist/style.css';
import styled, { DefaultTheme, ThemeProvider } from 'styled-components';
import { DefaultTheme, ThemeProvider } from 'styled-components';
import { euiStyled } from '../../../../../src/plugins/kibana_react/common';
import { ConfigSchema } from '../';
import { AppMountParameters, CoreStart } from '../../../../../src/core/public';
import {
@ -35,7 +36,7 @@ import { createStaticIndexPattern } from '../services/rest/index_pattern';
import { setHelpExtension } from '../setHelpExtension';
import { setReadonlyBadge } from '../updateBadge';
const MainContainer = styled.div`
const MainContainer = euiStyled.div`
height: 100%;
`;

6
x-pack/plugins/apm/public/components/app/ErrorGroupDetails/DetailView/index.tsx
View file

@ -20,7 +20,7 @@ import { Location } from 'history';
import { first } from 'lodash';
import React from 'react';
import { useHistory } from 'react-router-dom';
import styled from 'styled-components';
import { euiStyled } from '../../../../../../../../src/plugins/kibana_react/common';
import { APIReturnType } from '../../../../services/rest/createCallApmApi';
import { APMError } from '../../../../../typings/es_schemas/ui/apm_error';
import type { IUrlParams } from '../../../../context/url_params_context/types';
@ -42,14 +42,14 @@ import {
} from './ErrorTabs';
import { ExceptionStacktrace } from './ExceptionStacktrace';
const HeaderContainer = styled.div`
const HeaderContainer = euiStyled.div`
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: ${px(unit)};
`;
const TransactionLinkName = styled.div`
const TransactionLinkName = euiStyled.div`
margin-left: ${px(units.half)};
display: inline-block;
vertical-align: middle;

10
x-pack/plugins/apm/public/components/app/ErrorGroupDetails/index.tsx
View file

@ -19,7 +19,7 @@ import {
import { i18n } from '@kbn/i18n';
import React, { Fragment } from 'react';
import { RouteComponentProps } from 'react-router-dom';
import styled from 'styled-components';
import { euiStyled } from '../../../../../../../src/plugins/kibana_react/common';
import { useTrackPageview } from '../../../../../observability/public';
import { NOT_AVAILABLE_LABEL } from '../../../../common/i18n';
import { useFetcher } from '../../../hooks/use_fetcher';
@ -31,24 +31,24 @@ import { DetailView } from './DetailView';
import { ErrorDistribution } from './Distribution';
import { useErrorGroupDistributionFetcher } from '../../../hooks/use_error_group_distribution_fetcher';
const Titles = styled.div`
const Titles = euiStyled.div`
margin-bottom: ${px(units.plus)};
`;
const Label = styled.div`
const Label = euiStyled.div`
margin-bottom: ${px(units.quarter)};
font-size: ${fontSizes.small};
color: ${({ theme }) => theme.eui.euiColorMediumShade};
`;
const Message = styled.div`
const Message = euiStyled.div`
font-family: ${fontFamilyCode};
font-weight: bold;
font-size: ${fontSizes.large};
margin-bottom: ${px(units.half)};
`;
const Culprit = styled.div`
const Culprit = euiStyled.div`
font-family: ${fontFamilyCode};
`;

4
x-pack/plugins/apm/public/components/app/RumDashboard/LocalUIFilters/Filter/FilterBadgeList.tsx
View file

@ -7,11 +7,11 @@
import React from 'react';
import { EuiFlexGrid, EuiFlexItem, EuiBadge } from '@elastic/eui';
import styled from 'styled-components';
import { i18n } from '@kbn/i18n';
import { euiStyled } from '../../../../../../../../../src/plugins/kibana_react/common';
import { unit, px, truncate } from '../../../../../style/variables';
const BadgeText = styled.div`
const BadgeText = euiStyled.div`
display: inline-block;
${truncate(px(unit * 8))};
vertical-align: middle;

4
x-pack/plugins/apm/public/components/app/RumDashboard/LocalUIFilters/Filter/FilterTitleButton.tsx
View file

@ -7,9 +7,9 @@
import React from 'react';
import { EuiButtonEmpty, EuiTitle } from '@elastic/eui';
import styled from 'styled-components';
import { euiStyled } from '../../../../../../../../../src/plugins/kibana_react/common';
const Button = styled(EuiButtonEmpty).attrs(() => ({
const Button = euiStyled(EuiButtonEmpty).attrs(() => ({
contentProps: {
className: 'alignLeft',
},

12
x-pack/plugins/apm/public/components/app/RumDashboard/LocalUIFilters/Filter/index.tsx
View file

@ -19,12 +19,12 @@ import {
EuiFlexGroup,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import styled from 'styled-components';
import { euiStyled } from '../../../../../../../../../src/plugins/kibana_react/common';
import { FilterBadgeList } from './FilterBadgeList';
import { unit, px } from '../../../../../style/variables';
import { FilterTitleButton } from './FilterTitleButton';
const Popover = styled((EuiPopover as unknown) as FunctionComponent).attrs(
const Popover = euiStyled((EuiPopover as unknown) as FunctionComponent).attrs(
() => ({
anchorClassName: 'anchor',
})
@ -34,22 +34,22 @@ const Popover = styled((EuiPopover as unknown) as FunctionComponent).attrs(
}
`;
const SelectContainer = styled.div`
const SelectContainer = euiStyled.div`
width: ${px(unit * 16)};
`;
const Counter = styled.div`
const Counter = euiStyled.div`
border-radius: ${({ theme }) => theme.eui.euiBorderRadius};
background: ${({ theme }) => theme.eui.euiColorLightShade};
padding: 0 ${({ theme }) => theme.eui.paddingSizes.xs};
`;
const ApplyButton = styled(EuiButton)`
const ApplyButton = euiStyled(EuiButton)`
align-self: flex-end;
`;
// needed for IE11
const FlexItem = styled(EuiFlexItem)`
const FlexItem = euiStyled(EuiFlexItem)`
flex-basis: auto !important;
`;

4
x-pack/plugins/apm/public/components/app/RumDashboard/LocalUIFilters/index.tsx
View file

@ -13,7 +13,7 @@ import {
EuiButtonEmpty,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import styled from 'styled-components';
import { euiStyled } from '../../../../../../../../src/plugins/kibana_react/common';
import { Filter } from './Filter';
import { useLocalUIFilters } from '../hooks/useLocalUIFilters';
import { LocalUIFilterName } from '../../../../../common/ui_filter';
@ -26,7 +26,7 @@ interface Props {
shouldFetch?: boolean;
}
const ButtonWrapper = styled.div`
const ButtonWrapper = euiStyled.div`
display: inline-block;
`;

10
x-pack/plugins/apm/public/components/app/ServiceMap/Controls.tsx
View file

@ -8,7 +8,7 @@
import { EuiButtonIcon, EuiPanel, EuiToolTip } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import React, { useContext, useEffect, useState } from 'react';
import styled from 'styled-components';
import { euiStyled } from '../../../../../../../src/plugins/kibana_react/common';
import { useApmPluginContext } from '../../../context/apm_plugin/use_apm_plugin_context';
import { useTheme } from '../../../hooks/use_theme';
import { useUrlParams } from '../../../context/url_params_context/use_url_params';
@ -17,23 +17,23 @@ import { APMQueryParams } from '../../shared/Links/url_helpers';
import { CytoscapeContext } from './Cytoscape';
import { getAnimationOptions, getNodeHeight } from './cytoscape_options';
const ControlsContainer = styled('div')`
const ControlsContainer = euiStyled('div')`
left: ${({ theme }) => theme.eui.gutterTypes.gutterMedium};
position: absolute;
top: ${({ theme }) => theme.eui.gutterTypes.gutterSmall};
z-index: 1; /* The element containing the cytoscape canvas has z-index = 0. */
`;
const Button = styled(EuiButtonIcon)`
const Button = euiStyled(EuiButtonIcon)`
display: block;
margin: ${({ theme }) => theme.eui.paddingSizes.xs};
`;
const ZoomInButton = styled(Button)`
const ZoomInButton = euiStyled(Button)`
margin-bottom: ${({ theme }) => theme.eui.paddingSizes.s};
`;
const Panel = styled(EuiPanel)`
const Panel = euiStyled(EuiPanel)`
margin-bottom: ${({ theme }) => theme.eui.paddingSizes.s};
`;

4
x-pack/plugins/apm/public/components/app/ServiceMap/EmptyBanner.tsx
View file

@ -8,12 +8,12 @@
import React, { useContext, useEffect, useState } from 'react';
import { EuiCallOut } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import styled from 'styled-components';
import { euiStyled } from '../../../../../../../src/plugins/kibana_react/common';
import { ElasticDocsLink } from '../../shared/Links/ElasticDocsLink';
import { CytoscapeContext } from './Cytoscape';
import { useTheme } from '../../../hooks/use_theme';
const EmptyBannerContainer = styled.div`
const EmptyBannerContainer = euiStyled.div`
margin: ${({ theme }) => theme.eui.gutterTypes.gutterSmall};
/* Add some extra margin so it displays to the right of the controls. */
left: calc(

12
x-pack/plugins/apm/public/components/app/ServiceMap/Popover/AnomalyDetection.tsx
View file

@ -7,7 +7,6 @@
import { i18n } from '@kbn/i18n';
import React from 'react';
import styled from 'styled-components';
import {
EuiFlexGroup,
EuiFlexItem,
@ -15,6 +14,7 @@ import {
EuiIconTip,
EuiHealth,
} from '@elastic/eui';
import { euiStyled } from '../../../../../../../../src/plugins/kibana_react/common';
import {
getServiceHealthStatus,
getServiceHealthStatusColor,
@ -30,28 +30,28 @@ import {
ServiceAnomalyStats,
} from '../../../../../common/anomaly_detection';
const HealthStatusTitle = styled(EuiTitle)`
const HealthStatusTitle = euiStyled(EuiTitle)`
display: inline;
text-transform: uppercase;
`;
const VerticallyCentered = styled.div`
const VerticallyCentered = euiStyled.div`
display: flex;
align-items: center;
`;
const SubduedText = styled.span`
const SubduedText = euiStyled.span`
color: ${({ theme }) => theme.eui.euiTextSubduedColor};
`;
const EnableText = styled.section`
const EnableText = euiStyled.section`
color: ${({ theme }) => theme.eui.euiTextSubduedColor};
line-height: 1.4;
font-size: ${fontSize};
width: ${px(popoverWidth)};
`;
export const ContentLine = styled.section`
export const ContentLine = euiStyled.section`
line-height: 2;
`;

8
x-pack/plugins/apm/public/components/app/ServiceMap/Popover/Info.tsx
View file

@ -13,24 +13,24 @@ import {
import { i18n } from '@kbn/i18n';
import cytoscape from 'cytoscape';
import React, { Fragment } from 'react';
import styled from 'styled-components';
import { euiStyled } from '../../../../../../../../src/plugins/kibana_react/common';
import {
SPAN_SUBTYPE,
SPAN_TYPE,
} from '../../../../../common/elasticsearch_fieldnames';
import { ExternalConnectionNode } from '../../../../../common/service_map';
const ItemRow = styled.div`
const ItemRow = euiStyled.div`
line-height: 2;
`;
const SubduedDescriptionListTitle = styled(EuiDescriptionListTitle)`
const SubduedDescriptionListTitle = euiStyled(EuiDescriptionListTitle)`
&&& {
color: ${({ theme }) => theme.eui.euiTextSubduedColor};
}
`;
const ExternalResourcesList = styled.section`
const ExternalResourcesList = euiStyled.section`
max-height: 360px;
overflow: auto;
`;

8
x-pack/plugins/apm/public/components/app/ServiceMap/Popover/ServiceStatsList.tsx
View file

@ -8,7 +8,7 @@
import { i18n } from '@kbn/i18n';
import { isNumber } from 'lodash';
import React from 'react';
import styled from 'styled-components';
import { euiStyled } from '../../../../../../../../src/plugins/kibana_react/common';
import {
asDuration,
asPercent,
@ -16,16 +16,16 @@ import {
} from '../../../../../common/utils/formatters';
import { ServiceNodeStats } from '../../../../../common/service_map';
export const ItemRow = styled('tr')`
export const ItemRow = euiStyled('tr')`
line-height: 2;
`;
export const ItemTitle = styled('td')`
export const ItemTitle = euiStyled('td')`
color: ${({ theme }) => theme.eui.euiTextSubduedColor};
padding-right: 1rem;
`;
export const ItemDescription = styled('td')`
export const ItemDescription = euiStyled('td')`
text-align: right;
`;

4
x-pack/plugins/apm/public/components/app/ServiceMap/index.tsx
View file

@ -7,7 +7,7 @@
import { EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner } from '@elastic/eui';
import React, { PropsWithChildren, ReactNode } from 'react';
import styled from 'styled-components';
import { euiStyled } from '../../../../../../../src/plugins/kibana_react/common';
import { isActivePlatinumLicense } from '../../../../common/license_check';
import { useTrackPageview } from '../../../../../observability/public';
import {
@ -33,7 +33,7 @@ interface ServiceMapProps {
serviceName?: string;
}
const ServiceMapDatePickerFlexGroup = styled(EuiFlexGroup)`
const ServiceMapDatePickerFlexGroup = euiStyled(EuiFlexGroup)`
padding: ${({ theme }) => theme.eui.euiSizeM};
border-bottom: ${({ theme }) => theme.eui.euiBorderThin};
margin: 0;

4
x-pack/plugins/apm/public/components/app/TraceLink/index.tsx
View file

@ -8,13 +8,13 @@
import { EuiEmptyPrompt } from '@elastic/eui';
import React from 'react';
import { Redirect, RouteComponentProps } from 'react-router-dom';
import styled from 'styled-components';
import { euiStyled } from '../../../../../../../src/plugins/kibana_react/common';
import { FETCH_STATUS, useFetcher } from '../../../hooks/use_fetcher';
import { useUrlParams } from '../../../context/url_params_context/use_url_params';
import { getRedirectToTransactionDetailPageUrl } from './get_redirect_to_transaction_detail_page_url';
import { getRedirectToTracePageUrl } from './get_redirect_to_trace_page_url';
const CentralizedContainer = styled.div`
const CentralizedContainer = euiStyled.div`
height: 100%;
display: flex;
`;

12
x-pack/plugins/apm/public/components/app/error_group_overview/List/index.tsx
View file

@ -9,8 +9,8 @@ import { EuiBadge, EuiToolTip } from '@elastic/eui';
import numeral from '@elastic/numeral';
import { i18n } from '@kbn/i18n';
import React, { useMemo } from 'react';
import styled from 'styled-components';
import { EuiIconTip } from '@elastic/eui';
import { euiStyled } from '../../../../../../../../src/plugins/kibana_react/common';
import { APIReturnType } from '../../../../services/rest/createCallApmApi';
import { NOT_AVAILABLE_LABEL } from '../../../../../common/i18n';
import {
@ -27,25 +27,25 @@ import { TimestampTooltip } from '../../../shared/TimestampTooltip';
import { ErrorOverviewLink } from '../../../shared/Links/apm/ErrorOverviewLink';
import { APMQueryParams } from '../../../shared/Links/url_helpers';
const GroupIdLink = styled(ErrorDetailLink)`
const GroupIdLink = euiStyled(ErrorDetailLink)`
font-family: ${fontFamilyCode};
`;
const MessageAndCulpritCell = styled.div`
const MessageAndCulpritCell = euiStyled.div`
${truncate('100%')};
`;
const ErrorLink = styled(ErrorOverviewLink)`
const ErrorLink = euiStyled(ErrorOverviewLink)`
${truncate('100%')};
`;
const MessageLink = styled(ErrorDetailLink)`
const MessageLink = euiStyled(ErrorDetailLink)`
font-family: ${fontFamilyCode};
font-size: ${fontSizes.large};
${truncate('100%')};
`;
const Culprit = styled.div`
const Culprit = euiStyled.div`
font-family: ${fontFamilyCode};
`;

6
x-pack/plugins/apm/public/components/app/service_inventory/ServiceList/index.tsx
View file

@ -8,11 +8,11 @@
import { EuiFlexItem, EuiFlexGroup, EuiToolTip } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import React, { useMemo } from 'react';
import styled from 'styled-components';
import { ValuesType } from 'utility-types';
import { orderBy } from 'lodash';
import { EuiIcon } from '@elastic/eui';
import { EuiText } from '@elastic/eui';
import { euiStyled } from '../../../../../../../../src/plugins/kibana_react/common';
import {
TRANSACTION_PAGE_LOAD,
TRANSACTION_REQUEST,
@ -46,12 +46,12 @@ function formatString(value?: string | null) {
return value || NOT_AVAILABLE_LABEL;
}
const AppLink = styled(ServiceOrTransactionsOverviewLink)`
const AppLink = euiStyled(ServiceOrTransactionsOverviewLink)`
font-size: ${fontSizes.large};
${truncate('100%')};
`;
const ToolTipWrapper = styled.span`
const ToolTipWrapper = euiStyled.span`
width: 100%;
.apmServiceList__serviceNameTooltip {
width: 100%;

6
x-pack/plugins/apm/public/components/app/service_node_metrics/index.tsx
View file

@ -21,7 +21,7 @@ import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
import React from 'react';
import { RouteComponentProps } from 'react-router-dom';
import styled from 'styled-components';
import { euiStyled } from '../../../../../../../src/plugins/kibana_react/common';
import { SERVICE_NODE_NAME_MISSING } from '../../../../common/service_nodes';
import { ChartPointerEventContextProvider } from '../../../context/chart_pointer_event/chart_pointer_event_context';
import { FETCH_STATUS, useFetcher } from '../../../hooks/use_fetcher';
@ -39,12 +39,12 @@ const INITIAL_DATA = {
containerId: '',
};
const Truncate = styled.span`
const Truncate = euiStyled.span`
display: block;
${truncate(px(unit * 12))}
`;
const MetadataFlexGroup = styled(EuiFlexGroup)`
const MetadataFlexGroup = euiStyled(EuiFlexGroup)`
border-bottom: ${({ theme }) => theme.eui.euiBorderThin};
margin-bottom: ${({ theme }) => theme.eui.paddingSizes.m};
padding: ${({ theme }) =>

4
x-pack/plugins/apm/public/components/app/service_node_overview/index.tsx
View file

@ -7,7 +7,7 @@
import { EuiFlexGroup, EuiPage, EuiPanel, EuiToolTip } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import React from 'react';
import styled from 'styled-components';
import { euiStyled } from '../../../../../../../src/plugins/kibana_react/common';
import { UNIDENTIFIED_SERVICE_NODES_LABEL } from '../../../../common/i18n';
import { SERVICE_NODE_NAME_MISSING } from '../../../../common/service_nodes';
import {
@ -26,7 +26,7 @@ const INITIAL_PAGE_SIZE = 25;
const INITIAL_SORT_FIELD = 'cpu';
const INITIAL_SORT_DIRECTION = 'desc';
const ServiceNodeName = styled.div`
const ServiceNodeName = euiStyled.div`
${truncate(px(8 * unit))}
`;

4
x-pack/plugins/apm/public/components/app/service_overview/service_overview_table_container.tsx
View file

@ -6,7 +6,7 @@
*/
import React, { ReactNode } from 'react';
import styled from 'styled-components';
import { euiStyled } from '../../../../../../../src/plugins/kibana_react/common';
import { useBreakPoints } from '../../../hooks/use_break_points';
/**
@ -24,7 +24,7 @@ const tableHeight = 282;
*
* Hide the empty message when we don't yet have any items and are still loading.
*/
const ServiceOverviewTableContainerDiv = styled.div<{
const ServiceOverviewTableContainerDiv = euiStyled.div<{
isEmptyAndLoading: boolean;
shouldUseMobileLayout: boolean;
}>`

4
x-pack/plugins/apm/public/components/app/trace_overview/TraceList.tsx
View file

@ -8,7 +8,7 @@
import { EuiIcon, EuiToolTip } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import React from 'react';
import styled from 'styled-components';
import { euiStyled } from '../../../../../../../src/plugins/kibana_react/common';
import {
asMillisecondDuration,
asTransactionRate,
@ -23,7 +23,7 @@ import { APIReturnType } from '../../../services/rest/createCallApmApi';
type TraceGroup = APIReturnType<'GET /api/apm/traces'>['items'][0];
const StyledTransactionLink = styled(TransactionDetailLink)`
const StyledTransactionLink = euiStyled(TransactionDetailLink)`
font-size: ${fontSizes.large};
${truncate('100%')};
`;

4
x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/ServiceLegends.tsx
View file

@ -8,12 +8,12 @@
import { EuiTitle } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import React from 'react';
import styled from 'styled-components';
import { euiStyled } from '../../../../../../../../../src/plugins/kibana_react/common';
import { px, unit } from '../../../../../style/variables';
import { Legend } from '../../../../shared/charts/Legend';
import { IServiceColors } from './Waterfall/waterfall_helpers/waterfall_helpers';
const Legends = styled.div`
const Legends = euiStyled.div`
display: flex;
> * {

5
x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/ResponsiveFlyout.tsx
View file

@ -6,10 +6,9 @@
*/
import { EuiFlyout } from '@elastic/eui';
import { euiStyled } from '../../../../../../../../../../src/plugins/kibana_react/common';
import styled from 'styled-components';
export const ResponsiveFlyout = styled(EuiFlyout)`
export const ResponsiveFlyout = euiStyled(EuiFlyout)`
width: 100%;
@media (min-width: 800px) {

4
x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/DatabaseContext.tsx
View file

@ -12,7 +12,7 @@ import React, { Fragment } from 'react';
import sql from 'react-syntax-highlighter/dist/cjs/languages/hljs/sql';
import xcode from 'react-syntax-highlighter/dist/cjs/styles/hljs/xcode';
import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
import styled from 'styled-components';
import { euiStyled } from '../../../../../../../../../../../src/plugins/kibana_react/common';
import { Span } from '../../../../../../../../typings/es_schemas/ui/span';
import {
borderRadius,
@ -26,7 +26,7 @@ import { TruncateHeightSection } from './TruncateHeightSection';
SyntaxHighlighter.registerLanguage('sql', sql);
const DatabaseStatement = styled.div`
const DatabaseStatement = euiStyled.div`
padding: ${px(units.half)} ${px(unit)};
background: ${({ theme }) => tint(0.1, theme.eui.euiColorWarning)};
border-radius: ${borderRadius};

5
x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/HttpContext.tsx
View file

@ -6,9 +6,8 @@
*/
import React, { Fragment } from 'react';
import styled from 'styled-components';
import { EuiSpacer, EuiTitle } from '@elastic/eui';
import { euiStyled } from '../../../../../../../../../../../src/plugins/kibana_react/common';
import {
borderRadius,
fontFamilyCode,
@ -19,7 +18,7 @@ import {
} from '../../../../../../../style/variables';
import { Span } from '../../../../../../../../typings/es_schemas/ui/span';
const ContextUrl = styled.div`
const ContextUrl = euiStyled.div`
padding: ${px(units.half)} ${px(unit)};
background: ${({ theme }) => theme.eui.euiColorLightestShade};
border-radius: ${borderRadius};

4
x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/TruncateHeightSection.tsx
View file

@ -8,10 +8,10 @@
import { EuiIcon, EuiLink } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import React, { Fragment, ReactNode, useEffect, useRef, useState } from 'react';
import styled from 'styled-components';
import { euiStyled } from '../../../../../../../../../../../src/plugins/kibana_react/common';
import { px, units } from '../../../../../../../style/variables';
const ToggleButtonContainer = styled.div`
const ToggleButtonContainer = euiStyled.div`
margin-top: ${px(units.half)};
user-select: none;
`;

8
x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/index.tsx
View file

@ -21,7 +21,7 @@ import {
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import React, { Fragment } from 'react';
import styled from 'styled-components';
import { euiStyled } from '../../../../../../../../../../../src/plugins/kibana_react/common';
import { px, units } from '../../../../../../../style/variables';
import { Summary } from '../../../../../../shared/Summary';
import { TimestampTooltip } from '../../../../../../shared/TimestampTooltip';
@ -72,12 +72,12 @@ function getSpanTypes(span: Span) {
};
}
const SpanBadge = (styled(EuiBadge)`
const SpanBadge = euiStyled(EuiBadge)`
display: inline-block;
margin-right: ${px(units.quarter)};
` as unknown) as typeof EuiBadge;
`;
const HttpInfoContainer = styled('div')`
const HttpInfoContainer = euiStyled('div')`
margin-right: ${px(units.quarter)};
`;

6
x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/SyncBadge.tsx
View file

@ -8,13 +8,13 @@
import { EuiBadge } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import React from 'react';
import styled from 'styled-components';
import { euiStyled } from '../../../../../../../../../../src/plugins/kibana_react/common';
import { px, units } from '../../../../../../style/variables';
const SpanBadge = (styled(EuiBadge)`
const SpanBadge = euiStyled(EuiBadge)`
display: inline-block;
margin-right: ${px(units.quarter)};
` as unknown) as typeof EuiBadge;
`;
interface SyncBadgeProps {
/**

8
x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/WaterfallItem.tsx
View file

@ -6,10 +6,10 @@
*/
import React, { ReactNode } from 'react';
import styled from 'styled-components';
import { EuiIcon, EuiText, EuiTitle, EuiToolTip } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { euiStyled } from '../../../../../../../../../../src/plugins/kibana_react/common';
import { asDuration } from '../../../../../../../common/utils/formatters';
import { isRumAgentName } from '../../../../../../../common/agent_name';
import { px, unit, units } from '../../../../../../style/variables';
@ -33,7 +33,7 @@ interface IBarStyleProps {
color: string;
}
const Container = styled.div<IContainerStyleProps>`
const Container = euiStyled.div<IContainerStyleProps>`
position: relative;
display: block;
user-select: none;
@ -50,7 +50,7 @@ const Container = styled.div<IContainerStyleProps>`
}
`;
const ItemBar = styled.div<IBarStyleProps>`
const ItemBar = euiStyled.div<IBarStyleProps>`
box-sizing: border-box;
position: relative;
height: ${px(unit)};
@ -58,7 +58,7 @@ const ItemBar = styled.div<IBarStyleProps>`
background-color: ${(props) => props.color};
`;
const ItemText = styled.span`
const ItemText = euiStyled.span`
position: absolute;
right: 0;
display: flex;

6
x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/accordion_waterfall.tsx
View file

@ -9,7 +9,7 @@ import { EuiAccordion, EuiAccordionProps } from '@elastic/eui';
import { Location } from 'history';
import { isEmpty } from 'lodash';
import React, { useState } from 'react';
import styled from 'styled-components';
import { euiStyled } from '../../../../../../../../../../src/plugins/kibana_react/common';
import { Margins } from '../../../../../shared/charts/Timeline';
import { WaterfallItem } from './WaterfallItem';
import {
@ -32,7 +32,7 @@ interface AccordionWaterfallProps {
onClickWaterfallItem: (item: IWaterfallItem) => void;
}
const StyledAccordion = styled(EuiAccordion).withConfig({
const StyledAccordion = euiStyled(EuiAccordion).withConfig({
shouldForwardProp: (prop) =>
!['childrenCount', 'marginLeftLevel', 'hasError'].includes(prop),
})<
@ -86,7 +86,7 @@ const StyledAccordion = styled(EuiAccordion).withConfig({
}}
`;
const WaterfallItemContainer = styled.div`
const WaterfallItemContainer = euiStyled.div`
position: absolute;
width: 100%;
left: 0;

6
x-pack/plugins/apm/public/components/app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Waterfall/index.tsx
View file

@ -10,7 +10,7 @@ import { i18n } from '@kbn/i18n';
import { History, Location } from 'history';
import React, { useState } from 'react';
import { useHistory } from 'react-router-dom';
import styled from 'styled-components';
import { euiStyled } from '../../../../../../../../../../src/plugins/kibana_react/common';
import { Timeline } from '../../../../../shared/charts/Timeline';
import { HeightRetainer } from '../../../../../shared/HeightRetainer';
import { fromQuery, toQuery } from '../../../../../shared/Links/url_helpers';
@ -23,7 +23,7 @@ import {
IWaterfallItem,
} from './waterfall_helpers/waterfall_helpers';
const Container = styled.div`
const Container = euiStyled.div`
transition: 0.1s padding ease;
position: relative;
overflow: hidden;
@ -55,7 +55,7 @@ const toggleFlyout = ({
});
};
const WaterfallItemsContainer = styled.div`
const WaterfallItemsContainer = euiStyled.div`
border-bottom: 1px solid ${({ theme }) => theme.eui.euiColorMediumShade};
`;

4
x-pack/plugins/apm/public/components/app/transaction_overview/TransactionList/index.tsx
View file

@ -8,7 +8,7 @@
import { EuiToolTip, EuiIconTip } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import React, { useMemo } from 'react';
import styled from 'styled-components';
import { euiStyled } from '../../../../../../../../src/plugins/kibana_react/common';
import { useUrlParams } from '../../../../context/url_params_context/use_url_params';
import { APIReturnType } from '../../../../services/rest/createCallApmApi';
import {
@ -26,7 +26,7 @@ type TransactionGroup = APIReturnType<'GET /api/apm/services/{serviceName}/trans
// Truncate both the link and the child span (the tooltip anchor.) The link so
// it doesn't overflow, and the anchor so we get the ellipsis.
const TransactionNameLink = styled(TransactionDetailLink)`
const TransactionNameLink = euiStyled(TransactionDetailLink)`
font-family: ${fontFamilyCode};
white-space: nowrap;
${truncate('100%')};

4
x-pack/plugins/apm/public/components/shared/ApmHeader/index.tsx
View file

@ -7,13 +7,13 @@
import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
import React, { ReactNode } from 'react';
import styled from 'styled-components';
import { euiStyled } from '../../../../../../../src/plugins/kibana_react/common';
import { HeaderMenuPortal } from '../../../../../observability/public';
import { ActionMenu } from '../../../application/action_menu';
import { useApmPluginContext } from '../../../context/apm_plugin/use_apm_plugin_context';
import { EnvironmentFilter } from '../EnvironmentFilter';
const HeaderFlexGroup = styled(EuiFlexGroup)`
const HeaderFlexGroup = euiStyled(EuiFlexGroup)`
padding: ${({ theme }) => theme.eui.gutterTypes.gutterMedium};
border-bottom: ${({ theme }) => theme.eui.euiBorderThin};
`;

4
x-pack/plugins/apm/public/components/shared/KeyValueTable/FormattedValue.tsx
View file

@ -7,10 +7,10 @@
import { isBoolean, isNumber, isObject } from 'lodash';
import React from 'react';
import styled from 'styled-components';
import { euiStyled } from '../../../../../../../src/plugins/kibana_react/common';
import { NOT_AVAILABLE_LABEL } from '../../../../common/i18n';
const EmptyValue = styled.span`
const EmptyValue = euiStyled.span`
color: ${({ theme }) => theme.eui.euiColorMediumShade};
text-align: left;
`;

10
x-pack/plugins/apm/public/components/shared/KueryBar/Typeahead/Suggestion.js
View file

@ -7,7 +7,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { euiStyled } from '../../../../../../../../src/plugins/kibana_react/common';
import { EuiIcon } from '@elastic/eui';
import {
fontFamilyCode,
@ -33,7 +33,7 @@ function getIconColor(type, theme) {
}
}
const Description = styled.div`
const Description = euiStyled.div`
color: ${({ theme }) => theme.eui.euiColorDarkShade};
p {
@ -48,7 +48,7 @@ const Description = styled.div`
}
`;
const ListItem = styled.li`
const ListItem = euiStyled.li`
font-size: ${fontSizes.small};
height: ${px(units.double)};
align-items: center;
@ -68,7 +68,7 @@ const ListItem = styled.li`
}
`;
const Icon = styled.div`
const Icon = euiStyled.div`
flex: 0 0 ${px(units.double)};
background: ${({ type, theme }) => tint(0.1, getIconColor(type, theme))};
color: ${({ type, theme }) => getIconColor(type, theme)};
@ -78,7 +78,7 @@ const Icon = styled.div`
line-height: ${px(units.double)};
`;
const TextValue = styled.div`
const TextValue = euiStyled.div`
flex: 0 0 ${px(unit * 16)};
color: ${({ theme }) => theme.eui.euiColorDarkestShade};
padding: 0 ${px(units.half)};

4
x-pack/plugins/apm/public/components/shared/KueryBar/Typeahead/Suggestions.js
View file

@ -7,13 +7,13 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { euiStyled } from '../../../../../../../../src/plugins/kibana_react/common';
import { isEmpty } from 'lodash';
import Suggestion from './Suggestion';
import { units, px, unit } from '../../../../style/variables';
import { tint } from 'polished';
const List = styled.ul`
const List = euiStyled.ul`
width: 100%;
border: 1px solid ${({ theme }) => theme.eui.euiColorLightShade};
border-radius: ${px(units.quarter)};

4
x-pack/plugins/apm/public/components/shared/KueryBar/index.tsx
View file

@ -9,7 +9,7 @@ import { i18n } from '@kbn/i18n';
import { startsWith, uniqueId } from 'lodash';
import React, { useState } from 'react';
import { useHistory, useLocation, useParams } from 'react-router-dom';
import styled from 'styled-components';
import { euiStyled } from '../../../../../../../src/plugins/kibana_react/common';
import {
esKuery,
IIndexPattern,
@ -24,7 +24,7 @@ import { getBoolFilter } from './get_bool_filter';
import { Typeahead } from './Typeahead';
import { useProcessorEvent } from './use_processor_event';
const Container = styled.div`
const Container = euiStyled.div`
margin-bottom: 10px;
`;

10
x-pack/plugins/apm/public/components/shared/Stacktrace/CauseStacktrace.tsx
View file

@ -6,23 +6,23 @@
*/
import React from 'react';
import styled from 'styled-components';
import { i18n } from '@kbn/i18n';
import { EuiAccordion, EuiTitle } from '@elastic/eui';
import { euiStyled } from '../../../../../../../src/plugins/kibana_react/common';
import { px, unit, units } from '../../../style/variables';
import { Stacktrace } from '.';
import { Stackframe } from '../../../../typings/es_schemas/raw/fields/stackframe';
const Accordion = styled(EuiAccordion)`
const Accordion = euiStyled(EuiAccordion)`
border-top: ${({ theme }) => theme.eui.euiBorderThin};
margin-top: ${px(units.half)};
`;
const CausedByContainer = styled('h5')`
const CausedByContainer = euiStyled('h5')`
padding: ${({ theme }) => theme.eui.spacerSizes.s} 0;
`;
const CausedByHeading = styled('span')`
const CausedByHeading = euiStyled('span')`
color: ${({ theme }) => theme.eui.euiTextSubduedColor};
display: block;
font-size: ${({ theme }) => theme.eui.euiFontSizeXS};
@ -30,7 +30,7 @@ const CausedByHeading = styled('span')`
text-transform: uppercase;
`;
const FramesContainer = styled('div')`
const FramesContainer = euiStyled('div')`
padding-left: ${px(unit)};
`;

16
x-pack/plugins/apm/public/components/shared/Stacktrace/Context.tsx
View file

@ -13,7 +13,7 @@ import python from 'react-syntax-highlighter/dist/cjs/languages/hljs/python';
import ruby from 'react-syntax-highlighter/dist/cjs/languages/hljs/ruby';
import xcode from 'react-syntax-highlighter/dist/cjs/styles/hljs/xcode';
import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
import styled from 'styled-components';
import { euiStyled } from '../../../../../../../src/plugins/kibana_react/common';
import { StackframeWithLineContext } from '../../../../typings/es_schemas/raw/fields/stackframe';
import { borderRadius, px, unit, units } from '../../../style/variables';
@ -21,13 +21,13 @@ SyntaxHighlighter.registerLanguage('javascript', javascript);
SyntaxHighlighter.registerLanguage('python', python);
SyntaxHighlighter.registerLanguage('ruby', ruby);
const ContextContainer = styled.div`
const ContextContainer = euiStyled.div`
position: relative;
border-radius: ${borderRadius};
`;
const LINE_HEIGHT = units.eighth * 9;
const LineHighlight = styled.div<{ lineNumber: number }>`
const LineHighlight = euiStyled.div<{ lineNumber: number }>`
position: absolute;
width: 100%;
height: ${px(units.eighth * 9)};
@ -36,7 +36,7 @@ const LineHighlight = styled.div<{ lineNumber: number }>`
background-color: ${({ theme }) => tint(0.1, theme.eui.euiColorWarning)};
`;
const LineNumberContainer = styled.div<{ isLibraryFrame: boolean }>`
const LineNumberContainer = euiStyled.div<{ isLibraryFrame: boolean }>`
position: absolute;
top: 0;
left: 0;
@ -47,7 +47,7 @@ const LineNumberContainer = styled.div<{ isLibraryFrame: boolean }>`
: theme.eui.euiColorLightestShade};
`;
const LineNumber = styled.div<{ highlight: boolean }>`
const LineNumber = euiStyled.div<{ highlight: boolean }>`
position: relative;
min-width: ${px(units.eighth * 21)};
padding-left: ${px(units.half)};
@ -64,7 +64,7 @@ const LineNumber = styled.div<{ highlight: boolean }>`
}
`;
const LineContainer = styled.div`
const LineContainer = euiStyled.div`
overflow: auto;
margin: 0 0 0 ${px(units.eighth * 21)};
padding: 0;
@ -75,7 +75,7 @@ const LineContainer = styled.div`
}
`;
const Line = styled.pre`
const Line = euiStyled.pre`
// Override all styles
margin: 0;
color: inherit;
@ -87,7 +87,7 @@ const Line = styled.pre`
line-height: ${px(LINE_HEIGHT)};
`;
const Code = styled.code`
const Code = euiStyled.code`
position: relative;
padding: 0;
margin: 0;

8
x-pack/plugins/apm/public/components/shared/Stacktrace/FrameHeading.tsx
View file

@ -6,7 +6,7 @@
*/
import React, { ComponentType } from 'react';
import styled from 'styled-components';
import { euiStyled } from '../../../../../../../src/plugins/kibana_react/common';
import { Stackframe } from '../../../../typings/es_schemas/raw/fields/stackframe';
import { fontFamilyCode, fontSize, px, units } from '../../../style/variables';
import {
@ -18,7 +18,7 @@ import {
RubyFrameHeadingRenderer,
} from './frame_heading_renderers';
const FileDetails = styled.div`
const FileDetails = euiStyled.div`
color: ${({ theme }) => theme.eui.euiColorDarkShade};
line-height: 1.5; /* matches the line-hight of the accordion container button */
padding: ${px(units.eighth)} 0;
@ -26,12 +26,12 @@ const FileDetails = styled.div`
font-size: ${fontSize};
`;
const LibraryFrameFileDetail = styled.span`
const LibraryFrameFileDetail = euiStyled.span`
color: ${({ theme }) => theme.eui.euiColorDarkShade};
word-break: break-word;
`;
const AppFrameFileDetail = styled.span`
const AppFrameFileDetail = euiStyled.span`
color: ${({ theme }) => theme.eui.euiColorFullShade};
word-break: break-word;
`;

4
x-pack/plugins/apm/public/components/shared/Stacktrace/LibraryStacktrace.tsx
View file

@ -8,12 +8,12 @@
import { EuiAccordion } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import React from 'react';
import styled from 'styled-components';
import { euiStyled } from '../../../../../../../src/plugins/kibana_react/common';
import { Stackframe } from '../../../../typings/es_schemas/raw/fields/stackframe';
import { px, units } from '../../../style/variables';
import { Stackframe as StackframeComponent } from './Stackframe';
const LibraryStacktraceAccordion = styled(EuiAccordion)`
const LibraryStacktraceAccordion = euiStyled(EuiAccordion)`
margin: ${px(units.quarter)} 0;
`;

6
x-pack/plugins/apm/public/components/shared/Stacktrace/Stackframe.tsx
View file

@ -7,7 +7,7 @@
import { EuiAccordion } from '@elastic/eui';
import React from 'react';
import styled from 'styled-components';
import { euiStyled } from '../../../../../../../src/plugins/kibana_react/common';
import {
Stackframe as StackframeType,
StackframeWithLineContext,
@ -22,7 +22,7 @@ import { FrameHeading } from './FrameHeading';
import { Variables } from './Variables';
import { px, units } from '../../../style/variables';
const ContextContainer = styled.div<{ isLibraryFrame: boolean }>`
const ContextContainer = euiStyled.div<{ isLibraryFrame: boolean }>`
position: relative;
font-family: ${fontFamilyCode};
font-size: ${fontSize};
@ -35,7 +35,7 @@ const ContextContainer = styled.div<{ isLibraryFrame: boolean }>`
`;
// Indent the non-context frames the same amount as the accordion control
const NoContextFrameHeadingWrapper = styled.div`
const NoContextFrameHeadingWrapper = euiStyled.div`
margin-left: ${px(units.unit + units.half + units.quarter)};
`;

4
x-pack/plugins/apm/public/components/shared/Stacktrace/Variables.tsx
View file

@ -5,16 +5,16 @@
* 2.0.
*/
import styled from 'styled-components';
import { EuiAccordion } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import React from 'react';
import { euiStyled } from '../../../../../../../src/plugins/kibana_react/common';
import { borderRadius, px, unit, units } from '../../../style/variables';
import { Stackframe } from '../../../../typings/es_schemas/raw/fields/stackframe';
import { KeyValueTable } from '../KeyValueTable';
import { flattenObject } from '../../../utils/flattenObject';
const VariablesContainer = styled.div`
const VariablesContainer = euiStyled.div`
background: ${({ theme }) => theme.eui.euiColorEmptyShade};
border-radius: 0 0 ${borderRadius} ${borderRadius};
padding: ${px(units.half)} ${px(unit)};

10
x-pack/plugins/apm/public/components/shared/StickyProperties/index.tsx
View file

@ -8,7 +8,7 @@
import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
import { EuiToolTip } from '@elastic/eui';
import React from 'react';
import styled from 'styled-components';
import { euiStyled } from '../../../../../../../src/plugins/kibana_react/common';
import {
fontFamilyCode,
fontSizes,
@ -25,11 +25,11 @@ export interface IStickyProperty {
truncated?: boolean;
}
const TooltipFieldName = styled.span`
const TooltipFieldName = euiStyled.span`
font-family: ${fontFamilyCode};
`;
const PropertyLabel = styled.div`
const PropertyLabel = euiStyled.div`
margin-bottom: ${px(units.half)};
font-size: ${fontSizes.small};
color: ${({ theme }) => theme.eui.euiColorMediumShade};
@ -41,13 +41,13 @@ const PropertyLabel = styled.div`
PropertyLabel.displayName = 'PropertyLabel';
const propertyValueLineHeight = 1.2;
const PropertyValue = styled.div`
const PropertyValue = euiStyled.div`
display: inline-block;
line-height: ${propertyValueLineHeight};
`;
PropertyValue.displayName = 'PropertyValue';
const PropertyValueTruncated = styled.span`
const PropertyValueTruncated = euiStyled.span`
display: inline-block;
line-height: ${propertyValueLineHeight};
${truncate('100%')};

6
x-pack/plugins/apm/public/components/shared/Summary/ErrorCountSummaryItemBadge.tsx
View file

@ -7,8 +7,8 @@
import React from 'react';
import { i18n } from '@kbn/i18n';
import styled from 'styled-components';
import { EuiBadge } from '@elastic/eui';
import { euiStyled } from '../../../../../../../src/plugins/kibana_react/common';
import { useTheme } from '../../../hooks/use_theme';
import { px } from '../../../../public/style/variables';
import { units } from '../../../style/variables';
@ -17,9 +17,9 @@ interface Props {
count: number;
}
const Badge = (styled(EuiBadge)`
const Badge = euiStyled(EuiBadge)`
margin-top: ${px(units.eighth)};
` as unknown) as typeof EuiBadge;
`;
export function ErrorCountSummaryItemBadge({ count }: Props) {
const theme = useTheme();

10
x-pack/plugins/apm/public/components/shared/Summary/HttpInfoSummaryItem/index.tsx
View file

@ -8,15 +8,15 @@
import React from 'react';
import { EuiToolTip, EuiBadge } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import styled from 'styled-components';
import { euiStyled } from '../../../../../../../../src/plugins/kibana_react/common';
import { units, px, truncate, unit } from '../../../../style/variables';
import { HttpStatusBadge } from '../HttpStatusBadge';
const HttpInfoBadge = (styled(EuiBadge)`
const HttpInfoBadge = euiStyled(EuiBadge)`
margin-right: ${px(units.quarter)};
` as unknown) as typeof EuiBadge;
`;
const Url = styled('span')`
const Url = euiStyled('span')`
display: inline-block;
vertical-align: bottom;
${truncate(px(unit * 24))};
@ -27,7 +27,7 @@ interface HttpInfoProps {
url: string;
}
const Span = styled('span')`
const Span = euiStyled('span')`
white-space: nowrap;
`;

4
x-pack/plugins/apm/public/components/shared/Summary/UserAgentSummaryItem.tsx
View file

@ -6,14 +6,14 @@
*/
import React from 'react';
import styled from 'styled-components';
import { EuiToolTip } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { euiStyled } from '../../../../../../../src/plugins/kibana_react/common';
import { UserAgent } from '../../../../typings/es_schemas/raw/fields/user_agent';
type UserAgentSummaryItemProps = UserAgent;
const Version = styled('span')`
const Version = euiStyled('span')`
font-size: ${({ theme }) => theme.eui.euiFontSizeS};
`;

4
x-pack/plugins/apm/public/components/shared/Summary/index.tsx
View file

@ -7,7 +7,7 @@
import React from 'react';
import { EuiFlexGrid, EuiFlexItem } from '@elastic/eui';
import styled from 'styled-components';
import { euiStyled } from '../../../../../../../src/plugins/kibana_react/common';
import { px, units } from '../../../../public/style/variables';
import { Maybe } from '../../../../typings/common';
@ -15,7 +15,7 @@ interface Props {
items: Array<Maybe<React.ReactElement>>;
}
const Item = styled(EuiFlexItem)`
const Item = euiStyled(EuiFlexItem)`
flex-wrap: nowrap;
border-right: 1px solid ${({ theme }) => theme.eui.euiColorLightShade};
padding-right: ${px(units.half)};

6
x-pack/plugins/apm/public/components/shared/charts/Legend/index.tsx
View file

@ -6,7 +6,7 @@
*/
import React from 'react';
import styled from 'styled-components';
import { euiStyled } from '../../../../../../../../src/plugins/kibana_react/common';
import { useTheme } from '../../../../hooks/use_theme';
import { fontSizes, px, units } from '../../../../style/variables';
@ -22,7 +22,7 @@ interface ContainerProps {
disabled: boolean;
}
const Container = styled.div<ContainerProps>`
const Container = euiStyled.div<ContainerProps>`
display: flex;
align-items: center;
font-size: ${(props) => props.fontSize};
@ -39,7 +39,7 @@ interface IndicatorProps {
withMargin: boolean;
}
export const Indicator = styled.span<IndicatorProps>`
export const Indicator = euiStyled.span<IndicatorProps>`
width: ${(props) => px(props.radius)};
height: ${(props) => px(props.radius)};
margin-right: ${(props) => (props.withMargin ? px(props.radius / 2) : 0)};

6
x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/AgentMarker.tsx
View file

@ -7,19 +7,19 @@
import React from 'react';
import { EuiToolTip } from '@elastic/eui';
import styled from 'styled-components';
import { euiStyled } from '../../../../../../../../../src/plugins/kibana_react/common';
import { asDuration } from '../../../../../../common/utils/formatters';
import { useTheme } from '../../../../../hooks/use_theme';
import { px, units } from '../../../../../style/variables';
import { Legend } from '../../Legend';
import { AgentMark } from '../../../../app/transaction_details/WaterfallWithSummmary/WaterfallContainer/Marks/get_agent_marks';
const NameContainer = styled.div`
const NameContainer = euiStyled.div`
border-bottom: 1px solid ${({ theme }) => theme.eui.euiColorMediumShade};
padding-bottom: ${px(units.half)};
`;
const TimeContainer = styled.div`
const TimeContainer = euiStyled.div`
color: ${({ theme }) => theme.eui.euiColorMediumShade};
padding-top: ${px(units.half)};
`;

10
x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/ErrorMarker.tsx
View file

@ -7,7 +7,7 @@
import React, { useState } from 'react';
import { EuiPopover, EuiText } from '@elastic/eui';
import styled from 'styled-components';
import { euiStyled } from '../../../../../../../../../src/plugins/kibana_react/common';
import { asDuration } from '../../../../../../common/utils/formatters';
import { useTheme } from '../../../../../hooks/use_theme';
import {
@ -24,21 +24,21 @@ interface Props {
mark: ErrorMark;
}
const Popover = styled.div`
const Popover = euiStyled.div`
max-width: ${px(280)};
`;
const TimeLegend = styled(Legend)`
const TimeLegend = euiStyled(Legend)`
margin-bottom: ${px(unit)};
`;
const ErrorLink = styled(ErrorDetailLink)`
const ErrorLink = euiStyled(ErrorDetailLink)`
display: block;
margin: ${px(units.half)} 0 ${px(units.half)} 0;
overflow-wrap: break-word;
`;
const Button = styled(Legend)`
const Button = euiStyled(Legend)`
height: 20px;
display: flex;
align-items: flex-end;

4
x-pack/plugins/apm/public/components/shared/charts/Timeline/Marker/index.tsx
View file

@ -6,7 +6,7 @@
*/
import React from 'react';
import styled from 'styled-components';
import { euiStyled } from '../../../../../../../../../src/plugins/kibana_react/common';
import { px } from '../../../../../style/variables';
import { AgentMarker } from './AgentMarker';
import { ErrorMarker } from './ErrorMarker';
@ -18,7 +18,7 @@ interface Props {
x: number;
}
const MarkerContainer = styled.div`
const MarkerContainer = euiStyled.div`
position: absolute;
bottom: 0;
`;

6
x-pack/plugins/apm/public/components/shared/charts/transaction_charts/ml_header.tsx
View file

@ -10,7 +10,7 @@ import { i18n } from '@kbn/i18n';
import { isEmpty } from 'lodash';
import React from 'react';
import { useParams } from 'react-router-dom';
import styled from 'styled-components';
import { euiStyled } from '../../../../../../../../src/plugins/kibana_react/common';
import { useApmServiceContext } from '../../../../context/apm_service/use_apm_service_context';
import { useUrlParams } from '../../../../context/url_params_context/use_url_params';
import { MLSingleMetricLink } from '../../Links/MachineLearningLinks/MLSingleMetricLink';
@ -20,14 +20,14 @@ interface Props {
mlJobId?: string;
}
const ShiftedIconWrapper = styled.span`
const ShiftedIconWrapper = euiStyled.span`
padding-right: 5px;
position: relative;
top: -1px;
display: inline-block;
`;
const ShiftedEuiText = styled(EuiText)`
const ShiftedEuiText = euiStyled(EuiText)`
position: relative;
top: 5px;
`;

4
x-pack/plugins/apm/public/components/shared/main_tabs.tsx
View file

@ -7,12 +7,12 @@
import { EuiTabs } from '@elastic/eui';
import React, { ReactNode } from 'react';
import styled from 'styled-components';
import { euiStyled } from '../../../../../../src/plugins/kibana_react/common';
// Since our `EuiTab` components have `APMLink`s inside of them and not just
// `href`s, we need to override the color of the links inside or they will all
// be the primary color.
const StyledTabs = styled(EuiTabs)`
const StyledTabs = euiStyled(EuiTabs)`
padding: ${({ theme }) => `${theme.eui.gutterTypes.gutterMedium}`};
border-bottom: ${({ theme }) => theme.eui.euiBorderThin};
`;

4
x-pack/plugins/apm/public/components/shared/search_bar.tsx
View file

@ -7,14 +7,14 @@
import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
import React from 'react';
import styled from 'styled-components';
import { euiStyled } from '../../../../../../src/plugins/kibana_react/common';
import { px, unit } from '../../style/variables';
import { DatePicker } from './DatePicker';
import { KueryBar } from './KueryBar';
import { TimeComparison } from './time_comparison';
import { useBreakPoints } from '../../hooks/use_break_points';
const SearchBarFlexGroup = styled(EuiFlexGroup)`
const SearchBarFlexGroup = euiStyled(EuiFlexGroup)`
margin: ${({ theme }) =>
`${theme.eui.euiSizeS} ${theme.eui.euiSizeS} -${theme.eui.gutterTypes.gutterMedium} ${theme.eui.euiSizeS}`};
`;

4
x-pack/plugins/apm/public/components/shared/time_comparison/index.tsx
View file

@ -10,14 +10,14 @@ import { i18n } from '@kbn/i18n';
import moment from 'moment';
import React from 'react';
import { useHistory } from 'react-router-dom';
import styled from 'styled-components';
import { euiStyled } from '../../../../../../../src/plugins/kibana_react/common';
import { getDateDifference } from '../../../../common/utils/formatters';
import { useUrlParams } from '../../../context/url_params_context/use_url_params';
import { px, unit } from '../../../style/variables';
import * as urlHelpers from '../../shared/Links/url_helpers';
import { useBreakPoints } from '../../../hooks/use_break_points';
const PrependContainer = styled.div`
const PrependContainer = euiStyled.div`
display: flex;
justify-content: center;
align-items: center;

6
x-pack/plugins/apm/public/components/shared/truncate_with_tooltip/index.tsx
View file

@ -7,12 +7,12 @@
import { EuiToolTip } from '@elastic/eui';
import React from 'react';
import styled from 'styled-components';
import { euiStyled } from '../../../../../../../src/plugins/kibana_react/common';
import { truncate } from '../../../style/variables';
const tooltipAnchorClassname = '_apm_truncate_tooltip_anchor_';
const TooltipWrapper = styled.div`
const TooltipWrapper = euiStyled.div`
width: 100%;
.${tooltipAnchorClassname} {
width: 100% !important;
@ -20,7 +20,7 @@ const TooltipWrapper = styled.div`
}
`;
const ContentWrapper = styled.div`
const ContentWrapper = euiStyled.div`
${truncate('100%')}
`;