[APM] Visual improvements for new APM layout with left navigation by sorenlouv · Pull Request #101360 · elastic/kibana

sorenlouv · 2021-06-04T08:54:51Z

Follow-up to: #101044
Closes: #101355

TODO

Adopt full page height of the content panel
Move Service tabs navigation into the PageHeader
Wrap the Service map in a EuiPanel
Service maps height doesn't account for the new header height
JVM detail page: Remove the horizontal rule below the detail header
Settings: Remove the light grey content background color
Agent configuration: Create view is not wrapped in the new page template, missing the navigation
Service inventory and Traces: Remove the panel padding around the tables
~~Truncation or wrapping missing in the PageHeader title~~ (blocked) [APM] Solution navigation UI polish #101355

elasticmachine · 2021-06-04T08:54:55Z

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

formgeist · 2021-06-04T09:49:59Z

@sqren added another item to the list; I found that the service map canvas extends beyond the viewport height so there's a weird scroll on the page. I suppose that's because the new header height isn't accounted for. There's a reference description in #101355

sorenlouv · 2021-06-04T10:34:25Z

Thanks @formgeist!

streamich

AppServices codeowners change LGTM.

x-pack/plugins/apm/public/components/app/service_node_overview/index.tsx

sorenlouv · 2021-06-07T11:32:29Z

x-pack/plugins/apm/public/components/routing/apm_route_config.tsx

