Refine Painless Playground UI/UX #5

cjcenizal · 2020-02-07T01:22:56Z

Changes in this PR:

Convert to 2-panel layout.
Move Context tab into right panel and break out a separate tab for Parameters.
Use EuiBottomBar for main controls.
Move Response into Request flyout.
Prepopulate the playground with the heart script.
Send debounced requests as the user types and remove the Test button.
Show request progress/success/failure indicator in "Output" tab.
Add "Beta" label.
Refine Context form help text and form components.
Add links to docs.

Next steps for subsequent PRs:

From the API docs it looks like the UI is missing a "query" field for score context.
Improve description copy of each context type.
Add a docLinks service.
Fix the odd visual layout issues with the code editors (large gutters, overlapping lines).
Prepopulate index-selection field with a list of available indices. At a later stage we can enhance this to be a flyout that lets you preview the mappings of each index to help you select the one you want.
The parameters field should be a component that lets you add key-value pairs via a list editor. There can be a button that lets you switch back and forth between the KV list mode and JSON editing mode.

…BottomBar for main controls.

jloleysens · 2020-02-07T09:11:37Z

I'm liking this direction @cjcenizal ! I think the vertical split makes this feel more like Console which is a heavily used plugin in dev tools 👍.

[UPDATE]

What do you think of adding the resizable panels component here?

Move Response from a tab to a modal, triggered by a "Show full response" button in the Output tab

Do you think the context form could similarly live inside a modal or a flyout?

Prepopulate the playground with the heart script

1000x yes!

kertal · 2020-02-07T11:24:43Z

I agree with @jloleysens, really nice changes, good to align it with Console, will check it out and play with it later on

…op. Use heart script as the example script.

cjcenizal · 2020-02-08T00:58:11Z

Thanks @jloleysens and @kertal! Made some more changes. I'd love to hear your thoughts.

What do you think of adding the resizable panels component here?

I haven't noticed any problems with the layout as-is, but I'm also not a power user so I'm not the best person to judge. Have you noticed an urgent problem that this would address? If not then I think it would be a nice addition but low priority.

Do you think the context form could similarly live inside a modal or a flyout?

My thought was that having it side-by-side with the input pane is useful because you're creating the context consumed by that input pane. So as a user you might want to refer to one while working on the other, which is easier when they don't cover each other up, like a modal would do. I'm not seeing the benefit that a flyout would have vs the existing tab -- do you have a strong opinion on this?

… in 'Output' tab.

cjcenizal · 2020-02-08T06:53:46Z

@jloleysens On second thought, the resizable panels will also be individually scrollable, which I think will come in handy when I make the code editors for the document and parameters taller. You'll be able to scroll down to see more of these editors without losing your place in the script, and vice versa.

kertal

This are big steps / improvements! 👍

A few notes from my side:

Really like the "BETA" :) do we even need a feature flag for it? We're already flagging it as "not ready but you can try it out". This way more users will try it out, since they don't need to go into our Advanced Settings.
Really nice UI tweak combining the output header with a OK, Progress, Failure icon
Great to have docs linked!
While the autosubmit is comfortable, I think it's better to submit with button/shortcut. Or to provide a autosubmit option, to let the user decide. when you write a longer script you might not want to have it submitted with every few keystrokes. You want to have syntax checking, which will be provided in the future in a different way.
So maybe the "Show API request" section bottom right, should have a main 'Test/Execute/Start' button, also the "Reset" functionality could be provided here. Similar like you did it in a recent iteration.

And just a few ideas about future stuff (No this PR). What I first tried when starting this was grouping the input / outputs logically:

Left side: Input Section, Code/Parameters/Context
Right side: Output Section, Code output / API Request / API Response

But we currently don't have an easy way to create such a layout, but the future of console that @jloleysens presented is pointing in this direction.

jloleysens · 2020-02-10T11:45:46Z

Really like the "BETA" :) do we even need a feature flag for it?

I agree, in this case, with the "Beta" badge we don't need to add a feature flag for this.

Or to provide a autosubmit option, to let the user decide

I agree that if we wanted to introduce this behaviour this would be the best way to do it. We can save that to localStorage, so that it persists. But I view it as an iteration on the REPL pattern (not default behaviour). I think of this as similar to the Start Job Now checkbox we added for rollup jobs at creation i.t.o. visual presentation.

Additional feedback

Seeing the screenshots I think the visual hierarchy is a bit off with the bottom bar because it overlaps the navbar on the right. Visually it would feel more specifically associated with the painless playground app if it were "behind" and not extending into the nav bar area to the left.

I think, given that we only have one line of horizontal text in the bottom bar perhaps it can have its padding reduced? At the moment it looks quite bulky. I also prefer the look of the EUIControlBar here (as a matter of personal preference), it also comes with space management goodies built in.

cjcenizal · 2020-02-10T21:27:29Z

Thank you @kertal and @jloleysens! Glad you like the progress so far. I think we're in agreement that we can leave out the feature flag.

While the autosubmit is comfortable, I think it's better to submit with button/shortcut. Or to provide a autosubmit option, to let the user decide. when you write a longer script you might not want to have it submitted with every few keystrokes. You want to have syntax checking, which will be provided in the future in a different way.

@jloleysens @kertal I think I need help seeing things from this perspective. Why would the user not want the script submitted every few keystrokes? I agree, we want/need syntax checking and the live-updating output is a substitute for that. But what problem does it introduce? Why is a submit button better? Happy to Zoom about this to gain some insight!

That's a really interesting layout idea. It made me think of the way tools like Final Cut Pro let you drag tabs between panes so you can customize your layout to fit your preference.

Re the bottom bar, I tried using EuiControlBar but it doesn't look like it supports containing popovers. And then the Design team pointed out that we can actually store our help links in the Help icon in the Kibana header:

I think if we do this then we can just find another place for the "Show API request" button, and maybe the need for the bottom bar goes away entirely. If we keep the bottom bar, we'll need to figure out a solution for the problem with it overlapping the side nav. I've brought this up with the design team, platform team, and core UI team, and haven't found an owner for this yet. That said, I pushed a commit to make it smaller anyway.

How do we feel about this PR? Can we merge + iterate, or do either of you want to block on any of these items?

cjcenizal · 2020-02-10T21:45:11Z

Looks like there is an EUI issue regarding EuiBottomBar and its incompatibility with the side nav: elastic/eui#1877

jloleysens · 2020-02-11T09:36:06Z

@cjcenizal in response to your questions regarding the debounced auto-submit:

Why would the user not want the script submitted every few keystrokes?

The scenario I have in mind is: I am developing a complicated painless script and the right pane is refreshing with messages like expected a ")" but instead saw "." (pseudo error). Given that the error text appears in full to the right of the editor this can feel distracting (where in IDEs the error is a squiggle under the text that displays on hover - so a bit more hidden).

[UPDATE]

One other case I can think of is if we are using a Java util like Random in our Painless script that delivers different output on each execution we will want to give users control over submission that is not tied to keystrokes.

Why is a submit button better?

My suggestion is that a submit button (or submit keyboard shortcut) can be used in combination with the auto-submit, but that you opt-out of auto-submit and can control when submission happens.

How do we feel about this PR?

Given my suggestion I am happy that this be submitted.

FWIW, I've noticed that the text type in EuiControlBar does allow for rendering React.ReactNode because it renders text (so we could render a button with popover there). I've asked Davey what the intention is behind this API so we probably shouldn't be using it in this way without checking.

kertal · 2020-02-12T10:12:56Z

Got nothing to add to @jloleysens, I'm fine with moving forward to further iterate.

cjcenizal · 2020-02-12T22:30:57Z

Thanks both! I'll merge this and write down outstanding items plus the issues you brought up.

cjcenizal · 2020-02-12T22:31:28Z

Oops actually, I don't have permission to merge. Could you merge this @kertal ?

…tic#50791)

…tic#54348)

…tic#58373)

…tic#59945) Backports the following commits to 7.x: - [Logs UI] Add expandable rows with category examples (elastic#54586)

