mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 01:38:56 -04:00
Update styled-components to latest version (#49679)
This commit is contained in:
patrykkopycinski
GitHub
parent
7d49b2f9c3
commit
a10bae2dd6
112 changed files with 4360 additions and 2591 deletions
|
|
@ -340,7 +340,7 @@
|
|||
"@types/semver": "^5.5.0",
|
||||
"@types/sinon": "^7.0.13",
|
||||
"@types/strip-ansi": "^3.0.0",
|
||||
"@types/styled-components": "^3.0.2",
|
||||
"@types/styled-components": "^4.4.0",
|
||||
"@types/supertest": "^2.0.5",
|
||||
"@types/supertest-as-promised": "^2.0.38",
|
||||
"@types/type-detect": "^4.0.1",
|
||||
|
|
@ -366,9 +366,9 @@
|
|||
"dedent": "^0.7.0",
|
||||
"delete-empty": "^2.0.0",
|
||||
"enzyme": "^3.10.0",
|
||||
"enzyme-adapter-react-16": "^1.14.0",
|
||||
"enzyme-adapter-utils": "^1.12.0",
|
||||
"enzyme-to-json": "^3.3.4",
|
||||
"enzyme-adapter-react-16": "^1.15.1",
|
||||
"enzyme-adapter-utils": "^1.12.1",
|
||||
"enzyme-to-json": "^3.4.3",
|
||||
"eslint": "^6.5.1",
|
||||
"eslint-config-prettier": "^6.4.0",
|
||||
"eslint-plugin-babel": "^5.3.0",
|
||||
|
|
|
|||
|
|
@ -36,7 +36,10 @@ export function createJestConfig({ kibanaDirectory, xPackKibanaDirectory }) {
|
|||
`<rootDir>/dev-tools/jest/setup/polyfills.js`,
|
||||
`<rootDir>/dev-tools/jest/setup/enzyme.js`,
|
||||
],
|
||||
setupFilesAfterEnv: [`${kibanaDirectory}/src/dev/jest/setup/mocks.js`],
|
||||
setupFilesAfterEnv: [
|
||||
`<rootDir>/dev-tools/jest/setup/setup_test.js`,
|
||||
`${kibanaDirectory}/src/dev/jest/setup/mocks.js`,
|
||||
],
|
||||
testMatch: ['**/*.test.{js,ts,tsx}'],
|
||||
transform: {
|
||||
'^.+\\.(js|tsx?)$': `${kibanaDirectory}/src/dev/jest/babel_transform.js`,
|
||||
|
|
@ -49,7 +52,7 @@ export function createJestConfig({ kibanaDirectory, xPackKibanaDirectory }) {
|
|||
],
|
||||
snapshotSerializers: [
|
||||
`${kibanaDirectory}/node_modules/enzyme-to-json/serializer`,
|
||||
`${kibanaDirectory}/src/plugins/kibana_react/public/util/test_helpers/react_mount_serializer.ts`
|
||||
`${kibanaDirectory}/src/plugins/kibana_react/public/util/test_helpers/react_mount_serializer.ts`,
|
||||
],
|
||||
reporters: [
|
||||
'default',
|
||||
|
|
|
|||
12
x-pack/dev-tools/jest/setup/setup_test.js
Normal file
12
x-pack/dev-tools/jest/setup/setup_test.js
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
/*
|
||||
* 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.
|
||||
*/
|
||||
|
||||
/*
|
||||
Global import, so we don't need to remember to import the lib in each file
|
||||
https://www.npmjs.com/package/jest-styled-components#global-installation
|
||||
*/
|
||||
|
||||
import 'jest-styled-components';
|
||||
|
|
@ -16,16 +16,18 @@ export interface EuiTheme {
|
|||
darkMode: boolean;
|
||||
}
|
||||
|
||||
const EuiThemeProvider = <T extends any>({
|
||||
const EuiThemeProvider = <
|
||||
OuterTheme extends styledComponents.DefaultTheme = styledComponents.DefaultTheme
|
||||
>({
|
||||
darkMode = false,
|
||||
...otherProps
|
||||
}: ThemeProviderProps<T & EuiTheme> & {
|
||||
}: Omit<ThemeProviderProps<OuterTheme, OuterTheme & EuiTheme>, 'theme'> & {
|
||||
darkMode?: boolean;
|
||||
children?: React.ReactNode;
|
||||
}) => (
|
||||
<ThemeProvider
|
||||
{...otherProps}
|
||||
theme={() => ({
|
||||
theme={(outerTheme?: OuterTheme) => ({
|
||||
...outerTheme,
|
||||
eui: darkMode ? euiDarkVars : euiLightVars,
|
||||
darkMode,
|
||||
})}
|
||||
|
|
@ -35,9 +37,9 @@ const EuiThemeProvider = <T extends any>({
|
|||
const {
|
||||
default: euiStyled,
|
||||
css,
|
||||
injectGlobal,
|
||||
createGlobalStyle,
|
||||
keyframes,
|
||||
withTheme,
|
||||
} = (styledComponents as unknown) as ThemedStyledComponentsModule<EuiTheme>;
|
||||
|
||||
export { css, euiStyled, EuiThemeProvider, injectGlobal, keyframes, withTheme };
|
||||
export { css, euiStyled, EuiThemeProvider, createGlobalStyle, keyframes, withTheme };
|
||||
|
|
|
|||
|
|
@ -9,12 +9,12 @@ import {
|
|||
euiStyled,
|
||||
EuiTheme,
|
||||
EuiThemeProvider,
|
||||
injectGlobal,
|
||||
createGlobalStyle,
|
||||
keyframes,
|
||||
withTheme,
|
||||
} from './eui_styled_components';
|
||||
|
||||
export { css, euiStyled, EuiTheme, EuiThemeProvider, injectGlobal, keyframes, withTheme };
|
||||
export { css, euiStyled, EuiTheme, EuiThemeProvider, createGlobalStyle, keyframes, withTheme };
|
||||
// In order to to mimic the styled-components module we need to ignore the following
|
||||
// eslint-disable-next-line import/no-default-export
|
||||
export default euiStyled;
|
||||
|
|
|
|||
|
|
@ -669,76 +669,98 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
|
|||
<div
|
||||
className="euiTableCellContent euiTableCellContent--overflowingContent"
|
||||
>
|
||||
<EuiLink
|
||||
className="c0"
|
||||
href="#/services/opbeans-python/errors/a0ce2c8978ef92cdf2ff163ae28576ee?rangeFrom=now-24h&rangeTo=now&refreshPaused=true&refreshInterval=0"
|
||||
<Styled(ErrorDetailLink)
|
||||
className=""
|
||||
errorGroupId="a0ce2c8978ef92cdf2ff163ae28576ee"
|
||||
serviceName="opbeans-python"
|
||||
>
|
||||
<a
|
||||
className="euiLink euiLink--primary c0"
|
||||
<EuiLink
|
||||
className="c0"
|
||||
href="#/services/opbeans-python/errors/a0ce2c8978ef92cdf2ff163ae28576ee?rangeFrom=now-24h&rangeTo=now&refreshPaused=true&refreshInterval=0"
|
||||
rel="noreferrer"
|
||||
>
|
||||
a0ce2
|
||||
</a>
|
||||
</EuiLink>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
className="euiTableRowCell"
|
||||
style={
|
||||
Object {
|
||||
"width": "50%",
|
||||
}
|
||||
}
|
||||
>
|
||||
<div
|
||||
className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
|
||||
>
|
||||
Error message and culprit
|
||||
</div>
|
||||
<div
|
||||
className="euiTableCellContent euiTableCellContent--overflowingContent"
|
||||
>
|
||||
<div
|
||||
className="c1"
|
||||
>
|
||||
<span
|
||||
className="euiToolTipAnchor"
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
>
|
||||
<EuiLink
|
||||
className="c2"
|
||||
<a
|
||||
className="euiLink euiLink--primary c0"
|
||||
href="#/services/opbeans-python/errors/a0ce2c8978ef92cdf2ff163ae28576ee?rangeFrom=now-24h&rangeTo=now&refreshPaused=true&refreshInterval=0"
|
||||
onBlur={[Function]}
|
||||
onFocus={[Function]}
|
||||
rel="noreferrer"
|
||||
>
|
||||
<a
|
||||
className="euiLink euiLink--primary c2"
|
||||
href="#/services/opbeans-python/errors/a0ce2c8978ef92cdf2ff163ae28576ee?rangeFrom=now-24h&rangeTo=now&refreshPaused=true&refreshInterval=0"
|
||||
a0ce2
|
||||
</a>
|
||||
</EuiLink>
|
||||
</Styled(ErrorDetailLink)>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
className="euiTableRowCell"
|
||||
style={
|
||||
Object {
|
||||
"width": "50%",
|
||||
}
|
||||
}
|
||||
>
|
||||
<div
|
||||
className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
|
||||
>
|
||||
Error message and culprit
|
||||
</div>
|
||||
<div
|
||||
className="euiTableCellContent euiTableCellContent--overflowingContent"
|
||||
>
|
||||
<styled.div
|
||||
className=""
|
||||
>
|
||||
<div
|
||||
className="c1"
|
||||
>
|
||||
<span
|
||||
className="euiToolTipAnchor"
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
>
|
||||
<Styled(ErrorDetailLink)
|
||||
errorGroupId="a0ce2c8978ef92cdf2ff163ae28576ee"
|
||||
onBlur={[Function]}
|
||||
onFocus={[Function]}
|
||||
rel="noreferrer"
|
||||
serviceName="opbeans-python"
|
||||
>
|
||||
About to blow up!
|
||||
</a>
|
||||
</EuiLink>
|
||||
</span>
|
||||
<br />
|
||||
<span
|
||||
className="euiToolTipAnchor"
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
>
|
||||
<div
|
||||
className="c3"
|
||||
onBlur={[Function]}
|
||||
onFocus={[Function]}
|
||||
<EuiLink
|
||||
className="c2"
|
||||
href="#/services/opbeans-python/errors/a0ce2c8978ef92cdf2ff163ae28576ee?rangeFrom=now-24h&rangeTo=now&refreshPaused=true&refreshInterval=0"
|
||||
onBlur={[Function]}
|
||||
onFocus={[Function]}
|
||||
>
|
||||
<a
|
||||
className="euiLink euiLink--primary c2"
|
||||
href="#/services/opbeans-python/errors/a0ce2c8978ef92cdf2ff163ae28576ee?rangeFrom=now-24h&rangeTo=now&refreshPaused=true&refreshInterval=0"
|
||||
onBlur={[Function]}
|
||||
onFocus={[Function]}
|
||||
rel="noreferrer"
|
||||
>
|
||||
About to blow up!
|
||||
</a>
|
||||
</EuiLink>
|
||||
</Styled(ErrorDetailLink)>
|
||||
</span>
|
||||
<br />
|
||||
<span
|
||||
className="euiToolTipAnchor"
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
>
|
||||
elasticapm.contrib.django.client.capture
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<styled.div
|
||||
onBlur={[Function]}
|
||||
onFocus={[Function]}
|
||||
>
|
||||
<div
|
||||
className="c3"
|
||||
onBlur={[Function]}
|
||||
onFocus={[Function]}
|
||||
>
|
||||
elasticapm.contrib.django.client.capture
|
||||
</div>
|
||||
</styled.div>
|
||||
</span>
|
||||
</div>
|
||||
</styled.div>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
|
|
@ -817,18 +839,24 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
|
|||
<div
|
||||
className="euiTableCellContent euiTableCellContent--overflowingContent"
|
||||
>
|
||||
<EuiLink
|
||||
className="c0"
|
||||
href="#/services/opbeans-python/errors/f3ac95493913cc7a3cfec30a19d2120a?rangeFrom=now-24h&rangeTo=now&refreshPaused=true&refreshInterval=0"
|
||||
<Styled(ErrorDetailLink)
|
||||
className=""
|
||||
errorGroupId="f3ac95493913cc7a3cfec30a19d2120a"
|
||||
serviceName="opbeans-python"
|
||||
>
|
||||
<a
|
||||
className="euiLink euiLink--primary c0"
|
||||
<EuiLink
|
||||
className="c0"
|
||||
href="#/services/opbeans-python/errors/f3ac95493913cc7a3cfec30a19d2120a?rangeFrom=now-24h&rangeTo=now&refreshPaused=true&refreshInterval=0"
|
||||
rel="noreferrer"
|
||||
>
|
||||
f3ac9
|
||||
</a>
|
||||
</EuiLink>
|
||||
<a
|
||||
className="euiLink euiLink--primary c0"
|
||||
href="#/services/opbeans-python/errors/f3ac95493913cc7a3cfec30a19d2120a?rangeFrom=now-24h&rangeTo=now&refreshPaused=true&refreshInterval=0"
|
||||
rel="noreferrer"
|
||||
>
|
||||
f3ac9
|
||||
</a>
|
||||
</EuiLink>
|
||||
</Styled(ErrorDetailLink)>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
|
|
@ -847,46 +875,62 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
|
|||
<div
|
||||
className="euiTableCellContent euiTableCellContent--overflowingContent"
|
||||
>
|
||||
<div
|
||||
className="c1"
|
||||
<styled.div
|
||||
className=""
|
||||
>
|
||||
<span
|
||||
className="euiToolTipAnchor"
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
<div
|
||||
className="c1"
|
||||
>
|
||||
<EuiLink
|
||||
className="c2"
|
||||
href="#/services/opbeans-python/errors/f3ac95493913cc7a3cfec30a19d2120a?rangeFrom=now-24h&rangeTo=now&refreshPaused=true&refreshInterval=0"
|
||||
onBlur={[Function]}
|
||||
onFocus={[Function]}
|
||||
<span
|
||||
className="euiToolTipAnchor"
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
>
|
||||
<a
|
||||
className="euiLink euiLink--primary c2"
|
||||
href="#/services/opbeans-python/errors/f3ac95493913cc7a3cfec30a19d2120a?rangeFrom=now-24h&rangeTo=now&refreshPaused=true&refreshInterval=0"
|
||||
<Styled(ErrorDetailLink)
|
||||
errorGroupId="f3ac95493913cc7a3cfec30a19d2120a"
|
||||
onBlur={[Function]}
|
||||
onFocus={[Function]}
|
||||
rel="noreferrer"
|
||||
serviceName="opbeans-python"
|
||||
>
|
||||
AssertionError:
|
||||
</a>
|
||||
</EuiLink>
|
||||
</span>
|
||||
<br />
|
||||
<span
|
||||
className="euiToolTipAnchor"
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
>
|
||||
<div
|
||||
className="c3"
|
||||
onBlur={[Function]}
|
||||
onFocus={[Function]}
|
||||
<EuiLink
|
||||
className="c2"
|
||||
href="#/services/opbeans-python/errors/f3ac95493913cc7a3cfec30a19d2120a?rangeFrom=now-24h&rangeTo=now&refreshPaused=true&refreshInterval=0"
|
||||
onBlur={[Function]}
|
||||
onFocus={[Function]}
|
||||
>
|
||||
<a
|
||||
className="euiLink euiLink--primary c2"
|
||||
href="#/services/opbeans-python/errors/f3ac95493913cc7a3cfec30a19d2120a?rangeFrom=now-24h&rangeTo=now&refreshPaused=true&refreshInterval=0"
|
||||
onBlur={[Function]}
|
||||
onFocus={[Function]}
|
||||
rel="noreferrer"
|
||||
>
|
||||
AssertionError:
|
||||
</a>
|
||||
</EuiLink>
|
||||
</Styled(ErrorDetailLink)>
|
||||
</span>
|
||||
<br />
|
||||
<span
|
||||
className="euiToolTipAnchor"
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
>
|
||||
opbeans.views.oopsie
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<styled.div
|
||||
onBlur={[Function]}
|
||||
onFocus={[Function]}
|
||||
>
|
||||
<div
|
||||
className="c3"
|
||||
onBlur={[Function]}
|
||||
onFocus={[Function]}
|
||||
>
|
||||
opbeans.views.oopsie
|
||||
</div>
|
||||
</styled.div>
|
||||
</span>
|
||||
</div>
|
||||
</styled.div>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
|
|
@ -965,18 +1009,24 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
|
|||
<div
|
||||
className="euiTableCellContent euiTableCellContent--overflowingContent"
|
||||
>
|
||||
<EuiLink
|
||||
className="c0"
|
||||
href="#/services/opbeans-python/errors/e90863d04b7a692435305f09bbe8c840?rangeFrom=now-24h&rangeTo=now&refreshPaused=true&refreshInterval=0"
|
||||
<Styled(ErrorDetailLink)
|
||||
className=""
|
||||
errorGroupId="e90863d04b7a692435305f09bbe8c840"
|
||||
serviceName="opbeans-python"
|
||||
>
|
||||
<a
|
||||
className="euiLink euiLink--primary c0"
|
||||
<EuiLink
|
||||
className="c0"
|
||||
href="#/services/opbeans-python/errors/e90863d04b7a692435305f09bbe8c840?rangeFrom=now-24h&rangeTo=now&refreshPaused=true&refreshInterval=0"
|
||||
rel="noreferrer"
|
||||
>
|
||||
e9086
|
||||
</a>
|
||||
</EuiLink>
|
||||
<a
|
||||
className="euiLink euiLink--primary c0"
|
||||
href="#/services/opbeans-python/errors/e90863d04b7a692435305f09bbe8c840?rangeFrom=now-24h&rangeTo=now&refreshPaused=true&refreshInterval=0"
|
||||
rel="noreferrer"
|
||||
>
|
||||
e9086
|
||||
</a>
|
||||
</EuiLink>
|
||||
</Styled(ErrorDetailLink)>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
|
|
@ -995,46 +1045,62 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
|
|||
<div
|
||||
className="euiTableCellContent euiTableCellContent--overflowingContent"
|
||||
>
|
||||
<div
|
||||
className="c1"
|
||||
<styled.div
|
||||
className=""
|
||||
>
|
||||
<span
|
||||
className="euiToolTipAnchor"
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
<div
|
||||
className="c1"
|
||||
>
|
||||
<EuiLink
|
||||
className="c2"
|
||||
href="#/services/opbeans-python/errors/e90863d04b7a692435305f09bbe8c840?rangeFrom=now-24h&rangeTo=now&refreshPaused=true&refreshInterval=0"
|
||||
onBlur={[Function]}
|
||||
onFocus={[Function]}
|
||||
<span
|
||||
className="euiToolTipAnchor"
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
>
|
||||
<a
|
||||
className="euiLink euiLink--primary c2"
|
||||
href="#/services/opbeans-python/errors/e90863d04b7a692435305f09bbe8c840?rangeFrom=now-24h&rangeTo=now&refreshPaused=true&refreshInterval=0"
|
||||
<Styled(ErrorDetailLink)
|
||||
errorGroupId="e90863d04b7a692435305f09bbe8c840"
|
||||
onBlur={[Function]}
|
||||
onFocus={[Function]}
|
||||
rel="noreferrer"
|
||||
serviceName="opbeans-python"
|
||||
>
|
||||
AssertionError: Bad luck!
|
||||
</a>
|
||||
</EuiLink>
|
||||
</span>
|
||||
<br />
|
||||
<span
|
||||
className="euiToolTipAnchor"
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
>
|
||||
<div
|
||||
className="c3"
|
||||
onBlur={[Function]}
|
||||
onFocus={[Function]}
|
||||
<EuiLink
|
||||
className="c2"
|
||||
href="#/services/opbeans-python/errors/e90863d04b7a692435305f09bbe8c840?rangeFrom=now-24h&rangeTo=now&refreshPaused=true&refreshInterval=0"
|
||||
onBlur={[Function]}
|
||||
onFocus={[Function]}
|
||||
>
|
||||
<a
|
||||
className="euiLink euiLink--primary c2"
|
||||
href="#/services/opbeans-python/errors/e90863d04b7a692435305f09bbe8c840?rangeFrom=now-24h&rangeTo=now&refreshPaused=true&refreshInterval=0"
|
||||
onBlur={[Function]}
|
||||
onFocus={[Function]}
|
||||
rel="noreferrer"
|
||||
>
|
||||
AssertionError: Bad luck!
|
||||
</a>
|
||||
</EuiLink>
|
||||
</Styled(ErrorDetailLink)>
|
||||
</span>
|
||||
<br />
|
||||
<span
|
||||
className="euiToolTipAnchor"
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
>
|
||||
opbeans.tasks.update_stats
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<styled.div
|
||||
onBlur={[Function]}
|
||||
onFocus={[Function]}
|
||||
>
|
||||
<div
|
||||
className="c3"
|
||||
onBlur={[Function]}
|
||||
onFocus={[Function]}
|
||||
>
|
||||
opbeans.tasks.update_stats
|
||||
</div>
|
||||
</styled.div>
|
||||
</span>
|
||||
</div>
|
||||
</styled.div>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
|
|
@ -1113,18 +1179,24 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
|
|||
<div
|
||||
className="euiTableCellContent euiTableCellContent--overflowingContent"
|
||||
>
|
||||
<EuiLink
|
||||
className="c0"
|
||||
href="#/services/opbeans-python/errors/8673d8bf7a032e387c101bafbab0d2bc?rangeFrom=now-24h&rangeTo=now&refreshPaused=true&refreshInterval=0"
|
||||
<Styled(ErrorDetailLink)
|
||||
className=""
|
||||
errorGroupId="8673d8bf7a032e387c101bafbab0d2bc"
|
||||
serviceName="opbeans-python"
|
||||
>
|
||||
<a
|
||||
className="euiLink euiLink--primary c0"
|
||||
<EuiLink
|
||||
className="c0"
|
||||
href="#/services/opbeans-python/errors/8673d8bf7a032e387c101bafbab0d2bc?rangeFrom=now-24h&rangeTo=now&refreshPaused=true&refreshInterval=0"
|
||||
rel="noreferrer"
|
||||
>
|
||||
8673d
|
||||
</a>
|
||||
</EuiLink>
|
||||
<a
|
||||
className="euiLink euiLink--primary c0"
|
||||
href="#/services/opbeans-python/errors/8673d8bf7a032e387c101bafbab0d2bc?rangeFrom=now-24h&rangeTo=now&refreshPaused=true&refreshInterval=0"
|
||||
rel="noreferrer"
|
||||
>
|
||||
8673d
|
||||
</a>
|
||||
</EuiLink>
|
||||
</Styled(ErrorDetailLink)>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
|
|
@ -1143,46 +1215,62 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
|
|||
<div
|
||||
className="euiTableCellContent euiTableCellContent--overflowingContent"
|
||||
>
|
||||
<div
|
||||
className="c1"
|
||||
<styled.div
|
||||
className=""
|
||||
>
|
||||
<span
|
||||
className="euiToolTipAnchor"
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
<div
|
||||
className="c1"
|
||||
>
|
||||
<EuiLink
|
||||
className="c2"
|
||||
href="#/services/opbeans-python/errors/8673d8bf7a032e387c101bafbab0d2bc?rangeFrom=now-24h&rangeTo=now&refreshPaused=true&refreshInterval=0"
|
||||
onBlur={[Function]}
|
||||
onFocus={[Function]}
|
||||
<span
|
||||
className="euiToolTipAnchor"
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
>
|
||||
<a
|
||||
className="euiLink euiLink--primary c2"
|
||||
href="#/services/opbeans-python/errors/8673d8bf7a032e387c101bafbab0d2bc?rangeFrom=now-24h&rangeTo=now&refreshPaused=true&refreshInterval=0"
|
||||
<Styled(ErrorDetailLink)
|
||||
errorGroupId="8673d8bf7a032e387c101bafbab0d2bc"
|
||||
onBlur={[Function]}
|
||||
onFocus={[Function]}
|
||||
rel="noreferrer"
|
||||
serviceName="opbeans-python"
|
||||
>
|
||||
Customer with ID 8517 not found
|
||||
</a>
|
||||
</EuiLink>
|
||||
</span>
|
||||
<br />
|
||||
<span
|
||||
className="euiToolTipAnchor"
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
>
|
||||
<div
|
||||
className="c3"
|
||||
onBlur={[Function]}
|
||||
onFocus={[Function]}
|
||||
<EuiLink
|
||||
className="c2"
|
||||
href="#/services/opbeans-python/errors/8673d8bf7a032e387c101bafbab0d2bc?rangeFrom=now-24h&rangeTo=now&refreshPaused=true&refreshInterval=0"
|
||||
onBlur={[Function]}
|
||||
onFocus={[Function]}
|
||||
>
|
||||
<a
|
||||
className="euiLink euiLink--primary c2"
|
||||
href="#/services/opbeans-python/errors/8673d8bf7a032e387c101bafbab0d2bc?rangeFrom=now-24h&rangeTo=now&refreshPaused=true&refreshInterval=0"
|
||||
onBlur={[Function]}
|
||||
onFocus={[Function]}
|
||||
rel="noreferrer"
|
||||
>
|
||||
Customer with ID 8517 not found
|
||||
</a>
|
||||
</EuiLink>
|
||||
</Styled(ErrorDetailLink)>
|
||||
</span>
|
||||
<br />
|
||||
<span
|
||||
className="euiToolTipAnchor"
|
||||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
>
|
||||
opbeans.views.customer
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<styled.div
|
||||
onBlur={[Function]}
|
||||
onFocus={[Function]}
|
||||
>
|
||||
<div
|
||||
className="c3"
|
||||
onBlur={[Function]}
|
||||
onFocus={[Function]}
|
||||
>
|
||||
opbeans.views.customer
|
||||
</div>
|
||||
</styled.div>
|
||||
</span>
|
||||
</div>
|
||||
</styled.div>
|
||||
</div>
|
||||
</td>
|
||||
<td
|
||||
|
|
|
|||
|
|
@ -7,11 +7,11 @@ exports[`ServiceOverview -> List should render columns correctly 1`] = `
|
|||
id="service-name-tooltip"
|
||||
position="top"
|
||||
>
|
||||
<Styled(TransactionOverviewLink)
|
||||
<ForwardRef(Styled(TransactionOverviewLink))
|
||||
serviceName="opbeans-python"
|
||||
>
|
||||
opbeans-python
|
||||
</Styled(TransactionOverviewLink)>
|
||||
</ForwardRef(Styled(TransactionOverviewLink))>
|
||||
</EuiToolTip>
|
||||
`;
|
||||
|
||||
|
|
|
|||
|
|
@ -138,7 +138,15 @@ NodeList [
|
|||
|
||||
exports[`Service Overview -> View should render services, when list is not empty 1`] = `
|
||||
NodeList [
|
||||
<tr
|
||||
.c0 {
|
||||
font-size: 16px;
|
||||
max-width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
<tr
|
||||
class="euiTableRow"
|
||||
>
|
||||
<td
|
||||
|
|
@ -157,7 +165,7 @@ NodeList [
|
|||
class="euiToolTipAnchor"
|
||||
>
|
||||
<a
|
||||
class="euiLink euiLink--primary sc-bdVaJa eQDnXY"
|
||||
class="euiLink euiLink--primary c0"
|
||||
href="#/services/My Go Service/transactions?rangeFrom=now-24h&rangeTo=now&refreshPaused=true&refreshInterval=0"
|
||||
rel="noreferrer"
|
||||
>
|
||||
|
|
@ -236,7 +244,15 @@ NodeList [
|
|||
</div>
|
||||
</td>
|
||||
</tr>,
|
||||
<tr
|
||||
.c0 {
|
||||
font-size: 16px;
|
||||
max-width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
<tr
|
||||
class="euiTableRow"
|
||||
>
|
||||
<td
|
||||
|
|
@ -255,7 +271,7 @@ NodeList [
|
|||
class="euiToolTipAnchor"
|
||||
>
|
||||
<a
|
||||
class="euiLink euiLink--primary sc-bdVaJa eQDnXY"
|
||||
class="euiLink euiLink--primary c0"
|
||||
href="#/services/My Python Service/transactions?rangeFrom=now-24h&rangeTo=now&refreshPaused=true&refreshInterval=0"
|
||||
rel="noreferrer"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -27,12 +27,10 @@ interface IContainerStyleProps {
|
|||
|
||||
interface IBarStyleProps {
|
||||
type: ItemType;
|
||||
left: number;
|
||||
width: number;
|
||||
color: string;
|
||||
}
|
||||
|
||||
const Container = styled<IContainerStyleProps, 'div'>('div')`
|
||||
const Container = styled.div<IContainerStyleProps>`
|
||||
position: relative;
|
||||
display: block;
|
||||
user-select: none;
|
||||
|
|
@ -50,7 +48,7 @@ const Container = styled<IContainerStyleProps, 'div'>('div')`
|
|||
}
|
||||
`;
|
||||
|
||||
const ItemBar = styled<IBarStyleProps, any>('div')`
|
||||
const ItemBar = styled.div<IBarStyleProps>`
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
height: ${px(unit)};
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
*/
|
||||
|
||||
import { shallow, ShallowWrapper } from 'enzyme';
|
||||
import 'jest-styled-components';
|
||||
import React from 'react';
|
||||
import { APMError } from '../../../../../../typings/es_schemas/ui/APMError';
|
||||
import { DiscoverErrorLink } from '../DiscoverErrorLink';
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
*/
|
||||
|
||||
import { shallow, ShallowWrapper } from 'enzyme';
|
||||
import 'jest-styled-components';
|
||||
import React from 'react';
|
||||
import { APMError } from '../../../../../../typings/es_schemas/ui/APMError';
|
||||
import { DiscoverErrorLink } from '../DiscoverErrorLink';
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
*/
|
||||
|
||||
import { shallow } from 'enzyme';
|
||||
import 'jest-styled-components';
|
||||
import React from 'react';
|
||||
import { Transaction } from '../../../../../../typings/es_schemas/ui/Transaction';
|
||||
import {
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@
|
|||
* you may not use this file except in compliance with the Elastic License.
|
||||
*/
|
||||
|
||||
import 'jest-styled-components';
|
||||
import { Transaction } from '../../../../../../typings/es_schemas/ui/Transaction';
|
||||
// @ts-ignore
|
||||
import configureStore from '../../../../../store/config/configureStore';
|
||||
|
|
|
|||
|
|
@ -8,12 +8,12 @@ import React from 'react';
|
|||
import { EuiButtonEmpty, EuiTitle } from '@elastic/eui';
|
||||
import styled from 'styled-components';
|
||||
|
||||
const Button = styled(EuiButtonEmpty).attrs({
|
||||
const Button = styled(EuiButtonEmpty).attrs(() => ({
|
||||
contentProps: {
|
||||
className: 'alignLeft'
|
||||
},
|
||||
color: 'text'
|
||||
})`
|
||||
}))`
|
||||
width: 100%;
|
||||
|
||||
.alignLeft {
|
||||
|
|
|
|||
|
|
@ -4,10 +4,11 @@
|
|||
* you may not use this file except in compliance with the Elastic License.
|
||||
*/
|
||||
|
||||
import React, { useState, useMemo, useEffect } from 'react';
|
||||
import React, { FunctionComponent, useState, useMemo, useEffect } from 'react';
|
||||
import {
|
||||
EuiTitle,
|
||||
EuiPopover,
|
||||
EuiPopoverProps,
|
||||
EuiSelectable,
|
||||
EuiSpacer,
|
||||
EuiHorizontalRule,
|
||||
|
|
@ -23,9 +24,11 @@ import { FilterBadgeList } from './FilterBadgeList';
|
|||
import { unit, px } from '../../../../style/variables';
|
||||
import { FilterTitleButton } from './FilterTitleButton';
|
||||
|
||||
const Popover = styled(EuiPopover).attrs({
|
||||
anchorClassName: 'anchor'
|
||||
})`
|
||||
const Popover = styled((EuiPopover as unknown) as FunctionComponent).attrs(
|
||||
() => ({
|
||||
anchorClassName: 'anchor'
|
||||
})
|
||||
)<EuiPopoverProps & { className?: string; id?: string }>`
|
||||
.anchor {
|
||||
display: block;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
*/
|
||||
|
||||
import { mount, ReactWrapper, shallow } from 'enzyme';
|
||||
import 'jest-styled-components';
|
||||
import React from 'react';
|
||||
import { IStackframe } from '../../../../../typings/es_schemas/raw/fields/Stackframe';
|
||||
import { Stackframe } from '../Stackframe';
|
||||
|
|
|
|||
|
|
@ -394,8 +394,72 @@ exports[`Stackframe when stackframe has source lines should render correctly 1`]
|
|||
className="c8"
|
||||
>
|
||||
<SyntaxHighlighter
|
||||
CodeTag={[Function]}
|
||||
PreTag={[Function]}
|
||||
CodeTag={
|
||||
Object {
|
||||
"$$typeof": Symbol(react.forward_ref),
|
||||
"attrs": Array [],
|
||||
"componentStyle": ComponentStyle {
|
||||
"baseHash": 573909505,
|
||||
"componentId": "sc-fzXfLO",
|
||||
"isStatic": false,
|
||||
"rules": Array [
|
||||
"
|
||||
position: relative;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
white-space: pre;
|
||||
z-index: 2;
|
||||
",
|
||||
],
|
||||
"staticRulesId": "",
|
||||
},
|
||||
"displayName": "styled.code",
|
||||
"foldedComponentIds": Array [],
|
||||
"render": [Function],
|
||||
"styledComponentId": "sc-fzXfLO",
|
||||
"target": "code",
|
||||
"toString": [Function],
|
||||
"warnTooManyClasses": [Function],
|
||||
"withComponent": [Function],
|
||||
}
|
||||
}
|
||||
PreTag={
|
||||
Object {
|
||||
"$$typeof": Symbol(react.forward_ref),
|
||||
"attrs": Array [],
|
||||
"componentStyle": ComponentStyle {
|
||||
"baseHash": 3487560131,
|
||||
"componentId": "sc-AykKK",
|
||||
"isStatic": false,
|
||||
"rules": Array [
|
||||
"
|
||||
// Override all styles
|
||||
margin: 0;
|
||||
color: inherit;
|
||||
background: inherit;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
overflow: initial;
|
||||
padding: 0 ",
|
||||
"18px",
|
||||
";
|
||||
line-height: ",
|
||||
"18px",
|
||||
";
|
||||
",
|
||||
],
|
||||
"staticRulesId": "",
|
||||
},
|
||||
"displayName": "styled.pre",
|
||||
"foldedComponentIds": Array [],
|
||||
"render": [Function],
|
||||
"styledComponentId": "sc-AykKK",
|
||||
"target": "pre",
|
||||
"toString": [Function],
|
||||
"warnTooManyClasses": [Function],
|
||||
"withComponent": [Function],
|
||||
}
|
||||
}
|
||||
customStyle={
|
||||
Object {
|
||||
"overflowX": null,
|
||||
|
|
@ -553,8 +617,72 @@ exports[`Stackframe when stackframe has source lines should render correctly 1`]
|
|||
</styled.pre>
|
||||
</SyntaxHighlighter>
|
||||
<SyntaxHighlighter
|
||||
CodeTag={[Function]}
|
||||
PreTag={[Function]}
|
||||
CodeTag={
|
||||
Object {
|
||||
"$$typeof": Symbol(react.forward_ref),
|
||||
"attrs": Array [],
|
||||
"componentStyle": ComponentStyle {
|
||||
"baseHash": 573909505,
|
||||
"componentId": "sc-fzXfLO",
|
||||
"isStatic": false,
|
||||
"rules": Array [
|
||||
"
|
||||
position: relative;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
white-space: pre;
|
||||
z-index: 2;
|
||||
",
|
||||
],
|
||||
"staticRulesId": "",
|
||||
},
|
||||
"displayName": "styled.code",
|
||||
"foldedComponentIds": Array [],
|
||||
"render": [Function],
|
||||
"styledComponentId": "sc-fzXfLO",
|
||||
"target": "code",
|
||||
"toString": [Function],
|
||||
"warnTooManyClasses": [Function],
|
||||
"withComponent": [Function],
|
||||
}
|
||||
}
|
||||
PreTag={
|
||||
Object {
|
||||
"$$typeof": Symbol(react.forward_ref),
|
||||
"attrs": Array [],
|
||||
"componentStyle": ComponentStyle {
|
||||
"baseHash": 3487560131,
|
||||
"componentId": "sc-AykKK",
|
||||
"isStatic": false,
|
||||
"rules": Array [
|
||||
"
|
||||
// Override all styles
|
||||
margin: 0;
|
||||
color: inherit;
|
||||
background: inherit;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
overflow: initial;
|
||||
padding: 0 ",
|
||||
"18px",
|
||||
";
|
||||
line-height: ",
|
||||
"18px",
|
||||
";
|
||||
",
|
||||
],
|
||||
"staticRulesId": "",
|
||||
},
|
||||
"displayName": "styled.pre",
|
||||
"foldedComponentIds": Array [],
|
||||
"render": [Function],
|
||||
"styledComponentId": "sc-AykKK",
|
||||
"target": "pre",
|
||||
"toString": [Function],
|
||||
"warnTooManyClasses": [Function],
|
||||
"withComponent": [Function],
|
||||
}
|
||||
}
|
||||
customStyle={
|
||||
Object {
|
||||
"overflowX": null,
|
||||
|
|
@ -713,8 +841,72 @@ exports[`Stackframe when stackframe has source lines should render correctly 1`]
|
|||
</styled.pre>
|
||||
</SyntaxHighlighter>
|
||||
<SyntaxHighlighter
|
||||
CodeTag={[Function]}
|
||||
PreTag={[Function]}
|
||||
CodeTag={
|
||||
Object {
|
||||
"$$typeof": Symbol(react.forward_ref),
|
||||
"attrs": Array [],
|
||||
"componentStyle": ComponentStyle {
|
||||
"baseHash": 573909505,
|
||||
"componentId": "sc-fzXfLO",
|
||||
"isStatic": false,
|
||||
"rules": Array [
|
||||
"
|
||||
position: relative;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
white-space: pre;
|
||||
z-index: 2;
|
||||
",
|
||||
],
|
||||
"staticRulesId": "",
|
||||
},
|
||||
"displayName": "styled.code",
|
||||
"foldedComponentIds": Array [],
|
||||
"render": [Function],
|
||||
"styledComponentId": "sc-fzXfLO",
|
||||
"target": "code",
|
||||
"toString": [Function],
|
||||
"warnTooManyClasses": [Function],
|
||||
"withComponent": [Function],
|
||||
}
|
||||
}
|
||||
PreTag={
|
||||
Object {
|
||||
"$$typeof": Symbol(react.forward_ref),
|
||||
"attrs": Array [],
|
||||
"componentStyle": ComponentStyle {
|
||||
"baseHash": 3487560131,
|
||||
"componentId": "sc-AykKK",
|
||||
"isStatic": false,
|
||||
"rules": Array [
|
||||
"
|
||||
// Override all styles
|
||||
margin: 0;
|
||||
color: inherit;
|
||||
background: inherit;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
overflow: initial;
|
||||
padding: 0 ",
|
||||
"18px",
|
||||
";
|
||||
line-height: ",
|
||||
"18px",
|
||||
";
|
||||
",
|
||||
],
|
||||
"staticRulesId": "",
|
||||
},
|
||||
"displayName": "styled.pre",
|
||||
"foldedComponentIds": Array [],
|
||||
"render": [Function],
|
||||
"styledComponentId": "sc-AykKK",
|
||||
"target": "pre",
|
||||
"toString": [Function],
|
||||
"warnTooManyClasses": [Function],
|
||||
"withComponent": [Function],
|
||||
}
|
||||
}
|
||||
customStyle={
|
||||
Object {
|
||||
"overflowX": null,
|
||||
|
|
@ -883,8 +1075,72 @@ exports[`Stackframe when stackframe has source lines should render correctly 1`]
|
|||
</styled.pre>
|
||||
</SyntaxHighlighter>
|
||||
<SyntaxHighlighter
|
||||
CodeTag={[Function]}
|
||||
PreTag={[Function]}
|
||||
CodeTag={
|
||||
Object {
|
||||
"$$typeof": Symbol(react.forward_ref),
|
||||
"attrs": Array [],
|
||||
"componentStyle": ComponentStyle {
|
||||
"baseHash": 573909505,
|
||||
"componentId": "sc-fzXfLO",
|
||||
"isStatic": false,
|
||||
"rules": Array [
|
||||
"
|
||||
position: relative;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
white-space: pre;
|
||||
z-index: 2;
|
||||
",
|
||||
],
|
||||
"staticRulesId": "",
|
||||
},
|
||||
"displayName": "styled.code",
|
||||
"foldedComponentIds": Array [],
|
||||
"render": [Function],
|
||||
"styledComponentId": "sc-fzXfLO",
|
||||
"target": "code",
|
||||
"toString": [Function],
|
||||
"warnTooManyClasses": [Function],
|
||||
"withComponent": [Function],
|
||||
}
|
||||
}
|
||||
PreTag={
|
||||
Object {
|
||||
"$$typeof": Symbol(react.forward_ref),
|
||||
"attrs": Array [],
|
||||
"componentStyle": ComponentStyle {
|
||||
"baseHash": 3487560131,
|
||||
"componentId": "sc-AykKK",
|
||||
"isStatic": false,
|
||||
"rules": Array [
|
||||
"
|
||||
// Override all styles
|
||||
margin: 0;
|
||||
color: inherit;
|
||||
background: inherit;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
overflow: initial;
|
||||
padding: 0 ",
|
||||
"18px",
|
||||
";
|
||||
line-height: ",
|
||||
"18px",
|
||||
";
|
||||
",
|
||||
],
|
||||
"staticRulesId": "",
|
||||
},
|
||||
"displayName": "styled.pre",
|
||||
"foldedComponentIds": Array [],
|
||||
"render": [Function],
|
||||
"styledComponentId": "sc-AykKK",
|
||||
"target": "pre",
|
||||
"toString": [Function],
|
||||
"warnTooManyClasses": [Function],
|
||||
"withComponent": [Function],
|
||||
}
|
||||
}
|
||||
customStyle={
|
||||
Object {
|
||||
"overflowX": null,
|
||||
|
|
@ -1070,8 +1326,72 @@ exports[`Stackframe when stackframe has source lines should render correctly 1`]
|
|||
</styled.pre>
|
||||
</SyntaxHighlighter>
|
||||
<SyntaxHighlighter
|
||||
CodeTag={[Function]}
|
||||
PreTag={[Function]}
|
||||
CodeTag={
|
||||
Object {
|
||||
"$$typeof": Symbol(react.forward_ref),
|
||||
"attrs": Array [],
|
||||
"componentStyle": ComponentStyle {
|
||||
"baseHash": 573909505,
|
||||
"componentId": "sc-fzXfLO",
|
||||
"isStatic": false,
|
||||
"rules": Array [
|
||||
"
|
||||
position: relative;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
white-space: pre;
|
||||
z-index: 2;
|
||||
",
|
||||
],
|
||||
"staticRulesId": "",
|
||||
},
|
||||
"displayName": "styled.code",
|
||||
"foldedComponentIds": Array [],
|
||||
"render": [Function],
|
||||
"styledComponentId": "sc-fzXfLO",
|
||||
"target": "code",
|
||||
"toString": [Function],
|
||||
"warnTooManyClasses": [Function],
|
||||
"withComponent": [Function],
|
||||
}
|
||||
}
|
||||
PreTag={
|
||||
Object {
|
||||
"$$typeof": Symbol(react.forward_ref),
|
||||
"attrs": Array [],
|
||||
"componentStyle": ComponentStyle {
|
||||
"baseHash": 3487560131,
|
||||
"componentId": "sc-AykKK",
|
||||
"isStatic": false,
|
||||
"rules": Array [
|
||||
"
|
||||
// Override all styles
|
||||
margin: 0;
|
||||
color: inherit;
|
||||
background: inherit;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
overflow: initial;
|
||||
padding: 0 ",
|
||||
"18px",
|
||||
";
|
||||
line-height: ",
|
||||
"18px",
|
||||
";
|
||||
",
|
||||
],
|
||||
"staticRulesId": "",
|
||||
},
|
||||
"displayName": "styled.pre",
|
||||
"foldedComponentIds": Array [],
|
||||
"render": [Function],
|
||||
"styledComponentId": "sc-AykKK",
|
||||
"target": "pre",
|
||||
"toString": [Function],
|
||||
"warnTooManyClasses": [Function],
|
||||
"withComponent": [Function],
|
||||
}
|
||||
}
|
||||
customStyle={
|
||||
Object {
|
||||
"overflowX": null,
|
||||
|
|
|
|||
|
|
@ -24,9 +24,9 @@ exports[`StickyProperties should render entire component 1`] = `
|
|||
<PropertyLabel>
|
||||
<EuiToolTip
|
||||
content={
|
||||
<styled.span>
|
||||
<ForwardRef(styled.span)>
|
||||
url.full
|
||||
</styled.span>
|
||||
</ForwardRef(styled.span)>
|
||||
}
|
||||
delay="regular"
|
||||
position="top"
|
||||
|
|
@ -59,9 +59,9 @@ exports[`StickyProperties should render entire component 1`] = `
|
|||
<PropertyLabel>
|
||||
<EuiToolTip
|
||||
content={
|
||||
<styled.span>
|
||||
<ForwardRef(styled.span)>
|
||||
http.request.method
|
||||
</styled.span>
|
||||
</ForwardRef(styled.span)>
|
||||
}
|
||||
delay="regular"
|
||||
position="top"
|
||||
|
|
@ -88,9 +88,9 @@ exports[`StickyProperties should render entire component 1`] = `
|
|||
<PropertyLabel>
|
||||
<EuiToolTip
|
||||
content={
|
||||
<styled.span>
|
||||
<ForwardRef(styled.span)>
|
||||
error.exception.handled
|
||||
</styled.span>
|
||||
</ForwardRef(styled.span)>
|
||||
}
|
||||
delay="regular"
|
||||
position="top"
|
||||
|
|
@ -117,9 +117,9 @@ exports[`StickyProperties should render entire component 1`] = `
|
|||
<PropertyLabel>
|
||||
<EuiToolTip
|
||||
content={
|
||||
<styled.span>
|
||||
<ForwardRef(styled.span)>
|
||||
user.id
|
||||
</styled.span>
|
||||
</ForwardRef(styled.span)>
|
||||
}
|
||||
delay="regular"
|
||||
position="top"
|
||||
|
|
|
|||
|
|
@ -6,28 +6,28 @@ Array [
|
|||
"color": "#3185fc",
|
||||
"disabled": undefined,
|
||||
"onClick": [Function],
|
||||
"text": <styled.span>
|
||||
"text": <ForwardRef(styled.span)>
|
||||
Avg.
|
||||
<styled.span>
|
||||
<ForwardRef(styled.span)>
|
||||
468 ms
|
||||
</styled.span>
|
||||
</styled.span>,
|
||||
</ForwardRef(styled.span)>
|
||||
</ForwardRef(styled.span)>,
|
||||
},
|
||||
Object {
|
||||
"color": "#e6c220",
|
||||
"disabled": undefined,
|
||||
"onClick": [Function],
|
||||
"text": <styled.span>
|
||||
"text": <ForwardRef(styled.span)>
|
||||
95th percentile
|
||||
</styled.span>,
|
||||
</ForwardRef(styled.span)>,
|
||||
},
|
||||
Object {
|
||||
"color": "#f98510",
|
||||
"disabled": undefined,
|
||||
"onClick": [Function],
|
||||
"text": <styled.span>
|
||||
"text": <ForwardRef(styled.span)>
|
||||
99th percentile
|
||||
</styled.span>,
|
||||
</ForwardRef(styled.span)>,
|
||||
},
|
||||
]
|
||||
`;
|
||||
|
|
@ -2703,66 +2703,112 @@ Array [
|
|||
display: inline-block;
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
>
|
||||
<styled.div>
|
||||
<div
|
||||
className="c1"
|
||||
disabled={false}
|
||||
fontSize="12px"
|
||||
onClick={[Function]}
|
||||
className="c0"
|
||||
>
|
||||
<span
|
||||
className="c2"
|
||||
color="#3185fc"
|
||||
radius={11}
|
||||
/>
|
||||
<span
|
||||
className="c3"
|
||||
<styled.div
|
||||
clickable={true}
|
||||
disabled={false}
|
||||
fontSize="12px"
|
||||
onClick={[Function]}
|
||||
>
|
||||
Avg.
|
||||
<span
|
||||
className="c4"
|
||||
<div
|
||||
className="c1"
|
||||
disabled={false}
|
||||
fontSize="12px"
|
||||
onClick={[Function]}
|
||||
>
|
||||
468 ms
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="c1"
|
||||
disabled={false}
|
||||
fontSize="12px"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<span
|
||||
className="c5"
|
||||
color="#e6c220"
|
||||
radius={11}
|
||||
/>
|
||||
<span
|
||||
className="c3"
|
||||
<styled.span
|
||||
color="#3185fc"
|
||||
radius={11}
|
||||
>
|
||||
<span
|
||||
className="c2"
|
||||
color="#3185fc"
|
||||
radius={11}
|
||||
/>
|
||||
</styled.span>
|
||||
<styled.span>
|
||||
<span
|
||||
className="c3"
|
||||
>
|
||||
Avg.
|
||||
<styled.span>
|
||||
<span
|
||||
className="c4"
|
||||
>
|
||||
468 ms
|
||||
</span>
|
||||
</styled.span>
|
||||
</span>
|
||||
</styled.span>
|
||||
</div>
|
||||
</styled.div>
|
||||
<styled.div
|
||||
clickable={true}
|
||||
disabled={false}
|
||||
fontSize="12px"
|
||||
onClick={[Function]}
|
||||
>
|
||||
95th percentile
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="c1"
|
||||
disabled={false}
|
||||
fontSize="12px"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<span
|
||||
className="c6"
|
||||
color="#f98510"
|
||||
radius={11}
|
||||
/>
|
||||
<span
|
||||
className="c3"
|
||||
<div
|
||||
className="c1"
|
||||
disabled={false}
|
||||
fontSize="12px"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<styled.span
|
||||
color="#e6c220"
|
||||
radius={11}
|
||||
>
|
||||
<span
|
||||
className="c5"
|
||||
color="#e6c220"
|
||||
radius={11}
|
||||
/>
|
||||
</styled.span>
|
||||
<styled.span>
|
||||
<span
|
||||
className="c3"
|
||||
>
|
||||
95th percentile
|
||||
</span>
|
||||
</styled.span>
|
||||
</div>
|
||||
</styled.div>
|
||||
<styled.div
|
||||
clickable={true}
|
||||
disabled={false}
|
||||
fontSize="12px"
|
||||
onClick={[Function]}
|
||||
>
|
||||
99th percentile
|
||||
</span>
|
||||
<div
|
||||
className="c1"
|
||||
disabled={false}
|
||||
fontSize="12px"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<styled.span
|
||||
color="#f98510"
|
||||
radius={11}
|
||||
>
|
||||
<span
|
||||
className="c6"
|
||||
color="#f98510"
|
||||
radius={11}
|
||||
/>
|
||||
</styled.span>
|
||||
<styled.span>
|
||||
<span
|
||||
className="c3"
|
||||
>
|
||||
99th percentile
|
||||
</span>
|
||||
</styled.span>
|
||||
</div>
|
||||
</styled.div>
|
||||
</div>
|
||||
</div>,
|
||||
</styled.div>,
|
||||
]
|
||||
`;
|
||||
|
||||
|
|
@ -5077,85 +5123,159 @@ Array [
|
|||
}
|
||||
}
|
||||
>
|
||||
<div
|
||||
className="c0"
|
||||
>
|
||||
<styled.div>
|
||||
<div
|
||||
className="c1"
|
||||
className="c0"
|
||||
>
|
||||
1502283720
|
||||
<styled.div>
|
||||
<div
|
||||
className="c1"
|
||||
>
|
||||
1502283720
|
||||
</div>
|
||||
</styled.div>
|
||||
<styled.div>
|
||||
<div
|
||||
className="c2"
|
||||
>
|
||||
<styled.div>
|
||||
<div
|
||||
className="c3"
|
||||
>
|
||||
<Styled(Legend)
|
||||
color="#3185fc"
|
||||
radius={8}
|
||||
text="Avg."
|
||||
>
|
||||
<styled.div
|
||||
className="c4"
|
||||
clickable={false}
|
||||
disabled={false}
|
||||
fontSize="12px"
|
||||
>
|
||||
<div
|
||||
className="c5 c4"
|
||||
disabled={false}
|
||||
fontSize="12px"
|
||||
>
|
||||
<styled.span
|
||||
color="#3185fc"
|
||||
radius={8}
|
||||
>
|
||||
<span
|
||||
className="c6"
|
||||
color="#3185fc"
|
||||
radius={8}
|
||||
/>
|
||||
</styled.span>
|
||||
Avg.
|
||||
</div>
|
||||
</styled.div>
|
||||
</Styled(Legend)>
|
||||
<styled.div>
|
||||
<div
|
||||
className="c7"
|
||||
>
|
||||
438704.4
|
||||
</div>
|
||||
</styled.div>
|
||||
</div>
|
||||
</styled.div>
|
||||
<styled.div>
|
||||
<div
|
||||
className="c3"
|
||||
>
|
||||
<Styled(Legend)
|
||||
color="#e6c220"
|
||||
radius={8}
|
||||
text="95th"
|
||||
>
|
||||
<styled.div
|
||||
className="c4"
|
||||
clickable={false}
|
||||
disabled={false}
|
||||
fontSize="12px"
|
||||
>
|
||||
<div
|
||||
className="c5 c4"
|
||||
disabled={false}
|
||||
fontSize="12px"
|
||||
>
|
||||
<styled.span
|
||||
color="#e6c220"
|
||||
radius={8}
|
||||
>
|
||||
<span
|
||||
className="c8"
|
||||
color="#e6c220"
|
||||
radius={8}
|
||||
/>
|
||||
</styled.span>
|
||||
95th
|
||||
</div>
|
||||
</styled.div>
|
||||
</Styled(Legend)>
|
||||
<styled.div>
|
||||
<div
|
||||
className="c7"
|
||||
>
|
||||
1557383.999999999
|
||||
</div>
|
||||
</styled.div>
|
||||
</div>
|
||||
</styled.div>
|
||||
<styled.div>
|
||||
<div
|
||||
className="c3"
|
||||
>
|
||||
<Styled(Legend)
|
||||
color="#f98510"
|
||||
radius={8}
|
||||
text="99th"
|
||||
>
|
||||
<styled.div
|
||||
className="c4"
|
||||
clickable={false}
|
||||
disabled={false}
|
||||
fontSize="12px"
|
||||
>
|
||||
<div
|
||||
className="c5 c4"
|
||||
disabled={false}
|
||||
fontSize="12px"
|
||||
>
|
||||
<styled.span
|
||||
color="#f98510"
|
||||
radius={8}
|
||||
>
|
||||
<span
|
||||
className="c9"
|
||||
color="#f98510"
|
||||
radius={8}
|
||||
/>
|
||||
</styled.span>
|
||||
99th
|
||||
</div>
|
||||
</styled.div>
|
||||
</Styled(Legend)>
|
||||
<styled.div>
|
||||
<div
|
||||
className="c7"
|
||||
>
|
||||
1820377.1200000006
|
||||
</div>
|
||||
</styled.div>
|
||||
</div>
|
||||
</styled.div>
|
||||
</div>
|
||||
</styled.div>
|
||||
<styled.div>
|
||||
<div
|
||||
className="c10"
|
||||
/>
|
||||
</styled.div>
|
||||
</div>
|
||||
<div
|
||||
className="c2"
|
||||
>
|
||||
<div
|
||||
className="c3"
|
||||
>
|
||||
<div
|
||||
className="c4 c5"
|
||||
disabled={false}
|
||||
fontSize="12px"
|
||||
>
|
||||
<span
|
||||
className="c6"
|
||||
color="#3185fc"
|
||||
radius={8}
|
||||
/>
|
||||
Avg.
|
||||
</div>
|
||||
<div
|
||||
className="c7"
|
||||
>
|
||||
438704.4
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="c3"
|
||||
>
|
||||
<div
|
||||
className="c4 c5"
|
||||
disabled={false}
|
||||
fontSize="12px"
|
||||
>
|
||||
<span
|
||||
className="c8"
|
||||
color="#e6c220"
|
||||
radius={8}
|
||||
/>
|
||||
95th
|
||||
</div>
|
||||
<div
|
||||
className="c7"
|
||||
>
|
||||
1557383.999999999
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="c3"
|
||||
>
|
||||
<div
|
||||
className="c4 c5"
|
||||
disabled={false}
|
||||
fontSize="12px"
|
||||
>
|
||||
<span
|
||||
className="c9"
|
||||
color="#f98510"
|
||||
radius={8}
|
||||
/>
|
||||
99th
|
||||
</div>
|
||||
<div
|
||||
className="c7"
|
||||
>
|
||||
1820377.1200000006
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="c10"
|
||||
/>
|
||||
</div>
|
||||
</styled.div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -5740,66 +5860,112 @@ Array [
|
|||
display: inline-block;
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
>
|
||||
<styled.div>
|
||||
<div
|
||||
className="c1"
|
||||
disabled={false}
|
||||
fontSize="12px"
|
||||
onClick={[Function]}
|
||||
className="c0"
|
||||
>
|
||||
<span
|
||||
className="c2"
|
||||
color="#3185fc"
|
||||
radius={11}
|
||||
/>
|
||||
<span
|
||||
className="c3"
|
||||
<styled.div
|
||||
clickable={true}
|
||||
disabled={false}
|
||||
fontSize="12px"
|
||||
onClick={[Function]}
|
||||
>
|
||||
Avg.
|
||||
<span
|
||||
className="c4"
|
||||
<div
|
||||
className="c1"
|
||||
disabled={false}
|
||||
fontSize="12px"
|
||||
onClick={[Function]}
|
||||
>
|
||||
468 ms
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="c1"
|
||||
disabled={false}
|
||||
fontSize="12px"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<span
|
||||
className="c5"
|
||||
color="#e6c220"
|
||||
radius={11}
|
||||
/>
|
||||
<span
|
||||
className="c3"
|
||||
<styled.span
|
||||
color="#3185fc"
|
||||
radius={11}
|
||||
>
|
||||
<span
|
||||
className="c2"
|
||||
color="#3185fc"
|
||||
radius={11}
|
||||
/>
|
||||
</styled.span>
|
||||
<styled.span>
|
||||
<span
|
||||
className="c3"
|
||||
>
|
||||
Avg.
|
||||
<styled.span>
|
||||
<span
|
||||
className="c4"
|
||||
>
|
||||
468 ms
|
||||
</span>
|
||||
</styled.span>
|
||||
</span>
|
||||
</styled.span>
|
||||
</div>
|
||||
</styled.div>
|
||||
<styled.div
|
||||
clickable={true}
|
||||
disabled={false}
|
||||
fontSize="12px"
|
||||
onClick={[Function]}
|
||||
>
|
||||
95th percentile
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className="c1"
|
||||
disabled={false}
|
||||
fontSize="12px"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<span
|
||||
className="c6"
|
||||
color="#f98510"
|
||||
radius={11}
|
||||
/>
|
||||
<span
|
||||
className="c3"
|
||||
<div
|
||||
className="c1"
|
||||
disabled={false}
|
||||
fontSize="12px"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<styled.span
|
||||
color="#e6c220"
|
||||
radius={11}
|
||||
>
|
||||
<span
|
||||
className="c5"
|
||||
color="#e6c220"
|
||||
radius={11}
|
||||
/>
|
||||
</styled.span>
|
||||
<styled.span>
|
||||
<span
|
||||
className="c3"
|
||||
>
|
||||
95th percentile
|
||||
</span>
|
||||
</styled.span>
|
||||
</div>
|
||||
</styled.div>
|
||||
<styled.div
|
||||
clickable={true}
|
||||
disabled={false}
|
||||
fontSize="12px"
|
||||
onClick={[Function]}
|
||||
>
|
||||
99th percentile
|
||||
</span>
|
||||
<div
|
||||
className="c1"
|
||||
disabled={false}
|
||||
fontSize="12px"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<styled.span
|
||||
color="#f98510"
|
||||
radius={11}
|
||||
>
|
||||
<span
|
||||
className="c6"
|
||||
color="#f98510"
|
||||
radius={11}
|
||||
/>
|
||||
</styled.span>
|
||||
<styled.span>
|
||||
<span
|
||||
className="c3"
|
||||
>
|
||||
99th percentile
|
||||
</span>
|
||||
</styled.span>
|
||||
</div>
|
||||
</styled.div>
|
||||
</div>
|
||||
</div>,
|
||||
</styled.div>,
|
||||
]
|
||||
`;
|
||||
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -540,19 +540,32 @@ exports[`Timeline should render with data 1`] = `
|
|||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
>
|
||||
<div
|
||||
className="c0"
|
||||
<styled.div
|
||||
clickable={true}
|
||||
disabled={false}
|
||||
fontSize="12px"
|
||||
onBlur={[Function]}
|
||||
onFocus={[Function]}
|
||||
>
|
||||
<span
|
||||
className="c1"
|
||||
color="#98a2b3"
|
||||
radius={11}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className="c0"
|
||||
disabled={false}
|
||||
fontSize="12px"
|
||||
onBlur={[Function]}
|
||||
onFocus={[Function]}
|
||||
>
|
||||
<styled.span
|
||||
color="#98a2b3"
|
||||
radius={11}
|
||||
>
|
||||
<span
|
||||
className="c1"
|
||||
color="#98a2b3"
|
||||
radius={11}
|
||||
/>
|
||||
</styled.span>
|
||||
</div>
|
||||
</styled.div>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
|
|
@ -569,19 +582,32 @@ exports[`Timeline should render with data 1`] = `
|
|||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
>
|
||||
<div
|
||||
className="c0"
|
||||
<styled.div
|
||||
clickable={true}
|
||||
disabled={false}
|
||||
fontSize="12px"
|
||||
onBlur={[Function]}
|
||||
onFocus={[Function]}
|
||||
>
|
||||
<span
|
||||
className="c1"
|
||||
color="#98a2b3"
|
||||
radius={11}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className="c0"
|
||||
disabled={false}
|
||||
fontSize="12px"
|
||||
onBlur={[Function]}
|
||||
onFocus={[Function]}
|
||||
>
|
||||
<styled.span
|
||||
color="#98a2b3"
|
||||
radius={11}
|
||||
>
|
||||
<span
|
||||
className="c1"
|
||||
color="#98a2b3"
|
||||
radius={11}
|
||||
/>
|
||||
</styled.span>
|
||||
</div>
|
||||
</styled.div>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
|
|
@ -598,19 +624,32 @@ exports[`Timeline should render with data 1`] = `
|
|||
onMouseOut={[Function]}
|
||||
onMouseOver={[Function]}
|
||||
>
|
||||
<div
|
||||
className="c0"
|
||||
<styled.div
|
||||
clickable={true}
|
||||
disabled={false}
|
||||
fontSize="12px"
|
||||
onBlur={[Function]}
|
||||
onFocus={[Function]}
|
||||
>
|
||||
<span
|
||||
className="c1"
|
||||
color="#98a2b3"
|
||||
radius={11}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className="c0"
|
||||
disabled={false}
|
||||
fontSize="12px"
|
||||
onBlur={[Function]}
|
||||
onFocus={[Function]}
|
||||
>
|
||||
<styled.span
|
||||
color="#98a2b3"
|
||||
radius={11}
|
||||
>
|
||||
<span
|
||||
className="c1"
|
||||
color="#98a2b3"
|
||||
radius={11}
|
||||
/>
|
||||
</styled.span>
|
||||
</div>
|
||||
</styled.div>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@
|
|||
import { ReactWrapper } from 'enzyme';
|
||||
import enzymeToJson from 'enzyme-to-json';
|
||||
import { Location } from 'history';
|
||||
import 'jest-styled-components';
|
||||
import moment from 'moment';
|
||||
import { Moment } from 'moment-timezone';
|
||||
import React from 'react';
|
||||
|
|
|
|||
|
|
@ -275,10 +275,10 @@ const AutocompleteContainer = styled.div`
|
|||
position: relative;
|
||||
`;
|
||||
|
||||
const SuggestionsPanel = styled(EuiPanel).attrs({
|
||||
const SuggestionsPanel = styled(EuiPanel).attrs(() => ({
|
||||
paddingSize: 'none',
|
||||
hasShadow: true,
|
||||
})`
|
||||
}))`
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
margin-top: 2px;
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@ const SuggestionItemField = styled.div`
|
|||
padding: ${props => props.theme.eui.default.euiSizeXs};
|
||||
`;
|
||||
|
||||
const SuggestionItemIconField = SuggestionItemField.extend<{ suggestionType: string }>`
|
||||
const SuggestionItemIconField = styled(SuggestionItemField)<{ suggestionType: string }>`
|
||||
background-color: ${props => {
|
||||
return tint(0.1, getEuiIconColor(props.theme, props.suggestionType));
|
||||
}};
|
||||
|
|
@ -69,12 +69,12 @@ const SuggestionItemIconField = SuggestionItemField.extend<{ suggestionType: str
|
|||
width: ${props => props.theme.eui.default.euiSizeXl};
|
||||
`;
|
||||
|
||||
const SuggestionItemTextField = SuggestionItemField.extend`
|
||||
const SuggestionItemTextField = styled(SuggestionItemField)`
|
||||
flex: 2 0 0;
|
||||
font-family: ${props => props.theme.eui.default.euiCodeFontFamily};
|
||||
`;
|
||||
|
||||
const SuggestionItemDescriptionField = SuggestionItemField.extend`
|
||||
const SuggestionItemDescriptionField = styled(SuggestionItemField)`
|
||||
flex: 3 0 0;
|
||||
p {
|
||||
display: inline;
|
||||
|
|
|
|||
|
|
@ -14,10 +14,10 @@ The `apps` folder contains the entry point for the UI code, such as for use in K
|
|||
- All components, please use Styled-Components. This also applies to small tweaks to EUI, just use `styled(Component)` and the `attrs` method for always used props. For example:
|
||||
|
||||
```jsx
|
||||
export const Toolbar = styled(EuiPanel).attrs({
|
||||
export const Toolbar = styled(EuiPanel).attrs(() => ({
|
||||
paddingSize: 'none',
|
||||
grow: false,
|
||||
})`
|
||||
}))`
|
||||
margin: -2px;
|
||||
`;
|
||||
```
|
||||
|
|
|
|||
|
|
@ -101,7 +101,7 @@ export class AutocompleteField extends React.Component<
|
|||
}
|
||||
}
|
||||
|
||||
public componentDidUpdate(prevProps: AutocompleteFieldProps, prevState: AutocompleteFieldState) {
|
||||
public componentDidUpdate(prevProps: AutocompleteFieldProps) {
|
||||
const hasNewValue = prevProps.value !== this.props.value;
|
||||
const hasNewSuggestions = prevProps.suggestions !== this.props.suggestions;
|
||||
|
||||
|
|
@ -312,10 +312,10 @@ const AutocompleteContainer = euiStyled.div`
|
|||
position: relative;
|
||||
`;
|
||||
|
||||
const SuggestionsPanel = euiStyled(EuiPanel).attrs({
|
||||
const SuggestionsPanel = euiStyled(EuiPanel).attrs(() => ({
|
||||
paddingSize: 'none',
|
||||
hasShadow: true,
|
||||
})`
|
||||
}))`
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
margin-top: 2px;
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@ const SuggestionItemField = euiStyled.div`
|
|||
padding: ${props => props.theme.eui.euiSizeXS};
|
||||
`;
|
||||
|
||||
const SuggestionItemIconField = SuggestionItemField.extend<{ suggestionType: string }>`
|
||||
const SuggestionItemIconField = euiStyled(SuggestionItemField)<{ suggestionType: string }>`
|
||||
background-color: ${props =>
|
||||
transparentize(0.9, getEuiIconColor(props.theme, props.suggestionType))};
|
||||
color: ${props => getEuiIconColor(props.theme, props.suggestionType)};
|
||||
|
|
@ -66,12 +66,12 @@ const SuggestionItemIconField = SuggestionItemField.extend<{ suggestionType: str
|
|||
width: ${props => props.theme.eui.euiSizeXL};
|
||||
`;
|
||||
|
||||
const SuggestionItemTextField = SuggestionItemField.extend`
|
||||
const SuggestionItemTextField = euiStyled(SuggestionItemField)`
|
||||
flex: 2 0 0;
|
||||
font-family: ${props => props.theme.eui.euiCodeFontFamily};
|
||||
`;
|
||||
|
||||
const SuggestionItemDescriptionField = SuggestionItemField.extend`
|
||||
const SuggestionItemDescriptionField = euiStyled(SuggestionItemField)`
|
||||
flex: 3 0 0;
|
||||
|
||||
p {
|
||||
|
|
|
|||
|
|
@ -8,10 +8,10 @@ import { EuiPanel } from '@elastic/eui';
|
|||
|
||||
import euiStyled from '../../../../../../common/eui_styled_components';
|
||||
|
||||
export const Toolbar = euiStyled(EuiPanel).attrs({
|
||||
export const Toolbar = euiStyled(EuiPanel).attrs(() => ({
|
||||
grow: false,
|
||||
paddingSize: 'none',
|
||||
})`
|
||||
}))`
|
||||
border-top: none;
|
||||
border-right: none;
|
||||
border-left: none;
|
||||
|
|
|
|||
|
|
@ -149,11 +149,11 @@ const goToNextHighlightLabel = i18n.translate(
|
|||
}
|
||||
);
|
||||
|
||||
const ActiveHighlightsIndicator = euiStyled(EuiIcon).attrs({
|
||||
const ActiveHighlightsIndicator = euiStyled(EuiIcon).attrs(({ theme }) => ({
|
||||
type: 'checkInCircleFilled',
|
||||
size: 'm',
|
||||
color: props => props.theme.eui.euiColorAccent,
|
||||
})`
|
||||
color: theme.eui.euiColorAccent,
|
||||
}))`
|
||||
padding-left: ${props => props.theme.eui.paddingSizes.xs};
|
||||
`;
|
||||
|
||||
|
|
|
|||
|
|
@ -238,7 +238,7 @@ export class LogMinimap extends React.Component<LogMinimapProps, LogMinimapState
|
|||
<TimeCursor x1={width / 3} x2={width} y1={timeCursorY} y2={timeCursorY} />
|
||||
<DragTargetArea
|
||||
isGrabbing={Boolean(drag)}
|
||||
innerRef={node => {
|
||||
ref={node => {
|
||||
this.dragTargetArea = node;
|
||||
}}
|
||||
x={0}
|
||||
|
|
|
|||
|
|
@ -8,11 +8,11 @@ import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
|
|||
|
||||
import euiStyled from '../../../../../common/eui_styled_components';
|
||||
|
||||
export const LogStatusbar = euiStyled(EuiFlexGroup).attrs({
|
||||
export const LogStatusbar = euiStyled(EuiFlexGroup).attrs(() => ({
|
||||
alignItems: 'center',
|
||||
gutterSize: 'none',
|
||||
justifyContent: 'flexEnd',
|
||||
})`
|
||||
}))`
|
||||
padding: ${props => props.theme.eui.euiSizeS};
|
||||
border-top: ${props => props.theme.eui.euiBorderThin};
|
||||
max-height: 48px;
|
||||
|
|
|
|||
|
|
@ -79,9 +79,9 @@ const LogColumnHeader: React.FunctionComponent<{
|
|||
</LogColumnHeaderWrapper>
|
||||
);
|
||||
|
||||
const LogColumnHeadersWrapper = euiStyled.div.attrs({
|
||||
const LogColumnHeadersWrapper = euiStyled.div.attrs(() => ({
|
||||
role: 'row',
|
||||
})`
|
||||
}))`
|
||||
align-items: stretch;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
@ -95,9 +95,9 @@ const LogColumnHeadersWrapper = euiStyled.div.attrs({
|
|||
z-index: 1;
|
||||
`;
|
||||
|
||||
const LogColumnHeaderWrapper = LogEntryColumn.extend.attrs({
|
||||
const LogColumnHeaderWrapper = euiStyled(LogEntryColumn).attrs(() => ({
|
||||
role: 'columnheader',
|
||||
})`
|
||||
}))`
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
@ -105,7 +105,7 @@ const LogColumnHeaderWrapper = LogEntryColumn.extend.attrs({
|
|||
overflow: hidden;
|
||||
`;
|
||||
|
||||
const LogColumnHeaderContent = LogEntryColumnContent.extend`
|
||||
const LogColumnHeaderContent = euiStyled(LogEntryColumnContent)`
|
||||
color: ${props => props.theme.eui.euiTitleColor};
|
||||
font-size: ${props => props.theme.eui.euiFontSizeS};
|
||||
font-weight: ${props => props.theme.eui.euiFontWeightSemiBold};
|
||||
|
|
|
|||
|
|
@ -22,9 +22,9 @@ interface LogEntryColumnProps {
|
|||
shrinkWeight: number;
|
||||
}
|
||||
|
||||
export const LogEntryColumn = euiStyled.div.attrs<LogEntryColumnProps>({
|
||||
export const LogEntryColumn = euiStyled.div.attrs(() => ({
|
||||
role: 'cell',
|
||||
})`
|
||||
}))<LogEntryColumnProps>`
|
||||
align-items: stretch;
|
||||
display: flex;
|
||||
flex-basis: ${props => props.baseWidth || '0%'};
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import stringify from 'json-stable-stringify';
|
|||
import { darken, transparentize } from 'polished';
|
||||
import React, { useMemo } from 'react';
|
||||
|
||||
import styled, { css } from '../../../../../../common/eui_styled_components';
|
||||
import euiStyled, { css } from '../../../../../../common/eui_styled_components';
|
||||
import {
|
||||
isFieldColumn,
|
||||
isHighlightFieldColumn,
|
||||
|
|
@ -83,7 +83,7 @@ const unwrappedContentStyle = css`
|
|||
white-space: pre;
|
||||
`;
|
||||
|
||||
const CommaSeparatedLi = styled.li`
|
||||
const CommaSeparatedLi = euiStyled.li`
|
||||
display: inline;
|
||||
&:not(:last-child) {
|
||||
margin-right: 1ex;
|
||||
|
|
@ -93,11 +93,13 @@ const CommaSeparatedLi = styled.li`
|
|||
}
|
||||
`;
|
||||
|
||||
const FieldColumnContent = LogEntryColumnContent.extend.attrs<{
|
||||
interface LogEntryColumnContentProps {
|
||||
isHighlighted: boolean;
|
||||
isHovered: boolean;
|
||||
isWrapped?: boolean;
|
||||
}>({})`
|
||||
}
|
||||
|
||||
const FieldColumnContent = euiStyled(LogEntryColumnContent)<LogEntryColumnContentProps>`
|
||||
background-color: ${props => props.theme.eui.euiColorEmptyShade};
|
||||
text-overflow: ellipsis;
|
||||
|
||||
|
|
|
|||
|
|
@ -47,10 +47,12 @@ export const LogEntryDetailsIconColumn: React.FunctionComponent<LogEntryIconColu
|
|||
);
|
||||
};
|
||||
|
||||
const IconColumnContent = LogEntryColumnContent.extend.attrs<{
|
||||
interface IconColumnContentProps {
|
||||
isHighlighted: boolean;
|
||||
isHovered: boolean;
|
||||
}>({})`
|
||||
}
|
||||
|
||||
const IconColumnContent = euiStyled(LogEntryColumnContent)<IconColumnContentProps>`
|
||||
background-color: ${props => props.theme.eui.euiColorEmptyShade};
|
||||
overflow: hidden;
|
||||
user-select: none;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
import React, { memo, useMemo } from 'react';
|
||||
|
||||
import { css } from '../../../../../../common/eui_styled_components';
|
||||
import euiStyled, { css } from '../../../../../../common/eui_styled_components';
|
||||
import {
|
||||
isConstantSegment,
|
||||
isFieldSegment,
|
||||
|
|
@ -62,11 +62,13 @@ const unwrappedContentStyle = css`
|
|||
white-space: pre;
|
||||
`;
|
||||
|
||||
const MessageColumnContent = LogEntryColumnContent.extend.attrs<{
|
||||
interface MessageColumnContentProps {
|
||||
isHovered: boolean;
|
||||
isHighlighted: boolean;
|
||||
isWrapped?: boolean;
|
||||
}>({})`
|
||||
}
|
||||
|
||||
const MessageColumnContent = euiStyled(LogEntryColumnContent)<MessageColumnContentProps>`
|
||||
background-color: ${props => props.theme.eui.euiColorEmptyShade};
|
||||
text-overflow: ellipsis;
|
||||
|
||||
|
|
|
|||
|
|
@ -103,7 +103,7 @@ export const LogEntryRow = ({
|
|||
return (
|
||||
<LogEntryRowWrapper
|
||||
data-test-subj="streamEntry logTextStreamEntry"
|
||||
innerRef={
|
||||
ref={
|
||||
/* Workaround for missing RefObject support in styled-components */
|
||||
boundingBoxRef as any
|
||||
}
|
||||
|
|
@ -191,11 +191,13 @@ export const LogEntryRow = ({
|
|||
);
|
||||
};
|
||||
|
||||
const LogEntryRowWrapper = euiStyled.div.attrs<{
|
||||
interface LogEntryRowWrapperProps {
|
||||
scale: TextScale;
|
||||
}>({
|
||||
}
|
||||
|
||||
const LogEntryRowWrapper = euiStyled.div.attrs(() => ({
|
||||
role: 'row',
|
||||
})`
|
||||
}))<LogEntryRowWrapperProps>`
|
||||
align-items: stretch;
|
||||
color: ${props => props.theme.eui.euiTextColor};
|
||||
display: flex;
|
||||
|
|
@ -204,5 +206,5 @@ const LogEntryRowWrapper = euiStyled.div.attrs<{
|
|||
justify-content: flex-start;
|
||||
overflow: hidden;
|
||||
|
||||
${props => monospaceTextStyle(props.scale)}
|
||||
${props => monospaceTextStyle(props.scale)};
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
import { darken, transparentize } from 'polished';
|
||||
import React, { memo } from 'react';
|
||||
|
||||
import { css } from '../../../../../../common/eui_styled_components';
|
||||
import euiStyled, { css } from '../../../../../../common/eui_styled_components';
|
||||
import { useFormattedTime } from '../../formatted_time';
|
||||
import { LogEntryColumnContent } from './log_entry_column';
|
||||
|
||||
|
|
@ -41,10 +41,12 @@ const hoveredContentStyle = css`
|
|||
color: ${props => props.theme.eui.euiColorFullShade};
|
||||
`;
|
||||
|
||||
const TimestampColumnContent = LogEntryColumnContent.extend.attrs<{
|
||||
interface TimestampColumnContentProps {
|
||||
isHovered: boolean;
|
||||
isHighlighted: boolean;
|
||||
}>({})`
|
||||
}
|
||||
|
||||
const TimestampColumnContent = euiStyled(LogEntryColumnContent)<TimestampColumnContentProps>`
|
||||
color: ${props => props.theme.eui.euiColorDarkShade};
|
||||
overflow: hidden;
|
||||
text-overflow: clip;
|
||||
|
|
|
|||
|
|
@ -179,7 +179,7 @@ export class ScrollableLogTextStreamView extends React.PureComponent<
|
|||
/>
|
||||
<AutoSizer bounds content detectAnyWindowResize="height">
|
||||
{({ measureRef, bounds: { height = 0 }, content: { width = 0 } }) => (
|
||||
<ScrollPanelSizeProbe innerRef={measureRef}>
|
||||
<ScrollPanelSizeProbe ref={measureRef}>
|
||||
<VerticalScrollPanel
|
||||
height={height}
|
||||
width={width}
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ export const monospaceTextStyle = (scale: TextScale) => css`
|
|||
default:
|
||||
return props.theme.eui.euiFontSize;
|
||||
}
|
||||
}}
|
||||
}};
|
||||
line-height: ${props => props.theme.eui.euiLineHeight};
|
||||
`;
|
||||
|
||||
|
|
@ -59,7 +59,7 @@ export const useMeasuredCharacterDimensions = (scale: TextScale) => {
|
|||
|
||||
const CharacterDimensionsProbe = useMemo(
|
||||
() => () => (
|
||||
<MonospaceCharacterDimensionsProbe scale={scale} innerRef={measureElement}>
|
||||
<MonospaceCharacterDimensionsProbe scale={scale} ref={measureElement}>
|
||||
X
|
||||
</MonospaceCharacterDimensionsProbe>
|
||||
),
|
||||
|
|
@ -72,11 +72,13 @@ export const useMeasuredCharacterDimensions = (scale: TextScale) => {
|
|||
};
|
||||
};
|
||||
|
||||
const MonospaceCharacterDimensionsProbe = euiStyled.div.attrs<{
|
||||
interface MonospaceCharacterDimensionsProbe {
|
||||
scale: TextScale;
|
||||
}>({
|
||||
}
|
||||
|
||||
const MonospaceCharacterDimensionsProbe = euiStyled.div.attrs(() => ({
|
||||
'aria-hidden': true,
|
||||
})`
|
||||
}))<MonospaceCharacterDimensionsProbe>`
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
height: auto;
|
||||
|
|
@ -84,5 +86,5 @@ const MonospaceCharacterDimensionsProbe = euiStyled.div.attrs<{
|
|||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
${props => monospaceTextStyle(props.scale)}
|
||||
${props => monospaceTextStyle(props.scale)};
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -247,10 +247,7 @@ export class VerticalScrollPanel<Child> extends React.PureComponent<
|
|||
style={{ height, width: width + scrollbarOffset }}
|
||||
scrollbarOffset={scrollbarOffset}
|
||||
onScroll={this.handleScroll}
|
||||
innerRef={
|
||||
/* workaround for missing RefObject support in styled-components typings */
|
||||
this.scrollRef as any
|
||||
}
|
||||
ref={this.scrollRef}
|
||||
>
|
||||
{typeof children === 'function' ? children(this.registerChild) : null}
|
||||
</ScrollPanelWrapper>
|
||||
|
|
@ -258,7 +255,11 @@ export class VerticalScrollPanel<Child> extends React.PureComponent<
|
|||
}
|
||||
}
|
||||
|
||||
const ScrollPanelWrapper = euiStyled.div.attrs<{ scrollbarOffset?: number }>({})`
|
||||
interface ScrollPanelWrapperProps {
|
||||
scrollbarOffset?: number;
|
||||
}
|
||||
|
||||
const ScrollPanelWrapper = euiStyled.div<ScrollPanelWrapperProps>`
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -25,10 +25,9 @@ const Nav = euiStyled.nav`
|
|||
background: ${props => props.theme.eui.euiColorEmptyShade};
|
||||
border-bottom: ${props => props.theme.eui.euiBorderThin};
|
||||
padding: ${props =>
|
||||
`${props.theme.eui.euiSize} ${props.theme.eui.euiSizeL} ${props.theme.eui.euiSize} ${props.theme.eui.euiSizeL}`}
|
||||
|
||||
`${props.theme.eui.euiSize} ${props.theme.eui.euiSizeL} ${props.theme.eui.euiSize} ${props.theme.eui.euiSizeL}`};
|
||||
.euiTabs {
|
||||
padding-left: 3px;
|
||||
margin-left: -3px;
|
||||
}
|
||||
};
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@ export class GroupName extends React.PureComponent<Props, {}> {
|
|||
|
||||
const GroupNameContainer = euiStyled.div`
|
||||
position: relative;
|
||||
text-align: center
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
margin-bottom: 5px;
|
||||
top: 20px;
|
||||
|
|
@ -65,7 +65,7 @@ interface InnerProps {
|
|||
isChild?: boolean;
|
||||
}
|
||||
|
||||
const Inner = euiStyled<InnerProps, 'div'>('div')`
|
||||
const Inner = euiStyled.div<InnerProps>`
|
||||
border: 1px solid ${props => props.theme.eui.euiBorderColor};
|
||||
background-color: ${props =>
|
||||
props.isChild ? props.theme.eui.euiColorLightestShade : props.theme.eui.euiColorEmptyShade};
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@ export const GroupOfGroups: React.SFC<Props> = props => {
|
|||
|
||||
const GroupOfGroupsContainer = euiStyled.div`
|
||||
margin: 0 10px;
|
||||
width: 100%
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
const Groups = euiStyled.div`
|
||||
|
|
|
|||
|
|
@ -46,10 +46,7 @@ export const Map: React.SFC<Props> = ({
|
|||
{({ measureRef, content: { width = 0, height = 0 } }) => {
|
||||
const groupsWithLayout = applyWaffleMapLayout(map, width, height);
|
||||
return (
|
||||
<WaffleMapOuterContainer
|
||||
innerRef={(el: any) => measureRef(el)}
|
||||
data-test-subj="waffleMap"
|
||||
>
|
||||
<WaffleMapOuterContainer ref={(el: any) => measureRef(el)} data-test-subj="waffleMap">
|
||||
<WaffleMapInnerContainer>
|
||||
{groupsWithLayout.map(group => {
|
||||
if (isWaffleMapGroupWithGroups(group)) {
|
||||
|
|
|
|||
|
|
@ -116,7 +116,7 @@ interface ColorProps {
|
|||
color: string;
|
||||
}
|
||||
|
||||
const SquareOuter = euiStyled<ColorProps, 'div'>('div')`
|
||||
const SquareOuter = euiStyled.div<ColorProps>`
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 4px;
|
||||
|
|
@ -127,7 +127,7 @@ const SquareOuter = euiStyled<ColorProps, 'div'>('div')`
|
|||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
|
||||
`;
|
||||
|
||||
const SquareInner = euiStyled<ColorProps, 'div'>('div')`
|
||||
const SquareInner = euiStyled.div<ColorProps>`
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
|
@ -161,7 +161,7 @@ const ValueInner = euiStyled.button`
|
|||
}
|
||||
`;
|
||||
|
||||
const SquareTextContent = euiStyled<ColorProps, 'div'>('div')`
|
||||
const SquareTextContent = euiStyled.div<ColorProps>`
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
|
|
|
|||
|
|
@ -130,7 +130,7 @@ export const LogsPageLogsContent: React.FunctionComponent = () => {
|
|||
<AutoSizer content bounds detectAnyWindowResize="height">
|
||||
{({ measureRef, bounds: { height = 0 }, content: { width = 0 } }) => {
|
||||
return (
|
||||
<LogPageMinimapColumn innerRef={measureRef}>
|
||||
<LogPageMinimapColumn ref={measureRef}>
|
||||
<WithSummary>
|
||||
{({ buckets }) => (
|
||||
<WithLogPosition>
|
||||
|
|
|
|||
|
|
@ -151,7 +151,7 @@ export const MetricDetail = withMetricPageProviders(
|
|||
{({ measureRef, bounds: { width = 0 } }) => {
|
||||
const w = width ? `${width}px` : `100%`;
|
||||
return (
|
||||
<MetricsDetailsPageColumn innerRef={measureRef}>
|
||||
<MetricsDetailsPageColumn ref={measureRef}>
|
||||
<EuiPageBody style={{ width: w }}>
|
||||
<EuiPageHeader style={{ flex: '0 0 auto' }}>
|
||||
<EuiPageHeaderSection style={{ width: '100%' }}>
|
||||
|
|
|
|||
|
|
@ -319,10 +319,10 @@ const AutocompleteContainer = euiStyled.div`
|
|||
|
||||
AutocompleteContainer.displayName = 'AutocompleteContainer';
|
||||
|
||||
const SuggestionsPanel = euiStyled(EuiPanel).attrs({
|
||||
const SuggestionsPanel = euiStyled(EuiPanel).attrs(() => ({
|
||||
paddingSize: 'none',
|
||||
hasShadow: true,
|
||||
})`
|
||||
}))`
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
margin-top: 2px;
|
||||
|
|
|
|||
|
|
@ -127,7 +127,7 @@ export const AreaChart = React.memo<{
|
|||
return checkIfAnyValidSeriesExist(areaChart) ? (
|
||||
<AutoSizer detectAnyWindowResize={false} content>
|
||||
{({ measureRef, content: { height, width } }) => (
|
||||
<WrappedByAutoSizer innerRef={measureRef} height={getChartHeight(customHeight, height)}>
|
||||
<WrappedByAutoSizer ref={measureRef} height={getChartHeight(customHeight, height)}>
|
||||
<AreaChartBaseComponent
|
||||
data={areaChart}
|
||||
height={getChartHeight(customHeight, height)}
|
||||
|
|
|
|||
|
|
@ -109,7 +109,7 @@ export const BarChart = React.memo<{
|
|||
return checkIfAnyValidSeriesExist(barChart) ? (
|
||||
<AutoSizer detectAnyWindowResize={false} content>
|
||||
{({ measureRef, content: { height, width } }) => (
|
||||
<WrappedByAutoSizer innerRef={measureRef} height={getChartHeight(customHeight, height)}>
|
||||
<WrappedByAutoSizer ref={measureRef} height={getChartHeight(customHeight, height)}>
|
||||
<BarChartBaseComponent
|
||||
height={getChartHeight(customHeight, height)}
|
||||
width={getChartWidth(customWidth, width)}
|
||||
|
|
|
|||
|
|
@ -16,7 +16,6 @@ import {
|
|||
WrappedByAutoSizer,
|
||||
ChartSeriesData,
|
||||
} from './common';
|
||||
import 'jest-styled-components';
|
||||
import { mergeWithDefaultTheme, LIGHT_THEME } from '@elastic/charts';
|
||||
|
||||
jest.mock('@elastic/charts', () => {
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@
|
|||
import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
|
||||
import { mount, shallow } from 'enzyme';
|
||||
import toJson from 'enzyme-to-json';
|
||||
import 'jest-styled-components';
|
||||
import React from 'react';
|
||||
|
||||
import '../../../mock/ui_settings';
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@
|
|||
|
||||
import { mount, shallow } from 'enzyme';
|
||||
import toJson from 'enzyme-to-json';
|
||||
import 'jest-styled-components';
|
||||
import React from 'react';
|
||||
|
||||
import '../../../mock/ui_settings';
|
||||
|
|
|
|||
|
|
@ -39,31 +39,43 @@ const Wrapper = styled.div`
|
|||
Wrapper.displayName = 'Wrapper';
|
||||
|
||||
const ProviderContainer = styled.div<{ isDragging: boolean }>`
|
||||
${({ theme, isDragging }) => css`
|
||||
&,
|
||||
&::before,
|
||||
&::after {
|
||||
transition: background ${theme.eui.euiAnimSpeedFast} ease,
|
||||
color ${theme.eui.euiAnimSpeedFast} ease;
|
||||
}
|
||||
&,
|
||||
&::before,
|
||||
&::after {
|
||||
transition: background ${({ theme }) => theme.eui.euiAnimSpeedFast} ease,
|
||||
color ${({ theme }) => theme.eui.euiAnimSpeedFast} ease;
|
||||
}
|
||||
|
||||
${!isDragging &&
|
||||
`
|
||||
${({ isDragging }) =>
|
||||
!isDragging &&
|
||||
css`
|
||||
& {
|
||||
border-radius: 2px;
|
||||
padding: 0 4px 0 8px;
|
||||
position: relative;
|
||||
z-index: ${theme.eui.euiZLevel0} !important;
|
||||
z-index: ${({ theme }) => theme.eui.euiZLevel0} !important;
|
||||
|
||||
&::before {
|
||||
background-image: linear-gradient(
|
||||
135deg,
|
||||
${theme.eui.euiColorMediumShade} 25%,
|
||||
${({ theme }) => theme.eui.euiColorMediumShade} 25%,
|
||||
transparent 25%
|
||||
),
|
||||
linear-gradient(-135deg, ${theme.eui.euiColorMediumShade} 25%, transparent 25%),
|
||||
linear-gradient(135deg, transparent 75%, ${theme.eui.euiColorMediumShade} 75%),
|
||||
linear-gradient(-135deg, transparent 75%, ${theme.eui.euiColorMediumShade} 75%);
|
||||
linear-gradient(
|
||||
-135deg,
|
||||
${({ theme }) => theme.eui.euiColorMediumShade} 25%,
|
||||
transparent 25%
|
||||
),
|
||||
linear-gradient(
|
||||
135deg,
|
||||
transparent 75%,
|
||||
${({ theme }) => theme.eui.euiColorMediumShade} 75%
|
||||
),
|
||||
linear-gradient(
|
||||
-135deg,
|
||||
transparent 75%,
|
||||
${({ theme }) => theme.eui.euiColorMediumShade} 75%
|
||||
);
|
||||
background-position: 0 0, 1px 0, 1px -1px, 0px 1px;
|
||||
background-size: 2px 2px;
|
||||
bottom: 2px;
|
||||
|
|
@ -87,17 +99,29 @@ const ProviderContainer = styled.div<{ isDragging: boolean }>`
|
|||
|
||||
.${STATEFUL_EVENT_CSS_CLASS_NAME}:hover &,
|
||||
tr:hover & {
|
||||
background-color: ${theme.eui.euiColorLightShade};
|
||||
background-color: ${({ theme }) => theme.eui.euiColorLightShade};
|
||||
|
||||
&::before {
|
||||
background-image: linear-gradient(
|
||||
135deg,
|
||||
${theme.eui.euiColorDarkShade} 25%,
|
||||
${({ theme }) => theme.eui.euiColorDarkShade} 25%,
|
||||
transparent 25%
|
||||
),
|
||||
linear-gradient(-135deg, ${theme.eui.euiColorDarkShade} 25%, transparent 25%),
|
||||
linear-gradient(135deg, transparent 75%, ${theme.eui.euiColorDarkShade} 75%),
|
||||
linear-gradient(-135deg, transparent 75%, ${theme.eui.euiColorDarkShade} 75%);
|
||||
linear-gradient(
|
||||
-135deg,
|
||||
${({ theme }) => theme.eui.euiColorDarkShade} 25%,
|
||||
transparent 25%
|
||||
),
|
||||
linear-gradient(
|
||||
135deg,
|
||||
transparent 75%,
|
||||
${({ theme }) => theme.eui.euiColorDarkShade} 75%
|
||||
),
|
||||
linear-gradient(
|
||||
-135deg,
|
||||
transparent 75%,
|
||||
${({ theme }) => theme.eui.euiColorDarkShade} 75%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -107,34 +131,46 @@ const ProviderContainer = styled.div<{ isDragging: boolean }>`
|
|||
.${STATEFUL_EVENT_CSS_CLASS_NAME}:focus &:focus,
|
||||
tr:hover &:hover,
|
||||
tr:hover &:focus {
|
||||
background-color: ${theme.eui.euiColorPrimary};
|
||||
background-color: ${({ theme }) => theme.eui.euiColorPrimary};
|
||||
|
||||
&,
|
||||
& a,
|
||||
& a:hover {
|
||||
color: ${theme.eui.euiColorEmptyShade};
|
||||
color: ${({ theme }) => theme.eui.euiColorEmptyShade};
|
||||
}
|
||||
|
||||
&::before {
|
||||
background-image: linear-gradient(
|
||||
135deg,
|
||||
${theme.eui.euiColorEmptyShade} 25%,
|
||||
${({ theme }) => theme.eui.euiColorEmptyShade} 25%,
|
||||
transparent 25%
|
||||
),
|
||||
linear-gradient(-135deg, ${theme.eui.euiColorEmptyShade} 25%, transparent 25%),
|
||||
linear-gradient(135deg, transparent 75%, ${theme.eui.euiColorEmptyShade} 75%),
|
||||
linear-gradient(-135deg, transparent 75%, ${theme.eui.euiColorEmptyShade} 75%);
|
||||
linear-gradient(
|
||||
-135deg,
|
||||
${({ theme }) => theme.eui.euiColorEmptyShade} 25%,
|
||||
transparent 25%
|
||||
),
|
||||
linear-gradient(
|
||||
135deg,
|
||||
transparent 75%,
|
||||
${({ theme }) => theme.eui.euiColorEmptyShade} 75%
|
||||
),
|
||||
linear-gradient(
|
||||
-135deg,
|
||||
transparent 75%,
|
||||
${({ theme }) => theme.eui.euiColorEmptyShade} 75%
|
||||
);
|
||||
}
|
||||
}
|
||||
`}
|
||||
|
||||
${isDragging &&
|
||||
`
|
||||
${({ isDragging }) =>
|
||||
isDragging &&
|
||||
css`
|
||||
& {
|
||||
z-index: 9999 !important;
|
||||
}
|
||||
`}
|
||||
`}
|
||||
`;
|
||||
|
||||
ProviderContainer.displayName = 'ProviderContainer';
|
||||
|
|
@ -192,7 +228,7 @@ const DraggableWrapperComponent = React.memo<Props>(
|
|||
<ProviderContainer
|
||||
{...provided.draggableProps}
|
||||
{...provided.dragHandleProps}
|
||||
innerRef={provided.innerRef}
|
||||
ref={provided.innerRef}
|
||||
data-test-subj="providerContainer"
|
||||
isDragging={snapshot.isDragging}
|
||||
style={{
|
||||
|
|
|
|||
|
|
@ -105,7 +105,7 @@ export const DroppableWrapper = pure<Props>(
|
|||
{(provided, snapshot) => (
|
||||
<ReactDndDropTarget
|
||||
height={height}
|
||||
innerRef={provided.innerRef}
|
||||
ref={provided.innerRef}
|
||||
{...provided.droppableProps}
|
||||
isDraggingOver={snapshot.isDraggingOver}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -7,19 +7,17 @@
|
|||
import { rgba } from 'polished';
|
||||
import * as React from 'react';
|
||||
import { pure } from 'recompose';
|
||||
import styled, { css } from 'styled-components';
|
||||
import styled from 'styled-components';
|
||||
|
||||
const Field = styled.div`
|
||||
${({ theme }) => css`
|
||||
background-color: ${theme.eui.euiColorEmptyShade};
|
||||
border: ${theme.eui.euiBorderThin};
|
||||
box-shadow: 0 2px 2px -1px ${rgba(theme.eui.euiColorMediumShade, 0.3)},
|
||||
0 1px 5px -2px ${rgba(theme.eui.euiColorMediumShade, 0.3)};
|
||||
font-size: ${theme.eui.euiFontSizeXS};
|
||||
font-weight: ${theme.eui.euiFontWeightSemiBold};
|
||||
line-height: ${theme.eui.euiLineHeight};
|
||||
padding: ${theme.eui.paddingSizes.xs};
|
||||
`}
|
||||
background-color: ${({ theme }) => theme.eui.euiColorEmptyShade};
|
||||
border: ${({ theme }) => theme.eui.euiBorderThin};
|
||||
box-shadow: 0 2px 2px -1px ${({ theme }) => rgba(theme.eui.euiColorMediumShade, 0.3)},
|
||||
0 1px 5px -2px ${({ theme }) => rgba(theme.eui.euiColorMediumShade, 0.3)};
|
||||
font-size: ${({ theme }) => theme.eui.euiFontSizeXS};
|
||||
font-weight: ${({ theme }) => theme.eui.euiFontWeightSemiBold};
|
||||
line-height: ${({ theme }) => theme.eui.euiLineHeight};
|
||||
padding: ${({ theme }) => theme.eui.paddingSizes.xs};
|
||||
`;
|
||||
Field.displayName = 'Field';
|
||||
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ import {
|
|||
EuiToolTip,
|
||||
} from '@elastic/eui';
|
||||
import React, { useEffect, useState, useCallback } from 'react';
|
||||
import styled, { injectGlobal } from 'styled-components';
|
||||
import styled, { createGlobalStyle } from 'styled-components';
|
||||
|
||||
import { BrowserFields } from '../../containers/source';
|
||||
import { OnDataProviderEdited } from '../timeline/events';
|
||||
|
|
@ -46,11 +46,11 @@ export const HeaderContainer = styled.div`
|
|||
|
||||
HeaderContainer.displayName = 'HeaderContainer';
|
||||
|
||||
// SIDE EFFECT: the following `injectGlobal` overrides the default styling
|
||||
// SIDE EFFECT: the following `createGlobalStyle` overrides the default styling
|
||||
// of euiComboBoxOptionsList because it's implemented as a popover, so it's
|
||||
// not selectable as a child of the styled component
|
||||
// eslint-disable-next-line no-unused-expressions
|
||||
injectGlobal`
|
||||
createGlobalStyle`
|
||||
.euiComboBoxOptionsList {
|
||||
z-index: 9999;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,15 +6,13 @@
|
|||
|
||||
import { EuiFlexGroup, EuiFlexItem, EuiTitle } from '@elastic/eui';
|
||||
import React from 'react';
|
||||
import styled, { css } from 'styled-components';
|
||||
import styled from 'styled-components';
|
||||
|
||||
const Header = styled.header.attrs({
|
||||
className: 'siemEmbeddable__header',
|
||||
})`
|
||||
${({ theme }) => css`
|
||||
border-bottom: ${theme.eui.euiBorderThin};
|
||||
padding: ${theme.eui.paddingSizes.m};
|
||||
`}
|
||||
const Header = styled.header.attrs(({ className }) => ({
|
||||
className: `siemEmbeddable__header ${className}`,
|
||||
}))`
|
||||
border-bottom: ${({ theme }) => theme.eui.euiBorderThin};
|
||||
padding: ${({ theme }) => theme.eui.paddingSizes.m};
|
||||
`;
|
||||
Header.displayName = 'Header';
|
||||
|
||||
|
|
|
|||
|
|
@ -34,41 +34,40 @@ interface EmbeddableMapProps {
|
|||
maintainRatio?: boolean;
|
||||
}
|
||||
|
||||
const EmbeddableMap = styled.div.attrs({
|
||||
const EmbeddableMap = styled.div.attrs(() => ({
|
||||
className: 'siemEmbeddable__map',
|
||||
})<EmbeddableMapProps>`
|
||||
${({ maintainRatio, theme }) => css`
|
||||
.embPanel {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}))<EmbeddableMapProps>`
|
||||
.embPanel {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.mapToolbarOverlay__button {
|
||||
display: none;
|
||||
}
|
||||
.mapToolbarOverlay__button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
${maintainRatio &&
|
||||
css`
|
||||
padding-top: calc(3 / 4 * 100%); //4:3 (standard) ratio
|
||||
position: relative;
|
||||
${({ maintainRatio }) =>
|
||||
maintainRatio &&
|
||||
css`
|
||||
padding-top: calc(3 / 4 * 100%); //4:3 (standard) ratio
|
||||
position: relative;
|
||||
|
||||
@media only screen and (min-width: ${theme.eui.euiBreakpoints.m}) {
|
||||
padding-top: calc(9 / 32 * 100%); //32:9 (ultra widescreen) ratio
|
||||
}
|
||||
@media only screen and (min-width: ${({ theme }) => theme.eui.euiBreakpoints.m}) {
|
||||
padding-top: calc(9 / 32 * 100%); //32:9 (ultra widescreen) ratio
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1441px) and (min-height: 901px) {
|
||||
padding-top: calc(9 / 21 * 100%); //21:9 (ultrawide) ratio
|
||||
}
|
||||
@media only screen and (min-width: 1441px) and (min-height: 901px) {
|
||||
padding-top: calc(9 / 21 * 100%); //21:9 (ultrawide) ratio
|
||||
}
|
||||
|
||||
.embPanel {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
`}
|
||||
`}
|
||||
.embPanel {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
`}
|
||||
`;
|
||||
EmbeddableMap.displayName = 'EmbeddableMap';
|
||||
|
||||
|
|
|
|||
|
|
@ -100,7 +100,7 @@ export const EventsViewer = React.memo<Props>(
|
|||
<AutoSizer detectAnyWindowResize={true} content>
|
||||
{({ measureRef, content: { width = 0 } }) => (
|
||||
<>
|
||||
<WrappedByAutoSizer innerRef={measureRef}>
|
||||
<WrappedByAutoSizer ref={measureRef}>
|
||||
<div
|
||||
data-test-subj="events-viewer-measured"
|
||||
style={{ height: '0px', width: '100%' }}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
*/
|
||||
|
||||
import { mount } from 'enzyme';
|
||||
import 'jest-styled-components';
|
||||
import * as React from 'react';
|
||||
|
||||
import { TestProviders } from '../../mock';
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@
|
|||
|
||||
import { mount } from 'enzyme';
|
||||
import * as React from 'react';
|
||||
import 'jest-styled-components';
|
||||
|
||||
import { mockBrowserFields } from '../../containers/source/mock';
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@
|
|||
|
||||
import { mount } from 'enzyme';
|
||||
import * as React from 'react';
|
||||
import 'jest-styled-components';
|
||||
|
||||
import { mockBrowserFields } from '../../containers/source/mock';
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
import { EuiFlexGroup, EuiFlexItem, EuiOutsideClickDetector } from '@elastic/eui';
|
||||
import React, { useEffect, useCallback } from 'react';
|
||||
import { noop } from 'lodash/fp';
|
||||
import styled, { css } from 'styled-components';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import { BrowserFields } from '../../containers/source';
|
||||
import { ColumnHeader } from '../timeline/body/column_headers/column_header';
|
||||
|
|
@ -25,17 +25,17 @@ import {
|
|||
import { FieldBrowserProps, OnHideFieldBrowser } from './types';
|
||||
|
||||
const FieldsBrowserContainer = styled.div<{ width: number }>`
|
||||
${({ theme, width }) => css`
|
||||
background-color: ${theme.eui.euiColorLightestShade};
|
||||
border: ${theme.eui.euiBorderWidthThin} solid ${theme.eui.euiColorMediumShade};
|
||||
border-radius: ${theme.eui.euiBorderRadius};
|
||||
left: 0;
|
||||
padding: ${theme.eui.paddingSizes.s} ${theme.eui.paddingSizes.s} ${theme.eui.paddingSizes.m};
|
||||
position: absolute;
|
||||
top: calc(100% + ${theme.eui.euiSize});
|
||||
width: ${width}px;
|
||||
z-index: 9990;
|
||||
`}
|
||||
background-color: ${({ theme }) => theme.eui.euiColorLightestShade};
|
||||
border: ${({ theme }) => theme.eui.euiBorderWidthThin} solid
|
||||
${({ theme }) => theme.eui.euiColorMediumShade};
|
||||
border-radius: ${({ theme }) => theme.eui.euiBorderRadius};
|
||||
left: 0;
|
||||
padding: ${({ theme }) => theme.eui.paddingSizes.s} ${({ theme }) => theme.eui.paddingSizes.s}
|
||||
${({ theme }) => theme.eui.paddingSizes.m};
|
||||
position: absolute;
|
||||
top: calc(100% + ${({ theme }) => theme.eui.euiSize});
|
||||
width: ${({ width }) => width}px;
|
||||
z-index: 9990;
|
||||
`;
|
||||
FieldsBrowserContainer.displayName = 'FieldsBrowserContainer';
|
||||
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ import {
|
|||
EuiToolTip,
|
||||
} from '@elastic/eui';
|
||||
import React, { useContext } from 'react';
|
||||
import styled, { css } from 'styled-components';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import { WithCopyToClipboard } from '../../lib/clipboard/with_copy_to_clipboard';
|
||||
import { ColumnHeader } from '../timeline/body/column_headers/column_header';
|
||||
|
|
@ -30,51 +30,55 @@ import * as i18n from './translations';
|
|||
* The name of a (draggable) field
|
||||
*/
|
||||
export const FieldNameContainer = styled.span`
|
||||
${({ theme }) => css`
|
||||
padding: 5px;
|
||||
{
|
||||
border-radius: 4px;
|
||||
padding: 0 4px 0 8px;
|
||||
position: relative;
|
||||
padding: 5px;
|
||||
{
|
||||
border-radius: 4px;
|
||||
padding: 0 4px 0 8px;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
background-image: linear-gradient(
|
||||
135deg,
|
||||
${({ theme }) => theme.eui.euiColorMediumShade} 25%,
|
||||
transparent 25%
|
||||
),
|
||||
linear-gradient(-135deg, ${({ theme }) =>
|
||||
theme.eui.euiColorMediumShade} 25%, transparent 25%),
|
||||
linear-gradient(135deg, transparent 75%, ${({ theme }) =>
|
||||
theme.eui.euiColorMediumShade} 75%),
|
||||
linear-gradient(-135deg, transparent 75%, ${({ theme }) =>
|
||||
theme.eui.euiColorMediumShade} 75%);
|
||||
background-position: 0 0, 1px 0, 1px -1px, 0px 1px;
|
||||
background-size: 2px 2px;
|
||||
bottom: 2px;
|
||||
content: '';
|
||||
display: block;
|
||||
left: 2px;
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
transition: background-color 0.7s ease;
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
|
||||
&::before {
|
||||
background-image: linear-gradient(
|
||||
135deg,
|
||||
${theme.eui.euiColorMediumShade} 25%,
|
||||
#fff 25%,
|
||||
transparent 25%
|
||||
),
|
||||
linear-gradient(-135deg, ${theme.eui.euiColorMediumShade} 25%, transparent 25%),
|
||||
linear-gradient(135deg, transparent 75%, ${theme.eui.euiColorMediumShade} 75%),
|
||||
linear-gradient(-135deg, transparent 75%, ${theme.eui.euiColorMediumShade} 75%);
|
||||
background-position: 0 0, 1px 0, 1px -1px, 0px 1px;
|
||||
background-size: 2px 2px;
|
||||
bottom: 2px;
|
||||
content: '';
|
||||
display: block;
|
||||
left: 2px;
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
width: 4px;
|
||||
linear-gradient(-135deg, ${({ theme }) =>
|
||||
theme.eui.euiColorLightestShade} 25%, transparent 25%),
|
||||
linear-gradient(135deg, transparent 75%, ${({ theme }) =>
|
||||
theme.eui.euiColorLightestShade} 75%),
|
||||
linear-gradient(-135deg, transparent 75%, ${({ theme }) =>
|
||||
theme.eui.euiColorLightestShade} 75%);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
transition: background-color 0.7s ease;
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
|
||||
&::before {
|
||||
background-image: linear-gradient(
|
||||
135deg,
|
||||
#fff 25%,
|
||||
transparent 25%
|
||||
),
|
||||
linear-gradient(-135deg, ${theme.eui.euiColorLightestShade} 25%, transparent 25%),
|
||||
linear-gradient(135deg, transparent 75%, ${theme.eui.euiColorLightestShade} 75%),
|
||||
linear-gradient(-135deg, transparent 75%, ${theme.eui.euiColorLightestShade} 75%);
|
||||
}
|
||||
}
|
||||
`}
|
||||
}
|
||||
`;
|
||||
|
||||
FieldNameContainer.displayName = 'FieldNameContainer';
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@
|
|||
|
||||
import { mount } from 'enzyme';
|
||||
import * as React from 'react';
|
||||
import 'jest-styled-components';
|
||||
|
||||
import { mockBrowserFields } from '../../containers/source/mock';
|
||||
import { TestProviders } from '../../mock';
|
||||
|
|
|
|||
|
|
@ -18,25 +18,23 @@ const disableSticky = 'screen and (max-width: ' + euiLightVars.euiBreakpoints.s
|
|||
const disableStickyMq = window.matchMedia(disableSticky);
|
||||
|
||||
const Wrapper = styled.aside<{ isSticky?: boolean }>`
|
||||
${props => css`
|
||||
position: relative;
|
||||
z-index: ${props.theme.eui.euiZNavigation};
|
||||
background: ${props.theme.eui.euiColorEmptyShade};
|
||||
border-bottom: ${props.theme.eui.euiBorderThin};
|
||||
padding: ${props.theme.eui.paddingSizes.m} ${gutterTimeline} ${
|
||||
props.theme.eui.paddingSizes.m
|
||||
} ${props.theme.eui.paddingSizes.l};
|
||||
position: relative;
|
||||
z-index: ${({ theme }) => theme.eui.euiZNavigation};
|
||||
background: ${({ theme }) => theme.eui.euiColorEmptyShade};
|
||||
border-bottom: ${({ theme }) => theme.eui.euiBorderThin};
|
||||
padding: ${({ theme }) => theme.eui.paddingSizes.m} ${gutterTimeline} ${({ theme }) =>
|
||||
theme.eui.paddingSizes.m} ${({ theme }) => theme.eui.paddingSizes.l};
|
||||
|
||||
${props.isSticky &&
|
||||
`
|
||||
${({ isSticky }) =>
|
||||
isSticky &&
|
||||
css`
|
||||
top: ${offsetChrome}px !important;
|
||||
`}
|
||||
|
||||
@media only ${disableSticky} {
|
||||
position: static !important;
|
||||
z-index: ${props.theme.eui.euiZContent} !important;
|
||||
}
|
||||
`}
|
||||
@media only ${disableSticky} {
|
||||
position: static !important;
|
||||
z-index: ${({ theme }) => theme.eui.euiZContent} !important;
|
||||
}
|
||||
`;
|
||||
Wrapper.displayName = 'Wrapper';
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@
|
|||
|
||||
import { mount, shallow } from 'enzyme';
|
||||
import toJson from 'enzyme-to-json';
|
||||
import 'jest-styled-components';
|
||||
import * as React from 'react';
|
||||
|
||||
import { flyoutHeaderHeight } from '../';
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@
|
|||
import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
|
||||
import { mount, shallow } from 'enzyme';
|
||||
import toJson from 'enzyme-to-json';
|
||||
import 'jest-styled-components';
|
||||
import React from 'react';
|
||||
|
||||
import { TestProviders } from '../../mock';
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@
|
|||
import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
|
||||
import { mount, shallow } from 'enzyme';
|
||||
import toJson from 'enzyme-to-json';
|
||||
import 'jest-styled-components';
|
||||
import React from 'react';
|
||||
|
||||
import { TestProviders } from '../../mock';
|
||||
|
|
|
|||
|
|
@ -15,19 +15,18 @@ interface HeaderProps {
|
|||
border?: boolean;
|
||||
}
|
||||
|
||||
const Header = styled.header.attrs({
|
||||
const Header = styled.header.attrs(() => ({
|
||||
className: 'siemHeaderSection',
|
||||
})<HeaderProps>`
|
||||
${({ border, theme }) => css`
|
||||
margin-bottom: ${theme.eui.euiSizeL};
|
||||
user-select: text;
|
||||
}))<HeaderProps>`
|
||||
margin-bottom: ${({ theme }) => theme.eui.euiSizeL};
|
||||
user-select: text;
|
||||
|
||||
${border &&
|
||||
css`
|
||||
border-bottom: ${theme.eui.euiBorderThin};
|
||||
padding-bottom: ${theme.eui.paddingSizes.l};
|
||||
`}
|
||||
`}
|
||||
${({ border }) =>
|
||||
border &&
|
||||
css`
|
||||
border-bottom: ${({ theme }) => theme.eui.euiBorderThin};
|
||||
padding-bottom: ${({ theme }) => theme.eui.paddingSizes.l};
|
||||
`}
|
||||
`;
|
||||
Header.displayName = 'Header';
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@
|
|||
|
||||
import { mount, shallow } from 'enzyme';
|
||||
import toJson from 'enzyme-to-json';
|
||||
import 'jest-styled-components';
|
||||
import React from 'react';
|
||||
|
||||
import { TestProviders } from '../../mock';
|
||||
|
|
|
|||
|
|
@ -18,14 +18,14 @@ import { pure } from 'recompose';
|
|||
import styled, { css } from 'styled-components';
|
||||
|
||||
const Aside = styled.aside<{ overlay?: boolean; overlayBackground?: string }>`
|
||||
${({ overlay, overlayBackground, theme }) => css`
|
||||
padding: ${theme.eui.paddingSizes.m};
|
||||
padding: ${({ theme }) => theme.eui.paddingSizes.m};
|
||||
|
||||
${overlay &&
|
||||
`
|
||||
background: ${
|
||||
overlayBackground ? rgba(overlayBackground, 0.9) : rgba(theme.eui.euiColorEmptyShade, 0.9)
|
||||
};
|
||||
${({ overlay, overlayBackground, theme }) =>
|
||||
overlay &&
|
||||
css`
|
||||
background: ${overlayBackground
|
||||
? rgba(overlayBackground, 0.9)
|
||||
: rgba(theme.eui.euiColorEmptyShade, 0.9)};
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
|
|
@ -33,22 +33,21 @@ const Aside = styled.aside<{ overlay?: boolean; overlayBackground?: string }>`
|
|||
top: 0;
|
||||
z-index: ${theme.eui.euiZLevel1};
|
||||
`}
|
||||
`}
|
||||
`;
|
||||
|
||||
Aside.displayName = 'Aside';
|
||||
|
||||
const FlexGroup = styled(EuiFlexGroup).attrs({
|
||||
const FlexGroup = styled(EuiFlexGroup).attrs(() => ({
|
||||
alignItems: 'center',
|
||||
direction: 'column',
|
||||
gutterSize: 's',
|
||||
justifyContent: 'center',
|
||||
})<{ overlay: { overlay?: boolean } }>`
|
||||
}))<{ overlay: { overlay?: boolean } }>`
|
||||
${({ overlay }) =>
|
||||
overlay &&
|
||||
`
|
||||
height: 100%;
|
||||
`}
|
||||
css`
|
||||
height: 100%;
|
||||
`}
|
||||
`;
|
||||
|
||||
FlexGroup.displayName = 'FlexGroup';
|
||||
|
|
|
|||
|
|
@ -7,11 +7,11 @@
|
|||
import { EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner, EuiPanel, EuiText } from '@elastic/eui';
|
||||
import * as React from 'react';
|
||||
import { pure } from 'recompose';
|
||||
import styled, { injectGlobal } from 'styled-components';
|
||||
import styled, { createGlobalStyle } from 'styled-components';
|
||||
|
||||
// SIDE EFFECT: the following `injectGlobal` overrides default styling in angular code that was not theme-friendly
|
||||
// SIDE EFFECT: the following `createGlobalStyle` overrides default styling in angular code that was not theme-friendly
|
||||
// eslint-disable-next-line no-unused-expressions
|
||||
injectGlobal`
|
||||
createGlobalStyle`
|
||||
.euiPanel-loading-hide-border {
|
||||
border: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@
|
|||
|
||||
import { mount, shallow } from 'enzyme';
|
||||
import toJson from 'enzyme-to-json';
|
||||
import 'jest-styled-components';
|
||||
import * as React from 'react';
|
||||
|
||||
import { MarkdownHint } from './markdown_hint';
|
||||
|
|
|
|||
|
|
@ -82,7 +82,7 @@ exports[`anomaly_scores renders correctly against snapshot 1`] = `
|
|||
<EuiPopover
|
||||
anchorPosition="downCenter"
|
||||
button={
|
||||
<Icon
|
||||
<ForwardRef(Styled(EuiIcon))
|
||||
type="iInCircle"
|
||||
/>
|
||||
}
|
||||
|
|
@ -105,9 +105,9 @@ exports[`anomaly_scores renders correctly against snapshot 1`] = `
|
|||
<EuiSpacer
|
||||
size="m"
|
||||
/>
|
||||
<LargeScore>
|
||||
<ForwardRef(Styled(EuiText))>
|
||||
17
|
||||
</LargeScore>
|
||||
</ForwardRef(Styled(EuiText))>
|
||||
</React.Fragment>,
|
||||
"title": "Max Anomaly Score",
|
||||
},
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@
|
|||
|
||||
import { mount, shallow } from 'enzyme';
|
||||
import toJson from 'enzyme-to-json';
|
||||
import 'jest-styled-components';
|
||||
import * as React from 'react';
|
||||
|
||||
import { AddNote } from '.';
|
||||
|
|
|
|||
|
|
@ -1,7 +1,493 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`NoteCardBody renders correctly against snapshot 1`] = `
|
||||
<NoteCardBody
|
||||
rawNote="# This is a note"
|
||||
/>
|
||||
<ContextProvider
|
||||
value={
|
||||
Object {
|
||||
"darkMode": true,
|
||||
"eui": Object {
|
||||
"avatarSizing": Object {
|
||||
"l": Object {
|
||||
"font-size": "19.200000000000003px",
|
||||
"size": "40px",
|
||||
},
|
||||
"m": Object {
|
||||
"font-size": "14.4px",
|
||||
"size": "32px",
|
||||
},
|
||||
"s": Object {
|
||||
"font-size": "12px",
|
||||
"size": "24px",
|
||||
},
|
||||
"xl": Object {
|
||||
"font-size": "25.6px",
|
||||
"size": "64px",
|
||||
},
|
||||
},
|
||||
"badgeTypes": Object {
|
||||
"accent": "#e2a7c2",
|
||||
"danger": "#e65c5c",
|
||||
"default": "#343741",
|
||||
"primary": "#388ebc",
|
||||
"secondary": "#9dc2bc",
|
||||
"warning": "#ebc98e",
|
||||
},
|
||||
"buttonTypes": Object {
|
||||
"danger": "#ff6666",
|
||||
"ghost": "#ffffff",
|
||||
"primary": "#1ba9f5",
|
||||
"secondary": "#7de2d1",
|
||||
"text": "#98a2b3",
|
||||
"warning": "#ffce7a",
|
||||
},
|
||||
"euiAnimSlightBounce": "cubic-bezier(0.34, 1.61, 0.7, 1)",
|
||||
"euiAnimSlightResistance": "cubic-bezier(0.694, 0.0482, 0.335, 1)",
|
||||
"euiAnimSpeedExtraFast": "90ms",
|
||||
"euiAnimSpeedExtraSlow": "500ms",
|
||||
"euiAnimSpeedFast": "150ms",
|
||||
"euiAnimSpeedNormal": "250ms",
|
||||
"euiAnimSpeedSlow": "350ms",
|
||||
"euiBorderColor": "#343741",
|
||||
"euiBorderEditable": "2px dotted #343741",
|
||||
"euiBorderRadius": "4px",
|
||||
"euiBorderThick": "2px solid #343741",
|
||||
"euiBorderThin": "1px solid #343741",
|
||||
"euiBorderWidthThick": "2px",
|
||||
"euiBorderWidthThin": "1px",
|
||||
"euiBreadcrumbSpacing": "8px",
|
||||
"euiBreadcrumbTruncateWidth": "160px",
|
||||
"euiBreakpointKeys": "'xs', 's', 'm', 'l', 'xl'",
|
||||
"euiBreakpoints": Object {
|
||||
"l": "992px",
|
||||
"m": "768px",
|
||||
"s": "575px",
|
||||
"xl": "1200px",
|
||||
"xs": 0,
|
||||
},
|
||||
"euiButtonColorDisabled": "#434548",
|
||||
"euiButtonHeight": "40px",
|
||||
"euiButtonHeightSmall": "32px",
|
||||
"euiButtonMinWidth": "112px",
|
||||
"euiButtonToggleBorderColor": "#343741",
|
||||
"euiCallOutTypes": Object {
|
||||
"danger": "#ff6666",
|
||||
"primary": "#1ba9f5",
|
||||
"success": "#7de2d1",
|
||||
"warning": "#ffce7a",
|
||||
},
|
||||
"euiCardGraphicHeight": "40px",
|
||||
"euiCardSelectButtonBackgrounds": Object {
|
||||
"danger": "#4d1f1f",
|
||||
"ghost": "#98a2b3",
|
||||
"primary": "#08334a",
|
||||
"success": "#26443f",
|
||||
"text": "#25262e",
|
||||
},
|
||||
"euiCardSelectButtonBorders": Object {
|
||||
"danger": "#ff6666",
|
||||
"ghost": "#98a2b3",
|
||||
"primary": "#1ba9f5",
|
||||
"success": "#7de2d1",
|
||||
"text": "#7de2d1",
|
||||
},
|
||||
"euiCardSpacing": "16px",
|
||||
"euiCardTitleSize": "18px",
|
||||
"euiCheckBoxSize": "16px",
|
||||
"euiCodeBlockAdditionBackgroundColor": "#144212",
|
||||
"euiCodeBlockAdditionColor": "#e6e1dc",
|
||||
"euiCodeBlockAttributeColor": "#80cbbf",
|
||||
"euiCodeBlockBackgroundColor": "#25262e",
|
||||
"euiCodeBlockBuiltInColor": "#0086b3",
|
||||
"euiCodeBlockColor": "#dfe5ef",
|
||||
"euiCodeBlockCommentColor": "#656565",
|
||||
"euiCodeBlockDeletionBackgroundColor": "#660000",
|
||||
"euiCodeBlockDeletionColor": "#e6e1dc",
|
||||
"euiCodeBlockFunctionTitleColor": "#75a5ff",
|
||||
"euiCodeBlockKeywordColor": "#c792ea",
|
||||
"euiCodeBlockMetaColor": "#75a5ff",
|
||||
"euiCodeBlockNameColor": "#e06c75",
|
||||
"euiCodeBlockNumberColor": "#f77669",
|
||||
"euiCodeBlockParamsColor": "#eefff7",
|
||||
"euiCodeBlockRegexpColor": "#009926",
|
||||
"euiCodeBlockSectionColor": "#ffc66d",
|
||||
"euiCodeBlockSelectedBackgroundColor": "inherit",
|
||||
"euiCodeBlockSelectorClassColor": "#ffcb68",
|
||||
"euiCodeBlockSelectorIdColor": "#f77669",
|
||||
"euiCodeBlockSelectorTagColor": "#c792ea",
|
||||
"euiCodeBlockStringColor": "#c3e88d",
|
||||
"euiCodeBlockSymbolColor": "#c792ea",
|
||||
"euiCodeBlockTagColor": "#abb2bf",
|
||||
"euiCodeBlockTitleColor": "#75a5ff",
|
||||
"euiCodeBlockTypeColor": "#da4939",
|
||||
"euiCodeFontFamily": "'Roboto Mono', 'Consolas', 'Menlo', 'Courier', monospace",
|
||||
"euiColorAccent": "#f990c0",
|
||||
"euiColorChartBand": "#2a2c35",
|
||||
"euiColorChartLines": "#343741",
|
||||
"euiColorDanger": "#ff6666",
|
||||
"euiColorDarkShade": "#98a2b3",
|
||||
"euiColorDarkestShade": "#d4dae5",
|
||||
"euiColorEmptyShade": "#1d1e24",
|
||||
"euiColorFullShade": "#ffffff",
|
||||
"euiColorGhost": "#ffffff",
|
||||
"euiColorHighlight": "#2e2d25",
|
||||
"euiColorInk": "#000000",
|
||||
"euiColorLightShade": "#343741",
|
||||
"euiColorLightestShade": "#25262e",
|
||||
"euiColorMediumShade": "#535966",
|
||||
"euiColorPickerIndicatorSize": "12px",
|
||||
"euiColorPickerSaturationRange0": "#000000",
|
||||
"euiColorPickerSaturationRange1": "rgba(0, 0, 0, 0)",
|
||||
"euiColorPickerValueRange0": "#ffffff",
|
||||
"euiColorPickerValueRange1": "rgba(255, 255, 255, 0)",
|
||||
"euiColorPickerWidth": "152px",
|
||||
"euiColorPrimary": "#1ba9f5",
|
||||
"euiColorSecondary": "#7de2d1",
|
||||
"euiColorSuccess": "#7de2d1",
|
||||
"euiColorVis0": "#00b3a4",
|
||||
"euiColorVis1": "#3185fc",
|
||||
"euiColorVis2": "#db1374",
|
||||
"euiColorVis3": "#490092",
|
||||
"euiColorVis4": "#feb6db",
|
||||
"euiColorVis5": "#e6c220",
|
||||
"euiColorVis6": "#bfa180",
|
||||
"euiColorVis7": "#f98510",
|
||||
"euiColorVis8": "#461a0a",
|
||||
"euiColorVis9": "#920000",
|
||||
"euiColorWarning": "#ffce7a",
|
||||
"euiContextMenuWidth": "256px",
|
||||
"euiDataGridCellPaddingL": "8px",
|
||||
"euiDataGridCellPaddingM": "6px",
|
||||
"euiDataGridCellPaddingS": "4px",
|
||||
"euiDataGridColumnResizerWidth": "3px",
|
||||
"euiDataGridPrefix": ".euiDataGrid--",
|
||||
"euiDataGridStyles": "'bordersAll', 'bordersNone', 'bordersHorizontal', 'paddingSmall', 'paddingMedium', 'paddingLarge', 'stripes', 'rowHoverNone', 'rowHoverHighlight', 'headerShade', 'headerUnderline', 'fontSizeSmall', 'fontSizeLarge'",
|
||||
"euiDataGridVerticalBorder": "solid 1px #24272e",
|
||||
"euiDatePickerCalendarWidth": "284px",
|
||||
"euiDragAndDropSpacing": Object {
|
||||
"l": "8px",
|
||||
"m": "4px",
|
||||
"s": "2px",
|
||||
},
|
||||
"euiExpressionColors": Object {
|
||||
"accent": "#f990c0",
|
||||
"danger": "#ff6666",
|
||||
"primary": "#1ba9f5",
|
||||
"secondary": "#7de2d1",
|
||||
"subdued": "#535966",
|
||||
"warning": "#ffce7a",
|
||||
},
|
||||
"euiFilePickerTallHeight": "128px",
|
||||
"euiFocusBackgroundColor": "#232635",
|
||||
"euiFocusRingAnimStartColor": "rgba(27, 169, 245, 0)",
|
||||
"euiFocusRingColor": "rgba(27, 169, 245, 0.3)",
|
||||
"euiFocusRingSize": "2px",
|
||||
"euiFocusRingSizeLarge": "4px",
|
||||
"euiFontFamily": "'Inter UI', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Helvetica', 'Arial', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
|
||||
"euiFontFeatureSettings": "calt 1 kern 1 liga 1",
|
||||
"euiFontSize": "16px",
|
||||
"euiFontSizeL": "20px",
|
||||
"euiFontSizeM": "18px",
|
||||
"euiFontSizeS": "14px",
|
||||
"euiFontSizeXL": "28px",
|
||||
"euiFontSizeXS": "12px",
|
||||
"euiFontSizeXXL": "36px",
|
||||
"euiFontWeightBold": 700,
|
||||
"euiFontWeightLight": 300,
|
||||
"euiFontWeightMedium": 500,
|
||||
"euiFontWeightRegular": 400,
|
||||
"euiFontWeightSemiBold": 600,
|
||||
"euiFormBackgroundColor": "#16171c",
|
||||
"euiFormBackgroundDisabledColor": "#202128",
|
||||
"euiFormBackgroundReadOnlyColor": "rgba(0, 0, 0, 0.050000000000000044)",
|
||||
"euiFormBorderColor": "rgba(255, 255, 255, 0.09999999999999998)",
|
||||
"euiFormBorderDisabledColor": "rgba(255, 255, 255, 0.09999999999999998)",
|
||||
"euiFormBorderOpaqueColor": "#ffffff",
|
||||
"euiFormControlBoxShadow": "0 1px 1px -1px rgba(0, 0, 0, 0.19999999999999996) 0 3px 2px -2px rgba(0, 0, 0, 0.19999999999999996)",
|
||||
"euiFormControlCompressedBorderRadius": "2px",
|
||||
"euiFormControlCompressedHeight": "32px",
|
||||
"euiFormControlCompressedPadding": "8px",
|
||||
"euiFormControlDisabledColor": "#535966",
|
||||
"euiFormControlHeight": "40px",
|
||||
"euiFormControlLayoutGroupInputCompressedBorderRadius": "1px",
|
||||
"euiFormControlLayoutGroupInputCompressedHeight": "30px",
|
||||
"euiFormControlLayoutGroupInputHeight": "38px",
|
||||
"euiFormControlPadding": "12px",
|
||||
"euiFormCustomControlBorderColor": "#66676d",
|
||||
"euiFormCustomControlDisabledIconColor": "#a6aab0",
|
||||
"euiFormInputGroupBorder": "1px solid #313338",
|
||||
"euiFormInputGroupLabelBackground": "#1f2127",
|
||||
"euiFormMaxWidth": "400px",
|
||||
"euiGradientMiddle": "#282a31",
|
||||
"euiGradientStartStop": "#2e3039",
|
||||
"euiHeaderBackgroundColor": "#1d1e24",
|
||||
"euiHeaderBreadcrumbColor": "#d4dae5",
|
||||
"euiHeaderChildSize": "48px",
|
||||
"euiIconColors": Object {
|
||||
"accent": "#f990c0",
|
||||
"danger": "#ff6666",
|
||||
"ghost": "#ffffff",
|
||||
"primary": "#1ba9f5",
|
||||
"secondary": "#7de2d1",
|
||||
"subdued": "#535966",
|
||||
"success": "#7de2d1",
|
||||
"text": "#dfe5ef",
|
||||
"warning": "#ffce7a",
|
||||
},
|
||||
"euiIconLoadingOpacity": 0.05,
|
||||
"euiIconSizes": Object {
|
||||
"large": "24px",
|
||||
"medium": "16px",
|
||||
"small": "12px",
|
||||
"xLarge": "32px",
|
||||
"xxLarge": "40px",
|
||||
},
|
||||
"euiKeyPadMenuItemBetaBadgeSize": "20px",
|
||||
"euiKeyPadMenuSize": "96px",
|
||||
"euiLineHeight": 1.5,
|
||||
"euiLinkColor": "#1ba9f5",
|
||||
"euiNavDrawerBackgroundColor": "#1d1e24",
|
||||
"euiNavDrawerContractingDelay": "150ms",
|
||||
"euiNavDrawerExpandingDelay": "250ms",
|
||||
"euiNavDrawerExtendedDelay": "1000ms",
|
||||
"euiNavDrawerMenuAddedDelay": "90ms",
|
||||
"euiNavDrawerSideShadow": "2px 0 2px -1px rgba(0, 0, 0, 0.3)",
|
||||
"euiNavDrawerTopPosition": "49px",
|
||||
"euiNavDrawerWidthCollapsed": "48px",
|
||||
"euiNavDrawerWidthExpanded": "240px",
|
||||
"euiPageBackgroundColor": "#1a1b20",
|
||||
"euiPanelBorderColor": "#000000",
|
||||
"euiPanelPaddingModifiers": Object {
|
||||
"paddingLarge": "24px",
|
||||
"paddingMedium": "16px",
|
||||
"paddingSmall": "8px",
|
||||
},
|
||||
"euiPopoverArrowSize": "12px",
|
||||
"euiPopoverTranslateDistance": "8px",
|
||||
"euiProgressColors": Object {
|
||||
"accent": "#f990c0",
|
||||
"danger": "#ff6666",
|
||||
"primary": "#1ba9f5",
|
||||
"secondary": "#7de2d1",
|
||||
"subdued": "#535966",
|
||||
"warning": "#ffce7a",
|
||||
},
|
||||
"euiProgressSizes": Object {
|
||||
"l": "16px",
|
||||
"m": "8px",
|
||||
"s": "4px",
|
||||
"xs": "2px",
|
||||
},
|
||||
"euiRadioSize": "16px",
|
||||
"euiRangeDisabledOpacity": 0.25,
|
||||
"euiRangeHighlightHeight": "4px",
|
||||
"euiRangeLevelColors": Object {
|
||||
"danger": "#ff6666",
|
||||
"primary": "#1ba9f5",
|
||||
"success": "#7de2d1",
|
||||
"warning": "#ffce7a",
|
||||
},
|
||||
"euiRangeThumbBorderColor": "#98a2b3",
|
||||
"euiRangeThumbHeight": "16px",
|
||||
"euiRangeThumbRadius": "50%",
|
||||
"euiRangeThumbWidth": "16px",
|
||||
"euiRangeTrackBorderColor": "#98a2b3",
|
||||
"euiRangeTrackBorderWidth": 0,
|
||||
"euiRangeTrackColor": "#98a2b3",
|
||||
"euiRangeTrackHeight": "2px",
|
||||
"euiRangeTrackRadius": "4px",
|
||||
"euiRangeTrackWidth": "100%",
|
||||
"euiScrollBar": "16px",
|
||||
"euiScrollBarCorner": "6px",
|
||||
"euiSelectableListItemBorder": "1px solid #202128",
|
||||
"euiShadowColor": "#000000",
|
||||
"euiShadowColorLarge": "#000000",
|
||||
"euiSize": "16px",
|
||||
"euiSizeL": "24px",
|
||||
"euiSizeM": "12px",
|
||||
"euiSizeS": "8px",
|
||||
"euiSizeXL": "32px",
|
||||
"euiSizeXS": "4px",
|
||||
"euiSizeXXL": "40px",
|
||||
"euiStepNumberMargin": "16px",
|
||||
"euiStepNumberSize": "32px",
|
||||
"euiStepStatusColorsToFade": Object {
|
||||
"danger": "#ff6666",
|
||||
"disabled": "#98a2b3",
|
||||
"incomplete": "#98a2b3",
|
||||
"warning": "#ffce7a",
|
||||
},
|
||||
"euiSuggestItemColors": Object {
|
||||
"tint0": "#00b3a4",
|
||||
"tint1": "#3185fc",
|
||||
"tint2": "#db1374",
|
||||
"tint3": "#490092",
|
||||
"tint4": "#e6c220",
|
||||
"tint5": "#f98510",
|
||||
"tint6": "#461a0a",
|
||||
"tint7": "#920000",
|
||||
"tint8": "#98a2b3",
|
||||
},
|
||||
"euiSuperDatePickerButtonWidth": "118px",
|
||||
"euiSuperDatePickerWidth": "480px",
|
||||
"euiSwitchHeight": "20px",
|
||||
"euiSwitchHeightCompressed": "16px",
|
||||
"euiSwitchHeightMini": "10px",
|
||||
"euiSwitchIconHeight": "16px",
|
||||
"euiSwitchOffColor": "rgba(83, 89, 102, 0.7)",
|
||||
"euiSwitchThumbSize": "20px",
|
||||
"euiSwitchThumbSizeCompressed": "16px",
|
||||
"euiSwitchThumbSizeMini": "10px",
|
||||
"euiSwitchWidth": "44px",
|
||||
"euiSwitchWidthCompressed": "28px",
|
||||
"euiSwitchWidthMini": "22px",
|
||||
"euiTabFontSize": "16px",
|
||||
"euiTabFontSizeS": "14px",
|
||||
"euiTableActionsAreaWidth": "40px",
|
||||
"euiTableActionsBorderColor": "rgba(83, 89, 102, 0.09999999999999998)",
|
||||
"euiTableCellCheckboxWidth": "32px",
|
||||
"euiTableCellContentPadding": "8px",
|
||||
"euiTableCellContentPaddingCompressed": "4px",
|
||||
"euiTableFocusClickableColor": "rgba(27, 169, 245, 0.09999999999999998)",
|
||||
"euiTableHoverClickableColor": "rgba(27, 169, 245, 0.050000000000000044)",
|
||||
"euiTableHoverColor": "#1e1e25",
|
||||
"euiTableHoverSelectedColor": "#202230",
|
||||
"euiTableSelectedColor": "#232635",
|
||||
"euiTextColor": "#dfe5ef",
|
||||
"euiTextConstrainedMaxWidth": "36em",
|
||||
"euiTextScale": "2.25 1.75 1.25 1.125 1 0.875 0.75",
|
||||
"euiTitleColor": "#dfe5ef",
|
||||
"euiToastWidth": "320px",
|
||||
"euiTooltipAnimations": Object {
|
||||
"bottom": "euiToolTipLeft",
|
||||
"left": "euiToolTipBottom",
|
||||
"right": "euiToolTipRight",
|
||||
"top": "euiToolTipTop",
|
||||
},
|
||||
"euiTooltipBackgroundColor": "#000000",
|
||||
"euiZComboBox": 8001,
|
||||
"euiZContent": 0,
|
||||
"euiZContentMenu": 2000,
|
||||
"euiZHeader": 1000,
|
||||
"euiZLevel0": 0,
|
||||
"euiZLevel1": 1000,
|
||||
"euiZLevel2": 2000,
|
||||
"euiZLevel3": 3000,
|
||||
"euiZLevel4": 4000,
|
||||
"euiZLevel5": 5000,
|
||||
"euiZLevel6": 6000,
|
||||
"euiZLevel7": 7000,
|
||||
"euiZLevel8": 8000,
|
||||
"euiZLevel9": 9000,
|
||||
"euiZMask": 6000,
|
||||
"euiZModal": 8000,
|
||||
"euiZNavigation": 4000,
|
||||
"euiZToastList": 9000,
|
||||
"flyoutSizes": Object {
|
||||
"large": Object {
|
||||
"max": "992px",
|
||||
"min": "691px",
|
||||
"width": "75vw",
|
||||
},
|
||||
"medium": Object {
|
||||
"max": "768px",
|
||||
"min": "424px",
|
||||
"width": "50vw",
|
||||
},
|
||||
"small": Object {
|
||||
"max": "403px",
|
||||
"min": "384px",
|
||||
"width": "25vw",
|
||||
},
|
||||
},
|
||||
"fractions": Object {
|
||||
"fourths": Object {
|
||||
"count": 4,
|
||||
"percentage": "25%",
|
||||
},
|
||||
"halves": Object {
|
||||
"count": 2,
|
||||
"percentage": "50%",
|
||||
},
|
||||
"single": Object {
|
||||
"count": 1,
|
||||
"percentage": "100%",
|
||||
},
|
||||
"thirds": Object {
|
||||
"count": 3,
|
||||
"percentage": "33.3%",
|
||||
},
|
||||
},
|
||||
"gutterTypes": Object {
|
||||
"gutterExtraLarge": "40px",
|
||||
"gutterExtraSmall": "4px",
|
||||
"gutterLarge": "24px",
|
||||
"gutterMedium": "16px",
|
||||
"gutterSmall": "8px",
|
||||
},
|
||||
"paddingSizes": Object {
|
||||
"l": "24px",
|
||||
"m": "16px",
|
||||
"s": "8px",
|
||||
"xl": "32px",
|
||||
"xs": "4px",
|
||||
},
|
||||
"ruleMargins": Object {
|
||||
"marginLarge": "24px",
|
||||
"marginMedium": "16px",
|
||||
"marginSmall": "12px",
|
||||
"marginXLarge": "32px",
|
||||
"marginXSmall": "8px",
|
||||
"marginXXLarge": "40px",
|
||||
},
|
||||
"spacerSizes": Object {
|
||||
"l": "24px",
|
||||
"m": "16px",
|
||||
"s": "8px",
|
||||
"xl": "32px",
|
||||
"xs": "4px",
|
||||
"xxl": "40px",
|
||||
},
|
||||
"textColors": Object {
|
||||
"accent": "#f990c0",
|
||||
"danger": "#ff6666",
|
||||
"default": "#dfe5ef",
|
||||
"ghost": "#ffffff",
|
||||
"secondary": "#7de2d1",
|
||||
"subdued": "#98a2b3",
|
||||
"warning": "#ffce7a",
|
||||
},
|
||||
"textareaResizing": Object {
|
||||
"both": "resizeBoth",
|
||||
"horizontal": "resizeHorizontal",
|
||||
"none": "resizeNone",
|
||||
"vertical": "resizeVertical",
|
||||
},
|
||||
"toastTypes": Object {
|
||||
"danger": "#ff6666",
|
||||
"primary": "#1ba9f5",
|
||||
"success": "#7de2d1",
|
||||
"warning": "#ffce7a",
|
||||
},
|
||||
"tokenTypes": Object {
|
||||
"tokenTint01": "#1ba9f5",
|
||||
"tokenTint02": "#f990c0",
|
||||
"tokenTint03": "#490092",
|
||||
"tokenTint04": "#f98510",
|
||||
"tokenTint05": "#3185fc",
|
||||
"tokenTint06": "#e6c220",
|
||||
"tokenTint07": "#00b3a4",
|
||||
"tokenTint08": "#920000",
|
||||
"tokenTint09": "#ff00ff",
|
||||
"tokenTint10": "#26ab00",
|
||||
"tokenTint11": "#4c1604",
|
||||
"tokenTint12": "#666666",
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
>
|
||||
<NoteCardBody
|
||||
rawNote="# This is a note"
|
||||
/>
|
||||
</ContextProvider>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@
|
|||
import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
|
||||
import { cloneDeep, omit } from 'lodash/fp';
|
||||
import { mountWithIntl } from 'test_utils/enzyme_helpers';
|
||||
import 'jest-styled-components';
|
||||
import * as React from 'react';
|
||||
import { ThemeProvider } from 'styled-components';
|
||||
|
||||
|
|
|
|||
|
|
@ -13,11 +13,11 @@ import {
|
|||
EuiIcon,
|
||||
EuiPage,
|
||||
} from '@elastic/eui';
|
||||
import styled, { injectGlobal } from 'styled-components';
|
||||
import styled, { createGlobalStyle } from 'styled-components';
|
||||
|
||||
// SIDE EFFECT: the following `injectGlobal` overrides default styling in angular code that was not theme-friendly
|
||||
// SIDE EFFECT: the following `createGlobalStyle` overrides default styling in angular code that was not theme-friendly
|
||||
// eslint-disable-next-line no-unused-expressions
|
||||
injectGlobal`
|
||||
createGlobalStyle`
|
||||
div.app-wrapper {
|
||||
background-color: rgba(0,0,0,0);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,107 +1,593 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Paginated Table Component rendering it renders the default load more table 1`] = `
|
||||
<PaginatedTable
|
||||
activePage={0}
|
||||
columns={
|
||||
Array [
|
||||
Object {
|
||||
"field": "node.host.name",
|
||||
"hideForMobile": false,
|
||||
"name": "Host",
|
||||
"render": [Function],
|
||||
"truncateText": false,
|
||||
},
|
||||
Object {
|
||||
"field": "node.host.firstSeen",
|
||||
"hideForMobile": false,
|
||||
"name": "First seen",
|
||||
"render": [Function],
|
||||
"truncateText": false,
|
||||
},
|
||||
Object {
|
||||
"field": "node.host.os",
|
||||
"hideForMobile": false,
|
||||
"name": "OS",
|
||||
"render": [Function],
|
||||
"truncateText": false,
|
||||
},
|
||||
Object {
|
||||
"field": "node.host.version",
|
||||
"hideForMobile": false,
|
||||
"name": "Version",
|
||||
"render": [Function],
|
||||
"truncateText": false,
|
||||
},
|
||||
]
|
||||
}
|
||||
headerCount={1}
|
||||
headerSupplement={
|
||||
<p>
|
||||
My test supplement.
|
||||
</p>
|
||||
}
|
||||
headerTitle="Hosts"
|
||||
headerTooltip="My test tooltip"
|
||||
headerUnit="Test Unit"
|
||||
itemsPerRow={
|
||||
Array [
|
||||
Object {
|
||||
"numberOfRow": 2,
|
||||
"text": "2 rows",
|
||||
},
|
||||
Object {
|
||||
"numberOfRow": 5,
|
||||
"text": "5 rows",
|
||||
},
|
||||
Object {
|
||||
"numberOfRow": 10,
|
||||
"text": "10 rows",
|
||||
},
|
||||
Object {
|
||||
"numberOfRow": 20,
|
||||
"text": "20 rows",
|
||||
},
|
||||
Object {
|
||||
"numberOfRow": 50,
|
||||
"text": "50 rows",
|
||||
},
|
||||
]
|
||||
}
|
||||
limit={1}
|
||||
loadPage={[Function]}
|
||||
loading={false}
|
||||
pageOfItems={
|
||||
Array [
|
||||
Object {
|
||||
"cursor": Object {
|
||||
"value": "98966fa2013c396155c460d35c0902be",
|
||||
<ContextProvider
|
||||
value={
|
||||
Object {
|
||||
"darkMode": true,
|
||||
"eui": Object {
|
||||
"avatarSizing": Object {
|
||||
"l": Object {
|
||||
"font-size": "19.200000000000003px",
|
||||
"size": "40px",
|
||||
},
|
||||
"m": Object {
|
||||
"font-size": "14.4px",
|
||||
"size": "32px",
|
||||
},
|
||||
"s": Object {
|
||||
"font-size": "12px",
|
||||
"size": "24px",
|
||||
},
|
||||
"xl": Object {
|
||||
"font-size": "25.6px",
|
||||
"size": "64px",
|
||||
},
|
||||
},
|
||||
"host": Object {
|
||||
"_id": "cPsuhGcB0WOhS6qyTKC0",
|
||||
"firstSeen": "2018-12-06T15:40:53.319Z",
|
||||
"name": "elrond.elstc.co",
|
||||
"os": "Ubuntu",
|
||||
"version": "18.04.1 LTS (Bionic Beaver)",
|
||||
"badgeTypes": Object {
|
||||
"accent": "#e2a7c2",
|
||||
"danger": "#e65c5c",
|
||||
"default": "#343741",
|
||||
"primary": "#388ebc",
|
||||
"secondary": "#9dc2bc",
|
||||
"warning": "#ebc98e",
|
||||
},
|
||||
"buttonTypes": Object {
|
||||
"danger": "#ff6666",
|
||||
"ghost": "#ffffff",
|
||||
"primary": "#1ba9f5",
|
||||
"secondary": "#7de2d1",
|
||||
"text": "#98a2b3",
|
||||
"warning": "#ffce7a",
|
||||
},
|
||||
"euiAnimSlightBounce": "cubic-bezier(0.34, 1.61, 0.7, 1)",
|
||||
"euiAnimSlightResistance": "cubic-bezier(0.694, 0.0482, 0.335, 1)",
|
||||
"euiAnimSpeedExtraFast": "90ms",
|
||||
"euiAnimSpeedExtraSlow": "500ms",
|
||||
"euiAnimSpeedFast": "150ms",
|
||||
"euiAnimSpeedNormal": "250ms",
|
||||
"euiAnimSpeedSlow": "350ms",
|
||||
"euiBorderColor": "#343741",
|
||||
"euiBorderEditable": "2px dotted #343741",
|
||||
"euiBorderRadius": "4px",
|
||||
"euiBorderThick": "2px solid #343741",
|
||||
"euiBorderThin": "1px solid #343741",
|
||||
"euiBorderWidthThick": "2px",
|
||||
"euiBorderWidthThin": "1px",
|
||||
"euiBreadcrumbSpacing": "8px",
|
||||
"euiBreadcrumbTruncateWidth": "160px",
|
||||
"euiBreakpointKeys": "'xs', 's', 'm', 'l', 'xl'",
|
||||
"euiBreakpoints": Object {
|
||||
"l": "992px",
|
||||
"m": "768px",
|
||||
"s": "575px",
|
||||
"xl": "1200px",
|
||||
"xs": 0,
|
||||
},
|
||||
"euiButtonColorDisabled": "#434548",
|
||||
"euiButtonHeight": "40px",
|
||||
"euiButtonHeightSmall": "32px",
|
||||
"euiButtonMinWidth": "112px",
|
||||
"euiButtonToggleBorderColor": "#343741",
|
||||
"euiCallOutTypes": Object {
|
||||
"danger": "#ff6666",
|
||||
"primary": "#1ba9f5",
|
||||
"success": "#7de2d1",
|
||||
"warning": "#ffce7a",
|
||||
},
|
||||
"euiCardGraphicHeight": "40px",
|
||||
"euiCardSelectButtonBackgrounds": Object {
|
||||
"danger": "#4d1f1f",
|
||||
"ghost": "#98a2b3",
|
||||
"primary": "#08334a",
|
||||
"success": "#26443f",
|
||||
"text": "#25262e",
|
||||
},
|
||||
"euiCardSelectButtonBorders": Object {
|
||||
"danger": "#ff6666",
|
||||
"ghost": "#98a2b3",
|
||||
"primary": "#1ba9f5",
|
||||
"success": "#7de2d1",
|
||||
"text": "#7de2d1",
|
||||
},
|
||||
"euiCardSpacing": "16px",
|
||||
"euiCardTitleSize": "18px",
|
||||
"euiCheckBoxSize": "16px",
|
||||
"euiCodeBlockAdditionBackgroundColor": "#144212",
|
||||
"euiCodeBlockAdditionColor": "#e6e1dc",
|
||||
"euiCodeBlockAttributeColor": "#80cbbf",
|
||||
"euiCodeBlockBackgroundColor": "#25262e",
|
||||
"euiCodeBlockBuiltInColor": "#0086b3",
|
||||
"euiCodeBlockColor": "#dfe5ef",
|
||||
"euiCodeBlockCommentColor": "#656565",
|
||||
"euiCodeBlockDeletionBackgroundColor": "#660000",
|
||||
"euiCodeBlockDeletionColor": "#e6e1dc",
|
||||
"euiCodeBlockFunctionTitleColor": "#75a5ff",
|
||||
"euiCodeBlockKeywordColor": "#c792ea",
|
||||
"euiCodeBlockMetaColor": "#75a5ff",
|
||||
"euiCodeBlockNameColor": "#e06c75",
|
||||
"euiCodeBlockNumberColor": "#f77669",
|
||||
"euiCodeBlockParamsColor": "#eefff7",
|
||||
"euiCodeBlockRegexpColor": "#009926",
|
||||
"euiCodeBlockSectionColor": "#ffc66d",
|
||||
"euiCodeBlockSelectedBackgroundColor": "inherit",
|
||||
"euiCodeBlockSelectorClassColor": "#ffcb68",
|
||||
"euiCodeBlockSelectorIdColor": "#f77669",
|
||||
"euiCodeBlockSelectorTagColor": "#c792ea",
|
||||
"euiCodeBlockStringColor": "#c3e88d",
|
||||
"euiCodeBlockSymbolColor": "#c792ea",
|
||||
"euiCodeBlockTagColor": "#abb2bf",
|
||||
"euiCodeBlockTitleColor": "#75a5ff",
|
||||
"euiCodeBlockTypeColor": "#da4939",
|
||||
"euiCodeFontFamily": "'Roboto Mono', 'Consolas', 'Menlo', 'Courier', monospace",
|
||||
"euiColorAccent": "#f990c0",
|
||||
"euiColorChartBand": "#2a2c35",
|
||||
"euiColorChartLines": "#343741",
|
||||
"euiColorDanger": "#ff6666",
|
||||
"euiColorDarkShade": "#98a2b3",
|
||||
"euiColorDarkestShade": "#d4dae5",
|
||||
"euiColorEmptyShade": "#1d1e24",
|
||||
"euiColorFullShade": "#ffffff",
|
||||
"euiColorGhost": "#ffffff",
|
||||
"euiColorHighlight": "#2e2d25",
|
||||
"euiColorInk": "#000000",
|
||||
"euiColorLightShade": "#343741",
|
||||
"euiColorLightestShade": "#25262e",
|
||||
"euiColorMediumShade": "#535966",
|
||||
"euiColorPickerIndicatorSize": "12px",
|
||||
"euiColorPickerSaturationRange0": "#000000",
|
||||
"euiColorPickerSaturationRange1": "rgba(0, 0, 0, 0)",
|
||||
"euiColorPickerValueRange0": "#ffffff",
|
||||
"euiColorPickerValueRange1": "rgba(255, 255, 255, 0)",
|
||||
"euiColorPickerWidth": "152px",
|
||||
"euiColorPrimary": "#1ba9f5",
|
||||
"euiColorSecondary": "#7de2d1",
|
||||
"euiColorSuccess": "#7de2d1",
|
||||
"euiColorVis0": "#00b3a4",
|
||||
"euiColorVis1": "#3185fc",
|
||||
"euiColorVis2": "#db1374",
|
||||
"euiColorVis3": "#490092",
|
||||
"euiColorVis4": "#feb6db",
|
||||
"euiColorVis5": "#e6c220",
|
||||
"euiColorVis6": "#bfa180",
|
||||
"euiColorVis7": "#f98510",
|
||||
"euiColorVis8": "#461a0a",
|
||||
"euiColorVis9": "#920000",
|
||||
"euiColorWarning": "#ffce7a",
|
||||
"euiContextMenuWidth": "256px",
|
||||
"euiDataGridCellPaddingL": "8px",
|
||||
"euiDataGridCellPaddingM": "6px",
|
||||
"euiDataGridCellPaddingS": "4px",
|
||||
"euiDataGridColumnResizerWidth": "3px",
|
||||
"euiDataGridPrefix": ".euiDataGrid--",
|
||||
"euiDataGridStyles": "'bordersAll', 'bordersNone', 'bordersHorizontal', 'paddingSmall', 'paddingMedium', 'paddingLarge', 'stripes', 'rowHoverNone', 'rowHoverHighlight', 'headerShade', 'headerUnderline', 'fontSizeSmall', 'fontSizeLarge'",
|
||||
"euiDataGridVerticalBorder": "solid 1px #24272e",
|
||||
"euiDatePickerCalendarWidth": "284px",
|
||||
"euiDragAndDropSpacing": Object {
|
||||
"l": "8px",
|
||||
"m": "4px",
|
||||
"s": "2px",
|
||||
},
|
||||
"euiExpressionColors": Object {
|
||||
"accent": "#f990c0",
|
||||
"danger": "#ff6666",
|
||||
"primary": "#1ba9f5",
|
||||
"secondary": "#7de2d1",
|
||||
"subdued": "#535966",
|
||||
"warning": "#ffce7a",
|
||||
},
|
||||
"euiFilePickerTallHeight": "128px",
|
||||
"euiFocusBackgroundColor": "#232635",
|
||||
"euiFocusRingAnimStartColor": "rgba(27, 169, 245, 0)",
|
||||
"euiFocusRingColor": "rgba(27, 169, 245, 0.3)",
|
||||
"euiFocusRingSize": "2px",
|
||||
"euiFocusRingSizeLarge": "4px",
|
||||
"euiFontFamily": "'Inter UI', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Helvetica', 'Arial', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
|
||||
"euiFontFeatureSettings": "calt 1 kern 1 liga 1",
|
||||
"euiFontSize": "16px",
|
||||
"euiFontSizeL": "20px",
|
||||
"euiFontSizeM": "18px",
|
||||
"euiFontSizeS": "14px",
|
||||
"euiFontSizeXL": "28px",
|
||||
"euiFontSizeXS": "12px",
|
||||
"euiFontSizeXXL": "36px",
|
||||
"euiFontWeightBold": 700,
|
||||
"euiFontWeightLight": 300,
|
||||
"euiFontWeightMedium": 500,
|
||||
"euiFontWeightRegular": 400,
|
||||
"euiFontWeightSemiBold": 600,
|
||||
"euiFormBackgroundColor": "#16171c",
|
||||
"euiFormBackgroundDisabledColor": "#202128",
|
||||
"euiFormBackgroundReadOnlyColor": "rgba(0, 0, 0, 0.050000000000000044)",
|
||||
"euiFormBorderColor": "rgba(255, 255, 255, 0.09999999999999998)",
|
||||
"euiFormBorderDisabledColor": "rgba(255, 255, 255, 0.09999999999999998)",
|
||||
"euiFormBorderOpaqueColor": "#ffffff",
|
||||
"euiFormControlBoxShadow": "0 1px 1px -1px rgba(0, 0, 0, 0.19999999999999996) 0 3px 2px -2px rgba(0, 0, 0, 0.19999999999999996)",
|
||||
"euiFormControlCompressedBorderRadius": "2px",
|
||||
"euiFormControlCompressedHeight": "32px",
|
||||
"euiFormControlCompressedPadding": "8px",
|
||||
"euiFormControlDisabledColor": "#535966",
|
||||
"euiFormControlHeight": "40px",
|
||||
"euiFormControlLayoutGroupInputCompressedBorderRadius": "1px",
|
||||
"euiFormControlLayoutGroupInputCompressedHeight": "30px",
|
||||
"euiFormControlLayoutGroupInputHeight": "38px",
|
||||
"euiFormControlPadding": "12px",
|
||||
"euiFormCustomControlBorderColor": "#66676d",
|
||||
"euiFormCustomControlDisabledIconColor": "#a6aab0",
|
||||
"euiFormInputGroupBorder": "1px solid #313338",
|
||||
"euiFormInputGroupLabelBackground": "#1f2127",
|
||||
"euiFormMaxWidth": "400px",
|
||||
"euiGradientMiddle": "#282a31",
|
||||
"euiGradientStartStop": "#2e3039",
|
||||
"euiHeaderBackgroundColor": "#1d1e24",
|
||||
"euiHeaderBreadcrumbColor": "#d4dae5",
|
||||
"euiHeaderChildSize": "48px",
|
||||
"euiIconColors": Object {
|
||||
"accent": "#f990c0",
|
||||
"danger": "#ff6666",
|
||||
"ghost": "#ffffff",
|
||||
"primary": "#1ba9f5",
|
||||
"secondary": "#7de2d1",
|
||||
"subdued": "#535966",
|
||||
"success": "#7de2d1",
|
||||
"text": "#dfe5ef",
|
||||
"warning": "#ffce7a",
|
||||
},
|
||||
"euiIconLoadingOpacity": 0.05,
|
||||
"euiIconSizes": Object {
|
||||
"large": "24px",
|
||||
"medium": "16px",
|
||||
"small": "12px",
|
||||
"xLarge": "32px",
|
||||
"xxLarge": "40px",
|
||||
},
|
||||
"euiKeyPadMenuItemBetaBadgeSize": "20px",
|
||||
"euiKeyPadMenuSize": "96px",
|
||||
"euiLineHeight": 1.5,
|
||||
"euiLinkColor": "#1ba9f5",
|
||||
"euiNavDrawerBackgroundColor": "#1d1e24",
|
||||
"euiNavDrawerContractingDelay": "150ms",
|
||||
"euiNavDrawerExpandingDelay": "250ms",
|
||||
"euiNavDrawerExtendedDelay": "1000ms",
|
||||
"euiNavDrawerMenuAddedDelay": "90ms",
|
||||
"euiNavDrawerSideShadow": "2px 0 2px -1px rgba(0, 0, 0, 0.3)",
|
||||
"euiNavDrawerTopPosition": "49px",
|
||||
"euiNavDrawerWidthCollapsed": "48px",
|
||||
"euiNavDrawerWidthExpanded": "240px",
|
||||
"euiPageBackgroundColor": "#1a1b20",
|
||||
"euiPanelBorderColor": "#000000",
|
||||
"euiPanelPaddingModifiers": Object {
|
||||
"paddingLarge": "24px",
|
||||
"paddingMedium": "16px",
|
||||
"paddingSmall": "8px",
|
||||
},
|
||||
"euiPopoverArrowSize": "12px",
|
||||
"euiPopoverTranslateDistance": "8px",
|
||||
"euiProgressColors": Object {
|
||||
"accent": "#f990c0",
|
||||
"danger": "#ff6666",
|
||||
"primary": "#1ba9f5",
|
||||
"secondary": "#7de2d1",
|
||||
"subdued": "#535966",
|
||||
"warning": "#ffce7a",
|
||||
},
|
||||
"euiProgressSizes": Object {
|
||||
"l": "16px",
|
||||
"m": "8px",
|
||||
"s": "4px",
|
||||
"xs": "2px",
|
||||
},
|
||||
"euiRadioSize": "16px",
|
||||
"euiRangeDisabledOpacity": 0.25,
|
||||
"euiRangeHighlightHeight": "4px",
|
||||
"euiRangeLevelColors": Object {
|
||||
"danger": "#ff6666",
|
||||
"primary": "#1ba9f5",
|
||||
"success": "#7de2d1",
|
||||
"warning": "#ffce7a",
|
||||
},
|
||||
"euiRangeThumbBorderColor": "#98a2b3",
|
||||
"euiRangeThumbHeight": "16px",
|
||||
"euiRangeThumbRadius": "50%",
|
||||
"euiRangeThumbWidth": "16px",
|
||||
"euiRangeTrackBorderColor": "#98a2b3",
|
||||
"euiRangeTrackBorderWidth": 0,
|
||||
"euiRangeTrackColor": "#98a2b3",
|
||||
"euiRangeTrackHeight": "2px",
|
||||
"euiRangeTrackRadius": "4px",
|
||||
"euiRangeTrackWidth": "100%",
|
||||
"euiScrollBar": "16px",
|
||||
"euiScrollBarCorner": "6px",
|
||||
"euiSelectableListItemBorder": "1px solid #202128",
|
||||
"euiShadowColor": "#000000",
|
||||
"euiShadowColorLarge": "#000000",
|
||||
"euiSize": "16px",
|
||||
"euiSizeL": "24px",
|
||||
"euiSizeM": "12px",
|
||||
"euiSizeS": "8px",
|
||||
"euiSizeXL": "32px",
|
||||
"euiSizeXS": "4px",
|
||||
"euiSizeXXL": "40px",
|
||||
"euiStepNumberMargin": "16px",
|
||||
"euiStepNumberSize": "32px",
|
||||
"euiStepStatusColorsToFade": Object {
|
||||
"danger": "#ff6666",
|
||||
"disabled": "#98a2b3",
|
||||
"incomplete": "#98a2b3",
|
||||
"warning": "#ffce7a",
|
||||
},
|
||||
"euiSuggestItemColors": Object {
|
||||
"tint0": "#00b3a4",
|
||||
"tint1": "#3185fc",
|
||||
"tint2": "#db1374",
|
||||
"tint3": "#490092",
|
||||
"tint4": "#e6c220",
|
||||
"tint5": "#f98510",
|
||||
"tint6": "#461a0a",
|
||||
"tint7": "#920000",
|
||||
"tint8": "#98a2b3",
|
||||
},
|
||||
"euiSuperDatePickerButtonWidth": "118px",
|
||||
"euiSuperDatePickerWidth": "480px",
|
||||
"euiSwitchHeight": "20px",
|
||||
"euiSwitchHeightCompressed": "16px",
|
||||
"euiSwitchHeightMini": "10px",
|
||||
"euiSwitchIconHeight": "16px",
|
||||
"euiSwitchOffColor": "rgba(83, 89, 102, 0.7)",
|
||||
"euiSwitchThumbSize": "20px",
|
||||
"euiSwitchThumbSizeCompressed": "16px",
|
||||
"euiSwitchThumbSizeMini": "10px",
|
||||
"euiSwitchWidth": "44px",
|
||||
"euiSwitchWidthCompressed": "28px",
|
||||
"euiSwitchWidthMini": "22px",
|
||||
"euiTabFontSize": "16px",
|
||||
"euiTabFontSizeS": "14px",
|
||||
"euiTableActionsAreaWidth": "40px",
|
||||
"euiTableActionsBorderColor": "rgba(83, 89, 102, 0.09999999999999998)",
|
||||
"euiTableCellCheckboxWidth": "32px",
|
||||
"euiTableCellContentPadding": "8px",
|
||||
"euiTableCellContentPaddingCompressed": "4px",
|
||||
"euiTableFocusClickableColor": "rgba(27, 169, 245, 0.09999999999999998)",
|
||||
"euiTableHoverClickableColor": "rgba(27, 169, 245, 0.050000000000000044)",
|
||||
"euiTableHoverColor": "#1e1e25",
|
||||
"euiTableHoverSelectedColor": "#202230",
|
||||
"euiTableSelectedColor": "#232635",
|
||||
"euiTextColor": "#dfe5ef",
|
||||
"euiTextConstrainedMaxWidth": "36em",
|
||||
"euiTextScale": "2.25 1.75 1.25 1.125 1 0.875 0.75",
|
||||
"euiTitleColor": "#dfe5ef",
|
||||
"euiToastWidth": "320px",
|
||||
"euiTooltipAnimations": Object {
|
||||
"bottom": "euiToolTipLeft",
|
||||
"left": "euiToolTipBottom",
|
||||
"right": "euiToolTipRight",
|
||||
"top": "euiToolTipTop",
|
||||
},
|
||||
"euiTooltipBackgroundColor": "#000000",
|
||||
"euiZComboBox": 8001,
|
||||
"euiZContent": 0,
|
||||
"euiZContentMenu": 2000,
|
||||
"euiZHeader": 1000,
|
||||
"euiZLevel0": 0,
|
||||
"euiZLevel1": 1000,
|
||||
"euiZLevel2": 2000,
|
||||
"euiZLevel3": 3000,
|
||||
"euiZLevel4": 4000,
|
||||
"euiZLevel5": 5000,
|
||||
"euiZLevel6": 6000,
|
||||
"euiZLevel7": 7000,
|
||||
"euiZLevel8": 8000,
|
||||
"euiZLevel9": 9000,
|
||||
"euiZMask": 6000,
|
||||
"euiZModal": 8000,
|
||||
"euiZNavigation": 4000,
|
||||
"euiZToastList": 9000,
|
||||
"flyoutSizes": Object {
|
||||
"large": Object {
|
||||
"max": "992px",
|
||||
"min": "691px",
|
||||
"width": "75vw",
|
||||
},
|
||||
"medium": Object {
|
||||
"max": "768px",
|
||||
"min": "424px",
|
||||
"width": "50vw",
|
||||
},
|
||||
"small": Object {
|
||||
"max": "403px",
|
||||
"min": "384px",
|
||||
"width": "25vw",
|
||||
},
|
||||
},
|
||||
"fractions": Object {
|
||||
"fourths": Object {
|
||||
"count": 4,
|
||||
"percentage": "25%",
|
||||
},
|
||||
"halves": Object {
|
||||
"count": 2,
|
||||
"percentage": "50%",
|
||||
},
|
||||
"single": Object {
|
||||
"count": 1,
|
||||
"percentage": "100%",
|
||||
},
|
||||
"thirds": Object {
|
||||
"count": 3,
|
||||
"percentage": "33.3%",
|
||||
},
|
||||
},
|
||||
"gutterTypes": Object {
|
||||
"gutterExtraLarge": "40px",
|
||||
"gutterExtraSmall": "4px",
|
||||
"gutterLarge": "24px",
|
||||
"gutterMedium": "16px",
|
||||
"gutterSmall": "8px",
|
||||
},
|
||||
"paddingSizes": Object {
|
||||
"l": "24px",
|
||||
"m": "16px",
|
||||
"s": "8px",
|
||||
"xl": "32px",
|
||||
"xs": "4px",
|
||||
},
|
||||
"ruleMargins": Object {
|
||||
"marginLarge": "24px",
|
||||
"marginMedium": "16px",
|
||||
"marginSmall": "12px",
|
||||
"marginXLarge": "32px",
|
||||
"marginXSmall": "8px",
|
||||
"marginXXLarge": "40px",
|
||||
},
|
||||
"spacerSizes": Object {
|
||||
"l": "24px",
|
||||
"m": "16px",
|
||||
"s": "8px",
|
||||
"xl": "32px",
|
||||
"xs": "4px",
|
||||
"xxl": "40px",
|
||||
},
|
||||
"textColors": Object {
|
||||
"accent": "#f990c0",
|
||||
"danger": "#ff6666",
|
||||
"default": "#dfe5ef",
|
||||
"ghost": "#ffffff",
|
||||
"secondary": "#7de2d1",
|
||||
"subdued": "#98a2b3",
|
||||
"warning": "#ffce7a",
|
||||
},
|
||||
"textareaResizing": Object {
|
||||
"both": "resizeBoth",
|
||||
"horizontal": "resizeHorizontal",
|
||||
"none": "resizeNone",
|
||||
"vertical": "resizeVertical",
|
||||
},
|
||||
"toastTypes": Object {
|
||||
"danger": "#ff6666",
|
||||
"primary": "#1ba9f5",
|
||||
"success": "#7de2d1",
|
||||
"warning": "#ffce7a",
|
||||
},
|
||||
"tokenTypes": Object {
|
||||
"tokenTint01": "#1ba9f5",
|
||||
"tokenTint02": "#f990c0",
|
||||
"tokenTint03": "#490092",
|
||||
"tokenTint04": "#f98510",
|
||||
"tokenTint05": "#3185fc",
|
||||
"tokenTint06": "#e6c220",
|
||||
"tokenTint07": "#00b3a4",
|
||||
"tokenTint08": "#920000",
|
||||
"tokenTint09": "#ff00ff",
|
||||
"tokenTint10": "#26ab00",
|
||||
"tokenTint11": "#4c1604",
|
||||
"tokenTint12": "#666666",
|
||||
},
|
||||
},
|
||||
Object {
|
||||
"cursor": Object {
|
||||
"value": "aa7ca589f1b8220002f2fc61c64cfbf1",
|
||||
},
|
||||
"host": Object {
|
||||
"_id": "KwQDiWcB0WOhS6qyXmrW",
|
||||
"firstSeen": "2018-12-07T14:12:38.560Z",
|
||||
"name": "siem-kibana",
|
||||
"os": "Debian GNU/Linux",
|
||||
"version": "9 (stretch)",
|
||||
},
|
||||
},
|
||||
]
|
||||
}
|
||||
}
|
||||
showMorePagesIndicator={true}
|
||||
totalCount={10}
|
||||
updateActivePage={[Function]}
|
||||
updateLimitPagination={[Function]}
|
||||
/>
|
||||
>
|
||||
<PaginatedTable
|
||||
activePage={0}
|
||||
columns={
|
||||
Array [
|
||||
Object {
|
||||
"field": "node.host.name",
|
||||
"hideForMobile": false,
|
||||
"name": "Host",
|
||||
"render": [Function],
|
||||
"truncateText": false,
|
||||
},
|
||||
Object {
|
||||
"field": "node.host.firstSeen",
|
||||
"hideForMobile": false,
|
||||
"name": "First seen",
|
||||
"render": [Function],
|
||||
"truncateText": false,
|
||||
},
|
||||
Object {
|
||||
"field": "node.host.os",
|
||||
"hideForMobile": false,
|
||||
"name": "OS",
|
||||
"render": [Function],
|
||||
"truncateText": false,
|
||||
},
|
||||
Object {
|
||||
"field": "node.host.version",
|
||||
"hideForMobile": false,
|
||||
"name": "Version",
|
||||
"render": [Function],
|
||||
"truncateText": false,
|
||||
},
|
||||
]
|
||||
}
|
||||
headerCount={1}
|
||||
headerSupplement={
|
||||
<p>
|
||||
My test supplement.
|
||||
</p>
|
||||
}
|
||||
headerTitle="Hosts"
|
||||
headerTooltip="My test tooltip"
|
||||
headerUnit="Test Unit"
|
||||
itemsPerRow={
|
||||
Array [
|
||||
Object {
|
||||
"numberOfRow": 2,
|
||||
"text": "2 rows",
|
||||
},
|
||||
Object {
|
||||
"numberOfRow": 5,
|
||||
"text": "5 rows",
|
||||
},
|
||||
Object {
|
||||
"numberOfRow": 10,
|
||||
"text": "10 rows",
|
||||
},
|
||||
Object {
|
||||
"numberOfRow": 20,
|
||||
"text": "20 rows",
|
||||
},
|
||||
Object {
|
||||
"numberOfRow": 50,
|
||||
"text": "50 rows",
|
||||
},
|
||||
]
|
||||
}
|
||||
limit={1}
|
||||
loadPage={[Function]}
|
||||
loading={false}
|
||||
pageOfItems={
|
||||
Array [
|
||||
Object {
|
||||
"cursor": Object {
|
||||
"value": "98966fa2013c396155c460d35c0902be",
|
||||
},
|
||||
"host": Object {
|
||||
"_id": "cPsuhGcB0WOhS6qyTKC0",
|
||||
"firstSeen": "2018-12-06T15:40:53.319Z",
|
||||
"name": "elrond.elstc.co",
|
||||
"os": "Ubuntu",
|
||||
"version": "18.04.1 LTS (Bionic Beaver)",
|
||||
},
|
||||
},
|
||||
Object {
|
||||
"cursor": Object {
|
||||
"value": "aa7ca589f1b8220002f2fc61c64cfbf1",
|
||||
},
|
||||
"host": Object {
|
||||
"_id": "KwQDiWcB0WOhS6qyXmrW",
|
||||
"firstSeen": "2018-12-07T14:12:38.560Z",
|
||||
"name": "siem-kibana",
|
||||
"os": "Debian GNU/Linux",
|
||||
"version": "9 (stretch)",
|
||||
},
|
||||
},
|
||||
]
|
||||
}
|
||||
showMorePagesIndicator={true}
|
||||
totalCount={10}
|
||||
updateActivePage={[Function]}
|
||||
updateLimitPagination={[Function]}
|
||||
/>
|
||||
</ContextProvider>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ import {
|
|||
} from '@elastic/eui';
|
||||
import { noop } from 'lodash/fp';
|
||||
import React, { memo, useState, useEffect } from 'react';
|
||||
import styled, { css } from 'styled-components';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import { Direction } from '../../graphql/types';
|
||||
import { AuthTableColumns } from '../page/hosts/authentications_table';
|
||||
|
|
@ -319,37 +319,35 @@ const BasicTable = styled(EuiBasicTable)`
|
|||
|
||||
BasicTable.displayName = 'BasicTable';
|
||||
|
||||
const FooterAction = styled(EuiFlexGroup).attrs({
|
||||
const FooterAction = styled(EuiFlexGroup).attrs(() => ({
|
||||
alignItems: 'center',
|
||||
responsive: false,
|
||||
})`
|
||||
margin-top: ${props => props.theme.eui.euiSizeXS};
|
||||
}))`
|
||||
margin-top: ${({ theme }) => theme.eui.euiSizeXS};
|
||||
`;
|
||||
|
||||
FooterAction.displayName = 'FooterAction';
|
||||
|
||||
const PaginationEuiFlexItem = styled(EuiFlexItem)`
|
||||
${props => css`
|
||||
@media only screen and (min-width: ${props.theme.eui.euiBreakpoints.m}) {
|
||||
.euiButtonIcon:last-child {
|
||||
margin-left: 28px;
|
||||
}
|
||||
|
||||
.euiPagination {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.euiPagination::before {
|
||||
bottom: 0;
|
||||
color: ${props.theme.eui.euiButtonColorDisabled};
|
||||
content: '\\2026';
|
||||
font-size: ${props.theme.eui.euiFontSizeS};
|
||||
padding: 5px ${props.theme.eui.euiSizeS};
|
||||
position: absolute;
|
||||
right: ${props.theme.eui.euiSizeL};
|
||||
}
|
||||
@media only screen and (min-width: ${({ theme }) => theme.eui.euiBreakpoints.m}) {
|
||||
.euiButtonIcon:last-child {
|
||||
margin-left: 28px;
|
||||
}
|
||||
`}
|
||||
|
||||
.euiPagination {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.euiPagination::before {
|
||||
bottom: 0;
|
||||
color: ${({ theme }) => theme.eui.euiButtonColorDisabled};
|
||||
content: '\\2026';
|
||||
font-size: ${({ theme }) => theme.eui.euiFontSizeS};
|
||||
padding: 5px ${({ theme }) => theme.eui.euiSizeS};
|
||||
position: absolute;
|
||||
right: ${({ theme }) => theme.eui.euiSizeL};
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
PaginationEuiFlexItem.displayName = 'PaginationEuiFlexItem';
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ exports[`Resizeable it renders 1`] = `
|
|||
<Component>
|
||||
<Resizeable
|
||||
handle={
|
||||
<CommonResizeHandle
|
||||
<ForwardRef(styled.div)
|
||||
data-test-subj="test-resize-handle"
|
||||
/>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@
|
|||
|
||||
import { mount, shallow } from 'enzyme';
|
||||
import toJson from 'enzyme-to-json';
|
||||
import 'jest-styled-components';
|
||||
import * as React from 'react';
|
||||
|
||||
import { TestProviders } from '../../mock/test_providers';
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
import React, { useEffect, useRef } from 'react';
|
||||
import { fromEvent, Observable, Subscription } from 'rxjs';
|
||||
import { concatMap, takeUntil } from 'rxjs/operators';
|
||||
import styled, { css } from 'styled-components';
|
||||
import styled from 'styled-components';
|
||||
|
||||
export type OnResize = ({ delta, id }: { delta: number; id: string }) => void;
|
||||
|
||||
|
|
@ -42,16 +42,14 @@ interface Props extends ResizeHandleContainerProps {
|
|||
}
|
||||
|
||||
const ResizeHandleContainer = styled.div<ResizeHandleContainerProps>`
|
||||
${({ bottom, height, left, positionAbsolute, right, theme, top }) => css`
|
||||
bottom: ${positionAbsolute && bottom};
|
||||
cursor: ${resizeCursorStyle};
|
||||
height: ${height};
|
||||
left: ${positionAbsolute && left};
|
||||
position: ${positionAbsolute && 'absolute'};
|
||||
right: ${positionAbsolute && right};
|
||||
top: ${positionAbsolute && top};
|
||||
z-index: ${positionAbsolute && theme.eui.euiZLevel1};
|
||||
`}
|
||||
bottom: ${({ positionAbsolute, bottom }) => positionAbsolute && bottom};
|
||||
cursor: ${resizeCursorStyle};
|
||||
height: ${({ height }) => height};
|
||||
left: ${({ positionAbsolute, left }) => positionAbsolute && left};
|
||||
position: ${({ positionAbsolute }) => positionAbsolute && 'absolute'};
|
||||
right: ${({ positionAbsolute, right }) => positionAbsolute && right};
|
||||
top: ${({ positionAbsolute, top }) => positionAbsolute && top};
|
||||
z-index: ${({ positionAbsolute, theme }) => positionAbsolute && theme.eui.euiZLevel1};
|
||||
`;
|
||||
ResizeHandleContainer.displayName = 'ResizeHandleContainer';
|
||||
|
||||
|
|
@ -69,7 +67,7 @@ export const Resizeable = React.memo<Props>(
|
|||
const dragEventTargets = useRef<Array<{ htmlElement: HTMLElement; prevCursor: string }>>([]);
|
||||
const dragSubscription = useRef<Subscription | null>(null);
|
||||
const prevX = useRef(0);
|
||||
const ref = useRef<React.RefObject<HTMLElement>>(React.createRef<HTMLElement>());
|
||||
const ref = useRef(null);
|
||||
const upSubscription = useRef<Subscription | null>(null);
|
||||
const isResizingRef = useRef(false);
|
||||
|
||||
|
|
@ -80,7 +78,7 @@ export const Resizeable = React.memo<Props>(
|
|||
};
|
||||
useEffect(() => {
|
||||
const move$ = fromEvent<MouseEvent>(document, 'mousemove');
|
||||
const down$ = fromEvent<MouseEvent>(ref.current.current!, 'mousedown');
|
||||
const down$ = fromEvent<MouseEvent>(ref.current!, 'mousedown');
|
||||
const up$ = fromEvent<MouseEvent>(document, 'mouseup');
|
||||
|
||||
drag$.current = down$.pipe(concatMap(() => move$.pipe(takeUntil(up$))));
|
||||
|
|
@ -131,7 +129,7 @@ export const Resizeable = React.memo<Props>(
|
|||
bottom={bottom}
|
||||
data-test-subj="resize-handle-container"
|
||||
height={height}
|
||||
innerRef={ref.current}
|
||||
ref={ref}
|
||||
left={left}
|
||||
positionAbsolute={positionAbsolute}
|
||||
right={right}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@
|
|||
|
||||
import { mount, shallow } from 'enzyme';
|
||||
import toJson from 'enzyme-to-json';
|
||||
import 'jest-styled-components';
|
||||
import * as React from 'react';
|
||||
|
||||
import { SelectableText } from '.';
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@
|
|||
|
||||
import { mount, shallow } from 'enzyme';
|
||||
import toJson from 'enzyme-to-json';
|
||||
import 'jest-styled-components';
|
||||
import React from 'react';
|
||||
|
||||
import { TestProviders } from '../../mock';
|
||||
|
|
|
|||
|
|
@ -5,24 +5,22 @@
|
|||
*/
|
||||
|
||||
import React from 'react';
|
||||
import styled, { css } from 'styled-components';
|
||||
import styled from 'styled-components';
|
||||
|
||||
interface RowProps {
|
||||
rowHeight?: string;
|
||||
rowPadding?: string;
|
||||
}
|
||||
|
||||
const Row = styled.div.attrs({
|
||||
const Row = styled.div.attrs<RowProps>(({ rowHeight, rowPadding, theme }) => ({
|
||||
className: 'siemSkeletonRow',
|
||||
})<RowProps>`
|
||||
${({ rowHeight, rowPadding, theme }) => css`
|
||||
border-bottom: ${theme.eui.euiBorderThin};
|
||||
display: flex;
|
||||
height: ${rowHeight ? rowHeight : theme.eui.euiSizeXL};
|
||||
padding: ${rowPadding
|
||||
? rowPadding
|
||||
: theme.eui.paddingSizes.s + ' ' + theme.eui.paddingSizes.xs};
|
||||
`}
|
||||
rowHeight: rowHeight || theme.eui.euiSizeXL,
|
||||
rowPadding: rowPadding || `${theme.eui.paddingSizes.s} ${theme.eui.paddingSizes.xs}`,
|
||||
}))<RowProps>`
|
||||
border-bottom: ${({ theme }) => theme.eui.euiBorderThin};
|
||||
display: flex;
|
||||
height: ${({ rowHeight }) => rowHeight};
|
||||
padding: ${({ rowPadding }) => rowPadding};
|
||||
`;
|
||||
Row.displayName = 'Row';
|
||||
|
||||
|
|
@ -31,18 +29,18 @@ interface CellProps {
|
|||
cellMargin?: string;
|
||||
}
|
||||
|
||||
const Cell = styled.div.attrs({
|
||||
const Cell = styled.div.attrs<CellProps>(({ cellColor, cellMargin, theme }) => ({
|
||||
className: 'siemSkeletonRow__cell',
|
||||
})<CellProps>`
|
||||
${({ cellColor, cellMargin, theme }) => css`
|
||||
background-color: ${cellColor ? cellColor : theme.eui.euiColorLightestShade};
|
||||
border-radius: 2px;
|
||||
flex: 1;
|
||||
cellColor: cellColor || theme.eui.euiColorLightestShade,
|
||||
cellMargin: cellMargin || theme.eui.gutterTypes.gutterSmall,
|
||||
}))<CellProps>`
|
||||
background-color: ${({ cellColor }) => cellColor};
|
||||
border-radius: 2px;
|
||||
flex: 1;
|
||||
|
||||
& + & {
|
||||
margin-left: ${cellMargin ? cellMargin : theme.eui.gutterTypes.gutterSmall};
|
||||
}
|
||||
`}
|
||||
& + & {
|
||||
margin-left: ${({ cellMargin }) => cellMargin};
|
||||
}
|
||||
`;
|
||||
Cell.displayName = 'Cell';
|
||||
|
||||
|
|
|
|||
|
|
@ -38,11 +38,11 @@ exports[`Stat Items Component disable charts it renders the default widget 1`] =
|
|||
data-test-subj="stat-item"
|
||||
>
|
||||
<EuiFlexItem
|
||||
className="sc-ifAKCX cFdETZ"
|
||||
className="sc-AykKG krmHWP"
|
||||
data-test-subj="stat-item"
|
||||
>
|
||||
<div
|
||||
className="euiFlexItem sc-ifAKCX cFdETZ"
|
||||
className="euiFlexItem sc-AykKG krmHWP"
|
||||
data-test-subj="stat-item"
|
||||
>
|
||||
<EuiPanel
|
||||
|
|
@ -118,7 +118,7 @@ exports[`Stat Items Component disable charts it renders the default widget 1`] =
|
|||
showInspect={false}
|
||||
>
|
||||
<div
|
||||
className="sc-bxivhb fEneUz"
|
||||
className="sc-AykKF cUIXEb"
|
||||
data-test-subj="transparent-inspect-container"
|
||||
>
|
||||
<EuiButtonIcon
|
||||
|
|
@ -188,10 +188,10 @@ exports[`Stat Items Component disable charts it renders the default widget 1`] =
|
|||
key="stat-items-field-hosts"
|
||||
>
|
||||
<EuiFlexItem
|
||||
className="sc-ifAKCX cFdETZ"
|
||||
className="sc-AykKG krmHWP"
|
||||
>
|
||||
<div
|
||||
className="euiFlexItem sc-ifAKCX cFdETZ"
|
||||
className="euiFlexItem sc-AykKG krmHWP"
|
||||
>
|
||||
<EuiFlexGroup
|
||||
alignItems="center"
|
||||
|
|
@ -203,22 +203,22 @@ exports[`Stat Items Component disable charts it renders the default widget 1`] =
|
|||
>
|
||||
<FlexItem>
|
||||
<EuiFlexItem
|
||||
className="sc-ifAKCX cFdETZ"
|
||||
className="sc-AykKG krmHWP"
|
||||
>
|
||||
<div
|
||||
className="euiFlexItem sc-ifAKCX cFdETZ"
|
||||
className="euiFlexItem sc-AykKG krmHWP"
|
||||
>
|
||||
<StatValue>
|
||||
<EuiTitle
|
||||
className="sc-EHOje koezUx"
|
||||
className="sc-AykKH eSsePF"
|
||||
>
|
||||
<p
|
||||
className="euiTitle euiTitle--medium sc-EHOje koezUx"
|
||||
className="euiTitle euiTitle--medium sc-AykKH eSsePF"
|
||||
data-test-subj="stat-title"
|
||||
>
|
||||
<EmptyWrapper>
|
||||
<span
|
||||
className="sc-bdVaJa cSuzWb"
|
||||
className="sc-AykKC bGtoQZ"
|
||||
>
|
||||
—
|
||||
</span>
|
||||
|
|
@ -292,11 +292,11 @@ exports[`Stat Items Component disable charts it renders the default widget 2`] =
|
|||
data-test-subj="stat-item"
|
||||
>
|
||||
<EuiFlexItem
|
||||
className="sc-ifAKCX cFdETZ"
|
||||
className="sc-AykKG krmHWP"
|
||||
data-test-subj="stat-item"
|
||||
>
|
||||
<div
|
||||
className="euiFlexItem sc-ifAKCX cFdETZ"
|
||||
className="euiFlexItem sc-AykKG krmHWP"
|
||||
data-test-subj="stat-item"
|
||||
>
|
||||
<EuiPanel
|
||||
|
|
@ -372,7 +372,7 @@ exports[`Stat Items Component disable charts it renders the default widget 2`] =
|
|||
showInspect={false}
|
||||
>
|
||||
<div
|
||||
className="sc-bxivhb fEneUz"
|
||||
className="sc-AykKF cUIXEb"
|
||||
data-test-subj="transparent-inspect-container"
|
||||
>
|
||||
<EuiButtonIcon
|
||||
|
|
@ -442,10 +442,10 @@ exports[`Stat Items Component disable charts it renders the default widget 2`] =
|
|||
key="stat-items-field-hosts"
|
||||
>
|
||||
<EuiFlexItem
|
||||
className="sc-ifAKCX cFdETZ"
|
||||
className="sc-AykKG krmHWP"
|
||||
>
|
||||
<div
|
||||
className="euiFlexItem sc-ifAKCX cFdETZ"
|
||||
className="euiFlexItem sc-AykKG krmHWP"
|
||||
>
|
||||
<EuiFlexGroup
|
||||
alignItems="center"
|
||||
|
|
@ -458,22 +458,22 @@ exports[`Stat Items Component disable charts it renders the default widget 2`] =
|
|||
0
|
||||
<FlexItem>
|
||||
<EuiFlexItem
|
||||
className="sc-ifAKCX cFdETZ"
|
||||
className="sc-AykKG krmHWP"
|
||||
>
|
||||
<div
|
||||
className="euiFlexItem sc-ifAKCX cFdETZ"
|
||||
className="euiFlexItem sc-AykKG krmHWP"
|
||||
>
|
||||
<StatValue>
|
||||
<EuiTitle
|
||||
className="sc-EHOje koezUx"
|
||||
className="sc-AykKH eSsePF"
|
||||
>
|
||||
<p
|
||||
className="euiTitle euiTitle--medium sc-EHOje koezUx"
|
||||
className="euiTitle euiTitle--medium sc-AykKH eSsePF"
|
||||
data-test-subj="stat-title"
|
||||
>
|
||||
<EmptyWrapper>
|
||||
<span
|
||||
className="sc-bdVaJa cSuzWb"
|
||||
className="sc-AykKC bGtoQZ"
|
||||
>
|
||||
—
|
||||
</span>
|
||||
|
|
@ -616,11 +616,11 @@ exports[`Stat Items Component rendering kpis with charts it renders the default
|
|||
data-test-subj="stat-item"
|
||||
>
|
||||
<EuiFlexItem
|
||||
className="sc-ifAKCX cFdETZ"
|
||||
className="sc-AykKG krmHWP"
|
||||
data-test-subj="stat-item"
|
||||
>
|
||||
<div
|
||||
className="euiFlexItem sc-ifAKCX cFdETZ"
|
||||
className="euiFlexItem sc-AykKG krmHWP"
|
||||
data-test-subj="stat-item"
|
||||
>
|
||||
<EuiPanel
|
||||
|
|
@ -696,7 +696,7 @@ exports[`Stat Items Component rendering kpis with charts it renders the default
|
|||
showInspect={false}
|
||||
>
|
||||
<div
|
||||
className="sc-bxivhb fGGQew"
|
||||
className="sc-AykKF gGhbbL"
|
||||
data-test-subj="transparent-inspect-container"
|
||||
>
|
||||
<EuiButtonIcon
|
||||
|
|
@ -766,10 +766,10 @@ exports[`Stat Items Component rendering kpis with charts it renders the default
|
|||
key="stat-items-field-uniqueSourceIps"
|
||||
>
|
||||
<EuiFlexItem
|
||||
className="sc-ifAKCX cFdETZ"
|
||||
className="sc-AykKG krmHWP"
|
||||
>
|
||||
<div
|
||||
className="euiFlexItem sc-ifAKCX cFdETZ"
|
||||
className="euiFlexItem sc-AykKG krmHWP"
|
||||
>
|
||||
<EuiFlexGroup
|
||||
alignItems="center"
|
||||
|
|
@ -783,11 +783,11 @@ exports[`Stat Items Component rendering kpis with charts it renders the default
|
|||
grow={false}
|
||||
>
|
||||
<EuiFlexItem
|
||||
className="sc-ifAKCX cFdETZ"
|
||||
className="sc-AykKG krmHWP"
|
||||
grow={false}
|
||||
>
|
||||
<div
|
||||
className="euiFlexItem euiFlexItem--flexGrowZero sc-ifAKCX cFdETZ"
|
||||
className="euiFlexItem euiFlexItem--flexGrowZero sc-AykKG krmHWP"
|
||||
>
|
||||
<EuiIcon
|
||||
color="#DB1374"
|
||||
|
|
@ -826,17 +826,17 @@ exports[`Stat Items Component rendering kpis with charts it renders the default
|
|||
</FlexItem>
|
||||
<FlexItem>
|
||||
<EuiFlexItem
|
||||
className="sc-ifAKCX cFdETZ"
|
||||
className="sc-AykKG krmHWP"
|
||||
>
|
||||
<div
|
||||
className="euiFlexItem sc-ifAKCX cFdETZ"
|
||||
className="euiFlexItem sc-AykKG krmHWP"
|
||||
>
|
||||
<StatValue>
|
||||
<EuiTitle
|
||||
className="sc-EHOje koezUx"
|
||||
className="sc-AykKH eSsePF"
|
||||
>
|
||||
<p
|
||||
className="euiTitle euiTitle--medium sc-EHOje koezUx"
|
||||
className="euiTitle euiTitle--medium sc-AykKH eSsePF"
|
||||
data-test-subj="stat-title"
|
||||
>
|
||||
1,714
|
||||
|
|
@ -857,10 +857,10 @@ exports[`Stat Items Component rendering kpis with charts it renders the default
|
|||
key="stat-items-field-uniqueDestinationIps"
|
||||
>
|
||||
<EuiFlexItem
|
||||
className="sc-ifAKCX cFdETZ"
|
||||
className="sc-AykKG krmHWP"
|
||||
>
|
||||
<div
|
||||
className="euiFlexItem sc-ifAKCX cFdETZ"
|
||||
className="euiFlexItem sc-AykKG krmHWP"
|
||||
>
|
||||
<EuiFlexGroup
|
||||
alignItems="center"
|
||||
|
|
@ -874,11 +874,11 @@ exports[`Stat Items Component rendering kpis with charts it renders the default
|
|||
grow={false}
|
||||
>
|
||||
<EuiFlexItem
|
||||
className="sc-ifAKCX cFdETZ"
|
||||
className="sc-AykKG krmHWP"
|
||||
grow={false}
|
||||
>
|
||||
<div
|
||||
className="euiFlexItem euiFlexItem--flexGrowZero sc-ifAKCX cFdETZ"
|
||||
className="euiFlexItem euiFlexItem--flexGrowZero sc-AykKG krmHWP"
|
||||
>
|
||||
<EuiIcon
|
||||
color="#490092"
|
||||
|
|
@ -917,17 +917,17 @@ exports[`Stat Items Component rendering kpis with charts it renders the default
|
|||
</FlexItem>
|
||||
<FlexItem>
|
||||
<EuiFlexItem
|
||||
className="sc-ifAKCX cFdETZ"
|
||||
className="sc-AykKG krmHWP"
|
||||
>
|
||||
<div
|
||||
className="euiFlexItem sc-ifAKCX cFdETZ"
|
||||
className="euiFlexItem sc-AykKG krmHWP"
|
||||
>
|
||||
<StatValue>
|
||||
<EuiTitle
|
||||
className="sc-EHOje koezUx"
|
||||
className="sc-AykKH eSsePF"
|
||||
>
|
||||
<p
|
||||
className="euiTitle euiTitle--medium sc-EHOje koezUx"
|
||||
className="euiTitle euiTitle--medium sc-AykKH eSsePF"
|
||||
data-test-subj="stat-title"
|
||||
>
|
||||
2,359
|
||||
|
|
@ -957,10 +957,10 @@ exports[`Stat Items Component rendering kpis with charts it renders the default
|
|||
>
|
||||
<FlexItem>
|
||||
<EuiFlexItem
|
||||
className="sc-ifAKCX cFdETZ"
|
||||
className="sc-AykKG krmHWP"
|
||||
>
|
||||
<div
|
||||
className="euiFlexItem sc-ifAKCX cFdETZ"
|
||||
className="euiFlexItem sc-AykKG krmHWP"
|
||||
>
|
||||
<BarChart
|
||||
barChart={
|
||||
|
|
@ -1016,10 +1016,10 @@ exports[`Stat Items Component rendering kpis with charts it renders the default
|
|||
</FlexItem>
|
||||
<FlexItem>
|
||||
<EuiFlexItem
|
||||
className="sc-ifAKCX cFdETZ"
|
||||
className="sc-AykKG krmHWP"
|
||||
>
|
||||
<div
|
||||
className="euiFlexItem sc-ifAKCX cFdETZ"
|
||||
className="euiFlexItem sc-AykKG krmHWP"
|
||||
>
|
||||
<AreaChart
|
||||
areaChart={
|
||||
|
|
|
|||
|
|
@ -8,17 +8,17 @@ import { EuiCheckbox, EuiSuperSelect } from '@elastic/eui';
|
|||
import { noop } from 'lodash/fp';
|
||||
import * as React from 'react';
|
||||
import { pure } from 'recompose';
|
||||
import styled, { injectGlobal } from 'styled-components';
|
||||
import styled, { createGlobalStyle } from 'styled-components';
|
||||
|
||||
import { getEventsSelectOptions } from './helpers';
|
||||
|
||||
export type CheckState = 'checked' | 'indeterminate' | 'unchecked';
|
||||
export const EVENTS_SELECT_WIDTH = 60; // px
|
||||
|
||||
// SIDE EFFECT: the following `injectGlobal` overrides
|
||||
// SIDE EFFECT: the following `createGlobalStyle` overrides
|
||||
// the style of the select items
|
||||
// eslint-disable-next-line
|
||||
injectGlobal`
|
||||
createGlobalStyle`
|
||||
.eventsSelectItem {
|
||||
width: 100% !important;
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
exports[`Header renders correctly against snapshot 1`] = `
|
||||
<Resizeable
|
||||
bottom={0}
|
||||
handle={<EventsHeadingHandle />}
|
||||
handle={<ForwardRef(styled.div) />}
|
||||
id="@timestamp"
|
||||
onResize={[Function]}
|
||||
positionAbsolute={true}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@
|
|||
|
||||
import { mount, shallow } from 'enzyme';
|
||||
import toJson from 'enzyme-to-json';
|
||||
import 'jest-styled-components';
|
||||
import * as React from 'react';
|
||||
|
||||
import { Direction } from '../../../../../graphql/types';
|
||||
|
|
|
|||
|
|
@ -115,7 +115,7 @@ export const ColumnHeaders = React.memo<Props>(
|
|||
{dropProvided => (
|
||||
<EventsThGroupData
|
||||
data-test-subj="headers-group"
|
||||
innerRef={dropProvided.innerRef}
|
||||
ref={dropProvided.innerRef}
|
||||
{...dropProvided.droppableProps}
|
||||
>
|
||||
{columnHeaders.map((header, i) => (
|
||||
|
|
@ -137,7 +137,7 @@ export const ColumnHeaders = React.memo<Props>(
|
|||
{...dragProvided.draggableProps}
|
||||
{...dragProvided.dragHandleProps}
|
||||
data-test-subj="draggable-header"
|
||||
innerRef={dragProvided.innerRef}
|
||||
ref={dragProvided.innerRef}
|
||||
isDragging={dragSnapshot.isDragging}
|
||||
position="relative"
|
||||
// Passing the styles directly to the component because the width is being calculated and is recommended by Styled Components for performance: https://github.com/styled-components/styled-components/issues/134#issuecomment-312415291
|
||||
|
|
|
|||
|
|
@ -200,7 +200,7 @@ export const StatefulEvent = React.memo<Props>(
|
|||
<EventsTrGroup
|
||||
className={STATEFUL_EVENT_CSS_CLASS_NAME}
|
||||
data-test-subj="event"
|
||||
innerRef={c => {
|
||||
ref={c => {
|
||||
if (c != null) {
|
||||
divElement.current = c;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@
|
|||
*/
|
||||
|
||||
import { mount, ReactWrapper } from 'enzyme';
|
||||
import 'jest-styled-components';
|
||||
import * as React from 'react';
|
||||
|
||||
import { mockBrowserFields } from '../../../containers/source/mock';
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@ interface ProviderBadgeProps {
|
|||
isEnabled: boolean;
|
||||
isExcluded: boolean;
|
||||
providerId: string;
|
||||
togglePopover?: () => void;
|
||||
togglePopover: () => void;
|
||||
val: string | number;
|
||||
operator: QueryOperator;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,8 +3,13 @@
|
|||
* or more contributor license agreements. Licensed under the Elastic License;
|
||||
* you may not use this file except in compliance with the Elastic License.
|
||||
*/
|
||||
import { EuiContextMenu, EuiContextMenuPanelDescriptor, EuiPopover } from '@elastic/eui';
|
||||
import React from 'react';
|
||||
import {
|
||||
EuiContextMenu,
|
||||
EuiContextMenuPanelDescriptor,
|
||||
EuiPopover,
|
||||
EuiPopoverProps,
|
||||
} from '@elastic/eui';
|
||||
import React, { FunctionComponent } from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
import { BrowserFields } from '../../../containers/source';
|
||||
|
|
@ -41,7 +46,11 @@ interface OwnProps {
|
|||
value: string | number;
|
||||
}
|
||||
|
||||
const MyEuiPopover = styled(EuiPopover)`
|
||||
const MyEuiPopover = styled((EuiPopover as unknown) as FunctionComponent)<
|
||||
EuiPopoverProps & {
|
||||
id?: string;
|
||||
}
|
||||
>`
|
||||
height: 100%;
|
||||
user-select: none;
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -16,9 +16,10 @@ import {
|
|||
EuiPopover,
|
||||
EuiText,
|
||||
EuiToolTip,
|
||||
EuiPopoverProps,
|
||||
} from '@elastic/eui';
|
||||
import { FormattedMessage } from '@kbn/i18n/react';
|
||||
import React, { useCallback, useEffect, useState } from 'react';
|
||||
import React, { FunctionComponent, useCallback, useEffect, useState } from 'react';
|
||||
import { pure } from 'recompose';
|
||||
import styled from 'styled-components';
|
||||
|
||||
|
|
@ -55,7 +56,12 @@ const LoadingPanelContainer = styled.div`
|
|||
|
||||
LoadingPanelContainer.displayName = 'LoadingPanelContainer';
|
||||
|
||||
const PopoverRowItems = styled(EuiPopover)`
|
||||
const PopoverRowItems = styled((EuiPopover as unknown) as FunctionComponent)<
|
||||
EuiPopoverProps & {
|
||||
className?: string;
|
||||
id?: string;
|
||||
}
|
||||
>`
|
||||
.euiButtonEmpty__content {
|
||||
padding: 0px 0px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
import { EuiAvatar, EuiFlexItem, EuiIcon } from '@elastic/eui';
|
||||
import React, { useState, useCallback } from 'react';
|
||||
import styled, { injectGlobal } from 'styled-components';
|
||||
import styled, { createGlobalStyle } from 'styled-components';
|
||||
|
||||
import { Note } from '../../../lib/note';
|
||||
import { InputsModelId } from '../../../store/inputs/constants';
|
||||
|
|
@ -22,10 +22,10 @@ type UpdateTitle = ({ id, title }: { id: string; title: string }) => void;
|
|||
type UpdateDescription = ({ id, description }: { id: string; description: string }) => void;
|
||||
type ToggleLock = ({ linkToId }: { linkToId: InputsModelId }) => void;
|
||||
|
||||
// SIDE EFFECT: the following `injectGlobal` overrides `EuiPopover`
|
||||
// SIDE EFFECT: the following `createGlobalStyle` overrides `EuiPopover`
|
||||
// and `EuiToolTip` global styles:
|
||||
// eslint-disable-next-line no-unused-expressions
|
||||
injectGlobal`
|
||||
createGlobalStyle`
|
||||
.euiPopover__panel.euiPopover__panel-isOpen {
|
||||
z-index: 9900 !important;
|
||||
}
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue