Thanos: chrome crash when trying to render data

[vankop]

thanos_build_info{branch="HEAD",goversion="go1.12.5",revision="c6eaf68bec32aefd280318eaef6121d6ddb20d10",version="0.7.0"} 1
go_info{version="go1.12.5"} 1
prometheus_build_info{branch="HEAD",goversion="go1.12.8",revision="43acd0e2e93f9f70c49b2267efa0124f1e759e86",version="2.12.0"} 1

What happened

I am trying to open graph page (e.g. url /graph?g0.expr=&g0.range_input=10800s&g0.end_input=2019-09-12%2009%3A40&g0.step_input=undefined&g0.stacked=0&g0.tab=0) in Chrome (tested versions 76 and higher) and it becomes totally not interactable. It works in FF and Safari as I know

What you expected to happen

I expect it must work properly

How to reproduce it (as minimally and precisely as possible):

Actually I don't know how to reproduce it properly, from my perspective it looks like rendering 80k sources takes too long.
Using chrome devtools and measuring performance resulted in:

Stacktrace that triggers such long layout:

https://github.com/thanos-io/thanos/blob/master/pkg/ui/static/js/graph.js#L335

As I understand this code triggers several so called reflows and looks like it works in such way only for Chrome.

I created this issue just to ensure that you will know about this problem. Maybe small redesign (don't show all sources) will be enough

[GiedriusS]

So essentially it seems like you have a bunch of metrics and Prometheus' UI code doesn't have any pagination for this endpoint: https://github.com/prometheus/prometheus/issues/5919 so you end up loading thousands of metric names. We should probably just implement this on Thanos side and stray a bit further away from the Prometheus code.

[vankop]

I can help with UI, when you will design concept =)

[dgl]

I've made some changes in Prometheus to try to deal with this, if you want to try them out in Thanos I pushed a branch with the changes merged to Thanos at: https://github.com/thanos-io/thanos/compare/master...dgl:graphlimitimport

[vankop]

@dgl your code render limit and just ignore rest metrics =( I think this is not good solution

[dgl]

@vankop try it out, it doesn't ignore metrics; you end up typing more characters to narrow it down rather than scrolling in a huge list.

[bwplotka]

Nice work @dgl will try to help discussions around upstreaming this. Can you add a PR to Thanos as well? We might merge it sooner as it affects us more.

[dgl]

Sure; made #1609 for thanos.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.