[Synthetics] Fix missing locationId from nested links (#151772)

This commit is contained in:
Abdul Wahab Zahid 2023-02-22 19:59:57 +01:00 committed by GitHub
parent 7a03aeaed9
commit 5010239777
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 31 additions and 9 deletions

View file

@ -58,7 +58,7 @@ export const MonitorLocationSelect = ({
if (monitorLocations.length > 1 || showSelection) {
const button = (
<EuiLink onClick={openLocationList} disabled={isDisabled}>
{selectedLocation.label} <EuiIcon type="arrowDown" />
{selectedLocation.label} {!isDisabled ? <EuiIcon type="arrowDown" /> : null}
</EuiLink>
);

View file

@ -16,12 +16,14 @@ export const ErrorDetailsLink = ({
stateId,
configId,
label,
locationId,
}: {
configId: string;
stateId: string;
label: string;
locationId?: string;
}) => {
const link = useErrorDetailsLink({ configId, stateId });
const link = useErrorDetailsLink({ configId, stateId, locationId });
return <EuiLink href={link}>{label ?? VIEW_DETAILS}</EuiLink>;
};

View file

@ -16,6 +16,7 @@ import {
formatTestRunAt,
} from '../../../utils/monitor_test_result/test_time_formats';
import { useSyntheticsSettingsContext } from '../../../contexts';
import { useSelectedLocation } from '../../monitor_details/hooks/use_selected_location';
export const FailedTestsList = ({
failedTests,
@ -37,6 +38,8 @@ export const FailedTestsList = ({
const history = useHistory();
const selectedLocation = useSelectedLocation();
const format = useKibanaDateFormat();
const columns = [
@ -47,7 +50,7 @@ export const FailedTestsList = ({
render: (value: string, item: Ping) => {
return (
<EuiLink
href={`${basePath}/app/synthetics/monitor/${monitorId}/test-run/${item.monitor.check_group}`}
href={`${basePath}/app/synthetics/monitor/${monitorId}/test-run/${item.monitor.check_group}?locationId=${selectedLocation?.id}`}
>
{formatTestRunAt(value, format)}
</EuiLink>
@ -75,7 +78,9 @@ export const FailedTestsList = ({
return {
'data-test-subj': `row-${state.id}`,
onClick: (evt: MouseEvent) => {
history.push(`/monitor/${monitorId}/test-run/${item.monitor.check_group}`);
history.push(
`/monitor/${monitorId}/test-run/${item.monitor.check_group}?locationId=${selectedLocation?.id}`
);
},
};
}

View file

@ -6,6 +6,7 @@
*/
import React from 'react';
import { i18n } from '@kbn/i18n';
import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
import { StepDurationPanel } from '../monitor_details/monitor_summary/step_duration_panel';
import { useFormatTestRunAt } from '../../utils/monitor_test_result/test_time_formats';
@ -40,13 +41,13 @@ export function ErrorDetailsPage() {
return (
<div>
<PanelWithTitle title="Timeline">
<PanelWithTitle title={TIMELINE_LABEL}>
<ErrorTimeline />
</PanelWithTitle>
<EuiSpacer size="m" />
<EuiFlexGroup gutterSize="m">
<EuiFlexItem grow={2} style={{ minWidth: 0 }}>
<PanelWithTitle title="Failed tests">
<PanelWithTitle title={FAILED_TESTS_LABEL}>
<FailedTestsList failedTests={failedTests} loading={loading} />
</PanelWithTitle>
{isBrowser && (
@ -80,3 +81,11 @@ export function ErrorDetailsPage() {
</div>
);
}
const TIMELINE_LABEL = i18n.translate('xpack.synthetics.errors.timeline.title', {
defaultMessage: 'Timeline',
});
const FAILED_TESTS_LABEL = i18n.translate('xpack.synthetics.errors.failedTests', {
defaultMessage: 'Failed tests',
});

View file

@ -63,6 +63,7 @@ export const ErrorsList = ({
configId={monitorId}
stateId={item.state?.id!}
label={formatTestRunAt(item.state!.started_at, format)}
locationId={selectedLocation?.id}
/>
);
const isActive = isActiveState(item);
@ -131,7 +132,9 @@ export const ErrorsList = ({
activeDuration = diff;
}
}
return <EuiText>{formatTestDuration(Number(value) + activeDuration, true)}</EuiText>;
return (
<EuiText size="s">{formatTestDuration(Number(value) + activeDuration, true)}</EuiText>
);
},
},
];

View file

@ -35,14 +35,17 @@ export const StepNav = ({ stepIndex, totalSteps, handleStepHref }: Props) => {
setPopover(false);
};
const hasMoreThanOneStep = totalSteps > 1;
const button = (
<EuiButtonEmpty
size="s"
flush="left"
iconType="arrowDown"
iconType={hasMoreThanOneStep ? 'arrowDown' : undefined}
iconSide="right"
onClick={onButtonClick}
style={{ height: 20 }}
disabled={!hasMoreThanOneStep}
>
<FormattedMessage
id="xpack.synthetics.synthetics.stepDetail.totalSteps"
@ -56,7 +59,7 @@ export const StepNav = ({ stepIndex, totalSteps, handleStepHref }: Props) => {
);
const items = times(totalSteps).map((num) => (
<EuiContextMenuItem key={num} href={handleStepHref(num + 1)}>
<EuiContextMenuItem key={num} href={handleStepHref(num + 1)} onClick={closePopover}>
<FormattedMessage
id="xpack.synthetics.synthetics.stepDetail.stepNumber"
defaultMessage="Step {stepIndex}"