github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 09:48:58 -04:00
Code Issues Projects Releases Packages Wiki Activity

[8.x] [Lens][Expressions] Fixes react Error When Rendering Recoverable Error (#196285) (#196714)

Browse source 
# Backport

This will backport the following commits from `main` to `8.x`:
- [[Lens][Expressions] Fixes react Error When Rendering Recoverable
Error (#196285)](https://github.com/elastic/kibana/pull/196285)

<!--- Backport version: 9.4.3 -->

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

<!--BACKPORT [{"author":{"name":"Marta
Bondyra","email":"4283304+mbondyra@users.noreply.github.com"},"sourceCommit":{"committedDate":"2024-10-17T14:22:01Z","message":"[Lens][Expressions]
Fixes react Error When Rendering Recoverable Error (#196285)\n\n##
Summary\r\n\r\n1. Fixes
https://github.com/elastic/kibana/issues/159146\r\n2. Makes sure that
the `data-render-error` disappears once the\r\nexpression renderer is
recovered (ie. when user fixes the query) -\r\nbefore once the error
appears, it stays there forever.\r\n\r\n\r\n<img width=\"651\"
alt=\"Screenshot 2024-10-15 at 13 11
14\"\r\nsrc=\"https://github.com/user-attachments/assets/9fc3639a-723f-4ab2-9508-85caa4052ab9\">","sha":"8cfa396f463b10006f247f91c10c591ac19f6dc2","branchLabelMapping":{"^v9.0.0$":"main","^v8.17.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","Team:Visualizations","Feature:Lens","v9.0.0","backport:prev-minor","v8.17.0"],"title":"[Lens][Expressions]
Fixes react Error When Rendering Recoverable
Error","number":196285,"url":"https://github.com/elastic/kibana/pull/196285","mergeCommit":{"message":"[Lens][Expressions]
Fixes react Error When Rendering Recoverable Error (#196285)\n\n##
Summary\r\n\r\n1. Fixes
https://github.com/elastic/kibana/issues/159146\r\n2. Makes sure that
the `data-render-error` disappears once the\r\nexpression renderer is
recovered (ie. when user fixes the query) -\r\nbefore once the error
appears, it stays there forever.\r\n\r\n\r\n<img width=\"651\"
alt=\"Screenshot 2024-10-15 at 13 11
14\"\r\nsrc=\"https://github.com/user-attachments/assets/9fc3639a-723f-4ab2-9508-85caa4052ab9\">","sha":"8cfa396f463b10006f247f91c10c591ac19f6dc2"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/196285","number":196285,"mergeCommit":{"message":"[Lens][Expressions]
Fixes react Error When Rendering Recoverable Error (#196285)\n\n##
Summary\r\n\r\n1. Fixes
https://github.com/elastic/kibana/issues/159146\r\n2. Makes sure that
the `data-render-error` disappears once the\r\nexpression renderer is
recovered (ie. when user fixes the query) -\r\nbefore once the error
appears, it stays there forever.\r\n\r\n\r\n<img width=\"651\"
alt=\"Screenshot 2024-10-15 at 13 11
14\"\r\nsrc=\"https://github.com/user-attachments/assets/9fc3639a-723f-4ab2-9508-85caa4052ab9\">","sha":"8cfa396f463b10006f247f91c10c591ac19f6dc2"}},{"branch":"8.x","label":"v8.17.0","branchLabelMappingKey":"^v8.17.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Marta Bondyra <4283304+mbondyra@users.noreply.github.com>
This commit is contained in:
Kibana Machine 2024-10-18 03:10:15 +11:00 • committed by GitHub
parent 98e9072ded
commit f5c14d442e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 27 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

13
x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_errors.tsx
View file

@ -20,24 +20,27 @@ import { getLongMessage } from '../../../user_messages_utils';
interface Props {
errors: Array<string | UserMessage>;
title: string;
onRender?: () => void;
}
export function WorkspaceErrors(props: Props) {
export function WorkspaceErrors({ errors, title, onRender }: Props) {
const [activePage, setActivePage] = useState(0);
const activeError = props.errors.length ? props.errors[activePage] : '';
const activeError = errors.length ? errors[activePage] : '';
React.useEffect(() => onRender?.(), [onRender]);
return (
<EuiEmptyPrompt
actions={
props.errors.length > 1 ? (
errors.length > 1 ? (
<EuiFlexGroup
justifyContent="spaceAround"
data-test-subj="lnsWorkspaceErrorsPaginationControl"
>
<EuiFlexItem grow={false}>
<EuiPagination
pageCount={props.errors.length}
pageCount={errors.length}
activePage={activePage}
onPageClick={setActivePage}
/>
@ -64,7 +67,7 @@ export function WorkspaceErrors(props: Props) {
)}
</div>
}
title={<h2>{props.title}</h2>}
title={<h2>{title}</h2>}
iconColor="danger"
iconType="warning"
data-test-subj="lnsWorkspaceErrors"

35
x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx
View file

@ -676,13 +676,13 @@ export const InnerWorkspacePanel = React.memo(function InnerWorkspacePanel({
function useReportingState(errors: UserMessage[]): {
isRenderComplete: boolean;
hasDynamicError: boolean;
hasRequestError: boolean;
setHasRequestError: (state: boolean) => void;
setIsRenderComplete: (state: boolean) => void;
setDynamicError: (state: boolean) => void;
nodeRef: React.RefObject<HTMLDivElement>;
} {
const [isRenderComplete, setIsRenderComplete] = useState(Boolean(errors?.length));
const [hasDynamicError, setDynamicError] = useState(false);
const [hasRequestError, setHasRequestError] = useState(false);
const nodeRef = useRef<HTMLDivElement>(null);
useEffect(() => {
@ -691,9 +691,13 @@ function useReportingState(errors: UserMessage[]): {
}
}, [isRenderComplete, errors]);
return { isRenderComplete, setIsRenderComplete, hasDynamicError, setDynamicError, nodeRef };
return { isRenderComplete, setIsRenderComplete, hasRequestError, setHasRequestError, nodeRef };
}
const dataLoadingErrorTitle = i18n.translate('xpack.lens.editorFrame.dataFailure', {
defaultMessage: `An error occurred when loading data`,
});
export const VisualizationWrapper = ({
expression,
lensInspector,
@ -730,13 +734,14 @@ export const VisualizationWrapper = ({
const searchContext = useLensSelector(selectExecutionContextSearch);
// Used for reporting
const { isRenderComplete, hasDynamicError, setIsRenderComplete, setDynamicError, nodeRef } =
const { isRenderComplete, hasRequestError, setIsRenderComplete, setHasRequestError, nodeRef } =
useReportingState(errors);
const onRenderHandler = useCallback(() => {
setHasRequestError(false);
setIsRenderComplete(true);
onRender$();
}, [setIsRenderComplete, onRender$]);
}, [onRender$, setHasRequestError, setIsRenderComplete]);
const searchSessionId = useLensSelector(selectSearchSessionId);
@ -759,17 +764,13 @@ export const VisualizationWrapper = ({
);
}
const dataLoadingErrorTitle = i18n.translate('xpack.lens.editorFrame.dataFailure', {
defaultMessage: `An error occurred when loading data`,
});
return (
<div
className="lnsExpressionRenderer"
data-shared-items-container
data-render-complete={isRenderComplete}
data-shared-item=""
data-render-error={hasDynamicError ? dataLoadingErrorTitle : undefined}
data-render-error={hasRequestError ? dataLoadingErrorTitle : undefined}
ref={nodeRef}
>
<ExpressionRendererComponent
@ -795,11 +796,13 @@ export const VisualizationWrapper = ({
? [errorMessage]
: [];
if (!hasDynamicError) {
setDynamicError(true);
}
return <WorkspaceErrors errors={visibleErrorMessages} title={dataLoadingErrorTitle} />;
return (
<WorkspaceErrors
errors={visibleErrorMessages}
title={dataLoadingErrorTitle}
onRender={() => setHasRequestError(true)}
/>
);
}}
/>
</div>