Thanos: Improve Bucket Web UI view: Front-end hero wanted! 💖

[bwplotka]

Our bucket web UI documented here is super useful. However, the first iteration was done with simplifications. It is functional but not really clear. (See this for example of user question on slack). You can find the reasons of simplifications for the current implementation here.

Let's define some AC, of what I think we could add, but feedback is welcome as well:

AC:

• It would be nice to have external labels on the left column, instead of numbers. It can be expanded when you hover.
• More details on hover over the block. Potentially option to download meta.json file or even URL to the object in the bucket
• Descriptions of details (e.g resolution = what it means?).
• Exact states of the block returned by block.MetaFetcher

Potentially we could rewrite this to React as we already move our UI to React as Prometheus does: https://github.com/thanos-io/thanos/issues/2124

cc @adrien-f @squat @jaseemabid

Help wanted! :hugs:

[geobeau]

I'll will work on it if nobody is working on it yet

[d-ulyanov]

Hi, @bwplotka @geobeau
We're going to rework this UI.

Let's discuss key concepts.

1. It would be nice to have external labels on the left column

Definitely agree.

1. More details on hover over the block

From my point of view, it would be nice to see the following things:
a) Block / index size (in Mb)
b) Link to meta.json as you mentioned with a possibility to download it
c) It would be cool to have some analytics like a number of series, number of chunks, top labels by cardinality (optional)

1. Descriptions of details

At least I would avoid shortcuts like l: 5, it's a bit confusing for new users.
We can make some suggests
Thanos Bucket is a tool for people who understand what's happening inside, so I'm not sure that we need to have many details in the UI. But yes, we can add glossary somewhere or some suggestions.

1. Exact states of the block

See 2 :)

[d-ulyanov]

Also, it seems that UI currently shows blocks in a quite weird way, because blocks alternate in color.
What I want to see is just 3 rows for each store: raw, 5m, 1h.
One row = blocks with same resolution, but different compaction levels.
It would be understandable.

[geobeau]

@bwplotka @d-ulyanov opened a pull request with some improvements on the hover tooltip

[geobeau]

It would be nice to have external labels on the left column, instead of numbers. It can be expanded when you hover.

I have to look more into it, right now it really depends on Google Charts and it's a SVG so it's not possible to use normal HTML in it

[bwplotka]

Thanks all for help!

I have to look more into it, right now it really depends on Google Charts and it's a SVG so it's not possible to use normal HTML in it

Yes that's the problem. We are not tied to the library. We can change if we want. It was causing many problems already.

I could see @geobeau you already did some PR. That's amazing! But can we first agree if we want to improve current UI or actually move it to React? Reason is that we already move all UIs including Prometheus ones to React so it might be more long term solution... Wdyt? @adrien-f @geobeau @d-ulyanov ? 🤔

[geobeau]

