Skip to content

[APM] Switching service groups from grid to flex layout#147448

Merged
yngrdyn merged 4 commits intoelastic:mainfrom
yngrdyn:service-group-layout-horizontal-align
Dec 14, 2022
Merged

[APM] Switching service groups from grid to flex layout#147448
yngrdyn merged 4 commits intoelastic:mainfrom
yngrdyn:service-group-layout-horizontal-align

Conversation

@yngrdyn
Copy link
Contributor

@yngrdyn yngrdyn commented Dec 13, 2022 •
edited by kibanamachine
Loading

Closes #147435.

Changes

  • ServiceGroupList is now using EuiFlexGroup. Grid is not suitable for this case since the ServiceGroupCard has a fixed width.
  • ServiceGroupCard width is changed to 100% when we are in mobile resolutions.

Before

Screen.Recording.2022-12-13.at.16.15.42.mov

After

Screen.Recording.2022-12-13.at.16.13.17.mov

@yngrdyn yngrdyn added backport This PR is a backport of another PR release_note:skip Skip the PR/issue when compiling release notes v8.6.0 v8.7.0 v8.6.1 labels Dec 13, 2022
@yngrdyn yngrdyn requested a review from a team December 13, 2022 15:18
@botelastic botelastic bot added the Team:APM - DEPRECATED Use Team:obs-ux-infra_services. label Dec 13, 2022
@elasticmachine
Copy link
Contributor

elasticmachine commented Dec 13, 2022

Pinging @elastic/apm-ui (Team:APM)

@yngrdyn yngrdyn removed the v8.6.1 label Dec 13, 2022
@kibana-ci
Copy link

kibana-ci commented Dec 14, 2022

💚 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
apm 3.2MB 3.2MB +69.0B
Unknown metric groups

ESLint disabled in files

id before after diff
osquery 1 2 +1

ESLint disabled line counts

id before after diff
enterpriseSearch 19 21 +2
fleet 60 66 +6
osquery 109 115 +6
securitySolution 445 451 +6
total +20

Total ESLint disabled count

id before after diff
enterpriseSearch 20 22 +2
fleet 69 75 +6
osquery 110 117 +7
securitySolution 521 527 +6
total +21

History

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

@yngrdyn yngrdyn merged commit d53a159 into elastic:main Dec 14, 2022
@kibanamachine
Copy link
Contributor

kibanamachine commented Dec 14, 2022

💔 All backports failed

Status Branch Result
❌ 8.6 Backport failed because of merge conflicts

Manual backport

To create the backport manually run:

node scripts/backport --pr 147448

Questions ?

Please refer to the Backport tool documentation

@yngrdyn yngrdyn mentioned this pull request Dec 14, 2022
Merged
yngrdyn added a commit to yngrdyn/kibana that referenced this pull request Dec 14, 2022
@yngrdyn
[APM] Switching service groups from grid to flex layout (elastic#147448)
034f3b9 
Closes elastic#147435.

### Changes
- `ServiceGroupList` is now using `EuiFlexGroup`. Grid is not suitable
for this case since the `ServiceGroupCard` has a fixed width.
- `ServiceGroupCard` width is changed to `100%` when we are in mobile
resolutions.

**Before**

https://user-images.githubusercontent.com/1313018/207371784-60dbb1e3-7295-4d33-a62d-d051d652a2b0.mov

**After**

https://user-images.githubusercontent.com/1313018/207371298-fc970def-332f-4cfe-9603-efdf68f1ce8e.mov
(cherry picked from commit d53a159)

# Conflicts:
#	x-pack/plugins/apm/public/components/app/service_groups/service_groups_list/service_group_card.tsx
#	x-pack/plugins/apm/public/components/app/service_groups/service_groups_list/service_groups_list.tsx
@yngrdyn
Copy link
Contributor Author

yngrdyn commented Dec 14, 2022

💚 All backports created successfully

Status Branch Result
✅ 8.6

Note: Successful backport PRs will be merged automatically after passing CI.

Questions ?

Please refer to the Backport tool documentation

yngrdyn added a commit that referenced this pull request Dec 14, 2022
@yngrdyn
[8.6] [APM] Switching service groups from grid to flex layout (#147448)…
e4711bb 
… (#147513)

# Backport

This will backport the following commits from `main` to `8.6`:
- [[APM] Switching service groups from grid to flex layout
(#147448)](#147448)

<!--- Backport version: 8.9.7 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Yngrid
Coello","email":"yngrid.coello@elastic.co"},"sourceCommit":{"committedDate":"2022-12-14T11:03:32Z","message":"[APM]
Switching service groups from grid to flex layout (#147448)\n\nCloses
https://github.com/elastic/kibana/issues/147435.\r\n\r\n### Changes\r\n-
`ServiceGroupList` is now using `EuiFlexGroup`. Grid is not
suitable\r\nfor this case since the `ServiceGroupCard` has a fixed
width.\r\n- `ServiceGroupCard` width is changed to `100%` when we are in
mobile\r\nresolutions.\r\n\r\n**Before**\r\n\r\n\r\nhttps://user-images.githubusercontent.com/1313018/207371784-60dbb1e3-7295-4d33-a62d-d051d652a2b0.mov\r\n\r\n\r\n**After**\r\n\r\n\r\nhttps://user-images.githubusercontent.com/1313018/207371298-fc970def-332f-4cfe-9603-efdf68f1ce8e.mov","sha":"d53a159405dd90e8f70c18d137ce5997d6403cd8","branchLabelMapping":{"^v8.7.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["backport","Team:APM","release_note:skip","v8.6.0","v8.7.0"],"number":147448,"url":"https://github.com/elastic/kibana/pull/147448","mergeCommit":{"message":"[APM]
Switching service groups from grid to flex layout (#147448)\n\nCloses
https://github.com/elastic/kibana/issues/147435.\r\n\r\n### Changes\r\n-
`ServiceGroupList` is now using `EuiFlexGroup`. Grid is not
suitable\r\nfor this case since the `ServiceGroupCard` has a fixed
width.\r\n- `ServiceGroupCard` width is changed to `100%` when we are in
mobile\r\nresolutions.\r\n\r\n**Before**\r\n\r\n\r\nhttps://user-images.githubusercontent.com/1313018/207371784-60dbb1e3-7295-4d33-a62d-d051d652a2b0.mov\r\n\r\n\r\n**After**\r\n\r\n\r\nhttps://user-images.githubusercontent.com/1313018/207371298-fc970def-332f-4cfe-9603-efdf68f1ce8e.mov","sha":"d53a159405dd90e8f70c18d137ce5997d6403cd8"}},"sourceBranch":"main","suggestedTargetBranches":["8.6"],"targetPullRequestStates":[{"branch":"8.6","label":"v8.6.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.7.0","labelRegex":"^v8.7.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/147448","number":147448,"mergeCommit":{"message":"[APM]
Switching service groups from grid to flex layout (#147448)\n\nCloses
https://github.com/elastic/kibana/issues/147435.\r\n\r\n### Changes\r\n-
`ServiceGroupList` is now using `EuiFlexGroup`. Grid is not
suitable\r\nfor this case since the `ServiceGroupCard` has a fixed
width.\r\n- `ServiceGroupCard` width is changed to `100%` when we are in
mobile\r\nresolutions.\r\n\r\n**Before**\r\n\r\n\r\nhttps://user-images.githubusercontent.com/1313018/207371784-60dbb1e3-7295-4d33-a62d-d051d652a2b0.mov\r\n\r\n\r\n**After**\r\n\r\n\r\nhttps://user-images.githubusercontent.com/1313018/207371298-fc970def-332f-4cfe-9603-efdf68f1ce8e.mov","sha":"d53a159405dd90e8f70c18d137ce5997d6403cd8"}}]}]
BACKPORT-->
jloleysens added a commit to jloleysens/kibana that referenced this pull request Dec 14, 2022
@jloleysens
Merge branch 'main' into only-migrate-if-needed-KBNA-4488
60d2987 
* main: (21 commits)
  [Profiling] Remove link to 'Other' bucket (elastic#147523)
  [Synthetics UI] Add missing configuration options to the add/edit monitor forms (elastic#147265)
  [DOCS] Updates what's new pages (elastic#147483)
  [Fleet][Endpoint][RBAC V2] Update fleet router and config to allow API access via RBAC controls (elastic#145361)
  [Guided onboarding] Update guide IDs (elastic#147348)
  [Synthetics] Add synthetics settings alerting default (elastic#147339)
  [Security Solution][Endpoint] Fix Policy form being displayed as Read Only when displayed in Fleet pages (elastic#147212)
  [Cases] Save draft user comment (elastic#146327)
  [API Docs] Fix `--plugin` filter (elastic#147500)
  [Fleet] added a logic to use `destinationId` when tagging imported SOs (elastic#147439)
  Do not skip UPDATE_TARGET_MAPPINGS if upgrading to a newer stack version (elastic#147503)
  [Discover] Validate if Data View time field exists on Alert creation / editing (elastic#146324)
  [Discover] Fix Discover navigation from Lens embeddable (elastic#147000)
  Allow users to Update API Keys (elastic#146237)
  Update dependency xstate to ^4.35.0 (main) (elastic#147463)
  [Behavioral Analytics] Remove feature flag to hide functionality (elastic#147429)
  [Fleet] Add agent policy `inactivity_timeout`experimental setting (elastic#147432)
  [APM] Switching service groups from grid to flex layout (elastic#147448)
  [Fleet] Add missing endpoints to openApi specs (elastic#147452)
  [AO] Allow providing custom time range for Alert Summary Widget (elastic#147253)
  ...
nreese pushed a commit to nreese/kibana that referenced this pull request Dec 16, 2022
@yngrdyn @nreese
[APM] Switching service groups from grid to flex layout (elastic#147448)
0e86244 
Closes elastic#147435.

### Changes
- `ServiceGroupList` is now using `EuiFlexGroup`. Grid is not suitable
for this case since the `ServiceGroupCard` has a fixed width.
- `ServiceGroupCard` width is changed to `100%` when we are in mobile
resolutions.

**Before**


https://user-images.githubusercontent.com/1313018/207371784-60dbb1e3-7295-4d33-a62d-d051d652a2b0.mov


**After**


https://user-images.githubusercontent.com/1313018/207371298-fc970def-332f-4cfe-9603-efdf68f1ce8e.mov
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@sorenlouv sorenlouv sorenlouv approved these changes

Assignees

No one assigned

Labels

backport This PR is a backport of another PR release_note:skip Skip the PR/issue when compiling release notes Team:APM - DEPRECATED Use Team:obs-ux-infra_services. v8.6.0 v8.7.0

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[APM] Service groups layout is incorrect

5 participants

@yngrdyn @elasticmachine @kibana-ci @kibanamachine @sorenlouv