* chore(NA): upgrade oss to lodash4 chore(NA): migrate cli, cli_plugin, cli_keystore, dev, test_utils and apm src script to lodash4 chore(NA): missing file for cli plugin chore(NA): add src core chore(NA): es archiver and fixtures chore(NA): try to fix functional test failure chore(NA): migrate src/legacy entirely to lodash4 except src/legacy/core_plugins chore(NA): move legacy core plugins to lodash4 chore(NA): upgrade optimize to lodash4 chore(NA): upgrade to lodash4 on advanced_settings, charts, console and dashboard chore(NA): migrate to lodash4 on dev_tools, discover, embeddable, es_ui)shared, expressions, home plugins chore(NA): upgrade data plugin to lodash4 chore(NA): upgrade usage_collection, ui_actions, tile_map, telemtry, share, saved_objects, saved_objects_management, region_map and navigation to lodash4 chore(NA): missing data upgrades to lodash4 Revert "chore(NA): upgrade usage_collection, ui_actions, tile_map, telemtry, share, saved_objects, saved_objects_management, region_map and navigation to lodash4" This reverts commit 137055c5fed2fc52bb26547e0bc1ad2e3d4fe309. Revert "Revert "chore(NA): upgrade usage_collection, ui_actions, tile_map, telemtry, share, saved_objects, saved_objects_management, region_map and navigation to lodash4"" This reverts commit f7e73688782998513d9fb6d7e8f0765e9beb28d1. Revert "chore(NA): missing data upgrades to lodash4" This reverts commit 92b85bf947a89bfc70cc4052738a6b2128ffb076. Revert "chore(NA): upgrade data plugin to lodash4" This reverts commit 88fdb075ee1e26c4ac979b6681d8a2b002df74c6. chore(NA): upgrade idx_pattern_mgt, input_control_vis, inspector, kbn_legacy, kbn_react, kbn_usage_collections, kbn_utils, management and maps_legacy to lodash4 chore(NA): map src plugin data to lodash3 chore(NA): missing lodash.clonedeep dep chore(NA): change packages kbn-config-schema deps chore(NA): update renovate config chore(NA): upgrade vis_type plugins to lodash4 chore(NA): move vis_type_vislib to lodash3 chore(NA): update visualizations and visualize to lodash4 chore(NA): remove lodash 3 types from src and move test to lodash4 chore(NA): move home, usage_collection and management to lodash 3 Revert "chore(NA): move home, usage_collection and management to lodash 3" This reverts commit f86e8585f02d21550746569af54215b076a79a3d. chore(NA): move kibana_legacy, saved_objects saved_objects_management into lodash3 chore(NA): update x-pack test to mock lodash4 Revert "chore(NA): move kibana_legacy, saved_objects saved_objects_management into lodash3" This reverts commit 2d10fe450533e1b36db21d99cfae3ce996a244e0. * chore(NA): move x-pack and packages to lodash 4 * chore(NA): remove mention to lodash from main package.json * chore(NA): remove helper alias for lodash4 and make it the default lodash * chore(NA): fix last failing types in the repo * chore(NA): fix public api * chore(NA): fix types for agg_row.tsx * chore(NA): fix increment of optimizer modules in the rollup plugin * chore(NA): migrate `src/core/public/http/fetch.ts` (#5) * omit undefined query props * just remove merge usage * fix types * chore(NA): fixes for feedback from apm team * chore(NA): recover old behaviour on apm LoadingIndeicatorContext.tsx * chore(NA): fixes for feedback from watson * Platform lodash4 tweaks (#6) * chore(NA): fix types and behaviour on src/core/server/elasticsearch/errors.ts * Canvas fixes for lodash upgrade * [APM] Adds unit test for APM service maps transform (#7) * Adds a snapshot unit test for getConnections and rearranges some code to make testing easier * reverts `ArrayList` back to `String[]` in the painless script within `fetch_service_paths_from_trace_ids.ts` * chore(NA): update yarn.lock * chore(NA): remove any and use a real type for alerts task runner Co-authored-by: Gidi Meir Morris <[email protected]> * chore(NA): used named import for triggers_actions_ui file * chore(NA): fix eslint * chore(NA): fix types * Delete most uptime lodash references. * Simplify. Clean up types. * [Uptime] Delete most uptime lodash references (#8) * Delete most uptime lodash references. * Simplify. Clean up types. * chore(NA): add eslint rule to avoid using lodash3 * chore(NA): apply changes on feedback from es-ui team * fix some types (#9) * Clean up some expressions types. * chore(NA): missing ts-expect-error statements * Upgrade lodash 4 vislib (#11) * replace lodash 3 with lodash 4 on vislib plugin * Further changes * further replacement of lodash3 to 4 * further work on upgrading to lodash 4 * final changes to update lodash * chore(NA): upgrade data plugin to lodash4 chore(NA): upgrade data plugin public to lodash4 chore(NA): fix typecheck task chore(NA): fix agg_config with hasIn chore(NA): assign to assignIn and has to hasIn chore(NA): upgrade data plugin server to lodash4 chore(NA): new signature for core api fix(NA): match behaviour between lodash3 and lodash4 for set in search_source * chore(NA): remove lodash3 completely from the repo * chore(NA): fix x-pack/test/api_integration/apis/metrics_ui/snapshot.ts missing content * chore(NA): fix lodash usage on apm * chore(NA): fix typecheck for maps * Patch lodash template (#12) * Applying changes from elastic#64985 * Using isIterateeCall, because it seems less brittle * Also patching `lodash/template` and `lodash/fp/template` * Reorganizing some files... * Revising comment * Ends up `_` is a function also... I hate JavaScript Co-authored-by: Pierre Gayvallet <[email protected]> Co-authored-by: Josh Dover <[email protected]> Co-authored-by: Clint Andrew Hall <[email protected]> Co-authored-by: Oliver Gupte <[email protected]> Co-authored-by: Elastic Machine <[email protected]> Co-authored-by: Gidi Meir Morris <[email protected]> Co-authored-by: Justin Kambic <[email protected]> Co-authored-by: Stratoula Kalafateli <[email protected]> Co-authored-by: Luke Elmers <[email protected]> Co-authored-by: Brandon Kobel <[email protected]> Co-authored-by: kobelb <[email protected]>

* chore(NA): upgrade to lodash@4 (elastic#69868) * chore(NA): upgrade oss to lodash4 chore(NA): migrate cli, cli_plugin, cli_keystore, dev, test_utils and apm src script to lodash4 chore(NA): missing file for cli plugin chore(NA): add src core chore(NA): es archiver and fixtures chore(NA): try to fix functional test failure chore(NA): migrate src/legacy entirely to lodash4 except src/legacy/core_plugins chore(NA): move legacy core plugins to lodash4 chore(NA): upgrade optimize to lodash4 chore(NA): upgrade to lodash4 on advanced_settings, charts, console and dashboard chore(NA): migrate to lodash4 on dev_tools, discover, embeddable, es_ui)shared, expressions, home plugins chore(NA): upgrade data plugin to lodash4 chore(NA): upgrade usage_collection, ui_actions, tile_map, telemtry, share, saved_objects, saved_objects_management, region_map and navigation to lodash4 chore(NA): missing data upgrades to lodash4 Revert "chore(NA): upgrade usage_collection, ui_actions, tile_map, telemtry, share, saved_objects, saved_objects_management, region_map and navigation to lodash4" This reverts commit 137055c5fed2fc52bb26547e0bc1ad2e3d4fe309. Revert "Revert "chore(NA): upgrade usage_collection, ui_actions, tile_map, telemtry, share, saved_objects, saved_objects_management, region_map and navigation to lodash4"" This reverts commit f7e73688782998513d9fb6d7e8f0765e9beb28d1. Revert "chore(NA): missing data upgrades to lodash4" This reverts commit 92b85bf947a89bfc70cc4052738a6b2128ffb076. Revert "chore(NA): upgrade data plugin to lodash4" This reverts commit 88fdb075ee1e26c4ac979b6681d8a2b002df74c6. chore(NA): upgrade idx_pattern_mgt, input_control_vis, inspector, kbn_legacy, kbn_react, kbn_usage_collections, kbn_utils, management and maps_legacy to lodash4 chore(NA): map src plugin data to lodash3 chore(NA): missing lodash.clonedeep dep chore(NA): change packages kbn-config-schema deps chore(NA): update renovate config chore(NA): upgrade vis_type plugins to lodash4 chore(NA): move vis_type_vislib to lodash3 chore(NA): update visualizations and visualize to lodash4 chore(NA): remove lodash 3 types from src and move test to lodash4 chore(NA): move home, usage_collection and management to lodash 3 Revert "chore(NA): move home, usage_collection and management to lodash 3" This reverts commit f86e8585f02d21550746569af54215b076a79a3d. chore(NA): move kibana_legacy, saved_objects saved_objects_management into lodash3 chore(NA): update x-pack test to mock lodash4 Revert "chore(NA): move kibana_legacy, saved_objects saved_objects_management into lodash3" This reverts commit 2d10fe450533e1b36db21d99cfae3ce996a244e0. * chore(NA): move x-pack and packages to lodash 4 * chore(NA): remove mention to lodash from main package.json * chore(NA): remove helper alias for lodash4 and make it the default lodash * chore(NA): fix last failing types in the repo * chore(NA): fix public api * chore(NA): fix types for agg_row.tsx * chore(NA): fix increment of optimizer modules in the rollup plugin * chore(NA): migrate `src/core/public/http/fetch.ts` (#5) * omit undefined query props * just remove merge usage * fix types * chore(NA): fixes for feedback from apm team * chore(NA): recover old behaviour on apm LoadingIndeicatorContext.tsx * chore(NA): fixes for feedback from watson * Platform lodash4 tweaks (#6) * chore(NA): fix types and behaviour on src/core/server/elasticsearch/errors.ts * Canvas fixes for lodash upgrade * [APM] Adds unit test for APM service maps transform (#7) * Adds a snapshot unit test for getConnections and rearranges some code to make testing easier * reverts `ArrayList` back to `String[]` in the painless script within `fetch_service_paths_from_trace_ids.ts` * chore(NA): update yarn.lock * chore(NA): remove any and use a real type for alerts task runner Co-authored-by: Gidi Meir Morris <[email protected]> * chore(NA): used named import for triggers_actions_ui file * chore(NA): fix eslint * chore(NA): fix types * Delete most uptime lodash references. * Simplify. Clean up types. * [Uptime] Delete most uptime lodash references (#8) * Delete most uptime lodash references. * Simplify. Clean up types. * chore(NA): add eslint rule to avoid using lodash3 * chore(NA): apply changes on feedback from es-ui team * fix some types (#9) * Clean up some expressions types. * chore(NA): missing ts-expect-error statements * Upgrade lodash 4 vislib (#11) * replace lodash 3 with lodash 4 on vislib plugin * Further changes * further replacement of lodash3 to 4 * further work on upgrading to lodash 4 * final changes to update lodash * chore(NA): upgrade data plugin to lodash4 chore(NA): upgrade data plugin public to lodash4 chore(NA): fix typecheck task chore(NA): fix agg_config with hasIn chore(NA): assign to assignIn and has to hasIn chore(NA): upgrade data plugin server to lodash4 chore(NA): new signature for core api fix(NA): match behaviour between lodash3 and lodash4 for set in search_source * chore(NA): remove lodash3 completely from the repo * chore(NA): fix x-pack/test/api_integration/apis/metrics_ui/snapshot.ts missing content * chore(NA): fix lodash usage on apm * chore(NA): fix typecheck for maps * Patch lodash template (#12) * Applying changes from elastic#64985 * Using isIterateeCall, because it seems less brittle * Also patching `lodash/template` and `lodash/fp/template` * Reorganizing some files... * Revising comment * Ends up `_` is a function also... I hate JavaScript Co-authored-by: Pierre Gayvallet <[email protected]> Co-authored-by: Josh Dover <[email protected]> Co-authored-by: Clint Andrew Hall <[email protected]> Co-authored-by: Oliver Gupte <[email protected]> Co-authored-by: Elastic Machine <[email protected]> Co-authored-by: Gidi Meir Morris <[email protected]> Co-authored-by: Justin Kambic <[email protected]> Co-authored-by: Stratoula Kalafateli <[email protected]> Co-authored-by: Luke Elmers <[email protected]> Co-authored-by: Brandon Kobel <[email protected]> Co-authored-by: kobelb <[email protected]> # Conflicts: # renovate.json5 # x-pack/plugins/apm/public/services/rest/observability_dashboard.ts # x-pack/plugins/canvas/common/lib/pivot_object_array.ts # x-pack/plugins/canvas/public/components/workpad_templates/workpad_templates.js # x-pack/plugins/canvas/server/collectors/custom_element_collector.ts # x-pack/plugins/canvas/server/collectors/workpad_collector.ts * chore(NA): updated kbn-pm dist file

@johnbarrierwilson

* Initial App Search in Kibana plugin work - Initializes a new platform plugin that ships out of the box w/ x-pack - Contains a very basic front-end that shows AS engines, error states, or a Setup Guide - Contains a very basic server that remotely calls the AS internal engines API and returns results * Update URL casing to match Kibana best practices - URL casing appears to be snake_casing, but kibana.json casing appears to be camelCase * Register App Search plugin in Home Feature Catalogue * Add custom App Search in Kibana logo - I haven't had much success in surfacing a SVG file via a server-side endpoint/URL, but then I realized EuiIcon supports passing in a ReactElement directly. Woo! * Fix appSearch.host config setting to be optional - instead of crashing folks on load * Rename plugin to Enterprise Search - per product decision, URL should be enterprise_search/app_search and Workplace Search should also eventually live here - reorganize folder structure in anticipation for another workplace_search plugin/codebase living alongside app_search - rename app.tsx/main.tsx to a standard top-level index.tsx (which will contain top-level routes/state) - rename AS->ES files/vars where applicable - TODO: React Router * Set up React Router URL structure * Convert showSetupGuide action/flag to a React Router link - remove showSetupGuide flag - add a new shared helper component for combining EuiButton/EuiLink with React Router behavior (https://github.com/elastic/eui/blob/master/wiki/react-router.md#react-router-51) * Implement Kibana Chrome breadcrumbs - create shared helper (WS will presumably also want this) for generating EUI breadcrumb objects with React Router links+click behavior - create React component that calls chrome.setBreadcrumbs on page mount - clean up type definitions - move app-wide props to IAppSearchProps and update most pages/views to simply import it instead of calling their own definitions * Added server unit tests (#2) * Added unit test for server * PR Feedback * Refactor top-level Kibana props to a global context state - rather them passing them around verbosely as props, the components that need them should be able to call the useContext hook + Remove IAppSearchProps in favor of IKibanaContext + Also rename `appSearchUrl` to `enterpriseSearchUrl`, since this context will contained shared/Kibana-wide values/actions useful to both AS and WS * Added unit tests for public (#4) * application.test.ts * Added Unit Test for EngineOverviewHeader * Added Unit Test for generate_breadcrumbs * Added Unit Test for set_breadcrumb.tsx * Added a unit test for link_events - Also changed link_events.tsx to link_events.ts since it's just TS, no React - Modified letBrowserHandleEvent so it will still return a false boolean when target is blank * Betterize these tests Co-Authored-By: Constance <[email protected]> Co-authored-by: Constance <[email protected]> * Add UI telemetry tracking to AS in Kibana (#5) * Set up Telemetry usageCollection, savedObjects, route, & shared helper - The Kibana UsageCollection plugin handles collecting our telemetry UI data (views, clicks, errors, etc.) and pushing it to elastic's telemetry servers - That data is stored in incremented in Kibana's savedObjects lib/plugin (as well as mapped) - When an end-user hits a certain view or action, the shared helper will ping the app search telemetry route which increments the savedObject store * Update client-side views/links to new shared telemetry helper * Write tests for new telemetry files * Implement remaining unit tests (#7) * Write tests for React Router+EUI helper components * Update generate_breadcrumbs test - add test suite for generateBreadcrumb() itself (in order to cover a missing branch) - minor lint fixes - remove unnecessary import from set_breadcrumbs test * Write test for get_username util + update test to return a more consistent falsey value (null) * Add test for SetupGuide * [Refactor] Pull out various Kibana context mocks into separate files - I'm creating a reusable useContext mock for shallow()ed enzyme components + add more documentation comments + examples * Write tests for empty state components + test new usecontext shallow mock * Empty state components: Add extra getUserName branch test * Write test for app search index/routes * Write tests for engine overview table + fix bonus bug * Write Engine Overview tests + Update EngineOverview logic to account for issues found during tests :) - Move http to async/await syntax instead of promise syntax (works better with existing HttpServiceMock jest.fn()s) - hasValidData wasn't strict enough in type checking/object nest checking and was causing the app itself to crash (no bueno) * Refactor EngineOverviewHeader test to use shallow + to full coverage - missed adding this test during telemetry work - switching to shallow and beforeAll reduces the test time from 5s to 4s! * [Refactor] Pull out React Router history mocks into a test util helper + minor refactors/updates * Add small tests to increase branch coverage - mostly testing fallbacks or removing fallbacks in favor of strict type interface - these are slightly obsessive so I'd also be fine ditching them if they aren't terribly valuable * Address larger tech debt/TODOs (#8) * Fix optional chaining TODO - turns out my local Prettier wasn't up to date, completely my bad * Fix constants TODO - adds a common folder/architecture for others to use in the future * Remove TODO for eslint-disable-line and specify lint rule being skipped - hopefully that's OK for review, I can't think of any other way to sanely do this without re-architecting the entire file or DDoSing our API * Add server-side logging to route dependencies + add basic example of error catching/logging to Telemetry route + [extra] refactor mockResponseFactory name to something slightly easier to read * Move more Engines Overview API logic/logging to server-side - handle data validation in the server-side - wrap server-side API in a try/catch to account for fetch issues - more correctly return 2xx/4xx statuses and more correctly deal with those responses in the front-end - Add server info/error/debug logs (addresses TODO) - Update tests + minor refactors/cleanup - remove expectResponseToBe200With helper (since we're now returning multiple response types) and instead make mockResponse var name more readable - one-line header auth - update tests with example error logs - update schema validation for `type` to be an enum of `indexed`/`meta` (more accurately reflecting API) * Per telemetry team feedback, rename usageCollection telemetry mapping name to simpler 'app_search' - since their mapping already nests under 'kibana.plugins' - note: I left the savedObjects name with the '_telemetry' suffix, as there very well may be a use case for top-level generic 'app_search' saved objects * Update Setup Guide installation instructions (#9) Co-authored-by: Chris Cressman <[email protected]> * [Refactor] DRY out route test helper * [Refactor] Rename public/test_utils to public/__mocks__ - to better follow/use jest setups and for .mock.ts suffixes * Add platinum licensing check to Meta Engines table/call (#11) * Licensing plugin setup * Add LicensingContext setup * Update EngineOverview to not hit meta engines API on platinum license * Add Jest test helpers for future shallow/context use * Update plugin to use new Kibana nav + URL update (#12) * Update new nav categories to add Enterprise Search + update plugin to use new category - per @johnbarrierwilson and Matt Riley, Enterprise Search should be under Kibana and above Observability - Run `node scripts/check_published_api_changes.js --accept` since this new category affects public API * [URL UPDATE] Change '/app/enterprise_search/app_search' to '/app/app_search' - This needs to be done because App Search and Workplace search *have* to be registered as separate plugins to have 2 distinct nav links - Currently Kibana doesn't support nested app names (see: elastic#59190) but potentially will in the future - To support this change, we need to update applications/index.tsx to NOT handle '/app/enterprise_search' level routing, but instead accept an async imported app component (e.g. AppSearch, WorkplaceSearch). - AppSearch should now treat its router as root '/' instead of '/app_search' - (Addl) Per Josh Dover's recommendation, switch to `<Router history={params.history}>` from `<BrowserRouter basename={params.appBasePath}>` since they're deprecating appBasePath * Update breadcrumbs helper to account for new URLs - Remove path for Enterprise Search breadcrumb, since '/app/enterprise_search' will not link anywhere meaningful for the foreseeable future, so the Enterprise Search root should not go anywhere - Update App Search helper to go to root path, per new React Router setup Test changes: - Mock custom basepath for App Search tests - Swap enterpriseSearchBreadcrumbs and appSearchBreadcrumbs test order (since the latter overrides the default mock) * Add create_first_engine_button telemetry tracking to EmptyState * Switch plugin URLs back to /app/enterprise_search/app_search Now that elastic#66455 has been merged in 🎉 * Add i18n formatted messages / translations (#13) * Add i18n provider and formatted/i18n translated messages * Update tests to account for new I18nProvider context + FormattedMessage components - Add new mountWithContext helper that provides all contexts+providers used in top-level app - Add new shallowWithIntl helper for shallow() components that dive into FormattedMessage * Format i18n dates and numbers + update some mock tests to not throw react-intl invalid date messages * Update EngineOverviewHeader to disable button on prop * Address review feedback (#14) * Fix Prettier linting issues * Escape App Search API endpoint URLs - per PR feedback - querystring should automatically encodeURIComponent / escape query param strings * Update server plugin.ts to use getStartServices() rather than storing local references from start() - Per feedback: https://github.com/elastic/kibana/blob/master/src/core/CONVENTIONS.md#applications - Note: savedObjects.registerType needs to be outside of getStartServices, or an error is thrown - Side update to registerTelemetryUsageCollector to simplify args - Update/fix tests to account for changes * E2E testing (#6) * Wired up basics for E2E testing * Added version with App Search * Updated naming * Switched configuration around * Added concept of 'fixtures' * Figured out how to log in as the enterprise_search user * Refactored to use an App Search service * Added some real tests * Added a README * Cleanup * More cleanup * Error handling + README updatre * Removed unnecessary files * Apply suggestions from code review Co-authored-by: Constance <[email protected]> * Update x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview/engine_table.tsx Co-authored-by: Constance <[email protected]> * PR feedback - updated README * Additional lint fixes Co-authored-by: Constance <[email protected]> * Add README and CODEOWNERS (#15) * Add plugin README and CODEOWNERS * Fix Typescript errors (#16) * Fix public mocks * Fix empty states types * Fix engine table component errors * Fix engine overview component errors * Fix setup guide component errors - SetBreadcrumbs will be fixed in a separate commit * Fix App Search index errors * Fix engine overview header component errors * Fix applications context index errors * Fix kibana breadcrumb helper errors * Fix license helper errors * ❗ Refactor React Router EUI link/button helpers - in order to fix typescript errors - this changes the component logic significantly to a react render prop, so that the Link and Button components can have different types - however, end behavior should still remain the same * Fix telemetry helper errors * Minor unused var cleanup in plugin files * Fix telemetry collector/savedobjects errors * Fix MockRouter type errors and add IRouteDependencies export - routes will use IRouteDependencies in the next few commits * Fix engines route errors * Fix telemetry route errors * Remove any type from source code - thanks to Scotty for the inspiration * Add eslint rules for Enterprise Search plugin - Add checks for type any, but only on non-test files - Disable react-hooks/exhaustive-deps, since we're already disabling it in a few files and other plugins also have it turned off * Cover uncovered lines in engines_table and telemetry tests * Fixed TS warnings in E2E tests (#17) * Feedback: Convert static CSS values to EUI variables where possible * Feedback: Flatten nested CSS where possible - Prefer setting CSS class overrides on individual EUI components, not on a top-level page + Change CSS class casing from kebab-case to camelCase to better match EUI/Kibana + Remove unnecessary .euiPageContentHeader margin-bottom override by changing the panelPaddingSize of euiPageContent + Decrease engine overview table padding on mobile * Refactor out components shared with Workplace Search (elastic#18) * Move getUserName helper to shared - in preparation for Workplace Search plugin also using this helper * Move Setup Guide layout to a shared component * Setup Guide: add extra props for standard/native auth links Note: It's possible this commit may be unnecessary if we can publish shared Enterprise Search security mode docs * Update copy per feedback from copy team * Address various telemetry issues - saved objects: removing indexing per elastic#43673 - add schema and generate json per elastic#64942 - move definitions over to collectors since saved objects is mostly empty at this point, and schema throws an error when it imports an obj instead of being defined inline - istanbul ignore saved_objects file since it doesn't have anything meaningful to test but was affecting code coverage * Disable plugin access if a normal user does not have access to App Search (elastic#19) * Set up new server security dependency and configs * Set up access capabilities * Set up checkAccess helper/caller * Remove NoUserState component from the public UI - Since this is now being handled by checkAccess / normal users should never see the plugin at all if they don't have an account/access, the component is no longer needed * Update server routes to account for new changes - Remove login redirect catch from routes, since the access helper should now handle that for most users by disabling the plugin (superusers will see a generic cannot connect/error screen) - Refactor out new config values to a shared mock * Refactor Enterprise Search http call to hit/return new internal API endpoint + pull out the http call to a separate library for upcoming public URL work (so that other files can call it directly as well) * [Discussion] Increase timeout but add another warning timeout for slow servers - per recommendation/convo with Brandon * Register feature control * Remove no_as_account from UI telemetry - since we're no longer tracking that in the UI * Address PR feedback - isSuperUser check * Public URL support for Elastic Cloud (elastic#21) * Add server-side public URL route - Per feedback from Kibana platform team, it's not possible to pass info from server/ to public/ without a HTTP call :[ * Update MockRouter for routes without any payload/params * Add client-side helper for calling the new public URL API + API seems to return a URL a trailing slash, which we need to omit * Update public/plugin.ts to check and set a public URL - relies on this.hasCheckedPublicUrl to only make the call once per page load instead of on every page nav * Fix failing feature control tests - Split up scenario cases as needed - Add plugin as an exception alongside ML & Monitoring * Address PR feedback - version: kibana - copy edits - Sass vars - code cleanup * Casing feedback: change all plugin registration IDs from snake_case to camelCase - note: current remainng snake_case exceptions are telemetry keys - file names and api endpoints are snake_case per conventions * Misc security feedback - remove set - remove unnecessary capabilities registration - telemetry namespace agnostic * Security feedback: add warn logging to telemetry collector see elastic#66922 (comment) - add if statement - pass log dependency around (this is kinda medium, should maybe refactor) - update tests - move test file comment to the right file (was meant for telemetry route file) * Address feedback from Pierre - Remove unnecessary ServerConfigType - Remove unnecessary uiCapabilities - Move registerTelemetryRoute / SavedObjectsServiceStart workaround - Remove unnecessary license optional chaining * PR feedback Address type/typos * Fix telemetry API call returning 415 on Chrome - I can't even?? I swear charset=utf-8 fixed the same error a few weeks ago * Fix failing tests * Update Enterprise Search functional tests (without host) to run on CI - Fix incorrect navigateToApp slug (hadn't realized this was a URL, not an ID) - Update without_host_configured tests to run without API key - Update README * Address PR feedback from Pierre - remove unnecessary authz? - remove unnecessary content-type json headers - add loggingSystemMock.collect(mockLogger).error assertion - reconstrcut new MockRouter on beforeEach for better sandboxing - fix incorrect describe()s -should be it() - pull out reusable mockDependencies helper (renamed/extended from mockConfig) for tests that don't particularly use config/log but still want to pass type definitions - Fix comment copy Co-authored-by: Jason Stoltzfus <[email protected]> Co-authored-by: Chris Cressman <[email protected]> Co-authored-by: scottybollinger <[email protected]> Co-authored-by: Elastic Machine <[email protected]>

@johnbarrierwilson

* Initial App Search in Kibana plugin work - Initializes a new platform plugin that ships out of the box w/ x-pack - Contains a very basic front-end that shows AS engines, error states, or a Setup Guide - Contains a very basic server that remotely calls the AS internal engines API and returns results * Update URL casing to match Kibana best practices - URL casing appears to be snake_casing, but kibana.json casing appears to be camelCase * Register App Search plugin in Home Feature Catalogue * Add custom App Search in Kibana logo - I haven't had much success in surfacing a SVG file via a server-side endpoint/URL, but then I realized EuiIcon supports passing in a ReactElement directly. Woo! * Fix appSearch.host config setting to be optional - instead of crashing folks on load * Rename plugin to Enterprise Search - per product decision, URL should be enterprise_search/app_search and Workplace Search should also eventually live here - reorganize folder structure in anticipation for another workplace_search plugin/codebase living alongside app_search - rename app.tsx/main.tsx to a standard top-level index.tsx (which will contain top-level routes/state) - rename AS->ES files/vars where applicable - TODO: React Router * Set up React Router URL structure * Convert showSetupGuide action/flag to a React Router link - remove showSetupGuide flag - add a new shared helper component for combining EuiButton/EuiLink with React Router behavior (https://github.com/elastic/eui/blob/master/wiki/react-router.md#react-router-51) * Implement Kibana Chrome breadcrumbs - create shared helper (WS will presumably also want this) for generating EUI breadcrumb objects with React Router links+click behavior - create React component that calls chrome.setBreadcrumbs on page mount - clean up type definitions - move app-wide props to IAppSearchProps and update most pages/views to simply import it instead of calling their own definitions * Added server unit tests (#2) * Added unit test for server * PR Feedback * Refactor top-level Kibana props to a global context state - rather them passing them around verbosely as props, the components that need them should be able to call the useContext hook + Remove IAppSearchProps in favor of IKibanaContext + Also rename `appSearchUrl` to `enterpriseSearchUrl`, since this context will contained shared/Kibana-wide values/actions useful to both AS and WS * Added unit tests for public (#4) * application.test.ts * Added Unit Test for EngineOverviewHeader * Added Unit Test for generate_breadcrumbs * Added Unit Test for set_breadcrumb.tsx * Added a unit test for link_events - Also changed link_events.tsx to link_events.ts since it's just TS, no React - Modified letBrowserHandleEvent so it will still return a false boolean when target is blank * Betterize these tests Co-Authored-By: Constance <[email protected]> Co-authored-by: Constance <[email protected]> * Add UI telemetry tracking to AS in Kibana (#5) * Set up Telemetry usageCollection, savedObjects, route, & shared helper - The Kibana UsageCollection plugin handles collecting our telemetry UI data (views, clicks, errors, etc.) and pushing it to elastic's telemetry servers - That data is stored in incremented in Kibana's savedObjects lib/plugin (as well as mapped) - When an end-user hits a certain view or action, the shared helper will ping the app search telemetry route which increments the savedObject store * Update client-side views/links to new shared telemetry helper * Write tests for new telemetry files * Implement remaining unit tests (#7) * Write tests for React Router+EUI helper components * Update generate_breadcrumbs test - add test suite for generateBreadcrumb() itself (in order to cover a missing branch) - minor lint fixes - remove unnecessary import from set_breadcrumbs test * Write test for get_username util + update test to return a more consistent falsey value (null) * Add test for SetupGuide * [Refactor] Pull out various Kibana context mocks into separate files - I'm creating a reusable useContext mock for shallow()ed enzyme components + add more documentation comments + examples * Write tests for empty state components + test new usecontext shallow mock * Empty state components: Add extra getUserName branch test * Write test for app search index/routes * Write tests for engine overview table + fix bonus bug * Write Engine Overview tests + Update EngineOverview logic to account for issues found during tests :) - Move http to async/await syntax instead of promise syntax (works better with existing HttpServiceMock jest.fn()s) - hasValidData wasn't strict enough in type checking/object nest checking and was causing the app itself to crash (no bueno) * Refactor EngineOverviewHeader test to use shallow + to full coverage - missed adding this test during telemetry work - switching to shallow and beforeAll reduces the test time from 5s to 4s! * [Refactor] Pull out React Router history mocks into a test util helper + minor refactors/updates * Add small tests to increase branch coverage - mostly testing fallbacks or removing fallbacks in favor of strict type interface - these are slightly obsessive so I'd also be fine ditching them if they aren't terribly valuable * Address larger tech debt/TODOs (#8) * Fix optional chaining TODO - turns out my local Prettier wasn't up to date, completely my bad * Fix constants TODO - adds a common folder/architecture for others to use in the future * Remove TODO for eslint-disable-line and specify lint rule being skipped - hopefully that's OK for review, I can't think of any other way to sanely do this without re-architecting the entire file or DDoSing our API * Add server-side logging to route dependencies + add basic example of error catching/logging to Telemetry route + [extra] refactor mockResponseFactory name to something slightly easier to read * Move more Engines Overview API logic/logging to server-side - handle data validation in the server-side - wrap server-side API in a try/catch to account for fetch issues - more correctly return 2xx/4xx statuses and more correctly deal with those responses in the front-end - Add server info/error/debug logs (addresses TODO) - Update tests + minor refactors/cleanup - remove expectResponseToBe200With helper (since we're now returning multiple response types) and instead make mockResponse var name more readable - one-line header auth - update tests with example error logs - update schema validation for `type` to be an enum of `indexed`/`meta` (more accurately reflecting API) * Per telemetry team feedback, rename usageCollection telemetry mapping name to simpler 'app_search' - since their mapping already nests under 'kibana.plugins' - note: I left the savedObjects name with the '_telemetry' suffix, as there very well may be a use case for top-level generic 'app_search' saved objects * Update Setup Guide installation instructions (#9) Co-authored-by: Chris Cressman <[email protected]> * [Refactor] DRY out route test helper * [Refactor] Rename public/test_utils to public/__mocks__ - to better follow/use jest setups and for .mock.ts suffixes * Add platinum licensing check to Meta Engines table/call (#11) * Licensing plugin setup * Add LicensingContext setup * Update EngineOverview to not hit meta engines API on platinum license * Add Jest test helpers for future shallow/context use * Update plugin to use new Kibana nav + URL update (#12) * Update new nav categories to add Enterprise Search + update plugin to use new category - per @johnbarrierwilson and Matt Riley, Enterprise Search should be under Kibana and above Observability - Run `node scripts/check_published_api_changes.js --accept` since this new category affects public API * [URL UPDATE] Change '/app/enterprise_search/app_search' to '/app/app_search' - This needs to be done because App Search and Workplace search *have* to be registered as separate plugins to have 2 distinct nav links - Currently Kibana doesn't support nested app names (see: elastic#59190) but potentially will in the future - To support this change, we need to update applications/index.tsx to NOT handle '/app/enterprise_search' level routing, but instead accept an async imported app component (e.g. AppSearch, WorkplaceSearch). - AppSearch should now treat its router as root '/' instead of '/app_search' - (Addl) Per Josh Dover's recommendation, switch to `<Router history={params.history}>` from `<BrowserRouter basename={params.appBasePath}>` since they're deprecating appBasePath * Update breadcrumbs helper to account for new URLs - Remove path for Enterprise Search breadcrumb, since '/app/enterprise_search' will not link anywhere meaningful for the foreseeable future, so the Enterprise Search root should not go anywhere - Update App Search helper to go to root path, per new React Router setup Test changes: - Mock custom basepath for App Search tests - Swap enterpriseSearchBreadcrumbs and appSearchBreadcrumbs test order (since the latter overrides the default mock) * Add create_first_engine_button telemetry tracking to EmptyState * Switch plugin URLs back to /app/enterprise_search/app_search Now that elastic#66455 has been merged in 🎉 * Add i18n formatted messages / translations (#13) * Add i18n provider and formatted/i18n translated messages * Update tests to account for new I18nProvider context + FormattedMessage components - Add new mountWithContext helper that provides all contexts+providers used in top-level app - Add new shallowWithIntl helper for shallow() components that dive into FormattedMessage * Format i18n dates and numbers + update some mock tests to not throw react-intl invalid date messages * Update EngineOverviewHeader to disable button on prop * Address review feedback (#14) * Fix Prettier linting issues * Escape App Search API endpoint URLs - per PR feedback - querystring should automatically encodeURIComponent / escape query param strings * Update server plugin.ts to use getStartServices() rather than storing local references from start() - Per feedback: https://github.com/elastic/kibana/blob/master/src/core/CONVENTIONS.md#applications - Note: savedObjects.registerType needs to be outside of getStartServices, or an error is thrown - Side update to registerTelemetryUsageCollector to simplify args - Update/fix tests to account for changes * E2E testing (#6) * Wired up basics for E2E testing * Added version with App Search * Updated naming * Switched configuration around * Added concept of 'fixtures' * Figured out how to log in as the enterprise_search user * Refactored to use an App Search service * Added some real tests * Added a README * Cleanup * More cleanup * Error handling + README updatre * Removed unnecessary files * Apply suggestions from code review Co-authored-by: Constance <[email protected]> * Update x-pack/plugins/enterprise_search/public/applications/app_search/components/engine_overview/engine_table.tsx Co-authored-by: Constance <[email protected]> * PR feedback - updated README * Additional lint fixes Co-authored-by: Constance <[email protected]> * Add README and CODEOWNERS (#15) * Add plugin README and CODEOWNERS * Fix Typescript errors (#16) * Fix public mocks * Fix empty states types * Fix engine table component errors * Fix engine overview component errors * Fix setup guide component errors - SetBreadcrumbs will be fixed in a separate commit * Fix App Search index errors * Fix engine overview header component errors * Fix applications context index errors * Fix kibana breadcrumb helper errors * Fix license helper errors * ❗ Refactor React Router EUI link/button helpers - in order to fix typescript errors - this changes the component logic significantly to a react render prop, so that the Link and Button components can have different types - however, end behavior should still remain the same * Fix telemetry helper errors * Minor unused var cleanup in plugin files * Fix telemetry collector/savedobjects errors * Fix MockRouter type errors and add IRouteDependencies export - routes will use IRouteDependencies in the next few commits * Fix engines route errors * Fix telemetry route errors * Remove any type from source code - thanks to Scotty for the inspiration * Add eslint rules for Enterprise Search plugin - Add checks for type any, but only on non-test files - Disable react-hooks/exhaustive-deps, since we're already disabling it in a few files and other plugins also have it turned off * Cover uncovered lines in engines_table and telemetry tests * Fixed TS warnings in E2E tests (#17) * Feedback: Convert static CSS values to EUI variables where possible * Feedback: Flatten nested CSS where possible - Prefer setting CSS class overrides on individual EUI components, not on a top-level page + Change CSS class casing from kebab-case to camelCase to better match EUI/Kibana + Remove unnecessary .euiPageContentHeader margin-bottom override by changing the panelPaddingSize of euiPageContent + Decrease engine overview table padding on mobile * Refactor out components shared with Workplace Search (elastic#18) * Move getUserName helper to shared - in preparation for Workplace Search plugin also using this helper * Move Setup Guide layout to a shared component * Setup Guide: add extra props for standard/native auth links Note: It's possible this commit may be unnecessary if we can publish shared Enterprise Search security mode docs * Update copy per feedback from copy team * Address various telemetry issues - saved objects: removing indexing per elastic#43673 - add schema and generate json per elastic#64942 - move definitions over to collectors since saved objects is mostly empty at this point, and schema throws an error when it imports an obj instead of being defined inline - istanbul ignore saved_objects file since it doesn't have anything meaningful to test but was affecting code coverage * Disable plugin access if a normal user does not have access to App Search (elastic#19) * Set up new server security dependency and configs * Set up access capabilities * Set up checkAccess helper/caller * Remove NoUserState component from the public UI - Since this is now being handled by checkAccess / normal users should never see the plugin at all if they don't have an account/access, the component is no longer needed * Update server routes to account for new changes - Remove login redirect catch from routes, since the access helper should now handle that for most users by disabling the plugin (superusers will see a generic cannot connect/error screen) - Refactor out new config values to a shared mock * Refactor Enterprise Search http call to hit/return new internal API endpoint + pull out the http call to a separate library for upcoming public URL work (so that other files can call it directly as well) * [Discussion] Increase timeout but add another warning timeout for slow servers - per recommendation/convo with Brandon * Register feature control * Remove no_as_account from UI telemetry - since we're no longer tracking that in the UI * Address PR feedback - isSuperUser check * Public URL support for Elastic Cloud (elastic#21) * Add server-side public URL route - Per feedback from Kibana platform team, it's not possible to pass info from server/ to public/ without a HTTP call :[ * Update MockRouter for routes without any payload/params * Add client-side helper for calling the new public URL API + API seems to return a URL a trailing slash, which we need to omit * Update public/plugin.ts to check and set a public URL - relies on this.hasCheckedPublicUrl to only make the call once per page load instead of on every page nav * Fix failing feature control tests - Split up scenario cases as needed - Add plugin as an exception alongside ML & Monitoring * Address PR feedback - version: kibana - copy edits - Sass vars - code cleanup * Casing feedback: change all plugin registration IDs from snake_case to camelCase - note: current remainng snake_case exceptions are telemetry keys - file names and api endpoints are snake_case per conventions * Misc security feedback - remove set - remove unnecessary capabilities registration - telemetry namespace agnostic * Security feedback: add warn logging to telemetry collector see elastic#66922 (comment) - add if statement - pass log dependency around (this is kinda medium, should maybe refactor) - update tests - move test file comment to the right file (was meant for telemetry route file) * Address feedback from Pierre - Remove unnecessary ServerConfigType - Remove unnecessary uiCapabilities - Move registerTelemetryRoute / SavedObjectsServiceStart workaround - Remove unnecessary license optional chaining * PR feedback Address type/typos * Fix telemetry API call returning 415 on Chrome - I can't even?? I swear charset=utf-8 fixed the same error a few weeks ago * Fix failing tests * Update Enterprise Search functional tests (without host) to run on CI - Fix incorrect navigateToApp slug (hadn't realized this was a URL, not an ID) - Update without_host_configured tests to run without API key - Update README * Address PR feedback from Pierre - remove unnecessary authz? - remove unnecessary content-type json headers - add loggingSystemMock.collect(mockLogger).error assertion - reconstrcut new MockRouter on beforeEach for better sandboxing - fix incorrect describe()s -should be it() - pull out reusable mockDependencies helper (renamed/extended from mockConfig) for tests that don't particularly use config/log but still want to pass type definitions - Fix comment copy Co-authored-by: Jason Stoltzfus <[email protected]> Co-authored-by: Chris Cressman <[email protected]> Co-authored-by: scottybollinger <[email protected]> Co-authored-by: Elastic Machine <[email protected]> # Conflicts: # .github/CODEOWNERS # x-pack/scripts/functional_tests.js

…tic#54349)

* Updated EUI to version 67.1.2. Updated instaces of ButtonColor from EUI to EuiButtonColor. * Updated to EuiCard instances that utilize the betaBadgeProps object to return an empty string instead of undefined when the label is unavailable * Removed two instances of the deprecated internetExplorerOnly() mixin * Updated two instances of the ButtonColor import to EuiButtonColor as is was renamed in PR elastic#6150 * Updated snapshots in Jest Test Suite #1 to account for EuiButton and EuiCard Emotion conversions. Updated snapshots for EuiTooltip as it now contains the new EuiToolTipAnchor component that replaced the tooltip anchor styles * Updated snapshots in Jest Test Suite #2 to account forEuiButton, EuiDescriptionList, EuiButtonIcon, and EuiBadge Emotion conversions. * Updated snapshots in Jest Test Suite #3 to account for EuiDescriptionList, EuiButton, and EuiBadge Emotion conversions. Updated snapshots for EuiTooltip as if now contains the new EuiTooltipAnchor component that replaced the tooltop anchor styles * Updated snapshots in Jest Test Suite #4 to account for EuiButton Emotion conversion. * Updated snapshots in Jest Test Suite #5 to account for EuiButton Emotion conversion. * Updated snapshots in Jest Test Suite #8 to account for EuiButtonIcon and EuiButton Emotion conversions. Updated snapshots for EuiTooltip as it now contains the new EuiTooltipAnchor component that replaced the tooltip anchor styles. * Updated snapshots in Jest Test Suite #9 to account for EuiFlyout and EuiButton Emotion conversions. * Updated snapshots in Jest Test Suite #10 to account for EuiButton, EuiBadge, EuiButtonIcon, and EuiCard Emotion conversions. Updated snapshots for EuiToolTtip as it now contains the new EuiTooltipAnchor component that replaced the tooltip anchor styles * Updated instances of EuiButtonIconColor to use EuiButtonIconProps['color'] as it was removed in PR elastic#6150 * Updated tests that target EuiButton to simulate click events to target a generic button to prevent undefined click event errors * Updated snapshots in Jest Test Suite #1 to account for EuiButton and EuiCard Emotion conversions * Added the EuiFlyout mixins and variables to Lens Sass file as EuiFlyout has been converted to Emotion and the Sass styles are no longer available in EUI * Added the EuiCallOutTypes variable to Step Progress Sass file as EuiCallOut has been converted to Emotion and the Sass styles are no longer available in EUI * Updated snapshots in Jest Test Suite #2 to account for recent Emotion conversions. Updated snapshots in server_status.test.tsx to render EuiBadge before checking the snapshots to reduce the snapshot churn caused by Emotion. Updated tests that target EuiButton to simulate click events to target a generic button to prevent undefined click event errors * [CI] Auto-commit changed files from 'node scripts/precommit_hook.js --ref HEAD~1..HEAD --fix' * Added imports for the added flyout mixin. Removed references to EuiCallOut mixin as the component has been converted to Emotion and is no longer available for use. * Updated unit tests and snapshots in Jest Test Suite #10. Updated snaphshots to account for EuiBadge, EuiDescriptionList, EuiFlyout, and EuiCard Emotion conversions. Updated snapshots for EuiTooltip as it now contains the new EuiTooltipAnchor component that replaced the tooltip anchor styles. Updated tests that target EuiButton to simulate click events to target a generic button element to prevent undefined click event errors * Updated unit tests in Jest Test Suite #11 that target EuiButton to simulate click events to target a generic button to prevent undefined click event errors * Updated unit tests in Jest Test Suite #12 by updating tests that target EuiButton to simulate click events. Instead, these tests now target a generic button element to prevent undefined click event errors * Updated unit tests in Jest Test Suite #1 by updating tests that target EuiButton to simulate click events. Instead, these tests now target a generic button element to prevent undefined click event errors * Updated unit tests in Jest Test Suite #2 by updating tests that use EuiButton to simulate click events. Instead, these test have been updated to target a button element to prevent undefined click event errors. * [CI] Auto-commit changed files from 'node scripts/eslint --no-cache --fix' * Updated reference to mixins Sass file. Updated snapshots for Jest Test Suite #5 to account for EuiButton Emotion conversion. Updated unit tests that target EuiButton to simulate click events. These tests have been updated to target a button element to prevent undefined click event errors * Updated unit tests in Jest Test Suites 3, 7, 8, 13, and 14. Updated snapshot to account for EuiButton Emotion conversion. Updated tests that target EuiButton to simulate click events. These tests now target a generic button element to prevent undefined click event errors. Updated a few snapshots by adding .render() before checking the snapshot. This will prevent large snapshots coming from recent Emotion conversions * Updated snapshots in Jest Test Suite #10 to account for the recent EuiButton Emotion conversion * Updated unit tests in Jest Test Suite #2 by editing tests that target EuiButton to simulate click events. These tests now target a button element in order to prevent undefinde click event errors * Updated snapshots in Jest Test Suite #10 to account for EuiButton and EuiDescriptionList Emotion conversions * Updated test cases in Jest Test Suites 3, 7, and 8. Updated snapshots to account for EuiButton and EuiPagination Emotion conversions. Updated tests that target EuiButton to simulate click events. These tests now target a button element to prevent undefined click errors * Updated test cases in Jest Test Suite 14. Updated snapshots to account for EuiButton Emotion conversion. Opted to use .render() when updating a few snapshots to reduce the large length of snapshots caused by Emotion * [CI] Auto-commit changed files from 'node scripts/eslint --no-cache --fix' * Revised a change to betaBadgeProps to ensure that the label is available. If not, the value for the badge with be set to undefined. * Resolved two linting errors * Resolved two linting errors * Updated Jest unit tests in various suites. Updated snapshots to account for EuiButton Emotion conversion. Updated snapshots for EuiTooltip as it now contains the new EuiTooltipAnchor component that replaced the tooltip anchor styles. * Updated EuiFlyout in query_flyout.tsx to remove the onClick function from maskProps as it is no longer available. Updated this flyout to use ownFocus and not to close when the overlay mask is clicked. * Removed the use of EuiButtonIconColor in favor of EuiButtonIconProps['color'] * [CI] Auto-commit changed files from 'node scripts/eslint --no-cache --fix' * Updated Cypress test looking for strict equality on EuiPaginationButton class names to match a substring of the Emotion generated class name * Removed unneeded debugging code. Updated snapshots for various test suites to account for the recent EuiButton Emotion conversion * Updated a few EuiButton, EuiButtonEmpty, and EuiText components that set the color as ghost. The ghost color mode has been deprecated as of PR elastic#6150. These components now are wrapped in EuiThemeProvider with a dark colorMode to create the previous ghost color. * Resolved TS error with EuiCard betaBadgeProps * [CI] Auto-commit changed files from 'node scripts/eslint --no-cache --fix' * Remove references to now-removed EuiFlyout CSS classes/vars * Remove now-removed euiBadge className references - Convert directly to EuiBadge instead of using CSS - Remove confusing and now-possibly-irrelevant CSS badge overrides - left/right icons are now set via JSX and not via flex-direction * Pre-emptively fix various euiOverlayMask CSS overrides - this data attr isn't technically in yet but will be once elastic/eui#6289 merges - at the very least this isn't breaking any more than it currently already is! * Update to v67.1.3 * v67.1.4 * Resolved test failing test case in Security/Manage/Blocklist. The test did not remove focus from the last combo box in the form, which didn't allow the disbaled attribute to be removed from the flyout submit button. I've updated the mock file for Blocklist to return focus to the first form element in the flyout to allow the disabled attribute to be removed. * Updated snapshots to account for the recent EuiText Emotion conversion * Fix Log's custom tooltips relying on EuiTooltip classNames that no longer exist * Fix Vega vis custom tooltips relying on EuiTooltip classNames that no longer exist - this one is trickier than Log's as it's not using React, so we need to use Emotion's Global to set a static className * Convert remaining vega_vis.scss to Emotion - as an example of how other global + non global styles could be handled in the future * Fix references to removed `euiPaginationButton-isActive` className - use aria-current attribute instead * Added missing EuiFlyoutAnimation keyframes for EuiFlyout. This resolved test that failed because they used onAnimationEnd because the FlyoutAnimation could not be found. * Reolved Jest Tests in suites 1 and 5. Updated snapshots to account for the recent EuiButton Emotion conversion. Updated snapshots for EuiToolTip as it now contains the new EuiToolTipAnchor component that replaced the tooltip anchor styles. * iterate on rules_list.test.tsx * bump eui to v67.1.5 * Updatde snapshots for jest test suites to account for the recent EuiButton, EuiOverlayMask, EuiTooltip, and EuiBadge Emotion conversions * Resolved failing security test by updating the target element for CONNECTOR_TITLE. EuiCard has recently been converted to Emotion and the card title is no longer wrapper in a span. * Resolved failing test case in Runtime Fields. The modify runtime field test was failing because the combobox responsbible for adding and updating scripts was not appearing. The textbox did not appear because the shared setFieldScript function targets and toggles the script textbox when opening the flyout. When a runtime field is being modified, the toggle is already active and using the shared function will trigger the toggle again (losing access to the script textbox). Also resolved an issue that prevented the warning EuiCallout to appear when changing the type of a runtime field from its original type. Resolved this by adding an enter keypress at the end of setFieldType function to confirm the type selection, thus triggering the EuiCallout * Resolved two tests that were failing in Lens. These test were failing because they were checking for equality in class names that no longer exist within EuiButtonGroup as it was recently converted to Emotion. These tests were updated to check for a substring of the new and longer class name * Quick fix in test case failing because of misspelling in data-test-sub * Updated snapshot for Jest test case as EuiButton as recently been converted to Emotion * Removed console.log statement. Oops! * Resolved a failing test case in Lens. They were failing because they were checking for equality in class names that no longer exist within EuiButtonGroup as it was recently converted to Emotion. These tests were updated to check for a substring of the new and longer class name. Updated a Security test case by giving a target button the data-test-subj attribute for easier querying * Removed reference to EuiFlyout mixin as it has been converted to Emotion. Updated the reference to an interal copy of EuiFlyout styles * Corrected spelling error in EuiFlyout animation in Lens app * Update EUI with latest backport * Update button snapshots * fix another button snapshot * More snapshot fixes * [EuiButton][Security] Fix button relying on now-removed `euiButton__text` CSS - replace removed CSS with `eui-textTruncate` util instead - combine/DRY out unnecessary span - was affecting min-width of truncation util + increase screenshot diff limit - this was smaller than updating the actual baseline screenshots for whatever reason (likely render diff between local and CI) * Fix remaining Jest tests affected by Emotion conversions - because Emotion creates its own wrapper, `.first()` can no longer be used - prefer `.last()` instead * Fix Jest test affected by EuiButton Emotion conversion + removed modifier class - targeting the native DOM node + filtering by disabled true/false gets us back to the 'correct' lengths * Fix + improve flyout test - `.last()` changes to account for EuiButton Emotion conversion is needed, but the last onClose assertion still fails due to us having modified inputs, and the confirm modal being displayed - split test into two separate tests - one testing the onClose call, and the other testing the confirm modal * derpin * Skip rules_list Jest suite * Update new EuiButton snapshot * Upgraded EUI version to 67.1.7 * [EuiCard] Update snapshots * [EuiPopover] Update snapshots * [QA] Fix missing Vega warn/error message colors ;_; * [CI] Auto-commit changed files from 'node scripts/generate codeowners' * Fix Lens kbnToolbarButton regressions - Caused by flattening of EUI button CSS specificity - background-color was previously relying on isDisabled CSS specificity to override its #fff color - `text` color modifier & `!important` is no longer needed and overrides Emotion CSS flatly - isDisabled class is no longer needed - euiButton no longer sets `pointer-events: none` on disabled buttons (fixes tooltip bug in webkit as well) * Backport EUI 67.1.8 fixes * Update EuiCard snapshots * Fix EuiModal form wrapper causing overflow issues - see https://elastic.github.io/eui/#/layout/modal#forms-in-a-modal * Workaround for `.kbnOverlayMountWrapper` mount point causing overflow issues - not sure what all is using this modal service to be honest, but the wrapper is causing issues with the modal layout, this fixes overflow issues but will not fix any mask-image issues as a result * more snapshot updates * EuiButton - added textProps to EuiButton to prevent very long button names from spilling over outside of the container * EuiButton - Update EuiButton related snapshots. Updated tests that target EuiButton directly to use a data-telementary-id for more specific element querying required by Emotion * QA - Removed unnecessary comment in code * Temporary fix for EuiCard[selectable][layout=horizontal] instances on security solutions' rule page * Temporary fix for EuiCard[selectable][layout=horizontal] instances on osquery live query and canvas's datasource selector * [CI] Auto-commit changed files from 'node scripts/precommit_hook.js --ref HEAD~1..HEAD --fix' * Fix CSS specificity, where canvas's solutionToolbarButton's background-color now takes precedence over EuiButton's primary styles * Removed update to search_marker_tooltip that removed the euiTooltip styles and replaced then with Emotion styling. Added EuiTooltip Sass styles for the component to rely on to test for a styling bug that is causing the tooltip and the tooltip arrow to be out of sync with each other. * Lint Sass file * Lint Sass file * Removed overflow:hidden style from .vgaVis_view as it was causing euiScrollStyles not to present the scroll bars in Vega Vis * Remove typo from EuiButton textProps object. 'className' should not have been included in the actual class name * Revert tooltip Sass This reverts commit 20e6ead, a5cd2de, and c605cbd * Fix Emotion tooltip arrows Co-authored-by: kibanamachine <[email protected]> Co-authored-by: Constance Chen <[email protected]> Co-authored-by: Chandler Prall <[email protected]>

@jlind23

## Summary Closes elastic/ingest-dev#1261 Added a snippet to the telemetry that I added for each requirement. Please review and let me know if any changes are needed. Also asked a few questions below. @jlind23 @kpollich 6. is blocked by [elasticsearch change](elastic/elasticsearch#91701) to give kibana_system the missing privilege to read logs-elastic_agent* indices. Took inspiration for task versioning from https://github.com/elastic/kibana/pull/144494/files#diff-0c7c49bf5c55c45c19e9c42d5428e99e52c3a39dd6703633f427724d36108186 - [x] 1. Elastic Agent versions Versions of all the Elastic Agent running: `agent.version` field on `.fleet-agents` documents ``` "agent_versions": [ "8.6.0" ], ``` - [x] 2. Fleet server configuration Think we can query for `.fleet-policies` where some `input` has `type: 'fleet-server'` for this, as well as use the `Fleet Server Hosts` settings that we define via saved objects in Fleet ``` "fleet_server_config": { "policies": [ { "input_config": { "server": { "limits.max_agents": 10000 }, "server.runtime": "gc_percent:20" } } ] } ``` - [x] 3. Number of policies Count of `.fleet-policies` index To confirm, did we mean agent policies here? ``` "agent_policies": { "count": 7, ``` - [x] 4. Output type contained in those policies Collecting this from ts logic, querying from `.fleet-policies` index. The alternative would be to write a painless script (because the `outputs` are an object with dynamic keys, we can't do an aggregation directly). ``` "agent_policies": { "output_types": [ "elasticsearch" ] } ``` Did we mean to just collect the types here, or any other info? e.g. output urls - [x] 5. Average number of checkin failures We only have the most recent checkin status and timestamp on `.fleet-agents`. Do we mean here to publish the total last checkin failure count? E.g. 3 if 3 agents are in failure checkin status currently. Or do we mean to publish specific info for all agents (`last_checkin_status`, `last_checkin` time, `last_checkin_message`)? Are the only statuses `error` and `degraded` that we want to send? ``` "agent_last_checkin_status": { "error": 0, "degraded": 0 }, ``` - [ ] 6. Top 3 most common errors in the Elastic Agent logs Do we mean here elastic-agent logs only, or fleet-server logs as well (maybe separately)? I found an alternative way to query the message field using sampler and categorize text aggregation: ``` GET logs-elastic_agent*/_search { "size": 0, "query": { "bool": { "must": [ { "term": { "log.level": "error" } }, { "range": { "@timestamp": { "gte": "now-1h" } } } ] } }, "aggregations": { "message_sample": { "sampler": { "shard_size": 200 }, "aggs": { "categories": { "categorize_text": { "field": "message", "size": 10 } } } } } } ``` Example response: ``` "aggregations": { "message_sample": { "doc_count": 112, "categories": { "buckets": [ { "doc_count": 73, "key": "failed to unenroll offline agents", "regex": ".*?failed.+?to.+?unenroll.+?offline.+?agents.*?", "max_matching_length": 36 }, { "doc_count": 7, "key": """stderr panic close of closed channel n ngoroutine running Stop ngithub.com/elastic/beats/v7/libbeat/cmd/instance Beat launch.func5 \n\t/go/src/github.com/elastic/beats/libbeat/cmd/instance/beat.go n ``` - [x] 7. Number of checkin failure over the past period of time I think this is almost the same as #5. The difference would be to report new failures happened only in the last hour, or report all agents in failure state. (which would be an increasing number if the agent stays in failed state). Do we want these 2 separate telemetry fields? EDIT: removed the last1hr query, instead added a new field to report agents enrolled per policy (top 10). See comments below. ``` "agent_checkin_status": { "error": 3, "degraded": 0 }, "agents_per_policy": [2, 1000], ``` - [x] 8. Number of Elastic Agent and number of fleet server This is already there in the existing telemetry: ``` "agents": { "total_enrolled": 0, "healthy": 0, "unhealthy": 0, "offline": 0, "total_all_statuses": 1, "updating": 0 }, "fleet_server": { "total_enrolled": 0, "healthy": 0, "unhealthy": 0, "offline": 0, "updating": 0, "total_all_statuses": 0, "num_host_urls": 1 }, ``` ### Checklist - [ ] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios Co-authored-by: Kibana Machine <[email protected]>

…k and New chat button #5 - adds the useSecurityAssistantQuery hook - adds a `New chat` button that renders a query in a popover

Convert to 2-panel layout. Move Context tab into right panel. Use Eui…

7785ccd

…BottomBar for main controls.

cjcenizal requested a review from kertal February 7, 2020 01:23

cjcenizal mentioned this pull request Feb 7, 2020

Painless Playground PoC elastic/kibana#54578

Merged

27 tasks

cjcenizal changed the title ~~UX refinements of Painless Playground~~ Refine Painless Playground UI/UX Feb 7, 2020

cjcenizal added 2 commits February 7, 2020 16:33

Live-update output as the user enters input for a faster iteration lo…

27e5cac

…op. Use heart script as the example script.

Move response into a tab in the request flyout.

fb3dc4b

cjcenizal added 2 commits February 7, 2020 21:53

Remove unnecessary 'Test' button. Surface loading/success/error state…

f9eb8c3

… in 'Output' tab.

Add beta label to feature name in home registry and DevTools tab.

8b09b7e

cjcenizal added 4 commits February 7, 2020 23:15

Refine Context tab form components and help text. Add doc links.

32a55b2

Extract out parameters tab. Refactor output pane.

f9b53c4

Add Help menu with links to docs and a button for resetting the script.

5191995

Improve parameters help text.

b7b12df

kertal reviewed Feb 10, 2020

View reviewed changes

Make bottom bar smaller.

3165960

kertal merged commit 15e5064 into kertal:kertal-pr-2020-01-13-painless-playground Feb 13, 2020

cjcenizal deleted the painless-playground-ui-suggestions branch February 13, 2020 09:03

cjcenizal mentioned this pull request Feb 13, 2020

Create Painless Lab app elastic/kibana#57538

Merged

13 tasks

kertal pushed a commit that referenced this pull request Feb 24, 2020

[7.5] Retry git clone up to 8 times before failing a build (#5… (elas…

f313cc2

…tic#50791)

kertal pushed a commit that referenced this pull request Feb 24, 2020

[7.5] Fix number of executions per agent in flaky test job (#5… (elas…

75f670e

…tic#54348)

kertal pushed a commit that referenced this pull request Feb 25, 2020

[7.x] Advanced settings UI change to centralize save state (#5… (elas…

c3109b5

…tic#58373)

kertal pushed a commit that referenced this pull request Mar 12, 2020

[7.x] [Logs UI] Add expandable rows with category examples (#5… (elas…

b438a53

…tic#59945) Backports the following commits to 7.x: - [Logs UI] Add expandable rows with category examples (elastic#54586)

jloleysens mentioned this pull request Mar 30, 2020

[Painless Lab] Moving out of Beta elastic/kibana#61809

Open

11 tasks

kertal pushed a commit that referenced this pull request Jul 30, 2020

[6.8] Fix number of executions per agent in flaky test job (#5… (elas…

79502eb

…tic#54349)

kertal pushed a commit that referenced this pull request Jun 23, 2023

[Security Solution] Security Assistant: useSecurityAssistantQuery hoo…

199af3c

…k and New chat button #5 - adds the useSecurityAssistantQuery hook - adds a `New chat` button that renders a query in a popover

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Refine Painless Playground UI/UX #5

Refine Painless Playground UI/UX #5

cjcenizal commented Feb 7, 2020 •

edited

Loading

jloleysens commented Feb 7, 2020 •

edited

Loading

kertal commented Feb 7, 2020

cjcenizal commented Feb 8, 2020 •

edited

Loading

cjcenizal commented Feb 8, 2020

kertal left a comment •

edited

Loading

jloleysens commented Feb 10, 2020 •

edited

Loading

cjcenizal commented Feb 10, 2020

cjcenizal commented Feb 10, 2020

jloleysens commented Feb 11, 2020 •

edited

Loading

kertal commented Feb 12, 2020

cjcenizal commented Feb 12, 2020

cjcenizal commented Feb 12, 2020

Refine Painless Playground UI/UX #5

Refine Painless Playground UI/UX #5

Conversation

cjcenizal commented Feb 7, 2020 • edited Loading

jloleysens commented Feb 7, 2020 • edited Loading

kertal commented Feb 7, 2020

cjcenizal commented Feb 8, 2020 • edited Loading

cjcenizal commented Feb 8, 2020

kertal left a comment • edited Loading

Choose a reason for hiding this comment

jloleysens commented Feb 10, 2020 • edited Loading

cjcenizal commented Feb 10, 2020

cjcenizal commented Feb 10, 2020

jloleysens commented Feb 11, 2020 • edited Loading

kertal commented Feb 12, 2020

cjcenizal commented Feb 12, 2020

cjcenizal commented Feb 12, 2020

cjcenizal commented Feb 7, 2020 •

edited

Loading

jloleysens commented Feb 7, 2020 •

edited

Loading

cjcenizal commented Feb 8, 2020 •

edited

Loading

kertal left a comment •

edited

Loading

jloleysens commented Feb 10, 2020 •

edited

Loading

jloleysens commented Feb 11, 2020 •

edited

Loading