[Logs UI] <LogStream /> as a kibana embeddable by afgomez · Pull Request #88618 · elastic/kibana

afgomez · 2021-01-18T17:21:55Z

Summary

Expose the <LogStream /> component as a kibana embeddable.

Closes #84549

How to test

The user needs to have the infra plugin enabled and data in any filebeat-* or logs-* index.
Create an index pattern (the pattern itself doesn't matter, but it's a requirement for the next step).
Create a dashboard.
Click on "Add from library"

4. Click on "Create new" and then select "Log Stream"

5. A log stream embeddable should appear. It should update when the date range or the query changes.

Screenshots

Notes/ToDo

The <LogStream /> component accepts KQL queries. I need to find a way to either translate lucene queries into KQL, or modify the component to also take lucene queries.
The bundle size limit of the infra plugin has been increased to accommodate the code on this PR. We want to look into the bundle on a separate issue to see where we can remove weight.

Checklist

Delete any items that are not applicable to this PR.

Documentation was added for features that require explanation or tutorials

packages/kbn-optimizer/limits.yml

elasticmachine · 2021-01-25T10:20:15Z

Pinging @elastic/logs-metrics-ui (Team:logs-metrics-ui)

afgomez · 2021-01-25T10:20:30Z

@elasticmachine merge upstream

spalger

Bundle limits LGTM, will be reduced in resolving #89025

weltenwort

Not a code review, but our earlier conversation about the bundle size provoked my curiosity to see whether anything can be done quickly.

Just wanted to persist my thoughts, feel free to ignore. 😉

weltenwort · 2021-01-25T16:50:33Z

x-pack/plugins/infra/public/components/log_stream/log_stream_embeddable_factory.ts

