Skip to content

[APM] Breadcrumbs not updating from service jump on service map #136144

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 16 commits into from
Jul 19, 2022
Merged

[APM] Breadcrumbs not updating from service jump on service map #136144

Show file tree
Hide file tree
Changes from 15 commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
d8e54b5
invalidating useEffect to update breadcrumbs
cauemarcondes Jul 11, 2022
ab33aa5
Merge branch 'main' into apm-breadcrumbs
cauemarcondes Jul 11, 2022
8360bb3
removing useEffect
cauemarcondes Jul 12, 2022
31a84c9
removing callback function
cauemarcondes Jul 12, 2022
cb0f461
Merge branch 'apm-breadcrumbs' of github.com:cauemarcondes/kibana int…
cauemarcondes Jul 12, 2022
b7dd1b3
adding callback
cauemarcondes Jul 12, 2022
43bc0b5
Merge branch 'main' into apm-breadcrumbs
cauemarcondes Jul 12, 2022
25f5958
adding usEffect
cauemarcondes Jul 13, 2022
2fc4078
fixing
cauemarcondes Jul 14, 2022
b675e83
Merge branch 'main' into apm-breadcrumbs
cauemarcondes Jul 14, 2022
711ea6a
Merge branch 'main' into apm-breadcrumbs
cauemarcondes Jul 18, 2022
411c81b
adding fnDeps param
cauemarcondes Jul 18, 2022
8656b29
Merge branch 'apm-breadcrumbs' of github.com:cauemarcondes/kibana int…
cauemarcondes Jul 18, 2022
ed98bf2
addressing pr comments
cauemarcondes Jul 18, 2022
1fbf12d
Merge branch 'main' of github.com:elastic/kibana into apm-breadcrumbs
cauemarcondes Jul 18, 2022
da85a74
addressing pr comments
cauemarcondes Jul 19, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion x-pack/plugins/apm/public/components/app/breadcrumb/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,10 @@ export const Breadcrumb = ({
children: React.ReactElement;
}) => {
const { core } = useApmPluginContext();
useBreadcrumb({ title, href: core.http.basePath.prepend('/app/apm' + href) });
useBreadcrumb(
{ title, href: core.http.basePath.prepend('/app/apm' + href) },
[]
);

return children;
};
43 changes: 23 additions & 20 deletions x-pack/plugins/apm/public/components/app/dependency_detail_overview/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,26 +30,29 @@ export function DependencyDetailOverview() {

const apmRouter = useApmRouter();

useBreadcrumb([
{
title: i18n.translate(
'xpack.apm.dependencyDetailOverview.breadcrumbTitle',
{ defaultMessage: 'Overview' }
),
href: apmRouter.link('/dependencies/overview', {
query: {
dependencyName,
rangeFrom,
rangeTo,
refreshInterval,
refreshPaused,
environment,
kuery,
comparisonEnabled,
},
}),
},
]);
useBreadcrumb(
[
{
title: i18n.translate(
'xpack.apm.dependencyDetailOverview.breadcrumbTitle',
{ defaultMessage: 'Overview' }
),
href: apmRouter.link('/dependencies/overview', {
query: {
dependencyName,
rangeFrom,
rangeTo,
refreshInterval,
refreshPaused,
environment,
kuery,
comparisonEnabled,
},
}),
},
],
[]
Copy link
Member

@dgieselaar dgieselaar Jul 19, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This isn't correct - apmRouter and all the query parameters should be defined as dependencies. If you add useBreadcrumb to .eslintrc.js as suggested earlier you should see errors here too.

Copy link
Contributor Author

@cauemarcondes cauemarcondes Jul 19, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

My bad, forgot to update the file you mentioned. Done it here: da85a74

);

return (
<>
Expand Down
65 changes: 34 additions & 31 deletions x-pack/plugins/apm/public/components/app/dependency_detail_view/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,36 +31,39 @@ export function DependencyDetailView({

const apmRouter = useApmRouter();

useBreadcrumb([
{
title: DependenciesInventoryTitle,
href: apmRouter.link('/dependencies/inventory', {
query: {
rangeFrom,
rangeTo,
refreshInterval,
refreshPaused,
environment,
kuery,
comparisonEnabled,
},
}),
},
{
title: dependencyName,
href: apmRouter.link('/dependencies', {
query: {
dependencyName,
rangeFrom,
rangeTo,
refreshInterval,
refreshPaused,
environment,
kuery,
comparisonEnabled,
},
}),
},
]);
useBreadcrumb(
[
{
title: DependenciesInventoryTitle,
href: apmRouter.link('/dependencies/inventory', {
query: {
rangeFrom,
rangeTo,
refreshInterval,
refreshPaused,
environment,
kuery,
comparisonEnabled,
},
}),
},
{
title: dependencyName,
href: apmRouter.link('/dependencies', {
query: {
dependencyName,
rangeFrom,
rangeTo,
refreshInterval,
refreshPaused,
environment,
kuery,
comparisonEnabled,
},
}),
},
],
[]
);
return <DependencyDetailTemplate>{children}</DependencyDetailTemplate>;
}
37 changes: 20 additions & 17 deletions x-pack/plugins/apm/public/components/app/error_group_details/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,23 +127,26 @@ export function ErrorGroupDetails() {

const { start, end } = useTimeRange({ rangeFrom, rangeTo });

useBreadcrumb({
title: groupId,
href: apmRouter.link('/services/{serviceName}/errors/{groupId}', {
path: {
serviceName,
groupId,
},
query: {
rangeFrom,
rangeTo,
environment,
kuery,
serviceGroup,
comparisonEnabled,
},
}),
});
useBreadcrumb(
{
title: groupId,
href: apmRouter.link('/services/{serviceName}/errors/{groupId}', {
path: {
serviceName,
groupId,
},
query: {
rangeFrom,
rangeTo,
environment,
kuery,
serviceGroup,
comparisonEnabled,
},
}),
},
[]
);

const { data: errorGroupData } = useFetcher(
(callApmApi) => {
Expand Down
29 changes: 16 additions & 13 deletions x-pack/plugins/apm/public/components/app/service_node_metrics/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,19 +60,22 @@ export function ServiceNodeMetrics() {

const { start, end } = useTimeRange({ rangeFrom, rangeTo });

useBreadcrumb({
title: getServiceNodeName(serviceNodeName),
href: apmRouter.link(
'/services/{serviceName}/nodes/{serviceNodeName}/metrics',
{
path: {
serviceName,
serviceNodeName,
},
query,
}
),
});
useBreadcrumb(
{
title: getServiceNodeName(serviceNodeName),
href: apmRouter.link(
'/services/{serviceName}/nodes/{serviceNodeName}/metrics',
{
path: {
serviceName,
serviceNodeName,
},
query,
}
),
},
[]
);

const { data } = useServiceMetricChartsFetcher({
serviceNodeName,
Expand Down
17 changes: 10 additions & 7 deletions x-pack/plugins/apm/public/components/app/transaction_details/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,13 +44,16 @@ export function TransactionDetails() {
replace(history, { query: { transactionType } });
}

useBreadcrumb({
title: transactionName,
href: apmRouter.link('/services/{serviceName}/transactions/view', {
path,
query,
}),
});
useBreadcrumb(
{
title: transactionName,
href: apmRouter.link('/services/{serviceName}/transactions/view', {
path,
query,
}),
},
[]
);

const isServerless = isServerlessAgent(runtimeName);

Expand Down
29 changes: 16 additions & 13 deletions x-pack/plugins/apm/public/components/routing/service_detail/apm_service_wrapper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,19 +19,22 @@ export function ApmServiceWrapper() {

const router = useApmRouter();

useBreadcrumb([
{
title: ServiceInventoryTitle,
href: router.link('/services', { query }),
},
{
title: serviceName,
href: router.link('/services/{serviceName}', {
query,
path: { serviceName },
}),
},
]);
useBreadcrumb(
[
{
title: ServiceInventoryTitle,
href: router.link('/services', { query }),
},
{
title: serviceName,
href: router.link('/services/{serviceName}', {
query,
path: { serviceName },
}),
},
],
[]
);

return <Outlet />;
}
17 changes: 10 additions & 7 deletions x-pack/plugins/apm/public/components/routing/templates/apm_service_template/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,13 +86,16 @@ function TemplateWithContext({

const tabs = useTabs({ selectedTab });

useBreadcrumb({
title,
href: router.link(`/services/{serviceName}/${selectedTab}` as const, {
path: { serviceName },
query,
}),
});
useBreadcrumb(
{
title,
href: router.link(`/services/{serviceName}/${selectedTab}` as const, {
path: { serviceName },
query,
}),
},
[]
);

return (
<ApmMainTemplate
Expand Down
51 changes: 27 additions & 24 deletions x-pack/plugins/apm/public/components/routing/templates/service_group_template.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,30 +116,33 @@ export function ServiceGroupTemplate({

const tabs = useTabs(serviceGroupContextTab);
const selectedTab = tabs?.find(({ isSelected }) => isSelected);
useBreadcrumb([
{
title: i18n.translate('xpack.apm.serviceGroups.breadcrumb.title', {
defaultMessage: 'Services',
}),
href: serviceGroupsLink,
},
...(selectedTab
? [
...(serviceGroupName
? [
{
title: serviceGroupName,
href: router.link('/services', { query }),
},
]
: []),
{
title: selectedTab.label,
href: selectedTab.href,
} as { title: string; href: string },
]
: []),
]);
useBreadcrumb(
[
{
title: i18n.translate('xpack.apm.serviceGroups.breadcrumb.title', {
defaultMessage: 'Services',
}),
href: serviceGroupsLink,
},
...(selectedTab
? [
...(serviceGroupName
? [
{
title: serviceGroupName,
href: router.link('/services', { query }),
},
]
: []),
{
title: selectedTab.label,
href: selectedTab.href,
} as { title: string; href: string },
]
: []),
],
[]
);
return (
<ApmMainTemplate
pageTitle={isServiceGroupsEnabled ? serviceGroupsPageTitle : pageTitle}
Expand Down
7 changes: 5 additions & 2 deletions x-pack/plugins/apm/public/context/breadcrumbs/use_breadcrumb.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,10 @@ import { useContext, useEffect, useRef } from 'react';
import { castArray } from 'lodash';
import { Breadcrumb, BreadcrumbsContext } from './context';

export function useBreadcrumb(breadcrumb: Breadcrumb | Breadcrumb[]) {
export function useBreadcrumb(
breadcrumb: Breadcrumb | Breadcrumb[],
fnDeps: any[]
) {
const api = useContext(BreadcrumbsContext);

if (!api) {
Expand Down Expand Up @@ -38,5 +41,5 @@ export function useBreadcrumb(breadcrumb: Breadcrumb | Breadcrumb[]) {
}
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
}, [match, ...fnDeps]);
}
Loading