Skip to content

Commit

Permalink
[APM] Link Transaction to Infra & Logging with action menu (elastic#2…
Browse files Browse the repository at this point in the history
…7291)

* [APM] fixes elastic#26574 by adding an Action menu which links a transaction to the Infra & Logging UIs

* [APM]
- remove link to host metrics filterd by trace id until supported
- replace ts-optchain with _.get
- remove old, unreferenced ActionMenu dead code
- add unit tests

* [APM] Make sure the apm index pattern filter is passed thru via the Discover link

* [APM] refactored DiscoverButton and TransactionActionMenu to use new QueryWithIndexPattern component to pass along the correct index pattern via the discover link
  • Loading branch information
ogupte committed Dec 18, 2018
1 parent dd9e773 commit dbc7efa
Show file tree
Hide file tree
Showing 17 changed files with 955 additions and 174 deletions.
8 changes: 8 additions & 0 deletions x-pack/plugins/apm/common/constants.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -106,6 +106,14 @@ describe('Transaction v2', () => {
result: 'transaction result',
sampled: true,
type: 'transaction type'
},
kubernetes: {
pod: {
uid: 'pod1234567890abcdef'
}
},
container: {
id: 'container1234567890abcdef'
}
};

Expand Down

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
*/

import {
EuiButtonEmpty,
EuiCallOut,
EuiFlexGroup,
EuiFlexItem,
Expand All @@ -20,7 +19,7 @@ import {
import { get } from 'lodash';
import React from 'react';
import styled from 'styled-components';
import { DiscoverTransactionButton } from 'x-pack/plugins/apm/public/components/shared/DiscoverButtons/DiscoverTransactionButton';
import { TransactionActionMenu } from 'x-pack/plugins/apm/public/components/shared/TransactionActionMenu/TransactionActionMenu';
import { IUrlParams } from 'x-pack/plugins/apm/public/store/urlParams';
import { APM_AGENT_DROPPED_SPANS_DOCS } from 'x-pack/plugins/apm/public/utils/documentation/agents';
import { Transaction } from 'x-pack/plugins/apm/typings/es_schemas/Transaction';
Expand Down Expand Up @@ -115,11 +114,10 @@ export function TransactionFlyout({
</EuiFlexItem>

<EuiFlexItem grow={false}>
<DiscoverTransactionButton transaction={transactionDoc}>
<EuiButtonEmpty iconType="discoverApp">
View transaction in Discover
</EuiButtonEmpty>
</DiscoverTransactionButton>
<TransactionActionMenu
transaction={transactionDoc}
location={location}
/>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlyoutHeader>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@

import {
EuiButton,
EuiButtonEmpty,
EuiFlexGroup,
EuiFlexItem,
EuiPanel,
Expand All @@ -17,7 +16,7 @@ import {
import React from 'react';
import { Transaction as ITransaction } from '../../../../../typings/es_schemas/Transaction';
import { IUrlParams } from '../../../../store/urlParams';
import { DiscoverTransactionButton } from '../../../shared/DiscoverButtons/DiscoverTransactionButton';
import { TransactionActionMenu } from '../../../shared/TransactionActionMenu/TransactionActionMenu';
import { TransactionLink } from '../../../shared/TransactionLink';
import { StickyTransactionProperties } from './StickyTransactionProperties';
import { TransactionPropertiesTable } from './TransactionPropertiesTable';
Expand Down Expand Up @@ -95,11 +94,10 @@ export const Transaction: React.SFC<Props> = ({
<EuiFlexItem>
<EuiFlexGroup justifyContent="flexEnd">
<EuiFlexItem grow={false}>
<DiscoverTransactionButton transaction={transaction}>
<EuiButtonEmpty iconType="discoverApp">
View transaction in Discover
</EuiButtonEmpty>
</DiscoverTransactionButton>
<TransactionActionMenu
transaction={transaction}
location={location}
/>
</EuiFlexItem>
<MaybeViewTraceLink
transaction={transaction}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,43 +6,28 @@

import React from 'react';
import { StringMap } from 'x-pack/plugins/apm/typings/common';
import {
getAPMIndexPattern,
ISavedObject
} from '../../../services/rest/savedObjects';
import { KibanaLink } from '../../../utils/url';
import { QueryWithIndexPattern } from './QueryWithIndexPattern';

interface Props {
query: StringMap;
}

interface State {
indexPattern?: ISavedObject;
}

export class DiscoverButton extends React.Component<Props, State> {
public state: State = {};
public async componentDidMount() {
const indexPattern = await getAPMIndexPattern();
this.setState({ indexPattern });
}

export class DiscoverButton extends React.Component<Props> {
public render() {
const { query, children, ...rest } = this.props;
const id = this.state.indexPattern && this.state.indexPattern.id;

if (!query._a.index) {
query._a.index = id;
}

return (
<KibanaLink
pathname={'/app/kibana'}
hash={'/discover'}
query={query}
children={children}
{...rest}
/>
<QueryWithIndexPattern query={query}>
{queryWithIndexPattern => (
<KibanaLink
pathname={'/app/kibana'}
hash={'/discover'}
query={queryWithIndexPattern}
children={children}
{...rest}
/>
)}
</QueryWithIndexPattern>
);
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,11 @@ import {
TRACE_ID,
TRANSACTION_ID
} from 'x-pack/plugins/apm/common/constants';
import { StringMap } from 'x-pack/plugins/apm/typings/common';
import { Transaction } from 'x-pack/plugins/apm/typings/es_schemas/Transaction';
import { DiscoverButton } from './DiscoverButton';

function getDiscoverQuery(transaction: Transaction) {
export function getDiscoverQuery(transaction: Transaction): StringMap {
const transactionId = transaction.transaction.id;
const traceId =
transaction.version === 'v2' ? transaction.trace.id : undefined;
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
/*
* 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 React, { ReactElement } from 'react';
import { StringMap } from 'x-pack/plugins/apm/typings/common';
import {
getAPMIndexPattern,
ISavedObject
} from '../../../services/rest/savedObjects';

export function getQueryWithIndexPattern(
query: StringMap = {},
indexPattern?: ISavedObject
) {
if ((query._a && query._a.index) || !indexPattern) {
return query;
}

const id = indexPattern && indexPattern.id;

return {
...query,
_a: {
...query._a,
index: id
}
};
}

interface Props {
query?: StringMap;
children: (query: StringMap) => ReactElement<any>;
}

interface State {
indexPattern?: ISavedObject;
}

export class QueryWithIndexPattern extends React.Component<Props, State> {
constructor(props: Props) {
super(props);
getAPMIndexPattern().then(indexPattern => {
this.setState({ indexPattern });
});
this.state = {};
}
public render() {
const { children, query } = this.props;
const { indexPattern } = this.state;
const renderWithQuery = children;
return renderWithQuery(getQueryWithIndexPattern(query, indexPattern));
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
/*
* 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 'jest-styled-components';
import React from 'react';
import { Transaction } from 'x-pack/plugins/apm/typings/es_schemas/Transaction';
import {
DiscoverTransactionButton,
getDiscoverQuery
} from '../DiscoverTransactionButton';
import mockTransaction from './mockTransaction.json';

describe('DiscoverTransactionButton component', () => {
it('should render with data', () => {
const transaction: Transaction = mockTransaction;

expect(
shallow(<DiscoverTransactionButton transaction={transaction} />)
).toMatchSnapshot();
});
});

describe('getDiscoverQuery', () => {
it('should return the correct query params object', () => {
const transaction: Transaction = mockTransaction;
const result = getDiscoverQuery(transaction);
expect(result).toMatchSnapshot();
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`DiscoverTransactionButton component should render with data 1`] = `
<DiscoverButton
query={
Object {
"_a": Object {
"interval": "auto",
"query": Object {
"language": "lucene",
"query": "processor.event:\\"transaction\\" AND transaction.id:\\"8b60bd32ecc6e150\\" AND trace.id:\\"8b60bd32ecc6e1506735a8b6cfcf175c\\"",
},
},
}
}
/>
`;

exports[`getDiscoverQuery should return the correct query params object 1`] = `
Object {
"_a": Object {
"interval": "auto",
"query": Object {
"language": "lucene",
"query": "processor.event:\\"transaction\\" AND transaction.id:\\"8b60bd32ecc6e150\\" AND trace.id:\\"8b60bd32ecc6e1506735a8b6cfcf175c\\"",
},
},
}
`;
Loading

0 comments on commit dbc7efa

Please sign in to comment.