Skip to content
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

[ML] Single Metric Viewer embeddable: fixes job refetch on error #199726

Merged
merged 9 commits into from
Nov 19, 2024
Merged

[ML] Single Metric Viewer embeddable: fixes job refetch on error #199726

Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
68ec9c4
ensure job is not refetched on error
alvarezmelissa87 Nov 12, 2024
b984d88
wip: reset error tracker when new job id
alvarezmelissa87 Nov 14, 2024
2539fc3
clear error once jobId changes so refetch happens
alvarezmelissa87 Nov 14, 2024
465e8f1
add note for type error
alvarezmelissa87 Nov 14, 2024
4ea5eb7
update type for onError
alvarezmelissa87 Nov 14, 2024
4478072
Merge branch 'main' into ml-fix-smv-embeddable-missing-job
elasticmachine Nov 14, 2024
045618b
Merge branch 'main' into ml-fix-smv-embeddable-missing-job
elasticmachine Nov 18, 2024
5f0642e
Merge branch 'main' into ml-fix-smv-embeddable-missing-job
elasticmachine Nov 18, 2024
1f0f082
remove need for useRef and use useSTate for error handling
alvarezmelissa87 Nov 18, 2024
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
36 changes: 31 additions & 5 deletions x-pack/plugins/ml/public/shared_components/single_metric_viewer/single_metric_viewer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import type { MlJob, MlJobStats } from '@elastic/elasticsearch/lib/api/types';
import { DatePickerContextProvider, type DatePickerDependencies } from '@kbn/ml-date-picker';
import type { TimeRangeBounds } from '@kbn/ml-time-buckets';
import usePrevious from 'react-use/lib/usePrevious';
import { extractErrorProperties } from '@kbn/ml-error-utils';
import { tz } from 'moment';
import { pick, throttle } from 'lodash';
import type { MlDependencies } from '../../application/app';
Expand All @@ -43,10 +44,17 @@ interface AppStateZoom {
to?: string;
}

const errorMessage = i18n.translate('xpack.ml.singleMetricViewerEmbeddable.errorMessage"', {
const basicErrorMessage = i18n.translate('xpack.ml.singleMetricViewerEmbeddable.errorMessage"', {
defaultMessage: 'Unable to load the ML single metric viewer data',
});

const jobNotFoundErrorMessage = i18n.translate(
'xpack.ml.singleMetricViewerEmbeddable.jobNotFoundErrorMessage"',
{
defaultMessage: 'No known job with the selected id',
}
);

export type SingleMetricViewerSharedComponent = FC<SingleMetricViewerProps>;

/**
Expand All @@ -72,7 +80,7 @@ export interface SingleMetricViewerProps {
*/
lastRefresh?: number;
onRenderComplete?: () => void;
onError?: (error: Error) => void;
onError?: (error?: Error) => void;
onForecastIdChange?: (forecastId: string | undefined) => void;
uuid: string;
}
Expand Down Expand Up @@ -112,6 +120,7 @@ const SingleMetricViewerWrapper: FC<SingleMetricViewerPropsWithDeps> = ({
const [selectedJobWrapper, setSelectedJobWrapper] = useState<
{ job: MlJob; stats: MlJobStats } | undefined
>();
const [errorEncountered, setErrorEncountered] = useState<number | undefined>();

const isMounted = useMountedState();
const { mlApi, mlTimeSeriesExplorerService, toastNotificationService } = mlServices;
Expand All @@ -125,6 +134,16 @@ const SingleMetricViewerWrapper: FC<SingleMetricViewerPropsWithDeps> = ({

const previousRefresh = usePrevious(lastRefresh ?? 0);

useEffect(
function resetErrorOnJobChange() {
// Calling onError to clear any previous error
setErrorEncountered(undefined);
onError?.();
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[selectedJobId]
);

useEffect(
function setUpSelectedJob() {
async function fetchSelectedJob() {
Expand All @@ -136,19 +155,26 @@ const SingleMetricViewerWrapper: FC<SingleMetricViewerPropsWithDeps> = ({
]);
setSelectedJobWrapper({ job: jobs[0], stats: jobStats[0] });
} catch (e) {
const error = extractErrorProperties(e);
// Could get 404 because job has been deleted and also avoid infinite refetches on any error
setErrorEncountered(error.statusCode);
if (onError) {
onError(new Error(errorMessage));
onError(
new Error(errorEncountered === 404 ? jobNotFoundErrorMessage : basicErrorMessage)
);
}
}
}
}
if (isMounted() === false) {
if (isMounted() === false || errorEncountered !== undefined) {
return;
}
fetchSelectedJob();
},
[selectedJobId, mlApi, isMounted, onError]
// eslint-disable-next-line react-hooks/exhaustive-deps
[selectedJobId, isMounted, errorEncountered]
);

// eslint-disable-next-line react-hooks/exhaustive-deps
const resizeHandler = useCallback(
throttle((e: { width: number; height: number }) => {
Expand Down