kibana/examples/response_stream
Rachel Shen 50a4fc4916
[Shared UX] Adoption of Shared UX Route component (#150357)
## Summary

This PR removes all imports of Route from react-router-dom and
'@kbn/kibana-react-plugin/public' and instead imports Route from
@kbn/shared-ux-router.

### Context
Based on
https://github.com/elastic/kibana/issues/132629#issue-1243243678 This PR
executes steps 2 - 4:

> 2. To make the transition easier, we want to re-export other
react-router-dom exports alongside the modified' Route'.
> 3. Solutions should start using that Route component in place of the
one from react-router-dom. I.e. replace all occurrences of import { ...
} from 'react-router-dom' with import { ... } from
'@kbn/shared-ux-router'.
> 4. All manual calls to useExecutionContext are not needed anymore and
should be removed.

### Future PR

Looks like this might be getting worked on in:
https://github.com/elastic/kibana/pull/145863 (thanks!)

> Introduce an ESlint rule that ensures that react-router-dom is not
used directly in Kibana and that imports go through the new
@kbn/shared-ux-router package.

This is tangentially accomplished through
https://github.com/elastic/kibana/pull/150340 but only addresses using
Route through @kbn/kibana-react-plugin/public'


### Checklist

Delete any items that are not applicable to this PR.

- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Tiago Costa <tiagoffcc@hotmail.com>
2023-02-14 19:25:04 +00:00
..
common [ML] Explain Log Rate Spikes: Fix uncompressed streams and backpressure handling. (#142970) 2022-10-14 15:30:34 +02:00
public [Shared UX] Adoption of Shared UX Route component (#150357) 2023-02-14 19:25:04 +00:00
server [ML] Explain Log Rate Spikes: Fix uncompressed streams and backpressure handling. (#142970) 2022-10-14 15:30:34 +02:00
kibana.jsonc [packages] migrate all plugins to packages (#148130) 2023-02-08 21:06:50 -06:00
README.md [ML] Explain Log Rate Spikes: Fix error handling. (#137947) 2022-08-04 15:23:36 +02:00
tsconfig.json [Shared UX] Adoption of Shared UX Route component (#150357) 2023-02-14 19:25:04 +00:00

response stream

This plugin demonstrates how to stream chunks of data to the client with just a single request.

To run Kibana with the described examples, use yarn start --run-examples.

The response_stream plugin demonstrates API endpoints that can stream data chunks with a single request with gzip/compression support. gzip-streams get decompressed natively by browsers. The plugin demonstrates two use cases to get started: Streaming a raw string as well as a more complex example that streams Redux-like actions to the client which update React state via useReducer().

Code in @kbn/aiops-utils contains helpers to set up a stream on the server side (streamFactory()) and consume it on the client side via a custom hook (useFetchStream()). The utilities make use of TS generics in a way that allows to have type safety for both request related options as well as the returned data.

No additional third party libraries are used in the helpers to make it work. On the server, they integrate with Hapi and use node's own gzip. On the client, the custom hook abstracts away the necessary logic to consume the stream, internally it makes use of a generator function and useReducer() to update React state.

On the server, the simpler stream to send a string is set up like this:

const { end, push, responseWithHeaders } = streamFactory(request.headers);

The request's headers get passed on to automatically identify if compression is supported by the client.

On the client, the custom hook is used like this:

const { errors, start, cancel, data, isRunning } = useFetchStream<
    ApiSimpleStringStream, typeof basePath
>(`${basePath}/internal/response_stream/simple_string_stream`);