+export function EditAgentConfigurationRouteView(props: RouteComponentProps) {
+  const { search } = props.history.location;
+
+  // typescript complains because `pageStop` does not exist in `APMQueryParams`
+  // Going forward we should move away from globally declared query params and this is a first step
+  // @ts-expect-error
+  const { name, environment, pageStep } = toQuery(search);
+
+  const res = useFetcher(
+    (callApmApi) => {
+      return callApmApi({
+        endpoint: 'GET /api/apm/settings/agent-configuration/view',
+        params: { query: { name, environment } },
+      });
+    },
+    [name, environment]
+  );
+
+  return (
+    <ApmMainTemplate pageTitle="Settings">
+      <SettingsTemplate {...props}>
+        <AgentConfigurationCreateEdit
+          pageStep={pageStep || 'choose-settings-step'}
+          existingConfigResult={res}
+        />
+      </SettingsTemplate>
+    </ApmMainTemplate>
+  );
+}
+
+export function CreateAgentConfigurationRouteView(props: RouteComponentProps) {
+  const { search } = props.history.location;
+
+  // Ignoring here because we specifically DO NOT want to add the query params to the global route handler
+  // @ts-expect-error
+  const { pageStep } = toQuery(search);
+
+  return (
+    <ApmMainTemplate pageTitle="Settings">
+      <SettingsTemplate {...props}>
+        <AgentConfigurationCreateEdit
+          pageStep={pageStep || 'choose-service-step'}
+        />
+      </SettingsTemplate>
    </ApmMainTemplate>


This is not new but was simply moved from another file

dgieselaar

Really like how this utilizes space better! And I've noticed how this already massively helps in the perceived "walls" between the different Observability apps.

dgieselaar · 2021-06-07T13:05:09Z

x-pack/plugins/apm/public/components/routing/templates/apm_service_template.tsx

-  };
-}) {
+}: Props) {
+  const tabs = useTabs({ serviceName, selectedTab });


I like the use of hooks here 👍

kibanamachine · 2021-06-07T13:27:58Z

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`apm`	1600	1599	-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`	4.3MB	4.3MB	+102.0B

History

💚 Build #129364 succeeded 306e128
💔 Build #129174 failed 8a0e17fd2307258471ab3f9d0886e24a84b2f544
💚 Build #129118 succeeded 84dab704b91360bb6af5bfa88da81dbd68eda373

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

* master: (90 commits) Fix UI breaks on providing long search keyword in 'Search Box' (elastic#101385) Adds css class to EuiDescriptionListDescription in order to break word on exception details card (elastic#101481) [Lens] Increase timings for drag and drop tests (elastic#101380) [Lens] Fix editor react error on configuration panel (elastic#101367) [Fleet] Move integrations to a separate app (elastic#99848) Fix incorrect message displayed on importing Timeline Templates (elastic#101288) [Cases] RBAC (elastic#95058) [APM] Visual improvements for new APM layout with left navigation (elastic#101360) [master] More precise alerts matching (elastic#99820) [Lens] Value in legend (elastic#101353) Revert "[Reporting] ILM policy for managing reporting indices (elastic#100130)" (elastic#101358) [Discover] Fix header row of data grid in Firefox (elastic#101374) Add link to advanced setting in Discover (elastic#101154) Url service locators (elastic#101045) [Timelion] Update the removal message to mention the exact version (elastic#100994) [Security Solution][Detection Engine] Test cases for alias failure test cases where we don't copy aliases correctly (elastic#101437) [Event Log] Adding `type_id` to saved object array in event log (elastic#100939) [Reporting] Add `location.url` info to console message logs (elastic#101427) [Security Solutions][Detection Engine] Fixes timestamp bugs within source indexes when the formats are not ISO8601 format (elastic#101349) Improve Task Manager instrumentation (elastic#99160) ...

…astic#101360)

kibanamachine · 2021-06-09T13:07:20Z

💚 Backport successful

Status	Branch	Result
✅	7.x

This backport PR will be merged automatically after passing CI.

…01360) (#101747) Co-authored-by: Søren Louv-Jansen <sorenlouv@gmail.com>

sorenlouv requested a review from a team June 4, 2021 08:54

sorenlouv requested a review from a team as a code owner June 4, 2021 08:54

botelastic bot added the Team:APM - DEPRECATED Use Team:obs-ux-infra_services. label Jun 4, 2021

sorenlouv added release_note:skip Skip the PR/issue when compiling release notes v7.14.0 labels Jun 4, 2021

sorenlouv marked this pull request as draft June 4, 2021 08:56

sorenlouv marked this pull request as ready for review June 4, 2021 13:22

sorenlouv force-pushed the apm-minor-tweaks-to-new-layout branch from 5b95d8a to fea2b90 Compare June 4, 2021 13:23

sorenlouv changed the title ~~[APM] Minor tweaks~~ [APM] Minor tweaks to be side nav Jun 4, 2021

sorenlouv changed the title ~~[APM] Minor tweaks to be side nav~~ [APM] Design improvements for new APM layout with left navigation Jun 6, 2021

sorenlouv added 4 commits June 6, 2021 23:25

[APM] Make page full height

be881ee

Fix style issues

a6557ac

Improve comment

d303713

Fix tsc issue

306e128

sorenlouv force-pushed the apm-minor-tweaks-to-new-layout branch from 8a0e17f to 306e128 Compare June 6, 2021 21:26

sorenlouv changed the title ~~[APM] Design improvements for new APM layout with left navigation~~ [APM] Visual improvements for new APM layout with left navigation Jun 7, 2021

streamich approved these changes Jun 7, 2021

View reviewed changes

sorenlouv enabled auto-merge (squash) June 7, 2021 11:29

sorenlouv commented Jun 7, 2021

View reviewed changes

x-pack/plugins/apm/public/components/app/service_node_overview/index.tsx Outdated Show resolved Hide resolved

sorenlouv commented Jun 7, 2021

View reviewed changes

Removed unused EuiPanel’s

f62b300

dgieselaar approved these changes Jun 7, 2021

View reviewed changes

sorenlouv merged commit 999faec into elastic:master Jun 7, 2021

sorenlouv deleted the apm-minor-tweaks-to-new-layout branch June 7, 2021 15:08

sorenlouv added the auto-backport Deprecated - use backport:version if exact versions are needed label Jun 9, 2021

sorenlouv mentioned this pull request Jun 9, 2021

[7.x] [APM] Visual improvements for new APM layout with left navigation (#101360) #101746

Closed

kibanamachine pushed a commit to kibanamachine/kibana that referenced this pull request Jun 9, 2021

[APM] Visual improvements for new APM layout with left navigation (el…

a10792b

…astic#101360)

kibanamachine mentioned this pull request Jun 9, 2021

[7.x] [APM] Visual improvements for new APM layout with left navigation (#101360) #101747

Merged

kibanamachine added a commit that referenced this pull request Jun 9, 2021

[APM] Visual improvements for new APM layout with left navigation (#1…

2098aec

…01360) (#101747) Co-authored-by: Søren Louv-Jansen <sorenlouv@gmail.com>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[APM] Visual improvements for new APM layout with left navigation#101360

[APM] Visual improvements for new APM layout with left navigation#101360
sorenlouv merged 5 commits intoelastic:masterfrom
sorenlouv:apm-minor-tweaks-to-new-layout

sorenlouv commented Jun 4, 2021 •

edited

Loading

Uh oh!

elasticmachine commented Jun 4, 2021

Uh oh!

formgeist commented Jun 4, 2021 •

edited

Loading

Uh oh!

sorenlouv commented Jun 4, 2021

Uh oh!

streamich left a comment

Uh oh!

Uh oh!

sorenlouv Jun 7, 2021

Uh oh!

dgieselaar left a comment

Uh oh!

dgieselaar Jun 7, 2021

Uh oh!

kibanamachine commented Jun 7, 2021

Uh oh!

kibanamachine commented Jun 9, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

Conversation

sorenlouv commented Jun 4, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

TODO

Uh oh!

elasticmachine commented Jun 4, 2021

Uh oh!

formgeist commented Jun 4, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sorenlouv commented Jun 4, 2021

Uh oh!

streamich left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

sorenlouv Jun 7, 2021

Choose a reason for hiding this comment

Uh oh!

dgieselaar left a comment

Choose a reason for hiding this comment

Uh oh!

dgieselaar Jun 7, 2021

Choose a reason for hiding this comment

Uh oh!

kibanamachine commented Jun 7, 2021

💚 Build Succeeded

Metrics [docs]

Module Count

Async chunks

History

Uh oh!

kibanamachine commented Jun 9, 2021

💚 Backport successful

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

sorenlouv commented Jun 4, 2021 •

edited

Loading

formgeist commented Jun 4, 2021 •

edited

Loading