[ML] Explain log rate spikes: Page setup #132121

walterra · 2022-05-12T11:57:17Z

Summary

Part of #136265.
Follow up to #131317.
Resolves #132126.

This is the second (and should be last) PR to build out UI/code boilerplate necessary before we start implementing the feature's own UI on a dedicated page.

Updates navigation to bring up data view/saved search selection before moving on to the explain log spike rates page.
The bar chart race demo page was moved to the aiops/single_endpoint_streaming_demo url. It is kept in this PR so we have two different pages + API endpoints that use streaming. With this still in place it's easier to update the streaming code to be more generic and reusable.
The url/page aiops/explain_log_rate_spikes has been added with some dummy request that slowly streams a data view's fields to the client. This page will host the actual UI to be brought over from the PoC in follow ups to this PR.
The structure to embed aiops plugin pages in the ml plugin has been simplified. Instead of a lot of custom code to load the components at runtime in the aiops plugin itself, this now uses React lazy loading with Suspense, similar to how we load Vega charts in other places. We no longer initialize the aiops client side code during startup of the plugin itself and augment it, instead we statically import components and pass on props/contexts from the ml plugin.
The code to handle streaming chunks on the client side in stream_fetch.ts/use_stream_fetch_reducer.ts has been improved to make better use of TS generics so for a given API endpoint it's able to return the appropriate coresponding return data type and only allows to use the supported reducer actions for that endpoint. Buffering client side actions has been tweaked to handle state updates more quickly if updates from the server are stalling.

Checklist

Delete any items that are not applicable to this PR.

Unit or functional tests were updated or added to match the most common scenarios
This was checked for cross-browser compatibility

For maintainers

This was checked for breaking API changes and was labeled appropriately

…ent code.

elasticmachine · 2022-05-12T13:35:15Z

Pinging @elastic/ml-ui (:ml)

peteharverson · 2022-05-16T08:43:13Z

x-pack/plugins/aiops/server/types.ts

@@ -5,6 +5,16 @@
 * 2.0.
 */

+import { PluginSetup, PluginStart } from '@kbn/data-plugin/server';
+
+export interface AiopsPluginSetupDeps {


Does this export, and the one below, contribute to the counts of public APIs which don't have comments?

peteharverson · 2022-05-16T08:45:44Z

x-pack/plugins/aiops/public/shared_lazy_components.tsx

+  </LazyWrapper>
+);
+
+export const SingleEndpointStreamingDemo: FC = () => (


This might need a comment as looks like it's in the public API.

x-pack/plugins/ml/public/application/routing/routes/new_job/index_or_search.tsx

peteharverson

Tested locally. Overall look good. Just found a few issues with the breadcrumbs.

x-pack/plugins/ml/public/application/routing/routes/aiops/single_endpoint_streaming_demo.tsx

walterra · 2022-05-16T14:06:52Z

@peteharverson Fixed some of the public API issues but wasn't able to resolve everything because it hits uncommented interfaces imported from other plugins.

peteharverson

Tested latest changes and LGTM

x-pack/plugins/aiops/public/components/explain_log_rate_spikes/explain_log_rate_spikes.tsx

x-pack/plugins/aiops/public/shared_lazy_components.tsx

alvarezmelissa87

LGTM ⚡

kibana-ci · 2022-05-20T07:39:23Z

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`aiops`	77	78	+1
`ml`	1610	1612	+2
total			+3

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`aiops`	218.1KB	219.0KB	+933.0B
`ml`	3.3MB	3.3MB	+2.0KB
total			+2.9KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
`aiops`	3.8KB	3.9KB	+34.0B
`ml`	40.0KB	40.4KB	+397.0B
total			+431.0B

Unknown metric groups

API count

id	before	after	diff
`aiops`	10	12	+2

async chunk count

id	before	after	diff
`aiops`	1	3	+2

ESLint disabled line counts

id	before	after	diff
`aiops`	3	6	+3

Total ESLint disabled count

id	before	after	diff
`aiops`	3	6	+3

History

💚 Build #45329 succeeded a6abf0e
💚 Build #44889 succeeded 08c920d
💚 Build #44791 succeeded c8eaa0a
💛 Build #44425 was flaky 8492e81
💔 Build #44409 failed c729619

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

cc @walterra

Builds out UI/code boilerplate necessary before we start implementing the feature's own UI on a dedicated page. - Updates navigation to bring up data view/saved search selection before moving on to the explain log spike rates page. The bar chart race demo page was moved to the aiops/single_endpoint_streaming_demo url. It is kept in this PR so we have two different pages + API endpoints that use streaming. With this still in place it's easier to update the streaming code to be more generic and reusable. - The url/page aiops/explain_log_rate_spikes has been added with some dummy request that slowly streams a data view's fields to the client. This page will host the actual UI to be brought over from the PoC in follow ups to this PR. - The structure to embed aiops plugin pages in the ml plugin has been simplified. Instead of a lot of custom code to load the components at runtime in the aiops plugin itself, this now uses React lazy loading with Suspense, similar to how we load Vega charts in other places. We no longer initialize the aiops client side code during startup of the plugin itself and augment it, instead we statically import components and pass on props/contexts from the ml plugin. - The code to handle streaming chunks on the client side in stream_fetch.ts/use_stream_fetch_reducer.ts has been improved to make better use of TS generics so for a given API endpoint it's able to return the appropriate coresponding return data type and only allows to use the supported reducer actions for that endpoint. Buffering client side actions has been tweaked to handle state updates more quickly if updates from the server are stalling.

walterra added 10 commits May 12, 2022 13:41

[ML] Update menu structure.

13f00df

[ML] Fix props.

da6ddf3

[ML] Simplify shared components.

a51fc5a

[ML] Small lazy loading refactor.

3359ab4

[ML] Refactor routes. Add new route for explaining log rate spikes.

837c3d1

[ML] Improve stream fetch types. Fix actionBuffer. Restructure compon…

bec93fd

…ent code.

[ML] Fix lazy loading indicator.

d321c18

[ML] Move reducer to its own file.

579a9df

[ML] Add index/saved-search chooser to explain log rate spikes page.

c0d2e6c

[ML] API integration test for explain log rate spikes.

c729619

walterra self-assigned this May 12, 2022

[ML] Fix cancelling request support after timeout.

6c8e89c

walterra added release_note:skip Skip the PR/issue when compiling release notes v8.3.0 labels May 12, 2022

[ML] Fix page title.

8492e81

walterra added the :ml label May 12, 2022

walterra marked this pull request as ready for review May 12, 2022 13:35

walterra requested a review from a team as a code owner May 12, 2022 13:35

walterra requested review from peteharverson and alvarezmelissa87 May 12, 2022 13:35

[ML] Add support for gzip compressed streams.

c8eaa0a

peteharverson reviewed May 16, 2022

View reviewed changes

x-pack/plugins/ml/public/application/routing/routes/new_job/index_or_search.tsx Show resolved Hide resolved

peteharverson reviewed May 16, 2022

View reviewed changes

x-pack/plugins/ml/public/application/routing/routes/aiops/single_endpoint_streaming_demo.tsx Show resolved Hide resolved

walterra added 4 commits May 16, 2022 12:43

[ML] Add comments to exports.

da5a423

[ML] Fix breadcrumbs.

b39c970

[ML] Fix exports.

3336818

Merge branch 'main' into ml-aiops-plugin-api

c8e95df

walterra added 2 commits May 16, 2022 14:40

[ML] Add comments to lib functions.

08c920d

[ML] Fix leading slash.

b7eadb4

peteharverson approved these changes May 17, 2022

View reviewed changes

peteharverson reviewed May 17, 2022

View reviewed changes

x-pack/plugins/aiops/public/components/explain_log_rate_spikes/explain_log_rate_spikes.tsx Show resolved Hide resolved

peteharverson reviewed May 17, 2022

View reviewed changes

x-pack/plugins/aiops/public/shared_lazy_components.tsx Show resolved Hide resolved

walterra added 2 commits May 17, 2022 15:09

Merge branch 'main' into ml-aiops-plugin-api

d9dcba3

[ML] Improve comments.

a6abf0e

alvarezmelissa87 approved these changes May 19, 2022

View reviewed changes

Merge branch 'main' into ml-aiops-plugin-api

bc2fe32

walterra merged commit 24bdc97 into elastic:main May 20, 2022

kibanamachine added the backport:skip This commit does not require backporting label May 20, 2022

walterra mentioned this pull request May 20, 2022

[ML] Explain log rate spikes: Move API stream demos to Kibana examples. #132590

Merged

3 tasks

walterra deleted the ml-aiops-plugin-api branch June 21, 2022 13:52

walterra mentioned this pull request Jul 29, 2022

[ML] Adds explain log rate spikes feature to the ML plugin #135948

Merged

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[ML] Explain log rate spikes: Page setup #132121

[ML] Explain log rate spikes: Page setup #132121

walterra commented May 12, 2022 •

edited

Loading

elasticmachine commented May 12, 2022

peteharverson May 16, 2022

peteharverson May 16, 2022

peteharverson left a comment

walterra commented May 16, 2022

peteharverson left a comment

alvarezmelissa87 left a comment

kibana-ci commented May 20, 2022

API count

async chunk count

ESLint disabled line counts

Total ESLint disabled count

[ML] Explain log rate spikes: Page setup #132121

[ML] Explain log rate spikes: Page setup #132121

Conversation

walterra commented May 12, 2022 • edited Loading

Summary

Checklist

For maintainers

elasticmachine commented May 12, 2022

peteharverson May 16, 2022

Choose a reason for hiding this comment

peteharverson May 16, 2022

Choose a reason for hiding this comment

peteharverson left a comment

Choose a reason for hiding this comment

walterra commented May 16, 2022

peteharverson left a comment

Choose a reason for hiding this comment

alvarezmelissa87 left a comment

Choose a reason for hiding this comment

kibana-ci commented May 20, 2022

💚 Build Succeeded

Metrics [docs]

Module Count

Async chunks

Page load bundle

API count

async chunk count

ESLint disabled line counts

Total ESLint disabled count

History

walterra commented May 12, 2022 •

edited

Loading