improve release page with extra info

[lucabello]

Summary

The current status page at https://releases.juju.is/ could be enriched with extra useful data. This PR aims to improve the page with CI and CharmHub information, to make it a more accurate representation of the team's repositories and a better self-monitoring tool.

Here you can see a preview of the changes being proposed, going from: to: (the images' purpose is to show how the information would be structured)

Changes Details

What it would add

This PR introduces two main additions: CI status and CharmHub releases.

The current prototype presents the CI information in line with the rest; this doesn't thicken the row (because of the "Latest Releases") and allows teams to monitor their repositories more effectively.

The CharmHub releases would be displayed in a collapsible row, to avoid cluttering the screen, and show the current revision for each release track and channel, together with its release date. This information can be critical when multiple charms need to be promoted from edge to stable, as it allows monitoring the promotion status across all repositories (which is currently not possible anywhere else).

How it would happen

The releases page includes a wide variety of repositories: some are charms, some run CIs, some are more bare-bones. Moreover, different teams can use different nomenclatures for CI steps and release channels; it's not possible to know a priori which CI is relevant and which isn't.

The idea is to have the teams "opt-in" by adding the CI badges in each README.md; releasegen will then scrape the README.md of each project and visualize the status of those steps only.
CharmHub releases would follow a similar approach; to show them in the page, the README.md should contain the CharmHub badge (found at https://charmhub.io/<charm-name>/badge.svg) This way, the repository maintainers can have more control on this process, and we can avoid to "automatically detect" a charm through different repository structures and nomenclatures. If the badge is not found in the README.md, the button would be disabled.

releasegen

It's clear that the data received by this repo will need to be adjusted for this use case; I'll open a PR for that soon and link it here.

Final Notes

Any comment or suggestion is very welcome!

[lucabello]

Thanks for this first review! The layout already looks better now, as I:

• moved the icons in a separate column next to the repo name
• resize columns for a better layout So make sure to pull the newest changes :)

The header of the CI column is "Continuous Integration" just because the column needs to be large enough for badges; it looks uglier on teams where that column is fully empty (it shouldn't be, as people update their READMEs), but changing it makes it uglier on columns where the badge is there. I don't really have a problem changing it though if you still think it looks better!

I moved the links to a separate small column next to the name; I'd be okay to remove it altogether, but I'd like to have a CharmHub link somewhere regardless. Is there a better place for it?

(as per the JavaScript changes, I'm on to them!)

[jnsgruk]

The header of the CI column is "Continuous Integration" just because the column needs to be large enough for badges; it looks uglier on teams where that column is fully empty (it shouldn't be, as people update their READMEs), but changing it makes it uglier on columns where the badge is there. I don't really have a problem changing it though if you still think it looks better!

Ah fair enough - maybe just "Status"? I think the badges should be centre aligned too, given that they're all such different widths :)

It might be worth adding some placeholder in that column (perhaps in greyed out text) where there are no badges present too?

I'll take a look at the style changes shortly and come back!

[jnsgruk]

So that is looking better - thanks for the quick update!

You can see the effects of that wide CI column best here:

To me the alignment of the Latest Releases column still looks off compared to https://releases.juju.is, though?

And we still need to find somewhere less glaring for those expander/show/hide buttons to live - I'll have a think, but maybe glance through the examples on the vanilla page -- maybe a dropdown in the nav in the very top right under a :gear: icon or something?

[lucabello]

I've made some further changes and things should be more in line with your comments now :)

The repository link is in the name, and I moved the CharmHub link in the collapsed page, as it's only relevant for charms anyway. Should be much better now!

Also the CI badges are now centered and there is some placeholder!

For the buttons outside the table they are indeed awkward there; I'll try to put that ⚙️ to show them somewhere above the table possibly!

[lucabello]

There is now a dropdown for those two "table filters" at the top-right corner of the table!

JavaScript files have been improved and fixed with prettier, so all major concerns should be addressed now :)

[jnsgruk]

This is starting to look really smart, thanks Luca!

A couple more points:

Can you remove the border box around that paragraph and just merge it into the paragraph above? No need for it to be some prominent. Perhaps we could put the whole section about how to be included into an Accordion element titled "Need help getting your repo included here?" that is collapsed by default?

Another uber-nit...

I think the columns should be in the order:

Name / Latest Release / Status / Commits Since / [info symbol] (see p-icon-information)

Note that I dropped the "Charmhub" column and replaced with the "info" icon -- I think if there are badges (i.e. not the placeholder), then we should render the expand button, and if not the entire expanded table row and button should not be rendered

Finally... can we centre the "Commits Since" and status columns :)

[jnsgruk]

Oh! And you broke my "eye" icon links ;-)

[lucabello]

Your comments have been addressed!

The expand button is tied to the repo holding a charm, not to the CI stages; I assumed you meant that for both CI and Expansion, you want the whole column to be hidden if there is no actionable information for all charms in a specific team; that's done now!

Basically the page will look the same as before for teams that don't modify their READMEs at all; I was in any case preparing a Discourse post to spread the news to people to publish after all the changes are merged.

A small note you might not have noticed, which maybe concerns more the releasegen PR; currently:

1. repos that have no releases are filtered out and not displayed
2. archived repos are displayed

I changed this in the PR so that:

1. repos are displayed regardless of releases being there (some repos might have no GitHub release but hold important code (e.g. CI workflows) for which you will want to see the CI status). We could add an extra item to the dropdown menu to hide the repos without release if you deem it useful, but I think the default should be to show them
2. archived repos are not displayed; this is because an archived repo with failing CI / unreleased commits will show as "failing" forever, which is counterproductive when you want to look at the status of your repos; also here, I wouldn't mind adding a button to show archived repos as well, but I believe they should be hidden by default

Let me know what you think about these points, or if you have any other remarks on the page in general!

[lucabello]

As discussed outside this PR, repos without GitHub releases now display the latest commit in a similar fashion. Repos without any commits (or archived repos) will not be shown (releasegen will cut them off).

Things currently look like this:

(updated to reflect latest commits)

[lucabello]

Everything should be good now :) I would still wait for https://github.com/jnsgruk/releasegen/pull/1 to be merged before merging this one, just in case we end up restructuring the JSON

Once you confirm everything looks good, I'll also remove the data.json from the PR !