From 1e1d6696501b83d253c373d2a36f9a552a57e491 Mon Sep 17 00:00:00 2001
From: Dario Gieselaar <dario.gieselaar@elastic.co>
Date: Tue, 3 Aug 2021 18:57:13 +0200
Subject: [PATCH] [APM] Add and link to service dependencies page (#107522)

* [APM] Add and link to service dependencies page

* Update labels
---
 .../backend_detail_dependencies_table.tsx     | 13 +++++++++++
 .../index.tsx                                 | 12 ++++++++++
 .../app/service_dependencies/index.tsx        | 11 +++++++++
 .../index.tsx                                 | 23 +++++++++++++++++--
 .../routing/service_detail/index.tsx          | 12 ++++++++++
 .../templates/apm_service_template/index.tsx  | 11 +++++++++
 .../dependencies_table_service_map_link.tsx   | 19 +++++++++++++++
 .../shared/dependencies_table/index.tsx       | 20 ++++------------
 8 files changed, 104 insertions(+), 17 deletions(-)
 create mode 100644 x-pack/plugins/apm/public/components/app/service_dependencies/index.tsx
 create mode 100644 x-pack/plugins/apm/public/components/shared/dependencies_table/dependencies_table_service_map_link.tsx

diff --git a/x-pack/plugins/apm/public/components/app/backend_detail_overview/backend_detail_dependencies_table.tsx b/x-pack/plugins/apm/public/components/app/backend_detail_overview/backend_detail_dependencies_table.tsx
index 1b696b847f75..425506a3e035 100644
--- a/x-pack/plugins/apm/public/components/app/backend_detail_overview/backend_detail_dependencies_table.tsx
+++ b/x-pack/plugins/apm/public/components/app/backend_detail_overview/backend_detail_dependencies_table.tsx
@@ -15,6 +15,8 @@ import { getTimeRangeComparison } from '../../shared/time_comparison/get_time_ra
 import { DependenciesTable } from '../../shared/dependencies_table';
 import { useApmBackendContext } from '../../../context/apm_backend/use_apm_backend_context';
 import { ServiceLink } from '../../shared/service_link';
+import { useApmRouter } from '../../../hooks/use_apm_router';
+import { DependenciesTableServiceMapLink } from '../../shared/dependencies_table/dependencies_table_service_map_link';
 
 export function BackendDetailDependenciesTable() {
   const {
@@ -25,6 +27,16 @@ export function BackendDetailDependenciesTable() {
     query: { rangeFrom, rangeTo, kuery },
   } = useApmParams('/backends/:backendName/overview');
 
+  const router = useApmRouter();
+
+  const serviceMapLink = router.link('/service-map', {
+    query: {
+      rangeFrom,
+      rangeTo,
+      environment,
+    },
+  });
+
   const { offset } = getTimeRangeComparison({
     start,
     end,
@@ -99,6 +111,7 @@ export function BackendDetailDependenciesTable() {
       )}
       status={status}
       compact={false}
+      link={<DependenciesTableServiceMapLink href={serviceMapLink} />}
     />
   );
 }
diff --git a/x-pack/plugins/apm/public/components/app/backend_inventory/backend_inventory_dependencies_table/index.tsx b/x-pack/plugins/apm/public/components/app/backend_inventory/backend_inventory_dependencies_table/index.tsx
index 513daa9289c8..e4b3d48992ef 100644
--- a/x-pack/plugins/apm/public/components/app/backend_inventory/backend_inventory_dependencies_table/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/backend_inventory/backend_inventory_dependencies_table/index.tsx
@@ -7,6 +7,7 @@
 
 import { i18n } from '@kbn/i18n';
 import React from 'react';
+import { useApmRouter } from '../../../../hooks/use_apm_router';
 import { getNodeName, NodeType } from '../../../../../common/connections';
 import { useApmParams } from '../../../../hooks/use_apm_params';
 import { useUrlParams } from '../../../../context/url_params_context/use_url_params';
@@ -14,6 +15,7 @@ import { useFetcher } from '../../../../hooks/use_fetcher';
 import { getTimeRangeComparison } from '../../../shared/time_comparison/get_time_range_comparison';
 import { DependenciesTable } from '../../../shared/dependencies_table';
 import { BackendLink } from '../../../shared/backend_link';
+import { DependenciesTableServiceMapLink } from '../../../shared/dependencies_table/dependencies_table_service_map_link';
 
 export function BackendInventoryDependenciesTable() {
   const {
@@ -24,6 +26,15 @@ export function BackendInventoryDependenciesTable() {
     query: { rangeFrom, rangeTo, kuery },
   } = useApmParams('/backends');
 
+  const router = useApmRouter();
+  const serviceMapLink = router.link('/service-map', {
+    query: {
+      rangeFrom,
+      rangeTo,
+      environment,
+    },
+  });
+
   const { offset } = getTimeRangeComparison({
     start,
     end,
@@ -96,6 +107,7 @@ export function BackendInventoryDependenciesTable() {
       )}
       status={status}
       compact={false}
+      link={<DependenciesTableServiceMapLink href={serviceMapLink} />}
     />
   );
 }
diff --git a/x-pack/plugins/apm/public/components/app/service_dependencies/index.tsx b/x-pack/plugins/apm/public/components/app/service_dependencies/index.tsx
new file mode 100644
index 000000000000..b89586b42fd6
--- /dev/null
+++ b/x-pack/plugins/apm/public/components/app/service_dependencies/index.tsx
@@ -0,0 +1,11 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import React from 'react';
+
+export function ServiceDependencies() {
+  return <></>;
+}
diff --git a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_dependencies_table/index.tsx b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_dependencies_table/index.tsx
index c3d74ec4baea..08d554b9a54e 100644
--- a/x-pack/plugins/apm/public/components/app/service_overview/service_overview_dependencies_table/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/service_overview/service_overview_dependencies_table/index.tsx
@@ -5,8 +5,10 @@
  * 2.0.
  */
 
+import { EuiLink } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
+import { useApmRouter } from '../../../../hooks/use_apm_router';
 import { getNodeName, NodeType } from '../../../../../common/connections';
 import { useApmServiceContext } from '../../../../context/apm_service/use_apm_service_context';
 import { useUrlParams } from '../../../../context/url_params_context/use_url_params';
@@ -30,6 +32,7 @@ export function ServiceOverviewDependenciesTable() {
   } = useUrlParams();
 
   const {
+    query,
     query: { kuery, rangeFrom, rangeTo },
   } = useApmParams('/services/:serviceName/overview');
 
@@ -42,6 +45,15 @@ export function ServiceOverviewDependenciesTable() {
 
   const { serviceName, transactionType } = useApmServiceContext();
 
+  const router = useApmRouter();
+
+  const dependenciesLink = router.link('/services/:serviceName/dependencies', {
+    path: {
+      serviceName,
+    },
+    query,
+  });
+
   const { data, status } = useFetcher(
     (callApmApi) => {
       if (!start || !end) {
@@ -109,7 +121,7 @@ export function ServiceOverviewDependenciesTable() {
       title={i18n.translate(
         'xpack.apm.serviceOverview.dependenciesTableTitle',
         {
-          defaultMessage: 'Dependencies',
+          defaultMessage: 'Downstream services and backends',
         }
       )}
       nameColumnTitle={i18n.translate(
@@ -118,8 +130,15 @@ export function ServiceOverviewDependenciesTable() {
           defaultMessage: 'Backend',
         }
       )}
-      serviceName={serviceName}
       status={status}
+      link={
+        <EuiLink href={dependenciesLink}>
+          {i18n.translate(
+            'xpack.apm.serviceOverview.dependenciesTableTabLink',
+            { defaultMessage: 'View dependencies' }
+          )}
+        </EuiLink>
+      }
     />
   );
 }
diff --git a/x-pack/plugins/apm/public/components/routing/service_detail/index.tsx b/x-pack/plugins/apm/public/components/routing/service_detail/index.tsx
index 19db296c428c..f3764df5ade5 100644
--- a/x-pack/plugins/apm/public/components/routing/service_detail/index.tsx
+++ b/x-pack/plugins/apm/public/components/routing/service_detail/index.tsx
@@ -21,6 +21,7 @@ import { ServiceNodeMetrics } from '../../app/service_node_metrics';
 import { ServiceMap } from '../../app/service_map';
 import { TransactionDetails } from '../../app/transaction_details';
 import { ServiceProfiling } from '../../app/service_profiling';
+import { ServiceDependencies } from '../../app/service_dependencies';
 
 function page<TPath extends string>({
   path,
@@ -125,6 +126,17 @@ export const serviceDetail = {
         },
       ],
     },
+    page({
+      path: '/dependencies',
+      element: <ServiceDependencies />,
+      tab: 'dependencies',
+      title: i18n.translate('xpack.apm.views.dependencies.title', {
+        defaultMessage: 'Dependencies',
+      }),
+      searchBarOptions: {
+        showTimeComparison: true,
+      },
+    }),
     {
       ...page({
         path: '/errors',
diff --git a/x-pack/plugins/apm/public/components/routing/templates/apm_service_template/index.tsx b/x-pack/plugins/apm/public/components/routing/templates/apm_service_template/index.tsx
index ee5ed91dfb46..c5171a012dc6 100644
--- a/x-pack/plugins/apm/public/components/routing/templates/apm_service_template/index.tsx
+++ b/x-pack/plugins/apm/public/components/routing/templates/apm_service_template/index.tsx
@@ -37,6 +37,7 @@ type Tab = NonNullable<EuiPageHeaderProps['tabs']>[0] & {
   key:
     | 'overview'
     | 'transactions'
+    | 'dependencies'
     | 'errors'
     | 'metrics'
     | 'nodes'
@@ -163,6 +164,16 @@ function useTabs({ selectedTab }: { selectedTab: Tab['key'] }) {
         defaultMessage: 'Transactions',
       }),
     },
+    {
+      key: 'dependencies',
+      href: router.link('/services/:serviceName/dependencies', {
+        path: { serviceName },
+        query,
+      }),
+      label: i18n.translate('xpack.apm.serviceDetails.dependenciesTabLabel', {
+        defaultMessage: 'Dependencies',
+      }),
+    },
     {
       key: 'errors',
       href: router.link('/services/:serviceName/errors', {
diff --git a/x-pack/plugins/apm/public/components/shared/dependencies_table/dependencies_table_service_map_link.tsx b/x-pack/plugins/apm/public/components/shared/dependencies_table/dependencies_table_service_map_link.tsx
new file mode 100644
index 000000000000..408655161143
--- /dev/null
+++ b/x-pack/plugins/apm/public/components/shared/dependencies_table/dependencies_table_service_map_link.tsx
@@ -0,0 +1,19 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import React from 'react';
+import { i18n } from '@kbn/i18n';
+import { EuiLink } from '@elastic/eui';
+
+export function DependenciesTableServiceMapLink({ href }: { href: string }) {
+  return (
+    <EuiLink href={href}>
+      {i18n.translate('xpack.apm.dependenciesTable.serviceMapLinkText', {
+        defaultMessage: 'View service map',
+      })}
+    </EuiLink>
+  );
+}
diff --git a/x-pack/plugins/apm/public/components/shared/dependencies_table/index.tsx b/x-pack/plugins/apm/public/components/shared/dependencies_table/index.tsx
index 5aeb9549fb3a..a599a3bd0aa6 100644
--- a/x-pack/plugins/apm/public/components/shared/dependencies_table/index.tsx
+++ b/x-pack/plugins/apm/public/components/shared/dependencies_table/index.tsx
@@ -24,7 +24,6 @@ import { FETCH_STATUS } from '../../../hooks/use_fetcher';
 import { unit } from '../../../utils/style';
 import { SparkPlot } from '../charts/spark_plot';
 import { ImpactBar } from '../ImpactBar';
-import { ServiceMapLink } from '../Links/apm/ServiceMapLink';
 import { TableFetchWrapper } from '../table_fetch_wrapper';
 import { TruncateWithTooltip } from '../truncate_with_tooltip';
 import { OverviewTableContainer } from '../overview_table_container';
@@ -39,7 +38,7 @@ export type DependenciesItem = Omit<
 
 interface Props {
   dependencies: DependenciesItem[];
-  serviceName?: string;
+  link: React.ReactNode;
   title: React.ReactNode;
   nameColumnTitle: React.ReactNode;
   status: FETCH_STATUS;
@@ -49,7 +48,7 @@ interface Props {
 export function DependenciesTable(props: Props) {
   const {
     dependencies,
-    serviceName,
+    link,
     title,
     nameColumnTitle,
     status,
@@ -69,8 +68,8 @@ export function DependenciesTable(props: Props) {
       field: 'name',
       name: nameColumnTitle,
       render: (_, item) => {
-        const { name, link } = item;
-        return <TruncateWithTooltip text={name} content={link} />;
+        const { name, link: itemLink } = item;
+        return <TruncateWithTooltip text={name} content={itemLink} />;
       },
       sortable: true,
     },
@@ -177,16 +176,7 @@ export function DependenciesTable(props: Props) {
               <h2>{title}</h2>
             </EuiTitle>
           </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <ServiceMapLink serviceName={serviceName}>
-              {i18n.translate(
-                'xpack.apm.dependenciesTable.serviceMapLinkText',
-                {
-                  defaultMessage: 'View service map',
-                }
-              )}
-            </ServiceMapLink>
-          </EuiFlexItem>
+          <EuiFlexItem grow={false}>{link}</EuiFlexItem>
         </EuiFlexGroup>
       </EuiFlexItem>
       <EuiFlexItem>