[Infra UI] Add and use typed styled-components theme provider (#33607)
This adds a specialization of the styled-components api, which is correctly typed according to the new theme variable type definitions included in EUI (elastic/eui#1750) and made available in Kibana via #33873.
This commit is contained in:
parent
77520b00b6
commit
d62513657f
|
@ -0,0 +1,43 @@
|
|||
/*
|
||||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
||||
* or more contributor license agreements. Licensed under the Elastic License;
|
||||
* you may not use this file except in compliance with the Elastic License.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import * as styledComponents from 'styled-components';
|
||||
import { ThemedStyledComponentsModule, ThemeProvider, ThemeProviderProps } from 'styled-components';
|
||||
|
||||
import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
|
||||
import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
|
||||
|
||||
export interface EuiTheme {
|
||||
eui: typeof euiLightVars | typeof euiDarkVars;
|
||||
darkMode: boolean;
|
||||
}
|
||||
|
||||
const EuiThemeProvider = <T extends any>({
|
||||
darkMode = false,
|
||||
...otherProps
|
||||
}: ThemeProviderProps<T & EuiTheme> & {
|
||||
darkMode?: boolean;
|
||||
children?: React.ReactNode;
|
||||
}) => (
|
||||
<ThemeProvider
|
||||
{...otherProps}
|
||||
theme={() => ({
|
||||
eui: darkMode ? euiDarkVars : euiLightVars,
|
||||
darkMode,
|
||||
})}
|
||||
/>
|
||||
);
|
||||
|
||||
const {
|
||||
default: euiStyled,
|
||||
css,
|
||||
injectGlobal,
|
||||
keyframes,
|
||||
withTheme,
|
||||
} = styledComponents as ThemedStyledComponentsModule<EuiTheme>;
|
||||
|
||||
export { css, euiStyled, EuiThemeProvider, injectGlobal, keyframes, withTheme };
|
19
x-pack/common/eui_styled_components/index.ts
Normal file
19
x-pack/common/eui_styled_components/index.ts
Normal file
|
@ -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;
|
||||
* you may not use this file except in compliance with the Elastic License.
|
||||
*/
|
||||
|
||||
import {
|
||||
css,
|
||||
euiStyled,
|
||||
EuiTheme,
|
||||
EuiThemeProvider,
|
||||
injectGlobal,
|
||||
keyframes,
|
||||
withTheme,
|
||||
} from './eui_styled_components';
|
||||
|
||||
export { css, euiStyled, EuiTheme, EuiThemeProvider, injectGlobal, keyframes, withTheme };
|
||||
// tslint:disable-next-line:no-default-export to mimick the styled-components module
|
||||
export default euiStyled;
|
|
@ -11,13 +11,11 @@ import { ApolloProvider } from 'react-apollo';
|
|||
import { Provider as ReduxStoreProvider } from 'react-redux';
|
||||
import { BehaviorSubject } from 'rxjs';
|
||||
import { pluck } from 'rxjs/operators';
|
||||
import { ThemeProvider } from 'styled-components';
|
||||
|
||||
// TODO use theme provided from parentApp when kibana supports it
|
||||
import { EuiErrorBoundary } from '@elastic/eui';
|
||||
import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
|
||||
import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
|
||||
import { I18nContext } from 'ui/i18n';
|
||||
import { EuiThemeProvider } from '../../../../common/eui_styled_components';
|
||||
import { InfraFrontendLibs } from '../lib/lib';
|
||||
import { PageRouter } from '../routes';
|
||||
import { createStore } from '../store';
|
||||
|
@ -39,14 +37,9 @@ export async function startApp(libs: InfraFrontendLibs) {
|
|||
<ReduxStoreProvider store={store}>
|
||||
<ApolloProvider client={libs.apolloClient}>
|
||||
<ApolloClientContext.Provider value={libs.apolloClient}>
|
||||
<ThemeProvider
|
||||
theme={() => ({
|
||||
eui: libs.framework.darkMode ? euiDarkVars : euiLightVars,
|
||||
darkMode: libs.framework.darkMode,
|
||||
})}
|
||||
>
|
||||
<EuiThemeProvider darkMode={libs.framework.darkMode}>
|
||||
<PageRouter history={history} />
|
||||
</ThemeProvider>
|
||||
</EuiThemeProvider>
|
||||
</ApolloClientContext.Provider>
|
||||
</ApolloProvider>
|
||||
</ReduxStoreProvider>
|
||||
|
|
|
@ -11,10 +11,10 @@ import {
|
|||
EuiPanel,
|
||||
} from '@elastic/eui';
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import { AutocompleteSuggestion } from 'ui/autocomplete_providers';
|
||||
|
||||
import euiStyled from '../../../../../common/eui_styled_components';
|
||||
import { composeStateUpdaters } from '../../utils/typed_react';
|
||||
import { SuggestionItem } from './suggestion_item';
|
||||
|
||||
|
@ -296,11 +296,11 @@ const FixedEuiFieldSearch: React.SFC<
|
|||
}
|
||||
> = EuiFieldSearch as any;
|
||||
|
||||
const AutocompleteContainer = styled.div`
|
||||
const AutocompleteContainer = euiStyled.div`
|
||||
position: relative;
|
||||
`;
|
||||
|
||||
const SuggestionsPanel = styled(EuiPanel).attrs({
|
||||
const SuggestionsPanel = euiStyled(EuiPanel).attrs({
|
||||
paddingSize: 'none',
|
||||
hasShadow: true,
|
||||
})`
|
||||
|
|
|
@ -7,9 +7,9 @@
|
|||
import { EuiIcon } from '@elastic/eui';
|
||||
import { transparentize } from 'polished';
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import { AutocompleteSuggestion } from 'ui/autocomplete_providers';
|
||||
import euiStyled from '../../../../../common/eui_styled_components';
|
||||
|
||||
interface SuggestionItemProps {
|
||||
isSelected?: boolean;
|
||||
|
@ -42,25 +42,25 @@ export class SuggestionItem extends React.Component<SuggestionItemProps> {
|
|||
}
|
||||
}
|
||||
|
||||
const SuggestionItemContainer = styled.div<{
|
||||
const SuggestionItemContainer = euiStyled.div<{
|
||||
isSelected?: boolean;
|
||||
}>`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
font-size: ${props => props.theme.eui.euiFontSizeS};
|
||||
height: ${props => props.theme.eui.euiSizeXl};
|
||||
height: ${props => props.theme.eui.euiSizeXL};
|
||||
white-space: nowrap;
|
||||
background-color: ${props =>
|
||||
props.isSelected ? props.theme.eui.euiColorLightestShade : 'transparent'};
|
||||
`;
|
||||
|
||||
const SuggestionItemField = styled.div`
|
||||
const SuggestionItemField = euiStyled.div`
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: ${props => props.theme.eui.euiSizeXl};
|
||||
padding: ${props => props.theme.eui.euiSizeXs};
|
||||
height: ${props => props.theme.eui.euiSizeXL};
|
||||
padding: ${props => props.theme.eui.euiSizeXS};
|
||||
`;
|
||||
|
||||
const SuggestionItemIconField = SuggestionItemField.extend<{ suggestionType: string }>`
|
||||
|
@ -69,7 +69,7 @@ const SuggestionItemIconField = SuggestionItemField.extend<{ suggestionType: str
|
|||
color: ${props => getEuiIconColor(props.theme, props.suggestionType)};
|
||||
flex: 0 0 auto;
|
||||
justify-content: center;
|
||||
width: ${props => props.theme.eui.euiSizeXl};
|
||||
width: ${props => props.theme.eui.euiSizeXL};
|
||||
`;
|
||||
|
||||
const SuggestionItemTextField = SuggestionItemField.extend`
|
||||
|
|
|
@ -6,7 +6,8 @@
|
|||
|
||||
import { EuiButton, EuiEmptyPrompt } from '@elastic/eui';
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import euiStyled from '../../../../../common/eui_styled_components';
|
||||
|
||||
interface NoDataProps {
|
||||
titleText: string;
|
||||
|
@ -36,6 +37,6 @@ export const NoData: React.SFC<NoDataProps> = ({
|
|||
/>
|
||||
);
|
||||
|
||||
const CenteredEmptyPrompt = styled(EuiEmptyPrompt)`
|
||||
const CenteredEmptyPrompt = euiStyled(EuiEmptyPrompt)`
|
||||
align-self: center;
|
||||
`;
|
||||
|
|
|
@ -6,7 +6,8 @@
|
|||
|
||||
import { EuiEmptyPrompt } from '@elastic/eui';
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import euiStyled from '../../../../../common/eui_styled_components';
|
||||
|
||||
interface NoIndicesProps {
|
||||
message: string;
|
||||
|
@ -24,6 +25,6 @@ export const NoIndices: React.SFC<NoIndicesProps> = ({ actions, message, title,
|
|||
/>
|
||||
);
|
||||
|
||||
const CenteredEmptyPrompt = styled(EuiEmptyPrompt)`
|
||||
const CenteredEmptyPrompt = euiStyled(EuiEmptyPrompt)`
|
||||
align-self: center;
|
||||
`;
|
||||
|
|
|
@ -14,8 +14,8 @@ import {
|
|||
} from '@elastic/eui';
|
||||
import { FormattedMessage } from '@kbn/i18n/react';
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import euiStyled from '../../../../common/eui_styled_components';
|
||||
import { FlexPage } from './page';
|
||||
|
||||
interface Props {
|
||||
|
@ -64,6 +64,6 @@ export const ErrorPage: React.SFC<Props> = ({ detailedMessage, retry, shortMessa
|
|||
</FlexPage>
|
||||
);
|
||||
|
||||
const MinimumPageContent = styled(EuiPageContent)`
|
||||
const MinimumPageContent = euiStyled(EuiPageContent)`
|
||||
min-width: 50vh;
|
||||
`;
|
||||
|
|
|
@ -6,9 +6,9 @@
|
|||
|
||||
import { EuiPanel } from '@elastic/eui';
|
||||
|
||||
import styled from 'styled-components';
|
||||
import euiStyled from '../../../../../../common/eui_styled_components';
|
||||
|
||||
export const Toolbar = styled(EuiPanel).attrs({
|
||||
export const Toolbar = euiStyled(EuiPanel).attrs({
|
||||
grow: false,
|
||||
paddingSize: 'none',
|
||||
})`
|
||||
|
|
|
@ -6,7 +6,8 @@
|
|||
|
||||
import { EuiLoadingChart, EuiPanel, EuiText } from '@elastic/eui';
|
||||
import * as React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import euiStyled from '../../../../../common/eui_styled_components';
|
||||
|
||||
interface InfraLoadingProps {
|
||||
text: string | JSX.Element;
|
||||
|
@ -32,7 +33,7 @@ export class InfraLoadingPanel extends React.PureComponent<InfraLoadingProps, {}
|
|||
}
|
||||
}
|
||||
|
||||
export const InfraLoadingStaticPanel = styled.div`
|
||||
export const InfraLoadingStaticPanel = euiStyled.div`
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
|
@ -40,7 +41,7 @@ export const InfraLoadingStaticPanel = styled.div`
|
|||
justify-content: center;
|
||||
`;
|
||||
|
||||
export const InfraLoadingStaticContentPanel = styled.div`
|
||||
export const InfraLoadingStaticContentPanel = euiStyled.div`
|
||||
flex: 0 0 auto;
|
||||
align-self: center;
|
||||
text-align: center;
|
||||
|
|
|
@ -7,7 +7,8 @@
|
|||
import { EuiButtonEmpty, EuiPopover } from '@elastic/eui';
|
||||
import { FormattedMessage } from '@kbn/i18n/react';
|
||||
import * as React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import euiStyled from '../../../../../common/eui_styled_components';
|
||||
|
||||
interface LogCustomizationMenuState {
|
||||
isShown: boolean;
|
||||
|
@ -64,6 +65,6 @@ export class LogCustomizationMenu extends React.Component<{}, LogCustomizationMe
|
|||
}
|
||||
}
|
||||
|
||||
const CustomizationMenuContent = styled.div`
|
||||
const CustomizationMenuContent = euiStyled.div`
|
||||
min-width: 200px;
|
||||
`;
|
||||
|
|
|
@ -15,7 +15,8 @@ import {
|
|||
} from '@elastic/eui';
|
||||
import { FormattedMessage, InjectedIntl, injectI18n } from '@kbn/i18n/react';
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import euiStyled from '../../../../../common/eui_styled_components';
|
||||
import { InfraLogItem, InfraLogItemField } from '../../graphql/types';
|
||||
import { InfraLoadingPanel } from '../loading';
|
||||
interface Props {
|
||||
|
@ -105,7 +106,7 @@ export const LogFlyout = injectI18n(
|
|||
}
|
||||
);
|
||||
|
||||
export const InfraFlyoutLoadingPanel = styled.div`
|
||||
export const InfraFlyoutLoadingPanel = euiStyled.div`
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
|
|
@ -8,8 +8,8 @@ import { scaleLinear, scaleTime } from 'd3-scale';
|
|||
import { area, curveMonotoneY } from 'd3-shape';
|
||||
import max from 'lodash/fp/max';
|
||||
import * as React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import euiStyled from '../../../../../../common/eui_styled_components';
|
||||
import { SummaryBucket } from './types';
|
||||
|
||||
interface DensityChartProps {
|
||||
|
@ -55,14 +55,14 @@ export const DensityChart: React.SFC<DensityChartProps> = ({
|
|||
);
|
||||
};
|
||||
|
||||
const PositiveAreaPath = styled.path`
|
||||
const PositiveAreaPath = euiStyled.path`
|
||||
fill: ${props =>
|
||||
props.theme.darkMode
|
||||
? props.theme.eui.euiColorMediumShade
|
||||
: props.theme.eui.euiColorLightShade};
|
||||
`;
|
||||
|
||||
const NegativeAreaPath = styled.path`
|
||||
const NegativeAreaPath = euiStyled.path`
|
||||
fill: ${props =>
|
||||
props.theme.darkMode
|
||||
? props.theme.eui.euiColorLightShade
|
||||
|
|
|
@ -5,7 +5,8 @@
|
|||
*/
|
||||
|
||||
import * as React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import euiStyled from '../../../../../../common/eui_styled_components';
|
||||
|
||||
interface HighlightedIntervalProps {
|
||||
className?: string;
|
||||
|
@ -35,7 +36,7 @@ export const HighlightedInterval: React.SFC<HighlightedIntervalProps> = ({
|
|||
|
||||
HighlightedInterval.displayName = 'HighlightedInterval';
|
||||
|
||||
const HighlightPolygon = styled.polygon`
|
||||
const HighlightPolygon = euiStyled.polygon`
|
||||
fill: ${props => props.theme.eui.euiColorPrimary};
|
||||
fill-opacity: 0.3;
|
||||
stroke: ${props => props.theme.eui.euiColorPrimary};
|
||||
|
|
|
@ -6,8 +6,8 @@
|
|||
|
||||
import { scaleLinear } from 'd3-scale';
|
||||
import * as React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import euiStyled from '../../../../../../common/eui_styled_components';
|
||||
import { LogEntryTime } from '../../../../common/log_entry';
|
||||
// import { SearchSummaryBucket } from '../../../../common/log_search_summary';
|
||||
import { DensityChart } from './density_chart';
|
||||
|
@ -116,11 +116,11 @@ export class LogMinimap extends React.Component<LogMinimapProps> {
|
|||
}
|
||||
}
|
||||
|
||||
const MinimapBackground = styled.rect`
|
||||
const MinimapBackground = euiStyled.rect`
|
||||
fill: ${props => props.theme.eui.euiColorLightestShade};
|
||||
`;
|
||||
|
||||
const MinimapBorder = styled.line`
|
||||
const MinimapBorder = euiStyled.line`
|
||||
stroke: ${props => props.theme.eui.euiColorMediumShade};
|
||||
stroke-width: 1px;
|
||||
`;
|
||||
|
|
|
@ -6,8 +6,8 @@
|
|||
|
||||
import { FormattedMessage } from '@kbn/i18n/react';
|
||||
import * as React from 'react';
|
||||
import styled, { keyframes } from 'styled-components';
|
||||
|
||||
import euiStyled, { keyframes } from '../../../../../../common/eui_styled_components';
|
||||
import { LogEntryTime } from '../../../../common/log_entry';
|
||||
import { SearchSummaryBucket } from '../../../../common/log_search_summary';
|
||||
import { SearchMarkerTooltip } from './search_marker_tooltip';
|
||||
|
@ -102,11 +102,11 @@ const fadeInAnimation = keyframes`
|
|||
}
|
||||
`;
|
||||
|
||||
const SearchMarkerGroup = styled.g`
|
||||
const SearchMarkerGroup = euiStyled.g`
|
||||
animation: ${fadeInAnimation} ${props => props.theme.eui.euiAnimSpeedExtraSlow} ease-in both;
|
||||
`;
|
||||
|
||||
const SearchMarkerBackgroundRect = styled.rect`
|
||||
const SearchMarkerBackgroundRect = euiStyled.rect`
|
||||
fill: ${props => props.theme.eui.euiColorSecondary};
|
||||
opacity: 0;
|
||||
transition: opacity ${props => props.theme.eui.euiAnimSpeedNormal} ease-in;
|
||||
|
@ -116,6 +116,6 @@ const SearchMarkerBackgroundRect = styled.rect`
|
|||
}
|
||||
`;
|
||||
|
||||
const SearchMarkerForegroundRect = styled.rect`
|
||||
const SearchMarkerForegroundRect = euiStyled.rect`
|
||||
fill: ${props => props.theme.eui.euiColorSecondary};
|
||||
`;
|
||||
|
|
|
@ -6,7 +6,8 @@
|
|||
|
||||
import { scaleTime } from 'd3-scale';
|
||||
import * as React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import euiStyled from '../../../../../../common/eui_styled_components';
|
||||
|
||||
interface TimeRulerProps {
|
||||
end: number;
|
||||
|
@ -43,13 +44,13 @@ export const TimeRuler: React.SFC<TimeRulerProps> = ({ end, height, start, tickC
|
|||
|
||||
TimeRuler.displayName = 'TimeRuler';
|
||||
|
||||
const TimeRulerTickLabel = styled.text`
|
||||
const TimeRulerTickLabel = euiStyled.text`
|
||||
font-size: ${props => props.theme.eui.euiFontSizeXS};
|
||||
line-height: ${props => props.theme.eui.euiLineHeight};
|
||||
fill: ${props => props.theme.eui.textColors.subdued};
|
||||
`;
|
||||
|
||||
const TimeRulerGridLine = styled.line`
|
||||
const TimeRulerGridLine = euiStyled.line`
|
||||
stroke: ${props =>
|
||||
props.theme.darkMode ? props.theme.eui.euiColorDarkShade : props.theme.eui.euiColorMediumShade};
|
||||
stroke-dasharray: 2, 2;
|
||||
|
|
|
@ -8,7 +8,8 @@ import { EuiFieldSearch } from '@elastic/eui';
|
|||
import { InjectedIntl, injectI18n } from '@kbn/i18n/react';
|
||||
import classNames from 'classnames';
|
||||
import * as React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import euiStyled from '../../../../../../common/eui_styled_components';
|
||||
|
||||
interface LogSearchInputProps {
|
||||
className?: string;
|
||||
|
@ -76,7 +77,7 @@ export const LogSearchInput = injectI18n(
|
|||
}
|
||||
);
|
||||
|
||||
const PlainSearchField = styled(EuiFieldSearch)`
|
||||
const PlainSearchField = euiStyled(EuiFieldSearch)`
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
|
||||
|
|
|
@ -5,9 +5,10 @@
|
|||
*/
|
||||
|
||||
import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
|
||||
import styled from 'styled-components';
|
||||
|
||||
export const LogStatusbar = styled(EuiFlexGroup).attrs({
|
||||
import euiStyled from '../../../../../common/eui_styled_components';
|
||||
|
||||
export const LogStatusbar = euiStyled(EuiFlexGroup).attrs({
|
||||
alignItems: 'center',
|
||||
gutterSize: 'none',
|
||||
justifyContent: 'flexEnd',
|
||||
|
|
|
@ -4,11 +4,10 @@
|
|||
* you may not use this file except in compliance with the Elastic License.
|
||||
*/
|
||||
|
||||
import styled from 'styled-components';
|
||||
|
||||
import euiStyled from '../../../../../../common/eui_styled_components';
|
||||
import { switchProp } from '../../../utils/styles';
|
||||
|
||||
export const LogTextStreamItemField = styled.div.attrs<{
|
||||
export const LogTextStreamItemField = euiStyled.div.attrs<{
|
||||
scale?: 'small' | 'medium' | 'large';
|
||||
}>({})`
|
||||
font-size: ${props =>
|
||||
|
|
|
@ -6,8 +6,8 @@
|
|||
|
||||
import { darken, transparentize } from 'polished';
|
||||
import * as React from 'react';
|
||||
import styled, { css } from 'styled-components';
|
||||
|
||||
import euiStyled, { css } from '../../../../../../common/eui_styled_components';
|
||||
import { TextScale } from '../../../../common/log_text_scale';
|
||||
import { tintOrShade } from '../../../utils/styles';
|
||||
import { LogTextStreamItemField } from './item_field';
|
||||
|
@ -69,7 +69,11 @@ const renderHighlightFragments = (text: string, highlights: string[]): React.Rea
|
|||
|
||||
const highlightedFieldStyle = css`
|
||||
background-color: ${props =>
|
||||
tintOrShade(props.theme.eui.euiTextColor, props.theme.eui.euiColorSecondary, 0.15)};
|
||||
tintOrShade(
|
||||
props.theme.eui.euiTextColor as any, // workaround for incorrect upstream `tintOrShade` types
|
||||
props.theme.eui.euiColorSecondary as any,
|
||||
0.15
|
||||
)};
|
||||
`;
|
||||
|
||||
const hoveredFieldStyle = css`
|
||||
|
@ -104,7 +108,7 @@ const LogTextStreamItemMessageFieldWrapper = LogTextStreamItemField.extend.attrs
|
|||
${props => (props.isWrapped ? wrappedFieldStyle : unwrappedFieldStyle)};
|
||||
`;
|
||||
|
||||
const HighlightSpan = styled.span`
|
||||
const HighlightSpan = euiStyled.span`
|
||||
display: inline-block;
|
||||
background-color: ${props => props.theme.eui.euiColorSecondary};
|
||||
color: ${props => props.theme.eui.euiColorGhost};
|
||||
|
|
|
@ -7,7 +7,8 @@
|
|||
import { EuiButtonEmpty, EuiIcon, EuiProgress, EuiText } from '@elastic/eui';
|
||||
import { FormattedMessage, FormattedRelative } from '@kbn/i18n/react';
|
||||
import * as React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import euiStyled from '../../../../../../common/eui_styled_components';
|
||||
|
||||
interface LogTextStreamLoadingItemViewProps {
|
||||
alignment: 'top' | 'bottom';
|
||||
|
@ -136,13 +137,13 @@ class ProgressEntry extends React.PureComponent<ProgressEntryProps, {}> {
|
|||
}
|
||||
}
|
||||
|
||||
const ProgressEntryWrapper = styled.div`
|
||||
const ProgressEntryWrapper = euiStyled.div`
|
||||
align-items: center;
|
||||
display: flex;
|
||||
min-height: ${props => props.theme.eui.euiSizeXxl};
|
||||
min-height: ${props => props.theme.eui.euiSizeXXL};
|
||||
position: relative;
|
||||
`;
|
||||
|
||||
const ProgressMessage = styled.div`
|
||||
const ProgressMessage = euiStyled.div`
|
||||
padding: 8px 16px;
|
||||
`;
|
||||
|
|
|
@ -6,10 +6,10 @@
|
|||
|
||||
import { darken, transparentize } from 'polished';
|
||||
import * as React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import { EuiButtonIcon, EuiToolTip } from '@elastic/eui';
|
||||
import { InjectedIntl, injectI18n } from '@kbn/i18n/react';
|
||||
import euiStyled from '../../../../../../common/eui_styled_components';
|
||||
import { LogEntry } from '../../../../common/log_entry';
|
||||
import { SearchResult } from '../../../../common/log_search_result';
|
||||
import { TextScale } from '../../../../common/log_text_scale';
|
||||
|
@ -111,11 +111,11 @@ interface IconProps {
|
|||
isHovered: boolean;
|
||||
}
|
||||
|
||||
const EmptyIcon = styled.div`
|
||||
const EmptyIcon = euiStyled.div`
|
||||
width: 24px;
|
||||
`;
|
||||
|
||||
const LogTextStreamIconDiv = styled<IconProps, 'div'>('div')`
|
||||
const LogTextStreamIconDiv = euiStyled<IconProps, 'div'>('div')`
|
||||
flex-grow: 0;
|
||||
background-color: ${props =>
|
||||
props.isHovered
|
||||
|
@ -128,7 +128,7 @@ const LogTextStreamIconDiv = styled<IconProps, 'div'>('div')`
|
|||
font-size: 0.9em;
|
||||
`;
|
||||
|
||||
const LogTextStreamLogEntryItemDiv = styled.div`
|
||||
const LogTextStreamLogEntryItemDiv = euiStyled.div`
|
||||
font-family: ${props => props.theme.eui.euiCodeFontFamily};
|
||||
font-size: ${props => props.theme.eui.euiFontSize};
|
||||
line-height: ${props => props.theme.eui.euiLineHeight};
|
||||
|
|
|
@ -5,8 +5,8 @@
|
|||
*/
|
||||
|
||||
import * as React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import euiStyled from '../../../../../../common/eui_styled_components';
|
||||
import { LogEntry } from '../../../../common/log_entry';
|
||||
|
||||
interface LogEntryStreamItemViewProps {
|
||||
|
@ -25,7 +25,7 @@ export class LogEntryStreamItemView extends React.PureComponent<LogEntryStreamIt
|
|||
}
|
||||
}
|
||||
|
||||
const LogEntryDiv = styled.div`
|
||||
const LogEntryDiv = euiStyled.div`
|
||||
border-top: 1px solid red;
|
||||
border-bottom: 1px solid green;
|
||||
`;
|
||||
|
|
|
@ -8,8 +8,8 @@ import { bisector } from 'd3-array';
|
|||
import sortBy from 'lodash/fp/sortBy';
|
||||
import throttle from 'lodash/fp/throttle';
|
||||
import * as React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import euiStyled from '../../../../../../common/eui_styled_components';
|
||||
import { Rect } from './measurable_item_view';
|
||||
|
||||
interface VerticalScrollPanelProps<Child> {
|
||||
|
@ -227,7 +227,7 @@ export class VerticalScrollPanel<Child> extends React.PureComponent<
|
|||
}
|
||||
}
|
||||
|
||||
const ScrollPanelWrapper = styled.div.attrs<{ scrollbarOffset?: number }>({})`
|
||||
const ScrollPanelWrapper = euiStyled.div.attrs<{ scrollbarOffset?: number }>({})`
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
position: relative;
|
||||
|
|
|
@ -8,7 +8,8 @@ import { EuiDatePicker, EuiFilterButton, EuiFilterGroup } from '@elastic/eui';
|
|||
import { FormattedMessage, InjectedIntl, injectI18n } from '@kbn/i18n/react';
|
||||
import moment, { Moment } from 'moment';
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import euiStyled from '../../../../../common/eui_styled_components';
|
||||
|
||||
const noop = () => undefined;
|
||||
|
||||
|
@ -96,6 +97,6 @@ class LogTimeControlsUI extends React.PureComponent<LogTimeControlsProps> {
|
|||
|
||||
export const LogTimeControls = injectI18n(LogTimeControlsUI);
|
||||
|
||||
const InlineWrapper = styled.div`
|
||||
const InlineWrapper = euiStyled.div`
|
||||
display: inline-block;
|
||||
`;
|
||||
|
|
|
@ -7,7 +7,8 @@
|
|||
import { EuiButton, EuiEmptyPrompt, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
|
||||
import { FormattedMessage } from '@kbn/i18n/react';
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import euiStyled from '../../../../../common/eui_styled_components';
|
||||
import { WithSourceConfigurationFlyoutState } from '../../components/source_configuration/source_configuration_flyout_state';
|
||||
import { WithKibanaChrome } from '../../containers/with_kibana_chrome';
|
||||
|
||||
|
@ -71,6 +72,6 @@ export const InvalidNodeError: React.SFC<InvalidNodeErrorProps> = ({ nodeName })
|
|||
</WithKibanaChrome>
|
||||
);
|
||||
|
||||
const CenteredEmptyPrompt = styled(EuiEmptyPrompt)`
|
||||
const CenteredEmptyPrompt = euiStyled(EuiEmptyPrompt)`
|
||||
align-self: center;
|
||||
`;
|
||||
|
|
|
@ -15,7 +15,8 @@ import {
|
|||
} from '@elastic/eui';
|
||||
import { get, last, max } from 'lodash';
|
||||
import React, { ReactText } from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import euiStyled from '../../../../../../common/eui_styled_components';
|
||||
import { InfraMetricData } from '../../../graphql/types';
|
||||
import { InfraFormatterType } from '../../../lib/lib';
|
||||
import { InfraMetricLayoutSection } from '../../../pages/metrics/layouts/types';
|
||||
|
@ -96,7 +97,7 @@ export class GaugesSection extends React.PureComponent<Props> {
|
|||
}
|
||||
}
|
||||
|
||||
const GroupBox = styled.div`
|
||||
const GroupBox = euiStyled.div`
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: space-evenly;
|
||||
|
|
|
@ -4,14 +4,11 @@
|
|||
* you may not use this file except in compliance with the Elastic License.
|
||||
*/
|
||||
|
||||
import { EuiHideFor, EuiPageSideBar, EuiShowFor, EuiSideNav } from '@elastic/eui';
|
||||
import { InjectedIntl, injectI18n } from '@kbn/i18n/react';
|
||||
import React from 'react';
|
||||
|
||||
import styled from 'styled-components';
|
||||
|
||||
import { EuiHideFor, EuiPageSideBar, EuiShowFor, EuiSideNav } from '@elastic/eui';
|
||||
|
||||
import { InjectedIntl, injectI18n } from '@kbn/i18n/react';
|
||||
|
||||
import euiStyled from '../../../../../common/eui_styled_components';
|
||||
import { InfraMetricLayout, InfraMetricLayoutSection } from '../../pages/metrics/layouts/types';
|
||||
|
||||
interface Props {
|
||||
|
@ -73,7 +70,7 @@ export const MetricsSideNav = injectI18n(
|
|||
}
|
||||
);
|
||||
|
||||
const SideNavContainer = styled.div`
|
||||
const SideNavContainer = euiStyled.div`
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
height: 88vh;
|
||||
|
|
|
@ -8,11 +8,10 @@ import { EuiButton, EuiButtonEmpty, EuiFlexGroup, EuiFlexItem } from '@elastic/e
|
|||
import { FormattedMessage } from '@kbn/i18n/react';
|
||||
import moment, { Moment } from 'moment';
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import { RangeDatePicker, RecentlyUsed } from '../range_date_picker';
|
||||
|
||||
import euiStyled from '../../../../../common/eui_styled_components';
|
||||
import { metricTimeActions } from '../../store';
|
||||
import { RangeDatePicker, RecentlyUsed } from '../range_date_picker';
|
||||
|
||||
interface MetricsTimeControlsProps {
|
||||
currentTimeRange: metricTimeActions.MetricRangeTimeState;
|
||||
|
@ -219,7 +218,8 @@ export class MetricsTimeControls extends React.Component<
|
|||
}
|
||||
};
|
||||
}
|
||||
const MetricsTimeControlsContainer = styled.div`
|
||||
|
||||
const MetricsTimeControlsContainer = euiStyled.div`
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
flex-flow: row wrap;
|
||||
|
|
|
@ -8,8 +8,8 @@ import { EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
|
|||
import { FormattedMessage, InjectedIntl, injectI18n } from '@kbn/i18n/react';
|
||||
import { get, max, min } from 'lodash';
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import euiStyled from '../../../../../common/eui_styled_components';
|
||||
import {
|
||||
InfraMetricType,
|
||||
InfraNode,
|
||||
|
@ -206,20 +206,20 @@ export const NodesOverview = injectI18n(
|
|||
}
|
||||
);
|
||||
|
||||
const MainContainer = styled.div`
|
||||
const MainContainer = euiStyled.div`
|
||||
position: relative;
|
||||
flex: 1 1 auto;
|
||||
`;
|
||||
|
||||
const TableContainer = styled.div`
|
||||
const TableContainer = euiStyled.div`
|
||||
padding: ${props => props.theme.eui.paddingSizes.l};
|
||||
`;
|
||||
|
||||
const ViewSwitcherContainer = styled.div`
|
||||
const ViewSwitcherContainer = euiStyled.div`
|
||||
padding: ${props => props.theme.eui.paddingSizes.l};
|
||||
`;
|
||||
|
||||
const MapContainer = styled.div`
|
||||
const MapContainer = euiStyled.div`
|
||||
position: absolute;
|
||||
display: flex;
|
||||
top: 0;
|
||||
|
|
|
@ -5,22 +5,23 @@
|
|||
*/
|
||||
|
||||
import { EuiPage } from '@elastic/eui';
|
||||
import styled from 'styled-components';
|
||||
|
||||
export const ColumnarPage = styled.div`
|
||||
import euiStyled from '../../../../common/eui_styled_components';
|
||||
|
||||
export const ColumnarPage = euiStyled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
flex: 1 0 0%;
|
||||
`;
|
||||
|
||||
export const PageContent = styled.div`
|
||||
export const PageContent = euiStyled.div`
|
||||
flex: 1 0 0%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background-color: ${props => props.theme.eui.euiColorEmptyShade};
|
||||
`;
|
||||
|
||||
export const FlexPage = styled(EuiPage)`
|
||||
export const FlexPage = euiStyled(EuiPage)`
|
||||
flex: 1 0 0%;
|
||||
`;
|
||||
|
|
|
@ -5,7 +5,8 @@
|
|||
*/
|
||||
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import euiStyled from '../../../../../common/eui_styled_components';
|
||||
import {
|
||||
InfraFormatter,
|
||||
InfraWaffleMapBounds,
|
||||
|
@ -52,7 +53,7 @@ export const GradientLegend: React.SFC<Props> = ({ legend, bounds, formatter })
|
|||
);
|
||||
};
|
||||
|
||||
const GradientLegendContainer = styled.div`
|
||||
const GradientLegendContainer = euiStyled.div`
|
||||
position: absolute;
|
||||
height: 10px;
|
||||
bottom: 0;
|
||||
|
@ -60,13 +61,13 @@ const GradientLegendContainer = styled.div`
|
|||
right: 40px;
|
||||
`;
|
||||
|
||||
const GradientLegendTick = styled.div`
|
||||
const GradientLegendTick = euiStyled.div`
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
top: -18px;
|
||||
`;
|
||||
|
||||
const GradientLegendTickLine = styled.div`
|
||||
const GradientLegendTickLine = euiStyled.div`
|
||||
position: absolute;
|
||||
background-color: ${props => props.theme.eui.euiBorderColor};
|
||||
width: 1px;
|
||||
|
@ -81,7 +82,7 @@ const GradientLegendTickLine = styled.div`
|
|||
}
|
||||
`;
|
||||
|
||||
const GradientLegendTickLabel = styled.div`
|
||||
const GradientLegendTickLabel = euiStyled.div`
|
||||
position: absolute;
|
||||
font-size: 11px;
|
||||
text-align: center;
|
||||
|
|
|
@ -5,7 +5,8 @@
|
|||
*/
|
||||
import { EuiLink, EuiToolTip } from '@elastic/eui';
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import euiStyled from '../../../../../common/eui_styled_components';
|
||||
import { InfraPathType } from '../../graphql/types';
|
||||
import { InfraWaffleMapGroup, InfraWaffleMapOptions } from '../../lib/lib';
|
||||
|
||||
|
@ -58,7 +59,7 @@ export class GroupName extends React.PureComponent<Props, {}> {
|
|||
};
|
||||
}
|
||||
|
||||
const GroupNameContainer = styled.div`
|
||||
const GroupNameContainer = euiStyled.div`
|
||||
position: relative;
|
||||
text-align: center
|
||||
font-size: 16px;
|
||||
|
@ -73,7 +74,7 @@ interface InnerProps {
|
|||
isChild?: boolean;
|
||||
}
|
||||
|
||||
const Inner = styled<InnerProps, 'div'>('div')`
|
||||
const Inner = euiStyled<InnerProps, 'div'>('div')`
|
||||
border: 1px solid ${props => props.theme.eui.euiBorderColor};
|
||||
background-color: ${props =>
|
||||
props.isChild ? props.theme.eui.euiColorLightestShade : props.theme.eui.euiColorEmptyShade};
|
||||
|
@ -85,7 +86,7 @@ const Inner = styled<InnerProps, 'div'>('div')`
|
|||
overflow: hidden;
|
||||
`;
|
||||
|
||||
const Name = styled.div`
|
||||
const Name = euiStyled.div`
|
||||
flex: 1 1 auto;
|
||||
padding: 6px 10px;
|
||||
overflow: hidden;
|
||||
|
@ -93,7 +94,7 @@ const Name = styled.div`
|
|||
white-space: nowrap;
|
||||
`;
|
||||
|
||||
const Count = styled.div`
|
||||
const Count = euiStyled.div`
|
||||
flex: 0 0 auto;
|
||||
border-left: 1px solid ${props => props.theme.eui.euiBorderColor};
|
||||
padding: 6px 10px;
|
||||
|
|
|
@ -5,7 +5,8 @@
|
|||
*/
|
||||
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import euiStyled from '../../../../../common/eui_styled_components';
|
||||
import { InfraNodeType, InfraTimerangeInput } from '../../graphql/types';
|
||||
import {
|
||||
InfraWaffleMapBounds,
|
||||
|
@ -48,11 +49,11 @@ export const GroupOfGroups: React.SFC<Props> = props => {
|
|||
);
|
||||
};
|
||||
|
||||
const GroupOfGroupsContainer = styled.div`
|
||||
const GroupOfGroupsContainer = euiStyled.div`
|
||||
margin: 0 10px;
|
||||
`;
|
||||
|
||||
const Groups = styled.div`
|
||||
const Groups = euiStyled.div`
|
||||
display: flex;
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
flex-wrap: wrap;
|
||||
|
|
|
@ -5,7 +5,8 @@
|
|||
*/
|
||||
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import euiStyled from '../../../../../common/eui_styled_components';
|
||||
import { InfraNodeType, InfraTimerangeInput } from '../../graphql/types';
|
||||
import {
|
||||
InfraWaffleMapBounds,
|
||||
|
@ -58,11 +59,11 @@ export const GroupOfNodes: React.SFC<Props> = ({
|
|||
);
|
||||
};
|
||||
|
||||
const GroupOfNodesContainer = styled.div`
|
||||
const GroupOfNodesContainer = euiStyled.div`
|
||||
margin: 0 10px;
|
||||
`;
|
||||
|
||||
const Nodes = styled.div`
|
||||
const Nodes = euiStyled.div`
|
||||
display: flex;
|
||||
background-color: rgba(0, 0, 0, 0.05);
|
||||
flex-wrap: wrap;
|
||||
|
|
|
@ -4,7 +4,8 @@
|
|||
* you may not use this file except in compliance with the Elastic License.
|
||||
*/
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import euiStyled from '../../../../../common/eui_styled_components';
|
||||
import { WithWaffleOptions } from '../../containers/waffle/with_waffle_options';
|
||||
import { InfraFormatter, InfraWaffleMapBounds, InfraWaffleMapLegend } from '../../lib/lib';
|
||||
import { GradientLegend } from './gradient_legend';
|
||||
|
@ -48,7 +49,7 @@ export const Legend: React.SFC<Props> = ({ dataBounds, legend, bounds, formatter
|
|||
);
|
||||
};
|
||||
|
||||
const LegendContainer = styled.div`
|
||||
const LegendContainer = euiStyled.div`
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 10px;
|
||||
|
|
|
@ -19,7 +19,8 @@ import {
|
|||
} from '@elastic/eui';
|
||||
import { FormattedMessage, InjectedIntl, injectI18n } from '@kbn/i18n/react';
|
||||
import React, { SyntheticEvent, useState } from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import euiStyled from '../../../../../common/eui_styled_components';
|
||||
import { InfraWaffleMapBounds } from '../../lib/lib';
|
||||
|
||||
interface Props {
|
||||
|
@ -162,7 +163,7 @@ export const LegendControls = injectI18n(
|
|||
}
|
||||
);
|
||||
|
||||
const ControlContainer = styled.div`
|
||||
const ControlContainer = euiStyled.div`
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
right: 6px;
|
||||
|
|
|
@ -4,7 +4,8 @@
|
|||
* you may not use this file except in compliance with the Elastic License.
|
||||
*/
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import euiStyled from '../../../../../common/eui_styled_components';
|
||||
import { nodesToWaffleMap } from '../../containers/waffle/nodes_to_wafflemap';
|
||||
import {
|
||||
isWaffleMapGroupWithGroups,
|
||||
|
@ -95,7 +96,7 @@ export const Map: React.SFC<Props> = ({
|
|||
);
|
||||
};
|
||||
|
||||
const WaffleMapOuterContainer = styled.div`
|
||||
const WaffleMapOuterContainer = euiStyled.div`
|
||||
flex: 1 0 0%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
@ -104,7 +105,7 @@ const WaffleMapOuterContainer = styled.div`
|
|||
overflow-y: auto;
|
||||
`;
|
||||
|
||||
const WaffleMapInnerContainer = styled.div`
|
||||
const WaffleMapInnerContainer = euiStyled.div`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
|
|
|
@ -8,9 +8,9 @@ import { EuiToolTip } from '@elastic/eui';
|
|||
import moment from 'moment';
|
||||
import { darken, readableColor } from 'polished';
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import { InjectedIntl, injectI18n } from '@kbn/i18n/react';
|
||||
import euiStyled from '../../../../../common/eui_styled_components';
|
||||
import { InfraNodeType } from '../../../server/lib/adapters/nodes';
|
||||
import { InfraTimerangeInput } from '../../graphql/types';
|
||||
import { InfraWaffleMapBounds, InfraWaffleMapNode, InfraWaffleMapOptions } from '../../lib/lib';
|
||||
|
@ -116,7 +116,7 @@ export const Node = injectI18n(
|
|||
}
|
||||
);
|
||||
|
||||
const NodeContainer = styled.div`
|
||||
const NodeContainer = euiStyled.div`
|
||||
position: relative;
|
||||
`;
|
||||
|
||||
|
@ -124,7 +124,7 @@ interface ColorProps {
|
|||
color: string;
|
||||
}
|
||||
|
||||
const SquareOuter = styled<ColorProps, 'div'>('div')`
|
||||
const SquareOuter = euiStyled<ColorProps, 'div'>('div')`
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 4px;
|
||||
|
@ -135,7 +135,7 @@ const SquareOuter = styled<ColorProps, 'div'>('div')`
|
|||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
|
||||
`;
|
||||
|
||||
const SquareInner = styled<ColorProps, 'div'>('div')`
|
||||
const SquareInner = euiStyled<ColorProps, 'div'>('div')`
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
@ -146,7 +146,7 @@ const SquareInner = styled<ColorProps, 'div'>('div')`
|
|||
background-color: ${props => props.color};
|
||||
`;
|
||||
|
||||
const ValueInner = styled.button`
|
||||
const ValueInner = euiStyled.button`
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
@ -169,7 +169,7 @@ const ValueInner = styled.button`
|
|||
}
|
||||
`;
|
||||
|
||||
const Value = styled<ColorProps, 'div'>('div')`
|
||||
const Value = euiStyled<ColorProps, 'div'>('div')`
|
||||
font-weight: bold;
|
||||
font-size: 0.9em;
|
||||
text-align: center;
|
||||
|
@ -179,7 +179,7 @@ const Value = styled<ColorProps, 'div'>('div')`
|
|||
color: ${props => readableColor(props.color)};
|
||||
`;
|
||||
|
||||
const Label = styled<ColorProps, 'div'>('div')`
|
||||
const Label = euiStyled<ColorProps, 'div'>('div')`
|
||||
text-overflow: ellipsis;
|
||||
font-size: 0.7em;
|
||||
margin-bottom: 0.7em;
|
||||
|
|
|
@ -6,7 +6,8 @@
|
|||
|
||||
import { darken } from 'polished';
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import euiStyled from '../../../../../common/eui_styled_components';
|
||||
import {
|
||||
InfraFormatter,
|
||||
InfraWaffleMapRuleOperator,
|
||||
|
@ -46,18 +47,18 @@ export const StepLegend: React.SFC<Props> = ({ legend, formatter }) => {
|
|||
return <StepLegendContainer>{legend.rules.map(createStep(formatter))}</StepLegendContainer>;
|
||||
};
|
||||
|
||||
const StepLegendContainer = styled.div`
|
||||
const StepLegendContainer = euiStyled.div`
|
||||
display: flex;
|
||||
padding: 10px 40px 10px 10px;
|
||||
`;
|
||||
|
||||
const StepContainer = styled.div`
|
||||
const StepContainer = euiStyled.div`
|
||||
display: flex;
|
||||
margin-right: 20px
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
const StepSquare = styled.div`
|
||||
const StepSquare = euiStyled.div`
|
||||
position: relative;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
|
@ -67,7 +68,7 @@ const StepSquare = styled.div`
|
|||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
|
||||
`;
|
||||
|
||||
const StepSquareInner = styled.div`
|
||||
const StepSquareInner = euiStyled.div`
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
@ -76,6 +77,6 @@ const StepSquareInner = styled.div`
|
|||
border-radius: 3px;
|
||||
`;
|
||||
|
||||
const StepLabel = styled.div`
|
||||
const StepLabel = euiStyled.div`
|
||||
font-size: 12px;
|
||||
`;
|
||||
|
|
|
@ -14,11 +14,12 @@ import {
|
|||
} from '@elastic/eui';
|
||||
import { FormattedMessage } from '@kbn/i18n/react';
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import euiStyled from '../../../../common/eui_styled_components';
|
||||
import { Header } from '../components/header';
|
||||
import { ColumnarPage, PageContent } from '../components/page';
|
||||
|
||||
const DetailPageContent = styled(PageContent)`
|
||||
const DetailPageContent = euiStyled(PageContent)`
|
||||
overflow: auto;
|
||||
background-color: ${props => props.theme.eui.euiColorLightestShade};
|
||||
`;
|
||||
|
|
|
@ -5,8 +5,8 @@
|
|||
*/
|
||||
|
||||
import React, { useContext } from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import euiStyled from '../../../../../common/eui_styled_components';
|
||||
import { AutoSizer } from '../../components/auto_sizer';
|
||||
import { LogMinimap } from '../../components/logging/log_minimap';
|
||||
import { ScrollableLogTextStreamView } from '../../components/logging/log_text_stream';
|
||||
|
@ -101,14 +101,14 @@ export const LogsPageContent: React.FunctionComponent<Props> = ({ showFlyout, se
|
|||
);
|
||||
};
|
||||
|
||||
const LogPageEventStreamColumn = styled.div`
|
||||
const LogPageEventStreamColumn = euiStyled.div`
|
||||
flex: 1 0 0%;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
`;
|
||||
|
||||
const LogPageMinimapColumn = styled.div`
|
||||
const LogPageMinimapColumn = euiStyled.div`
|
||||
flex: 1 0 0%;
|
||||
overflow: hidden;
|
||||
min-width: 100px;
|
||||
|
|
|
@ -16,8 +16,8 @@ import {
|
|||
import { InjectedIntl, injectI18n } from '@kbn/i18n/react';
|
||||
import { GraphQLFormattedError } from 'graphql';
|
||||
import React from 'react';
|
||||
import styled, { withTheme } from 'styled-components';
|
||||
|
||||
import euiStyled, { EuiTheme, withTheme } from '../../../../../common/eui_styled_components';
|
||||
import { InfraMetricsErrorCodes } from '../../../common/errors';
|
||||
import { AutoSizer } from '../../components/auto_sizer';
|
||||
import { DocumentTitle } from '../../components/document_title';
|
||||
|
@ -40,17 +40,17 @@ import { Error, ErrorPageBody } from '../error';
|
|||
import { layoutCreators } from './layouts';
|
||||
import { InfraMetricLayoutSection } from './layouts/types';
|
||||
|
||||
const DetailPageContent = styled(PageContent)`
|
||||
const DetailPageContent = euiStyled(PageContent)`
|
||||
overflow: auto;
|
||||
background-color: ${props => props.theme.eui.euiColorLightestShade};
|
||||
`;
|
||||
|
||||
const EuiPageContentWithRelative = styled(EuiPageContent)`
|
||||
const EuiPageContentWithRelative = euiStyled(EuiPageContent)`
|
||||
position: relative;
|
||||
`;
|
||||
|
||||
interface Props {
|
||||
theme: { eui: any };
|
||||
theme: EuiTheme;
|
||||
match: {
|
||||
params: {
|
||||
type: string;
|
||||
|
@ -250,13 +250,13 @@ export const MetricDetail = withTheme(
|
|||
)
|
||||
);
|
||||
|
||||
const MetricsDetailsPageColumn = styled.div`
|
||||
const MetricsDetailsPageColumn = euiStyled.div`
|
||||
flex: 1 0 0%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
`;
|
||||
|
||||
const MetricsTitleTimeRangeContainer = styled.div`
|
||||
const MetricsTitleTimeRangeContainer = euiStyled.div`
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: space-between;
|
||||
|
|
|
@ -4,6 +4,7 @@
|
|||
* you may not use this file except in compliance with the Elastic License.
|
||||
*/
|
||||
|
||||
import { EuiTheme } from '../../../../../../common/eui_styled_components';
|
||||
import { InfraMetric } from '../../../graphql/types';
|
||||
import { InfraFormatterType } from '../../../lib/lib';
|
||||
|
||||
|
@ -54,4 +55,4 @@ export interface InfraMetricLayout {
|
|||
sections: InfraMetricLayoutSection[];
|
||||
}
|
||||
|
||||
export type InfraMetricLayoutCreator = (theme: { eui: any }) => InfraMetricLayout[];
|
||||
export type InfraMetricLayoutCreator = (theme: EuiTheme) => InfraMetricLayout[];
|
||||
|
|
Loading…
Reference in a new issue