[APM] Add and link to service dependencies page (#107522)
* [APM] Add and link to service dependencies page * Update labels
This commit is contained in:
parent
8df883ad49
commit
1e1d669650
8 changed files with 104 additions and 17 deletions
|
@ -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} />}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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} />}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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 <></>;
|
||||
}
|
|
@ -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>
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -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', {
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue