Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[fleet] Adjust unified integration view to have better UI controls #114692

Merged
merged 9 commits into from
Oct 14, 2021
Merged

[fleet] Adjust unified integration view to have better UI controls #114692

merged 9 commits into from
Oct 14, 2021

Conversation

clintandrewhall
Copy link
Contributor

@clintandrewhall clintandrewhall commented Oct 12, 2021 •
edited by snide
Loading

Summary

Fixes #114492
Fixes #114824

Part of #93084

Visual cleanup of the intergrations view to fix several UI control related issues.

Search now defaults back to all onchange

Menu is now sticky

@clintandrewhall clintandrewhall added review loe:small Small Level of Effort v8.0.0 release_note:skip Skip the PR/issue when compiling release notes impact:medium Addressing this issue will have a medium level of impact on the quality/strength of our product. auto-backport Deprecated - use backport:version if exact versions are needed v7.16.0 Feature:Unified Integrations Unified Integrations view feature labels Oct 12, 2021
@clintandrewhall clintandrewhall requested a review from a team as a code owner October 12, 2021 17:24
@botelastic botelastic bot added the Team:Fleet Team label for Observability Data Collection Fleet team label Oct 12, 2021
@elasticmachine
Copy link
Contributor

Pinging @elastic/fleet (Team:Fleet)

@clintandrewhall
Copy link
Contributor Author

@elasticmachine merge upstream

@clintandrewhall clintandrewhall enabled auto-merge (squash) October 12, 2021 17:25
dborodyansky
dborodyansky reviewed Oct 12, 2021
View reviewed changes
Copy link
Contributor

@dborodyansky dborodyansky left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@clintandrewhall Ideally we would want each card in a row to have uniform height, as observed on original "add data" page.

image

@clintandrewhall
Copy link
Contributor Author

@dborodyansky Done.

@clintandrewhall clintandrewhall mentioned this pull request Oct 13, 2021
Closed
63 tasks
@joshdover
Copy link
Contributor

The padding and spacing is looking quite a bit different in the actual app than inside storybook. Lots of icons overlapping with the titles.

image

@clintandrewhall clintandrewhall requested a review from a team as a code owner October 14, 2021 04:44
@snide snide changed the title [fleet] Adjust Package Cards to horizontal layout [fleet] Adjust unified integration view to have better UI controls Oct 14, 2021
@snide
Copy link
Contributor

snide commented Oct 14, 2021

@elasticmachine merge upstream

snide
snide reviewed Oct 14, 2021
View reviewed changes
x-pack/plugins/fleet/public/components/package_icon.tsx
@@ -23,9 +23,9 @@ export const CardIcon: React.FunctionComponent<UsePackageIconType & Omit<EuiIcon
) => {
const { icons } = props;
if (icons && icons.length === 1 && icons[0].type === 'eui') {
return <EuiIcon size={'xl'} type={icons[0].src} />;
return <EuiIcon size={'xl'} type={icons[0].src} {...props} />;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@joshdover This part fixed the spacing. The EUI props weren't being passed down correctly. The EUI source component has a clone in it and this set of pages had some wrappers that were getting in the way.

@snide
Copy link
Contributor

snide commented Oct 14, 2021

Ok @joshdover did a little more layout cleanup on this one, but fixed those core issues you noticed. Should be reviewable. Fixed some other low hanging fruit issues while I was in there. Updated the description with a summary and screens.

joshdover
joshdover approved these changes Oct 14, 2021
View reviewed changes
Copy link
Contributor

@joshdover joshdover left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changes LGTM and tested everything locally. Thanks @clintandrewhall and @snide

@kibanamachine
Copy link
Contributor

💚 Build Succeeded

Metrics [docs]

Async chunks

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

id before after diff
fleet 635.6KB 635.1KB -541.0B

Page load bundle

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

id before after diff
core 301.2KB 302.8KB +1.6KB

History

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

cc @snide

@snide snide disabled auto-merge October 14, 2021 14:17
@snide snide merged commit 864e6f1 into elastic:master Oct 14, 2021
@kibanamachine
Copy link
Contributor

💔 Backport failed

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

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

thomasneirynck pushed a commit to thomasneirynck/kibana that referenced this pull request Oct 14, 2021
@clintandrewhall @kibanamachine
@snide @joshdover @thomasneirynck
[fleet] Adjust unified integration view to have better UI controls (e…
3acd972 
…lastic#114692)

* [fleet] Adjust Package Cards to horizontal layout

* Fix responsive shifting

* Addressing feedback

* cleanup layout for integrations view

* i18n

* Fix type errors

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Dave Snider <dave.snider@gmail.com>
Co-authored-by: Josh Dover <1813008+joshdover@users.noreply.github.com>
@thomasneirynck thomasneirynck mentioned this pull request Oct 14, 2021
Merged
thomasneirynck added a commit that referenced this pull request Oct 15, 2021
@thomasneirynck @clintandrewhall
@kibanamachine @snide @joshdover
[fleet] Adjust unified integration view to have better UI controls (#…
62c33f2 
…114692) (#115119)

* [fleet] Adjust Package Cards to horizontal layout

* Fix responsive shifting

* Addressing feedback

* cleanup layout for integrations view

* i18n

* Fix type errors

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Dave Snider <dave.snider@gmail.com>
Co-authored-by: Josh Dover <1813008+joshdover@users.noreply.github.com>

Co-authored-by: Clint Andrew Hall <clint.hall@elastic.co>
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Dave Snider <dave.snider@gmail.com>
Co-authored-by: Josh Dover <1813008+joshdover@users.noreply.github.com>
artem-shelkovnikov pushed a commit to artem-shelkovnikov/kibana that referenced this pull request Oct 20, 2021
@clintandrewhall @kibanamachine
@snide @joshdover @artem-shelkovnikov
[fleet] Adjust unified integration view to have better UI controls (e…
5516f3c 
…lastic#114692)

* [fleet] Adjust Package Cards to horizontal layout

* Fix responsive shifting

* Addressing feedback

* cleanup layout for integrations view

* i18n

* Fix type errors

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Dave Snider <dave.snider@gmail.com>
Co-authored-by: Josh Dover <1813008+joshdover@users.noreply.github.com>
@clintandrewhall clintandrewhall deleted the fleet/horizontal branch December 29, 2021 17:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@snide snide snide left review comments

@juliaElastic juliaElastic juliaElastic left review comments

@joshdover joshdover joshdover approved these changes

@thomasneirynck thomasneirynck Awaiting requested review from thomasneirynck

@dborodyansky dborodyansky Awaiting requested review from dborodyansky

Assignees

@snide snide

Labels
auto-backport Deprecated - use backport:version if exact versions are needed Feature:Unified Integrations Unified Integrations view feature impact:medium Addressing this issue will have a medium level of impact on the quality/strength of our product. loe:small Small Level of Effort release_note:skip Skip the PR/issue when compiling release notes review Team:Fleet Team label for Observability Data Collection Fleet team v7.16.0 v8.0.0
Projects
None yet
Milestone
No milestone
7 participants
@clintandrewhall @elasticmachine @joshdover @snide @kibanamachine @dborodyansky @juliaElastic