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

[Lens][Visualize][Embeddable] Optimize Lens embeddables on error #144015

Merged
merged 6 commits into from
Nov 18, 2022
Merged

[Lens][Visualize][Embeddable] Optimize Lens embeddables on error #144015

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
512859c
:bug: Reduce rerendering on expression error
dej611 Oct 26, 2022
cae7625
:wrench: Set complete also on error
dej611 Oct 26, 2022
30b1e9f
Merge branch 'main' into fix/143552
dej611 Oct 27, 2022
2463d6a
Merge remote-tracking branch 'upstream/main' into fix/143552
VladLasitsa Nov 15, 2022
cad6f55
Some updates
VladLasitsa Nov 15, 2022
735cea5
Merge branch 'main' into fix/143552
kibanamachine Nov 17, 2022
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
8 changes: 5 additions & 3 deletions src/plugins/kibana_utils/public/render_complete/render_complete_dispatcher.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,8 +38,10 @@ export class RenderCompleteDispatcher {
}

public setEl(el?: HTMLElement) {
this.el = el;
this.count = 0;
if (this.el !== el) {
this.el = el;
this.count = 0;
}
if (el) this.dispatchInProgress();
}

Expand All @@ -61,7 +63,7 @@ export class RenderCompleteDispatcher {
public dispatchError() {
if (!this.el) return;
this.count++;
this.el.setAttribute('data-render-complete', 'false');
this.el.setAttribute('data-render-complete', 'true');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@vadimkibana for followup work, we could accept an optional Error parameter, and use it to update the contents of a data-render-error attribute with a message. WDYT?

this.el.setAttribute('data-rendering-count', String(this.count));
}

Expand Down
11 changes: 9 additions & 2 deletions x-pack/plugins/lens/public/embeddable/embeddable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -493,7 +493,9 @@ export class Embeddable
}

onContainerStateChanged(containerState: LensEmbeddableInput) {
if (this.handleContainerStateChanged(containerState) || this.errors?.length) this.reload();
if (this.handleContainerStateChanged(containerState)) {
this.reload();
}
}

handleContainerStateChanged(containerState: LensEmbeddableInput): boolean {
Expand Down Expand Up @@ -611,6 +613,10 @@ export class Embeddable
});
};

private onError: ExpressionWrapperProps['onExpressionError'] = () => {
this.renderComplete.dispatchError();
};

getExecutionContext() {
if (this.savedVis) {
const parentContext = this.parent?.getInput().executionContext || this.input.executionContext;
Expand Down Expand Up @@ -651,7 +657,7 @@ export class Embeddable
this.updateOutput({
...this.getOutput(),
loading: true,
error: undefined,
error: undefined, // Lens handles errors internally
});
this.renderComplete.dispatchInProgress();

Expand Down Expand Up @@ -683,6 +689,7 @@ export class Embeddable
style={input.style}
executionContext={this.getExecutionContext()}
canEdit={this.getIsEditable() && input.viewMode === 'edit'}
onExpressionError={this.onError}
onRuntimeError={() => {
this.logError('runtime');
}}
Expand Down
32 changes: 29 additions & 3 deletions x-pack/plugins/lens/public/embeddable/expression_wrapper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
* 2.0.
*/

import React from 'react';
import React, { useRef } from 'react';
import { I18nProvider } from '@kbn/i18n-react';
import { FormattedMessage } from '@kbn/i18n-react';
import { EuiFlexGroup, EuiFlexItem, EuiText, EuiIcon, EuiEmptyPrompt } from '@elastic/eui';
Expand Down Expand Up @@ -45,6 +45,7 @@ export interface ExpressionWrapperProps {
className?: string;
canEdit: boolean;
onRuntimeError: () => void;
onExpressionError: () => void;
executionContext?: KibanaExecutionContext;
lensInspector: LensInspector;
noPadding?: boolean;
Expand All @@ -53,9 +54,28 @@ export interface ExpressionWrapperProps {
interface VisualizationErrorProps {
errors: ExpressionWrapperProps['errors'];
canEdit: boolean;
onExpressionError: ExpressionWrapperProps['onExpressionError'];
searchSessionId?: string;
}

export function VisualizationErrorPanel({ errors, canEdit }: VisualizationErrorProps) {
export function VisualizationErrorPanel({
errors,
canEdit,
onExpressionError,
searchSessionId,
}: VisualizationErrorProps) {
// use a combination of sessionid + error messages to decide whether to trigger a rerender
const rerenderKey = `${searchSessionId || ''}-${errors
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

not sure that I fully understand why we need in include searchSessionId into key. The session id is the same for all panels inside e.g. dashboard.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What if we exclude searchSessionId from the key, and do:

if (rerenderKey && keyRef.current !== rerenderKey) {
  keyRef.current = rerenderKey;
  onExpressionError();
}

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Using the searchSessionId as part of the key will give the user the ability to try again to load the panel by clicking the Refresh button. Otherwise the panel state will be not be updated.

?.map(({ longMessage }) => longMessage)
.join('-')}`;

const keyRef = useRef(rerenderKey);
// Skip error logging when no search session id is passed
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think this comment is relevant.

// Skip error logging when no search session id is passed

if (keyRef.current !== rerenderKey) {
keyRef.current = rerenderKey;
onExpressionError();
}

const showMore = errors && errors.length > 1;
const canFixInLens = canEdit && errors?.some(({ type }) => type === 'fixable');
return (
Expand Down Expand Up @@ -121,14 +141,20 @@ export function ExpressionWrapper({
errors,
canEdit,
onRuntimeError,
onExpressionError,
executionContext,
lensInspector,
noPadding,
}: ExpressionWrapperProps) {
return (
<I18nProvider>
{errors || expression === null || expression === '' ? (
<VisualizationErrorPanel errors={errors} canEdit={canEdit} />
<VisualizationErrorPanel
errors={errors}
canEdit={canEdit}
onExpressionError={onExpressionError}
searchSessionId={searchSessionId}
/>
) : (
<div className={classNames('lnsExpressionRenderer', className)} style={style}>
<ExpressionRendererComponent
Expand Down