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={}
/>
);
}
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={}
/>
);
}
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={
+
+ {i18n.translate(
+ 'xpack.apm.serviceOverview.dependenciesTableTabLink',
+ { defaultMessage: 'View dependencies' }
+ )}
+
+ }
/>
);
}
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({
path,
@@ -125,6 +126,17 @@ export const serviceDetail = {
},
],
},
+ page({
+ path: '/dependencies',
+ element: ,
+ 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[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 (
+
+ {i18n.translate('xpack.apm.dependenciesTable.serviceMapLinkText', {
+ defaultMessage: 'View service map',
+ })}
+
+ );
+}
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 ;
+ const { name, link: itemLink } = item;
+ return ;
},
sortable: true,
},
@@ -177,16 +176,7 @@ export function DependenciesTable(props: Props) {
{title}
-
-
- {i18n.translate(
- 'xpack.apm.dependenciesTable.serviceMapLinkText',
- {
- defaultMessage: 'View service map',
- }
- )}
-
-
+ {link}