Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[APM] Share components across Service overview and transactions. Add time comparison to the Transactions page #107299

Merged
merged 12 commits into from
Aug 3, 2021
Merged

[APM] Share components across Service overview and transactions. Add time comparison to the Transactions page #107299

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
549edb9
adding comparison to transactions pages
cauemarcondes Jul 30, 2021
90ce3d0
adding new transactions table
cauemarcondes Jul 30, 2021
6ddf2af
adding throughput
cauemarcondes Jul 30, 2021
2882952
refactoring transacon group api
cauemarcondes Jul 30, 2021
3a06f5b
adding missing filter
cauemarcondes Aug 2, 2021
ce5d2c5
Merge branch 'master' into apm-transaction-overview-comparison
kibanamachine Aug 2, 2021
a69a346
fixing i18n
cauemarcondes Aug 2, 2021
797d3af
fixing tests
cauemarcondes Aug 2, 2021
e7f8333
Merge branch 'apm-transaction-overview-comparison' of github.com:caue…
cauemarcondes Aug 2, 2021
1a74d0b
addressing PR comments
cauemarcondes Aug 3, 2021
f661552
Merge branch 'master' of github.com:elastic/kibana into apm-transacti…
cauemarcondes Aug 3, 2021
b8209e6
moving table to shared folder
cauemarcondes Aug 3, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
111 changes: 90 additions & 21 deletions .../apm/public/components/app/service_overview/service_overview_transactions_table/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,9 @@ import { i18n } from '@kbn/i18n';
import { orderBy } from 'lodash';
import React, { useState } from 'react';
import uuid from 'uuid';
import { EuiCallOut } from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n/react';
import { EuiCode } from '@elastic/eui';
import { APIReturnType } from '../../../../services/rest/createCallApmApi';
import { useApmServiceContext } from '../../../../context/apm_service/use_apm_service_context';
import { useUrlParams } from '../../../../context/url_params_context/use_url_params';
Expand All @@ -24,24 +27,41 @@ import { TableFetchWrapper } from '../../../shared/table_fetch_wrapper';
import { getTimeRangeComparison } from '../../../shared/time_comparison/get_time_range_comparison';
import { OverviewTableContainer } from '../../../shared/overview_table_container';
import { getColumns } from './get_columns';
import { ElasticDocsLink } from '../../../shared/Links/ElasticDocsLink';