+
+  public async create(initialInput: LogStreamEmbeddableInput, parent?: IContainer) {
+    const services = await this.getCoreServices();
+    return new LogStreamEmbeddable(services, initialInput, parent);


Could we await import() this in here?

Could we await import() this in here?

we can try, but given the size of the LogStreamEmbeddable module I'm not sure it will be worth it. Whatever gains we have in the bundle size will probably get lost with the overhead of the extra network request.

weltenwort · 2021-01-25T16:52:48Z

x-pack/plugins/infra/public/components/log_stream/log_stream_embeddable_factory.ts

+
+export class LogStreamEmbeddableFactoryDefinition
+  implements EmbeddableFactoryDefinition<LogStreamEmbeddableInput> {
+  public readonly type = LOG_STREAM_EMBEDDABLE;


If we duplicate the constant or put it into a separate file in combination with importing the LogStreamEmbeddable asynchronously (see below), couldn't we avoid the sync runtime import?

weltenwort · 2021-01-25T16:54:56Z

x-pack/plugins/infra/public/plugin.ts

 } from './types';
 import { getLogsHasDataFetcher, getLogsOverviewDataFetcher } from './utils/logs_overview_fetchers';
 import { createMetricsHasData, createMetricsFetchData } from './metrics_overview_fetchers';
+import { LOG_STREAM_EMBEDDABLE } from './components/log_stream/log_stream_embeddable';


If we imported the constant from a separate file here too, wouldn't that turn this into a cheaper import?

Kerry350

Code looks good, and works great 🎉

Since the <LogStream /> component is so popular it might be nice to provide an example in the docs or Storybook for how solutions can use the embeddable directly outside of the dashboard context. There's an <EmbeddableRenderer /> component that cuts down a lot of the boilerplate.

import { EmbeddableRenderer } from 'src/plugins/embeddable/public'
const { embeddable: embeddablePlugin } = useKibanaContextForPlugin().services;
const factory: any = embeddablePlugin.getEmbeddableFactory(LOG_STREAM_EMBEDDABLE);

  const embeddableInput: LogStreamEmbeddableInput = useMemo(() => {
    return {
      timeRange,
      query
    }
  }, [timeRange, query]);

  return (
    <EmbeddableRenderer input={embeddableInput} factory={factory} />
  )

Feel free to ignore though, I know adoption has been absolutely fine without the embeddable 😄

Kerry350 · 2021-01-27T12:16:41Z

x-pack/plugins/infra/public/components/log_stream/log_stream_embeddable.tsx

+    return queryObj.query as string;
+  }
+
+  if (queryObj.language === 'lucene') {


👍

Do you want to address that in a separate followup? Do we know if there's something in the data plugin that could help there?

I wanna tackle this today in this PR. I haven't looked into it yet, but I think what makes the most sense is to allow the <LogStream /> component to accept lucene queries, something like:

<LogStream query="whatever" queryLang="lucene" />

The queryLang will be optional and will default to "KQL", so we don't break anything.

Do you think it makes sense?

Cool, sounds good. There's a Query type provided by the data plugin, and it probably makes most sense to use that as our prop so we're following the conventions set there.

The ML anomaly swimlane embeddable uses that here: https://github.com/elastic/kibana/blob/master/x-pack/plugins/ml/public/embeddables/types.ts#L34, and the type looks like so: https://github.com/elastic/kibana/blob/master/src/plugins/data/common/query/types.ts#L12

So it's basically exactly what you've said, but it's nice to buy into the data stuff where we can.

afgomez · 2021-01-28T11:45:59Z

@Kerry350 do you mind taking another look at the last commits? The embeddable handles lucene queries now

Kerry350

Lucene changes LGTM 👌

kibanamachine · 2021-02-01T13:38:03Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: 92b2a9d

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`infra`	1098	1101	+3

Async chunks

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

id	before	after	diff
`infra`	2.2MB	2.2MB	-9.7KB

Page load bundle

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

id	before	after	diff
`infra`	161.3KB	172.3KB	+11.0KB

History

💔 Build #101724 failed d9293db
💛 Build #100644 was flaky 3cce513
💚 Build #100432 succeeded b487a0a
💛 Build #100107 was flaky 6766aedb01cf23c64a1275779e10016bb556b0e7
💔 Build #99641 failed bcf5b6c494f4036d8367a88f0d4005805c5bdc59

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

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

afgomez force-pushed the 84549-log-stream-embeddable branch 3 times, most recently from bcf5b6c to 6766aed Compare January 20, 2021 17:44

Alejandro Fernández Gómez added 6 commits January 21, 2021 20:57

Move LogStream out of the index file

796a068

WIP: log stream embeddable

a5b3e0a

Tweak types

31b1322

Tweak factory permissions

a9aa6c0

Lazy load the log stream component

3aa0b4c

Increase bundle size to 200KiB

b487a0a

afgomez force-pushed the 84549-log-stream-embeddable branch from 102370d to b487a0a Compare January 21, 2021 19:58

afgomez marked this pull request as ready for review January 21, 2021 20:14

afgomez requested review from a team as code owners January 21, 2021 20:14

spalger reviewed Jan 21, 2021

View reviewed changes

packages/kbn-optimizer/limits.yml Show resolved Hide resolved

afgomez added Feature:Logs UI Logs UI feature release_note:skip Skip the PR/issue when compiling release notes Team:Infra Monitoring UI - DEPRECATED DEPRECATED - Label for the Infra Monitoring UI team. Use Team:obs-ux-infra_services v7.12.0 labels Jan 25, 2021

Merge branch 'master' into 84549-log-stream-embeddable

3cce513

Kerry350 self-requested a review January 25, 2021 11:56

spalger approved these changes Jan 25, 2021

View reviewed changes

weltenwort reviewed Jan 25, 2021

View reviewed changes

Kerry350 approved these changes Jan 27, 2021

View reviewed changes

Alejandro Fernández Gómez added 3 commits January 28, 2021 12:40

Process lucene queries inside <LogStream/>

cfc515e

Pass lucene queries from dashboard to the <LogStream />

b13b6ea

Merge branch 'master' into 84549-log-stream-embeddable

d9293db

afgomez requested a review from Kerry350 January 28, 2021 11:45

Kerry350 approved these changes Jan 28, 2021

View reviewed changes

Alejandro Fernández Gómez added 2 commits February 1, 2021 12:35

Merge branch 'master' into 84549-log-stream-embeddable

6333c10

Fix types

92b2a9d

afgomez merged commit 53637d0 into elastic:master Feb 1, 2021

afgomez deleted the 84549-log-stream-embeddable branch February 1, 2021 13:48

afgomez mentioned this pull request Feb 1, 2021

[7.x] [Logs UI] <LogStream /> as a kibana embeddable (#88618) #89871

Merged

afgomez pushed a commit that referenced this pull request Feb 2, 2021

[7.x] [Logs UI] <LogStream /> as a kibana embeddable (#88618) (#89871)

5e238e2

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

afgomez mentioned this pull request Feb 16, 2021

[Logs UI][Docs] Add reference to the log stream dashboard embeddable #91462

Closed

Conversation

afgomez commented Jan 18, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

How to test

Screenshots

Notes/ToDo

Checklist

Uh oh!

Uh oh!

elasticmachine commented Jan 25, 2021

Uh oh!

afgomez commented Jan 25, 2021

Uh oh!

spalger left a comment

Choose a reason for hiding this comment

Uh oh!

weltenwort left a comment

Choose a reason for hiding this comment

Uh oh!

weltenwort Jan 25, 2021

Choose a reason for hiding this comment

Uh oh!

afgomez Jan 27, 2021

Choose a reason for hiding this comment

Uh oh!

weltenwort Jan 25, 2021

Choose a reason for hiding this comment

Uh oh!

weltenwort Jan 25, 2021

Choose a reason for hiding this comment

Uh oh!

Kerry350 left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Kerry350 Jan 27, 2021

Choose a reason for hiding this comment

Uh oh!

afgomez Jan 27, 2021

Choose a reason for hiding this comment

Uh oh!

Kerry350 Jan 27, 2021

Choose a reason for hiding this comment

Uh oh!

afgomez commented Jan 28, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Kerry350 left a comment

Choose a reason for hiding this comment

Uh oh!

kibanamachine commented Feb 1, 2021

💚 Build Succeeded

Metrics [docs]

Module Count

Async chunks

Page load bundle

History

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

afgomez commented Jan 18, 2021 •

edited

Loading

Kerry350 left a comment •

edited

Loading

afgomez commented Jan 28, 2021 •

edited

Loading