[Dashboard] Makes lens default editor for creating new panels #96181

cqliu1 · 2021-04-02T22:42:29Z

Summary

Closes #77341.
~~Blocked by #94139.~~

~~This PR currently includes changes from #94139, so to view the diff solely for this PR, I squashed all the changes into commit 978bce5.~~

#94139 was merged, so the diff should only reflect changes for this PR.

This makes Lens the default visualization editor in Dashboard. When a user clicks on the Create panel button, they will be redirected to Lens to create their visualizations instead of opening the new vis modal.

If Lens is not available, the Create panel button will fall back to opening the new vis modal.

Significant changes:

Create visualization button redirects to Lens instead of opening new vis modal
Adds an More types menu to the toolbar in Dashboard that lists embeddables that have a "create new" workflow defined in their factories

Adds a showCreateNewMenu option in the AddPanelFlyout to show/hide the Create new menu
@ML-UI Instead of adding ML embeddables (i.e. Anomaly swim lane and Anomaly chart) from the Create new menu in the AddPanelFlyout, I added a Machine Learning sub-menu in the editors menu, hoping that it would be more discoverable here.

@elastic/kibana-app-services Per @streamich suggestion, I added a grouping property to the embeddable factory definition, so I could group the ML embeddables under a sub-menu.
@elastic/kibana-operations This was branched off of [Presentation Util] Shared toolbar component #94139 which increased the bundle size limit for the presentationUtil plugin. I didn't need to increase the limit for the actual changes proposed for this PR, so I don't think your review is actually necessary here.
@elastic/logs-metrics-ui I just added savedObjectMetaData to the log stream embeddable factory so I could display a logo on the Log stream option in the More types menu.

Checklist