type ApiResponse = APIReturnType<'GET /api/apm/services/{serviceName}/transactions/groups/main_statistics'>;
const INITIAL_STATE = {
transactionGroups: [] as ApiResponse['transactionGroups'],

type InitialState = ApiResponse & {
requestId: string;
transactionGroupsTotalItems: number;
};

const INITIAL_STATE: InitialState = {
transactionGroups: [],
isAggregationAccurate: true,
requestId: '',
transactionGroupsTotalItems: 0,
bucketSize: 0,
};
cauemarcondes marked this conversation as resolved.
Show resolved Hide resolved

type SortField = 'name' | 'latency' | 'throughput' | 'errorRate' | 'impact';
type SortDirection = 'asc' | 'desc';
const PAGE_SIZE = 5;
const DEFAULT_SORT = {
direction: 'desc' as const,
field: 'impact' as const,
};

export function ServiceOverviewTransactionsTable() {
interface Props {
hideViewTransactionsLink?: boolean;
numberOfTransactionsPerPage?: number;
showAggregationAccurateCallout?: boolean;
}

export function ServiceOverviewTransactionsTable({
hideViewTransactionsLink = false,
numberOfTransactionsPerPage = 5,
showAggregationAccurateCallout = false,
}: Props) {
const [tableOptions, setTableOptions] = useState<{
pageIndex: number;
sort: {
Expand Down Expand Up @@ -100,7 +120,10 @@ export function ServiceOverviewTransactionsTable() {
response.transactionGroups,
field,
direction
).slice(pageIndex * PAGE_SIZE, (pageIndex + 1) * PAGE_SIZE);
).slice(
pageIndex * numberOfTransactionsPerPage,
(pageIndex + 1) * numberOfTransactionsPerPage
);

return {
...response,
Expand Down Expand Up @@ -130,7 +153,13 @@ export function ServiceOverviewTransactionsTable() {
]
);

const { transactionGroups, requestId, transactionGroupsTotalItems } = data;
const {
transactionGroups,
requestId,
transactionGroupsTotalItems,
isAggregationAccurate,
bucketSize,
} = data;

const {
data: transactionGroupDetailedStatistics,
Expand Down Expand Up @@ -186,7 +215,7 @@ export function ServiceOverviewTransactionsTable() {

const pagination = {
pageIndex,
pageSize: PAGE_SIZE,
pageSize: numberOfTransactionsPerPage,
totalItemCount: transactionGroupsTotalItems,
hidePerPageOptions: true,
};
Expand All @@ -207,22 +236,62 @@ export function ServiceOverviewTransactionsTable() {
</h2>
</EuiTitle>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<TransactionOverviewLink
serviceName={serviceName}
latencyAggregationType={latencyAggregationType}
transactionType={transactionType}
>
{i18n.translate(
'xpack.apm.serviceOverview.transactionsTableLinkText',
{
defaultMessage: 'View transactions',
}
)}
</TransactionOverviewLink>
</EuiFlexItem>
{!hideViewTransactionsLink && (
<EuiFlexItem grow={false}>
<TransactionOverviewLink
serviceName={serviceName}
latencyAggregationType={latencyAggregationType}
transactionType={transactionType}
>
{i18n.translate(
'xpack.apm.serviceOverview.transactionsTableLinkText',
{
defaultMessage: 'View transactions',
}
)}
</TransactionOverviewLink>
</EuiFlexItem>
)}
</EuiFlexGroup>
</EuiFlexItem>
{showAggregationAccurateCallout && !isAggregationAccurate && (
<EuiFlexItem>
<EuiCallOut
title={i18n.translate(
'xpack.apm.transactionCardinalityWarning.title',
{
defaultMessage:
'This view shows a subset of reported transactions.',
}
)}
color="danger"
iconType="alert"
>
<p>
<FormattedMessage
id="xpack.apm.transactionCardinalityWarning.body"
defaultMessage="The number of unique transaction names exceeds the configured value of {bucketSize}. Try reconfiguring your agents to group similar transactions or increase the value of {codeBlock}"
values={{
bucketSize,
codeBlock: (
<EuiCode>xpack.apm.ui.transactionGroupBucketSize</EuiCode>
),
}}
/>

<ElasticDocsLink
section="/kibana"
path="/troubleshooting.html#troubleshooting-too-many-transactions"
>
{i18n.translate(
'xpack.apm.transactionCardinalityWarning.docsLink',
{ defaultMessage: 'Learn more in the docs' }
)}
</ElasticDocsLink>
</p>
</EuiCallOut>
</EuiFlexItem>
)}
<EuiFlexItem>
<EuiFlexItem>
<TableFetchWrapper status={status}>
Expand Down
2 changes: 0 additions & 2 deletions x-pack/plugins/apm/public/components/app/trace_overview/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,6 @@ import { TraceList } from './trace_list';
type TracesAPIResponse = APIReturnType<'GET /api/apm/traces'>;
const DEFAULT_RESPONSE: TracesAPIResponse = {
items: [],
isAggregationAccurate: true,
bucketSize: 0,
};

export function TraceOverview() {
Expand Down
67 changes: 6 additions & 61 deletions x-pack/plugins/apm/public/components/app/transaction_overview/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,27 +5,17 @@
* 2.0.
*/

import {
EuiCallOut,
EuiCode,
EuiPanel,
EuiSpacer,
EuiTitle,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n/react';
import { EuiPanel, EuiSpacer } from '@elastic/eui';
import { Location } from 'history';
import React from 'react';
import { useLocation } from 'react-router-dom';
import { useApmServiceContext } from '../../../context/apm_service/use_apm_service_context';
import { IUrlParams } from '../../../context/url_params_context/types';
import { useUrlParams } from '../../../context/url_params_context/use_url_params';
import { TransactionCharts } from '../../shared/charts/transaction_charts';
import { ElasticDocsLink } from '../../shared/Links/ElasticDocsLink';
import { fromQuery, toQuery } from '../../shared/Links/url_helpers';
import { TransactionList } from './transaction_list';
import { ServiceOverviewTransactionsTable } from '../service_overview/service_overview_transactions_table';
import { useRedirect } from './useRedirect';
import { useTransactionListFetcher } from './use_transaction_list';

function getRedirectLocation({
location,
Expand Down Expand Up @@ -57,11 +47,6 @@ export function TransactionOverview() {
// redirect to first transaction type
useRedirect(getRedirectLocation({ location, transactionType, urlParams }));

const {
transactionListData,
transactionListStatus,
} = useTransactionListFetcher();

// TODO: improve urlParams typings.
// `serviceName` or `transactionType` will never be undefined here, and this check should not be needed
if (!serviceName) {
Expand All @@ -73,50 +58,10 @@ export function TransactionOverview() {
<TransactionCharts />
<EuiSpacer size="s" />
<EuiPanel hasBorder={true}>
<EuiTitle size="xs">
<h3>Transactions</h3>
</EuiTitle>
<EuiSpacer size="s" />
{!transactionListData.isAggregationAccurate && (
<EuiCallOut
title={i18n.translate(
'xpack.apm.transactionCardinalityWarning.title',
{
defaultMessage:
'This view shows a subset of reported transactions.',
}
)}
color="danger"
iconType="alert"
>
<p>
<FormattedMessage
id="xpack.apm.transactionCardinalityWarning.body"
defaultMessage="The number of unique transaction names exceeds the configured value of {bucketSize}. Try reconfiguring your agents to group similar transactions or increase the value of {codeBlock}"
values={{
bucketSize: transactionListData.bucketSize,
codeBlock: (
<EuiCode>xpack.apm.ui.transactionGroupBucketSize</EuiCode>
),
}}
/>

<ElasticDocsLink
section="/kibana"
path="/troubleshooting.html#troubleshooting-too-many-transactions"
>
{i18n.translate(
'xpack.apm.transactionCardinalityWarning.docsLink',
{ defaultMessage: 'Learn more in the docs' }
)}
</ElasticDocsLink>
</p>
</EuiCallOut>
)}
<EuiSpacer size="s" />
<TransactionList
isLoading={transactionListStatus === 'loading'}
items={transactionListData.items || []}
<ServiceOverviewTransactionsTable
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why is it still called ServiceOverviewTransactionsTable if it's not on the service overview?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks, I actually forgot to move it to the shared folder and rename it.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed it here: b8209e6

hideViewTransactionsLink
numberOfTransactionsPerPage={25}
showAggregationAccurateCallout
/>
</EuiPanel>
</>
Expand Down
Loading