[Fleet] Add redesigned Fleet Server flyout by kpollich · Pull Request #127786 · elastic/kibana

kpollich · 2022-03-15T15:50:50Z

Summary

Resolves #125640

~~Blocked by #128381~~

Implements the redesigned Fleet Server flyout and refactors various "fleet server instruction" components.

Separate "Quick Start" and "Advanced" tabs
- Quick start tab is "net new" and includes largely new hooks/components
- Advanced tab is a refactoring of the previously existing "Fleet server instructions" components
Add button to "Add Agent" flyout that opens the Fleet Server flyout
Fix failing tests (see follow-up comments)

kpollich · 2022-03-18T15:45:37Z

@elasticmachine merge upstream

kpollich · 2022-03-22T14:00:02Z

@elasticmachine merge upstream

x-pack/plugins/fleet/public/components/agent_enrollment_flyout/agent_enrollment_flyout.test.tsx

kpollich · 2022-03-23T20:05:45Z

...lugins/fleet/public/applications/fleet/components/fleet_server_instructions/advanced_tab.tsx

+    fleetServerHostForm,
+    deploymentMode,
+    setDeploymentMode,
+  } = useAdvancedForm();


I was a little on the fence about wrapping all of this data up into a single hook like this, and I could probably be convinced that it'd be better to simply compose multiple hooks in these "tab" files instead. The only real problem this solves is in managed_instructions.tsx where we import this same useAdvancedForm hook because we need almost all of this state again, so it made sense to simply ship the "composed" set of hooks all at once to prevent too much repetition between these two places.

However, I could see the argument that our hooks should be a little more specific than this, which is very coupled to a given UI.

kpollich · 2022-03-23T20:09:52Z

x-pack/plugins/fleet/public/applications/fleet/components/fleet_server_instructions/index.tsx

+};
+
+// Renders instructions inside of a flyout
+export const FleetServerFlyout: React.FunctionComponent<Props> = ({ onClose }) => {


This file exports both the flyout "version" of this component as well as the non-flyout version. It seemed a bit extreme to separate these into two files, and then share the tab implementation between those files, but it's something we might want to consider.

kpollich · 2022-03-23T20:11:10Z

...ins/fleet/public/applications/fleet/components/fleet_server_instructions/quick_start_tab.tsx

+    }),
+    getInstallFleetServerStep({
+      isFleetServerReady,
+      disabled: quickStartCreateForm.status !== 'success',


Quick note on disabled/complete status for these steps: since the designs call for showing/hiding individual steps based on current form state, we allow a disabled prop to be passed in to support this use case. If a given step needs to implement a "complete" state (only a subset of steps do this), it's done within the component itself.

kpollich · 2022-03-23T20:42:54Z

...eet/sections/agents/agent_requirements_page/components/fleet_server_on_prem_instructions.tsx

@@ -1,752 +0,0 @@
-/*


The contents of this file have been replaced with distinct components in the fleet/components/fleet_server_instructions files above.

kpollich · 2022-03-24T16:07:39Z

@elasticmachine merge upstream

kpollich · 2022-03-29T12:07:40Z

@elasticmachine merge upstream

kpollich · 2022-04-25T12:18:05Z

@elasticmachine merge upstream

kpollich · 2022-04-25T12:31:27Z

Created a follow up issue for converting the tab implementation (at least on the /agents version of the UI) to use EuiButtonGroup instead: #130888

kpollich · 2022-04-25T13:11:34Z

Another follow-up issue for the "stuck state" when selecting a Fleet Server policy from the dropdown in the "Add Agent" flyout here: #130892

kpollich · 2022-04-25T13:52:18Z

@elasticmachine merge upstream

kpollich · 2022-04-25T14:47:45Z

@elasticmachine merge upstream

hop-dev

Code review only, a few nits none of them should stop you from merging

...cations/fleet/components/fleet_server_instructions/components/fleet_server_host_combobox.tsx

...ublic/applications/fleet/components/fleet_server_instructions/hooks/use_fleet_server_host.ts

...ublic/applications/fleet/components/fleet_server_instructions/steps/install_fleet_server.tsx

...public/applications/fleet/components/fleet_server_instructions/steps/set_deployment_mode.tsx

…t_server_instructions/components/fleet_server_host_combobox.tsx Co-authored-by: Mark Hopkin <mark.hopkin@elastic.co>

…t_server_instructions/steps/install_fleet_server.tsx Co-authored-by: Mark Hopkin <mark.hopkin@elastic.co>

…t_server_instructions/steps/set_deployment_mode.tsx Co-authored-by: Mark Hopkin <mark.hopkin@elastic.co>

kibana-ci · 2022-04-25T19:34:34Z

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`fleet`	595	616	+21

Async chunks

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

id	before	after	diff
`fleet`	693.3KB	703.2KB	+9.9KB

Page load bundle

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

id	before	after	diff
`fleet`	110.7KB	111.0KB	+224.0B

History

💔 Build #40321 failed cb0ee61
💚 Build #40250 succeeded 42c43bd
💔 Build #40220 failed 3778c54
💔 Build #40173 failed 72e4f80
💚 Build #39544 succeeded 08edc05
💔 Build #39509 failed ebb4ab4

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

cc @kpollich

juliaElastic

LGTM

juliaElastic · 2022-04-26T06:56:32Z

Another follow-up issue for the "stuck state" when selecting a Fleet Server policy from the dropdown in the "Add Agent" flyout here: #130892

Is this an already existing issue before this pr?

kpollich · 2022-04-26T14:18:13Z

Another follow-up issue for the "stuck state" when selecting a Fleet Server policy from the dropdown in the "Add Agent" flyout here: #130892

Is this an already existing issue before this pr?

It is not. We don't limit the set of policies in the dropdown on main currently. Maybe I misunderstood the designs and we shouldn't be limiting this dropdown?

Screen.Recording.2022-04-26.at.10.14.05.AM.mov

kpollich · 2022-04-26T19:54:11Z

I took a look at addressing the issue reported in #130892 as part of this PR, but I think it falls a bit out of scope. I'm landing this one and will address follow-ups separately.

kibanamachine · 2022-04-26T19:54:40Z

⚪ Backport skipped

The pull request was not backported as there were no branches to backport to. If this is a mistake, please apply the desired version labels or run the backport tool manually.

Manual backport

To create the backport manually run:

node scripts/backport --pr 127786

Questions ?

Please refer to the Backport tool documentation

juliaElastic · 2022-04-28T07:35:24Z

Another follow-up issue for the "stuck state" when selecting a Fleet Server policy from the dropdown in the "Add Agent" flyout here: #130892

Is this an already existing issue before this pr?

It is not. We don't limit the set of policies in the dropdown on main currently. Maybe I misunderstood the designs and we shouldn't be limiting this dropdown?

I was asking to check if we introduce a new bug. Maybe we could avoid limiting the dropdown so it is not stuck in fleet server state?

kpollich · 2022-04-28T11:48:50Z

I was asking to check if we introduce a new bug. Maybe we could avoid limiting the dropdown so it is not stuck in fleet server state?

I'm going to update #130892 shortly to detail the implementation for a root fix here. The summary is:

We'll add a distinct "Add Fleet Server" button that opens the Fleet Server flyout
We'll remove the logic from the "Add Agent" flyout that swaps in the Fleet Server instructions when selecting a Fleet Server policy
We'll remove Fleet Server policies from the "Add Agent" dropdown

* WIP new fleet server flyout * WIP finish up quick start tab * Refactor quick start steps into separate files: * Initial refactor of existing fleet server instructions * Move quick start form return value to explicit type * Flesh out fleet server commands * Fix translation error * Migrate on prem instructions component over to new file structure * Makes quick start tab actually create policy * Fix type errors * Fix missing hooks + update snapshots * Fix paths in mocks * Fix translations * WIP test fixes * Implement enabled/disabled state for new steps * Fix cypress tests * Force re-render to get last test passing * Fix failing tests * Fix import errors after conflicts * Fix snapshot tests * Use id instead of full policy for policy selector * Replace Fleet Server instructions w/ Advanced Tab contents * First pass at integrating add agent/fleet server flyouts * Test commit * Fix imports * Fix imports * [CI] Auto-commit changed files from 'node scripts/eslint --no-cache --fix' * Enforce https-only fleet server URL's + improve errors * Fix failing tests * Fix fleet server command in quick start * Show success state in Quick start when policy exists + use first fleet server host if it exists * Set initial service token value when Fleet Server policy ID is initiall set * Generate service token instead of enrollment token * Fix fleet server flyout opening from unhealthy callout * Revert service token change + use EuiComboBox for fleet server host * Fix checks + use custom option text * Move fleet server host combobox to component * Use new combobox in advanced tab * Fix translations * Fix unused import * Don't recreate quick start policy if it already exists * Actually use quick start policy fields 🙃 * Fix policy check * Update x-pack/plugins/fleet/public/applications/fleet/components/fleet_server_instructions/components/fleet_server_host_combobox.tsx Co-authored-by: Mark Hopkin <mark.hopkin@elastic.co> * Update x-pack/plugins/fleet/public/applications/fleet/components/fleet_server_instructions/steps/install_fleet_server.tsx Co-authored-by: Mark Hopkin <mark.hopkin@elastic.co> * Update x-pack/plugins/fleet/public/applications/fleet/components/fleet_server_instructions/steps/set_deployment_mode.tsx Co-authored-by: Mark Hopkin <mark.hopkin@elastic.co> * Fix formatting issue * Clean up fleet server settings variable declaration per PR review Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Mark Hopkin <mark.hopkin@elastic.co>

kpollich added 2 commits March 14, 2022 16:42

WIP new fleet server flyout

c3be6f3

WIP finish up quick start tab

ad6ec87

kpollich self-assigned this Mar 15, 2022

kpollich added 6 commits March 15, 2022 16:09

Refactor quick start steps into separate files:

4ed4f39

Initial refactor of existing fleet server instructions

a62ed8e

Move quick start form return value to explicit type

b1e053b

Merge branch 'main' into 125640-redesign-fleet-server-flyout

dfefd46

Flesh out fleet server commands

8200ced

Fix translation error

54d5309

kibanamachine and others added 6 commits March 18, 2022 11:45

Merge branch 'main' into 125640-redesign-fleet-server-flyout

f0a82f3

Migrate on prem instructions component over to new file structure

95e76ba

Makes quick start tab actually create policy

3f736d9

Fix type errors

ef9501d

Fix missing hooks + update snapshots

587a079

Fix paths in mocks

ee9cad7

kibanamachine and others added 2 commits March 22, 2022 10:00

Merge branch 'main' into 125640-redesign-fleet-server-flyout

32c77f1

Fix translations

d56dc36

joshdover linked an issue Mar 23, 2022 that may be closed by this pull request

[Fleet] Add Fleet Server Flyout Redesign #125640

Closed

9 tasks

kpollich commented Mar 23, 2022

View reviewed changes

x-pack/plugins/fleet/public/components/agent_enrollment_flyout/agent_enrollment_flyout.test.tsx Show resolved Hide resolved

kpollich added 2 commits March 23, 2022 13:50

WIP test fixes

861cab9

Implement enabled/disabled state for new steps

f2bdc98

kpollich commented Mar 23, 2022

View reviewed changes

kpollich added 2 commits March 24, 2022 09:30

Fix cypress tests

e9c49b9

Force re-render to get last test passing

4445ec0

Merge branch 'main' into 125640-redesign-fleet-server-flyout

55fa9af

joshdover mentioned this pull request Mar 29, 2022

[Fleet] Redesign agent flyout #128381

Merged

9 tasks

Fix policy check

08edc05

Merge branch 'main' into 125640-redesign-fleet-server-flyout

72e4f80

kpollich mentioned this pull request Apr 25, 2022

[Fleet] Unable to return to "Add Agent" flow in flyout when a Fleet Server policy is selected from the dropdown #130892

Closed

Merge branch 'main' into 125640-redesign-fleet-server-flyout

3778c54

kpollich removed the ci:deploy-cloud label Apr 25, 2022

Merge branch 'main' into 125640-redesign-fleet-server-flyout

42c43bd

hop-dev reviewed Apr 25, 2022

View reviewed changes

kpollich and others added 5 commits April 25, 2022 13:46

Update x-pack/plugins/fleet/public/applications/fleet/components/flee…

cb0ee61

…t_server_instructions/components/fleet_server_host_combobox.tsx Co-authored-by: Mark Hopkin <mark.hopkin@elastic.co>

Update x-pack/plugins/fleet/public/applications/fleet/components/flee…

d7317a0

…t_server_instructions/steps/install_fleet_server.tsx Co-authored-by: Mark Hopkin <mark.hopkin@elastic.co>

Update x-pack/plugins/fleet/public/applications/fleet/components/flee…

abe3524

…t_server_instructions/steps/set_deployment_mode.tsx Co-authored-by: Mark Hopkin <mark.hopkin@elastic.co>

Fix formatting issue

1cfe1b7

Clean up fleet server settings variable declaration per PR review

4d93d05

juliaElastic approved these changes Apr 26, 2022

View reviewed changes

kpollich merged commit b655b48 into elastic:main Apr 26, 2022

kibanamachine added the backport:skip This PR does not require backporting label Apr 26, 2022

kpollich deleted the 125640-redesign-fleet-server-flyout branch April 26, 2022 19:54

Conversation

kpollich commented Mar 15, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Uh oh!

kpollich commented Mar 18, 2022

Uh oh!

kpollich commented Mar 22, 2022

Uh oh!

Uh oh!

kpollich Mar 23, 2022

Choose a reason for hiding this comment

Uh oh!

kpollich Mar 23, 2022

Choose a reason for hiding this comment

Uh oh!

kpollich Mar 23, 2022

Choose a reason for hiding this comment

Uh oh!

kpollich Mar 23, 2022

Choose a reason for hiding this comment

Uh oh!

kpollich commented Mar 24, 2022

Uh oh!

kpollich commented Mar 29, 2022

Uh oh!

kpollich commented Apr 25, 2022

Uh oh!

kpollich commented Apr 25, 2022

Uh oh!

kpollich commented Apr 25, 2022

Uh oh!

kpollich commented Apr 25, 2022

Uh oh!

kpollich commented Apr 25, 2022

Uh oh!

hop-dev left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

kibana-ci commented Apr 25, 2022

💚 Build Succeeded

Metrics [docs]

Module Count

Async chunks

Page load bundle

History

Uh oh!

juliaElastic left a comment

Choose a reason for hiding this comment

Uh oh!

juliaElastic commented Apr 26, 2022

Uh oh!

kpollich commented Apr 26, 2022

Uh oh!

kpollich commented Apr 26, 2022

Uh oh!

kibanamachine commented Apr 26, 2022

⚪ Backport skipped

Manual backport

Questions ?

Uh oh!

juliaElastic commented Apr 28, 2022

Uh oh!

kpollich commented Apr 28, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

8 participants

kpollich commented Mar 15, 2022 •

edited

Loading