[Fleet + Integrations UI] Migrate Fleet UI to new tabbed layout #101828

kpollich · 2021-06-09T20:00:12Z

Summary

Migrates Fleet's layout to the new tab-based layout standardized across all Kibana apps.

A few other changes:

Move Fleet Settings + Feedback buttons to global Kibana topNavMenu component
Fix bug w/ wrapper height not stretching to full page on pages w/ less content: Fixes [Integrations UI] White background in short Integration pages is not full height #101781
Remove beta badges in Fleet/Integrations layouts: Fixes [Fleet] Remove release messaging #100731

Screenshots

Screen	Screenshot	Notes
Fleet Home / Agents List		`/agents` is new home screen
Agent Policy Listing
Agent Policy Listing w/ Flyout Open
Enrollment Token listing
Data stream listing
Agent Details		Tab layout excluded from these nested detail pages
Agent Policy Details

Ref #98359

This is fixed through a hack for now, because Kibana's layout doesn't allow apps to flex the top-level wrapper via `flex: 1`. The same behavior reported in the original issue (elastic#101781) is present in all other Kibana apps. Fixes elastic#101781

elasticmachine · 2021-06-14T13:51:19Z

Pinging @elastic/fleet (Team:Fleet)

kpollich · 2021-06-14T15:07:18Z

@elasticmachine merge upstream

hbharding · 2021-06-14T15:21:40Z

Thanks @kpollich - looks great!

One small thing - I think we want to remove beta badge for Fleet since we're going GA in 7.14. @jen-huang @mostlyjason can you confirm? I think the same applies to the Integrations UI.

nchaulet · 2021-06-14T15:26:08Z

I think I found a small bug related to that PR, when you click on settings when you are on a details policy page the flyout is not displayed

…lich/kibana into integrations-ui/adjust-fleet-layout

kpollich · 2021-06-15T12:27:30Z

@elastic/security-asset-management @elastic/security-solution - need code owner review here. We've made some updates to Fleet's routing and fixed failing tests that resulted.

Fixes elastic#100731

kpollich · 2021-06-15T12:58:08Z

Wound up just removing the beta badge for #100731 in this PR. Change was very small.

kibanamachine · 2021-06-16T16:40:51Z

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`fleet`	476	468	-8

Public APIs missing comments

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

id	before	after	diff
`fleet`	1010	1011	+1

Async chunks

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

id	before	after	diff
`fleet`	705.0KB	677.9KB	-27.1KB
`osquery`	840.7KB	840.7KB	-12.0B
`securitySolution`	6.9MB	6.9MB	-36.0B
total			-27.2KB

Page load bundle

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

id	before	after	diff
`fleet`	435.7KB	435.4KB	-276.0B

Unknown metric groups

API count

id	before	after	diff
`fleet`	1101	1102	+1

History

💚 Build #131658 succeeded 85af589
💚 Build #131528 succeeded b30b2ae
💔 Build #131494 failed 94d5560
💔 Build #131483 failed f7caa2e
💚 Build #131324 succeeded 6d8fa51

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

cc @kpollich

paul-tavares

Did not run it locally, but looks good from a security solution standpoint. 👍

kpollich · 2021-06-16T16:59:24Z

@elastic/security-asset-management - Is anyone available to give this a quick code owner review? I updated two links into Fleet's UI here (links to diff) because of changes in routing within the Fleet app.

jen-huang · 2021-06-16T17:29:31Z

Given the small scope of the changed files that are under the outstanding codeowner review, I'm going to go ahead and merge this PR. Reviewers, feel free to leave any feedback afterwards.

kibanamachine · 2021-06-16T17:32:36Z

💔 Backport failed

Status	Branch	Result
❌	7.x	Commit could not be cherrypicked due to conflicts

To backport manually run:
node scripts/backport --pr 101828

…tic#101828) * WIP: Migrate fleet to new page layout system * Add 'Add Agent' button to agents table * Fix flyout import in search and filter bar * Place settings/feedback in header * Move actions to top nav * Fix i18n + types + unit test failures * Remove unused props in DefaultLayout * Fix background height in Fleet layout This is fixed through a hack for now, because Kibana's layout doesn't allow apps to flex the top-level wrapper via `flex: 1`. The same behavior reported in the original issue (elastic#101781) is present in all other Kibana apps. Fixes elastic#101781 * Use euiHeaderHeightCompensation for min-height calc * Move settings portal to app component * Fix agent details URL in failing unit test * Remove unreferenced overview files + update functional tests * Remove unneeded fragment * Remove beta badges in Fleet + Integrations Fixes elastic#100731 * Fix i18n * Fix page path reference * Fix failing tests * Re-fix i18n post merge Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> # Conflicts: # x-pack/plugins/translations/translations/ja-JP.json # x-pack/plugins/translations/translations/zh-CN.json

) (#102393) * WIP: Migrate fleet to new page layout system * Add 'Add Agent' button to agents table * Fix flyout import in search and filter bar * Place settings/feedback in header * Move actions to top nav * Fix i18n + types + unit test failures * Remove unused props in DefaultLayout * Fix background height in Fleet layout This is fixed through a hack for now, because Kibana's layout doesn't allow apps to flex the top-level wrapper via `flex: 1`. The same behavior reported in the original issue (#101781) is present in all other Kibana apps. Fixes #101781 * Use euiHeaderHeightCompensation for min-height calc * Move settings portal to app component * Fix agent details URL in failing unit test * Remove unreferenced overview files + update functional tests * Remove unneeded fragment * Remove beta badges in Fleet + Integrations Fixes #100731 * Fix i18n * Fix page path reference * Fix failing tests * Re-fix i18n post merge Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> # Conflicts: # x-pack/plugins/translations/translations/ja-JP.json # x-pack/plugins/translations/translations/zh-CN.json

kpollich added 2 commits June 9, 2021 15:21

WIP: Migrate fleet to new page layout system

714cfad

Add 'Add Agent' button to agents table

d30a21f

kpollich added the Team:Fleet Team label for Observability Data Collection Fleet team label Jun 9, 2021

kpollich self-assigned this Jun 9, 2021

kpollich mentioned this pull request Jun 9, 2021

[META] 7.14 Solution Nav implementation #98359

Closed

22 tasks

kpollich added 8 commits June 10, 2021 07:36

Merge branch 'master' into integrations-ui/adjust-fleet-layout

72d3bb3

Fix flyout import in search and filter bar

0156bc5

Place settings/feedback in header

228dfe8

Move actions to top nav

64e9986

Fix i18n + types + unit test failures

9d89808

Remove unused props in DefaultLayout

be0c967

Use euiHeaderHeightCompensation for min-height calc

30e3de7

kpollich mentioned this pull request Jun 14, 2021

[Integrations UI] White background in short Integration pages is not full height #101781

Closed

kpollich marked this pull request as ready for review June 14, 2021 13:51

kpollich requested review from a team as code owners June 14, 2021 13:51

kpollich added release_note:enhancement v7.14.0 v8.0.0 labels Jun 14, 2021

kpollich changed the title ~~[Fleet + Integrations UI] [WIP] Migrate Fleet Layout to new Layout System~~ [Fleet + Integrations UI] Migrate Fleet Layout to new Layout System Jun 14, 2021

nchaulet self-requested a review June 14, 2021 14:59

Merge branch 'master' into integrations-ui/adjust-fleet-layout

03b08e7

kpollich added 2 commits June 14, 2021 12:22

Move settings portal to app component

a865dc1

Merge branch 'integrations-ui/adjust-fleet-layout' of github.com:kpol…

c7bb421

…lich/kibana into integrations-ui/adjust-fleet-layout

kpollich enabled auto-merge (squash) June 15, 2021 12:26

kpollich added 2 commits June 15, 2021 08:55

Remove beta badges in Fleet + Integrations

a51a74a

Fixes elastic#100731

Merge branch 'master' into integrations-ui/adjust-fleet-layout

8d41b88

kpollich changed the title ~~[Fleet + Integrations UI] Migrate Fleet Layout to new Layout System~~ [Fleet + Integrations UI] Migrate Fleet Layout to new tabbed layout Jun 15, 2021

kpollich changed the title ~~[Fleet + Integrations UI] Migrate Fleet Layout to new tabbed layout~~ [Fleet + Integrations UI] Migrate Fleet UI to new tabbed layout Jun 15, 2021

kpollich added 2 commits June 15, 2021 09:17

Fix i18n

6d8fa51

Merge branch 'master' into integrations-ui/adjust-fleet-layout

f7caa2e

jen-huang mentioned this pull request Jun 15, 2021

[Fleet] Remove release messaging #100731

Closed

kpollich added 5 commits June 15, 2021 14:41

Fix page path reference

94d5560

Fix failing tests

b30b2ae

Merge branch 'master' into integrations-ui/adjust-fleet-layout

f9c4ebc

Re-fix i18n post merge

85af589

Merge branch 'master' into integrations-ui/adjust-fleet-layout

bf093f5

paul-tavares approved these changes Jun 16, 2021

View reviewed changes

jen-huang disabled auto-merge June 16, 2021 17:26

jen-huang merged commit 4a94156 into elastic:master Jun 16, 2021

jen-huang added the auto-backport Deprecated - use backport:version if exact versions are needed label Jun 16, 2021

kpollich mentioned this pull request Jun 16, 2021

[7.x] [Fleet + Integrations UI] Migrate Fleet UI to new tabbed layout (#101828) #102393

Merged

kpollich deleted the integrations-ui/adjust-fleet-layout branch June 16, 2021 17:46

mdelapenya mentioned this pull request Jun 21, 2021

No datastreams are listed on Fleet elastic/e2e-testing#1274

Closed

jloleysens mentioned this pull request Jun 23, 2021

[Fleet] Fix double policy header layout #103076

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[Fleet + Integrations UI] Migrate Fleet UI to new tabbed layout #101828

[Fleet + Integrations UI] Migrate Fleet UI to new tabbed layout #101828

Uh oh!

kpollich commented Jun 9, 2021 •

edited

Loading

Uh oh!

elasticmachine commented Jun 14, 2021

Uh oh!

kpollich commented Jun 14, 2021

Uh oh!

hbharding commented Jun 14, 2021

Uh oh!

nchaulet commented Jun 14, 2021

Uh oh!

kpollich commented Jun 15, 2021

Uh oh!

kpollich commented Jun 15, 2021

Uh oh!

kibanamachine commented Jun 16, 2021

API count

Uh oh!

paul-tavares left a comment

Uh oh!

kpollich commented Jun 16, 2021

Uh oh!

jen-huang commented Jun 16, 2021

Uh oh!

kibanamachine commented Jun 16, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

[Fleet + Integrations UI] Migrate Fleet UI to new tabbed layout #101828

[Fleet + Integrations UI] Migrate Fleet UI to new tabbed layout #101828

Uh oh!

Conversation

kpollich commented Jun 9, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Uh oh!

elasticmachine commented Jun 14, 2021

Uh oh!

kpollich commented Jun 14, 2021

Uh oh!

hbharding commented Jun 14, 2021

Uh oh!

nchaulet commented Jun 14, 2021

Uh oh!

kpollich commented Jun 15, 2021

Uh oh!

kpollich commented Jun 15, 2021

Uh oh!

kibanamachine commented Jun 16, 2021

💚 Build Succeeded

Metrics [docs]

Module Count

Public APIs missing comments

Async chunks

Page load bundle

API count

History

Uh oh!

paul-tavares left a comment

Choose a reason for hiding this comment

Uh oh!

kpollich commented Jun 16, 2021

Uh oh!

jen-huang commented Jun 16, 2021

Uh oh!

kibanamachine commented Jun 16, 2021

💔 Backport failed

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

kpollich commented Jun 9, 2021 •

edited

Loading