Dynamic HTML output for monitoring

[bsolino]

Description

Closes #2059

Link to documentation:

---

Before you get started

• ☝ Create an issue to discuss what you are going to do

Checklist

It is the responsibility of the author to make sure the pull request is ready to review. The icons indicate whether the item will be subject to the 🛠 Technical or 🧪 Scientific review.

• 🧪 The new functionality is relevant and scientifically sound
• 🛠 This pull request has a descriptive title and labels
• 🛠 Code is written according to the code quality guidelines
• 🧪 and 🛠 Documentation is available
• 🛠 Unit tests have been added
• 🛠 Changes are backward compatible
• 🛠 Any changed dependencies have been added or removed correctly
• 🛠 The list of authors is up to date
• 🛠 All checks below this pull request were successful

---

To help with the number pull requests:

• 🙏 We kindly ask you to review two other open pull requests in this repository

[codecov]

Codecov Report

Merging #2062 (0b9eb1e) into main (0b07b05) will increase coverage by 0.01%.
The diff coverage is 100.00%.

@@            Coverage Diff             @@
##             main    #2062      +/-   ##
==========================================
+ Coverage   93.27%   93.28%   +0.01%     
==========================================
  Files         238      238              
  Lines       12821    12843      +22     
==========================================
+ Hits        11959    11981      +22     
  Misses        862      862              

Files	Coverage Δ
esmvalcore/experimental/recipe_output.py	84.12% <100.00%> (+2.09%)	⬆️

[schlunma]

Thanks @bsolino, I am looking forward to a nicer website!

Would it maybe be possible to provide screenshots or (better) a publicly available example website on our bot machine for this? This would make it much easier to test this. Thanks!

[bsolino]

Thanks @bsolino, I am looking forward to a nicer website!

Would it maybe be possible to provide screenshots or (better) a publicly available example website on our bot machine for this? This would make it much easier to test this. Thanks!

Funny that you mention it, I'm working on that at this moment 😉
I wanted to make a comparison with the current output, but for a first peek you can see how it would look like for recipe_monitor.yml and recipe_monitor_with_refs.yml.

EDIT: The examples are available on the Issue: #2059

[bsolino]

The website has now been totally ported to Bootstrap for visuals and basic functionality, and with jQuery instead of JavaScript to improve compatibility across browsers. New screenshots and live demo are availables on the linked issue. Direct links to live demos:

• recipe_monitor.yml
• recipe_monitor_with_refs.yml

For comparison:

• Current version, as it is implemented in ESMValTool:
  • recipe_monitor.yml
  • recipe_monitor_with_refs.yml
• Previous update, before Bootstrap and jQuery:
  • recipe_monitor.yml
  • recipe_monitor_with_refs.yml

[zklaus]

Two change requests for the Python code. The templates and java script look ok to me, though I am not an expert.

[valeriupredoi]

great work, cheers, @bsolino + reviewers! 🍻