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

[Infra] Add collapsible sections #176048

Merged
merged 13 commits into from
Feb 2, 2024
Merged

[Infra] Add collapsible sections #176048

merged 13 commits into from
Feb 2, 2024

Conversation

jennypavlova
Copy link
Member

Closes #175558

Summary

This PR makes all asset details overview sections collapsible. All sections will be always open by default and the user should be able to expand/collapse a section.

Screenshot 2024-02-01 at 12 04 24 Screenshot 2024-02-01 at 12 03 50

Testing

  1. Open Host view
  2. Open the hosts flyout and go to the overview tab
    • All sections should be collapsible
    • All section buttons should be clickable
Screen.Recording.2024-02-01.at.12.07.53.mov
  1. Open the asset details page and go to the overview tab
    • All sections should be collapsible
    • All section buttons should be clickable
Screen.Recording.2024-02-01.at.12.23.38.mov

@jennypavlova jennypavlova added release_note:skip Skip the PR/issue when compiling release notes backport:skip This commit does not require backporting Team:obs-ux-infra_services Observability Infrastructure & Services User Experience Team labels Feb 1, 2024
@jennypavlova jennypavlova self-assigned this Feb 1, 2024
@apmmachine
Copy link
Contributor

🤖 GitHub comments

Expand to view the GitHub comments

Just comment with:

  • /oblt-deploy : Deploy a Kibana instance using the Observability test environments.
  • /oblt-deploy-serverless : Deploy a serverless Kibana instance using the Observability test environments.
  • run elasticsearch-ci/docs : Re-trigger the docs validation. (use unformatted text in the comment!)

@jennypavlova
Copy link
Member Author

/ci

@jennypavlova jennypavlova marked this pull request as ready for review February 1, 2024 12:15
@jennypavlova jennypavlova requested a review from a team as a code owner February 1, 2024 12:15
@elasticmachine
Copy link
Contributor

Pinging @elastic/obs-ux-infra_services-team (Team:obs-ux-infra_services)

cauemarcondes
cauemarcondes reviewed Feb 1, 2024
View reviewed changes
x-pack/plugins/infra/public/components/asset_details/links/link_to_alerts.tsx Outdated Show resolved Hide resolved
x-pack/plugins/infra/public/components/asset_details/tabs/common/popover.tsx Show resolved Hide resolved
x-pack/plugins/infra/public/components/asset_details/tabs/overview/alerts.tsx Outdated Show resolved Hide resolved
x-pack/plugins/infra/public/components/asset_details/tabs/overview/metrics/metrics_section.tsx Outdated Show resolved Hide resolved
x-pack/plugins/infra/public/components/asset_details/tabs/overview/metrics/metrics_section.tsx Outdated Show resolved Hide resolved
.../plugins/infra/public/components/asset_details/tabs/overview/section/collapsible_section.tsx Outdated Show resolved Hide resolved
.../plugins/infra/public/components/asset_details/tabs/overview/section/collapsible_section.tsx Outdated Show resolved Hide resolved
x-pack/plugins/infra/public/components/asset_details/tabs/overview/alerts.tsx Outdated
Comment on lines 56 to 59
onClick={(e) => {
e.stopPropagation();
toggleAlertFlyout();
}}
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
onClick={(e) => {
e.stopPropagation();
toggleAlertFlyout();
}}
onClick={toggleAlertFlyout}

Copy link
Member Author

Choose a reason for hiding this comment

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

https://github.com/elastic/kibana/pull/176048/files#r1474804714

...fra/public/components/asset_details/tabs/overview/metadata_summary/metadata_summary_list.tsx Outdated Show resolved Hide resolved
...fra/public/components/asset_details/tabs/overview/metadata_summary/metadata_summary_list.tsx Outdated Show resolved Hide resolved
@jennypavlova
Copy link
Member Author

@cauemarcondes Thank you for reviewing the PR! I added comments related to the onClick suggestions and fixed the other parts mentioned, can you please take a look again when you have time?

@jennypavlova jennypavlova force-pushed the 175558-infra-add-collapsible-sections branch from c3f0b87 to 9dca91a Compare February 1, 2024 17:44
cauemarcondes
cauemarcondes approved these changes Feb 2, 2024
View reviewed changes
Copy link
Contributor

@cauemarcondes cauemarcondes left a comment

Choose a reason for hiding this comment

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

LGTM

