[APM] Add throughput tooltip to observability overview (#127929) (#128085)

(cherry picked from commit 73e4069bed)

Co-authored-by: Brandon Morelli <brandon.morelli@elastic.co>
This commit is contained in:
Kibana Machine 2022-03-18 15:05:40 -04:00 committed by GitHub
parent 00e62443f1
commit 14cc6af66a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 24 additions and 7 deletions

View file

@ -91,7 +91,7 @@ describe('APMSection', () => {
expect(getByText('APM')).toBeInTheDocument();
expect(getByText('View in app')).toBeInTheDocument();
expect(getByText('Services 11')).toBeInTheDocument();
expect(getByText('Throughput 900.0 tpm')).toBeInTheDocument();
expect(getByText('900.0 tpm')).toBeInTheDocument();
expect(queryAllByTestId('loading')).toEqual([]);
});
@ -108,7 +108,7 @@ describe('APMSection', () => {
expect(getByText('APM')).toBeInTheDocument();
expect(getByText('View in app')).toBeInTheDocument();
expect(getByText('Services 11')).toBeInTheDocument();
expect(getByText('Throughput 312.00k tpm')).toBeInTheDocument();
expect(getByText('312.00k tpm')).toBeInTheDocument();
expect(queryAllByTestId('loading')).toEqual([]);
});
it('shows loading state', () => {
@ -125,6 +125,6 @@ describe('APMSection', () => {
expect(getByTestId('loading')).toBeInTheDocument();
expect(queryAllByText('View in app')).toEqual([]);
expect(queryAllByText('Services 11')).toEqual([]);
expect(queryAllByText('Throughput 312.00k tpm')).toEqual([]);
expect(queryAllByText('312.00k tpm')).toEqual([]);
});
});

View file

@ -14,7 +14,7 @@ import {
Settings,
XYBrushEvent,
} from '@elastic/charts';
import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
import { EuiFlexGroup, EuiFlexItem, EuiToolTip, EuiIcon } from '@elastic/eui';
import numeral from '@elastic/numeral';
import { i18n } from '@kbn/i18n';
import moment from 'moment';
@ -116,9 +116,26 @@ export function APMSection({ bucketSize }: Props) {
<EuiFlexItem grow={false}>
<StyledStat
title={`${formatTpmStat(stats?.transactions.value)} tpm`}
description={i18n.translate('xpack.observability.overview.apm.throughput', {
defaultMessage: 'Throughput',
})}
description={
<EuiToolTip
content={i18n.translate('xpack.observability.overview.apm.throughputTip', {
defaultMessage:
'Values are calculated for transactions with type "Request" or "page-load". If neither are available, values reflect the top transaction type.',
})}
>
<>
{i18n.translate('xpack.observability.overview.apm.throughput', {
defaultMessage: 'Throughput',
})}{' '}
<EuiIcon
size="s"
color="subdued"
type="questionInCircle"
className="eui-alignCenter"
/>
</>
</EuiToolTip>
}
isLoading={isLoading}
color={transactionsColor}
/>