[6.5] [APM] Removes action menus (#24748) (#24807)

* Polish 6.5 (#24556) * Updates waterfall item design for timeline rows * Adjusts span and tx flyouts and updates tooltips to EUI * Heading size fixes and clean up * Updates tooltip snapshots * Review tweaks and snapshot updates * Revert experiment :) Co-Authored-By: jasonrhodes <jason.matthew.rhodes@gmail.com> * Fixes bug with v1 waterfall state * Fixes bug with timeline bar height * Updates snapshot tests * Updated test so it doesn't mount and rely on EUI makeId() which is non-deterministic per test run * Add a console.error to visualize errors (#24581) (#24867) * [6.5] [Rollups] Fix i18n bugs (#23848) (#24871) * [Rollups] Fix i18n bugs (#23848) * Internationalize job details tabs and wrap instances in EuiErrorBoundary to visually localize the error. * Localize no default index pattern message. * Localize es interval errors. * Localize job action menu and confirm delete modal. * Remove unnecessary use of injectI18n from tabs. * Localize job status. * Localize steps. * Remove template literals from FormattedMessages. * Remove accidental security addition to translation file. * [APM] fixes #24563 by de-duping the column field id 'sample' (#24690) (#24877) * [APM] fixes #24563 by replacing de-duping the twice-used column field id * [APM] fixed issue with service column not sorting in ManagedTable * [APM] make render field on ITableColumn optional and allowing it to use EUI's default value * Add 6.5 to .backportrc.json * [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 31, 2018 · ca79943 · ca79943
1 parent ff74341
commit ca79943
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 17 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';
@@ -52,9 +53,12 @@ export function TransactionFlyout({
                 <h4>Transaction details</h4>
               </EuiTitle>
             </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>
   );
 }