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

bwplotka · 2020-02-18T16:20:46Z

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: #2124

cc @adrien-f @squat @jaseemabid

Help wanted! 🤗

The text was updated successfully, but these errors were encountered:

geobeau · 2020-02-20T20:47:13Z

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

d-ulyanov · 2020-02-21T09:52:52Z

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

Let's discuss key concepts.

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

Definitely agree.

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)

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.

Exact states of the block

See 2 :)

d-ulyanov · 2020-02-21T10:02:39Z

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 · 2020-02-21T21:22:56Z

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

geobeau · 2020-02-21T21:39:27Z

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 · 2020-02-21T22:40:01Z

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 · 2020-02-22T10:42:05Z

If Prometheus is definitely moving to React, it makes sense to move everything to React (it seems to be the goal of #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 · 2020-02-22T19:16:02Z

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 · 2020-02-22T20:39:13Z

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 · 2020-02-24T09:04:47Z

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? ❤️

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

bwplotka · 2020-02-24T09:06:23Z

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 · 2020-02-24T13:16:50Z

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 · 2020-02-25T16:42:16Z

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

bwplotka · 2020-02-25T16:50:29Z

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

…

On Tue, 25 Feb 2020 at 16:42, ibmdcb ***@***.***> 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 <#2149?email_source=notifications&email_token=ABVA3OYUU45D4VZKBY2TWKTREVC6VA5CNFSM4KXH2FIKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEM4TWDY#issuecomment-590953231>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABVA3O7R6O642GCXCWCRCGDREVC6VANCNFSM4KXH2FIA> .

d-ulyanov · 2020-02-25T20:12:50Z

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 · 2020-02-26T17:13:26Z

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

bwplotka · 2020-02-27T09:41:53Z

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

bwplotka · 2020-02-28T10:01:42Z

@geobeau are you joining us? (:

bwplotka · 2020-02-28T12:33:31Z

This ticket is now included in #2198

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

jaseemabid · 2020-03-22T00:48:39Z

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,

Dependency on Google charts is sad, anything that is more flexible and self hosted would be great!
Lack of context on tooltip is sad, but we kinda lived with it till now. I'm so happy to see people improve this bucket: Improve tooltip for bucket UI #2166
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 · 2020-03-22T07:50:11Z

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! 💪

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. 🤗

bwplotka · 2020-04-15T18:20:27Z

We found many heroes and we are starting work with our potential GSoC candidate @prmsrswt here: #2198 (:

bwplotka added feature request/improvement good first issue difficulty: medium help wanted priority: P1 labels Feb 18, 2020

geobeau mentioned this issue Feb 21, 2020

bucket: Improve tooltip for bucket UI #2166

Merged

2 tasks

bwplotka mentioned this issue Feb 28, 2020

Action Plan for Thanos User Interface and UI related APIs Improvements #2198

Closed

13 tasks

bwplotka removed good first issue help wanted labels Feb 28, 2020

bwplotka closed this as completed Apr 15, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

bwplotka commented Feb 18, 2020 •

edited

Loading

geobeau commented Feb 20, 2020

d-ulyanov commented Feb 21, 2020 •

edited

Loading

d-ulyanov commented Feb 21, 2020

geobeau commented Feb 21, 2020

geobeau commented Feb 21, 2020

bwplotka commented Feb 21, 2020

geobeau commented Feb 22, 2020

d-ulyanov commented Feb 22, 2020 •

edited

Loading

geobeau commented Feb 22, 2020

bwplotka commented Feb 24, 2020 •

edited

Loading

bwplotka commented Feb 24, 2020

geobeau commented Feb 24, 2020

ibmdcb commented Feb 25, 2020

bwplotka commented Feb 25, 2020 via email

d-ulyanov commented Feb 25, 2020

bwplotka commented Feb 26, 2020 •

edited

Loading

bwplotka commented Feb 27, 2020

bwplotka commented Feb 28, 2020

bwplotka commented Feb 28, 2020

jaseemabid commented Mar 22, 2020

bwplotka commented Mar 22, 2020

bwplotka commented Apr 15, 2020

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

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

Comments

bwplotka commented Feb 18, 2020 • edited Loading

AC:

geobeau commented Feb 20, 2020

d-ulyanov commented Feb 21, 2020 • edited Loading

d-ulyanov commented Feb 21, 2020

geobeau commented Feb 21, 2020

geobeau commented Feb 21, 2020

bwplotka commented Feb 21, 2020

geobeau commented Feb 22, 2020

d-ulyanov commented Feb 22, 2020 • edited Loading

geobeau commented Feb 22, 2020

bwplotka commented Feb 24, 2020 • edited Loading

bwplotka commented Feb 24, 2020

geobeau commented Feb 24, 2020

ibmdcb commented Feb 25, 2020

bwplotka commented Feb 25, 2020 via email

d-ulyanov commented Feb 25, 2020

bwplotka commented Feb 26, 2020 • edited Loading

bwplotka commented Feb 27, 2020

bwplotka commented Feb 28, 2020

bwplotka commented Feb 28, 2020

jaseemabid commented Mar 22, 2020

bwplotka commented Mar 22, 2020

bwplotka commented Apr 15, 2020

bwplotka commented Feb 18, 2020 •

edited

Loading

d-ulyanov commented Feb 21, 2020 •

edited

Loading

d-ulyanov commented Feb 22, 2020 •

edited

Loading

bwplotka commented Feb 24, 2020 •

edited

Loading

bwplotka commented Feb 26, 2020 •

edited

Loading