x-pack/plugins/infra/public/components/asset_details/tabs/overview/alerts.tsx Outdated
<EuiFlexItem grow={false}>
<LinkToAlertsRule
onClick={(e) => {
// e.stopPropagation();
Copy link
Contributor

Choose a reason for hiding this comment

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

Maybe you can remove this?

Copy link
Member Author

Choose a reason for hiding this comment

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

Fixed, thanks :)

@kibana-ci
Copy link
Collaborator

💛 Build succeeded, but was flaky

Failed CI Steps

Test Failures

  • [job] [logs] Jest Tests #5 / EditTags renders no tags, and then edit

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id before after diff
infra 1411 1412 +1

Async chunks

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

id before after diff
infra 1.3MB 1.3MB +848.0B

History

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

cc @jennypavlova

@jennypavlova jennypavlova merged commit 5221756 into elastic:main Feb 2, 2024
18 checks passed
@jennypavlova jennypavlova deleted the 175558-infra-add-collapsible-sections branch February 2, 2024 16:44
fkanout pushed a commit to fkanout/kibana that referenced this pull request Feb 7, 2024
@jennypavlova @fkanout
[Infra] Add collapsible sections (elastic#176048)
50b9bc9 
Closes elastic#175558

## Summary

This PR makes all asset details overview sections collapsible. All
sections will be always open by default and the user should be able to
expand/collapse a section.

 
<img width="300" alt="Screenshot 2024-02-01 at 12 04 24"
src="https://github.com/elastic/kibana/assets/14139027/b91a190a-eaec-4031-8591-f11a3a04f201">
<img width="300" alt="Screenshot 2024-02-01 at 12 03 50"
src="https://github.com/elastic/kibana/assets/14139027/9d8c20fc-3a27-481c-89ad-1fd7f0e6df47">

## Testing

1. Open Host view
2. Open the hosts flyout and go to the overview tab
   - All sections should be collapsible
   - All section buttons should be clickable


https://github.com/elastic/kibana/assets/14139027/27a6df67-c560-42d6-9166-a8f45880cf8e

3. Open the asset details page and go to the overview tab
   - All sections should be collapsible
   - All section buttons should be clickable


https://github.com/elastic/kibana/assets/14139027/f7225ddd-c2a3-4a7b-b520-22acb41e9080
CoenWarmer pushed a commit to CoenWarmer/kibana that referenced this pull request Feb 15, 2024
@jennypavlova @CoenWarmer
[Infra] Add collapsible sections (elastic#176048)
c05f739 
Closes elastic#175558

## Summary

This PR makes all asset details overview sections collapsible. All
sections will be always open by default and the user should be able to
expand/collapse a section.

 
<img width="300" alt="Screenshot 2024-02-01 at 12 04 24"
src="https://github.com/elastic/kibana/assets/14139027/b91a190a-eaec-4031-8591-f11a3a04f201">
<img width="300" alt="Screenshot 2024-02-01 at 12 03 50"
src="https://github.com/elastic/kibana/assets/14139027/9d8c20fc-3a27-481c-89ad-1fd7f0e6df47">

## Testing

1. Open Host view
2. Open the hosts flyout and go to the overview tab
   - All sections should be collapsible
   - All section buttons should be clickable


https://github.com/elastic/kibana/assets/14139027/27a6df67-c560-42d6-9166-a8f45880cf8e

3. Open the asset details page and go to the overview tab
   - All sections should be collapsible
   - All section buttons should be clickable


https://github.com/elastic/kibana/assets/14139027/f7225ddd-c2a3-4a7b-b520-22acb41e9080
fkanout pushed a commit to fkanout/kibana that referenced this pull request Mar 4, 2024
@jennypavlova @fkanout
[Infra] Add collapsible sections (elastic#176048)
931bdc8 
Closes elastic#175558

## Summary

This PR makes all asset details overview sections collapsible. All
sections will be always open by default and the user should be able to
expand/collapse a section.

 
<img width="300" alt="Screenshot 2024-02-01 at 12 04 24"
src="https://github.com/elastic/kibana/assets/14139027/b91a190a-eaec-4031-8591-f11a3a04f201">
<img width="300" alt="Screenshot 2024-02-01 at 12 03 50"
src="https://github.com/elastic/kibana/assets/14139027/9d8c20fc-3a27-481c-89ad-1fd7f0e6df47">

## Testing

1. Open Host view
2. Open the hosts flyout and go to the overview tab
   - All sections should be collapsible
   - All section buttons should be clickable


https://github.com/elastic/kibana/assets/14139027/27a6df67-c560-42d6-9166-a8f45880cf8e

3. Open the asset details page and go to the overview tab
   - All sections should be collapsible
   - All section buttons should be clickable


https://github.com/elastic/kibana/assets/14139027/f7225ddd-c2a3-4a7b-b520-22acb41e9080
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@cauemarcondes cauemarcondes cauemarcondes approved these changes

Assignees

@jennypavlova jennypavlova

Labels
backport:skip This commit does not require backporting release_note:skip Skip the PR/issue when compiling release notes Team:obs-ux-infra_services Observability Infrastructure & Services User Experience Team v8.13.0
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[ObsUx][Infra] Add collapsible sections in the overview tab
6 participants
@jennypavlova @apmmachine @elasticmachine @kibana-ci @cauemarcondes @kibanamachine