[APM] Service map UI implementation (Part 1 - without interactions)

[katrin-freihofner]

There are two main use cases:

1. As a user, I want to see which services are calling which other services.
2. I want to find bottlenecks and discover their effects on other services.

We will only address the first use case in our initial implementation.

There are two kinds of service maps:

• a global one, showing all services and their connections.
• A service map from a specific selected service, showing it's connected services (one level up, max. 5? levels down)

Todos

• Navigation: There are two entry points to the service map:
  • An additional tab on the service overview - next to Services, Traces...that is called Service Map which will show a service map with all services
  • An additional tab on the service detail page - next to Transactions, Errors...that is also called Service Map which will show a service map with only services connected to the currently selected one.
• Bubbles indicating a Services (without any interaction for now). The services should be aligned in columns. Arrows are connecting the services and show calls (no interaction).
  To indicate the selected service the Bubble is colored turquoise.
• Each service agent name is displayed as initials inside the bubble as shown in the screens. Here's the proposed initials list of our Elastic agent names;
  • RUM JS = Js
  • NodeJS = No
  • Go = Go
  • Java = Jv
  • .Net = .n
  • Python = Py
  • Ruby = Rb

Global Service Map
https://www.figma.com/file/0GMsSjBSDnilV8FrGZ9mBz/44853-Service-Map

Service-specific map

Selected service is top-level (not called by another service).

Selected service is on the second level (we show one level up, X levels down)

Selected service is on second to last level (we show one level up, and one level down)

Selected service does not have any connections

Related issue (zoom functionality): #44890
Meta issue: elastic/apm#137
POC: #42120

[elasticmachine]

Pinging @elastic/apm-ui

[katrin-freihofner]

Open question:
How can services be differentiated (logos/icons for different types...)?
Could we use the avatar for the first iteration? https://elastic.github.io/eui/#/display/avatar

[katrin-freihofner]

The zoom functionality seems to belong to a separate issue - I will move it.
#44890

[katrin-freihofner]

In yesterday's design weekly we (@alvarolobato @roncohen @hbharding ) discussed the letters within the service bubbles and decided to use the technology instead of the service name. Therefore, I updated the prototype and the screenshots.