Add metrics rendering to the new topology view.

[banks]

This is mostly working but certainly has bugs and a few TODOs:

TODO

• actually get the service's protocol from somewhere rather than hard code it
• test against real Prometheus not just the mocks
• handle loading states for metrics
• if provider doesn't return any series the graph will just break instead of showing an empty state
• Do something sensible if there is no metrics provider configured.

Known Issues

• The graph svg is underneath the SVG for the arrows at either end for about 10 pixels which means the tooltip won't show when hovering either end of the graph.
  • Can be fixed with CSS pointer-events: none; on the arrow divs (assuming we don't need mouse interaction on them.
• The stats don't fit in the boxes at all widths and probably need to flex more and/or dissappear when there is not enough room for them.
• The graph doesn't redraw nicely when browser screen size changes. It does fix itself on the next poll/update though!
• HTTP series need a re-think. We wanted to show error rates as a percentage which is nice but it actually means the stacking of the graphs is misleading since "percent" and whatever scale is appropriate for RPS are not the same thing but we render the two areas on the same scale. So "1%" error rate might visually look like 1 percent on the graph but only if the actual (max) request rate is exactly 100rps, if the max request rate is 1000 it will look like 0.1% etc. This means we should actually fetch the stat differently in the provider (easy and I actually did it that way first but then changed back to get the "percent", thinking it would be easy to render them on different scales but it's... not).

Dev notes.

There are some new cookie values you can set to control the topology data:

• CONSUL_UPSTEAM_COUNT
• CONSUL_DOWNSTREAM_COUNT
• CONSUL_METRICS_POLL_INTERVAL (in milliseconds) this is useful to stop updating while you are trying to debug the stats/graph layout etc.
• CONSUL_METRICS_LATENCY_MAX (in milliseconds) will add an artificial random delay up to this value to metrics loading to see the loading experience more like with a real backend. Can set it really long to style loading elements.

[mikemorris]

Working on getting this setup to test against real Prometheus in Firefox and getting 404s from the metrics proxy (but at least I've got it loading the module now!) - how would you pass config to tell it where to find a Prometheus instance in a setup like https://github.com/mkeeler/consul-docker-test/tree/master/mesh-gateways-l7?

[banks]

@mikemorris sorry doc are on my TODO list here!

The correct config for this for a "real" prometheus should be:

ui_config {
  enabled = true
  metrics_provider = "prometheus"
  metrics_proxy {
    base_url = "http(s)://<your prometheus instance>:<port>"
  }
}

In Matt's docker setup, I believe prometheus is exported on localhost:9090 so it would be: base_url = "http://localhost:9090"

[banks]

Last commit threaded protocol through based on the still-in-review #8868 and it's api-double counterpart: hashicorp/consul-api-double#39

[banks]

this is done. will remove

[mikemorris]

Got this running against a live Prometheus instance and gonna drop a few notes here:

• Upstreams and downstreams show metrics as expected, but selected service does not?

• I think these services might both be improperly configured as procotol: tcp instead of http somewhere ( I think all the necessary Prometheus targets are configured now, but maybe some are still missing? This is the prometheus.yml config I'm using), but when navigating to the api service at http://localhost:4200/ui/primary/services/api/topology (and the respective queries for web return the same responses too) the following three requests return empty responses (responses like this were why the extra checks in ui(topology): return early on missing data #8886 were needed to avoid runtime errors):
• http://localhost:4200/v1/internal/ui/metrics-proxy/api/v1/query?query=label_replace(sum(rate(envoy_cluster_upstream_rq_xx%7Bconsul_service%3D%22api%22%2Cenvoy_response_code_class%3D%225%22%7D%5B15m%5D))%20by%20(local_cluster)%2Fsum(rate(envoy_cluster_upstream_rq_xx%7Bconsul_service%3D%22api%22%7D%5B15m%5D))%20by%20(local_cluster)%2C%20%22downstream%22%2C%20%22%241%22%2C%20%22local_cluster%22%2C%20%22(.*)%22)&time=1602208120.779

{"status":"success","data":{"resultType":"vector","result":[]}}

• http://localhost:4200/v1/internal/ui/metrics-proxy/api/v1/query_range?query=sum(irate(envoy_tcp_downstream_cx_rx_bytes_total%7Blocal_cluster%3D%22api%22%2C%20envoy_tcp_prefix%3D%22public_listener_tcp%22%7D%5B10m%5D))&start=1602207220.783&end=1602208120.783&step=10s&timeout=8s

{"status":"success","data":{"resultType":"matrix","result":[]}}

• http://localhost:4200/v1/internal/ui/metrics-proxy/api/v1/query_range?query=sum(irate(envoy_tcp_downstream_cx_tx_bytes_total%7Blocal_cluster%3D%22api%22%2C%20envoy_tcp_prefix%3D%22public_listener_tcp%22%7D%5B10m%5D))&start=1602207220.783&end=1602208120.783&step=10s&timeout=8s

{"status":"success","data":{"resultType":"matrix","result":[]}}

• web metrics returning empty arrays

• http://localhost:4200/v1/internal/ui/metrics-proxy/api/v1/query_range?query=sum(irate(envoy_tcp_downstream_cx_rx_bytes_total%7Blocal_cluster%3D%22web%22%2C%20envoy_tcp_prefix%3D%22public_listener_tcp%22%7D%5B10m%5D))&start=1602209016.215&end=1602209916.215&step=10s&timeout=8s

• http://localhost:4200/v1/internal/ui/metrics-proxy/api/v1/query_range?query=sum(irate(envoy_tcp_downstream_cx_tx_bytes_total%7Blocal_cluster%3D%22web%22%2C%20envoy_tcp_prefix%3D%22public_listener_tcp%22%7D%5B10m%5D))&start=1602209016.215&end=1602209916.215&step=10s&timeout=8s

• http://localhost:4200/v1/internal/ui/metrics-proxy/api/v1/query?query=label_replace(8%20*%20sum(rate(envoy_tcp_downstream_cx_rx_bytes_total%7Blocal_cluster%3D%22web%22%2Cenvoy_tcp_prefix%3D~%22upstream_.*%22%7D%5B15m%5D))%20by%20(envoy_tcp_prefix)%2C%20%22upstream%22%2C%20%22%241%22%2C%20%22envoy_tcp_prefix%22%2C%20%22upstream_(.*)_tcp%22)&time=1602209967.73

• http://localhost:4200/v1/internal/ui/metrics-proxy/api/v1/query?query=label_replace(8%20*%20sum(rate(envoy_tcp_downstream_cx_tx_bytes_total%7Blocal_cluster%3D%22web%22%2Cenvoy_tcp_prefix%3D~%22upstream_.*%22%7D%5B15m%5D))%20by%20(envoy_tcp_prefix)%2C%20%22upstream%22%2C%20%22%241%22%2C%20%22envoy_tcp_prefix%22%2C%20%22upstream_(.*)_tcp%22)&time=1602209967.73

• http://localhost:4200/v1/internal/ui/metrics-proxy/api/v1/query?query=label_replace(sum(rate(envoy_tcp_downstream_cx_no_route%7Blocal_cluster%3D%22web%22%2Cenvoy_tcp_prefix%3D~%22upstream_.*%22%7D%5B15m%5D))%20by%20(envoy_tcp_prefix)%2C%20%22upstream%22%2C%20%22%241%22%2C%20%22envoy_tcp_prefix%22%2C%20%22upstream_(.*)_tcp%22)&time=1602209967.732

• Zero request traffic led to an undefined Error Rate on upstream and NaNd P50 and P99 on upstreams and downstreams

• Some metrics only being visible at larger screen sizes was definitely unexpected, this might need some design work for a more responsive layout (stacked vertically or something maybe?)

[kaxcode]

✨ 🎨 LGTM