[APM] Refactors property tables into single metadata table (elastic#3…

…5150) (elastic#35327) * Refactors property table usage with new components and tests * Changes default tab for transaction detail view * Small refactors to property table * Review feedback * Updates translations * Refactors metadata and adds tests * Rearranges documentation links to prefer declarative component * Removes unused component * Improves metadata component tests and removes giant snapshots
spalger · Apr 18, 2019 · b86e285 · b86e285
1 parent 239f604
commit b86e285
Show file tree

Hide file tree

Showing 40 changed files with 987 additions and 1,464 deletions.
diff --git a/package.json b/package.json
@@ -378,6 +378,7 @@
     "istanbul-instrumenter-loader": "3.0.1",
     "jest": "^24.1.0",
     "jest-cli": "^24.1.0",
+    "jest-dom": "^3.1.3",
     "jest-raw-loader": "^1.0.1",
     "jimp": "0.2.28",
     "json5": "^1.0.1",

diff --git a/x-pack/plugins/apm/public/components/app/ErrorGroupDetails/DetailView/ErrorTabs.tsx b/x-pack/plugins/apm/public/components/app/ErrorGroupDetails/DetailView/ErrorTabs.tsx
@@ -8,31 +8,20 @@ import { i18n } from '@kbn/i18n';
 import { isEmpty } from 'lodash';
 import { idx } from '../../../../../common/idx';
 import { APMError } from '../../../../../typings/es_schemas/ui/APMError';
-import {
-  getTabsFromObject,
-  PropertyTab
-} from '../../../shared/PropertiesTable/tabConfig';
 
-export type ErrorTab = PropertyTab | ExceptionTab | LogTab;
-
-interface LogTab {
-  key: 'log_stacktrace';
+export interface ErrorTab {
+  key: 'log_stacktrace' | 'exception_stacktrace' | 'metadata';
   label: string;
 }
 
-export const logStacktraceTab: LogTab = {
+export const logStacktraceTab: ErrorTab = {
   key: 'log_stacktrace',
   label: i18n.translate('xpack.apm.propertiesTable.tabs.logStacktraceLabel', {
     defaultMessage: 'Log stacktrace'
   })
 };
 
-interface ExceptionTab {
-  key: 'exception_stacktrace';
-  label: string;
-}
-
-export const exceptionStacktraceTab: ExceptionTab = {
+export const exceptionStacktraceTab: ErrorTab = {
   key: 'exception_stacktrace',
   label: i18n.translate(
     'xpack.apm.propertiesTable.tabs.exceptionStacktraceLabel',
@@ -42,11 +31,18 @@ export const exceptionStacktraceTab: ExceptionTab = {
   )
 };
 
+export const metadataTab: ErrorTab = {
+  key: 'metadata',
+  label: i18n.translate('xpack.apm.propertiesTable.tabs.metadataLabel', {
+    defaultMessage: 'Metadata'
+  })
+};
+
 export function getTabs(error: APMError) {
   const hasLogStacktrace = !isEmpty(idx(error, _ => _.error.log.stacktrace));
   return [
     ...(hasLogStacktrace ? [logStacktraceTab] : []),
     exceptionStacktraceTab,
-    ...getTabsFromObject(error)
+    metadataTab
   ];
 }
diff --git a/.../apm/public/components/app/ErrorGroupDetails/DetailView/__snapshots__/index.test.tsx.snap b/.../apm/public/components/app/ErrorGroupDetails/DetailView/__snapshots__/index.test.tsx.snap
diff --git a/x-pack/plugins/apm/public/components/app/ErrorGroupDetails/DetailView/index.tsx b/x-pack/plugins/apm/public/components/app/ErrorGroupDetails/DetailView/index.tsx
@@ -14,18 +14,17 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { Location } from 'history';
-import { get } from 'lodash';
 import React from 'react';
 import styled from 'styled-components';
+import { first } from 'lodash';
 import { idx } from '../../../../../common/idx';
 import { ErrorGroupAPIResponse } from '../../../../../server/lib/errors/get_error_group';
 import { APMError } from '../../../../../typings/es_schemas/ui/APMError';
 import { IUrlParams } from '../../../../store/urlParams';
 import { px, unit } from '../../../../style/variables';
 import { DiscoverErrorLink } from '../../../shared/Links/DiscoverLinks/DiscoverErrorLink';
 import { fromQuery, history, toQuery } from '../../../shared/Links/url_helpers';
-import { PropertiesTable } from '../../../shared/PropertiesTable';
-import { getCurrentTab } from '../../../shared/PropertiesTable/tabConfig';
+import { ErrorMetadata } from '../../../shared/MetadataTable/ErrorMetadata';
 import { Stacktrace } from '../../../shared/Stacktrace';
 import {
   ErrorTab,
@@ -48,6 +47,15 @@ interface Props {
   location: Location;
 }
 
+// TODO: Move query-string-based tabs into a re-usable component?
+function getCurrentTab<T extends { key: string; label: string }>(
+  tabs: T[] = [],
+  currentTabKey: string | undefined
+): T {
+  const selectedTab = tabs.find(({ key }) => key === currentTabKey);
+  return selectedTab ? selectedTab : first(tabs) || {};
+}
+
 export function DetailView({ errorGroup, urlParams, location }: Props) {
   const { transaction, error, occurrencesCount } = errorGroup;
 
@@ -124,7 +132,6 @@ export function TabContent({
   currentTab: ErrorTab;
 }) {
   const codeLanguage = error.service.name;
-  const agentName = error.agent.name;
   const excStackframes = idx(error, _ => _.error.exception[0].stacktrace);
   const logStackframes = idx(error, _ => _.error.exception[0].stacktrace);
 
@@ -138,13 +145,6 @@ export function TabContent({
         <Stacktrace stackframes={excStackframes} codeLanguage={codeLanguage} />
       );
     default:
-      const propData = get(error, currentTab.key);
-      return (
-        <PropertiesTable
-          propData={propData}
-          propKey={currentTab.key}
-          agentName={agentName}
-        />
-      );
+      return <ErrorMetadata error={error} />;
   }
 }
diff --git a/...ck/plugins/apm/public/components/app/ServiceDetails/ServiceIntegrations/WatcherFlyout.tsx b/...ck/plugins/apm/public/components/app/ServiceDetails/ServiceIntegrations/WatcherFlyout.tsx
@@ -33,9 +33,9 @@ import styled from 'styled-components';
 import chrome from 'ui/chrome';
 import { toastNotifications } from 'ui/notify';
 import { IUrlParams } from '../../../../store/urlParams';
-import { XPACK_DOCS } from '../../../../utils/documentation/xpack';
 import { KibanaLink } from '../../../shared/Links/KibanaLink';
 import { createErrorGroupWatch, Schedule } from './createErrorGroupWatch';
+import { ElasticDocsLink } from '../../../shared/Links/ElasticDocsLink';
 
 type ScheduleKey = keyof Schedule;
 
@@ -297,14 +297,18 @@ export class WatcherFlyout extends Component<
               To learn more about Watcher, please read our {documentationLink}."
             values={{
               documentationLink: (
-                <EuiLink target="_blank" href={XPACK_DOCS.xpackWatcher}>
+                <ElasticDocsLink
+                  target="_blank"
+                  section="/x-pack"
+                  path="/watcher-getting-started.html"
+                >
                   {i18n.translate(
                     'xpack.apm.serviceDetails.enableErrorReportsPanel.formDescription.documentationLinkText',
                     {
                       defaultMessage: 'documentation'
                     }
                   )}
-                </EuiLink>
+                </ElasticDocsLink>
               )
             }}
           />
@@ -499,14 +503,18 @@ export class WatcherFlyout extends Component<
                     defaultMessage="If you have not configured email, please see the {documentationLink}."
                     values={{
                       documentationLink: (
-                        <EuiLink target="_blank" href={XPACK_DOCS.xpackEmails}>
+                        <ElasticDocsLink
+                          target="_blank"
+                          section="/x-pack"
+                          path="/actions-email.html#configuring-email"
+                        >
                           {i18n.translate(
                             'xpack.apm.serviceDetails.enableErrorReportsPanel.recipientsHelpText.documentationLinkText',
                             {
                               defaultMessage: 'documentation'
                             }
                           )}
-                        </EuiLink>
+                        </ElasticDocsLink>
                       )
                     }}
                   />

diff --git a/...lic/components/app/TransactionDetails/Transaction/TransactionPropertiesTableForFlyout.tsx b/...lic/components/app/TransactionDetails/Transaction/TransactionPropertiesTableForFlyout.tsx
diff --git a/x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/TransactionTabs.tsx b/x-pack/plugins/apm/public/components/app/TransactionDetails/Transaction/TransactionTabs.tsx
@@ -7,38 +7,28 @@
 import { EuiSpacer, EuiTab, EuiTabs } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { Location } from 'history';
-import { get } from 'lodash';
 import React from 'react';
-import styled from 'styled-components';
 import { Transaction } from '../../../../../typings/es_schemas/ui/Transaction';
 import { IUrlParams } from '../../../../store/urlParams';
-import { px, units } from '../../../../style/variables';
-import { HeightRetainer } from '../../../shared/HeightRetainer';
 import { fromQuery, history, toQuery } from '../../../shared/Links/url_helpers';
-import { PropertiesTable } from '../../../shared/PropertiesTable';
-import {
-  getCurrentTab,
-  getTabsFromObject
-} from '../../../shared/PropertiesTable/tabConfig';
+import { TransactionMetadata } from '../../../shared/MetadataTable/TransactionMetadata';
 import { WaterfallContainer } from './WaterfallContainer';
 import { IWaterfall } from './WaterfallContainer/Waterfall/waterfall_helpers/waterfall_helpers';
 
-const TableContainer = styled.div`
-  padding: ${px(units.plus)} ${px(units.plus)} 0;
-`;
-
-interface TimelineTab {
-  key: 'timeline';
-  label: string;
-}
-
-const timelineTab: TimelineTab = {
+const timelineTab = {
   key: 'timeline',
   label: i18n.translate('xpack.apm.propertiesTable.tabs.timelineLabel', {
     defaultMessage: 'Timeline'
   })
 };
 
+const metadataTab = {
+  key: 'metadata',
+  label: i18n.translate('xpack.apm.propertiesTable.tabs.metadataLabel', {
+    defaultMessage: 'Metadata'
+  })
+};
+
 interface Props {
   location: Location;
   transaction: Transaction;
@@ -52,14 +42,12 @@ export function TransactionTabs({
   urlParams,
   waterfall
 }: Props) {
-  const tabs = [timelineTab, ...getTabsFromObject(transaction)];
-  const currentTab = getCurrentTab(tabs, urlParams.detailTab);
-  const agentName = transaction.agent.name;
+  const tabs = [timelineTab, metadataTab];
+  const currentTab =
+    urlParams.detailTab === metadataTab.key ? metadataTab : timelineTab;
 
   return (
-    <HeightRetainer
-      key={`${transaction.trace.id}:${transaction.transaction.id}`}
-    >
+    <React.Fragment>
       <EuiTabs>
         {tabs.map(({ key, label }) => {
           return (
@@ -92,14 +80,8 @@ export function TransactionTabs({
           waterfall={waterfall}
         />
       ) : (
-        <TableContainer>
-          <PropertiesTable
-            propData={get(transaction, currentTab.key)}
-            propKey={currentTab.key}
-            agentName={agentName}
-          />
-        </TableContainer>
+        <TransactionMetadata transaction={transaction} />
       )}
-    </HeightRetainer>
+    </React.Fragment>
   );
 }