Quetz maintainers dashboard mockups

[jaimergp]

📌 Summary

Investigate and design prototype mockups with the desired features for the maintenance board

📝 Background

conda-forge.org/status offers a "maintainers dashboard" with information about:

• Operational status of many of the services that conda-forge relies on, including CI, bots, CDN cloning, webservices, documentation...
• Ongoing migrations (collection of PRs automatically issued by the bots)
• Communication about known incidents

This panel has grown organically over the years without significant UX or accessibility analysis.
We will provide mockups that offer the same functionality with a consistent UI informed by best practices in UX and accessibility.

🚀 Tasks / Deliverables

• Propose a modern conda-forge style guide (taking into account it might be adopted by the main conda-forge.org website too)
  • https://conda-forge.org/style-guide/, part of Redesigning conda-forge.org conda-forge/conda-forge.github.io#1971
• Survey the community for dashboard panel idea
  • There's a community effort to represent conda-forge 'health' in a dashboard. Example: https://osl-incubator.github.io/conda-forge-warning/.
  • For now, we will keep the original conda-forge.org/status information.
• Provide dashboard mockups following the results of the tasks above
  • https://www.figma.com/proto/rdSQ2UFHNgLeq80LMxkV48/Website?node-id=46-431&scaling=scale-down&page-id=0%3A1&starting-point-node-id=46%3A431

📅 Estimated completion

This task should be finished in the first six months.

ℹ️ References

• conda-forge.org/status (implemented in the conda-forge/status repo)

[SylvainCorlay]

cc @GabrielaVives

[GabrielaVives]

I have been investigating different design solutions for the conda-forge.org status website. For the moment I have focused mainly on the information architecture, trying to organise the information with more hierarchy.

Here is the link to the prototype

I illustrated how having a main page with a dashboard-style view could interact with other more detailed pages for each section. However, here the dashboard is scrollable with a left-panel menu to help users quickly access the information they are looking for.

I have detailed on the first page of the prototype what I have done already, and what I am planning on working on next. In the second page of the prototype, are a few tips for navigating through the prototype (built with figma). If you encounter any difficulties using it please don't hesitate to contact me.

Any comments or suggestions from users are welcome and would be greatly appreciated to help understand what information is the most important for you. Please either comment directly on the prototype, or summarise your thoughts in this thread.

I would be happy to organise a community meeting to talk about this topic and prioritise the next steps together?

[jaimergp]

Apologies for the ultra delayed response and thanks for sharing that @GabrielaVives! I took a look at the Figma canvas and I like what I see! It's also my first time properly navigating a multi-page canvas so I'll be honest and confess that at some point I was lost 😬 So there's a chance I missed something?

I am happy to go on a 1:1 call anytime (check my Calendly here), but the team is conveniently meeting next Monday at 4PM CET (see here for details), so that'd also be a good time to share the work with the grant team. We can then iterate and share it with the broader community on the next conda-forge core call (Wednesday 8th, 6PM CET). As you wish! And again, apologies for only replying to this after two weeks!

[GabrielaVives]

No worries, the link is a bit outdated now as I have changed quite a few things since, so it's normal that it confused you. Sorry, I haven't updated the link yet.

Here is the latest version, it may make more sense !

Anyways I will walk you through when we have a call.
I'll have a look at your calendar and send you an invite soon!

[jaimergp]

Thanks for the update and wow that new version looks awesome! ✨ Loving it <3
I'll wait for the invite.

[jaimergp]

Gabriela and I met today.

We reviewed the dashboard mockups and provided some items for feedback and discussion. Namely:

• Users will come to the dashboard looking for answers about why their feedstock has not received an automated PR (migration, version update, etc). This info falls under the "Automation reports" umbrella. Maintainers might also be interested in having an overview of how key migrations are going.
• Another key piece of information we can show is the "Health status" of the organization as a whole. Not just the ongoing incidents, or how the different infrastructure elements are operationally, but also how the community is in terms of open issues without an answer, or PRs pending a review. Unattended conda-forge/* (team) mentions can also be collected here.

We will present the mockups in the conda community call today for more feedback, iterate a bit and re-present in next week's conda-forge call.

[GabrielaVives]

We have been thinking about introducing a new page that would list all the packages in a table, with information on their status, what other packages they are waiting for, what migrations are they involved in, etc.

This would allow user to search for a specific package and see all the dependencies, instead of having to search through a table of migrations using ctrl+F.

Do you see a use in this way of displaying this information ? Would there be any other or different columns you would add?

[jaimergp]

From today's conda-forge core call:

@mbargull:

If direct links à la <dashboard-url>/migrations/<migration-name> would be possible, that'd be awesome :).

@dbast:

Any ideas how to implement that? A fancy python holoviz panel with interactive pyscript elements? Very nice.

@SylvainCorlay:

I would go with good old web development. Mostly frontend.

@jaimergp:

Yea, ideally JSON-backed clientside only, no backend

@hmaarrfk:

While not in the status page, we have https://conda-forge.org/feedstock-outputs/ which is an important discovery tool. I feel like this is similar to the "packages" page which you dis (...)

is the "issues" taking the space of "Announcements"? I've seen a few important announcements from John before for critical issues.

Something that would help me from a conda-forge perspective is finding what packages a given user maintains. (another idea for the "dashboard", but admittedly a new "feature" and less of a "reorganization")

[jaimergp]

I see a package (or, more accurately, feedstocks) involved in these potential scenarios:

New version updates:

• Having update PRs available, but unattended.
• Having an issue with update detections.

Migrations:

• Having a migration PR available, but unattended.
• Having a pending migration (waiting on parents).
• Having an issue with normal migration operations (errors, failures).

This global view of feedstocks would also allow us to implement other metrics, like the maintainers search, or which artifacts a feedstock produces. However, as stated in the call by other members, it's true that it might be technically challenging to provide all that info in a performant way given that we have almost 19K feedstocks. UI pagination and/or on-demand search might be required.

However, thinking about it in a different way, what would a like a "feedstock details" card/section would look like? I could imagine a detailed feedstock card with info like:

• Name
• Maintainers
• Outputs it produces
• Open Issues (no reply / need attention / potentially stale / go figure)
• Open PRs (same as issues)
• Awaiting migrations / version updates
• Errors with automation
• "Health score": are maintainers active, last update, etc
• Some fun stuff like: feedstock anniversary, badges like >1M downloads or >1K artifacts, top X popularity, etc.

[beckermr]

I'm wondering if we'd like to emulate at least in part the status pages of other major services like

• github (https://www.githubstatus.com/)
• travis (https://www.traviscistatus.com/)
• quay.io (https://status.quay.io/)
• gitlab (https://status.gitlab.com/)
• twitter (https://api.twitterstat.us/)
• docker hub (https://status.docker.com/pages/533c6539221ae15e3f000031)
• circle ci (https://status.circleci.com/)
• amazon (https://health.aws.amazon.com/health/status)
• azure (https://status.azure.com/en-us/status)

There is a pretty standard visual language for status pages. Usually, this is a big banner at the top that is color coded with details in a single-page that simply scrolls down with components stacked vertically instead of on a large grid.

I don't know why exactly all of these services choose to do things this way, but for sure it appears to make the page simpler to grok quickly and find the primary bits of information that are important, namely the current status at the top and any incident details right below.

[jaimergp]

@GabrielaVives - can you post the link to the figma file you showed today in our call? Thanks! 🙏

[GabrielaVives]

Here is the current state of the prototype: https://www.figma.com/proto/rdSQ2UFHNgLeq80LMxkV48/Website?node-id=46-431&scaling=scale-down&page-id=0%3A1&starting-point-node-id=46%3A431

[trallard]

Hey @GabrielaVives - I wanted to check how the progress on the dashboard is going.

@jaimergp and I were wondering if we could schedule a call soonish - ideally in the next couple of weeks - to do some design review/critique on this. Let us know what you think.

[GabrielaVives]

Hi @trallard ! Yes sure, I have been making good progress but haven't updated anything this week. We could setup a call next week?

[trallard]

Hey @GabrielaVives thanks for your patience - we just got back from our company offsite so @jaimergp will be organising a call in the upcoming days to align on this

[jaimergp]

This is complete. See #17 for updates in the implementation.