github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 01:13:23 -04:00
Code Issues Projects Releases Packages Wiki Activity

[GenAi] Improve Integration assistant generation errors (#187204)

Browse source 
## Summary

Follow-up of
https://github.com/elastic/kibana/pull/186304#pullrequestreview-2132968362

Improved the error messages and `Retry` button added.

### Screenshots

Before


![before](b412449f-1f3b-4d98-b069-916f881c1cad)

After


![after](07847ad5-8d15-485f-82d0-3c9ac9ac7671)

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
Sergi Massaneda 2024-07-01 18:23:49 +02:00 • committed by GitHub
parent 581e88ba81
commit 71a47c0d5c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 70 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

91
x-pack/plugins/integration_assistant/public/components/create_integration/create_integration_assistant/steps/data_stream_step/generation_modal.tsx
View file

@ -6,6 +6,8 @@
*/
import {
EuiButtonEmpty,
EuiCallOut,
EuiFlexGroup,
EuiFlexItem,
EuiLoadingSpinner,
@ -20,7 +22,7 @@ import {
useEuiTheme,
} from '@elastic/eui';
import { isEmpty } from 'lodash/fp';
import React, { useEffect, useMemo, useState } from 'react';
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { css } from '@emotion/react';
import type {
CategorizationRequestBody,
@ -62,9 +64,11 @@ export const useGeneration = ({
const { http, notifications } = useKibana().services;
const [progress, setProgress] = useState<ProgressItem>();
const [error, setError] = useState<null | string>(null);
const [isRequesting, setIsRequesting] = useState<boolean>(true);
useEffect(() => {
if (
!isRequesting ||
http == null ||
connector == null ||
integrationSettings == null ||
@ -122,7 +126,9 @@ export const useGeneration = ({
onComplete(relatedGraphResult.results);
} catch (e) {
if (abortController.signal.aborted) return;
const errorMessage = e.body?.message ?? e.message;
const errorMessage = `${e.message}${
e.body ? ` (${e.body.statusCode}): ${e.body.message}` : ''
}`;
reportGenerationComplete({
connector,
@ -131,13 +137,16 @@ export const useGeneration = ({
error: errorMessage,
});
setError(`Error: ${errorMessage}`);
setError(errorMessage);
} finally {
setIsRequesting(false);
}
})();
return () => {
abortController.abort();
};
}, [
isRequesting,
onComplete,
setProgress,
connector,
@ -147,9 +156,15 @@ export const useGeneration = ({
notifications?.toasts,
]);
const retry = useCallback(() => {
setError(null);
setIsRequesting(true);
}, []);
return {
progress,
error,
retry,
};
};
@ -176,7 +191,7 @@ interface GenerationModalProps {
export const GenerationModal = React.memo<GenerationModalProps>(
({ integrationSettings, connector, onComplete, onClose }) => {
const { headerCss, bodyCss } = useModalCss();
const { progress, error } = useGeneration({
const { progress, error, retry } = useGeneration({
integrationSettings,
connector,
onComplete,
@ -196,41 +211,57 @@ export const GenerationModal = React.memo<GenerationModalProps>(
<EuiFlexGroup direction="column" gutterSize="l" justifyContent="center">
{progress && (
<>
<EuiFlexItem>
<EuiFlexGroup
direction="row"
gutterSize="s"
alignItems="center"
justifyContent="center"
>
{!error && (
<EuiFlexItem grow={false}>
<EuiLoadingSpinner size="s" />
</EuiFlexItem>
)}
<EuiFlexItem grow={false}>
<EuiText size="xs" color="subdued">
{progressText[progress]}
</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
<EuiFlexItem>
<EuiProgress value={progressValue} max={4} color="primary" size="m" />
</EuiFlexItem>
{error && (
{error ? (
<EuiFlexItem>
<EuiText color="danger" size="xs">
<EuiCallOut
title={i18n.GENERATION_ERROR(progressText[progress])}
color="danger"
iconType="alert"
>
{error}
</EuiText>
</EuiCallOut>
</EuiFlexItem>
) : (
<>
<EuiFlexItem>
<EuiFlexGroup
direction="row"
gutterSize="s"
alignItems="center"
justifyContent="center"
>
<EuiFlexItem grow={false}>
<EuiLoadingSpinner size="s" />
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiText size="xs" color="subdued">
{progressText[progress]}
</EuiText>
</EuiFlexItem>
</EuiFlexGroup>
</EuiFlexItem>
<EuiFlexItem />
<EuiFlexItem>
<EuiProgress value={progressValue} max={4} color="primary" size="m" />
</EuiFlexItem>
</>
)}
</>
)}
</EuiFlexGroup>
</EuiModalBody>
<EuiModalFooter>
<EuiSpacer size="xl" />
{error ? (
<EuiFlexGroup justifyContent="center">
<EuiFlexItem grow={false}>
<EuiButtonEmpty iconType="refresh" onClick={retry}>
{i18n.RETRY}
</EuiButtonEmpty>
</EuiFlexItem>
</EuiFlexGroup>
) : (
<EuiSpacer size="xl" />
)}
</EuiModalFooter>
</EuiModal>
);

9
x-pack/plugins/integration_assistant/public/components/create_integration/create_integration_assistant/steps/data_stream_step/translations.ts
View file

@ -166,3 +166,12 @@ export const PROGRESS_RELATED_GRAPH = i18n.translate(
defaultMessage: 'Generating related fields',
}
);
export const GENERATION_ERROR = (progressStep: string) =>
i18n.translate('xpack.integrationAssistant.step.dataStream.generationError', {
values: { progressStep },
defaultMessage: 'An error occurred during: {progressStep}',
});
export const RETRY = i18n.translate('xpack.integrationAssistant.step.dataStream.retryButtonLabel', {
defaultMessage: 'Retry',
});