Wow 1st look, looks so good! 👏
Great use of flexbox.

Few things I noticed:

• System Status > Queues > Celery doesn't display a tooltip on hover.
• Outdated Queries > "Last updated" value is "few seconds" on master, and "49 years ago" in this.
• Outdated Queries - when there are no queries, no need to show PageSizeSelect and the "Sorry, we couldn't find anything." isn't a good fit for this situation.

@ranbena Thanks! All fixed.

DB size was humanized before.

Suggestion for future - make these into Redash built-in dashboards (grids, counts). 🤘

@ranbena That idea crossed my mind some time ago 🙂 We'll need some new visualization types for that.

@ranbena That idea crossed my mind some time ago 🙂 We'll need some new visualization types for that.

It could be a great forcing function to make better widgets and set an example to our clients.

It could be a great forcing function to make better widgets and set an example to our clients.

I agree. Let's start moving in this direction when our visualizations are pure React, so it's easier to create better APIs for them. :-)

@ranbena (cc @arikfr) I fixed bug with forEach and refactored that page a bit more: sometimes it tried to call setState on unmounted component (I fixed that as well) and refined code - created more smaller components, and moved main logic to main (page) component.

@ranbena Which tabs do you mean? There are top-level tabs ("System Status", "Celery Status", ...) and inner tabs on "Celery Status" tab. For top-level tabs I had to disable animation because that tabs are link, and when clicked - animation started, then component destroyed - so it looked really weird. For inner tabs animation doesn't look so weird.

@ranbena Which tabs do you mean?

Celery tabs

For inner tabs animation doesn't look so weird.

Okey dokey

Decided to disable animation - for consistency between top-level and inner tabs.

@arikfr @gabrieldutra If you're fine with this - LMK if I can merge it. Thanks!