[APM] Removes action menus (elastic#24748)

* Removes infra links and replaces context menu with single discover links for now * Changes discover links to use empty button style
jasonrhodes · Oct 30, 2018 · 8eff730 · 8eff730
1 parent 81b8d4e
commit 8eff730
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 50 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,20 +5,20 @@
  */
 
 import {
-  EuiButton,
+  EuiButtonEmpty,
   EuiFlexGroup,
   EuiFlexItem,
   EuiFlyout,
   EuiFlyoutBody,
   EuiFlyoutHeader,
   EuiHorizontalRule,
+  EuiPortal,
   EuiTitle
 } from '@elastic/eui';
 import React from 'react';
-import { TransactionLink } from 'x-pack/plugins/apm/public/components/shared/TransactionLink';
 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';
@@ -44,39 +44,37 @@ export function TransactionFlyout({
   }
 
   return (
-    <EuiFlyout onClose={onClose} size="l">
-      <EuiFlyoutHeader hasBorder>
-        <EuiFlexGroup>
-          <EuiFlexItem grow={false}>
-            <EuiTitle>
-              <h4>Transaction details</h4>
-            </EuiTitle>
-          </EuiFlexItem>
+    <EuiPortal>
+      <EuiFlyout onClose={onClose} size="l">
+        <EuiFlyoutHeader hasBorder>
+          <EuiFlexGroup>
+            <EuiFlexItem grow={false}>
+              <EuiTitle>
+                <h4>Transaction details</h4>
+              </EuiTitle>
+            </EuiFlexItem>
 
-          <EuiFlexItem grow={false}>
-            <ActionMenu transaction={transactionDoc} />
-          </EuiFlexItem>
-
-          <EuiFlexItem grow={false}>
-            <TransactionLink transaction={transactionDoc}>
-              <EuiButton iconType="visLine">
-                View transaction group details
-              </EuiButton>
-            </TransactionLink>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiFlyoutHeader>
-      <EuiFlyoutBody>
-        <FlyoutTopLevelProperties transaction={transactionDoc} />
-        <EuiHorizontalRule />
-        <StickyTransactionProperties transaction={transactionDoc} />
-        <EuiHorizontalRule />
-        <TransactionPropertiesTableForFlyout
-          transaction={transactionDoc}
-          location={location}
-          urlParams={urlParams}
-        />
-      </EuiFlyoutBody>
-    </EuiFlyout>
+            <EuiFlexItem grow={false}>
+              <DiscoverTransactionLink transaction={transactionDoc}>
+                <EuiButtonEmpty iconType="discoverApp">
+                  View transaction in Discover
+                </EuiButtonEmpty>
+              </DiscoverTransactionLink>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiFlyoutHeader>
+        <EuiFlyoutBody>
+          <FlyoutTopLevelProperties transaction={transactionDoc} />
+          <EuiHorizontalRule />
+          <StickyTransactionProperties transaction={transactionDoc} />
+          <EuiHorizontalRule />
+          <TransactionPropertiesTableForFlyout
+            transaction={transactionDoc}
+            location={location}
+            urlParams={urlParams}
+          />
+        </EuiFlyoutBody>
+      </EuiFlyout>
+    </EuiPortal>
   );
 }
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>
   );
 }