[APM] Removes action menus (#24748)

* Removes infra links and replaces context menu with single discover links for now * Changes discover links to use empty button style
elastic · Oct 30, 2018 · b7b853a · b7b853a
1 parent ce0cae6
commit b7b853a
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 16 deletions.
diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/ActionMenu.tsx b/x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/ActionMenu.tsx
@@ -64,6 +64,23 @@ interface ActionMenuState {
   readonly isOpen: boolean;
 }
 
+export const DiscoverTransactionLink: React.SFC<ActionMenuProps> = ({
+  transaction,
+  children
+}) => {
+  return (
+    <KibanaLink
+      pathname="/app/kibana"
+      hash="/discover"
+      query={getDiscoverQuery(
+        transaction.transaction.id,
+        transaction.version === 'v2' ? transaction.trace.id : undefined
+      )}
+      children={children}
+    />
+  );
+};
+
 export class ActionMenu extends React.Component<
   ActionMenuProps,
   ActionMenuState
@@ -114,16 +131,9 @@ export class ActionMenu extends React.Component<
 
     const items = [
       <EuiContextMenuItem icon="discoverApp" key="discover-transaction">
-        <KibanaLink
-          pathname="/app/kibana"
-          hash="/discover"
-          query={getDiscoverQuery(
-            transaction.transaction.id,
-            transaction.version === 'v2' ? transaction.trace.id : undefined
-          )}
-        >
+        <DiscoverTransactionLink transaction={transaction}>
           View sample document
-        </KibanaLink>
+        </DiscoverTransactionLink>
       </EuiContextMenuItem>,
       ...this.getInfraActions(transaction)
     ];

diff --git a/...p/TransactionDetails/Transaction/WaterfallContainer/Waterfall/TransactionFlyout/index.tsx b/...p/TransactionDetails/Transaction/WaterfallContainer/Waterfall/TransactionFlyout/index.tsx
@@ -5,6 +5,7 @@
  */
 
 import {
+  EuiButtonEmpty,
   EuiFlexGroup,
   EuiFlexItem,
   EuiFlyout,
@@ -17,7 +18,7 @@ import {
 import React from 'react';
 import { IUrlParams } from 'x-pack/plugins/apm/public/store/urlParams';
 import { Transaction } from 'x-pack/plugins/apm/typings/Transaction';
-import { ActionMenu } from '../../../ActionMenu';
+import { DiscoverTransactionLink } from '../../../ActionMenu';
 import { StickyTransactionProperties } from '../../../StickyTransactionProperties';
 import { TransactionPropertiesTableForFlyout } from '../../../TransactionPropertiesTableForFlyout';
 import { FlyoutTopLevelProperties } from '../FlyoutTopLevelProperties';
@@ -54,7 +55,11 @@ export function TransactionFlyout({
             </EuiFlexItem>
 
             <EuiFlexItem grow={false}>
-              <ActionMenu transaction={transactionDoc} />
+              <DiscoverTransactionLink transaction={transactionDoc}>
+                <EuiButtonEmpty iconType="discoverApp">
+                  View transaction in Discover
+                </EuiButtonEmpty>
+              </DiscoverTransactionLink>
             </EuiFlexItem>
           </EuiFlexGroup>
         </EuiFlyoutHeader>

diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/index.tsx b/x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/index.tsx
@@ -6,6 +6,7 @@
 
 import {
   EuiButton,
+  EuiButtonEmpty,
   EuiFlexGroup,
   EuiFlexItem,
   EuiPanel,
@@ -19,7 +20,7 @@ import { Transaction as ITransaction } from '../../../../../typings/Transaction'
 import { IUrlParams } from '../../../../store/urlParams';
 import EmptyMessage from '../../../shared/EmptyMessage';
 import { TransactionLink } from '../../../shared/TransactionLink';
-import { ActionMenu } from './ActionMenu';
+import { DiscoverTransactionLink } from './ActionMenu';
 import { StickyTransactionProperties } from './StickyTransactionProperties';
 // @ts-ignore
 import { TransactionPropertiesTable } from './TransactionPropertiesTable';
@@ -89,7 +90,11 @@ export const Transaction: React.SFC<Props> = ({
         <EuiFlexItem>
           <EuiFlexGroup justifyContent="flexEnd">
             <EuiFlexItem grow={false}>
-              <ActionMenu transaction={transaction} />
+              <DiscoverTransactionLink transaction={transaction}>
+                <EuiButtonEmpty iconType="discoverApp">
+                  View transaction in Discover
+                </EuiButtonEmpty>
+              </DiscoverTransactionLink>
             </EuiFlexItem>
             <MaybeViewTraceLink transaction={transaction} root={root} />
           </EuiFlexGroup>

diff --git a/x-pack/plugins/apm/public/components/shared/DiscoverButton.js b/x-pack/plugins/apm/public/components/shared/DiscoverButton.js
@@ -6,7 +6,7 @@
 
 import React from 'react';
 import { KibanaLink } from '../../utils/url';
-import { EuiButton } from '@elastic/eui';
+import { EuiButtonEmpty } from '@elastic/eui';
 
 function DiscoverButton({ query, children, ...rest }) {
   return (
@@ -16,9 +16,9 @@ function DiscoverButton({ query, children, ...rest }) {
       query={query}
       {...rest}
     >
-      <EuiButton iconType="discoverApp">
+      <EuiButtonEmpty iconType="discoverApp">
         {children || 'View in Discover'}
-      </EuiButton>
+      </EuiButtonEmpty>
     </KibanaLink>
   );
 }