Delete any items that are not applicable to this PR.

Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
Unit or functional tests were updated or added to match the most common scenarios
Any UI touched in this PR is usable by keyboard only (learn more about keyboard accessibility)
Any UI touched in this PR does not create any new axe failures (run axe in browser: FF, Chrome)(https://github.com/elastic/kibana/blob/c29adfef29e921cc447d2a5ed06ac2047ceab552/src/dev/build/tasks/os_packages/docker_generator/resources/bin/kibana-docker)
This renders correctly on smaller devices using a responsive layout. (You can test this in your browser)
This was checked for cross-browser compatibility

For maintainers

This was checked for breaking API changes and was labeled appropriately

flash1293 · 2021-04-03T12:18:58Z

From the screenshots it looks like it’s missing a way to add maps - is this the case? There was a panel for it in the viz dialog. I think it’s important to retain a two-click path to Maps from the dashboard

cqliu1 · 2021-04-05T16:52:35Z

From the screenshots it looks like it’s missing a way to add maps - is this the case? There was a panel for it in the viz dialog. I think it’s important to retain a two-click path to Maps from the dashboard

With this change, users can still access maps via the new vis modal, but it will be increased to 3 clicks. They would need to click on All editors > Visualization and then click maps from the new vis modal.

We could potentially add a quick button to Maps similar to the Markdown and Input Controls buttons we're adding to dashboard in PR #94139 and make it a single click away. Something like this:

Or alternatively we could add a maps option to the All editors menu as Ryan mocked up.

Is it just maps that we want to surface or should all the visualizations listed in the new vis modal be equally as easy to access?

@ryankeairns What do you think?

flash1293 · 2021-04-05T19:57:42Z

I think 3 clicks is too much for maps, not sure about the best approach. Cc @nreese

for other visualizations it’s probably ok.

kmartastic · 2021-04-05T20:54:59Z

Is it just maps that we want to surface or should all the visualizations listed in the new vis modal be equally as easy to access?

I think Maps, TSVB, Text should be top-level items.

cqliu1 · 2021-04-07T01:33:25Z

I've updated the editor menu and populated it with all of the options from the new vis modal, and this is what it looks like now. It might be redundant to list Lens when the Create panel button also goes to Lens.

And it has a sub menu for agg based visualizations.

kmartastic · 2021-04-08T00:06:34Z

I've updated the editor menu and populated it with all of the options from the new vis modal, and this is what it looks like now. It might be redundant to list Lens when the Create panel button also goes to Lens.

Where does a user add Text or Input Controls? @cqliu1

cqliu1 · 2021-04-08T02:41:41Z

Where does a user add Text or Input Controls? @cqliu1

After my last comment, I merged in the changes from #94139 that added the quick buttons, so now you can access them via the quick buttons.

Here's an updated screenshot.

flash1293 · 2021-04-12T07:21:04Z

Didn't test yet, but the latest screenshot looks good to me. I think it's OK to keep the redundancy of the Lens entry in the context menu.

ryankeairns · 2021-04-12T18:23:38Z

@mdefazio do you have any thoughts/suggestions on the toolbar button designs? Specifically, are they blending into the background too much/should we add a shadow or anything? The toolbar designs were done pre-Amsterdam.

If we decide to make a change, then it should be adjusted the same for Lens which uses the same button styles.

cqliu1 · 2021-04-16T15:55:54Z

@elasticmachine merge upstream

cqliu1 · 2021-04-16T20:21:38Z

@elasticmachine merge upstream

cqliu1 · 2021-04-17T05:04:18Z

@elasticmachine merge upstream

cqliu1 · 2021-04-18T02:54:49Z

@elasticmachine merge upstream

kibanamachine · 2021-04-18T05:00:58Z

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`dashboard`	189	190	+1
`presentationUtil`	87	96	+9
total			+10

Async chunks

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

id	before	after	diff
`dashboard`	132.6KB	138.9KB	+6.3KB
`ml`	6.0MB	6.0MB	+771.0B
`visualizations`	43.0KB	43.1KB	+120.0B
total			+7.2KB

Page load bundle

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

id	before	after	diff
`dashboard`	312.7KB	313.0KB	+249.0B
`embeddable`	179.0KB	179.3KB	+264.0B
`infra`	141.6KB	141.8KB	+203.0B
`ml`	67.1KB	67.2KB	+113.0B
`presentationUtil`	33.7KB	37.7KB	+4.0KB
`visualizations`	91.9KB	92.1KB	+136.0B
total			+5.0KB

Unknown metric groups

API count

id	before	after	diff
`embeddable`	426	430	+4
`presentationUtil`	69	70	+1
`visualizations`	212	237	+25
total			+30

API count missing comments

id	before	after	diff
`embeddable`	361	362	+1
`presentationUtil`	67	68	+1
`visualizations`	194	219	+25
total			+27

API count with any type

id	before	after	diff
`visualizations`	11	13	+2

Non-exported public API item count

id	before	after	diff
`visualizations`	6	5	-1

History

💔 Build #120344 failed cd53b78
💔 Build #120333 failed 58e5eeb
💛 Build #120312 was flaky fdfea24
💔 Build #120248 failed 86814d8
💔 Build #120244 failed d54c065

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

…c#96181) * Makes lens default editor in dashboard Added all editors menu to dashboard panel toolbar Fixed toggle on editor menu Removed unnecessary comments Added data test subjects to editor menu buttons Populated editor menu with vis types Removed unused imports Fixed imports Adds showCreateNewMenu prop to AddPanelFlyout Rearranged order of editor menu options Fixed ts errors Added groupnig to embeddable factory Use embeddable state transfer service to redirect to editors Added showGroups to TypeSelectionState Fixed add panel flyout test Fixed data test subjects Fixed factory groupings Removed unused import Fixed page object Added telemtry to dashboard toolbar Added telemtry to editor menu Fix ml embeddable functional tests Fix lens dashboard test Fix empty dashboard test Fixed ts errors Fixed time to visualize security test Fixed empty dashboard test Fixed clickAddNewEmbeddableLink in dashboardAddPanel service Fixed agg based vis functional tests Revert test changes Fixed typo Fix tests Fix more tests Fix ts errors Fixed more tests Fixed toolbar sizes and margins to align with lens Fix tests Fixed callbacks Fixed button prop type New vis modal copy updates Added savedObjectMetaData to log stream embeddable factory Addressed feedback Fixed ts error Fix more tests Fixed ts errors Updated dashboard empty prompt copy Adds tooltip to log stream embeddable factory saved object meta data Made icons monochrome in toolbar Fixed icon colors in dark mode Cleaned up css Fixed ts errors Updated snapshot Fixed map icon color * Added tooltips for ML embeddables * Restored test * Added empty dashboard panel test * Fixed i18n id * Fix dashboard_embedding test * Removed unused service * Fixed i18n error * Added icon and description properties to embeddable factory definition * Fixed ts errors * Fixed expected value Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

…te-legacy-es-client * 'master' of github.com:elastic/kibana: (102 commits) [Exploratory view] integerate page views to exploratory view (elastic#97258) Fix typo in license_api_guard README name and import http server mocks from public interface (elastic#97334) Avoid mutating KQL query when validating it (elastic#97081) Add description as title on tag badge (elastic#97109) Remove legacy ES client usages in `home` and `xpack_legacy` (elastic#97359) [Fleet] Finer-grained error information from install/upgrade API (elastic#95649) Rule registry bundle size (elastic#97251) [Partial Results] Move other bucket into Search Source (elastic#96384) [Dashboard] Makes lens default editor for creating new panels (elastic#96181) skip flaky suite (elastic#97387) [Asset Management] Agent picker follow up (elastic#97357) skip flaky suite (elastic#97382) [Security Solutions] Fixes flake with cypress tests (elastic#97329) skip flaky suite (elastic#97355) Skip test to try and stabilize master minimize number of so fild asserted in tests. it creates flakines when implementation details change (elastic#97374) [Search Sessions] Client side search cache (elastic#92439) [SavedObjects] Add aggregations support (elastic#96292) [Reporting] Remove legacy elasticsearch client usage from the reporting plugin (elastic#97184) [kbnClient] fix basePath handling and export reponse type (elastic#97277) ... # Conflicts: # x-pack/plugins/watcher/server/lib/license_pre_routing_factory/license_pre_routing_factory.ts # x-pack/plugins/watcher/server/plugin.ts # x-pack/plugins/watcher/server/routes/api/indices/register_get_route.ts # x-pack/plugins/watcher/server/routes/api/license/register_refresh_route.ts # x-pack/plugins/watcher/server/routes/api/register_list_fields_route.ts # x-pack/plugins/watcher/server/routes/api/register_load_history_route.ts # x-pack/plugins/watcher/server/routes/api/settings/register_load_route.ts # x-pack/plugins/watcher/server/routes/api/watch/action/register_acknowledge_route.ts # x-pack/plugins/watcher/server/routes/api/watch/register_activate_route.ts # x-pack/plugins/watcher/server/routes/api/watch/register_deactivate_route.ts # x-pack/plugins/watcher/server/routes/api/watch/register_delete_route.ts # x-pack/plugins/watcher/server/routes/api/watch/register_execute_route.ts # x-pack/plugins/watcher/server/routes/api/watch/register_history_route.ts # x-pack/plugins/watcher/server/routes/api/watch/register_load_route.ts # x-pack/plugins/watcher/server/routes/api/watch/register_save_route.ts # x-pack/plugins/watcher/server/routes/api/watch/register_visualize_route.ts # x-pack/plugins/watcher/server/routes/api/watches/register_delete_route.ts # x-pack/plugins/watcher/server/routes/api/watches/register_list_route.ts # x-pack/plugins/watcher/server/shared_imports.ts # x-pack/plugins/watcher/server/types.ts

…96181) (#97414) * [Dashboard] Makes lens default editor for creating new panels (#96181) * Makes lens default editor in dashboard Added all editors menu to dashboard panel toolbar Fixed toggle on editor menu Removed unnecessary comments Added data test subjects to editor menu buttons Populated editor menu with vis types Removed unused imports Fixed imports Adds showCreateNewMenu prop to AddPanelFlyout Rearranged order of editor menu options Fixed ts errors Added groupnig to embeddable factory Use embeddable state transfer service to redirect to editors Added showGroups to TypeSelectionState Fixed add panel flyout test Fixed data test subjects Fixed factory groupings Removed unused import Fixed page object Added telemtry to dashboard toolbar Added telemtry to editor menu Fix ml embeddable functional tests Fix lens dashboard test Fix empty dashboard test Fixed ts errors Fixed time to visualize security test Fixed empty dashboard test Fixed clickAddNewEmbeddableLink in dashboardAddPanel service Fixed agg based vis functional tests Revert test changes Fixed typo Fix tests Fix more tests Fix ts errors Fixed more tests Fixed toolbar sizes and margins to align with lens Fix tests Fixed callbacks Fixed button prop type New vis modal copy updates Added savedObjectMetaData to log stream embeddable factory Addressed feedback Fixed ts error Fix more tests Fixed ts errors Updated dashboard empty prompt copy Adds tooltip to log stream embeddable factory saved object meta data Made icons monochrome in toolbar Fixed icon colors in dark mode Cleaned up css Fixed ts errors Updated snapshot Fixed map icon color * Added tooltips for ML embeddables * Restored test * Added empty dashboard panel test * Fixed i18n id * Fix dashboard_embedding test * Removed unused service * Fixed i18n error * Added icon and description properties to embeddable factory definition * Fixed ts errors * Fixed expected value Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> * Updated snapshots Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

cchaos · 2021-04-20T17:48:28Z

src/plugins/dashboard/public/application/_dashboard_app.scss

+.dshSolutionToolbar__editorContextMenu--dark {
+  .euiIcon path {
+    fill: $euiColorGhost;
+  }
+}


@cqliu1 Is this something that needs to be fixed in EUI? If so can you point to the issue you were having that made you need to target .euiIcon directly and their SVG paths?

Yeah, the dual color app icons don’t use the same color as the text on a button, so I had to manually adjust the icon color with CSS. I’ll file an issue in the EUI repo.

cqliu1 mentioned this pull request Apr 2, 2021

[Dashboard] Editor Menu #94514

Closed

9 tasks

cqliu1 added Team:Presentation Presentation Team for Dashboard, Input Controls, and Canvas Feature:Dashboard Dashboard related features Feature:Lens labels Apr 2, 2021

cqliu1 added enhancement New value added to drive a business result release_note:enhancement v7.13.0 v8.0.0 loe:medium Medium Level of Effort impact:high Addressing this issue will have a high level of impact on the quality/strength of our product. labels Apr 6, 2021

cqliu1 force-pushed the dashboard/lens-as-default branch from 07ef27c to 7207da9 Compare April 7, 2021 01:24

cqliu1 force-pushed the dashboard/lens-as-default branch 6 times, most recently from 002e608 to f138fea Compare April 7, 2021 17:37

cqliu1 force-pushed the dashboard/lens-as-default branch 3 times, most recently from cb9dad1 to e405bcd Compare April 8, 2021 21:38

cqliu1 force-pushed the dashboard/lens-as-default branch from e405bcd to 36393bb Compare April 12, 2021 18:37

cqliu1 added 8 commits April 15, 2021 17:11

Fixed i18n id

108062f

Fix dashboard_embedding test

8ea0de6

Removed unused service

c4af900

Fixed i18n error

a637f79

Merge branch 'master' into dashboard/lens-as-default

25aaf6c

Added icon and description properties to embeddable factory definition

b092b03

Fixed ts errors

d54c065

Fixed expected value

86814d8

ryankeairns self-requested a review April 16, 2021 14:00

ryankeairns approved these changes Apr 16, 2021

View reviewed changes

Merge branch 'master' into dashboard/lens-as-default

fdfea24

Merge branch 'master' into dashboard/lens-as-default

58e5eeb

Merge branch 'master' into dashboard/lens-as-default

cd53b78

Merge branch 'master' into dashboard/lens-as-default

092a721

elastic deleted a comment from kibanamachine Apr 18, 2021

cqliu1 merged commit 3b31d81 into elastic:master Apr 18, 2021

cqliu1 mentioned this pull request Apr 19, 2021

[7.x] [Dashboard] Makes lens default editor for creating new panels (#96181) #97414

Merged

cqliu1 deleted the dashboard/lens-as-default branch April 19, 2021 02:05

pheyos mentioned this pull request Apr 19, 2021

[ML] Functional tests - stabilize anomaly charts embeddables test #97452

Merged

cchaos reviewed Apr 20, 2021

View reviewed changes

KOTungseth mentioned this pull request May 10, 2021

[DOCS] Dashboard changes for 7.13 #99681

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Dashboard] Makes lens default editor for creating new panels #96181

[Dashboard] Makes lens default editor for creating new panels #96181

cqliu1 commented Apr 2, 2021 •

edited

Loading

flash1293 commented Apr 3, 2021

cqliu1 commented Apr 5, 2021 •

edited

Loading

flash1293 commented Apr 5, 2021 •

edited

Loading

kmartastic commented Apr 5, 2021

cqliu1 commented Apr 7, 2021 •

edited

Loading

kmartastic commented Apr 8, 2021

cqliu1 commented Apr 8, 2021 •

edited

Loading

flash1293 commented Apr 12, 2021

ryankeairns commented Apr 12, 2021

cqliu1 commented Apr 16, 2021

cqliu1 commented Apr 16, 2021

cqliu1 commented Apr 17, 2021

cqliu1 commented Apr 18, 2021

kibanamachine commented Apr 18, 2021

API count

API count missing comments

API count with any type

Non-exported public API item count

cchaos Apr 20, 2021 •

edited

Loading

cqliu1 Apr 20, 2021

[Dashboard] Makes lens default editor for creating new panels #96181

[Dashboard] Makes lens default editor for creating new panels #96181

Conversation

cqliu1 commented Apr 2, 2021 • edited Loading

Summary

Checklist

For maintainers

flash1293 commented Apr 3, 2021

cqliu1 commented Apr 5, 2021 • edited Loading

flash1293 commented Apr 5, 2021 • edited Loading

kmartastic commented Apr 5, 2021

cqliu1 commented Apr 7, 2021 • edited Loading

kmartastic commented Apr 8, 2021

cqliu1 commented Apr 8, 2021 • edited Loading

flash1293 commented Apr 12, 2021

ryankeairns commented Apr 12, 2021

cqliu1 commented Apr 16, 2021

cqliu1 commented Apr 16, 2021

cqliu1 commented Apr 17, 2021

cqliu1 commented Apr 18, 2021

kibanamachine commented Apr 18, 2021

💚 Build Succeeded

Metrics [docs]

Module Count

Async chunks

Page load bundle

API count

API count missing comments

API count with any type

Non-exported public API item count

History

cchaos Apr 20, 2021 • edited Loading

Choose a reason for hiding this comment

cqliu1 Apr 20, 2021

Choose a reason for hiding this comment

cqliu1 commented Apr 2, 2021 •

edited

Loading

cqliu1 commented Apr 5, 2021 •

edited

Loading

flash1293 commented Apr 5, 2021 •

edited

Loading

cqliu1 commented Apr 7, 2021 •

edited

Loading

cqliu1 commented Apr 8, 2021 •

edited

Loading

cchaos Apr 20, 2021 •

edited

Loading