[Embeddables Rebuild] Data table example #181768

ThomThomson · 2024-04-25T19:23:48Z

Summary

Closes #176180

Communication with siblings

This PR uses the method listenForCompatibleApi, to listen to

a data view from the closest API that publishes data views
Selected fields from the closest API that publishes selected fields.

This works alongside the field list Embeddable example to create the behaviour above.

ThomThomson · 2024-04-25T19:24:21Z

/ci

…fix'

ThomThomson · 2024-04-25T19:37:49Z

/ci

elasticmachine · 2024-04-25T20:50:44Z

Pinging @elastic/kibana-presentation (Team:Presentation)

nreese · 2024-04-25T21:00:54Z

examples/embeddable_examples/public/react_embeddables/data_table/create_data_table_action.ts

+        true
+      );
+    },
+    getDisplayName: () =>


lets remove i18n translations from examples.

Examples target developers and all development is done in English

Creating translations cost money

Translations bloat bundle size

I like keeping the i18n in examples because I'd like it to show our best practices and I'd like the code to look / work as close as possible to the real world code.

I agree that all development on Kibana is done in English, but I'm pretty sure usages in examples don't get translated - as they shouldn't:
There are 0 instances of embeddableExamples in the translation files, and some i18n usages have been around for over 4 years. embeddableExamples.searchableListContainer.displayName and embeddableExamples.searchableListContainer.displayName are roughly that old.

As for the bundle sizes, this only applies when user is running Kibana with --run-examples - which only developers should be doing.

nreese · 2024-04-25T21:07:23Z

...ples/embeddable_examples/public/react_embeddables/data_table/data_table_react_embeddable.tsx

