maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

[APM] Add and link to service dependencies page (#107522)

Browse source 
* [APM] Add and link to service dependencies page

* Update labels
This commit is contained in:
Dario Gieselaar 2021-08-03 18:57:13 +02:00 committed by GitHub
parent 8df883ad49
commit 1e1d669650
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 104 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
x-pack/plugins/apm/public/components/app/backend_detail_overview/backend_detail_dependencies_table.tsx
View file

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

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

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

11
x-pack/plugins/apm/public/components/app/service_dependencies/index.tsx Normal file
View file

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

23
x-pack/plugins/apm/public/components/app/service_overview/service_overview_dependencies_table/index.tsx
View file

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

12
x-pack/plugins/apm/public/components/routing/service_detail/index.tsx
View file

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

11
x-pack/plugins/apm/public/components/routing/templates/apm_service_template/index.tsx
View file

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

19
x-pack/plugins/apm/public/components/shared/dependencies_table/dependencies_table_service_map_link.tsx Normal file
View file

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

20
x-pack/plugins/apm/public/components/shared/dependencies_table/index.tsx
View file

@ -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>