[Enterprise Search] Add Overview landing page/plugin #76734

cee-chen · 2020-09-04T00:41:14Z

Summary

This adds an Enterprise Search Overview plugin/landing page for the new Kibana home to link to. 🎉

Changes:

Sets up new plugin, added to the sidebar, and linked to from Kibana Home
Conditionally hides/displays the product cards depending on whether the user has access to the product, and disables the plugin entirely if the user does not have access to either AS or WS
Sets up new plugin telemetry
Updates our App Search & Workplace Search breadcrumb trails to link to the new overview plugin from the Enterprise Search breadcrumb (was previously not a link)
Updates our breadcrumbs and react router link helpers with a new shouldNotCreateHref flag - this allows us to create RR paths outside of the plugin basename while still navigating within Kibana/between Kibana plugins.
[Tech debt] Refactor some strings in public/plugin.ts to common/constants.ts

Please note that this is an MVP plugin that mimics the current Enterprise Search Home (http://localhost:3002/ent/select) - however, @johnbarrierwilson will eventually customize it at some point.

Screencaps

Dark mode:

Side nav:

Telemetry:

QA

Navigation
- Clicking from the Kibana Home to Enterprise Search now takes you to the Overview plugin, not App Search
- Clicking Enterprise Search > Overview in the sidebar nav takes you to the plugin
- Clicking "Launch App Search" takes you to App Search
- Clicking "Enterprise Search" from App Search's breadcrumb trail takes you to the plugin
- Clicking "Launch Workplace Search" takes you to Workplace Search
- Clicking "Enterprise Search" from Workplace Search's breadcrumb trail takes you to the plugin
Overview UI
- Works in small phone and tablet dimensions
- Works in dark mode
- Looks acceptably similar to http://localhost:3002/ent/select (considering EUI conversions & removing bespoke CSS)
Telemetry
- Go to http://localhost:5601/api/stats?extended=true
- Confirm that a new enterprise_search plugin is present, and that it has non-zero numbers for ui_viewed.overview and ui_clicked.app_search and ui_clicked.workplace_search that correspond to the number of times you've clicked said buttons (try clicking, then refreshing the stats page and confirming the count increments).
Access
- Setup
  - In Kibana, create a custom role (e.g. test) with only Dashboard/Discover permissions
  - In Kibana, create a user (e.g. test_as_access) with the above role. In App Search, create a role mapping for that username with an access of admin etc. (or dev)
  - In Kibana, create a user (e.g. test_ws_access) with the above role. In Workplace Search, create a role mapping for that username with an access of admin or user
  - In Kibana, create a user (e.g. test_no_access with the above role. Do not add any role mappings in either product for this username.
- Log into the test_as_access App Search user and confirm that:
  - Only the Overview and App Search plugins show up in the side bar
  - Only the App Search product card shows up in the Overview plugin
- Log into the test_ws_access Workplace Search user and confirm that:
  - Only the Overview and Workplace Search plugins show up in the side bar
  - Only the Workplace Search product card shows up in the Overview plugin
- Log into the test_no_access user and confirm that:
  - No Enterprise Search plugins show up in the sidebar
  - The Enterprise Search card does not show up at all on the Home catalogue
  - http://localhost:5601/app/enterprise_search/overview correctly 404s

Checklist

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
This was checked for keyboard-only and screenreader accessibility
This renders correctly on smaller devices using a responsive layout. (You can test this in your browser
This was checked for cross-browser compatibility

Release note

Adds a new Enterprise Search overview plugin, which introduces and guides users to the App Search and Workplace Search plugins.

cee-chen · 2020-09-04T00:51:30Z

@elastic/kibana-telemetry 👋 It's us again!! Super excited to let you know we're adding a new Enterprise Search plugin and thus a new telemetry bucket. Hopefully you'll get all the info you need from your JSON file, but just in case, I've included a screenshot of the stats output:

Here's the most relevant telemetry commit, hope that helps!

afharo

Telemetry changes LGTM!
Super-NIT: I'd appreciate if you could do the Application Usage related changes (we can do it in the telemetry team later on if necessary 🙂)

afharo · 2020-09-04T15:13:43Z

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

+    core.application.register({
+      id: ENTERPRISE_SEARCH_PLUGIN.ID,
+      title: ENTERPRISE_SEARCH_PLUGIN.NAV_TITLE,
+      appRoute: ENTERPRISE_SEARCH_PLUGIN.URL,
+      category: DEFAULT_APP_CATEGORIES.enterpriseSearch,
+      mount: async (params: AppMountParameters) => {
+        const [coreStart] = await core.getStartServices();
+        const { chrome } = coreStart;
+        chrome.docTitle.change(ENTERPRISE_SEARCH_PLUGIN.NAME);
+
+        await this.getInitialData(coreStart.http);
+
+        const { renderApp } = await import('./applications');
+        const { EnterpriseSearch } = await import('./applications/enterprise_search');
+
+        return renderApp(EnterpriseSearch, params, coreStart, plugins, this.config, this.data);
+      },
+    });


Super-NIT: @constancecchen I noticed we are registering a new app. Do you mind adding to this file an entry in the object applicationUsageSchema with the ENTERPRISE_SEARCH_PLUGIN.ID as a key?

We are working on an automated way of building that structure, but it has to be done manually for now. It can be done on a follow up PR, if you prefer to 🙂

I can definitely do this - will push up in a separate commit here shortly!

@afharo Please let me know if 6dee466 looks correct to you! 🙇‍♀️

scottybollinger

Code LGTM and all QA steps successful.

cee-chen · 2020-09-08T19:45:17Z

Hmm, I'm concerned by the large asset size increase. Going to try and see if I can optimize our images

cee-chen · 2020-09-08T20:25:50Z

The background SVG is the main culprit, it looks like 😬 It's about 300kb in size. I ran it through SVGOMG and got it down from 293kb to 236kb, but that's still surprisingly hefty for an SVG.

Bizarrely enough, if you convert the SVG to a PNG instead, it drops down to just ~30kb or so... I'm probably going to go ahead and do that here in a follow-up commit.

I also ran the AS & WS dashboard images through TinyPNG but those barely went down in size so they appear to have already been optimized. 🎉

zumwalt · 2020-09-08T20:29:27Z

The background SVG is the main culprit, it looks like 😬 It's about 300kb in size. I ran it through SVGOMG and got it down from 293kb to 236kb, but that's still surprisingly hefty for an SVG.

It's likely worth having @daveyholler inspect that illustration in Figma or Illustrator and see if there are any opportunities to simplify it.

cee-chen · 2020-09-08T20:34:49Z

@zumwalt Great point! I am pretty curious as to what's going on as it's super unusual for an SVG to be significantly larger than a raster image - I'm guessing it's the textures/dots personally.

@daveyholler We do have a working and performant workaround (using a 25kb PNG) so don't feel like you have to prioritize this, but if you're curious as well feel free to poke at the old SVG if you want to see if it's possible to get that down to double digits in file size as well.

+ move new Home strings to constants

- Add SetEnterpriseSearchChrome - Update Enterprise Search breadcrumbs to link to new overview plugin (+ update overview plugin URL per team discussion) - Add ability to break out of React Router basename by not using history.createhref - Update createHref mock to more closely match Kibana urls (adding /app prefix) - Minor documentation fix

- client-side: SendEnterpriseSearchTelemetry - server-side: register saved objects, usage collector, etc.

* Add formatTestSubj util This allows us to correctly format strings into our casing for data-test-subj attrs * Add images and stylesheet * Add product card component * Add index component * Remove unused styles

- by add shouldNotCreateHref prop to RR helpers - similiar to breadcrumb change

- Prefer EUI components over bespoke CSS (e.g. EuiCard) - Remove unused or unspecific CSS - Pull out product card CSS to its component - Fix kebab-cased CSS classes to camelCased

- Prefer passing in our plugin consts instead of separate props - Move productCardDescription to constants - Update tests

+ revert data-test-subj strings to previous implementation + prune format_test_subj helper by using lodash util directly

…team request

- adds access checks - fixes flex/CSS to show one card at a time

kibanamachine · 2020-09-09T19:43:43Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: 8718473

Build metrics

@kbn/optimizer bundle module count

id	value	diff	baseline
enterpriseSearch	270	+54	216

async chunks size

id	value	diff	baseline
enterpriseSearch	429.7KB	+57.0KB	372.7KB

miscellaneous assets size

id	value	diff	baseline
enterpriseSearch	644.9KB	+78.9KB	566.0KB

page load bundle size

id	value	diff	baseline
enterpriseSearch	22.4KB	+2.3KB	20.1KB

distributable file count

id	value	diff	baseline
default	45491	+14	45477

History

💚 Build #73227 succeeded f882f8be8c86a9f0773e604d88b3648269672617
💚 Build #73176 succeeded 29057992f2e8dd2a795d7c25968631646337073f
💔 Build #73172 failed 65badd14dd002865cf0f549e19b78eff8e2546a6
💔 Build #72503 failed 4f330edb71445840157969728805772b1337b347

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

* [public] Register Enterprise search plugin + move new Home strings to constants * [server] Register plugin access/visibility * Set up Enterprise Search Kibana Chrome - Add SetEnterpriseSearchChrome - Update Enterprise Search breadcrumbs to link to new overview plugin (+ update overview plugin URL per team discussion) - Add ability to break out of React Router basename by not using history.createhref - Update createHref mock to more closely match Kibana urls (adding /app prefix) - Minor documentation fix * Set up Enterprise Search plugin telemetry - client-side: SendEnterpriseSearchTelemetry - server-side: register saved objects, usage collector, etc. * Enterprise search overview views (#23) * Add formatTestSubj util This allows us to correctly format strings into our casing for data-test-subj attrs * Add images and stylesheet * Add product card component * Add index component * Remove unused styles * Fix inter-plugin links - by add shouldNotCreateHref prop to RR helpers - similiar to breadcrumb change * Fix/clean up CSS - Prefer EUI components over bespoke CSS (e.g. EuiCard) - Remove unused or unspecific CSS - Pull out product card CSS to its component - Fix kebab-cased CSS classes to camelCased * Clean up ProductCard props - Prefer passing in our plugin consts instead of separate props - Move productCardDescription to constants - Update tests * Add telemetry clicked actions to product buttons + revert data-test-subj strings to previous implementation + prune format_test_subj helper by using lodash util directly * [PR feedback] Add new plugin to applicationUsageSchema per telemetry team request * Fix failing functional navLinks test * Fix telemetry schema test * [Perf] Optimize assets size by switching from 300kb SVG to 25kb PNG * Only show product cards if the user has access to that product - adds access checks - fixes flex/CSS to show one card at a time Co-authored-by: Scotty Bollinger <[email protected]> Co-authored-by: Scotty Bollinger <[email protected]>

* master: (25 commits) [bugfix] Replace panel flyout opens 2 flyouts (elastic#76931) clean up test (elastic#76887) [Enterprise Search] Update shared API request handler (elastic#77112) [Maps] convert ESAggSource to TS (elastic#76999) Add plugin status API - take 2 (elastic#76732) Adds lens as a readable saved object for read-only dashboard users (elastic#77067) Skip checking for the reserved realm (elastic#76687) Reporting/diagnostics (elastic#74314) Reporting/Test: unskip non-screenshot tests (elastic#77088) Move metrics to setup and add cgroup metrics (elastic#76730) [Enterprise Search] Add Overview landing page/plugin (elastic#76734) First pass. Change TS type. Update OpenAPI (elastic#76434) [CI] Balance xpack ci groups a bit (elastic#77068) [Security_solution][Detections] Refactor signal ancestry to allow multiple parents (elastic#76531) [Maps] convert MetricsEditor to TS (elastic#76727) IndexMigrator: fix non blocking migration wrapper promise rejection (elastic#77018) [Enterprise Search] Update config data endpoint to v2 (elastic#76970) [ML] Add decision path charts to exploration results table (elastic#73561) Bump eventemitter3 from 4.0.0 to 4.0.7 (elastic#77016) [Ingest Pipelines] Add descriptions for ingest processors K-S (elastic#76981) ...

* master: (41 commits) [bugfix] Replace panel flyout opens 2 flyouts (elastic#76931) clean up test (elastic#76887) [Enterprise Search] Update shared API request handler (elastic#77112) [Maps] convert ESAggSource to TS (elastic#76999) Add plugin status API - take 2 (elastic#76732) Adds lens as a readable saved object for read-only dashboard users (elastic#77067) Skip checking for the reserved realm (elastic#76687) Reporting/diagnostics (elastic#74314) Reporting/Test: unskip non-screenshot tests (elastic#77088) Move metrics to setup and add cgroup metrics (elastic#76730) [Enterprise Search] Add Overview landing page/plugin (elastic#76734) First pass. Change TS type. Update OpenAPI (elastic#76434) [CI] Balance xpack ci groups a bit (elastic#77068) [Security_solution][Detections] Refactor signal ancestry to allow multiple parents (elastic#76531) [Maps] convert MetricsEditor to TS (elastic#76727) IndexMigrator: fix non blocking migration wrapper promise rejection (elastic#77018) [Enterprise Search] Update config data endpoint to v2 (elastic#76970) [ML] Add decision path charts to exploration results table (elastic#73561) Bump eventemitter3 from 4.0.0 to 4.0.7 (elastic#77016) [Ingest Pipelines] Add descriptions for ingest processors K-S (elastic#76981) ...

…rok/new-patterns-component-use-array * 'master' of github.com:elastic/kibana: (39 commits) [APM] Always load esarchives from common (elastic#77139) [Ingest Manager] Handle Legacy ES client errors (elastic#76865) [Docs] URL Drilldown (elastic#76529) [bugfix] Replace panel flyout opens 2 flyouts (elastic#76931) clean up test (elastic#76887) [Enterprise Search] Update shared API request handler (elastic#77112) [Maps] convert ESAggSource to TS (elastic#76999) Add plugin status API - take 2 (elastic#76732) Adds lens as a readable saved object for read-only dashboard users (elastic#77067) Skip checking for the reserved realm (elastic#76687) Reporting/diagnostics (elastic#74314) Reporting/Test: unskip non-screenshot tests (elastic#77088) Move metrics to setup and add cgroup metrics (elastic#76730) [Enterprise Search] Add Overview landing page/plugin (elastic#76734) First pass. Change TS type. Update OpenAPI (elastic#76434) [CI] Balance xpack ci groups a bit (elastic#77068) [Security_solution][Detections] Refactor signal ancestry to allow multiple parents (elastic#76531) [Maps] convert MetricsEditor to TS (elastic#76727) IndexMigrator: fix non blocking migration wrapper promise rejection (elastic#77018) [Enterprise Search] Update config data endpoint to v2 (elastic#76970) ... # Conflicts: # src/plugins/es_ui_shared/static/forms/hook_form_lib/components/use_array.ts

* master: (38 commits) Reporting/Test: unskip non-screenshot tests (elastic#77088) Move metrics to setup and add cgroup metrics (elastic#76730) [Enterprise Search] Add Overview landing page/plugin (elastic#76734) First pass. Change TS type. Update OpenAPI (elastic#76434) [CI] Balance xpack ci groups a bit (elastic#77068) [Security_solution][Detections] Refactor signal ancestry to allow multiple parents (elastic#76531) [Maps] convert MetricsEditor to TS (elastic#76727) IndexMigrator: fix non blocking migration wrapper promise rejection (elastic#77018) [Enterprise Search] Update config data endpoint to v2 (elastic#76970) [ML] Add decision path charts to exploration results table (elastic#73561) Bump eventemitter3 from 4.0.0 to 4.0.7 (elastic#77016) [Ingest Pipelines] Add descriptions for ingest processors K-S (elastic#76981) [Metrics UI] Replace Snapshot API with Metrics API (elastic#76253) legacy utils cleanup (elastic#76608) [ML] Account for "properties" layer in find_file_structure mappings (elastic#77035) fixed typo Upgrade to Kea 2.2 (elastic#77047) a11y tests on spaces home page including feature control (elastic#76515) [ML] Transforms list: persist pagination through refresh interval (elastic#76786) [ML] Replace all use of date_histogram interval with fixed_interval (elastic#76876) ...

cee-chen added release_note:enhancement Feature:Plugins v7.10.0 labels Sep 4, 2020

cee-chen requested review from scottybollinger and a team September 4, 2020 00:41

cee-chen requested a review from a team as a code owner September 4, 2020 00:41

afharo approved these changes Sep 4, 2020

View reviewed changes

scottybollinger approved these changes Sep 4, 2020

View reviewed changes

cee-chen and others added 14 commits September 9, 2020 10:48

[public] Register Enterprise search plugin

b3b8363

+ move new Home strings to constants

[server] Register plugin access/visibility

71fb659

Set up Enterprise Search plugin telemetry

feec1a5

- client-side: SendEnterpriseSearchTelemetry - server-side: register saved objects, usage collector, etc.

Enterprise search overview views (#23)

8b805fd

* Add formatTestSubj util This allows us to correctly format strings into our casing for data-test-subj attrs * Add images and stylesheet * Add product card component * Add index component * Remove unused styles

Fix inter-plugin links

c1a4655

- by add shouldNotCreateHref prop to RR helpers - similiar to breadcrumb change

Fix/clean up CSS

38a1dc2

- Prefer EUI components over bespoke CSS (e.g. EuiCard) - Remove unused or unspecific CSS - Pull out product card CSS to its component - Fix kebab-cased CSS classes to camelCased

Clean up ProductCard props

d82cd1b

- Prefer passing in our plugin consts instead of separate props - Move productCardDescription to constants - Update tests

Add telemetry clicked actions to product buttons

78bcc05

+ revert data-test-subj strings to previous implementation + prune format_test_subj helper by using lodash util directly

[PR feedback] Add new plugin to applicationUsageSchema per telemetry …

ed83698

…team request

Fix failing functional navLinks test

66410e1

Fix telemetry schema test

e9e64eb

[Perf] Optimize assets size by switching from 300kb SVG to 25kb PNG

302035c

Only show product cards if the user has access to that product

8718473

- adds access checks - fixes flex/CSS to show one card at a time

cee-chen force-pushed the enterprise-search-overview-plugin branch from 82cef3f to 8718473 Compare September 9, 2020 17:49

cee-chen merged commit d67a421 into elastic:master Sep 9, 2020

cee-chen deleted the enterprise-search-overview-plugin branch September 9, 2020 19:54

cee-chen mentioned this pull request Sep 9, 2020

[7.x] [Enterprise Search] Add Overview landing page/plugin (#76734) #77113

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Enterprise Search] Add Overview landing page/plugin #76734

[Enterprise Search] Add Overview landing page/plugin #76734

cee-chen commented Sep 4, 2020 •

edited

Loading

cee-chen commented Sep 4, 2020

afharo left a comment

afharo Sep 4, 2020

cee-chen Sep 8, 2020

cee-chen Sep 8, 2020

scottybollinger left a comment

cee-chen commented Sep 8, 2020

cee-chen commented Sep 8, 2020

zumwalt commented Sep 8, 2020

cee-chen commented Sep 8, 2020

kibanamachine commented Sep 9, 2020

[Enterprise Search] Add Overview landing page/plugin #76734

[Enterprise Search] Add Overview landing page/plugin #76734

Conversation

cee-chen commented Sep 4, 2020 • edited Loading

Summary

Screencaps

Dark mode:

Side nav:

Telemetry:

QA

Checklist

Release note

cee-chen commented Sep 4, 2020

afharo left a comment

Choose a reason for hiding this comment

afharo Sep 4, 2020

Choose a reason for hiding this comment

cee-chen Sep 8, 2020

Choose a reason for hiding this comment

cee-chen Sep 8, 2020

Choose a reason for hiding this comment

scottybollinger left a comment

Choose a reason for hiding this comment

cee-chen commented Sep 8, 2020

cee-chen commented Sep 8, 2020

zumwalt commented Sep 8, 2020

cee-chen commented Sep 8, 2020

kibanamachine commented Sep 9, 2020

💚 Build Succeeded

Build metrics

@kbn/optimizer bundle module count

async chunks size

miscellaneous assets size

page load bundle size

distributable file count

History

cee-chen commented Sep 4, 2020 •

edited

Loading