+import { initializeDataTableQueries } from './data_table_queries';
+import { DataTableApi, DataTableProvider, DataTableSerializedState } from './types';
+
+export const isDataTableProvider = (api: unknown): api is DataTableProvider => {


Looks like isDataTableProvider is not used any where and can be removed

Good call, removed in e19133b

nreese · 2024-04-25T21:08:36Z

...ples/embeddable_examples/public/react_embeddables/data_table/data_table_react_embeddable.tsx

+          <>
+            <EuiScreenReaderOnly>
+              <span id="dataTableReactEmbeddableAria">
+                {i18n.translate('embeddableExamples.dataTable.ariaLabel', {


remove i18n

nreese · 2024-04-25T21:09:44Z

examples/embeddable_examples/public/react_embeddables/data_table/data_table_queries.ts

+  ]);
+  if (!defaultDataView) {
+    throw new Error(
+      i18n.translate('embeddableExamples.dataTable.noDataViewError', {


remove i18n

Also, this message does not align with if statement check for !defaultDataView

Updated message in e19133b

nreese · 2024-04-25T21:13:31Z

examples/embeddable_examples/public/react_embeddables/data_table/data_table_queries.ts

+
+  // run query whenever the unified search state changes
+  const runQuery = async (unifiedSearchState: DataTableQueryState) => {
+    const { filters, query, timeRange, dataView } = unifiedSearchState;


Should also consume timeslice so example response to timeslider control

Added time slice in e19133b

nreese · 2024-04-25T21:14:05Z

examples/embeddable_examples/public/react_embeddables/data_table/data_table_queries.ts

+    const { rawResponse: resp } = await lastValueFrom(
+      searchSource.fetch$({
+        abortSignal: abortController.signal,
+        sessionId: v4(), // todo, search sessions


Use search session from fetch$

Good catch! Fixed in e19133b

nreese · 2024-04-26T14:27:52Z

examples/embeddable_examples/public/react_embeddables/data_table/types.ts

+
+export type DataTableApi = DefaultEmbeddableApi<DataTableSerializedState> & PublishesDataLoading;
+
+export type DataTableProvider = PublishesDataViews & PublishesSelectedFields;


DataTableProvider type can be removed. Its not used any where

Ah - missed this. Removed in 2b6cf98

nreese · 2024-04-26T15:49:30Z

Not sure if this is worth fixing since this is an example, but changing the data view does not clear out the selected fields. In the screen shot, the field list was changed from logs and now the table is displaying fields that do not make sense for the field list

Steps

add fields from logs sample data set
change field list to another data view
notice how data table did not clear fieldlist

ThomThomson · 2024-04-26T16:01:17Z

I went back and forth on fixing this or not fixing this back when I implemented the field list. Clearing the fields on data view change felt like we were wiping user-selections as part of an unrelated action - but it looks like Discover clears the fields when the data view is changed, so these should probably do the same.

At the end of the day though it is just an example, so we really shouldn't be trying to make the UX perfect. I think I can update it to do that really quickly though...

Edit - changed this behaviour in f4dcafd

nreese

LGTM - nice example to show how sibling embeddables can interact
code review, tested in chrome

nreese · 2024-04-26T18:03:49Z

#181761 is merged now. Would you mind adding grouping: [addPanelGrouping], to add panel action?

ThomThomson · 2024-04-26T18:04:34Z

On it!

…ataTableExample

…fix'

kibana-ci · 2024-04-26T19:38:16Z

💛 Build succeeded, but was flaky

Buildkite Build
Commit: 05576de

Failed CI Steps

FTR Configs #70

Test Failures

[job] [logs] FTR Configs #70 / visualize app visual builder Time Series basics Dark mode viz should have light class when background color is white

Metrics [docs]

Public APIs missing comments

Total count of every public API that lacks a comment. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats comments for more detailed information.

id	before	after	diff
`@kbn/presentation-publishing`	153	155	+2

Public APIs missing exports

Total count of every type that is part of your API that should be exported but is not. This will cause broken links in the API documentation system. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats exports for more detailed information.

id	before	after	diff
`@kbn/presentation-publishing`	6	5	-1

Unknown metric groups

API count

id	before	after	diff
`@kbn/presentation-publishing`	182	184	+2

History

💚 Build #206403 succeeded f4dcafd
💚 Build #206359 succeeded 2b6cf98
💚 Build #206200 succeeded e19133b
💚 Build #206148 succeeded a3d69b6
💔 Build #206146 failed b75f50a

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

Adds a new data table example that shows how embeddables can interact with their siblings

ThomThomson added 2 commits April 25, 2024 14:27

add data table example

62eb317

remove auditTime and update kibana.jsonc

b75f50a

[CI] Auto-commit changed files from 'node scripts/lint_ts_projects --…

a3d69b6

…fix'

ThomThomson marked this pull request as ready for review April 25, 2024 20:50

ThomThomson requested a review from a team as a code owner April 25, 2024 20:50

ThomThomson added the release_note:skip Skip the PR/issue when compiling release notes label Apr 25, 2024

nreese self-requested a review April 25, 2024 20:57

nreese reviewed Apr 25, 2024

View reviewed changes

review feedback

e19133b

nreese reviewed Apr 26, 2024

View reviewed changes

remove unused type

2b6cf98

clear fields when data source changes

f4dcafd

nreese approved these changes Apr 26, 2024

View reviewed changes

ThomThomson and others added 2 commits April 26, 2024 14:06

Merge remote-tracking branch 'upstream/main' into embeddableRebuild/d…

6d9983b

…ataTableExample

[CI] Auto-commit changed files from 'node scripts/lint_ts_projects --…

05576de

…fix'

ThomThomson merged commit 98d2ab2 into elastic:main Apr 26, 2024
17 checks passed

kibanamachine added v8.15.0 backport:skip This commit does not require backporting labels Apr 26, 2024

yuliacech pushed a commit to yuliacech/kibana that referenced this pull request May 3, 2024

[Embeddables Rebuild] Data table example (elastic#181768)

d1acdc5

Adds a new data table example that shows how embeddables can interact with their siblings

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Embeddables Rebuild] Data table example #181768

[Embeddables Rebuild] Data table example #181768

ThomThomson commented Apr 25, 2024

ThomThomson commented Apr 25, 2024

ThomThomson commented Apr 25, 2024

elasticmachine commented Apr 25, 2024

nreese Apr 25, 2024

ThomThomson Apr 26, 2024

nreese Apr 25, 2024

ThomThomson Apr 26, 2024

nreese Apr 25, 2024

nreese Apr 25, 2024

nreese Apr 25, 2024

ThomThomson Apr 26, 2024

nreese Apr 25, 2024

ThomThomson Apr 26, 2024

nreese Apr 25, 2024

ThomThomson Apr 26, 2024

nreese Apr 26, 2024

ThomThomson Apr 26, 2024

nreese commented Apr 26, 2024

ThomThomson commented Apr 26, 2024 •

edited

Loading

nreese left a comment

nreese commented Apr 26, 2024

ThomThomson commented Apr 26, 2024

kibana-ci commented Apr 26, 2024

API count


		export type DataTableApi = DefaultEmbeddableApi<DataTableSerializedState> & PublishesDataLoading;

		export type DataTableProvider = PublishesDataViews & PublishesSelectedFields;

[Embeddables Rebuild] Data table example #181768

[Embeddables Rebuild] Data table example #181768

Conversation

ThomThomson commented Apr 25, 2024

Summary

Communication with siblings

ThomThomson commented Apr 25, 2024

ThomThomson commented Apr 25, 2024

elasticmachine commented Apr 25, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nreese commented Apr 26, 2024

ThomThomson commented Apr 26, 2024 • edited Loading

nreese left a comment

Choose a reason for hiding this comment

nreese commented Apr 26, 2024

ThomThomson commented Apr 26, 2024

kibana-ci commented Apr 26, 2024

💛 Build succeeded, but was flaky

Failed CI Steps

Test Failures

Metrics [docs]

Public APIs missing comments

Public APIs missing exports

API count

History

ThomThomson commented Apr 26, 2024 •

edited

Loading