Skip to content

Commit

Permalink
Merge branch 'master' into chore/bump-storybook
Browse files Browse the repository at this point in the history
  • Loading branch information
elasticmachine authored Nov 15, 2019
2 parents fbd2649 + 7ad6827 commit d09b70e
Show file tree
Hide file tree
Showing 63 changed files with 1,111 additions and 753 deletions.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -360,7 +360,7 @@
"chance": "1.0.18",
"cheerio": "0.22.0",
"chokidar": "3.2.1",
"chromedriver": "^77.0.0",
"chromedriver": "78.0.1",
"classnames": "2.2.6",
"dedent": "^0.7.0",
"delete-empty": "^2.0.0",
Expand Down
27 changes: 23 additions & 4 deletions src/legacy/ui/public/vis/editors/default/controls/ranges.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,8 @@ import {
EuiSpacer,
EuiButtonEmpty,
EuiFormRow,
EuiToolTip,
EuiText,
} from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n/react';
import { i18n } from '@kbn/i18n';
Expand Down Expand Up @@ -154,15 +156,24 @@ function RangesParamEditor({
[isFromValid, isToValid] = validateRange({ from, to }, index);
}

const fromPrepend = i18n.translate(
const gtePrependLabel = i18n.translate(
'common.ui.aggTypes.ranges.greaterThanOrEqualPrepend',
{
defaultMessage: '\u2265',
}
);
const toPrepend = i18n.translate('common.ui.aggTypes.ranges.lessThanPrepend', {
const gteTooltipContent = i18n.translate(
'common.ui.aggTypes.ranges.greaterThanOrEqualTooltip',
{
defaultMessage: 'Greater than or equal to',
}
);
const ltPrependLabel = i18n.translate('common.ui.aggTypes.ranges.lessThanPrepend', {
defaultMessage: '\u003c',
});
const ltTooltipContent = i18n.translate('common.ui.aggTypes.ranges.lessThanTooltip', {
defaultMessage: 'Less than',
});

return (
<Fragment key={id}>
Expand All @@ -179,7 +190,11 @@ function RangesParamEditor({
fullWidth={true}
compressed={true}
isInvalid={!isFromValid}
prepend={fromPrepend}
prepend={
<EuiToolTip content={gteTooltipContent}>
<EuiText size="s">{gtePrependLabel}</EuiText>
</EuiToolTip>
}
/>
</EuiFlexItem>
<EuiFlexItem grow={false}>
Expand All @@ -197,7 +212,11 @@ function RangesParamEditor({
fullWidth={true}
compressed={true}
isInvalid={!isToValid}
prepend={toPrepend}
prepend={
<EuiToolTip content={ltTooltipContent}>
<EuiText size="s">{ltPrependLabel}</EuiText>
</EuiToolTip>
}
/>
</EuiFlexItem>
<EuiFlexItem grow={false}>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import React from 'react';
// @ts-ignore
import Histogram from '../../../shared/charts/Histogram';
import { EmptyMessage } from '../../../shared/EmptyMessage';
import { asRelativeDateTimeRange } from '../../../../utils/formatters';

interface IBucket {
key: number;
Expand Down Expand Up @@ -51,6 +52,9 @@ interface Props {
title: React.ReactNode;
}

const tooltipHeader = (bucket: FormattedBucket) =>
asRelativeDateTimeRange(bucket.x0, bucket.x);

export function ErrorDistribution({ distribution, title }: Props) {
const buckets = getFormattedBuckets(
distribution.buckets,
Expand All @@ -73,6 +77,7 @@ export function ErrorDistribution({ distribution, title }: Props) {
<span>{title}</span>
</EuiTitle>
<Histogram
tooltipHeader={tooltipHeader}
verticalLineHover={(bucket: FormattedBucket) => bucket.x}
xType="time"
buckets={buckets}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,7 @@ const ErrorGroupList: React.FC<Props> = props => {
align: 'right',
render: (value?: number) =>
value ? (
<TimestampTooltip time={value} precision="minutes" />
<TimestampTooltip time={value} timeUnit="minutes" />
) : (
NOT_AVAILABLE_LABEL
)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import styled from 'styled-components';
import { ServiceListAPIResponse } from '../../../../../server/lib/services/get_services';
import { NOT_AVAILABLE_LABEL } from '../../../../../common/i18n';
import { fontSizes, truncate } from '../../../../style/variables';
import { asDecimal, asMillis } from '../../../../utils/formatters';
import { asDecimal, convertTo } from '../../../../utils/formatters';
import { ManagedTable } from '../../../shared/ManagedTable';
import { EnvironmentBadge } from '../../../shared/EnvironmentBadge';
import { TransactionOverviewLink } from '../../../shared/Links/apm/TransactionOverviewLink';
Expand Down Expand Up @@ -80,7 +80,11 @@ export const SERVICE_COLUMNS = [
}),
sortable: true,
dataType: 'number',
render: (value: number) => asMillis(value)
render: (time: number) =>
convertTo({
unit: 'milliseconds',
microseconds: time
}).formatted
},
{
field: 'transactionsPerMinute',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,7 @@ export function AgentConfigurationList({
),
sortable: true,
render: (value: number) => (
<TimestampTooltip time={value} precision="minutes" />
<TimestampTooltip time={value} timeUnit="minutes" />
)
},
{
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import React from 'react';
import styled from 'styled-components';
import { ITransactionGroup } from '../../../../server/lib/transaction_groups/transform';
import { fontSizes, truncate } from '../../../style/variables';
import { asMillis } from '../../../utils/formatters';
import { convertTo } from '../../../utils/formatters';
import { EmptyMessage } from '../../shared/EmptyMessage';
import { ImpactBar } from '../../shared/ImpactBar';
import { TransactionDetailLink } from '../../shared/Links/apm/TransactionDetailLink';
Expand Down Expand Up @@ -66,7 +66,11 @@ const traceListColumns: Array<ITableColumn<ITransactionGroup>> = [
}),
sortable: true,
dataType: 'number',
render: (value: number) => asMillis(value)
render: (time: number) =>
convertTo({
unit: 'milliseconds',
microseconds: time
}).formatted
},
{
field: 'transactionsPerMinute',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import React, { FunctionComponent, useCallback } from 'react';
import { TransactionDistributionAPIResponse } from '../../../../../server/lib/transactions/distribution';
import { IBucket } from '../../../../../server/lib/transactions/distribution/get_buckets/transform';
import { IUrlParams } from '../../../../context/UrlParamsContext/types';
import { getTimeFormatter, timeUnit } from '../../../../utils/formatters';
import { getDurationFormatter } from '../../../../utils/formatters';
// @ts-ignore
import Histogram from '../../../shared/charts/Histogram';
import { EmptyMessage } from '../../../shared/EmptyMessage';
Expand Down Expand Up @@ -132,8 +132,7 @@ export const TransactionDistribution: FunctionComponent<Props> = (
);

const xMax = d3.max(buckets, d => d.x) || 0;
const timeFormatter = getTimeFormatter(xMax);
const unit = timeUnit(xMax);
const timeFormatter = getDurationFormatter(xMax);

const bucketIndex = buckets.findIndex(
bucket =>
Expand Down Expand Up @@ -187,18 +186,18 @@ export const TransactionDistribution: FunctionComponent<Props> = (
});
}
}}
formatX={timeFormatter}
formatX={(time: number) => timeFormatter(time).formatted}
formatYShort={formatYShort}
formatYLong={formatYLong}
verticalLineHover={(bucket: IChartPoint) =>
bucket.y > 0 && !bucket.sample
}
backgroundHover={(bucket: IChartPoint) => bucket.y > 0 && bucket.sample}
tooltipHeader={(bucket: IChartPoint) =>
`${timeFormatter(bucket.x0, {
withUnit: false
})} - ${timeFormatter(bucket.x, { withUnit: false })} ${unit}`
}
tooltipHeader={(bucket: IChartPoint) => {
const xFormatted = timeFormatter(bucket.x);
const x0Formatted = timeFormatter(bucket.x0);
return `${x0Formatted.value} - ${xFormatted.value} ${xFormatted.unit}`;
}}
tooltipFooter={(bucket: IChartPoint) =>
!bucket.sample &&
i18n.translate(
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import theme from '@elastic/eui/dist/eui_theme_light.json';
import { i18n } from '@kbn/i18n';
import { isRumAgentName } from '../../../../../../../common/agent_name';
import { px, unit, units } from '../../../../../../style/variables';
import { asTime } from '../../../../../../utils/formatters';
import { asDuration } from '../../../../../../utils/formatters';
import { ErrorCountBadge } from '../../ErrorCountBadge';
import { IWaterfallItem } from './waterfall_helpers/waterfall_helpers';
import { ErrorOverviewLink } from '../../../../../shared/Links/apm/ErrorOverviewLink';
Expand Down Expand Up @@ -133,7 +133,7 @@ const SpanActionToolTip: React.SFC<SpanActionToolTipProps> = ({
function Duration({ item }: { item: IWaterfallItem }) {
return (
<EuiText color="subdued" size="xs">
{asTime(item.duration)}
{asDuration(item.duration)}
</EuiText>
);
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import styled from 'styled-components';
import { NOT_AVAILABLE_LABEL } from '../../../../../common/i18n';
import { ITransactionGroup } from '../../../../../server/lib/transaction_groups/transform';
import { fontFamilyCode, truncate } from '../../../../style/variables';
import { asDecimal, asMillis } from '../../../../utils/formatters';
import { asDecimal, convertTo } from '../../../../utils/formatters';
import { ImpactBar } from '../../../shared/ImpactBar';
import { ITableColumn, ManagedTable } from '../../../shared/ManagedTable';
import { LoadingStatePrompt } from '../../../shared/LoadingStatePrompt';
Expand All @@ -28,6 +28,12 @@ interface Props {
isLoading: boolean;
}

const toMilliseconds = (time: number) =>
convertTo({
unit: 'milliseconds',
microseconds: time
}).formatted;

export function TransactionList({ items, isLoading }: Props) {
const columns: Array<ITableColumn<ITransactionGroup>> = useMemo(
() => [
Expand Down Expand Up @@ -67,7 +73,7 @@ export function TransactionList({ items, isLoading }: Props) {
),
sortable: true,
dataType: 'number',
render: (value: number) => asMillis(value)
render: (time: number) => toMilliseconds(time)
},
{
field: 'p95',
Expand All @@ -79,7 +85,7 @@ export function TransactionList({ items, isLoading }: Props) {
),
sortable: true,
dataType: 'number',
render: (value: number) => asMillis(value)
render: (time: number) => toMilliseconds(time)
},
{
field: 'transactionsPerMinute',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import React from 'react';
import { i18n } from '@kbn/i18n';
import { EuiToolTip, EuiText } from '@elastic/eui';
import { PercentOfParent } from '../../app/TransactionDetails/WaterfallWithSummmary/PercentOfParent';
import { asTime } from '../../../utils/formatters';
import { asDuration } from '../../../utils/formatters';

interface Props {
duration: number;
Expand All @@ -29,7 +29,7 @@ const DurationSummaryItem = ({
return (
<>
<EuiToolTip content={label}>
<EuiText>{asTime(duration)}</EuiText>
<EuiText>{asDuration(duration)}</EuiText>
</EuiToolTip>
&nbsp;
<EuiText size="s">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,10 @@ import { EuiFlexGrid, EuiFlexItem } from '@elastic/eui';
import styled from 'styled-components';
import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
import { px, units } from '../../../../public/style/variables';
import { Maybe } from '../../../../typings/common';

interface Props {
items: Array<React.ReactElement | null | undefined>;
items: Array<Maybe<React.ReactElement>>;
}

// TODO: Light/Dark theme (@see https://github.com/elastic/kibana/issues/44840)
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/

import { shallow } from 'enzyme';
import React from 'react';
import moment from 'moment-timezone';
import { TimestampTooltip } from '../index';
import { mockNow } from '../../../../utils/testHelpers';

describe('TimestampTooltip', () => {
const timestamp = 1570720000123; // Oct 10, 2019, 08:06:40.123 (UTC-7)

beforeAll(() => {
// mock Date.now
mockNow(1570737000000);

moment.tz.setDefault('America/Los_Angeles');
});

afterAll(() => moment.tz.setDefault(''));

it('should render component with relative time in body and absolute time in tooltip', () => {
expect(shallow(<TimestampTooltip time={timestamp} />))
.toMatchInlineSnapshot(`
<EuiToolTip
content="Oct 10, 2019, 08:06:40.123 (UTC-7)"
delay="regular"
position="top"
>
5 hours ago
</EuiToolTip>
`);
});

it('should format with precision in milliseconds by default', () => {
expect(
shallow(<TimestampTooltip time={timestamp} />)
.find('EuiToolTip')
.prop('content')
).toBe('Oct 10, 2019, 08:06:40.123 (UTC-7)');
});

it('should format with precision in seconds', () => {
expect(
shallow(<TimestampTooltip time={timestamp} timeUnit="seconds" />)
.find('EuiToolTip')
.prop('content')
).toBe('Oct 10, 2019, 08:06:40 (UTC-7)');
});

it('should format with precision in minutes', () => {
expect(
shallow(<TimestampTooltip time={timestamp} timeUnit="minutes" />)
.find('EuiToolTip')
.prop('content')
).toBe('Oct 10, 2019, 08:06 (UTC-7)');
});
});
Loading

0 comments on commit d09b70e

Please sign in to comment.