STA 2025 Milestone 2+3: Update dashboard, Bugzilla stats, bug triage page and autobuilder issues page

[espy]

This PR constitutes the entirety of the work on the STA Milestones 2 and 3 for Yocto in 2025: Improved design and unified website pages, concerning:

• Yocto’s dashboard page
• The Bugzilla stats page
• The bug triage page
• The Autobuilder Issues page (abint)

In general, the work consisted of:

• unifying all pages to a common design that matches our previous work on the CVE/Metrics pages through use of a simple UI library, Pico.css.
• unifying the rendering of charts to use Apache eCharts, as we did with the CVE/Metrics pages as well.
• Adding proper support for small screens and dark mode.
• general refactoring, optimisation and simplification where possible.

A detailed description follows, with screenshots for each.

Work items:

1. Update Dashboard

Live: https://dashboard.yoctoproject.org/
Source: yocto-autobuilder-helper/scripts/dashboard/index.html

Changes:

• Unified style with the other new pages using Pico.css

2. Update Bugzilla Stats

Live: https://wiki.yoctoproject.org/charts/combo.html
Source: yocto-autobuilder-helper/scripts/dashboard/bugzilla_stats.html

Changes:

• Unified style with the other new pages, charts are now fully responsive and functional on small screens, including tooltips, also supports dark mode.
• Removed all Google Charting and Material libraries, replaced with Pico.css, Apache eCharts and modern web technologies: faster load times, fewer dependencies. Used a custom built eCharts bundle to minimise load times (using https://echarts.apache.org/en/builder.html). Lighthouse score 95/100, up from 53/73.
• Simpler and less chart rendering code, with charts defined in a config object instead of programmatically.
• Changed chart tooltips to display all values for the current time, not just the series being hovered over. This makes it possible to read very small or null values as well, which would not be targetable otherwise, and therefore impossible to discover.
• Made individual series toggleable via the legend, which makes comparing series and inspecting series with small values possible.
• Note: the data for chart 4, "Submitted/Fixed", seems broken, every work week is in there 4 times: https://wiki.yoctoproject.org/charts/open_close.txt
• Note: this should automatically load its data from the text files at https://wiki.yoctoproject.org/charts/importance-weekly.txt etc. once deployed

3. Bug Triage Page

Live: https://dashboard.yoctoproject.org/bugtriage/
Source: yocto-autobuilder-helper/scripts/dashboard/bugtriage/index.html

Changes:

• Unified style with the other new pages.
• Removed all Google Material libraries, replaced with Pico.css, Unicode icons and modern web technologies: faster load times, fewer dependencies. 100/100 Lighthouse score.
• Replaced old tablesorting library with a modern alternative.
• Page is now completely responsive with a fold-out nav sidebar on smaller screens, and supports dark mode.
• Section titles and navigation items now also show bug counts.
• Bug fetching and parsing code retained 100%.

4. Autobuilder Issue Summary

Live: https://valkyrie.yocto.io/pub/non-release/abint/
Source: yocto-autobuilder-helper/scripts/abint

Changes:

• Reworked abint.py to generate a bugs.json file with the bug data, it no longer outputs any html. The JSON is consumed by JS a static index.html file.
• Notes: we had some issues with local path resolution in the build script on our dev systems, please check whether bugs.json and the /resources folder get deployed correctly in production, they should land right next to the built html file (See changes in /scripts/run-abint)
• Built a completely new HTML page to display the JSON bug data, using Pico.css for consistent styling and Apache eCharts to render the single-axis heatmaps.
• Unified style with the other new pages.
• The page is now responsive, supports dark mode, and the charts have tooltips.
• Since the production instance of this is on a different domain than the dashboard and the other pages in this work package, it has its own copy of /resources (css, eCharts library etc).

[rossburton]

Thanks for this work!

First, the abint page:

1. The font is a fair bit larger so the window needs to be larger to fit the content. Here's two screenshots of the current page and the new page:

Note how my not-that-large window is missing a column as it got clipped. On my 14" Macbook Pro, if I don't full-screen Safari then the Last Seen column is clipped. Nudging the font size down globally should be sufficient?

2. Table headings have mangled characters. I'm pulling from this branch instead of using the patches on the list, so I presume there's some UTF-8/ISO-8859-1 confusion happening somewhere.

3. Sort by time last seen automatically, please.

4. The heatbar colours are not right. In particular, in the screenshot above issue 15973 has been seen four times so the blocks should be pale blue (as they're one report each). Instead. they're dark, which suggests multiple reports.

The previous logic was gloriously hacky but worked: each report was a block with 30% transparency, overlaid on top of each other. I'm wondering if the new heatmaps have a scale per bug, so 1 bug/week is also the maximum. If that's the case a global scale of 1=pale and 10=dark (with an even spread) might look better.

5. There's a new function to_jsonable that isn't used.

[rossburton]

The Bug Triage:

1. Same comment about font size. The dashboard has to be able to present large amount of data clearly, so a slightly smaller font that doesn't wrap excessively and has wide columns is preferable. Compare and contact two screenshots:

2. Remove the Back to Top links, there's a navigation bar to the right so those links are just visual noise.

3. If I press the Reload button the columns resize whilst the new data is fetched, which looks odd.

Screen.Recording.2026-02-13.at.17.12.54.mov

The updated counts in the sidebar are a great touch!

[espy]

Hello @rossburton! I’ve fixed All The Things™.

The abint page has received all five fixes you asked for, including the old opacity behaviour :) The table is now fully visible down to 640px width, and below that overflows and becomes scrollable.

The bug triage page has also received all fixes. It’s been tidied up a lot, displaying much more information in the same space. In addition to your requests, I’ve also sorted out the header, which is now fixed to the top on small screens, for easier access to the navigation.

Super strange that the column sorting arrows worked for you on the bug triage page, but not on the abint page, they were done in the same way. I’ve changed them to svg icons though, just in case.

[rossburton]

On the bug triage page:

• The explanatory text at the top is indented, unlike the rest of the content, which looks odd. Can that be unintended?
• The current page indicates which section you're currently looking at in the sidebar, but with the redesign the indicator doesn't change as you scroll, only when you click.

[rossburton]

On the abint page, the colouring logic is still a bit funky. I wasn't precise about the existing logic: 30% overlay per occurrence and the alphas interact, so once is 30% blue, twice is ~50%, three times is ~70%. The new logic you've implemented is 30% per instance, so twice is 60% and three times is 90%. This means anything over 3 instances a week is basically solid blue.

However, we don't need to replicate that logic fully as it's just how my hack implementation ended up.

A simple page-wide 1 occurrence=30%, 10+ occurrences=100% with a linear progression between them should work.

[espy]

Alright, that should do it :)