[8.6] [Synthetics] step details - test run details - fix breadcrumbs (#145953) (#145956)

# Backport

This will backport the following commits from `main` to `8.6`:
- [[Synthetics] step details - test run details - fix breadcrumbs
(#145953)](https://github.com/elastic/kibana/pull/145953)

<!--- Backport version: 8.9.7 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Dominique
Clarke","email":"dominique.clarke@elastic.co"},"sourceCommit":{"committedDate":"2022-11-22T07:14:03Z","message":"[Synthetics]
step details - test run details - fix breadcrumbs (#145953)\n\nResolves
https://github.com/elastic/kibana/issues/145952","sha":"d5a5870273b1ca05c1137d9bea6bea3918f2d4b5","branchLabelMapping":{"^v8.7.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["bug","Team:uptime","release_note:skip","v8.6.0","v8.7.0"],"number":145953,"url":"https://github.com/elastic/kibana/pull/145953","mergeCommit":{"message":"[Synthetics]
step details - test run details - fix breadcrumbs (#145953)\n\nResolves
https://github.com/elastic/kibana/issues/145952","sha":"d5a5870273b1ca05c1137d9bea6bea3918f2d4b5"}},"sourceBranch":"main","suggestedTargetBranches":["8.6"],"targetPullRequestStates":[{"branch":"8.6","label":"v8.6.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.7.0","labelRegex":"^v8.7.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/145953","number":145953,"mergeCommit":{"message":"[Synthetics]
step details - test run details - fix breadcrumbs (#145953)\n\nResolves
https://github.com/elastic/kibana/issues/145952","sha":"d5a5870273b1ca05c1137d9bea6bea3918f2d4b5"}}]}]
BACKPORT-->

Co-authored-by: Dominique Clarke <dominique.clarke@elastic.co>
This commit is contained in:
Kibana Machine 2022-11-22 06:05:37 -05:00 committed by GitHub
parent 17e2fecfa2
commit 25786e042f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 23 additions and 8 deletions

View file

@ -61,6 +61,7 @@ export const SyntheticsDataType = t.partial({
export const JourneyStepType = t.intersection([
t.partial({
config_id: t.string,
monitor: t.partial({
duration: t.type({
us: t.number,

View file

@ -11,18 +11,24 @@ import { EuiLink, EuiIcon } from '@elastic/eui';
import { InPortal } from 'react-reverse-portal';
import { MonitorDetailsLinkPortalNode } from './portals';
export const MonitorDetailsLinkPortal = ({ name, id }: { name: string; id: string }) => {
export const MonitorDetailsLinkPortal = ({
name,
configId,
}: {
name: string;
configId: string;
}) => {
return (
<InPortal node={MonitorDetailsLinkPortalNode}>
<MonitorDetailsLink name={name} id={id} />
<MonitorDetailsLink name={name} configId={configId} />
</InPortal>
);
};
export const MonitorDetailsLink = ({ name, id }: { name: string; id: string }) => {
export const MonitorDetailsLink = ({ name, configId }: { name: string; configId: string }) => {
const history = useHistory();
const href = history.createHref({
pathname: `monitor/${id}`,
pathname: `monitor/${configId}`,
});
return (
<EuiLink href={href}>

View file

@ -10,6 +10,7 @@ import { EuiLoadingSpinner } from '@elastic/eui';
import { useParams } from 'react-router-dom';
import { useDispatch } from 'react-redux';
import { useTrackPageview, useFetcher } from '@kbn/observability-plugin/public';
import { ConfigKey } from '../../../../../common/runtime_types';
import { getServiceLocations } from '../../state';
import { ServiceAllowedWrapper } from '../common/wrappers/service_allowed_wrapper';
import { MonitorSteps } from './steps';
@ -37,7 +38,10 @@ const MonitorEditPage: React.FC = () => {
return data && !loading && !error ? (
<MonitorForm defaultValues={data?.attributes}>
<MonitorSteps stepMap={EDIT_MONITOR_STEPS} isEditFlow={true} />
<MonitorDetailsLinkPortal id={data?.id} name={data?.attributes.name} />
<MonitorDetailsLinkPortal
configId={data?.attributes[ConfigKey.CONFIG_ID]}
name={data?.attributes.name}
/>
</MonitorForm>
) : (
<EuiLoadingSpinner />

View file

@ -53,9 +53,9 @@ export const StepDetailPage = () => {
return (
<>
{data?.details?.journey && (
{data?.details?.journey?.config_id && (
<MonitorDetailsLinkPortal
id={data.details.journey.monitor.id}
configId={data.details.journey.config_id}
name={data.details.journey.monitor.name!}
/>
)}

View file

@ -8,6 +8,7 @@ import { i18n } from '@kbn/i18n';
import { useKibana } from '@kbn/kibana-react-plugin/public';
import { useSelectedMonitor } from '../../monitor_details/hooks/use_selected_monitor';
import { useBreadcrumbs } from '../../../hooks/use_breadcrumbs';
import { ConfigKey } from '../../../../../../common/runtime_types';
import { MONITOR_ROUTE, MONITORS_ROUTE } from '../../../../../../common/constants';
import { PLUGIN } from '../../../../../../common/constants/plugin';
@ -26,7 +27,10 @@ export const useTestRunDetailsBreadcrumbs = (
},
{
text: monitor?.name ?? '',
href: `${appPath}${MONITOR_ROUTE.replace(':monitorId', monitor?.id ?? '')}`,
href: `${appPath}${MONITOR_ROUTE.replace(
':monitorId',
monitor?.[ConfigKey.CONFIG_ID] ?? ''
)}`,
},
...(extraCrumbs ?? []),
]);