APM header changes #82870

smith · 2020-11-06T17:30:56Z

Make APM and UX headers size medium instead of large
Remove margin around APM main container
Make APM tabs condensed
Switch environment filter and date picker positions
Move search bar (kuery + date picker) below the tabs
Wrap pages in EuiPage components
Set a minimum width on the enironment selector so it doesn't collapse when loading
Don't show search bar on service map

Fixes #81954. Fixes #81723.

Before

After

- Make APM and UX headers size medium instead of large - Remove margin around APM main container - Make APM tabs condensed - Switch environment filter and date picker positions - Move search bar (kuery + date picker) below the tabs - Wrap pages in `EuiPage` components - Set a minimum width on the enironment selector so it doesn't collapse when loading - Don't show search bar on service map Fixes elastic#81954.

elasticmachine · 2020-11-06T17:31:02Z

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

elasticmachine · 2020-11-06T17:31:02Z

Pinging @elastic/uptime (Team:uptime)

smith · 2020-11-09T02:16:15Z

@elasticmachine merge upstream

smith · 2020-11-09T05:15:07Z

retest

smith · 2020-11-10T04:38:06Z

@elasticmachine merge upstream

formgeist

Minor suggestion to change the padding of the tabs.

formgeist · 2020-11-10T08:25:38Z

x-pack/plugins/apm/public/components/shared/main_tabs.tsx

+// be the primary color.
+const StyledTabs = styled(EuiTabs)`
+  padding: ${({ theme }) =>
+    `${theme.eui.gutterTypes.gutterMedium} ${theme.eui.gutterTypes.gutterLarge}`};


Suggested change

`${theme.eui.gutterTypes.gutterMedium} ${theme.eui.gutterTypes.gutterLarge}`};

`${theme.eui.gutterTypes.gutterMedium}`};

I reckon the padding shouldn't be larger on the sides to make it align down the page.

Before

After

formgeist · 2020-11-10T08:30:02Z

Another issue, wasn't sure where to comment on this within the code, but there's some focus states on the tabs that don't work as expected. I think Logs and Metrics have a larger focus area on the tabs than what's in the current tabs.

APM

Logs

Lastly, the order of the selected service changed so now Metrics are at the end of the list. I'm assuming this was not intentional, just wanted to point it out.

smith · 2020-11-10T15:23:31Z

@formgeist

I reckon the padding shouldn't be larger on the sides to make it align down the page.

I can change this, but it makes the padding inconsistent with the tabs on the metrics, logs, security, and fleet pages.

there's some focus states on the tabs that don't work as expected.

I'll look into this.

Lastly, the order of the selected service changed so now Metrics are at the end of the list. I'm assuming this was not intentional, just wanted to point it out.

It was intentional, but I can move it back. Since the tab usually is rendered later I found it less jarring if it gets added at the end than if it gets added between tabs.

smith · 2020-11-10T18:05:02Z

@formgeist

there's some focus states on the tabs that don't work as expected.

This is because we have <APMLink /> (or <ServiceMapLink /> or whatever) links inside of the tabs and are not specifying the href attribute on the tabs directly.

I left these as-is so I wouldn't have to rework all of these (the way it's set up it's easy to get a link element but harder to just get the href.)

The only difference I noticed before is that we had to override the link color so they weren't all blue, since this affects the focus I'll go ahead and fix this.

smith · 2020-11-10T23:38:24Z

@formgeist all of your comments should be addressed now.

@sqren I had to go and implement useXHref hooks in the files for the XLink components since putting a link element inside of a tab messes up the focus, but using a straight href attribute does not.

formgeist · 2020-11-11T08:43:23Z

I can change this, but it makes the padding inconsistent with the tabs on the metrics, logs, security, and fleet pages.

OK, I will follow up with @elastic/observability-design to make the padding in the header consistent.

It was intentional, but I can move it back. Since the tab usually is rendered later I found it less jarring if it gets added at the end than if it gets added between tabs.

Alright - would be great to have this called out in the PR next time otherwise it might have gone unnoticed. I understand that the Metrics tab will mostly load in late because of the agent check, but with RUM moving to the UX app (where we'd remove the option), would we be able to assume that the service navigation should always show Metrics, rather than wait for the check? I might even say we can disable the option for RUM rather than hide it. We can move this discussion and decision to an issue. Also in that discussion, we can talk about whether the horizontal list should be different. cc @nehaduggal @sqren

Thanks for addressing it - let's get this merged in and make polish changes in a later iteration.

sorenlouv · 2020-11-11T10:17:21Z

x-pack/plugins/apm/public/components/shared/Links/apm/service_inventory_link.tsx


-function ServiceInventoryLink(props: APMLinkExtendProps) {
+export function useServiceInventoryHref() {


Should the filename be changed to use_service_inventory_link.tsx?

I opened #83196 to look at this.

sorenlouv · 2020-11-11T10:18:38Z

x-pack/plugins/apm/public/components/shared/Links/apm/service_overview_link.tsx

+export function useServiceOverviewHref(serviceName: string) {
+  return useAPMHref(`/services/${serviceName}/overview`);
+}
+
 export function ServiceOverviewLink({


Is this component still needed if we have the hook? I'm all for simplifying our link helpers and having one way to do it might be better.

I opened #83196 to look at this.

smith · 2020-11-11T15:44:05Z

@formgeist

Alright - would be great to have this called out in the PR next time otherwise it might have gone unnoticed.

Sorry about that. I meant to put it in the description but missed it.

smith · 2020-11-11T15:44:39Z

@elasticmachine merge upstream

smith · 2020-11-11T18:51:16Z

retest

kibanamachine · 2020-11-12T21:47:44Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: e08352e

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`apm`	1160	1161	+1

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.1MB	3.1MB	+2.0KB
`observability`	160.8KB	160.8KB	-6.0B
total			+2.0KB

History

💔 Build #87422 failed e152134
💔 Build #87366 failed e152134
💔 Build #87274 failed ff8cd52
💔 Build #87251 failed 7353a41
💔 Build #87006 failed 35387c3

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

- Make APM and UX headers size medium instead of large - Remove margin around APM main container - Make APM tabs condensed - Switch environment filter and date picker positions - Move search bar (kuery + date picker) below the tabs - Wrap pages in `EuiPage` components - Set a minimum width on the enironment selector so it doesn't collapse when loading - Don't show search bar on service map Fixes elastic#81954.

- Make APM and UX headers size medium instead of large - Remove margin around APM main container - Make APM tabs condensed - Switch environment filter and date picker positions - Move search bar (kuery + date picker) below the tabs - Wrap pages in `EuiPage` components - Set a minimum width on the enironment selector so it doesn't collapse when loading - Don't show search bar on service map Fixes #81954.

* master: [Security Solution][Detections] Adds framework for replacing API schemas (elastic#82462) [Enterprise Search] Share Loading component (elastic#83246) Consolidates Jest configuration files and scripts (elastic#82671) APM header changes (elastic#82870) [Security Solutions] Adds a default for indicator match custom query of *:* (elastic#81727) [Security Solution] Note 10k object paging limit on Endpoint list (elastic#82889) [packerCache] fix gulp usage, don't archive node_modules (elastic#83327) Upgrade Node.js to version 12 (elastic#61587) [Actions] Removing placeholders and updating validation messages on connector forms (elastic#82734) [Fleet] Rename ingest_manager_api_integration tests fleet_api_integration (elastic#83011) [DOCS] Updates Discover docs (elastic#82773) [ML] Data frame analytics: Adds map view (elastic#81666) enables actions scoped within the stack to register at Basic license (elastic#82931)

This was supposed to be part of elastic#82870 but was missed. Add the search bar, format the heading stats, and wrape the page contents in an `EuiPage`.

smith added release_note:enhancement v8.0.0 v7.11.0 labels Nov 6, 2020

smith requested review from a team as code owners November 6, 2020 17:30

botelastic bot added Team:APM All issues that need APM UI Team support Team:Uptime - DEPRECATED Synthetics & RUM sub-team of Application Observability labels Nov 6, 2020

fix imports

efc2461

Merge branch 'master' into nls/header-layout

cd1d508

sorenlouv approved these changes Nov 9, 2020

View reviewed changes

Merge remote-tracking branch 'upstream/master' into nls/header-layout

2ced9d2

Merge branch 'master' into nls/header-layout

35387c3

formgeist approved these changes Nov 10, 2020

View reviewed changes

Merge remote-tracking branch 'upstream/master' into nls/header-layout

130abb8

smith added 2 commits November 10, 2020 17:24

Redo tabs

13d8523

Merge remote-tracking branch 'upstream/master' into nls/header-layout

7353a41

Merge remote-tracking branch 'upstream/master' into nls/header-layout

ff8cd52

sorenlouv reviewed Nov 11, 2020

View reviewed changes

sorenlouv approved these changes Nov 11, 2020

View reviewed changes

Merge branch 'master' into nls/header-layout

e152134

smith mentioned this pull request Nov 11, 2020

[APM] Refactor link helpers #83196

Closed

smith added 5 commits November 11, 2020 15:53

fixes

cd386f8

Merge remote-tracking branch 'upstream/master' into nls/header-layout

dc0130d

Merge remote-tracking branch 'upstream/master' into nls/header-layout

f3e2ab8

test fixes

e472d76

Merge remote-tracking branch 'upstream/master' into nls/header-layout

e08352e

smith merged commit 452d4c8 into elastic:master Nov 12, 2020

smith deleted the nls/header-layout branch November 12, 2020 22:26

smith mentioned this pull request Nov 15, 2020

[7.x] APM header changes (#82870) #83390

Merged

smith mentioned this pull request Nov 16, 2020

(Accessibility) APM - euiTabs missing required ARIA child roles #80599

Closed

smith mentioned this pull request Nov 20, 2020

Add search bar and fix layout on service node metrics #83945

Merged

sorenlouv added apm:test-plan-7.11.0 and removed apm:test-plan-7.11.0 labels Dec 18, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

APM header changes #82870

APM header changes #82870

smith commented Nov 6, 2020 •

edited

Loading

elasticmachine commented Nov 6, 2020

elasticmachine commented Nov 6, 2020

smith commented Nov 9, 2020

smith commented Nov 9, 2020

smith commented Nov 10, 2020

formgeist left a comment

formgeist Nov 10, 2020

formgeist commented Nov 10, 2020

smith commented Nov 10, 2020

smith commented Nov 10, 2020

smith commented Nov 10, 2020

formgeist commented Nov 11, 2020

sorenlouv Nov 11, 2020

smith Nov 11, 2020

sorenlouv Nov 11, 2020 •

edited

Loading

smith Nov 11, 2020

smith commented Nov 11, 2020

smith commented Nov 11, 2020

smith commented Nov 11, 2020

kibanamachine commented Nov 12, 2020

	`${theme.eui.gutterTypes.gutterMedium} ${theme.eui.gutterTypes.gutterLarge}`};
	`${theme.eui.gutterTypes.gutterMedium}`};


		function ServiceInventoryLink(props: APMLinkExtendProps) {
		export function useServiceInventoryHref() {

APM header changes #82870

APM header changes #82870

Conversation

smith commented Nov 6, 2020 • edited Loading

Before

After

elasticmachine commented Nov 6, 2020

elasticmachine commented Nov 6, 2020

smith commented Nov 9, 2020

smith commented Nov 9, 2020

smith commented Nov 10, 2020

formgeist left a comment

Choose a reason for hiding this comment

formgeist Nov 10, 2020

Choose a reason for hiding this comment

formgeist commented Nov 10, 2020

smith commented Nov 10, 2020

smith commented Nov 10, 2020

smith commented Nov 10, 2020

formgeist commented Nov 11, 2020

sorenlouv Nov 11, 2020

Choose a reason for hiding this comment

smith Nov 11, 2020

Choose a reason for hiding this comment

sorenlouv Nov 11, 2020 • edited Loading

Choose a reason for hiding this comment

smith Nov 11, 2020

Choose a reason for hiding this comment

smith commented Nov 11, 2020

smith commented Nov 11, 2020

smith commented Nov 11, 2020

kibanamachine commented Nov 12, 2020

💚 Build Succeeded

Metrics [docs]

Module Count

Async chunks

History

smith commented Nov 6, 2020 •

edited

Loading

sorenlouv Nov 11, 2020 •

edited

Loading