If Prometheus is definitely moving to React, it makes sense to move everything to React (it seems to be the goal of https://github.com/thanos-io/thanos/issues/2124).

More generally, using vanilla JS is nice when the code is simple (what we have today for bucket web) because it's easier to maintain, especially with contributors that don't have much background in web front end. However, if we have to rebuild the timetable graph from scratch it would be reasonable to do it in react.

I'll try to search for alternative Timetable graph libraries that could be more suitable and customisable.

[d-ulyanov]

Let's migrate to React.
And let's decide who will do it to avoid double work :)

Current UI is too primitive, partially not understandable and buggy - that's why I personally ready to invest our time in that.

The graph looks quite simple, so I think it would not be difficult to reimplement it from scratch.
But it reasonable to research opensource libs, yes.

[geobeau]

So right now there is #2121 that brings the react code of Prometheus as well as the basic tooling for building it. @bwplotka do you know if there is any blocker on the PR and if we can do something to help get it merged?

[bwplotka]

And let's decide who will do it to avoid double work :)

I would say let's do it... Together! @adrien-f @d-ulyanov @geobeau and synchronize some work.

Let's produce some work plans and distribute the task. We can definitely make this quicker if we can review each other code!

Current UI is too primitive, partially not understandable and buggy - that's why I personally ready to invest our time in that.

We are talking about Bucket UI here?

So right now there is #2121 that brings the react code of Prometheus as well as the basic tooling for building it. @bwplotka do you know if there is any blocker on the PR and if we can do something to help get it merged?

Yes @geobeau . Please help us by reviewing it. Your review will count as maintainer review if done carefully! We don't know much of React right now in Thanos Team (: We could use some help. Who knows, maybe we would need official Thanos team member who would help with some Frontend work? :heart:

No other blocker, we already agreed on Thanos sync that we want this.

[bwplotka]

What do you think about setting some quick 30m call about this initiative? Not only bucket UI but have consistent react UI for Thanos? (basing on Prometheus one)?

[geobeau]

I prefer Slack if that's possible.

We don't know much of React right now in Thanos Team (: We could use some help.

I'm a beginner with React as well.

[ibmdcb]

Is the color code documented anywhere? Can this be a simple document fix before rewrite?

[bwplotka]

It's not and I don't think it means anything ;p

On Tue, 25 Feb 2020 at 16:42, ibmdcb [e-mail] wrote:

Is the color code documented anywhere? Can this be a simple document fix
before rewrite?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/thanos-io/thanos/issues/2149?email_source=notifications&email_token=ABVA3OYUU45D4VZKBY2TWKTREVC6VA5CNFSM4KXH2FIKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEM4TWDY#issuecomment-590953231,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/ABVA3O7R6O642GCXCWCRCGDREVC6VANCNFSM4KXH2FIA
.

[d-ulyanov]

sorry for a slow answering :)
We have good experience with React and I'm ready for a short call (let's agree on time in cloud-native slack)

[bwplotka]

@adrien-f @geobeau @d-ulyanov @squat Short meeting on slack/Hangouts this Friday morning (11am? CET)

[bwplotka]

Scheduled meeting: https://calendar.google.com/event?action=TEMPLATE&tmeid=NDcyMWxjOTYwZWxhcjBjM3BjdmVvczEzbnQgYnBsb3RrYUByZWRoYXQuY29t&tmsrc=bplotka%40redhat.com @adrien-f @geobeau @squat @d-ulyanov

[bwplotka]

@geobeau are you joining us? (:

[bwplotka]

This ticket is now included in https://github.com/thanos-io/thanos/issues/2198

*This should be improved only once we have React Block Viewer ready. *

[jaseemabid]

I wrote the original web UI in an afternoon to find out where we had compaction backlogs (we run some really large clusters at $WORK) and @bwplotka convinced me to upstream the patches over a few beers.

All mistakes are mine and I'll be really grateful to anyone who can improve this, specifically,

1. Dependency on Google charts is sad, anything that is more flexible and self hosted would be great!
2. Lack of context on tooltip is sad, but we kinda lived with it till now. I'm so happy to see people improve this https://github.com/thanos-io/thanos/pull/2166
3. Migrating to react to use rest of prom UI would be great! The same time range picker would make it much better. Right now it's very hard to fit 2 years worth of data on my 27" monitor :)

I'm cheering for you all! Yay. 🎉

[bwplotka]

Thanks @jaseemabid, you inspired us with the fact that UI can be very important part of the projects as the bucket viewer, even in basic form helped so many users already! :muscle:

BTW this project is now part of GSoC proposed project, so hopefully, we will have someone full time on this: https://github.com/cncf/soc#enriching-and-extending-thanos-uis-with-react-for-awesome-user-experience

Also please share the doc linked here in your countries and universities so we have diverse proposals. :hugs:

[bwplotka]

We found many heroes and we are starting work with our potential GSoC candidate @prmsrswt here: https://github.com/thanos-io/thanos/issues/2198 (: