[APM] Bug: Service overview: Link to Transactions list from the Overv…

…iew page is broken (#86447) (#86630) * fixing link and refactoring some stuff * addressing pr comments
elastic · Dec 21, 2020 · 69b26bb · 69b26bb
1 parent e1af4e4
commit 69b26bb
Show file tree

Hide file tree

Showing 10 changed files with 78 additions and 55 deletions.
diff --git a/...onDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/FlyoutTopLevelProperties.tsx b/...onDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/FlyoutTopLevelProperties.tsx
@@ -13,7 +13,7 @@ import {
 import { Transaction } from '../../../../../../../typings/es_schemas/ui/transaction';
 import { TransactionDetailLink } from '../../../../../shared/Links/apm/TransactionDetailLink';
 import { StickyProperties } from '../../../../../shared/StickyProperties';
-import { TransactionOverviewLink } from '../../../../../shared/Links/apm/TransactionOverviewLink';
+import { ServiceOrTransactionsOverviewLink } from '../../../../../shared/Links/apm/service_transactions_overview';
 
 interface Props {
   transaction?: Transaction;
@@ -31,9 +31,11 @@ export function FlyoutTopLevelProperties({ transaction }: Props) {
       }),
       fieldName: SERVICE_NAME,
       val: (
-        <TransactionOverviewLink serviceName={transaction.service.name}>
+        <ServiceOrTransactionsOverviewLink
+          serviceName={transaction.service.name}
+        >
           {transaction.service.name}
-        </TransactionOverviewLink>
+        </ServiceOrTransactionsOverviewLink>
       ),
       width: '25%',
     },

diff --git a/...ls/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/StickySpanProperties.tsx b/...ls/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/StickySpanProperties.tsx
@@ -15,7 +15,7 @@ import {
 import { NOT_AVAILABLE_LABEL } from '../../../../../../../../common/i18n';
 import { Span } from '../../../../../../../../typings/es_schemas/ui/span';
 import { StickyProperties } from '../../../../../../shared/StickyProperties';
-import { TransactionOverviewLink } from '../../../../../../shared/Links/apm/TransactionOverviewLink';
+import { ServiceOrTransactionsOverviewLink } from '../../../../../../shared/Links/apm/service_transactions_overview';
 import { TransactionDetailLink } from '../../../../../../shared/Links/apm/TransactionDetailLink';
 
 interface Props {
@@ -33,9 +33,11 @@ export function StickySpanProperties({ span, transaction }: Props) {
           }),
           fieldName: SERVICE_NAME,
           val: (
-            <TransactionOverviewLink serviceName={transaction.service.name}>
+            <ServiceOrTransactionsOverviewLink
+              serviceName={transaction.service.name}
+            >
               {transaction.service.name}
-            </TransactionOverviewLink>
+            </ServiceOrTransactionsOverviewLink>
           ),
           width: '25%',
         },

diff --git a/x-pack/plugins/apm/public/components/app/service_details/service_detail_tabs.tsx b/x-pack/plugins/apm/public/components/app/service_details/service_detail_tabs.tsx
@@ -15,7 +15,7 @@ import { useMetricOverviewHref } from '../../shared/Links/apm/MetricOverviewLink
 import { useServiceMapHref } from '../../shared/Links/apm/ServiceMapLink';
 import { useServiceNodeOverviewHref } from '../../shared/Links/apm/ServiceNodeOverviewLink';
 import { useServiceOverviewHref } from '../../shared/Links/apm/service_overview_link';
-import { useTransactionOverviewHref } from '../../shared/Links/apm/TransactionOverviewLink';
+import { useServiceOrTransactionsOverviewHref } from '../../shared/Links/apm/service_transactions_overview';
 import { MainTabs } from '../../shared/main_tabs';
 import { ErrorGroupOverview } from '../ErrorGroupOverview';
 import { ServiceMap } from '../ServiceMap';
@@ -60,7 +60,7 @@ export function ServiceDetailTabs({ serviceName, tab }: Props) {
 
   const transactionsTab = {
     key: 'transactions',
-    href: useTransactionOverviewHref(serviceName),
+    href: useServiceOrTransactionsOverviewHref(serviceName),
     text: i18n.translate('xpack.apm.serviceDetails.transactionsTabLabel', {
       defaultMessage: 'Transactions',
     }),

diff --git a/x-pack/plugins/apm/public/components/app/service_inventory/ServiceList/index.tsx b/x-pack/plugins/apm/public/components/app/service_inventory/ServiceList/index.tsx
@@ -21,7 +21,7 @@ import { NOT_AVAILABLE_LABEL } from '../../../../../common/i18n';
 import { fontSizes, px, truncate, unit } from '../../../../style/variables';
 import { ManagedTable, ITableColumn } from '../../../shared/ManagedTable';
 import { EnvironmentBadge } from '../../../shared/EnvironmentBadge';
-import { TransactionOverviewLink } from '../../../shared/Links/apm/TransactionOverviewLink';
+import { ServiceOrTransactionsOverviewLink } from '../../../shared/Links/apm/service_transactions_overview';
 import { AgentIcon } from '../../../shared/AgentIcon';
 import { HealthBadge } from './HealthBadge';
 import { ServiceListMetric } from './ServiceListMetric';
@@ -39,7 +39,7 @@ function formatString(value?: string | null) {
   return value || NOT_AVAILABLE_LABEL;
 }
 
-const AppLink = styled(TransactionOverviewLink)`
+const AppLink = styled(ServiceOrTransactionsOverviewLink)`
   font-size: ${fontSizes.large};
   ${truncate('100%')};
 `;

diff --git a/.../apm/public/components/app/service_overview/service_overview_dependencies_table/index.tsx b/.../apm/public/components/app/service_overview/service_overview_dependencies_table/index.tsx
@@ -4,34 +4,35 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiFlexItem } from '@elastic/eui';
-import { EuiInMemoryTable } from '@elastic/eui';
-import { EuiTitle } from '@elastic/eui';
-import { EuiBasicTableColumn } from '@elastic/eui';
-import { EuiFlexGroup } from '@elastic/eui';
+import {
+  EuiBasicTableColumn,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiInMemoryTable,
+  EuiTitle,
+} from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
+import { ENVIRONMENT_ALL } from '../../../../../common/environment_filter_values';
 import {
   asDuration,
   asPercent,
   asTransactionRate,
 } from '../../../../../common/utils/formatters';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { ServiceDependencyItem } from '../../../../../server/lib/services/get_service_dependencies';
-import { ENVIRONMENT_ALL } from '../../../../../common/environment_filter_values';
-import { FETCH_STATUS, useFetcher } from '../../../../hooks/use_fetcher';
 import { useUrlParams } from '../../../../context/url_params_context/use_url_params';
+import { FETCH_STATUS, useFetcher } from '../../../../hooks/use_fetcher';
 import { callApmApi } from '../../../../services/rest/createCallApmApi';
-import { ServiceMapLink } from '../../../shared/Links/apm/ServiceMapLink';
-import { TruncateWithTooltip } from '../../../shared/truncate_with_tooltip';
-import { TableLinkFlexItem } from '../table_link_flex_item';
+import { px, unit } from '../../../../style/variables';
 import { AgentIcon } from '../../../shared/AgentIcon';
-import { TableFetchWrapper } from '../../../shared/table_fetch_wrapper';
 import { SparkPlot } from '../../../shared/charts/spark_plot';
-import { px, unit } from '../../../../style/variables';
 import { ImpactBar } from '../../../shared/ImpactBar';
+import { ServiceMapLink } from '../../../shared/Links/apm/ServiceMapLink';
 import { ServiceOverviewLink } from '../../../shared/Links/apm/service_overview_link';
 import { SpanIcon } from '../../../shared/span_icon';
+import { TableFetchWrapper } from '../../../shared/table_fetch_wrapper';
+import { TruncateWithTooltip } from '../../../shared/truncate_with_tooltip';
 import { ServiceOverviewTableContainer } from '../service_overview_table_container';
 
 interface Props {
@@ -192,8 +193,8 @@ export function ServiceOverviewDependenciesTable({ serviceName }: Props) {
   return (
     <EuiFlexGroup direction="column" gutterSize="s">
       <EuiFlexItem>
-        <EuiFlexGroup responsive={false}>
-          <EuiFlexItem>
+        <EuiFlexGroup responsive={false} justifyContent="spaceBetween">
+          <EuiFlexItem grow={false}>
             <EuiTitle size="xs">
               <h2>
                 {i18n.translate(
@@ -205,7 +206,7 @@ export function ServiceOverviewDependenciesTable({ serviceName }: Props) {
               </h2>
             </EuiTitle>
           </EuiFlexItem>
-          <TableLinkFlexItem>
+          <EuiFlexItem grow={false}>
             <ServiceMapLink serviceName={serviceName}>
               {i18n.translate(
                 'xpack.apm.serviceOverview.dependenciesTableLinkText',
@@ -214,7 +215,7 @@ export function ServiceOverviewDependenciesTable({ serviceName }: Props) {
                 }
               )}
             </ServiceMapLink>
-          </TableLinkFlexItem>
+          </EuiFlexItem>
         </EuiFlexGroup>
       </EuiFlexItem>
       <EuiFlexItem>

diff --git a/...lugins/apm/public/components/app/service_overview/service_overview_errors_table/index.tsx b/...lugins/apm/public/components/app/service_overview/service_overview_errors_table/index.tsx
@@ -25,7 +25,6 @@ import { TableFetchWrapper } from '../../../shared/table_fetch_wrapper';
 import { TimestampTooltip } from '../../../shared/TimestampTooltip';
 import { TruncateWithTooltip } from '../../../shared/truncate_with_tooltip';
 import { ServiceOverviewTableContainer } from '../service_overview_table_container';
-import { TableLinkFlexItem } from '../table_link_flex_item';
 
 interface Props {
   serviceName: string;
@@ -195,8 +194,8 @@ export function ServiceOverviewErrorsTable({ serviceName }: Props) {
   return (
     <EuiFlexGroup direction="column" gutterSize="s">
       <EuiFlexItem>
-        <EuiFlexGroup responsive={false}>
-          <EuiFlexItem>
+        <EuiFlexGroup responsive={false} justifyContent="spaceBetween">
+          <EuiFlexItem grow={false}>
             <EuiTitle size="xs">
               <h2>
                 {i18n.translate('xpack.apm.serviceOverview.errorsTableTitle', {
@@ -205,13 +204,13 @@ export function ServiceOverviewErrorsTable({ serviceName }: Props) {
               </h2>
             </EuiTitle>
           </EuiFlexItem>
-          <TableLinkFlexItem>
+          <EuiFlexItem grow={false}>
             <ErrorOverviewLink serviceName={serviceName}>
               {i18n.translate('xpack.apm.serviceOverview.errorsTableLinkText', {
                 defaultMessage: 'View errors',
               })}
             </ErrorOverviewLink>
-          </TableLinkFlexItem>
+          </EuiFlexItem>
         </EuiFlexGroup>
       </EuiFlexItem>
       <EuiFlexItem>

diff --git a/.../apm/public/components/app/service_overview/service_overview_transactions_table/index.tsx b/.../apm/public/components/app/service_overview/service_overview_transactions_table/index.tsx
@@ -20,6 +20,7 @@ import {
   asPercent,
   asTransactionRate,
 } from '../../../../../common/utils/formatters';
+import { useApmServiceContext } from '../../../../context/apm_service/use_apm_service_context';
 import { useUrlParams } from '../../../../context/url_params_context/use_url_params';
 import { FETCH_STATUS, useFetcher } from '../../../../hooks/use_fetcher';
 import { useLatencyAggregationType } from '../../../../hooks/use_latency_Aggregation_type';
@@ -28,13 +29,11 @@ import {
   callApmApi,
 } from '../../../../services/rest/createCallApmApi';
 import { px, unit } from '../../../../style/variables';
-import { TransactionDetailLink } from '../../../shared/Links/apm/TransactionDetailLink';
-import { TransactionOverviewLink } from '../../../shared/Links/apm/TransactionOverviewLink';
-import { TableFetchWrapper } from '../../../shared/table_fetch_wrapper';
-import { TableLinkFlexItem } from '../table_link_flex_item';
 import { SparkPlot } from '../../../shared/charts/spark_plot';
 import { ImpactBar } from '../../../shared/ImpactBar';
-import { useApmServiceContext } from '../../../../context/apm_service/use_apm_service_context';
+import { TransactionDetailLink } from '../../../shared/Links/apm/TransactionDetailLink';
+import { TransactionOverviewLink } from '../../../shared/Links/apm/transaction_overview_ink';
+import { TableFetchWrapper } from '../../../shared/table_fetch_wrapper';
 import { TruncateWithTooltip } from '../../../shared/truncate_with_tooltip';
 import { ServiceOverviewTableContainer } from '../service_overview_table_container';
 
@@ -270,7 +269,7 @@ export function ServiceOverviewTransactionsTable(props: Props) {
     <EuiFlexGroup direction="column" gutterSize="s">
       <EuiFlexItem>
         <EuiFlexGroup justifyContent="spaceBetween" responsive={false}>
-          <EuiFlexItem>
+          <EuiFlexItem grow={false}>
             <EuiTitle size="xs">
               <h2>
                 {i18n.translate(
@@ -282,7 +281,7 @@ export function ServiceOverviewTransactionsTable(props: Props) {
               </h2>
             </EuiTitle>
           </EuiFlexItem>
-          <TableLinkFlexItem>
+          <EuiFlexItem grow={false}>
             <TransactionOverviewLink serviceName={serviceName}>
               {i18n.translate(
                 'xpack.apm.serviceOverview.transactionsTableLinkText',
@@ -291,7 +290,7 @@ export function ServiceOverviewTransactionsTable(props: Props) {
                 }
               )}
             </TransactionOverviewLink>
-          </TableLinkFlexItem>
+          </EuiFlexItem>
         </EuiFlexGroup>
       </EuiFlexItem>
       <EuiFlexItem>

diff --git a/x-pack/plugins/apm/public/components/app/service_overview/table_link_flex_item.tsx b/x-pack/plugins/apm/public/components/app/service_overview/table_link_flex_item.tsx
diff --git a/...red/Links/apm/TransactionOverviewLink.tsx → ...nks/apm/service_transactions_overview.tsx b/...red/Links/apm/TransactionOverviewLink.tsx → ...nks/apm/service_transactions_overview.tsx
@@ -18,15 +18,18 @@ const persistedFilters: Array<keyof APMQueryParams> = [
   'latencyAggregationType',
 ];
 
-export function useTransactionOverviewHref(serviceName: string) {
+export function useServiceOrTransactionsOverviewHref(serviceName: string) {
   return useAPMHref(`/services/${serviceName}/transactions`, persistedFilters);
 }
 
 interface Props extends APMLinkExtendProps {
   serviceName: string;
 }
 
-export function TransactionOverviewLink({ serviceName, ...rest }: Props) {
+export function ServiceOrTransactionsOverviewLink({
+  serviceName,
+  ...rest
+}: Props) {
   const { urlParams } = useUrlParams();
 
   return (

diff --git a/x-pack/plugins/apm/public/components/shared/Links/apm/transaction_overview_ink.tsx b/x-pack/plugins/apm/public/components/shared/Links/apm/transaction_overview_ink.tsx
@@ -0,0 +1,31 @@
+/*
+ * 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 from 'react';
+import { pickKeys } from '../../../../../common/utils/pick_keys';
+import { APMLink, APMLinkExtendProps } from './APMLink';
+import { useUrlParams } from '../../../../context/url_params_context/use_url_params';
+import { APMQueryParams } from '../url_helpers';
+
+interface Props extends APMLinkExtendProps {
+  serviceName: string;
+}
+
+const persistedFilters: Array<keyof APMQueryParams> = [
+  'latencyAggregationType',
+];
+
+export function TransactionOverviewLink({ serviceName, ...rest }: Props) {
+  const { urlParams } = useUrlParams();
+
+  return (
+    <APMLink
+      path={`/services/${serviceName}/transactions/`}
+      query={pickKeys(urlParams as APMQueryParams, ...persistedFilters)}
+      {...rest}
+    />
+  );
+}