Introducing Scorecard result viewer

[tegioz]

Hi! 👋

This is Sergio from CLOMonitor 🙂

Last week, when we were adding a new check to CLOMonitor for the presence of the OpenSSF Scorecard badge in the repositories' README files, we realized that the badge link points to the Scorecard API result endpoint. We wanted to display that information nicely in CLOMonitor, so we've built a small viewer for the report's json data.

We thought this could be useful outside of CLOMonitor, so instead of adding it as part of the CLOMonitor's UI, we've built it as an independent page that we could donate to you if you'd like. It's just a single self-contained HTML document that can be controlled via some query string parameters. It could serve as a nice badge link destination, for example 😇

You can see it live here. We'll probably tweak a few details over the next couple of days (i.e. some improvements for mobile devices), but it's mostly looking good.

If you'd rather it to continue living only in CLOMonitor for now, please feel free to use the instance we are serving if you'd like, even for the badges 😉 And of course any feedback to improve it is welcomed!

BTW thank you all for the great work done here! Most of CLOMonitor's security checks rely on Scorecard and it has worked great for us ❤️

[naveensrinivasan]

@tegioz This is AMAZING!!! Thank you!!

@ossf/scorecard-maintainers 👀

[evverx]

Thanks! Those dashboards look great on all sorts of devices (including watches).

I wonder if it would be possible to sort the checks by "severity"? I think the "vulnerabilities" check (which is currently at the bottom) should be higher than "CII-Best-Practices-Badge". An additional option would be to sort by "severity" and within those groups by "scores" (if the use case is to make it easier to figure out what needs addressing).

Also depending on who looks at dashboards things like

look scary because in most contexts it means that something is really wrong somewhere. As far as I understand the green line kind of indicates that it's good but maybe it could somehow signal that "10" is good more prominently.

Looks like the text can't be copy-pasted:

clomonitor-scorecard.mov

(it's Chrome Version 113.0.5672.92 (Official Build) (x86_64))

Anyway it doesn't really matter as long as it isn't json. Thanks again!

[spencerschrock]

I think the page looks great!

If it's a static page, it could certainly be hosted on the Netlify portion of Scorecard's website.
I'd have to think about whether or not this is better than keeping it with clomonitor.

[tegioz]

Thanks! And thank you for the feedback @evverx!

We've just deployed some additional changes:

• Ability to sort checks by multiple criteria
  • Controlled by the new sort_by and sort_direction params
• Added extra symbol to the check score to make its meaning clearer
• Added tooltips to check score and risk level
• Fixed issue selecting text

[evverx]

Now that I can sort the checks I think -1 is tricky in terms of visualization. They are kind of neutral but some of them (like "packaging") are more neutral than "branch-protection" (and I think "branch-protection" is almost always -1 because adding a PAT isn't worth it). I have to admit I don't know how to convey it. Maybe those nuances would be better conveyed by the scorecard output somehow.

Anyway all I can say is that those dashboards are great. Thank you! I think badges should certainly point to them (once it's decided where they should officially live).

[spencerschrock]

In the scorecard default output we replace -1 with a ?, which is one possibility.

[evverx]

I think something like "? Packaging" indicates that it's unknown whether a project publishes packages on GitHub while in reality it usually means that packages aren't published and this check isn't applicable to that particular project at all (i.e. I think "n/a Packaging" makes more sense). "Branch-Protection" is different (though there "n/a" could mean "not available" instead of "not applicable" but if it's almost always "n/a" it isn't clear why it should be shown at all).

Also looking at

it seems -1 is also used for internal errors. I think ideally they should be in a separate group to make it easier for whoever looks at dashboards to identify scorecard issues and direct bug reports/complains to the right place.

[tegioz]

We've replaced -1 with ? for now, to match scorecard's output. But we'd be happy to switch to something else if needed. Entries with ? have been pushed to the bottom of the list as well.

[evverx]

Entries with ? have been pushed to the bottom of the list as well

I think as long as they are grouped at the bottom "?" should do. It's certainly better than "n/a"'s scattered all over the place I was proposing here :-)

It seems in dark mode selected areas aren't highlighted:

dark-mode-selection.mov

(on an absolutely unrelated note, I wonder what "CLO" stands for? My guess was that it's some level objectives but I can't seem to figure out what "C" is. Sorry for the off-topic. I'm just curious).

[tegioz]

It seems in dark mode selected areas aren't highlighted:

Thanks, we'll take care of it soon 👍

(on an absolutely unrelated note, I wonder what "CLO" stands for? My guess was that it's some level objectives but I can't seem to figure out what "C" is. Sorry for the off-topic. I'm just curious).

It comes up every now and then, please see cncf/clomonitor#746 🙂 CLOTributor is another member of the CLO family 😉

[tegioz]

Hi @evverx

It seems in dark mode selected areas aren't highlighted

In what OS are you experiencing this issue? We can't reproduce it in any browser in MacOS. We've also observed an alignment issue in the risk level badge in your video, so we'd like to take a look at that as well.