ui: Migrate Thanos Ruler UI to React

[onprem]

Signed-off-by: Prem Kumar prmsrswt@gmail.com

• I added CHANGELOG entry for this change.
• Change is not relevant to the end user.

Changes

• Enable the new React UI for Thanos Ruler

Verification

Tested locally with a basic alert in different state.

[GiedriusS]

The code looks good but I think we could do a couple of improvements before merging:

• Let's include a link to the new UI in the old Ruler UI?
• If you go to /new on Thanos Ruler then the link in the bar links to /graph which leads to 404

I had to do this #2925 to make api/v1/rules work at all for me 😄

[onprem]

The code looks good but I think we could do a couple of improvements before merging:

• Let's include a link to the new UI in the old Ruler UI?

Fixed this in the new commit. Now the Classic UI link in navbar should point to the corresponding old UI page.

• If you go to /new on Thanos Ruler then the link in the bar links to /graph which leads to 404

I had fixed this already, I am not sure why are you still getting this. /new is redirected to /new/ by the Go HTTP server, and from /new/ to /new${defaultRoute} is done on the client-side, where defaultRoute is /graph for Query and /alerts for Ruler.

I had to do this #2925 to make api/v1/rules work at all for me 😄

I wonder why it's working fine for me without that patch 🤔

[GiedriusS]

The code looks good but I think we could do a couple of improvements before merging:

• Let's include a link to the new UI in the old Ruler UI?

Fixed this in the new commit. Now the Classic UI link in navbar should point to the corresponding old UI page.

What about the other direction? :P We want the users to discover this.

Another thing: maybe let's set some other <title> according to the component? Now Thanos Ruler also has "Thanos Expression Browser" 😄

I have filled a separate issue for the Rules API weirdness so that we could unblock this. #2938. This PR doesn't touch that at all so I think we can merge this after changing those two small things! Awesome work, Prem 👍

[onprem]

Another thing: maybe let's set some other <title> according to the component? Now Thanos Ruler also has "Thanos Expression Browser"

As we have a single index.html file in React, we either need to use a common title that fits everywhere, as the old UI has, or we can use something like React Helmet to set the meta tags. Or maybe we can just use document.title 😃

[onprem]

Sorry for the rebase. Forgot to signoff some old commits and then merged master on top of it. Had to rebase on master and add signoff to the old commit messages.

[GiedriusS]

Looks great! 💪 Let's see if anyone else wants to review before merging.

[GiedriusS]

We could improve this even more in the future by setting range_input to $now - $when_the_alert_has_started_firing but this is OK for now 💪

[bwplotka]

Thanks!