Migrate Admin pages to React

[kravets-levko]

What type of PR is this? (check all applicable)

• Refactor
• Feature

Description

• Migrate System Status page
• Refine Celery Status page
• Migrate Outdated Queries page

Mobile & Desktop Screenshots/Recordings (if there are UI changes)

[ranbena]

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.

[kravets-levko]

@ranbena Thanks! All fixed.

[arikfr]

Cool 👍

See comments ->

[arikfr]

DB size was humanized before.

[ranbena]

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

[kravets-levko]

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

[ranbena]

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

[arikfr]

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. :-)

[kravets-levko]

@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]

LGTM.
@kravets-levko I don't have queue data but consider <Tabs animated={false}> if the tab change content animation is too crazy looking with actual data.

[kravets-levko]

@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]

@ranbena Which tabs do you mean?

Celery tabs

For inner tabs animation doesn't look so weird.

Okey dokey

[kravets-levko]

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

[kravets-levko]

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