[APM] Add and link to service dependencies page

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} />}
  />
  );
 }

x-pack/plugins/apm/public/components/app/backend_inventory/backend_inventory_dependencies_table/index.tsx

@@ -7,13 +7,15 @@
 
 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';
 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} />}
  />
  );
 }

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 <></>;
+}

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) {
@@ -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 all dependencies' }
+ )}
+ </EuiLink>
+ }
  />
  );
 }

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',

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', {

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>
+ );
+}

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>