Skip to content

Commit

Permalink
[Lens] Add section for how to handle refresh using search sessions (#…
Browse files Browse the repository at this point in the history
…138396)

* update readme

* use refresh in example
  • Loading branch information
flash1293 authored Aug 12, 2022
1 parent 9f1416f commit e9dd7ef
Show file tree
Hide file tree
Showing 3 changed files with 28 additions and 1 deletion.
16 changes: 16 additions & 0 deletions x-pack/examples/embedded_lens_example/public/app.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -126,6 +126,9 @@ export const App = (props: {
from: 'now-5d',
to: 'now',
});
const [searchSession, setSearchSession] = useState(() =>
props.plugins.data.search.session.start()
);

const LensComponent = props.plugins.lens.EmbeddableComponent;
const LensSaveModalComponent = props.plugins.lens.SaveModalComponent;
Expand Down Expand Up @@ -239,13 +242,26 @@ export const App = (props: {
Change time range
</EuiButton>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButton
aria-label="Refresh"
data-test-subj="lns-example-refresh"
isDisabled={!attributes}
onClick={() => {
setSearchSession(props.plugins.data.search.session.start());
}}
>
Refresh
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
<LensComponent
id=""
withDefaultActions
style={{ height: 500 }}
timeRange={time}
attributes={attributes}
searchSessionId={searchSession}
onLoad={(val) => {
setIsLoading(val);
}}
Expand Down
5 changes: 4 additions & 1 deletion x-pack/examples/embedded_lens_example/public/mount.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -40,5 +40,8 @@ export const mount =
);

render(reactElement, element);
return () => unmountComponentAtNode(element);
return () => {
unmountComponentAtNode(element);
plugins.data.search.session.clear();
};
};
8 changes: 8 additions & 0 deletions x-pack/plugins/lens/readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -109,6 +109,14 @@ if (!dataView) {
}
const dataViewIdForLens = dataView.id;
```
## Refreshing a Lens embeddable

The Lens embeddable is handling data fetching internally, this means as soon as the props change, it will trigger a new request if necessary. However, in some situations it's necessary to trigger a refresh even if the configuration of the chart doesn't change at all. Refreshing is managed using search sessions is Lens. To trigger a refresh without changing the actual configuration of a Lens embeddable, follow these steps:
* Pull in the contract of the `data` plugin. It contains the session service at `plugins.data.search.session`.
* When loading the app containing a Lens embeddable, start a new session using `session.start`. It returns the current session id - keep it in the state of our app (e.g. a `useState` hook or your redux store)
* Pass the current session id to the Lens embeddable component via the `searchSessionId` property
* When refreshing, simply call `session.start` again and update your state - Lens will discard the existing cache and re-fetch even if the query doesn't change at all
* When unmounting your app, call `session.clear` to end the current session

# Lens Development

Expand Down

0 comments on commit e9dd7ef

Please sign in to comment.