[Logs UI][Metrics UI] Move actions to the kibana header #84648

afgomez · 2020-12-01T14:22:04Z

Summary

Closes #82823

This PR moves the right-side actions from the tab bar to the kibana header, to align with other plugins.

Before:

After:

Implementation details

The implementation is inspired by #82292 and reuses some of the plugins present there.

We had to expose the appMountParameters.setHeaderActionMenu to the UI. We did this through a new context.

Moving forward, it can be interesting to create an InfraContext to aggregate all these dependencies (similiar to what APM does) instead of nesting contexts within each other.

elasticmachine · 2020-12-01T14:22:07Z

Pinging @elastic/logs-metrics-ui (Team:logs-metrics-ui)

katrin-freihofner · 2020-12-02T12:27:33Z

Thank you for adding this!

In the logs UI I only found a small issue when it comes to small screens:

In the metrics UI, I feel that the buttons are appearing/disappearing depending on the tab underneath is not great.

I think we could leave the buttons always there, independent of the tab. Do you think we should handle this separately?

afgomez · 2020-12-02T13:32:38Z

Thanks for the review @katrin-freihofner

In the logs UI I only found a small issue when it comes to small screens:

I'll take a look 👍

In the metrics UI, I feel that the buttons are appearing/disappearing depending on the tab underneath is not great.

I think this is intentional (it was like that before). Can someone from @elastic/metrics-ui comment on that?

phillipb · 2020-12-02T14:01:40Z

@afgomez, @katrin-freihofner yes, it is intentional. Anomaly detection only detects anomalies for inventory. Also, on the settings page if we were to show the "Alerts" button, which alerts flyout would appear -- the one for metrics explorer or the one for inventory?

katrin-freihofner · 2020-12-02T14:53:13Z

Ok, it is probably fine to move forward with this to finish the PR. But we should definitely look into this again soon, I will talk to @katefarrar about it.

afgomez · 2020-12-02T16:05:15Z

In the logs UI I only found a small issue when it comes to small screens

@katrin-freihofner this is fixed now. Do you mind taking another look?

katrin-freihofner

Looks good! Thank you.

phillipb

Metrics stuff looks good. Thanks!

weltenwort · 2020-12-08T15:44:13Z

@elasticmachine merge upstream

