[APM] Service inventory redesign: Add health status and sparkline trends for each metric on the Services list page

[dgieselaar]

Summary

Related design issue elastic/apm#262

We want to enhance the insights on service health immediately on the Services list. We're enhancing the table list contents to feature a health status indicator along with sparkline charts to show the various metric trends for each of the key metrics available.

Solution

Health status

Add a health column to the Services list table indicating the service health. This is consistent with the health statuses shown on the Service maps feature.

• Health status displayed as an EuiBadge with the relevant colors used in Service maps for each segment of health.
• The services list will be sorted by health status first (critical at the top, followed by warning, healthy and unknown). Then another sort by "Transactions per minute" indicating the services with the most throughput.
• If none of the service environments have anomaly detection configured, we will hide the Health column completely and display a callout message in the top to entice users to setup Anomaly detection to get service health insights.
  • The callout is targeted specifically at users who have the capabilities and their Kibana environment supports them in creating the necessary jobs for adding health indicators via ML jobs in the UI. That means checking for ML create jobs permissions and if ML is enabled and the necessary license is active.

Agent name replaced with agent icon

Just like the representation in Service maps, the list will also feature the agent icons for each agent name of the services. The service name and agent is merged, so agent name is no longer a separate column. The user can still use the agent name filter to get a filtered list of a specific agent. The agent icons are available in the Service maps code, but scaled to 16x16 px size.

Show sparkline charts for key metrics

By each key metric cell (Avg. response time, transactions per minute and error rate) we will show a trend sparkline of the selected time range. Each will be presented as a line chart with no interaction.

• Avg. response time: variable euiColorVis1
• Transactions per minute: variable euiColorVis0
• Error rate: variable euiColorVis7

[elasticmachine]

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

[formgeist]

@elastic/apm-ui I've updated the issue description to reflect the final design from elastic/apm#262 - let me know if there are any questions or concerns.

[formgeist]

We had a quick sync about the callout when health indicators are not available to clarify what is required to show the message to the user. Please see the issue description.