github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 01:38:56 -04:00
Code Issues Projects Releases Packages Wiki Activity

[APM] Replace colour vars with EUI (#29822)

Browse source 
Refactored all use of custom APM UI colour variables and replaced with EUI theme
This commit is contained in:
Casper Hübertz 2019-02-04 15:42:38 +01:00 • committed by GitHub
parent d42a3f484e
commit 8604e8f3f4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
30 changed files with 657 additions and 678 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -11,6 +11,7 @@ import {
EuiTabs,
EuiTitle
} from '@elastic/eui';
import theme from '@elastic/eui/dist/eui_theme_light.json';
import { i18n } from '@kbn/i18n';
import { Location } from 'history';
import { first, get, isEmpty } from 'lodash';
@ -38,13 +39,7 @@ import { IUrlParams } from 'x-pack/plugins/apm/public/store/urlParams';
import { ErrorGroupAPIResponse } from 'x-pack/plugins/apm/server/lib/errors/get_error_group';
import { APMError } from 'x-pack/plugins/apm/typings/es_schemas/Error';
import { Transaction } from 'x-pack/plugins/apm/typings/es_schemas/Transaction';
import {
borderRadius,
colors,
px,
unit,
units
} from '../../../../style/variables';
import { borderRadius, px, unit, units } from '../../../../style/variables';
import { DiscoverErrorLink } from '../../../shared/Links/DiscoverLinks/DiscoverErrorLink';
import {
getPropertyTabNames,
@ -56,7 +51,7 @@ import { StickyProperties } from '../../../shared/StickyProperties';
const Container = styled.div`
position: relative;
border: 1px solid ${colors.gray4};
border: 1px solid ${theme.euiColorLightShade};
border-radius: ${borderRadius};
margin-top: ${px(units.plus)};
`;

4
x-pack/plugins/apm/public/components/app/ErrorGroupDetails/view.tsx
View file

@ -5,6 +5,7 @@
*/
import { EuiBadge, EuiSpacer, EuiText, EuiTitle } from '@elastic/eui';
import theme from '@elastic/eui/dist/eui_theme_light.json';
import { i18n } from '@kbn/i18n';
import { Location } from 'history';
import React, { Fragment } from 'react';
@ -15,7 +16,6 @@ import { ErrorDistributionRequest } from '../../../store/reactReduxRequest/error
import { ErrorGroupDetailsRequest } from '../../../store/reactReduxRequest/errorGroup';
import { IUrlParams } from '../../../store/urlParams';
import {
colors,
fontFamilyCode,
fontSizes,
px,
@ -40,7 +40,7 @@ const UnhandledBadge = styled(EuiBadge)`
const Label = styled.div`
margin-bottom: ${px(units.quarter)};
font-size: ${fontSizes.small};
color: ${colors.gray3};
color: ${theme.euiColorMediumShade};
`;
const Message = styled.div`

3
x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/WaterfallContainer/Waterfall/SpanFlyout/DatabaseContext.tsx
View file

@ -5,6 +5,7 @@
*/
import { EuiSpacer, EuiTitle } from '@elastic/eui';
import theme from '@elastic/eui/dist/eui_theme_light.json';
import { i18n } from '@kbn/i18n';
import React, { Fragment } from 'react';
// @ts-ignore
@ -32,7 +33,7 @@ const DatabaseStatement = styled.div`
padding: ${px(units.half)} ${px(unit)};
background: ${colors.yellow};
border-radius: ${borderRadius};
border: 1px solid ${colors.gray4};
border: 1px solid ${theme.euiColorLightShade};
font-family: ${fontFamilyCode};
`;

6
x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/WaterfallContainer/Waterfall/SpanFlyout/HttpContext.tsx
View file

@ -8,7 +8,6 @@ import React, { Fragment } from 'react';
import styled from 'styled-components';
import {
borderRadius,
colors,
fontFamilyCode,
px,
unit,
@ -16,13 +15,14 @@ import {
} from '../../../../../../../style/variables';
import { EuiSpacer, EuiTitle } from '@elastic/eui';
import theme from '@elastic/eui/dist/eui_theme_light.json';
import { Span } from 'x-pack/plugins/apm/typings/es_schemas/Span';
const ContextUrl = styled.div`
padding: ${px(units.half)} ${px(unit)};
background: ${colors.gray5};
background: ${theme.euiColorLightestShade};
border-radius: ${borderRadius};
border: 1px solid ${colors.gray4};
border: 1px solid ${theme.euiColorLightShade};
font-family: ${fontFamilyCode};
`;

12
x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/WaterfallContainer/Waterfall/WaterfallItem.tsx
View file

@ -8,8 +8,9 @@ import React from 'react';
import styled from 'styled-components';
import { EuiIcon, EuiText } from '@elastic/eui';
import theme from '@elastic/eui/dist/eui_theme_light.json';
import { asTime } from 'x-pack/plugins/apm/public/utils/formatters';
import { colors, px, unit, units } from '../../../../../../style/variables';
import { px, unit, units } from '../../../../../../style/variables';
import { IWaterfallItem } from './waterfall_helpers/waterfall_helpers';
type ItemType = 'transaction' | 'span';
@ -35,11 +36,12 @@ const Container = styled<IContainerStyleProps, 'div'>('div')`
padding-bottom: ${px(units.plus)};
margin-right: ${props => px(props.timelineMargins.right)};
margin-left: ${props => px(props.timelineMargins.left)};
border-top: 1px solid ${colors.gray4};
background-color: ${props => (props.isSelected ? colors.gray5 : 'initial')};
border-top: 1px solid ${theme.euiColorLightShade};
background-color: ${props =>
props.isSelected ? theme.euiColorLightestShade : 'initial'};
cursor: pointer;
&:hover {
background-color: ${colors.gray5};
background-color: ${theme.euiColorLightestShade};
}
`;
@ -65,7 +67,7 @@ const ItemText = styled.span`
`;
const SpanNameLabel = styled.span`
color: ${colors.gray2};
color: ${theme.euiColorDarkShade};
font-weight: normal;
white-space: nowrap;
`;

16
x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/WaterfallContainer/Waterfall/waterfall_helpers/waterfall_helpers.ts
View file

@ -4,6 +4,7 @@
* you may not use this file except in compliance with the Elastic License.
*/
import theme from '@elastic/eui/dist/eui_theme_light.json';
import {
first,
flatten,
@ -14,7 +15,6 @@ import {
uniq,
zipObject
} from 'lodash';
import { colors } from 'x-pack/plugins/apm/public/style/variables';
import { Span } from '../../../../../../../../typings/es_schemas/Span';
import { Transaction } from '../../../../../../../../typings/es_schemas/Transaction';
@ -197,13 +197,13 @@ export interface IServiceColors {
function getServiceColors(services: string[]) {
const assignedColors = [
colors.apmBlue,
colors.apmGreen,
colors.apmPurple,
colors.apmRed2,
colors.apmTan,
colors.apmOrange,
colors.apmYellow
theme.euiColorVis1,
theme.euiColorVis0,
theme.euiColorVis3,
theme.euiColorVis2,
theme.euiColorVis6,
theme.euiColorVis7,
theme.euiColorVis5
];
return zipObject(services, assignedColors) as IServiceColors;

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

@ -9,7 +9,6 @@ import PropTypes from 'prop-types';
import styled from 'styled-components';
import { EuiIcon } from '@elastic/eui';
import {
colors,
fontFamilyCode,
px,
units,
@ -17,31 +16,32 @@ import {
unit
} from '../../../../style/variables';
import { tint } from 'polished';
import theme from '@elastic/eui/dist/eui_theme_light.json';
function getIconColor(type) {
switch (type) {
case 'field':
return colors.apmOrange;
return theme.euiColorVis7;
case 'value':
return colors.teal;
return theme.euiColorVis0;
case 'operator':
return colors.apmBlue;
return theme.euiColorVis1;
case 'conjunction':
return colors.apmPurple;
return theme.euiColorVis3;
case 'recentSearch':
return colors.gray3;
return theme.euiColorMediumShade;
}
}
const Description = styled.div`
color: ${colors.gray2};
color: ${theme.euiColorDarkShade};
p {
display: inline;
span {
font-family: ${fontFamilyCode};
color: ${colors.black};
color: ${theme.euiColorFullShade};
padding: 0 ${px(units.quarter)};
display: inline-block;
}
@ -53,13 +53,17 @@ const ListItem = styled.li`
height: ${px(units.double)};
align-items: center;
display: flex;
background: ${props => (props.selected ? colors.gray5 : 'initial')};
background: ${props =>
props.selected ? theme.euiColorLightestShade : 'initial'};
cursor: pointer;
border-radius: ${px(units.quarter)};
${Description} {
p span {
background: ${props => (props.selected ? colors.white : colors.gray5)};
background: ${props =>
props.selected
? theme.euiColorEmptyShade
: theme.euiColorLightestShade};
}
}
`;
@ -76,7 +80,7 @@ const Icon = styled.div`
const TextValue = styled.div`
flex: 0 0 ${px(unit * 16)};
color: ${colors.black2};
color: ${theme.euiColorDarkestShade};
padding: 0 ${px(units.half)};
`;

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

@ -11,10 +11,11 @@ import { isEmpty } from 'lodash';
import Suggestion from './Suggestion';
import { units, colors, px, unit } from '../../../../style/variables';
import { rgba } from 'polished';
import theme from '@elastic/eui/dist/eui_theme_light.json';
const List = styled.ul`
width: 100%;
border: 1px solid ${colors.gray4};
border: 1px solid ${theme.euiColorLightShade};
border-radius: ${px(units.quarter)};
box-shadow: 0px ${px(units.quarter)} ${px(units.double)}
${rgba(colors.black, 0.1)};

13
x-pack/plugins/apm/public/components/shared/PropertiesTable/NestedKeyValueTable.tsx
View file

@ -4,18 +4,13 @@
* you may not use this file except in compliance with the Elastic License.
*/
import theme from '@elastic/eui/dist/eui_theme_light.json';
import { isBoolean, isNumber, isObject } from 'lodash';
import React from 'react';
import styled from 'styled-components';
import { NOT_AVAILABLE_LABEL } from 'x-pack/plugins/apm/common/i18n';
import { StringMap } from '../../../../typings/common';
import {
colors,
fontFamilyCode,
fontSizes,
px,
units
} from '../../../style/variables';
import { fontFamilyCode, fontSizes, px, units } from '../../../style/variables';
export type KeySorter = (data: StringMap, parentKey?: string) => string[];
@ -26,7 +21,7 @@ const Table = styled.table`
`;
const Row = styled.tr`
border-bottom: ${px(1)} solid ${colors.gray4};
border-bottom: ${px(1)} solid ${theme.euiColorLightShade};
&:last-child {
border: 0;
}
@ -52,7 +47,7 @@ const Cell = styled.td`
`;
const EmptyValue = styled.span`
color: ${colors.gray3};
color: ${theme.euiColorMediumShade};
`;
export function FormattedKey({

8
x-pack/plugins/apm/public/components/shared/PropertiesTable/__test__/__snapshots__/NestedKeyValueTable.test.tsx.snap
View file

@ -29,7 +29,7 @@ exports[`FormattedKey component should render when the value is defined 3`] = `
exports[`FormattedKey component should render when the value is null or undefined 1`] = `
.c0 {
color: #98A2B3;
color: rgb(152,162,179);
}
<FormattedKey
@ -48,7 +48,7 @@ exports[`FormattedKey component should render when the value is null or undefine
exports[`FormattedKey component should render when the value is null or undefined 2`] = `
.c0 {
color: #98A2B3;
color: rgb(152,162,179);
}
<FormattedKey
@ -134,7 +134,7 @@ exports[`FormattedValue component should render an object 1`] = `
exports[`FormattedValue component should render null 1`] = `
.c0 {
color: #98A2B3;
color: rgb(152,162,179);
}
<FormattedValue
@ -152,7 +152,7 @@ exports[`FormattedValue component should render null 1`] = `
exports[`FormattedValue component should render undefined 1`] = `
.c0 {
color: #98A2B3;
color: rgb(152,162,179);
}
<FormattedValue>

14
x-pack/plugins/apm/public/components/shared/PropertiesTable/index.tsx
View file

@ -6,6 +6,7 @@
import { EuiIcon } from '@elastic/eui';
import { EuiLink } from '@elastic/eui';
import theme from '@elastic/eui/dist/eui_theme_light.json';
import { i18n } from '@kbn/i18n';
import { get, indexBy, uniq } from 'lodash';
import React from 'react';
@ -13,14 +14,7 @@ import styled from 'styled-components';
import { APMError } from 'x-pack/plugins/apm/typings/es_schemas/Error';
import { Transaction } from 'x-pack/plugins/apm/typings/es_schemas/Transaction';
import { StringMap } from '../../../../typings/common';
import {
colors,
fontSize,
fontSizes,
px,
unit,
units
} from '../../../style/variables';
import { fontSize, fontSizes, px, unit, units } from '../../../style/variables';
import { getAgentFeatureDocsUrl } from '../../../utils/documentation/agents';
import { KeySorter, NestedKeyValueTable } from './NestedKeyValueTable';
import { PROPERTY_CONFIG } from './propertyConfig';
@ -33,13 +27,13 @@ const TableInfo = styled.div`
padding: ${px(unit)} 0 0;
text-align: center;
font-size: ${fontSize};
color: ${colors.gray2};
color: ${theme.euiColorDarkShade};
line-height: 1.5;
`;
const TableInfoHeader = styled(TableInfo)`
font-size: ${fontSizes.large};
color: ${colors.black2};
color: ${theme.euiColorDarkestShade};
`;
const EuiIconWithSpace = styled(EuiIcon)`

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

@ -4,6 +4,7 @@
* you may not use this file except in compliance with the Elastic License.
*/
import theme from '@elastic/eui/dist/eui_theme_light.json';
import { size } from 'lodash';
import React from 'react';
// TODO add dependency for @types/react-syntax-highlighter
@ -14,10 +15,10 @@ import python from 'react-syntax-highlighter/dist/languages/python';
// @ts-ignore
import ruby from 'react-syntax-highlighter/dist/languages/ruby';
// @ts-ignore
import SyntaxHighlighter from 'react-syntax-highlighter/dist/light';
// @ts-ignore
import { registerLanguage } from 'react-syntax-highlighter/dist/light';
// @ts-ignore
import SyntaxHighlighter from 'react-syntax-highlighter/dist/light';
// @ts-ignore
import { xcode } from 'react-syntax-highlighter/dist/styles';
import styled from 'styled-components';
import { idx } from 'x-pack/plugins/apm/common/idx';
@ -54,7 +55,10 @@ const LineNumberContainer = styled.div<{ isLibraryFrame: boolean }>`
top: 0;
left: 0;
border-radius: 0 0 0 ${borderRadius};
background: ${props => (props.isLibraryFrame ? colors.white : colors.gray5)};
background: ${props =>
props.isLibraryFrame
? theme.euiColorEmptyShade
: theme.euiColorLightestShade};
`;
const LineNumber = styled.div<{ highlight: boolean }>`
@ -62,10 +66,10 @@ const LineNumber = styled.div<{ highlight: boolean }>`
min-width: ${px(units.eighth * 21)};
padding-left: ${px(units.half)};
padding-right: ${px(units.quarter)};
color: ${colors.gray3};
color: ${theme.euiColorMediumShade};
line-height: ${px(unit + units.eighth)};
text-align: right;
border-right: 1px solid ${colors.gray4};
border-right: 1px solid ${theme.euiColorLightShade};
background-color: ${props => (props.highlight ? colors.yellow : null)};
&:last-of-type {
@ -77,7 +81,7 @@ const LineContainer = styled.div`
overflow: auto;
margin: 0 0 0 ${px(units.eighth * 21)};
padding: 0;
background-color: ${colors.white};
background-color: ${theme.euiColorEmptyShade};
&:last-of-type {
border-radius: 0 0 ${borderRadius} 0;

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

@ -4,23 +4,24 @@
* you may not use this file except in compliance with the Elastic License.
*/
import theme from '@elastic/eui/dist/eui_theme_light.json';
import React, { Fragment } from 'react';
import styled from 'styled-components';
import { idx } from 'x-pack/plugins/apm/common/idx';
import { IStackframe } from 'x-pack/plugins/apm/typings/es_schemas/fields/Stackframe';
import { colors, fontFamilyCode, px, units } from '../../../style/variables';
import { fontFamilyCode, px, units } from '../../../style/variables';
const FileDetails = styled.div`
color: ${colors.gray3};
color: ${theme.euiColorMediumShade};
padding: ${px(units.half)};
font-family: ${fontFamilyCode};
`;
const LibraryFrameFileDetail = styled.span`
color: ${colors.gray2};
color: ${theme.euiColorDarkShade};
`;
const AppFrameFileDetail = styled.span`
font-weight: bold;
color: ${colors.black};
color: ${theme.euiColorFullShade};
`;
interface Props {

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

@ -4,28 +4,32 @@
* you may not use this file except in compliance with the Elastic License.
*/
import theme from '@elastic/eui/dist/eui_theme_light.json';
import React from 'react';
import styled from 'styled-components';
import {
IStackframe,
IStackframeWithLineContext
} from 'x-pack/plugins/apm/typings/es_schemas/fields/Stackframe';
import { borderRadius, colors, fontFamilyCode } from '../../../style/variables';
import { borderRadius, fontFamilyCode } from '../../../style/variables';
import { FrameHeading } from '../Stacktrace/FrameHeading';
import { Context } from './Context';
import { Variables } from './Variables';
const CodeHeader = styled.div`
border-bottom: 1px solid ${colors.gray4};
border-bottom: 1px solid ${theme.euiColorLightShade};
border-radius: ${borderRadius} ${borderRadius} 0 0;
`;
const Container = styled.div<{ isLibraryFrame: boolean }>`
position: relative;
font-family: ${fontFamilyCode};
border: 1px solid ${colors.gray4};
border: 1px solid ${theme.euiColorLightShade};
border-radius: ${borderRadius};
background: ${props => (props.isLibraryFrame ? colors.white : colors.gray5)};
background: ${props =>
props.isLibraryFrame
? theme.euiColorEmptyShade
: theme.euiColorLightestShade};
`;
interface Props {

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

@ -4,13 +4,13 @@
* you may not use this file except in compliance with the Elastic License.
*/
import theme from '@elastic/eui/dist/eui_theme_light.json';
import { i18n } from '@kbn/i18n';
import React from 'react';
import styled from 'styled-components';
import { IStackframe } from 'x-pack/plugins/apm/typings/es_schemas/fields/Stackframe';
import {
borderRadius,
colors,
fontFamily,
px,
unit,
@ -21,8 +21,8 @@ import { Ellipsis } from '../Icons';
import { PropertiesTable } from '../PropertiesTable';
const VariablesContainer = styled.div`
background: ${colors.white};
border-top: 1px solid ${colors.gray4};
background: ${theme.euiColorEmptyShade};
border-top: 1px solid ${theme.euiColorLightShade};
border-radius: 0 0 ${borderRadius} ${borderRadius};
padding: ${px(units.half)} ${px(unit)};
font-family: ${fontFamily};

22
x-pack/plugins/apm/public/components/shared/Stacktrace/__test__/__snapshots__/Stackframe.test.tsx.snap
View file

@ -2,14 +2,14 @@
exports[`Stackframe when stackframe has source lines should render correctly 1`] = `
.c2 {
color: #98A2B3;
color: rgb(152,162,179);
padding: 8px;
font-family: "SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace;
}
.c3 {
font-weight: bold;
color: #000000;
color: rgb(0,0,0);
}
.c4 {
@ -31,7 +31,7 @@ exports[`Stackframe when stackframe has source lines should render correctly 1`]
top: 0;
left: 0;
border-radius: 0 0 0 5px;
background: #F5F7FA;
background: rgb(245,247,250);
}
.c7 {
@ -39,10 +39,10 @@ exports[`Stackframe when stackframe has source lines should render correctly 1`]
min-width: 42px;
padding-left: 8px;
padding-right: 4px;
color: #98A2B3;
color: rgb(152,162,179);
line-height: 18px;
text-align: right;
border-right: 1px solid #D3DAE6;
border-right: 1px solid rgb(211,218,230);
}
.c7:last-of-type {
@ -54,10 +54,10 @@ exports[`Stackframe when stackframe has source lines should render correctly 1`]
min-width: 42px;
padding-left: 8px;
padding-right: 4px;
color: #98A2B3;
color: rgb(152,162,179);
line-height: 18px;
text-align: right;
border-right: 1px solid #D3DAE6;
border-right: 1px solid rgb(211,218,230);
background-color: #FCF2E6;
}
@ -69,7 +69,7 @@ exports[`Stackframe when stackframe has source lines should render correctly 1`]
overflow: auto;
margin: 0 0 0 42px;
padding: 0;
background-color: #ffffff;
background-color: rgb(255,255,255);
}
.c9:last-of-type {
@ -96,16 +96,16 @@ exports[`Stackframe when stackframe has source lines should render correctly 1`]
}
.c1 {
border-bottom: 1px solid #D3DAE6;
border-bottom: 1px solid rgb(211,218,230);
border-radius: 5px 5px 0 0;
}
.c0 {
position: relative;
font-family: "SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace;
border: 1px solid #D3DAE6;
border: 1px solid rgb(211,218,230);
border-radius: 5px;
background: #F5F7FA;
background: rgb(245,247,250);
}
<Stackframe

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

@ -6,12 +6,12 @@
import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
import { EuiToolTip } from '@elastic/eui';
import theme from '@elastic/eui/dist/eui_theme_light.json';
import moment from 'moment';
import React from 'react';
import styled from 'styled-components';
import { NOT_AVAILABLE_LABEL } from 'x-pack/plugins/apm/common/i18n';
import {
colors,
fontFamilyCode,
fontSizes,
px,
@ -35,7 +35,7 @@ const TooltipFieldName = styled.span`
const PropertyLabel = styled.div`
margin-bottom: ${px(units.half)};
font-size: ${fontSizes.small};
color: ${colors.gray3};
color: ${theme.euiColorMediumShade};
span {
cursor: help;
@ -44,7 +44,7 @@ const PropertyLabel = styled.div`
PropertyLabel.displayName = 'PropertyLabel';
const PropertyValueDimmed = styled.span`
color: ${colors.gray3};
color: ${theme.euiColorMediumShade};
`;
const PropertyValue = styled.div`

8
x-pack/plugins/apm/public/components/shared/charts/CustomPlot/Legends.js
View file

@ -13,9 +13,9 @@ import {
units,
fontSizes,
px,
colors,
truncate
} from '../../../../style/variables';
import theme from '@elastic/eui/dist/eui_theme_light.json';
const Container = styled.div`
display: flex;
@ -34,7 +34,7 @@ const Container = styled.div`
const LegendContent = styled.span`
white-space: nowrap;
color: ${colors.gray3};
color: ${theme.euiColorMediumShade};
display: flex;
`;
@ -45,13 +45,13 @@ const TruncatedLabel = styled.span`
const SeriesValue = styled.span`
margin-left: ${px(units.quarter)};
color: ${colors.black};
color: ${theme.euiColorFullShade};
display: inline-block;
`;
const MoreSeriesContainer = styled.div`
font-size: ${fontSizes.small};
color: ${colors.gray3};
color: ${theme.euiColorMediumShade};
`;
function MoreSeries({ hiddenSeriesCount }) {

848
x-pack/plugins/apm/public/components/shared/charts/CustomPlot/test/__snapshots__/CustomPlot.test.js.snap
View file

File diff suppressed because it is too large Load diff

16
x-pack/plugins/apm/public/components/shared/charts/Histogram/__test__/__snapshots__/Histogram.test.js.snap
View file

@ -1410,19 +1410,19 @@ exports[`Histogram when hovering over a non-empty bucket should have correct mar
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
border: 1px solid #D3DAE6;
background: #ffffff;
border: 1px solid rgb(211,218,230);
background: rgb(255,255,255);
border-radius: 5px;
font-size: 14px;
color: #000000;
color: rgb(0,0,0);
}
.c1 {
background: #F5F7FA;
border-bottom: 1px solid #D3DAE6;
background: rgb(245,247,250);
border-bottom: 1px solid rgb(211,218,230);
border-radius: 5px 5px 0 0;
padding: 8px;
color: #98A2B3;
color: rgb(152,162,179);
}
.c2 {
@ -1432,13 +1432,13 @@ exports[`Histogram when hovering over a non-empty bucket should have correct mar
}
.c4 {
color: #98A2B3;
color: rgb(152,162,179);
margin: 8px;
font-size: 12px;
}
.c3 {
color: #69707D;
color: rgb(105,112,125);
font-size: 14px;
}

8
x-pack/plugins/apm/public/components/shared/charts/Histogram/index.js
View file

@ -23,6 +23,7 @@ import {
} from 'react-vis';
import { unit, colors } from '../../../../style/variables';
import Tooltip from '../Tooltip';
import theme from '@elastic/eui/dist/eui_theme_light.json';
const XY_HEIGHT = unit * 10;
const XY_MARGIN = {
@ -68,7 +69,8 @@ export class HistogramInner extends PureComponent {
const padding = (item.x - item.x0) / 20;
return {
...item,
color: item === selectedItem ? colors.blue2 : colors.apmLightBlue,
color:
item === selectedItem ? theme.euiColorPrimary : colors.apmLightBlue,
x0: item.x0 + padding,
x: item.x - padding,
y: item.y > 0 ? Math.max(item.y, MINIMUM_BUCKET_SIZE) : 0
@ -151,7 +153,7 @@ export class HistogramInner extends PureComponent {
x={x(hoveredBucket.x0)}
width={x(bucketSize) - x(0)}
style={{
fill: colors.gray5
fill: theme.euiColorLightestShade
}}
/>
)}
@ -176,7 +178,7 @@ export class HistogramInner extends PureComponent {
width={x(bucketSize) - x(0)}
style={{
fill: 'transparent',
stroke: colors.blue2,
stroke: theme.euiColorPrimary,
rx: '0px',
ry: '0px'
}}

7
x-pack/plugins/apm/public/components/shared/charts/Legend/index.js
View file

@ -6,13 +6,14 @@
import React, { PureComponent } from 'react';
import styled from 'styled-components';
import { units, px, colors, fontSizes } from '../../../../style/variables';
import { units, px, fontSizes } from '../../../../style/variables';
import theme from '@elastic/eui/dist/eui_theme_light.json';
const Container = styled.div`
display: flex;
align-items: center;
font-size: ${props => props.fontSize};
color: ${colors.gray2};
color: ${theme.euiColorDarkShade};
cursor: ${props => (props.clickable ? 'pointer' : 'initial')};
opacity: ${props => (props.disabled ? 0.4 : 1)};
user-select: none;
@ -31,7 +32,7 @@ export default class Legend extends PureComponent {
const {
onClick,
text,
color = colors.apmBlue,
color = theme.euiColorVis1,
fontSize = fontSizes.small,
radius = units.minus - 1,
disabled = false,

9
x-pack/plugins/apm/public/components/shared/charts/Timeline/AgentMarker.js
View file

@ -8,17 +8,18 @@ import React from 'react';
import PropTypes from 'prop-types';
import { EuiToolTip } from '@elastic/eui';
import Legend from '../Legend';
import { colors, units, px } from '../../../../style/variables';
import { units, px } from '../../../../style/variables';
import styled from 'styled-components';
import { asTime } from '../../../../utils/formatters';
import theme from '@elastic/eui/dist/eui_theme_light.json';
const NameContainer = styled.div`
border-bottom: 1px solid ${colors.gray3};
border-bottom: 1px solid ${theme.euiColorMediumShade};
padding-bottom: ${px(units.half)};
`;
const TimeContainer = styled.div`
color: ${colors.gray3};
color: ${theme.euiColorMediumShade};
padding-top: ${px(units.half)};
`;
@ -42,7 +43,7 @@ export default function AgentMarker({ agentMark, x }) {
</div>
}
>
<Legend clickable color={colors.gray3} />
<Legend clickable color={theme.euiColorMediumShade} />
</EuiToolTip>
</div>
);

9
x-pack/plugins/apm/public/components/shared/charts/Timeline/TimelineAxis.js
View file

@ -11,8 +11,9 @@ import { Sticky } from 'react-sticky';
import { XYPlot, XAxis } from 'react-vis';
import LastTickValue from './LastTickValue';
import AgentMarker from './AgentMarker';
import { colors, px } from '../../../../style/variables';
import { px } from '../../../../style/variables';
import { getTimeFormatter } from '../../../../utils/formatters';
import theme from '@elastic/eui/dist/eui_theme_light.json';
// Remove any tick that is too close to traceRootDuration
const getXAxisTickValues = (tickValues, traceRootDuration) => {
@ -42,8 +43,8 @@ function TimelineAxis({ plotValues, agentMarks, traceRootDuration }) {
<div
style={{
position: 'absolute',
backgroundColor: colors.white,
borderBottom: `1px solid ${colors.gray3}`,
backgroundColor: theme.euiColorEmptyShade,
borderBottom: `1px solid ${theme.euiColorMediumShade}`,
height: px(margins.top),
zIndex: 2,
width: '100%',
@ -69,7 +70,7 @@ function TimelineAxis({ plotValues, agentMarks, traceRootDuration }) {
tickFormat={tickFormat}
tickPadding={20}
style={{
text: { fill: colors.gray3 }
text: { fill: theme.euiColorMediumShade }
}}
/>

8
x-pack/plugins/apm/public/components/shared/charts/Timeline/VerticalLines.js
View file

@ -7,7 +7,7 @@
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { XYPlot, VerticalGridLines } from 'react-vis';
import { colors } from '../../../../style/variables';
import theme from '@elastic/eui/dist/eui_theme_light.json';
class VerticalLines extends PureComponent {
render() {
@ -39,18 +39,18 @@ class VerticalLines extends PureComponent {
>
<VerticalGridLines
tickValues={tickValues}
style={{ stroke: colors.gray5 }}
style={{ stroke: theme.euiColorLightestShade }}
/>
<VerticalGridLines
tickValues={agentMarkTimes}
style={{ stroke: colors.gray3 }}
style={{ stroke: theme.euiColorMediumShade }}
/>
{traceRootDuration && (
<VerticalGridLines
tickValues={[traceRootDuration]}
style={{ stroke: colors.gray3 }}
style={{ stroke: theme.gray3euiColorMediumShade }}
/>
)}
</XYPlot>

126
x-pack/plugins/apm/public/components/shared/charts/Timeline/__test__/__snapshots__/Timeline.test.js.snap
View file

@ -11,7 +11,7 @@ exports[`Timeline should render with data 1`] = `
-ms-flex-align: center;
align-items: center;
font-size: 12px;
color: #69707D;
color: rgb(105,112,125);
cursor: pointer;
opacity: 1;
-webkit-user-select: none;
@ -24,7 +24,7 @@ exports[`Timeline should render with data 1`] = `
width: 11px;
height: 11px;
margin-right: 5.5px;
background: #98A2B3;
background: rgb(152,162,179);
border-radius: 100%;
}
@ -48,8 +48,8 @@ exports[`Timeline should render with data 1`] = `
<div
style={
Object {
"backgroundColor": "#ffffff",
"borderBottom": "1px solid #98A2B3",
"backgroundColor": "rgb(255, 255, 255)",
"borderBottom": "1px solid rgb(152, 162, 179)",
"height": "100px",
"position": "absolute",
"width": "100%",
@ -83,7 +83,7 @@ exports[`Timeline should render with data 1`] = `
style={
Object {
"text": Object {
"fill": "#98A2B3",
"fill": "rgb(152, 162, 179)",
},
}
}
@ -98,7 +98,7 @@ exports[`Timeline should render with data 1`] = `
style={
Object {
"text": Object {
"fill": "#98A2B3",
"fill": "rgb(152, 162, 179)",
},
}
}
@ -109,7 +109,7 @@ exports[`Timeline should render with data 1`] = `
style={
Object {
"text": Object {
"fill": "#98A2B3",
"fill": "rgb(152, 162, 179)",
},
}
}
@ -123,9 +123,9 @@ exports[`Timeline should render with data 1`] = `
dy="0"
style={
Object {
"fill": "#98A2B3",
"fill": "rgb(152, 162, 179)",
"text": Object {
"fill": "#98A2B3",
"fill": "rgb(152, 162, 179)",
},
}
}
@ -140,7 +140,7 @@ exports[`Timeline should render with data 1`] = `
style={
Object {
"text": Object {
"fill": "#98A2B3",
"fill": "rgb(152, 162, 179)",
},
}
}
@ -151,7 +151,7 @@ exports[`Timeline should render with data 1`] = `
style={
Object {
"text": Object {
"fill": "#98A2B3",
"fill": "rgb(152, 162, 179)",
},
}
}
@ -165,9 +165,9 @@ exports[`Timeline should render with data 1`] = `
dy="0"
style={
Object {
"fill": "#98A2B3",
"fill": "rgb(152, 162, 179)",
"text": Object {
"fill": "#98A2B3",
"fill": "rgb(152, 162, 179)",
},
}
}
@ -182,7 +182,7 @@ exports[`Timeline should render with data 1`] = `
style={
Object {
"text": Object {
"fill": "#98A2B3",
"fill": "rgb(152, 162, 179)",
},
}
}
@ -193,7 +193,7 @@ exports[`Timeline should render with data 1`] = `
style={
Object {
"text": Object {
"fill": "#98A2B3",
"fill": "rgb(152, 162, 179)",
},
}
}
@ -207,9 +207,9 @@ exports[`Timeline should render with data 1`] = `
dy="0"
style={
Object {
"fill": "#98A2B3",
"fill": "rgb(152, 162, 179)",
"text": Object {
"fill": "#98A2B3",
"fill": "rgb(152, 162, 179)",
},
}
}
@ -224,7 +224,7 @@ exports[`Timeline should render with data 1`] = `
style={
Object {
"text": Object {
"fill": "#98A2B3",
"fill": "rgb(152, 162, 179)",
},
}
}
@ -235,7 +235,7 @@ exports[`Timeline should render with data 1`] = `
style={
Object {
"text": Object {
"fill": "#98A2B3",
"fill": "rgb(152, 162, 179)",
},
}
}
@ -249,9 +249,9 @@ exports[`Timeline should render with data 1`] = `
dy="0"
style={
Object {
"fill": "#98A2B3",
"fill": "rgb(152, 162, 179)",
"text": Object {
"fill": "#98A2B3",
"fill": "rgb(152, 162, 179)",
},
}
}
@ -266,7 +266,7 @@ exports[`Timeline should render with data 1`] = `
style={
Object {
"text": Object {
"fill": "#98A2B3",
"fill": "rgb(152, 162, 179)",
},
}
}
@ -277,7 +277,7 @@ exports[`Timeline should render with data 1`] = `
style={
Object {
"text": Object {
"fill": "#98A2B3",
"fill": "rgb(152, 162, 179)",
},
}
}
@ -291,9 +291,9 @@ exports[`Timeline should render with data 1`] = `
dy="0"
style={
Object {
"fill": "#98A2B3",
"fill": "rgb(152, 162, 179)",
"text": Object {
"fill": "#98A2B3",
"fill": "rgb(152, 162, 179)",
},
}
}
@ -308,7 +308,7 @@ exports[`Timeline should render with data 1`] = `
style={
Object {
"text": Object {
"fill": "#98A2B3",
"fill": "rgb(152, 162, 179)",
},
}
}
@ -319,7 +319,7 @@ exports[`Timeline should render with data 1`] = `
style={
Object {
"text": Object {
"fill": "#98A2B3",
"fill": "rgb(152, 162, 179)",
},
}
}
@ -333,9 +333,9 @@ exports[`Timeline should render with data 1`] = `
dy="0"
style={
Object {
"fill": "#98A2B3",
"fill": "rgb(152, 162, 179)",
"text": Object {
"fill": "#98A2B3",
"fill": "rgb(152, 162, 179)",
},
}
}
@ -350,7 +350,7 @@ exports[`Timeline should render with data 1`] = `
style={
Object {
"text": Object {
"fill": "#98A2B3",
"fill": "rgb(152, 162, 179)",
},
}
}
@ -361,7 +361,7 @@ exports[`Timeline should render with data 1`] = `
style={
Object {
"text": Object {
"fill": "#98A2B3",
"fill": "rgb(152, 162, 179)",
},
}
}
@ -375,9 +375,9 @@ exports[`Timeline should render with data 1`] = `
dy="0"
style={
Object {
"fill": "#98A2B3",
"fill": "rgb(152, 162, 179)",
"text": Object {
"fill": "#98A2B3",
"fill": "rgb(152, 162, 179)",
},
}
}
@ -392,7 +392,7 @@ exports[`Timeline should render with data 1`] = `
style={
Object {
"text": Object {
"fill": "#98A2B3",
"fill": "rgb(152, 162, 179)",
},
}
}
@ -403,7 +403,7 @@ exports[`Timeline should render with data 1`] = `
style={
Object {
"text": Object {
"fill": "#98A2B3",
"fill": "rgb(152, 162, 179)",
},
}
}
@ -417,9 +417,9 @@ exports[`Timeline should render with data 1`] = `
dy="0"
style={
Object {
"fill": "#98A2B3",
"fill": "rgb(152, 162, 179)",
"text": Object {
"fill": "#98A2B3",
"fill": "rgb(152, 162, 179)",
},
}
}
@ -434,7 +434,7 @@ exports[`Timeline should render with data 1`] = `
style={
Object {
"text": Object {
"fill": "#98A2B3",
"fill": "rgb(152, 162, 179)",
},
}
}
@ -445,7 +445,7 @@ exports[`Timeline should render with data 1`] = `
style={
Object {
"text": Object {
"fill": "#98A2B3",
"fill": "rgb(152, 162, 179)",
},
}
}
@ -459,9 +459,9 @@ exports[`Timeline should render with data 1`] = `
dy="0"
style={
Object {
"fill": "#98A2B3",
"fill": "rgb(152, 162, 179)",
"text": Object {
"fill": "#98A2B3",
"fill": "rgb(152, 162, 179)",
},
}
}
@ -476,7 +476,7 @@ exports[`Timeline should render with data 1`] = `
style={
Object {
"text": Object {
"fill": "#98A2B3",
"fill": "rgb(152, 162, 179)",
},
}
}
@ -487,7 +487,7 @@ exports[`Timeline should render with data 1`] = `
style={
Object {
"text": Object {
"fill": "#98A2B3",
"fill": "rgb(152, 162, 179)",
},
}
}
@ -501,9 +501,9 @@ exports[`Timeline should render with data 1`] = `
dy="0"
style={
Object {
"fill": "#98A2B3",
"fill": "rgb(152, 162, 179)",
"text": Object {
"fill": "#98A2B3",
"fill": "rgb(152, 162, 179)",
},
}
}
@ -551,7 +551,7 @@ exports[`Timeline should render with data 1`] = `
>
<span
className="c1"
color="#98A2B3"
color="rgb(152, 162, 179)"
radius={11}
/>
</div>
@ -581,7 +581,7 @@ exports[`Timeline should render with data 1`] = `
>
<span
className="c1"
color="#98A2B3"
color="rgb(152, 162, 179)"
radius={11}
/>
</div>
@ -611,7 +611,7 @@ exports[`Timeline should render with data 1`] = `
>
<span
className="c1"
color="#98A2B3"
color="rgb(152, 162, 179)"
radius={11}
/>
</div>
@ -658,7 +658,7 @@ exports[`Timeline should render with data 1`] = `
className="rv-xy-plot__grid-lines__line"
style={
Object {
"stroke": "#F5F7FA",
"stroke": "rgb(245, 247, 250)",
}
}
x1={0}
@ -670,7 +670,7 @@ exports[`Timeline should render with data 1`] = `
className="rv-xy-plot__grid-lines__line"
style={
Object {
"stroke": "#F5F7FA",
"stroke": "rgb(245, 247, 250)",
}
}
x1={90}
@ -682,7 +682,7 @@ exports[`Timeline should render with data 1`] = `
className="rv-xy-plot__grid-lines__line"
style={
Object {
"stroke": "#F5F7FA",
"stroke": "rgb(245, 247, 250)",
}
}
x1={180}
@ -694,7 +694,7 @@ exports[`Timeline should render with data 1`] = `
className="rv-xy-plot__grid-lines__line"
style={
Object {
"stroke": "#F5F7FA",
"stroke": "rgb(245, 247, 250)",
}
}
x1={270}
@ -706,7 +706,7 @@ exports[`Timeline should render with data 1`] = `
className="rv-xy-plot__grid-lines__line"
style={
Object {
"stroke": "#F5F7FA",
"stroke": "rgb(245, 247, 250)",
}
}
x1={360}
@ -718,7 +718,7 @@ exports[`Timeline should render with data 1`] = `
className="rv-xy-plot__grid-lines__line"
style={
Object {
"stroke": "#F5F7FA",
"stroke": "rgb(245, 247, 250)",
}
}
x1={450}
@ -730,7 +730,7 @@ exports[`Timeline should render with data 1`] = `
className="rv-xy-plot__grid-lines__line"
style={
Object {
"stroke": "#F5F7FA",
"stroke": "rgb(245, 247, 250)",
}
}
x1={540}
@ -742,7 +742,7 @@ exports[`Timeline should render with data 1`] = `
className="rv-xy-plot__grid-lines__line"
style={
Object {
"stroke": "#F5F7FA",
"stroke": "rgb(245, 247, 250)",
}
}
x1={630}
@ -754,7 +754,7 @@ exports[`Timeline should render with data 1`] = `
className="rv-xy-plot__grid-lines__line"
style={
Object {
"stroke": "#F5F7FA",
"stroke": "rgb(245, 247, 250)",
}
}
x1={720}
@ -766,7 +766,7 @@ exports[`Timeline should render with data 1`] = `
className="rv-xy-plot__grid-lines__line"
style={
Object {
"stroke": "#F5F7FA",
"stroke": "rgb(245, 247, 250)",
}
}
x1={810}
@ -778,7 +778,7 @@ exports[`Timeline should render with data 1`] = `
className="rv-xy-plot__grid-lines__line"
style={
Object {
"stroke": "#F5F7FA",
"stroke": "rgb(245, 247, 250)",
}
}
x1={900}
@ -795,7 +795,7 @@ exports[`Timeline should render with data 1`] = `
className="rv-xy-plot__grid-lines__line"
style={
Object {
"stroke": "#98A2B3",
"stroke": "rgb(152, 162, 179)",
}
}
x1={450}
@ -807,7 +807,7 @@ exports[`Timeline should render with data 1`] = `
className="rv-xy-plot__grid-lines__line"
style={
Object {
"stroke": "#98A2B3",
"stroke": "rgb(152, 162, 179)",
}
}
x1={495.00000000000006}
@ -819,7 +819,7 @@ exports[`Timeline should render with data 1`] = `
className="rv-xy-plot__grid-lines__line"
style={
Object {
"stroke": "#98A2B3",
"stroke": "rgb(152, 162, 179)",
}
}
x1={855}
@ -836,7 +836,7 @@ exports[`Timeline should render with data 1`] = `
className="rv-xy-plot__grid-lines__line"
style={
Object {
"stroke": "#98A2B3",
"stroke": undefined,
}
}
x1={900}

20
x-pack/plugins/apm/public/components/shared/charts/Tooltip/index.js
View file

@ -11,7 +11,6 @@ import moment from 'moment';
import styled from 'styled-components';
import PropTypes from 'prop-types';
import {
colors,
unit,
units,
px,
@ -20,23 +19,24 @@ import {
fontSizes
} from '../../../../style/variables';
import Legend from '../Legend';
import theme from '@elastic/eui/dist/eui_theme_light.json';
const TooltipElm = styled.div`
margin: 0 ${px(unit)};
transform: translateY(-50%);
border: 1px solid ${colors.gray4};
background: ${colors.white};
border: 1px solid ${theme.euiColorLightShade};
background: ${theme.euiColorEmptyShade};
border-radius: ${borderRadius};
font-size: ${fontSize};
color: ${colors.black};
color: ${theme.euiColorFullShade};
`;
const Header = styled.div`
background: ${colors.gray5};
border-bottom: 1px solid ${colors.gray4};
background: ${theme.euiColorLightestShade};
border-bottom: 1px solid ${theme.euiColorLightShade};
border-radius: ${borderRadius} ${borderRadius} 0 0;
padding: ${px(units.half)};
color: ${colors.gray3};
color: ${theme.euiColorMediumShade};
`;
const Content = styled.div`
@ -46,7 +46,7 @@ const Content = styled.div`
`;
const Footer = styled.div`
color: ${colors.gray3};
color: ${theme.euiColorMediumShade};
margin: ${px(units.half)};
font-size: ${fontSizes.small};
`;
@ -59,12 +59,12 @@ const LegendContainer = styled.div`
`;
const LegendGray = styled(Legend)`
color: ${colors.gray3};
color: ${theme.euiColorMediumShade};
padding-bottom: 0;
`;
const Value = styled.div`
color: ${colors.gray2};
color: ${theme.euiColorDarkShade};
font-size: ${fontSize};
`;

16
x-pack/plugins/apm/public/store/selectors/__tests__/chartSelectors.test.ts
View file

@ -37,24 +37,24 @@ describe('chartSelectors', () => {
overallAvgDuration: 200
} as ApmTimeSeriesResponse;
it('should match snapshot', () => {
it('should produce correct series', () => {
expect(getResponseTimeSeries(apmTimeseries)).toEqual([
{
color: '#3185fc',
color: 'rgb(49, 133, 252)',
data: [{ x: 0, y: 100 }, { x: 1000, y: 200 }],
legendValue: '0 ms',
title: 'Avg.',
type: 'linemark'
},
{
color: '#ecae23',
color: 'rgb(230, 194, 32)',
data: [{ x: 0, y: 200 }, { x: 1000, y: 300 }],
title: '95th percentile',
titleShort: '95th',
type: 'linemark'
},
{
color: '#f98510',
color: 'rgb(249, 133, 16)',
data: [{ x: 0, y: 300 }, { x: 1000, y: 400 }],
title: '99th percentile',
titleShort: '99th',
@ -77,24 +77,24 @@ describe('chartSelectors', () => {
]
} as any) as ApmTimeSeriesResponse;
const transactionType = 'MyTransactionType';
it('should match snapshot', () => {
it('should produce correct series', () => {
expect(getTpmSeries(apmTimeseries, transactionType)).toEqual([
{
color: '#00b3a4',
color: 'rgb(0, 179, 164)',
data: [{ x: 0, y: 5 }, { x: 0, y: 2 }],
legendValue: '3.5 tpm',
title: 'HTTP 2xx',
type: 'linemark'
},
{
color: '#f98510',
color: 'rgb(249, 133, 16)',
data: [{ x: 0, y: 1 }],
legendValue: '1.0 tpm',
title: 'HTTP 4xx',
type: 'linemark'
},
{
color: '#db1374',
color: 'rgb(219, 19, 116)',
data: [{ x: 0, y: 0 }],
legendValue: '0.0 tpm',
title: 'HTTP 5xx',

44
x-pack/plugins/apm/public/store/selectors/chartSelectors.ts
View file

@ -4,6 +4,7 @@
* you may not use this file except in compliance with the Elastic License.
*/
import theme from '@elastic/eui/dist/eui_theme_light.json';
import { i18n } from '@kbn/i18n';
import d3 from 'd3';
import { difference, memoize, zipObject } from 'lodash';
@ -18,7 +19,6 @@ import {
Coordinate,
RectCoordinate
} from 'x-pack/plugins/apm/typings/timeseries';
import { colors } from '../../style/variables';
import {
asDecimal,
asMillis,
@ -111,7 +111,7 @@ export function getMemorySeries(
),
data: series.memoryUsedMax,
type: 'linemark',
color: colors.apmBlue,
color: theme.euiColorVis1,
legendValue: asPercent(overallValues.memoryUsedMax || 0, 1)
},
{
@ -123,7 +123,7 @@ export function getMemorySeries(
),
data: series.memoryUsedAvg,
type: 'linemark',
color: colors.apmGreen,
color: theme.euiColorVis0,
legendValue: asPercent(overallValues.memoryUsedAvg || 0, 1)
}
];
@ -148,7 +148,7 @@ export function getCPUSeries(CPUChartResponse: MetricsChartAPIResponse['cpu']) {
}),
data: series.systemCPUMax,
type: 'linemark',
color: colors.apmBlue,
color: theme.euiColorVis1,
legendValue: asPercent(overallValues.systemCPUMax || 0, 1)
},
{
@ -157,7 +157,7 @@ export function getCPUSeries(CPUChartResponse: MetricsChartAPIResponse['cpu']) {
}),
data: series.systemCPUAverage,
type: 'linemark',
color: colors.apmGreen,
color: theme.euiColorVis0,
legendValue: asPercent(overallValues.systemCPUAverage || 0, 1)
},
{
@ -166,7 +166,7 @@ export function getCPUSeries(CPUChartResponse: MetricsChartAPIResponse['cpu']) {
}),
data: series.processCPUMax,
type: 'linemark',
color: colors.apmOrange,
color: theme.euiColorVis7,
legendValue: asPercent(overallValues.processCPUMax || 0, 1)
},
{
@ -175,7 +175,7 @@ export function getCPUSeries(CPUChartResponse: MetricsChartAPIResponse['cpu']) {
}),
data: series.processCPUAverage,
type: 'linemark',
color: colors.apmYellow,
color: theme.euiColorVis5,
legendValue: asPercent(overallValues.processCPUAverage || 0, 1)
}
];
@ -210,7 +210,7 @@ export function getResponseTimeSeries(
data: avg,
legendValue: asMillis(overallAvgDuration),
type: 'linemark',
color: colors.apmBlue
color: theme.euiColorVis1
},
{
title: i18n.translate(
@ -222,7 +222,7 @@ export function getResponseTimeSeries(
titleShort: '95th',
data: p95,
type: 'linemark',
color: colors.apmYellow
color: theme.euiColorVis5
},
{
title: i18n.translate(
@ -234,7 +234,7 @@ export function getResponseTimeSeries(
titleShort: '99th',
data: p99,
type: 'linemark',
color: colors.apmOrange
color: theme.euiColorVis7
}
];
@ -261,7 +261,7 @@ export function getAnomalyScoreSeries(data: RectCoordinate[]) {
data,
type: 'areaMaxHeight',
color: 'none',
areaColor: rgba(colors.apmRed, 0.1)
areaColor: rgba(theme.euiColorVis9, 0.1)
};
}
@ -278,7 +278,7 @@ function getAnomalyBoundariesSeries(data: Coordinate[]) {
data,
type: 'area',
color: 'none',
areaColor: rgba(colors.apmBlue, 0.1)
areaColor: rgba(theme.euiColorVis1, 0.1)
};
}
@ -304,20 +304,20 @@ export function getTpmSeries(
function getColorByKey(keys: string[]) {
const assignedColors: StringMap<string> = {
'HTTP 2xx': colors.apmGreen,
'HTTP 3xx': colors.apmYellow,
'HTTP 4xx': colors.apmOrange,
'HTTP 5xx': colors.apmRed2
'HTTP 2xx': theme.euiColorVis0,
'HTTP 3xx': theme.euiColorVis5,
'HTTP 4xx': theme.euiColorVis7,
'HTTP 5xx': theme.euiColorVis2
};
const unknownKeys = difference(keys, Object.keys(assignedColors));
const unassignedColors: StringMap<string> = zipObject(unknownKeys, [
colors.apmBlue,
colors.apmPurple,
colors.apmPink,
colors.apmTan,
colors.apmRed,
colors.apmBrown
theme.euiColorVis1,
theme.euiColorVis3,
theme.euiColorVis4,
theme.euiColorVis6,
theme.euiColorVis2,
theme.euiColorVis8
]);
return (key: string) => assignedColors[key] || unassignedColors[key];

29
x-pack/plugins/apm/public/style/variables.ts
View file

@ -31,39 +31,12 @@ export function pct(value: number): string {
export const borderRadius = '5px';
// Colors (from dark to light)
const colorBlue1 = '#006E8A';
const colorBlue2 = '#0079a5';
export const colors = {
black: '#000000',
black2: '#2d2d2d',
gray1: '#343741',
gray2: '#69707D',
gray3: '#98A2B3',
gray4: '#D3DAE6',
gray5: '#F5F7FA',
white: '#ffffff',
teal: '#017D73',
red: '#a30000',
yellow: '#FCF2E6',
blue1: colorBlue1,
blue2: colorBlue2,
// custom APM palette
apmBrown: '#461a0a',
apmPurple: '#490092',
apmBlue: '#3185fc',
apmRed: '#920000',
apmRed2: '#db1374',
apmGreen: '#00b3a4',
apmPink: '#feb6db',
apmOrange: '#f98510',
apmTan: '#bfa180',
apmYellow: '#ecae23',
apmLightBlue: '#80bcd2',
// Semantic colors
link: colorBlue2,
linkHover: colorBlue1
apmLightBlue: '#80bcd2'
};
// Fonts