kibanamachine · 2020-12-08T17:26:40Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: 1d26457

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`infra`	1084	1085	+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`	2.7MB	2.7MB	+2.2KB

Distributable file count

id	before	after	diff
`default`	46960	47720	+760

History

💚 Build #91405 succeeded a506be2
💚 Build #91304 succeeded 04c97be
💔 Build #91028 failed c5375ef

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

weltenwort

Simple and clean, LGTM

weltenwort · 2020-12-08T16:27:07Z

x-pack/plugins/infra/public/utils/header_action_menu_provider.tsx

+export const HeaderActionMenuProvider: React.FC<Required<ContextProps>> = ({
+  setHeaderActionMenu,
+  children,
+}) => {
+  return (
+    <HeaderActionMenuContext.Provider value={{ setHeaderActionMenu }}>
+      {children}
+    </HeaderActionMenuContext.Provider>
+  );
+};


What's the purpose of wrapping the provider in another component? Could <HeaderActionMenuContext.Provider just be used directly?

It's a way to abstract the value away into a meaningful name.

I think moving forward it would be interesting to add an InfraContext that holds all of these little things instead of having 3-4 wrappers, but that's a story for another PR.

…k-field-to-hot-phase * 'master' of github.com:elastic/kibana: (429 commits) simplify popover open state logic (elastic#85379) [Logs UI][Metrics UI] Move actions to the kibana header (elastic#84648) [Search Source] Do not pick scripted fields if * provided (elastic#85133) [Search] Session SO polling (elastic#84225) [Transform] Replace legacy elasticsearch client (elastic#84932) [Uptime]Refactor header and action menu (elastic#83779) Fix agg select external link (elastic#85380) [ILM] Show forcemerge in hot when rollover is searchable snapshot is enabled (elastic#85292) clear using keyboard (elastic#85042) [GS] add tag and dashboard suggestion results (elastic#85144) [ML] API integration tests - skip GetAnomaliesTableData Add ECS field for event.code. (elastic#85109) [Functional][TSVB] Wait for markdown textarea to be cleaned (elastic#85128) skip flaky suite (elastic#62060) skip flaky suite (elastic#85098) Bump highlight.js to v9.18.5 (elastic#84296) Add `server.publicBaseUrl` config (elastic#85075) [Alerting & Actions ] More debug logging (elastic#85149) [Security Solution][Case] Manual attach alert to a case (elastic#82996) Loosen UUID regex to accept uuidv1 or uuidv4 (elastic#85338) ... # Conflicts: # x-pack/plugins/index_lifecycle_management/__jest__/client_integration/edit_policy/edit_policy.helpers.tsx # x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/hot_phase/hot_phase.tsx # x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/shared_fields/index.ts # x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/components/phases/warm_phase/warm_phase.tsx # x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/edit_policy.tsx # x-pack/plugins/index_lifecycle_management/public/application/sections/edit_policy/i18n_texts.ts # x-pack/plugins/index_lifecycle_management/server/routes/api/policies/register_create_route.ts

#85416) Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

afgomez added 3 commits December 1, 2020 15:17

Expose setHeaderActionMenu to the infra plugin

bf816d9

Move the Logs' actions to the kibana header

1f13227

Move the Metrics' actions to the kibana header

c5375ef

afgomez added this to the Logs UI 7.11 milestone Dec 1, 2020

afgomez requested a review from a team as a code owner December 1, 2020 14:22

afgomez mentioned this pull request Dec 1, 2020

[Logs & Metrics UI] Consistent menu options utilizing the new header in Kibana #82823

Closed

2 tasks

afgomez requested a review from katrin-freihofner December 1, 2020 14:37

Merge branch 'master' into 82823-infra-header-actions

04c97be

Fix actions in small screens

a506be2

katrin-freihofner approved these changes Dec 3, 2020

View reviewed changes

phillipb approved these changes Dec 3, 2020

View reviewed changes

Merge branch 'master' into 82823-infra-header-actions

1d26457

weltenwort approved these changes Dec 8, 2020

View reviewed changes

afgomez merged commit f31e7c8 into elastic:master Dec 9, 2020

afgomez deleted the 82823-infra-header-actions branch December 9, 2020 12:43

afgomez mentioned this pull request Dec 9, 2020

[7.x] [Logs UI][Metrics UI] Move actions to the kibana header (#84648) #85416

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Logs UI][Metrics UI] Move actions to the kibana header #84648

[Logs UI][Metrics UI] Move actions to the kibana header #84648

afgomez commented Dec 1, 2020 •

edited

Loading

elasticmachine commented Dec 1, 2020

katrin-freihofner commented Dec 2, 2020

afgomez commented Dec 2, 2020

phillipb commented Dec 2, 2020 •

edited

Loading

katrin-freihofner commented Dec 2, 2020

afgomez commented Dec 2, 2020

katrin-freihofner left a comment

phillipb left a comment

weltenwort commented Dec 8, 2020

kibanamachine commented Dec 8, 2020

weltenwort left a comment

weltenwort Dec 8, 2020

afgomez Dec 9, 2020

[Logs UI][Metrics UI] Move actions to the kibana header #84648

[Logs UI][Metrics UI] Move actions to the kibana header #84648

Conversation

afgomez commented Dec 1, 2020 • edited Loading

Summary

Implementation details

elasticmachine commented Dec 1, 2020

katrin-freihofner commented Dec 2, 2020

afgomez commented Dec 2, 2020

phillipb commented Dec 2, 2020 • edited Loading

katrin-freihofner commented Dec 2, 2020

afgomez commented Dec 2, 2020

katrin-freihofner left a comment

Choose a reason for hiding this comment

phillipb left a comment

Choose a reason for hiding this comment

weltenwort commented Dec 8, 2020

kibanamachine commented Dec 8, 2020

💚 Build Succeeded

Metrics [docs]

Module Count

Async chunks

Distributable file count

History

weltenwort left a comment

Choose a reason for hiding this comment

weltenwort Dec 8, 2020

Choose a reason for hiding this comment

afgomez Dec 9, 2020

Choose a reason for hiding this comment

afgomez commented Dec 1, 2020 •

edited

Loading

phillipb commented Dec 2, 2020 •

edited

Loading